/** Shopify CDN: Minification failed

Line 100:11 Unexpected "{"
Line 100:20 Expected ":"
Line 109:11 Unexpected "{"
Line 109:20 Expected ":"
Line 5921:14 Unexpected "{"
Line 5921:23 Expected ":"
Line 5927:14 Unexpected "{"
Line 5927:23 Expected ":"
Line 5931:14 Unexpected "{"
Line 5931:23 Expected ":"
... and 6 more hidden warnings

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:awards (INDEX:2) */
.awards {
  box-sizing: border-box;
  overflow: visible;
  position: relative;
}

/* Tooltip is appended to body — no section z-index elevation needed */

/* Anula base.css (.section--full-width.section--full-width-margin > *), que mete --page-margin en los lados */
.awards.section.section--full-width.section--full-width-margin > .awards__inner {
  padding-inline: 0;
}

.awards__inner {
  width: 100%;
  max-width: min(var(--w-fluid, 88vw), var(--max-w-m, 1260px));
  margin-inline: auto;
  padding: 0;
  box-sizing: border-box;
  overflow: visible;
}

.awards__grid {
  display: flex;
  flex-direction: column;
  gap: var(--theme-space-10, 40px);
  width: 100%;
  overflow: visible;
}

@media screen and (min-width: 750px) {
  .awards__grid {
    gap: 60px;
  }
}

@media screen and (min-width: 990px) {
  .awards__grid {
    gap: 0;
  }
}

@media screen and (min-width: 990px) {
  .awards__grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    column-gap: 10px;
    row-gap: 0;
    align-items: start;
  }

  .awards__intro {
    grid-column: 1 / span 3;
  }

  .awards__list {
    grid-column: 5 / span 4;
  }
}

/* Intro: mobile = centrado (Figma 275:8320); z-index bajo la lista para que el hover pueda tapar si hace falta */
.awards__intro {
  position: relative;
  z-index: 1;
  text-align: center;
}

.awards__title {
  margin: 0;
}

.awards__sub {
  margin: 0 auto;
  max-width: 340px;
}

@media screen and (max-width: 749px) {
  /* En mobile, el título con `text-h4` puede quedar chico.
     Forzamos la escala DS de `text-h2` (32px min) solo en mobile. */
  #Awards-{{ section.id }} .awards__title {
    font-family: var(--u1-font-family) !important;
    font-size: clamp(2rem, calc(2rem + 1 * ((100vw - 23.4375rem) / 66.5625)), 3rem) !important;
    line-height: clamp(2.28rem, calc(2.28rem + 1.2 * ((100vw - 23.4375rem) / 66.5625)), 3.48rem) !important;
    letter-spacing: 0 !important;
    font-weight: var(--text-h-fw) !important;
  }

  /* Más aire entre título y subtítulo gris en mobile */
  #Awards-{{ section.id }} .awards__sub {
    margin-top: var(--u1-space-3, 12px);
  }
}

@media screen and (min-width: 750px) {
  .awards__intro {
    text-align: start;
  }

  .awards__sub {
    margin: 0;
    max-width: 480px;
  }
}

@media screen and (min-width: 990px) {
  .awards__sub {
    max-width: none;
  }
}

.awards__list {
  overflow: visible;
  position: relative;
  z-index: 2;
}

/* Filas: la fila no cambia en hover; la tarjeta glass es otro elemento flotante encima */
.awards__row {
  --awards-glass-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --awards-glass-dur: 280ms;
  position: relative;
  z-index: 1;
  overflow: visible;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  column-gap: var(--theme-space-4, 16px);
  padding: var(--u1-space-6, 24px) var(--theme-space-1, 4px);
  border-bottom: 1px solid rgb(var(--color-foreground-rgb) / 0.12);
  box-sizing: border-box;
  width: 100%;
}

@media screen and (max-width: 989px) {
  /* En tablet/mobile: primera columna más ancha */
  .awards__row {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 0.8fr);
  }
}

.awards__row--data:last-child {
  border-bottom: none;
}

@media (hover: hover) and (pointer: fine) {
  .awards__row--data {
    cursor: pointer;
  }
}

.awards__cell {
  position: relative;
  z-index: 0;
  min-width: 0;
}

.awards__cell--award {
  justify-self: start;
  text-align: start;
  min-width: 0;
}

.awards__award-anchor {
  position: relative;
  display: inline-flex;
  align-items: flex-end;
  max-width: 100%;
}

.awards__award-name {
  display: inline;
}

.awards__cell--product {
  justify-self: center;
  text-align: center;
}

.awards__cell--year {
  justify-self: end;
  text-align: end;
}

/*
  Floating tooltip — appended to <body> via JS, follows the mouse.
  Fully outside the section stacking context = always on top.
*/
/* Cuerpo del hover: logo + textos, gap 24px entre logo y bloque de título. */
.awards__hover-body {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
  min-width: 0;
}

.awards__hover-logo-wrap {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 120px;
}

/* Altura de visualización (~56px); antes sizes:80px forzaba src pequeño y se veía enano. */
.awards__hover-logo {
  display: block;
  height: 56px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.awards__row-hover__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.awards__tooltip {
  position: fixed;
  z-index: 99999;
  display: block;
  width: max-content;
  min-width: 232px;
  max-width: min(360px, calc(100vw - 24px));
  padding: var(--u1-space-4, 16px);
  border-radius: 12px;
  box-sizing: border-box;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.96) translateY(4px);
  transition:
    opacity 200ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
  background:
    linear-gradient(var(--u1-glass-fill-md-1, rgba(255, 255, 255, 0.02)), var(--u1-glass-fill-md-1, rgba(255, 255, 255, 0.02))),
    linear-gradient(var(--u1-glass-fill-md-2, rgba(250, 250, 250, 0.72)), var(--u1-glass-fill-md-2, rgba(250, 250, 250, 0.72)));
  border: 1px solid var(--u1-glass-stroke, rgba(255, 255, 255, 0.2));
  backdrop-filter: blur(var(--u1-glass-blur-md, 40px)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--u1-glass-blur-md, 40px)) saturate(180%);
  box-shadow:
    var(--u1-glass-outer-shadow, 0 8px 40px 0 rgba(0, 0, 0, 0.08)),
    var(--u1-glass-inner-shadow-md, inset 0 0 20px 0 rgba(255, 255, 255, 0.25));
}

.awards__tooltip--visible {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.awards__tooltip .awards__row-hover__title {
  margin: 0;
  color: #0d0d0d;
}

.awards__tooltip .awards__row-hover__desc {
  margin: 0;
  color: rgba(13, 13, 13, 0.56);
}

/* Hide the inline hover cards — tooltip replaces them on desktop */
.awards__row-hover {
  display: none;
}


.awards__empty-hint {
  margin: 0;
  padding: var(--u1-space-6, 24px) var(--theme-space-1, 4px);
}

@media (prefers-reduced-motion: reduce) {
  .awards [data-u1-reveal] {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  .awards__row-hover {
    transition: none;
  }

  @media (hover: hover) and (pointer: fine) {
    .awards__row:hover .awards__row-hover {
      transform: none;
    }
  }
}
/* END_SECTION:awards */

/* START_SECTION:collection-links (INDEX:5) */
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:12) */
.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:13) */
.utilities {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap);
    text-wrap: nowrap;
    border-top: var(--border-width) solid 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 {
    color: var(--color-foreground-muted);
  }

  .utilities > * {
    text-align: center;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* START_SECTION:header-announcements (INDEX:15) */
.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;
    text-align: center;
  }

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

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

/* START_SECTION:header (INDEX:16) */
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 inherit 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: inherit;
      --color-foreground-rgb: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;
      --color-primary-button-background: inherit;
      --color-primary-button-text: inherit;
    }

    /* 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-color-scheme='top']:hover .header__row--top,
  [data-transparent-color-scheme='top']:focus-within .header__row--top,
  [data-transparent-color-scheme='both']:hover .header__row--top,
  [data-transparent-color-scheme='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-color-scheme='bottom']:hover .header__row--bottom,
  [data-transparent-color-scheme='bottom']:focus-within .header__row--bottom,
  [data-transparent-color-scheme='both']:hover .header__row--bottom,
  [data-transparent-color-scheme='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-heightened);
  }

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

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

  .header-section:has(> #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-sticky);
  }

  .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-scheme-top-row) 0 var(--top-row-height),
      var(--color-scheme-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-scheme-top-row) 0 var(--top-row-height),
      var(--color-scheme-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, make underlay inherit colors from header component */
  [data-transparent-color-scheme='top']:hover,
  [data-transparent-color-scheme='top']:focus-within,
  [data-transparent-color-scheme='both']:hover,
  [data-transparent-color-scheme='both']:focus-within {
    :is(.header__underlay-open, .header__underlay-closed) {
      --color-scheme-top-row: var(--color-background);
    }
  }

  /* When bottom row has transparent background, make underlay inherit colors from header component */
  [data-transparent-color-scheme='bottom']:hover,
  [data-transparent-color-scheme='bottom']:focus-within,
  [data-transparent-color-scheme='both']:hover,
  [data-transparent-color-scheme='both']:focus-within {
    :is(.header__underlay-open, .header__underlay-closed) {
      --color-scheme-bottom-row: var(--color-background);
    }
  }

  [data-submenu-overlap-bottom-row] {
    .header__underlay-open {
      background: linear-gradient(
        var(--color-scheme-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 color scheme, 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 color scheme, background is controlled by the underlays */
    background-color: transparent;

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

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

  @media screen and (max-width: 749px) {
    .header__row--top:not(.divider--page-width),
    .header__row--top.divider--page-width .header__columns {
      border-bottom-width: var(--border-bottom-width-mobile);
    }
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

      &: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);
  }

  /* When the header is transparent, and when there is no header-section below it, offset the first main-section with
     * the height of the header
     */

  main > .shopify-section:first-child .section:not(.disable-section-top-offset) {
    &.spacing-style,
    .spacing-style {
      --section-top-offset: calc(var(--header-height) * var(--transparent-header-offset-boolean));

      /* Any nested sections should not be offset */
      :is(.spacing-style, .inherit-spacing) {
        --section-top-offset: 0px;
      }
    }

    /* Make sticky content immediately stick to the top of the page */
    .sticky-content {
      margin-top: calc(var(--header-height) * var(--transparent-header-offset-boolean) * -1);
    }
  }

  /* 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-primary-hover-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(.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:17) */
.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:18) */
.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:19) */
.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:lp-flash-deals (INDEX:20) */
.lp-fd {
  --fd-sans: var(--u1-font-family, "Neue Montreal", -apple-system, "Helvetica Neue", Arial, sans-serif);
  --fd-text: var(--u1-font-family-text, var(--fd-sans));
  --fd-mono: var(--u1-font-family-mono, "IBM Plex Mono", ui-monospace, Menlo, monospace);
  --fd-ease: cubic-bezier(.2, .8, .2, 1);
  --fd-m: 64px;
  --sx: max(var(--fd-m), calc((100cqw - var(--fd-max, 1160px)) / 2));
  --stagger-dur: 500ms; --stagger-distance: 12px; --stagger-stagger: 40ms; --stagger-blur: 3px; --stagger-ease: cubic-bezier(.22, 1, .36, 1);
  display: block; container: lpfd / inline-size; overflow: hidden;
  padding-top: var(--fd-pt, 180px); padding-bottom: var(--fd-pb, 80px);
  background: var(--fd-bg, #fafafa); color: #0d0d0d; font-family: var(--fd-sans);
}
@media (max-width: 1023px) { .lp-fd { --fd-m: 32px; } }
@media (max-width: 799px) { .lp-fd { --fd-m: 18px; } }
.lp-fd *, .lp-fd *::before, .lp-fd *::after { box-sizing: border-box; }
.lp-fd [hidden] { display: none !important; }
.lp-fd :is(h2, h3, p) { letter-spacing: inherit; text-transform: none; }
.lp-fd button { -webkit-appearance: none; appearance: none; font: inherit; color: inherit; }
.lp-fd.is-paused, .lp-fd.is-paused *, .lp-fd.is-paused *::before, .lp-fd.is-paused *::after { animation-play-state: paused !important; }

.lp-fd .fb-hero { display: flex; justify-content: center; padding: 0 var(--sx) 100px; text-align: center; }
.lp-fd .fb-hero-in { display: flex; flex-direction: column; align-items: center; gap: 60px; }
.lp-fd .fb-big {
  --stagger-dur: 900ms; --stagger-distance: .22em; --stagger-stagger: 60ms; --stagger-blur: 10px;
  display: flex; flex-direction: column; align-items: center; gap: .242em; font: 500 124px/.6774 var(--fd-sans);
}
.lp-fd .fb-t { margin: 0; font: inherit; color: #0d0d0d; white-space: nowrap; }
.lp-fd .fb-t .rv { display: inline-block; }
.lp-fd .fd-tag {
  margin: 0; padding: 0 6px; border-inline: 1px solid #000; font: 400 11px/1 var(--fd-mono); letter-spacing: .66px;
  text-transform: uppercase; color: #000; white-space: nowrap; text-box: trim-both cap alphabetic;
}
.lp-fd .fd-tag i { font-style: normal; color: rgba(0, 0, 0, .4); }
.lp-fd .fb-clock { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lp-fd .fb-clock[data-pending] { visibility: hidden; }
.lp-fd .fb-clock .t-digit:not(.is-sep, .is-unit) { width: .6em; text-align: center; }
.lp-fd .fb-clock .t-digit.is-unit { margin-right: .2em; }
.lp-fd .fb-clock .t-digit {
  padding-block: .2em; margin-block: -.2em;
  background: linear-gradient(rgba(13, 13, 13, var(--fd-ga, .55)) .2em, rgba(255, 146, 122, var(--fd-ga, .55)) .7765em, rgba(233, 196, 187, var(--fd-ga, .55)) .8774em),
    linear-gradient(rgba(13, 13, 13, .85) .2em, rgba(255, 146, 122, .85) .7765em, rgba(233, 196, 187, .85) .8774em);
  background-blend-mode: normal, screen;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lp-fd .fb-clock { --digit-dur: 500ms; --digit-distance: .14em; --digit-stagger: 70ms; --digit-blur: 4px; --digit-ease: cubic-bezier(.34, 1.45, .64, 1); }
@keyframes lp-fd-digit-in {
  0% { transform: translateY(calc(var(--digit-distance) * -1)); opacity: 0; filter: blur(var(--digit-blur)); }
  100% { transform: none; opacity: 1; filter: blur(0); }
}
.lp-fd .t-digit-group { display: inline-flex; align-items: baseline; }
.lp-fd .t-digit { display: inline-block; will-change: auto; }
.lp-fd .t-digit-group.is-animating .t-digit { animation: lp-fd-digit-in var(--digit-dur) var(--digit-ease) both; }
.lp-fd .t-digit-group.is-animating .t-digit[data-stagger="1"] { animation-delay: var(--digit-stagger); }
.lp-fd .t-digit-group.is-animating .t-digit[data-stagger="2"] { animation-delay: calc(var(--digit-stagger) * 2); }
.lp-fd .t-digit-group.is-animating .t-digit[data-same] { animation: none; }
.lp-fd .fb-ms { display: inline-flex; vertical-align: top; margin-left: .06em; font-size: .42em; }
.lp-fd .fb-clock .fb-ms .t-digit {
  background-image: linear-gradient(rgba(13, 13, 13, var(--fd-ga, .55)) .2em, rgba(255, 146, 122, var(--fd-ga, .55)) 1.5926em, rgba(233, 196, 187, var(--fd-ga, .55)) 1.8129em),
    linear-gradient(rgba(13, 13, 13, .85) .2em, rgba(255, 146, 122, .85) 1.5926em, rgba(233, 196, 187, .85) 1.8129em);
}
@property --fd-ga { syntax: '<number>'; inherits: true; initial-value: .55; }
.lp-fd .fb-clock { animation: lp-fd-ga .9s ease-in-out infinite alternate; }
@keyframes lp-fd-ga { from { --fd-ga: .55; } to { --fd-ga: .15; } }

.lp-fd .fd2-head { display: flex; align-items: center; align-content: center; justify-content: space-between; gap: 24px; min-height: 84px; padding-inline: var(--sx); }
.lp-fd .fd2-t { margin: 0; font: 500 45px/.6774 var(--fd-sans); color: #0d0d0d; white-space: nowrap; }
.lp-fd .fd2-clock { font: 500 45px/.6774 var(--fd-sans); }
.lp-fd[data-days]:not([data-days-only]) .fd2-head { flex-wrap: wrap; row-gap: min(11px, 2.2cqw); }

.lp-fd .fd { display: flex; flex-direction: column; gap: 64px; }
.lp-fd[data-head="compact"] .fd { gap: 45px; }
.lp-fd .fd-help {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; align-self: center; gap: 8px 10px; margin: 0;
  padding-inline: var(--sx); font: 400 13px/18px var(--fd-sans); color: rgba(29, 29, 31, .8); text-align: center;
}
.lp-fd .fd-help-b {
  padding: 4px 9px; border: 1px solid rgba(0, 0, 0, .2); border-radius: 1000px; background: none;
  font: 400 13px/18px var(--fd-sans); color: rgba(13, 13, 13, .8); text-decoration: none; transition: border-color .2s ease, color .2s ease;
}
.lp-fd .fd-help-b:hover { border-color: rgba(0, 0, 0, .45); color: #0d0d0d; }
.lp-fd .fd-help-b:focus-visible { outline: 2px solid #0d0d0d; outline-offset: 2px; }
.lp-fd .fd-rowwrap { position: relative; }
.lp-fd .fd-row {
  display: grid; grid-auto-flow: column; grid-auto-columns: 400px; padding-inline: var(--sx);
  overflow-x: auto; scroll-padding-inline: var(--sx); overscroll-behavior-x: contain; scrollbar-width: none;
}
.lp-fd .fd-row::-webkit-scrollbar { display: none; }
@property --fd-ink { syntax: '<color>'; inherits: true; initial-value: #0d0d0d; }
.lp-fd .fd-card {
  position: relative; display: grid; grid-row: span 3; grid-template-rows: subgrid; border-left: 1px solid #e3e3e3;
  overflow: clip; overflow-clip-margin: 60px;
  --fd-ink: #0d0d0d; --fd-hot: #ff3300; --fd-k: .9804;
  color: var(--fd-ink); transition: background-color .3s ease;
  --fd-streak: linear-gradient(90deg, rgba(217, 217, 217, 0) 0%, rgba(217, 217, 217, 0) 34.48%, rgba(235, 175, 156, .5) 40.69%, #dd806f 44.41%, #ff3300 48.76%, #ff3300 56.83%, rgba(235, 175, 156, .5) 60.55%, rgba(217, 217, 217, 0) 65.52%, rgba(217, 217, 217, 0) 100%);
}
.lp-fd .fd-card:last-child { border-right: 1px solid #e3e3e3; }
.lp-fd .fd-txt { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 15px; padding: 0 32px 32px; container: fdtxt / inline-size; }
.lp-fd .fd-rate { display: flex; align-items: center; gap: 5px; height: 14px; margin: 0; font: 600 14px/21px var(--fd-sans); }
.lp-fd .fd-rate > span { display: flex; align-items: center; gap: 4px; }
.lp-fd .fd-rate svg { display: block; flex: none; width: 14px; height: 14px; }
.lp-fd .fd-rate small { font: 500 14px/21px var(--fd-sans); opacity: .5; }
.lp-fd .fd-t { margin: 0; font: 500 20px/1.25 var(--fd-sans); letter-spacing: .3px; color: inherit; }
.lp-fd .fd-t .fd-sub { position: relative; display: block; width: fit-content; color: color-mix(in srgb, var(--fd-ink) 70%, transparent); }
.lp-fd .fd-sub-g {
  position: absolute; inset: 0; color: transparent; pointer-events: none; user-select: none;
  background-image: var(--fd-streak); background-size: 290% 100%; background-repeat: no-repeat; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text;
}
.lp-fd .fd-card.is-in .fd-sub-g { animation: lp-fd-streak 8s linear infinite; animation-delay: calc(var(--ei, 0) * 160ms + .8s); }
@keyframes lp-fd-streak {
  0% { background-position: 100% 0; animation-timing-function: cubic-bezier(.4, 0, .1, 1); }
  45%, 100% { background-position: 0% 0; }
}
.lp-fd .fd-price { display: flex; align-items: center; gap: 8px; min-height: 28px; }
.lp-fd .fd-p { display: flex; gap: 3px; margin: 0; font: 400 min(17px, 6.8cqi)/1 var(--fd-text); white-space: nowrap; }
.lp-fd .fd-price .ds-chip { --ds-chip-bg: #ffb3a1; flex: none; }
.lp-fd .fd-price .ds-chip b { font-size: min(14px, 5.6cqi); font-style: normal; letter-spacing: .05em; color: #0d0d0d; }
.lp-fd .fd-p s { color: color-mix(in srgb, var(--fd-ink) 50%, transparent); text-decoration-thickness: 1px; }
.lp-fd .fd-row.fx-in .fd-card:not(.is-in) .ds-chip { clip-path: polygon(-8px 0, .26px 0, -5.42px 100%, -8px 100%); }
.lp-fd .fd-card.is-in .ds-chip { animation: lp-fd-chip-in .65s cubic-bezier(.65, 0, .35, 1) backwards; animation-delay: calc(var(--ei, 0) * 160ms + .15s); }
@keyframes lp-fd-chip-in {
  from { clip-path: polygon(-8px 0, .26px 0, -5.42px 100%, -8px 100%); }
  to { clip-path: polygon(-8px 0, calc(100% + .26px) 0, calc(100% - 5.42px) 100%, -8px 100%); }
}
.lp-fd .fd-media { position: relative; align-self: start; overflow: hidden; }
.lp-fd .fd-img { position: relative; aspect-ratio: var(--fd-ar, 400 / 350); transition: scale .6s var(--fd-ease); transform-origin: 50% 62%; }
.lp-fd .fd-img img, .lp-fd .fd-img > svg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; pointer-events: none; }
.lp-fd .fd-img > svg { padding: 18%; fill: rgba(13, 13, 13, .12); }
.lp-fd .fd-img-on { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .4s ease; }
@media (hover: hover) { .lp-fd .fd-card:hover .fd-img-on { opacity: 1; } }
.lp-fd .fd-foot { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 32px 40px; }
.lp-fd .fd-left { position: relative; display: flex; align-items: flex-end; gap: 10px; margin: 0; }
.lp-fd .fd-left em {
  position: absolute; left: 0; bottom: calc(100% + 12px); font: 600 11px/1.26 var(--fd-sans); letter-spacing: .33px; font-style: normal;
  white-space: nowrap; text-box: trim-both cap alphabetic; opacity: 0; transition: opacity .3s ease;
}
.lp-fd .fd-left.is-low em { opacity: 1; }
.lp-fd .fd-left b { font: 600 32px/21px var(--fd-sans); text-box: trim-both cap alphabetic; transition: min-width .35s cubic-bezier(.22, 1, .36, 1); }
.lp-fd .fd-left > span {
  display: block; font: 400 10.5px/1.3 var(--fd-text); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  text-box: trim-both cap alphabetic;
}
.lp-fd .fd-left > span i { display: block; font-style: normal; }
.lp-fd .fd-left > span i:first-child { font: 700 10.5px/1.3 var(--fd-sans); }
.lp-fd .fd-left > span i:last-child { color: color-mix(in srgb, var(--fd-ink) 50%, transparent); }
@property --fd-beat { syntax: '<number>'; inherits: true; initial-value: 0; }
.lp-fd .fd-left b { animation: lp-fd-beat .9s ease-in-out infinite alternate; color: color-mix(in srgb, var(--fd-ink) calc(100% - var(--fd-beat) * 35%), transparent); }
@keyframes lp-fd-beat { from { --fd-beat: 0; } to { --fd-beat: 1; } }
.lp-fd .fd-left.is-low b { color: color-mix(in srgb, var(--fd-ink), var(--fd-hot) calc(var(--fd-beat) * 100%)); }
.lp-fd .fd-lvl {
  position: absolute; left: 0; top: calc(100% + 16px); width: 60px; height: 3px; background: color-mix(in srgb, var(--fd-ink) 33%, transparent);
  clip-path: polygon(0 0, 100% 0, calc(100% - 4px) 100%, 0 100%); animation: lp-fd-beat .9s ease-in-out infinite alternate;
}
.lp-fd .fd-lvl::after {
  content: ''; display: block; width: calc(var(--fd-lv, 1) * 100%); height: 100%; border-radius: 1.5px 0 0 1.5px; background: #f99d89;
  clip-path: polygon(0 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
}
.lp-fd .fd-left.is-low .fd-lvl::after { background: color-mix(in srgb, #f99d89, var(--fd-hot) calc(var(--fd-beat) * 100%)); }
.lp-fd .fd-out { display: none; font: 600 32px/21px var(--fd-sans); text-box: trim-both cap alphabetic; white-space: nowrap; color: color-mix(in srgb, var(--fd-ink) 50%, transparent); }
.lp-fd .fd-left.is-out > :is(em, b, span, .fd-lvl) { display: none; }
.lp-fd .fd-left.is-out .fd-out { display: block; }
.lp-fd .fd-go { position: absolute; inset: 0 0 auto; z-index: 1; display: block; aspect-ratio: var(--fd-ar, 400 / 350); }
.lp-fd .fd-card.is-photo .fd-go { z-index: 4; }
.lp-fd .fd-go:focus-visible { outline: 2px solid #0d0d0d; outline-offset: -2px; }
.lp-fd .fd-cfg { flex: none; margin-left: auto; white-space: nowrap; }
.lp-fd .fd-cfg .u1-btn__label { display: inline-flex; align-items: center; gap: 6px; }
.lp-fd .fd-cfg svg { width: 13px; height: 13px; }
.lp-fd .fd-cfg:focus-visible { outline: 2px solid #0d0d0d; outline-offset: 2px; }
.lp-fd .fd-cfg[disabled] { cursor: progress; }
.lp-fd .fd-copy .fd-cfg { pointer-events: none; }
.lp-fd .fd-card.is-added .fd-cfg { color: #fff !important; }
.lp-fd .fd-card.is-added .fd-cfg .u1-btn__inner { background: #35ba00 !important; border-color: #35ba00 !important; opacity: 1; }
.lp-fd .fd-card.is-error .fd-cfg { color: #fff !important; }
.lp-fd .fd-card.is-error .fd-cfg .u1-btn__inner { background: #c4161c !important; border-color: #c4161c !important; opacity: 1; }
@media (hover: hover) {
  .lp-fd .fd-card:hover { --fd-k: 1; background: #fff; }
  .lp-fd .fd-card:hover:not(.is-added, .is-error) .fd-cfg:not([disabled]) .u1-btn__inner {
    background: var(--interactive-bg-secondary-hover) !important; border-color: var(--interactive-stroke-secondary-hover) !important;
  }
  .lp-fd .fd-card:hover .fd-img { scale: 1.03; }
  .lp-fd .fd-card.is-photo:hover .fd-photo > img { scale: 1.03; transition: scale .6s var(--fd-ease); }
  .lp-fd .fd-card.is-fx:hover .fd-photo > img { scale: 1.03; transition: none; }
}

@property --fd-fx { syntax: '<number>'; inherits: true; initial-value: 1; }
.lp-fd .fd-glow, .lp-fd .fd-white { position: absolute; inset: 0; pointer-events: none; }
.lp-fd .fd-glow { opacity: calc(1 - var(--fd-fx)); filter: grayscale(1) brightness(5); mix-blend-mode: plus-lighter; }
.lp-fd .fd-white { opacity: clamp(0, 1 - var(--fd-fx) / .05, 1); filter: url(#lp-fd-sil); }
.lp-fd .fx-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.lp-fd .fd-row.fx-in .fd-card:not(.is-in) .fd-img { visibility: hidden; }
.lp-fd .fd-card.is-in:not(.is-done) .fd-img {
  filter: blur(calc(10px * clamp(0, 1 - var(--fd-fx) / .6, 1))) brightness(calc(var(--fd-k) + (1 - var(--fd-k)) * clamp(0, (var(--fd-fx) - .88) / .12, 1)));
  animation: lp-fd-fx .9s cubic-bezier(.45, 0, .55, 1) backwards; animation-delay: calc(var(--ei, 0) * 160ms);
}
@keyframes lp-fd-fx { from { --fd-fx: 0; } }
.lp-fd .fd-load {
  position: absolute; left: 50%; top: calc(50% - 37px); width: 72px; height: 2px; margin: -1px 0 0 -36px; overflow: hidden; pointer-events: none;
  background: rgba(13, 13, 13, .08); opacity: 0; transition: opacity .2s ease;
}
.lp-fd .fd-load::after {
  content: ''; position: absolute; inset: 0; background: var(--fd-streak);
  background-size: 290% 100%; background-repeat: no-repeat; background-position: 100% 0;
}
@keyframes lp-fd-load { to { background-position: 0% 0; } }
.lp-fd .fd-row.ld .fd-card:not(.is-ready) .fd-img { visibility: hidden; }
.lp-fd .fd-row.ld .fd-card:not(.is-ready) .fd-load { opacity: 1; transition-delay: .2s; }
.lp-fd .fd-row.ld .fd-card:not(.is-ready) .fd-load::after { animation: lp-fd-load 1.6s cubic-bezier(.4, 0, .1, 1) infinite; }

@property --fd-wipe { syntax: '<number>'; inherits: false; initial-value: 0; }
.lp-fd .fd-photo {
  position: absolute; inset: 0; z-index: 3; overflow: hidden; background: #121212; pointer-events: none; visibility: hidden;
  --fd-wipe: 0; clip-path: inset(0 0 calc((1 - var(--fd-wipe)) * 100%) 0); transition: --fd-wipe .55s cubic-bezier(.76, 0, .24, 1);
}
.lp-fd .fd-card:is(.is-photo, .is-fx) .fd-photo { visibility: visible; }
.lp-fd .fd-card.is-photo .fd-photo { --fd-wipe: 1; }
.lp-fd .fd-photo > img {
  position: absolute; left: -18.35%; top: 0; width: 141.26%; height: auto; min-height: 100%; max-width: none;
  aspect-ratio: 1200 / 1397; object-fit: cover; object-position: 50% 0;
  transform-origin: 43% 38%; transition: scale .28s cubic-bezier(.83, 0, .17, 1);
}
.lp-fd .fd-copy {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; --fd-ink: #fff; color: var(--fd-ink);
  --interactive-label-secondary: var(--alpha-white-100, #fff); --interactive-stroke-secondary: var(--alpha-white-15, rgba(255, 255, 255, .15));
  --interactive-bg-secondary-hover: var(--alpha-white-10, rgba(255, 255, 255, .1)); --interactive-stroke-secondary-hover: var(--alpha-white-15, rgba(255, 255, 255, .15));
}
.lp-fd .fd-copy-img { flex: none; aspect-ratio: var(--fd-ar, 400 / 350); }
.lp-fd .fd-copy .fd-foot { margin-top: auto; }
.lp-fd .fd-card.photo-dark .fd-copy {
  --fd-ink: #0d0d0d;
  --interactive-label-secondary: var(--alpha-black-100, #0d0d0d); --interactive-stroke-secondary: var(--alpha-black-15, rgba(13, 13, 13, .15));
  --interactive-bg-secondary-hover: var(--alpha-black-10, rgba(13, 13, 13, .1)); --interactive-stroke-secondary-hover: var(--alpha-black-15, rgba(13, 13, 13, .15));
}
.lp-fd .fd-card.photo-dark .fd-copy :is(.fd-sub-g, .fd-left.is-low b) { mix-blend-mode: normal; }
.lp-fd .fd-card.photo-dark .fd-copy .fd-sub-o { display: none; }
.lp-fd .fd-sub-o { display: none; }
.lp-fd .fd-copy .fd-sub-g { mix-blend-mode: plus-lighter; }
.lp-fd .fd-copy .fd-sub-g.fd-sub-o { display: block; mix-blend-mode: normal; opacity: .25; }
.lp-fd .fd-copy .fd-left.is-low :is(b, .fd-lvl) { --fd-hot: #ffa27e; }
.lp-fd .fd-tog {
  position: absolute; right: 11px; top: 50%; translate: 0 -50%; z-index: 5; display: none; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px; width: 24px; height: 36px; padding: 0;
  border: 0; border-radius: 1000px; background: rgba(255, 255, 255, .45);
  -webkit-backdrop-filter: blur(22px) saturate(1.2); backdrop-filter: blur(22px) saturate(1.2);
  box-shadow: 0 1px 6px rgba(0, 0, 0, .08); cursor: pointer; transition: background-color .2s ease, box-shadow .2s ease, scale .2s cubic-bezier(.22, 1, .36, 1);
}
.lp-fd .fd-card.has-photo .fd-tog { display: flex; }
.lp-fd .fd-tog i { display: block; width: 5px; height: 5px; border-radius: 50%; background: rgba(0, 0, 0, .2); transition: background-color .35s ease; }
.lp-fd .fd-tog i:first-child, .lp-fd .fd-card.is-photo .fd-tog i:last-child { background: rgba(0, 0, 0, .6); }
.lp-fd .fd-card.is-photo .fd-tog i:first-child { background: rgba(0, 0, 0, .2); }
.lp-fd .fd-tog:hover { background: rgba(240, 240, 240, .72); box-shadow: 0 1px 7px rgba(0, 0, 0, .11); scale: .92; }
.lp-fd .fd-tog:active { scale: .86; }
.lp-fd .fd-tog:focus-visible { outline: 2px solid #0d0d0d; outline-offset: 2px; }
.lp-fd .fd-tog::after {
  content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); translate: -50% 4px; padding: 6px 9px;
  border-radius: 6px; background: rgba(13, 13, 13, .86); font: 500 12px/1 var(--fd-sans); letter-spacing: .2px; color: #fff;
  white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .15s ease, translate .15s ease;
}
.lp-fd .fd-tog:hover::after { opacity: 1; translate: -50% 0; transition-delay: .6s; }
.lp-fd .fd-tog.tip-off::after { opacity: 0; transition-delay: 0s; }
@media (hover: hover) {
  .lp-fd .fd-tog { opacity: 0; transition: opacity .25s ease, background-color .2s ease, box-shadow .2s ease, scale .2s cubic-bezier(.22, 1, .36, 1); }
  .lp-fd .fd-card:hover .fd-tog, .lp-fd .fd-tog:focus-visible { opacity: 1; }
}

.lp-fd:is([data-cards="sep"], [data-cards="wide"]) { background: var(--fd-bg, #f4f4f4); }
.lp-fd:is([data-cards="sep"], [data-cards="wide"]) .fd-row { gap: 10px; padding-block: 32px; margin-block: -32px; }
@media (hover: hover) { .lp-fd:is([data-cards="sep"], [data-cards="wide"]) .fd-card:hover { box-shadow: 0 16px 40px -14px rgba(0, 0, 0, .14), 0 3px 10px rgba(0, 0, 0, .04); } }
.lp-fd:is([data-cards="sep"], [data-cards="wide"]) .fd-card {
  --fd-k: 1; border: 0 !important; border-radius: 8px; background: #fff; transition: background-color .3s ease, box-shadow .35s ease;
}
.lp-fd:is([data-cards="sep"], [data-cards="wide"]) .fd-photo { border-radius: 8px; clip-path: inset(0 0 calc((1 - var(--fd-wipe)) * 100%) 0 round 8px); }
@container lpfd (min-width: 900px) {
  .lp-fd[data-cards="wide"] .fd-row { padding-inline: 16px; scroll-padding-inline: 16px; grid-auto-columns: calc((100cqw - 32px - 20px) / 3); }
  .lp-fd[data-cards="wide"] .fd2-head { padding-inline: 48px; }
}

.lp-fd .fd-nav {
  position: absolute; top: 49%; z-index: 6; display: none; width: 48px; height: 48px; margin-top: -24px; padding: 0; border: 0;
  border-radius: 6px; overflow: hidden; background: rgba(210, 210, 215, .64); cursor: pointer;
  opacity: 0; transform: scale(.8); transition: transform .5s ease-in, opacity .7s cubic-bezier(.15, 0, .2, 1) .1s;
}
.lp-fd .fd-nav:not([disabled]) { opacity: 1; transform: scale(1); transition-duration: .5s; }
.lp-fd .fd-nav[disabled] { cursor: default; pointer-events: none; }
.lp-fd .fd-nav svg { display: block; width: 48px; height: 48px; }
.lp-fd .fd-nav svg path { fill: none; stroke: rgba(0, 0, 0, .56); stroke-width: 2; stroke-linecap: butt; stroke-linejoin: miter; transition: stroke .1s linear; }
.lp-fd .fd-nav:hover { background: hsla(240, 7%, 88%, .698); }
.lp-fd .fd-nav:active { background: hsla(240, 4%, 77%, .654); }
.lp-fd .fd-nav:is(:hover, :active) svg path { stroke: rgba(0, 0, 0, .64); }
.lp-fd .fd-nav--prev { left: 18px; }
.lp-fd .fd-nav--next { right: 18px; }
.lp-fd .fd-nav:focus-visible { outline: 2px solid #0071e3; outline-offset: 3px; }
.lp-fd .fd-bar { display: none; position: relative; height: 2px; margin: 28px var(--sx) 0; overflow: hidden; border-radius: 2px; background: rgba(13, 13, 13, .1); }
.lp-fd .fd-bar i {
  position: absolute; inset: 0 auto 0 0; width: calc(var(--fd-pw, 1) * 100%); border-radius: inherit; background: rgba(13, 13, 13, .6);
  transform: translateX(calc(var(--fd-px, 0) / var(--fd-pw, 1) * 100%));
}
@media not ((hover: hover) and (pointer: fine)) { .lp-fd .fd-bar:not([data-full]) { display: block; } }
@media (hover: hover) and (pointer: fine) {
  .lp-fd .fd-row { scroll-snap-type: x mandatory; }
  .lp-fd .fd-card { scroll-snap-align: start; }
  .lp-fd .fd-nav { display: block; }
}

@media (prefers-reduced-motion: no-preference) {
  .lp-fd.fx .rv {
    opacity: 0; transform: translateY(var(--stagger-distance)); filter: blur(var(--stagger-blur));
    transition: opacity var(--stagger-dur) var(--stagger-ease), transform var(--stagger-dur) var(--stagger-ease), filter var(--stagger-dur) var(--stagger-ease);
    transition-delay: calc(var(--stagger-stagger) * (var(--i, 0) + var(--ci, 0) * 2));
  }
  .lp-fd.fx .is-shown .rv { opacity: 1; transform: none; filter: none; }
}

@container lpfd (max-width: 1240px) {
  .lp-fd .fb-big { font-size: 104px; }
  .lp-fd :is(.fd-txt, .fd-foot) { padding-inline: 24px; }
}
@container lpfd (max-width: 1040px) {
  .lp-fd .fb-hero { padding-bottom: 88px; }
  .lp-fd .fb-big { font-size: 88px; }
}
@container lpfd (max-width: 640px) {
  .lp-fd .fb-hero { padding-bottom: 64px; }
  .lp-fd .fb-hero-in { gap: 36px; }
  .lp-fd .fb-big { font-size: min(64px, 15.5cqw); }
  .lp-fd[data-days]:not([data-days-only]) .fb-big { font-size: min(64px, 13.4cqw); }
  .lp-fd .fd2-t, .lp-fd .fd2-clock { font-size: min(45px, 9cqw); }
  .lp-fd .fd2-head { min-height: min(84px, 16.8cqw); }
  .lp-fd .fd { gap: 40px; }
  .lp-fd .fd-row { grid-auto-columns: min(340px, 84cqw); }
  .lp-fd .fd-txt { padding: 0 24px 24px; }
  .lp-fd .fd-foot { padding: 0 24px 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-fd .fd-sub-g { display: none; }
  .lp-fd .fd-card.is-in .ds-chip { animation: none; }
  .lp-fd :is(.fd-left b, .fd-lvl) { animation: none; }
  .lp-fd .fd-left.is-low :is(b, .fd-lvl) { --fd-beat: 1; }
  .lp-fd .fb-clock { animation: none; }
  .lp-fd .t-digit-group .t-digit { animation: none !important; }
  .lp-fd :is(.fd-img, .fd-card, .fd-help-b, .fd-nav, .fd-photo) { transition: none !important; }
  .lp-fd .fd-card:hover .fd-img { scale: none; }
  .lp-fd .fd-card .fd-img { animation: none !important; }
}
/* END_SECTION:lp-flash-deals */

/* START_SECTION:lp-packs (INDEX:21) */
.lp-pk {
  --pk-sans: var(--u1-font-family, "Neue Montreal", -apple-system, "Helvetica Neue", Arial, sans-serif);
  --pk-text: var(--u1-font-family-text, var(--pk-sans));
  --pk-mono: var(--u1-font-family-mono, "IBM Plex Mono", ui-monospace, Menlo, monospace);
  --pk-m: 64px;
  --sx: max(var(--pk-m), calc((100cqw - var(--pk-max, 1600px)) / 2));
  display: block; container: lppk / inline-size; overflow: hidden;
  padding-top: var(--pk-pt, 80px); padding-bottom: var(--pk-pb, 0px);
  background: var(--pk-bg, #f4f4f4); color: #0d0d0d; font-family: var(--pk-sans);
}
@media (max-width: 1023px) { .lp-pk { --pk-m: 32px; } }
@media (max-width: 799px) { .lp-pk { --pk-m: 18px; } }
.lp-pk *, .lp-pk *::before, .lp-pk *::after { box-sizing: border-box; }
.lp-pk :is(h2, h3, p, dl, dd, ul) { margin: 0; letter-spacing: inherit; text-transform: none; }
.lp-pk button { -webkit-appearance: none; appearance: none; font: inherit; color: inherit; }

.lp-pk .pk-head { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 45px; padding-inline: var(--sx); }
.lp-pk .pk-rate { display: flex; align-items: center; gap: 5px; height: 16px; font: 600 16px/21px var(--pk-sans); }
.lp-pk .pk-rate > span { display: flex; align-items: center; gap: 5px; }
.lp-pk .pk-rate img { display: block; flex: none; width: 16px; height: 16px; }
.lp-pk .pk-rate small { font: 500 16px/21px var(--pk-sans); opacity: .5; }
.lp-pk .pk-t { font: 500 40px/1.25 var(--pk-sans); letter-spacing: .6px; color: #0d0d0d; }

.lp-pk .pk-rowwrap { position: relative; }
.lp-pk .pk-row {
  display: grid; grid-auto-flow: column; grid-auto-columns: 400px; padding-inline: var(--sx);
  overflow-x: auto; scroll-padding-inline: var(--sx); overscroll-behavior-x: contain; scrollbar-width: none;
}
.lp-pk .pk-row::-webkit-scrollbar { display: none; }
.lp-pk .pk-card {
  position: relative; display: grid; grid-row: span 4; grid-template-rows: subgrid; border-left: 1px solid rgba(0, 0, 0, .1);
  --ds-chip-bg: rgba(98, 46, 254, .1); --ds-chip-ink: #622efe;
}
.lp-pk .pk-card:last-child { border-right: 1px solid rgba(0, 0, 0, .1); }
.lp-pk .pk-card.is-dark {
  background: linear-gradient(rgba(8, 8, 8, .9) 2.538%, rgba(2, 2, 2, 0) 43.582%);
  --ds-chip-bg: #222; --ds-chip-ink: #fff;
}

.lp-pk .pk-media { position: relative; grid-row: 1; display: flex; flex-direction: column; justify-content: flex-end; padding-top: var(--pk-media-top, 30px); overflow: clip; }
.lp-pk .pk-img { position: relative; aspect-ratio: 400 / 350; overflow: hidden; }
.lp-pk .pk-img > :is(img, svg) { display: block; width: 100%; height: 100%; object-fit: cover; }
.lp-pk .pk-tag {
  position: absolute; top: 20px; right: 20px; z-index: 1; padding: 0 10px; border-inline: 1px solid #000;
  font: 400 13px/1 var(--pk-mono); letter-spacing: .78px; text-transform: uppercase; color: #000; white-space: nowrap;
  text-box: trim-both cap alphabetic;
}
.lp-pk .is-dark .pk-tag { border-color: #fff; color: #fff; }
.lp-pk .pk-go { position: absolute; inset: 0; z-index: 2; }

@property --pkv-a { syntax: '<percentage>'; inherits: true; initial-value: -40%; }
@property --pkv-b { syntax: '<percentage>'; inherits: true; initial-value: -40%; }
@property --pkv-d { syntax: '<number>'; inherits: true; initial-value: 1; }
@property --pkv-l { syntax: '<number>'; inherits: true; initial-value: 0; }
.lp-pk .pk-card.is-visor { background: none; }
.lp-pk .has-visor {
  --pkv-soft: 23%; --pkv-ang: 120deg;
  --pkv-from: calc(-1 * var(--pkv-soft) - 12%); --pkv-to: calc(100% + var(--pkv-soft) + 12%);
  animation: lp-pk-visor 6s linear infinite;
}
.lp-pk .pk-wall {
  position: absolute; inset: 0; pointer-events: none; opacity: var(--pkv-d);
  background: linear-gradient(rgba(8, 8, 10, .94) 0%, rgba(14, 14, 16, .82) 32%, rgba(20, 20, 23, .4) 55%, rgba(20, 20, 23, 0) 74%);
}
.lp-pk .has-visor .pk-tag { --pkv-ink: color-mix(in srgb, #fff calc(var(--pkv-d) * 100%), #000); border-color: var(--pkv-ink); color: var(--pkv-ink); }
.lp-pk .pk-visor { position: absolute; inset: 50% 0 auto; translate: 0 -50%; aspect-ratio: 1600 / 933; }
.lp-pk .pk-visor img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; pointer-events: none; user-select: none; }
.lp-pk .pk-visor-glass {
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 28.37% 30.05%; mask-size: 28.37% 30.05%;
  -webkit-mask-position: 29.6% 66.2%; mask-position: 29.6% 66.2%;
}
.lp-pk .pk-visor-clear {
  opacity: .6;
  --pkv-m: linear-gradient(var(--pkv-ang), #000 calc(var(--pkv-a) - var(--pkv-soft)), transparent calc(var(--pkv-a) + var(--pkv-soft)), transparent calc(var(--pkv-b) - var(--pkv-soft)), #000 calc(var(--pkv-b) + var(--pkv-soft)));
  -webkit-mask-image: var(--pkv-m); mask-image: var(--pkv-m);
}
.lp-pk .pk-visor-tinted {
  opacity: .9;
  --pkv-m: linear-gradient(var(--pkv-ang), transparent calc(var(--pkv-a) - var(--pkv-soft)), #000 calc(var(--pkv-a) + var(--pkv-soft)), #000 calc(var(--pkv-b) - var(--pkv-soft)), transparent calc(var(--pkv-b) + var(--pkv-soft)));
  -webkit-mask-image: var(--pkv-m); mask-image: var(--pkv-m);
}
.lp-pk .pk-visor-sun {
  position: absolute; top: 62.3%; left: 12.3%; translate: 0 -50%; width: 6.5%; height: auto; overflow: visible; pointer-events: none;
  fill: none; stroke: color-mix(in srgb, #f1f1f4 calc(var(--pkv-d) * 100%), #121216); stroke-width: 1.5; stroke-linecap: round;
}
.lp-pk .pk-visor-disc { transform: translateY(calc(var(--pkv-d) * 26px)); }
.lp-pk .pk-visor-rays { transform-box: fill-box; transform-origin: center; transform: scale(calc(1 - .4 * var(--pkv-d))); opacity: calc(1 - var(--pkv-d)); }
.lp-pk .pk-visor-horizon { transform-box: fill-box; transform-origin: center; transform: scaleX(var(--pkv-l)); }
@keyframes lp-pk-visor {
  0%, 12% { --pkv-a: var(--pkv-from); --pkv-b: var(--pkv-from); --pkv-d: 1; --pkv-l: 0; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  28.5% { --pkv-l: 1; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  45%, 58% { --pkv-a: var(--pkv-from); --pkv-b: var(--pkv-to); --pkv-d: 0; --pkv-l: 0; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  74.5% { --pkv-l: 1; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  91%, 100% { --pkv-a: var(--pkv-to); --pkv-b: var(--pkv-to); --pkv-d: 1; --pkv-l: 0; }
}

.lp-pk .pk-txt { grid-row: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 0 32px; }
.lp-pk .pk-name { display: flex; flex-direction: column; gap: 2px; font: 500 22px/1.25 var(--pk-sans); letter-spacing: .33px; color: #1d1d1f; }
.lp-pk .pk-model { font: 600 14px/1.25 var(--pk-sans); letter-spacing: 1.4px; color: #0d0d0d; }
.lp-pk .pk-price { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-height: 28px; }
.lp-pk .pk-p { display: flex; gap: 3px; font: var(--u1-text-body-fw, 400) 17px/1 var(--pk-text); white-space: nowrap; }
.lp-pk .pk-p s { color: rgba(13, 13, 13, .5); text-decoration-thickness: 1px; }

.lp-pk .pk-units { grid-row: 3; display: flex; align-items: stretch; gap: 35px; padding: 30px 32px; }
.lp-pk .pk-stat { display: flex; flex-direction: column; justify-content: center; gap: 15px; white-space: nowrap; }
.lp-pk .pk-stat:first-child { flex: none; width: 100px; }
.lp-pk .pk-stat + .pk-stat { flex: 1; padding-left: 35px; border-left: 1px solid rgba(0, 0, 0, .1); }
.lp-pk .pk-stat dt { font: 400 11px/1.26 var(--pk-sans); letter-spacing: .33px; opacity: .6; text-box: trim-both cap alphabetic; }
.lp-pk .pk-stat dd { font: 500 20px/21px var(--pk-sans); text-box: trim-both cap alphabetic; }
.lp-pk .pk-stat dd small { margin-left: 1px; font: 600 14px/1 var(--pk-sans); letter-spacing: .42px; text-transform: uppercase; opacity: .5; }
.lp-pk .pk-off { color: #622efe; }
.lp-pk .pk-left dt { display: grid; opacity: 1; }
.lp-pk .pk-left dt > * { grid-area: 1 / 1; text-box: trim-both cap alphabetic; transition: opacity .3s ease; }
.lp-pk .pk-left dt span { opacity: .6; }
.lp-pk .pk-left dt em { font-style: normal; font-weight: 600; opacity: 0; }
.lp-pk .pk-left.is-low dt span { opacity: 0; }
.lp-pk .pk-left.is-low dt em { opacity: 1; }
@property --pk-beat { syntax: '<number>'; inherits: true; initial-value: 0; }
.lp-pk .pk-left b {
  display: inline-block; font: inherit; transition: min-width .35s cubic-bezier(.22, 1, .36, 1);
  animation: lp-pk-beat .9s ease-in-out infinite alternate; color: color-mix(in srgb, #0d0d0d calc(100% - var(--pk-beat) * 35%), transparent);
}
@keyframes lp-pk-beat { from { --pk-beat: 0; } to { --pk-beat: 1; } }
.lp-pk .pk-left.is-low b { color: color-mix(in srgb, #0d0d0d, #ff3300 calc(var(--pk-beat) * 100%)); }
.lp-pk.is-paused, .lp-pk.is-paused * { animation-play-state: paused !important; }

.lp-pk .pk-foot { grid-row: 4; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 0 32px 40px; }
.lp-pk .pk-items { display: flex; flex-direction: column; gap: 2px; padding: 0; list-style: none; font: 400 14px/1.6 var(--pk-sans); letter-spacing: .21px; color: rgba(13, 13, 13, .7); }
.lp-pk .pk-items li { display: flex; align-items: center; gap: 10px; }
.lp-pk .pk-items li::before { content: ''; flex: none; width: 4px; height: 4px; border-radius: 1000px; background: currentColor; }

.lp-pk .pk-nav {
  position: absolute; top: 49%; z-index: 6; display: none; width: 56px; height: 56px; margin-top: -28px; padding: 0; border: 0;
  border-radius: 56px; overflow: hidden; background: rgba(210, 210, 215, .64); cursor: pointer;
  opacity: 0; transform: scale(.8); transition: transform .5s ease-in, opacity .7s cubic-bezier(.15, 0, .2, 1) .1s;
}
.lp-pk .pk-nav:not([disabled]) { opacity: 1; transform: scale(1); transition-duration: .5s; }
.lp-pk .pk-nav[disabled] { cursor: default; pointer-events: none; }
.lp-pk .pk-nav svg { display: block; width: 56px; height: 56px; }
.lp-pk .pk-nav svg path { fill: rgba(0, 0, 0, .56); transition: fill .1s linear; }
.lp-pk .pk-nav:hover { background: hsla(240, 7%, 88%, .698); }
.lp-pk .pk-nav:active { background: hsla(240, 4%, 77%, .654); }
.lp-pk .pk-nav:is(:hover, :active) svg path { fill: rgba(0, 0, 0, .64); }
.lp-pk .pk-nav--prev { left: 18px; }
.lp-pk .pk-nav--next { right: 18px; }
.lp-pk .pk-nav:focus-visible { outline: 2px solid #0071e3; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .lp-pk .pk-row { scroll-snap-type: x mandatory; }
  .lp-pk .pk-card { scroll-snap-align: start; }
  .lp-pk .pk-nav { display: block; }
}

@container lppk (max-width: 640px) {
  .lp-pk .pk-head { margin-bottom: 32px; }
  .lp-pk .pk-t { font-size: min(40px, 8cqw); }
  .lp-pk .pk-row { grid-auto-columns: min(340px, 84cqw); }
  .lp-pk :is(.pk-txt, .pk-foot) { padding-inline: 24px; }
  .lp-pk .pk-units { gap: 24px; padding: 24px; }
  .lp-pk .pk-stat + .pk-stat { padding-left: 24px; }
  .lp-pk .pk-foot { padding-bottom: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-pk .pk-nav { transition: none !important; }
  .lp-pk .pk-left b { animation: none; }
  .lp-pk .pk-left.is-low b { --pk-beat: 1; }
  .lp-pk .has-visor { animation: none; --pkv-b: var(--pkv-to); --pkv-d: 0; }
}
/* END_SECTION:lp-packs */

/* START_SECTION:main-blog-post (INDEX:23) */
.u1-blog-post-wrapper {
    --padding-block-start: 128px !important;
  }

  .u1-blog-post-header {
    padding-block-end: 64px;
  }

  .u1-bp-area--image {
    padding-bottom: 100px;
  }

  .u1-bp-area--content {
    padding-top: 100px;
  }

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

  .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:24) */
/* La nav flota por encima del contenido y ocupa 74px, asi que el titulo del
     directorio quedaba tapado. Se reserva el aire de la convencion del theme
     para la primera seccion de texto: 128 en desktop y 96 en mobile. El padding
     propio del bloque del titulo se anula abajo. */
  .blog-posts {
    padding-top: 128px;
  }
  @media screen and (max-width: 1024px) {
    .blog-posts { padding-top: 96px; }
  }
  /* El bloque del titulo trae 48 de padding propio desde los ajustes del
     editor y se sumaba al de la seccion. Se anula aca para que el aire de
     arriba sea uno solo y este controlado desde el theme. */
  .blog-posts [class*="text-block"]:has(h1) {
    padding-top: 0 !important;
  }

  /* ── Tipografia del DS en el directorio ────────────────────────────────
     Horizon trae una escala fluida propia (un clamp que daba 45.8px), asi que
     el titulo de la pagina y el de cada tarjeta median igual y no habia
     jerarquia; y la descripcion usaba body-s (14), que es el tamano chico.
     Se pasa a la escala del sistema: titulo text-h1, tarjeta 24 y cuerpo
     body-m. La fecha se queda en body-s, que ahi si corresponde. */
  .blog-posts h1 {
    font-size: 64px;
    line-height: 1.1;
    font-weight: 570;
  }
  @media screen and (max-width: 767px) {
    .blog-posts h1 { font-size: 38px; }
  }
  .blog-posts p {
    font-size: var(--u1-body-m-size, 17.2px);
    line-height: 1.46;
  }
  /* La fecha quedaba lejos del extracto: el bloque de texto traia 16 de
     padding arriba, se baja a la mitad. */
  .blog-posts .blog-post-card__content-text {
    padding-top: 8px;
  }
  /* "Read more" como enlace del DS: peso 570 y subrayado con aire */
  .blog-posts .blog-post-card__content a:last-child {
    font-weight: 570;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .blog-posts a [class*="__heading"] {
    font-size: 24px;
    line-height: 1.32;
    font-weight: 570;
  }

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

  /**
   * 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:27) */
.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:31) */
marquee-component {
    display: block;
    width: 100%;
    overflow: hidden;
  }

  .marquee__wrapper {
    display: flex;
    gap: var(--marquee-gap);
    width: fit-content;
    white-space: nowrap;
  }

  .marquee__content {
    min-width: max-content;
    display: flex;
    gap: var(--marquee-gap);
  }

  .marquee__content :is(p, h1, h2, h3, h4, h5, h6) {
    white-space: nowrap;
  }

  .marquee__content .marquee__repeated-items * {
    max-width: none;
  }

  .marquee__repeated-items {
    min-width: max-content;
    display: flex;
    gap: var(--marquee-gap);
    align-items: center;
    justify-content: center;
  }

  .marquee__repeated-items > * {
    align-content: center;
  }

  @media (prefers-reduced-motion: no-preference) {
    marquee-component:not([data-disabled]) .marquee__wrapper {
      animation: marquee-motion var(--marquee-speed) linear infinite var(--marquee-direction);
    }
  }

  @keyframes marquee-motion {
    to {
      transform: translate3d(calc(-50% - (var(--marquee-gap) / 2)), 0, 0);
    }
  }
/* END_SECTION:marquee */

/* START_SECTION:media-with-content (INDEX:32) */
.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:33) */
.password-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-sm);
    padding-block: var(--padding-xl);
  }

  .password-footer__powered-by {
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--padding-xs);
    height: 1em;

    > a {
      display: flex;
    }

    .icon-shopify {
      display: inline;
      height: 1.3em;
      color: var(--color-foreground);
    }
  }

  .password-footer__links {
    display: flex;
    align-items: center;
    gap: var(--gap-2xl);

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

  .password-footer__admin-link {
    margin: 0;
  }

  .password-footer__button {
    height: var(--minimum-touch-target);
    background-color: transparent;
    color: var(--color-primary);
    cursor: pointer;
    text-decoration: underline;

    &:hover {
      color: var(--color-primary-hover);
      text-decoration: none;
    }
  }
/* END_SECTION:password-footer */

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

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

/* START_SECTION:product-hotspots (INDEX:39) */
/* Section layout */
  .section-product-hotspots {
    position: relative;
  }

  .section-product-hotspots__wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    width: 100%;
    height: 100%;
  }

  /* Image container */
  .section-product-hotspots__content {
    position: relative;
    aspect-ratio: var(--ratio, 21 / 9);
    overflow: hidden;
  }

  /* Hide hotspots without products on touch devices (tablets included) */
  @media (hover: none) {
    .hotspot.hotspot--hidden-touch {
      display: none;
    }
  }

  /* Responsive adjustments */
  @media screen and (max-width: 749px) {
    /* Hide dialog on mobile - hotspot opens quick-add modal instead */
    .hotspot .hotspot-dialog {
      display: none;
    }
  }

  /* Hotspot button - positioned element with clickable area */
  .hotspot {
    position: absolute;
    cursor: pointer;
    width: var(--button-size);
    height: var(--button-size);
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    outline: none;
    transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;
    z-index: var(--layer-flat);
  }

  .hotspot:has(.hotspot-dialog[open]) {
    z-index: var(--layer-raised);
  }

  .hotspot .hotspot-trigger {
    padding: 0;
    border: none;
  }

  .hotspot-dialog__product-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--padding-xs);
    padding-inline-start: 0;
    overflow: hidden;
  }

  /* Visual target circle */
  .hotspot-trigger {
    width: var(--hotspot-size);
    height: var(--hotspot-size);
    background: var(--hotspot-bg, rgb(0 0 0 / 0.5));
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    transition: width 0.1s ease-out, height 0.1s ease-out;
  }

  /* On mobile, ensure trigger is tappable */
  @media screen and (max-width: 749px) {
    .hotspot-trigger {
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
  }

  /* Bullseye using ::after pseudo-element */
  .hotspot-trigger::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--hotspot-size) * 0.4);
    height: calc(var(--hotspot-size) * 0.4);
    background: var(--hotspot-bullseye, #fff);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.1s ease-out, height 0.1s ease-out, background 0.1s ease-out;
  }

  /* Bullseye grows on hover or when dialog is open (desktop only) */
  @media screen and (min-width: 750px) {
    .hotspot:hover .hotspot-trigger::after,
    .hotspot:has(.hotspot-dialog[open]) .hotspot-trigger::after {
      width: calc(var(--hotspot-size) * 0.55);
      height: calc(var(--hotspot-size) * 0.55);
      transition: width 0.2s ease-out, height 0.2s ease-out, background 0.2s ease-out;
      transition-delay: 0.2s;
    }
  }

  .hotspots-container {
    position: absolute;
    inset: 0;
    z-index: var(--layer-flat);
    overflow: clip;
  }

  .hotspots__background-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* Dialog positioning */
  .hotspot .hotspot-dialog {
    position: absolute;
    padding: 0;
    border-radius: var(--style-border-radius-popover);
    border: var(--style-border-popover);
    width: max-content;
    min-width: var(--minimum-width-dialog);
    max-width: var(--maximum-width-dialog);
    box-shadow: var(--shadow-popover);

    &[data-placement*='bottom'] {
      --offset-y: 0px;
      --origin-y: calc(var(--hotspot-size) / 2);
      top: calc((var(--button-size) - var(--hotspot-size)) / 2 + var(--dialog-vertical-offset, 0px));
      bottom: unset;
    }
    &[data-placement*='top'] {
      --offset-y: 0px;
      --origin-y: calc(100% - (var(--hotspot-size) * 0.5));
      top: unset;
      bottom: calc((var(--button-size) - var(--hotspot-size)) * 0.5 - var(--dialog-vertical-offset, 0px));
    }
    &[data-placement*='left'] {
      --offset-x: calc((var(--button-size) - var(--hotspot-size)) * 0.5);
      --origin-x: calc(100% - (var(--hotspot-size) * 0.5));
      left: unset;
      right: 100%;
    }
    &[data-placement*='right'] {
      --offset-x: calc((var(--button-size) - var(--hotspot-size)) * -0.5);
      --origin-x: calc(var(--hotspot-size) * 0.5);
      left: 100%;
      right: unset;
    }
    &[data-placement*='center'] {
      left: 50%;
      translate: -50% 0;
      right: unset;
    }
    &[data-placement*='center'][data-placement*='bottom'] {
      --origin-y: calc(var(--hotspot-size) * 0.5);
      --origin-x: 50%;
      --offset-y: calc((var(--button-size) - var(--hotspot-size)) * -0.5);
      /* stylelint-disable-next-line declaration-property-value-disallowed-list */
      --offset-x: 0;
      top: 100%;
      bottom: unset;
      margin: 0;
    }
    &[data-placement*='center'][data-placement*='top'] {
      --origin-y: calc(100% - (var(--hotspot-size) * 0.5));
      --origin-x: 50%;
      --offset-y: calc((var(--button-size) - var(--hotspot-size)) * 0.5);
      /* stylelint-disable-next-line declaration-property-value-disallowed-list */
      --offset-x: 0;
      bottom: 100%;
    }
  }

  .hotspot .hotspot-dialog:is(:focus, :focus-visible),
  .hotspot .hotspot-dialog__link:is(:focus, :focus-visible) {
    outline: none;
  }

  .hotspot-dialog__product {
    display: grid;
    grid-template-columns: auto 1fr;
  }

  .hotspot-dialog__product-image,
  .hotspot-dialog svg.hotspot-dialog__placeholder-product-image {
    width: var(--width-product-image-dialog);
    height: var(--width-product-image-dialog);
    aspect-ratio: 1;
    padding: var(--padding-product-image-popover, var(--padding-xs));
    object-fit: cover;
    border-radius: var(--style-border-radius-popover);
  }

  .hotspot-dialog__link {
    position: absolute;
    inset: 0;
    z-index: var(--layer-flat);
  }

  .hotspot-dialog__product-title {
    margin-block-end: var(--product-title-gap);
    padding-inline-end: var(--padding-sm);
    min-width: 0;
  }

  .hotspot .hotspot-dialog .hotspot-dialog__sold-out-badge {
    display: flex;
    width: fit-content;
    justify-self: flex-end;
    align-self: flex-end;
    justify-content: center;
    align-items: center;
    font-size: var(--font-body--size);
    padding: var(--padding-2xs) var(--padding-sm);
    background: rgb(var(--color-foreground-rgb) / var(--opacity-10));
    border-radius: var(--border-radius-sm);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-sm);
    opacity: var(--opacity-80);
  }

  /* Dialog transitions */
  .hotspot .hotspot-dialog {
    --hotspot-blur: 4px;
    --hotspot-scale: 0.8;
    --hotspot-entry-duration: 0.2s;
    --hotspot-exit-duration: 0.1s;

    /* Firefox doesn't have reverse transitions */
    /* in webkit/chromium we can set a closing attribute as we transition the exit and hook there */
    filter: blur(var(--hotspot-blur));
    opacity: 0;
    transform: scale(var(--hotspot-scale)) translate(0, 0);
    transition-property: display, opacity, filter, transform;
    transition-duration: var(--hotspot-entry-duration);
    transition-timing-function: ease;

    transform: scale(var(--hotspot-scale)) translate(var(--offset-x), var(--offset-y));
    transform-origin: var(--origin-x) var(--origin-y);
    transition-timing-function: cubic-bezier(0.65, -0.49, 0.35, 1.12);

    &[data-closing='true'] {
      transition-duration: var(--hotspot-exit-duration);
      transition-timing-function: ease-out;
      transform: scale(1) translate(0, calc(var(--hotspot-size) * 0.25));
    }

    /* We can only set transition-behavior once we've measured the dialog dimensions */
    &[data-showing='true'] {
      transition-behavior: allow-discrete;
    }
  }

  .hotspot .hotspot-dialog[open][data-showing='true'] {
    opacity: 1;
    transform: scale(1) translate(0, 0);
    filter: blur(0px);
  }

  @starting-style {
    .hotspot .hotspot-dialog[open][data-showing='true'] {
      opacity: 0;
      filter: blur(var(--hotspot-blur));
      transform: scale(var(--hotspot-scale)) translate(var(--offset-x), var(--offset-y));
      transform-origin: var(--origin-x) var(--origin-y);
    }
  }

  /* Safety triangles for dialogs */
  .hotspot .hotspot-dialog::after {
    content: '';
    position: absolute;
    opacity: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: all;
    transition: opacity 0.22s ease-out, translate 0.22s 0.1s ease-out;
    scale: var(--scale-x, 1) var(--scale-y, 1);
    z-index: var(--layer-flat);
  }

  .hotspot-dialog[open]:is([data-placement*='left'], [data-placement*='right'])::after {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    width: calc(var(--button-size) / 2 + var(--hotspot-size) * 0.5);
  }

  .hotspot-dialog[open][data-placement*='right']::after {
    right: 100%;
    left: unset;
  }

  .hotspot-dialog[open][data-placement*='left']::after {
    left: 100%;
    right: unset;
    --scale-x: -1;
  }

  .hotspot-dialog[open][data-placement*='top']::after {
    --scale-y: -1;
  }

  .hotspot-dialog[open][data-placement*='center']::after {
    height: calc(var(--button-size) / 2 + var(--hotspot-size) * 0.5);
    width: 100%;
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: polygon(0 0, 100% 0, 50% calc(100% - var(--hotspot-size) * 0.25));
    --scale-x: 1;
    --scale-y: 1;
  }

  .hotspot-dialog[open][data-placement*='center'][data-placement*='bottom']::after {
    top: unset;
    bottom: 100%;
    --scale-y: -1;
  }

  .hotspot-dialog[open][data-placement*='center'][data-placement*='top']::after {
    top: 100%;
    bottom: unset;
  }

  /* Quick add button */
  .hotspot-dialog[open] {
    .quick-add {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      width: auto;
      height: auto;
      position: relative;
      z-index: var(--layer-flat);
    }

    .quick-add__button {
      position: relative;
      padding-block: 0;
      box-shadow: none;
      align-items: center;
      justify-self: flex-end;
      height: fit-content;
      translate: var(--padding-2xs) 0;
      border: none;
      color: var(--color-foreground);
      background-color: var(--color-background);
      overflow: visible;
      pointer-events: all;
      opacity: 1;
      animation: elementSlideInTop var(--animation-speed) var(--animation-easing);
      transition-property: translate;
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--ease-out-cubic);

      &::before {
        content: '';
        position: absolute;
        inset: -2px;
        border-radius: calc(50px + 2px);
        border: 2px solid transparent;
        pointer-events: none;
        transition-property: border-color;
        transition-duration: 0s;
        transition-timing-function: var(--ease-out-cubic);
      }

      &:is(:hover, :focus, :focus-visible, :active) {
        translate: 0 0;
        transition-delay: var(--animation-speed-slow);

        &::before {
          border-color: rgb(var(--color-foreground-rgb) / var(--opacity-15));
          transition-duration: var(--animation-speed);
          transition-delay: var(--animation-speed-slow);
        }
      }
    }
  }
/* END_SECTION:product-hotspots */

/* START_SECTION:product-information-b (INDEX:40) */
.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-b */

/* START_SECTION:product-information (INDEX:41) */
.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:pulse-hero (INDEX:44) */
.pulse-hero {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  height: var(--pulse-vh, 100vh);
  overflow: hidden;
  z-index: 0;
  box-sizing: border-box;
  background: #000;
}

.pulse-hero__viewport {
  position: relative;
  width: 100%;
  height: 100%;
}

.pulse-hero__block {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.pulse-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  will-change: opacity, transform;
}

.pulse-hero__video,
.pulse-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pulse-hero__iframe-shell {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.pulse-hero__iframe-shell iframe,
.pulse-hero__iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 177.78vh;
  min-width: 100%;
  height: 56.25vw;
  min-height: 100%;
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
}

.pulse-hero__placeholder {
  width: 100%;
  height: 100%;
  background: var(--u1-color-4, #1a1a1a);
}

.pulse-hero__title-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: min(354px, 100%);
  padding: 0 var(--space-5, 24px);
  box-sizing: border-box;
  text-align: center;
  will-change: opacity, transform;
}

@media screen and (min-width: 750px) {
  .pulse-hero__title-wrap {
    max-width: min(676px, 88vw);
  }
}

@media screen and (min-width: 990px) {
  .pulse-hero__title-wrap {
    max-width: min(var(--max-w-xs, 980px), 88vw);
  }
}

/* Tipografía: clase `text-h1` en u1_style_base.css (mismo patrón que otras sections U1) */
.pulse-hero__heading {
  margin: 0;
  color: var(--pulse-title-color, rgb(255, 255, 255));
}

.pulse-hero__empty-hint {
  margin: 0;
}

/* Scroll hint at bottom */
.pulse-hero__scroll-hint {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0.6;
  transition: opacity 600ms ease;
  pointer-events: none;
}

.pulse-hero__scroll-hint--hidden {
  opacity: 0;
}

.pulse-hero__scroll-line {
  width: 1px;
  height: 28px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.8));
  animation: pulse-scroll-line 1.8s ease-in-out infinite;
}

@keyframes pulse-scroll-line {
  0%, 100% { opacity: 0.3; transform: scaleY(0.6); transform-origin: top; }
  50% { opacity: 1; transform: scaleY(1); transform-origin: top; }
}

@media (prefers-reduced-motion: reduce) {
  .pulse-hero__media,
  .pulse-hero__title-wrap,
  .pulse-hero__heading {
    transition: none !important;
    animation: none !important;
  }
  .pulse-hero__scroll-line {
    animation: none;
  }
}
/* END_SECTION:pulse-hero */

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

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

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

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

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

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

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

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

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

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

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

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

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

/* START_SECTION:u1-advertorial-content (INDEX:54) */
.u1-adv-content--dark{
  --text-primary: #ffffff;
  --text-secondary: rgba(255,255,255,0.66);
  --stroke-tertiary: rgba(255,255,255,0.16);
  --bg: #0d0d0d;
  --bg-tertiary: #1d1d1d;
  --u1-check: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'><path d='M6.5 12.5L10 16L17.5 8.5' stroke='white' stroke-width='1.5'/></svg>");
  --interactive-stroke-secondary-hover: rgba(255,255,255,0.18); /* bordes FAQ */
  --text-tertiary: rgba(255,255,255,0.45); /* headers de la tabla */
  --icon-primary: #ffffff;
}
.u1-adv-content--dark .u1-adv-content__ranktable,
.u1-adv-content--dark .u1-adv-content__ranktable .u1-ranking__row{
  border-color: rgba(255,255,255,0.14);
}
.u1-adv-content--dark .u1-adv-content__card-pill{
  background: #e23900;
  color: #ffffff;
}
.u1-adv-content{
  --u1-check: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'><path d='M6.5 12.5L10 16L17.5 8.5' stroke='%231D1D1D' stroke-width='1.5'/></svg>");
  background: var(--advc-bg, var(--bg));
  padding-top: var(--advc-pt-d, 40px);
  padding-bottom: var(--advc-pb-d, 40px);
}
@media (max-width: 1024px){
  .u1-adv-content{
    padding-top: var(--advc-pt-t, 32px);
    padding-bottom: var(--advc-pb-t, 32px);
  }
}
@media (max-width: 749px){
  .u1-adv-content{
    padding-top: var(--advc-pt-m, 28px);
    padding-bottom: var(--advc-pb-m, 28px);
  }
}
.u1-adv-content__inner{
  width: 100%;
  max-width: var(--advc-max, 980px);
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
  display: flex;
  flex-flow: row wrap;
  column-gap: 16px;
}
.u1-adv-content__block{
  width: 100%;
  max-width: none;
  margin: 0 auto;
}
.u1-adv-content--left .u1-adv-content__block{
  margin-left: 0;
  margin-right: auto;
}
/* Ritmo advertorial (criterio Fermin): parrafos seguidos van PEGADOS (fluyen
   como texto corrido); el salto grande aparece solo cuando CAMBIA el tipo de
   contenido (subhead, quote, highlight, imagen) — separa bloques de lectura */
.u1-adv-content__block + .u1-adv-content__block{
  margin-top: var(--advc-gap, 12px);
}
/* Espacio bajo el Title configurable por block (desktop/mobile). El title pone
   margin-bottom = setting - gap, y el bloque siguiente aporta el gap de seccion:
   total exacto = setting, sea cual sea el tipo del bloque siguiente */
.u1-adv-content__title{
  margin-bottom: calc(var(--t-gap-d, 40px) - var(--advc-gap, 16px)) !important;
}
.u1-adv-content__title + .u1-adv-content__block{
  margin-top: var(--advc-gap, 16px) !important;
}
@media (max-width: 749px){
  .u1-adv-content__title{
    margin-bottom: calc(var(--t-gap-m, 32px) - var(--advc-gap, 16px)) !important;
  }
}
.u1-adv-content__inner > .u1-adv-content__block + .u1-adv-content__mediatext{
  margin-top: var(--mt-top-d, 40px);
}
@media screen and (max-width: 749px){
  .u1-adv-content__inner > .u1-adv-content__block + .u1-adv-content__mediatext{
    margin-top: var(--mt-top-m, var(--mt-top-d, 40px));
  }
}
.u1-adv-content__inner > .u1-adv-content__block + .u1-adv-content__title{
  margin-top: var(--t-top-d, 40px);
}
/* Space above opcional en Paragraph / Benefits / CTA (2026-10-01): solo actua si el block lo
   setea (la variable viene vacia -> cae al gap normal), asi lo existente no se mueve. */
.u1-adv-content__inner > .u1-adv-content__block + .u1-adv-content__block[style*="--b-top-d"]{
  margin-top: var(--b-top-d) !important;
}
@media screen and (max-width: 749px){
  .u1-adv-content__inner > .u1-adv-content__block + .u1-adv-content__block[style*="--b-top-d"]{
    margin-top: var(--b-top-m, var(--b-top-d)) !important;
  }
}
@media screen and (max-width: 749px){
  .u1-adv-content__inner > .u1-adv-content__block + .u1-adv-content__title{
    margin-top: var(--t-top-m, var(--t-top-d, 40px));
  }
}
.u1-adv-content__block + .u1-adv-content__paragraph.text-h4,
.u1-adv-content__block + .u1-adv-content__paragraph.text-h5,
.u1-adv-content__block + .u1-adv-content__paragraph.text-h6,
.u1-adv-content__block + .u1-adv-content__promise,
.u1-adv-content__promise + .u1-adv-content__block,
.u1-adv-content__block + .u1-adv-content__quote,
.u1-adv-content__block + .u1-adv-content__highlight,
.u1-adv-content__block + .u1-adv-content__testimonials,
.u1-adv-content__block + .u1-adv-content__image,
.u1-adv-content__quote + .u1-adv-content__block,
.u1-adv-content__highlight + .u1-adv-content__block,
.u1-adv-content__testimonials + .u1-adv-content__block,
.u1-adv-content__image + .u1-adv-content__block{
  margin-top: 40px;
}
/* Lo no resaltado en secondary; los bolds saltan en primary (criterio Fermin) */
.u1-adv-content__title{
  margin: 0;
  color: var(--text-primary);
}
.u1-adv-content__paragraph{
  color: var(--text-secondary);
}
.u1-adv-content__paragraph strong{
  color: var(--text-primary);
  font-weight: 700;
}
/* Parrafo en color acento (brand promise del advertorial) */
.u1-adv-content__paragraph--accent,
.u1-adv-content__paragraph--accent strong{
  color: #e23900;
}
/* Block Brand promise: acento + tipografia mayor que el cuerpo */
.u1-adv-content__promise,
.u1-adv-content__promise strong{
  color: #e23900;
}
.u1-adv-content__promise p{ margin: 0 0 12px; }
.u1-adv-content__promise p:last-child{ margin-bottom: 0; }
.u1-adv-content__paragraph p{ margin: 0 0 12px; }
.u1-adv-content__paragraph p:last-child{ margin-bottom: 0; }
.u1-adv-content__image{
  margin-top: 0;
  margin-bottom: 0;
}
/* Convencion Fermin: TODAS las imagenes del advertorial al mismo formato —
   16:9 apaisadas en desktop, 4:5 en mobile, recorte cover */
.u1-adv-content__image img{
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 12px;
}
@media (max-width: 749px){
  .u1-adv-content__image img{
    aspect-ratio: 4 / 5;
  }
}
.u1-adv-content__image--full{
  max-width: none;
}
.u1-adv-content__mediatext + .u1-adv-content__block{
  margin-top: 40px;
}
.u1-adv-content__mediatext{
  width: 100%;
  display: grid;
  grid-template-columns: 2fr 1fr; /* 8/4 columnas */
  column-gap: 32px;
  align-items: end; /* texto alineado al borde inferior de la imagen */
}
.u1-adv-content__mediatext--vcenter{ align-items: center; }
/* Mitad y mitad (look listicle de Carlos): imagen SIEMPRE cuadrada y todo
   alineado arriba — va despues de --vcenter para pisarlo */
.u1-adv-content__mediatext--half{
  grid-template-columns: 1fr 1fr;
  align-items: start;
}
.u1-adv-content__mediatext--half .u1-adv-content__mediatext-media img,
.u1-adv-content__mediatext--half .u1-adv-content__mediatext-media--empty{
  aspect-ratio: 1 / 1;
}
@media screen and (max-width: 749px){
  .u1-adv-content__mediatext--half .u1-adv-content__mediatext-media img,
  .u1-adv-content__mediatext--half .u1-adv-content__mediatext-media--empty{
    aspect-ratio: 1 / 1; /* cuadrada tambien en mobile (siempre iguales) */
  }
  /* Mobile (pedido Fermin/Carlos): titulo primero para retener en el scroll,
     despues la imagen, despues el texto. display:contents libera los hijos
     del body para reordenarlos contra la imagen. */
  .u1-adv-content__mediatext--half .u1-adv-content__mediatext-body{ display: contents; }
  .u1-adv-content__mediatext--half .u1-adv-content__mediatext-label{ order: -1; margin: 0; }
  .u1-adv-content__mediatext--half .u1-adv-content__mediatext-media{ order: 0; }
  .u1-adv-content__mediatext--half .u1-adv-content__mediatext-text{ order: 1; }
  .u1-adv-content__mediatext--half .u1-adv-content__mediatext-cta{ order: 2; width: fit-content; }
}
.u1-adv-content__mediatext-media--empty{
  background: var(--bg-tertiary, #f5f5f5);
  border-radius: 12px;
  aspect-ratio: 16 / 9;
}
@media screen and (max-width: 749px){
  .u1-adv-content__mediatext-media--empty{ aspect-ratio: 4 / 5; }
}
.u1-adv-content__mediatext--flip .u1-adv-content__mediatext-media{ order: 2; }
.u1-adv-content__mediatext-media{ margin: 0; }
.u1-adv-content__mediatext-media img{
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 12px;
}
.u1-adv-content__mediatext-label{ margin: 0 0 12px; }
.u1-adv-content__mediatext-cta{ margin-top: 24px; }
.u1-adv-content__mediatext-text{ color: var(--text-secondary); }
.u1-adv-content__mediatext-text p{ margin: 0; }
.u1-adv-content__mediatext-text p + p{ margin-top: 8px; }
.u1-adv-content__mediatext-text strong{ color: var(--text-primary); }
@media screen and (max-width: 749px){
  .u1-adv-content__mediatext{
    grid-template-columns: 1fr;
    row-gap: 16px;
  }
  .u1-adv-content__mediatext--flip .u1-adv-content__mediatext-media{ order: 0; }
  .u1-adv-content__mediatext-media img{ aspect-ratio: 4 / 5; }
}
.u1-adv-content__caption{
  margin-top: 16px; /* 2026-10-01: 8 -> 16, mas aire entre foto y epigrafe (ninguna landing viva usa caption) */
  color: var(--text-secondary);
  text-align: center;
}
.u1-adv-content__quote{
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  border-left: 2px solid var(--text-primary);
}
.u1-adv-content__quote-text p{ margin: 0; }
.u1-adv-content__quote-cite{
  display: block;
  margin-top: 8px;
  color: var(--text-secondary);
  font-style: normal;
}
/* Quote con foto (patron advertorial: cita + retrato redondo del protagonista). Solo con imagen cargada;
   .u1-adv-content__quote-body sin foto es un div neutro (sin estilos) para no mover el render existente */
.u1-adv-content__quote--photo{
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.u1-adv-content__quote-photo{
  width: 56px;
  height: 56px;
  border-radius: 999px;
  object-fit: cover;
  display: block;
}
.u1-adv-content__quote-role{ color: var(--text-secondary); }
/* Variante "plain" (Fox News, 2026-10-01): sin la barra lateral y la cita un punto mas grande
   (h4 en vez de h5, mismos clamps del DS). El default con barra no cambia. */
.u1-adv-content__quote--plain{
  padding-left: 0;
  border-left: 0;
}
.u1-adv-content__quote--plain .u1-adv-content__quote-text{
  font-size: clamp(1.25rem, calc(1.25rem + .625 * ((100vw - 23.4375rem) / 66.5625)), 1.875rem);
  line-height: clamp(1.5rem, calc(1.5rem + .66 * ((100vw - 23.4375rem) / 66.5625)), 2.16rem);
}
.u1-adv-content__testimonials{
  border: 1px solid var(--stroke-tertiary, rgba(0,0,0,0.12));
  border-radius: 12px;
  padding: 24px;
  box-sizing: border-box;
  background: var(--bg-tertiary, #f7f7f7);
}
.u1-adv-content__testimonials-intro{
  color: var(--text-primary);
  margin-bottom: 12px;
}
.u1-adv-content__testimonials-intro p{ margin: 0; }
.u1-adv-content__testimonial + .u1-adv-content__testimonial{
  margin-top: 12px;
}
.u1-adv-content__testimonial-name{
  color: #e23900; /* acento Save del DS */
  font-weight: var(--text-h-fw, 600);
  margin-right: 8px; /* aire entre el nombre y la comilla */
}
.u1-adv-content__testimonial-text{
  color: var(--text-secondary);
}
.u1-adv-content__testimonial-text p{ display: inline; margin: 0; }
.u1-adv-content__testimonial-text strong{ color: var(--text-primary); }
.u1-adv-content__highlight{
  border: 1px solid var(--stroke-tertiary, rgba(0,0,0,0.12));
  border-radius: 12px;
  padding: 24px;
  box-sizing: border-box;
  background: var(--bg-tertiary, #f7f7f7);
  color: var(--text-secondary);
}
.u1-adv-content__highlight strong{
  color: var(--text-primary);
}
.u1-adv-content__highlight p{ margin: 0 0 12px; }
.u1-adv-content__highlight p:last-child{ margin-bottom: 0; }
/* Listas dentro de parrafos/highlight (richtext con bullets): margenes prolijos */
.u1-adv-content__paragraph ul,
.u1-adv-content__highlight ul{
  list-style: none;
  margin: 0 0 12px;
  padding-left: 0;
}
.u1-adv-content__paragraph ul li,
.u1-adv-content__highlight ul li{
  position: relative;
  padding-left: 30px;
}
.u1-adv-content__paragraph ul li::before,
.u1-adv-content__highlight ul li::before{
  content: '';
  position: absolute;
  left: 0;
  top: 0.05em;
  width: 20px;
  height: 20px;
  background-image: var(--u1-check);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.u1-adv-content__paragraph ol,
.u1-adv-content__highlight ol{
  margin: 0 0 12px;
  padding-left: 20px;
}
.u1-adv-content__paragraph ul:last-child,
.u1-adv-content__highlight ul:last-child,
.u1-adv-content__paragraph ol:last-child,
.u1-adv-content__highlight ol:last-child{
  margin-bottom: 0;
}
.u1-adv-content__paragraph li + li,
.u1-adv-content__highlight li + li{
  margin-top: 8px;
}
.u1-adv-content__paragraph li::marker,
.u1-adv-content__highlight li::marker{
  color: var(--text-secondary);
}

/* Feature cards: 2 por fila (width 50% menos el column-gap del inner) */
.u1-adv-content__card{
  width: calc(50% - 8px);
  max-width: none;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box;
  border-radius: 12px;
  padding: 24px;
  background: var(--bg-tertiary, #f7f7f7);
  background-size: cover;
  background-position: center;
  text-align: left;
}
.u1-adv-content__card-pill{
  display: inline-block;
  background: rgba(226, 57, 0, 0.10); /* naranja acento al 10% */
  border-radius: 8px;
  padding: 4px 8px;
  color: var(--text-primary, #0d0d0d);
}
.u1-adv-content__card-title{
  margin: 12px 0 0;
  color: var(--text-primary);
}
.u1-adv-content__card-text{
  margin-top: 6px;
  color: var(--text-secondary);
}
.u1-adv-content__card-text p{ margin: 0; }
.u1-adv-content__card-text strong{ color: var(--text-primary); }
.u1-adv-content__card--img{ border: 0; }
.u1-adv-content__card--img .u1-adv-content__card-title{ color: #fff; }
.u1-adv-content__card--img .u1-adv-content__card-text,
.u1-adv-content__card--img .u1-adv-content__card-text strong{ color: rgba(255,255,255,0.85); }
.u1-adv-content__card--img .u1-adv-content__card-pill{
  background: rgba(255,255,255,0.92); /* sobre foto: el 10% no se lee, vuelve al blanco */
}
/* Lo que viene despues de la grilla de cards se separa como cambio de tipo */
.u1-adv-content__card + .u1-adv-content__block{ margin-top: 40px; }
.u1-adv-content__card + .u1-adv-content__card{ margin-top: var(--advc-gap, 16px); }
@media (max-width: 749px){
  .u1-adv-content__card{ width: 100%; }
}

/* Milestones (timeline horizontal): 3 columnas en desktop, apiladas en mobile */
.u1-adv-content__milestone{
  width: calc(33.333% - 11px);
  max-width: none;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box;
  border-top: 1px solid var(--stroke-tertiary, rgba(0,0,0,0.12));
  padding-top: 20px;
  text-align: left;
}
.u1-adv-content__milestone-head{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.u1-adv-content__milestone-label{
  display: inline-block;
  border: 1px solid var(--text-primary, #0d0d0d);
  border-radius: 8px;
  padding: 6px 10px;
  color: var(--text-primary);
  white-space: nowrap;
}
.u1-adv-content__milestone-name{
  color: #e23900;
}
.u1-adv-content__milestone-items{ margin-top: 14px; }
.u1-adv-content__milestone-items ul{
  list-style: none;
  margin: 0;
  padding-left: 0;
}
.u1-adv-content__milestone-items li{
  position: relative;
  padding-left: 30px;
  color: var(--text-secondary);
}
.u1-adv-content__milestone-items li + li{ margin-top: 8px; }
.u1-adv-content__milestone-items li::before{
  content: '';
  position: absolute;
  left: 0;
  top: 0.05em;
  width: 20px;
  height: 20px;
  background-image: var(--u1-check);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.u1-adv-content__milestone-items li strong{ color: var(--text-primary); }
@media (max-width: 749px){
  .u1-adv-content__milestone{ width: 100%; }
}

/* Testimonial cards: grilla de 3 en desktop, texto centrado, fondo gris */
.u1-adv-content__tcard{
  width: calc(33.333% - 11px);
  max-width: none;
  margin-left: 0 !important;
  margin-right: 0 !important;
  /* margen vertical uniforme + stretch: todas las cards de la fila arrancan
     y terminan igual, sin importar cuanto texto tengan */
  margin-top: var(--advc-gap, 16px) !important;
  align-self: stretch;
  box-sizing: border-box;
  background: var(--bg-tertiary, #f5f5f5);
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Fade-in aleatorio: las cards se "encienden" en orden random al entrar en
   viewport (delay que setea el JS); sin JS o con reduced-motion, visibles directo */
.u1-adv-content__tcard.tcard-hidden,
.u1-adv-content__card.tcard-hidden{
  opacity: 0;
  transform: translateY(12px);
}
.u1-adv-content__tcard.tcard-in,
.u1-adv-content__card.tcard-in{
  opacity: 1;
  transform: none;
  transition: opacity 500ms ease var(--tcard-delay, 0ms), transform 500ms ease var(--tcard-delay, 0ms);
}
.u1-adv-content__tcard-text{ color: var(--text-secondary); }
.u1-adv-content__tcard-text p{ margin: 0; }
.u1-adv-content__tcard-text strong{ color: var(--text-primary); }
.u1-adv-content__tcard-stars{
  margin-top: 20px;
  color: var(--text-primary);
  font-size: 13px;
  letter-spacing: 3px;
}
.u1-adv-content__tcard-stars + .u1-adv-content__tcard-author{ margin-top: 6px; }
.u1-adv-content__tcard-author{
  margin-top: 24px;
  color: var(--text-primary);
}
.u1-adv-content__tcard-sub{
  margin-top: 4px;
  color: var(--text-secondary);
}
/* Variante "card" (Fox News, 2026-10-01): texto a la izquierda, fondo claro y stroke del DS,
   como la Highlight box. El default sigue siendo la version centrada sin borde. */
/* Space above en las cards (2026-10-01): en desktop las 3 de la fila llevan el mismo margen
   (si no, se desalinean); en mobile, apiladas, solo la primera. Sin el setting no cambia nada. */
.u1-adv-content__tcard[style*="--b-top-d"],
.u1-adv-content__tcard[style*="--b-top-m"]{
  margin-top: var(--b-top-d, var(--advc-gap, 16px)) !important;
}
@media screen and (max-width: 749px){
  .u1-adv-content__tcard[style*="--b-top-d"],
  .u1-adv-content__tcard[style*="--b-top-m"]{
    margin-top: var(--b-top-m, var(--b-top-d)) !important;
  }
  .u1-adv-content__tcard + .u1-adv-content__tcard[style*="--b-top-d"],
  .u1-adv-content__tcard + .u1-adv-content__tcard[style*="--b-top-m"]{
    margin-top: var(--advc-gap, 16px) !important;
  }
}
.u1-adv-content__tcard--card{
  text-align: left;
  justify-content: flex-start;
  background: var(--bg, #ffffff);
  border: 1px solid var(--stroke-tertiary, rgba(0,0,0,0.12));
}
@media screen and (max-width: 749px){
  .u1-adv-content__tcard{ width: 100%; }
}

/* FAQ: mismo componente que u1-faqs (snippet u1-faq-item); CSS calcado y
   scopeado aca por el gotcha de bundling por seccion */
.u1-adv-content__faqwrap + .u1-adv-content__faqwrap{ margin-top: 0 !important; }
.u1-adv-content__faqwrap:first-of-type .u1-faqs__item{
  border-top: 1px solid var(--interactive-stroke-secondary-hover, rgba(13,13,13,0.15));
}
.u1-adv-content .u1-faqs__item{
  border-bottom: 1px solid var(--interactive-stroke-secondary-hover, rgba(13,13,13,0.15));
  list-style: none;
}
.u1-adv-content .u1-faqs__item-summary{
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-primary, #0d0d0d);
  font: inherit;
  font-family: var(--u1-font-family, inherit);
  font-weight: 530;
  font-size: var(--u1-body-m-size, 17.2px);
  line-height: var(--u1-body-m-lh, 1.46);
  letter-spacing: var(--u1-body-m-ls, 0.016em);
  text-align: left;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.u1-adv-content .u1-faqs__item-summary::-webkit-details-marker{ display: none; }
.u1-adv-content .u1-faqs__item-summary:focus{ outline: none; }
.u1-adv-content .u1-faqs__item-summary:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 4px;
}
.u1-adv-content .u1-faqs__item-q{ flex: 1 1 auto; min-width: 0; }
.u1-adv-content .u1-faqs__item-icon{
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  position: relative;
  color: var(--icon-primary, var(--text-primary, #0d0d0d));
}
.u1-adv-content .u1-faqs__item-icon::before,
.u1-adv-content .u1-faqs__item-icon::after{
  content: '';
  position: absolute;
  background: currentColor;
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease;
}
.u1-adv-content .u1-faqs__item-icon::before{
  top: 50%; left: 0; right: 0; height: 1.5px; transform: translateY(-50%);
}
.u1-adv-content .u1-faqs__item-icon::after{
  left: 50%; top: 0; bottom: 0; width: 1.5px; transform: translateX(-50%) rotate(0deg);
}
.u1-adv-content .u1-faqs__item[open] .u1-faqs__item-icon::after{
  transform: translateX(-50%) rotate(90deg);
  opacity: 0;
}
.u1-adv-content .u1-faqs__item-panel{
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.u1-adv-content .u1-faqs__item[open] .u1-faqs__item-panel{ grid-template-rows: 1fr; }
.u1-adv-content .u1-faqs__item-panel-inner{ overflow: hidden; min-height: 0; }
.u1-adv-content .u1-faqs__item-answer{
  margin: 0;
  padding-bottom: 24px;
  color: var(--text-secondary, rgba(13,13,13,0.55));
  font-family: var(--u1-font-family, inherit);
  font-weight: 450;
  font-size: var(--u1-body-m-size, 17.2px);
  line-height: var(--u1-body-m-lh, 1.46);
  letter-spacing: var(--u1-body-m-ls, 0.016em);
}
.u1-adv-content .u1-faqs__item-answer p{ margin: 0 0 0.75em; }
.u1-adv-content .u1-faqs__item-answer p:last-child{ margin-bottom: 0; }

/* Product card: para offers de 2 productos (listicles) */
.u1-adv-content__pcard{
  width: calc(50% - 8px);
  max-width: none;
  margin-left: 0 !important;
  margin-right: 0 !important;
  /* margen uniforme + stretch: las dos cards arrancan y terminan iguales
     (la regla "pcard + block: 40px" empujaba solo a la segunda) */
  margin-top: var(--advc-gap, 16px) !important;
  align-self: stretch;
  box-sizing: border-box;
  background: var(--bg-tertiary, #f5f5f5);
  border-radius: 12px;
  padding: 32px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.u1-adv-content__pcard + .u1-adv-content__block{ margin-top: 40px; }
.u1-adv-content__pcard-media{
  width: 80%;
  aspect-ratio: 1 / 1;
  display: flex;
}
.u1-adv-content__pcard-media img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  margin: auto;
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.u1-adv-content__pcard{ text-decoration: none; color: inherit; cursor: pointer; }
.u1-adv-content__pcard:hover .u1-adv-content__pcard-media img{ transform: scale(1.05); }
.u1-adv-content__pcard:hover .u1-adv-content__pcard-cta{ opacity: 0.85; }
.u1-adv-content__pcard-title{ margin: 16px 0 0; color: var(--text-primary); }
.u1-adv-content__pcard-note{ margin-top: 4px; color: var(--text-secondary); }
.u1-adv-content__pcard-note p{ margin: 0; }
.u1-adv-content__pcard-price{ margin-top: 12px; margin-bottom: 24px; color: var(--text-primary); }
.u1-adv-content__pcard-prefix{ color: var(--text-secondary); font-weight: 400; }
.u1-adv-content__pcard-cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: auto; /* boton apoyado abajo, alineado entre cards */
  width: fit-content; /* no fill: solo el ancho del label */
  align-self: center;
  box-sizing: border-box;
  background: var(--text-primary, #0d0d0d);
  color: var(--bg, #fff);
  border-radius: 999px;
  padding: 12px 22px;
  font-size: var(--u1-body-s-size, 14.6px);
  line-height: var(--u1-body-s-lh, 1.45);
  text-decoration: none;
  transition: opacity 140ms ease;
}
.u1-adv-content__pcard-cta:hover{ opacity: 0.85; }
@media screen and (max-width: 749px){
  .u1-adv-content__pcard{ width: 100%; }
}

/* Trust badges: icono + texto con separadores (look u1-hero-benefits) */
.u1-adv-content__benefits{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 20px;
}
.u1-adv-content__benefits-item{
  display: flex;
  align-items: center;
  gap: 8px;
}
.u1-adv-content__benefits-icon{
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  color: var(--text-secondary, rgba(13,13,13,0.66));
}
.u1-adv-content__benefits-icon svg,
.u1-adv-content__benefits-icon img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.u1-adv-content__benefits-text{ color: var(--text-secondary); }
.u1-adv-content__benefits-divider{
  width: 1px;
  height: 16px;
  background: var(--stroke-tertiary, rgba(13,13,13,0.16));
}
@media screen and (max-width: 749px){
  .u1-adv-content__benefits-divider{ display: none; }
}

/* Tabla de ranking VT como block (snippet u1-ranking-row); CSS calcado de
   u1-ranking y scopeado aca por el gotcha de bundling */
.u1-adv-content__ranktable{
  border-bottom: 1px solid rgba(0,0,0,0.09);
}
.u1-adv-content__ranktable .u1-ranking__row{
  display: grid;
  align-items: center;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 24px;
  border-bottom: 1px solid rgba(0,0,0,0.09);
  padding: 28px 16px;
  width: 100%;
  box-sizing: border-box;
}
.u1-adv-content__ranktable .u1-ranking__row:last-child{ border-bottom: 0; }
.u1-adv-content__ranktable .u1-ranking__cell{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  min-width: 0;
}
.u1-adv-content__ranktable .u1-ranking__header-text{
  color: var(--text-tertiary, #8f8f8f);
  text-transform: uppercase;
  margin: 0;
}
.u1-adv-content__ranktable .u1-ranking__rank-text,
.u1-adv-content__ranktable .u1-ranking__name-text,
.u1-adv-content__ranktable .u1-ranking__category-text{
  color: var(--text-primary, #0d0d0d);
  margin: 0;
}
.u1-adv-content__ranktable .u1-ranking__name-image{
  display: block;
  width: auto;
  height: 20px;
  max-width: 160px;
  object-fit: contain;
}
.u1-adv-content__ranktable .u1-ranking__stars{
  display: flex;
  align-items: center;
  padding-right: 4px;
}
.u1-adv-content__ranktable .u1-ranking__star{
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin-right: -4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.u1-adv-content__ranktable .u1-ranking__star svg{ width: 100%; height: 100%; display: block; }
.u1-adv-content__ranktable .u1-ranking__star--empty{ opacity: 0.3; }
.u1-adv-content__ranktable .u1-ranking__row--highlight{ background: var(--bg-tertiary, #f5f5f5); }
@media screen and (max-width: 749px){
  /* Scroll horizontal: nada se parte en dos lineas (los textos traducidos
     rompian el grid apretado) */
  .u1-adv-content__ranktable{
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .u1-adv-content__ranktable::-webkit-scrollbar{ display: none; }
  .u1-adv-content__ranktable .u1-ranking__row{
    column-gap: 14px;
    padding: 18px 12px;
    /* rank+nombre entran en pantalla y las estrellas asoman cortadas:
       la senal de que hay mas contenido scrolleando a la derecha */
    grid-template-columns: 64px 200px 120px 150px;
    width: max-content;
    min-width: 100%;
  }
  .u1-adv-content__ranktable .u1-ranking__cell,
  .u1-adv-content__ranktable .u1-ranking__header-text,
  .u1-adv-content__ranktable .u1-ranking__rank-text,
  .u1-adv-content__ranktable .u1-ranking__name-text,
  .u1-adv-content__ranktable .u1-ranking__category-text{
    white-space: nowrap;
  }
  .u1-adv-content__ranktable .u1-ranking__star{ width: 16px; height: 16px; margin-right: -2px; }
  .u1-adv-content__ranktable .u1-ranking__rank-text,
  .u1-adv-content__ranktable .u1-ranking__name-text{ font-size: var(--u1-body-s-size, 14.6px); }
}

/* Checklist: lista con tildes (richtext con bullets) */
.u1-adv-content__checklist ul{
  list-style: none;
  margin: 0;
  padding: 0;
}
.u1-adv-content__checklist li{
  position: relative;
  padding-left: 28px;
  color: var(--text-secondary);
}
.u1-adv-content__checklist li + li{ margin-top: 8px; }
.u1-adv-content__checklist li::before{
  content: '';
  position: absolute;
  left: 0;
  top: 0.05em;
  width: 20px;
  height: 20px;
  background-image: var(--chk-icon, var(--u1-check));
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.u1-adv-content__checklist li strong{ color: var(--text-primary); }
/* (icono custom por block: la var --chk-icon inline pisa al check global) */
/* Review: estrellas + quote + autor (estrellas en primary como el PDP) */
.u1-adv-content__review-stars{
  color: var(--text-primary);
  font-size: 18px;
  letter-spacing: 2px;
  line-height: 1;
}
.u1-adv-content__review-text{
  margin-top: 8px;
  color: var(--text-secondary);
}
.u1-adv-content__review-text p{ margin: 0; }
.u1-adv-content__review-text strong{ color: var(--text-primary); }
.u1-adv-content__review-author{
  margin-top: 4px;
  color: var(--text-secondary);
}
/* Price: tachado + precio + nota */
.u1-adv-content__price{
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.u1-adv-content__price-compare{
  color: var(--text-secondary);
  text-decoration: line-through;
}
.u1-adv-content__price-main{ color: var(--text-primary); }
.u1-adv-content__price-note{ color: var(--text-secondary); }
/* CTA: pill negra del sitio */
.u1-adv-content__cta{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--text-primary, #0d0d0d);
  color: var(--bg, #fff);
  border-radius: 999px;
  padding: 18px 32px;
  text-decoration: none;
  transition: opacity 140ms ease;
}
.u1-adv-content__cta--small{
  padding: 12px 22px;
  font-size: var(--u1-body-s-size, 14.6px);
  line-height: var(--u1-body-s-lh, 1.45);
}
.u1-adv-content__cta:hover{ opacity: 0.85; }
/* CTA al costado (desktop): los parrafos anteriores se angostan (2/3) y el
   CTA se apoya a la derecha, alineado al borde inferior del texto */
@media screen and (min-width: 750px){
  .u1-adv-content__cta-wrap--side{
    width: auto;
    margin-left: auto !important; /* flush contra el borde derecho del container (mismo ancho que la grid); pisa el margin-right:auto de --left */
    margin-right: 0 !important;
    margin-top: 0;
    align-self: center; /* centrado vertical contra el parrafo (mock de Fermin) */
  }
  .u1-adv-content__inner--cta-side .u1-adv-content__paragraph{
    width: calc(66.666% - 48px);
    margin-right: 0;
  }
}
/* Link con flecha */
.u1-adv-content__link{
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 749px){
  .u1-adv-content__cta{ width: 100%; justify-content: center; }
  .u1-adv-content__highlight{ padding: 20px; }
  .u1-adv-content__image img{ border-radius: 8px; }
}
/* END_SECTION:u1-advertorial-content */

/* START_SECTION:u1-advertorial-header (INDEX:55) */
.u1-adv-header--dark{
  --text-primary: #ffffff;
  --text-secondary: rgba(255,255,255,0.66);
  --stroke-tertiary: rgba(255,255,255,0.16);
  --bg: #0d0d0d;
  --bg-tertiary: #1d1d1d;
  --u1-check: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'><path d='M6.5 12.5L10 16L17.5 8.5' stroke='white' stroke-width='1.5'/></svg>");
}
.u1-adv-header--dark .u1-adv-header__hero{
  background: #1d1d1d;
}
/* Masthead editorial (listicles): label neutro + tag Sponsored */
.u1-adv-header__masthead{
  width: 100%;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--stroke-tertiary, rgba(13,13,13,0.12));
  margin-bottom: 32px;
  color: var(--text-primary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.u1-adv-header__masthead-tag{
  color: var(--text-secondary);
  letter-spacing: 0.04em;
  text-transform: none;
}
.u1-adv-header{
  background: var(--bg);
  padding-top: var(--adv-pt-d, 32px);
  padding-bottom: var(--adv-pb-d, 24px);
}
@media (max-width: 1024px){
  .u1-adv-header{
    padding-top: var(--adv-pt-t, 28px);
    padding-bottom: var(--adv-pb-t, 20px);
  }
}
@media (max-width: 749px){
  .u1-adv-header{
    padding-top: var(--adv-pt-m, 24px);
    padding-bottom: var(--adv-pb-m, 16px);
  }
}
.u1-adv-header__inner{
  width: 100%;
  max-width: var(--adv-max, 980px);
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.u1-adv-header--left .u1-adv-header__inner{
  align-items: flex-start;
  text-align: left;
}
.u1-adv-header--left .u1-adv-header__text{
  width: 100%;
  max-width: var(--adv-text-max, 760px);
  display: flex;
  flex-direction: column;
  align-items: inherit;
  text-align: inherit;
}
.u1-adv-header--left .u1-adv-header__text{
  margin-right: auto;
}
.u1-adv-header__h1{
  text-wrap: initial;
}
/* Titulo arriba de la foto (Sofia/Fermin 2026-10-02): el bloque de texto pasa antes del hero por
   order; el gap que el hero tenia abajo pasa arriba. Default (sin el setting) no cambia nada. */
.u1-adv-header--title-first .u1-adv-header__masthead{ order: -2; }
.u1-adv-header--title-first .u1-adv-header__text{ order: -1; }
.u1-adv-header--title-first .u1-adv-header__hero{
  margin-bottom: 0;
  margin-top: var(--adv-img-gap, 48px);
}
.u1-adv-header__hero{
  width: 100%;
  margin: 0;
  margin-bottom: var(--adv-img-gap, 48px);
  border-radius: 12px;
  overflow: hidden;
  background: #f5f5f5;
}
.u1-adv-header__hero img{
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
@media (max-width: 749px){
  .u1-adv-header__hero img{
    aspect-ratio: 4 / 5;
  }
}
/* Hero full-bleed (opcion B de Fermin): imagen borde a borde arrancando en el
   tope de la pagina (la nav flota encima), titulo + byline debajo en container */
.u1-adv-header--bleed{
  padding-top: 0 !important;
}
.u1-adv-header--bleed .u1-adv-header__hero{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  border-radius: 0;
}
.u1-adv-header--bleed .u1-adv-header__hero img{
  /* Ratio fijo: mismo encuadre en cualquier desktop (pedido Fermin).
     10:3 (antes 8:3): hero mas bajo para que el titular entre en el fold */
  aspect-ratio: 10 / 3;
  height: auto;
}
@media (max-width: 749px){
  .u1-adv-header--bleed .u1-adv-header__hero img{
    aspect-ratio: 4 / 5;
    height: auto;
  }
}
.u1-adv-header__text{
  width: 100%;
  max-width: var(--adv-text-max, 760px);
  display: flex;
  flex-direction: column;
  align-items: inherit;
  text-align: inherit;
}
.u1-adv-header--left .u1-adv-header__text{
  margin-right: auto;
}
.u1-adv-header__h1{
  margin: 0;
  color: var(--text-primary);
  text-wrap: balance;
}
.u1-adv-header__h1 p{ margin: 0; }
.u1-adv-header__sub{
  color: var(--text-secondary);
  margin-top: 24px;
}
.u1-adv-header__sub p{ margin: 0; }
.u1-adv-header__sub strong,
.u1-adv-header__h1 strong{
  color: var(--text-primary);
}
.u1-adv-header__byline{
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  margin-top: 24px;
}
.u1-adv-header__avatar{
  width: 48px;
  height: 48px;
  border-radius: 999px;
  object-fit: cover;
  display: block;
}
.u1-adv-header__author{ margin: 0; color: var(--text-primary); }
/* Credito con link (ej. "As covered by Fox News" → la nota): mismo color, subrayado fino */
.u1-adv-header__author-link{
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
/* Acento del H1: el resto del titulo atenuado, la negrita queda en primario (mismo patron
   muted/bright del titulo de dos lineas del carousel). Solo con headline_accent = rest-muted */
.u1-adv-header--accent-rest-muted .u1-adv-header__h1{
  color: var(--text-tertiary, rgba(13, 13, 13, 0.42));
}
.u1-adv-header__meta{ margin: 2px 0 0; color: var(--text-secondary); }
@media (max-width: 749px){
  .u1-adv-header__hero{ border-radius: 8px; }
}
/* END_SECTION:u1-advertorial-header */

/* START_SECTION:u1-advertorial-offer (INDEX:56) */
.u1-adv-offer--dark{
  --text-primary: #ffffff;
  --text-secondary: rgba(255,255,255,0.66);
  --stroke-tertiary: rgba(255,255,255,0.16);
  --bg: #0d0d0d;
  --bg-tertiary: #1d1d1d;
  --u1-check: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'><path d='M6.5 12.5L10 16L17.5 8.5' stroke='white' stroke-width='1.5'/></svg>");
}
.u1-adv-offer--dark .u1-adv-offer__viewport,
.u1-adv-offer--dark .u1-adv-offer__frame,
.u1-adv-offer--dark .u1-adv-offer__thumb{
  background: #1d1d1d;
}
.u1-adv-offer{
  overflow-x: clip; /* nada puede desbordar la seccion horizontalmente (fix mobile) */
  --u1-check: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'><path d='M6.5 12.5L10 16L17.5 8.5' stroke='%231D1D1D' stroke-width='1.5'/></svg>");
  background: var(--advo-bg, #fff);
  padding-top: var(--advo-pt-d, 80px);
  padding-bottom: var(--advo-pb-d, 80px);
}
@media (max-width: 1024px){
  .u1-adv-offer{
    padding-top: var(--advo-pt-t, 64px);
    padding-bottom: var(--advo-pb-t, 64px);
  }
}
@media (max-width: 749px){
  .u1-adv-offer{
    padding-top: var(--advo-pt-m, 64px);
    padding-bottom: var(--advo-pb-m, 64px);
  }
}
.u1-adv-offer__inner{
  width: 100%;
  max-width: var(--advo-max, 1048px);
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 1024px){
  .u1-adv-offer__inner{
    grid-template-columns: 1fr;
    gap: 32px;
  }
}
/* Tira de imagenes del producto: deslizable/arrastrable, sin flechas */
.u1-adv-offer__strip{
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab;
}
.u1-adv-offer__strip::-webkit-scrollbar{ display: none; }
.u1-adv-offer__strip.is-dragging{ cursor: grabbing; scroll-snap-type: none; }
.u1-adv-offer__frame{
  flex: 0 0 100%;
  scroll-snap-align: start;
  aspect-ratio: 1 / 1;
  background: #f5f5f5;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
}
.u1-adv-offer__media{
  width: 80%;
  height: 80%;
  margin: auto; /* aire contra los bordes del frame */
  object-fit: contain;
  pointer-events: none;
}
/* Dots: señalan que la galeria es draggeable y en que slide estas */
.u1-adv-offer__dots{
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}
.u1-adv-offer__dot{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: var(--stroke-tertiary, rgba(13,13,13,0.16));
  transition: background 140ms ease;
}
.u1-adv-offer__dot.is-active{
  background: var(--text-primary, #0d0d0d);
}
/* Tira de quotes: arrastrable si desbordan */
/* Tira de quotes: el RECORTE izquierdo queda en el margen del container
   (margin-left real, las cards no lo sobrepasan al scrollear); a la derecha
   sangra y se corta recien en el borde de la pantalla */
.u1-adv-offer__quotes{
  display: flex;
  gap: 12px;
  margin-top: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab;
  box-sizing: border-box;
  /* Full-bleed a ambos lados: la card 1 arranca apoyada en el margen del
     container (padding-left), pero al scrollear las cards siguen visibles
     hasta el borde de la pantalla (el recorte es el viewport, no el margen) */
  padding-left: calc(max((100vw - var(--advo-max, 1048px)) / 2, 0px) + 20px);
  scroll-padding-left: calc(max((100vw - var(--advo-max, 1048px)) / 2, 0px) + 20px);
  padding-right: 20px;
}
.u1-adv-offer__quotes::-webkit-scrollbar{ display: none; }
.u1-adv-offer__quotes.is-dragging{ cursor: grabbing; scroll-snap-type: none; }
.u1-adv-offer__quotes .u1-adv-offer__quote{
  flex: 0 0 min(380px, 85vw);
  scroll-snap-align: start;
}
.u1-adv-offer__quote{
  box-sizing: border-box;
  background: var(--bg-tertiary, #f7f7f7);
  border: 1px solid var(--stroke-tertiary, rgba(0,0,0,0.12));
  border-radius: 12px;
  padding: 20px;
}
.u1-adv-offer__quote-text{ color: var(--text-secondary); }
.u1-adv-offer__quote-text p{ margin: 0; }
.u1-adv-offer__quote-text strong{ color: var(--text-primary); }
.u1-adv-offer__quote-meta{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.u1-adv-offer__quote-author{ color: var(--text-secondary); }
.u1-adv-offer__stars{
  color: var(--text-primary, #0d0d0d);
  font-size: 14px;
  letter-spacing: 2px;
  line-height: 1;
}
/* Buy-box */
.u1-adv-offer__title{
  margin: 0;
  color: var(--text-primary);
}
.u1-adv-offer__rating{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  color: var(--text-secondary);
}
.u1-adv-offer__desc{
  margin-top: 16px;
  color: var(--text-secondary);
}
.u1-adv-offer__desc p{ margin: 0; }
.u1-adv-offer__desc strong{ color: var(--text-primary); }
.u1-adv-offer__trust{
  margin-top: 20px;
  color: var(--text-secondary);
}
.u1-adv-offer__trust p{ margin: 0; }
.u1-adv-offer__trust strong{ color: var(--text-primary); }
.u1-adv-offer__proof{
  margin-top: 8px;
  color: var(--text-secondary);
}
.u1-adv-offer__proof p{ margin: 0; }
.u1-adv-offer__proof strong{ color: var(--text-primary); }
.u1-adv-offer__checklist{ margin-top: 16px; }
.u1-adv-offer__checklist ul{
  list-style: none;
  margin: 0;
  padding: 0;
}
.u1-adv-offer__checklist li{
  position: relative;
  padding-left: 28px;
  color: var(--text-secondary);
}
.u1-adv-offer__checklist li + li{ margin-top: 8px; }
.u1-adv-offer__checklist li::before{
  content: '';
  position: absolute;
  left: 0;
  top: 0.05em;
  width: 20px;
  height: 20px;
  background-image: var(--advo-check, var(--u1-check));
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.u1-adv-offer__checklist li strong{ color: var(--text-primary); }
.u1-adv-offer__price{
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.u1-adv-offer__price-compare{
  color: var(--text-secondary);
  text-decoration: line-through;
}
.u1-adv-offer__price-main{ color: var(--text-primary); }
.u1-adv-offer__price-note{ color: #e23900; }
/* CTA pill negra estilo ATC de la PDP (sin estados de bloqueo) */
.u1-adv-offer__cta{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  margin-top: 20px;
  background: var(--text-primary, #0d0d0d);
  color: var(--bg, #fff);
  border-radius: 999px;
  padding: 18px 32px;
  text-decoration: none;
  transition: opacity 140ms ease;
}
.u1-adv-offer__cta:hover{ opacity: 0.85; }
.u1-adv-offer__disclaimer{
  margin-top: 12px;
  color: var(--text-secondary);
  text-align: center;
}
.u1-adv-offer__disclaimer p{ margin: 0; }
/* END_SECTION:u1-advertorial-offer */

/* START_SECTION:u1-app-slot (INDEX:57) */
/* Sin .u1-section aquí: el full-bleed va en el wrapper (schema class). Evita doble 100vw anidado. */
  #U1AppSlot-{{ section.id }}.u1-app-slot {
    width: 100%;
    max-width: none;
    overflow: visible;
    box-sizing: border-box;
  }
  #U1AppSlot-{{ section.id }} .u1-app-slot__inner {
    width: 100%;
    max-width: none;
  }
  #U1AppSlot-{{ section.id }} .u1-app-slot__widget {
    width: 100%;
    max-width: none;
    overflow: visible;
    box-sizing: border-box;
  }
/* END_SECTION:u1-app-slot */

/* START_SECTION:u1-article-masthead (INDEX:59) */
.u1-art-mast{
  background: var(--bg, #ffffff);
  padding-bottom: var(--am-pb-m, 24px);
}
/* Barra del medio: oscura, como la de un diario online */
.u1-art-mast__bar{
  background: var(--neutral-950, #0d0d0d);
  color: #ffffff;
  /* Barra fija (Fermin 2026-10-01): se esconde al bajar y vuelve al subir (JS abajo). El
     spacer reserva su alto para que el contenido no salte. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  transform: translateY(0);
  transition: transform 220ms ease;
}
.u1-art-mast__bar.is-hidden{
  transform: translateY(-100%);
}
.u1-art-mast__bar-spacer{
  height: var(--am-bar-h, 45px); /* medido en vivo: 10 + 25 de linea + 10 */
}
.u1-art-mast__brand:hover,
.u1-art-mast__menu-item:hover{
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.u1-art-mast__brand,
.u1-art-mast__menu-item{
  text-decoration: none;
  transition: color 150ms ease;
}
.u1-art-mast__credit a:hover{
  text-decoration: underline;
}
.u1-art-mast__bar-inner{
  max-width: var(--am-max, 1048px);
  margin: 0 auto;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.u1-art-mast__brand{
  color: #ffffff;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.u1-art-mast__menu{
  display: flex;
  gap: 20px;
  color: rgba(255,255,255,0.72);
  white-space: nowrap;
  overflow: hidden;
  flex: 1 1 auto;
  min-width: 0;
}
.u1-art-mast__menu-item{
  color: rgba(255,255,255,0.72);
  white-space: nowrap;
}
.u1-art-mast__menu-item.is-active{
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.u1-art-mast__bar-right{
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255,255,255,0.72);
  white-space: nowrap;
}
.u1-art-mast__adv{
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 2px;
  padding: 2px 6px;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.u1-art-mast__inner{
  max-width: var(--am-max, 1048px);
  margin: 0 auto;
  /* Aire entre la barra y el titular: setting Padding superior (default 20 = render original) */
  padding: var(--am-pt-m, 20px) 24px 0;
}
.u1-art-mast__crumbs{
  margin: 0 0 16px;
  color: var(--text-secondary);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.u1-art-mast__crumb-sep{ color: var(--text-tertiary); }
.u1-art-mast__h1{
  margin: 0;
  color: var(--text-primary);
  text-wrap: balance;
  max-width: 900px;
}
.u1-art-mast__h1 p{ margin: 0; }
.u1-art-mast__sub{
  margin-top: 12px;
  color: var(--text-secondary);
  max-width: 820px;
}
.u1-art-mast__sub p{ margin: 0; }
.u1-art-mast__byline{
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--stroke-tertiary, rgba(13,13,13,0.08));
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  color: var(--text-secondary);
}
.u1-art-mast__avatar{
  width: 32px;
  height: 32px;
  border-radius: 999px;
  object-fit: cover;
}
.u1-art-mast__author strong{ color: var(--text-primary); font-weight: 600; }
.u1-art-mast__meta + .u1-art-mast__meta::before,
.u1-art-mast__author + .u1-art-mast__meta::before{
  content: "\00b7";
  margin-right: 12px;
  color: var(--text-tertiary);
}
.u1-art-mast__credit{ margin-left: auto; }
.u1-art-mast__credit a{
  color: var(--u1-article-link, #1a0dab);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.u1-art-mast__hero{
  margin: var(--am-hero-gap, 40px) 0 0;
}
.u1-art-mast__hero img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 4px;
}
.u1-art-mast__caption{
  margin-top: 8px;
  color: var(--text-secondary);
}
@media (min-width: 750px){
  .u1-art-mast{ padding-bottom: var(--am-pb-d, 32px); }
  .u1-art-mast__inner{ padding-top: var(--am-pt-d, 20px); }
}
@media (max-width: 749px){
  .u1-art-mast__menu{ display: none; }
  .u1-art-mast__bar-date{ display: none; }
  .u1-art-mast__hero img{ aspect-ratio: 4 / 5; }
  .u1-art-mast__credit{ margin-left: 0; flex-basis: 100%; }
}

/* Jerarquia editorial del advertorial (Fermin 2026-10-07). Medido a 390px antes del
   cambio: titular 32,2 y bajada 14, con el cuerpo en 17,2. La bajada quedaba mas chica
   que el texto. Doble clase para ganarle a las utilidades text-h2 / u1-text-body-* . */
.u1-art-mast .u1-art-mast__h1{
  font-size: clamp(2.375rem, 2rem + 2vw, 3.25rem);
  line-height: 1.08;
}
.u1-art-mast .u1-art-mast__sub{
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  line-height: 1.45;
}
/* END_SECTION:u1-article-masthead */

/* START_SECTION:u1-article-sidebar (INDEX:60) */
/* Anclas del menu del masthead: dejan aire para la barra fija (2026-10-01) */
.u1-art__title{ scroll-margin-top: 64px; }

.u1-art{
  padding: var(--ar-pt-m, 16px) 0 var(--ar-pb-m, 48px);
}
.u1-art__inner{
  max-width: var(--ar-max, 1048px);
  margin: 0 auto;
  padding: 0 24px;
}
.u1-art__main{
  max-width: var(--ar-main, 680px);
  min-width: 0;
}
/* Ritmo denso de nota: blocks pegados, salto mayor solo antes de un subtitulo */
.u1-art__block{ margin: 0; }
.u1-art__block + .u1-art__block{ margin-top: var(--ar-blocks-gap, 16px); }
.u1-art__block + .u1-art__title{ margin-top: 32px; }
/* Botones en fila (Fermin 2026-10-20): dos CTA seguidos van uno al lado del otro, no apilados */
.u1-art__cta{ display: inline-block; vertical-align: top; }
.u1-art__cta + .u1-art__cta{ margin-left: 12px; }
.u1-art__title{ color: var(--text-primary); }
/* Titulo de capitulo (Fermin 2026-10-01: "separa mas los capitulos"): mas aire arriba y un divisor fino.
   Un mecanismo por distancia: el margen separa del bloque anterior, el padding separa el divisor del texto.
   No depende de la adyacencia, asi tambien funciona como primer block de una section (el reveal). */
.u1-art__title--chapter{
  margin-top: 64px;
  border-top: 1px solid var(--stroke-tertiary, rgba(13,13,13,0.08));
  padding-top: 32px;
}
.u1-art__block + .u1-art__title--chapter{ margin-top: 64px; }
/* Primer capitulo de la nota (debajo del hero): sin divisor ni margen grande */
.u1-art__title--chapter.u1-art__title--first,
.u1-art__block + .u1-art__title--chapter.u1-art__title--first{
  margin-top: 0;
  border-top: 0;
  padding-top: 0;
}
@media (min-width: 750px){
  .u1-art__title--chapter,
  .u1-art__block + .u1-art__title--chapter{ margin-top: 96px; padding-top: 48px; }
  .u1-art__title--chapter.u1-art__title--first,
  .u1-art__block + .u1-art__title--chapter.u1-art__title--first{ margin-top: 0; padding-top: 0; }
}
.u1-art__p{ color: var(--text-primary); }
.u1-art__p p{ margin: 0; }
.u1-art__p p + p{ margin-top: 12px; }
.u1-art__p--lead p:first-child{ font-weight: 600; }
.u1-art__main a:not(.u1-btn){
  color: var(--u1-article-link, #1a0dab);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.u1-art__main a:not(.u1-btn):hover{ text-decoration-thickness: 2px; }
.u1-art__figure img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 4px;
}
.u1-art__caption{
  margin-top: 8px;
  color: var(--text-secondary);
}
.u1-art__quote{
  padding-left: 16px;
  border-left: 2px solid var(--text-primary);
}
.u1-art__quote-text{ color: var(--text-primary); }
.u1-art__quote-text p{ margin: 0; }
.u1-art__quote-cite{
  display: block;
  margin-top: 6px;
  color: var(--text-secondary);
  font-style: normal;
}
.u1-art__highlight{
  padding: 16px;
  border: 1px solid var(--stroke-tertiary, rgba(13,13,13,0.08));
  border-radius: 4px;
  background: var(--bg-tertiary, #f5f5f5);
  color: var(--text-primary);
}
.u1-art__highlight p{ margin: 0; }
.u1-art__checklist ul{
  margin: 0;
  padding-left: 20px;
}
.u1-art__checklist li + li{ margin-top: 8px; }
.u1-art__review{
  padding: 16px;
  border: 1px solid var(--stroke-tertiary, rgba(13,13,13,0.08));
  border-radius: 4px;
}
.u1-art__review-text{ color: var(--text-primary); }
.u1-art__review-text p{ margin: 0; }
.u1-art__review-author{
  margin: 8px 0 0;
  color: var(--text-secondary);
}
.u1-art__review-author strong{ color: var(--text-primary); font-weight: 600; }
/* Negritas del cuerpo del advertorial: Neue Montreal solo cambia de corte real en 700.
   El 'strong' por defecto renderiza 590, que cae en el mismo corte que el cuerpo (450)
   y no se lee como negrita. Medido en vivo 2026-10-07. */
.u1-art__block strong,
.u1-art__block b{
  font-weight: 700;
  color: var(--text-primary);
}
.u1-art__trust{
  list-style: none;
  margin: 0;
  padding: 12px 0;
  border-top: 1px solid var(--stroke-tertiary, rgba(13,13,13,0.08));
  border-bottom: 1px solid var(--stroke-tertiary, rgba(13,13,13,0.08));
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  color: var(--text-secondary);
}
.u1-art__trust-item{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.u1-art__trust-icon{ display: inline-flex; width: 16px; height: 16px; }
.u1-art__trust-icon svg{ width: 16px; height: 16px; }
.u1-art__link a{ font-weight: 600; }

/* Sidebar: oculta en mobile, sticky en desktop */
.u1-art__side{ display: none; }
.u1-art__side-label{
  margin: 0 0 8px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
}

/* Display ad: borde fino, radio 4, imagen arriba, titular + texto + CTA abajo, sello "Ad" */
.u1-art-ad{
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 1px solid var(--stroke-tertiary, rgba(13,13,13,0.12));
  border-radius: 4px;
  overflow: hidden;
}
/* Hover (Fermin 2026-10-01: que respondan a interaccion): borde mas firme y zoom suave de la imagen */
.u1-art-ad{ transition: border-color 150ms ease; }
.u1-art-ad:hover{ border-color: var(--stroke-primary, rgba(13,13,13,0.4)); }
.u1-art-ad__media{ overflow: hidden; }
.u1-art-ad__media img{ transition: transform 200ms ease; }
.u1-art-ad:hover .u1-art-ad__media img{ transform: scale(1.03); }
@media (prefers-reduced-motion: reduce){
  .u1-art-ad__media img{ transition: none; }
  .u1-art-ad:hover .u1-art-ad__media img{ transform: none; }
}
.u1-art-ad--300x250{ height: 250px; }
/* Alto del formato grande por setting (default 600 = IAB half page); Fermin 2026-10-01: mas bajo para que
   los dos anuncios entren juntos en 1440x900 con el sticky activo */
.u1-art-ad--300x600{ height: var(--ad-h, 600px); }
.u1-art-ad + .u1-art-ad{ margin-top: 16px; }
.u1-art-ad__tag{
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 1;
  padding: 1px 5px;
  border: 1px solid var(--stroke-tertiary, rgba(13,13,13,0.12));
  border-radius: 2px;
  background: rgba(255,255,255,0.9);
  color: var(--text-secondary);
  line-height: 1.4;
}
.u1-art-ad__media{
  display: block;
  flex: 1 1 auto;
  min-height: 0;
}
.u1-art-ad__media img{
  display: block;
  width: 100%;
  height: 100%;
}
.u1-art-ad__body{
  flex: 0 0 auto;
  padding: 12px;
}
.u1-art-ad__headline{ margin: 0; color: var(--text-primary); }
.u1-art-ad__text{ margin: 4px 0 0; color: var(--text-secondary); }
.u1-art-ad__cta{ margin-top: 10px; }
/* Copia inline (mobile): a ancho completo, siempre 250 de alto. Es un .u1-art__block mas, asi en
   desktop (donde va oculta) el titulo que la sigue conserva su margen normal (32 subtitulo / 96 capitulo)
   en vez de heredar el de 24 del anuncio: medido 2026-10-01, 'The evidence' quedaba a 24. */
.u1-art-ad--inline{ height: 250px; }
@media (max-width: 989px){
  .u1-art__block + .u1-art-ad--inline,
  .u1-art-ad--inline + .u1-art__block{ margin-top: 24px; }
  .u1-art-ad--inline + .u1-art__title--chapter{ margin-top: 64px; }
}

@media (min-width: 750px){
  .u1-art{ padding: var(--ar-pt-d, 24px) 0 var(--ar-pb-d, 64px); }
}
@media (max-width: 749px){
  .u1-art__figure img{ aspect-ratio: 4 / 5; }
}
@media (min-width: 990px){
  .u1-art__inner{
    display: grid;
    grid-template-columns: minmax(0, var(--ar-main, 680px)) var(--ar-side, 300px);
    justify-content: space-between;
    column-gap: var(--ar-gap, 48px);
    /* La columna de anuncios se estira a toda la fila: el sticky de adentro necesita un contenedor
       tan alto como el articulo (con align-items: start media lo de su contenido y no acompanaba;
       medido 2026-10-01 a la altura de las reviews). El articulo si se alinea arriba. */
    align-items: stretch;
  }
  .u1-art__main{ align-self: start; }
  .u1-art__side{ display: block; align-self: stretch; }
  .u1-art--sticky .u1-art__side-stack{
    position: sticky;
    top: var(--ar-sticky-top, 24px);
  }
  .u1-art-ad--inline{ display: none; }
}

/* Acento editorial del advertorial: un solo color, en la barra de la cita, el numero
   del destacado y los links. Nada mas. (Fermin 2026-10-07) */
.u1-art{
  --u1-art-accent: #e23900;
  /* Version oscura para texto a tamanio de cuerpo: el naranja pleno sobre el fondo
     teñido da 4,0 de contraste y AA pide 4,5. Este da 6,2. Medido 2026-10-07. */
  --u1-art-accent-ink: #a82a00;
  --u1-art-accent-tint: rgba(226, 57, 0, 0.08);
}

/* La cita medía 20px contra 17,2 del cuerpo: no se leia como cita. */
.u1-art .u1-art__quote-text{
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem);
  line-height: 1.22;
}
.u1-art .u1-art__quote{
  padding-left: 18px;
  border-left: 3px solid var(--u1-art-accent);
}

/* Caja de dato: fondo con el acento al 8% y texto en la version oscura del mismo color. */
.u1-art .u1-art__highlight{
  background: var(--u1-art-accent-tint);
  border-color: rgba(226, 57, 0, 0.18);
}
.u1-art .u1-art__highlight p{ color: var(--u1-art-accent-ink); }
/* Negritas dentro de la caja: mismo color que el resto del texto (Fermin 2026-10-20) */
.u1-art .u1-art__highlight p strong{ color: inherit; }

/* El numero manda, pero solo cuando hay una bajada debajo. Una caja de un solo
   parrafo es texto corrido y se queda al tamanio de lectura. */
.u1-art .u1-art__highlight p:first-child:not(:only-child){
  font-size: clamp(3.5rem, 2.5rem + 5vw, 4.5rem);
  line-height: 1;
  margin: 0 0 4px;
  color: var(--u1-art-accent);
}
.u1-art .u1-art__highlight p:first-child:not(:only-child) strong{ color: inherit; }
.u1-art .u1-art__highlight p:last-child:not(:only-child){
  font-size: 1.0625rem;
  line-height: 1.45;
}

.u1-art .u1-art__block a{ color: var(--u1-art-accent); }
/* END_SECTION:u1-article-sidebar */

/* START_SECTION:u1-carousel (INDEX:64) */
/* ═══════════════════════════════════════════════════════════════════════════
   u1-carousel — Composable Carousel
   ═══════════════════════════════════════════════════════════════════════════ */

.u1-carousel {
  width: 100%;
  box-sizing: border-box;
  position: relative;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow-x: clip;
}

.u1-carousel__clip {
  grid-column: 1 / -1 !important;
}

/* ── Shop Pay Installments — vive DENTRO de la fila de flechas: el texto
      a la izquierda (margin auto empuja las flechas a la derecha) ───────── */
.u1-carousel__payment-terms {
  margin-right: auto;
  align-self: center;
  text-align: left;
}
.u1-carousel__arrows { flex-wrap: wrap; }

/* ── Tabs de audiencia (selector pill) ─────────────────────────────────── */
.u1-carousel__tab-anchor {
  display: block;
  height: 0;
  scroll-margin-top: 90px; /* nav flotante */
}
.u1-carousel__tabs-row {
  display: flex;
  /* flex-start + margin auto en el pill: centrado cuando entra, y cuando el pill
     es mas ancho que la pantalla queda scrolleable desde la primera tab.
     Con justify center + overflow las puntas quedaban cortadas e inalcanzables. */
  justify-content: flex-start;
  /* La fila es un scroller (overflow-x auto) y en Safari recorta el subpixel del
     borde inferior del pill: 2px de aire arriba/abajo, compensados en el margen */
  margin-bottom: 22px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-inline: 16px;
  padding-block: 2px;
}
.u1-carousel__tabs-row::-webkit-scrollbar { display: none; }
.u1-carousel__tabs {
  position: relative;
  margin-inline: auto;
  flex-shrink: 0;
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 100px;
  background: transparent;
}
/* Thumb deslizante: se posiciona por JS (width + translateX) */
.u1-carousel__tab-thumb {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: 0;
  border-radius: 100px;
  background: var(--neutral-200, #efefef);
  transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1), width 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform, width;
  z-index: 0;
}
.u1-carousel__tab {
  position: relative;
  z-index: 1;
  border: 0;
  background: transparent;
  border-radius: 100px;
  padding: 10px 20px;
  cursor: pointer;
  color: rgba(0, 0, 0, 0.6);
  font-family: inherit;
  white-space: nowrap;
  transition: color 140ms ease;
}
.u1-carousel__tab.is-active {
  color: var(--text-primary);
}
.u1-carousel__tab:hover:not(.is-active) {
  color: var(--text-primary);
}
@media screen and (max-width: 749px) {
  .u1-carousel__tab { padding: 9px 16px; }
  /* Full-bleed: el scroller rompe el container (88vw) y corta contra el borde
     fisico de la pantalla; el padding devuelve el gutter para que el pill
     arranque alineado con el contenido. El mask difumina hacia el borde derecho
     mientras quede scroll (el JS saca .is-scroll-end al llegar al final). */
  .u1-carousel__tabs-row {
    margin-inline: calc(50% - 50vw);
    padding-inline: calc(50vw - 50%);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
  }
  .u1-carousel__tabs-row.is-scroll-end {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* ── Header ─────────────────────────────────────────────────────────────── */

.u1-carousel__header-wrap {
  width: var(--w-fluid);
  max-width: var(--u1-carousel-max-w, var(--max-w-m));
  margin: 0 auto;
  padding: 0 0 60px;
}

.u1-carousel__header-wrap--center {
  text-align: center;
}

.u1-carousel__heading {
  margin: 0 !important;
  color: var(--text-primary);
  max-width: var(--u1-carousel-header-mw, none);
}

/* "UNIT 1" (marca) nunca se parte entre líneas */
.u1-carousel__heading .u1-nowrap { white-space: nowrap; }

/* ── Two-line heading ── */

.u1-carousel__heading-line {
  display: block;
}

.u1-carousel__heading-line--muted {
  color: var(--text-tertiary, rgba(13,13,13,0.42));
}

.u1-carousel__heading-line--bright {
  color: var(--text-primary, #0d0d0d);
}

.u1-carousel__header-wrap--center .u1-carousel__heading {
  margin-left: auto !important;
  margin-right: auto !important;
}

.u1-carousel__caption {
  margin: 0 0 12px;
  max-width: var(--u1-carousel-header-mw, none);
}

.u1-carousel__header-wrap--center .u1-carousel__caption {
  margin-left: auto;
  margin-right: auto;
}

.u1-carousel__subtitle {
  margin: 12px 0 0;
  color: var(--text-secondary);
  max-width: var(--u1-carousel-header-mw, none);
}

.u1-carousel__header-wrap--center .u1-carousel__subtitle {
  margin-left: auto;
  margin-right: auto;
}

/* ── Track ──────────────────────────────────────────────────────────────── */

.u1-carousel__carousel-wrap {
  position: relative;
}

/* Extra 68px after floating element so it rests at 100px from section bottom (32 + 68) */
.u1-carousel__carousel-wrap::after {
  content: '';
  display: block;
  height: 68px;
}

.u1-carousel__track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 20px;
  --_u1-carousel-inset: calc((100% - min(var(--w-fluid, 88vw), var(--u1-carousel-max-w, var(--max-w-m)))) / 2);
  padding-left: var(--_u1-carousel-inset);
  padding-right: var(--_u1-carousel-inset);
  scroll-padding-left: var(--_u1-carousel-inset);
  /* Aire arriba (compensado con el margen) para que lo que asoma por encima de una card
     no se recorte por el overflow: el tooltip HSA de la card Compact sale hacia arriba */
  padding-top: 12px;
  margin-top: -12px;
  overflow-x: auto;
  overflow-y: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.u1-carousel__track::-webkit-scrollbar { display: none; }

/* ── Slide (card, testimonial, image…) ──────────────────────────────────── */

[data-u1-carousel-slide] {
  flex-shrink: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  box-sizing: border-box;
}

/* ── Modo centrado: la slide activa queda en el medio de la pantalla.
   El padding exacto para que la primera/ultima lleguen al centro lo
   calcula el JS (depende del ancho real de las cards). ── */
.u1-carousel--center .u1-carousel__track {
  scroll-padding-left: 0;
}
.u1-carousel--center [data-u1-carousel-slide] {
  scroll-snap-align: center;
}

/* ── Grid layout (toggle): all cards fit on screen at once — desktop only ── */
@media screen and (min-width: 1024px) {
  .u1-carousel--grid .u1-carousel__track {
    overflow: visible;
    scroll-snap-type: none;
    justify-content: center;
    align-items: stretch;
  }
  .u1-carousel--grid [data-u1-carousel-slide] {
    flex: 1 1 0;
    min-width: 0;
    scroll-snap-align: none;
  }
  .u1-carousel--grid .u1-carousel__product-card {
    width: 100%;
    max-width: none;
  }
  /* Cards con dims estaticas (testimonial/imagen): en grid se vuelven fluidas
     y conservan el aspect-ratio; sin esto quedaban en 560px fijos y se pegaban */
  .u1-carousel--grid .u1-carousel__card--static-dims,
  .u1-carousel--grid .u1-carousel__card--static-dims .u1-carousel__card-media {
    width: 100% !important;
    max-width: none;
  }
  /* Grid: el CONTENIDO manda la altura, nunca se corta; el aspect-ratio fijo
     solo aplica en modo carousel. Todas las cards igualan a la mas alta:
     el track ya tiene align-items:stretch, aca se completa la cadena de alturas. */
  .u1-carousel--grid .u1-carousel__card--static-dims {
    height: 100%;
  }
  .u1-carousel--grid .u1-carousel__card--static-dims .u1-carousel__card-media {
    aspect-ratio: auto !important;
    height: auto !important;
    flex: 1 1 auto;
    overflow: visible;
  }
  .u1-carousel--grid .u1-carousel__arrows,
  .u1-carousel--grid .u1-carousel__paginator-wrap {
    display: none !important;
  }
}

/* ── Card ───────────────────────────────────────────────────────────────── */

.u1-carousel__card {
  display: flex;
  flex-direction: column;
  background: transparent !important;
}

/* ── Media area (has aspect-ratio + height) ─────────────────────────────── */

.u1-carousel__card-media {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background-color: transparent !important;
  flex-shrink: 0;
}

/* Aspect ratios — applied to media area. El var --u1-card-ar guarda el ratio
   elegido para poder mantenerlo en mobile (cards split de video) */
.u1-carousel__card--ar-1260-680 { --u1-card-ar: 1260 / 680; }
.u1-carousel__card--ar-1040-680 { --u1-card-ar: 1040 / 680; }
.u1-carousel__card--ar-830-680  { --u1-card-ar: 830 / 680; }
.u1-carousel__card--ar-620-680  { --u1-card-ar: 620 / 680; }
.u1-carousel__card--ar-560-680  { --u1-card-ar: 560 / 680; }
.u1-carousel__card--ar-560-560  { --u1-card-ar: 1 / 1; }
.u1-carousel__card--ar-380-680  { --u1-card-ar: 380 / 680; }
.u1-carousel__card--ar-1260-680 .u1-carousel__card-media,
.u1-carousel__card--ar-1040-680 .u1-carousel__card-media,
.u1-carousel__card--ar-830-680  .u1-carousel__card-media,
.u1-carousel__card--ar-620-680  .u1-carousel__card-media,
.u1-carousel__card--ar-560-680  .u1-carousel__card-media,
.u1-carousel__card--ar-560-560  .u1-carousel__card-media,
.u1-carousel__card--ar-380-680  .u1-carousel__card-media { aspect-ratio: var(--u1-card-ar); }

/* Static dims: blocks testimonio / imagen (Figma desktop-tablet); mobile se define más abajo */
.u1-carousel--size-b .u1-carousel__card--static-dims .u1-carousel__card-media,
.u1-carousel--size-m .u1-carousel__card--static-dims .u1-carousel__card-media,
.u1-carousel--size-s .u1-carousel__card--static-dims .u1-carousel__card-media {
  height: auto;
}

@media screen and (min-width: 750px) {
  .u1-carousel__card--static-dims.u1-carousel__card-static--560-400 .u1-carousel__card-media {
    width: min(560px, calc(100vw - 48px));
    aspect-ratio: 560 / 400;
  }

  .u1-carousel__card--static-dims.u1-carousel__card-static--400-400 .u1-carousel__card-media {
    width: min(400px, calc(100vw - 48px));
    aspect-ratio: 1;
  }

  /* Auto: alto segun el texto. Ancho fluido para que se vean 3 cards enteras y un 30% de la cuarta
     desde el borde del contenido (71px de margen, contenido max 1270px, gap 20px). Medido en 1280/1500/1920. */
  .u1-carousel__card--static-dims.u1-carousel__card-static--auto .u1-carousel__card-media {
    width: clamp(300px, calc((100vw - max(71px, (100vw - 1270px) / 2) - 60px) / 3.3), 520px);
    aspect-ratio: auto;
    height: auto;
  }
}

/* Size B: 680px media height */
.u1-carousel--size-b .u1-carousel__card-media {
  height: 680px;
}

/* Size M: 550px media height */
.u1-carousel--size-m .u1-carousel__card-media {
  height: 550px;
}

/* Size S: 430px media height */
.u1-carousel--size-s .u1-carousel__card-media {
  height: 430px;
}

/* 560x560: override fixed height from size classes */
.u1-carousel--size-b .u1-carousel__card--ar-560-560 .u1-carousel__card-media,
.u1-carousel--size-m .u1-carousel__card--ar-560-560 .u1-carousel__card-media,
.u1-carousel--size-s .u1-carousel__card--ar-560-560 .u1-carousel__card-media {
  height: auto;
  width: 560px;
  max-width: calc(100vw - 48px);
}

/* Cap card width on small screens */
.u1-carousel__card-media {
  max-width: calc(100vw - 48px);
}

/* ── No media: card becomes transparent, no box ─────────────────────────── */

.u1-carousel__card--no-media .u1-carousel__card-content {
  position: relative;
  padding: 48px;
  box-sizing: border-box;
}

/* ── Placeholder SVG ────────────────────────────────────────────────────── */

.u1-carousel__card-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.u1-carousel__placeholder-svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Background media — fills and crops ─────────────────────────────────── */

.u1-carousel__card-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.u1-carousel__card-bg-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.u1-carousel__card-bg-media--mobile { display: none; }
.u1-carousel__card-bg-video--mobile { display: none; }

@media screen and (max-width: 749px) {
  .u1-carousel__card-bg-media--mobile { display: block; }
  .u1-carousel__card-bg-media--desktop:has(+ .u1-carousel__card-bg-media--mobile) { display: none; }
  .u1-carousel__card-bg--has-mobile-video .u1-carousel__card-bg-video--desktop { display: none; }
  .u1-carousel__card-bg--has-mobile-video .u1-carousel__card-bg-video--mobile { display: block; }
}

/* ── Card con video dividido (una slide, dos mitades) ───────────────────── */

.u1-carousel__card-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.u1-carousel__split-half {
  position: relative;
  overflow: hidden;
}

/* Sin rayita entre mitades: el redondeo subpixel de la grilla 1fr/1fr deja
   asomar el fondo; la mitad derecha se solapa 1px sobre la izquierda */
.u1-carousel__split-half:last-child {
  margin-left: -1px;
}

.u1-carousel__split-caption {
  position: absolute;
  inset-inline: 0;
  bottom: 28px;
  z-index: 1;
  margin: 0;
  padding-inline: 16px;
  text-align: center;
  color: #fff;
}

@media screen and (max-width: 749px) {
  .u1-carousel__split-caption { bottom: 16px; }
}

/* ── Texto al pie de la section (debajo de las flechas) ─────────────────── */

.u1-carousel__footer {
  padding-top: var(--space-10, 40px);
  text-align: center;
}

/* Con texto al pie no hace falta el espaciador de 68px del wrap (pensado
   para el paginador flotante contra el fondo de la section) */
.u1-carousel--has-footer .u1-carousel__carousel-wrap::after {
  height: 0;
}
.u1-carousel--has-footer .u1-carousel__footer {
  padding-top: 24px;
}

.u1-carousel__footer-text {
  max-width: 900px;
  margin: 0 auto;
  /* En mobile la section es full-bleed: sin esto el texto toca los bordes */
  padding-inline: 24px;
  color: var(--text-secondary);
}

.u1-carousel__footer-text p { margin: 0; }

/* La parte en negrita queda en color claro (primario) */
.u1-carousel__footer-text strong,
.u1-carousel__footer-text b {
  color: var(--text-primary);
  font-weight: inherit;
}

/* ── Crossfade images ──────────────────────────────────────────────────── */

.u1-carousel__card-crossfade-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s cubic-bezier(0.23, 1, 0.32, 1);
}
.u1-carousel__card-crossfade-img.is-active {
  opacity: 1;
}
.u1-carousel__card-crossfade--mobile { display: none; }
@media screen and (max-width: 749px) {
  .u1-carousel__card-crossfade--has-mobile + .u1-carousel__card-crossfade--mobile { display: block; }
  .u1-carousel__card-crossfade--has-mobile { display: none; }
}

/* ── Gradient scrim (por card, desktop y mobile independientes) ─────────── */

.u1-carousel__card-scrim {
  position: absolute;
  left: 0;
  right: 0;
  height: var(--u1-cc-scrim-h, 50%);
  z-index: 0;
  pointer-events: none;
}
.u1-carousel__card-scrim--bottom {
  bottom: 0;
  background: linear-gradient(to top, var(--u1-cc-scrim-from, rgba(0, 0, 0, 0.6)), transparent);
}
.u1-carousel__card-scrim--top {
  top: 0;
  background: linear-gradient(to bottom, var(--u1-cc-scrim-from, rgba(0, 0, 0, 0.6)), transparent);
}
.u1-carousel__card-scrim--left,
.u1-carousel__card-scrim--right {
  top: 0;
  bottom: 0;
  height: auto;
  width: var(--u1-cc-scrim-h, 50%);
}
.u1-carousel__card-scrim--left {
  right: auto;
  background: linear-gradient(to right, var(--u1-cc-scrim-from, rgba(0, 0, 0, 0.6)), transparent);
}
.u1-carousel__card-scrim--right {
  left: auto;
  background: linear-gradient(to left, var(--u1-cc-scrim-from, rgba(0, 0, 0, 0.6)), transparent);
}
.u1-carousel__card-scrim--mobile { display: none; }
@media screen and (max-width: 749px) {
  .u1-carousel__card-scrim--desktop { display: none; }
  .u1-carousel__card-scrim--mobile { display: block; }
}

/* ── Content overlay (inside media area) ────────────────────────────────── */

.u1-carousel__card-content {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding: 44px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 16px;
  will-change: transform, opacity;
}

/* Text position modifiers */
.u1-carousel__card-content--left-top {
  justify-content: flex-start;
  align-items: flex-start;
}

.u1-carousel__card-content--left-center {
  justify-content: center;
  align-items: flex-start;
  max-width: 55%;
}

.u1-carousel__card-content--left-bottom {
  justify-content: flex-end;
  align-items: flex-start;
}

.u1-carousel__card-content--center-top {
  justify-content: flex-start;
  align-items: center;
  text-align: center;
}

.u1-carousel__card-content--center {
  justify-content: center;
  align-items: center;
  text-align: center;
}

.u1-carousel__card-content--center-bottom {
  justify-content: flex-end;
  align-items: center;
  text-align: center;
}

.u1-carousel__card-content--right-top {
  justify-content: flex-start;
  align-items: flex-end;
  text-align: right;
}

.u1-carousel__card-content--right-center {
  justify-content: center;
  align-items: flex-end;
  text-align: right;
}

.u1-carousel__card-content--right-bottom {
  justify-content: flex-end;
  align-items: flex-end;
  text-align: right;
}

/* ── Card overlay text styles ──────────────────────────────────────────── */

/* L: ~20px @402px → 28px @1440px */
.u1-carousel__overlay-title.u1-card-text-l {
  font-size: clamp(1.238rem, calc(1.238rem + 0.512 * ((100vw - 23.4375rem) / 66.5625)), 1.75rem);
  line-height: clamp(1.625rem, calc(1.625rem + 0.625 * ((100vw - 23.4375rem) / 66.5625)), 2.25rem);
  letter-spacing: 0.2px;
  font-weight: var(--text-h-fw, 500);
  margin: 0;
}

/* M: ~17.2px @402px → 24px @1440px */
.u1-carousel__overlay-title.u1-card-text-m {
  font-size: clamp(1.06rem, calc(1.06rem + 0.44 * ((100vw - 23.4375rem) / 66.5625)), 1.5rem);
  line-height: clamp(1.45rem, calc(1.45rem + 0.55 * ((100vw - 23.4375rem) / 66.5625)), 2rem);
  letter-spacing: 0.2px;
  font-weight: var(--text-h-fw, 500);
  margin: 0;
}

/* ── Text below media ───────────────────────────────────────────────────── */

.u1-carousel__card-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 16px);
  padding: 32px 24px 0 16px;
  max-width: 420px;
}

.u1-carousel__card-title { margin: 0; }
.u1-carousel__card-desc  { margin: 0; }

/* No media → text below has no top gap */
.u1-carousel__card-text--flush {
  padding-top: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Arrows (always visible)
   ═══════════════════════════════════════════════════════════════════════════ */

.u1-carousel__arrows {
  display: flex;
  gap: var(--space-4, 16px);
  justify-content: flex-end;
  padding-top: var(--space-10, 40px);
  width: var(--w-fluid, 88vw);
  max-width: var(--u1-carousel-max-w, var(--max-w-m));
  margin: 0 auto;
}

.u1-carousel--arrows-center .u1-carousel__arrows {
  justify-content: center;
}

/* Wrapper de los dos botones: transparente en desktop; en mobile se vuelve
   una fila propia para ordenarla respecto a dots y Shop Pay */
.u1-carousel__arrow-btns { display: contents; }

.u1-carousel__arrow {
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  border: none;
  /* --bg-tertiary en vez del 4% alpha: en dark no se distinguia del fondo */
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-primary);
  padding: 0;
  transition: background 0.2s ease, opacity 0.3s ease, transform 0.15s ease;
}

.u1-carousel__arrow:hover:not(:disabled) {
  background: linear-gradient(var(--interactive-bg-secondary-hover), var(--interactive-bg-secondary-hover)) var(--bg-tertiary);
}

.u1-carousel__arrow:active:not(:disabled) {
  transform: scale(0.92);
  background: linear-gradient(var(--interactive-bg-secondary-hover), var(--interactive-bg-secondary-hover)) var(--bg-tertiary);
}

.u1-carousel__arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

/* Arrows reveal with slides */
.u1-carousel__arrows {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease 0.3s, transform 0.5s ease 0.3s;
}

.u1-carousel--revealed .u1-carousel__arrows {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Paginator (optional)
   ═══════════════════════════════════════════════════════════════════════════ */

.u1-carousel__paginator-wrap {
  position: sticky;
  bottom: 0;
  padding: 60px 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  z-index: 2;
}

.u1-carousel__pag-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}

.u1-carousel--paginator-visible .u1-carousel__pag-controls {
  opacity: 1;
  pointer-events: auto;
}

/* ── Pill ───────────────────────────────────────────────────────────────── */

.u1-carousel__pill {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 99px;
  position: relative;
  padding: 16px;
  background: var(--u1-glass-bg);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  cursor: default;
}

.u1-carousel__play-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 99px;
  border: none;
  cursor: pointer;
  position: relative;
  width: 56px;
  height: 56px;
  padding: 16px;
  box-sizing: border-box;
  background: var(--u1-glass-bg);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  color: var(--text-primary);
  transition: transform 0.15s ease;
}

.u1-carousel__play-btn:active {
  transform: scale(0.9);
}

.u1-carousel__fill {
  position: absolute;
  inset: 0;
  border-radius: 99px;
  background: var(--u1-glass-fill);
  pointer-events: none;
  z-index: 10;
  opacity: 0;
}

/* ── Entrance animations ────────────────────────────────────────────────── */

@keyframes u1-carousel-pill-entrance {
  0%   { opacity: 0; width: 12px; height: 12px; padding: 0; margin-left: 19px; box-shadow: none; transform: scale(1.2); }
  8%   { opacity: 1; box-shadow: 0 0 20px rgba(255,255,255,0.9), 0 0 8px rgba(255,255,255,0.9); transform: scale(1); animation-timing-function: steps(1, end); }
  18%  { opacity: 0; box-shadow: none; animation-timing-function: steps(1, end); }
  28%  { opacity: 1; box-shadow: 0 0 20px rgba(255,255,255,0.9), 0 0 8px rgba(255,255,255,0.9); animation-timing-function: steps(1, end); }
  38%  { opacity: 0; box-shadow: none; animation-timing-function: steps(1, end); }
  46%  { opacity: 1; width: 12px; height: 12px; padding: 0; margin-left: 19px; box-shadow: 0 0 20px rgba(255,255,255,0.9), 0 0 8px rgba(255,255,255,0.9); animation-timing-function: cubic-bezier(0.25, 1.6, 0.5, 1); }
  100% { opacity: 1; width: var(--u1-pill-w, 220px); height: 56px; padding: 16px; margin-left: 0; box-shadow: none; }
}

@keyframes u1-carousel-btn-entrance {
  0%   { opacity: 0; width: 12px; height: 12px; padding: 0; margin-left: -19px; box-shadow: none; transform: scale(1.2); }
  8%   { opacity: 1; box-shadow: 0 0 20px rgba(255,255,255,0.9), 0 0 8px rgba(255,255,255,0.9); transform: scale(1); animation-timing-function: steps(1, end); }
  18%  { opacity: 0; box-shadow: none; animation-timing-function: steps(1, end); }
  28%  { opacity: 1; box-shadow: 0 0 20px rgba(255,255,255,0.9), 0 0 8px rgba(255,255,255,0.9); animation-timing-function: steps(1, end); }
  38%  { opacity: 0; box-shadow: none; animation-timing-function: steps(1, end); }
  46%  { opacity: 1; width: 12px; height: 12px; padding: 0; margin-left: -19px; box-shadow: 0 0 20px rgba(255,255,255,0.9), 0 0 8px rgba(255,255,255,0.9); animation-timing-function: cubic-bezier(0.25, 1.6, 0.5, 1); }
  100% { opacity: 1; width: 56px; height: 56px; padding: 16px; margin-left: 0; box-shadow: none; }
}

@keyframes u1-carousel-fill-out {
  0%   { opacity: 1; }
  55%  { opacity: 1; }
  100% { opacity: 0; }
}

.u1-carousel__pill.u1-pag-enter {
  animation: u1-carousel-pill-entrance 1000ms both;
}
.u1-carousel__play-btn.u1-pag-enter {
  animation: u1-carousel-btn-entrance 1000ms both;
}
.u1-carousel__pill.u1-pag-enter .u1-carousel__fill,
.u1-carousel__play-btn.u1-pag-enter .u1-carousel__fill {
  animation: u1-carousel-fill-out 1000ms both;
}

/* ── Icon visibility ────────────────────────────────────────────────────── */

.u1-carousel__icon { display: none; align-items: center; justify-content: center; opacity: 0; }
.u1-carousel__play-btn[data-state="paused"]   .u1-carousel__icon--play   { display: flex; }
.u1-carousel__play-btn[data-state="playing"]  .u1-carousel__icon--pause  { display: flex; }
.u1-carousel__play-btn[data-state="finished"] .u1-carousel__icon--reload { display: flex; }

/* Icons hidden during entrance, visible after pill expands */
.u1-carousel__play-btn.u1-pag-enter .u1-carousel__icon { opacity: 0; }
.u1-carousel--paginator-visible .u1-carousel__play-btn:not(.u1-pag-enter) .u1-carousel__icon,
.u1-carousel__play-btn.u1-icons-ready .u1-carousel__icon { opacity: 1; }

/* ── Slide reveal animation ─────────────────────────────────────────────── */

[data-u1-carousel-slide] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

[data-u1-carousel-slide]:nth-child(1) { transition-delay: 0ms; }
[data-u1-carousel-slide]:nth-child(2) { transition-delay: 80ms; }
[data-u1-carousel-slide]:nth-child(3) { transition-delay: 160ms; }
[data-u1-carousel-slide]:nth-child(4) { transition-delay: 240ms; }
[data-u1-carousel-slide]:nth-child(5) { transition-delay: 320ms; }
[data-u1-carousel-slide]:nth-child(6) { transition-delay: 400ms; }

.u1-carousel--revealed [data-u1-carousel-slide] {
  opacity: 1;
  transform: translateY(0);
}

/* ── Paginator estilo "minimal": dots pelados, sin pill ni play, sin autoplay.
   Entran SIEMPRE en mobile: wrap con max-width y flex-wrap. ── */
.u1-carousel--pag-minimal .u1-carousel__pill {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  animation: none !important;
  width: auto !important;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px;
  max-width: calc(100vw - 48px);
}
.u1-carousel--pag-minimal .u1-carousel__paginator-wrap {
  position: static;
  padding: 32px 0 0;
}
.u1-carousel--pag-minimal .u1-carousel__pag-controls {
  max-width: 100%;
}
.u1-carousel--pag-minimal .u1-carousel__dot {
  animation: none !important;
  opacity: 1;
  padding: 3px; /* el padding 8px del estilo full separaba demasiado los dots */
}
.u1-carousel--pag-minimal .u1-carousel__dot-progress,
.u1-carousel--pag-minimal .u1-carousel__fill {
  display: none !important;
}
/* Minimal: el dot activo en gris oscuro (mismo #3d3d3d de los pagers del theme) */
.u1-carousel--pag-minimal .u1-carousel__dot--active .u1-carousel__dot-fill {
  background: #3d3d3d;
}

/* Cursor pointer on slides when paginator is active */
[data-paginator="true"] [data-u1-carousel-slide] {
  cursor: pointer;
}

/* ── Dots ───────────────────────────────────────────────────────────────── */

@keyframes u1-carousel-dot-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.u1-carousel__pill.u1-pag-enter .u1-carousel__dot {
  animation: u1-carousel-dot-in 200ms ease both;
}

.u1-carousel__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 99px;
  flex-shrink: 0;
}

.u1-carousel__dot-fill {
  position: relative;
  overflow: hidden;
  height: 8px;
  width: 8px;
  border-radius: 99px;
  flex-shrink: 0;
  transition: width 0.5s cubic-bezier(0.34, 1.15, 0.64, 1);
  background-color: var(--u1-color-12);
}

.u1-carousel__dot--active .u1-carousel__dot-fill {
  width: 32px;
}

@keyframes u1-carousel-fill-progress {
  from { width: 0% }
  to   { width: 100% }
}

.u1-carousel__dot--active .u1-carousel__dot-progress {
  animation: u1-carousel-fill-progress var(--u1-carousel-duration, 6s) linear forwards;
  animation-delay: 280ms;
  animation-play-state: paused;
}

.u1-carousel--playing .u1-carousel__dot--active .u1-carousel__dot-progress {
  animation-play-state: running;
}

.u1-carousel--interacting .u1-carousel__dot--active .u1-carousel__dot-progress {
  animation: none;
}

.u1-carousel__dot-progress {
  position: absolute;
  top: 0; left: 0;
  height: 100%; width: 0%;
  border-radius: 99px;
  background-color: var(--u1-color-56);
  opacity: 1;
  transition: opacity 0.18s ease-out;
}

.u1-carousel__dot:not(.u1-carousel__dot--active) .u1-carousel__dot-progress {
  opacity: 0;
}

/* ── Image block caption (overlay dentro del slide, segundo hijo figcaption) ─ */

figure.u1-carousel__card--image.u1-carousel__card--static-dims {
  margin: 0;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}

figure.u1-carousel__card--image.u1-carousel__card--static-dims .u1-carousel__card-media {
  border-radius: 0;
}

.u1-carousel__image-caption-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  margin: 0;
  max-width: none;
  padding: var(--space-8, 32px);
  box-sizing: border-box;
}

@media screen and (max-width: 749px) {
  .u1-carousel__image-caption-overlay {
    padding: var(--space-6, 24px);
  }
}

/* ── Testimonial slide ──────────────────────────────────────────────────── */

.u1-carousel__card--testimonial .u1-carousel__testimonial-surface.u1-carousel__card-media {
  /* Card sobre el fondo de la section: mismo --bg, y se separa con stroke
     apenas perceptible (token terciario del DS) + sombra ultra sutil. */
  /* --u1-tc-bg: superficie elegida en el block (select "Fondo de la card"); sin eleccion = --bg */
  /* Default automatico: --bg-elevated del scheme (blanco en claro, #303030 en dark) */
  background-color: var(--u1-tc-bg, var(--bg-elevated, #ffffff)) !important;
  border: 1px solid var(--stroke-tertiary, rgba(13, 13, 13, 0.05));
  border-radius: 8px;
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.02),
    0 4px 12px rgba(0, 0, 0, 0.025);
}

.u1-carousel__testimonial-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  gap: var(--space-5, 20px);
  width: 100%;
  height: 100%;
  min-height: 100%;
  padding: var(--space-8, 32px);
  box-sizing: border-box;
}

@media screen and (max-width: 749px) {
  .u1-carousel__testimonial-inner {
    padding: var(--space-6, 24px);
  }
}

.u1-carousel__testimonial-quote {
  display: block;
  margin: 0;
  padding: 0;
  border: none;
  font-style: normal;
  max-width: none !important;
  max-inline-size: none !important;
  width: 100%;
  box-sizing: border-box;
  text-wrap: pretty;
}

@media screen and (max-width: 749px) {
  .u1-carousel__card--testimonial .u1-carousel__testimonial-quote.text-h6 {
    font-size: var(--h6-fs, 1rem);
    line-height: var(--h6-lh, 1.25);
  }
}

/* Misma fila de estrellas que u1-loox-caption (gap 1px, íconos 14×14, tokens fill/empty) */
.u1-carousel__testimonial-loox-stars {
  --u1-hero-caption-fill: var(--text-primary);
  --u1-hero-caption-empty: var(--neutral-200, rgba(13, 13, 13, 0.22));
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 1px;
}

.u1-carousel__testimonial-loox-star {
  flex-shrink: 0;
  display: block;
}

.u1-carousel__testimonial-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4, 16px);
  margin-top: auto;
  width: 100%;
}

.u1-carousel__testimonial-byline {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3, 12px);
  text-align: left;
}

.u1-carousel__testimonial-sep {
  flex-shrink: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--text-secondary, currentColor) 55%, transparent);
}

.u1-carousel__testimonial-avatar {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
}

.u1-carousel__testimonial-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Responsive
   ═══════════════════════════════════════════════════════════════════════════ */

@media screen and (max-width: 1023px) and (min-width: 750px) {
  .u1-carousel__header-wrap { padding-bottom: 60px; }
}

@media screen and (max-width: 749px) {
  /* Full-bleed: bypass .section grid margins on mobile */
  .u1-carousel.section {
    --full-page-grid-margin: 0 !important;
    --page-margin: 0px !important;
  }

  .u1-carousel__header-wrap { padding-bottom: 40px; }
  .u1-carousel__track { gap: 16px; padding-bottom: 0; }

  /* Mobile: override desktop aspect-ratio + height (cards estándar, no slides static-dims) */
  .u1-carousel--size-b .u1-carousel__card:not(.u1-carousel__card--static-dims) .u1-carousel__card-media,
  .u1-carousel--size-m .u1-carousel__card:not(.u1-carousel__card--static-dims) .u1-carousel__card-media,
  .u1-carousel--size-s .u1-carousel__card:not(.u1-carousel__card--static-dims) .u1-carousel__card-media {
    height: auto;
    max-width: none;
    aspect-ratio: 344 / 482;
  }

  /* 560x560: keep square on mobile */
  .u1-carousel--size-b .u1-carousel__card--ar-560-560:not(.u1-carousel__card--static-dims) .u1-carousel__card-media,
  .u1-carousel--size-m .u1-carousel__card--ar-560-560:not(.u1-carousel__card--static-dims) .u1-carousel__card-media,
  .u1-carousel--size-s .u1-carousel__card--ar-560-560:not(.u1-carousel__card--static-dims) .u1-carousel__card-media {
    aspect-ratio: 1 / 1;
  }

  /* Cards split (video dividido): en mobile mantienen el aspect ratio elegido
     en el schema, no el 344/482 forzado (los videos vienen hechos a medida) */
  .u1-carousel--size-b .u1-carousel__card--split:not(.u1-carousel__card--static-dims) .u1-carousel__card-media,
  .u1-carousel--size-m .u1-carousel__card--split:not(.u1-carousel__card--static-dims) .u1-carousel__card-media,
  .u1-carousel--size-s .u1-carousel__card--split:not(.u1-carousel__card--static-dims) .u1-carousel__card-media {
    aspect-ratio: var(--u1-card-ar);
  }

  /* El texto de abajo nunca mas ancho que la card (su max-width de 420px
     en mobile supera el ancho de la media y sobresalia) */
  .u1-carousel--mobile-l .u1-carousel__card:not(.u1-carousel__card--static-dims) { width: 85.5vw; }
  .u1-carousel--mobile-s .u1-carousel__card:not(.u1-carousel__card--static-dims) { width: 61vw; min-width: 264px; }
  .u1-carousel__card-text { max-width: 100%; }

  .u1-carousel--mobile-l .u1-carousel__card:not(.u1-carousel__card--static-dims) .u1-carousel__card-media {
    width: 85.5vw;
  }

  .u1-carousel--mobile-s .u1-carousel__card:not(.u1-carousel__card--static-dims) .u1-carousel__card-media {
    width: 61vw;
    min-width: 264px;
  }

  /* Testimonial / image: ancho mobile L/S igual; proporción cuadrado vs retrato por clase */
  .u1-carousel__card--static-dims .u1-carousel__card-media {
    height: auto !important;
    max-width: calc(100vw - 48px);
  }

  .u1-carousel__card--static-dims.u1-carousel__card-static-mobile--square .u1-carousel__card-media {
    aspect-ratio: 1 / 1 !important;
  }

  .u1-carousel__card--static-dims.u1-carousel__card-static-mobile--portrait .u1-carousel__card-media {
    aspect-ratio: 344 / 482 !important;
  }

  .u1-carousel__card--static-dims.u1-carousel__card-static-mobile--auto .u1-carousel__card-media {
    aspect-ratio: auto !important;
  }

  .u1-carousel--mobile-l .u1-carousel__card--static-dims .u1-carousel__card-media {
    width: min(344px, 85.5vw, calc(100vw - 48px));
    min-width: 0;
  }

  .u1-carousel--mobile-s .u1-carousel__card--static-dims .u1-carousel__card-media {
    width: min(344px, 61vw, calc(100vw - 48px));
    min-width: min(264px, calc(100vw - 48px));
  }

  .u1-carousel__card-content { padding: 32px 32px; }

  /* Mobile: override desktop position */
  .u1-carousel__card-content[class*="--mobile-"] {
    max-width: none !important;
    width: 100% !important;
    transform: none !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
  }

  .u1-carousel__card-content--mobile-left-top {
    justify-content: flex-start !important;
    align-items: flex-start !important;
    text-align: left !important;
  }
  .u1-carousel__card-content--mobile-left-center {
    justify-content: center !important;
    align-items: flex-start !important;
    text-align: left !important;
  }
  .u1-carousel__card-content--mobile-left-bottom {
    justify-content: flex-end !important;
    align-items: flex-start !important;
    text-align: left !important;
  }
  .u1-carousel__card-content--mobile-center-top {
    justify-content: flex-start !important;
    align-items: center !important;
    text-align: center !important;
  }
  .u1-carousel__card-content--mobile-center {
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
  }
  .u1-carousel__card-content--mobile-center-bottom {
    justify-content: flex-end !important;
    align-items: center !important;
    text-align: center !important;
  }
  .u1-carousel__card-content--mobile-right-top {
    justify-content: flex-start !important;
    align-items: flex-end !important;
    text-align: right !important;
  }
  .u1-carousel__card-content--mobile-right-center {
    justify-content: center !important;
    align-items: flex-end !important;
    text-align: right !important;
  }
  .u1-carousel__card-content--mobile-right-bottom {
    justify-content: flex-end !important;
    align-items: flex-end !important;
    text-align: right !important;
  }

  .u1-carousel__card-text { padding: 24px 12px 0 8px; }

  .u1-carousel__arrows { padding-top: var(--space-8, 32px); }

  /* Product cards: gap mas corto para que el peek de la siguiente entre */
  .u1-carousel__track:has(.u1-carousel__product-card) { gap: 12px; }

  /* Mobile: controles arriba del widget de Shop Pay (pedido 2026-09-09).
     La fila de flechas se disuelve (display: contents) y sus hijos pasan a ser
     items directos del wrap (selectores con la raiz porque el CSS compilado del theme junta todas las sections y gallery-carousel redefine .u1-carousel__arrows despues): track → dots → Shop Pay (flechas ocultas) */
  .u1-carousel[data-u1-carousel] .u1-carousel__carousel-wrap {
    display: flex;
    flex-direction: column;
  }
  .u1-carousel[data-u1-carousel] .u1-carousel__carousel-wrap::after { order: 10; }
  .u1-carousel[data-u1-carousel] .u1-carousel__track-outer { order: 0; }
  .u1-carousel[data-u1-carousel] .u1-carousel__arrows { display: contents; }
  .u1-carousel[data-u1-carousel] .u1-carousel__arrow-btns,
  .u1-carousel[data-u1-carousel] .u1-carousel__payment-terms {
    width: var(--w-fluid, 88vw);
    max-width: var(--u1-carousel-max-w, var(--max-w-m));
    margin: 0 auto;
    box-sizing: border-box;
  }
  /* Flechas ocultas en mobile (se navega con swipe; los dots dan la posicion) */
  .u1-carousel[data-u1-carousel] .u1-carousel__arrow-btns { display: none; }
  .u1-carousel[data-u1-carousel] .u1-carousel__paginator-wrap { order: 2; }
  .u1-carousel[data-u1-carousel] .u1-carousel__payment-terms {
    order: 3;
    padding-top: var(--space-6, 24px);
    text-align: center;
  }
}
/* END_SECTION:u1-carousel */

/* START_SECTION:u1-comparison (INDEX:70) */
.u1-cmp {
  width: 100%;
  box-sizing: border-box;
}
.u1-cmp__anchor {
  display: block;
  scroll-margin-top: var(--header-group-height, 80px);
}
.u1-cmp__heading {
  width: var(--w-fluid);
  max-width: var(--u1-cmp-mw);
  margin: 0 auto 32px;
  text-align: center;
}
.u1-cmp__grid {
  display: grid;
  width: var(--w-fluid);
  max-width: var(--u1-cmp-mw);
  margin: 0 auto;
  column-gap: var(--u1-cmp-col-gap);
  row-gap: 0;
  align-items: start;
}
.u1-cmp__col {
  display: grid;
  grid-row: 1 / -1;
  grid-template-rows: subgrid;
  row-gap: 0;
  min-width: 0;
}
/* Auto check / cross icons */
.u1-cmp__row-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.u1-cmp__row-icon--check {
  color: var(--u1-cmp-check-color, var(--text-primary));
}
.u1-cmp__row-icon--cross {
  color: var(--text-tertiary, rgba(13, 13, 13, 0.38));
}
.u1-cmp__cell {
  min-width: 0;
}
/* Image */
.u1-cmp__image-cell {
  position: relative;
  aspect-ratio: var(--u1-cmp-ar);
  border-radius: 12px;
  overflow: hidden;
}
.u1-cmp__image,
.u1-cmp__image-ph {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
/* Hover image swap (fade) — like the product cards */
.u1-cmp__image--default {
  transition: opacity 0.4s ease;
}
.u1-cmp__image--hover {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.u1-cmp__image-cell:hover .u1-cmp__image--hover {
  opacity: 1;
}
/* Empty-state placeholder keeps a subtle backdrop (editor only) */
.u1-cmp__image-ph {
  background: var(--surface-secondary, rgba(13, 13, 13, 0.04));
}
/* "Original" ratio: container takes the image's natural size (no fixed ratio),
   capped by the max height. No background. */
.u1-cmp--img-auto .u1-cmp__image-cell {
  aspect-ratio: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.u1-cmp--img-auto .u1-cmp__image {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: var(--u1-cmp-img-maxh, 360px);
  object-fit: contain;
  margin: 0 auto;
}
.u1-cmp--img-auto .u1-cmp__image-ph {
  aspect-ratio: 1 / 1;
  width: 100%;
  height: auto;
}
/* Title / description — spacing controlled per cell (grid row-gap is 0) */
.u1-cmp__title-cell {
  padding-top: var(--u1-cmp-header-gap);
  text-align: center;
}
.u1-cmp__title {
  margin: 0;
}
.u1-cmp__desc-cell {
  padding-top: 6px;
  text-align: center;
}
.u1-cmp__desc {
  margin: 0;
}
/* Feature rows */
.u1-cmp__row-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  border-top: 1px solid var(--stroke-secondary, rgba(13, 13, 13, 0.12));
  padding-top: var(--u1-cmp-row-gap);
  margin-top: var(--u1-cmp-row-gap);
}
/* First feature row: no divider line, extra space after the header */
.u1-cmp__row-cell--first {
  border-top: 0;
  padding-top: 0;
  margin-top: var(--u1-cmp-header-gap);
}
.u1-cmp__row-icon {
  flex-shrink: 0;
  width: var(--u1-cmp-icon);
  height: var(--u1-cmp-icon);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.u1-cmp__row-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.u1-cmp__row-text {
  min-width: 0;
}
@media screen and (max-width: 749px) {
  .u1-cmp__row-cell { gap: 6px; }
}
/* END_SECTION:u1-comparison */

/* START_SECTION:u1-discovery-module (INDEX:77) */
/* ── Scroll button: boton del DS pinned al borde inferior del hero, fuera
   del flujo (mismo patron que .u1-dm__featured); latido sutil + glow ──────── */
.u1-dm__scroll-wrap {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: var(--u1-dm-scroll-bottom, 32px);
  z-index: 2;
}
@media screen and (min-width: 750px) and (max-width: 1023px) {
  .u1-dm__scroll-wrap { bottom: var(--u1-dm-scroll-bottom-t, var(--u1-dm-scroll-bottom, 32px)); }
}
@media screen and (max-width: 749px) {
  .u1-dm__scroll-wrap { bottom: var(--u1-dm-scroll-bottom-m, var(--u1-dm-scroll-bottom, 32px)); }
}
.u1-dm__scroll-wrap--pulse .u1-btn {
  animation: u1-dm-scroll-pulse 2.6s ease-in-out infinite;
}
@keyframes u1-dm-scroll-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 14px 0 color-mix(in srgb, currentColor 15%, transparent);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 24px 2px color-mix(in srgb, currentColor 32%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  .u1-dm__scroll-wrap--pulse .u1-btn { animation: none; }
}

/* ── CTA con menu desplegable (Label | URL por linea en el setting) ──────────
   GLOBAL, no dentro de un media query: la primera version quedo anclada al bloque
   de mobile y en desktop salia sin estilo. El globo es un overlay absoluto, asi
   que no empuja nada del layout; abre hacia arriba porque los CTAs del hero viven
   al pie. Adentro van botones del DS reales (snippet), no links de texto. */
.u1-dm__cta-menu { position: relative; display: inline-flex; }
/* Estado abierto del trigger, declarado aca porque la regla equivalente del DS
   ([data-u1-state=hover]) no estaba llegando al inner en este contexto (verificado
   con computed style en vivo: quedaba transparente). Mismo token que el globo,
   asi quedan gemelos. */
.u1-dm__cta-menu > .u1-btn[data-u1-state="hover"] .u1-btn__inner {
  background: var(--interactive-bg-ghost-hover) !important;
}
.u1-dm__cta-menu-list {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* El fondo HOVER del tertiary (pedido explicito): el mismo token que tiene el
     trigger mientras el globo esta abierto (data-u1-state=hover), asi los dos se
     ven gemelos. Se invierte solo con el esquema. El blur queda para que el globo
     se lea sobre la foto; si molesta, es una linea. */
  background: var(--interactive-bg-ghost-hover);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-radius: 24px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.22);
  padding: 8px;
  z-index: 30;
  min-width: max-content;
}
/* Los botones de adentro comparten ancho (el del mas largo) y quedan centrados
   entre si. El important es contra el ancho propio que trae el boton del DS. */
.u1-dm__cta-menu-list { align-items: stretch; }
.u1-dm__cta-menu-list .u1-btn { width: 100% !important; min-width: 100% !important; justify-content: center; }
/* El pill VISIBLE es el inner (la caja .u1-btn es transparente): igualar solo la
   caja dejaba los pills cada uno al ancho de su texto (medido: 133 vs 164). */
.u1-dm__cta-menu-list .u1-btn .u1-btn__inner { width: 100% !important; justify-content: center; }
/* El solape negativo entre CTAs hermanos (.u1-btn + .u1-btn) se filtra adentro
   del globo y corria el segundo boton 10px. Adentro no hay solape. */
.u1-dm__cta-menu-list .u1-btn + .u1-btn { margin-left: 0 !important; }
/* El display:flex de arriba le gana al [hidden] del navegador y el globo nacia
   abierto. Esta regla se lo devuelve. */
.u1-dm__cta-menu-list[hidden] { display: none; }


.u1-dm {
  position: relative;
  width: 100%;
  overflow-x: clip;
  overflow-y: visible;
}

.u1-dm__corner-badge {
  position: absolute;
  z-index: 4;
  width: auto;
  max-width: 50%;
  pointer-events: none;
}
@media (max-width: 1024px) {
  .u1-dm__corner-badge--hide-mobile { display: none !important; }
}
.u1-dm__sizer {
  position: relative;
  width: 100vw;
  min-height: var(--u1-dm-min-h, 100vh);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  display: flex;
  justify-content: center;
  align-items: var(--u1-dm-v, flex-end);
  background: #f9f9f9;
  max-height: var(--u1-dm-max-h, 100vh);
  overflow: hidden;
}

.u1-dm__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  /* Color detras de la imagen/video (setting "Color de fondo"): se ve con PNG transparentes
     y mientras carga la foto. Vacio = transparente, como siempre. */
  background-color: var(--u1-dm-bg-color, transparent);
}

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

/* Slideshow de fondo: fotos apiladas con crossfade suave (cada slide es un picture) */
.u1-dm__bg--slideshow .u1-dm__slide {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1);
}
.u1-dm__bg--slideshow .u1-dm__slide.is-active {
  opacity: 1;
}
/* Variante "desenfoque": la foto que sale se desenfoca y se agranda apenas
   mientras baja la opacidad, y la que entra hace el camino inverso. Da
   profundidad de campo en vez del fundido plano. */
.u1-dm__bg--slideshow--blur .u1-dm__slide {
  filter: blur(12px);
  transform: scale(1.03);
  transition:
    opacity 1.1s cubic-bezier(0.4, 0, 0.2, 1),
    filter 1.1s cubic-bezier(0.4, 0, 0.2, 1),
    transform 1.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.u1-dm__bg--slideshow--blur .u1-dm__slide.is-active {
  filter: blur(0);
  transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .u1-dm__bg--slideshow--blur .u1-dm__slide {
    filter: none;
    transform: none;
  }
}

.u1-dm__bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.u1-dm__overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Scrim gradiente (toggle en schema): sobre la foto/video, bajo el contenido (z1) */
.u1-dm__scrim {
  position: absolute;
  left: 0;
  right: 0;
  height: var(--u1-dm-scrim-h, 50%);
  z-index: 0;
  pointer-events: none;
}
.u1-dm__scrim--bottom {
  bottom: 0;
  background: linear-gradient(to top, var(--u1-dm-scrim-from, rgba(0, 0, 0, 0.6)), transparent);
}
.u1-dm__scrim--top {
  top: 0;
  background: linear-gradient(to bottom, var(--u1-dm-scrim-from, rgba(0, 0, 0, 0.6)), transparent);
}
.u1-dm__scrim--left,
.u1-dm__scrim--right {
  top: 0;
  bottom: 0;
  height: auto;
  width: var(--u1-dm-scrim-h, 50%);
}
.u1-dm__scrim--left {
  right: auto;
  background: linear-gradient(to right, var(--u1-dm-scrim-from, rgba(0, 0, 0, 0.6)), transparent);
}
.u1-dm__scrim--right {
  left: auto;
  background: linear-gradient(to left, var(--u1-dm-scrim-from, rgba(0, 0, 0, 0.6)), transparent);
}
.u1-dm--split .u1-dm__scrim { display: none; }

.u1-dm__bg-video--mobile { display: none; }

.u1-dm__bg--has-mobile-video .u1-dm__bg-video--desktop { display: block; }
.u1-dm__bg--has-mobile-video .u1-dm__bg-video--mobile  { display: none; }

@media screen and (max-width: 749px) {
  .u1-dm__bg--has-mobile-video .u1-dm__bg-video--desktop { display: none; }
  .u1-dm__bg--has-mobile-video .u1-dm__bg-video--mobile  { display: block; }
}

.u1-dm__container {
  position: relative;
  z-index: 1;
  width: var(--w-fluid);
  max-width: var(--u1-dm-section-mw, var(--max-w-l));
  display: flex;
  flex-direction: column;
  align-items: var(--u1-dm-h, center);
  gap: var(--space-7, 28px);
  padding-top: var(--u1-dm-pt, 0);
  padding-bottom: var(--u1-dm-pb-override, var(--u1-dm-pb, var(--space-20, 80px)));
}

.u1-dm__content {
  width: 100%;
  max-width: var(--u1-dm-section-mw, var(--max-w-s));
  display: flex;
  flex-direction: column;
  align-items: var(--u1-dm-h, center);
  text-align: var(--u1-dm-ta, center);
  color: var(--text-primary);
}

/* ── Badges Virginia Tech + Bosch (blocks dm_vt_badge / dm_bosch_badge) ────── */
.u1-dm__badges {
  display: flex;
  align-items: center;
  gap: 40px;
  justify-content: var(--u1-dm-h, center);
  margin-top: var(--u1-dm-badges-mt, 24px);
  color: var(--text-primary);
}
.u1-dm__badge { display: inline-flex; align-items: center; line-height: 0; }
/* "Arriba del titulo": fila sobre el titulo; el margen del block va abajo */
.u1-dm__badges--above { margin: 0 0 var(--u1-dm-badges-mb, 24px); }
/* El texto del lockup de VT va siempre a la izquierda, aunque el contenido del hero este centrado */
.u1-dm__badge--vt .u1-pdp-gallery-vt-badge__label,
.u1-dm__badge--vt .u1-pdp-gallery-vt-badge__lines { text-align: left; align-items: flex-start; }
.u1-dm__badges .u1-pdp-gallery-bosch-badge__img { display: block; height: 48px; width: auto; object-fit: contain; }
/* Dark: el lockup de VT viene pintado en negro dentro del SVG */
.u1-dm__badge--invert .u1-pdp-gallery-vt-badge__vector svg path,
.u1-dm__badge--invert .u1-pdp-gallery-vt-badge__divider svg path { fill: #ffffff; }
.u1-dm__badge--invert .u1-pdp-gallery-vt-badge__label { color: #ffffff; }
.u1-dm__badges--corner,
.u1-dm__badges--mirror { display: none; }
/* Seguro: el lockup de VT nunca hereda posicion/padding de otros contextos */
.u1-dm__badges .u1-pdp-gallery-vt-badge { position: static; padding: 0; display: flex; }
@media screen and (min-width: 1025px) {
  .u1-dm__badges--corner {
    display: flex;
    position: absolute;
    margin: 0 !important;
    z-index: 3;
  }
  .u1-dm__badges--corner.is-br { right: var(--u1-dm-badges-x, 24px); bottom: var(--u1-dm-badges-y, 32px); }
  .u1-dm__badges--corner.is-bl { left:  var(--u1-dm-badges-x, 24px); bottom: var(--u1-dm-badges-y, 32px); }
  .u1-dm__badges--corner.is-tr { right: var(--u1-dm-badges-x, 24px); top:    var(--u1-dm-badges-y, 32px); }
  .u1-dm__badges--corner.is-tl { left:  var(--u1-dm-badges-x, 24px); top:    var(--u1-dm-badges-y, 32px); }
  .u1-dm__container .u1-dm__badges--mirror {
    position: absolute;
    right: 0;
    margin: 0 !important;
    z-index: 2;
  }
  .u1-dm__badge--pinned { display: none !important; }
  /* La fila del flujo desaparece si todos sus badges estan pineados */
  .u1-dm__badges--flow:not(:has(.u1-dm__badge:not(.u1-dm__badge--pinned))) { display: none; }
}
@media screen and (max-width: 1024px) {
  .u1-dm__badge--desktop-only { display: none !important; }
  .u1-dm__badges--flow:not(:has(.u1-dm__badge:not(.u1-dm__badge--desktop-only))) { display: none; }
  /* Escala mobile (misma que la franja de la PDP): VT 72px, Bosch 38px, gap 24 */
  .u1-dm__badges { gap: 24px; }
  .u1-dm__badges .u1-pdp-gallery-vt-badge { gap: 10px; }
  .u1-dm__badges .u1-pdp-gallery-vt-badge__vector { width: 72px; height: 31.2px; }
  .u1-dm__badges .u1-pdp-gallery-vt-badge__divider,
  .u1-dm__badges .u1-pdp-gallery-vt-badge__divider svg { height: 31.2px; }
  .u1-dm__badges .u1-pdp-gallery-vt-badge__label { width: auto; height: 31.2px; }
  .u1-dm__badges .u1-pdp-gallery-vt-badge__lines { font-size: 10px; letter-spacing: 0; }
  .u1-dm__badges .u1-pdp-gallery-vt-badge__foot { font-size: 7.5px; margin-top: 4px; }
  .u1-dm__badges .u1-pdp-gallery-bosch-badge__img { height: 38px; }
}

/* ── Thingtesting seal pinned to hero corner (desktop) ───────────────────── */
.u1-dm__thingtesting--corner { display: none; }
@media screen and (min-width: 1025px) {
  .u1-dm__thingtesting--corner {
    display: block;
    position: absolute;
    margin: 0 !important;
    z-index: 3;
    line-height: 0;
  }
  .u1-dm__thingtesting--corner.is-br { right: var(--tt-x, 24px); bottom: var(--tt-y, 32px); }
  .u1-dm__thingtesting--corner.is-bl { left:  var(--tt-x, 24px); bottom: var(--tt-y, 32px); }
  .u1-dm__thingtesting--corner.is-tr { right: var(--tt-x, 24px); top:    var(--tt-y, 32px); }
  .u1-dm__thingtesting--corner.is-tl { left:  var(--tt-x, 24px); top:    var(--tt-y, 32px); }
  .u1-dm__thingtesting--hide-desktop { display: none !important; }
}
@media screen and (max-width: 1024px) {
  .u1-dm__thingtesting--desktop-only { display: none !important; }
}

/* ── Split layout (toggle): contenido + imagen lado a lado (grid 12: 7/5) ──── */
.u1-dm--split .u1-dm__sizer {
  width: var(--w-fluid);
  max-width: var(--u1-dm-section-mw, var(--max-w-l));
  margin-inline: auto;
  min-height: var(--u1-dm-min-h, 100vh);
  max-height: none;
  background: transparent;
  overflow: visible;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: stretch;
  column-gap: var(--u1-dm-split-gap, 28px);
  padding-block: var(--space-12, 48px);
}
/* default: imagen a la derecha (contenido 6 / imagen 6) */
.u1-dm--split .u1-dm__container {
  grid-column: 1 / span 6;
  grid-row: 1;
  width: auto;
  max-width: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.u1-dm--split .u1-dm__bg {
  position: relative;
  inset: auto;
  grid-column: 7 / span 6;
  grid-row: 1;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  align-self: center;
  border-radius: 16px;
  overflow: hidden;
}
/* toggle: imagen a la izquierda */
.u1-dm--split.u1-dm--split-left .u1-dm__container { grid-column: 7 / span 6; }
.u1-dm--split.u1-dm--split-left .u1-dm__bg { grid-column: 1 / span 6; }
/* contenido alineado a la izquierda en split (pisa las vars de alineación del setting) */
.u1-dm--split .u1-dm__content {
  --u1-dm-ta: left !important;
  --u1-dm-h: flex-start !important;
  max-width: none;
  align-items: flex-start;
  text-align: left;
}
.u1-dm--split .u1-dm__eyebrow { justify-content: flex-start; }
.u1-dm--split .u1-dm__overlay { display: none; }
/* mobile: apila, imagen abajo */
@media screen and (max-width: 749px) {
  .u1-dm--split .u1-dm__sizer {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    align-content: start;
    align-items: start;
    min-height: 0 !important;
    max-height: none !important;
    row-gap: var(--u1-dm-split-gap, 24px);
    padding-block: var(--space-10, 40px);
  }
  .u1-dm--split .u1-dm__container { justify-content: flex-start; }
  .u1-dm--split .u1-dm__container,
  .u1-dm--split.u1-dm--split-left .u1-dm__container {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  .u1-dm--split .u1-dm__bg,
  .u1-dm--split.u1-dm--split-left .u1-dm__bg {
    grid-column: 1 / -1;
    grid-row: 2;
    height: auto;
    aspect-ratio: 4 / 3;
  }
  /* Centrar todo el contenido en mobile (toggle) */
  .u1-dm--center-mobile .u1-dm__content {
    --u1-dm-ta: center !important;
    --u1-dm-h: center !important;
    align-items: center !important;
    text-align: center !important;
  }
  /* Fuerza text-align center en TODOS los textos (título, subtítulo, disclaimer, etc.) */
  .u1-dm--center-mobile .u1-dm__content,
  .u1-dm--center-mobile .u1-dm__content * {
    text-align: center !important;
  }
  .u1-dm--center-mobile .u1-dm__container { align-items: center !important; }
  .u1-dm--center-mobile .u1-dm__eyebrow { justify-content: center !important; }
}

/* ── Eyebrow ──────────────────────────────────────────────────────────────── */

.u1-dm__eyebrow {
  display: flex;
  align-items: stretch;
  justify-content: var(--u1-dm-h, center);
  gap: 12px;
  box-sizing: border-box;
  height: 48px;
  min-height: 48px;
  max-height: 48px;
  padding: 0;
  flex-wrap: nowrap;
}

.u1-dm__eyebrow > * {
  display: flex;
  align-items: center;
  min-width: 0;
}

.u1-dm__eyebrow > *:not(:first-child) {
  gap: 12px;
}

.u1-dm__eyebrow > *:not(:first-child)::before {
  content: '';
  display: block;
  width: 1px;
  height: 16px;
  flex-shrink: 0;
  align-self: center;
  background: color-mix(in srgb, var(--text-primary) 30%, transparent);
}

.u1-dm__eyebrow .u1-dm__product-name {
  align-items: center;
}

.u1-dm__eyebrow .u1-dm__eyebrow-loox .u1-hero-caption {
  min-height: 0;
}

.u1-dm__product-name {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.u1-dm__product-bold {
  font-weight: var(--text-h-fw, 500);
}

.u1-dm__product-regular {
  font-weight: var(--text-body-fw, 450);
}

.u1-dm__eyebrow-campaign {
  color: var(--u1-dm-campaign-color, var(--text-primary));
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Gradiente opcional de izquierda a derecha (settings Gradiente desde / hasta): se pinta el
   texto con background-clip. El punto en vivo tiene fondo propio y no se ve afectado. */
/* Los <style> que se imprimen dentro del hero (ej. el @font-face de Monument en el eyebrow) nunca
   se ven: la fila del eyebrow le da display a todos sus hijos y el texto del CSS aparecia en pantalla */
.u1-dm style { display: none !important; }
/* El <style> oculto cuenta como primer hijo de la fila del eyebrow: sin esto el nombre de campana
   recibia el divisor vertical de "item que no es el primero" */
.u1-dm__eyebrow > style + *::before { content: none !important; display: none !important; }
.u1-dm__eyebrow > style + * { padding-left: 0 !important; margin-left: 0 !important; }
/* Nombre de campana en PP Monument Extended (setting campaign_font, mismo que la franja de la nav) */
.u1-dm__eyebrow-campaign.u1-dm__eyebrow-campaign--monument {
  font-family: 'PP Monument Extended', var(--u1-font-family), sans-serif;
  font-weight: 400;
  letter-spacing: 0.05em;
}
.u1-dm__eyebrow-campaign--gradient {
  background-image: var(--u1-dm-campaign-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.u1-dm__eyebrow-campaign--image {
  display: inline-flex;
  align-items: center;
  overflow: visible;
}
/* Live dot (opcional, block Campaign name): punto de 8px a la izquierda del texto
   con un anillo que late; el color sigue --u1-dm-live-dot (default rojo del drop) */
.u1-dm__eyebrow-campaign--live {
  display: inline-flex;
  align-items: center;
  gap: var(--u1-space-2, 8px);
  overflow: visible;
}
.u1-dm__live-dot {
  position: relative;
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--u1-dm-live-dot, #d95255);
}
.u1-dm__live-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--u1-dm-live-dot, #d95255);
  opacity: 0.6;
  animation: u1-dm-live-dot-pulse 2s ease-out infinite;
}
@keyframes u1-dm-live-dot-pulse {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(3); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .u1-dm__live-dot::after { animation: none; opacity: 0; }
}
/* Con imagen de campaña, la fila del eyebrow (48px fijos) crece a la altura
   del logo: sin esto un logo mas alto que 48 se pisa con el titulo. */
.u1-dm__eyebrow:has(.u1-dm__eyebrow-campaign--image) {
  height: auto;
  max-height: none;
  min-height: 48px;
}
.u1-dm__eyebrow-campaign-img {
  display: block;
  height: var(--u1-dm-campaign-img-h, 20px);
  width: auto;
  object-fit: contain;
}
@media screen and (max-width: 749px) {
  .u1-dm__eyebrow-campaign-img {
    /* Mobile: o el alto mobile explicito, o el de desktop CAPADO a 78vw de
       ancho para que un lockup grande no se coma la pantalla */
    height: var(--u1-dm-campaign-img-h-m, auto);
    max-height: var(--u1-dm-campaign-img-h, 20px);
    max-width: 78vw;
  }
}

.u1-dm__eyebrow-icon {
  display: flex;
  align-items: center;
}

.u1-dm__eyebrow-icon-img {
  display: block;
  object-fit: contain;
}

.u1-dm__eyebrow-handwritten {
  font-family: var(--u1-font-family-hw);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: var(--text-primary);
}

/* ── Title ────────────────────────────────────────────────────────────────── */

.u1-dm__title {
  margin: 0;
  /* 750 historico; override opcional via setting "Title max-width (px)".
     El min(..., 100%) evita que un tope mayor que el viewport (ej. 1260 en
     mobile) impida el wrap y el titulo desborde la pantalla. */
  max-width: min(var(--u1-dm-title-mw, 750px), 100%);
  padding-top: 12px;
  color: var(--text-primary);
  cursor: default;
  text-align: var(--u1-dm-ta, center);
}

.u1-dm__line {
  display: block;
}
/* Linea del titulo en italica (setting Linea en italica) */
.u1-dm__line--italic {
  font-style: italic;
}
/* Renglones del titulo en desktop y tablet: 'flow' = texto corrido (ver mobile mas abajo) */
@media screen and (min-width: 750px) {
  .u1-dm__title--d-flow .u1-dm__line {
    display: inline;
  }
}

.u1-dm__char {
  display: inline-block;
  cursor: default;
}

/* Keep a word's chars together so the title never breaks mid-word */
.u1-dm__word {
  display: inline-block;
  white-space: nowrap;
}

.u1-dm__title-row {
  position: relative;
  width: fit-content;
  max-width: min(var(--u1-dm-header-mw, 100%), 100%);
  display: flex;
  /* Titulo mas ancho que el viewport: fit-content resuelve al 100% y el h2
     (capado a 750) quedaba pegado a la izquierda; alinear como la section */
  justify-content: var(--u1-dm-h, center);
}

/* ── Description ──────────────────────────────────────────────────────────── */

.u1-dm__description {
  margin: 0;
  padding-top: 20px;
  color: var(--text-primary);
}
/* --text-tertiary no tiene override en el scheme oscuro (u1.css): en heros oscuros usamos
   neutral-400 (#AFAFAF). Era neutral-500; Bruno 15/10 pidio el subtitulo un 10% mas visible */
.u1-dm.color-scheme-2 { --text-tertiary: var(--neutral-400); }

/* Custom: --u1-dm-subtitle-mw from section settings (defaults to 570 in Liquid). */
.u1-dm--subtitle-mw-custom .u1-dm__description {
  max-width: var(--u1-dm-subtitle-mw);
}

/* Igual que el título (--u1-dm-header-mw; si no hay, sin cap como .u1-dm__title-row). */
.u1-dm--subtitle-mw-same-as-title .u1-dm__description {
  max-width: min(var(--u1-dm-header-mw, 100%), 100%);
}

/* Description size on mobile & tablet (overrides the desktop DS class below 1025px). */
@media screen and (max-width: 1024px) {
  .u1-dm__description.u1-dm__description--mob-m {
    font-size: var(--u1-body-m-size);
    line-height: var(--u1-body-m-lh);
    letter-spacing: var(--u1-body-m-ls);
  }
  .u1-dm__description.u1-dm__description--mob-s {
    font-size: var(--u1-body-s-size);
    line-height: var(--u1-body-s-lh);
    letter-spacing: var(--u1-body-s-ls);
  }
  .u1-dm__description.u1-dm__description--mob-xs {
    font-size: var(--u1-body-xs-size);
    line-height: var(--u1-body-xs-lh);
    letter-spacing: var(--u1-body-xs-ls);
  }
}

/* ── Features row (icon on top + label) ──────────────────────────────────── */
.u1-dm__features {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(20px, 4vw, 56px);
  width: 100%;
  padding-top: 24px;
}
.u1-dm__feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.u1-dm__feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--u1-dm-feat-icon, 24px);
  height: var(--u1-dm-feat-icon, 24px);
}
.u1-dm__feature-icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.u1-dm__feature-label {
  margin: 0;
  text-align: center;
  color: var(--text-primary);
  line-height: 1.2;
}

/* ── Nav arrows ───────────────────────────────────────────────────────────── */

.u1-dm__nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: none;
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 9999px;
  transition: color 0.2s ease, transform 0.15s ease;
  z-index: 1;
}

.u1-dm__nav-arrow--prev { left: -56px; }
.u1-dm__nav-arrow--next { right: -56px; }

.u1-dm__nav-arrow:hover {
  color: var(--text-primary);
}

.u1-dm__nav-arrow:active {
  transform: translateY(-50%) scale(0.9);
}

/* ── Actions / CTA ────────────────────────────────────────────────────────── */

.u1-dm__actions {
  display: flex;
  align-items: center;
  justify-content: var(--u1-dm-h, center);
  flex-wrap: wrap;
  gap: var(--space-5, 20px);
  padding: 12px 0;
  color: var(--text-primary);
}
/* Dos botones juntos (CTA primario + secundario): mitad de gap que el resto
   de los items de la fila (precio, etc.), que mantienen el gap del flex */
.u1-dm__actions .u1-btn + .u1-btn { margin-left: calc(var(--space-5, 20px) / -2); }

/* ── Stats ────────────────────────────────────────────────────────────────── */

.u1-dm__stats {
  color: var(--text-primary);
}

/* ── Email form (mismo patrón que footer Shopify + pill) ───────────────────── */

.u1-dm__form {
  width: 100%;
  max-width: 360px;
}
/* Aire extra opcional entre subtitulo y form en mobile (setting del block;
   el gap base de 28px del container queda igual para todos los heroes) */
/* Aire extra opcional entre subtitulo y form en desktop/tablet (setting Margen superior del block) */
@media screen and (min-width: 750px) {
  .u1-dm__form { margin-top: var(--u1-dm-form-mt, 0); }
}
@media screen and (max-width: 749px) {
  .u1-dm__form { margin-top: var(--u1-dm-form-mt-m, 0); }
}

/* Newsletter pill styles: viven en el stylesheet de snippets/u1-discovery-newsletter-shopify.liquid */

/* ── Float button ─────────────────────────────────────────────────────────── */

.u1-dm__float-btn {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.15s ease, transform 0.15s ease;
  padding: 10px 20px;
  border-radius: 99px;
  background: var(--u1-glass-bg);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  color: var(--text-primary);
  text-decoration: none;
  white-space: nowrap;
}

.u1-dm__float-btn.is-visible {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

/* ── Text entrance animation ──────────────────────────────────────────────── */

.u1-dm__eyebrow,
.u1-dm__product-name,
.u1-dm__title-line,
.u1-dm__description,
.u1-dm__actions,
.u1-dm__stats,
.u1-dm__form {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 600ms ease, transform 600ms ease;
}

.u1-dm__title-line { display: block; }

.u1-dm--revealed .u1-dm__eyebrow,
.u1-dm--revealed .u1-dm__product-name,
.u1-dm--revealed .u1-dm__title-line,
.u1-dm--revealed .u1-dm__description,
.u1-dm--revealed .u1-dm__actions,
.u1-dm--revealed .u1-dm__stats,
.u1-dm--revealed .u1-dm__form {
  opacity: 1;
  transform: translateY(0);
}
/* Vidrio oscuro: un ancestro con opacity < 1 apaga el backdrop-filter y el blur aparecia de golpe
   al terminar la entrada. El form solo se desliza; el vidrio y la fila hacen el fade por su cuenta. */
.u1-dm__form:has(.u1-dm-newsletter__glass--dark) {
  opacity: 1;
}
.u1-dm__form:has(.u1-dm-newsletter__glass--dark) .u1-dm-newsletter__glass--dark,
.u1-dm__form:has(.u1-dm-newsletter__glass--dark) .u1-dm-newsletter__form-row {
  opacity: 0;
  transition: opacity 600ms ease;
}
.u1-dm--revealed .u1-dm__form:has(.u1-dm-newsletter__glass--dark) .u1-dm-newsletter__glass--dark,
.u1-dm--revealed .u1-dm__form:has(.u1-dm-newsletter__glass--dark) .u1-dm-newsletter__form-row {
  opacity: 1;
}

/* ── Entrada 'Blur in' (setting entrance_animation, Fermin 2026-10-15) ─────────────────────────
   Todo el contenido entra en secuencia, de desenfocado a nitido con 12px de recorrido. La entrada
   clasica dejaba titulo, countdown e items quietos desde el principio y deslizaba 30px el resto.
   Delays con !important: el JS de la section pone transition-delay inline a algunos elementos.
   El form NO lleva filter ni opacity (romperian el backdrop-filter del vidrio): solo se desliza,
   y el vidrio y la fila hacen el fade/blur por su cuenta. */
.u1-dm--entrance-blur .u1-dm__eyebrow,
.u1-dm--entrance-blur .u1-dm__title-row,
.u1-dm--entrance-blur .u1-dm__description,
.u1-dm--entrance-blur [data-u1-dm-countdown],
.u1-dm--entrance-blur .u1-dm__disclaimer,
.u1-dm--entrance-blur .u1-dm__actions,
.u1-dm--entrance-blur .u1-dm-newsletter__form-row {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(12px);
  transition: opacity 0.7s ease, filter 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.u1-dm--entrance-blur .u1-dm__form {
  opacity: 1;
  transform: translateY(12px);
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.u1-dm--entrance-blur .u1-dm-newsletter__glass {
  opacity: 0;
  transition: opacity 0.7s ease;
}
.u1-dm--entrance-blur.u1-dm--revealed .u1-dm__eyebrow,
.u1-dm--entrance-blur.u1-dm--revealed .u1-dm__title-row,
.u1-dm--entrance-blur.u1-dm--revealed .u1-dm__description,
.u1-dm--entrance-blur.u1-dm--revealed [data-u1-dm-countdown],
.u1-dm--entrance-blur.u1-dm--revealed .u1-dm__disclaimer,
.u1-dm--entrance-blur.u1-dm--revealed .u1-dm__actions,
.u1-dm--entrance-blur.u1-dm--revealed .u1-dm-newsletter__form-row {
  opacity: 1;
  filter: none;
  transform: none;
}
.u1-dm--entrance-blur.u1-dm--revealed .u1-dm__form { transform: none; }
.u1-dm--entrance-blur.u1-dm--revealed .u1-dm-newsletter__glass { opacity: 1; }
.u1-dm--entrance-blur .u1-dm__eyebrow { transition-delay: 0ms !important; }
.u1-dm--entrance-blur .u1-dm__title-row { transition-delay: 90ms !important; }
.u1-dm--entrance-blur .u1-dm__description { transition-delay: 200ms !important; }
.u1-dm--entrance-blur [data-u1-dm-countdown] { transition-delay: 290ms !important; }
.u1-dm--entrance-blur .u1-dm__actions,
.u1-dm--entrance-blur .u1-dm__form,
.u1-dm--entrance-blur .u1-dm-newsletter__glass,
.u1-dm--entrance-blur .u1-dm-newsletter__form-row { transition-delay: 380ms !important; }
.u1-dm--entrance-blur .u1-dm__disclaimer { transition-delay: 470ms !important; }
@media (prefers-reduced-motion: reduce) {
  .u1-dm--entrance-blur .u1-dm__eyebrow,
  .u1-dm--entrance-blur .u1-dm__title-row,
  .u1-dm--entrance-blur .u1-dm__description,
  .u1-dm--entrance-blur [data-u1-dm-countdown],
  .u1-dm--entrance-blur .u1-dm__disclaimer,
  .u1-dm--entrance-blur .u1-dm__actions,
  .u1-dm--entrance-blur .u1-dm__form,
  .u1-dm--entrance-blur .u1-dm-newsletter__glass,
  .u1-dm--entrance-blur .u1-dm-newsletter__form-row {
    filter: none;
    transform: none;
    transition-duration: 0.01ms !important;
  }
}

/* ── Button entrance animation ─────────────────────────────────────────────── */

@keyframes u1-dm-btn-in {
  0%   { opacity: 0; transform: scale(0.7); box-shadow: 0 0 30px rgba(255,255,255,1), 0 0 15px rgba(255,255,255,.9); }
  50%  { opacity: 1; transform: scale(1); box-shadow: 0 0 20px rgba(255,255,255,.5), 0 0 8px rgba(255,255,255,.3); }
  100% { opacity: 1; transform: scale(1); box-shadow: none; }
}

.u1-dm__actions .u1-btn.u1-dm-enter .u1-btn__inner {
  animation: u1-dm-btn-in 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@media screen and (min-width: 750px) and (max-width: 1023px) {
  .u1-dm__container { gap: 8px; }
  /* Eyebrow -> titulo y titulo -> CTA: 18px visuales (gap 8 + padding 10) */
  .u1-dm__title-row .u1-dm__title { padding-top: 10px; }
  .u1-dm__actions { padding-top: 10px; }
  /* Flechas del typewriter: a los costados del titulo, nunca encima */
  .u1-dm__title-row--arrows { padding-inline: 52px; }
  .u1-dm__title-row--arrows .u1-dm__nav-arrow--prev { left: 0; }
  .u1-dm__title-row--arrows .u1-dm__nav-arrow--next { right: 0; }
}

@media screen and (max-width: 749px) {
  .u1-dm__container { gap: 8px; }
  .u1-dm__title-row--arrows { padding-inline: 38px; }
  .u1-dm__nav-arrow { width: 32px; height: 32px; }
  .u1-dm__nav-arrow--prev { left: 0; }
  .u1-dm__nav-arrow--next { right: 0; }
  .u1-dm__product-name {
    gap: 5px;
    font-size: var(--h6-fs, 18px) !important;
    line-height: var(--h6-lh, 23.8px) !important;
    letter-spacing: var(--h6-ls, 0.3px) !important;
  }
  .u1-dm__title.u1-dm__title--mobile-text-display-xl {
    font-size: clamp(4.5rem, calc(4.5rem + 4.5 * ((100vw - 23.4375rem) / 66.5625)), 9rem) !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }
  .u1-dm__title.u1-dm__title--mobile-text-display-l {
    font-size: clamp(4rem, calc(4rem + 3 * ((100vw - 23.4375rem) / 66.5625)), 7rem) !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }
  .u1-dm__title.u1-dm__title--mobile-text-display {
    font-size: clamp(2.4rem, calc(2.4rem + 2.55 * ((100vw - 23.4375rem) / 66.5625)), 5rem) !important;
    line-height: 1.07 !important;
    letter-spacing: 0.1px !important;
  }
  .u1-dm__title.u1-dm__title--mobile-text-h1 {
    font-size: clamp(2rem, calc(2rem + 1.5 * ((100vw - 23.4375rem) / 66.5625)), 3.5rem) !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
  }
  .u1-dm__title.u1-dm__title--mobile-text-h2 {
    font-size: clamp(1.5rem, calc(1.5rem + 0.75 * ((100vw - 23.4375rem) / 66.5625)), 2.25rem) !important;
    line-height: 1.16 !important;
    letter-spacing: 0 !important;
  }
  /* Renglones del titulo en mobile (settings Renglones del titulo): 'flow' une los campos
     en texto corrido (los spans pasan a inline y el espacio real del markup los separa) */
  .u1-dm__title--m-flow .u1-dm__line {
    display: inline;
  }
  .u1-dm__title--m-lines .u1-dm__line {
    display: block;
  }
  .u1-dm__price {
    font-size: var(--body-s-fs, 14px) !important;
    line-height: var(--body-s-lh, 21px) !important;
    letter-spacing: var(--body-s-ls, 0.3px) !important;
  }
  .u1-dm__actions { gap: var(--space-4, 16px); }
  /* En mobile los dos CTAs hacen wrap y quedan uno debajo del otro. El margen
     negativo que los junta en desktop sigue aplicando sobre la fila nueva, y
     como el flex centra la caja de MARGEN, el segundo boton queda corrido 5px
     respecto del primero. Se resetea solo aca; desktop no se toca. */
  .u1-dm__actions .u1-btn + .u1-btn { margin-left: 0; }
  .u1-dm__eyebrow {
    flex-direction: column;
    justify-content: flex-start;
    align-items: var(--u1-dm-h, center);
    gap: var(--space-2, 8px);
    height: auto;
    min-height: 0;
    max-height: none;
    flex-wrap: nowrap;
  }
  .u1-dm__eyebrow > *:not(:first-child) { gap: 8px; }
  /* Sin línea divisoria en mobile */
  .u1-dm__eyebrow > *:not(:first-child)::before {
    display: none;
    content: none;
  }
  .u1-dm__title-row .u1-dm__title {
    padding-top: 10px;
  }
  .u1-dm__actions { padding-top: 10px; }
  /* Dos CTAs SIEMPRE en una linea mientras entren: ceden padding antes que
     ancho (igual que siempre; back-to-school no cambia). Apilarlos no puede ser
     CSS solo: con flex-wrap el navegador baja el segundo boton ANTES de achicar,
     y apilaba pares que entraban. Por eso el apilado es una clase que pone el JS
     únicamente cuando midio overflow real (labels largos, ej. affiliates). */
  .u1-dm__actions { flex-wrap: nowrap; }
  .u1-dm__actions.u1-dm-actions--stack { flex-wrap: wrap; row-gap: 12px; }
  .u1-dm__actions.u1-dm-actions--stack .u1-btn + .u1-btn { margin-left: 0; }
  .u1-dm__actions .u1-btn {
    flex: 0 1 auto;
    min-width: 0;
  }
  .u1-dm__actions .u1-btn .u1-btn__inner {
    white-space: nowrap;
    padding-left: clamp(12px, 3.4vw, 24px);
    padding-right: clamp(12px, 3.4vw, 24px);
  }

  .u1-dm__form { max-width: 100%; }
}

/* ── Lengueta / pull-tab ──────────────────────────────────────────────── */

@keyframes u1-dm-tab-in {
  0%   { opacity: 0; transform: translateX(-50%) translateY(100%); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.u1-dm__tab {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(100%);
  opacity: 0;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  white-space: nowrap;
  /* El bg visible viene del SVG trapezoidal; si se aplica un color-scheme-X
     wrapper acá, el scheme normalmente pinta un background-color propio que
     tapa el SVG. Forzamos transparente para que solo se vea el SVG. */
  background: transparent !important;
}

.u1-dm--revealed .u1-dm__tab {
  animation: u1-dm-tab-in 600ms cubic-bezier(0.22, 1, 0.36, 1) 1.6s forwards;
}

/* Mobile (pedido de Bruno): la lengueta NO aparece al entrar. Se muestra con el
   mismo slide-in recien cuando el visitante scrolleo el 70% del hero, y se vuelve
   a esconder si sube. La clase la pone el JS de la section. */
@media screen and (max-width: 749px) {
  /* Entrada y salida con la misma curva: sin animation, solo transition, asi la
     salida es tan suave como la entrada (antes desaparecia de golpe). */
  .u1-dm--revealed .u1-dm__tab {
    animation: none;
    opacity: 0;
    transform: translateX(-50%) translateY(100%);
    transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1),
                transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .u1-dm--revealed.u1-dm--tab-scrolled .u1-dm__tab {
    animation: none;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* CTA price discount (struck + now + Save in red) — tight gap like the product card */
.u1-dm__price-values {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}
.u1-dm__price-compare {
  text-decoration: line-through;
  color: var(--text-secondary);
}
.u1-dm__price-now { color: var(--text-primary); }
.u1-dm__price-save { margin-left: 6px; }

.u1-dm__tab-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.u1-dm__tab-label {
  position: relative;
  color: var(--text-secondary, #666);
  white-space: nowrap;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: none;
  padding: 12px 72px 10px;
}

/* ── Countdown block: texto a la izquierda, timer a la derecha (mismo
   patron de markup/JS que el timer de u1-sticky-cta) ─────────────────── */
.u1-dm__countdown {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  width: fit-content;
}
/* Hasta que el JS pinte el primer valor real, el contador va oculto pero ocupa
   su lugar: mostrar el 00:00:00 del HTML se lee como "la promo termino". */
.u1-dm__countdown[data-u1-cd-pending] { visibility: hidden; }
.u1-dm__countdown-divider {
  align-self: center;
  width: 1px;
  height: 1em;
  background: var(--text-secondary, rgba(13, 13, 13, 0.56));
  opacity: 0.5;
}
.u1-dm__countdown-text {
  margin: 0;
  /* Bold del DS: mismo peso que las clases u1-text-body-*--bold */
  font-weight: var(--text-h-fw, 530);
}
/* Texto opcional despues del contador (ej "left"): mismo tono que las unidades.
   Vive dentro de .u1-dm__countdown-timer, que alinea por baseline. */
.u1-dm__countdown-text-after {
  margin: 0 0 0 6px;
  color: var(--text-secondary, rgba(13, 13, 13, 0.56));
}
.u1-dm__countdown-timer {
  display: flex;
  align-items: baseline;
  gap: 0 2px;
  white-space: nowrap;
}
.u1-dm__countdown-block {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
}
.u1-dm__countdown-value {
  font-weight: 500;
  color: var(--text-primary, #0d0d0d);
}
.u1-dm__countdown-unit { color: var(--text-secondary, rgba(13, 13, 13, 0.56)); }
.u1-dm__countdown-sep { color: var(--text-primary, #0d0d0d); margin: 0 2px; }
.u1-dm__countdown-unit--short { display: none; }
@media screen and (max-width: 767px) {
  .u1-dm__countdown-unit--long { display: none; }
  .u1-dm__countdown-unit--short { display: inline; }
}
/* Countdown "Junto al nombre de campaña": vive dentro de la fila del eyebrow,
   a la derecha del ultimo item; sin margenes propios, divider a la izquierda y
   unidades cortas siempre (05d : 12h : 46m) para no alargar la linea. */
.u1-dm__eyebrow .u1-dm__countdown--eyebrow {
  margin: 0;
  max-width: none;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  /* 8px: en esta variante el unico gap es entre el contador y el texto de la
     derecha, y "49m left" tiene que leerse como una sola frase */
  gap: 0 8px;
  /* center: la fila del eyebrow mide 48px fijos, con baseline el contenido se
     pega al techo. El texto de la derecha alinea por baseline dentro del timer. */
  align-items: center;
}
/* Estilo "Reloj" (como la card Flash Gift de la PDP), en el color del texto */
.u1-dm__clock-row { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.u1-dm__clock-label { color: var(--text-tertiary, rgba(13, 13, 13, 0.4)); }
.u1-dm__clock { color: var(--text-primary, #0d0d0d); font-weight: var(--text-h-fw, 530); font-variant-numeric: tabular-nums; letter-spacing: 0.08em; }
.u1-dm__clock[data-u1-cd-pending] { visibility: hidden; }
.u1-dm__clock-cs { margin-left: .1em; font-size: .645em; vertical-align: top; }
/* Cada par de numeros con ancho fijo: con fuentes sin numeros tabulares (UNIT 1 Sans) el reloj cambiaba de ancho en cada tick y se corria la fila */
.u1-dm__clock [data-days], .u1-dm__clock [data-hours], .u1-dm__clock [data-minutes], .u1-dm__clock [data-seconds], .u1-dm__clock-cs { display: inline-block; min-width: 1.5em; text-align: center; }
.u1-dm__eyebrow > .u1-dm__countdown--clock::before { display: none; }
/* Mobile: con el reloj, nombre de campana y reloj en una sola linea (en vez de apilados), en body-xs */
@media screen and (max-width: 749px) {
  .u1-dm__eyebrow:has(.u1-dm__countdown--clock) { flex-direction: row; justify-content: center; align-items: center; gap: 8px; }
  .u1-dm__eyebrow:has(.u1-dm__countdown--clock) .u1-dm__eyebrow-campaign { font-size: var(--u1-body-xs-size, 12px); }
  .u1-dm__eyebrow .u1-dm__clock { font-size: var(--u1-body-xs-size, 12px); letter-spacing: 0.04em; }
  .u1-dm__eyebrow .u1-dm__clock-row { gap: 4px; }
}
.u1-dm__countdown--eyebrow .u1-dm__countdown-unit--long { display: none; }
.u1-dm__countdown--eyebrow .u1-dm__countdown-unit--short { display: inline; }

/* Estilo "Cajitas" (setting style = boxes), como las franjas de Prime: numeros
   en contenedores, sin unidades. Tipografia mono via u1-eyebrow--mono en el root
   (textos de izquierda/derecha incluidos); el tamano lo manda el Text style, por
   eso las cajas van en em. Fondo = color del texto al 12%: sirve en los dos schemes. */
.u1-dm__countdown--boxes,
.u1-dm__countdown--boxes .u1-dm__countdown-timer {
  align-items: center;
}
.u1-dm__countdown--boxes .u1-dm__countdown-timer {
  gap: 0 0.3em;
}
.u1-dm__countdown-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2em;
  height: 2em;
  /* +0.14em a la izquierda: compensa el tracking que queda despues del ultimo digito */
  padding: 0 0.3em 0 calc(0.3em + 0.14em);
  border-radius: 0.25em;
  /* Colores opcionales del block (Color de la cajita / del numero); sin setear, el texto al 12% */
  background: var(--u1-dm-cd-box-bg, color-mix(in srgb, currentColor 12%, transparent));
  color: var(--u1-dm-cd-box-fg, inherit);
}
/* Cajitas con unidades (setting Mostrar unidades): numero arriba, unidad abajo en body-xs */
.u1-dm__countdown--units .u1-dm__countdown-box {
  flex-direction: column;
  height: auto;
  min-width: 2.4em;
  padding: 0.32em 0.35em 0.3em calc(0.35em + 0.14em);
  gap: 0.4em;
}
.u1-dm__countdown-box-num { line-height: 1; }
/* Rodillo del countdown (adaptado de "Spinning counter", transitions.dev): ventana de 1em por
   digito con los bordes difuminados; la tira la mueve el JS de la section */
.u1-reel { display: inline-flex; line-height: 1; }
.u1-reel__col {
  display: inline-block;
  height: 1em;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);
}
.u1-reel__strip { display: flex; flex-direction: column; will-change: transform; }
.u1-reel__digit { display: block; height: 1em; line-height: 1; }
@media (prefers-reduced-motion: reduce) {
  .u1-reel__strip { transition: none !important; }
}
/* Unidad en la fuente del DS (PP Neue), no en la mono de los numeros (Fermin 15/10): el
   !important le gana a .u1-eyebrow--mono *, que fuerza la mono en todos los descendientes */
.u1-dm__countdown .u1-dm__countdown-box-unit {
  font-family: var(--u1-font-family) !important;
  font-size: var(--u1-body-xs-size, 12px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
}
.u1-dm__countdown--boxes .u1-dm__countdown-text-after {
  margin-left: 0.3em;
}

/* ── Progress bar block (waitlist / FOMO): labels + barra que se llena al
   entrar al viewport; colores por tokens, funciona en ambos schemes ──── */
.u1-dm__progress {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: var(--u1-dm-pb-mt, 16px);
}
@media screen and (max-width: 749px) {
  .u1-dm__progress { margin-top: var(--u1-dm-pb-mt-m, var(--u1-dm-pb-mt, 16px)); }
}
.u1-dm__progress-labels {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.u1-dm__progress-label-left {
  color: var(--text-primary, #0d0d0d);
  font-weight: var(--text-h-fw, 530);
}
.u1-dm__progress-label-right { color: var(--text-secondary, rgba(13, 13, 13, 0.56)); }
.u1-dm__progress-track {
  width: 100%;
  height: 4px;
  border-radius: 999px;
  /* El color custom del block (--u1-dm-pb-color) tinta fill y track juntos */
  background: color-mix(in srgb, var(--u1-dm-pb-color, var(--text-primary, #0d0d0d)) 22%, transparent);
  overflow: hidden;
}
.u1-dm__progress-fill {
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: var(--u1-dm-pb-fill-bg, var(--u1-dm-pb-color, var(--text-primary, #0d0d0d)));
  transition: width 1100ms cubic-bezier(0.22, 1, 0.36, 1);
}
.u1-dm__progress.is-filled .u1-dm__progress-fill { width: var(--u1-dm-pb-fill, 80%); }
@media (prefers-reduced-motion: reduce) {
  .u1-dm__progress-fill { transition: none; width: var(--u1-dm-pb-fill, 80%); }
}

/* ── Estilo FOMO: stats grandes (numero arriba, caption abajo), barra gorda con
   gradient + glow, punta pulsante, "spots left" y estado hot pasado el 85% ── */
.u1-dm__progress--fomo { gap: 14px; }
.u1-dm__progress--fomo .u1-dm__progress-stats {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
}
.u1-dm__progress-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.u1-dm__progress-stat--right { align-items: flex-end; text-align: right; }
.u1-dm__progress-num {
  color: var(--text-primary, #0d0d0d);
}
.u1-dm__progress-cap { color: var(--text-secondary, rgba(13, 13, 13, 0.56)); }
.u1-dm__progress--fomo .u1-dm__progress-track {
  height: 10px;
  overflow: visible;
  position: relative;
  background: color-mix(in srgb, var(--u1-dm-pb-color, var(--text-primary, #0d0d0d)) 18%, transparent);
}
.u1-dm__progress--fomo .u1-dm__progress-fill {
  position: relative;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--u1-dm-pb-color, var(--text-primary, #0d0d0d)) 65%, #000) 0%,
    var(--u1-dm-pb-color, var(--text-primary, #0d0d0d)) 100%
  );
  box-shadow:
    0 0 16px color-mix(in srgb, var(--u1-dm-pb-color, var(--text-primary, #0d0d0d)) 55%, transparent),
    0 0 40px color-mix(in srgb, var(--u1-dm-pb-color, var(--text-primary, #0d0d0d)) 30%, transparent);
}
.u1-dm__progress-spots {
  margin: 0;
  /* Sigue la alineacion del contenido del hero (left/center por breakpoint) */
  text-align: var(--u1-dm-ta, center);
  color: var(--text-secondary, rgba(13, 13, 13, 0.56));
  transition: color 300ms ease;
}
/* Hot: cerca del techo, todo sube un punto de intensidad */
.u1-dm__progress--fomo.is-hot .u1-dm__progress-fill { filter: saturate(1.3) brightness(1.08); }
.u1-dm__progress--fomo.is-hot .u1-dm__progress-spots {
  color: var(--u1-dm-pb-color, var(--text-primary, #0d0d0d));
  font-weight: var(--text-h-fw, 530);
}

/* ── Exito del Email form (Carlos 21/10, BFCM) ─────────────────────────────────────────────
   Con "Success heading" lleno: el contenido sale (fundido + 8px hacia arriba + blur, 320 ms) y
   entra el titular de confirmacion (480 ms, mismo lenguaje que la entrada 'Blur in'). La luz
   trasera del casco se prende encima de la foto: nucleo fino (la tira de LEDs) + halo, en modo
   screen para que sume luz sobre el negro. El JS la ubica en pixeles (ver data-u1-dm-light). */
.u1-dm__light {
  position: absolute;
  left: 50%;
  top: 15%;
  width: 15%;
  aspect-ratio: 5 / 1;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
  visibility: hidden;
}
.u1-dm__light::before,
.u1-dm__light::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  border-radius: 50%;
}
/* Nucleo: la tira encendida */
.u1-dm__light::before {
  width: 100%;
  height: 36%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--u1-dm-light) 35%, #fff) 0%, var(--u1-dm-light) 45%, transparent 100%);
  filter: blur(2px);
}
/* Halo: el resplandor sobre el casco */
.u1-dm__light::after {
  width: 220%;
  height: 420%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--u1-dm-light) 55%, transparent) 0%, color-mix(in srgb, var(--u1-dm-light) 18%, transparent) 45%, transparent 100%);
  filter: blur(12px);
}
.u1-dm--success .u1-dm__light {
  visibility: visible;
  animation: u1-dm-light-on 900ms cubic-bezier(0.22, 1, 0.36, 1) 200ms both;
}
@keyframes u1-dm-light-on {
  0%   { opacity: 0; transform: translate(-50%, -50%) scaleX(0.55); }
  45%  { opacity: 1; }
  60%  { opacity: 0.7; }
  100% { opacity: 1; transform: translate(-50%, -50%) scaleX(1); }
}

.u1-dm--success .u1-dm__container > :not([data-u1-dm-success]) {
  animation: u1-dm-ok-out 320ms cubic-bezier(0.4, 0, 1, 1) forwards;
  pointer-events: none;
}
.u1-dm__container > .u1-dm__is-gone { display: none !important; }
@keyframes u1-dm-ok-out {
  to { opacity: 0; transform: translateY(-8px); filter: blur(6px); }
}
.u1-dm__success[hidden] { display: none !important; }
/* Con el mensaje de exito a la vista, el contenido se centra en el alto del hero (antes quedaba pegado abajo, donde estaba el form) */
.u1-dm--success .u1-dm__sizer { align-items: center; }
.u1-dm--success .u1-dm__container { padding-top: 0 !important; padding-bottom: 0 !important; }
.u1-dm__success {
  max-width: 100%;
  text-align: var(--u1-dm-ta, center);
  outline: none;
}
.u1-dm__success.is-in {
  animation: u1-dm-ok-in 480ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes u1-dm-ok-in {
  from { opacity: 0; transform: translateY(12px); filter: blur(8px); }
  to   { opacity: 1; transform: none; filter: none; }
}
.u1-dm__success-title {
  margin: 0;
  /* En em del propio titular: ~2 lineas en desktop */
  max-width: 24em;
  color: var(--text-primary);
  text-wrap: balance;
}
.u1-dm__success-icon {
  display: inline-flex;
  width: 0.8em;
  height: 0.8em;
  margin-inline-end: 0.15em;
  vertical-align: -0.04em;
  color: var(--u1-dm-light, currentColor);
}
.u1-dm__success-icon svg { width: 100%; height: 100%; }
@media (prefers-reduced-motion: reduce) {
  .u1-dm--success .u1-dm__light { animation: none; opacity: 1; }
  .u1-dm--success .u1-dm__container > :not([data-u1-dm-success]) { animation-duration: 0.01ms; }
  .u1-dm__success.is-in { animation: none; }
}

/* ── Disclaimer block ─────────────────────────────────────────────── */
.u1-dm__disclaimer {
  margin: 0;
  margin-top: var(--u1-dm-disc-mt, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
}
@media screen and (max-width: 749px) {
  .u1-dm__disclaimer { margin-top: var(--u1-dm-disc-mt-m, var(--u1-dm-disc-mt, 0)); }
}
/* Posicion "Abajo a la derecha" (desktop): sale del flujo y se pega al borde derecho
   del container, con el mismo bottom que el ultimo elemento del contenido */
@media screen and (min-width: 1024px) {
  .u1-dm__container .u1-dm__disclaimer--pin-right {
    position: absolute;
    right: 0;
    bottom: var(--u1-dm-pb-override, var(--u1-dm-pb, var(--space-20, 80px)));
    margin: 0 !important;
    justify-content: flex-end;
    text-align: right;
    max-width: 50%;
  }
}
.u1-dm__disclaimer strong { font-weight: 700; color: inherit; }
.u1-dm__disclaimer-code {
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  transition: opacity 150ms ease;
}
.u1-dm__disclaimer-code:hover { opacity: 0.7; }
.u1-dm__disclaimer-copy-icon {
  display: block;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}
.u1-dm__disclaimer-copied {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  transform: translateX(-50%);
  background: var(--bg-primary, #fff);
  color: var(--text-primary, #000);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease;
}
.u1-dm__disclaimer-copied.is-visible { opacity: 1; }

/* ── Featured in bar (block) — pinned to the bottom edge of the hero ────── */
.u1-dm__featured {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  z-index: 2;
  width: var(--w-fluid);
  max-width: var(--u1-dm-section-mw, var(--max-w-l));
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: var(--u1-dm-h, center);
  gap: 20px;
  margin-top: 0;
  padding-bottom: 24px;
}
.u1-dm__featured-title {
  text-transform: lowercase;
  letter-spacing: 0.04em;
  opacity: 0.7;
  white-space: nowrap;
}
/* First letter uppercase ("As featured in:") */
.u1-dm__featured-title::first-letter {
  text-transform: uppercase;
}
/* Optional: hide the featured bar on tablet + mobile */
@media (max-width: 1024px) {
  .u1-dm__featured--desktop-only { display: none !important; }
}
.u1-dm__featured-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.u1-dm__featured-logo { display: inline-flex; align-items: center; }
.u1-dm__featured-logo img {
  display: block;
  height: var(--u1-dm-feat-h, 24px);
  width: auto;
  object-fit: contain;
}
.u1-dm__featured--invert .u1-dm__featured-logo img { filter: brightness(0) invert(1); }
@media screen and (max-width: 749px) {
  .u1-dm__featured { gap: 14px; }
  .u1-dm__featured-logos { gap: 14px; }
}

/* ── Disclaimer: multi-item with vertical dividers + optional icons ────── */
/* Icono del set U1 en los items del disclaimer: 20px, color del texto (o Icon color). Doble clase:
   .u1-dm__disc-icon (16px, para las imagenes) se declara mas abajo y ganaba por orden */
.u1-dm__disc-icon.u1-dm__disc-icon--u1 {
  display: inline-flex;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}
.u1-dm__disc-icon--u1 svg {
  width: 100%;
  height: 100%;
  display: block;
}
/* Correccion optica por icono: el dibujo de bolt ocupa 11x13 de 20 (mucho aire); los demas ~16-18 */
.u1-dm__disc-icon--u1[data-u1-icon="bolt"] svg {
  transform: scale(1.3);
}
.u1-dm__disclaimer--items {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  /* Solo inline/bottom: el margin-top lo maneja el setting del block (regla base) */
  margin-inline: 0;
  margin-bottom: 0;
}
.u1-dm__disc-item {
  display: inline-flex;
  align-items: center;
}
/* Mobile: una sola linea con scroll horizontal (sin barra visible) */
@media screen and (max-width: 749px) {
  .u1-dm__disclaimer--items {
    display: flex;
    flex-wrap: nowrap;
    /* Con scroll horizontal el contenido tiene que arrancar desde la izquierda:
       centrado, la parte desbordada de la izquierda queda inalcanzable */
    justify-content: flex-start;
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .u1-dm__disclaimer--items::-webkit-scrollbar { display: none; }
  .u1-dm__disc-item { flex: 0 0 auto; white-space: nowrap; }
  /* Aire al final del scroll SOLO cuando hay scroll: si el contenido entra en
     pantalla, este spacer sobraba y forzaba overflow (y con el, el difuminado) */
  .u1-dm__disclaimer--items.is-scrollable::after { content: ''; flex: 0 0 28px; }
  /* Affordance de scroll: el texto se difumina hacia el borde derecho;
     el JS saca la clase al llegar al final */
  .u1-dm__disclaimer--items.has-overflow-right {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent 100%);
  }
}
.u1-dm__disc-item:not(:first-child) { gap: 12px; }
.u1-dm__disc-item:not(:first-child)::before {
  content: '';
  display: block;
  width: 1px;
  height: 12px;
  flex-shrink: 0;
  align-self: center;
  background: color-mix(in srgb, currentColor 35%, transparent);
}
.u1-dm__disc-inner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.u1-dm__disc-icon {
  display: block;
  height: 16px;
  width: auto;
  object-fit: contain;
}
.u1-dm__disc-icon--tint {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
/* END_SECTION:u1-discovery-module */

/* START_SECTION:u1-discovery-reveal (INDEX:78) */
/* ══════════════════════════════════════════════════════════════════════
   U1 HERO DISCOVERY REVEAL
   ══════════════════════════════════════════════════════════════════════ */

.u1-dr {
  position: relative;
  width: 100%;
}

.u1-dr__sticky {
  position: sticky;
  top: 0;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  display: flex;
  justify-content: center;
  align-items: var(--u1-dr-v, flex-end);
  overflow: hidden;
}

/* ── Background ─────────────────────────────────────────────────────── */

/* El contenedor lleva el zoom base y el parallax, UNA vez para las dos capas */
.u1-dr__bg-layers {
  position: absolute;
  inset: 0;
  z-index: 0;
  transform: scale(1.1);
  will-change: transform;
}

.u1-dr__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* Las dos capas cubren el contenedor por igual, y no depende de que la clase del
   <img> haya llegado bien. Era la causa del "fantasma": una capa se quedaba sin
   object-fit y se ajustaba por ALTO en vez de cubrir. Con la foto de 1734x1646 en
   una pantalla de 2000x1354 eso da 1426px de ancho en vez de 2200: la capa entraba
   entera y centrada, mientras la otra recortaba, y se veia el objeto dos veces
   desplazado. Medido sobre el render real. */
.u1-dr__bg-layers > *,
.u1-dr__bg-layers img,
.u1-dr__bg-layers video,
.u1-dr__bg-layers svg {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
}

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

.u1-dr__bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.u1-dr__bg--reveal {
  opacity: 0;
  z-index: 0;
  will-change: opacity;
  /* El ajuste fino (escala y desplazamiento) NO puede vivir aca: Shopify no procesa
     Liquid en este bloque, asi que las llaves dobles saldrian literales y el
     navegador descartaria la declaracion. Va en el style de arriba, que si lo
     procesa. Y no se escriben tags de Liquid ni siquiera en un comentario, para no
     darle nada raro al parser. */
}

.u1-dr__bg-video--mobile { display: none; }
.u1-dr__bg--has-mobile-video .u1-dr__bg-video--desktop { display: block; }
.u1-dr__bg--has-mobile-video .u1-dr__bg-video--mobile  { display: none; }

@media screen and (max-width: 749px) {
  .u1-dr__bg--has-mobile-video .u1-dr__bg-video--desktop { display: none; }
  .u1-dr__bg--has-mobile-video .u1-dr__bg-video--mobile  { display: block; }
}

.u1-dr__overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* ── Gradient scrim ─────────────────────────────────────────────────
   Mismo comportamiento que el de Hero Discovery, pero con clases propias:
   las de la otra section no se bundlean si esta no la acompana en la pagina. */
.u1-dr__scrim {
  position: absolute;
  left: 0;
  right: 0;
  height: var(--u1-dr-scrim-h, 50%);
  z-index: 0;
  pointer-events: none;
}
.u1-dr__scrim--bottom {
  bottom: 0;
  background: linear-gradient(to top, var(--u1-dr-scrim-from, rgba(0, 0, 0, 0.6)), transparent);
}
.u1-dr__scrim--top {
  top: 0;
  background: linear-gradient(to bottom, var(--u1-dr-scrim-from, rgba(0, 0, 0, 0.6)), transparent);
}
.u1-dr__scrim--left,
.u1-dr__scrim--right {
  top: 0;
  bottom: 0;
  height: auto;
  width: var(--u1-dr-scrim-h, 50%);
}
.u1-dr__scrim--left {
  right: auto;
  background: linear-gradient(to right, var(--u1-dr-scrim-from, rgba(0, 0, 0, 0.6)), transparent);
}
.u1-dr__scrim--right {
  left: auto;
  background: linear-gradient(to left, var(--u1-dr-scrim-from, rgba(0, 0, 0, 0.6)), transparent);
}

/* ── Container ──────────────────────────────────────────────────────── */

.u1-dr__container {
  position: relative;
  z-index: 1;
  width: var(--w-fluid);
  max-width: var(--max-w-l);
  display: flex;
  flex-direction: column;
  align-items: var(--u1-dr-h, center);
  gap: var(--space-7, 28px);
  padding-top: var(--u1-dr-pt, 0);
  padding-bottom: var(--u1-dr-pb, var(--space-20, 80px));
}

.u1-dr__content {
  width: 100%;
  max-width: var(--max-w-s);
  display: flex;
  flex-direction: column;
  align-items: var(--u1-dr-h, center);
  text-align: var(--u1-dr-ta, center);
  color: var(--text-primary);
}

/* ── Caption ────────────────────────────────────────────────────────── */

.u1-dr__caption {
  margin: 0;
  color: var(--text-secondary);
  opacity: 0;
  filter: blur(14px);
  transform: translateY(5px) scale(1.01);
  will-change: opacity, transform, filter;
}

/* ── Title ──────────────────────────────────────────────────────────── */

.u1-dr__title {
  margin: 0;
  padding-top: 12px;
  color: var(--text-primary);
  text-align: var(--u1-dr-ta, center);
}

.u1-dr__title-row {
  position: relative;
  width: fit-content;
  max-width: 100%;
}

.u1-dr__line {
  display: block;
}

.u1-dr__line--muted {
  color: rgba(255,255,255,var(--u1-dr-muted-op, 0.12));
}

.u1-dr__line--reveal {
  opacity: 0;
  filter: blur(14px);
  transform: translateY(5px) scale(1.01);
  will-change: opacity, transform, filter;
}

/* ── Description ────────────────────────────────────────────────────── */

.u1-dr__description {
  margin: 0;
  padding-top: 20px;
  color: var(--text-secondary);
  opacity: 0;
  filter: blur(14px);
  transform: translateY(5px) scale(1.01);
  will-change: opacity, transform, filter;
}

/* ── Actions / CTA ──────────────────────────────────────────────────── */

.u1-dr__actions {
  display: flex;
  align-items: center;
  justify-content: var(--u1-dr-h, center);
  gap: var(--space-5, 20px);
  padding: 12px 0;
  color: var(--text-primary);
  opacity: 0;
  filter: blur(14px);
  transform: translateY(5px) scale(1.01);
  will-change: opacity, transform, filter;
}

/* ── Quotes ticker (block dr_quotes): fila continua sin marco, fades laterales, mismo reveal que el CTA ── */
.u1-dr__quotes {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: var(--u1-dr-qt-b, 80px);
  z-index: 2;
  width: var(--w-fluid, calc(100% - 48px));
  max-width: var(--u1-dr-qt-mw, var(--max-w-l, 1200px));
  overflow: hidden;
  color: var(--text-primary);
  padding: 4px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 min(160px, 14vw), #000 calc(100% - min(160px, 14vw)), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 min(160px, 14vw), #000 calc(100% - min(160px, 14vw)), transparent);
  opacity: 0;
  filter: blur(14px);
  transform: translateY(5px) scale(1.01);
  will-change: opacity, transform, filter;
}
.u1-dr__quotes-track {
  display: flex;
  width: max-content;
  animation: u1-dr-quotes-scroll var(--u1-dr-qt-dur, 50s) linear infinite;
}
.u1-dr__quotes:hover .u1-dr__quotes-track { animation-play-state: paused; }
.u1-dr__quotes-group {
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.u1-dr__quote { white-space: nowrap; }
.u1-dr__quote-sep {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
  margin: 0 var(--space-6, 24px);
  flex: 0 0 auto;
}
@keyframes u1-dr-quotes-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media screen and (max-width: 749px) {
  .u1-dr__quotes { bottom: var(--u1-dr-qt-b-m, 40px); }
}
@media (prefers-reduced-motion: reduce) {
  .u1-dr__quotes-track { animation: none; }
  .u1-dr__quotes { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}

/* ── Mobile overrides ───────────────────────────────────────────────── */

@media screen and (max-width: 749px) {
  .u1-dr__container { gap: var(--space-5, 20px); }

  .u1-dr__title.u1-dr__title--mobile-text-display-l {
    font-size: clamp(4rem, calc(4rem + 3 * ((100vw - 23.4375rem) / 66.5625)), 7rem) !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }
  .u1-dr__title.u1-dr__title--mobile-text-display {
    font-size: clamp(2.4rem, calc(2.4rem + 2.55 * ((100vw - 23.4375rem) / 66.5625)), 5rem) !important;
    line-height: 1.07 !important;
    letter-spacing: 0.1px !important;
  }
  .u1-dr__title.u1-dr__title--mobile-text-h1 {
    font-size: clamp(2rem, calc(2rem + 1.5 * ((100vw - 23.4375rem) / 66.5625)), 3.5rem) !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
  }
  .u1-dr__title.u1-dr__title--mobile-text-h2 {
    font-size: clamp(1.5rem, calc(1.5rem + 0.75 * ((100vw - 23.4375rem) / 66.5625)), 2.25rem) !important;
    line-height: 1.16 !important;
    letter-spacing: 0 !important;
  }

  .u1-dr__actions { gap: var(--space-4, 16px); }
  .u1-dr__title-row .u1-dr__title { padding-top: 22px; }
}
/* END_SECTION:u1-discovery-reveal */

/* START_SECTION:u1-feature-cards (INDEX:85) */
.u1-fc {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── Header ─────────────────────────────────────────────────────────────── */

.u1-fc__header {
  width: var(--w-fluid);
  max-width: var(--max-w-m);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  padding-bottom: var(--space-20, 80px);
}

.u1-fc__header-text {
  grid-column: 1 / span 8;
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 16px);
  max-width: var(--max-w-xs);
}

.u1-fc__caption { margin: 0; }
.u1-fc__heading { margin: 0; }

.u1-fc__header-cta {
  grid-column: 9 / span 4;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: var(--space-3, 12px) 0;
}

.u1-fc__header-cta-mobile {
  display: none;
}

/* ── Grid ───────────────────────────────────────────────────────────────── */

.u1-fc__grid {
  width: var(--w-fluid);
  max-width: var(--max-w-m);
  display: flex;
  gap: 20px;
}

/* ── Card ───────────────────────────────────────────────────────────────── */

.u1-fc__card {
  flex: 1 0 0;
  max-width: 550px;
  display: flex;
  flex-direction: column;
}

.u1-fc__card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  overflow: hidden;
  background: transparent !important;
}

.u1-fc__card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 12px;
}

.u1-fc__card-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.u1-fc__placeholder-svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.u1-fc__card-text {
  padding: 24px 24px 0 16px;
  max-width: 420px;
}

.u1-fc__card-desc {
  margin: 0;
}

/* ── Tablet ─────────────────────────────────────────────────────────────── */

@media screen and (max-width: 1023px) and (min-width: 750px) {
  .u1-fc__header {
    padding-bottom: var(--space-15, 60px);
  }

  .u1-fc__card-text {
    padding: 16px 16px 0 16px;
  }
}

/* ── Mobile ─────────────────────────────────────────────────────────────── */

@media screen and (max-width: 749px) {
  .u1-fc__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-8, 32px);
    padding-bottom: var(--space-16, 64px);
  }

  .u1-fc__header-text {
    align-items: center;
  }

  .u1-fc__header-cta {
    display: none;
  }

  .u1-fc__header-cta-mobile {
    display: flex;
    justify-content: center;
  }

  .u1-fc__grid {
    flex-direction: column;
    gap: var(--space-16, 64px);
  }

  .u1-fc__card {
    max-width: none;
  }

  .u1-fc__card-media {
    aspect-ratio: 4 / 3;
  }

  .u1-fc__card-text {
    padding: 24px 24px 0 16px;
  }
}
/* END_SECTION:u1-feature-cards */

/* START_SECTION:u1-gallery-carousel (INDEX:90) */
/* ═══════════════════════════════════════════════════════════════════════════
   u1-gc — gallery-specific CSS.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Base carousel layout (SELF-CONTAINED) ───────────────────────────────────
   Shopify solo bundlea el {% stylesheet %} de una sección cuando esa sección está
   en la página. Como esta sección reusa las clases .u1-carousel* pero puede vivir
   en páginas SIN la sección u1-carousel, replicamos acá el layout base para no
   depender de ella (en el editor cargan todos los assets y "andaba", en live no).
   Reglas idénticas a u1-carousel → si conviven, el duplicado es inofensivo. */
.u1-carousel__track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 20px;
  --_u1-carousel-inset: calc((100% - min(var(--w-fluid, 88vw), var(--u1-carousel-max-w, var(--max-w-m)))) / 2);
  padding-left: var(--_u1-carousel-inset);
  padding-right: var(--_u1-carousel-inset);
  scroll-padding-left: var(--_u1-carousel-inset);
  overflow-x: auto;
  overflow-y: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.u1-carousel__track::-webkit-scrollbar { display: none; }
[data-u1-gc-slide] {
  flex-shrink: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  box-sizing: border-box;
}
.u1-carousel__card { display: flex; flex-direction: column; background: transparent !important; }
.u1-carousel__card-media {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background-color: transparent !important;
  flex-shrink: 0;
  max-width: calc(100vw - 48px);
}
.u1-carousel__card--ar-1260-680 .u1-carousel__card-media { aspect-ratio: 1260 / 680; }
.u1-carousel__card--ar-1040-680 .u1-carousel__card-media { aspect-ratio: 1040 / 680; }
.u1-carousel__card--ar-830-680  .u1-carousel__card-media { aspect-ratio: 830 / 680; }
.u1-carousel__card--ar-620-680  .u1-carousel__card-media { aspect-ratio: 620 / 680; }
.u1-carousel__card--ar-560-680  .u1-carousel__card-media { aspect-ratio: 560 / 680; }
.u1-carousel__card--ar-560-560  .u1-carousel__card-media { aspect-ratio: 1 / 1; }
.u1-carousel__card--ar-380-680  .u1-carousel__card-media { aspect-ratio: 2 / 3; }
/* Media fill: las capas de imagen/video van ABSOLUTAS dentro de la media.
   Sin esto quedan en flujo, agrandan la media y empujan el caption hacia abajo. */
.u1-carousel__card-bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; }
.u1-carousel__card-bg-media { width: 100%; height: 100%; object-fit: cover; display: block; }
.u1-carousel__card-bg-media--mobile, .u1-carousel__card-bg-video--mobile { display: none; }
.u1-carousel__card-placeholder { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.u1-carousel__placeholder-svg { width: 100%; height: 100%; object-fit: cover; }
@media screen and (max-width: 749px) {
  .u1-carousel__card-bg-media--mobile { display: block; }
  .u1-carousel__card-bg-media--desktop:has(+ .u1-carousel__card-bg-media--mobile) { display: none; }
}
/* Alturas por size (idéntico a u1-carousel) */
.u1-carousel--size-b .u1-carousel__card-media { height: 680px; }
.u1-carousel--size-m .u1-carousel__card-media { height: 550px; }
.u1-carousel--size-s .u1-carousel__card-media { height: 430px; }
/* Vertical 2:3: ancho de card fijo por size (la flex column estira el media al ancho
   del texto si no) + altura propia mas baja que el size generico (mas petiza). */
.u1-carousel--size-b .u1-carousel__card--ar-380-680 { width: 413px; }
.u1-carousel--size-m .u1-carousel__card--ar-380-680 { width: 333px; }
.u1-carousel--size-s .u1-carousel__card--ar-380-680 { width: 267px; }
.u1-carousel--size-b .u1-carousel__card--ar-380-680 .u1-carousel__card-media { height: 620px; }
.u1-carousel--size-m .u1-carousel__card--ar-380-680 .u1-carousel__card-media { height: 500px; }
.u1-carousel--size-s .u1-carousel__card--ar-380-680 .u1-carousel__card-media { height: 400px; }
/* 560x560: pisa el height fijo del size */
.u1-carousel--size-b .u1-carousel__card--ar-560-560 .u1-carousel__card-media,
.u1-carousel--size-m .u1-carousel__card--ar-560-560 .u1-carousel__card-media,
.u1-carousel--size-s .u1-carousel__card--ar-560-560 .u1-carousel__card-media {
  height: auto;
  width: 560px;
  max-width: calc(100vw - 48px);
}
/* Header (idéntico a u1-carousel): centrado + gap al contenido */
.u1-carousel__carousel-wrap { position: relative; }
.u1-carousel__header-wrap {
  width: var(--w-fluid);
  max-width: var(--u1-carousel-max-w, var(--max-w-m));
  margin: 0 auto;
  padding: 0 0 60px;
}
.u1-carousel__header-wrap--center { text-align: center; }
.u1-carousel__heading { margin: 0 !important; color: var(--text-primary); max-width: var(--u1-carousel-header-mw, none); }
.u1-carousel__heading .u1-nowrap { white-space: nowrap; }
.u1-carousel__header-wrap--center .u1-carousel__heading { margin-left: auto !important; margin-right: auto !important; }
.u1-carousel__caption { margin: 0 0 12px; max-width: var(--u1-carousel-header-mw, none); }
.u1-carousel__header-wrap--center .u1-carousel__caption { margin-left: auto; margin-right: auto; }
.u1-carousel__subtitle { margin: 12px 0 0; color: var(--text-secondary); max-width: var(--u1-carousel-header-mw, none); }
.u1-carousel__header-wrap--center .u1-carousel__subtitle { margin-left: auto; margin-right: auto; }
@media screen and (max-width: 1023px) and (min-width: 750px) {
  .u1-carousel__header-wrap { padding-bottom: 60px; }
}
@media screen and (max-width: 749px) {
  .u1-carousel__header-wrap { padding-bottom: 40px; }

  /* En mobile la card medía 267 y el gap 20: la siguiente asomaba 62px, o sea
     medio bloque de texto cortado a la mitad. Se ensancha la card y se achica
     el gap, asi la siguiente asoma solo el borde de la foto (11px) y se lee
     que hay mas sin mostrar texto partido. */
  #U1GalleryCarousel-{{ section.id }} .u1-carousel__track { gap: 12px; }
  /* Va por el atributo del slide, no por la clase del ratio: esa la pisa otra
     regla con el ancho fijo por tamano y el cambio no se aplicaba. */
  #U1GalleryCarousel-{{ section.id }} [data-u1-gc-slide] {
    width: calc(100vw - 46px) !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  /* La foto tiene su propio ancho fijo por tamano: sin esto la card se ensancha
     y la imagen queda corta, con una franja blanca a la derecha. */
  #U1GalleryCarousel-{{ section.id }} [data-u1-gc-slide] .u1-carousel__card-media {
    width: 100% !important;
    max-width: none !important;
  }
}
@media screen and (min-width: 1024px) {
  .u1-carousel--grid .u1-carousel__track {
    overflow: visible;
    scroll-snap-type: none;
    justify-content: center;
    align-items: stretch;
  }
}

/* ── Grid mode (toggle): todas las cards en pantalla, sin carousel — desktop ──
   El track / scroll-snap / flechas los maneja .u1-carousel--grid (u1-carousel).
   Acá adapto las cards del gallery (usan data-u1-gc-slide) y oculto su paginador. */
@media screen and (min-width: 1024px) {
  .u1-carousel--grid [data-u1-gc-slide] {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
  }
  /* El media respeta el aspect ratio elegido al ancho de la columna
     (en vez del alto fijo por size). 560x560 = cuadrado. */
  .u1-carousel--grid [data-u1-gc-slide] .u1-carousel__card-media {
    width: 100% !important;
    height: auto !important;
  }
  /* En grid, la vertical no debe llenar la columna: cap al ancho del ratio, centrada */
  .u1-carousel--grid .u1-carousel__card--ar-380-680 .u1-carousel__card-media {
    max-width: 453px;
    margin-inline: auto;
  }
  .u1-carousel--grid .u1-gc__pag-controls { display: none !important; }
  /* Saca el spacer de 68px que el carousel reserva para el paginador flotante */
  .u1-carousel--grid .u1-carousel__carousel-wrap::after { display: none; }
}

/* ── Full-bleed clip + card-desc (copiados de u1-carousel — self-contained) ──
   __clip abarca todo el ancho del grid de la section; sin esto el carrusel queda
   encajonado en la columna de contenido y la ultima card se corta antes del borde. */
.u1-carousel__clip { grid-column: 1 / -1 !important; }
.u1-carousel__card-desc { margin: 0; }

/* ── Arrows + paginator wrap (copiados de u1-carousel — self-contained:
   el CSS por sección solo se bundlea si esa sección está en la página) ── */
.u1-carousel__arrows {
  display: flex;
  gap: var(--space-4, 16px);
  justify-content: flex-end;
  padding-top: var(--space-10, 40px);
  width: var(--w-fluid, 88vw);
  max-width: var(--u1-carousel-max-w, var(--max-w-m));
  margin: 0 auto;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease 0.3s, transform 0.5s ease 0.3s;
}
.u1-carousel--revealed .u1-carousel__arrows {
  opacity: 1;
  transform: translateY(0);
}
.u1-carousel__arrow {
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  border: none;
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-primary);
  padding: 0;
  transition: background 0.2s ease, opacity 0.3s ease, transform 0.15s ease;
}
.u1-carousel__arrow:hover:not(:disabled) { background: linear-gradient(var(--interactive-bg-secondary-hover), var(--interactive-bg-secondary-hover)) var(--bg-tertiary); }
.u1-carousel__arrow:active:not(:disabled) { transform: scale(0.92); background: linear-gradient(var(--interactive-bg-secondary-hover), var(--interactive-bg-secondary-hover)) var(--bg-tertiary); }
.u1-carousel__arrow:disabled { opacity: 0.3; cursor: default; }
.u1-carousel__paginator-wrap {
  position: sticky;
  bottom: 0;
  padding: 60px 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  z-index: 2;
}

/* ── Color image cross-fade (stacked bg layers inside card-media) ──────── */

.u1-gc__card-img {
  opacity: 0;
  z-index: 0;
  transition: opacity 0ms ease 250ms;
}

.u1-gc__card-img--active {
  opacity: 1;
  z-index: 1;
  transition: opacity 250ms ease 0ms;
}

.u1-gc__card-img {
  pointer-events: none;
}

/* Crossfade suave solo en las cards que rotan en loop. El picker de colores
   sigue con su corte rapido de 250ms, que ahi se quiere inmediato.
   Las dos capas se funden a la vez, sin el delay que cortaba la saliente. */
/* Mismo comportamiento que el slideshow del Hero Discovery, que quedo bien:
   las dos capas animan a la vez con la misma curva, sin delays ni trucos. */
[data-u1-gc-slideshow] .u1-gc__card-img {
  transition: opacity var(--u1-gc-fade, 1000ms) cubic-bezier(0.4, 0, 0.2, 1);
}

/* Con escala */
[data-u1-gc-slideshow][data-u1-gc-fx="scale"] .u1-gc__card-img {
  transform: scale(1.03);
  transition:
    opacity calc(var(--u1-gc-fade, 1000ms) * 1.1) cubic-bezier(0.4, 0, 0.2, 1),
    transform calc(var(--u1-gc-fade, 1000ms) * 1.4) cubic-bezier(0.4, 0, 0.2, 1);
}
[data-u1-gc-slideshow][data-u1-gc-fx="scale"] .u1-gc__card-img--active {
  transform: scale(1);
}

/* Con desenfoque */
/* Fondo oscuro detras de las fotos en cualquier card que rote: lo que asome
   durante la transicion, sea el halo del desenfoque o una imagen que todavia
   no cargo, es negro y no el blanco de la pagina. Es el mismo motivo por el
   que en el hero nunca se ve: ahi siempre hay algo detras. */
[data-u1-gc-slideshow] .u1-carousel__card-media {
  background-color: #0d0d0d;
}
[data-u1-gc-slideshow][data-u1-gc-fx="blur"] .u1-gc__card-img {
  filter: blur(12px);
  transition:
    opacity calc(var(--u1-gc-fade, 1000ms) * 1.1) cubic-bezier(0.4, 0, 0.2, 1),
    filter calc(var(--u1-gc-fade, 1000ms) * 1.1) cubic-bezier(0.4, 0, 0.2, 1),
    transform calc(var(--u1-gc-fade, 1000ms) * 1.4) cubic-bezier(0.4, 0, 0.2, 1);
}
[data-u1-gc-slideshow][data-u1-gc-fx="blur"] .u1-gc__card-img--active {
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
  [data-u1-gc-slideshow][data-u1-gc-fx] .u1-gc__card-img {
    filter: none;
    transform: none;
  }
}

.u1-gc__card-img picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* ── Gallery card: constrain card width to media ──────────────────────── */

[data-u1-gc] .u1-carousel__card {
  max-width: calc(100vw - 48px);
}

.u1-gc__card-title {
  margin: 0;
  color: var(--text-primary);
}

.u1-gc__card-desc {
  margin: 0;
}

/* ── Card text below media ─────────────────────────────────────────────── */

.u1-gc__card-text {
  padding: 28px 12px 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* El ancho de la card lo manda la imagen (aspect-ratio + alto), nunca el texto.
     width:0 hace que este bloque no aporte ancho intrinseco al flex de la card, y
     min-width:100% lo devuelve al ancho real. Sin esto, un "Text max-width" mayor
     al de la imagen agrandaba la card y el texto quedaba mas ancho que la foto. */
  width: 0;
  min-width: 100%;
}

.u1-gc__card-text p {
  margin: 0;
}

.u1-gc__card-note {
  margin: 0;
}

/* En el esquema oscuro --text-secondary es #F5F5F5 y --text-primary es blanco puro:
   la diferencia no se ve, asi que el cuerpo del texto y la frase en bold quedaban
   iguales. Aca se baja el cuerpo a un gris real para que el bold resalte. Scopeado
   a esta section a proposito: cambiar el token del DS afectaria todo el sitio. */
.color-scheme-2 .u1-carousel__card-desc,
.color-scheme-2 .u1-gc__card-desc {
  color: var(--neutral-400);
}

.u1-gc__card-bold {
  font-weight: var(--text-h-fw, 500);
  /* El cuerpo del texto va en secondary y la frase en bold en primary, para que
     resalte. Antes dependia del toggle "Bold phrase in primary color"; ahora es el
     comportamiento por defecto y el toggle quedo redundante. */
  color: var(--text-primary);
}

/* Stroke opcional en la imagen: para que la foto no se pierda contra el fondo
   cuando los dos son oscuros.
   Va por pseudo-elemento y NO por inset box-shadow: el inset se pinta por debajo
   del contenido, asi que la imagen, que ocupa todo el contenedor, lo tapaba y no
   se veia nada. Tampoco por border, porque correria el layout y pelearia con el
   border-radius. El z-index va arriba de las capas de imagen (que usan 0 y 1). */
.u1-gc__card-media--stroke::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border: 1px solid var(--stroke-secondary, rgba(13,13,13,0.08));
  border-radius: inherit;
}

@media screen and (max-width: 749px) {
  [data-u1-gc].u1-carousel--mobile-l .u1-carousel__card { max-width: 85.5vw; }
  [data-u1-gc].u1-carousel--mobile-s .u1-carousel__card { max-width: max(61vw, 264px); }
}
/* Vertical 2:3 en mobile/tablet: el ANCHO manda y el alto sale del aspect-ratio,
   asi mantiene el mismo 2:3 que desktop (el alto fijo del size + el cap de ancho
   mobile deformaban la card). */
@media screen and (max-width: 1023px) {
  [data-u1-gc] .u1-carousel__card--ar-380-680,
  /* La imagen nunca puede ser mas ancha que su card.
     Las cards verticales 2:3 llevan width: min(72vw, 333px) = 270px en un telefono
     de 375, pero el media hereda width: 85.5vw = 321px de u1-carousel (regla del
     30/04, anterior a las cards verticales del 13/07). O sea que la foto se
     desbordaba 51px y pisaba la card siguiente. El alto sale del aspect-ratio, asi
     que al capar el ancho la foto se reduce proporcional y no se deforma. */
  /* !important porque u1-carousel.liquid trae una regla de mobile mas especifica
     (.u1-carousel--size-* .u1-carousel__card:not(...) .u1-carousel__card-media)
     con max-width: none, y cuando las dos sections conviven en la misma pagina sus
     stylesheets se mezclan y esa gana. Mismo gotcha de bundling de siempre, en su
     otra forma: clases compartidas entre sections. */
  [data-u1-gc] .u1-carousel__card-media { max-width: 100% !important; }

  [data-u1-gc].u1-carousel--mobile-l .u1-carousel__card--ar-380-680,
  [data-u1-gc].u1-carousel--mobile-s .u1-carousel__card--ar-380-680 {
    width: min(72vw, 333px);
    max-width: none;
  }
  [data-u1-gc] .u1-carousel__card--ar-380-680 .u1-carousel__card-media {
    width: 100%;
    height: auto;
  }
}
@media screen and (max-width: 749px) {
  .u1-gc__card-text { padding: 24px 12px 0; }

  /* Full-bleed: bypass .section grid margins on mobile */
  [data-u1-gc].section {
    --full-page-grid-margin: 0 !important;
    --page-margin: 0px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Color picker pill
   ═══════════════════════════════════════════════════════════════════════════ */

.u1-gc__pag-controls {
  display: flex;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}

.u1-carousel.u1-gc--paginator-visible .u1-gc__pag-controls {
  opacity: 1;
  pointer-events: auto;
}

.u1-gc__picker {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 99px;
  position: relative;
  padding: 16px;
  gap: 0;
  background: var(--u1-glass-bg);
  backdrop-filter: blur(50px) saturate(180%);
  -webkit-backdrop-filter: blur(50px) saturate(180%);
  cursor: default;
}

.u1-gc__fill {
  position: absolute;
  inset: 0;
  border-radius: 99px;
  background: var(--u1-glass-fill);
  pointer-events: none;
  z-index: 10;
  opacity: 0;
}

/* ── Swatch buttons ─────────────────────────────────────────────────────── */

.u1-gc__swatch {
  width: 40px;
  height: 40px;
  border-radius: 105.6px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  overflow: visible;
  position: relative;
  flex-shrink: 0;
}

.u1-gc__swatch::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 36px;
  height: 36px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  border: 1.5px solid rgba(13, 13, 13, 0.05);
  opacity: 0;
  pointer-events: none;
  transition: opacity 80ms ease, border-color 120ms ease, border-width 120ms ease;
}

.u1-gc__swatch--active::before {
  opacity: 1;
  border-color: var(--text-primary);
  border-width: 2px;
}

.u1-gc--ring-inverted .u1-gc__swatch--active::before {
  border-color: rgba(255, 255, 255, 1);
}

.u1-gc__swatch-dot {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  box-sizing: border-box;
  border: 1px solid rgba(13, 13, 13, 0.05);
  box-shadow: 0 2.715px 2.715px 0 rgba(0, 0, 0, 0.25) inset;
  background: rgba(13, 13, 13, 0.1);
  display: block;
  flex-shrink: 0;
}

/* ── Picker entrance animation ──────────────────────────────────────────── */

@keyframes u1-gc-picker-entrance {
  0% {
    opacity: 0;
    width: 12px; height: 12px; padding: 0;
    box-shadow: none;
    transform: scale(1.2);
  }
  8% {
    opacity: 1;
    box-shadow: 0 0 20px rgba(255,255,255,0.9), 0 0 8px rgba(255,255,255,0.9);
    transform: scale(1);
    animation-timing-function: steps(1, end);
  }
  18% { opacity: 0; box-shadow: none; animation-timing-function: steps(1, end); }
  28% {
    opacity: 1;
    box-shadow: 0 0 20px rgba(255,255,255,0.9), 0 0 8px rgba(255,255,255,0.9);
    animation-timing-function: steps(1, end);
  }
  38% { opacity: 0; box-shadow: none; animation-timing-function: steps(1, end); }
  46% {
    opacity: 1;
    width: 12px; height: 12px; padding: 0;
    box-shadow: 0 0 20px rgba(255,255,255,0.9), 0 0 8px rgba(255,255,255,0.9);
    animation-timing-function: cubic-bezier(0.25, 1.6, 0.5, 1);
  }
  100% {
    opacity: 1;
    width: var(--u1-gc-picker-w, 152px); height: 72px; padding: 16px;
    box-shadow: none;
  }
}

@keyframes u1-gc-fill-out {
  0%   { opacity: 1; }
  55%  { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes u1-gc-swatches-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.u1-gc__picker.u1-pag-enter {
  animation: u1-gc-picker-entrance 1000ms both;
}

.u1-gc__picker.u1-pag-enter .u1-gc__fill {
  animation: u1-gc-fill-out 1000ms both;
}

.u1-gc__picker.u1-pag-enter .u1-gc__swatch {
  animation: u1-gc-swatches-in 200ms ease both;
}

/* ── Two-line heading ──────────────────────────────────────────────────── */

.u1-carousel__heading-line {
  display: block;
}

.u1-carousel__heading-line--muted {
  color: var(--text-tertiary, rgba(13,13,13,0.42));
}

.u1-carousel__heading-line--bright {
  color: var(--text-primary, #0d0d0d);
}

/* ── Subtitle ──────────────────────────────────────────────────────────── */
.u1-carousel__subtitle {
  margin: 12px 0 0;
  max-width: 60ch;
}
/* END_SECTION:u1-gallery-carousel */

/* START_SECTION:u1-legal-footer (INDEX:105) */
.u1-legal-footer{
  padding: var(--lf-pt, 32px) 20px var(--lf-pb, 32px);
  border-top: 1px solid var(--stroke-tertiary, rgba(13,13,13,0.12));
}
.u1-legal-footer__inner{
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
  color: var(--text-secondary, rgba(13,13,13,0.66));
}
.u1-legal-footer__inner p{ margin: 0; }
.u1-legal-footer__locale{
  margin-top: 16px;
  display: flex;
  justify-content: center;
}
.u1-legal-footer__locale .u1-footer__locale{ display: inline-flex; }
.u1-legal-footer__inner a{
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* END_SECTION:u1-legal-footer */

/* START_SECTION:u1-product-grid-home (INDEX:116) */
/* ═══════════════════════════════════════════════════════════════════════════
   u1-product-grid-home (u1-pgh)
   ═══════════════════════════════════════════════════════════════════════════ */

.u1-pgh {
  width: 100%;
  box-sizing: border-box;
  position: relative;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Full-bleed vía section--full-width-margin (≥750px lo pone base.css). Mobile: mismo aire que --page-margin */
.u1-pgh__inner {
  width: 100%;
  max-width: none;
  margin: 0;
  box-sizing: border-box;
}

@media screen and (max-width: 749px) {
  .u1-pgh.section--full-width.section--full-width-margin > .u1-pgh__inner {
    padding-left: var(--page-margin, 16px);
    padding-right: var(--page-margin, 16px);
  }
}

.u1-pgh__header {
  margin-bottom: clamp(24px, 4vw, 48px);
}

.u1-pgh__heading {
  margin: 0;
  color: var(--text-primary);
}

.u1-pgh__rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.u1-pgh__row-track {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}

@media screen and (min-width: 1024px) {
  .u1-pgh__row--two .u1-pgh__row-track {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 10px;
  }

  .u1-pgh__row--two .u1-pgh__row-track > .u1-pgh-cell {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* ── Celda ─────────────────────────────────────────────────────────────── */

.u1-pgh-cell {
  position: relative;
  border-radius: var(--border-radius, 16px);
  overflow: hidden;
  min-height: var(--u1-pgh-row-minh, 70vh);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* Dos columnas: alto fijo por breakpoint (tipo Inside the Box); los px vienen de la fila (--u1-pgh-two-h-*). */
.u1-pgh__row--two .u1-pgh-cell {
  min-height: var(--u1-pgh-two-h-m, 440px);
  height: var(--u1-pgh-two-h-m, 440px);
  max-height: var(--u1-pgh-two-h-m, 440px);
}

@media screen and (min-width: 750px) {
  .u1-pgh__row--two .u1-pgh-cell {
    min-height: var(--u1-pgh-two-h-t, 520px);
    height: var(--u1-pgh-two-h-t, 520px);
    max-height: var(--u1-pgh-two-h-t, 520px);
  }
}

@media screen and (min-width: 1024px) {
  .u1-pgh__row--two .u1-pgh-cell {
    min-height: var(--u1-pgh-two-h-d, 700px);
    height: var(--u1-pgh-two-h-d, 700px);
    max-height: var(--u1-pgh-two-h-d, 700px);
  }
}

/* Horizon (color-schemes.liquid): .color-* pone background-color en el mismo nodo que la celda;
   eso tapaba .u1-pgh-cell__fill. Sin fill custom, el esquema sigue pintando la celda. */
.u1-pgh-cell.u1-pgh-cell--has-bg-fill {
  background-color: transparent !important;
  background-image: none;
}

.u1-pgh-cell__fill {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.u1-pgh-cell__bg {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.u1-pgh-cell__picture--bg {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
}

.u1-pgh-cell__picture--inset {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  max-height: 100%;
  min-height: 0;
  margin: 0;
}

.u1-pgh-cell__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Inset: copy en flujo normal; .u1-pgh-cell__media es capa absoluta abajo (60% alto celda), detrás del copy (z-index).
   max-height de la img = % del alto de esa capa vía --u1-pgh-img-maxh-effective (sin JS). */
.u1-pgh-cell--treatment-inset {
  --u1-pgh-img-maxh-effective: var(--u1-pgh-img-maxh, 100);
}

@media screen and (max-width: 749px) {
  .u1-pgh-cell--treatment-inset {
    --u1-pgh-img-maxh-effective: var(--u1-pgh-img-maxh-m, var(--u1-pgh-img-maxh, 100));
  }
}

.u1-pgh-cell--treatment-inset .u1-pgh-cell__content {
  flex: 0 1 auto;
  position: relative;
  z-index: 20;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: hidden;
  transform: translateZ(0);
}

/* ≥750px: sin scroll; el copy puede pintarse sobre la foto (capa superior). */
@media screen and (min-width: 750px) {
  .u1-pgh-cell--treatment-inset .u1-pgh-cell__content {
    overflow-y: visible;
  }
}

.u1-pgh-cell--treatment-inset .u1-pgh-cell__fill {
  z-index: 0;
}

.u1-pgh-cell--treatment-inset .u1-pgh-cell__media {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 60%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  box-sizing: border-box;
  padding: 0 clamp(16px, 3vw, 40px) 0;
  overflow: hidden;
  z-index: 0;
  transform: translateZ(0);
}

/* ≥750px: clics pasan al copy/CTA en zona de solape (foto solo visual). */
@media screen and (min-width: 750px) {
  .u1-pgh-cell--treatment-inset .u1-pgh-cell__media {
    pointer-events: none;
  }
}

.u1-pgh-cell--treatment-inset.u1-pgh-cell--inset-center_small .u1-pgh-cell__media {
  justify-content: center;
}

.u1-pgh-cell--treatment-inset.u1-pgh-cell--inset-center_small .u1-pgh-cell__picture--inset {
  justify-content: center;
}

.u1-pgh-cell--treatment-inset .u1-pgh-cell__inset-img {
  display: block;
  position: relative;
  z-index: 0;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: min(100%, calc(var(--u1-pgh-img-maxh-effective, 100) * 1%));
  object-fit: contain;
  object-position: bottom center;
  flex-shrink: 1;
  min-height: 0;
}

.u1-pgh-cell--treatment-inset.u1-pgh-cell--inset-bottom .u1-pgh-cell__inset-img {
  object-position: bottom center;
}

.u1-pgh-cell--treatment-inset.u1-pgh-cell--inset-center_small .u1-pgh-cell__inset-img {
  object-position: center center;
}

.u1-pgh-cell--treatment-inset.u1-pgh-cell--inset-center_full .u1-pgh-cell__inset-img {
  width: 100%;
  height: auto;
  max-height: min(100%, calc(var(--u1-pgh-img-maxh-effective, 100) * 1%));
  object-position: bottom center;
}

.u1-pgh-cell--img-radius .u1-pgh-cell__inset-img {
  border-radius: var(--u1-pgh-img-radius, 0px);
}

.u1-pgh-cell--img-shadow .u1-pgh-cell__inset-img {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

.u1-pgh-cell__content {
  position: relative;
  z-index: 3;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(24px, 5vw, 80px) clamp(20px, 5vw, 40px);
  box-sizing: border-box;
  min-height: 0;
}

.u1-pgh-cell__content--valign-top {
  justify-content: flex-start;
}

.u1-pgh-cell__content--valign-center {
  justify-content: center;
}

.u1-pgh-cell__content--valign-bottom {
  justify-content: flex-end;
}

.u1-pgh-cell__content-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
  width: 100%;
  max-width: 52ch;
  box-sizing: border-box;
}

.u1-pgh-cell--treatment-inset .u1-pgh-cell__content-inner {
  position: relative;
  z-index: 21;
}

/* Espaciado vertical tipografía: mobile → tablet → desktop (749 / 1024) */
.u1-pgh-cell__caption {
  margin: 0 0 16px;
}

.u1-pgh-cell__caption-graphic {
  margin: 0 0 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.u1-pgh-cell__caption-img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(100%, var(--u1-pgh-cap-img-mw, 220px));
  max-height: var(--u1-pgh-cap-img-mh, 28px);
  object-fit: contain;
}

.u1-pgh-cell__title {
  margin: 0 0 14px;
  color: var(--text-primary);
}

.u1-pgh-cell__subtitle {
  margin: 0 0 14px;
}

@media screen and (min-width: 750px) {
  .u1-pgh-cell__caption,
  .u1-pgh-cell__caption-graphic {
    margin-bottom: 20px;
  }

  .u1-pgh-cell__title {
    margin-bottom: 17px;
  }

  .u1-pgh-cell__subtitle {
    margin-bottom: 17px;
  }
}

@media screen and (min-width: 1024px) {
  .u1-pgh-cell__caption,
  .u1-pgh-cell__caption-graphic {
    margin-bottom: 24px;
  }

  .u1-pgh-cell__title {
    margin-bottom: 20px;
  }

  .u1-pgh-cell__subtitle {
    margin-bottom: 20px;
  }
}

.u1-pgh-cell__body {
  margin: 0 0 32px;
  color: var(--text-secondary);
}

.u1-pgh-cell__body > *:first-child {
  margin-top: 0;
}

.u1-pgh-cell__body > *:last-child {
  margin-bottom: 0;
}

.u1-pgh-cell__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* Clic en la celda (distinto de los botones CTA): enlace expandido detrás del copy */
.u1-pgh-cell__card-link {
  position: absolute;
  inset: 0;
  z-index: 14;
  border-radius: inherit;
  text-decoration: none;
}
.u1-pgh-cell--has-card-link {
  cursor: pointer;
}
.u1-pgh-cell--has-card-link .u1-pgh-cell__content,
.u1-pgh-cell--has-card-link .u1-pgh-cell__content-inner {
  pointer-events: none;
}
.u1-pgh-cell--has-card-link .u1-pgh-cell__caption,
.u1-pgh-cell--has-card-link .u1-pgh-cell__caption-graphic,
.u1-pgh-cell--has-card-link .u1-pgh-cell__title,
.u1-pgh-cell--has-card-link .u1-pgh-cell__subtitle {
  pointer-events: none;
}
.u1-pgh-cell--has-card-link .u1-pgh-cell__body {
  position: relative;
  z-index: 25;
  pointer-events: auto;
}
.u1-pgh-cell--has-card-link .u1-pgh-cell__actions {
  position: relative;
  z-index: 26;
  pointer-events: auto;
}
/* END_SECTION:u1-product-grid-home */

/* START_SECTION:u1-sticky-buy-bar (INDEX:131) */
.u1-sticky-bar{
  --u1-sbb-inset: 20px;
  /* Ancho de la burbuja de Intercom mas su margen, para no cruzarse en desktop */
  --u1-sbb-intercom-gap: 88px;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* Arriba del launcher de Intercom: en mobile la barra lo tapa a proposito */
  /* Por encima del launcher de Intercom (2147483003): la barra lo tapa siempre */
  z-index: 2147483004;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--bg, #ffffff);
  border-top: 1px solid var(--stroke-tertiary, rgba(13,13,13,0.12));
  transform: translateY(100%);
  opacity: 0;
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1), opacity 220ms ease;
}
.u1-sticky-bar.is-visible{ transform: translateY(0); opacity: 1; }
.u1-sticky-bar__info{
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.u1-sticky-bar__title{
  color: var(--text-primary, #0d0d0d);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.u1-sticky-bar__price{ color: var(--text-secondary, rgba(13,13,13,0.66)); }
/* En el esquema oscuro --text-secondary es #F5F5F5, o sea casi el mismo blanco que
   el titulo. Ahi el precio pasa a un gris real para que se lea como secundario. */
.u1-sticky-bar.color-scheme-2 .u1-sticky-bar__price{ color: var(--neutral-400); }
.u1-sticky-bar__cta{ flex: 0 0 auto; }

/* ── Tarjeta compacta: solo desde tablet. En mobile queda la barra full width ── */
@media screen and (min-width: 750px){
  .u1-sticky-bar--mobile-only{ display: none; }

  .u1-sticky-bar--card{
    /* El ancho lo define el contenido, con techo para que un titulo largo no se desmadre */
    width: max-content;
    max-width: min(480px, calc(100vw - (2 * var(--u1-sbb-inset))));
    bottom: var(--u1-sbb-inset);
    padding: 12px 12px 12px 20px;
    border: 1px solid var(--stroke-secondary, rgba(13,13,13,0.08));
    border-radius: 16px;
    /* Mismos tokens glass que el resto del DS: se invierten con .color-scheme-2 */
    background:
      linear-gradient(var(--u1-glass-fill-lg-1), var(--u1-glass-fill-lg-1)),
      linear-gradient(var(--u1-glass-fill-lg-2), var(--u1-glass-fill-lg-2));
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.14);
    gap: 20px;
  }
  .u1-sticky-bar--card.u1-sticky-bar--pos-left{
    left: var(--u1-sbb-inset);
    right: auto;
    margin-inline: 0;
  }
  .u1-sticky-bar--card.u1-sticky-bar--pos-center{
    left: 0;
    right: 0;
    margin-inline: auto;
  }
  .u1-sticky-bar--card.u1-sticky-bar--pos-right{
    left: auto;
    /* Sin corrida por Intercom: la barra va por ENCIMA de la burbuja y la tapa */
    right: var(--u1-sbb-inset);
    margin-inline: 0;
  }
  /* Oculta: baja lo suyo mas el inset, asi no asoma el borde */
  .u1-sticky-bar--card{ transform: translateY(calc(100% + var(--u1-sbb-inset))); }
  .u1-sticky-bar--card.is-visible{ transform: translateY(0); }
  .u1-sticky-bar--card .u1-sticky-bar__title{ white-space: normal; }
}
/* END_SECTION:u1-sticky-buy-bar */

/* START_SECTION:u1-timeline (INDEX:137) */
/* ═══════════════════════════════════════════════════════════════════════════
   u1-timeline — Scroll-driven milestone section
   ═══════════════════════════════════════════════════════════════════════════ */

.u1-timeline {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--Primitives-background-bg_primary, #ffffff);
  padding-top: var(--u1-tl-pt-d);
  padding-bottom: var(--u1-tl-pb-d);
  /* Arranca invisible hasta que el sistema scroll-driven esté listo. Evita que el usuario
     vea los glitches/reacomodos durante la fase de carga inicial. Una vez activo, fade in suave. */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease-out;
}

.u1-timeline--ready {
  opacity: 1;
  visibility: visible;
}

/* Si JS está deshabilitado o falla, mostramos la timeline igual (defensivo) */
.no-js .u1-timeline,
html:not(.js) .u1-timeline {
  opacity: 1;
  visibility: visible;
}

/* ── Heading ─────────────────────────────────────────────────────────────── */

.u1-timeline__heading-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 700px;
  margin: 0 auto;
  /* Menos aire bajo el título — las cards siguen en scroll-inner, no hace falta 80px */
  padding: 0 var(--space-5, 20px) var(--space-10, 40px);
  text-align: center;
}

.u1-timeline__heading {
  margin: 0 !important;
  color: var(--Primitives-text-text-primary, #0d0d0d);
}

/* ── Scroll outer (creates vertical scroll space) ────────────────────────── */

.u1-timeline__scroll-outer {
  position: relative;
  width: 100%;
}

.u1-timeline__scroll-inner {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  display: flex;
  /* Siempre igual que cuando el outer está “enganchado”: evita saltar al togglear clase (antes flex-start+padding → center). */
  align-items: center;
  justify-content: flex-start;
  padding-top: 0;
  box-sizing: border-box;
  overflow: hidden;
}

/* ── Track (horizontal row of milestone cards) ───────────────────────────── */

.u1-timeline__track {
  display: flex;
  /* stretch = todas las cards comparten la altura del hito más alto (eje cruzado alineado) */
  align-items: stretch;
  justify-content: flex-start;
  flex-shrink: 0;
  width: max-content;
  gap: 80px;
  /* Sin transition: el track sigue al scroll en tiempo real (scroll-driven) */
  will-change: transform;
}

/* ── Milestone card ──────────────────────────────────────────────────────── */

.u1-timeline__card {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-5, 20px);
  width: 800px;
  /* Sin transition: scale/opacity los aplica el JS continuamente con el scroll. */
  transform-origin: center center;
  will-change: transform, opacity;
}

/* Static fallback rules: cards usan estos estados antes de que el JS scroll-driven
   tome control. Una vez que el sistema está "ready", el JS sobreescribe con
   transforms inline interpolados continuamente. La transición da un fade suave
   cuando JS toma control por primera vez. */
.u1-timeline__card[data-distance="0"] {
  transform: scale(1);
  opacity: 1;
}
.u1-timeline__card[data-distance="1"] {
  transform: scale(0.82);
  opacity: 0.65;
}
.u1-timeline__card[data-distance="2"] {
  transform: scale(0.65);
  opacity: 0.35;
}
.u1-timeline__card[data-distance="3"],
.u1-timeline__card[data-distance="4"],
.u1-timeline__card[data-distance="5"] {
  transform: scale(0.5);
  opacity: 0.1;
}

/* Cuando el sistema está ready, JS aplica transforms inline (style attribute) que
   ganan en specificity y sobreescriben los estados estáticos arriba. */

/* ── Card media ──────────────────────────────────────────────────────────── */

.u1-timeline__card-media {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--space-4, 16px);
  overflow: hidden;
  background: #f5f5f5;
}

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

.u1-timeline__card-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.u1-timeline__placeholder-svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Card text ───────────────────────────────────────────────────────────── */

.u1-timeline__card-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 400px;
  width: 100%;
  padding: var(--space-2, 8px);
  /* Dos grupos (Fermin 2026-10-09): el texto (titulo + subtitulo + descripcion, gap 10 adentro)
     y el boton opcional, separado 20. Un solo mecanismo por nivel. */
  gap: var(--u1-space-5, 20px);
  text-align: center;
}

/* Botones del hito en fila (mismo gap 12 que Introduction); si no entran, bajan */
.u1-timeline__card-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

.u1-timeline__card-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: var(--space-2-5, 10px);
}

.u1-timeline__card-title-row {
  display: flex;
  gap: var(--space-2-5, 10px);
  align-items: flex-start;
  justify-content: center;
  white-space: nowrap;
}

.u1-timeline__card-title {
  margin: 0 !important;
  color: var(--Primitives-text-text-primary, #0d0d0d);
}

.u1-timeline__card-year {
  white-space: nowrap;
}

.u1-timeline__card-subtitle {
  margin: 0;
}

.u1-timeline__card-desc {
  margin: 0;
  text-align: center;
  min-width: 100%;
}

/* ── Edge fade gradients (desktop only) ──────────────────────────────────── */

.u1-timeline__fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 140px;
  pointer-events: none;
  z-index: 2;
}

.u1-timeline__fade--left {
  left: 0;
  background: linear-gradient(to right, #ffffff 0%, rgba(255,255,255,0) 100%);
}

.u1-timeline__fade--right {
  right: 0;
  background: linear-gradient(to left, #ffffff 0%, rgba(255,255,255,0) 100%);
}

/* ── Timer dock (sticky bottom) ──────────────────────────────────────────── */

.u1-timeline__timer-dock {
  /* Figma Online-store-2 / Timer (376:6356) — MCP get_design_context */
  --u1-tl-timer-w-desktop: max-content;
  --u1-tl-timer-w-mobile-max: 354px;
  --u1-tl-timer-mobile-gutter: 24px;

  position: sticky;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  z-index: 10;
  pointer-events: none;
}

/* ── Timer bar — Figma 376:6356 (Timer): blur 60, r20, sombra 0 8 40 /12 ─ */

.u1-timeline__timer {
  position: relative; /* reglas absolute pegadas al borde del nav */
  display: flex;
  flex-direction: column;
  width: var(--u1-tl-timer-w-desktop, max-content);
  max-width: min(380px, calc(100vw - 48px));
  border-radius: var(--space-5, 20px);
  padding: 0;
  box-sizing: border-box;
  /* Borde + vidrio exterior (sin capas Fill del inner) */
  background:
    linear-gradient(var(--u1-glass-fill-lg-1), var(--u1-glass-fill-lg-1)),
    linear-gradient(var(--u1-glass-fill-lg-2), var(--u1-glass-fill-lg-2));
  border: 1px solid var(--u1-glass-stroke, rgba(255, 255, 255, 0.2));
  backdrop-filter: blur(60px) saturate(180%);
  -webkit-backdrop-filter: blur(60px) saturate(180%);
  box-shadow: 0 8px 40px 0 rgba(0, 0, 0, 0.12),
    var(--u1-glass-inner-shadow-lg, inset 0 0 20px 0 rgba(255, 255, 255, 0.3));
  pointer-events: auto;
  overflow: hidden;

  transform: scale(0);
  opacity: 0;
  transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 0.3s ease;
}

.u1-timeline__timer.color-scheme-2 {
  background:
    linear-gradient(var(--u1-glass-fill-lg-1), var(--u1-glass-fill-lg-1)),
    linear-gradient(var(--u1-glass-fill-lg-2), var(--u1-glass-fill-lg-2));
}

.u1-timeline--timer-visible .u1-timeline__timer {
  transform: scale(1);
  opacity: 1;
}

/* ── Timer inner: padding pedido 10px (reglas van absolute en el nav, no suman aquí) ─ */

.u1-timeline__timer-inner {
  position: relative;
  z-index: 1;
  padding: 10px var(--space-1, 4px);
  border-radius: inherit;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  overflow: hidden;
}

/* Esquema claro: sin capa #262626/color-dodge (apagaba el timer); el vidrio sale del nav + sombra interior arriba. */
.u1-timeline__timer.color-scheme-2 .u1-timeline__timer-inner {
  isolation: isolate;
}

.u1-timeline__timer.color-scheme-2 .u1-timeline__timer-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #262626;
  mix-blend-mode: color-dodge;
  pointer-events: none;
  z-index: 0;
}

.u1-timeline__timer.color-scheme-2 .u1-timeline__timer-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(90deg, rgba(250, 250, 250, 0.7) 0%, rgba(250, 250, 250, 0.7) 100%);
  box-shadow: inset 0 0 20px 0 rgba(255, 255, 255, 0.3);
}

.u1-timeline__timer.color-scheme-2 .u1-timeline__timer-ruler {
  z-index: 3;
}

.u1-timeline__timer.color-scheme-2 .u1-timeline__timer-years {
  position: relative;
  z-index: 1;
}

/* ── Reglas: pegadas al borde superior/inferior del nav (no al padding del inner).
   Arriba: desde y=0 hacia abajo (6px / 12px). Abajo: desde borde inferior hacia arriba. ─ */

.u1-timeline__timer-ruler {
  position: absolute;
  left: 0;
  width: 100%;
  height: 16px;
  display: block;
  pointer-events: none;
  z-index: 2;
}

.u1-timeline__timer-ruler--top {
  top: 0;
}

.u1-timeline__timer-ruler--bottom {
  bottom: 0;
}

.u1-timeline__timer-years {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-1, 4px);
  width: 100%;
  /* Sin transition: el JS mueve la fila continuamente con el scroll. Una transition
     CSS aquí causaría saltitos visibles cuando el scroll dispara cambios consecutivos. */
  will-change: transform;
}

/* ── Year slot (Figma: 62×35, opacidad contenedor por distancia) ─ */

.u1-timeline__timer-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 35px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
  /* Antes 500ms: con scroll rápido se encadenaban transiciones de opacity entre slots
     (cada cambio de data-distance dispara una nueva), creando wobble visual. 220ms es
     suficientemente suave pero termina antes del próximo cambio. */
  transition: opacity 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.u1-timeline__timer-slot[data-distance="0"] {
  opacity: 1;
}

.u1-timeline__timer-slot[data-distance="1"] {
  opacity: 0.7;
}

.u1-timeline__timer-slot[data-distance="2"],
.u1-timeline__timer-slot[data-distance="3"] {
  opacity: 0.4;
}

.u1-timeline__timer-slot[data-distance="hidden"] {
  opacity: 0;
  pointer-events: none;
}

/* type/body-s + type/body-s-bold en activo (Figma) */
.u1-timeline__timer-label {
  font-family: var(--body-s-font-family, var(--u1-font-family-text));
  font-weight: var(--weight-body, var(--u1-text-body-fw, 450));
  font-size: var(--body-s-font-size, 14px);
  line-height: var(--body-s-line-height, 21px);
  letter-spacing: var(--body-s-letter-spacing, 0.2px);
  color: rgba(13, 13, 13, 0.56);
  white-space: nowrap;
  /* 220ms: igual razón que .u1-timeline__timer-slot — evita encadenar transiciones
     de color/font-weight con scroll rápido entre hitos. */
  transition: color 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    font-weight 0.22s ease;
}

.u1-timeline__timer-slot[data-distance="0"] .u1-timeline__timer-label {
  font-weight: 530;
  color: var(--Primitives-text-text-primary, #0d0d0d);
}

.u1-timeline__timer-slot[data-distance="2"] .u1-timeline__timer-label,
.u1-timeline__timer-slot[data-distance="3"] .u1-timeline__timer-label {
  font-weight: var(--weight-body, 450);
  color: rgba(13, 13, 13, 0.37);
}

.u1-timeline__timer.color-scheme-2 .u1-timeline__timer-label {
  color: rgba(255, 255, 255, 0.56);
}

.u1-timeline__timer.color-scheme-2 .u1-timeline__timer-slot[data-distance="0"] .u1-timeline__timer-label {
  color: rgba(255, 255, 255, 0.95);
}

.u1-timeline__timer.color-scheme-2 .u1-timeline__timer-slot[data-distance="2"] .u1-timeline__timer-label,
.u1-timeline__timer.color-scheme-2 .u1-timeline__timer-slot[data-distance="3"] .u1-timeline__timer-label {
  color: rgba(255, 255, 255, 0.37);
}

/* ── Responsive: Tablet ──────────────────────────────────────────────────── */

@media screen and (max-width: 1023px) {
  .u1-timeline__heading-wrap {
    max-width: 600px;
    /* Menos aire título → cards (antes space-10 + inner space-6 se sentía enorme en tablet/móvil) */
    padding-bottom: var(--space-6, 24px);
  }

  /* Aire fijo para el timer dock — sin toggle de clase (mismo layout todo el scroll). */
  .u1-timeline__scroll-inner {
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }

  .u1-timeline__timer-dock {
    bottom: 12px;
  }

  .u1-timeline__card {
    width: 100%;
    max-width: 608px;
  }

  .u1-timeline__fade {
    display: none;
  }
}

/* ── Responsive: Mobile ──────────────────────────────────────────────────── */

@media screen and (max-width: 749px) {
  .u1-timeline {
    padding-top: var(--u1-tl-pt-m);
    padding-bottom: var(--u1-tl-pb-m);
  }

  .u1-timeline__heading-wrap {
    max-width: 100%;
    padding-bottom: 32px;
  }

  /* Timer dock fixed en mobile: garantiza que esté siempre al fondo del viewport
     mientras la sección esté visible. Se ocluye via la animación scale(0)→scale(1)
     controlada por la clase u1-timeline--timer-visible (toggled por el IO). */
  .u1-timeline__timer-dock {
    position: fixed;
    bottom: calc(30px + env(safe-area-inset-bottom, 0px));
  }

  /* El dock fijo solo debe verse cuando la sección REALMENTE ocupa la zona
     vertical donde vive el dock (últimos ~12% del viewport, donde está el
     timer + sus 30px de bottom). Si no la ocupa, significa que el dock se
     estaría solapando con otra section del page, así que lo escondemos.
     La clase u1-timeline--dock-pinned la toggle un IntersectionObserver
     con rootMargin acotado a la franja del dock. */
  .u1-timeline:not(.u1-timeline--dock-pinned) .u1-timeline__timer-dock {
    visibility: hidden;
    pointer-events: none;
  }

  .u1-timeline__card {
    width: 88vw;
    max-width: 354px;
  }

  .u1-timeline__card-media {
    aspect-ratio: 1 / 1;
  }

  .u1-timeline__timer {
    min-width: 0;
    max-width: min(
      var(--u1-tl-timer-w-mobile-max, 354px),
      calc(100vw - (2 * var(--u1-tl-timer-mobile-gutter, 24px)))
    );
    width: max-content;
    margin-left: var(--u1-tl-timer-mobile-gutter, 24px);
    margin-right: var(--u1-tl-timer-mobile-gutter, 24px);
  }

  /* ─── Mobile carousel mode: scroll-driven OFF, swipe horizontal con scroll-snap ───
     En mobile el JS hace early-return y NO aplica transform/height al outer ni al
     track. Estas reglas convierten el track en un carrusel nativo con snap. */
  .u1-timeline__scroll-outer {
    height: auto !important;
  }

  .u1-timeline__scroll-inner {
    position: static !important;
    height: auto !important;
    overflow: visible !important;
    align-items: stretch !important;
    padding-top: 0 !important;
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px));
  }

  .u1-timeline__track {
    width: 100% !important;
    max-width: 100%;
    transform: none !important;
    transition: none !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    /* Padding lateral = (100vw - card width) / 2 → para que la primera/última puedan centrarse.
       card = 88vw → padding = 6vw a cada lado. */
    padding-left: 6vw;
    padding-right: 6vw;
    scroll-padding-left: 6vw;
    scroll-padding-right: 6vw;
    gap: 16px;
    align-items: stretch;
    /* will-change scroll-position en lugar de transform: hint para el browser de smooth scrolling */
    will-change: scroll-position;
  }
  .u1-timeline__track::-webkit-scrollbar { display: none; }

  .u1-timeline__card {
    scroll-snap-align: center;
    scroll-snap-stop: always;
    /* En mobile no escalamos ni atenuamos por opacidad: todas las cards siempre
       al 100%. La card activa la define el carrusel por posición (snap), no
       por destacarla visualmente. */
    transform: none !important;
    opacity: 1 !important;
    /* Pegar todo al top: como el track usa align-items: stretch, las cards toman
       la altura del más alto. Con justify-content: center (default heredado),
       descripciones de distinto largo hacían que las imágenes quedaran a alturas
       Y distintas. Con flex-start todas las imágenes arrancan a la misma Y. */
    justify-content: flex-start !important;
  }
}
/* END_SECTION:u1-timeline */

/* CSS from block stylesheet tags */
/* START_BLOCK:_accordion-row (INDEX:145) */
.details__icon {
    height: auto;
    margin-inline-end: var(--margin-xs);
  }
/* END_BLOCK:_accordion-row */

/* START_BLOCK:_announcement (INDEX:146) */
.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;
  }

  /* Punto LIVE opcional (mismo patron que el Hero Discovery): 8px + anillo que late */
  .announcement-bar__text--live {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--u1-space-2, 8px);
  }
  .u1-ann-live-dot {
    position: relative;
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--u1-ann-live-dot, #d95255);
  }
  .u1-ann-live-dot::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--u1-ann-live-dot, #d95255);
    opacity: 0.6;
    animation: u1-ann-live-dot-pulse 2s ease-out infinite;
  }
  @keyframes u1-ann-live-dot-pulse {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(3); opacity: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .u1-ann-live-dot::after { animation: none; opacity: 0; }
  }
/* END_BLOCK:_announcement */

/* START_BLOCK:_blog-post-card (INDEX:147) */
.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 .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;
  }

  .blog-post-card__content a:hover,
  .blog-post-card__content a:hover [style*='--color: var(--color-primary)'] {
    color: var(--color-primary-hover);
  }

  .blog-post-card__content a:hover [style*='--color: var(--color-foreground-heading)'] {
    color: rgb(var(--color-foreground-heading-rgb) / var(--opacity-subdued-text));
  }

  .blog-post-card__content a:hover [style*='--color: var(--color-foreground)'] {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }
/* END_BLOCK:_blog-post-card */

/* START_BLOCK:_blog-post-content (INDEX:148) */
.blog-post-content {
    max-width: var(--normal-content-width);
    margin: 0 auto;
  }
/* END_BLOCK:_blog-post-content */

/* START_BLOCK:_blog-post-description (INDEX:149) */
.blog-post-card__content-text a {
    color: var(--color-primary);
  }

  .custom-color,
  .custom-color > :is(h1, h2, h3, h4, h5, h6, p, *) {
    color: var(--color);
  }
/* END_BLOCK:_blog-post-description */

/* START_BLOCK:_blog-post-featured-image (INDEX:150) */
.blog-post-featured-image {
    --width: 100%;
    --custom-width: 100%;

    display: block;
    position: relative;
    width: var(--width);
  }

  .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:151) */
.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:152) */
.blog-post-details {
    display: flex;
    gap: var(--gap-sm);
    font-size: var(--font-paragraph-size);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    white-space: nowrap;
    flex-wrap: wrap;
  }

  .blog-post-details > span {
    text-overflow: clip;
    overflow: hidden;
  }
/* END_BLOCK:_blog-post-info-text */

/* START_BLOCK:_blog-post-related (INDEX:153) */
/* ==============================================
   BLOG POST RELATED – "Keep reading" carousel
   Desktop: 3 cols, px-60px, gap-24px
   Mobile:  horizontal scroll, cards 188px, px-24px
   ============================================== */

.bpr-wrap {
  width: 100%;
  padding-inline: 60px;
  box-sizing: border-box;
}

.bpr-inner {
  max-width: 1440px;
  margin-inline: auto;
  padding-block: 32px 32px;
}

/* --------------------------------------------------
   HEADER
   -------------------------------------------------- */
.bpr-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 32px;
}

.bpr-header__title {
  margin: 0;
  color: var(--color-foreground);
}

.bpr-header__link {
  display: flex;
  align-items: center;
  height: 40px;
  color: var(--color-foreground);
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.bpr-header__link:hover {
  opacity: 0.6;
}

/* --------------------------------------------------
   CARDS CONTAINER
   Desktop: flex row, 3 equal cols
   -------------------------------------------------- */
.bpr-cards {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

/* --------------------------------------------------
   CARD
   -------------------------------------------------- */
.bpr-card {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 32px;
  text-decoration: none;
  color: inherit;
}

.bpr-card__image-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  overflow: hidden;
  background: rgb(var(--color-foreground-rgb) / 0.08);
  flex-shrink: 0;
}

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

.bpr-card__image-placeholder {
  width: 100%;
  height: 100%;
  background: rgb(var(--color-foreground-rgb) / 0.08);
}

.bpr-card__body {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.bpr-card__title {
  margin: 0;
  padding-bottom: 12px;
  color: var(--color-foreground);
}

.bpr-card__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--color-foreground);
  font-weight: var(--text-body-fw, 450);
}

.bpr-card__topic {
  white-space: nowrap;
  flex-shrink: 0;
}

.bpr-card__date {
  color: rgb(var(--color-foreground-rgb) / 0.55);
}

/* --------------------------------------------------
   MOBILE ≤ 749px → horizontal scroll
   -------------------------------------------------- */
@media screen and (max-width: 749px) {

  .bpr-wrap {
    padding-inline: 0;
  }

  .bpr-inner {
    padding-inline: 0;
  }

  .bpr-header {
    padding-inline: 24px;
  }

  .bpr-cards {
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-inline: 24px;
    padding-bottom: 8px;
    /* Hide scrollbar */
    scrollbar-width: none;
  }

  .bpr-cards::-webkit-scrollbar {
    display: none;
  }

  .bpr-card {
    flex: 0 0 188px;
    width: 188px;
    min-width: 188px;
    scroll-snap-align: start;
  }

}
/* END_BLOCK:_blog-post-related */

/* START_BLOCK:_card (INDEX:154) */
.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:155) */
.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:156) */
.cart-page__title + .cart-page__items {
    margin-block-start: var(--margin-lg);
  }
/* END_BLOCK:_cart-products */

/* START_BLOCK:_cart-summary (INDEX:157) */
.cart-summary__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-2xl);
    container-type: inline-size;
    padding: 0;
    position: sticky;
    top: 0;
    align-self: start;

    @media screen and (min-width: 750px) {
      padding: var(--padding-5xl);
      grid-row: 1 / -1;
    }
  }

  body:has(> #header-group header-component[sticky]) .cart-summary__inner {
    top: var(--header-height, 0);
  }

  .cart-summary {
    @media screen and (max-width: 749px) {
      border: none;
    }

    @media screen and (min-width: 750px) {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: 1 / -1;
    }
  }

  .cart-summary--extend {
    height: 100%;

    @media screen and (min-width: 750px) {
      border-right: none;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
  }

  /* If extend is on, only include top and bottom borders when the border radius is 0. */
  .cart-summary--extend:not(.has-border-radius) {
    @media screen and (min-width: 750px) {
      border-top: none;
      border-bottom: none;
    }
  }

  .cart-summary--extend .cart-summary__inner {
    height: 100%;
    padding: var(--padding-md) 0 var(--padding-4xl);

    @media screen and (min-width: 750px) {
      grid-row: 2 / -1;
      padding-inline: var(--page-margin);
      width: var(--sidebar-width);
    }
  }

  /* If extend is off, apply the border radius to the inner summary container */
  .cart-summary__inner.has-border-radius {
    border-radius: var(--border-radius);
  }

  @media screen and (max-width: 749px) {
    .inherit-parent-scheme--mobile {
      --color-background: inherit;
      --color-background-rgb: inherit;
      --color-foreground: inherit;
      --color-foreground-rgb: inherit;
      --color-primary: inherit;
      --color-primary-rgb: inherit;
      --color-primary-hover: inherit;
      --color-primary-hover-rgb: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;
      --color-shadow: inherit;
      --color-shadow-rgb: inherit;
      --color-foreground-heading: inherit;
      --color-primary-button-text: inherit;
      --color-primary-button-background: inherit;
      --color-primary-button-border: inherit;
      --color-primary-button-hover-text: inherit;
      --color-primary-button-hover-background: inherit;
      --color-primary-button-hover-border: inherit;
      --color-secondary-button-text: inherit;
      --color-secondary-button-background: inherit;
      --color-secondary-button-border: inherit;
      --color-secondary-button-hover-text: inherit;
      --color-secondary-button-hover-background: inherit;
      --color-secondary-button-hover-border: inherit;
      --color-input-text: inherit;
      --color-input-text-rgb: inherit;
      --color-input-background: inherit;
    }
  }
/* END_BLOCK:_cart-summary */

/* START_BLOCK:_cart-title (INDEX:158) */
.cart-title h1 {
    margin-block-end: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--gap-sm);
  }

  .cart-title .cart-bubble {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--style-border-radius-buttons-primary);
    aspect-ratio: auto;
    padding: var(--cart-padding);
  }

  .cart-title .cart-bubble[data-maintain-ratio] {
    width: min(1lh, 26px);
    height: min(1lh, 26px);
  }

  .cart-title .cart-bubble .cart-bubble__background {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
  }

  .cart-title .cart-bubble__text {
    color: var(--color-foreground);
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
    font-size: clamp(var(--font-size--3xs), 0.75em, var(--font-size--xs));
  }
/* END_BLOCK:_cart-title */

/* START_BLOCK:_collection-image (INDEX:161) */
.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:163) */
.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:167) */
.featured-blog-posts-card {
    text-align: var(--text-align);
  }

  .featured-blog-posts-card__inner {
    gap: var(--gap);
  }

  .featured-blog-posts-card .featured-blog-posts-card__content {
    gap: var(--content-gap);
  }

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

  /* Editorial layout */
  .resource-list:not(.hidden--desktop) .blog-post-card--flexible-aspect-ratio {
    .featured-blog-posts-card__content {
      --flex-wrap: nowrap;
    }
  }

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

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

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

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

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

/* START_BLOCK:_featured-blog-posts-image (INDEX:168) */
.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:170) */
.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:173) */
.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:174) */
.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:175) */
.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:176) */
.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:not([slot='overflow'])::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[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 {
    background-color: transparent;
    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.color-scheme-matches-parent,
    .overflow-menu.color-scheme-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;
  }
/* END_BLOCK:_header-menu */

/* START_BLOCK:_image (INDEX:179) */
.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:183) */
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:188) */
/* 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:193) */
.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:194) */
.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:195) */
.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:_u1-carousel-product-card (INDEX:198) */
.u1-carousel__product-card {
  flex-shrink: 0;
  scroll-snap-align: start;
  box-sizing: border-box;
  width: 440px;
  max-width: calc(100vw - 48px);
  position: relative;
}
/* ── Minimal: card más angosta (solo foto + título + subtítulo) ── */
.u1-carousel__product-card--minimal {
  width: 320px;
}
.u1-carousel__product-card--minimal .u1-carousel__product-card-info {
  padding: 16px 20px 28px;
}
/* Imagen más grande: menos padding alrededor que el layout default (40px) */
.u1-carousel__product-card--minimal .u1-carousel__product-card-media {
  padding: 20px 20px 8px;
}
.u1-carousel__product-card--minimal .u1-carousel__product-card-img--hover {
  inset: 20px 20px 8px;
  width: calc(100% - 40px);
  height: calc(100% - 28px);
}
@media screen and (max-width: 749px) {
  .u1-carousel--mobile-l .u1-carousel__product-card--minimal,
  .u1-carousel--mobile-s .u1-carousel__product-card--minimal {
    width: 240px;
    max-width: calc(100vw - 48px);
  }
}

.u1-carousel__product-card-corner-badge {
  position: absolute;
  z-index: 3;
  width: auto;
  max-width: 60%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.u1-carousel__product-card:hover .u1-carousel__product-card-corner-badge {
  opacity: 1;
}

@media screen and (max-width: 749px) {
  /* Peek: la card deja asomar la siguiente (affordance de scroll, 2026-09-09).
     :not(--minimal) para no pisar el 240px de la variante minimal */
  .u1-carousel--mobile-l .u1-carousel__product-card:not(.u1-carousel__product-card--minimal) {
    width: 84vw;
    max-width: calc(100vw - 48px);
  }
  .u1-carousel--mobile-s .u1-carousel__product-card:not(.u1-carousel__product-card--minimal) {
    width: 280px;
    max-width: calc(100vw - 48px);
  }
  /* Card mas compacta en mobile: menos aire alrededor de la foto y del texto */
  .u1-carousel__product-card:not(.u1-carousel__product-card--minimal):not(.u1-carousel__product-card--compact) .u1-carousel__product-card-media {
    padding: 24px 24px 8px;
  }
  .u1-carousel__product-card:not(.u1-carousel__product-card--minimal):not(.u1-carousel__product-card--compact) .u1-carousel__product-card-img--hover {
    inset: 24px 24px 8px;
    width: calc(100% - 48px);
    height: calc(100% - 32px);
  }
  .u1-carousel__product-card:not(.u1-carousel__product-card--minimal) .u1-carousel__product-card-info {
    padding: 12px 16px 28px;
  }
  .u1-carousel__product-card--showcase .u1-carousel__product-card-info {
    padding-bottom: 12px;
  }
  .u1-carousel__product-card--showcase .u1-carousel__product-card-footer {
    padding: 0 16px 24px;
  }
}

.u1-carousel__product-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
  /* --u1-pc-bg: superficie elegida en el block (scheme + Fondo de la card); sin eleccion = blanco */
  /* Default automatico: --bg-elevated del scheme (blanco en claro, #303030 en dark) */
  background: var(--u1-pc-bg, var(--bg-elevated, #fff));
  border: 1px solid var(--stroke-primary, rgba(13, 13, 13, 0.12));
  border-radius: var(--radius-l, 16px);
  overflow: hidden;
  transition: background 0.3s ease;
}

.u1-carousel__product-card-link:hover {
  /* Hover relativo al scheme: 4% del color de texto sobre el fondo de la card (light: blanco -> #f5f5f5, dark: #303030 -> #383838) */
  background: var(--u1-pc-bg-hover, color-mix(in srgb, var(--bg-elevated, #fff) 96%, var(--text-primary, #000)));
}
/* Cards con foto de hover (bundle-*-on.jpg, fondo #F9F9F9 pegado en el archivo): el hover
   toma ese mismo gris para que la foto no dibuje un rectangulo sobre la card. Solo en
   scheme claro y cuando el block no eligio un fondo propio. */
.u1-carousel__product-card-link:has(.u1-carousel__product-card-img--hover):not([style*="--u1-pc-bg"]):where(:not(.color-scheme-2 *)):hover {
  background: var(--neutral-50, #F9F9F9);
}

.u1-carousel__product-card-media {
  position: relative;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 40px 40px 12px;
  box-sizing: border-box;
  overflow: hidden;
}

.u1-carousel__product-card-img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

.u1-carousel__product-card-img--default {
  position: relative;
  z-index: 1;
  transition: opacity 0.4s ease;
}

.u1-carousel__product-card-img--hover {
  position: absolute;
  inset: 40px 40px 12px;
  width: calc(100% - 80px);
  height: calc(100% - 52px);
  object-fit: contain;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.u1-carousel__product-card-link:hover .u1-carousel__product-card-img--hover {
  opacity: 1;
}

.u1-carousel__product-card-placeholder {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary, #f5f5f5);
  border-radius: var(--radius-m, 8px);
}

.u1-carousel__product-card-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 16px 16px 40px;
}

.u1-carousel__product-card-badge-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}

.u1-carousel__product-card-badge {
  font-weight: 600;
}

.u1-carousel__product-card-title {
  margin: 0;
}

/* Titulo + badge de texto: mismo patron y chip que las bundle cards del PDP
   (.u1-pdp-bundle-card__name-badge) y Collection grid (.u1-collection-grid__badge) */
.u1-carousel__product-card-name-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  min-width: 0;
  row-gap: 4px;
}
.u1-carousel__product-card--compact .u1-carousel__product-card-name-wrap {
  justify-content: flex-start;
}
.u1-carousel__product-card-name-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  padding: 4px 5px;
  border-radius: 6px;
  font-family: var(--u1-font-family, inherit);
  font-weight: 500;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.22px;
  white-space: nowrap;
  flex-shrink: 0;
  background: var(--neutral-950, #0d0d0d);
  color: #fff;
}
/* Codigo de color por texto (clase = texto handleizado). Default: negro (Best Savings) */
.u1-carousel__product-card-name-badge--most-popular {
  background: var(--neutral-200, #e8e8e8);
  color: var(--text-primary, #0d0d0d);
}
.u1-carousel__product-card-name-badge--trending {
  background: var(--neutral-700, #5d5d5d);
  color: #fff;
}

.u1-carousel__product-card-subtitle {
  margin: 0;
}

.u1-carousel__product-card-cta {
  margin-top: 8px;
}

/* ── HSA/FSA badge (estático, imita Truemed) ─────────────────────── */
.u1-carousel__product-card-hsa {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 24px;
  /* Slot reservado: la misma altura haya o no badge → el CTA queda alineado entre cards */
  min-height: 16px;
}
.u1-hsa-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.u1-hsa-badge__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: inline-flex;
}
.u1-hsa-badge__icon svg,
.u1-hsa-badge__icon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.u1-hsa-badge__text {
  color: var(--text-secondary, #525252);
}

/* ── Promo layout ────────────────────────────────────────────────── */

.u1-carousel__product-card--promo .u1-carousel__product-card-link {
  justify-content: space-between;
}

.u1-carousel__product-card--promo .u1-carousel__product-card-promo-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  padding: 40px 24px 0;
}

.u1-carousel__product-card--promo .u1-carousel__product-card-media {
  padding: 40px 40px 12px;
}

.u1-carousel__product-card--promo .u1-carousel__product-card-promo-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 24px 32px;
}

.u1-carousel__product-card-price-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.u1-carousel__product-card-price-compare {
  text-decoration: line-through;
  color: var(--text-secondary);
}

.u1-carousel__product-card-price-final {
  color: var(--text-primary);
}

.u1-carousel__product-card-discount {
  font-weight: 600;
}

.u1-carousel__product-card--promo .u1-carousel__product-card-cta {
  margin-top: 0;
  flex-shrink: 0;
}

/* ── Showcase layout (image → rating → title → subtitle → dual CTA) ── */
.u1-carousel__product-card--showcase .u1-carousel__product-card-clickable {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.u1-carousel__product-card--showcase .u1-carousel__product-card-info {
  padding-bottom: 16px;
}
.u1-carousel__product-card-rating {
  display: flex;
  justify-content: center;
}
.u1-carousel__product-card-price {
  margin: 0;
}
.u1-carousel__product-card-price-values {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
/* Description arriba, precio abajo: SIEMPRE dos lineas (pedido 2026-08-28;
   antes iban inline con divisor | y el wrap dejaba la barrita huerfana) */
.u1-carousel__product-card-subrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.u1-carousel__product-card-subrow > p {
  margin: 0;
}
.u1-carousel__product-card-subrow > *:not(:first-child) {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
/* Loox rating element: yellow stars, stars only (hide score/caption text) */
.u1-carousel__product-card--showcase .u1-hero-caption {
  --u1-hero-caption-fill: var(--u1-card-star-color, #FFB800);
  --u1-hero-caption-empty: #e2e2e2;
}
.u1-carousel__product-card--showcase .u1-hero-caption__text {
  display: none;
}
.u1-carousel__product-card-cta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 0;
}
/* Footer pineado al fondo de la card → CTAs alineados entre todas las cards (stretch) */
.u1-carousel__product-card--showcase .u1-carousel__product-card-footer {
  margin-top: auto;
  padding: 0 16px 32px;
}

/* ── Compact layout (rating + icono HSA → titulo → subtitulo → foto → precio + CTA).
   Proporcion de Figma: 336 x ~490, padding 24, gap 8 ── */
.u1-carousel__product-card--compact {
  width: 420px;
  /* Proporcion fija de Figma (336 x 498), sea cual sea el ancho (desktop 420 x 623). La foto absorbe el alto sobrante */
  aspect-ratio: 336 / 498;
  align-self: flex-start;
}
.u1-carousel__product-card--compact .u1-carousel__product-card-link {
  border-radius: var(--radius-m, 8px);
  overflow: visible; /* el tooltip del icono HSA sale por arriba del borde */
}
.u1-carousel__product-card--compact .u1-carousel__product-card-clickable {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  text-decoration: none;
  color: inherit;
}
.u1-carousel__product-card--compact .u1-carousel__product-card-compact-header {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  text-align: left;
  padding: 24px 24px 0;
}
.u1-carousel__product-card--compact .u1-carousel__product-card-compact-text {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.u1-carousel__product-card--compact .u1-carousel__product-card-rating {
  display: flex;
}
/* Subtitulo: corta antes para que las dos lineas queden parejas (Figma corta en ~288px) */
.u1-carousel__product-card--compact .u1-carousel__product-card-subtitle {
  max-width: 250px;
}
.u1-carousel__product-card--compact .u1-hero-caption {
  --u1-hero-caption-fill: var(--u1-card-star-color, #FFB800);
  --u1-hero-caption-empty: #e2e2e2;
}
.u1-carousel__product-card--compact .u1-hero-caption__text {
  display: none;
}
.u1-carousel__product-card--compact .u1-carousel__product-card-compact-hsa {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  outline: none;
}
/* Tooltip del icono HSA/FSA (mismo estilo que el del color switcher): abajo, centrado, solo hover/focus */
.u1-carousel__product-card--compact .u1-carousel__product-card-compact-tip {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  transform: translateY(2px);
  background: var(--bg, #ffffff);
  color: var(--text-secondary, rgba(13, 13, 13, 0.72));
  border-radius: 8px;
  padding: 6px 7px;
  font-family: var(--u1-font-family);
  font-size: var(--u1-body-xs-size);
  font-weight: var(--text-h-fw, 530);
  line-height: 1;
  letter-spacing: 0.26px;
  white-space: nowrap;
  border: 1px solid var(--stroke-tertiary, rgba(13, 13, 13, 0.08));
  opacity: 0;
  pointer-events: none;
  z-index: 5;
  transition: opacity 90ms ease, transform 120ms ease;
}
.u1-carousel__product-card--compact .u1-carousel__product-card-compact-hsa:hover .u1-carousel__product-card-compact-tip,
.u1-carousel__product-card--compact .u1-carousel__product-card-compact-hsa:focus-visible .u1-carousel__product-card-compact-tip {
  opacity: 1;
  transform: translateY(0);
}
.u1-carousel__product-card--compact .u1-carousel__product-card-compact-hsa .u1-hsa-badge__icon {
  width: 20px;
  height: 20px;
}
/* Foto: alto fijo 284px (Figma: 286x284, gaps de 8) para que todas las cards midan lo mismo */
.u1-carousel__product-card--compact .u1-carousel__product-card-media {
  padding: 8px 24px;
  flex: 1 1 auto;
  min-height: 0;
  align-items: center;
}
/* Default y hover ocupan exactamente el mismo box (contain): al pasar el mouse no hay
   salto de encuadre, y la default se apaga para que su fondo blanco no asome */
.u1-carousel__product-card--compact .u1-carousel__product-card-img--default,
.u1-carousel__product-card--compact .u1-carousel__product-card-img--hover {
  position: absolute;
  inset: 8px 24px;
  width: calc(100% - 48px);
  height: calc(100% - 16px);
  object-fit: contain;
  /* !important: image_tag escribe el punto focal de cada foto como object-position inline
     (48% vs 80% vertical entre default y hover) y eso desplazaba la escena al pasar el mouse */
  object-position: center !important;
}
/* Hover sobre toda la card = hover del boton (mismo token que usa el DS en u1.css) */
.u1-carousel__product-card--compact:hover .u1-btn.u1-btn--ui.u1-btn--ui-h-primary .u1-btn__inner {
  background: var(--interactive-bg-hover) !important;
}
/* Footer pineado al fondo: precio a la izquierda, CTA a la derecha, alineados abajo */
.u1-carousel__product-card--compact .u1-carousel__product-card-compact-footer {
  margin-top: auto;
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 24px 24px;
}
.u1-carousel__product-card--compact .u1-carousel__product-card-compact-price {
  padding-bottom: 4px;
}
.u1-carousel__product-card--compact .u1-carousel__product-card-compact-price > p {
  margin: 0;
}
/* Precio en text-h6 (tachado + final) y porcentaje en body-m color error.
   Clamps copiados de u1.css porque el snippet hereda el tamano del padre */
.u1-carousel__product-card--compact .u1-price-disc {
  align-items: baseline;
  gap: 4px;
  flex-wrap: wrap;
  font-size: clamp(1rem, calc(1rem + .125 * ((100vw - 23.4375rem) / 66.5625)), 1.125rem);
  line-height: clamp(1.25rem, calc(1.25rem + .235 * ((100vw - 23.4375rem) / 66.5625)), 1.485rem);
  font-weight: var(--text-h-fw);
}
.u1-carousel__product-card--compact .u1-price-disc__was {
  font-weight: var(--text-h-fw);
  color: #afafaf;
}
.u1-carousel__product-card--compact .u1-price-disc__save {
  margin-left: 0;
  font-size: var(--u1-body-m-size);
  line-height: 1.4;
  color: var(--text-error) !important;
}


/* ── Franja de promo arriba de la card (u1_pc_strip) ── */
.u1-carousel__product-card:has(> .u1-pc-strip) {
  display: flex;
  flex-direction: column;
}
/* Solo las cards con franja pierden el redondeo de arriba; las del espaciador lo conservan */
.u1-carousel__product-card:has(> .u1-pc-strip:not(.u1-pc-strip--spacer)) > .u1-carousel__product-card-link {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  /* La linea entre franja y card es el borde de arriba de la card, en el mismo azul de la franja */
  border-top-color: rgba(32, 142, 255, 0.18);
}
.u1-pc-strip {
  --u1-pc-strip-stroke: rgba(32, 142, 255, 0.18); /* azul Prime #208EFF al 18% (pedido de Fermin) */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 38px; /* 1 de borde + 8 + 21 (alto de linea body-s) + 8; fijo asi el espaciador mide igual */
  padding: 0 9px 0 14px;
  background: #E6F4FF;
  border: 1px solid var(--u1-pc-strip-stroke);
  border-bottom: 0;
  border-radius: var(--radius-m, 8px) var(--radius-m, 8px) 0 0;
  box-sizing: border-box;
}
.u1-pc-strip--spacer {
  visibility: hidden;
}
/* Card angosta (mobile, ~315px): sin "Ends in" para que el texto entre completo.
   Por ancho de la franja, no del viewport, asi funciona con cualquier tamaño de slide. */
.u1-pc-strip:not(.u1-pc-strip--spacer) {
  container-type: inline-size;
}
@container (max-width: 380px) {
  .u1-pc-strip__label {
    display: none;
  }
}
.u1-pc-strip__offer {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  color: #0073C0;
}
.u1-pc-strip__icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}
.u1-pc-strip__icon svg {
  width: 20px;
  height: 20px;
}
.u1-pc-strip__text {
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.u1-pc-strip__timer {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  color: #6A6A6A;
}
.u1-pc-strip__timer[data-u1-cd-pending] {
  visibility: hidden;
}
/* "Ends in" y numeros: misma tipografia que los eyebrows mono de las landings
   (u1-eyebrow--mono: IBM Plex Mono, mayusculas, tracking 0.14em) */
.u1-pc-strip__label {
  color: inherit;
}
.u1-pc-strip__boxes {
  display: flex;
  gap: 5px;
}
.u1-pc-strip__box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  /* +0.14em a la izquierda: compensa el tracking que queda despues del ultimo digito */
  padding: 0 4px 0 calc(4px + 0.14em);
  border-radius: 4px;
  background: rgba(52, 164, 255, 0.1);
  color: inherit;
}
/* END_BLOCK:_u1-carousel-product-card */

/* START_BLOCK:_u1-mc-column (INDEX:201) */
.u1-mc-col {
  display: flex;
  flex-direction: column;
  gap: var(--u1mc-gap, 16px);
  align-items: var(--u1mc-align, center);
  justify-content: var(--u1mc-vertical, flex-start);
  text-align: var(--u1mc-text-align, center);
  height: 100%;
  /* Llenar la columna estirada aunque Shopify envuelva el block en un wrapper flex. */
  flex: 1 1 auto;
  align-self: stretch;
  box-sizing: border-box;
}
.u1-mc-col > :last-child {
  margin-top: auto;
}
/* Alineacion de mobile: si la columna no define la suya, cae a la de desktop. */
@media (max-width: 767px) {
  .u1-mc-col {
    align-items: var(--u1mc-align-m, var(--u1mc-align, center));
    text-align: var(--u1mc-text-align-m, var(--u1mc-text-align, center));
  }
}
.u1-mc-col--mw {
  max-width: var(--u1mc-col-mw);
  margin-inline: auto;
}
/* Pisa el max-width que cada text/heading block setea via inline style. */
.u1-mc-col--tmw .text-block {
  --max-width: var(--u1mc-tmw) !important;
}
.u1-mc-col--tmw .text-block > * {
  max-inline-size: min(100%, var(--u1mc-tmw)) !important;
}
.u1-mc-col--bg {
  background: var(--bg-secondary, #f7f7f7);
  border-radius: 12px;
  padding: var(--u1mc-pad-top, 22px) 22px var(--u1mc-pad-bottom, 22px);
  overflow: hidden;
  align-items: center;
  justify-content: center;
}
/* En las cajas con fondo el contenido va centrado como grupo y el gap entre titulo
   y subtitulo tiene que ser IGUAL en todas, sin importar cuanto texto tenga cada
   una. El `margin-top: auto` de arriba pegaba el ultimo hijo al fondo: como todas
   las cajas miden lo mismo, la de menos texto quedaba con mas aire en el medio. */
.u1-mc-col--bg > :last-child {
  margin-top: 0;
}
@media (max-width: 767px) {
  .u1-mc-col--bg {
    padding: var(--u1mc-pad-top, 22px) 14px var(--u1mc-pad-bottom, 22px);
  }
}
/* END_BLOCK:_u1-mc-column */

/* START_BLOCK:_u1-mc-flipcard (INDEX:202) */
.u1-mc-flip {
  position: relative;
  width: 100%;
  aspect-ratio: var(--u1fc-ratio, 3/4);
  border-radius: var(--u1fc-radius, 12px);
  overflow: hidden;
  cursor: pointer;
  transform: scale(1);
  transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
  -webkit-tap-highlight-color: transparent;
}
.u1-mc-flip:hover {
  transform: scale(1.02);
}
.u1-mc-flip__front {
  position: absolute;
  inset: 0;
  /* Al cerrar reaparece al instante (delay 0); al abrir se apaga recien
     cuando el circulo ya cubrio (delay abajo), para que el antialiasing
     del borde redondeado no deje asomar un hilo de la foto. */
  transition: opacity 1ms linear;
}
.u1-mc-flip.is-open .u1-mc-flip__front {
  opacity: 0;
  transition-delay: 620ms;
}
.u1-mc-flip__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.u1-mc-flip__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 45%);
}
.u1-mc-flip__front-text {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  color: #ffffff;
}
.u1-mc-flip__eyebrow {
  margin: 0;
  opacity: 0.8;
}
.u1-mc-flip__title {
  margin: 0;
}
.u1-mc-flip__front-text .u1-mc-flip__eyebrow,
.u1-mc-flip__front-text .u1-mc-flip__title {
  color: #ffffff;
}

/* Dorso: se expande como un circulo que nace en el boton + (abajo a la derecha,
   centro del boton: 38px de cada borde) hasta cubrir la card entera. */
.u1-mc-flip__back {
  position: absolute;
  inset: 0;
  background: var(--u1fc-back-bg, var(--bg-secondary, #fafafa));
  clip-path: circle(0px at calc(100% - 38px) calc(100% - 38px));
  transition: clip-path 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.u1-mc-flip.is-open .u1-mc-flip__back {
  clip-path: circle(165% at calc(100% - 38px) calc(100% - 38px));
}
.u1-mc-flip__back-inner {
  position: absolute;
  inset: 0;
  padding: 24px 24px 72px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  overflow-y: auto;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 350ms ease, transform 350ms cubic-bezier(0.22, 1, 0.36, 1);
}
.u1-mc-flip.is-open .u1-mc-flip__back-inner {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 250ms;
}
.u1-mc-flip__back-text {
  margin-top: 16px;
}
.u1-mc-flip__back-text p {
  margin: 0 0 8px;
}

/* Boton +/- abajo a la derecha */
.u1-mc-flip__toggle {
  position: absolute;
  bottom: 16px;
  right: 16px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: #ffffff;
  color: var(--alpha-black-100, #0d0d0d);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(13, 13, 13, 0.06), 0 2px 8px rgba(13, 13, 13, 0.07);
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.u1-mc-flip__toggle:hover {
  transform: scale(1.08);
}
.u1-mc-flip__icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 250ms ease, transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}
.u1-mc-flip__icon svg {
  width: 20px;
  height: 20px;
}
.u1-mc-flip__icon--minus {
  opacity: 0;
  transform: rotate(-90deg);
}
.u1-mc-flip.is-open .u1-mc-flip__icon--plus {
  opacity: 0;
  transform: rotate(90deg);
}
.u1-mc-flip.is-open .u1-mc-flip__icon--minus {
  opacity: 1;
  transform: rotate(0deg);
}

@media (prefers-reduced-motion: reduce) {
  .u1-mc-flip,
  .u1-mc-flip__back,
  .u1-mc-flip__back-inner,
  .u1-mc-flip__icon {
    transition: none;
  }
  .u1-mc-flip:hover {
    transform: none;
  }
}
/* END_BLOCK:_u1-mc-flipcard */

/* START_BLOCK:accordion (INDEX:204) */
.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);
  }
/* END_BLOCK:accordion */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  [data-orientation='vertical'] .cs-slider__handle {
    left: 50%;
    top: calc((100 - var(--compare)) * 1%);
    transform: translate(-50%, -50%) rotate(90deg);
  }

  /* Text Labels */
  .comparison-slider__text {
    position: absolute;
    padding: var(--padding-xs);
    pointer-events: none;
  }

  .comparison-slider__text--with-bg {
    background: var(--text-background-color);
    border-radius: var(--text-corner-radius);
  }

  /* Horizontal: before/after control inline (left/right), position controls block (top/bottom) */
  [data-orientation='horizontal'] .comparison-slider__text--before {
    inset-inline-start: var(--padding-sm);
  }

  [data-orientation='horizontal'] .comparison-slider__text--after {
    inset-inline-end: var(--padding-sm);
  }

  [data-orientation='horizontal'][data-text-position='start'] .comparison-slider__text {
    inset-block-start: var(--padding-sm);
  }

  [data-orientation='horizontal'][data-text-position='end'] .comparison-slider__text {
    inset-block-end: var(--padding-sm);
  }

  /* Vertical: before/after control block (top/bottom), position controls inline (left/right) */
  [data-orientation='vertical'] .comparison-slider__text--before {
    inset-block-start: var(--padding-sm);
  }

  [data-orientation='vertical'] .comparison-slider__text--after {
    inset-block-end: var(--padding-sm);
  }

  [data-orientation='vertical'][data-text-position='start'] .comparison-slider__text {
    inset-inline-start: var(--padding-sm);
  }

  [data-orientation='vertical'][data-text-position='end'] .comparison-slider__text {
    inset-inline-end: var(--padding-sm);
  }
/* END_BLOCK:comparison-slider */

/* START_BLOCK:contact-form-submit-button (INDEX:211) */
.submit-button {
    min-width: max-content;
  }
/* END_BLOCK:contact-form-submit-button */

/* START_BLOCK:contact-form (INDEX:212) */
.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:email-signup (INDEX:214) */
.email-signup-block {
    --arrow-button-size: 58px;
    --arrow-button-size-integrated: 42px;
    --arrow-button-size-small: 20px;
    --arrow-icon-size: 32px;
    --arrow-icon-size-small: 24px;

    min-width: fit-content;

    @media screen and (max-width: 749px) {
      width: 100%;
      min-width: unset;
    }
  }

  .email-signup__heading {
    padding-block: var(--padding-sm);
  }

  .email-signup__form {
    display: flex;
    flex-direction: column;
  }

  .email-signup__input-group {
    display: flex;
    align-items: stretch;
    background-color: transparent;
  }

  .email-signup__input-group:not(.email-signup__input-group--integrated):not(.email-signup__input-group--underline) {
    gap: var(--gap-xs);
    align-items: center;
  }

  .email-signup__input-group:not(.email-signup__input-group--arrow):not(.email-signup__input-group--underline):not(
      .email-signup__input-group--integrated
    ) {
    @media screen and (max-width: 749px) {
      flex-direction: column;
    }
  }

  .email-signup__input-group--integrated {
    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);

    @media screen and (max-width: 749px) {
      width: 100%;
    }
  }

  .email-signup__input-group--integrated .email-signup__input {
    background-color: transparent;
    border: none;
    border-radius: 0;
  }

  .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__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 {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-70));
    cursor: pointer;
  }

  .email-signup__message {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .email-signup__message-text {
    margin: 0;
  }
/* END_BLOCK:email-signup */

/* START_BLOCK:filters (INDEX:216) */
.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;
  }

  @media screen and (min-width: 750px) {
    dialog-component.facets-block-wrapper {
      position: absolute;
      width: 0;
      height: 0;
    }
  }

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

    top: auto;
    bottom: 0;
    height: var(--drawer-height);
    max-height: var(--drawer-height);
    width: var(--drawer-width);
    max-width: var(--drawer-max-width);
    box-shadow: none;
    padding-block: 0;

    &:not(.facets--drawer) {
      @media screen and (min-width: 750px) {
        padding-inline: var(--padding-inline-start) var(--padding-inline-end);
        width: 100%;
        max-width: 100%;
      }
    }
  }

  .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 {
    border-radius: 0;
    border-right: var(--style-border-drawer);
    box-shadow: var(--shadow-drawer);
    padding-inline: 0;
  }

  .facets--drawer[open] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
  }

  .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-muted);
    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 - Bubble */
  .facets__bubble {
    display: inline-flex;
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
    aspect-ratio: 1 / 1;
  }

  /* 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(--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(--drawer-padding) * 2);
    border-top: var(--style-border-width) solid var(--color-border);
    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: var(--color-primary-hover);

    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(--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__title {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;

    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--gap-xs);

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 26px;
      --variant-picker-swatch-height: 26px;
    }
  }

  .facets-drawer__close {
    position: relative;
    top: 0;
    right: 0;
    padding: 0;
    cursor: pointer;
  }

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

  .facets-horizontal-remove {
    display: flex;
    align-items: center;
  }

  .facets-horizontal-remove--active::before {
    content: '';
    border-inline-start: var(--style-border-width) solid var(--color-border);
    height: var(--font-paragraph--size);
    position: absolute;
  }
/* END_BLOCK:filters */

/* START_BLOCK:footer-policy-list (INDEX:219) */
.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:221) */
.icon-block {
    display: flex;
    flex-shrink: 0;
  }

  .icon-block__media {
    height: auto;
  }
/* END_BLOCK:icon */

/* START_BLOCK:image (INDEX:222) */
.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);
  }

  .image-block__video {
    object-fit: cover;
    aspect-ratio: var(--ratio);
    width: 100%;
    display: block;
  }

  .image-block--height-fill .image-block__video {
    height: 100%;
  }
/* END_BLOCK:image */

/* START_BLOCK:logo (INDEX:224) */
.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:225) */
.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 (INDEX:227) */
.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:228) */
.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:229) */
.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:232) */
product-custom-property-component {
    display: block;
    width: 100%;
  }

  product-custom-property-component .__heading {
    margin-inline: 0;
    margin-block: 0 var(--padding-sm);
  }

  product-custom-property-component .__heading:has(+ .__description) {
    margin-block-end: var(--padding-2xs);
  }

  product-custom-property-component .__description {
    font-size: min(0.85em, var(--font-paragraph--size));
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    margin-inline: 0;
    margin-block: 0 var(--padding-md);
  }

  product-custom-property-component .__field {
    position: relative;
  }

  product-custom-property-component .__input-wrapper {
    position: relative;
  }

  product-custom-property-component input,
  product-custom-property-component textarea {
    width: 100%;
    /* stylelint-disable-next-line declaration-no-important */
    color: var(--color-input-text) !important;
  }

  /* Add padding for inputs with counter inside */
  product-custom-property-component .__input-wrapper input {
    padding-bottom: calc(var(--padding-sm) * 3);
  }

  product-custom-property-component .__input-wrapper textarea {
    padding-bottom: calc(var(--padding-sm) * 3);
    scroll-padding-bottom: calc(var(--padding-sm) * 3);
  }

  product-custom-property-component textarea {
    min-height: 80px;
  }

  @supports (resize: vertical) {
    @media (hover: hover) and (pointer: fine) {
      product-custom-property-component textarea {
        resize: vertical; /* stylelint-disable-line */
      }
    }
  }

  product-custom-property-component .__character-label {
    position: absolute;
    left: var(--input-padding-x);
    bottom: var(--padding-sm);
    pointer-events: none;
  }

  product-custom-property-component .__character-count {
    font-style: italic;
    /* stylelint-disable-next-line declaration-no-important */
    color: var(--color-input-text) !important;
  }

  /* We should consolidate input styles that share the same behavior */
  .custom-property__input {
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    border-radius: var(--style-border-radius-inputs);

    /* this is needed to override the styles from field__input */
    box-shadow: none;

    &:is(:hover, :focus) {
      /* this is needed to override the styles from field__input */
      box-shadow: none;
    }

    &:focus {
      /* this is needed to override the styles from field__input */
      outline: var(--focus-outline-width) solid var(--color-input-background);
    }
  }
/* END_BLOCK:product-custom-property */

/* START_BLOCK:product-inventory (INDEX:234) */
.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:235) */
.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:238) */
.rating-wrapper {
    gap: var(--gap-xs);
    min-width: fit-content;
  }

  .rating-color--primary {
    --star-fill-color: var(--color-primary);
    --star-fill-color-rgb: var(--color-primary-rgb);
    --color: var(--color-primary);
  }

  .rating-color--foreground {
    --star-fill-color: var(--color-foreground);
    --star-fill-color-rgb: var(--color-foreground-rgb);
    --color: var(--color-foreground);
  }

  .rating-wrapper,
  .rating {
    display: flex;
    align-items: center;
  }

  .rating-wrapper.justify-right {
    flex-direction: row-reverse;
  }

  .rating {
    gap: var(--gap-3xs);
  }

  .rating-wrapper .rating-count,
  .rating-wrapper .rating-count-separator {
    color: var(--star-fill-color);
    margin: 0;
    white-space: nowrap;
  }

  .rating-count-separator {
    opacity: var(--opacity-20);
    padding-left: calc(var(--padding-xs) / 2);
    padding-right: var(--padding-xs);
  }

  .stars {
    height: var(--star-size);
    fill: var(--empty-star-fill-color);
  }

  .filled-star {
    fill: var(--star-fill-color);
  }
/* END_BLOCK:review */

/* START_BLOCK:social-links (INDEX:240) */
.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:241) */
/* Fill opposite direction */
  .layout-panel-flex--column > .spacer-block {
    width: 100%;
  }

  .layout-panel-flex--row > .spacer-block {
    height: 100%;
  }

  /* Flex - Percent */
  :is(.layout-panel-flex--row, .layout-panel-flex--column) > .spacer-block--size-percent {
    flex: var(--spacer-size);
  }

  /* Flex - Pixel */
  .layout-panel-flex--row > .spacer-block--size-pixel {
    width: var(--spacer-size);
  }

  .layout-panel-flex--column > .spacer-block--size-pixel {
    height: var(--spacer-size);
  }

  /* Mobile */
  @media screen and (max-width: 749px) {
    /* Percent */
    .layout-panel-flex--row:not(.mobile-column) > .spacer-block--size-mobile-percent {
      flex: var(--spacer-size-mobile);
      height: 100%;
    }

    .layout-panel-flex--column > .spacer-block--size-mobile-percent,
    .mobile-column > .spacer-block--size-percent:not(.spacer-block--size-mobile-pixel) {
      width: 100%;
      flex: var(--spacer-size-mobile);
    }

    /* Pixel */
    .layout-panel-flex--row:not(.mobile-column) > .spacer-block--size-mobile-pixel {
      width: var(--spacer-size-mobile);
      height: 100%;
    }

    .layout-panel-flex--column > .spacer-block--size-mobile-pixel,
    .mobile-column > .spacer-block--size-mobile-pixel {
      width: 100%;
      flex: 0;
      height: var(--spacer-size-mobile);
    }
  }
/* END_BLOCK:spacer */

/* START_BLOCK:swatches (INDEX:242) */
product-swatches {
    width: 100%;
    display: flex;
    position: relative;
    overflow: hidden;
    gap: 0;
    flex-shrink: 0;
  }
/* END_BLOCK:swatches */

/* START_BLOCK:video (INDEX:245) */
.placeholder-video {
    aspect-ratio: 5 / 3;
  }
/* END_BLOCK:video */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:accordion-custom-component (INDEX:246) */
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:background-media (INDEX:248) */
@media (prefers-reduced-motion: reduce) {
    video-background-component video {
      display: none;
    }
  }
/* END_SNIPPET:background-media */

/* START_SNIPPET:bento-grid (INDEX:249) */
.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:250) */
.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:button (INDEX:252) */
.link {
    text-decoration: none;
    text-decoration-color: currentcolor;

    &:hover {
      color: var(--color-primary-hover);
      text-decoration-color: transparent;
    }
  }
/* END_SNIPPET:button */

/* START_SNIPPET:buy-buttons-styles (INDEX:253) */
.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-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);
  }

  .product-form-text__error {
    display: flex;
    flex: 1 0 100%;
    align-items: flex-start;
    gap: var(--gap-xs);
    margin-block-end: var(--gap-xs);
  }

  .product__pickup-availabilities {
    width: 100%;
  }

  .pickup-availability__column {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  .pickup-availability__row {
    display: flex;
    gap: var(--padding-xs);
  }

  .pickup-availability__dialog-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }

  .pickup-availability__header-container {
    padding-block-end: var(--padding-2xl);
  }

  .pickup-location__wrapper {
    display: flex;
    flex-direction: column;
    padding-block: var(--padding-2xl);
    border-top: 1px solid var(--color-border);
    gap: var(--padding-xs);
  }

  .pickup-location__address-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--padding-md);
  }

  .pickup-location__dialog {
    padding: var(--padding-2xl);
    position: fixed;
    border-radius: 0;
    width: var(--sidebar-width);
    max-width: 95vw;
    height: 100%;
    margin: 0 0 0 auto;
    border: var(--style-border-drawer);
    box-shadow: var(--shadow-drawer);
    background-color: var(--color-background);
  }

  .pickup-location__dialog:modal {
    max-height: 100dvh;
  }

  .pickup-location__text-sm {
    font-size: var(--font-size--sm);
    margin: 0;
  }

  .pickup-location__text-xs {
    font-size: var(--font-size--xs);
    margin: 0;
  }

  .pickup-location__button {
    width: fit-content;
    color: var(--color-primary);
    font-size: var(--font-size--xs);
    font-family: var(--font-body--family);
    padding: 0;
    cursor: pointer;
    margin-block: var(--margin-xs);
  }

  .pickup-location__button:hover {
    color: var(--color-primary-hover);
  }

  .pickup-location__h4 {
    margin: 0;
  }

  .pickup-location__text-bold {
    font-size: var(--font-size--md);
    font-weight: 600;
    margin: 0;
  }

  .pickup-location__availability-wrapper {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    font-family: var(--font-paragraph--family);
  }

  .pickup-location__address {
    font-style: normal;
  }

  .pickup-location__close-button {
    top: calc(var(--padding-2xl) - (var(--icon-size-xs) / 2));
    right: calc(var(--padding-2xl) - var(--icon-size-xs));
  }

  .volume-pricing {
    display: block;
    width: 100%;
    margin-bottom: var(--gap);
  }

  .volume-pricing:not(:has(.volume-pricing__title)) {
    margin-top: 0;
    margin-bottom: 0;
  }

  .volume-pricing__title {
    display: block;
    margin-block-end: var(--gap-sm);
    font-size: var(--font-size--sm);
    font-weight: var(--font-body--weight);
    color: var(--color-foreground);
  }

  .volume-pricing__table {
    width: 100%;
  }

  .volume-pricing__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-md);
    font-size: var(--font-size--sm);
  }

  .volume-pricing__row--even {
    background: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .volume-pricing__row--odd {
    background: var(--color-background);
  }

  .volume-pricing__collapsible-wrapper {
    block-size: 0;
    overflow-y: clip;
    opacity: 0;
    interpolate-size: allow-keywords;
    transition: opacity var(--animation-speed-slow) var(--animation-easing),
      block-size var(--animation-speed-slow) var(--animation-easing);
  }

  .volume-pricing__toggle {
    width: 100%;
    padding-bottom: 0;
    padding-inline: 0;
    text-align: left;
    color: var(--color-foreground-secondary);
    font-size: var(--font-size--xs);
    cursor: default;
    margin-block-start: 0;
    pointer-events: none;
  }

  button.volume-pricing__toggle {
    /* Need the extra specificity to override .product-form-buttons button */
    padding-block: var(--padding-sm);
  }

  .volume-pricing__toggle-text {
    cursor: pointer;
    display: inline-block;
    pointer-events: auto;
  }

  .volume-pricing__show-less {
    display: none;
  }

  .volume-pricing--expanded .volume-pricing__collapsible-wrapper {
    opacity: 1;
    block-size: auto;

    @starting-style {
      block-size: 0;
      opacity: 0;
      overflow-y: clip;
    }
  }

  .volume-pricing--expanded .volume-pricing__show-more {
    display: none;
  }

  .volume-pricing--expanded .volume-pricing__show-less {
    display: inline;
  }

  /* Accelerated checkout styles — co-located here so they compile on pages
     where the quick-add modal can display buy buttons (e.g. collection pages). */
  .accelerated-checkout-block[data-shopify-visual-preview] {
    width: 300px;
  }

  more-payment-options-link {
    font-size: smaller;
  }

  more-payment-options-link a {
    --button-color: var(--color-primary);
  }

  more-payment-options-link a:hover {
    --button-color: var(--color-primary-hover);
  }

  .shopify-payment-button__more-options[aria-hidden='true'] {
    display: none;
  }
/* END_SNIPPET:buy-buttons-styles */

/* START_SNIPPET:card-gallery (INDEX:254) */
.card-gallery {
    overflow: hidden;
    container-type: inline-size; /* Make card-gallery a container */
    container-name: card-gallery-container; /* Optional: name the container */
  }

  .card-gallery__placeholder svg {
    height: 100%;
    width: 100%;
  }

  .card-gallery svg {
    aspect-ratio: var(--gallery-aspect-ratio, var(--ratio));
  }

  .product-card-gallery__title-placeholder {
    padding: var(--padding-md);
    font-size: var(--font-size--2xl);
    line-height: var(--line-height--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: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .product-card-gallery__title-placeholder a {
    color: var(--color-foreground);
  }

  @media screen and (min-width: 750px) {
    .product-grid[data-product-card-size='extra-large'] .product-card-gallery__title-placeholder {
      padding: var(--padding-3xl);
      font-size: var(--font-size--3xl);
    }

    .product-grid[data-product-card-size='large'] .product-card-gallery__title-placeholder {
      padding: var(--padding-2xl);
      font-size: var(--font-size--2xl);
    }

    .product-grid[data-product-card-size='medium'] .product-card-gallery__title-placeholder {
      padding: var(--padding-xl);
      font-size: var(--font-size--xl);
    }

    .product-grid[data-product-card-size='small'] .product-card-gallery__title-placeholder {
      padding: var(--padding-sm);
      font-size: var(--font-size--lg);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-3xl) + 50px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-2xl) + 50px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-xl) + 50px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-sm) + 50px);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-3xl) + 40px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-2xl) + 40px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-xl) + 40px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-sm) + 40px);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-3xl) + 40px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-2xl) + 40px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-xl) + 40px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-sm) + 40px);
    }
  }

  @media screen and (max-width: 749px) {
    .product-card-gallery__title-placeholder {
      font-size: var(--font-size--xl);
      padding: var(--padding-md);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-sm) + 50px);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-sm) + 40px);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-sm) + 40px);
    }
  }

  [product-grid-view='zoom-out'] .card-gallery .product-card-gallery__title-placeholder {
    /* stylelint-disable-next-line declaration-no-important */
    padding: var(--padding-xs) !important;
    font-size: var(--font-size--xs);
  }

  [product-grid-view='zoom-out'] .card-gallery .slideshow-control {
    min-width: auto;
  }

  ul[product-grid-view='zoom-out'] .product-grid__card .card-gallery {
    display: block;
  }

  [product-grid-view='zoom-out']
    .card-gallery
    > :is(quick-add-component, .product-badges, slideshow-component > slideshow-controls) {
    display: none;
  }

  ul[product-grid-view='zoom-out'] .card-gallery > img {
    display: block;
  }

  .card-gallery slideshow-arrows .slideshow-control {
    /* Align icons with quick-add button */
    padding-inline: var(--padding-xl);

    @container (max-width: 249px) {
      padding-inline: 0 var(--padding-sm);
    }
  }

  /*
   * Card galleries preview the next or previous images on 'pointerenter', so we
   * try to kick load them beforehand (they are lazy loaded otherwise).
   */
  .card-gallery
    :is(
      slideshow-slide:has(+ slideshow-slide[aria-hidden='false']),
      slideshow-slide[aria-hidden='false'] + slideshow-slide
    ) {
    content-visibility: auto;

    slideshow-component[actioned] & {
      content-visibility: visible;
    }
  }
/* END_SNIPPET:card-gallery */

/* START_SNIPPET:cart-bubble (INDEX:255) */
.cart-bubble {
    --cart-padding: 0.2em;

    position: relative;
    width: 20px;
    aspect-ratio: 1;
    border-radius: 50%;
    border-width: 0;
    display: flex;
    line-height: normal;
    align-items: center;
    justify-content: center;
    color: var(--color-primary-button-text);
    padding-inline: var(--cart-padding);
  }

  .cart-bubble[data-maintain-ratio] {
    aspect-ratio: 1;
  }

  .cart-bubble[data-maintain-ratio] .cart-bubble__background {
    border-radius: var(--style-border-radius-50);
  }

  .cart-bubble__background {
    position: absolute;
    inset: 0;
    background-color: var(--color-primary-button-background);
    border-radius: var(--style-border-radius-lg);
  }

  .cart-bubble__text {
    font-size: var(--font-size--3xs);
    z-index: var(--layer-flat);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
/* END_SNIPPET:cart-bubble */

/* START_SNIPPET:cart-items-component (INDEX:256) */
.cart-items-component {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    html:active-view-transition-type(empty-cart-drawer) {
      .cart-items-component {
        view-transition-name: cart-drawer-content;
      }
    }

    html:active-view-transition-type(empty-cart-page) {
      .cart-items-component {
        view-transition-name: cart-page-content;
      }
    }
  }

  ::view-transition-old(cart-page-content) {
    animation: cart-page-content-old var(--animation-speed-fast) var(--animation-easing) forwards;
  }

  @keyframes cart-page-content-old {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
      filter: blur(4px);
    }
  }

  ::view-transition-old(cart-drawer-content) {
    transform-origin: 50% 33%;
    animation: cart-contents-old var(--spring-d280-b0-duration) var(--spring-d280-b0-easing) forwards;
  }

  ::view-transition-new(cart-drawer-content) {
    transform-origin: top center;
    animation: cart-contents-new var(--spring-d280-b0-duration) var(--spring-d280-b0-easing) forwards;
  }

  @keyframes cart-contents-old {
    to {
      scale: 0.92;
      opacity: 0;
    }
  }

  @keyframes cart-contents-new {
    from {
      scale: 1.05;
      translate: 0 128px;
      filter: blur(1px);
      opacity: 0;
    }
  }
/* END_SNIPPET:cart-items-component */

/* START_SNIPPET:cart-products (INDEX:257) */
.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;
  }

  /* U1: discount code badge on cart line item */
  .u1-cart-item__discount-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    color: var(--text-secondary, #666);
    background: var(--neutral-100, #f5f5f5);
    padding: 3px 6px;
    border-radius: 4px;
    margin-top: 4px;
  }

  .cart-page--empty .cart-items__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-block-start: 0;
    text-align: center;
  }

  .cart-drawer:not(:has(.cart-form)) .cart-items__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .cart-items__table {
    width: 100%;
    border-spacing: 0;
  }

  .cart-items__table * {
    margin: 0;
  }

  .cart-items__table-row {
    --cart-item-price-width: 6rem;

    display: grid;
    grid-template-columns: clamp(2.5rem, 15cqi, 7.5rem) minmax(0, 1fr) minmax(var(--cart-item-price-width), auto);
    grid-template-areas:
      'media details price'
      'media quantity price'
      'media error error';
    column-gap: var(--gap-md);
    align-items: start;
    padding-bottom: var(--cart-items-gap);
    margin-bottom: var(--margin-lg);
  }

  /* Cart drawer: separate grid areas for variants and unit price */
  .cart-drawer .cart-items__table-row--full-width-variants {
    grid-template-columns: clamp(2.5rem, 15cqi, 7.5rem) minmax(0, 1fr) auto;
    grid-template-rows: repeat(4, min-content) 1fr;
    grid-template-areas:
      'media details price'
      'media variants variants'
      'media unit_price unit_price'
      'media quantity quantity'
      'media error error';

    .cart-items__details {
      display: contents;
    }

    .cart-items__product-info {
      grid-area: details;
    }

    .cart-items__variants-wrapper {
      grid-area: variants;

      &:empty {
        display: none;
      }

      p {
        margin: 0;
      }
    }

    .cart-items__unit-price-wrapper {
      grid-area: unit_price;
      font-size: var(--font-size--sm);
    }

    .cart-items__price {
      min-width: auto;
      width: max-content;
    }
  }

  .cart-items__table-row.cart-items__nested-line td:first-child {
    width: 60%;
    justify-self: right;
  }

  html:active-view-transition-type(page-navigation) .cart-items__table-row {
    /* stylelint-disable-next-line declaration-no-important */
    view-transition-name: none !important;
  }

  .cart-items__table-row.removing {
    overflow: hidden;
    animation: removeRow calc(var(--animation-speed) * 2) var(--animation-easing) forwards;
    animation-delay: var(--animation-speed);
  }

  @keyframes removeRow {
    0% {
      height: var(--row-height);
    }

    100% {
      opacity: 0;
      height: 0;
      padding-bottom: 0;
      margin-bottom: 0;
      border-color: transparent;
    }
  }

  .cart-items__table-row:last-child {
    padding-bottom: 0;
  }

  .cart-items--dividers .cart-items__table-row {
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--cart-items-gap);
  }

  .cart-items--dividers .cart-items__table-row:has(+ .cart-items__nested-line) {
    border-bottom: none;
    margin-bottom: 0;
  }

  .cart-items--dividers .cart-items__table-row:last-of-type {
    border-block-end: none;
    padding-block-end: 0;
    margin-bottom: 0;
  }

  .cart-items__details {
    grid-area: details;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
  }

  .cart-items__details > * + *,
  .cart-items__bundle li {
    margin-block-start: var(--margin-3xs);
  }

  .cart-items__details * {
    font-size: var(--font-size--sm);
  }

  .cart-items__details a {
    text-decoration: none;
  }

  .cart-items__title {
    font-size: var(--font-size--md);
    color: var(--color-foreground);
    text-transform: var(--product-title-case);
    display: block;
    margin-block-start: calc((var(--font-size--md) - 1lh) / 2);
  }

  .cart-items__variants {
    display: block;
  }


  .cart-items__variant {
    display: inline;
  }

  .cart-items__variant dt,
  .cart-items__variant dd {
    display: inline;
    margin: 0;
  }

  .cart-items__quantity {
    grid-area: quantity;
    margin-block-start: var(--margin-xs);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap-xs);
    width: fit-content;
  }

  .cart-items__quantity-controls {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap-xs);
    width: fit-content;
  }

  .cart-items__quantity-controls > .volume-pricing-info {
    margin-inline-start: calc(-1 * var(--minimum-touch-target) - var(--gap-xs));
  }

  .cart-items__quantity .quantity-selector {
    display: inline-flex;
    font-size: var(--font-size--sm);
    height: auto;
  }

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

  .cart-items__media {
    grid-area: media;
    padding: 0;
  }

  .cart-items__price {
    grid-area: price;
    min-height: unset;
    min-width: var(--cart-item-price-width);
    text-align: end;
    display: block;
    font-size: var(--font-size--sm);
    line-height: var(--line-height);
  }


  .cart-items__price-unit {
    font-size: var(--font-size--xs);
    padding-block-start: var(--padding-2xs);
  }

  .cart-items__media-container {
    display: flex;
    aspect-ratio: var(--ratio);
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  .cart-items__media-image {
    aspect-ratio: inherit;
    object-fit: cover;
    object-position: center center;
    width: 100%;
    height: auto;
  }

  .cart-items__empty-button {
    margin-top: var(--margin-md);
    padding-inline: var(--padding-4xl);
    padding-block: var(--padding-lg);
  }

  /* Error message */
  .cart-items__error {
    display: flex;
    align-items: flex-start;
    width: 100%;
    grid-area: error;
    margin-block-start: var(--margin-xs);
    opacity: 1;
    overflow: hidden;
    transform: translateY(0);
    transition: opacity var(--drawer-animation-speed) var(--animation-easing),
      transform var(--drawer-animation-speed) var(--animation-easing);

    @starting-style {
      opacity: 0;
      transform: translateY(-0.5rem);
    }
  }

  .cart-item__error {
    display: flex;
    align-items: flex-start;
    width: 100%;
    font-size: var(--font-size--sm);
    padding-block: var(--padding-2xs);
  }

  .cart-item__error .svg-wrapper {
    flex-shrink: 0;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    margin-inline: var(--margin-3xs) var(--margin-xs);
    margin-block-start: var(--margin-3xs);
  }

  @container cart-items (min-width: 720px) {
    /* Cart page: original layout */
    .cart-items__table-row {
      --cart-item-price-width: 6rem;

      grid-template-columns: 7.5rem 1fr 1fr minmax(var(--cart-item-price-width), auto);
      grid-template-rows: min-content 1fr;
      grid-template-areas:
        'media details quantity price'
        'media details error error';
    }

    .cart-items__quantity,
    .cart-items__price {
      grid-area: initial;
    }

    .cart-items__quantity {
      margin-top: 0;
    }

    .cart-items__price {
      min-height: var(--minimum-touch-target);
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }

    /* Cart drawer: separate areas for variants and unit price */
    .cart-drawer .cart-items__table-row--full-width-variants {
      grid-template-rows: min-content min-content min-content 1fr;
      grid-template-areas:
        'media details quantity price'
        'media variants variants variants'
        'media unit_price unit_price unit_price'
        'media error error error';

      .cart-items__quantity,
      .cart-items__price {
        grid-area: initial;
      }
    }
  }

  .cart__subtotal-container,
  .cart__total-container {
    display: flex;
    flex-direction: column;
  }

  .cart__total-container {
    row-gap: var(--gap-2xs);

    &.cart__total-container--has-installments {
      row-gap: var(--gap-xs);
    }
  }

  .cart__subtotal-container:empty {
    display: none;
  }

  .cart__summary-totals {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    width: 100%;
    border-block-start: none;

    &:has(> :first-child:not(.cart__subtotal-container, .cart__total-container)) {
      padding-block-start: 0;
      border-block-start: none;
    }

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

  .cart__subtotal-container,
  .cart__subtotal-container * {
    font-size: var(--font-size--sm);
  }

  .cart__total {
    font-weight: var(--font-weight-bold);
  }

  .cart__total-label {
    font-size: var(--font-size--sm);
  }

  .cart__total-value {
    font-size: var(--font-size--xl);

    @media screen and (max-width: 749px) {
      font-size: var(--font-size--lg);
    }
  }

  .cart-primary-typography {
    font-family: var(--cart-primary-font-family);
    font-style: var(--cart-primary-font-style);
    font-weight: var(--cart-primary-font-weight);
  }

  .cart-secondary-typography {
    font-family: var(--cart-secondary-font-family);
    font-style: var(--cart-secondary-font-style);
    font-weight: var(--cart-secondary-font-weight);
  }

  .cart__ctas {
    width: 100%;
    display: grid;
    gap: var(--checkout-button-gap);
    grid-auto-flow: row;
    grid-template-columns: 1fr;
  }

  .cart__additional-checkout-buttons {
    width: 100%;
  }

  shopify-accelerated-checkout-cart {
    --shopify-accelerated-checkout-inline-alignment: center;
    --shopify-accelerated-checkout-button-border-radius: var(--style-border-radius-buttons-primary);
    --shopify-accelerated-checkout-row-gap: var(--checkout-button-gap, 10px);
  }

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

  .cart-items__remove:hover .remove-icon-top {
    transform: translate(calc(-1 * var(--icon-stroke-width)), var(--icon-stroke-width)) rotate(-15deg);
  }

  .cart-items__remove:is(:hover, :active) .remove-icon-bottom {
    transform: translateY(var(--icon-stroke-width));
  }

  .cart-items__table-row.removing .remove-icon-bottom {
    transform: translateY(0);
  }

  .cart-items__table-row.removing .remove-icon-top {
    animation: removeButtonClickedIconTop var(--animation-speed) var(--animation-easing) forwards;
  }

  @keyframes removeButtonClickedIconTop {
    50% {
      transform: translate(0, calc(-1 * var(--icon-stroke-width)));
    }

    100% {
      transform: translate(0, 0);
    }
  }

  .cart-items__properties {
    display: block;
    margin-block-start: var(--margin-2xs);
  }

  .cart-items__property {
    display: block;
  }

  .cart-items__properties dt,
  .cart-items__properties dd {
    display: inline;
    margin: 0;
    overflow-wrap: break-word;
  }

  @media screen and (min-width: 750px) {
    .cart-items .quantity-selector {
      --quantity-selector-width: 105px;
      height: var(--button-size-md);
      width: var(--quantity-selector-width);
    }

    .cart-items .quantity-selector button {
      width: var(--button-size-md);
      height: var(--button-size-md);
    }

    .cart-items .quantity-selector input {
      max-width: calc(var(--quantity-selector-width) - var(--button-size-md) * 2);
    }
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    html:active-view-transition-type(empty-cart-drawer) {
      .cart-items__empty-button,
      .cart__checkout-button {
        view-transition-name: cart-drawer-primary-action;

        & > .button-text {
          view-transition-name: cart-drawer-primary-action-text;
        }
      }
    }
  }

  ::view-transition-old(cart-drawer-primary-action-text),
  ::view-transition-new(cart-drawer-primary-action-text) {
    height: 100%;
    object-fit: none;
    overflow: clip;
    overflow-clip-margin: 1em;
  }

  ::view-transition-old(cart-drawer-primary-action-text) {
    animation: cart-drawer-primary-action-text var(--animation-speed) var(--animation-easing) reverse forwards;
  }
  ::view-transition-new(cart-drawer-primary-action-text) {
    animation: cart-drawer-primary-action-text var(--animation-speed) var(--animation-easing) forwards;
  }

  ::view-transition-old(cart-drawer-primary-action),
  ::view-transition-new(cart-drawer-primary-action) {
    height: 100%;
  }

  ::view-transition-group(cart-drawer-primary-action-text),
  ::view-transition-group(cart-drawer-primary-action) {
    animation-duration: var(--spring-d300-b0-duration);
    animation-timing-function: var(--spring-d300-b0-easing);
  }

  @keyframes cart-drawer-primary-action-text {
    from {
      filter: blur(3px);
      opacity: 0;
    }
    to {
      filter: none;
      opacity: 1;
    }
  }
/* END_SNIPPET:cart-products */

/* START_SNIPPET:cart-summary (INDEX:258) */
.cart-actions {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-block: 1px solid var(--color-border);
    padding-block: 0;
    margin-block-start: var(--margin-3xs);
  }

  .cart-actions__divider {
    border-block-start: 1px solid var(--color-border);
  }

  .cart-totals:not(:has(.cart-actions)) {
    margin-block-start: var(--margin-3xs);
    border-block-start: 1px solid var(--color-border);
    padding-block-start: var(--margin-xl);
  }

  .cart-totals__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-totals__tax-note {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .cart-totals__tax-note small {
    font-size: var(--font-size--2xs);
  }

  .cart-discounts {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .cart-discounts__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-discounts__label {
    display: flex;
    align-items: center;
    gap: var(--gap-2xs);
  }

  .cart-discounts__label svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    display: inline-block;
  }

  .cart-totals__original-container,
  .cart-totals__container {
    display: flex;
    flex-direction: column;
  }

  .cart-totals__container {
    row-gap: var(--gap-2xs);

    &.cart-totals__container--has-installments {
      row-gap: var(--gap-xs);
    }
  }

  .cart-totals__original-container:empty {
    display: none;
  }

  .cart-totals {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    width: 100%;
    border-block-start: none;

    &:has(> :first-child:not(.cart-totals__original-container, .cart-totals__container)) {
      padding-block-start: 0;
      border-block-start: none;
    }

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

  .cart-totals__original-container,
  .cart-totals__original-container * {
    font-size: var(--cart-font-size--sm);
  }

  .cart-totals__total {
    align-items: baseline;
    font-weight: var(--font-weight-bold);
  }

  .cart-totals__total-label {
    font-size: var(--cart-font-size--sm);
  }

  .cart-totals__total-value {
    font-size: var(--cart-font-size--xl);

    @media screen and (max-width: 749px) {
      font-size: var(--font-size--lg);
    }
  }

  .cart-totals__installments {
    color: var(--color-foreground);
    font-size: var(--font-size--2xs);
  }

  .cart-note {
    width: 100%;
  }

  @starting-style {
    .cart-note[open-by-default-on-desktop][open-by-default-on-mobile] .details-content {
      block-size: auto;
      opacity: 1;
      overflow-y: visible;
    }
  }

  .cart-note__inner {
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

  .cart-note__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-note__summary:hover {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .cart-note__label {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-2xs);
    font-size: var(--font-size--2xs);
    font-weight: 500;
  }

  .cart-note__instructions {
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    border-width: var(--style-border-width-inputs);
    border-color: var(--color-input-border);
    transition: box-shadow var(--animation-speed) ease;
    box-shadow: var(--input-box-shadow);
    min-height: 5.5rem;
    min-width: 100%;
    max-width: 100%;
    font-size: var(--font-size--sm);
    padding: max(4px, calc(var(--style-border-radius-inputs) * (1 - cos(45deg))));
  }

  .cart-totals__icon {
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
    margin: 0;
  }

  .cart__ctas {
    width: 100%;
    display: grid;
    gap: var(--checkout-button-gap);
    grid-auto-flow: row;
    grid-template-columns: 1fr;
  }

  .cart__ctas .cart__checkout-button {
    width: 100%;
    height: clamp(25px, var(--height-buy-buttons), 55px);
    padding-inline: var(--padding-4xl);
  }

  .cart-drawer__summary .cart-totals:not(:has(.cart-totals__original-container:empty)) {
    border-block-start: var(--style-border-width) solid var(--color-border);
    padding-block-start: var(--padding-2xl);
  }

  .cart-drawer__summary .cart-note {
    @media screen and (min-width: 750px) {
      margin-block-start: var(--margin-3xs);
    }
  }

  .cart-discount__input {
    background-color: var(--color-input-background);
    color: var(--color-input-text);
    border-width: var(--style-border-width-inputs);
    border-color: var(--color-input-border);
    border-style: solid;
    border-radius: var(--style-border-radius-inputs);
    padding: var(--padding-sm) var(--padding-md);
    height: 100%;
    flex-grow: 1;
    min-width: 0;
    font-size: var(--font-size--sm);
  }

  .cart-discount__input::placeholder {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-subdued-text));
  }

  .cart-discount__pill-code {
    overflow: hidden;
    max-width: 100px;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
  }

  .cart-discount {
    width: 100%;
  }

  .cart-discount__codes {
    display: none;
    gap: var(--padding-xs);
    flex-wrap: wrap;
    list-style: none;
    padding-inline: 0;
    margin: 0;
  }

  .cart-discount__codes:has(.cart-discount__pill) {
    display: flex;
  }

  .cart-discount__button {
    height: 100%;
  }

  .cart-discount__content {
    height: calc(var(--button-size) + var(--padding-2xs) + var(--padding-sm));
  }

  .cart-discount__pill {
    display: flex;
    color: var(--color-foreground);
    gap: var(--padding-xs);
    align-items: center;
    padding: var(--padding-xs) var(--padding-sm);
    border-radius: var(--style-border-radius-pills);
    background-color: var(--color-input-background);
    text-transform: uppercase;
  }

  .cart-discount__form {
    display: flex;
    gap: var(--padding-md);
    align-items: center;
    height: 100%;
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

  :is(.cart-discount__pill-remove, .cart-discount__pill-remove:hover) {
    --close-icon-opacity: 0.4;

    color: var(--color-foreground);
    background-color: transparent;
    pointer-events: all;
    cursor: pointer;
    height: 100%;
  }

  .cart-discount__error {
    display: flex;
    align-items: center;
    width: 100%;
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

  .cart-discount__error .svg-wrapper {
    flex-shrink: 0;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    margin-inline: var(--margin-3xs) var(--margin-xs);
  }

  .cart-discount__error-text {
    margin-block-start: var(--margin-3xs);
  }

  .cart-discount__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-discount__summary:hover {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .cart-discount__label {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-2xs);
    font-size: var(--font-size--2xs);
    font-weight: 500;
  }

  @media screen and (min-width: 750px) {
    .cart-summary--extend {
      height: 100%;
    }
  }
/* END_SNIPPET:cart-summary */

/* START_SNIPPET:collection-card (INDEX:260) */
.collection-card {
    --fixed-card-height: var(--height-small);

    flex: 1 1 var(--card-width-small);
  }

  .collection-card > svg {
    height: 100%;
    width: 100%;
    aspect-ratio: var(--ratio);
  }

  .collection-card--image-bg .collection-card__inner {
    height: 100%;
  }

  .collection-card__inner {
    gap: var(--gap);

    a,
    button {
      pointer-events: auto;
    }
  }

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

  .collection-card__content {
    max-width: 100%;
    --flex-wrap: wrap;
  }

  /* Nested image block rules */

  .collection-card.collection-card--image-bg {
    aspect-ratio: var(--ratio);
  }

  .collection-card.collection-card--image-bg .collection-card__content {
    padding: var(--padding-lg);
  }

  .collection-card--image-height-fixed {
    height: 100%;
  }

  /* Bento layout rules */
  .collection-card--image-height-fixed .collection-card__image {
    height: var(--fixed-card-height);
    width: 100%;
  }

  .collection-card--image-height-fixed.collection-card--image-bg {
    height: var(--fixed-card-height);
    aspect-ratio: unset;
  }

  .collection-card__image .resource-image__image {
    object-fit: cover;
    width: 100%;
    height: 100%;
    max-width: 100%;
  }

  .collection-card--image-bg .collection-card__image {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .collection-card__image svg {
    height: 100%;
    width: 100%;
  }

  .resource-list:not(.hidden--desktop) .collection-card--flexible-aspect-ratio {
    &.collection-card.collection-card--image-bg,
    &.collection-card .placeholder-svg {
      aspect-ratio: 99;
    }
  }
/* END_SNIPPET:collection-card */

/* START_SNIPPET:divider (INDEX:262) */
.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:ds-chip (INDEX:263) */
.ds-chip {
    position: relative; display: inline-grid; place-items: center; height: 24px; padding: 0 11.74px; overflow: hidden;
    background: var(--ds-chip-bg, linear-gradient(#ff927a, #e9c3bb));
    --ds-chip-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9.73592 24' preserveAspectRatio='none'%3E%3Cpath transform='rotate(180 4.86796 12)' d='M0 24V0H8.73546C9.38093 0 9.85731 0.602406 9.70854 1.23049L4.67976 22.461C4.4661 23.363 3.6606 24 2.73361 24H0Z'/%3E%3C/svg%3E") left / 9.74px 24px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9.73592 24' preserveAspectRatio='none'%3E%3Cpath d='M0 24V0H8.73546C9.38093 0 9.85731 0.602406 9.70854 1.23049L4.67976 22.461C4.4661 23.363 3.6606 24 2.73361 24H0Z'/%3E%3C/svg%3E") right / 9.74px 24px no-repeat, linear-gradient(#000 0 0) center / calc(100% - 17.48px) 100% no-repeat;
    -webkit-mask: var(--ds-chip-mask);
    mask: var(--ds-chip-mask);
  }
  .ds-chip b {
    position: relative; font: italic 500 14px/1 var(--u1-font-family, sans-serif); letter-spacing: .7px; color: var(--ds-chip-ink, #000); white-space: nowrap;
  }
/* END_SNIPPET:ds-chip */

/* START_SNIPPET:ds-price (INDEX:264) */
.ds-price__cents { margin-left: .1em; font-size: .645em; vertical-align: top; }
  :is(s, del) .ds-price__cents { display: inline-block; }
/* END_SNIPPET:ds-price */

/* START_SNIPPET:editorial-blog-grid (INDEX:265) */
.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:266) */
.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:267) */
.editorial-product__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 1fr;
    gap: var(--gap-xl);

    /* Make the aspect ratio super high on width, then increase the height of
     * slideshow containers until they fill all the available space */
    .card-gallery {
      /* stylelint-disable-next-line declaration-no-important */
      --gallery-aspect-ratio: 99 !important;
    }

    .card-gallery,
    slideshow-component,
    slideshow-container,
    slideshow-slides,
    .product-media__image {
      height: 100%;
    }
  }

  .editorial-product__spacer {
    aspect-ratio: 1;
  }

  @media screen and (max-width: 749px) {
    .editorial-product__grid {
      display: flex;
      flex-direction: column;
      gap: var(--gap-2xl);
    }

    .editorial-product__spacer {
      display: none;
    }

    .editorial-product__item-0 {
      width: 83%;
      align-self: flex-start;
      aspect-ratio: 7 / 6;
    }

    .editorial-product__item-1 {
      width: 83%;
      align-self: flex-end;
      aspect-ratio: 4 / 5;
    }

    .editorial-product__item-2 {
      width: 66%;
      align-self: flex-start;
      aspect-ratio: 5 / 5;
    }

    .editorial-product__item-3 {
      width: 100%;
      aspect-ratio: 8 / 6;
    }
  }
/* END_SNIPPET:editorial-product-grid */

/* START_SNIPPET:filter-remove-buttons (INDEX:268) */
/* 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:gift-card-recipient-form-styles (INDEX:272) */
.recipient-form {
    --options-border-radius: var(--variant-picker-button-radius);
    --options-border-width: var(--variant-picker-button-border-width);

    display: flex;
    flex-direction: column;
    padding-bottom: var(--padding-2xl);
  }

  .recipient-form__send-to {
    padding: 0;
    margin-block-end: var(--margin-xs);
  }

  .gift-card-form-option {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-sm);
    padding: 0;
    border: none;
  }

  .gift-card-form-option__button-label {
    display: flex;
    align-items: center;
    position: relative;
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-lg);
    border: var(--style-border-width) solid var(--color-variant-border);
    border-radius: var(--options-border-radius);
    border-width: var(--options-border-width);
    overflow: clip;
    justify-content: center;
    min-width: auto;
    background-color: var(--color-variant-background);
    color: var(--color-variant-text);
    transition: background-color var(--animation-speed) var(--animation-easing),
      border-color var(--animation-speed) var(--animation-easing);

    &:hover {
      background-color: var(--color-variant-hover-background);
      border-color: var(--color-variant-hover-border);
      color: var(--color-variant-hover-text);
    }
  }

  .gift-card-form-option__button-label:has(:focus-visible) {
    --variant-picker-stroke-color: var(--color-foreground);

    border-color: var(--color-foreground);
    outline: var(--focus-outline-width) solid var(--color-foreground);
    outline-offset: var(--focus-outline-offset);
  }

  .gift-card-form-option__button-label:has(:checked) {
    color: var(--color-selected-variant-text);
    background-color: var(--color-selected-variant-background);
    border-color: var(--color-selected-variant-border);
    transition: background-color var(--animation-speed) var(--animation-easing),
      border-color var(--animation-speed) var(--animation-easing);

    &:hover {
      background-color: var(--color-selected-variant-hover-background);
      border-color: var(--color-selected-variant-hover-border);
      color: var(--color-selected-variant-hover-text);
    }
  }

  .gift-card-form-option__button-label input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
  }

  .recipient-fields {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    transition: opacity 0.3s var(--animation-easing);
    padding-block-start: var(--padding-xl);
  }

  .recipient-fields[hidden] {
    display: none;
  }

  .field--send-on {
    display: flex;
    flex-direction: column;
  }

  .recipient-form__message {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--gap-sm);
    margin-top: var(--margin-sm);
  }

  .recipient-form-field-label {
    position: absolute;
    left: var(--padding-sm);
    bottom: var(--padding-sm);
    font-style: italic;
    color: var(--color-input-text);
  }

  .recipient-fields__textarea {
    min-height: 5.5rem;
    overflow-y: auto;

    /* Space for the character count */
    padding-bottom: calc(var(--padding-sm) * 3);
    scroll-padding-bottom: calc(var(--padding-sm) * 3);
  }

  .recipient-fields__input {
    flex-grow: 1;
    transition: background-color var(--animation-speed) ease, border-color var(--animation-speed) ease;
    padding: var(--input-padding);
    background-color: var(--color-input-background);
    color: var(--color-input-text);
    text-align: left;
    font-size: var(--font-paragraph--size);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    border-radius: var(--style-border-radius-inputs);

    &:autofill {
      background-color: var(--color-input-background);
      color: var(--color-input-text);
    }

    &:is(:focus, :hover) {
      background-color: var(--color-input-hover-background);
    }

    &:is(:focus) {
      outline-color: var(--color-input-background);
    }
  }

  /* Date picker calendar icon
   * Safari doesn't show the icon and Firefox correctly applies the color from the input field.
   * Webkit browsers need the mask-image trick to use the correct icon color.
   */
  .field--send-on .recipient-fields__input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24' %3E%3Cg%3E%3Cpath d='M9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-image: none;
    background-color: currentColor;
    mask-type: match-source;
  }

  /* For Webkit browsers - text cursor for input area */
  .field--send-on .recipient-fields__input::-webkit-datetime-edit {
    cursor: text;
  }

  .field--send-on .recipient-fields__input::-webkit-datetime-edit-year-field,
  .field--send-on .recipient-fields__input::-webkit-datetime-edit-month-field,
  .field--send-on .recipient-fields__input::-webkit-datetime-edit-day-field {
    /* Override the disabled color */
    color: var(--color-input-text);
  }

  /* Fallback for other browsers */
  .field--send-on .recipient-fields__input {
    cursor: text;
  }

  /* For Firefox - entire field is clickable, so show pointer */
  @supports (-moz-appearance: none) {
    .field--send-on .recipient-fields__input {
      cursor: pointer;
    }
  }
/* END_SNIPPET:gift-card-recipient-form-styles */

/* START_SNIPPET:grid-density-controls (INDEX:274) */
.column-options-wrapper {
    --icon-offset: -3px;

    display: flex;
    gap: var(--gap-sm);
    min-width: fit-content;
    justify-content: flex-end;
    height: var(--minimum-touch-target);
    align-items: center;
    margin-right: var(--icon-offset);
  }

  .column-options-wrapper:only-child {
    margin-left: auto;
  }

  .facets__form-wrapper > .column-options-wrapper:first-child {
    margin-left: auto;
  }

  .facets .column-options-wrapper {
    display: none;

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

  .column-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-xs);
    margin: 0;
    padding: 0;
    border: none;

    @media screen and (min-width: 750px) {
      gap: var(--gap-2xs);
    }
  }

  .column-options__option {
    display: none;
    position: relative;
  }

  .column-options__option:has(.column-picker-mobile--single),
  .column-options__option:has(.column-picker-mobile--double) {
    @media screen and (max-width: 749px) {
      display: flex;
    }
  }

  .column-options__option:has(.column-picker--default),
  .column-options__option:has(.column-picker--zoom-out) {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  /* Override base rule for grid density controls - only when visible */
  .column-options-wrapper .column-options__option:has(input[type="radio"]):has(.column-picker-mobile--single),
  .column-options-wrapper .column-options__option:has(input[type="radio"]):has(.column-picker-mobile--double) {
    @media screen and (max-width: 749px) {
      display: flex;
    }
  }

  .column-options-wrapper .column-options__option:has(input[type="radio"]):has(.column-picker--default),
  .column-options-wrapper .column-options__option:has(input[type="radio"]):has(.column-picker--zoom-out) {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .column-options__legend {
    padding: 0;
    margin: 0;
  }

  .column-options__option-input {
    /* this is a repeating pattern a bit with the variant picker buttons */

    /* remove the checkbox from the page flow */
    position: absolute;

    /* set the dimensions to match those of the label */
    inset: 0;

    /* hide it */
    opacity: 0;
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    cursor: pointer;
  }

  .column-picker {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-50));
    padding: var(--padding-2xs);
    border-radius: var(--style-border-radius-xs);
    transition: background-color var(--animation-speed) ease, color var(--animation-speed) ease;
  }

  .column-options__option:hover .column-picker {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .column-options__option-input:checked ~ .column-picker {
    color: rgb(var(--color-foreground-rgb));
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }
/* END_SNIPPET:grid-density-controls */

/* START_SNIPPET:group (INDEX:275) */
.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:276) */
.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-drawer {
    --cart-drawer-padding: var(--padding-xl) var(--padding-xl);
    --cart-drawer-padding-desktop: var(--padding-xl) var(--padding-2xl);

    @media screen and (min-width: 750px) {
      margin-inline-end: calc(var(--gap-xs) * -1);
    }
  }

  @media screen and (min-width: 750px) {
    .cart-drawer--text {
      display: flex;
      align-items: center;
    }
  }

  .cart-drawer__dialog {
    position: fixed;
    overflow: hidden;
    border-radius: 0;
    width: 100%;
    height: 100%;
    margin: 0 0 0 auto;
    padding: 0;
    border-left: var(--style-border-drawer);
    box-shadow: var(--shadow-drawer);
    background-color: var(--color-background);

    @media screen and (min-width: 750px) {
      width: var(--sidebar-width);
      max-width: 95vw;
    }
  }

  /* Needed to ensure the drawer is full height */
  .cart-drawer__dialog:modal {
    max-height: 100dvh;
    overflow-y: hidden;
  }

  .cart-drawer__inner {
    height: 100%;
    overflow: hidden;
  }

  .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__heading {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    margin-bottom: 0;
  }

  .cart-drawer__close-button {
    margin-right: calc(var(--padding-sm) * -1);
    top: var(--margin-sm);

    @media screen and (max-width: 749px) {
      top: var(--margin-2xs);
    }
  }

  .cart-drawer--empty .cart-drawer__content {
    text-align: center;
    min-height: auto;
  }

  .cart-drawer--empty .cart-drawer__heading {
    margin-bottom: var(--margin-md);
  }

  .cart-drawer__items .cart-items__table-row {
    padding-bottom: var(--gap-xl);
    border-bottom: var(--style-border-width) solid var(--color-border);
    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;
  }

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

  .cart-drawer__dialog[cart-summary-sticky='false'] .cart-drawer__summary {
    position: static;
    mask-image: none;
  }

  .cart-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 var(--color-border);
    padding-block-start: var(--padding-2xl);
  }

  .cart-drawer__summary .cart-note {
    @media screen and (min-width: 750px) {
      margin-block-start: var(--margin-3xs);
    }
  }

  .cart-drawer__heading--empty {
    display: flex;
    justify-content: center;
  }

  .cart-drawer__items {
    display: flex;
    flex-direction: column;
    padding-inline: var(--cart-drawer-padding);
    overflow-y: auto;

    @media screen and (min-width: 750px) {
      padding-inline: var(--cart-drawer-padding-desktop);
    }
  }

  .cart-drawer__items .cart-items__table-row {
    padding-bottom: var(--gap-xl);
    border-bottom: var(--style-border-width) solid var(--color-border);
    margin-bottom: var(--gap-xl);
  }

  .cart-drawer__items .cart-items__table-row:last-child {
    border-bottom: none;
    padding-block-end: 0;
    margin-block-end: 0;
  }

  .cart-drawer--empty .cart-drawer__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100dvh;
    margin-top: 0;
  }

  .cart-drawer:not(:has(.cart-form)) .cart-drawer__content {
    justify-content: center;
  }

  .cart-drawer__header {
    background-color: var(--color-background);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--cart-drawer-padding);
    border-bottom: var(--style-border-width) solid none;
    position: sticky;
    top: 0;
    z-index: 1;

    @media screen and (min-width: 750px) {
      padding-inline: var(--cart-drawer-padding-desktop);
    }
  }

  .cart-drawer--empty .cart-drawer__header {
    justify-content: right;
    border-bottom: none;
    padding-bottom: 0;
  }

  .cart-drawer--empty .cart-drawer__heading {
    text-align: center;
  }

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

  .cart-drawer__heading .cart-bubble {
    width: fit-content;
    border-radius: var(--style-border-radius-buttons-primary);
    aspect-ratio: auto;
    padding: var(--cart-padding);
  }

  .cart-drawer__heading .cart-bubble[data-maintain-ratio] {
    width: min(1lh, 22px);
    height: min(1lh, 22px);
  }

  .header-actions__cart-icon .cart-bubble__text,
  .cart-drawer__heading .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-drawer__heading .cart-bubble .cart-bubble__background {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
  }

  .cart-drawer__heading .cart-bubble__text {
    color: var(--color-foreground);
    font-size: clamp(var(--font-size--3xs), 0.75em, var(--font-size--xs));
  }

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

  @media screen and (prefers-reduced-motion: no-preference) {
    html:active-view-transition-type(empty-cart-drawer) {
      .cart-drawer__close-button {
        view-transition-name: cart-drawer-close-button;
      }
    }
  }

  :active-view-transition {
    .cart-drawer__header,
    .cart-drawer__content {
      background: transparent;
    }
  }

  ::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;
    }
  }
  .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:277) */
.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);
    box-shadow: var(--shadow-drawer);
    flex-direction: column;

    @media screen and (min-width: 750px) {
      width: 25rem;
    }
  }

  /* When opening a submenu we don't want the first-level menu to be scrollable, so we reset the overflow  */
  .menu-drawer.menu-drawer--has-submenu-opened {
    overflow: initial;
  }

  .menu-drawer__backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    backdrop-filter: brightness(0.75);
    z-index: var(--layer-heightened);
    opacity: 0;
    transition: opacity var(--drawer-animation-speed) ease;

    .menu-open & {
      opacity: 1;
    }
  }

  .menu-drawer,
  details[open] > .menu-drawer__submenu {
    transition: transform var(--drawer-animation-speed) ease, visibility var(--drawer-animation-speed) ease,
      opacity var(--drawer-animation-speed) ease;
  }

  .menu-open > .menu-drawer,
  .menu-open > .menu-drawer__submenu:not(.menu-drawer__menu--childlist) {
    transform: translateX(0);
    visibility: visible;
    opacity: 1;
    display: flex;
    flex-direction: column;
  }

  .menu-drawer__inner-container {
    position: relative;
    height: 100%;
  }

  .menu-drawer__navigation-container {
    display: grid;
    grid-template-rows: 1fr auto;
    align-content: space-between;
    overflow-y: auto;
    height: 100%;
  }

  .menu-drawer__inner-submenu {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;

    @media screen and (min-width: 750px) {
      margin-top: var(--drawer-header-desktop-top);
    }
  }

  .menu-drawer__nav-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .menu-drawer__menu {
    --menu-drawer-inline-padding: calc(var(--padding-sm) + 7px);

    list-style: none;
    padding-inline: var(--drawer-padding);
    margin-inline: 0;
    margin-block-start: 0;
  }

  .menu-drawer__menu--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__menu-item-text {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /** Styles when the country selector is hidden */
  .menu-drawer .language-selector:not(.menu-drawer__submenu *) {
    width: fit-content;
    padding-inline-start: 0;

    .localization-form__select {
      text-align: left;
    }
  }

  .menu-drawer__menu-item > .svg-wrapper {
    width: fit-content;
    height: fit-content;
    margin: 0;
    padding-block: var(--padding-lg);
    padding-inline-start: var(--padding-xl);
    flex-shrink: 0;
  }

  .menu-drawer__list-item--divider .menu-drawer__menu-item > .svg-wrapper {
    padding-block: var(--padding-md);
  }

  .menu-drawer svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__submenu {
    position: absolute;
    width: 100%;
    top: 0;
    height: 100dvh;
    left: 0;
    background-color: var(--color-background);
    z-index: var(--layer-flat);
    transform: translateX(-5%);
    visibility: hidden;
    overflow-y: auto;
    opacity: 0;
  }

  .menu-drawer__back-button > .svg-wrapper {
    margin-right: var(--padding-md);
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__utility-links {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin-block: auto var(--padding-sm);
    margin-inline-start: var(--padding-xl);
    background-color: rgb(var(--color-foreground) 0.03);
  }

  .menu-drawer__account {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
    text-decoration: none;
    height: 44px;
    font-size: 1.4rem;
    color: rgb(var(--color-foreground));
  }

  .menu-drawer__account svg {
    height: var(--icon-size-sm);
    width: var(--icon-size-sm);
  }

  .menu-drawer__account shop-user-avatar {
    --shop-avatar-size: 2.4rem;

    margin-right: 0.55rem;
    margin-left: -0.45rem;
  }

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

  .drawer-localization .language-selector .svg-wrapper.icon-caret svg {
    transform: none;
  }
/* END_SNIPPET:header-drawer */

/* START_SNIPPET:jumbo-text (INDEX:288) */
.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:291) */
.facets input:checked + label {
    font-weight: 500;
  }

  .facets .checkbox .icon-checkmark {
    transition: border-color 0.2s ease, background-color 0.2s ease;
  }

  .facets .checkbox:not(.checkbox--disabled):hover .icon-checkmark {
    border-color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  /* Hover state for checked checkboxes - targeting via adjacent sibling */
  .facets .checkbox:not(.checkbox--disabled):hover .checkbox__input:checked + .checkbox__label .icon-checkmark {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-85));
  }

  .facets .checkbox:not(.checkbox--disabled):hover .checkbox__label-text {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-90));
  }

  .facets .checkbox .checkbox__label-text {
    transition: color 0.2s ease, font-weight 0.2s ease;
  }

  /* Pill style */
  .facets__pill-label {
    --pill-label-padding-inline: var(--padding-xs);
    --pill-label-border-radius: var(--style-border-radius-md);
    --pill-label-border-width: var(--variant-picker-button-border-width);
    --pill-label-height: var(--button-size-md);
    --pill-label-focus-outline-color: var(--color-foreground);
    --pill-label-color: var(--color-foreground);
    --pill-label-color-rgb: var(--color-foreground-rgb);
    --pill-label-background-color: var(--color-background);
    --pill-label-background-color-rgb: var(--color-background-rgb);
    --pill-label-border-opacity: var(--facets-low-opacity);

    display: inline-flex;
    position: relative;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 var(--pill-label-border-width) rgb(var(--pill-label-color-rgb) / var(--opacity-10-25));
    border-radius: var(--pill-label-border-radius);
    height: var(--pill-label-height);
    width: 100%;
    padding-inline: var(--pill-label-padding-inline);
    color: rgb(var(--pill-label-color-rgb));
    background-color: rgb(var(--pill-label-background-color-rgb));
    cursor: pointer;
    transition: color var(--animation-speed) var(--animation-easing),
      background-color var(--animation-speed) var(--animation-easing);
    outline-color: var(--pill-label-focus-outline-color);

    &:hover {
      --pill-label-border-opacity: 100%;
    }
  }

  .facets__pill-input {
    &:checked + .facets__pill-label {
      --pill-label-color-rgb: var(--color-background-rgb);
      --pill-label-background-color-rgb: var(--color-foreground-rgb);
      --pill-label-border-opacity: 0;

      font-weight: 500;
    }

    &:disabled + .facets__pill-label {
      opacity: var(--disabled-opacity);
      cursor: not-allowed;

      &:hover {
        --pill-label-border-opacity: var(--facets-low-opacity);
      }
    }
  }

  .facets__status-wrapper {
    display: flex;
    align-items: center;
  }

  .facets--drawer .facets__status-wrapper {
    @media screen and (max-width: 749px) {
      gap: var(--gap-3xs);
    }
  }

  .facets--vertical .facets__status-wrapper {
    gap: var(--gap-xs);
  }

  .facets--horizontal .facets__status-wrapper {
    gap: 0;
  }

  .facets__pill-input:disabled + .facets__pill-label svg {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: var(--style-border-radius-md);
  }

  .facets__pill-label svg line {
    stroke-width: 1.5px;
    stroke: rgb(var(--color-foreground-rgb) / var(--facets-low-opacity));
  }

  .facets__pill-wrapper {
    position: relative;
  }

  .facets__pill-input {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    opacity: 0;
    cursor: pointer;
  }

  /* Swatches */
  .facets__status--swatches {
    display: none;
  }

  .facets__swatch-wrapper {
    display: flex;
  }

  .variant-option__swatch-wrapper {
    position: relative;
    overflow: visible;
    border-radius: var(--options-border-radius);
  }

  .variant-option--swatches-disabled {
    pointer-events: none;
    cursor: not-allowed;
  }

  .variant-option--swatches-disabled .variant-option__swatch-wrapper {
    overflow: hidden;
  }

  .facets--horizontal .facets__status--swatches {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .facets--horizontal .sorting-filter .facets__status {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets__status--swatches .swatch {
    width: calc(var(--variant-picker-swatch-width) / 1.5);
    height: calc(var(--variant-picker-swatch-height) / 1.5);
  }

  .facets__status--swatches .swatch + .swatch {
    margin-left: calc(var(--variant-picker-swatch-width) / -3);
    outline: 1px solid rgb(var(--color-background-rgb));
  }

  .facets__inputs-wrapper .facets__inputs-list--images {
    display: grid;
    grid-template-columns: repeat(var(--image-columns), 125px);
    gap: var(--gap-sm);
  }

  .facets--drawer .facets__inputs-wrapper .facets__inputs-list--images {
    grid-template-columns: repeat(3, 1fr);

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

  .facets--vertical .facets__inputs-wrapper .facets__inputs-list--images {
    grid-template-columns: repeat(2, 1fr);
  }

  .facets--drawer .facets__inputs-list--images {
    padding-top: var(--padding-xs);
  }

  .facets__image-wrapper {
    aspect-ratio: 1/1;
    width: 100%;
    padding: var(--padding-xs);
    position: relative;
    overflow: hidden;
  }

  .facets__image-wrapper img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    border-radius: calc(var(--border-radius) / 2);
  }

  .facets__image-label {
    width: 100%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-block-end: var(--padding-xs);
    cursor: pointer;
  }

  .facets__inputs-list-item--disabled .facets__image-label {
    cursor: not-allowed;
  }

  .facets__inputs-list-item:not(.facets__inputs-list-item--disabled) .facets__image-label:hover {
    font-weight: 500;
  }

  /* Filter-specific variant-option styles */
  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch {
    --focus-outline: var(--focus-outline-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-35-55));

    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label:has(:focus-visible) .swatch {
    --focus-outline: var(--focus-outline-width) solid currentcolor;

    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label:has(:focus-visible) {
    outline: none;
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover {
    outline: none;
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:has(:checked) {
    --focus-outline: none;
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:has(:checked) .swatch {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  .facets__inputs-list--swatches .variant-option__button-label {
    --color-variant-text: var(--color-foreground);
  }

  .facets__inputs-list--swatches {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 26px;
      --variant-picker-swatch-height: 26px;
    }
  }

  .facets--vertical .facets__inputs-wrapper .facets__inputs-list--swatches-grid {
    gap: var(--gap-sm);
  }

  .facets--vertical .facets__inputs-list--swatches .facets__inputs-list-item {
    display: flex;
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid {
    --columns: 2;

    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid .variant-option--swatches {
    cursor: pointer;
    overflow: visible;
  }

  .facets__inputs-list-item--disabled .variant-option--swatches {
    cursor: not-allowed;
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid label {
    cursor: pointer;
    word-break: break-word;
    white-space: normal;
  }

  .facets__inputs-list--swatches-grid .facets__inputs-list-item--disabled label {
    cursor: not-allowed;
  }

  .facets__inputs-list-item--disabled .variant-option__button-label {
    cursor: not-allowed;
  }

  .facets__inputs-wrapper
    .facets__inputs-list--swatches-grid
    .variant-option__button-label--has-swatch:has(input[type='checkbox']) {
    align-items: center;
    overflow: visible;
    justify-content: flex-start;
    display: flex;
    width: 100%;
    flex-basis: unset;
    gap: var(--gap-sm);
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid .variant-option__button-label:has(:checked) {
    color: rgb(var(--color-foreground-rgb));
    background-color: rgb(var(--color-background-rgb));
    font-weight: 500;
    transition: font-weight 0.2s ease;
  }

  .facets .variant-option--swatches {
    --options-border-radius: var(--variant-picker-swatch-radius);

    width: auto;
  }

  .facets__inputs-list-item:not(.facets__inputs-list-item--disabled) .variant-option__button-label:hover {
    font-weight: 500;
  }

  /* Variant option images (filters) */
  .variant-option--images {
    --image-facet-border-width: var(--variant-picker-button-border-width);
    --image-facet-border-opacity: var(--facets-low-opacity);
    --image-facet-border-radius: var(--style-border-radius-xs);

    position: relative;
    border-radius: var(--image-facet-border-radius);
    box-shadow: inset 0 0 0 var(--image-facet-border-width)
      rgb(var(--color-foreground-rgb) / var(--image-facet-border-opacity));

    &:hover {
      --image-facet-border-opacity: 100%;
    }

    &:has(input:checked) {
      font-weight: 500;
      transition: font-weight 0.2s ease;
    }

    &:has(input:checked):hover {
      --image-facet-border-width: calc(var(--variant-picker-button-border-width) + 0.5px);
    }

    &:has(input:focus-visible) {
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: var(--focus-outline-offset);
    }
  }

  .variant-option--images input {
    /* remove the checkbox from the page flow */
    position: absolute;

    /* set the dimensions to match those of the label */
    inset: 0;

    /* hide it */
    opacity: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    cursor: pointer;
  }

  .facets__inputs-list-item--disabled .variant-option--images {
    --image-facet-border-opacity: 0;

    opacity: var(--disabled-opacity);
    cursor: not-allowed;

    &:hover {
      --image-facet-border-opacity: 0;
    }

    img {
      opacity: var(--disabled-opacity);
    }

    input,
    label,
    .facets__image-label {
      cursor: not-allowed;
    }

    .facets__image-wrapper {
      border: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-30));
      border-radius: var(--image-facet-border-radius);
    }
  }

  /* Position disabled-svg */
  .variant-option--images svg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    stroke-width: var(--border-width);
    stroke: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  /* Position label text and handle overflow */
  .facets__inputs-list-item,
  .variant-option--images {
    min-width: 0;
  }

  /* Safari < 16.4 outline border-radius workaround - filter-specific */
  @supports not (background-color: rgb(from red 150 g b / alpha)) {
    .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch {
      outline: none;
      position: relative;
      overflow: visible;
    }

    .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch::after {
      content: '';
      position: absolute;
      inset: calc(-1 * var(--focus-outline-offset));
      border: var(--focus-outline);
      border-radius: var(--focus-outline-radius, 50%);
      background-color: transparent;
      display: inherit;
    }
  }
/* END_SNIPPET:list-filter */

/* START_SNIPPET:localization-form (INDEX:292) */
/* Localization */
  localization-form-component {
    display: flex;
    width: var(--width, auto);

    @media screen and (min-width: 750px) {
      position: relative;
    }
  }

  localization-form-component[data-show-filter='false'] .country-selector-form__wrapper {
    padding-block-start: var(--padding-xs);
  }

  .localization-form {
    width: 100%;
  }

  localization-form-component .button:is(:not(.country-filter__reset-button)) {
    --button-color: var(--color-primary);
    --button-background-color: var(--language-button-background-color, var(--color-background));
    --button-border-color: var(--language-button-border-color, var(--color-border));

    text-decoration-color: transparent;
    text-decoration-thickness: 0.075em;
    text-underline-offset: 0.125em;
    transition: text-decoration-color var(--animation-speed) var(--animation-easing);
  }

  localization-form-component .button:is(:not(.country-filter__reset-button)):hover,
  .localization-form__list-item:hover,
  .localization-form__list-item:focus {
    --button-color: var(--color-primary-hover);

    background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-8));
  }

  .localization-form__list-item[aria-current='true'] {
    --button-color: var(--color-primary-active);

    background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-10));
  }

  .localization-form__list-item-disabled {
    pointer-events: none;
  }

  .localization-form__list-item:focus-visible {
    outline: none;
  }

  localization-form-component .localization-selector {
    display: flex;
    align-items: center;
    gap: var(--margin-2xs);
  }

  localization-form-component .country-filter__search-icon {
    left: 8px;
    right: auto;
    color: var(--color-foreground-muted);
    pointer-events: none;
  }

  .country-filter__search-icon .svg-wrapper svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .disclosure {
    width: 100%;
  }

  .localization-form__list {
    position: relative;
    width: 100%;
    padding-block: 0 var(--padding-xs);
    font-size: var(--font-size-lg);
    scroll-padding: var(--padding-xs) 0;
    overflow-y: auto;
    white-space: nowrap;

    /* Hide scrollbar which would cause extra right padding in Safari */
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .localization-form__list-item:not([hidden]) {
    margin-block-end: var(--margin-3xs);
    display: flex;
    gap: var(--margin-sm);
    padding: 8px;
    border-radius: 8px;
    line-height: var(--font-line-height-md);
    align-items: center;
    text-align: start;
    cursor: pointer;
    transition: background-color var(--animation-speed) var(--animation-easing);

    .country {
      flex: 1;
      color: var(--color-foreground);
    }

    &:hover {
      background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
    }

    &[aria-current='true'] {
      .country {
        font-weight: 500;
      }
    }
  }

  .localization-form__list-item#no-results-message {
    grid-template-columns: 1fr;
    text-align: center;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .is-searching .localization-form__list-item .country {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-80));
  }

  .localization-form__list-item .country mark {
    font-weight: 500;
    background: none;
    color: var(--color-foreground);
  }

  .country-filter {
    position: relative;
    padding: var(--padding-xs);
    border-bottom: var(--style-border-width) solid transparent;
    transition: border-color var(--animation-values);
  }

  .country-filter.is-scrolled {
    border-color: var(--color-border);
  }

  .country-selector-form__wrapper {
    overflow-y: auto;
    max-height: 100%;
    flex-grow: 1;
  }

  .language-selector {
    display: flex;
    gap: var(--gap-xs);
    padding: var(--padding-md) var(--padding-lg);
    position: relative;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .language-selector__label {
    flex-shrink: 0;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .localization-form__select {
    border: none;
    color: var(--color-foreground);
    appearance: none;
    background-color: var(--color-input-background);
    padding-block: var(--padding-3xs);
    padding-inline: var(--padding-xs) calc(var(--icon-size-xs) + var(--padding-xs));
    text-align: right;
    cursor: pointer;
    max-width: 40vw;
    text-overflow: ellipsis;
    field-sizing: content;

    &:focus-visible {
      outline: var(--focus-outline-width) solid currentcolor;
    }

    &:focus {
      outline: none;
    }
  }

  #header-component[transparent] localization-form-component .localization-form .localization-form__select {
    background-color: transparent;
  }

  .localization-form__select option {
    background-color: var(--color-input-background);
    color: var(--color-input-text);
  }

  .language-selector .svg-wrapper.icon-caret {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
  }

  .language-selector--collapse-space {
    padding-inline-end: var(--padding-2xs);
  }

  .language-selector--collapse-space .localization-form__select {
    padding-inline-end: var(--icon-size-xs);
  }

  .language-selector--collapse-space .svg-wrapper.icon-caret {
    right: 0;
  }

  .localization-form .icon-checkmark {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .localization-form .svg-wrapper.icon-checkmark {
    visibility: hidden;
  }

  .localization-form__list-item[aria-current='true'] .svg-wrapper.icon-checkmark {
    visibility: visible;
  }

  .country-filter__input {
    width: 100%;
    height: 44px;
    font-size: var(--font-size-lg);
    padding: var(--padding-md) var(--padding-lg) var(--padding-md) calc(var(--margin-md) + var(--padding-xl));
    border: 1px solid var(--color-foreground);
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    outline-offset: -1px;

    @media screen and (min-width: 750px) {
      height: 36px;
    }
  }

  .country-filter__input::placeholder {
    color: inherit;
  }

  .country-filter .field {
    position: relative;
  }

  .country-filter .field__label {
    font-size: var(--font-size-lg);
    left: var(--margin-2xl);
    top: var(--margin-xl);
    pointer-events: none;
    position: absolute;
  }

  .country-filter__input:focus ~ .field__label,
  .country-filter__input:not(:placeholder-shown) ~ .field__label,
  .country-filter__input:-webkit-autofill ~ .field__label {
    font-size: var(--font-size-xs);
    top: var(--margin-xs);
  }

  .country-filter .field__button:not([hidden]) {
    display: flex;
    height: fit-content;
    position: absolute;
    padding: 0;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    align-items: center;
    background-color: transparent;
    color: var(--color-input-text);
    border: 0;
  }

  input[type='search']::-webkit-search-cancel-button {
    appearance: none;
  }

  .country-selector__close-button {
    display: none;
  }
/* END_SNIPPET:localization-form */

/* START_SNIPPET:media (INDEX:295) */
.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:300) */
.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:301) */
.pagination {
    --pagination-size: 36px;
    --pagination-inset: 2px;
    --pagination-radius: 6;

    display: flex;
    justify-content: center;
    padding: var(--padding-xl) var(--padding-sm);
    margin-top: var(--padding-xl);
    position: relative;
  }

  .pagination__list {
    display: flex;
    gap: 0;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
  }

  .pagination__item {
    width: var(--pagination-size);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
  }

  .pagination__link {
    display: grid;
    place-items: center;
    color: var(--color-foreground);
    text-decoration: none;
    width: 100%;
    height: 100%;
    user-select: none;
    position: relative;
    outline-color: var(--color-foreground);
    -webkit-tap-highlight-color: transparent;
    font-size: var(--font-size--md);
    font-weight: var(--font-weight-normal);
    border-radius: calc(var(--pagination-radius) * 1px);
    transition: color var(--hover-transition-duration) var(--hover-transition-timing),
      opacity var(--hover-transition-duration) var(--hover-transition-timing);
  }

  .pagination__link:focus-visible {
    outline: 2px solid var(--color-foreground);
    outline-offset: 2px;
  }

  .pagination__link--current {
    color: var(--color-background);
    font-weight: var(--font-weight-medium);
    cursor: default;
  }

  .pagination__link--gap {
    cursor: default;
    pointer-events: none;
  }

  .pagination__link--arrow {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .pagination__link--disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
  }

  .pagination__link svg {
    width: 0.5rem;
    height: 0.75rem;
    flex-shrink: 0;
  }

  .pagination__item--mobile-only {
    display: none;
  }

  /* Fallback for browsers without anchor positioning support */
  @supports not (anchor-name: --pagination-active) {
    .pagination__link:not(.pagination__link--gap)::before {
      content: '';
      position: absolute;
      inset: var(--pagination-inset);
      border-radius: calc(var(--pagination-radius) * 1px);
      background: rgb(var(--color-foreground-rgb) / var(--opacity-10));
      z-index: -1;
      opacity: 0;
      transition: background var(--hover-transition-duration) var(--hover-transition-timing),
        opacity var(--hover-transition-duration) var(--hover-transition-timing);
    }

    .pagination__link[aria-current='page']::before {
      background: var(--color-foreground);
      opacity: 1;
    }

    .pagination__link:hover:not([aria-current='page'], .pagination__link--gap, .pagination__link--disabled)::before {
      opacity: 1;
    }
  }

  /* Modern approach with anchor positioning */
  @supports (anchor-name: --pagination-active) {
    .pagination__list::before {
      content: '';
      z-index: -1;
      position: absolute;
      width: calc(var(--pagination-size) - (2 * var(--pagination-inset)));
      aspect-ratio: 1;
      pointer-events: none;
      opacity: 0;
      border-radius: calc(var(--pagination-radius) * 1px);
      background: rgb(var(--color-foreground-rgb) / var(--opacity-10));
      transition: left var(--hover-transition-duration) var(--hover-transition-timing),
        top var(--hover-transition-duration) var(--hover-transition-timing);
    }

    /* Hide hover indicator on touch devices */
    @media (hover: none) and (pointer: coarse) {
      .pagination__list::before {
        content: unset;
      }
    }

    .pagination__list:has(
        .pagination__link:is(:hover, :focus-visible):not(.pagination__link--gap, .pagination__link--disabled))::before {
      opacity: 1;
    }

    /* Style current page directly */
    .pagination__link[aria-current='page']::before {
      content: '';
      position: absolute;
      inset: var(--pagination-inset);
      border-radius: calc(var(--pagination-radius) * 1px);
      background: var(--color-foreground);
      z-index: -1;
    }

    .pagination__list
      .pagination__item:has(
        .pagination__link:is(:hover, :focus-visible):not(.pagination__link--gap, .pagination__link--disabled)) {
      anchor-name: --pagination-hover;
    }

    /* Position hover indicator using anchor */
    .pagination__list::before {
      position-anchor: --pagination-hover;
      left: calc(anchor(left) + var(--pagination-inset));
      top: calc(anchor(top) + var(--pagination-inset));
    }

    .pagination__item:has(+ .pagination__item--gap) .pagination__link::after,
    .pagination__item--gap + .pagination__item .pagination__link::after {
      position: absolute;
      content: '';
      pointer-events: auto;
    }

    .pagination__item:has(+ .pagination__item--gap) .pagination__link::after {
      inset: 0 -50% 0 100%;
    }

    .pagination__item--gap + .pagination__item .pagination__link::after {
      inset: 0 100% 0 -50%;
    }
  }

  @media screen and (max-width: 749px) {
    .pagination {
      --pagination-size: 44px;
      --pagination-inset: 5px;

      padding: var(--padding-lg) var(--padding-sm);
    }

    .pagination__link {
      font-size: var(--font-size--sm);
    }

    .pagination__item--mobile-hide {
      display: none;
    }

    .pagination__item--mobile-only {
      display: grid;
    }

    .pagination__item:has(.pagination__link--gap) {
      width: calc(var(--pagination-size) * 0.5);
    }
  }
/* END_SNIPPET:pagination-controls */

/* START_SNIPPET:password-layout-styles (INDEX:302) */
.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:predictive-search-styles (INDEX:306) */
/* Shared predictive search styles (used by both predictive-search and predictive-search-empty sections) */
  .predictive-search-dropdown {
    display: flex;
    flex-direction: column;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--layer-base);
  }

  .predictive-search-results__title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size--body-md);
    font-weight: 500;
    margin-block: var(--margin-sm) var(--margin-xs);
    width: 100%;
    text-transform: var(--title-case);

    &:first-of-type {
      margin-block-start: 0;
    }

    @media screen and (max-width: 749px) {
      margin-block: var(--margin-lg) var(--margin-sm);
    }
  }

  .predictive-search-results__no-results {
    animation-delay: 100ms;
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-in);
  }

  .predictive-search-results__no-results:last-child {
    margin-block: var(--margin-lg);
    text-align: center;
  }

  /* Predictive search section styles */
  input[type='search']::-webkit-search-decoration {
    -webkit-appearance: none; /* stylelint-disable-line */
  }

  .search-action .predictive-search {
    z-index: calc(var(--layer-header-menu) + 2);
  }

  .search-action .search-modal .predictive-search {
    z-index: var(--layer-window-overlay);
  }

  .header__column--right .predictive-search-form__content-wrapper {
    right: 0;
    left: unset;
  }

  .search-modal .predictive-search-form__content-wrapper {
    width: 100%;

    @media screen and (min-width: 750px) {
      height: fit-content;
    }
  }
  .dialog-modal .predictive-search-form__header-inner {
    @media screen and (min-width: 750px) {
      border: 0;
    }
  }

  .search-modal__content .predictive-search-form__content {
    max-height: var(--modal-max-height);
  }

  .predictive-search:has(.predictive-search-dropdown) .search-input {
    outline-color: transparent;
  }

  .predictive-search:has(.predictive-search-dropdown) .predictive-search-form__header-inner:focus-within {
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;

    @media screen and (max-width: 749px) {
      border-bottom-color: transparent;
    }
  }

  .predictive-search:has(.predictive-search-dropdown[aria-expanded='true'])
    .predictive-search-form__header-inner:focus-within {
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;
    border-radius: var(--search-border-radius);

    @media screen and (max-width: 749px) {
      border-radius: var(--style-border-radius-inputs);
    }
  }

  .dialog-modal .predictive-search-form__header {
    border: 0;
    border-radius: 0;
    background-color: var(--color-background);
    border-bottom: var(--style-border-width) solid var(--color-border);

    @media screen and (min-width: 750px) {
      padding: var(--padding-2xs) var(--padding-2xs) 0;
      border-bottom: var(--search-border-width) solid var(--color-border);
    }

    @media screen and (max-width: 749px) {
      transition: box-shadow 0.2s ease;
      box-shadow: none;
    }
  }

  .search-action .predictive-search:has(.predictive-search-dropdown) .predictive-search-form__header:focus-within {
    border-radius: var(--search-border-radius) var(--search-border-radius) 0 0;
    transition: box-shadow var(--animation-speed) var(--animation-easing);
    background-color: var(--color-background);

    @media screen and (max-width: 749px) {
      border-radius: var(--style-border-radius-inputs) var(--style-border-radius-inputs) 0 0;
    }
  }

  @media screen and (max-width: 749px) {
    .dialog-modal .predictive-search__close-modal-button {
      padding-inline-start: var(--margin-xs);
      margin-inline-start: 0;
    }
  }

  .dialog-modal[open] {
    @media screen and (max-width: 749px) {
      border-radius: 0;
    }
  }

  .dialog-modal .predictive-search-form__header:has(.predictive-search-form__header-inner:focus-within) {
    @media screen and (min-width: 750px) {
      border-bottom-color: transparent;
    }
  }

  @media screen and (max-width: 749px) {
    .dialog-modal {
      .predictive-search__reset-button-icon {
        display: none;
      }

      .predictive-search__reset-button-text {
        display: block;
      }

      .predictive-search-form__content {
        /* The parent has overflow auto, we want to prevent a double scrollbar during animation */
        max-height: 100%;
      }

      .predictive-search-form__content-wrapper {
        box-shadow: none;
      }

      .predictive-search-form__header {
        box-shadow: none;
      }

      .predictive-search-form__footer {
        padding-block: var(--padding-2xl);
      }
    }
  }

  .predictive-search-results__pill {
    font-weight: 500;
    white-space: nowrap;
    color: var(--color-foreground);
    transition: background-color var(--animation-speed-medium) var(--animation-timing-hover),
      box-shadow var(--animation-speed-medium) var(--animation-timing-bounce),
      transform var(--animation-speed-medium) var(--animation-timing-bounce);
    margin: 2px;

    &:hover {
      transform: scale(1.03);
      box-shadow: 0 2px 5px rgb(0 0 0 / var(--opacity-8));
    }
  }

  .predictive-search-results__pill mark {
    background-color: transparent;
    font-weight: 200;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-80));
  }

  .predictive-search-results__pill:focus,
  .predictive-search-results__pill:hover,
  .predictive-search-results__card--query:is([aria-selected='true'], :focus-within) .predictive-search-results__pill {
    --pill-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));

    background-color: var(--pill-background-color);
    outline: var(--border-width-sm) solid var(--color-border);
    border: var(--border-width-sm);
    text-decoration: none;
  }

  .predictive-search-results__wrapper.predictive-search-results__wrapper-queries {
    margin-bottom: var(--margin-lg);
    padding-inline: var(--padding-xl);
    gap: var(--gap-2xs);
  }

  .predictive-search-results__card {
    --title-font-size: var(--font-size--md);
    --title-margin-block: var(--margin-xs);

    flex: 0 0 auto;
    scroll-snap-align: start;
    scroll-margin-block: calc(var(--title-font-size) + var(--title-margin-block) + var(--padding-sm))
      calc(var(--padding-xl) + var(--button-padding-block) * 2);
    transition: transform var(--animation-speed-medium) var(--animation-timing-default),
      background-color var(--animation-speed-medium) var(--animation-timing-hover),
      border-color var(--animation-speed-medium) var(--animation-timing-hover);

    &:nth-last-child(3) {
      scroll-snap-align: end;
    }

    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
    }
  }

  .recently-viewed-wrapper .predictive-search-results__card {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .recently-viewed-wrapper.removing .predictive-search-results__card {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
  }

  .predictive-search-results__card--product,
  .recently-viewed-wrapper .predictive-search-results__card--product {
    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
    }

    &:hover {
      background-color: var(--card-bg-hover);
      border-radius: var(--product-corner-radius);
      padding: calc(var(--padding-2xs) + 2px);
      margin: calc((var(--padding-2xs) + 2px) * -1);
    }

    &:is([aria-selected='true'].keyboard-focus, &:focus-visible, &:has(.resource-card:focus-visible)) {
      background-color: var(--card-bg-hover);
      padding: calc(var(--padding-2xs) + 1px);
      margin: calc((var(--padding-2xs) + 1px) * -1);
      outline: var(--border-width-sm) solid var(--color-border);
      border-radius: calc(var(--product-corner-radius) + 1px);
      border-color: var(--card-border-focus);
    }
  }

  .predictive-search-results__card:not(.predictive-search-results__card--product) {
    padding: var(--padding-sm);
    border: var(--border-width-sm) solid var(--color-border);
    border-radius: var(--card-corner-radius);
    width: 60cqi;
    content-visibility: visible;

    @media screen and (min-width: 750px) {
      width: 27.5cqi;
    }

    &:hover {
      border-color: var(--card-border-hover);
      background-color: var(--card-bg-hover);
    }

    &[aria-selected='true'].keyboard-focus {
      border-color: var(--card-border-hover);
      background-color: var(--card-bg-hover);
    }

    &:active {
      transform: scale(0.97);
      transition: transform var(--animation-speed-medium) var(--animation-timing-active);
    }
  }

  @keyframes search-element-scale-in {
    0% {
      transform: scale(0.95);
      opacity: 0;
    }

    40% {
      opacity: 1;
    }

    100% {
      transform: scale(1);
      opacity: 1;
    }
  }

  @keyframes search-element-scale-out {
    0% {
      transform: scale(1);
      opacity: 1;
    }

    100% {
      transform: scale(0.95);
      opacity: 0;
    }
  }

  @keyframes search-element-slide-in-top {
    from {
      margin-top: calc(var(--modal-top-margin) + var(--padding-sm));
      opacity: 0;
    }

    to {
      margin-top: var(--modal-top-margin);
      opacity: 1;
    }
  }

  @keyframes search-element-slide-out-top {
    from {
      margin-top: var(--modal-top-margin);
      opacity: 1;
    }

    to {
      margin-top: calc(var(--modal-top-margin) + var(--padding-sm));
      opacity: 0;
    }
  }

  @keyframes content-slide {
    from {
      transform: translateY(var(--slide-from, 0));
      opacity: var(--slide-opacity-from, 1);
    }

    to {
      transform: translateY(var(--slide-to, 0));
      opacity: var(--slide-opacity-to, 1);
    }
  }

  .predictive-search-results__list {
    --slide-width: 27.5%;
    --slideshow-gap: var(--gap-md);

    /* Make space for the outline to be visible */
    padding-block-start: var(--border-width-sm);
  }

  .predictive-search-results__list slideshow-arrows {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .predictive-search-results__no-results,
  .predictive-search-results__wrapper,
  .predictive-search-results__wrapper-products .predictive-search-results__card {
    animation: search-element-slide-up var(--animation-speed-medium) var(--animation-timing-bounce) backwards;
  }

  slideshow-slide .resource-card {
    /* stylelint-disable-next-line declaration-no-important */
    animation-delay: 0ms !important;
  }

  .predictive-search-results__list,
  .predictive-search-results__wrapper {
    animation-duration: var(--animation-speed-medium);
  }

  .predictive-search-results__wrapper-queries {
    animation-delay: 50ms;
  }

  .predictive-search-results__list:nth-of-type(2) {
    animation-delay: 150ms;
  }

  .predictive-search-results__list:nth-of-type(3) {
    animation-delay: 200ms;
  }

  .predictive-search-results__list:nth-of-type(4) {
    animation-delay: 250ms;
  }

  .predictive-search-results__list:last-child {
    margin-block-end: 0;
  }

  [data-resource-type] {
    /* stylelint-disable-next-line declaration-no-important */
    animation-delay: 0ms !important;
  }

  .predictive-search-results__no-results.removing,
  .predictive-search-results__wrapper.removing {
    animation: search-element-slide-down var(--animation-speed-medium) var(--animation-timing-fade-out) forwards;
  }

  .predictive-search-results__card.removing {
    animation: fadeOut var(--animation-speed-medium) var(--animation-timing-fade-out) forwards;
  }

  .predictive-search-results__wrapper {
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-in);
  }

  @keyframes search-element-slide-up {
    from {
      opacity: 0;
      transform: translateY(8px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes search-element-slide-down {
    from {
      opacity: 1;
      transform: translateY(0);
    }

    to {
      opacity: 0;
      transform: translateY(8px);
    }
  }

  .predictive-search-results__card--query {
    transition: transform var(--animation-speed-medium) var(--animation-timing-bounce);
    transform-origin: center;

    &:active {
      transform: scale(0.97);
    }
  }

  /* Products list styles */
  .predictive-search-results__products {
    padding-inline: var(--padding-xl);
  }

  .recently-viewed-wrapper {
    display: grid;
    grid-template-rows: auto auto;
    max-height: 1000px;
    opacity: 1;
    overflow: visible;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: top center;
    transform: translateY(0);
  }

  .recently-viewed-wrapper.removing {
    max-height: 0;
    opacity: 0;
    transform: translateY(-10px);
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
  }

  .predictive-search-results__clear.button-unstyled {
    color: var(--color-foreground);
    opacity: 0.68;
    transition: opacity var(--animation-speed-medium) var(--animation-easing);
    padding: 0;
    margin-left: var(--margin-sm);

    &:hover {
      opacity: 1;
    }
  }

  .recently-viewed-wrapper.removing .predictive-search-results__card {
    transition: none;
    transform: none;
    opacity: 1;
  }

  .recently-viewed-wrapper > * {
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(1) {
    animation-delay: 30ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(2) {
    animation-delay: 60ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(3) {
    animation-delay: 90ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(4) {
    animation-delay: 120ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(n + 5) {
    animation-delay: 150ms;
  }

  .predictive-search-results__wrapper-products {
    animation-delay: 50ms;
  }

  /* Resource carousel styles */
  .predictive-search-results__wrapper {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    padding-block-end: var(--padding-sm);
    padding-inline: 0;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--padding-xl);
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .predictive-search-results__wrapper slideshow-slides {
    --gutter-slide-width: var(--padding-xl);

    /* Add padding to prevent hover animations from being clipped in slideshow
       15px accommodates:
       - Scale effect (9px on each side from 1.03 scale)
       - Lift effect (4px upward movement)
       - Shadow (15px spread with -5px offset)
       Using 16px for better alignment with our spacing scale */
    padding-block: var(--padding-xl);
    margin-block: calc(-1 * var(--padding-xl));
    gap: var(--gap-md);
  }

  .predictive-search-results__resource-header {
    display: flex;
    padding-inline: var(--padding-xl);
    justify-content: space-between;
    align-items: center;
    height: 32px;
  }

  .predictive-search-results__resource-header .svg-wrapper {
    width: var(--icon-size-xs);
  }

  .predictive-search-results__wrapper-products {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding-block-end: var(--padding-sm);
    gap: var(--gap-md);
    transition: height var(--animation-speed-medium) var(--animation-easing);

    @container (min-width: 550px) {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .predictive-search-results__wrapper-products:last-child {
    padding-block-end: var(--padding-lg);

    @media screen and (min-width: 750px) {
      padding-block-end: var(--padding-sm);
    }
  }

  .predictive-search-results__resource-header .predictive-search-results__title {
    margin-block-end: 0;
  }

  .predictive-search-results__resource-header:has(slideshow-controls) .predictive-search-results__title {
    margin-block-end: 0;
  }

  .predictive-search-results__resource-header slideshow-controls {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }
/* END_SNIPPET:predictive-search-styles */

/* START_SNIPPET:price-filter (INDEX:307) */
/* Price filter */
  .price-facet {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
  }
  .price-facet--horizontal {
    min-width: 360px;
  }

  .price-facet__inputs-wrapper {
    display: flex;
    flex-direction: row;
    padding: var(--style-border-width-inputs);
    gap: calc(var(--gap-sm) + (var(--style-border-width-inputs) * 2));
  }

  @container (max-width: 199px) {
    .price-facet__inputs-wrapper {
      flex-wrap: wrap;
    }
  }

  .price-facet__input {
    width: 100%;
    text-align: right;
    padding-left: calc(2.5 * var(--input-padding-x));
  }

  .price-facet__input::placeholder {
    color: var(--facets-input-label-color);
  }

  .price-facet__separator {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-paragraph--size);
  }

  .price-facet__highest-price {
    padding: var(--padding-xs) 0 var(--padding-sm);
  }

  .price-facet__highest-price--horizontal {
    padding: 0 var(--padding-md) var(--padding-xs);
  }

  .price-facet__label {
    top: 0;
    left: 0;
    color: var(--facets-input-label-color);
    padding: var(--input-padding-y) var(--input-padding-x);
    transform: none;
  }
/* END_SNIPPET:price-filter */

/* START_SNIPPET:product-badges-styles (INDEX:309) */
.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 (INDEX:310) */
.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 */

/* START_SNIPPET:product-grid (INDEX:311) */
.product-grid {
    --product-grid-gap: var(--product-grid-gap-mobile);
    --mobile-columns: 2; /* Default value */

    isolation: isolate;

    @media screen and (min-width: 750px) {
      --product-grid-gap: var(--product-grid-gap-desktop);
    }
  }

  .product-grid slideshow-arrows .slideshow-control {
    display: none;

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

  /* This triggers iOS < 16.4 */
  @supports not (background-color: rgb(from red 150 g b / alpha)) {
    /* Force aspect ratio to auto for iOS < 16.4 since it's not compatible with the infinite pagination */
    .product-grid .product-media,
    .product-grid .product-media-container {
      aspect-ratio: auto;
    }
  }

  .main-collection-grid {
    grid-column: var(--grid-column--mobile);
    padding: var(--grid--margin--mobile);

    @media screen and (min-width: 750px) {
      grid-column: var(--grid-column--desktop);
      padding: var(--padding-block-start) var(--padding-inline-end) var(--padding-block-end) var(--padding-inline-start);
    }
  }

  .main-collection-grid__empty {
    padding-block: var(--padding-6xl);
    padding-inline: var(--page-margin);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--padding-sm);
  }

  .main-collection-grid__empty-title {
    margin: 0;
  }
/* END_SNIPPET:product-grid */

/* START_SNIPPET:product-information-content-b (INDEX:312) */
.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-b */

/* START_SNIPPET:product-information-content (INDEX:313) */
.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-gallery-content-styles (INDEX:314) */
media-gallery:where(.media-gallery--grid) .media-gallery__grid {
    display: none;
  }

  media-gallery.media-gallery--grid .media-gallery__grid .product-media-container {
    /* Needed for safari to stretch to full grid height */
    height: 100%;
  }

  @media screen and (min-width: 750px) {
    .media-gallery--two-column .media-gallery__grid {
      grid-template-columns: repeat(2, 1fr);
    }

    /* Display grid view as a carousel on mobile, grid on desktop */
    media-gallery:is(.media-gallery--grid) slideshow-component {
      display: none;
    }

    media-gallery:where(.media-gallery--grid) .media-gallery__grid {
      display: grid;
    }
  }

  .product-media-container__zoom-button {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: var(--layer-flat);
    cursor: zoom-in;
    background-color: transparent;

    &:hover {
      background-color: transparent;
    }
  }

  slideshow-slide.product-media-container--tallest {
    content-visibility: visible;
  }

  .product-media__drag-zoom-wrapper {
    aspect-ratio: inherit;
    min-height: inherit;
    min-width: inherit;
    display: inherit;
    flex: inherit;
  }

  .media-gallery__mobile-controls {
    grid-area: auto;
  }

  .product-media-container--zoomable.product-media-container--image {
    cursor: zoom-in;
  }
/* END_SNIPPET:product-media-gallery-content-styles */

/* START_SNIPPET:product-media-gallery-content (INDEX:315) */
.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-media (INDEX:316) */
.product-media {
    aspect-ratio: var(--gallery-aspect-ratio, var(--ratio));
    min-height: 0;
    min-width: 0;
  }

  .product-media__image {
    object-position: var(--focal-point, center center);
  }

  /*** Media border-radius feature ****/
  @media screen and (min-width: 750px) {
    .media-gallery--carousel slideshow-container,
    .media-gallery--grid .product-media > * {
      border-radius: var(--media-radius, 0);
      overflow: hidden;
    }

    /* When the CAROUSEL is on the LEFT side */
    .product-information:not(.product-information--media-right)
      .media-gallery--carousel.media-gallery--extend
      slideshow-container {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    /* When the CAROUSEL is on the RIGHT side */
    .product-information.product-information--media-right
      .media-gallery--carousel.media-gallery--extend
      slideshow-container {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    /* When the GRID is on the LEFT side */
    .product-information:not(.product-information--media-right) {
      /* One column */
      .media-gallery--grid.media-gallery--extend:not(.media-gallery--two-column) .product-media > *,
      /* Two column, small first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column:not(.media-gallery--large-first-image)
        .product-media-container:nth-of-type(odd)
        .product-media
        > *,
      /* Two column, large first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column.media-gallery--large-first-image
        .product-media-container:is(:first-of-type, :nth-of-type(even))
        .product-media
        > * {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }

    /* When the GRID is on the RIGHT side */
    .product-information.product-information--media-right {
      /* One column */
      .media-gallery--grid.media-gallery--extend:not(.media-gallery--two-column) .product-media > *,
      /* Two column, small first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column:not(.media-gallery--large-first-image)
        .product-media-container:nth-of-type(even)
        .product-media
        > *,
      /* Two column, large first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column.media-gallery--large-first-image
        .product-media-container:is(:first-of-type, :nth-of-type(odd))
        .product-media
        > * {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
    }
  }
/* END_SNIPPET:product-media */

/* START_SNIPPET:quantity-selector (INDEX:317) */
.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:318) */
#quick-add-dialog {
    display: contents;
  }

  @media screen and (min-width: 750px) {
    .quick-add-modal {
      width: var(--quick-add-modal-width);
      height: var(--quick-add-modal-height);
      max-width: none;
    }
  }

  .quick-add-modal {
    padding: 0;
    border: var(--style-border-popover);
    overflow: hidden;
    box-shadow: 0 5px 30px rgb(0 0 0 / var(--opacity-15));

    @media screen and (max-width: 749px) {
      position: fixed;
      margin: auto 0 0 0;
      min-height: unset;
      max-width: 100%;
      border-radius: 0;
      overflow: clip;
      height: fit-content;
    }
  }

  .quick-add-modal[open] {
    @media screen and (max-width: 750px) {
      border-top-left-radius: var(--style-border-radius-popover);
      border-top-right-radius: var(--style-border-radius-popover);
    }
  }

  .quick-add-modal[open] {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .quick-add-modal .view-more-details__wrapper {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .quick-add-modal[open] {
    animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .quick-add-modal.dialog-closing {
    animation: modalSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .quick-add-modal__close {
    position: absolute;
    top: var(--margin-2xs);
    right: var(--margin-2xs);
    transition: transform 0.15s var(--animation-timing-bounce);
    z-index: var(--layer-raised);
    overflow: visible;
    transform-origin: center;
  }

  .quick-add-modal__close:active {
    transform: scale(0.99) translateY(1px);
  }

  .quick-add-modal__close {
    &:focus-visible {
      outline: none;
    }

    &:focus-visible::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: calc(var(--style-border-radius-popover) - var(--margin-2xs));
      outline: var(--focus-outline-width) solid currentColor;
    }
  }

  .quick-add-modal__content {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: 100% 1fr;
    position: relative;
    overflow-y: auto;
    max-height: 100vh;
    flex-grow: 1;

    @media screen and (max-width: 749px) {
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: auto;
      padding-inline: var(--padding-xl);
      padding-block: var(--padding-xl);
      gap: var(--gap-lg);
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      height: auto; /* Prevent a bug in Safari where height:fit-content is not respected */
      max-height: 100vh;
    }
  }

  .quick-add-modal__content .media-gallery--grid .media-gallery__grid {
    grid-template-columns: 1fr;
  }

  .quick-add-modal__content .media-gallery--grid.media-gallery--two-column .product-media-container:first-child {
    grid-column: auto;
  }

  .quick-add-modal__content {
    /* One column */
    .media-gallery--grid:not(.media-gallery--two-column) .product-media > *,
      /* Two column, small first image */
      .media-gallery--grid.media-gallery--two-column:not(.media-gallery--large-first-image)
      .product-media-container:nth-of-type(odd)
      .product-media > *,
      /* Two column, large first image */
      .media-gallery--grid.media-gallery--two-column.media-gallery--large-first-image
        .product-media-container:is(:first-of-type, :nth-of-type(even))
        .product-media > *,
        /* Carousel */
      .media-gallery--carousel slideshow-container {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }

  .quick-add-modal__content .view-more-details__wrapper {
    display: flex;
    justify-content: flex-start;
    width: 100%;
  }

  .view-more-details__wrapper .view-more-details {
    display: flex;
    align-items: center;
    width: fit-content;
  }

  .quick-add-modal__content .product-header {
    @media screen and (max-width: 749px) {
      display: flex;
      flex-direction: column;
      grid-column: 2 / -1;
      grid-row: 1;
      padding-right: var(--padding-2xl);
    }
  }

  .quick-add-modal__content .product-header a:not(product-price *) {
    @media screen and (max-width: 749px) {
      font-size: var(--font-size--md);
      font-weight: 500;
      color: inherit;
      width: fit-content;
    }
  }

  .quick-add-modal__content variant-picker,
  .quick-add-modal__content product-form-component {
    @media screen and (max-width: 749px) {
      grid-column: 1 / -1;
    }
  }

  .quick-add-modal__content .product-media-container__zoom-button {
    cursor: default;
  }

  .quick-add-modal__content .product-details {
    grid-column: 4 / -1;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    position: relative;

    dialog[open] & {
      animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
      animation-delay: 0.1s;
    }

    @media screen and (max-width: 749px) {
      grid-column: 2 / span 2;
      grid-row: span 1;
      max-height: 100%;
      height: 100%;
    }
  }

  @property --quick-add-modal-mask-start {
    syntax: '<length>';
    initial-value: 0px;
    inherits: false;
  }

  @property --quick-add-modal-mask-end {
    syntax: '<length>';
    initial-value: 0px;
    inherits: true;
  }

  @keyframes detect-scroll {
    from,
    to {
      --can-scroll: ;
    }
  }

  @supports (animation-timeline: scroll(self)) {
    dialog[open] .quick-add-modal__content .product-details {
      mask-image: linear-gradient(to bottom, transparent 0%, #000 var(--quick-add-modal-mask-start), #000 100%);
      animation: 0.3s var(--animation-timing-fade-in) 0.1s both fadeSlideIn, scrollStart 1s linear both,
        scrollEnd 1s linear both, detect-scroll 1ms linear none;
      animation-timeline: auto, scroll(self), scroll(self), scroll(self);
      animation-range: normal, 0px 48px, calc(100% - 48px) 100%, 0% 100%;
    }
  }

  @keyframes scrollStart {
    from {
      --quick-add-modal-mask-start: 0px;
    }
    to {
      --quick-add-modal-mask-start: 48px;
    }
  }

  @keyframes scrollEnd {
    from {
      --quick-add-modal-mask-end: 0px;
    }
    to {
      --quick-add-modal-mask-end: 48px;
    }
  }

  .quick-add-modal__content .product-details > .group-block {
    flex-grow: 1;
    width: auto;
  }

  .quick-add-modal__content > * {
    min-height: 0;
  }

  .quick-add-modal__content .product-details :is(.view-product-title, .buy-buttons-block) {
    flex: 0 0 auto;
  }
  .quick-add-modal__content .product-details :is(.buy-buttons-block) {
    margin-top: auto;
    position: sticky;
    bottom: 0;
    padding-bottom: var(--padding-3xl);
    background-color: var(--color-background);
    z-index: var(--layer-raised);

    &::before {
      --quick-add-modal-mask-end-progressive-enhanced: 0px;

      position: absolute;
      content: '';
      display: block;
      inset: auto 0 100% 0;
      pointer-events: none;
      height: min(var(--gap-2xl), var(--gap));
      background-color: inherit;
      mask-image: linear-gradient(
        to top,
        #000 0%,
        #000 calc(var(--gap-2xs)),
        transparent calc(100% - var(--quick-add-modal-mask-end-progressive-enhanced)),
        transparent
      );
    }
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) {
    position: static;
    padding-bottom: 0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) > product-form-component {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) form {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form)::before {
    display: none;
  }

  .quick-add-modal__content .product-details .buy-buttons-block__bar {
    display: block;
    position: sticky;
    bottom: 0;
    margin-top: auto;
    padding-block: var(--gap-md) var(--padding-3xl);
    background-color: var(--color-background);
    z-index: var(--layer-raised);

    &::before {
      --quick-add-modal-mask-end-progressive-enhanced: 0px;

      position: absolute;
      content: '';
      display: block;
      inset: auto 0 100% 0;
      pointer-events: none;
      height: min(var(--gap-2xl), var(--gap));
      background-color: inherit;
      mask-image: linear-gradient(
        to top,
        #000 0%,
        #000 calc(var(--gap-2xs)),
        transparent calc(100% - var(--quick-add-modal-mask-end-progressive-enhanced)),
        transparent
      );
    }
  }

  @supports (animation-timeline: scroll(self)) {
    .quick-add-modal__content .product-details :is(.buy-buttons-block)::before,
    .quick-add-modal__content .product-details .buy-buttons-block__bar::before {
      --mask-if-scroll: var(--can-scroll) var(--quick-add-modal-mask-end);
      --mask-if-no-scroll: 48px;
      --quick-add-modal-mask-end-progressive-enhanced: var(--mask-if-scroll, var(--mask-if-no-scroll));
      height: calc(var(--gap-2xs) + 48px);
    }
  }

  .quick-add-modal__content .product-details .variant-picker {
    flex: 0 0 auto;

    padding-block: min(var(--gap-2xl), var(--gap));
    margin-block-end: calc(var(--focus-outline-offset) + var(--focus-outline-width));
  }

  .quick-add-modal__content .variant-option--swatches {
    padding-inline-start: var(--padding-2xs);
  }

  .quick-add-modal__content .variant-option--swatches legend {
    margin-inline-start: calc(-1 * var(--padding-2xs));
  }

  .quick-add-modal__content:not(:has(.product-information__media)) .product-details {
    grid-column: 1 / -1;
  }

  .quick-add-modal__content .view-product-title {
    display: flex;
    padding-block: 0;
    margin-block-end: 12px;

    /* Prevent overlap between title and close button */
    padding-inline-end: calc(var(--padding-2xl) + calc(var(--minimum-touch-target) / 2));
  }

  .quick-add-modal__content .view-product-title a {
    color: inherit;
    text-decoration: none;
    text-align: left;
    font-size: var(--font-size--2xl);
    font-weight: 600;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s var(--animation-easing);
  }

  .quick-add-modal__content .product-details product-price {
    --text-align: left;
  }

  .quick-add-modal__content .product-details product-price.text-block--align-center {
    margin-inline: 0;
  }

  .quick-add-modal__content .product-details product-price.text-center {
    --text-align: left;
  }

  .quick-add-modal__content .product-details product-price > * {
    text-align: left;
  }

  .quick-add-modal__content
    .product-details
    *:not(
      .group-block,
      .group-block-content,
      .buy-buttons-block,
      .buy-buttons-block *,
      .view-product-title,
      .view-product-title *,
      variant-picker,
      variant-picker *,
      product-price,
      product-price *,
      product-inventory,
      product-inventory *,
      .view-more-details__wrapper,
      .view-more-details__wrapper *
    ) {
    @media screen and (min-width: 750px) {
      /* stylelint-disable-next-line declaration-no-important */
      display: none !important;
    }
  }

  .quick-add-modal__content
    .group-block:not(
      :has(
          .buy-buttons-block,
          .buy-buttons-block *,
          .view-product-title,
          .view-product-title *,
          variant-picker,
          variant-picker *,
          product-price,
          product-price *,
          product-inventory,
          product-inventory *,
          .view-more-details__wrapper,
          .view-more-details__wrapper *
        ),
      .buy-buttons-block
    ) {
    display: none;
  }

  @media screen and (min-width: 750px) {
    .quick-add-modal__content .group-block-content {
      gap: 0;
    }

    .quick-add-modal__content .media-gallery__grid {
      gap: min(var(--gap-2xs), var(--image-gap));
      border-radius: var(--style-border-radius-popover, 0);
    }

    .quick-add-modal__content .media-gallery--grid .product-media img {
      border-radius: 0;
    }
  }

  .quick-add-modal__content .product-details > .group-block {
    padding-block: var(--padding-3xl) 0;
  }

  .quick-add-modal__content :where(.product-details > .group-block > .group-block-content > *) {
    padding-inline: var(--padding-3xl);
  }

  .quick-add-modal__content slideshow-slide:not([aria-hidden='false']) {
    content-visibility: auto;
  }

  .quick-add-modal__content .product-information__media {
    width: 100%;
    grid-column: 1 / span 1;
    grid-row: 1;
    position: relative;
    top: 0;
    animation: fadeIn 0.4s var(--animation-timing-fade-in) both;

    @media screen and (min-width: 750px) {
      position: sticky;
      grid-column: 1 / 4;
      width: var(--quick-add-modal-gallery-width);
      overflow-y: auto;
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .quick-add-modal__content .product-information__media media-gallery {
    pointer-events: none;

    @media screen and (min-width: 750px) {
      position: absolute;
      inset: 0;
    }
  }

  .quick-add-modal media-gallery {
    padding: 0;
  }

  .quick-add-modal__content .product-information__media slideshow-arrows {
    display: none;
  }

  .quick-add-modal__content .product-information__media slideshow-container {
    display: block;
  }

  .quick-add-modal__content .product-information__media slideshow-slides {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
    overflow: visible;
    scroll-snap-type: none;
  }

  .quick-add-modal__content .product-information__media slideshow-slide {
    width: 100%;
    flex: none;
    scroll-snap-align: unset;
    position: relative;
    transform: none;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s var(--animation-easing);
  }

  .quick-add-modal__content .product-information__media slideshow-slide[aria-hidden='true'] {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(1) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(2) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
    animation-delay: 0.05s;
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(3) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
    animation-delay: 0.1s;
  }

  .quick-add-modal__content .product-information__media :is(slideshow-controls, slideshow-controls[thumbnails]) {
    display: none;
  }

  .quick-add-modal__content .sticky-content,
  .quick-add-modal__content .sticky-content--desktop {
    top: 0;
  }

  .quick-add-modal__content .text-block.rte:not(product-price),
  .quick-add-modal__content .view-more-details__wrapper {
    display: none;
  }

  @keyframes fadeSlideIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
/* END_SNIPPET:quick-add-modal-styles */

/* START_SNIPPET:quick-add-styles (INDEX:320) */
/* Quick Add */
  .quick-add {
    --quick-add-offset: var(--padding-sm);
    --quick-add-right: calc(var(--quick-add-offset) + var(--padding-inline-end));
    --quick-add-bottom: calc(var(--quick-add-offset) + var(--padding-block-end));

    position: absolute;
    inset: 0;
    z-index: var(--layer-raised);
    pointer-events: none;

    @media screen and (min-width: 750px) {
      --quick-add-offset: var(--padding-md);
    }
  }

  .quick-add .variant-option__button-label input[data-option-available='false'] {
    cursor: not-allowed;
  }

  .quick-add[class*='color-scheme-'] {
    background-color: #0000;
  }

  product-card:is(:hover, :focus-within) .quick-add__button {
    opacity: 1;
  }

  .quick-add__button {
    display: var(--quick-add-mobile-display, none);
    align-items: center;
    background: linear-gradient(var(--color-background) 0 100%) padding-box;
    padding: 0;
    border-radius: 50px;
    border: 2px solid hsl(0 0% 0% / 0.15);
    height: var(--button-size-md);
    cursor: pointer;
    opacity: var(--quick-add-mobile-opacity, 0);
    overflow: hidden;
    color: var(--color-foreground);
    pointer-events: all;
    position: absolute;
    right: max(var(--quick-add-right), calc((var(--border-radius) + var(--quick-add-right)) * (1 - cos(45deg))));
    bottom: max(var(--quick-add-bottom), calc((var(--border-radius) + var(--quick-add-bottom)) * (1 - cos(45deg))));
    backdrop-filter: blur(20px) saturate(180%);

    &:hover {
      scale: 1.03;

      /* Hover stabilizer: extends hit area to maintain hover state */
      &::before {
        content: '';
        position: absolute;
        inset: -10px;
        z-index: -1;
      }
    }

    &:active {
      scale: 0.99;
    }

    .quick-add[stay-visible] & {
      display: grid;
    }

    @media screen and (min-width: 750px) {
      display: var(--quick-add-display, flex);
      opacity: 0;
    }
  }

  .quick-add__button.add-to-cart-button {
    height: var(--button-size-md);
  }

  .quick-add__button .add-to-cart-text {
    background: var(--color-background);
    overflow: hidden;
    border-radius: 50px;
    height: 100%;
    gap: 0;
  }

  .quick-add__button .svg-wrapper .checkmark-burst {
    width: 22px;
    height: 22px;
  }

  .quick-add__button .add-to-cart-icon {
    /* account for border width */
    height: 100%;
    width: calc(var(--button-size-md) - 4px);
  }

  .quick-add__button .add-to-cart-text__content {
    display: grid;
    grid-template-columns: 0fr;

    & > span {
      min-width: 0;

      span {
        padding-right: var(--padding-sm);
        opacity: 0;
        display: inline-block;
        filter: blur(2px);
        translate: 0.5ch 0;
      }
    }
  }

  .quick-add__button[data-added='true'] .add-to-cart-text {
    animation-name: atc-fade-out;
  }

  .quick-add__button[data-added='true'] .add-to-cart-text--added {
    translate: 0 0;
    animation-name: atc-fade-in;
  }

  .quick-add__product-form-component {
    height: 100%;
  }

  .quick-add__product-form-component .shopify-product-form {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    container-type: inline-size;
    height: 100%;
  }

  .quick-add-modal .product-media {
    width: 100%;
    height: 100%;
  }

  .quick-add-modal deferred-media {
    display: none;
  }

  .quick-add-modal .media-gallery--carousel slideshow-component {
    --cursor: default;
  }

  .quick-add__button:is(:hover, :focus-visible) {
    .add-to-cart-text__content {
      grid-template-columns: 1fr;

      span span {
        opacity: 1;
        translate: 0 0;
        filter: blur(0);
      }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .quick-add__button .add-to-cart-text__content {
      grid-template-columns: 1fr;

      span span {
        opacity: 1;
        translate: 0 0;
        filter: blur(0);
      }
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .quick-add__button {
      transition-property: scale, translate, opacity;
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--ease-out-cubic);
    }

    .quick-add__button:is(:hover, :focus-visible) {
      .add-to-cart-text__content,
      .add-to-cart-text__content span span {
        transition-delay: var(--animation-speed);
      }
    }

    .quick-add__button .add-to-cart-text__content {
      transition-property: grid-template-columns;
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--ease-out-cubic);

      span span {
        transition-property: opacity, filter, translate;
        transition-duration: var(--animation-speed-slow);
        transition-timing-function: var(--ease-out-quad);
      }
    }
  }
/* END_SNIPPET:quick-add-styles */

/* START_SNIPPET:resource-card (INDEX:322) */
.resource-card {
    --resource-card-secondary-image-opacity: 0;
    --resource-card-primary-image-opacity: calc(1 - var(--resource-card-secondary-image-opacity));

    display: flex;
    flex-direction: column;
    row-gap: var(--padding-xs);
    position: relative;
    text-decoration: none;
    height: 100%;
    opacity: 0;
    animation: fadeIn var(--animation-speed-medium) var(--animation-timing-fade-in) forwards;
  }

  .resource-card__link {
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  .resource-card__content {
    display: flex;
    flex-direction: column;
    color: var(--color-foreground);
    gap: var(--padding-3xs);

    .price {
      font-weight: 500;
    }

    .volume-pricing-note {
      display: block;
      margin-top: var(--padding-3xs);
      font-family: var(--font-body--family);
      font-weight: normal;
      font-size: min(0.85em, var(--font-paragraph--size));
      line-height: normal;
      letter-spacing: normal;
      text-transform: none;
      color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    }
  }

  .resource-card[data-resource-type='article'] .resource-card__content,
  .resource-card[data-resource-type='page'] .resource-card__content {
    gap: var(--padding-xs);
  }

  .resource-card__image {
    aspect-ratio: var(--resource-card-aspect-ratio, auto);
    object-fit: cover;
    border-radius: var(--resource-card-corner-radius);
    opacity: var(--resource-card-primary-image-opacity);
  }

  .resource-card__image--secondary {
    position: absolute;
    top: 0;
    opacity: var(--resource-card-secondary-image-opacity);
    border-radius: var(--resource-card-corner-radius);
  }

  .resource-card__media:empty {
    display: none;
  }

  .resource-card__image-placeholder {
    padding: var(--padding-sm);
    font-size: var(--font-size--lg);
    line-height: var(--line-height--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-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-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:323) */
.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:324) */
.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:search-modal (INDEX:327) */
/* Search modal style */
  .search-modal {
    --search-border-radius: var(--style-border-radius-popover);
    --search-border-width: var(--style-border-width);
  }

  .search-modal__content {
    /* Approx set the top so when the content is at max height, the modal is centered */
    --modal-top-margin: calc(50dvh - var(--modal-max-height) / 2 - 2rem);
    --modal-width: 66dvw;

    padding: 0;
    border: var(--style-border-popover);

    @media screen and (min-width: 750px) {
      width: var(--modal-width);
      margin-block-start: var(--modal-top-margin);
      overflow: hidden;
    }
  }

  /* Hide the default dialog backdrop on small screens */
  @media screen and (max-width: 749px) {
    .search-modal__content::backdrop {
      display: none;
    }
  }

  .dialog-modal[open].search-modal__content {
    transform-origin: bottom center;
    animation: search-element-slide-in-bottom 300ms var(--ease-out-quad) forwards;
    border-radius: var(--search-border-radius);
    box-shadow: var(--shadow-popover);

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

  .dialog-modal.search-modal__content.dialog-closing {
    animation: search-element-slide-out-bottom 200ms var(--ease-out-quad) forwards;
  }

  .search-modal__content[open] {
    display: flex;
  }

  .search-modal__content :is(.predictive-search-dropdown, .predictive-search-form__content-wrapper) {
    position: relative;
  }

  .dialog-modal
    .predictive-search-form__header:has(
      .predictive-search__reset-button:not(.predictive-search__reset-button[hidden])
    )::before {
    content: '';
    position: absolute;
    right: calc(var(--padding-sm) + var(--minimum-touch-target));
    top: 0;
    bottom: 0;
    width: var(--border-width-sm);
    background-color: var(--color-border);
  }

  .dialog-modal
    .predictive-search-form__header:has(.predictive-search__reset-button:not(.predictive-search__reset-button[hidden]))
    > .predictive-search__close-modal-button {
    &::before {
      content: none;
    }
  }

  @media screen and (min-width: 750px) {
    .dialog-modal
      .predictive-search-form__header:has(
        .predictive-search__reset-button:not(.predictive-search__reset-button[hidden])
      )::before {
      right: calc(var(--padding-2xl) * 2);
    }
  }

  predictive-search-component {
    --resource-card-corner-radius: var(--product-corner-radius);

    display: flex;
    width: 100%;
    position: relative;
    margin-inline: auto;
    align-items: center;
    background-color: var(--color-background);
    z-index: var(--layer-heightened);
  }

  .predictive-search-form__footer {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;

    @media screen and (min-width: 750px) {
      --to-top-gradient-background: linear-gradient(
        to top,
        rgb(var(--color-background-rgb) / var(--opacity-90)),
        rgb(var(--color-background-rgb) / var(--opacity-80)),
        rgb(var(--color-background-rgb) / var(--opacity-40)),
        transparent
      );

      padding-block: var(--padding-xs) var(--padding-lg);
      background-image: var(--to-top-gradient-background);
    }
  }

  predictive-search-component:has([data-search-results]):not(:has(.predictive-search-results__no-results))
    .predictive-search-form__footer {
    display: block;
  }

  .predictive-search-form {
    position: relative;
    width: 100%;
    align-self: flex-start;
  }

  .predictive-search-form__content {
    max-height: 50dvh;
    overflow-y: auto;
    background-color: var(--color-background);

    /* Firefox */
    scrollbar-width: none;

    /* Webkit browsers */
    &::-webkit-scrollbar {
      display: none;
    }
  }

  .predictive-search-form__content-wrapper {
    position: absolute;
    top: 100%;
    width: 100%;
    left: 0;
    z-index: var(--layer-raised);
    display: flex;
    flex-direction: column;
    border-radius: 0 0 var(--search-border-radius) var(--search-border-radius);
    transition: box-shadow var(--animation-speed) var(--animation-easing);
    transform: translateZ(0);
    will-change: transform, opacity;
    overflow: hidden;

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

    @media screen and (min-width: 750px) {
      max-height: var(--modal-max-height);
    }
  }

  /* Add new rule to apply bottom padding only when search button exists */
  .predictive-search-form__content-wrapper:has([data-search-results]):not(:has(.predictive-search-results__no-results))
    > .predictive-search-form__content {
    padding-block-end: var(--padding-6xl);
  }

  .predictive-search-form__header-inner {
    background: var(--color-background);
    border: var(--search-border-width) solid var(--color-border);
    color: var(--color-foreground);
    border-radius: var(--style-border-radius-popover);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;

    @media screen and (max-width: 749px) {
      border-radius: var(--style-border-radius-inputs);
      border: none;
    }
  }

  .predictive-search-form__header-inner:focus-within {
    outline-offset: var(--focus-outline-offset);

    @media screen and (min-width: 750px) {
      outline: var(--focus-outline-width) solid var(--color-primary);
    }
  }

  .predictive-search-form__header {
    display: flex;
    position: sticky;
    top: 0;
    z-index: var(--layer-heightened);
    width: 100%;
    align-items: center;
    background-color: var(--color-input-background);
    border: var(--search-border-width) solid var(--color-border);
    border-radius: var(--style-border-radius-inputs);

    @media screen and (max-width: 749px) {
      padding: var(--padding-2xs) var(--padding-sm);
    }
  }

  .predictive-search-form__header:focus-within,
  .predictive-search-form__header-inner:focus-within,
  .predictive-search-form__header-inner:has(.search-input:is(:focus, :focus-visible)) {
    outline: none;
    box-shadow: none;
    /* stylelint-disable-next-line declaration-no-important */
    border-color: var(--color-border) !important;
  }

  input.search-input {
    border-radius: var(--style-border-radius-inputs);
    padding-block: var(--padding-sm);
    font-size: var(--font-size--md);
    width: 100%;
    color: var(--color-foreground);
    padding-inline: calc(var(--margin-lg) + var(--icon-size-lg)) 0;
    background: transparent;
    text-overflow: ellipsis;
    overflow: hidden;
    outline: none;
    border: 0;
  }

  .search-input::placeholder {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .search-input,
  .search-input:is(:focus, :focus-visible, :focus-within),
  .predictive-search-form__header *:is(:focus, :focus-visible) {
    outline: none;
    box-shadow: none;
  }

  .search-input:hover {
    background-color: transparent;
  }

  .predictive-search__icon {
    position: absolute;
    left: var(--margin-xl);
    top: auto;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-60));

    @media screen and (min-width: 750px) {
      left: var(--margin-md);
    }
  }

  .predictive-search__icon > svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  .predictive-search__reset-button {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    padding: 0;
    margin-inline-end: var(--margin-md);
    background: transparent;
    color: var(--color-foreground);
    opacity: 0.68;
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-out),
      visibility var(--animation-speed-medium) var(--animation-timing-fade-out);

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

    &:active {
      transform: scale(0.9);
      transition: transform 100ms var(--animation-timing-active);
    }

    @media screen and (min-width: 750px) {
      margin-inline-end: var(--margin-2xs);
    }
  }

  .predictive-search__reset-button[hidden] {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }

  .predictive-search__reset-button-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    transition: background-color var(--animation-speed-medium) ease-in-out,
      transform var(--animation-speed-medium) var(--animation-timing-bounce);
    border-radius: 50%;

    &:hover {
      background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-8));
    }
  }

  .predictive-search__reset-button:active .predictive-search__reset-button-icon {
    transform: scale(0.85);
    transition-timing-function: var(--animation-timing-active);
    transition-duration: 100ms;
  }

  .predictive-search__reset-button svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  .predictive-search__reset-button-text {
    display: none;
  }

  .predictive-search__search-button {
    margin: auto;
    z-index: var(--layer-raised);
    transition: transform var(--animation-speed-medium) var(--animation-timing-bounce),
      box-shadow var(--animation-speed-medium) var(--animation-timing-hover);
    transform-origin: center;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgb(0 0 0 / var(--opacity-5));
    }

    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
      box-shadow: none;
    }
  }

  .predictive-search__close-modal-button {
    --button-color: var(--color-foreground);
    --button-background-color: transparent;

    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    margin-inline-start: var(--margin-sm);
    padding: 0;
    box-shadow: none;

    &:active {
      transform: scale(0.8);
      transition: transform 100ms var(--animation-timing-active);
    }

    .svg-wrapper,
    svg {
      width: var(--icon-size-xs);
      height: var(--icon-size-xs);
    }
  }

  .predictive-search__close-modal-button:hover {
    --button-color: var(--color-foreground);
    --button-background-color: transparent;
  }
/* END_SNIPPET:search-modal */

/* START_SNIPPET:search (INDEX:328) */
.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:329) */
.section-wrapper {
    --section-height-offset: 0px;
  }

  .section[data-shopify-visual-preview] {
    min-height: var(--section-preview-height);
    padding-top: 0;
  }

  .section[data-shopify-visual-preview] .custom-section-background {
    display: none;
  }

  body:has(> #header-group > .header-section > #header-component[transparent]):not(
      :has(> #header-group > .header-section + .shopify-section)
    )
    > main
    > .section-wrapper:first-child {
    --section-height-offset: var(--header-group-height, 0);
  }

  .custom-section-background {
    grid-column: 1 / -1;
  }

  .custom-section-content {
    z-index: var(--layer-flat);
  }
/* END_SNIPPET:section */

/* START_SNIPPET:site-cart (INDEX:330) */
.u1-navbar:has(> .u1-nav-pill.has-site-cart) {
  --u1-nav-pad: 0px; --u1-nav-bar-h: 60px; --u1-nav-radius: 14px; --u1-nav-top: 14px; top: 14px;
  --u1-nav-w-logo: 476px; --u1-nav-w-product: 476px; --u1-nav-w-mobile: 476px; --u1-nav-mobile-gutter: 14px;
}
.u1-navbar .u1-nav-pill.has-site-cart {
  --sc-promo: #5a31f4; --sc-promo-bg: rgba(90, 49, 244, .1); --sc-cell: 147px;
  --sc-ease: cubic-bezier(.2, .8, .2, 1); --sc-sheet: cubic-bezier(.32, .72, 0, 1);
  --sc-sans: var(--u1-font-family, "Neue Montreal", -apple-system, "Helvetica Neue", Arial, sans-serif);
  --sc-text: var(--u1-font-family-text, var(--sc-sans));
  max-width: calc(100vw - 28px); border: 0; background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 76px 103px rgba(0, 0, 0, .04), 0 16.976px 23.006px rgba(0, 0, 0, .02), 0 5.054px 6.85px rgba(0, 0, 0, .02);
  transition: box-shadow .3s ease, width .42s var(--sc-sheet) .34s, min-width .42s var(--sc-sheet) .34s, border-radius .42s var(--sc-sheet) .34s;
}
.u1-navbar .u1-nav-pill.has-site-cart[data-u1-nav-open="true"][data-u1-nav-overlay-type="cart"] {
  width: min(950px, calc(100vw - 28px)); border-radius: 24px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .06), 0 30px 70px -16px rgba(0, 0, 0, .38);
  transition: box-shadow .3s ease, width .42s var(--sc-sheet), min-width .42s var(--sc-sheet), border-radius .42s var(--sc-sheet);
}
.u1-nav-pill.has-site-cart .u1-nav-bar { padding-inline: 6px; background: #fff; box-shadow: inset 0 -1px 0 transparent; transition: box-shadow .3s ease; }
.u1-nav-pill.has-site-cart[data-u1-nav-open="true"][data-u1-nav-overlay-type="cart"] .u1-nav-bar { box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .05); }
.u1-nav-pill.has-site-cart .u1-nav-overlay-inner--cart { display: none !important; }
.u1-nav-pill.has-site-cart .u1-nav-overlay-inner--menu { padding: 0 14px 14px; }
.u1-nav-pill.has-site-cart[data-u1-nav-overlay-type="cart"] .u1-nav-overlay-wrap { transition: grid-template-rows .4s var(--sc-sheet) !important; }
.u1-nav-pill.has-site-cart[data-u1-nav-open="true"][data-u1-nav-overlay-type="cart"] .u1-nav-overlay-wrap { transition: grid-template-rows .55s var(--sc-sheet) .3s !important; }
.u1-nav-pill.has-site-cart[data-u1-nav-open="true"][data-u1-nav-overlay-type="cart"]:not(.sc-has-items) .u1-nav-overlay-wrap { grid-template-rows: 0fr; }
body:has(.u1-nav-pill.has-site-cart) .u1-nav-backdrop { background: rgba(16, 17, 19, .28); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); transition: opacity .3s ease, visibility 0s .3s; }
body:has(.u1-nav-pill.has-site-cart) .u1-nav-backdrop.is-active { background: rgba(16, 17, 19, .28); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); transition: opacity .3s ease, visibility 0s; }

.site-cart { display: block; color: #1f2022; font-family: var(--sc-sans); }
.site-cart *, .site-cart-panel *, .site-cart *::before, .site-cart-panel *::before { box-sizing: border-box; }
.site-cart :is(h3, p), .site-cart-panel :is(h3, p) { margin: 0; letter-spacing: inherit; text-transform: none; }
.site-cart button, .site-cart-panel button { -webkit-appearance: none; appearance: none; font: inherit; }
.site-cart :is(.sc-pfold, .sc-hfold, .sc-cfold, .sc-efold, .sc-lfold) > div { min-height: 0; overflow: hidden; }
.site-cart .sc-pfold { display: grid; grid-template-rows: 1fr; background-color: transparent; transition: grid-template-rows .4s var(--sc-sheet), background-color 0s linear .9s; }
.u1-nav-pill[data-u1-nav-open="true"][data-u1-nav-overlay-type="cart"] .site-cart .sc-pfold { grid-template-rows: 0fr; background-color: #fff; transition: grid-template-rows .45s var(--sc-sheet) .3s, background-color 0s; }
.site-cart :is(.sc-hfold, .sc-efold, .sc-cfold) { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--sc-sheet); }
.u1-nav-pill[data-u1-nav-open="true"][data-u1-nav-overlay-type="cart"] .site-cart :is(.sc-hfold, .sc-cfold), .u1-nav-pill[data-u1-nav-open="true"][data-u1-nav-overlay-type="cart"] .site-cart:not(.has-items) .sc-efold { grid-template-rows: 1fr; transition: grid-template-rows .45s var(--sc-sheet) .3s; }
.site-cart :is(.sc-hfold, .sc-efold) { background: #fff; }
.site-cart .sc-lfold { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .4s var(--sc-sheet); }
.site-cart.is-compact .sc-pfold, .site-cart.is-compact .sc-lfold, .u1-nav-pill[data-u1-nav-open="true"]:not([data-u1-nav-overlay-type="cart"]) .site-cart :is(.sc-pfold, .sc-lfold), [data-u1-nav-phase="search"] .site-cart :is(.sc-pfold, .sc-lfold) { grid-template-rows: 0fr; }
.u1-nav-pill[data-u1-nav-open="true"][data-u1-nav-overlay-type="cart"] .site-cart.is-compact .sc-lfold { grid-template-rows: 1fr; transition: grid-template-rows .45s var(--sc-sheet) .3s; }

.site-cart .sc-promo {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin: 0; padding: 14px;
  border: 0; border-radius: 0; background: rgba(255, 255, 255, .7); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  font: 400 15px/normal var(--sc-sans); letter-spacing: .3px; color: #000; cursor: pointer; text-align: left;
}
.site-cart .sc-promo:focus-visible { outline: 2px solid #2641dc; outline-offset: -2px; }
.site-cart .sc-promo-l { display: flex; align-items: center; gap: 11px; min-width: 0; white-space: nowrap; }
.site-cart .sc-promo-l b { font-weight: 600; }
.site-cart .sc-unl-wrap { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.site-cart .sc-unl-t { font: 400 15px/normal var(--sc-sans); letter-spacing: .3px; color: #000; }
.site-cart .sc-off { flex: none; padding: 2px 6px; border-radius: 4px; background: var(--sc-promo-bg); color: var(--sc-promo); font: 500 14px/16px var(--sc-sans); white-space: nowrap; }
.site-cart .sc-chev { flex: none; display: block; transition: rotate .3s var(--sc-ease); }
.site-cart .sc-pfold > div { container-type: inline-size; }
.site-cart .sc-promo-sep { flex: none; width: 1px; height: 12px; background: rgba(0, 0, 0, .2); }
.site-cart .sc-promo-time { font: 400 15px/normal var(--sc-sans); letter-spacing: .3px; color: rgba(0, 0, 0, .6); font-variant-numeric: tabular-nums; }
.site-cart .sc-promo-time[hidden] { display: none; }
.site-cart .sc-promo-l:has(.sc-promo-time[hidden]) .sc-promo-sep { display: none; }
@container (max-width: 400px) {
  .site-cart .sc-promo-l:has(.sc-promo-time:not([hidden])) ~ .sc-unl-wrap .sc-unl-t { display: none; }
}
.u1-nav-pill.has-site-cart .u1-nav-countdown, .u1-nav-pill.has-site-cart::after { display: none !important; }
.u1-nav-pill[data-u1-nav-open="true"][data-u1-nav-overlay-type="cart"] .site-cart .sc-chev { rotate: 180deg; }
.site-cart .is-bump, .site-cart-panel .is-bump { animation: sc-pop .5s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes sc-pop { 0% { scale: .7; } 100% { scale: 1; } }

.site-cart .sc-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 20px; padding: 26px 32px 18px; }
.site-cart .sc-hfold > div { container-type: inline-size; }
.site-cart .sc-unl { display: inline-flex; align-items: center; gap: 10px; font: 500 19px/normal var(--sc-sans); color: #000; }
.site-cart .sc-unl-b { padding: 5px 11px; border-radius: 7px; background: var(--sc-promo-bg); color: var(--sc-promo); font: 500 19px/normal var(--sc-sans); font-variant-numeric: tabular-nums; }
.site-cart .sc-head-sep { flex: none; width: 1px; height: 20px; background: rgba(0, 0, 0, .1); }
.site-cart .sc-head-msg { font: 500 15px/normal var(--sc-sans); letter-spacing: .3px; color: rgba(0, 0, 0, .6); font-variant-numeric: tabular-nums; }
.site-cart .sc-head-msg b { font-weight: 500; color: #000; }
.site-cart:not(.has-items) :is(.sc-unl, .sc-head-sep) { display: none; }
@container (max-width: 640px) {
  .site-cart .sc-head-sep { display: none; }
  .site-cart .sc-head-msg { flex-basis: 100%; text-align: center; }
}

.site-cart .sc-ladder { position: relative; background-color: transparent; transition: background-color 0s linear .9s; }
.u1-nav-pill[data-u1-nav-open="true"][data-u1-nav-overlay-type="cart"] .site-cart .sc-ladder { background-color: #fff; transition: none; }
.site-cart .sc-track { position: relative; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; cursor: grab; touch-action: pan-x; }
.site-cart .sc-track::-webkit-scrollbar { display: none; }
.site-cart .sc-track.is-dragging { cursor: grabbing; }
.u1-nav-pill:not([data-u1-nav-open="true"][data-u1-nav-overlay-type="cart"]) .site-cart .sc-track { overflow: hidden; pointer-events: none; }
.site-cart .sc-track-in { position: relative; display: flex; flex-direction: column; width: calc(var(--n, 8) * var(--sc-cell) + 52px); padding: 0 26px; }
.site-cart .sc-cells { display: grid; grid-template-columns: repeat(var(--n, 8), var(--sc-cell)); padding: 14px 0; }
.site-cart .sc-cell { display: flex; flex-direction: column; align-items: center; gap: 4px; user-select: none; font-variant-numeric: tabular-nums; transition: opacity .3s ease; }
.site-cart .sc-cell b { font: 500 17px/normal var(--sc-sans); letter-spacing: .34px; color: rgba(0, 0, 0, .8); transition: color .3s ease; }
.site-cart .sc-cell.is-past { opacity: .4; }
.site-cart .sc-cell:is(.is-past, .is-cur) b { color: var(--sc-promo); }
.site-cart .sc-cell small { font: 500 10.5px/normal var(--sc-sans); letter-spacing: .21px; color: rgba(13, 13, 13, .4); }
.site-cart .sc-tline { position: relative; height: 5px; margin: 0 -26px; background: #d9d9d9; }
.site-cart .sc-tline i { display: block; height: 100%; width: 0; background: var(--sc-promo); transition: width .6s var(--sc-ease); }
.site-cart .sc-ms { position: absolute; top: 0; bottom: 0; width: 1px; translate: -50% 0; background: rgba(255, 255, 255, .5); }
.site-cart .sc-fade { position: absolute; top: 50%; translate: 0 -50%; z-index: 2; display: flex; align-items: center; width: 70px; height: 70px; padding: 10px; pointer-events: none; transition: opacity .2s ease; }
.site-cart .sc-fade--r { right: 0; justify-content: flex-end; background: linear-gradient(to left, #fff, rgba(255, 255, 255, 0)); }
.site-cart .sc-fade--l { left: 0; justify-content: flex-start; background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0)); }
.site-cart .sc-fade.is-off, .u1-nav-pill:not([data-u1-nav-open="true"][data-u1-nav-overlay-type="cart"]) .site-cart .sc-fade { opacity: 0; pointer-events: none; }
.site-cart .sc-tnav { pointer-events: auto; display: block; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: #e2e2e2; color: #000; cursor: pointer; transition: background-color .15s ease; }
.site-cart .sc-fade.is-off .sc-tnav, .u1-nav-pill:not([data-u1-nav-open="true"][data-u1-nav-overlay-type="cart"]) .site-cart .sc-tnav { pointer-events: none; }
.site-cart .sc-tnav:hover { background: #d4d4d4; }
.site-cart .sc-tnav:focus-visible { outline: 2px solid #2641dc; outline-offset: 2px; }
.site-cart .sc-tnav svg { display: block; width: 28px; height: 28px; }
.site-cart .sc-fade--l .sc-tnav svg { scale: -1 1; }

.site-cart .sc-ehero { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 36px 24px 44px; }
.site-cart .sc-ce-illu { width: 170px; margin-bottom: 18px; }
.site-cart .sc-ce-illu svg { display: block; width: 100%; height: auto; }
.site-cart .sc-ce-t { font: 500 20px/1.25 var(--sc-sans); letter-spacing: .1px; color: #1f2022; }
.site-cart .sc-ce-s { margin-top: 8px; max-width: 300px; font: var(--u1-text-body-fw, 400) 14px/1.5 var(--sc-text); color: #5d5d5d; }
.site-cart .sc-ehero .sc-ce-btn { width: auto; margin-top: 24px; padding: 0 32px; }
.site-cart .sc-confetti { position: absolute; inset: 0; z-index: 6; width: 100%; height: 100%; pointer-events: none; }

.site-cart-panel { background: #f0f0f0; color: #1f2022; font-family: var(--sc-sans); }
.site-cart-panel .sc-cart-in { min-height: 0; overflow: auto; max-height: calc(100dvh - 260px); overscroll-behavior: contain; scrollbar-width: none; background: #f0f0f0; container-type: inline-size; }
.site-cart-panel .sc-cart-in::-webkit-scrollbar { display: none; }
.site-cart-panel .sc-cart-pad { padding: 32px; opacity: 0; transition: opacity .15s ease; }
.u1-nav-pill[data-u1-nav-open="true"][data-u1-nav-overlay-type="cart"] .site-cart-panel .sc-cart-pad { opacity: 1; transition: opacity .35s ease .45s; }
.site-cart-panel .sc-cbody { display: flex; align-items: flex-start; gap: 48px; }
.site-cart-panel .sc-ccol { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.site-cart-panel .sc-ccart-h { display: flex; align-items: center; gap: 7px; }
.site-cart-panel .sc-ccart-t { font: 500 14px/normal var(--sc-sans); color: rgba(13, 13, 13, .8); }
.site-cart-panel .sc-ccart-n { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #fff; font: 500 12px/1 var(--sc-sans); letter-spacing: .24px; color: rgba(0, 0, 0, .6); font-variant-numeric: tabular-nums; }
.site-cart-panel .sc-cbody-sep { flex: none; align-self: stretch; width: 1px; background: rgba(0, 0, 0, .1); }
.site-cart-panel .sc-lines { display: flex; flex-direction: column; gap: 20px; }
.site-cart-panel .sc-line { display: flex; align-items: flex-start; gap: 16px; transition: opacity .2s ease; }
.site-cart-panel .sc-line.is-busy { opacity: .5; pointer-events: none; }
.site-cart-panel .sc-line-img { flex: none; width: 111px; height: 111px; border-radius: 12px; overflow: hidden; background: #f5f5f5; }
.site-cart-panel .sc-line-img img { display: block; width: 100%; height: 100%; max-width: none; padding: 12px; object-fit: contain; }
.site-cart-panel .sc-line-info { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 2px 0; }
.site-cart-panel .sc-line-hd { display: flex; flex-direction: column; gap: 6px; }
.site-cart-panel .sc-line-t { margin: 0; font: 500 17px/1 var(--sc-sans); color: rgba(13, 13, 13, .8); text-decoration: none; }
.site-cart-panel .sc-line-d { margin: 0; font: var(--u1-text-body-fw, 400) 10.5px/1.43 var(--sc-text); color: rgba(0, 0, 0, .4); }
.site-cart-panel .sc-line-p { margin: 0; font-size: 13px; color: rgba(13, 13, 13, .6); }
.site-cart-panel .sc-line-ctl { display: flex; align-items: center; gap: 16px; }
.site-cart-panel .sc-step { display: flex; align-items: center; justify-content: space-between; width: 110px; height: 36px; padding: 0 7px; border: 1px solid rgba(13, 13, 13, .15); border-radius: 999px; }
.site-cart-panel :is(.sc-step button, .sc-line-del) {
  display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: rgba(13, 13, 13, .7); cursor: pointer; transition: background-color .15s ease, color .15s ease;
}
.site-cart-panel :is(.sc-step button, .sc-line-del):hover { background: rgba(13, 13, 13, .06); color: #000; }
.site-cart-panel .sc-step button:disabled { opacity: .3; cursor: default; background: none; }
.site-cart-panel :is(.sc-step button, .sc-line-del):focus-visible { outline: 2px solid #2641dc; outline-offset: 1px; }
.site-cart-panel .sc-step svg { display: block; width: 14px; height: 14px; }
.site-cart-panel .sc-line-del svg { display: block; width: 16px; height: 16px; }
.site-cart-panel .sc-step span { font: 500 15px/1 var(--sc-sans); letter-spacing: .3px; color: #000; font-variant-numeric: tabular-nums; }
.site-cart-panel .sc-cside { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 30px; }
.site-cart-panel .sc-csum-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid rgba(0, 0, 0, .1); }
.site-cart-panel .sc-csum-row:first-child { padding-top: 0; }
.site-cart-panel .sc-csum-row:last-child { border-bottom: 0; }
.site-cart-panel .sc-csum-l { font: 500 14px/normal var(--sc-sans); color: rgba(13, 13, 13, .8); }
.site-cart-panel .sc-csum-lw { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.site-cart-panel .sc-csum-lw small { font: 500 10.5px/normal var(--sc-sans); letter-spacing: .21px; color: rgba(0, 0, 0, .4); }
.site-cart-panel .sc-amt { display: inline-block; font: 400 14px/1 var(--sc-sans); color: #000; font-variant-numeric: tabular-nums; white-space: nowrap; }
.site-cart-panel .sc-amt--lg { font-size: 18px; }
.site-cart-panel .sc-save-pill { padding: 8px 14px; border-radius: 999px; background: var(--sc-promo); color: #fff; font-size: 18px; }
.site-cart-panel .sc-cbtns { display: flex; flex-direction: column; gap: 12px; }
.site-cart-panel .sc-line-free { color: var(--sc-promo); }
.site-cart-panel .sc-slot:empty { display: none; }
.site-cart-panel .u1-nav-cart-progress { display: flex; flex-direction: column; gap: 10px; padding: 0 0 16px; border-bottom: 1px solid rgba(0, 0, 0, .1); }
.site-cart-panel .u1-nav-cart-progress[hidden] { display: none; }
.site-cart-panel .u1-nav-cart-progress__text { margin: 0; font: 500 14px/normal var(--sc-sans); color: rgba(13, 13, 13, .8); text-align: left; }
.site-cart-panel .u1-nav-cart-progress__track { height: 5px; border-radius: 0; background: #d9d9d9; }
.site-cart-panel .u1-nav-cart-progress__fill { border-radius: 0; background: #0d0d0d; transition: width .6s var(--sc-ease); }
.site-cart-panel .sc-slot[data-sc-slot="ship"]:has(.u1-nav-cart-progress:not([hidden])) + .sc-csum .sc-csum-row:first-child { padding-top: 16px; }
.site-cart-panel .u1-nav-cart-upsells { padding: 20px 0 0; border-top: 1px solid rgba(0, 0, 0, .1); }
.site-cart-panel .u1-nav-cart-upsells__title { margin: 0 0 4px; font: 500 14px/normal var(--sc-sans); color: rgba(13, 13, 13, .8); }
.site-cart-panel .u1-nav-cart-upsell { grid-template-columns: 72px 1fr auto; column-gap: 16px; padding: 14px 0; border-top: 0; }
.site-cart-panel .u1-nav-cart-upsell__image { width: 72px; height: 72px; border-radius: 12px; background: #fff; }
.site-cart-panel .u1-nav-cart-upsell__image img { padding: 8px; object-fit: contain; }
.site-cart-panel .u1-nav-cart-upsell__title { font: 500 15px/1.2 var(--sc-sans); color: rgba(13, 13, 13, .8); }
.site-cart-panel .u1-nav-cart-upsell__prices { font: 400 13px/1 var(--sc-sans); color: rgba(13, 13, 13, .6); }
.site-cart-panel .u1-nav-cart-upsell__price { color: rgba(13, 13, 13, .6); }
.site-cart-panel .u1-nav-cart-upsell__action .u1-btn .u1-btn__inner { height: 36px; padding: 0 16px; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1px rgba(13, 13, 13, .15); font: 500 14px/1 var(--sc-sans); color: #000; transition: box-shadow .2s ease; }
.site-cart-panel .u1-nav-cart-upsell__action .u1-btn:hover .u1-btn__inner { box-shadow: inset 0 0 0 1px rgba(13, 13, 13, .3); }
.site-cart-panel .u1-nav-cart-progress[data-reached="true"] .u1-nav-cart-progress__text { color: rgba(13, 13, 13, .8); }
.site-cart-panel .u1-nav-cart-progress[data-reached="true"] .u1-nav-cart-progress__fill { background: #0d0d0d; }
:is(.site-cart, .site-cart-panel) .sc-cbtn {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 52px; padding: 0 24px;
  border-radius: 999px; cursor: pointer; font: 500 18px/1 var(--sc-sans); text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease, scale .15s ease;
}
:is(.site-cart, .site-cart-panel) .sc-cbtn:active { scale: .985; }
:is(.site-cart, .site-cart-panel) .sc-cbtn:focus-visible { outline: 2px solid #2641dc; outline-offset: 3px; }
:is(.site-cart, .site-cart-panel) .sc-cbtn--main { border: 0; background: #0d0d0d; color: #fff; }
:is(.site-cart, .site-cart-panel) .sc-cbtn--main:hover { background: #000; color: #fff; }
:is(.site-cart, .site-cart-panel) .sc-cbtn--line { border: 1px solid rgba(0, 0, 0, .1); background: transparent; color: #000; }
:is(.site-cart, .site-cart-panel) .sc-cbtn--line:hover { border-color: rgba(0, 0, 0, .28); }
@container (max-width: 699px) {
  .site-cart-panel .sc-cbody { flex-direction: column; align-items: stretch; gap: 28px; }
  .site-cart-panel .sc-lines { width: 100%; }
  .site-cart-panel .sc-cbody-sep { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .u1-navbar .u1-nav-pill.has-site-cart, .u1-nav-pill.has-site-cart .u1-nav-bar, .u1-nav-pill.has-site-cart .u1-nav-overlay-wrap,
  .site-cart :is(.sc-pfold, .sc-hfold, .sc-cfold, .sc-efold, .sc-lfold, .sc-ladder, .sc-chev, .sc-cell, .sc-cell b, .sc-fade, .sc-tnav, .sc-tline i),
  .site-cart-panel :is(.sc-cart-pad, .sc-cbtn), body:has(.u1-nav-pill.has-site-cart) .u1-nav-backdrop { transition: none !important; }
  .site-cart .is-bump, .site-cart-panel .is-bump { animation: none; }
}
/* END_SNIPPET:site-cart */

/* START_SNIPPET:skip-to-content-link (INDEX:332) */
.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:334) */
.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:335) */
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:336) */
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:338) */
/*
   * 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:340) */
.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:text (INDEX:348) */
:root {
    --text-align-default: left;
  }

  [style*='--horizontal-alignment: center'] .text-block {
    --text-align-default: center;
  }

  [style*='--horizontal-alignment: flex-end'] .text-block {
    --text-align-default: right;
  }

  [style*='--horizontal-alignment: flex-start'] > .text-block {
    --text-align-default: left;
  }

  [style*='--horizontal-alignment: center'] > .text-block {
    --text-align-default: center;
  }

  [style*='--horizontal-alignment: flex-end'] > .text-block {
    --text-align-default: right;
  }

  .text-block {
    width: var(--width);
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: var(--horizontal-alignment);
  }

  .text-block > * {
    width: var(--width);
    max-inline-size: min(100%, var(--max-width, 100%));
    text-align: var(--text-align, var(--text-align-default));
    text-wrap: var(--text-wrap);
  }

  .text-block:not(.text-block--full-width).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: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 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);
  }

  /* Color custom del picker (pisa al select de color del scheme) */
  .u1-text-color,
  .u1-text-color > :is(h1, h2, h3, h4, h5, h6, p, *) {
    color: var(--u1-text-color);
  }
  /* Gradient de texto: del color base (picker o scheme) al color final */
  .u1-text-gradient,
  .u1-text-gradient > :is(h1, h2, h3, h4, h5, h6, p, *) {
    background: linear-gradient(var(--u1-text-grad-dir, to right), var(--u1-text-color, currentColor), var(--u1-text-grad-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
/* END_SNIPPET:text */

/* START_SNIPPET:u1-discovery-newsletter-shopify (INDEX:367) */
.u1-dm-newsletter {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}

.u1-dm-newsletter__klaviyo {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.u1-dm-newsletter__form {
  width: 100%;
  margin: 0;
}

/*
  Contenedor pill: capa inferior con material Shift Foundation .u1-glass--weak.
*/
.u1-dm-newsletter__shell {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 9999px;
  --u1-nl-shell-inset-ring: 5px;
  padding-block: var(--u1-nl-shell-inset-ring);
  padding-inline-end: var(--u1-nl-shell-inset-ring);
  padding-inline-start: 14px;
  min-height: 48px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  border: none;
  background: transparent;
}

/* Sin vidrio: pill outline (paridad con modo “solo borde” en theme editor) */
.u1-dm-newsletter__shell.u1-dm-newsletter__shell--flat {
  border: 1px solid var(--stroke-primary, rgba(13, 13, 13, 0.12));
  transition: border-color 0.18s ease;
}

.u1-dm-newsletter__shell.u1-dm-newsletter__shell--flat:focus-within {
  border-color: var(--text-primary, #0d0d0d);
  box-shadow: none !important;
}

.color-scheme-2 .u1-dm-newsletter__shell.u1-dm-newsletter__shell--flat:focus-within {
  border-color: var(--text-primary);
}

.u1-dm-newsletter__shell > .u1-dm-newsletter__glass {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
}

/*
  Vidrio claro tipo “light frost”: dentro de `.color-scheme-2`, el tema pisa
  --glass-weak-* con tintes oscuros; la pill queda ahumada/negra sobre fondos claros.
  Forzamos el set del modo light (+ un pelín más denso para leer texto).
*/
.u1-dm-newsletter__glass.u1-glass--weak.u1-dm-newsletter__glass--frost-light {
  --glass-weak-bg-1: rgba(255, 255, 255, 0.52);
  --glass-weak-bg-2: rgba(255, 255, 255, 0);
  --glass-weak-bg-dodge: #262626;
  --glass-weak-bg-burn: rgba(38, 38, 38, 0);
  border-color: rgba(255, 255, 255, 0.42);
}

.u1-dm-newsletter__form-row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 6px;
  width: 100%;
  min-width: 0;
  flex: 1 1 auto;
  box-sizing: border-box;
}

.u1-dm-newsletter__field {
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.u1-dm-newsletter__input {
  flex: 1 1 auto;
  min-width: 0;
  align-self: center;
  width: 100%;
  height: 38px;
  box-sizing: border-box;
  padding: 0 8px 0 0;
  border: 0 !important;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
  background: transparent !important;
  background-color: transparent !important;
  color: #0d0d0d;
  font-family: var(--font-body--family, inherit);
  font-size: var(--u1-body-s-size, 14px);
  line-height: var(--u1-body-s-lh, 1.5);
  letter-spacing: var(--u1-body-s-ls, 0.02em);
}

.u1-dm-newsletter__input:hover,
.u1-dm-newsletter__input:focus,
.u1-dm-newsletter__input:focus-visible {
  background: transparent !important;
  background-color: transparent !important;
}

.u1-dm-newsletter__input:focus,
.u1-dm-newsletter__input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Ring inset en shell (discovery, footer u otro uso con color-scheme-2) */
.u1-dm-newsletter__shell:focus-within {
  box-shadow: inset 0 0 0 2px rgba(13, 13, 13, 0.22);
}

.color-scheme-2 .u1-dm-newsletter__shell:focus-within {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.28);
}

.u1-dm-newsletter__input::placeholder {
  color: #767676;
  opacity: 1;
}

.u1-dm-newsletter__input:-webkit-autofill,
.u1-dm-newsletter__input:-webkit-autofill:hover,
.u1-dm-newsletter__input:-webkit-autofill:focus {
  -webkit-text-fill-color: #0d0d0d;
  transition: background-color 99999s ease-out;
  -webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.35) inset;
  box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.35) inset;
}

.color-scheme-2 .u1-dm-newsletter__input:-webkit-autofill,
.color-scheme-2 .u1-dm-newsletter__input:-webkit-autofill:hover,
.color-scheme-2 .u1-dm-newsletter__input:-webkit-autofill:focus {
  -webkit-text-fill-color: inherit;
}

.u1-dm-newsletter__submit {
  grid-column: 2;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-self: end;
}

.u1-dm-newsletter__submit .u1-btn.u1-btn--ui {
  margin: 0 !important;
}

/* Con .is-loading el DS oculta icono por defecto; reforzamos por si algún tema pisa specificity */
.u1-dm-newsletter__submit .u1-btn.u1-btn--ui.is-loading .u1-btn__icon {
  display: none !important;
}

.u1-dm-newsletter__msg {
  margin: 10px 0 0;
  padding: 0 6px;
  font-family: var(--font-body--family, inherit);
  font-size: var(--u1-body-xs-size, 12px);
  line-height: var(--u1-body-xs-lh, 1.4);
  letter-spacing: var(--u1-body-xs-ls, 0.025em);
  color: var(--text-secondary);
}

.u1-dm-newsletter__msg--error {
  color: var(--interactive-label-danger-secondary, #e02e2a);
}


/* Vidrio oscuro (glass_background: dark, Fermin 2026-10-15): para heros oscuros, donde el
   frost claro se ve como un gris chato. Negro translucido, borde blanco sutil; las capas del
   material weak no se usan. Email y placeholder en blanco.
   SIN backdrop-filter a proposito: el form entra con una transicion de opacidad
   (.u1-dm__form, 600 ms) y mientras un ancestro tiene opacity < 1 el navegador no desenfoca
   lo de atras; el blur aparecia de golpe al terminar. Fondo algo mas denso en su lugar. */
.u1-dm-newsletter__glass.u1-glass--weak.u1-dm-newsletter__glass--dark {
  /* Frost: velo claro arriba sobre negro translucido + blur real (Fermin 15/10: muy transparente) */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%),
    rgba(22, 22, 28, 0.38);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.u1-dm-newsletter__glass--dark > .u1-glass__layer {
  display: none;
}
.u1-dm-newsletter__shell--dark .u1-dm-newsletter__input {
  color: #fff;
}
.u1-dm-newsletter__shell--dark .u1-dm-newsletter__input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

/* Check del mensaje de exito (adaptado de "Success check", transitions.dev): entra girando,
   desenfocado y subiendo, y el trazo se dibuja. Arranca despues de la entrada del hero. */
.u1-dm-newsletter__msg--success {
  display: flex;
  align-items: center;
  justify-content: inherit;
  gap: 8px;
}
.u1-dm-newsletter__check {
  display: inline-flex;
  flex-shrink: 0;
  opacity: 0;
  transform-origin: center;
  animation:
    u1-nl-check-fade 500ms cubic-bezier(0.22, 1, 0.36, 1) 900ms both,
    u1-nl-check-rotate 500ms cubic-bezier(0.22, 1, 0.36, 1) 900ms both,
    u1-nl-check-blur 500ms cubic-bezier(0.22, 1, 0.36, 1) 900ms both,
    u1-nl-check-bob 500ms cubic-bezier(0.34, 1.35, 0.64, 1) 900ms both;
}
.u1-dm-newsletter__check svg { display: block; overflow: visible; }
.u1-dm-newsletter__check path {
  stroke-dasharray: 19;
  stroke-dashoffset: 19;
  animation: u1-nl-check-draw 500ms cubic-bezier(0.22, 1, 0.36, 1) 980ms both;
}
@keyframes u1-nl-check-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes u1-nl-check-rotate { from { transform: rotate(80deg); } to { transform: rotate(0deg); } }
@keyframes u1-nl-check-blur { from { filter: blur(10px); } to { filter: blur(0); } }
@keyframes u1-nl-check-bob { from { translate: 0 12px; } to { translate: 0 0; } }
@keyframes u1-nl-check-draw { to { stroke-dashoffset: 0; } }

/* Mail invalido (adaptado de "Error state shake", transitions.dev): la pildora tiembla y el
   borde pasa a rojo; vuelve a la normalidad a los 3 s o cuando se escribe */
.u1-dm-newsletter__glass,
.u1-dm-newsletter__shell.u1-dm-newsletter__shell--flat {
  transition: border-color 280ms ease-out;
}
.u1-dm-newsletter__shell.is-error .u1-dm-newsletter__glass,
.u1-dm-newsletter__shell.u1-dm-newsletter__shell--flat.is-error {
  border-color: var(--interactive-label-danger-secondary, #e02e2a);
}
.u1-dm-newsletter__shell.is-shaking {
  animation: u1-nl-shake 280ms linear;
}
@keyframes u1-nl-shake {
  0%      { transform: translateX(0);    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  28.57%  { transform: translateX(6px);  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  57.14%  { transform: translateX(-6px); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  78.57%  { transform: translateX(4px);  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  100%    { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .u1-dm-newsletter__check { animation: none; opacity: 1; }
  .u1-dm-newsletter__check path { animation: none; stroke-dashoffset: 0; }
  .u1-dm-newsletter__shell.is-shaking { animation: none; }
}

/* iPhone hace zoom al enfocar un input con letra < 16px y mueve toda la pagina (Fermin 16/10).
   En mobile el campo va a 16px, el minimo que lo evita. */
@media screen and (max-width: 1023px) {
  .u1-dm-newsletter .u1-dm-newsletter__input { font-size: 16px; }
}

/* El display:flex del mensaje de exito no puede ganarle al atributo hidden (modo Klaviyo:
   el mensaje va en el HTML oculto y el JS lo muestra solo despues de enviar) */
.u1-dm-newsletter__msg[hidden],
.u1-dm-newsletter__msg--success[hidden] { display: none !important; }
/* Salida del mensaje de exito (fundido) */
.u1-dm-newsletter__msg--success { transition: opacity 0.4s ease; }
.u1-dm-newsletter__msg--success.is-leaving { opacity: 0; }
/* END_SNIPPET:u1-discovery-newsletter-shopify */

/* START_SNIPPET:variant-main-picker (INDEX:501) */
/* 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-border);
    border-radius: var(--style-border-radius-inputs);
    align-items: center;
    margin-top: var(--margin-2xs);
    overflow: clip;
  }

  .variant-option__select-wrapper:has(.swatch) {
    --variant-picker-swatch-width: 20px;
    --variant-picker-swatch-height: 20px;
  }

  .variant-option__select-wrapper:hover {
    border-color: var(--color-variant-hover-border);
  }

  .variant-option__select:focus-visible {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .variant-option__select {
    padding-block: var(--padding-md);
    padding-inline: var(--padding-lg) calc(var(--padding-lg) + var(--icon-size-2xs));
    appearance: none;
    border: 0;
    width: 100%;
    margin: 0;
    cursor: pointer;
  }

  .variant-option__select-wrapper .icon {
    position: absolute;
    right: var(--padding-md);
    top: 50%;
    transform: translateY(-50%);
    width: var(--icon-size-2xs);
    height: var(--icon-size-2xs);
    pointer-events: none;
  }

  .variant-option__select--has-swatch {
    padding-inline-start: calc((2 * var(--padding-sm)) + var(--variant-picker-swatch-width));
  }

  .variant-option__select-wrapper .swatch {
    position: absolute;
    top: 50%;
    left: var(--padding-md);
    transform: translateY(-50%);
  }

  /* Variant picker alignment modifiers */
  .variant-picker--center,
  .variant-picker--center .variant-option {
    text-align: center;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .variant-picker--right,
  .variant-picker--right .variant-option {
    text-align: right;
    justify-content: right;
  }
/* END_SNIPPET:variant-main-picker */

/* START_SNIPPET:variant-swatches (INDEX:502) */
swatches-variant-picker-component {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: var(--product-swatches-alignment-mobile);

    @media screen and (min-width: 750px) {
      justify-content: var(--product-swatches-alignment);
    }

    --overflow-list-padding-block: calc(
        var(--product-swatches-padding-block-start) + var(--focus-outline-offset) + var(--focus-outline-width)
      )
      calc(var(--product-swatches-padding-block-end) + var(--focus-outline-offset) + var(--focus-outline-width));
    --overflow-list-padding-inline: calc(
        var(--product-swatches-padding-inline-start) + var(--focus-outline-offset) + (1.5 * var(--focus-outline-width))
      )
      calc(var(--product-swatches-padding-inline-end) + var(--focus-outline-offset) + var(--focus-outline-width));

    overflow-list::part(list) {
      gap: var(--gap-sm);
    }
  }

  swatches-variant-picker-component overflow-list[disabled='true'] {
    --overflow-list-padding-block: 0px;
    margin-block-start: calc(
      var(--product-swatches-padding-block-start) + var(--focus-outline-offset) + var(--focus-outline-width)
    );
    margin-block-end: calc(
      var(--product-swatches-padding-block-end) + var(--focus-outline-offset) + var(--focus-outline-width)
    );
  }

  .hidden-swatches__count {
    display: flex;
    align-self: center;
    align-items: center;
    justify-content: center;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
    background-color: transparent;
    padding: 0;
    border: 0;
    border-radius: 0;

    &::before {
      /* This doesn't work in Safari without the counter-reset. https://stackoverflow.com/a/40179718 */
      counter-reset: overflow-count var(--overflow-count);
      content: '+' counter(overflow-count);
      line-height: 1;
      cursor: pointer;
    }
  }

  .hidden-swatches__count:hover {
    color: var(--color-foreground-rgb);
  }
/* END_SNIPPET:variant-swatches */

/* START_SNIPPET:video (INDEX:503) */
.video-interaction-hint {
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: var(--layer-flat);
  }

  .video-interaction-hint:hover {
    opacity: 1;
  }
/* END_SNIPPET:video */

/* START_SNIPPET:volume-pricing-info (INDEX:504) */
.volume-pricing-info {
    display: inline-flex;
  }

  .volume-pricing-info__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    color: var(--color-foreground-secondary);
    cursor: pointer;
    transition: color var(--animation-speed) var(--animation-easing);
    flex-shrink: 0;
  }

  .volume-pricing-info__button:hover {
    color: var(--color-foreground);
  }

  .volume-pricing-info__button .svg-wrapper {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .volume-pricing-info__button--with-label {
    width: auto;
    gap: var(--gap-sm);
  }

  .volume-pricing-info__popover {
    --volume-pricing-popover-max-width: 320px;
    --volume-pricing-popover-spacing: 8px;
    --volume-pricing-popover-viewport-margin: 16px;

    min-inline-size: 280px;
    max-inline-size: var(--volume-pricing-popover-max-width);
    background: var(--color-background);
    border: var(--style-border-popover);
    border-radius: var(--style-border-radius-popover, 0);
    box-shadow: var(--shadow-popover);
    overflow: hidden;
    padding: 0;
    margin: 0;
    transition-property: display, opacity, translate;
    transition-duration: 0.3s;
    transition-timing-function: var(--ease-out-quad);
    transition-behavior: allow-discrete;
    translate: 0 20px;
    opacity: 0;
  }

  /* Native anchor positioning for supported browsers */
  .volume-pricing-info__popover {
    inset: unset;
    top: calc(anchor(bottom) + var(--volume-pricing-popover-spacing));
    left: anchor(left);
  }

  @supports (position-try-fallbacks: --top-left) {
    .volume-pricing-info__popover {
      position-try-fallbacks: --top-left;
    }

    @position-try --top-left {
      top: calc(anchor(top) - var(--volume-pricing-popover-spacing));
      bottom: auto;
      transform: translateY(-100%);
    }
  }

  /* Fallback positioning using custom properties */
  @supports not (position-anchor: --volume-pricing-trigger) {
    .volume-pricing-info__popover {
      position: fixed;
      top: calc(var(--anchor-bottom) * 1px + var(--volume-pricing-popover-spacing));
      left: max(
        var(--volume-pricing-popover-viewport-margin),
        min(
          var(--anchor-left) * 1px,
          100vw - var(--volume-pricing-popover-max-width) - var(--volume-pricing-popover-viewport-margin)
        )
      );
    }
  }

  .volume-pricing-info__popover:popover-open {
    translate: 0 0;
    opacity: 1;
  }

  @starting-style {
    .volume-pricing-info__popover:popover-open {
      translate: 0 20px;
      opacity: 0;
    }
  }

  .volume-pricing-info__rules {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
    padding: var(--padding-md);
    font-size: var(--font-size--xs);
  }

  .volume-pricing-info__rules,
  .volume-pricing-info__rules > span {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .volume-pricing-info__table {
    display: flex;
    flex-direction: column;
  }

  .volume-pricing-info__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--padding-sm) var(--padding-md);
    font-size: var(--font-size--sm);
    background: var(--color-background);
    border-inline-start: 3px solid transparent;
    transition: border-color var(--animation-speed) var(--animation-easing);
  }

  .volume-pricing-info__row:nth-child(odd) {
    background: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .volume-pricing-info__row--active {
    border-inline-start-color: var(--color-foreground);
    font-weight: var(--font-weight-medium);
  }

  .volume-pricing-info__quantity {
    color: var(--color-foreground);
  }

  .volume-pricing-info__price {
    display: flex;
    align-items: center;
    color: var(--color-foreground);
  }

  .volume-pricing-info__checkmark {
    display: none;
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    color: var(--color-primary);
  }

  .volume-pricing-info__row--active .volume-pricing-info__checkmark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
/* END_SNIPPET:volume-pricing-info */