/** Shopify CDN: Minification failed

Line 2287:2 Unexpected "{"
Line 2287:3 Expected identifier but found "%"
Line 2315:2 Unexpected "{"
Line 2315:3 Expected identifier but found "%"
Line 2318:4 Unexpected "{"
Line 2318:5 Expected identifier but found "%"
Line 2324:4 Unexpected "{"
Line 2324:5 Expected identifier but found "%"
Line 2332:4 Unexpected "{"
Line 2332:5 Expected identifier but found "%"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:banner-imagen-boton (INDEX:1) */
.cbn-banner {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: var(--cbn-height-mobile, 350px);
}

.cbn-banner.cbn-has-link {
  cursor: pointer;
}

.cbn-banner__picture,
.cbn-banner__image,
.cbn-banner__placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cbn-banner__overlay {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: var(--cbn-overlay-opacity, 0);
  pointer-events: none;
}

.cbn-position-top-left {
  top: var(--cbn-offset-mobile, 16px);
  left: var(--cbn-offset-mobile, 16px);
}

.cbn-position-top-right {
  top: var(--cbn-offset-mobile, 16px);
  right: var(--cbn-offset-mobile, 16px);
}

.cbn-position-bottom-left {
  bottom: var(--cbn-offset-mobile, 16px);
  left: var(--cbn-offset-mobile, 16px);
}

.cbn-position-bottom-right {
  bottom: var(--cbn-offset-mobile, 16px);
  right: var(--cbn-offset-mobile, 16px);
}

.cbn-position-center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Texto grande, siempre contenido dentro del banner (overflow: hidden en
   .cbn-banner ya se encarga de que nunca sobrepase la imagen). Se revela
   progresivamente vía clip-path a medida que --cbn-reveal avanza de 0 a 1,
   valor que el script del final actualiza en cada frame de scroll. */
.cbn-banner__text-wrap {
  position: absolute;
  z-index: 3;
  max-width: calc(100% - (var(--cbn-offset-mobile, 16px) * 2));
  pointer-events: none;
}

.cbn-banner__text {
  margin: 0;
  font-weight: 700;
  line-height: 1.05;
  color: var(--cbn-text-color, #fff);
  font-size: var(--cbn-text-size-mobile, 32px);
}

.cbn-banner.has-reveal-js .cbn-banner__text {
  clip-path: inset(0 0 calc((1 - var(--cbn-reveal, 0)) * 100%) 0);
  transition: clip-path var(--cbn-reveal-duration-mobile, 150ms) linear;
  will-change: clip-path;
}

/* ---------- Efectos hover/active (solo cuando hay colección) ---------- */

/* Efecto 1: Zoom suave de la imagen */
.cbn-effect-zoom .cbn-banner__image,
.cbn-effect-zoom .cbn-banner__placeholder {
  transition: transform var(--cbn-hover-duration, 400ms) ease;
}

.cbn-effect-zoom:hover .cbn-banner__image,
.cbn-effect-zoom:hover .cbn-banner__placeholder {
  transform: scale(1.06);
}

.cbn-effect-zoom:active .cbn-banner__image,
.cbn-effect-zoom:active .cbn-banner__placeholder {
  transform: scale(1.02);
}

/* Efecto 2: Cristal esmerilado (glass) que aparece encima de la imagen */
.cbn-banner__glass {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  border: 1px solid rgba(255, 255, 255, 0);
  transition:
    opacity var(--cbn-hover-duration, 400ms) ease,
    backdrop-filter var(--cbn-hover-duration, 400ms) ease,
    border-color var(--cbn-hover-duration, 400ms) ease;
}

.cbn-effect-glass:hover .cbn-banner__glass {
  opacity: 1;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border-color: rgba(255, 255, 255, 0.35);
}

.cbn-effect-glass:active .cbn-banner__glass {
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  background: rgba(255, 255, 255, 0.2);
}

/* Efecto 3: Viñeta que oscurece los bordes */
.cbn-banner__vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0) 40%,
    rgba(0, 0, 0, 0.55) 100%
  );
  transition: opacity var(--cbn-hover-duration, 400ms) ease;
}

.cbn-effect-vignette:hover .cbn-banner__vignette {
  opacity: 1;
}

.cbn-effect-vignette:active .cbn-banner__vignette {
  opacity: 1;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0) 25%,
    rgba(0, 0, 0, 0.7) 100%
  );
}

@media screen and (min-width: 750px) {
  .cbn-banner {
    height: var(--cbn-height-desktop, 500px);
  }

  .cbn-position-top-left,
  .cbn-position-top-right {
    top: var(--cbn-offset-desktop, 24px);
  }

  .cbn-position-bottom-left,
  .cbn-position-bottom-right {
    bottom: var(--cbn-offset-desktop, 24px);
  }

  .cbn-position-top-left,
  .cbn-position-bottom-left {
    left: var(--cbn-offset-desktop, 24px);
  }

  .cbn-position-top-right,
  .cbn-position-bottom-right {
    right: var(--cbn-offset-desktop, 24px);
  }

  .cbn-banner__text-wrap {
    max-width: calc(100% - (var(--cbn-offset-desktop, 24px) * 2));
  }

  .cbn-banner__text {
    font-size: var(--cbn-text-size-desktop, 60px);
  }

  .cbn-banner.has-reveal-js .cbn-banner__text {
    transition: clip-path var(--cbn-reveal-duration-desktop, 150ms) linear;
  }
}
/* END_SECTION:banner-imagen-boton */

/* START_SECTION:brand-manifesto (INDEX:2) */
.brand-manifesto {
    position: relative;
    overflow: hidden;
    padding: 120px 48px;
    background-color: var(--brand-manifesto-bg, var(--color-background));
    color: var(--brand-manifesto-text, rgb(var(--color-foreground-rgb) / 1));
  }

  .brand-manifesto--has-image {
    min-height: 460px;
    display: flex;
    align-items: center;
  }

  .brand-manifesto--center {
    text-align: center;
  }

  .brand-manifesto--center .brand-manifesto__content {
    margin-inline: auto;
  }

  .brand-manifesto--left {
    text-align: left;
  }

  .brand-manifesto--has-image.brand-manifesto--center {
    justify-content: center;
  }

  .brand-manifesto--has-image.brand-manifesto--left {
    justify-content: flex-start;
  }

  .brand-manifesto__media {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  .brand-manifesto__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  .brand-manifesto__overlay {
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / var(--brand-manifesto-overlay-opacity, 0.35));
    pointer-events: none;
  }

  .brand-manifesto__content {
    position: relative;
    z-index: 1;
    max-width: 46rem;
  }

  .brand-manifesto__heading {
    margin: 0 0 20px;
    font-size: clamp(1.875rem, 1.2rem + 3vw, 3.5rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.01em;
  }

  .brand-manifesto__body {
    margin: 0;
    font-size: clamp(0.9375rem, 0.85rem + 0.4vw, 1.0625rem);
    line-height: 1.6;
    opacity: 0.72;
  }

  .brand-manifesto__body p {
    margin: 0;
  }

  .brand-manifesto__body p + p {
    margin-top: 12px;
  }

  @media screen and (max-width: 749px) {
    .brand-manifesto {
      padding: 64px 20px;
    }

    .brand-manifesto--has-image {
      min-height: 360px;
    }

    .brand-manifesto__content {
      max-width: none;
    }

    .brand-manifesto__heading {
      margin-bottom: 14px;
    }
  }
/* END_SECTION:brand-manifesto */

/* START_SECTION:collection_grid_glass (INDEX:5) */
.pgrid-section {
  padding-top: var(--pgrid-pad-top, 48px);
  padding-bottom: var(--pgrid-pad-bottom, 48px);
}

.pgrid-inner {
  max-width: var(--pgrid-max, 1400px);
  margin: 0 auto;
  padding-left: var(--pgrid-side-pad, 20px);
  padding-right: var(--pgrid-side-pad, 20px);
}

/* Encabezado: nombre de la colección y tipos debajo */
.pgrid-head {
  margin-bottom: 24px;
}

.pgrid-title {
  font-family: inherit;
  font-size: var(--pgrid-title-size, 22px);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0;
}

.pgrid-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.pgrid-filter {
  font-family: inherit;
  font-size: var(--pgrid-filter-size, 13px);
  line-height: 1;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid rgb(var(--color-foreground-rgb, 18 18 18) / 0.18);
  background: transparent;
  color: var(--color-foreground, #121212);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.pgrid-filter:hover {
  border-color: rgb(var(--color-foreground-rgb, 18 18 18) / 0.5);
}

.pgrid-filter.is-active {
  background: var(--color-foreground, #121212);
  color: var(--color-background, #fff);
  border-color: var(--color-foreground, #121212);
}

.pgrid-empty {
  border: 1px dashed rgb(var(--color-foreground-rgb, 18 18 18) / 0.3);
  padding: 40px 16px;
  text-align: center;
  font-size: 13px;
  opacity: 0.7;
}

.pgrid {
  display: grid;
  grid-template-columns: repeat(var(--pgrid-cols-mobile, 2), minmax(0, 1fr));
  column-gap: var(--pgrid-gap-x, 16px);
  row-gap: var(--pgrid-gap-y, 40px);
}

.pgrid .pcard.is-filtered-out {
  display: none;
}

/* Ajustes de proporción propios de la cuadrícula.
   Van con .pgrid delante para no alterar el bloque suelto. */
.pgrid .pcard-info {
  padding-top: var(--pcard-info-gap, 10px);
}

.pgrid .pcard-row {
  align-items: flex-start;
}

.pgrid .pcard-name {
  font-size: var(--pcard-name-size, 13px);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: var(--pcard-name-lines, 1);
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pgrid .pcard-prices {
  padding-top: 1px;
}

.pgrid .pcard-price-now {
  font-size: var(--pcard-price-size, 13px);
}

.pgrid .pcard-price-was {
  font-size: calc(var(--pcard-price-size, 13px) - 1px);
}

.pgrid .pcard-swatches {
  gap: var(--pcard-swatch-gap, 6px);
}

.pgrid .pcard-swatch {
  width: var(--pcard-swatch-size, 14px);
  height: var(--pcard-swatch-size, 14px);
}

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

  .pgrid-head {
    margin-bottom: 32px;
  }
}

/* En móvil los precios se apilan bajo el nombre si no caben */
@media screen and (max-width: 480px) {
  .pgrid .pcard-row {
    flex-wrap: wrap;
    gap: 2px;
  }

  .pgrid .pcard-prices {
    width: 100%;
    justify-content: flex-start;
  }
}
/* END_SECTION:collection_grid_glass */

/* START_SECTION:editorial-lookbook (INDEX:8) */
.editorial {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .editorial__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }

  .editorial__row--image-right {
    grid-template-columns: 1fr 1fr;
  }

  .editorial__row--image-right .editorial__media {
    order: 2;
  }

  .editorial__row--image-right .editorial__content {
    order: 1;
  }

  .editorial__media {
    aspect-ratio: 4/5;
    overflow: hidden;
    background: rgb(var(--color-foreground-rgb) / 0.04);
  }

  .editorial__image,
  .editorial__placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .editorial__content {
    padding: 48px 64px;
    max-width: 480px;
    margin-inline: auto;
  }

  .editorial__eyebrow {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgb(var(--color-foreground-rgb) / 0.55);
    margin-bottom: 12px;
  }

  .editorial__heading {
    font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem);
    line-height: 1.15;
    margin: 0 0 16px;
  }

  .editorial__body {
    font-size: 15px;
    line-height: 1.6;
    color: rgb(var(--color-foreground-rgb) / 0.75);
  }

  .editorial__body p {
    margin: 0 0 12px;
  }

  .editorial__button {
    margin-top: 24px;
  }

  @media screen and (max-width: 989px) {
    .editorial__content {
      padding: 40px 32px;
    }
  }

  @media screen and (max-width: 749px) {
    .editorial__row,
    .editorial__row--image-right {
      grid-template-columns: 1fr;
    }

    .editorial__row--image-right .editorial__media,
    .editorial__row--image-right .editorial__content {
      order: initial;
    }

    .editorial__media {
      aspect-ratio: 4/3;
    }

    .editorial__content {
      padding: 28px 20px;
      max-width: none;
      text-align: left;
    }
  }
/* END_SECTION:editorial-lookbook */

/* START_SECTION:footer (INDEX:9) */
.footer-content {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: var(--footer-gap);
    row-gap: var(--footer-row-gap);
    align-items: var(--footer-valign, start);
  }

  .footer-content--mobile-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .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: var(--grid-template, repeat(var(--grid-columns), 1fr));
    }

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

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

  /* --- Barra inferior --- */
  .footer-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: var(--bar-align);
    gap: var(--bar-row-gap) var(--bar-gap);
    margin-block-start: var(--bar-space-above);
    margin-block-end: var(--bar-space-below);
    color: var(--bar-color);
    opacity: var(--bar-opacity);
  }

  .footer-bar--divider {
    padding-block-start: var(--bar-space-above);
    border-block-start: var(--bar-border-width) solid var(--bar-border-color);
  }

  .footer-bar--legal-first .footer-bar__social {
    order: 2;
  }

  .footer-bar--stacked {
    flex-direction: column;
    align-items: var(--bar-align);
  }

  .footer-bar__social {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--social-gap);
    margin: 0;
    list-style: none;
    padding: var(--social-pad-top) var(--social-pad-right) var(--social-pad-bottom) var(--social-pad-left);
  }

  .footer-bar__social-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: inherit;
    text-decoration: none;
    font-size: var(--social-size);
    font-weight: var(--social-weight);
    text-transform: var(--social-transform);
    letter-spacing: var(--social-tracking);
    line-height: 1.4;
    transition: opacity 0.2s ease-in-out;
  }

  .footer-bar__icon svg {
    display: block;
    width: var(--social-icon-size);
    height: var(--social-icon-size);
  }

  .footer-bar__legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bar-row-gap) var(--legal-gap);
    font-size: var(--legal-size);
    font-weight: var(--legal-weight);
    text-transform: var(--legal-transform);
    letter-spacing: var(--legal-tracking);
    line-height: 1.5;
    padding: var(--legal-pad-top) var(--legal-pad-right) var(--legal-pad-bottom) var(--legal-pad-left);
  }

  .footer-bar__copyright {
    margin: 0;
  }

  .footer-bar__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bar-row-gap) var(--legal-gap);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .footer-bar__link {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.2s ease-in-out;
  }

  .footer-bar__social-link:hover,
  .footer-bar__link:hover {
    opacity: var(--bar-hover-opacity);
  }

  @media screen and (max-width: 749px) {
    .footer-bar--stack-mobile {
      flex-direction: column;
      align-items: flex-start;
    }

    /* Alineación propia de celular. Se pisan las PROPIEDADES (que viven en
       esta hoja) y no la variable, porque la de escritorio se declara en el
       <style> de la sección y siempre ganaría. Cada una lee primero la
       variable de celular y, si no está, la de escritorio. */
    .footer-bar--m-align,
    .footer-bar--m-align.footer-bar--stack-mobile {
      align-items: var(--bar-align-m, flex-start);
      justify-content: var(--bar-align-m, var(--bar-align));
      text-align: var(--bar-text-m, inherit);
    }

    .footer-bar--m-align .footer-bar__legal,
    .footer-bar--m-align .footer-bar__links,
    .footer-bar--m-align .footer-bar__social {
      justify-content: var(--bar-align-m, var(--bar-align));
    }

    /* Los retoques de separación laterales son para la vista de escritorio:
       en celular descuadrarían el centrado, así que ahí se anulan. */
    .footer-bar--m-align .footer-bar__legal,
    .footer-bar--m-align .footer-bar__social {
      padding-inline: 0;
    }

    /* La lista de enlaces se apila si no cabe, y cada línea va centrada. */
    .footer-bar--m-align .footer-bar__legal {
      width: 100%;
      flex-direction: column;
      align-items: var(--bar-align-m, flex-start);
    }
  }

  /* --- Texto gigante --- */
  .footer-jumbo {
    display: block;
    overflow: clip;
    padding-inline: var(--jumbo-inline-padding);
    margin-block-start: var(--jumbo-space-above);
    margin-block-end: var(--jumbo-space-below);
    text-align: var(--jumbo-align);
    color: var(--jumbo-color);
    line-height: 0;
  }

  .footer-jumbo--bleed {
    width: 100vw;
    margin-inline-start: calc(50% - 50vw);
  }

  .footer-jumbo__text {
    display: inline-block;
    max-width: 100%;
    font-family: var(--jumbo-family);
    font-weight: var(--jumbo-weight);
    font-style: var(--jumbo-style);
    text-transform: var(--jumbo-transform);
    letter-spacing: var(--jumbo-tracking);
    line-height: var(--jumbo-leading);
    opacity: var(--jumbo-opacity);
    white-space: nowrap;
    margin-block-start: calc(var(--jumbo-crop-top) * -1);
    margin-block-end: calc(var(--jumbo-crop-bottom) * -1);
    -webkit-user-select: none;
    user-select: none;
  }

  .footer-jumbo--manual .footer-jumbo__text {
    font-size: var(--jumbo-manual-size);
  }

  /* De esquina a esquina: el texto manda sobre la alineación, porque ya
     ocupa el ancho entero, y se le permite salirse un pelo por la
     izquierda (el desplazamiento que pega el primer trazo al borde). */
  .footer-jumbo--edge {
    text-align: left;
    padding-inline: 0;
  }

  /* Despliegue con el scroll: se descubre de abajo arriba mientras sube
     a su sitio. El recorte lateral va holgado para no comerse los trazos
     que se salen de la caja (cursivas, colas, etc.). */
  .footer-jumbo--reveal .footer-jumbo__text {
    clip-path: inset(calc((1 - var(--jumbo-reveal, 0)) * 102%) -8% -2% -8%);
    transform: translateY(calc((1 - var(--jumbo-reveal, 0)) * var(--jumbo-slide, 0.3em)));
  }

  /* Solo mientras se está descubriendo (lo pone y lo quita el script). */
  .footer-jumbo--reveal.is-revealing .footer-jumbo__text {
    will-change: clip-path, transform;
  }

  @media (prefers-reduced-motion: reduce) {
    .footer-jumbo--reveal .footer-jumbo__text {
      clip-path: none;
      transform: none;
    }
  }

  @media screen and (max-width: 749px) {
    .footer-jumbo--manual .footer-jumbo__text {
      font-size: var(--jumbo-manual-size-mobile);
    }

    .footer-jumbo--hide-mobile {
      display: none;
    }
  }
/* END_SECTION:footer */

/* START_SECTION:header (INDEX:10) */
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;
  }

  /* ══════════════════════════════════════════════════════════════
     EL LOGO SIEMPRE EN EL CENTRO EXACTO.

     El header es una rejilla de tres columnas: izquierda | centro |
     derecha, con la izquierda y la derecha declaradas como `1fr`. El
     detalle es que un `1fr` a secas equivale a `minmax(auto, 1fr)`: su
     mínimo es el ancho del contenido. Como a la izquierda va el menú
     (INICIO, CATÁLOGO, COLECCIONES, NOSOTROS) y a la derecha solo dos
     iconos, la columna izquierda arrastraba un mínimo mucho mayor que
     la derecha, las dos dejaban de medir lo mismo y el centro —el
     logo— quedaba corrido hacia la derecha. Eso es exactamente lo que
     se ve en tu captura.

     Con `minmax(0, 1fr)` las dos columnas laterales miden SIEMPRE lo
     mismo pase lo que pase con su contenido, así que el carril central
     cae en la mitad geométrica de la barra. El logo ya no se mueve.

     (Que el menú pueda no caber en su carril lo resuelve el otro
     cambio: por debajo del ancho configurado se pasa al desplegable.)
     ══════════════════════════════════════════════════════════════ */
  @media screen and (min-width: 750px) {
    #header-component[data-menu-style='menu'] .header__columns:has(.header__column--center) {
      --header-left: minmax(0, 1fr);
      --header-right: minmax(0, 1fr);
    }
  }

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

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

    --closed-underlay-height: 0px;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  /* ================================
     * Glass mode: measurable opacity + persistent across the whole page
     * (overrides the theme's default "solidify on scroll/hover" behavior)
     * ================================ */
  #header-component[data-glass-mode] {
    /* Overrides the .header's "contain: layout" — that containment creates
       an isolated rendering layer and prevents backdrop-filter from "seeing"
       the real page content behind the header, so the blur never showed up. */
    contain: style;

    /* keep the glass panel painted at all times, not just before scrolling */
    --closed-underlay-height: 100%;

    /* Force this element into its own compositing layer. Without this,
       Chrome sometimes computes backdrop-filter correctly (visible in
       DevTools) but paints it as if blur were 0, especially when the
       value depends on a custom property. */
    isolation: isolate;
    transform: translateZ(0);
  }

  #header-component[data-glass-mode] :is(.header__underlay-closed, .header__underlay-open) {
    /* stylelint-disable-next-line declaration-no-important */
    background: rgba(var(--header-glass-tint, 255, 255, 255), var(--header-glass-opacity, 0.4)) !important;
    /* Antes esto llevaba además saturate(1.6). Se quitó: sobre el logo 3D
       (que detrás tiene manchas de color muy vivas para sus reflejos)
       ese realce se veía como un filtro de contraste fuerte encima del
       header. El blur solo, sin realce, deja el vidrio limpio. */
    /* -webkit- prefix goes FIRST so Safari doesn't fall back to the
       unprefixed value it may not fully support yet */
    -webkit-backdrop-filter: blur(var(--header-glass-blur, 12px));
    backdrop-filter: blur(var(--header-glass-blur, 12px));

    /* Force a dedicated compositing layer on the actual blurred element too.

       Ya NO se usa `will-change: backdrop-filter`. Eso es una promesa
       permanente al navegador de que este desenfoque va a cambiar, así
       que Chrome mantenía viva a todas horas —en TODA la tienda— una
       capa de composición del tamaño del header con un backdrop-filter
       listo para recalcularse, se usara o no. Sobre el logo 3D, donde
       el fondo cambia en cada fotograma, ese coste se paga entero
       aunque estas capas estén en opacidad 0 y no se vean.

       `transform: translateZ(0)` ya crea la capa que el blur necesita,
       que es lo único que hacía falta de verdad. Es el mismo cambio que
       ya se hizo en .unf-glass (ver blocks/_header-menu.liquid). */
    transform: translateZ(0);

    box-shadow:
      inset 0 -1px 0 rgba(255, 255, 255, 0.16),
      inset 0 1px 0 rgba(255, 255, 255, 0.1),
      0 8px 24px rgba(0, 0, 0, 0.08);
  }

  /* Force the glass text color to stay put across every state: idle, sticky,
     scrolled, and menu hover/open - so the header never flips to a solid look. */
  #header-component[data-glass-mode] .header__row,
  #header-component[data-glass-mode][data-sticky-state='active'] .header__row,
  #header-component[data-glass-mode]:has(.menu-list__link:is(:hover, [aria-expanded='true'])) .header__row {
    /* stylelint-disable-next-line declaration-no-important */
    --color-foreground: var(--color-transparent-text) !important;
    /* stylelint-disable-next-line declaration-no-important */
    --color-foreground-rgb: var(--color-transparent-text-rgb) !important;
    /* stylelint-disable-next-line declaration-no-important */
    --color-border: var(--color-transparent-text) !important;
    /* stylelint-disable-next-line declaration-no-important */
    --color-border-rgb: var(--color-transparent-text-rgb) !important;
  }

  #header-component[data-glass-mode] .header-logo {
    /* stylelint-disable-next-line declaration-no-important */
    --header-logo-display: unset !important;
    /* stylelint-disable-next-line declaration-no-important */
    --header-logo-inverse-display: unset !important;
  }

  /* ================================
     * Glass mode — forzar persistencia total, sin importar el estado
     * de scroll (idle/active) ni el atributo transparent="not-sticky"
     * que el header normal usa para "solidificarse" al hacer scroll.
     * ================================ */
  #header-component[data-glass-mode] {
    /* stylelint-disable-next-line declaration-no-important */
    opacity: 1 !important;
  }

  #header-component[data-glass-mode]:is([data-sticky-state='idle'], [data-sticky-state='active']) {
    /* stylelint-disable-next-line declaration-no-important */
    opacity: 1 !important;
  }

  #header-component[data-glass-mode] :is(.header__underlay-closed, .header__underlay-open),
  #header-component[data-glass-mode][data-sticky-state='active'] :is(.header__underlay-closed, .header__underlay-open),
  #header-component[data-glass-mode][transparent='not-sticky'] :is(.header__underlay-closed, .header__underlay-open) {
    /* stylelint-disable-next-line declaration-no-important */
    height: 100% !important;
    /* stylelint-disable-next-line declaration-no-important */
    -webkit-backdrop-filter: blur(var(--header-glass-blur, 12px)) !important;
    /* stylelint-disable-next-line declaration-no-important */
    backdrop-filter: blur(var(--header-glass-blur, 12px)) !important;
  }

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

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

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

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

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

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

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

    position: relative;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .dropdown-localization .language-selector:where(:not(.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);
  }

  /* ============================================================
     FIX: Persistencia del efecto glass durante el scroll (sticky)
     Problema: al activarse [data-sticky-state='active'], Chrome
     aplica view-transition-name para animar el header, y esa
     transición "congela" una captura del elemento, rompiendo el
     backdrop-filter en vivo. Aquí desactivamos la view-transition
     solo en modo glass, y reforzamos el blur en TODOS los estados
     con máxima especificidad para que nada lo pise.
     ============================================================ */

  /* 1) Nunca uses view-transition en modo glass: rompe el blur al hacer scroll */
  #header-component[data-glass-mode][data-sticky-state='active'] {
    view-transition-name: none !important;
  }

  /* 2) Refuerzo del blur en TODOS los estados posibles: idle, active, hover, con o sin atributo */
  #header-component[data-glass-mode],
  #header-component[data-glass-mode][data-sticky-state],
  #header-component[data-glass-mode][data-sticky-state='idle'],
  #header-component[data-glass-mode][data-sticky-state='active'],
  #header-component[data-glass-mode][sticky='always'],
  #header-component[data-glass-mode][sticky='scroll-up'] {
    opacity: 1 !important;
    view-transition-name: none !important;
  }

  /* 3) El panel de vidrio (underlay) debe mantenerse SIEMPRE, en cualquier estado */
  #header-component[data-glass-mode] .header__underlay-closed,
  #header-component[data-glass-mode] .header__underlay-open,
  #header-component[data-glass-mode][data-sticky-state='idle'] .header__underlay-closed,
  #header-component[data-glass-mode][data-sticky-state='idle'] .header__underlay-open,
  #header-component[data-glass-mode][data-sticky-state='active'] .header__underlay-closed,
  #header-component[data-glass-mode][data-sticky-state='active'] .header__underlay-open,
  #header-component[data-glass-mode]:hover .header__underlay-closed,
  #header-component[data-glass-mode]:hover .header__underlay-open,
  #header-component[data-glass-mode]:has(.menu-list__link:is(:hover, [aria-expanded='true'])) .header__underlay-closed,
  #header-component[data-glass-mode]:has(.menu-list__link:is(:hover, [aria-expanded='true'])) .header__underlay-open {
    height: 100% !important;
    -webkit-backdrop-filter: blur(var(--header-glass-blur, 12px)) !important;
    backdrop-filter: blur(var(--header-glass-blur, 12px)) !important;
    background: rgba(var(--header-glass-tint, 255, 255, 255), var(--header-glass-opacity, 0.4)) !important;
    transition: none !important;
  }

  /* 4) Evita que el hover sobre el menú "solidifique" los colores en modo glass */
  #header-component[data-glass-mode]:has(.menu-list__link:is(:hover, [aria-expanded='true'])) {
    --color-background: transparent !important;
    --color-background-rgb: transparent !important;
  }

  /* ============================================================
     Colores personalizados de menú e iconos (Inicio/Catálogo/Contacto,
     búsqueda, perfil y carrito) — controlados desde el personalizador
     ============================================================ */
  /* Cada elemento del menu guarda su color en --unf-item-color, en vez de
     pintarlo directamente. Asi las reglas de hover y de atenuado pueden
     reutilizarlo y el color elegido no se pierde al pasar el mouse. */
  #header-component .header-menu .menu-list__list-item:nth-child(1) {
    --unf-item-color: var(--color-menu-link-1, var(--color-foreground));
  }
  #header-component .header-menu .menu-list__list-item:nth-child(2) {
    --unf-item-color: var(--color-menu-link-2, var(--color-foreground));
  }
  #header-component .header-menu .menu-list__list-item:nth-child(3) {
    --unf-item-color: var(--color-menu-link-3, var(--color-foreground));
  }
  #header-component .header-menu .menu-list__list-item:nth-child(4) {
    --unf-item-color: var(--color-menu-link-4, var(--color-foreground));
  }
  #header-component .header-menu .menu-list__list-item:nth-child(5) {
    --unf-item-color: var(--color-menu-link-5, var(--color-foreground));
  }
  #header-component .header-menu .menu-list__list-item:nth-child(6) {
    --unf-item-color: var(--color-menu-link-6, var(--color-foreground));
  }

  #header-component .header-menu .menu-list__list-item .menu-list__link,
  #header-component .header-menu .menu-list__list-item .unf-hm__toggle {
    color: var(--unf-item-color, var(--color-foreground));
  }

  #header-component .search-action .header-actions__action {
    color: var(--color-search-icon-custom, var(--color-foreground));
  }

  /* Botón del menú desplegable (las dos rayas). El SVG usa currentColor,
     así que basta con darle color al botón. Cae al color general del
     header si no se configuró uno propio, y sobre el logo 3D lo pisa
     --color-menu-icon-custom con el valor de ese estado. */
  #header-component .unf-burger,
  #header-component .header__icon--menu {
    color: var(--color-menu-icon-custom, var(--color-foreground));
  }

  #header-component .account-button {
    --color-account-icon: var(--color-account-icon-custom, var(--color-foreground));
  }

  /* El carrito es <cart-icon>, envuelto por un <button> (carrito tipo
     "drawer") o por un <a href="/cart"> (carrito tipo página) según la
     configuración de la tienda. El selector anterior (#cart-icon-bubble,
     que no existe en el markup; y [href*="/cart"], que nunca matchea el
     <button> del drawer) no aplicaba en la mayoría de los casos: por eso
     el color del carrito no cambiaba nunca. Apuntar directo al propio
     elemento <cart-icon> funciona en los dos casos. */
  #header-component cart-icon {
    color: var(--color-cart-icon-custom, var(--color-foreground));
  }

  /* ============================================================
     Acercamiento al pasar el mouse
     Todo lo del header crece un poco al pasar por encima, menos el logo:
     enlaces del menu, su flecha, y los iconos de buscar, cuenta y carrito.
     Se escala el texto y el icono, nunca el <li> ni la <a> de altura
     completa: transformar esos crearia un bloque contenedor y el mega menu
     dejaria de anclarse al header.
     ============================================================ */
  @media (hover: hover) {
    /* Se escala un unico elemento por control: el texto del enlace o el
       envoltorio del icono. Escalar tambien el svg de dentro multiplicaria el
       efecto. La flecha del desplegable se queda fuera porque ya usa transform
       para girar al abrirse. */
    #header-component .menu-list__link-title,
    #header-component .header-actions__action .svg-wrapper,
    #header-component .account-button__icon,
    #header-component .header__icon--menu .svg-wrapper {
      transform-origin: center;
      transition: transform var(--hdr-zoom-speed, 220ms) cubic-bezier(0.22, 1, 0.36, 1);
    }

    #header-component .menu-list__link-title {
      display: inline-block;
    }

    #header-component .menu-list__list-item:hover .menu-list__link-title,
    #header-component .header-actions__action:hover .svg-wrapper,
    #header-component .account-button:hover .account-button__icon,
    #header-component .header__icon--menu:hover .svg-wrapper {
      transform: scale(var(--hdr-zoom, 1.08));
    }
  }

  @media (prefers-reduced-motion: reduce) {
    #header-component .menu-list__link-title,
    #header-component .header-actions__action .svg-wrapper,
    #header-component .account-button__icon,
    #header-component .header__icon--menu .svg-wrapper {
      transition: none;
      /* stylelint-disable-next-line declaration-no-important */
      transform: none !important;
    }
  }

  /* ============================================================
     HEADER INVISIBLE SOLO SOBRE EL LOGO 3D
     ------------------------------------------------------------
     Un script (más abajo) mide en tiempo real si el header se
     superpone con #logo3d-wrapper (sections/logo-3d.liquid) y calcula
     si hay algún panel real abierto (catálogo, colecciones, cajón).
     En vez de intentar detectar eso con selectores CSS complicados
     (:has() encadenados, frágiles y difíciles de verificar), el JS
     pone dos atributos simples y planos en <header-component>:

       [data-hero3d]            → el header está sobre el logo 3D
       [data-hero3d-panel-open] → hay un panel/menú realmente abierto

     Todo lo de aquí abajo usa "!important" a propósito: este header
     ya tiene colores e incluso un "modo vidrio" (glass) configurados
     con sus propios !important puestos ARRIBA en este mismo archivo
     para "no dejarse tapar nunca". Sin !important, esos valores en
     línea (inline, en el propio elemento) y esas reglas previas
     ganan siempre, y nada de esto se vería. Con !important, y como
     estos selectores son más específicos (usan el id + la clase
     ".header" + los atributos), esto gana en cualquier caso.

     1) Mientras [data-hero3d] esté puesto, TODO el contenido del header
        (menú por posición, iconos, carrito, logo) usa el color que se
        configuró para esa posición, o el color general si esa posición
        se dejó vacía. Esto pasa pase lo que pase con los paneles.
     2) Si [data-hero3d-panel-open] NO está (ningún panel abierto),
        además el fondo, el "vidrio"/blur y los bordes desaparecen del
        todo: header 100% invisible.
     3) Si [data-hero3d-panel-open] SÍ está, el fondo vuelve a su
        textura normal (incluido el vidrio, si lo usas en toda la
        tienda), pero los colores del punto 1 se mantienen.
     ============================================================ */
  #header-component.header[data-hero3d-enabled][data-hero3d] {
    --color-foreground: var(--color-hero3d-text) !important;
    --color-foreground-rgb: var(--color-hero3d-text-rgb) !important;
    --color-border: var(--color-hero3d-text) !important;
    --color-border-rgb: var(--color-hero3d-text-rgb) !important;
    --color-primary-button-background: var(--color-hero3d-text) !important;
    --color-primary-button-text: var(--color-hero3d-text-contrast) !important;
    --color-menu-link-1: var(--color-hero3d-link-1, var(--color-hero3d-text)) !important;
    --color-menu-link-2: var(--color-hero3d-link-2, var(--color-hero3d-text)) !important;
    --color-menu-link-3: var(--color-hero3d-link-3, var(--color-hero3d-text)) !important;
    --color-menu-link-4: var(--color-hero3d-link-4, var(--color-hero3d-text)) !important;
    --color-menu-link-5: var(--color-hero3d-link-5, var(--color-hero3d-text)) !important;
    --color-menu-link-6: var(--color-hero3d-link-6, var(--color-hero3d-text)) !important;
    --color-search-icon-custom: var(--color-hero3d-search-icon, var(--color-hero3d-text)) !important;
    --color-menu-icon-custom: var(--color-hero3d-menu-icon, var(--color-hero3d-text)) !important;
    --color-account-icon-custom: var(--color-hero3d-account-icon, var(--color-hero3d-text)) !important;
    --color-cart-icon-custom: var(--color-hero3d-cart-icon, var(--color-hero3d-text)) !important;
    --cart-bubble-background: var(--color-hero3d-text) !important;
    --cart-bubble-text: var(--color-hero3d-text-contrast) !important;
    --header-logo-original-opacity: 0 !important;
    --header-logo-inverse-opacity: 1 !important;
  }

  /* Estado "sin panel abierto": header totalmente invisible, incluido
     el modo vidrio/glass (se neutraliza aquí mismo, poniendo a 0 las
     variables de las que depende su fondo). También se apaga el
     aislamiento de capa que usa el modo vidrio (isolation/contain): en
     algunos navegadores esa capa aislada + backdrop-filter deja un
     recuadro apenas visible aunque el fondo ya sea transparente. */
  #header-component.header[data-hero3d-enabled][data-hero3d]:not([data-hero3d-panel-open]) {
    background: transparent !important;
    --header-glass-opacity: 0 !important;
    --header-glass-blur: 0 !important;
    --header-glass-tint: 255, 255, 255 !important;
    /* NO se tocan isolation ni contain: blocks/_header-menu.liquid pone
       `contain: style` en el header a propósito, porque el `contain:
       layout` del tema impide que el backdrop-filter del cristal vea la
       página. Pisarlo desde aquí dejaba el cristal muerto al volver. */
    outline: none !important;
  }

  /* El underlay es el que de verdad pinta fondo/degradado/vidrio; se
     apaga con opacity (no con "background") porque un degradado no se
     puede animar suavemente hacia transparente (salta de golpe), pero la
     opacidad sí, sea lo que sea que tenga pintado adentro. */
  #header-component.header[data-hero3d-enabled][data-hero3d]:not([data-hero3d-panel-open]) .header__underlay-closed,
  #header-component.header[data-hero3d-enabled][data-hero3d]:not([data-hero3d-panel-open]) .header__underlay-open {
    opacity: 0 !important;
    /* Animación de entrada: mientras está invisible, el recuadro está
       desplazado hacia arriba; al salir del logo 3D vuelve a su sitio
       deslizándose. Con la opción "Solo desvanecer" el desplazamiento es
       0px y entonces únicamente se desvanece. */
    transform: translateY(var(--hero3d-entry-offset, 0px)) !important;
    pointer-events: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    outline: none !important;
    border: none !important;
  }

  /* ==================================================================
     "El filtro ocupa toda la pantalla al cerrar el desplegable".

     .header__underlay-open es el panel que pinta el fondo/vidrio DEL
     DESPLEGABLE, y su alto es var(--full-open-header-height): el alto
     del header YA DESPLEGADO, que es mucho más que el header solo. El
     tema lo deja siempre presente en la página y solo le anima ese alto
     al abrir y cerrar. Con el efecto vidrio encima, ese panel lleva blur
     y tinte puestos con !important en todos los estados, así que
     mientras el alto vuelve de "desplegado" a "cerrado" el vidrio se
     sigue pintando sobre toda esa zona: eso es el filtro que reaparece
     un momento, ocupa la pantalla y se va.

     Mientras NO hay ningún desplegable abierto ese panel no tiene nada
     que pintar, así que se le fija el alto al del header y se le quita
     el vidrio. Así el filtro solo puede ocupar el header y, cuando se
     abre, su desplegable — nunca más que eso.
     ================================================================== */
  #header-component[data-hero3d-enabled]:not([data-hero3d-panel-open]) .header__underlay-open {
    height: 100% !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* ==================================================================
     EL FILTRO MAGENTA: por qué salía y cómo se apaga de verdad.

     No es un color puesto en el header. Es el efecto vidrio (glass): el
     "underlay" del header lleva
         backdrop-filter: blur(...)
     que toma lo que hay DETRÁS del header y lo difumina y le sube la
     saturación un 60%. Y justo detrás, en el panel del logo 3D, está el
     "estudio de color" que ese logo usa para sus reflejos de vidrio
     (ver createColorfulEnvironment en sections/logo-3d.liquid): manchas
     de magenta, cian, dorado, violeta... El blur las estira sobre todo
     el ancho del header y el las vuelve chillonas. De ahí
     el "filtro magenta raro y horrible", y de ahí también que solo pase
     con el efecto vidrio activado.

     Las reglas del modo vidrio de este mismo archivo lo imponen con
     !important en un montón de combinaciones de selectores. Para ganarles
     sin ambigüedad, estas repiten TODAS esas condiciones y además añaden
     [data-hero3d] y :not([data-hero3d-panel-open]): al tener más
     condiciones son estrictamente más específicas, así que ganan siempre.
     ================================================================== */
  #header-component.header[data-hero3d-enabled][data-hero3d]:not([data-hero3d-panel-open])[data-glass-mode],
  #header-component.header[data-hero3d-enabled][data-hero3d]:not([data-hero3d-panel-open])[data-glass-mode][data-sticky-state='idle'],
  #header-component.header[data-hero3d-enabled][data-hero3d]:not([data-hero3d-panel-open])[data-glass-mode][data-sticky-state='active'] {
    /* Aquí NO se toca transform/isolation/contain. translateZ(0) es lo
       que le da al header su capa de composición propia, y sin ella
       Chrome calcula el blur del cristal pero lo pinta como si fuera 0
       — y no se recupera al restaurarlo. El header se apaga recortando
       el cristal a cero (regla más abajo), no rompiendo su capa. */
    --header-glass-blur: 0 !important;
    --header-glass-opacity: 0 !important;
  }

  #header-component.header[data-hero3d-enabled][data-hero3d]:not([data-hero3d-panel-open])[data-glass-mode] .header__underlay-closed,
  #header-component.header[data-hero3d-enabled][data-hero3d]:not([data-hero3d-panel-open])[data-glass-mode] .header__underlay-open,
  #header-component.header[data-hero3d-enabled][data-hero3d]:not([data-hero3d-panel-open])[data-glass-mode][data-sticky-state='idle'] .header__underlay-closed,
  #header-component.header[data-hero3d-enabled][data-hero3d]:not([data-hero3d-panel-open])[data-glass-mode][data-sticky-state='idle'] .header__underlay-open,
  #header-component.header[data-hero3d-enabled][data-hero3d]:not([data-hero3d-panel-open])[data-glass-mode][data-sticky-state='active'] .header__underlay-closed,
  #header-component.header[data-hero3d-enabled][data-hero3d]:not([data-hero3d-panel-open])[data-glass-mode][data-sticky-state='active'] .header__underlay-open,
  #header-component.header[data-hero3d-enabled][data-hero3d]:not([data-hero3d-panel-open])[data-glass-mode]:hover .header__underlay-closed,
  #header-component.header[data-hero3d-enabled][data-hero3d]:not([data-hero3d-panel-open])[data-glass-mode]:hover .header__underlay-open,
  #header-component.header[data-hero3d-enabled][data-hero3d]:not([data-hero3d-panel-open])[data-glass-mode][transparent='not-sticky'] .header__underlay-closed,
  #header-component.header[data-hero3d-enabled][data-hero3d]:not([data-hero3d-panel-open])[data-glass-mode][transparent='not-sticky'] .header__underlay-open {
    /* Nada de blur ni de saturate: sin esto, el magenta del logo 3D
       vuelve a colarse aunque el fondo ya sea transparente. */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: none !important;
    opacity: 0 !important;
  }

  #header-component.header[data-hero3d-enabled][data-hero3d]:not([data-hero3d-panel-open]) .header__row--top:not(.divider--page-width),
  #header-component.header[data-hero3d-enabled][data-hero3d]:not([data-hero3d-panel-open]) .header__row--top.divider--page-width .header__columns,
  #header-component.header[data-hero3d-enabled][data-hero3d]:not([data-hero3d-panel-open]) .header__row--bottom {
    border-bottom-color: transparent !important;
    border-color: transparent !important;
    outline: none !important;
    /* snippets/contrast-override.liquid puede pintar un color de fondo
       propio en estas filas (clase .color-custom-{id}, variable
       --color-background). Se neutraliza aquí también, además de por
       JS, para que no quede ni un resquicio de color sólido. Esto SÍ es
       color plano (no degradado), así que se anima sin problema. */
    background-color: transparent !important;
    --color-background: transparent !important;
    box-shadow: none !important;
  }

  /* ==================================================================
     CÓMO SE APAGA EL HEADER SOBRE EL LOGO 3D (y por qué así).

     El header está armado así:

       <header-component id="header-component">
         <div class="unf-glass"></div>                 <- fondo + vidrio (lo monta el JS del menú)
         <div class="unf-glass-edge"></div>            <- el borde inferior
         <div class="header__underlay-closed"></div>   <- fondo del tema (apagado si hay unf-glass)
         <div class="header__underlay-open"></div>     <- fondo del desplegable
         <h1 class="visually-hidden">                  <- solo lectores de pantalla
         <div class="header__row header__row--top">    <- fondo + borde propios
           <div class="header__columns">  ...CONTENIDO REAL...  </div>
         </div>
       </header-component>

     Todo lo que pinta el recuadro está FUERA de .header__columns, y todo
     lo que se tiene que ver está DENTRO. Antes se ocultaba el header
     entero con visibility:hidden y se volvía a encender el contenido.
     Era limpio sobre el papel, pero rompía el cristal: .unf-glass lleva
     un backdrop-filter que solo sigue vivo mientras el elemento se
     pinta, y si se oculta y reaparece, Chrome deja de repintar el
     desenfoque y NO lo recupera (lo documenta el propio tema). Por eso
     el header volvía del logo 3D sin fondo y sin borde.

     Así que ahora se apaga cada pieza por su mecanismo correcto:
       · .unf-glass      -> se recorta a cero (sigue pintado y vivo)
       · .unf-glass-edge -> opacidad 0 (no lleva blur, se puede)
       · underlays       -> opacidad 0
       · filas           -> fondo y bordes a transparente
     Y NADA toca transform / isolation / contain / visibility del header,
     que son las cuatro cosas de las que depende que el cristal funcione.
     ================================================================== */
  /* Cómo se comportan el cristal y su canto mientras el header está en
     modo logo 3D (tanto al desplegar como al recogerse). */
  #header-component[data-hero3d-enabled] .unf-glass {
    transition:
      opacity var(--hero3d-transition-timing),
      clip-path var(--unf-panel-duration, 280ms) var(--unf-panel-easing, cubic-bezier(0.22, 1, 0.36, 1));
  }

  #header-component.header[data-hero3d-enabled][data-hero3d]:not([data-hero3d-panel-open]) .unf-glass {
    /* ESTADO DE REPOSO sobre el logo 3D: el cristal se esconde SOLO con
       el recorte. Nada de opacity: 0 aquí.
       
       Antes esta regla llevaba "opacity: 0", y ese era el motivo de que
       el desenfoque tardara tanto en aparecer al abrir el desplegable
       justo sobre el logo 3D: con opacidad 0 el elemento no se pinta, y
       un backdrop-filter que no se pinta se apaga. Al abrir, Chrome
       tenía que reconstruir el desenfoque desde cero — de ahí la espera.
       Recortado pero con opacidad 1 el elemento SÍ se sigue pintando
       (no se ve nada, porque el recorte no deja), así que el desenfoque
       está listo de antemano y aparece al instante.
       
       El desvanecido al cerrar sigue existiendo: lo hace el JS, que baja
       la opacidad durante la animación y, al terminar, recorta y devuelve
       la opacidad a 1 para dejar el cristal listo otra vez. Busca
       hideGlass() en el script de arriba. */
    clip-path: inset(0 0 100% 0) !important;
  }

  #header-component.header[data-hero3d-enabled][data-hero3d]:not([data-hero3d-panel-open]) .unf-glass-edge {
    /* El canto (línea clara + sombra) se desvanece con el cristal, con la
       misma duración, para que se vayan como una sola pieza. */
    opacity: 0 !important;
  }

  /* Red de seguridad final (respaldo del JS, que hace lo mismo con
     máxima prioridad): apaga cualquier borde/sombra/contorno/filtro en
     TODO lo de adentro del header mientras está invisible, sin importar
     de qué elemento venga.

     OJO: aquí NO se tocan clip-path ni mask, igual que en el JS. Poner
     clip-path: none era exactamente lo que soltaba el cristal único del
     menú (.unf-glass, de altura calc(100dvh + 12px), o sea toda la
     pantalla) y hacía que su desenfoque cubriera la pantalla entera.
     Ese elemento está siempre pintado a propósito y lo único que lo
     mantiene reducido a la franja del header es su clip-path. Además
     clip-path y mask no pintan nada: solo recortan, así que quitarlos
     jamás puede hacer que algo se vea MENOS, únicamente de más. */
  #header-component.header[data-hero3d-enabled][data-hero3d]:not([data-hero3d-panel-open])
    :is(.header__row, .header__columns, .header__column, .header__underlay, .unf-glass, .unf-glass-edge) {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
  }

  /* Los pseudo-elementos (::before / ::after) hay que pedirlos aparte:
     NO son nodos del DOM, así que ni querySelectorAll('*') los encuentra
     ni el JavaScript de arriba puede ponerles estilo en línea, y el
     selector "*" de la regla anterior tampoco los alcanza. Varios traen
     sombras decorativas de fábrica (por ejemplo el anillo interior del
     ícono de bandera del selector de idioma, o la sombra tipo "popover"
     del panel de submenú). Aquí se les apaga SOLO lo decorativo
     —sombra, borde, contorno, filtro—, nunca su "content": borrar el
     content eliminaría el pseudo-elemento entero, y algunos sí dibujan
     cosas que deben seguir viéndose. Lo que quede fuera de
     .header__columns ya está apagado igualmente por la regla de
     visibilidad de más abajo, que sí alcanza a los pseudo-elementos
     (un ::after hereda la visibilidad de su elemento). */
  #header-component.header[data-hero3d-enabled][data-hero3d]:not([data-hero3d-panel-open])
    :is(.header__row, .header__columns, .header__underlay, .unf-glass, .unf-glass-edge)::before,
  #header-component.header[data-hero3d-enabled][data-hero3d]:not([data-hero3d-panel-open])
    :is(.header__row, .header__columns, .header__underlay, .unf-glass, .unf-glass-edge)::after {
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
  }

  /* Transición suave entre "sobre el logo 3D" y "tienda normal".
     Importante: NO se reutiliza --header-content-transition-timing, la
     variable que ya usa el header para su propio sistema de "header
     transparente" — esa variable vale 0s (instantáneo) la mayor parte
     del tiempo y solo cambia en situaciones puntuales de ese OTRO
     sistema (hover de menú, sticky), así que apoyarse en ella daba una
     animación inconsistente ("a veces sí, a veces no"). Aquí se usa un
     tiempo propio y fijo, siempre igual sin importar qué esté haciendo
     el resto del header. */
  /* Ojo: #header-component ya trae su propia transición de "opacity"
     (para el header sticky que aparece/desaparece al hacer scroll hacia
     arriba/abajo, más arriba en este mismo archivo). Como esta regla es
     más específica que esa (tiene el id), reemplaza el "transition"
     completo si no se repite "opacity" aquí también — por eso se
     incluye, con el mismo timing original, para no perder esa animación. */
  #header-component[data-hero3d-enabled] {
    /* Una sola duración + una sola curva, definidas arriba en el atributo
       style desde los ajustes de la sección. TODO lo de abajo las lee de
       aquí, así que nada puede quedar desfasado. */
    --hero3d-transition-timing: var(--hero3d-transition-duration, 320ms)
      var(--hero3d-transition-easing, cubic-bezier(0.22, 1, 0.36, 1));
    /* El menú, los íconos y el logo ya traen su propia transición de
       color, pero leen su duración de esta otra variable del tema
       (--header-content-transition-timing), que casi siempre vale 0s
       (instantáneo) salvo en un par de estados puntuales del OTRO
       sistema (header transparente). Igualándola aquí a la misma
       duración que el fondo, todo cambia EXACTAMENTE al mismo tiempo:
       fondo, colores y logo, sin que unas cosas salten de golpe y otras
       se demoren. */
    --header-content-transition-timing: var(--hero3d-transition-timing);

    /* OJO: "visibility" NO va en esta lista, y es a propósito.

       Al transicionar visibility, la regla del navegador es que al pasar
       de visible a oculto el elemento se queda VISIBLE toda la duración y
       solo salta a oculto al final. Con el armazón del header eso se veía
       fatal justo al cerrar un desplegable estando sobre el logo 3D: el
       fondo ya se había ido, pero los bordes y el canto del header
       seguían pintados durante los 320ms enteros antes de desaparecer de
       golpe — el "se muestran los bordes del header por un rato".

       Sin transición, ocultar es inmediato (que es como debe verse al
       cerrar) y aparecer sigue siendo suave, porque al volver a la
       normalidad visibility salta a visible al instante y lo que se anima
       es la opacidad del recuadro. Es decir: se gana el corte limpio al
       ocultar sin perder nada de la animación de entrada. */
    transition:
      opacity var(--animation-speed, 220ms) var(--animation-easing, ease),
      background-color var(--hero3d-transition-timing),
      border-color var(--hero3d-transition-timing),
      box-shadow var(--hero3d-transition-timing);
  }

  /* Ojo: se mantiene la transición de "height" que cada underlay ya
     tenía por su cuenta (distinta entre closed/open, para el cajón/
     submenú), solo se le agrega la de opacidad/vidrio para el cruce con
     el logo 3D — reemplazar el "transition" completo lo habría borrado. */
  #header-component[data-hero3d-enabled] .header__underlay-closed {
    transition:
      height var(--animation-speed-slow) var(--ease-out-cubic),
      opacity var(--hero3d-transition-timing),
      transform var(--hero3d-transition-timing),
      backdrop-filter var(--hero3d-transition-timing),
      -webkit-backdrop-filter var(--hero3d-transition-timing);
  }

  #header-component[data-hero3d-enabled] .header__underlay-open {
    transition:
      height var(--submenu-animation-speed) var(--ease-out-cubic),
      opacity var(--hero3d-transition-timing),
      transform var(--hero3d-transition-timing),
      backdrop-filter var(--hero3d-transition-timing),
      -webkit-backdrop-filter var(--hero3d-transition-timing);
  }

  #header-component[data-hero3d-enabled] .header__row,
  #header-component[data-hero3d-enabled] .header__row--top.divider--page-width .header__columns {
    transition:
      background-color var(--hero3d-transition-timing),
      border-color var(--hero3d-transition-timing),
      box-shadow var(--hero3d-transition-timing);
  }

  /* El canto del cristal (el borde inferior del header) se desvanece con
     la misma duración y curva que todo lo demás. Se conserva su
     transición propia de movimiento, que es la que lo hace acompañar al
     desplegable al abrir y cerrar: reemplazar el "transition" entero sin
     repetirla la habría borrado. */
  #header-component[data-hero3d-enabled] .unf-glass-edge {
    transition:
      /* Las MISMAS variables que usa el recorte del cristal, no un 280ms
         escrito a mano: si se toca el tiempo del desplegable, los dos
         cambian juntos y no se pueden volver a desincronizar.
         Es `transform`, no `top`: mover con transform lo hace la GPU al
         componer, sin recalcular la disposición del header en cada
         fotograma. */
      transform var(--unf-panel-duration, 280ms) var(--unf-panel-easing, cubic-bezier(0.22, 1, 0.36, 1)),
      opacity var(--hero3d-transition-timing);
  }

  /* ==================================================================
     SINCRONIZACIÓN TOTAL: "hay objetos que aparecen antes y otros
     después".

     La causa es esta: los colores del header se cambian a través de
     variables CSS (--color-foreground, --color-menu-link-1, etc.), y las
     variables CSS NO se animan — cambian de golpe. Lo que sí se anima es
     la propiedad que las usa (color, fill, background-color...), pero
     SOLO si ese elemento concreto tiene una transición declarada para
     ella. En este tema unos elementos la tienen y otros no: los que la
     tienen se desvanecen suave y los que no, saltan al instante. De ahí
     que unas cosas aparezcan antes que otras.

     Esta regla le declara la MISMA transición, con la MISMA duración y
     la MISMA curva, a todo lo que de verdad cambia de color en el
     header. Se usan las propiedades sueltas (transition-property /
     -duration / -timing-function) en vez del atajo "transition" a
     propósito: así no se borra el "transition-behavior: allow-discrete"
     ni otras animaciones propias que ya traen algunos componentes del
     tema (como el desplegable de idioma/moneda). */
  /* RENDIMIENTO: esta lista tenía además "span" y "path", que en un
     header con menú desplegable coinciden con cientos de nodos. Declarar
     una transición en cada uno obliga al navegador a vigilarlos todos en
     cada frame, para nada: el color no se pone en ellos, se hereda. Con
     los elementos que de verdad cambian de color basta, y se vigila un
     puñado en vez de cientos. */
  #header-component[data-hero3d-enabled] .header__columns :is(
      a,
      button,
      svg,
      cart-icon,
      search-button,
      .cart-bubble,
      .menu-list__link,
      .header-actions__action,
      .header-logo,
      .header-logo__image-container,
      .header-logo__image
    ) {
    transition-property: color, fill, stroke, background-color, border-color, opacity, transform;
    transition-duration: var(--hero3d-transition-duration, 320ms);
    transition-timing-function: var(--hero3d-transition-easing, cubic-bezier(0.22, 1, 0.36, 1));
  }

  /* Logo: cruce animado (crossfade) en vez de "display: none/block".
     "display" no se puede animar (el navegador simplemente lo quita de
     golpe), así que en vez de ocultar cada logo alternándolo con
     display, aquí se fuerzan los tres contenedores siempre presentes
     (display: flex) y se cruza SOLO su opacidad — eso sí se anima suave,
     al mismo tiempo que el fondo y los colores (misma variable de
     tiempo, --hero3d-transition-timing). El logo "original" se queda en
     el flujo normal (define el tamaño de la caja); los otros dos se
     superponen justo encima con position: absolute, para que no se
     empuje el layout mientras se cruzan. */
  #header-component[data-hero3d-enabled] .header-logo {
    position: relative;
  }

  #header-component[data-hero3d-enabled] .header-logo__image-container {
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition:
      opacity var(--hero3d-transition-timing, 320ms cubic-bezier(0.22, 1, 0.36, 1)),
      transform var(--hero3d-transition-timing, 320ms cubic-bezier(0.22, 1, 0.36, 1));
  }

  #header-component[data-hero3d-enabled] .header-logo__image-container--original {
    opacity: var(--header-logo-original-opacity, 1);
  }

  #header-component[data-hero3d-enabled] .header-logo__image-container--inverse {
    position: absolute;
    inset: 0;
    opacity: var(--header-logo-inverse-opacity, 0);
    pointer-events: none;
    /* Tamaño configurable solo para el logo mientras está sobre el logo
       3D (ajuste "Tamaño del logo sobre el logo 3D" más arriba). */
    transform: scale(var(--header-logo-hero3d-scale, 1));
  }

  #header-component[data-hero3d-enabled] .header-logo__image-container--hero3d-off {
    position: absolute;
    inset: 0;
    opacity: var(--header-logo-hero3d-off-opacity, 0);
    pointer-events: none;
  }

  {% if hero3d_off_colors_enabled %}
    /* Colores explícitos para cuando el header YA NO está sobre el logo
       3D. Cada propiedad individual cae de vuelta al color general de
       "fuera" y, si tampoco existe, al color general de "sobre el logo
       3D" (ver el mismo patrón var(a, var(b, var(c))) que ya se usa en
       el script). Esta regla es un respaldo por si el JS todavía no
       corrió; el script de más abajo hace exactamente lo mismo con
       máxima prioridad. */
    #header-component.header[data-hero3d-enabled]:not([data-hero3d]) {
      --color-foreground: var(--color-hero3d-text-off, var(--color-hero3d-text)) !important;
      --color-foreground-rgb: var(--color-hero3d-text-off-rgb, var(--color-hero3d-text-rgb)) !important;
      --color-border: var(--color-hero3d-text-off, var(--color-hero3d-text)) !important;
      --color-border-rgb: var(--color-hero3d-text-off-rgb, var(--color-hero3d-text-rgb)) !important;
      --color-primary-button-background: var(--color-hero3d-text-off, var(--color-hero3d-text)) !important;
      --color-primary-button-text: var(--color-hero3d-text-off-contrast, var(--color-hero3d-text-contrast)) !important;
      --color-menu-link-1: var(--color-hero3d-link-1-off, var(--color-hero3d-text-off, var(--color-hero3d-text))) !important;
      --color-menu-link-2: var(--color-hero3d-link-2-off, var(--color-hero3d-text-off, var(--color-hero3d-text))) !important;
      --color-menu-link-3: var(--color-hero3d-link-3-off, var(--color-hero3d-text-off, var(--color-hero3d-text))) !important;
      --color-menu-link-4: var(--color-hero3d-link-4-off, var(--color-hero3d-text-off, var(--color-hero3d-text))) !important;
      --color-menu-link-5: var(--color-hero3d-link-5-off, var(--color-hero3d-text-off, var(--color-hero3d-text))) !important;
      --color-menu-link-6: var(--color-hero3d-link-6-off, var(--color-hero3d-text-off, var(--color-hero3d-text))) !important;
      --color-search-icon-custom: var(--color-hero3d-search-icon-off, var(--color-hero3d-text-off, var(--color-hero3d-text))) !important;
      --color-menu-icon-custom: var(--color-hero3d-menu-icon-off, var(--color-hero3d-text-off, var(--color-hero3d-text))) !important;
      --color-account-icon-custom: var(--color-hero3d-account-icon-off, var(--color-hero3d-text-off, var(--color-hero3d-text))) !important;
      --color-cart-icon-custom: var(--color-hero3d-cart-icon-off, var(--color-hero3d-text-off, var(--color-hero3d-text))) !important;
      --cart-bubble-background: var(--color-hero3d-text-off, var(--color-hero3d-text)) !important;
      --cart-bubble-text: var(--color-hero3d-text-off-contrast, var(--color-hero3d-text-contrast)) !important;
    }
  {% endif %}

  #header-component.header[data-hero3d-enabled]:not([data-hero3d]) {
    {% if section.settings.hero3d_logo_off != blank %}
      /* Logo específico para el estado "fuera del logo 3D" (tercer
         contenedor de imagen, agregado en blocks/_header-logo.liquid). */
      --header-logo-original-opacity: 0 !important;
      --header-logo-inverse-opacity: 0 !important;
      --header-logo-hero3d-off-opacity: 1 !important;
    {% else %}
      /* Sin logo propio para "fuera": se fuerza el logo normal en vez de
         dejarlo caer al sistema de header transparente (home/producto/
         colección), que puede seguir activo al mismo tiempo y competir
         por estas mismas variables. */
      --header-logo-original-opacity: 1 !important;
      --header-logo-inverse-opacity: 0 !important;
      --header-logo-hero3d-off-opacity: 0 !important;
    {% endif %}
  }
/* END_SECTION:header */

/* START_SECTION:infinite-carousel (INDEX:11) */
.infinite-carousel-wrapper {
    width: 100%;
    overflow: hidden;
    padding: var(--carousel-padding-top) 0 var(--carousel-padding-bottom);
  }

  .infinite-carousel {
    position: relative;
    width: 100%;
    height: var(--carousel-height);
    overflow: hidden;
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
    touch-action: pan-y;
    /* Lo que pase aquí dentro no puede obligar a recalcular el resto de
       la página: es una tira larguísima moviéndose, y sin esto cada
       fotograma arrastraba al layout de toda la home. */
    contain: layout paint;
  }

  .infinite-carousel.is-dragging {
    cursor: grabbing;
  }

  .infinite-carousel__track {
    display: flex;
    align-items: center;
    gap: var(--carousel-gap);
    height: 100%;
    width: max-content;
    /* El `will-change` ya no vive aquí. La tira lleva las fotos
       triplicadas (aquí son 27 imágenes), y dejarlo puesto obliga al
       navegador a mantener esa tira entera en memoria de vídeo todo el
       rato, se esté moviendo o no. Ahora se pide justo antes de empezar
       a moverse y se suelta al pararse: ver play()/frame() abajo. */
    backface-visibility: hidden;
  }

  .infinite-carousel__item {
    flex: 0 0 auto;
    width: var(--carousel-item-width);
    height: 100%;
    border-radius: var(--carousel-radius);
    overflow: hidden;
  }

  /* El acercamiento del hover se le hace a la FOTO, no al recuadro.
     Agrandar el recuadro obliga a recortar de nuevo sus esquinas
     redondeadas en cada paso de la animación; agrandar la foto por
     dentro es un movimiento puro de tarjeta gráfica y no recorta nada. */
  .infinite-carousel__item img {
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  }

  @media (hover: hover) {
    .infinite-carousel:not(.is-dragging) .infinite-carousel__item:hover img {
      transform: scale(1.035);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .infinite-carousel__item img {
      transition: none;
    }
  }

  .infinite-carousel__item img,
  .infinite-carousel__placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
  }

  /* Mientras la foto no se ha pedido todavía, el hueco queda en blanco:
     así no asoma el texto alternativo. */
  .infinite-carousel__item img:not([src]) {
    visibility: hidden;
  }

  .infinite-carousel__placeholder svg {
    width: 100%;
    height: 100%;
  }
  /* ── Botón ────────────────────────────────────────────────────────────
     Sin borde ni contorno: solo el fondo. Puede ir encima del carrusel
     (flotando) o antes/después de él, y en cualquiera de los tres sitios
     a lo ancho. */
  .infinite-carousel__cta {
    display: inline-block;
    border: 0;
    outline: 0;
    appearance: none;
    background: var(--cta-bg, #000);
    color: var(--cta-fg, #fff);
    font-size: var(--cta-size, 13px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: var(--cta-tracking, 0.02em);
    text-decoration: none;
    text-align: center;
    padding: var(--cta-pad-y, 14px) var(--cta-pad-x, 28px);
    border-radius: var(--cta-radius, 0px);
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  .infinite-carousel__cta:hover {
    opacity: 0.85;
  }

  .infinite-carousel__cta:active {
    transform: translateY(1px);
  }

  /* Antes o después del carrusel */
  .infinite-carousel__cta--above,
  .infinite-carousel__cta--below {
    display: block;
    width: fit-content;
  }

  .infinite-carousel__cta--above { margin: 0 0 var(--cta-gap, 20px); }
  .infinite-carousel__cta--below { margin: var(--cta-gap, 20px) 0 0; }

  .infinite-carousel__cta--above.infinite-carousel__cta--left,
  .infinite-carousel__cta--below.infinite-carousel__cta--left { margin-inline: var(--cta-inset, 20px) auto; }

  .infinite-carousel__cta--above.infinite-carousel__cta--center,
  .infinite-carousel__cta--below.infinite-carousel__cta--center { margin-inline: auto; }

  .infinite-carousel__cta--above.infinite-carousel__cta--right,
  .infinite-carousel__cta--below.infinite-carousel__cta--right { margin-inline: auto var(--cta-inset, 20px); }

  /* Flotando sobre el carrusel */
  .infinite-carousel__cta--over {
    position: absolute;
    z-index: 3;
  }

  .infinite-carousel__cta--over.infinite-carousel__cta--left { left: var(--cta-inset, 20px); }
  .infinite-carousel__cta--over.infinite-carousel__cta--right { right: var(--cta-inset, 20px); }
  .infinite-carousel__cta--over.infinite-carousel__cta--center {
    left: 50%;
    transform: translateX(-50%);
  }
  .infinite-carousel__cta--over.infinite-carousel__cta--center:active {
    transform: translateX(-50%) translateY(1px);
  }

  .infinite-carousel__cta--over.infinite-carousel__cta--v-top { top: var(--cta-inset, 20px); }
  .infinite-carousel__cta--over.infinite-carousel__cta--v-bottom { bottom: var(--cta-inset, 20px); }
  .infinite-carousel__cta--over.infinite-carousel__cta--v-middle {
    top: 50%;
    transform: translateY(-50%);
  }
  .infinite-carousel__cta--over.infinite-carousel__cta--v-middle.infinite-carousel__cta--center {
    transform: translate(-50%, -50%);
  }
  .infinite-carousel__cta--over.infinite-carousel__cta--v-middle:active {
    transform: translateY(-50%) translateY(1px);
  }
  .infinite-carousel__cta--over.infinite-carousel__cta--v-middle.infinite-carousel__cta--center:active {
    transform: translate(-50%, -50%) translateY(1px);
  }

  @media screen and (max-width: 749px) {
    .infinite-carousel__cta { font-size: var(--cta-size-mobile, var(--cta-size, 13px)); }
  }
/* END_SECTION:infinite-carousel */

/* START_SECTION:logo (INDEX:13) */
.logo-section {
    width: calc(var(--logo-width) + var(--padding-inline-start) + var(--padding-inline-end));
    max-width: 100%;
    max-height: calc(var(--logo-height, 100%) + var(--padding-block-start) + var(--padding-block-end));
    font-size: var(--logo-height);
    display: flex;

    @media screen and (max-width: 749px) {
      max-height: calc(
        var(--logo-height-mobile, var(--logo-height, 100%)) + var(--padding-block-start) + var(--padding-block-end)
      );
      font-size: var(--logo-height-mobile, var(--logo-height));
      width: calc(
        var(--logo-width-mobile, var(--logo-width)) + var(--padding-inline-start) + var(--padding-inline-end)
      );
    }
  }

  .logo-section--center {
    margin-inline: auto;
  }

  .logo-section--flex-end {
    margin-inline-start: auto;
  }

  .logo-section--flex-start {
    margin-inline-end: auto;
  }

  .logo-section__image-wrapper {
    display: flex;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
  }

  .logo-section__image {
    object-fit: contain;
    width: 100%;
  }
/* END_SECTION:logo */

/* START_SECTION:main-blog-post (INDEX:15) */
.blog-post-comments-container {
    width: 100%;
    max-width: var(--normal-content-width);
    margin: 0 auto;
  }

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

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

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

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

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

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

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

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

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

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

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

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

/* START_SECTION:main-cart (INDEX:17) */
.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:main-collection (INDEX:19) */
/* El aspecto de las pestanas ya lo define el CSS .plf que trae la seccion
     "Coleccion destacada" y que el tema carga en todas las paginas, asi que
     aqui solo hace falta lo que es propio de la cuadricula del catalogo. */
  .collection-plf {
    grid-column: 1 / -1;
  }

  .product-grid__item[data-cf-hidden] {
    display: none !important;
  }

  /* La barra de filtros original ocupaba su propio hueco en la cuadricula; sin
     ella, las pestanas se apoyan directamente sobre los productos. */
  .collection-plf + * {
    margin-block-start: 0;
  }

  /* ---------- Cabecera del catalogo: titulo, pestanas y herramientas ---------- */
  .cf-head {
    grid-column: var(--cf-grid-col-mobile, 1 / -1);
    position: relative;
    padding-inline: var(--cf-pad-l, 0px) var(--cf-pad-r, 0px);
  }

  @media screen and (min-width: 750px) {
    .cf-head {
      grid-column: var(--cf-grid-col-desktop, 1 / -1);
    }
  }

  .cf-title {
    margin: 0 0 var(--cf-title-gap, 16px);
    padding-inline: var(--cf-title-pad-l, 0px) var(--cf-title-pad-r, 0px);
    font-family: 'Montserrat', var(--font-heading--family), sans-serif;
    font-size: var(--cf-title-size, 32px);
    font-weight: var(--cf-title-weight, 700);
    letter-spacing: var(--cf-title-ls, 0);
    color: var(--cf-title-color, #111);
    line-height: 1.1;
  }

  .cf-title--upper {
    text-transform: uppercase;
  }

  /* Envoltorio quieto de la barra. En escritorio no hace nada; en el celular
     es el que sostiene los degradados de los bordes mientras la barra de
     dentro se desplaza. */
  .cf-bar-wrap {
    position: relative;
  }

  .cf-bar-wrap::before,
  .cf-bar-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 28px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s linear;
    z-index: 3;
  }

  .cf-bar-wrap::before {
    left: 0;
    background: linear-gradient(to right, var(--cf-rail-fade-color, #fff), transparent);
  }

  .cf-bar-wrap::after {
    right: 0;
    background: linear-gradient(to left, var(--cf-rail-fade-color, #fff), transparent);
  }

  /* Pestanas a la izquierda, herramientas pegadas al otro extremo. */
  .cf-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-inline: var(--cf-bar-pad-l, 0px) var(--cf-bar-pad-r, 0px);
  }

  .cf-bar .collection-plf {
    flex: 1 1 auto;
    min-width: 0;
  }

  .cf-tools {
    display: flex;
    align-items: center;
    gap: 18px;
    flex: 0 0 auto;
    margin-inline-start: auto;
  }

  .cf-tool {
    position: relative;
    appearance: none;
    background: none;
    border: 0;
    padding: 4px 0;
    margin: 0;
    font-family: 'Montserrat', var(--font-body--family), sans-serif;
    font-size: var(--cf-tool-size, 13px);
    color: var(--cf-tool-color, #9a9a9a);
    cursor: pointer;
    transition: color 0.2s ease;
  }

  .cf-tool:hover,
  .cf-tool.is-active,
  .cf-tool[aria-expanded='true'] {
    color: var(--cf-tool-color-active, #111);
  }

  /* Punto que avisa de que hay filtros puestos. */
  .cf-tool__dot {
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-inline-start: 5px;
    border-radius: 50%;
    background: var(--cf-accent, #111);
    vertical-align: middle;
  }

  .cf-dens {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  /* ---------- Salida del panel: tirador y cruz ---------- */
  .cf-panel__top {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    min-height: 26px;
  }

  /* El tirador solo tiene sentido donde se cierra deslizando, es decir en el
     celular; en escritorio queda la cruz sola. */
  .cf-panel__handle {
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 4px;
    border-radius: 999px;
    background: var(--cf-accent, #111);
    opacity: 0.28;
  }

  .cf-panel__close {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 999px;
    border: var(--cf-border-width, 1px) solid var(--cf-border-color, rgba(0, 0, 0, 0.1));
    background: var(--cf-panel-bg, rgba(255, 255, 255, 0.3));
    -webkit-backdrop-filter: blur(var(--cf-panel-blur, 20px)) saturate(1.6);
    backdrop-filter: blur(var(--cf-panel-blur, 20px)) saturate(1.6);
    color: var(--cf-accent, #111);
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  .cf-panel__close:hover {
    transform: scale(1.06);
  }

  /* Mientras se arrastra hacia abajo el panel sigue al dedo sin transicion. */
  .cf-panel.is-dragging {
    transition: none;
  }

  /* ---------- Fondo difuminado del panel de filtros ---------- */
  /* Fija a la ventana, no a la seccion: al abrir el panel toda la pagina que
     queda detras se desenfoca y se oscurece, igual que al desplegar el menu de
     la cabecera. Pulsar sobre ella cierra el panel. */
  .cf-backdrop {
    position: fixed;
    inset: 0;
    z-index: 38;
    background: rgba(0, 0, 0, var(--cf-backdrop-dim, 0.25));
    -webkit-backdrop-filter: blur(var(--cf-backdrop-blur, 12px)) saturate(1.6);
    backdrop-filter: blur(var(--cf-backdrop-blur, 12px)) saturate(1.6);
    opacity: 0;
    transition: opacity var(--cf-backdrop-speed, 280ms) ease-in-out;
    will-change: opacity;
  }

  .cf-backdrop[hidden] {
    display: none;
  }

  .cf-backdrop.is-visible {
    opacity: 1;
  }

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

  /* ---------- Panel de filtros ---------- */
  /* Cuadros flotantes: salen del boton y se superponen a los productos, no
     los empujan hacia abajo. */
  .cf-panel {
    position: absolute;
    top: 100%;
    /* Alineado con el boton, no con el borde de la seccion: el relleno lateral
       no desplaza a los elementos posicionados, hay que restarlo a mano. */
    right: var(--cf-bar-pad-r, 0px);
    z-index: 40;
    display: grid;
    gap: 12px;
    width: min(720px, calc(100vw - 32px));
    margin-block-start: 10px;
    padding: 0;
  }

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

  @media (prefers-reduced-motion: no-preference) {
    .cf-panel {
      animation: cf-panel-in 0.25s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
  }

  @keyframes cf-panel-in {
    from {
      opacity: 0;
      transform: translateY(-8px) scale(0.99);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  /* Mismo cristal que el header: tinte translucido, desenfoque y saturado.
     saturate() es lo que hace que el cristal se note tambien sobre fondos
     planos, donde un blur a secas se veria igual que sin nada. El prefijo
     -webkit- va primero para que Safari no se quede con la version sin
     prefijo, que aun no soporta del todo. */
  .cf-panel__card,
  .cf-btn--reset {
    background: var(--cf-panel-bg, rgba(255, 255, 255, 0.3));
    -webkit-backdrop-filter: blur(var(--cf-panel-blur, 20px)) saturate(1.6);
    backdrop-filter: blur(var(--cf-panel-blur, 20px)) saturate(1.6);
    border: var(--cf-border-width, 1px) solid var(--cf-border-color, rgba(0, 0, 0, 0.1));
    border-radius: var(--cf-panel-radius, 14px);
    box-shadow:
      inset 0 -1px 0 rgb(255 255 255 / 0.16),
      inset 0 1px 0 rgb(255 255 255 / 0.1),
      0 8px 24px rgb(0 0 0 / 0.08);
    /* Capa propia de composicion: sin esto el desenfoque parpadea al hacer
       scroll, igual que le pasaba al header. */
    will-change: backdrop-filter;
    transform: translateZ(0);
  }

  .cf-panel__card {
    display: flex;
    align-items: flex-start;
    gap: 32px;
    padding: 22px 26px;
  }

  .cf-panel__label {
    flex: 0 0 150px;
    font-family: 'Montserrat', var(--font-body--family), sans-serif;
    font-size: 13px;
    color: #6f6f6f;
    padding-block-start: 4px;
  }

  .cf-panel__body {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    flex: 1 1 auto;
  }

  .cf-panel__body--radios {
    flex-direction: column;
    gap: 12px;
  }

  /* Radios de "Ordenar por" */
  .cf-radio {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-family: 'Montserrat', var(--font-body--family), sans-serif;
    font-size: 14px;
    color: #333;
  }

  .cf-radio input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
  }

  .cf-radio__dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #dcdcdc;
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.06);
    transition: background 0.2s ease, box-shadow 0.2s ease;
  }

  .cf-radio input:checked + .cf-radio__dot {
    background: var(--cf-accent, #111);
    box-shadow: inset 0 0 0 3px #fff, 0 0 0 1px var(--cf-accent, #111);
  }

  .cf-radio input:focus-visible + .cf-radio__dot {
    outline: 2px solid var(--cf-accent, #111);
    outline-offset: 2px;
  }

  /* Tallas */
  .cf-size {
    appearance: none;
    min-width: 34px;
    padding: 6px 8px;
    margin: 0;
    background: none;
    border: 0;
    border-radius: 6px;
    font-family: 'Montserrat', var(--font-body--family), sans-serif;
    font-size: 14px;
    color: #444;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
  }

  .cf-size:hover {
    color: #111;
  }

  .cf-size.is-active {
    background: var(--cf-accent, #111);
    color: #fff;
  }

  /* Colores */
  .cf-color {
    appearance: none;
    padding: 4px;
    margin: 0;
    background: none;
    border: 0;
    border-radius: 50%;
    line-height: 0;
    cursor: pointer;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
  }

  .cf-color__dot {
    display: block;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.12);
  }

  .cf-color:hover {
    transform: scale(1.06);
  }

  .cf-color.is-active {
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--cf-accent, #111);
  }

  /* Botones de abajo */
  .cf-panel__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
  }

  .cf-btn {
    appearance: none;
    padding: 12px 26px;
    border: 0;
    border-radius: var(--cf-panel-radius, 14px);
    font-family: 'Montserrat', var(--font-body--family), sans-serif;
    font-size: 12px;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: opacity 0.2s ease, background 0.2s ease;
  }

  .cf-btn--reset {
    color: #8a8a8a;
  }

  .cf-btn--apply {
    background: var(--cf-accent, #111);
    color: #fff;
  }

  .cf-btn:hover {
    opacity: 0.85;
  }

  /* Numero de columnas elegido con los botones 2 / 4 / 6. */
  @media screen and (min-width: 750px) {
    .product-grid-container[data-cf-cols] .product-grid {
      grid-template-columns: repeat(var(--cf-cols), minmax(0, 1fr)) !important;
    }
  }

  /* Personalizacion: mientras no se elija una densidad a mano, siempre 4
     columnas en escritorio. Antes la cuadricula se autoajustaba segun el
     tamano de tarjeta y en ciertos anchos de pantalla mostraba 3. */
  @media screen and (min-width: 750px) {
    .product-grid-container:not([data-cf-cols]) .product-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
  }

  @media screen and (max-width: 749px) {
    .cf-panel__card {
      flex-direction: column;
      gap: 14px;
      padding: 18px;
    }

    .cf-panel__label {
      flex: 0 0 auto;
    }

    .cf-tools {
      gap: 14px;
    }

    .cf-head {
      padding-inline: var(--cf-pad-l-mobile, 0px) var(--cf-pad-r-mobile, 0px);
    }

    /* El titulo usa su propio tamano de celular (antes se quedaba con el de
       escritorio y por eso salia enorme y pisando las pestanas) y su propia
       separacion con la barra de abajo. */
    .cf-title {
      padding-inline: var(--cf-title-pad-l-mobile, 0px) var(--cf-title-pad-r-mobile, 0px);
      font-size: var(--cf-title-size-mobile, 24px);
      margin-block-end: var(--cf-title-gap-mobile, var(--cf-title-gap, 12px));
      line-height: 1.15;
    }

    /* ---------- Barra de filtros deslizable ---------- */
    /* En el celular las pestanas, el boton de filtros y los botones de columnas
       viajan en una sola fila que se desplaza hacia los lados. Antes cada cosa
       se envolvia en su propia linea y las herramientas quedaban fuera de la
       vista. */
    .cf-bar-wrap {
      margin-block-end: var(--cf-bar-space-mobile, 18px);
    }

    .cf-bar {
      /* Un poco de aire al final para que se note que la fila sigue. */
      padding-inline: var(--cf-bar-pad-l-mobile, 0px) calc(var(--cf-bar-pad-r-mobile, 0px) + 14px);
      flex-wrap: nowrap;
      align-items: center;
      gap: var(--cf-bar-gap-mobile, 18px);
      overflow-x: auto;
      overflow-y: hidden;
      overscroll-behavior-x: contain;
      -webkit-overflow-scrolling: touch;
      scroll-behavior: smooth;
      touch-action: pan-x pan-y;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }

    .cf-bar::-webkit-scrollbar {
      display: none;
    }

    /* Mientras se arrastra no debe interpretarse como un toque en la pestana. */
    .cf-bar.is-dragging {
      scroll-behavior: auto;
      cursor: grabbing;
    }

    .cf-bar.is-dragging .plf__tab,
    .cf-bar.is-dragging .cf-tool {
      pointer-events: none;
    }

    /* Solo desplaza la barra: la fila de pestanas de dentro deja de tener su
       propio desplazamiento para que no haya dos carriles encajados. */
    .cf-bar .collection-plf {
      flex: 0 0 auto;
      margin-bottom: 0;
    }

    .cf-bar .collection-plf .plf__row {
      overflow: visible;
      padding-inline-end: 0;
    }

    .cf-bar .collection-plf .plf__viewport::before,
    .cf-bar .collection-plf .plf__viewport::after {
      display: none;
    }

    .cf-tools {
      flex: 0 0 auto;
      margin-inline-start: 0;
    }

    /* Los botones de columnas (2 / 4 / 6) no se muestran en el celular: ahi la
       cuadricula manda con el numero de columnas de los ajustes. */
    .cf-dens {
      display: none;
    }

    .cf-tool {
      white-space: nowrap;
    }

    /* Los degradados avisan de que queda recorrido a un lado o al otro. */
    .cf-bar-wrap.can-scroll-left::before,
    .cf-bar-wrap.can-scroll-right::after {
      opacity: 1;
    }

    /* En movil el panel se cierra deslizandolo hacia abajo: el tirador es la
       senal de que se puede. */
    .cf-panel__handle {
      display: block;
    }

    .cf-panel__top {
      min-height: 34px;
      touch-action: pan-y;
    }

    .cf-panel__close {
      width: 34px;
      height: 34px;
    }

    /* En movil ocupa todo el ancho disponible bajo la barra. */
    .cf-panel {
      left: var(--cf-bar-pad-l-mobile, 0px);
      right: var(--cf-bar-pad-r-mobile, 0px);
      width: auto;
    }
  }
/* END_SECTION:main-collection */

/* START_SECTION:marquee-bar (INDEX:21) */
marquee-bar {
    display: block;
    position: relative;
    width: 100%;
    background: var(--marquee-bg);
    color: var(--marquee-text);
    border-bottom: var(--marquee-border-width) solid var(--marquee-border-color);
    overflow: hidden;
    z-index: 1;
  }

  /* ════════════════════════════════════════════════════════════
     MARQUESINA PEGADA AL HEADER
     ────────────────────────────────────────────────────────────
     1. #header-group pasa a display:contents para que la sección de
        la marquesina y .header-section sean hermanas dentro de
        .page-wrapper (el contenedor que scrollea). El tema ya lo hace
        cuando el header es sticky; aquí se asegura también cuando no
        lo es, porque un sticky encerrado en el grupo no se pega a nada.
     2. La sección de la marquesina se queda en top:0.
     3. .header-section baja su sticky justo la altura de la barra.
     ════════════════════════════════════════════════════════════ */
  #header-group:has(marquee-bar[data-sticky-attach]) {
    display: contents;
  }

  .marquee-bar-section:has(marquee-bar[data-sticky-attach]),
  .marquee-bar-section--stuck {
    position: sticky;
    top: 0;

    /* Misma capa que el header. Al ir ANTES en el DOM, cualquier panel o
       cajón del header se dibuja por encima de la barra, como debe ser. */
    z-index: var(--layer-menu-drawer, 18);

    /* Colchón de 1px del color de la barra: vive detrás del header y evita
       rendijas por redondeo de subpíxeles al hacer scroll o al hacer zoom. */
    padding-block-end: 1px;
    background: var(--marquee-bar-bg, transparent);
  }

  /* El header se ancla 1px por encima del borde inferior de la barra:
     ese solape mantiene vivo el IntersectionObserver del tema (que detecta
     el estado sticky con threshold 1) y garantiza que no quede hueco. */
  .marquee-bar-section:has(marquee-bar[data-sticky-attach]) ~ .header-section:has(> #header-component[sticky='always']),
  .marquee-bar-section:has(marquee-bar[data-sticky-attach])
    ~ .header-section:has(> #header-component[sticky='scroll-up'][data-sticky-state='active']),
  .marquee-bar-section--stuck ~ .header-section:has(> #header-component[sticky='always']),
  .marquee-bar-section--stuck ~ .header-section:has(> #header-component[sticky='scroll-up'][data-sticky-state='active']) {
    top: calc(var(--marquee-bar-height, 0px) - 1px);
  }

  .marquee-bar__viewport {
    width: 100%;
    height: var(--marquee-height);
    display: flex;
    align-items: center;
    overflow: hidden;
  }

  .marquee-bar__track {
    display: flex;
    width: max-content;
    animation: none;
    will-change: transform;
  }

  .marquee-bar--ready .marquee-bar__track {
    animation: marquee-scroll var(--marquee-duration) linear infinite;
    animation-direction: var(--marquee-direction);
  }

  .marquee-bar--pausable:hover .marquee-bar__track,
  .marquee-bar--pausable:focus-within .marquee-bar__track {
    animation-play-state: paused;
  }

  .marquee-bar--static .marquee-bar__track {
    animation: none;
  }

  .marquee-bar__group {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding-inline-end: var(--marquee-gap);
  }

  .marquee-bar__item {
    font-family: var(--marquee-font-family);
    font-weight: var(--marquee-font-weight);
    font-size: var(--marquee-font-size);
    text-transform: var(--marquee-text-transform);
    color: inherit;
    white-space: nowrap;
    text-decoration: none;
  }

  a.marquee-bar__item--link {
    cursor: pointer;
  }

  a.marquee-bar__item--link:hover {
    text-decoration: underline;
  }

  .marquee-bar__separator {
    padding-inline: calc(var(--marquee-gap) / 3);
    opacity: 0.6;
    white-space: nowrap;
    font-family: var(--marquee-font-family);
    font-size: var(--marquee-font-size);
  }

  @keyframes marquee-scroll {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(var(--marquee-shift, -50%));
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .marquee-bar__track {
      animation: none !important;
    }
  }
/* END_SECTION:marquee-bar */

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

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

    > a {
      display: flex;
    }

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

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

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

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

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

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

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

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

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

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

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

  @media screen and (max-width: 389px) {
    .sticky-add-to-cart__bar {
      .compare-at-price {
        display: none;
      }
    }

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

    .sticky-add-to-cart__info[data-singleton='true'] .sticky-add-to-cart__title {
      display: block;
    }

    .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:product-list (INDEX:29) */
/* Mientras el orden aleatorio esta activo, la lista arranca con
     "display: none" (no solo invisible: fuera del todo) hasta que el script
     de mas abajo termina de barajar y de quitar los productos sobrantes del
     grupo ampliado. Es a proposito "display: none" y no "visibility: hidden":
     con visibility, el navegador igual empieza a descargar las fotos de los
     productos sobrantes (siguen "presentes" para el, solo que invisibles),
     y esas descargas de mas competian con las de los productos que sí se
     quedan, haciendo que se vieran cargar en un orden raro. Con
     "display: none" el navegador no pide ninguna foto de esta lista hasta
     que el script la deja visible, ya con el grupo final y en su orden
     definitivo, asi las fotos se piden en ESE orden (fila por fila) y no se
     descarga ninguna foto de las que terminan descartadas.
     Todo esto pasa de forma sincrona apenas se carga la pagina, antes de que
     el navegador llegue a pintar nada, asi que no se nota ningun "salto" al
     aparecer. Si por algun motivo el script no llegara a correr, se deja un
     margen de seguridad: pasado 1 segundo la lista se muestra igual (ver
     "unf-plr-fallback" en @keyframes mas abajo), para que un producto nunca
     quede oculto para siempre. */
  [data-plr-randomize='true']:not([data-plr-done]) {
    display: none;
    animation: unf-plr-fallback 0s 1s forwards;
  }

  @keyframes unf-plr-fallback {
    to {
      display: revert;
    }
  }

  /* Quitar el efecto de acercamiento al pasar el mouse, solo en esta seccion.
     El tema lo aplica desde una clase del <body>, asi que hay que anularlo
     sobre las tres variantes que trae. */
  .plr--no-hover .product-card:hover,
  .plr--no-hover .product-card:hover .card-gallery,
  .plr--no-hover .product-card:hover .product-card__image,
  .plr--no-hover .collection-card:hover,
  .plr--no-hover .collection-card:hover .collection-card__image {
    transform: none !important;
  }

  @media screen and (max-width: 749px) {



  }

  /* ---------- Filtro por tipo dentro de la seccion ---------- */
  .plf {
    font-family: var(--plf-font, inherit);
    margin-bottom: var(--plf-space, 18px);
    /* Sangria para que la fila arranque a la misma altura que el titulo de la
       seccion, que en ancho completo el titulo lleva su propio relleno. */
    padding-inline: var(--plf-offset, 12px) 0;
  }

  .plf__row {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: var(--plf-align, flex-start);
    gap: var(--plf-gap, 22px);
    max-width: 100%;
    /* Si no caben, la fila se desliza a los lados en vez de romperse o
       cortarse. El relleno del final deja aire tras la ultima pestana para que
       se vea que hay mas. */
    overflow-x: auto;
    overflow-y: hidden;
    padding-inline-end: var(--plf-tail, 24px);
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    touch-action: pan-x pan-y;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .plf__row::-webkit-scrollbar {
    display: none;
  }

  /* Cuando la fila se puede seguir desplazando, el borde correspondiente se
     difumina: es la senal de que quedan pestanas fuera de pantalla. Solo se
     pinta si el JS detecta que hay recorrido. */
  .plf__viewport {
    position: relative;
  }

  .plf__viewport::before,
  .plf__viewport::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--plf-fade, 32px);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s linear;
    z-index: 2;
  }

  .plf__viewport::before {
    left: 0;
    background: linear-gradient(to right, var(--plf-fade-color, #fff), transparent);
  }

  .plf__viewport::after {
    right: 0;
    background: linear-gradient(to left, var(--plf-fade-color, #fff), transparent);
  }

  .plf__viewport.can-scroll-left::before,
  .plf__viewport.can-scroll-right::after {
    opacity: 1;
  }

  .plf__row.is-dragging {
    scroll-behavior: auto;
    cursor: grabbing;
  }

  .plf__row.is-dragging .plf__tab {
    pointer-events: none;
  }

  .plf__row::-webkit-scrollbar {
    display: none;
  }

  .plf--divider .plf__row {
    border-bottom: 1px solid var(--plf-divider, #e4e4e4);
  }

  .plf__tab {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: var(--plf-pad-y, 6px) var(--plf-pad-x, 0px);
    margin: 0;
    background: none;
    border: 0;
    border-radius: var(--plf-radius, 0);
    font-family: inherit;
    font-size: var(--plf-size, 14px);
    font-weight: var(--plf-weight, 500);
    letter-spacing: var(--plf-tracking, 0);
    line-height: 1.2;
    color: var(--plf-color, #9a9a9a);
    white-space: nowrap;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition:
      color 0.25s cubic-bezier(0.22, 1, 0.36, 1),
      background-color 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* Mayusculas y minusculas de las pestanas. "Solo la primera letra" usa
     ::first-letter para no tocar el resto del texto: "camisetas" pasa a
     "Camisetas" pero "Ver todo" no se convierte en "Ver Todo". */
  .plf--case-upper .plf__tab {
    text-transform: uppercase;
  }

  .plf--case-lower .plf__tab {
    text-transform: lowercase;
  }

  .plf--case-words .plf__tab {
    text-transform: capitalize;
  }

  .plf--case-sentence .plf__label {
    text-transform: lowercase;
  }

  .plf--case-first .plf__label::first-letter,
  .plf--case-sentence .plf__label::first-letter {
    text-transform: uppercase;
  }

  .plf__tab:hover {
    color: var(--plf-color-active, #111);
  }

  .plf__tab.is-active {
    color: var(--plf-color-active, #111);
  }

  /* "Ver todo" se queda siempre en su color, este seleccionada o no. */
  .plf--all-fixed .plf__tab--all,
  .plf--all-fixed .plf__tab--all:hover,
  .plf--all-fixed .plf__tab--all.is-active {
    color: var(--plf-all-color, #000);
  }

  .plf--all-fixed.plf--pill .plf__tab--all.is-active {
    color: var(--plf-color-active, #fff);
  }

  .plf__count {
    font-size: 0.75em;
    opacity: 0.7;
  }

  /* ---------- Marca de la pestana activa ----------
     La linea (o el fondo) es la misma capa; lo que cambia entre animaciones es
     como aparece: creciendo desde el centro, barriendo de izquierda a derecha,
     desvaneciendose, de golpe, o deslizandose de una pestana a otra. */
  .plf--underline .plf__tab::after {
    content: '';
    position: absolute;
    left: var(--plf-pad-x, 0px);
    right: var(--plf-pad-x, 0px);
    bottom: 0;
    height: var(--plf-line, 1px);
    background: var(--plf-color-active, #111);
    transform: scaleX(0);
    transform-origin: center;
    transition:
      transform var(--plf-dur, 250ms) cubic-bezier(0.22, 1, 0.36, 1),
      opacity var(--plf-dur, 250ms) cubic-bezier(0.22, 1, 0.36, 1);
  }

  .plf--underline .plf__tab.is-active::after {
    transform: scaleX(1);
  }

  /* Barrido de izquierda a derecha. */
  .plf--anim-wipe.plf--underline .plf__tab::after {
    transform-origin: left center;
  }

  /* Desvanecido: la linea ya esta a su ancho y solo aparece. */
  .plf--anim-fade.plf--underline .plf__tab::after {
    transform: scaleX(1);
    opacity: 0;
  }

  .plf--anim-fade.plf--underline .plf__tab.is-active::after {
    opacity: 1;
  }

  /* Sin animacion. */
  .plf--anim-none .plf__tab::after,
  .plf--anim-none .plf__tab {
    transition: none;
  }

  .plf--anim-none.plf--underline .plf__tab::after {
    transform: scaleX(1);
    opacity: 0;
  }

  .plf--anim-none.plf--underline .plf__tab.is-active::after {
    opacity: 1;
  }

  /* Rebote suave del texto al elegir la pestana. */
  .plf--anim-bounce .plf__tab.is-active .plf__label {
    animation: plf-bounce var(--plf-dur, 250ms) cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }

  @keyframes plf-bounce {
    0% {
      transform: scale(0.9);
    }
    60% {
      transform: scale(1.06);
    }
    100% {
      transform: none;
    }
  }

  .plf__label {
    display: inline-block;
  }

  .plf--pill .plf__tab.is-active {
    background-color: var(--plf-pill-bg, #111);
    color: var(--plf-color-active, #fff);
  }

  /* Indicador que se desliza de una pestana a otra (solo con esa animacion).
     Va dentro de la fila, asi que acompana el desplazamiento lateral. */
  .plf__indicator {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: var(--plf-line, 1px);
    background: var(--plf-color-active, #111);
    border-radius: var(--plf-radius, 0);
    opacity: 0;
    pointer-events: none;
    transform: translateX(0);
    transition:
      transform var(--plf-dur, 250ms) cubic-bezier(0.22, 1, 0.36, 1),
      width var(--plf-dur, 250ms) cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.15s linear;
  }

  .plf__indicator.is-ready {
    opacity: 1;
  }

  .plf--anim-slide.plf--pill .plf__indicator {
    top: 0;
    bottom: 0;
    height: auto;
    background: var(--plf-pill-bg, #111);
  }

  .plf--anim-slide .plf__tab {
    z-index: 1;
  }

  .plf--anim-slide.plf--pill .plf__tab.is-active {
    background-color: transparent;
  }

  /* Con indicador, la linea propia de cada pestana sobra. */
  .plf--anim-slide.plf--underline .plf__tab::after {
    display: none;
  }

  .plf__empty {
    margin: 24px 0 0;
    font-size: var(--plf-size, 14px);
    color: var(--plf-color, #9a9a9a);
  }

  /* Tarjetas escondidas por el filtro. */
  .resource-list__item[data-plf-hidden] {
    display: none !important;
  }

  /* ---------- Entrada de las tarjetas que si tocan ---------- */
  @media (prefers-reduced-motion: no-preference) {
    .plf-in {
      animation-duration: var(--plf-dur, 280ms);
      animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
      animation-fill-mode: both;
      animation-delay: var(--plf-delay, 0ms);
    }

    .plf--item-fade .plf-in {
      animation-name: plf-fade;
    }

    .plf--item-fade-up .plf-in,
    .plf--item-cascade .plf-in {
      animation-name: plf-fade-up;
    }

    .plf--item-fade-down .plf-in {
      animation-name: plf-fade-down;
    }

    .plf--item-slide-right .plf-in {
      animation-name: plf-slide-right;
    }

    .plf--item-slide-left .plf-in {
      animation-name: plf-slide-left;
    }

    .plf--item-scale .plf-in {
      animation-name: plf-scale;
    }

    .plf--item-zoom-out .plf-in {
      animation-name: plf-zoom-out;
    }

    .plf--item-blur .plf-in {
      animation-name: plf-blur;
    }

    .plf--item-reveal .plf-in {
      animation-name: plf-reveal;
    }

    .plf--item-flip .plf-in {
      animation-name: plf-flip;
      transform-origin: center bottom;
    }

    .plf--item-none .plf-in {
      animation: none;
    }
  }

  @keyframes plf-fade-down {
    from {
      opacity: 0;
      transform: translateY(-8px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes plf-slide-right {
    from {
      opacity: 0;
      transform: translateX(18px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes plf-slide-left {
    from {
      opacity: 0;
      transform: translateX(-18px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes plf-zoom-out {
    from {
      opacity: 0;
      transform: scale(1.06);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes plf-reveal {
    from {
      opacity: 0;
      clip-path: inset(0 0 100% 0);
    }
    to {
      opacity: 1;
      clip-path: inset(0 0 0 0);
    }
  }

  @keyframes plf-flip {
    from {
      opacity: 0;
      transform: perspective(800px) rotateX(12deg);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes plf-fade {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes plf-fade-up {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes plf-scale {
    from {
      opacity: 0;
      transform: scale(0.96);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes plf-blur {
    from {
      opacity: 0;
      filter: blur(6px);
    }
    to {
      opacity: 1;
      filter: none;
    }
  }

  @media screen and (max-width: 749px) {
    .section-resource-list {
      padding-inline: var(--plr-pad-x-mobile, 16px) !important;
    }

    .plf {
      padding-inline: var(--plf-offset-mobile, 12px) 0;
    }

    .plf__row {
      gap: var(--plf-gap-mobile, 14px);
      justify-content: flex-start;
    }

    .plf__tab {
      font-size: var(--plf-size-mobile, 13px);
    }
  }
/* END_SECTION:product-list */

/* START_SECTION:productos-recomendados (INDEX:31) */
/* Todas las fotos con la misma proporcion, para que titulos y precios queden
     a la misma altura aunque cada foto venga con su propia forma. Va con
     !important porque la tarjeta escribe su proporcion en su atributo style.

     No basta con fijar la variable en `.card-gallery`: el contenedor que de
     verdad dibuja el cuadro de la foto es `.product-media` (el `<img>` solo
     hereda de ahi), y algunas fotos (las que no calzaban con el contenedor)
     se quedaban con su forma original porque esa herencia no bastaba en todos
     los casos. Por eso, ademas de la variable, la proporcion se aplica
     directamente sobre el contenedor real y sobre la propia foto (o video),
     asi ninguna imagen se queda por fuera. */
  .prc[style*='--prc-ratio'] .card-gallery {
    --gallery-aspect-ratio: var(--prc-ratio) !important;
  }

  .prc[style*='--prc-ratio'] .card-gallery .product-media,
  .prc[style*='--prc-ratio'] .card-gallery svg,
  .prc[style*='--prc-ratio'] .card-gallery .product-media-container img,
  .prc[style*='--prc-ratio'] .card-gallery .product-media-container video {
    aspect-ratio: var(--prc-ratio) !important;
  }

  .prc[style*='--prc-ratio'] .card-gallery .product-media-container img,
  .prc[style*='--prc-ratio'] .card-gallery .product-media-container video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .prc-title {
    margin: 0 0 var(--prc-title-gap, 20px);
    font-family: 'Montserrat', var(--font-heading--family), sans-serif;
    font-size: var(--prc-title-size, 24px);
    font-weight: var(--prc-title-weight, 700);
    letter-spacing: var(--prc-title-ls, 0);
    color: var(--prc-title-color, #111);
    text-align: var(--prc-title-align, left);
    line-height: 1.15;
  }

  .prc-title--upper {
    text-transform: uppercase;
  }

  .prc-empty {
    margin: 0;
    font-family: 'Montserrat', var(--font-body--family), sans-serif;
    font-size: 14px;
    color: #8a8a8a;
    text-align: var(--prc-title-align, left);
  }

  .prc[hidden] {
    display: none;
  }

  .prc-empty[hidden] {
    display: none;
  }

  /* Entrada suave de las tarjetas cuando llegan por AJAX. */
  @media (prefers-reduced-motion: no-preference) {
    .prc .resource-list__item {
      animation: prc-in 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
  }

  @keyframes prc-in {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  /* Mismo criterio que en la cuadrícula del catálogo: el acercamiento al pasar
     el mouse se puede apagar solo en esta sección. */
  .prc--no-hover .product-card:hover,
  .prc--no-hover .product-card:hover .card-gallery,
  .prc--no-hover .product-card:hover .product-card__image {
    transform: none !important;
  }

  @media screen and (max-width: 749px) {
    .prc {
      padding-inline: var(--prc-pad-x-mobile, 16px);
    }

    .prc-title {
      font-size: var(--prc-title-size-mobile, 20px);
    }
  }
/* END_SECTION:productos-recomendados */

/* START_SECTION:slideshow (INDEX:37) */
.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:vistos-recientemente (INDEX:38) */
/* Todas las fotos con la misma proporcion, para que titulos y precios queden
     a la misma altura aunque cada foto venga con su propia forma. Va con
     !important porque la tarjeta escribe su proporcion en su atributo style.

     No basta con fijar la variable en `.card-gallery`: el contenedor que de
     verdad dibuja el cuadro de la foto es `.product-media` (el `<img>` solo
     hereda de ahi), y algunas fotos (las que no calzaban con el contenedor)
     se quedaban con su forma original porque esa herencia no bastaba en todos
     los casos. Por eso, ademas de la variable, la proporcion se aplica
     directamente sobre el contenedor real y sobre la propia foto (o video),
     asi ninguna imagen se queda por fuera. */
  .rvp[style*='--rvp-ratio'] .card-gallery {
    --gallery-aspect-ratio: var(--rvp-ratio) !important;
  }

  .rvp[style*='--rvp-ratio'] .card-gallery .product-media,
  .rvp[style*='--rvp-ratio'] .card-gallery svg,
  .rvp[style*='--rvp-ratio'] .card-gallery .product-media-container img,
  .rvp[style*='--rvp-ratio'] .card-gallery .product-media-container video {
    aspect-ratio: var(--rvp-ratio) !important;
  }

  .rvp[style*='--rvp-ratio'] .card-gallery .product-media-container img,
  .rvp[style*='--rvp-ratio'] .card-gallery .product-media-container video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .rvp[hidden] {
    display: none;
  }

  .rvp-title {
    margin: 0 0 var(--rvp-title-gap, 20px);
    font-family: 'Montserrat', var(--font-heading--family), sans-serif;
    font-size: var(--rvp-title-size, 24px);
    font-weight: var(--rvp-title-weight, 700);
    letter-spacing: var(--rvp-title-ls, 0);
    color: var(--rvp-title-color, #111);
    text-align: var(--rvp-title-align, left);
    line-height: 1.15;
  }

  .rvp-title--upper {
    text-transform: uppercase;
  }

  /* Título a la izquierda y el enlace de borrar historial al otro extremo, a la
     misma altura. */
  .rvp-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: var(--rvp-title-gap, 20px);
  }

  .rvp-head .rvp-title {
    margin-bottom: 0;
  }

  .rvp-clear {
    display: block;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    font-family: 'Montserrat', var(--font-body--family), sans-serif;
    font-size: 12px;
    color: #8a8a8a;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    transition: color 0.2s ease;
  }

  .rvp-clear:hover {
    color: #111;
  }

  /* Los circulos de color de esta seccion se rigen por sus propios ajustes.
     Tres clases contra una: gana a la regla del bloque de precio aunque las dos
     lleven !important. Y por si acaso, el JS los vuelve a fijar en linea. */
  .rvp .resource-list .qsh-swatches {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--qsh-swatch-gap, 5px) !important;
    margin-top: 6px;
  }

  .rvp .resource-list .qsh-swatches > * {
    box-sizing: border-box;
    flex: 0 0 auto !important;
    width: var(--qsh-swatch-size, 14px) !important;
    height: var(--qsh-swatch-size, 14px) !important;
    min-width: var(--qsh-swatch-size, 14px) !important;
    min-height: var(--qsh-swatch-size, 14px) !important;
    max-width: var(--qsh-swatch-size, 14px) !important;
    max-height: var(--qsh-swatch-size, 14px) !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.15);
    background-size: cover;
    background-position: center;
    cursor: pointer;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
  }

  .rvp .resource-list .qsh-swatches > *:hover {
    transform: scale(1.08);
  }

  .rvp .resource-list .qsh-swatches > .is-active {
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px #111;
  }

  /* Entrada suave de las tarjetas cuando llegan. */
  @media (prefers-reduced-motion: no-preference) {
    .rvp .resource-list__item {
      animation: rvp-in 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
  }

  @keyframes rvp-in {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  /* Mismo criterio que en el catálogo: el acercamiento al pasar el mouse se
     puede apagar solo en esta sección. */
  .rvp--no-hover .product-card:hover,
  .rvp--no-hover .product-card:hover .card-gallery,
  .rvp--no-hover .product-card:hover .product-card__image {
    transform: none !important;
  }

  @media screen and (max-width: 749px) {
    .rvp {
      padding-inline: var(--rvp-pad-x-mobile, 16px);
    }

    .rvp-title {
      font-size: var(--rvp-title-size-mobile, 20px);
    }

    .rvp .resource-list .qsh-swatches > * {
      width: var(--qsh-swatch-size-mobile, 9px) !important;
      height: var(--qsh-swatch-size-mobile, 9px) !important;
      min-width: var(--qsh-swatch-size-mobile, 9px) !important;
      min-height: var(--qsh-swatch-size-mobile, 9px) !important;
      max-width: var(--qsh-swatch-size-mobile, 9px) !important;
      max-height: var(--qsh-swatch-size-mobile, 9px) !important;
    }
  }
/* END_SECTION:vistos-recientemente */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* START_BLOCK:_blog-post-content (INDEX:42) */
.blog-post-content {
    max-width: var(--normal-content-width);
    margin: 0 auto;
    color: var(--color, inherit);
  }

  .blog-post-content a {
    color: currentcolor;
  }
/* END_BLOCK:_blog-post-content */

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

  .blog-post-card__content-text a:hover {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }
/* END_BLOCK:_blog-post-description */

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

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

  .blog-post-featured-image.size-style {
    --width: var(--size-style-width, 100%);
  }

  .blog-post-featured-image--height-fit {
    height: fit-content;
  }

  .blog-post-featured-image--height-fill {
    height: 100%;
  }

  .blog-post-featured-image__image {
    aspect-ratio: var(--ratio);
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  @media screen and (max-width: 749px) {
    .blog-post-featured-image {
      --width: var(--width-mobile, var(--width));
      --custom-width: var(--custom-width-mobile, var(--custom-width));
    }

    .blog-post-featured-image.size-style {
      --width: var(--size-style-width-mobile, var(--size-style-width, 100%));
    }
  }
/* END_BLOCK:_blog-post-featured-image */

/* START_BLOCK:_blog-post-image (INDEX:45) */
.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:46) */
.blog-post-details {
    display: flex;
    gap: var(--gap-sm);
    font-size: var(--font-paragraph-size);
    color: var(--color-details, var(--color-foreground-muted));
    white-space: nowrap;
    flex-wrap: wrap;
  }

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

/* START_BLOCK:_card (INDEX:48) */
.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:49) */
.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:50) */
.cart-page__title + .cart-page__items {
    margin-block-start: var(--margin-lg);
  }
/* END_BLOCK:_cart-products */

/* START_BLOCK:_cart-summary (INDEX:51) */
.cart-summary__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-2xl);
    container-type: inline-size;
    padding: 0;
    position: sticky;
    top: 0;
    align-self: start;

    @media screen and (min-width: 750px) {
      padding: var(--padding-5xl);
      grid-row: 1 / -1;
    }
  }

  body:has(#header-group header-component[sticky]) .cart-summary__inner {
    top: var(--header-height, 0);
  }

  .cart-summary {
    @media screen and (max-width: 749px) {
      border: none;
    }

    @media screen and (min-width: 750px) {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: 1 / -1;
    }
  }

  .cart-summary--extend {
    height: 100%;

    @media screen and (min-width: 750px) {
      border-right: none;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
  }

  /* If extend is on, only include top and bottom borders when the border radius is 0. */
  .cart-summary--extend:not(.has-border-radius) {
    @media screen and (min-width: 750px) {
      border-top: none;
      border-bottom: none;
    }
  }

  .cart-summary--extend .cart-summary__inner {
    @media screen and (min-width: 750px) {
      height: 100%;
      grid-row: 2 / -1;
      padding: var(--padding-md) var(--page-margin) var(--padding-4xl);
      width: var(--sidebar-width);
    }
  }

  /* If extend is off, apply the border radius to the inner summary container */
  .cart-summary__inner.has-border-radius {
    border-radius: var(--border-radius);
  }

  /* On mobile, drop the summary's custom palette and inherit from the cart
     section so the summary visually merges with the rest of the cart page. */
  @media screen and (max-width: 749px) {
    :is(.section-background, .cart-summary, .cart-summary__inner).inherit-parent-scheme--mobile {
      --color: inherit;
      --color-rgb: inherit;
      --color-background: inherit;
      --color-background-rgb: inherit;
      --color-foreground: inherit;
      --color-foreground-rgb: inherit;
      --color-foreground-subdued: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;
      --color-shadow: inherit;
      --color-shadow-rgb: inherit;
      --color-primary-button-text: inherit;
      --color-primary-button-background: inherit;
      --color-primary-button-border: inherit;
      --color-primary-button-hover-text: inherit;
      --color-primary-button-hover-background: inherit;
      --color-primary-button-hover-border: inherit;
      --color-secondary-button-text: inherit;
      --color-secondary-button-background: inherit;
      --color-secondary-button-border: inherit;
      --color-secondary-button-hover-text: inherit;
      --color-secondary-button-hover-background: inherit;
      --color-secondary-button-hover-border: inherit;
      --color-input-text: inherit;
      --color-input-text-rgb: inherit;
      --color-input-background: inherit;
      --opacity-10-25: inherit;
    }
  }
/* END_BLOCK:_cart-summary */

/* START_BLOCK:_cart-title (INDEX:52) */
.cart-title h1 {
    margin-block-end: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--gap-sm);
  }

  .cart-title .cart-bubble {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: auto;
    padding: var(--cart-padding);
  }

  .cart-title .cart-bubble[data-maintain-ratio] {
    width: min(1lh, 26px);
    height: min(1lh, 26px);
  }

  .cart-title .cart-bubble .cart-bubble__background {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
  }

  .cart-title .cart-bubble__text {
    color: var(--color-foreground);
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
    font-size: clamp(var(--font-size--3xs), 0.75em, var(--font-size--xs));
  }
/* END_BLOCK:_cart-title */

/* START_BLOCK:_collection-image (INDEX:55) */
.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:57) */
.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:61) */
.featured-blog-posts-card {
    width: 100%;
    position: relative;
    height: 100%;
    text-align: var(--text-align);
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* START_BLOCK:_featured-blog-posts-image (INDEX:62) */
.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:64) */
.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:67) */
.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:68) */
.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:69) */
.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);
  }

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

/* START_BLOCK:_header-menu (INDEX:70) */
/* ══════════════════════════════════════════════════════════
     Portal — todo lo desplegable vive fuera del header, porque
     #header-component usa transform en modo glass y eso atrapa
     cualquier position:fixed que cuelgue de él.
     ══════════════════════════════════════════════════════════ */
  /* Los paneles se montan dentro de #header-component y se anclan con
     top: 100%, así que van pegados a su borde inferior por construcción:
     no hay medida que pueda fallar ni hueco posible. */

  /* El scroll de la página NO se bloquea con overflow: hidden. Ponerlo en
     el <html> fuerza su scroll a 0 y la tienda saltaba arriba del todo al
     abrir el menú. Lo gestiona el JS descartando el gesto fuera del cajón. */

  /* ══════════════════════════════════════════════════════════
     GLASS DE LOS PANELES = GLASS DEL HEADER
     ──────────────────────────────────────────────────────────
     Aquí no se recalcula nada. #header-component escribe en su
     atributo style las variables --header-glass-tint,
     --header-glass-opacity y --header-glass-blur; como los paneles
     viven dentro de él, las heredan. Lo que sigue es exactamente la
     misma declaración que el tema usa en .header__underlay: mismo
     rgba, mismo blur, mismo saturate(1.6).

     Y el header apila DOS capas iguales (underlay-closed y
     underlay-open, ambas forzadas al 100% en modo glass), así que el
     panel apila dos también. Con una sola se veía más claro y menos
     desenfocado: ese era justo el escalón que se notaba.

     Esta capa está SIEMPRE pintada; lo que la revela es el clip-path.
     ══════════════════════════════════════════════════════════ */
  /* ══════════════════════════════════════════════════════════
     EL CRISTAL ÚNICO
     ──────────────────────────────────────────────────────────
     Lo inserta el JS dentro de #header-component. Altura fija de
     100dvh que nunca cambia; lo que se mueve es el recorte.
     Los valores son exactamente los que el tema usa en sus
     underlays, leídos de las mismas variables que #header-component
     escribe en su atributo style.
     ══════════════════════════════════════════════════════════ */
  /* ══════════════════════════════════════════════════════════════
     EL CONTENEDOR QUE RECORTA DE VERDAD (ver ensureGlass en
     assets/unf-header-nav.js).

     clip-path no reduce el trabajo: es una máscara que se aplica al
     final, así que el navegador desenfocaba una superficie del alto de
     toda la pantalla y luego enseñaba solo la franja del header. Y lo
     rehacía en cada fotograma en que cambiaba el fondo, o sea en cada
     fotograma de scroll.

     `overflow: hidden` sí es un recorte real: el navegador solo prepara
     lo que cabe aquí dentro. Este elemento NO lleva desenfoque, así que
     su altura se puede mover sin el problema de siempre (mover la altura
     de una capa con backdrop-filter hace que Chrome deje de repintarla).

     Se le da un poco de holgura por debajo del recorte del cristal para
     no cortar nunca nada que el clip-path no estuviera cortando ya.
     ══════════════════════════════════════════════════════════════ */
  .unf-glass-clip {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: calc(var(--unf-glass-h, 60px) + 48px);
    max-height: calc(100dvh + 12px);
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
    /* Misma duración y curva que el recorte del cristal: crece con el
       desplegable, siempre un paso por delante, así que nunca se ve. */
    transition: height var(--unf-panel-duration, 280ms) var(--unf-panel-easing, cubic-bezier(0.22, 1, 0.36, 1));
  }

  .unf-glass {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    /* Un poco más de 100dvh a propósito: con el header pegajoso anclado en
       top: -1px, el cajón a pantalla completa acaba un par de píxeles por
       debajo del borde inferior y quedaba una franja sin cubrir. */
    height: calc(100dvh + 12px);
    z-index: 0;
    pointer-events: none;

    background: rgba(var(--header-glass-tint, 255, 255, 255), var(--header-glass-opacity, 0.4));
    /* Antes llevaba saturate(1.6): un realce de saturación del 60% sobre
       todo lo que queda detrás del cristal. Eso es lo que se leía como
       "filtro de contraste muy fuerte", sobre todo encima del logo 3D,
       cuyo fondo tiene colores muy vivos. El desenfoque solo, sin realce,
       deja el vidrio limpio y neutro. */
    -webkit-backdrop-filter: blur(var(--header-glass-blur, 12px));
    backdrop-filter: blur(var(--header-glass-blur, 12px));
    /* Sin will-change: era una promesa permanente al navegador de que
       este desenfoque va a cambiar, así que Chrome mantenía viva a todas
       horas una capa de composición del tamaño de la pantalla con un
       backdrop-filter listo para recalcularse — se pague o no se use.
       Eso es coste fijo en cada frame de toda la tienda, y además hacía
       que la animación del recorte fuera a trompicones (por eso el
       desenfoque parecía ir por detrás del borde).
       transform: translateZ(0) ya crea la capa que el blur necesita, que
       es lo único que hacía falta de verdad. */
    transform: translateZ(0);

    clip-path: inset(0 0 calc(100% - var(--unf-glass-h, 60px)) 0);
    /* MISMA duración y MISMA curva que el canto (.unf-glass-edge), que es
       la línea/sombra del borde. Antes el canto tenía su transición
       siempre y el cristal solo al abrir, así que el borde salía primero
       y el desenfoque llegaba tarde: se veía cómo se desplegaban por
       separado. Ahora los dos leen las mismas variables (declaradas en
       #header-component, justo debajo), así que no pueden desincronizarse
       ni al abrir ni al cerrar. */
    transition: clip-path var(--unf-panel-duration, 280ms) var(--unf-panel-easing, cubic-bezier(0.22, 1, 0.36, 1));
  }

  /* Un solo sitio donde se define el tiempo del desplegable. Lo heredan
     tanto el cristal como el canto. */
  #header-component {
    --unf-panel-duration: 280ms;
    --unf-panel-easing: cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* ── El canto inferior ────────────────────────────────────────
     Es un elemento aparte y NO recortado, a propósito: el clip-path de
     .unf-glass corta justo en el borde y se comería cualquier sombra que
     saliera hacia fuera.

     Va anclado a la misma variable que el recorte, así que hay un solo
     canto en toda la pieza: en el borde del header cuando no hay nada
     abierto, y en el borde del desplegable cuando lo hay. Se desplaza
     con él en vez de aparecer y desaparecer. */
  .unf-glass-edge {
    position: absolute;
    left: 0;
    right: 0;
    /* ══════════════════════════════════════════════════════════
       ANTES: top: var(--unf-glass-h) + transition: top.

       Ese era un tirón real. `top` es una propiedad de DISPOSICIÓN: al
       animarla, el navegador tiene que recalcular la posición de todo
       lo que hay dentro del header en CADA fotograma de los 280 ms, en
       el hilo principal — el mismo que está atendiendo el scroll y, en
       la home, el logo 3D.

       `transform` no toca la disposición: la mueve la GPU al componer.
       Es exactamente el mismo movimiento, con el mismo tiempo y la
       misma curva, pero sin recalcular nada.
       ══════════════════════════════════════════════════════════ */
    top: 0;
    transform: translate3d(0, var(--unf-glass-h, 60px), 0);
    height: var(--unf-edge-size, 24px);
    z-index: 0;
    pointer-events: none;

    /* Degradado, no box-shadow: una sombra con más difuminado que
       desplazamiento se derrama también hacia ARRIBA y oscurece el canto
       del header — eso era la separación que se notaba. Un degradado que
       arranca en el borde no puede sangrar hacia arriba. */
    background: linear-gradient(to bottom, rgb(0 0 0 / var(--unf-edge-alpha, 0.08)), rgb(0 0 0 / 0));
    /* Exactamente las mismas variables que el recorte del cristal: el
       borde y el desenfoque se despliegan como una sola pieza. */
    transition: transform var(--unf-panel-duration, 280ms) var(--unf-panel-easing, cubic-bezier(0.22, 1, 0.36, 1));
  }

  /* La línea clara del canto, la misma que el tema pinta en su underlay.
     Va en el último píxel del cristal, no debajo. */
  .unf-glass-edge::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    height: 1px;
    background: rgb(255 255 255 / var(--unf-edge-line, 0.16));
  }

  @media (prefers-reduced-motion: reduce) {
    .unf-glass-clip,
    .unf-glass,
    .unf-glass-edge {
      transition: none;
    }
  }

  /* El header en modo glass apila DOS capas: .header__underlay-closed y
     .header__underlay-open, las dos al 100% y con la misma declaración.
     Aquí NO se pueden apilar dos: la capa lleva clip-path, y clip-path
     convierte al elemento en «backdrop root», así que un backdrop-filter
     en sus hijos deja de ver la página y desenfoca la nada — el panel se
     quedaba completamente transparente.

     Así que va una sola capa con los valores equivalentes a las dos del
     header: dos tintes de alfa `a` superpuestos dan 1-(1-a)², y dos
     desenfoques de radio `b` equivalen a uno de b·√2 (el saturate, al
     aplicarse dos veces, es 1.6² = 2.56). Mismo material, un solo
     elemento. */
  .unf-mega[data-glass-src='header'] .unf-mega__glass,
  .unf-drawer[data-glass-src='header'] .unf-drawer__glass {
    --unf-glass-a: var(--header-glass-opacity, 0.4);
    --unf-glass-b: var(--header-glass-blur, 12px);

    background: rgba(
      var(--header-glass-tint, 255, 255, 255),
      calc(1 - (1 - var(--unf-glass-a)) * (1 - var(--unf-glass-a)))
    );
    /* Antes: saturate(2.56) — un realce de saturación del 156%, aún más
       fuerte que el del header. Ese era el "filtro de contraste" más
       agresivo de todos. Fuera: solo desenfoque, sin realzar color. */
    -webkit-backdrop-filter: blur(calc(var(--unf-glass-b) * 1.414));
    backdrop-filter: blur(calc(var(--unf-glass-b) * 1.414));
    /* Sin will-change: era una promesa permanente al navegador de que
       este desenfoque va a cambiar, así que Chrome mantenía viva a todas
       horas una capa de composición del tamaño de la pantalla con un
       backdrop-filter listo para recalcularse — se pague o no se use.
       Eso es coste fijo en cada frame de toda la tienda, y además hacía
       que la animación del recorte fuera a trompicones (por eso el
       desenfoque parecía ir por detrás del borde).
       transform: translateZ(0) ya crea la capa que el blur necesita, que
       es lo único que hacía falta de verdad. */
    transform: translateZ(0);
  }

  /* ── Sin costura entre header y panel ─────────────────────────
     El tema dibuja tres cosas en el borde inferior del header:
       · inset 0 -1px blanco en cada underlay (línea clara)
       · .header__underlay-open::after, que es la sombra de popover
         recortada justo por debajo de --header-height
       · el border-bottom de .header__row--top
     Con el desplegable abierto, eso parte el conjunto en dos piezas.
     Se apagan mientras haya algo desplegado. */
  #header-component[data-glass-mode] .header__underlay-open::after {
    box-shadow: none;
  }

  html:is([data-unf-mega-open], [data-unf-drawer-open])
    #header-component[data-glass-mode]
    :is(.header__underlay-closed, .header__underlay-open) {
    box-shadow: none;
  }

  html:is([data-unf-mega-open], [data-unf-drawer-open]) #header-component .header__row--top,
  html:is([data-unf-mega-open], [data-unf-drawer-open]) #header-component .header__row--top .header__columns {
    border-bottom-color: transparent;
  }

  /* ── Capa de fondo ────────────────────────────────────────────
     Va separada del contenido a propósito: backdrop-filter deja de
     ver la página si el elemento (o un ancestro) anima su opacidad.
     Por eso esta capa nunca se anima; lo que entra y sale es el
     contenido, que va encima. Es el mismo truco que usa el tema en
     .header__underlay.

     El color va SIEMPRE en el atributo style desde Liquid (tanto en
     modo glass como en sólido). Aquí queda transparente a propósito:
     un `var(--color-background, #fff)` de reserva era opaco y podía
     tapar el desenfoque. */
  .unf-mega__glass,
  .unf-drawer__glass {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: transparent;
    pointer-events: none;

    /* ESTA CAPA NUNCA SE OCULTA.
       backdrop-filter solo empieza a leer la página cuando el elemento
       se pinta. Si la capa aparece de golpe —`display`, `visibility` o
       una altura que crece— Chrome no repinta el desenfoque hasta que
       algo más invalida la pintura, y ese algo acababa siendo mover el
       ratón por encima de cualquier cosa: de ahí el panel sin relleno.
       Aquí la capa está siempre renderizada y lo único que cambia es el
       recorte, así que el cristal ya está listo antes de abrir. */
    clip-path: inset(0 0 100% 0);
    transition: clip-path 260ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .unf-mega[data-open='true'] .unf-mega__glass,
  .unf-drawer[data-open='true'] .unf-drawer__glass {
    clip-path: inset(0);
  }

  @media (prefers-reduced-motion: reduce) {
    .unf-mega__glass,
    .unf-drawer__glass {
      transition: none;
    }
  }

  /* ── El contenedor nunca pinta fondo ───────────────────────────
     `color-custom-<block.id>` (snippet contrast-override) aplica un
     background-color OPACO al mismo elemento que lleva .unf-mega /
     .unf-drawer. Eso era lo que tapaba el glass: la capa translúcida
     estaba bien, pero debajo había un rectángulo sólido del tema.
     De esa clase solo queremos heredar el color de texto.
     Clase duplicada a propósito, para ganarle en especificidad. */
  .unf-mega.unf-mega,
  .unf-drawer.unf-drawer,
  .unf-mega .unf-mega__panel,
  .unf-drawer .unf-drawer__scroll {
    background: transparent;
  }

  /* Ninguna sombra ni línea propia en el panel: el canto lo pinta
     .unf-glass-edge, una sola vez y en el sitio correcto. Una sombra aquí
     se derramaba hacia arriba y oscurecía el borde del header, que es
     exactamente la separación que se notaba entre los dos. */
  .unf-mega__glass,
  .unf-drawer__glass {
    box-shadow: none;
  }

  /* ── Efecto glass (modo personalizado) ───────────────────────
     Ahí el color y el desenfoque se escriben en el atributo style desde
     Liquid, con los valores ya resueltos. Estos ajustes de composición
     hacen falta igual: sin ellos Chrome calcula el blur pero lo pinta
     como si fuera 0. Es lo mismo que hace el tema en su underlay. */
  .unf-mega[data-glass='true'] .unf-mega__glass,
  .unf-drawer[data-glass='true'] .unf-drawer__glass {
    /* Sin will-change: era una promesa permanente al navegador de que
       este desenfoque va a cambiar, así que Chrome mantenía viva a todas
       horas una capa de composición del tamaño de la pantalla con un
       backdrop-filter listo para recalcularse — se pague o no se use.
       Eso es coste fijo en cada frame de toda la tienda, y además hacía
       que la animación del recorte fuera a trompicones (por eso el
       desenfoque parecía ir por detrás del borde).
       transform: translateZ(0) ya crea la capa que el blur necesita, que
       es lo único que hacía falta de verdad. */
    transform: translateZ(0);
  }

  .unf-chev {
    width: 1em;
    height: 1em;
    flex: none;
    transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* ══════════════════════════════════════════════════════════
     Cabecera móvil — botón hamburguesa
     ══════════════════════════════════════════════════════════ */
  .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);
  }

  .unf-burger {
    display: grid;
    place-items: center;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: var(--color-foreground);
    min-width: var(--minimum-touch-target, 44px);
    min-height: var(--minimum-touch-target, 44px);
  }

  .unf-burger__icon {
    grid-area: 1 / 1;
    display: flex;
    transition: opacity 180ms ease, transform 180ms ease;
  }

  .unf-burger__icon svg {
    width: var(--icon-size-md, 20px);
    height: var(--icon-size-md, 20px);
  }

  .unf-burger__icon--close {
    opacity: 0;
    transform: rotate(-45deg) scale(0.8);
  }

  .unf-burger[aria-expanded='true'] .unf-burger__icon--open {
    opacity: 0;
    transform: rotate(45deg) scale(0.8);
  }

  .unf-burger[aria-expanded='true'] .unf-burger__icon--close {
    opacity: 1;
    transform: none;
  }

  /* ══════════════════════════════════════════════════════════
     Cajón móvil
     ══════════════════════════════════════════════════════════ */
  .unf-drawer {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: calc(100dvh - var(--unf-nav-top, 60px));
    z-index: 2;
    color: var(--color-foreground, #000);

    /* Sin `visibility: hidden`: apagaría también la capa de cristal.
       Lo que se oculta es el contenido; el contenedor solo deja de
       recibir toques. */
    pointer-events: none;
  }

  .unf-drawer[data-open='true'] {
    pointer-events: auto;
  }

  .unf-drawer[hidden] {
    display: none;
  }

  .unf-drawer__scroll {
    position: relative;
    z-index: 1;
    height: 100%;
    visibility: hidden;

    /* Baja y sube como una cortina, con EXACTAMENTE la misma duración y
       la misma curva que el recorte de .unf-glass (280ms). Así el cristal
       y el contenido descienden pegados, como una sola pieza, en vez de
       que uno aparezca y el otro se deslice por su cuenta. */
    clip-path: inset(0 0 100% 0);
    transition: clip-path 280ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 280ms;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    padding: 24px 20px calc(48px + env(safe-area-inset-bottom, 0px));
  }

  .unf-drawer[data-open='true'] .unf-drawer__scroll {
    visibility: visible;
    clip-path: inset(0);
    transition-delay: 0s;
  }

  /* Un pequeño arrastre del contenido dentro de la cortina: da la
     sensación de que el menú desciende, no de que se destapa. */
  .unf-drawer__nav {
    transform: translateY(-14px);
    transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .unf-drawer[data-open='true'] .unf-drawer__nav {
    transform: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .unf-drawer__scroll,
    .unf-drawer__nav {
      transition: none;
    }
  }

  .unf-drawer__nav {
    display: flex;
    flex-direction: column;
    gap: 28px;
  }

  .unf-drawer__primary {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
  }

  .unf-drawer__row + .unf-drawer__row {
    margin-top: 2px;
  }

  .unf-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .unf-drawer__link {
    display: block;
    text-decoration: none;
    color: inherit;
    font-family: var(--menu-top-level-font-family, inherit);
    font-weight: var(--menu-top-level-font-weight, 500);
    font-size: var(--unf-drawer-primary-size, 26px);
    line-height: 1.35;
    letter-spacing: -0.01em;
    padding-block: 6px;
    text-transform: uppercase;
    transition: opacity 180ms ease;
  }

  .unf-drawer__link:hover,
  .unf-drawer__link.is-current {
    opacity: 0.55;
  }

  .unf-drawer__acc-btn {
    background: none;
    border: 0;
    padding: 8px;
    margin-inline-end: -8px;
    color: inherit;
    cursor: pointer;
    font-size: calc(var(--unf-drawer-primary-size, 26px) * 0.72);
    display: flex;
    align-items: center;
  }

  .unf-drawer__row[data-open='true'] .unf-drawer__acc-btn .unf-chev {
    transform: rotate(180deg);
  }

  .unf-drawer__acc-body {
    height: 0;
    overflow: hidden;
    transition: height 300ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .unf-drawer__acc-inner {
    padding-block: 8px 18px;
  }

  .unf-drawer__children {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .unf-drawer__children .unf-mega__link {
    font-size: calc(var(--unf-drawer-secondary-size, 14px) * 1.15);
    padding-block: 7px;
  }

  .unf-drawer__children .unf-mega__li--deep .unf-mega__link {
    padding-inline-start: 14px;
    opacity: 0.7;
  }

  .unf-drawer__secondary,
  .unf-drawer__footer-links {
    list-style: none;
    margin: 0;
    padding: 22px 0 0;
    border-top: 1px solid rgb(var(--color-foreground-rgb, 0 0 0) / 0.14);
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .unf-drawer__secondary a,
  .unf-drawer__footer-links a {
    text-decoration: none;
    color: inherit;
    font-size: var(--unf-drawer-secondary-size, 14px);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.75;
    transition: opacity 180ms ease;
  }

  .unf-drawer__footer-links {
    border-top: 0;
    padding-top: 0;
    gap: 14px;
  }

  .unf-drawer__footer-links a {
    text-transform: none;
    letter-spacing: 0;
    font-size: calc(var(--unf-drawer-secondary-size, 14px) * 1.35);
    opacity: 1;
  }

  .unf-drawer__secondary a:hover,
  .unf-drawer__footer-links a:hover {
    opacity: 0.45;
  }

  /* ══════════════════════════════════════════════════════════
     Imágenes del cajón móvil
     ──────────────────────────────────────────────────────────
     Fila que se desliza hacia la derecha (mismo gesto que el
     carrusel de colecciones). Cada imagen puede traer su propio
     ancho y alto en línea; si no, manda la medida general.
     ══════════════════════════════════════════════════════════ */
  .unf-drawer__promos {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: var(--unf-promo-gap, 10px);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding-bottom: 6px;
    cursor: grab;
  }

  .unf-drawer__promos::-webkit-scrollbar {
    display: none;
  }

  .unf-drawer__promos[data-dragging='true'] {
    cursor: grabbing;
    scroll-snap-type: none;
    user-select: none;
  }

  .unf-promo {
    position: relative;
    display: block;
    flex: 0 0 auto;
    width: var(--unf-promo-w, 200px);
    height: var(--unf-promo-h, auto);
    aspect-ratio: var(--unf-promo-ratio, 1 / 1);
    overflow: hidden;
    border-radius: var(--menu-image-border-radius, 0px);
    text-decoration: none;
    scroll-snap-align: start;
    color: inherit;
  }

  .unf-promo__img {
    width: 100%;
    height: 100%;
    object-fit: var(--unf-promo-fit, cover);
    display: block;
  }

  .unf-promo__text {
    position: absolute;
    inset: auto 0 0 0;
    padding: 12px;
    color: var(--unf-promo-text-color, #fff);
    font-size: var(--unf-promo-text-size, calc(var(--unf-drawer-secondary-size, 14px) * 1.35));
    font-weight: 500;
    text-shadow: 0 1px 12px rgb(0 0 0 / 0.45);
  }

  .unf-drawer__langs form {
    display: flex;
    gap: 22px;
    align-items: center;
    flex-wrap: wrap;
  }

  .unf-drawer__lang {
    background: none;
    border: 0;
    padding: 4px 0;
    cursor: pointer;
    color: inherit;
    font-size: var(--unf-drawer-secondary-size, 14px);
    letter-spacing: 0.06em;
    opacity: 0.55;
    border-bottom: 1px solid transparent;
    transition: opacity 180ms ease, border-color 180ms ease;
  }

  .unf-drawer__lang.is-active {
    opacity: 1;
    border-bottom-color: currentcolor;
  }

  .unf-drawer__socials {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 12px;
    padding-top: 20px;
    border-top: 1px solid rgb(var(--color-foreground-rgb, 0 0 0) / 0.14);
  }

  .unf-drawer__social {
    text-decoration: none;
    color: inherit;
    font-size: var(--unf-drawer-secondary-size, 14px);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: opacity 180ms ease;
  }

  .unf-drawer__social:nth-child(even) {
    text-align: right;
  }

  .unf-drawer__social:hover {
    opacity: 0.5;
  }

  /* ══════════════════════════════════════════════════════════
     Barra de navegación de escritorio
     ══════════════════════════════════════════════════════════ */
  .header-menu {
    height: 100%;
  }

  .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);
    margin: 0;
    padding: 0;
  }

  .menu-list__list-item {
    flex-shrink: 0;
    white-space: nowrap;
    display: flex;
    align-items: center;
    height: 100%;
  }

  .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;
    align-items: center;
    cursor: pointer;
    height: 100%;
    margin-block: 0;
  }

  @media screen and (min-width: 750px) {
    .menu-list__link {
      font-size: var(--menu-top-level-font-size-desktop);
    }
  }

  .menu-list__link-title {
    padding-inline: calc(var(--gap-xl) / 2);
  }

  /* Static a propósito: así el panel se ancla al .header__row del tema
     (position: relative, ancho completo, y su borde inferior es el del
     header) en lugar de al <li>, que es lo que lo dejaba estrecho. */
  .unf-hm__item {
    position: static;
  }

  .unf-hm__item[data-unf-trigger] .menu-list__link-title {
    padding-inline-end: 4px;
  }

  .unf-hm__toggle {
    background: none;
    border: 0;
    padding: 0 calc(var(--gap-xl) / 2) 0 0;
    margin: 0;
    color: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: 0.85em;
    opacity: 0.7;
  }

  .unf-hm__item[data-open='true'] .unf-hm__toggle .unf-chev {
    transform: rotate(180deg);
  }

  /* Al pasar el mouse por un elemento, los demas se apagan. Se hace con
     opacidad y no cambiando el color: asi el color propio que cada enlace
     tenga puesto en el personalizador no se pierde. */
  .unf-hm__list:where(:has(.unf-hm__item:hover)) .menu-list__link,
  .unf-hm__list:where(:has(.unf-hm__item[data-open='true'])) .menu-list__link {
    opacity: var(--opacity-subdued-text, 0.6);
    transition: opacity var(--animation-speed, 0.2s) var(--animation-easing, ease);
  }

  .unf-hm__item:hover .menu-list__link,
  .unf-hm__item[data-open='true'] .menu-list__link {
    opacity: 1;
  }

  /* ══════════════════════════════════════════════════════════
     Mega menú (escritorio)
     ══════════════════════════════════════════════════════════ */
  /* OJO: no poner z-index en .header__row. Con `position: relative` y
     z-index auto NO crea contexto de apilamiento, que es justo la
     situación en la que el .header__underlay del tema consigue que
     backdrop-filter vea la página. Al elevarla, el desenfoque de los
     paneles dejaba de tener nada detrás que desenfocar.
     La .header-section ya va en z-index 18, así que la altura sobra. */

  /* El tema pone `contain: layout` en .header y eso impide que
     backdrop-filter vea el contenido real de la página (lo documentan
     ellos mismos en header.liquid). Solo lo corrigen cuando el modo
     glass está activo; aquí se corrige siempre, y en ambos elementos
     por si el id y la clase no son el mismo nodo. */
  #header-component,
  .header {
    contain: style;
  }

  .unf-mega {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1;
    pointer-events: none;
    color: var(--color-foreground, #000);
  }

  /* Solo mientras el JS no ha cargado. En cuanto lo hace se quita el
     atributo y el panel ya no vuelve a ocultarse con `display`. */
  .unf-mega[hidden] {
    display: none;
  }

  .unf-mega[data-open='true'] {
    pointer-events: auto;
  }

  .unf-mega__panel {
    position: relative;
    z-index: 1;
    background: transparent;
    padding: 34px var(--section-padding-inline, 24px) 40px;
    max-height: calc(100dvh - var(--unf-nav-top, 60px));
    overflow-y: auto;
    overscroll-behavior: contain;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 220ms cubic-bezier(0.22, 1, 0.36, 1), transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0s linear 220ms;
  }

  .unf-mega[data-open='true'] .unf-mega__panel {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }

  .unf-mega[data-kind='collections'] .unf-mega__panel {
    padding-inline: 0;
  }

  .unf-mega__grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 32px 48px;
  }

  .unf-mega__col {
    flex: 0 0 auto;
    width: 100%;
  }

  /* ══════════════════════════════════════════════════════════
     Panel de catálogo: zona izquierda (listas) + zona derecha
     (imágenes). Separarlas en dos contenedores es lo que impide
     que las imágenes se caigan debajo cuando la lista crece.
     ══════════════════════════════════════════════════════════ */
  .unf-mega__left {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 32px 48px;
    width: 100%;
  }

  /* Texto de la lista de tipos de prenda */
  .unf-mega[data-kind='catalog'] .unf-mega__heading {
    font-family: var(--unf-cat-h-font, var(--menu-parent-font-family));
    font-weight: var(--unf-cat-h-weight, var(--menu-parent-font-weight));
    font-size: var(--unf-cat-h-size-m, var(--unf-cat-h-size, var(--menu-parent-font-size)));
    text-transform: var(--unf-cat-h-case, none);
    letter-spacing: var(--unf-cat-h-track, 0.6px);
    color: var(--unf-cat-h-color, inherit);
    opacity: var(--unf-cat-h-opacity, 0.55);
    margin-bottom: var(--unf-cat-h-gap, 12px);
  }

  .unf-mega[data-kind='catalog'] .unf-mega__link,
  .unf-drawer__children--catalog .unf-mega__link {
    font-family: var(--unf-cat-l-font, var(--menu-child-font-family));
    font-weight: var(--unf-cat-l-weight, var(--menu-child-font-weight));
    font-size: var(--unf-cat-l-size-m, var(--unf-cat-l-size, var(--menu-child-font-size)));
    text-transform: var(--unf-cat-l-case, none);
    letter-spacing: var(--unf-cat-l-track, 0px);
    line-height: var(--unf-cat-l-lh, 1.6);
    color: var(--unf-cat-l-color, var(--menu-child-font-color, currentcolor));
    padding-block: var(--unf-cat-l-gap, 4px);
  }

  /* Los accesos rápidos mantienen su tamaño mayor */
  .unf-mega[data-kind='catalog'] .unf-mega__link--big {
    font-size: calc(var(--unf-cat-l-size-m, var(--unf-cat-l-size, var(--menu-child-font-size))) * 1.5);
  }

  @media screen and (min-width: 990px) {
    .unf-mega__col--quick {
      width: var(--unf-mega-col-width, 190px);
    }

    .unf-mega__col--types {
      width: calc(
        var(--unf-mega-columns, 1) * var(--unf-mega-col-width, 190px) + (var(--unf-mega-columns, 1) - 1) * 40px
      );
      max-width: 100%;
    }

    .unf-mega__grid--sub .unf-mega__col {
      width: var(--unf-mega-col-width, 190px);
    }

    /* Escritorio: las dos zonas van SIEMPRE en la misma línea. La
       izquierda se encoge si hace falta; las imágenes no se mueven. */
    .unf-mega__grid--catalog {
      flex-wrap: nowrap;
      gap: 32px 40px;
    }

    .unf-mega__grid--catalog .unf-mega__left {
      flex: 1 1 auto;
      min-width: 0;
      width: auto;
    }

    .unf-mega__grid--imgs-right .unf-mega__features {
      margin-inline-start: auto;
    }

    .unf-mega__grid--imgs-left .unf-mega__features {
      order: -1;
      margin-inline-end: 40px;
    }

    .unf-mega__grid--imgs-below {
      flex-wrap: wrap;
    }

    .unf-mega__grid--imgs-below .unf-mega__features {
      width: 100%;
    }

    /* Tamaños de escritorio del texto de la lista */
    .unf-mega[data-kind='catalog'] .unf-mega__heading {
      font-size: var(--unf-cat-h-size, var(--menu-parent-font-size));
    }

    .unf-mega[data-kind='catalog'] .unf-mega__link {
      font-size: var(--unf-cat-l-size, var(--menu-child-font-size));
    }

    .unf-mega[data-kind='catalog'] .unf-mega__link--big {
      font-size: calc(var(--unf-cat-l-size, var(--menu-child-font-size)) * 1.5);
    }
  }

  .unf-mega__heading {
    margin: 0 0 12px;
    font-family: var(--menu-parent-font-family);
    font-weight: var(--menu-parent-font-weight);
    font-size: var(--menu-parent-font-size);
    text-transform: var(--menu-parent-font-case);
    letter-spacing: 0.04em;
    opacity: 0.55;
  }

  .unf-mega__heading-link {
    color: inherit;
    text-decoration: none;
  }

  .unf-mega__list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .unf-mega__list--cols {
    columns: var(--unf-mega-columns, 1);
    column-gap: 40px;
    column-fill: balance;
  }

  .unf-mega__li {
    break-inside: avoid;
  }

  .unf-mega__link {
    display: block;
    text-decoration: none;
    color: var(--menu-child-font-color, currentcolor);
    font-family: var(--menu-child-font-family);
    font-weight: var(--menu-child-font-weight);
    font-size: var(--menu-child-font-size);
    line-height: 1.6;
    padding-block: 4px;
    transition: opacity 160ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .unf-mega__link:hover {
    opacity: 0.55;
    transform: translateX(3px);
  }

  .unf-mega__link--big {
    font-size: calc(var(--menu-child-font-size) * 1.5);
    line-height: 1.35;
  }

  /* ══════════════════════════════════════════════════════════
     Imágenes grandes del panel de catálogo
     ──────────────────────────────────────────────────────────
     Miden lo que digan sus propios ajustes (--unf-feat-*), sin
     relación con las tarjetas de colección. Si se fija un alto,
     manda el alto; si se deja en automático, manda la proporción.
     ══════════════════════════════════════════════════════════ */
  .unf-mega__features {
    display: flex;
    flex-direction: var(--unf-feat-dir, row);
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--unf-feat-gap, 16px);
    flex: 0 0 auto;
  }

  .unf-mega__feature {
    position: relative;
    display: block;
    flex: 0 0 auto;
    width: var(--unf-feat-w-m, 260px);
    max-width: 100%;
    text-decoration: none;
    color: inherit;
  }

  .unf-mega__feature-media {
    position: relative;
    display: block;
    width: 100%;
    height: var(--unf-feat-h-m, auto);
    aspect-ratio: var(--unf-feat-ratio, 4 / 5);
    overflow: hidden;
    border-radius: var(--menu-image-border-radius, 0px);
    background: rgb(var(--color-foreground-rgb, 0 0 0) / 0.06);
  }

  .unf-mega__feature-img {
    width: 100%;
    height: 100%;
    object-fit: var(--unf-feat-fit, cover);
    display: block;
    transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .unf-mega__feature:hover .unf-mega__feature-img {
    transform: scale(1.03);
  }

  .unf-mega__feature-label {
    display: block;
    font-family: var(--unf-feat-label-font);
    font-size: var(--unf-feat-label-size-m, 15px);
    font-weight: var(--unf-feat-label-weight);
    text-transform: var(--unf-feat-label-case, none);
    letter-spacing: var(--unf-feat-label-tracking, 0px);
    text-align: var(--unf-feat-label-align, left);
    color: var(--unf-feat-label-color, #fff);
    line-height: 1.3;
  }

  /* Texto encima de la foto */
  .unf-mega__feature--label-over .unf-mega__feature-label {
    position: absolute;
    inset: auto 0 0 0;
    padding: 18px 20px;
    text-shadow: 0 1px 14px rgb(0 0 0 / 0.4);
  }

  /* Texto debajo de la foto */
  .unf-mega__feature--label-below .unf-mega__feature-label {
    padding-top: 10px;
  }

  @media screen and (min-width: 990px) {
    .unf-mega__feature {
      width: var(--unf-feat-w, 340px);
    }

    .unf-mega__feature-media {
      height: var(--unf-feat-h, auto);
    }

    .unf-mega__feature-label {
      font-size: var(--unf-feat-label-size, 18px);
    }
  }

  /* ══════════════════════════════════════════════════════════
     Carrusel horizontal de colecciones
     ══════════════════════════════════════════════════════════ */
  .unf-hscroll {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding-inline: var(--section-padding-inline, 24px);
    padding-bottom: 6px;
    cursor: grab;
  }

  .unf-hscroll::-webkit-scrollbar {
    display: none;
  }

  .unf-hscroll[data-dragging='true'] {
    cursor: grabbing;
    scroll-snap-type: none;
    user-select: none;
  }

  .unf-hscroll--drawer {
    padding-inline: 0;
  }

  .unf-hscroll {
    gap: var(--unf-col-gap, 10px);
  }

  /* ══════════════════════════════════════════════════════════
     Tarjeta de colección
     ──────────────────────────────────────────────────────────
     Ancho y alto se controlan por separado desde el editor, con
     valores propios para móvil. Alto en automático = manda la
     proporción elegida; alto con valor = manda ese alto.
     ══════════════════════════════════════════════════════════ */
  .unf-colcard {
    flex: 0 0 auto;
    width: var(--unf-col-w-m, 240px);
    max-width: 100%;
    scroll-snap-align: start;
    text-decoration: none;
    color: inherit;
    display: block;
  }

  .unf-colcard__media {
    display: block;
    width: 100%;
    height: var(--unf-col-h-m, auto);
    aspect-ratio: var(--unf-col-ratio, 4 / 5);
    overflow: hidden;
    background: rgb(var(--color-foreground-rgb, 0 0 0) / 0.06);
    border-radius: var(--menu-image-border-radius, 0px);
  }

  .unf-colcard__img {
    width: 100%;
    height: 100%;
    object-fit: var(--unf-col-fit, cover);
    display: block;
    transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .unf-colcard:hover .unf-colcard__img {
    transform: scale(1.04);
  }

  .unf-colcard__meta {
    display: block;
    padding-top: var(--unf-col-title-gap, 10px);
    text-align: var(--unf-col-title-align, left);
  }

  .unf-colcard__title {
    display: block;
    font-family: var(--unf-col-title-font, var(--menu-child-font-family));
    font-size: var(--unf-col-title-size-m, 14px);
    font-weight: var(--unf-col-title-weight, 500);
    text-transform: var(--unf-col-title-case, none);
    letter-spacing: var(--unf-col-title-tracking, 0px);
    color: var(--unf-col-title-color, inherit);
    line-height: var(--unf-col-title-lh, 1.3);
  }

  .unf-colcard__sub {
    display: block;
    font-family: var(--unf-col-title-font, var(--menu-child-font-family));
    font-size: var(--unf-col-sub-size, 13px);
    color: var(--unf-col-sub-color, inherit);
    opacity: var(--unf-col-sub-opacity, 0.55);
    padding-top: 2px;
  }

  @media screen and (min-width: 990px) {
    .unf-colcard {
      width: var(--unf-col-w, 280px);
    }

    .unf-colcard__media {
      height: var(--unf-col-h, auto);
    }

    .unf-colcard__title {
      font-size: var(--unf-col-title-size, 16px);
    }
  }

  /* Barra de navegación móvil heredada */
  .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);
    }

    & a {
      color: var(--color-foreground);
      text-decoration: none;
    }
  }

  .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);
  }
/* END_BLOCK:_header-menu */

/* START_BLOCK:_image (INDEX:73) */
.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:77) */
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-card-gallery (INDEX:79) */
/* ---------- Flechas de la previsualizacion de fotos de la tarjeta ----------
   Son botones propios y no los que trae el tema. Los del tema van dentro del
   enlace del producto y su componente encadena esperas al pasar de foto; estos
   mueven la tira de fotos directamente, asi que cada pulsacion responde al
   momento por seguidas que vengan. */
.cga {
  display: contents;
}

/* Las flechas del tema se apagan para que no salgan dos juegos. */
.cga--on .card-gallery slideshow-arrows {
  display: none;
}

.cga-nav {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--cga-offset, 12px);
  pointer-events: none;
  opacity: var(--cga-opacity, 1);
  transition: opacity 0.2s ease;
}

.cga-nav[hidden] {
  display: none;
}

.cga-nav__btn {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--cga-hit, 36px);
  height: var(--cga-hit, 36px);
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}

/* Chevron dibujado con dos bordes: tamano y grosor en pixeles exactos, y el
   color no cambia en ningun estado. */
.cga-nav__btn::before {
  content: '';
  display: block;
  width: var(--cga-size, 12px);
  height: var(--cga-size, 12px);
  border-left: var(--cga-stroke, 1.2px) solid var(--cga-color, #000);
  border-bottom: var(--cga-stroke, 1.2px) solid var(--cga-color, #000);
  transform: rotate(45deg);
}

.cga-nav__btn--next::before {
  transform: rotate(-135deg);
}

.cga-nav__btn:hover::before,
.cga-nav__btn:focus::before,
.cga-nav__btn:active::before {
  border-color: var(--cga-color, #000);
}

/* El desplazamiento suave del navegador es lo que metia la espera y tragaba las
   pulsaciones seguidas: se apaga y el movimiento lo lleva el propio bloque. */
.cga--on .card-gallery slideshow-slides {
  scroll-behavior: auto;
}

/* Modo deslizamiento, solo en PC: se ve el movimiento lateral pero la tira no
   se puede arrastrar ni mover con la rueda; el unico modo de cambiar de foto
   son las flechas. En celular esto no aplica y manda el dedo. */
@media screen and (min-width: 750px) {
  .cga--on.cga--speed-slide .card-gallery slideshow-slides {
    overflow: hidden;
    /* El enganche por foto se apaga aqui y no a mitad del movimiento: cuando se
       volvia a activar entre pulsacion y pulsacion, el navegador reenganchaba
       de golpe y por eso el cambio se veia sin animacion. */
    scroll-snap-type: none;
  }
}

/* Solo al pasar el mouse. */
@media (any-pointer: fine) {
  .cga--hover .cga-nav {
    opacity: 0;
  }

  .card-gallery:hover .cga-nav {
    opacity: var(--cga-opacity, 1);
  }
}

/* En celular no aparecen: la foto se pasa deslizando con el dedo. */
@media screen and (max-width: 749px) {
  .cga:not(.cga--mobile) .cga-nav {
    display: none;
  }
}

.card-gallery {
  position: relative;
}

.qsh-wrapper {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  pointer-events: none;
}

.qsh-size-popup {
  padding: var(--qsh-panel-gap, 10px);
}

/* ══════════════════════════════════════════════════════════════════
   EL DESENFOQUE SOLO EXISTE CUANDO EL PANEL ESTÁ ABIERTO.

   Este panel está en TODAS las tarjetas de producto, invisible hasta
   que se abre. Pero un `backdrop-filter` no es gratis por estar a
   opacidad 0: el navegador tiene que reservarle su propia capa y
   recalcular el desenfoque del fondo cuando lo que hay detrás cambia
   — o sea, en cada fotograma de scroll. Con 12 o 16 productos en
   pantalla eso son 12 o 16 desenfoques a la vez, y es de lo que más
   traba el scroll en celular.

   Ahora el desenfoque se enciende con el panel. Abierto se ve
   exactamente igual; cerrado no cuesta absolutamente nada.
   ══════════════════════════════════════════════════════════════════ */
.qsh-size-popup-inner {
  background: rgba(255, 255, 255, var(--qsh-panel-tint, 0.32));
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: var(--qsh-panel-radius, 0);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* En escritorio el panel sigue apareciendo al pasar el mouse. En táctil no hay
   hover, por eso esta regla vive dentro de @media (hover: hover) y el panel se
   abre solo con el botón + (clase .is-open). */
/* El hover solo abre el panel en pantallas anchas con mouse. Por debajo de
   750px (o en cualquier pantalla táctil) manda el botón +, así el panel nunca
   se abre solo ni queda el + encima. */
@media (hover: hover) and (min-width: 750px) {
  .card-gallery:hover .qsh-size-popup-inner,
  .qsh-size-popup-inner:hover {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    backdrop-filter: blur(var(--qsh-panel-blur, 18px));
    -webkit-backdrop-filter: blur(var(--qsh-panel-blur, 18px));
  }
}

/* Mientras se arrastra la tira, el panel sigue abierto aunque el mouse salga
   de la tarjeta. */
.qsh-wrapper.is-dragging-open .qsh-size-popup-inner,
.qsh-wrapper.is-open .qsh-size-popup-inner {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  backdrop-filter: blur(var(--qsh-panel-blur, 18px));
  -webkit-backdrop-filter: blur(var(--qsh-panel-blur, 18px));
}

.qsh-size-list {
  display: flex;
  flex: 1;
  gap: var(--qsh-size-gap, 6px);
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
}

.qsh-size-list::-webkit-scrollbar {
  display: none;
}

/* Señal de arrastre: se difumina el borde por el lado donde quedan tallas
   fuera de vista y aparece una flechita. Solo cuando de verdad no caben. */
.qsh-size-list.has-overflow {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent 100%);
}

.qsh-size-list.has-overflow:not(.at-start):not(.at-end) {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
}

.qsh-size-list.has-overflow.at-end {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22px);
  mask-image: linear-gradient(to right, transparent 0, #000 22px);
}

.qsh-scroll-hint {
  display: none;
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  color: #111;
  opacity: 0.5;
  pointer-events: none;
  animation: qsh-hint 1.6s ease-in-out infinite;
}

.qsh-size-popup-inner.has-overflow:not(.at-end) .qsh-scroll-hint {
  display: block;
}

@keyframes qsh-hint {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(3px); }
}

@media (prefers-reduced-motion: reduce) {
  .qsh-scroll-hint {
    animation: none;
  }
}

.qsh-size-list.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
}

/* Mientras se arrastra la tira, los botones no responden al clic:
   así arrastrar no selecciona una talla por accidente. */
.qsh-size-list.is-dragging .qsh-size-btn {
  pointer-events: none;
}

/* Todos los botones del panel (tallas y añadir) comparten el mismo alto y el
   mismo ancho mínimo, definidos por una sola variable. */
.qsh-size-btn {
  flex: 0 0 auto;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--qsh-btn-size, 28px);
  height: var(--qsh-btn-size, 28px);
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--qsh-btn-radius, 0);
  font-family: var(--qsh-size-family, var(--qsh-font, inherit));
  font-size: var(--qsh-size-font, 11px);
  font-weight: var(--qsh-size-weight, 500);
  letter-spacing: var(--qsh-size-ls, 0);
  padding: 0 var(--qsh-size-pad, 8px);
  cursor: pointer;
  color: #111;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.qsh-size-btn:hover,
.qsh-size-btn.is-selected {
  background: #111;
  color: #fff;
  border-color: #111;
}

/* ---------- Tallas sin recuadro ----------
   En los estilos "linea" y "color" la talla es solo texto: sin fondo, sin
   borde y sin recuadro al pasar el mouse. Lo unico que marca la seleccion es
   la linea de abajo o el color. */
.qsh--size-underline .qsh-size-btn,
.qsh--size-tint .qsh-size-btn,
.qsh--size-underline .qsh-add-btn,
.qsh--size-tint .qsh-add-btn {
  background: none;
  border: 0;
  border-radius: 0;
}

.qsh--size-underline .qsh-size-btn:hover,
.qsh--size-tint .qsh-size-btn:hover,
.qsh--size-underline .qsh-add-btn:not(:disabled):hover,
.qsh--size-tint .qsh-add-btn:not(:disabled):hover {
  background: none;
  border: 0;
}

/* Sin recuadro, el + se queda del color de las tallas en todos los estados:
   antes al pasar el mouse o tras anadir se volvia blanco, que era el color
   pensado para el fondo negro del boton con recuadro. */
.qsh--size-underline .qsh-add-btn,
.qsh--size-tint .qsh-add-btn,
.qsh--size-underline .qsh-add-btn:not(:disabled):hover,
.qsh--size-tint .qsh-add-btn:not(:disabled):hover,
.qsh--size-underline .qsh-add-btn.is-added,
.qsh--size-tint .qsh-add-btn.is-added {
  color: var(--qsh-size-active, #111);
  background: none;
}

.qsh--size-underline .qsh-add-btn:not(:disabled):hover,
.qsh--size-tint .qsh-add-btn:not(:disabled):hover {
  transform: none;
  opacity: 0.6;
}

.qsh--size-underline .qsh-size-btn,
.qsh--size-tint .qsh-size-btn {
  position: relative;
  /* Sin recuadro el ancho lo marca el texto y su relleno, no el cuadro. */
  min-width: 0;
  color: var(--qsh-size-idle, #111);
  opacity: var(--qsh-size-idle-op, 0.55);
  transition: color 0.2s ease, opacity 0.2s ease;
}

.qsh--size-underline .qsh-size-btn:hover,
.qsh--size-tint .qsh-size-btn:hover {
  opacity: 1;
}

/* Estilo 1: linea debajo de la talla elegida, creciendo desde el centro. */
.qsh--size-underline .qsh-size-btn::after {
  content: '';
  position: absolute;
  left: var(--qsh-size-pad, 8px);
  right: var(--qsh-size-pad, 8px);
  bottom: 4px;
  height: var(--qsh-size-line-w, 1px);
  background: var(--qsh-size-line, #111);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.qsh--size-underline .qsh-size-btn.is-selected {
  color: var(--qsh-size-active, #111);
  opacity: 1;
}

.qsh--size-underline .qsh-size-btn.is-selected::after {
  transform: scaleX(1);
}

/* Estilo 2: la elegida toma su color y las demas se aclaran. */
.qsh--size-tint .qsh-size-btn.is-selected {
  color: var(--qsh-size-active, #111);
  opacity: 1;
}

/* Alto del panel, si se fija desde el editor. */
.qsh-size-popup-inner {
  min-height: var(--qsh-panel-h, auto);
}

.qsh-add-btn {
  flex-shrink: 0;
  box-sizing: border-box;
  width: var(--qsh-btn-size, 28px);
  height: var(--qsh-btn-size, 28px);
  border-radius: var(--qsh-btn-radius, 0);
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.25);
  color: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
}

.qsh-add-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.qsh-add-btn:not(:disabled):hover {
  background: #111;
  color: #fff;
  transform: scale(1.08);
}

.qsh-add-btn.is-added {
  background: #111;
  color: #fff;
}

/* ---------- Etiquetas propias sobre la imagen ---------- */
.qsh-labels {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: var(--qsh-label-gap, 2px);
  pointer-events: none;
}

.qsh-labels--top-left {
  top: var(--qsh-label-y, 14px);
  left: var(--qsh-label-x, 14px);
  align-items: flex-start;
}

.qsh-labels--top-right {
  top: var(--qsh-label-y, 14px);
  right: var(--qsh-label-x, 14px);
  align-items: flex-end;
}

.qsh-labels--bottom-left {
  bottom: var(--qsh-label-y, 14px);
  left: var(--qsh-label-x, 14px);
  align-items: flex-start;
}

.qsh-labels--bottom-right {
  bottom: var(--qsh-label-y, 14px);
  right: var(--qsh-label-x, 14px);
  align-items: flex-end;
}

.qsh-label {
  font-family: var(--qsh-font, inherit);
  font-size: var(--qsh-label-size, 11px);
  font-weight: var(--qsh-label-weight, 600);
  letter-spacing: var(--qsh-label-ls, 0);
  line-height: var(--qsh-label-line, 1.4);
  text-transform: var(--qsh-label-transform, uppercase);
  color: #111;
  background: var(--qsh-label-bg, rgba(0, 0, 0, 0));
  padding: var(--qsh-label-py, 0) var(--qsh-label-px, 0);
  border-radius: var(--qsh-label-radius, 0);
  white-space: nowrap;
}

/* ---------- Botón + para abrir las tallas en móvil ---------- */
/* Solo el signo +, sin recuadro ni fondo. El área táctil se amplía con
   ::before para que siga siendo cómoda de pulsar sin dibujar un botón. */
.qsh-mobile-toggle {
  display: none;
  position: absolute;
  bottom: var(--qsh-toggle-y, 12px);
  width: var(--qsh-toggle-size, 20px);
  height: var(--qsh-toggle-size, 20px);
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  box-sizing: content-box;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  color: var(--qsh-toggle-color, #111);
  pointer-events: auto;
  cursor: pointer;
  z-index: 6;
  transform-origin: center;
  transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Al pulsar: el + se hunde un poco y gira hacia la cruz mientras el panel
   sube con la misma curva y duración que el hover de escritorio. */
.qsh-mobile-toggle:active {
  transform: scale(0.82);
}

.qsh-wrapper.is-open .qsh-mobile-toggle {
  opacity: 0;
  transform: rotate(45deg) scale(0.85);
  pointer-events: none;
}

.qsh-mobile-toggle::before {
  content: '';
  position: absolute;
  inset: -10px;
}

.qsh-mobile-toggle svg {
  width: 100%;
  height: 100%;
  stroke-width: var(--qsh-toggle-weight, 1.5);
}

.qsh-wrapper--toggle-left .qsh-mobile-toggle {
  left: var(--qsh-toggle-x, 12px);
}

.qsh-wrapper--toggle-right .qsh-mobile-toggle {
  right: var(--qsh-toggle-x, 12px);
}

@media screen and (max-width: 749px), (hover: none) {
  .qsh-mobile-toggle {
    display: flex;
  }
}

@media screen and (max-width: 749px) {

  .qsh-label {
    font-size: var(--qsh-label-size-mobile, 10px);
  }

  /* Rectángulo pegado al borde inferior de la imagen. Cerrado sigue sin
     interceptar toques (opacidad 0 + pointer-events: none del panel), pero
     al pulsar el + entra con la misma animación que en escritorio. */
  .qsh-size-popup {
    padding: var(--qsh-panel-gap-mobile, 0);
  }

  .qsh-size-popup-inner {
    gap: 8px;
    padding: 8px 10px;
  }

  .qsh-size-popup-inner {
    min-height: var(--qsh-panel-h-mobile, auto);
  }

  .qsh-size-btn {
    min-width: var(--qsh-btn-size-mobile, 32px);
    height: var(--qsh-btn-size-mobile, 32px);
    padding: 0 var(--qsh-size-pad, 8px);
    font-size: var(--qsh-size-font-mobile, 12px);
  }

  .qsh-add-btn {
    width: var(--qsh-btn-size-mobile, 32px);
    height: var(--qsh-btn-size-mobile, 32px);
  }
}
/* END_BLOCK:_product-card-gallery */

/* START_BLOCK:_product-details (INDEX:82) */
/* 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;
    }
  }

  /* ══════════════════════════════════════════════════════════════
     "En celular, a ancho completo (edge-to-edge)".

     Este ajuste existía en el editor desde hacía tiempo pero no estaba
     conectado a nada: se declaraba en el esquema de la sección y ningún
     archivo lo leía, así que encenderlo o apagarlo no cambiaba nada.
     Aquí es donde por fin hace algo.

     La técnica es la misma que ya usa la foto del producto para llegar
     al borde en celular: se le da al bloque el ancho de la pantalla
     (100vw) y un margen negativo que lo vuelve a centrar. Así "rompe"
     el contenedor con márgenes de la página sin tocar el resto del
     layout. La sección tiene "overflow-x: clip", así que esto nunca
     abre barra de scroll horizontal.

     Va en ESTE archivo, y justo debajo de la regla de arriba, a
     propósito: esa regla es la que le quita el relleno lateral al
     bloque en celular, y las dos pelean por lo mismo. Estando en el
     mismo archivo y después, esta gana siempre, sin depender de en qué
     orden junte Shopify las hojas de estilo.
     ══════════════════════════════════════════════════════════════ */
  @media screen and (max-width: 749px) {
    /* La columna se estira de borde a borde. El desplazamiento manual
       (si el mercader puso alguno) se sigue respetando y se suma. */
    .product-information--mobile-details-full .product-details {
      width: 100vw;
      max-width: 100vw;
      margin-inline-start: calc(50% - 50vw + var(--pd-shift-mobile, 0px));
      margin-inline-end: calc(50% - 50vw - var(--pd-shift-mobile, 0px));
    }

    /* El bloque de dentro (título, precio, tallas, colores, botones) es
       el que lleva el fondo: ocupa todo el ancho nuevo y recupera un
       relleno lateral propio para que el texto no quede pegado al borde
       de la pantalla. */
    /* Y sin bordes laterales ni esquinas redondeadas: un borde o una
       esquina curva justo en el filo de la pantalla se lee como un
       error, no como un diseño. El borde de arriba y el de abajo se
       conservan tal cual estén configurados. */
    .product-information.product-information--mobile-details-full
      .product-details
      > .group-block.border-style {
      width: 100%;
      max-width: none;
      padding-inline: var(--pd-mobile-edge-pad, 16px);
      border-inline-width: 0;
      border-radius: 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:_product-media-gallery (INDEX:86) */
.gt {
  display: flex;
  gap: var(--gt-gap, 16px);
  align-items: flex-start;
  font-family: var(--gt-font, inherit);
}

.gt--thumbs-right {
  flex-direction: row-reverse;
}

/* ---------- Columna de miniaturas ---------- */
/* El borde es uno solo, del recuadro que envuelve todas las miniaturas: las
   miniaturas por dentro van sin borde. */
.gt__thumbs {
  display: flex;
  flex-direction: column;
  gap: var(--gt-thumb-gap, 6px);
  flex: 0 0 auto;
  box-sizing: content-box;
  width: min(var(--gt-thumb-w, 72px), var(--gt-thumb-max, 18%));
  padding: var(--gt-rail-padding, 6px);
  border: var(--gt-rail-border-w, 1px) solid var(--gt-rail-border, #e4e4e4);
  border-radius: var(--gt-rail-radius, 0);
}

.gt--thumbs-left .gt__thumbs {
  margin-left: var(--gt-rail-offset, 0);
}

.gt--thumbs-right .gt__thumbs {
  margin-right: var(--gt-rail-offset, 0);
}

/* Va por encima de la columna de fotos (si no, el área de la foto se le monta
   encima y los clics no llegan), pero por debajo de la cabecera del tema: un
   z-index bajo evita que las miniaturas se dibujen sobre el menú. */
.gt--sticky .gt__thumbs {
  position: sticky;
  top: var(--gt-sticky-top, 24px);
  z-index: 1;
}

/* Si no caben todas, la columna se desplaza sola (rueda del mouse o arrastre).
   El alto exacto lo calcula el JS a partir de "miniaturas visibles a la vez". */
.gt__thumbs {
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.gt__thumbs::-webkit-scrollbar {
  display: none;
}

.gt__thumbs.is-dragging {
  cursor: grabbing;
}

.gt__thumbs.is-dragging .gt-thumb {
  pointer-events: none;
}

.gt-thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--gt-thumb-ratio, 72 / 90);
  padding: 0;
  margin: 0;
  overflow: hidden;
  box-sizing: border-box;
  background: none;
  border: 0;
  border-radius: var(--gt-thumb-radius, 0);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

/* ---------- Marca de "esta es la foto que estás viendo" ----------
   El efecto se elige desde el editor. Todos usan la misma capa ::after, salvo
   "atenuar las demás" y "elevación", que actúan sobre la miniatura entera. */
.gt-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 1) Viñeta: dos degradados rectos (uno de lado a lado y otro de arriba abajo)
   en vez de un degradado radial. Así se oscurecen los cuatro lados por igual y
   no solo las esquinas. La zona limpia del centro es la que fijes en el editor;
   lo que sobra se reparte entre los dos bordes de cada eje. */
.gt--fx-vignette .gt-thumb::after {
  background:
    linear-gradient(
      to right,
      var(--gt-vignette-color, #000) 0%,
      transparent var(--gt-vignette-edge, 30%),
      transparent calc(100% - var(--gt-vignette-edge, 30%)),
      var(--gt-vignette-color, #000) 100%
    ),
    linear-gradient(
      to bottom,
      var(--gt-vignette-color, #000) 0%,
      transparent var(--gt-vignette-edge, 30%),
      transparent calc(100% - var(--gt-vignette-edge, 30%)),
      var(--gt-vignette-color, #000) 100%
    );
}

.gt--fx-vignette .gt-thumb.is-active::after {
  opacity: var(--gt-vignette-opacity, 0.55);
}

/* 2) Marco: un borde limpio pegado por dentro de la miniatura. */
.gt--fx-frame .gt-thumb::after {
  box-shadow: inset 0 0 0 var(--gt-fx-size, 2px) var(--gt-fx-color, #111);
  border-radius: var(--gt-thumb-radius, 0);
}

.gt--fx-frame .gt-thumb.is-active::after {
  opacity: 1;
}

/* 3) Barra: una línea gruesa en el borde interior de la columna (izquierda si
   las miniaturas van a la izquierda, derecha si van a la derecha). En móvil,
   donde la tira es horizontal, la barra pasa al borde inferior. */
.gt--fx-bar .gt-thumb::after {
  background: linear-gradient(var(--gt-fx-color, #111), var(--gt-fx-color, #111)) no-repeat;
  background-size: var(--gt-fx-size, 2px) 100%;
  background-position: left center;
  transform: scaleY(0.4);
  transform-origin: center;
  transition:
    opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.gt--thumbs-right.gt--fx-bar .gt-thumb::after {
  background-position: right center;
}

.gt--fx-bar .gt-thumb.is-active::after {
  opacity: 1;
  transform: scaleY(1);
}

/* 4) Atenuar las demás: la seleccionada se ve a todo color y el resto baja de
   opacidad (y opcionalmente pasa a blanco y negro). */
.gt--fx-dim .gt-thumb img {
  opacity: var(--gt-fx-dim, 0.45);
  filter: grayscale(calc(var(--gt-fx-gray, 1) * 100%));
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.gt--fx-dim .gt-thumb.is-active img,
.gt--fx-dim .gt-thumb:hover img {
  opacity: 1;
  filter: grayscale(0);
}

/* 5) Esquinas tipo visor: cuatro escuadras en las esquinas, sin tapar la foto. */
.gt--fx-corners .gt-thumb::after {
  --gt-corner: 28%;
  background:
    linear-gradient(var(--gt-fx-color, #111), var(--gt-fx-color, #111)) no-repeat left top,
    linear-gradient(var(--gt-fx-color, #111), var(--gt-fx-color, #111)) no-repeat left top,
    linear-gradient(var(--gt-fx-color, #111), var(--gt-fx-color, #111)) no-repeat right top,
    linear-gradient(var(--gt-fx-color, #111), var(--gt-fx-color, #111)) no-repeat right top,
    linear-gradient(var(--gt-fx-color, #111), var(--gt-fx-color, #111)) no-repeat left bottom,
    linear-gradient(var(--gt-fx-color, #111), var(--gt-fx-color, #111)) no-repeat left bottom,
    linear-gradient(var(--gt-fx-color, #111), var(--gt-fx-color, #111)) no-repeat right bottom,
    linear-gradient(var(--gt-fx-color, #111), var(--gt-fx-color, #111)) no-repeat right bottom;
  background-size:
    var(--gt-corner) var(--gt-fx-size, 2px),
    var(--gt-fx-size, 2px) var(--gt-corner),
    var(--gt-corner) var(--gt-fx-size, 2px),
    var(--gt-fx-size, 2px) var(--gt-corner),
    var(--gt-corner) var(--gt-fx-size, 2px),
    var(--gt-fx-size, 2px) var(--gt-corner),
    var(--gt-corner) var(--gt-fx-size, 2px),
    var(--gt-fx-size, 2px) var(--gt-corner);
}

.gt--fx-corners .gt-thumb.is-active::after {
  opacity: 1;
}

/* 6) Elevación: la seleccionada se separa un poco del resto con una sombra. */
.gt--fx-lift .gt-thumb {
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.gt--fx-lift .gt-thumb.is-active {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgb(0 0 0 / var(--gt-fx-lift, 0.45));
  z-index: 2;
}

.gt-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Acercamiento al pasar el mouse y en la miniatura activa. */
.gt-thumb:hover img,
.gt-thumb.is-active img {
  transform: scale(var(--gt-thumb-zoom, 1.06));
}

@media (prefers-reduced-motion: reduce) {
  .gt-thumb img {
    transition: none;
  }
}

/* ---------- Imagen grande ---------- */
/* En escritorio las fotos van todas apiladas: lo único que baja al hacer scroll
   es esta columna, hasta que se acaban las imágenes. */
.gt__main {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gt-media-gap, 8px);
}

.gt-media {
  display: block;
  width: min(100%, var(--gt-media-w, 100%));
  margin-inline: var(--gt-media-align, auto);
  background: var(--gt-media-bg, transparent);
  border-radius: var(--gt-media-radius, 0);
  overflow: hidden;
  /* Margen que se respeta al saltar a esta foto desde una miniatura. */
  scroll-margin-top: var(--gt-scroll-offset, 80px);
}

.gt-media img,
.gt-media video,
.gt-media iframe,
.gt-media model-viewer {
  display: block;
  width: 100%;
  height: 100%;
  max-height: var(--gt-media-h, none);
  aspect-ratio: var(--gt-media-ratio, auto);
  object-fit: var(--gt-media-fit, contain);
}

/* ---------- Móvil: foto arriba, tira debajo ---------- */
@media screen and (max-width: 749px) {
  .gt,
  .gt--thumbs-right {
    flex-direction: column;
    gap: var(--gt-gap-mobile, 10px);
  }

  .gt__main {
    order: 1;
    width: 100%;
    gap: 0;
  }

  .gt-media img,
  .gt-media video,
  .gt-media iframe,
  .gt-media model-viewer {
    max-height: var(--gt-media-h-mobile, none);
  }

  /* Sin deslizamiento: una sola foto a la vez, la que marque la miniatura. */
  .gt:not(.gt--swipe) .gt-media {
    width: min(100%, var(--gt-media-w-mobile, 100%));
    display: none;
  }

  .gt:not(.gt--swipe) .gt-media.is-active {
    display: block;
  }

  /* Con deslizamiento (por defecto): las fotos se ponen una al lado de la otra
     y la foto grande se arrastra hacia los lados con el dedo. Cada foto se
     engancha al soltar, y la miniatura marcada se sincroniza con la que quede
     en pantalla. */
  .gt--swipe .gt__main {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .gt--swipe .gt__main::-webkit-scrollbar {
    display: none;
  }

  .gt--swipe .gt-media {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    display: block;
  }

  .gt--swipe .gt-media img,
  .gt--swipe .gt-media video,
  .gt--swipe .gt-media iframe,
  .gt--swipe .gt-media model-viewer {
    max-width: var(--gt-media-w-mobile, 100%);
    margin-inline: auto;
  }

  /* La barra del efecto pasa al borde inferior, que en móvil la tira es
     horizontal. */
  .gt--fx-bar .gt-thumb::after,
  .gt--thumbs-right.gt--fx-bar .gt-thumb::after {
    background-size: 100% var(--gt-fx-size, 2px);
    background-position: center bottom;
    transform: scaleX(0.4);
  }

  .gt--fx-bar .gt-thumb.is-active::after {
    transform: scaleX(1);
  }

  .gt--thumbs-left .gt__thumbs,
  .gt--thumbs-right .gt__thumbs {
    margin-left: 0;
    margin-right: 0;
  }

  .gt__thumbs {
    order: 2;
    position: static;
    flex-direction: row;
    width: 100%;
    max-height: none;
    gap: var(--gt-thumb-gap-mobile, 6px);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
  }

  .gt-thumb {
    flex: 0 0 auto;
    width: var(--gt-thumb-w-mobile, 64px);
    aspect-ratio: var(--gt-thumb-ratio-mobile, 64 / 80);
  }

}

/* ---------- Transición al cambiar de variante ---------- */
/* Fundido + leve escala al reemplazar la galería completa por la versión ya
   filtrada de la nueva variante. "gt--swap-out" se agrega justo antes de
   sacar la galería vieja del DOM, y "gt--swap-in" arranca en el mismo estado
   (invisible/achicada) en la galería nueva para que, al quitarle la clase un
   instante después, se vea como que entra en vez de aparecer de golpe. */
.gt {
  transition:
    opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    scale 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.gt--swap-out,
.gt--swap-in {
  opacity: 0;
  scale: 0.985;
}

@media (prefers-reduced-motion: reduce) {
  .gt {
    transition: none;
  }
}
/* END_BLOCK:_product-media-gallery */

/* START_BLOCK:_search-input (INDEX:87) */
.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:88) */
.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:89) */
.social-icons__icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--icon-size-lg);
  }

  .social-icons__icon-wrapper a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
      opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1),
      text-decoration-color var(--animation-speed) var(--animation-easing),
      color var(--animation-speed) var(--animation-easing);
  }

  /* Invisible hit-area expansion so the tap target meets the ~40px minimum
     without changing the icon's visual size or the row's tight spacing. */
  .social-icons__icon-wrapper a::before {
    content: '';
    position: absolute;
    inset: 50%;
    width: max(100%, 40px);
    height: max(100%, 40px);
    transform: translate(-50%, -50%);
  }

  .social-icons__icon-wrapper a:hover {
    opacity: 0.72;
  }

  .social-icons__icon-wrapper a:hover .social-icons__icon-label {
    text-decoration-color: currentcolor;
  }

  .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:buy-buttons (INDEX:97) */
/* ------------------------------------------------------------------
     TAMAÑOS POR DISPOSITIVO
     El editor manda las medidas por duplicado ("-desktop" y "-mobile")
     como variables en línea. Acá se decide cuál se usa: por defecto la
     de escritorio y, bajo 750px, se reasignan a las de celular. Todo lo
     que está más abajo lee siempre las variables sin sufijo, así que
     una sola regla sirve para las dos pantallas.
     ------------------------------------------------------------------ */
  .buy-buttons-block {
    font-family: var(--buy-buttons-font-family, inherit);

    --bb-font-size: var(--bb-font-size-desktop, 14px);
    --bb-letter-spacing: var(--bb-letter-spacing-desktop, 0px);
    --bb-height: var(--bb-height-desktop, 48px);
    --bb-max-width: var(--bb-max-width-desktop, 100%);
    --bb-icon-size: var(--bb-icon-size-desktop, 19px);
    --bb-efectivo-size: var(--bb-efectivo-size-desktop, 19px);
    --bb-yape-size: var(--bb-yape-size-desktop, 19px);
    --bb-efectivo-width: var(--bb-efectivo-width-desktop, auto);
    --bb-yape-width: var(--bb-yape-width-desktop, auto);

    /* El tema y Shopify calculan el alto de sus botones a partir de
       estas variables. Se pisan acá dentro (solo dentro del bloque)
       para que el alto elegido gane desde el origen y no haya que
       pelearlo después a punta de !important. */
    --button-height: var(--bb-height);
    --minimum-touch-target: var(--bb-height);
    --minimum-touch-target-size: var(--bb-height);
    --shop-pay-button-height: var(--bb-height);
  }

  @media screen and (max-width: 749px) {
    .buy-buttons-block {
      --bb-font-size: var(--bb-font-size-mobile, 13px);
      --bb-letter-spacing: var(--bb-letter-spacing-mobile, 0px);
      --bb-height: var(--bb-height-mobile, 44px);
      --bb-max-width: var(--bb-max-width-mobile, 100%);
      --bb-icon-size: var(--bb-icon-size-mobile, 17px);
      --bb-efectivo-size: var(--bb-efectivo-size-mobile, 17px);
      --bb-yape-size: var(--bb-yape-size-mobile, 17px);
      --bb-efectivo-width: var(--bb-efectivo-width-mobile, auto);
      --bb-yape-width: var(--bb-yape-width-mobile, auto);
    }
  }

  /* "Agregar al carrito": es el único botón que el tema realmente renderiza
     como HTML propio, por eso es el único que podemos re-estilizar.
     Se usa !important y varios selectores porque el componente de botón
     del tema ya trae su propio border-radius/font-family con su propia
     capa de estilos, y si no forzamos, nuestra regla queda tapada. */
  .buy-buttons-block button:not(.button-unstyled),
  .buy-buttons-block .button,
  .buy-buttons-block [class*="button"]:not(.button-unstyled) {
    border-radius: var(--buy-buttons-radius, 0) !important;
    font-family: var(--buy-buttons-font-family, inherit) !important;
  }

  /* Tamaño real de los dos botones de compra. Se apunta SOLO a ellos y
     no al contenedor ni al selector de cantidad, para no deformar el
     resto del formulario.

     El alto se fuerza con height + min-height + max-height y el padding
     vertical en 0. Con min-height solo no alcanzaba: el tema y Shopify
     le dan al botón su alto vía padding, y min-height nunca puede
     achicar por debajo de ese alto natural, así que bajar el valor en
     el editor no se veía. Con height fijo y padding en 0, la medida
     elegida es exactamente la que se aplica, para arriba y para abajo. */
  .buy-buttons-block [ref="addToCartButton"],
  .buy-buttons-block add-to-cart-component button,
  .buy-buttons-block .product-form-buttons > .button,
  .buy-buttons-block .shopify-payment-button__button--unbranded {
    font-size: var(--bb-font-size) !important;
    letter-spacing: var(--bb-letter-spacing) !important;
    line-height: 1.15 !important;
    height: var(--bb-height) !important;
    min-height: var(--bb-height) !important;
    max-height: var(--bb-height) !important;
    padding-block: 0 !important;
  }

  .buy-buttons-block [ref="addToCartButton"],
  .buy-buttons-block add-to-cart-component button,
  .buy-buttons-block .product-form-buttons > .button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center;
  }

  /* Botón "Comprar ahora" con marca propia (Shop Pay, PayPal, Google
     Pay): Shopify no permite cambiarle tipografía, texto ni color, pero
     sí acepta el alto. Se apunta también al contenedor y al elemento
     <shop-pay-button>, porque el botón real vive dentro de un shadow
     DOM al que el CSS del tema no entra: lo único que se puede fijar
     desde afuera es el alto del recipiente. */
  .buy-buttons-block .shopify-payment-button__button--branded,
  .buy-buttons-block .shopify-payment-button__button--branded > *,
  .buy-buttons-block shop-pay-button,
  .buy-buttons-block shopify-payment-button {
    height: var(--bb-height) !important;
    min-height: var(--bb-height) !important;
  }

  /* Ancho de los dos botones. Se centran dentro del formulario cuando
     el ancho es menor al 100%. */
  .buy-buttons-block [ref="addToCartButton"],
  .buy-buttons-block .accelerated-checkout-wrapper {
    width: 100%;
    max-width: var(--bb-max-width);
    margin-inline: auto;
  }

  /* "Comprar ahora" (Shop Pay / PayPal / etc.) NO se estiliza acá:
     es un botón nativo que Shopify inyecta directamente y el tema no
     tiene forma de cambiarle ni el radio de esquinas ni la tipografía
     ni el texto; son restricciones de marca del proveedor de pago.
     Lo único que se toca es la versión sin marca (texto plano), y solo
     en mayúsculas: el reemplazo real del texto lo hace el script de
     arriba, de mejor esfuerzo. */
  .accelerated-checkout-wrapper .shopify-payment-button__button--unbranded {
    text-transform: uppercase;
  }

  /* Oculta el ícono del carrito del botón "Agregar al carrito" */
  .buy-buttons-block [ref="addToCartButton"] svg,
  .buy-buttons-block [ref="addToCartButton"] .svg-wrapper {
    display: none !important;
  }

  .accelerated-checkout-wrapper {
    position: relative;
    /* habilita container queries: los iconos ahora reaccionan al ancho
       REAL del botón, no solo al ancho de la pantalla completa */
    container-type: inline-size;
    container-name: acc-checkout;
  }

  .payment-icons-overlay {
    /* Modo "superpuesto": mientras hay espacio suficiente, los iconos
       flotan DENTRO del botón, a la izquierda/centro/derecha */
    position: absolute;
    top: 50%;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    overflow: hidden;
    max-width: 45%;
    gap: var(--bb-icons-gap, 8px);
    z-index: 2;
    line-height: 0;
    /* deja pasar el click hacia el botón que está debajo */
    pointer-events: none;
  }

  .payment-icons-overlay__icon,
  .payment-icons-overlay__icon svg,
  .payment-icons-overlay__icon img {
    /* !important porque Shopify a veces inyecta su propio width/height
       fijo en línea en el SVG; esto fuerza a que SIEMPRE respete
       nuestro tamaño en vez de quedarse fijo y pisar al de al lado.
       El tamaño ahora viene del editor y cambia entre celular y PC. */
    height: var(--bb-icon-size, 1.2rem) !important;
    width: auto !important;
    max-width: none !important;
    display: block;
    vertical-align: middle;
    flex: 0 0 auto;
  }

  /* Los dos logos propios llevan caja propia: alto, ancho, redondeo y como
     se acomoda la imagen dentro. El !important es para ganarle a la regla
     general de mas arriba, que fuerza width:auto para todos los iconos. */
  .payment-icons-overlay__icon.pi-efectivo,
  .payment-icons-overlay__icon.pi-efectivo img {
    height: var(--bb-efectivo-size, 1.2rem) !important;
    width: var(--bb-efectivo-width, auto) !important;
    border-radius: var(--bb-efectivo-radius, 0px);
    object-fit: var(--bb-efectivo-fit, contain);
    overflow: hidden;
  }

  .payment-icons-overlay__icon.pi-yape,
  .payment-icons-overlay__icon.pi-yape img {
    height: var(--bb-yape-size, 1.2rem) !important;
    width: var(--bb-yape-width, auto) !important;
    border-radius: var(--bb-yape-radius, 0px);
    object-fit: var(--bb-yape-fit, contain);
    overflow: hidden;
  }

  .payment-icons-overlay__icon.pi-efectivo {
    margin-inline: var(--bb-efectivo-gap, 0px);
  }

  .payment-icons-overlay__icon.pi-yape {
    margin-inline: var(--bb-yape-gap, 0px);
  }

  /* Posición en escritorio (modo superpuesto, SOLO se usa si el script
     no llega a correr — por ejemplo con JavaScript deshabilitado). Si
     el script corre bien, las reglas ".pi-attached" de más abajo pisan
     estas por tener mayor especificidad. */
  .payment-icons-overlay.picon-desktop-left {
    left: clamp(0.6rem, 3vw, 1.6rem);
    right: auto;
    transform: translateY(-50%);
  }

  .payment-icons-overlay.picon-desktop-center {
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
  }

  .payment-icons-overlay.picon-desktop-right {
    right: clamp(0.6rem, 3vw, 1.6rem);
    left: auto;
    transform: translateY(-50%);
  }

  /* MODO "PEGADO AL TEXTO": una vez que el script logra mover el
     contenedor de iconos DENTRO del botón nativo (como hijo, justo al
     lado del texto), el botón pasa a organizarse en grid con dos
     columnas elásticas a los costados (1fr ... 1fr). Así, el conjunto
     texto + iconos queda centrado como si fuera un solo bloque, sin
     importar cuánto midan entre los dos ni cuánto se achique la
     pantalla — el cálculo lo hace el navegador, no un ancho fijo. */
  .shopify-payment-button__button--unbranded.pi-attached {
    display: grid !important;
    grid-template-columns: 1fr auto auto 1fr;
    align-items: center;
    /* Aire entre el texto y el grupo de iconos. */
    column-gap: var(--bb-icons-text-gap, 10px);
    /* Aire minimo contra los bordes del boton: las columnas elasticas de
       los lados se quedan en cero cuando el contenido se ensancha, y sin
       esto el ultimo icono terminaba pegado al filo. */
    padding-inline: var(--bb-icons-edge-space, 14px) !important;
  }

  .shopify-payment-button__button--unbranded.pi-attached .pi-text-span {
    grid-column: 2;
    white-space: nowrap;
  }

  .shopify-payment-button__button--unbranded.pi-attached .payment-icons-overlay {
    grid-column: 3;
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    max-width: none;
    pointer-events: auto;
    /* Nada de recortes cuando los iconos van pegados al texto. El
       "overflow: hidden" de la regla general hacia falta en el modo
       superpuesto, pero aqui cortaba en seco el borde de un logo en cuanto
       se le daba aire lateral negativo o el boton se quedaba justo: por eso
       PagoEfectivo aparecia con el lado izquierdo recto en el celular. */
    overflow: visible;
  }

  /* Shopify le pone su propio recorte al boton; se desactiva solo en la
     version sin marca que ya estamos interviniendo. */
  .shopify-payment-button__button--unbranded.pi-attached {
    overflow: visible;
  }

  /* Ningun icono se deja encoger ni deformar aunque falte sitio: si no
     entra, el que se recorta es el espacio, nunca el logo. */
  .shopify-payment-button__button--unbranded.pi-attached .payment-icons-overlay__icon {
    flex: 0 0 auto;
    min-width: 0;
  }

  /* Siempre en una sola fila mientras hay espacio: el texto y los
     iconos no se apilan hasta llegar al punto de quiebre de "fila
     separada" más abajo. El espacio se libera ocultando iconos de a
     uno (ver los @container de más abajo) antes de llegar a ese punto. */

  /* Los escalones ya no se cuentan por posición (nth-child) sino por el
     nombre del icono: así el orden se puede cambiar sin que se descoloque
     cuál desaparece. Visa y Yape son los dos únicos que nunca se ocultan;
     el resto va cayendo a medida que el botón se achica. */

  /* Escalón 1: con menos espacio cae Diners, el menos usado. */
  @container acc-checkout (max-width: 560px) {
    .payment-icons-overlay__icon.pi-diners {
      display: none;
    }
  }

  /* Escalón 2: solo en escritorio, si el botón se queda muy angosto,
     también cae PagoEfectivo y quedan Mastercard, Visa y Yape. En celular
     no se aplica: ahí PagoEfectivo se mantiene siempre. */
  @media screen and (min-width: 750px) {
    @container acc-checkout (max-width: 500px) {
      .payment-icons-overlay__icon.pi-efectivo {
        display: none;
      }
    }
  }

  /* Escalón 3: solo en escritorio, justo antes de pasar a la vista
     mobile, si el botón se pone aún más angosto también cae Mastercard
     y solo quedan Visa y Yape (así Yape no queda como flotando solo).
     El umbral quedó bien por debajo del de PagoEfectivo (500px) a
     propósito, para que la fase de 3 iconos dure un buen tramo antes
     de saltar a 2. */
  @media screen and (min-width: 750px) {
    @container acc-checkout (max-width: 320px) {
      .payment-icons-overlay__icon.pi-master {
        display: none;
      }
    }
  }

  /* Los iconos NUNCA bajan a una fila separada: se quedan siempre en la
     misma fila que el texto, dentro de la columna 3 del grid. En vez de
     eso, en anchos chicos se van ocultando de a uno (dejando siempre al
     menos Visa/Yape) y se achican un poco más, para que el
     conjunto texto + iconos siga entrando en una sola línea. */


  /* En anchos aún más chicos de botón, solo se reduce un poco el
     espacio entre iconos. Visa y Yape quedan siempre visibles. */


  /* Fallback para navegadores sin soporte de container queries:
     usamos el ancho de pantalla como aproximación equivalente.
     Mismo fix aplicado: se apunta también a ".pi-attached" para que
     gane sobre la regla de grid de más arriba. */
  @media screen and (max-width: 560px) {
    .payment-icons-overlay__icon.pi-diners {
      display: none;
    }
  }
/* END_BLOCK:buy-buttons */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  [data-orientation='vertical'] .cs-slider__handle {
    left: 50%;
    top: calc((100 - var(--compare)) * 1%);
    transform: translate(-50%, -50%) rotate(90deg);
  }

  /* Text Labels */
  .comparison-slider__text {
    position: absolute;
    padding: var(--padding-xs);
    pointer-events: none;
  }

  .comparison-slider__text--with-bg {
    background: var(--text-background-color);
    border-radius: var(--text-corner-radius);
  }

  /* Horizontal: before/after control inline (left/right), position controls block (top/bottom) */
  [data-orientation='horizontal'] .comparison-slider__text--before {
    inset-inline-start: var(--padding-sm);
  }

  [data-orientation='horizontal'] .comparison-slider__text--after {
    inset-inline-end: var(--padding-sm);
  }

  [data-orientation='horizontal'][data-text-position='start'] .comparison-slider__text {
    inset-block-start: var(--padding-sm);
  }

  [data-orientation='horizontal'][data-text-position='end'] .comparison-slider__text {
    inset-block-end: var(--padding-sm);
  }

  /* Vertical: before/after control block (top/bottom), position controls inline (left/right) */
  [data-orientation='vertical'] .comparison-slider__text--before {
    inset-block-start: var(--padding-sm);
  }

  [data-orientation='vertical'] .comparison-slider__text--after {
    inset-block-end: var(--padding-sm);
  }

  [data-orientation='vertical'][data-text-position='start'] .comparison-slider__text {
    inset-inline-start: var(--padding-sm);
  }

  [data-orientation='vertical'][data-text-position='end'] .comparison-slider__text {
    inset-inline-end: var(--padding-sm);
  }
/* END_BLOCK:comparison-slider */

/* START_BLOCK:complete-the-look (INDEX:101) */
.ctl-wrapper {
  padding: 32px 0;
}

.ctl-title {
  font-family: 'Montserrat', var(--ctl-h-family, var(--font-body--family)), sans-serif;
  font-size: var(--ctl-h-size, 12px);
  font-weight: var(--ctl-h-weight, 700);
  letter-spacing: var(--ctl-h-ls, 1px);
  color: var(--ctl-h-color, #111);
  text-align: var(--ctl-h-align, center);
  margin: var(--ctl-h-gap-top, 0) 0 var(--ctl-h-gap, 20px);
}

.ctl-title--upper {
  text-transform: uppercase;
}

.ctl-title--lower {
  text-transform: lowercase;
}

.ctl-title--words {
  text-transform: capitalize;
}

.ctl-title--first::first-letter {
  text-transform: uppercase;
}

.ctl-grid {
  display: grid;
  grid-template-columns: repeat(var(--ctl-columns, 2), 1fr);
  gap: 32px 16px;
}

.ctl-grid--scroll {
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--color-border-rgb) / 0.6) transparent;
  padding-right: 4px;
}

.ctl-grid--scroll::-webkit-scrollbar {
  width: 6px;
}

.ctl-grid--scroll::-webkit-scrollbar-thumb {
  background-color: rgb(var(--color-border-rgb) / 0.6);
  border-radius: 3px;
}

/* Sin ninguna tarjeta dentro no se muestra ni el título ni la cuadrícula: o
   aparece el mensaje, o el bloque entero desaparece. En el editor no se aplica,
   para poder seguir seleccionando el bloque. */
.ctl-empty {
  display: none;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.04em;
  opacity: 0.65;
  margin: 0;
}

.ctl-wrapper--check-empty:not(:has(.ctl-card)) .ctl-title,
.ctl-wrapper--check-empty:not(:has(.ctl-card)) .ctl-grid {
  display: none;
}

.ctl-wrapper--check-empty:not(:has(.ctl-card)) .ctl-empty,
.ctl-empty--visible {
  display: block;
}

.ctl-empty--design {
  border: 1px dashed rgb(var(--color-border-rgb) / 0.4);
  padding: 16px;
}

.ctl-wrapper--hide-empty:not(:has(.ctl-card)) {
  display: none;
}

/* Hueco de ayuda del editor cuando una tarjeta manual aún no tiene producto. */
.ctl-card-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: var(--ctl-ratio, 1/1);
  border: 1px dashed rgb(var(--color-border-rgb) / 0.4);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.6;
}

/* Entrada escalonada de las tarjetas (data-scroll-reveal vive en cada
   .ctl-card, ver snippets/ctl-card.liquid). */
.ctl-grid > *:nth-child(2) {
  --scroll-reveal-delay: 100ms;
}

.ctl-grid > *:nth-child(3) {
  --scroll-reveal-delay: 200ms;
}

.ctl-grid > *:nth-child(n + 4) {
  --scroll-reveal-delay: 300ms;
}

@media screen and (max-width: 749px) {
  .ctl-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 12px;
  }
}

.ctl-card {
  position: relative;
  display: flex;
  flex-direction: column;
}

.ctl-card:hover,
.ctl-card.is-popup-open {
  z-index: 10;
}

.ctl-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--color-background);
  border: 1px solid var(--color-foreground);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 3px 8px;
  text-transform: uppercase;
  z-index: 2;
}

.ctl-media {
  position: relative;
}

.ctl-image-link {
  display: block;
  background: rgb(var(--color-foreground-rgb) / 0.05);
  aspect-ratio: var(--ctl-ratio, 1/1);
  overflow: hidden;
}

.ctl-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.ctl-info {
  padding-top: 10px;
  position: relative;
}

.ctl-name-wrap {
  position: relative;
  display: block;
  width: 100%;
}

.ctl-name {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-foreground);
  text-decoration: none;
  line-height: 1.3;
}

.ctl-name:hover {
  text-decoration: underline;
}

.ctl-price {
  font-size: 13px;
  font-weight: 600;
  margin: 4px 0 8px;
}

/* Swatches de color real */
.ctl-swatches {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: var(--ctl-swatch-align, flex-start);
  gap: var(--qsh-swatch-gap, 6px);
  /* Sube o baja los círculos sin mover el precio ni el título: en negativo se
     acercan al precio, en positivo se separan. */
  margin-top: var(--ctl-swatch-y, -4px);
}

.ctl-swatch {
  position: relative;
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  display: block;
  width: var(--qsh-swatch-size, 18px) !important;
  height: var(--qsh-swatch-size, 18px) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid rgb(var(--color-border-rgb) / 0.15);
  background-size: cover;
  background-position: center;
  margin: 0;
  padding: 0;
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.ctl-swatch:hover {
  transform: scale(1.04);
}

.ctl-swatch.is-active {
  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 3px var(--color-foreground);
}

/* Panel de tallas con efecto glass, sube desde el nombre.
   Los colores de este panel (blanco translúcido) son intencionales para el
   look frosted-glass sobre la foto del producto: se mantienen fijos y NO se
   atan a los tokens de foreground/background del tema. */
/* El panel vive dentro de la foto y se mide desde su borde inferior, igual que
   en las tarjetas del catálogo. Antes colgaba del nombre del producto, que está
   por debajo de la imagen, y por eso quedaba tan abajo. */
.ctl-size-popup {
  position: absolute;
  left: 0;
  right: 0;
  /* En 0 el panel queda pegado al borde inferior de la foto. */
  bottom: var(--ctl-panel-gap, 0px);
  padding: 0;
  margin: 0;
  z-index: 5;
}

/* El desenfoque solo se enciende con el panel abierto: un
   `backdrop-filter` permanente en cada tarjeta obliga al navegador a
   recalcular el fondo desenfocado en cada fotograma de scroll, aunque el
   panel esté invisible. Ver la nota larga en _product-card-gallery. */
.ctl-size-popup-inner {
  background: rgba(255, 255, 255, var(--ctl-panel-tint, 0.32));
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: var(--ctl-panel-radius, 0);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

/* El hover solo abre el panel en pantallas anchas con mouse. Por debajo de
   750px (o en cualquier pantalla táctil) manda el botón +, así el panel nunca
   se abre solo ni queda el + encima. */
@media (hover: hover) and (min-width: 750px) {
  .ctl-media:hover .ctl-size-popup-inner,
  .ctl-size-popup-inner:hover {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    backdrop-filter: blur(var(--ctl-panel-blur, 18px));
    -webkit-backdrop-filter: blur(var(--ctl-panel-blur, 18px));
  }
}

/* Mientras se arrastra la tira, el panel sigue abierto aunque el mouse salga
   de la tarjeta. */
.ctl-card.is-dragging-open .ctl-size-popup-inner,
.ctl-card.is-popup-open .ctl-size-popup-inner {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  backdrop-filter: blur(var(--ctl-panel-blur, 18px));
  -webkit-backdrop-filter: blur(var(--ctl-panel-blur, 18px));
}

.ctl-size-list {
  display: flex;
  flex: 1;
  gap: var(--ctl-size-gap, 6px);
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
}

.ctl-size-list::-webkit-scrollbar {
  display: none;
}

/* Señal de arrastre: se difumina el borde por el lado donde quedan tallas
   fuera de vista y aparece una flechita. Solo cuando de verdad no caben. */
.ctl-size-list.has-overflow {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent 100%);
}

.ctl-size-list.has-overflow:not(.at-start):not(.at-end) {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
}

.ctl-size-list.has-overflow.at-end {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22px);
  mask-image: linear-gradient(to right, transparent 0, #000 22px);
}

.ctl-scroll-hint {
  display: none;
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  color: #111;
  opacity: 0.5;
  pointer-events: none;
  animation: ctl-hint 1.6s ease-in-out infinite;
}

.ctl-size-popup-inner.has-overflow:not(.at-end) .ctl-scroll-hint {
  display: block;
}

@keyframes ctl-hint {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(3px); }
}

@media (prefers-reduced-motion: reduce) {
  .ctl-scroll-hint {
    animation: none;
  }
}

.ctl-size-list.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
}

/* Mientras se arrastra la tira, los botones no responden al clic:
   así arrastrar no selecciona una talla por accidente. */
.ctl-size-list.is-dragging .ctl-size-btn {
  pointer-events: none;
}

/* Todos los botones del panel (tallas y añadir) comparten el mismo alto y el
   mismo ancho mínimo, definidos por una sola variable. */
.ctl-size-btn {
  flex: 0 0 auto;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--ctl-btn-size, 28px);
  height: var(--ctl-btn-size, 28px);
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--ctl-btn-radius, 0);
  font-family: var(--ctl-size-family, var(--ctl-font, inherit));
  font-size: var(--ctl-size-font, 11px);
  font-weight: var(--ctl-size-weight, 500);
  letter-spacing: var(--ctl-size-ls, 0);
  padding: 0 var(--ctl-size-pad, 8px);
  cursor: pointer;
  color: #111;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ctl-size-btn:hover,
.ctl-size-btn.is-selected {
  background: #111;
  color: #fff;
  border-color: #111;
}

/* ---------- Tallas sin recuadro ----------
   En los estilos "linea" y "color" la talla es solo texto: sin fondo, sin
   borde y sin recuadro al pasar el mouse. Lo unico que marca la seleccion es
   la linea de abajo o el color. */
.ctl--size-underline .ctl-size-btn,
.ctl--size-tint .ctl-size-btn,
.ctl--size-underline .ctl-add-btn,
.ctl--size-tint .ctl-add-btn {
  background: none;
  border: 0;
  border-radius: 0;
}

.ctl--size-underline .ctl-size-btn:hover,
.ctl--size-tint .ctl-size-btn:hover,
.ctl--size-underline .ctl-add-btn:not(:disabled):hover,
.ctl--size-tint .ctl-add-btn:not(:disabled):hover {
  background: none;
  border: 0;
}

/* Sin recuadro, el + se queda del color de las tallas en todos los estados:
   antes al pasar el mouse o tras añadir se volvía blanco, que es el color
   pensado para el fondo negro del botón con recuadro. */
.ctl--size-underline .ctl-add-btn,
.ctl--size-tint .ctl-add-btn,
.ctl--size-underline .ctl-add-btn:not(:disabled):hover,
.ctl--size-tint .ctl-add-btn:not(:disabled):hover,
.ctl--size-underline .ctl-add-btn.is-added,
.ctl--size-tint .ctl-add-btn.is-added {
  color: var(--ctl-size-active, #111);
  background: none;
}

.ctl--size-underline .ctl-add-btn:not(:disabled):hover,
.ctl--size-tint .ctl-add-btn:not(:disabled):hover {
  transform: none;
  opacity: 0.6;
}

.ctl--size-underline .ctl-size-btn,
.ctl--size-tint .ctl-size-btn {
  position: relative;
  /* Sin recuadro el ancho lo marca el texto y su relleno, no el cuadro. */
  min-width: 0;
  color: var(--ctl-size-idle, #111);
  opacity: var(--ctl-size-idle-op, 0.55);
  transition: color 0.2s ease, opacity 0.2s ease;
}

.ctl--size-underline .ctl-size-btn:hover,
.ctl--size-tint .ctl-size-btn:hover {
  opacity: 1;
}

/* Estilo 1: linea debajo de la talla elegida, creciendo desde el centro. */
.ctl--size-underline .ctl-size-btn::after {
  content: '';
  position: absolute;
  left: var(--ctl-size-pad, 8px);
  right: var(--ctl-size-pad, 8px);
  bottom: 4px;
  height: var(--ctl-size-line-w, 1px);
  background: var(--ctl-size-line, #111);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.ctl--size-underline .ctl-size-btn.is-selected {
  color: var(--ctl-size-active, #111);
  opacity: 1;
}

.ctl--size-underline .ctl-size-btn.is-selected::after {
  transform: scaleX(1);
}

/* Estilo 2: la elegida toma su color y las demas se aclaran. */
.ctl--size-tint .ctl-size-btn.is-selected {
  color: var(--ctl-size-active, #111);
  opacity: 1;
}

/* Alto del panel, si se fija desde el editor. */
.ctl-size-popup-inner {
  min-height: var(--ctl-panel-h, auto);
}

/* Botón de añadir, a la derecha del panel de tallas */
.ctl-add-btn {
  flex-shrink: 0;
  box-sizing: border-box;
  width: var(--ctl-btn-size, 28px);
  height: var(--ctl-btn-size, 28px);
  border-radius: var(--ctl-btn-radius, 0);
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.25);
  color: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease,
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.ctl-add-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.ctl-add-btn:not(:disabled):hover {
  background: #111;
  color: #fff;
  transform: scale(1.04);
}

.ctl-add-btn.is-added {
  background: #111;
  color: #fff;
}

/* ---------- Etiquetas propias sobre la imagen ---------- */
.ctl-labels {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: var(--ctl-label-gap, 2px);
  pointer-events: none;
}

.ctl-labels--top-left {
  top: var(--ctl-label-y, 14px);
  left: var(--ctl-label-x, 14px);
  align-items: flex-start;
}

.ctl-labels--top-right {
  top: var(--ctl-label-y, 14px);
  right: var(--ctl-label-x, 14px);
  align-items: flex-end;
}

.ctl-labels--bottom-left {
  bottom: var(--ctl-label-y, 14px);
  left: var(--ctl-label-x, 14px);
  align-items: flex-start;
}

.ctl-labels--bottom-right {
  bottom: var(--ctl-label-y, 14px);
  right: var(--ctl-label-x, 14px);
  align-items: flex-end;
}

.ctl-label {
  font-family: var(--ctl-font, inherit);
  font-size: var(--ctl-label-size, 11px);
  font-weight: var(--ctl-label-weight, 600);
  letter-spacing: var(--ctl-label-ls, 0);
  line-height: var(--ctl-label-line, 1.4);
  text-transform: var(--ctl-label-transform, uppercase);
  background: var(--ctl-label-bg, rgba(0, 0, 0, 0));
  padding: var(--ctl-label-py, 0) var(--ctl-label-px, 0);
  border-radius: var(--ctl-label-radius, 0);
  white-space: nowrap;
}

/* ---------- Botón + para abrir las tallas en móvil ---------- */
/* Solo el signo +: sin recuadro, sin fondo y sin borde. El área táctil se
   agranda con ::before para que siga siendo cómodo de pulsar. */
.ctl-mobile-toggle {
  display: none;
  position: absolute;
  bottom: var(--ctl-toggle-y, 12px);
  width: var(--ctl-toggle-size, 20px);
  height: var(--ctl-toggle-size, 20px);
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  box-sizing: content-box;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  color: var(--ctl-toggle-color, #111);
  cursor: pointer;
  z-index: 6;
  transform-origin: center;
  transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Al pulsar: el + se hunde un poco y gira hacia la cruz mientras el panel
   sube con la misma curva y duración que el hover de escritorio. */
.ctl-mobile-toggle:active {
  transform: scale(0.82);
}

.ctl-card.is-popup-open .ctl-mobile-toggle {
  opacity: 0;
  transform: rotate(45deg) scale(0.85);
  pointer-events: none;
}

.ctl-mobile-toggle::before {
  content: '';
  position: absolute;
  inset: -10px;
}

.ctl-mobile-toggle svg {
  width: 100%;
  height: 100%;
  stroke-width: var(--ctl-toggle-weight, 1.5);
}

.ctl-card--toggle-left .ctl-mobile-toggle {
  left: var(--ctl-toggle-x, 12px);
}

.ctl-card--toggle-right .ctl-mobile-toggle {
  right: var(--ctl-toggle-x, 12px);
}

@media screen and (max-width: 749px), (hover: none) {
  .ctl-mobile-toggle {
    display: flex;
  }
}

@media screen and (max-width: 749px) {

  .ctl-label {
    font-size: var(--ctl-label-size-mobile, 10px);
  }

  /* Swatches más grandes en móvil, con área táctil ampliada (invisible)
     via ::before para acercarse a un objetivo táctil de ~40px sin agrandar
     demasiado el punto de color visible ni solaparse entre sí. */
  .ctl-title {
    font-size: var(--ctl-h-size-mobile, 12px);
  }

  .ctl-swatches {
    gap: var(--qsh-swatch-gap-mobile, 12px);
  }

  .ctl-swatch {
    width: var(--qsh-swatch-size-mobile, 24px) !important;
    height: var(--qsh-swatch-size-mobile, 24px) !important;
  }

  .ctl-swatch::before {
    content: '';
    position: absolute;
    inset: -7px;
    border-radius: 50%;
  }

  /* Rectángulo pegado al borde inferior de la imagen. Cerrado no intercepta
     ningún toque (opacidad 0 + pointer-events: none), y al pulsar el + entra
     con la misma animación que el hover de escritorio. */
  .ctl-size-popup {
    bottom: var(--ctl-panel-gap-mobile, 0);
    padding: 0;
  }

  .ctl-size-popup-inner {
    gap: 8px;
    padding: 8px 10px;
  }

  .ctl-size-popup-inner {
    min-height: var(--ctl-panel-h-mobile, auto);
  }

  .ctl-size-btn {
    min-width: var(--ctl-btn-size-mobile, 32px);
    height: var(--ctl-btn-size-mobile, 32px);
    padding: 0 var(--ctl-size-pad, 8px);
    font-size: var(--ctl-size-font-mobile, 12px);
  }

  .ctl-add-btn {
    width: var(--ctl-btn-size-mobile, 32px);
    height: var(--ctl-btn-size-mobile, 32px);
  }
}
/* END_BLOCK:complete-the-look */

/* START_BLOCK:contact-form-submit-button (INDEX:102) */
.submit-button {
    min-width: max-content;
  }
/* END_BLOCK:contact-form-submit-button */

/* START_BLOCK:contact-form (INDEX:103) */
.contact-form__form {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
  }

  .contact-form__form-row {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);

    @media screen and (min-width: 750px) {
      flex-direction: row;
      align-items: center;
    }
  }

  .contact-form__input {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    padding: var(--padding-lg) var(--padding-xl);
    border-radius: var(--style-border-radius-inputs);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    -webkit-font-smoothing: antialiased;
  }

  .contact-form__input--textarea {
    resize: vertical;
    min-height: var(--input-textarea-min-height);
  }

  .contact-form__error,
  .contact-form__success {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }
/* END_BLOCK:contact-form */

/* START_BLOCK:disclosures (INDEX:106) */
.disclosures__container {
      width: 100%;
    }

    .disclosures__container:has(> [shopify-block-empty]) {
      display: none;
    }

    .disclosures {
      --disclosures-symbol-width: calc(var(--disclosures-icon-size) * var(--disclosures-symbol-aspect-ratio, 1));

      display: block;
      color: var(--color, inherit);
      width: 100%;
      container-type: inline-size;
    }

    .disclosures.accordion--dividers accordion-custom:first-child .details {
      border-block-start: var(--style-border-width) solid var(--color-border);
    }

    .disclosures.accordion--dividers accordion-custom:last-child .details {
      border-block-end: var(--style-border-width) solid var(--color-border);
    }

    .disclosures__heading {
      margin-block-end: var(--margin-lg);
    }

    .disclosures .details__header {
      padding-block: var(--padding-xl);
      display: flex;
      align-items: flex-start;
      gap: var(--gap-xs);
    }

    .disclosures .details__header > .svg-wrapper {
      margin-block-start: calc((var(--disclosures-icon-size) - var(--icon-size-xs)) / 2);
    }

    .disclosures details[open] .details__header {
      padding-block-end: var(--padding-xs);
    }

    .disclosures__summary-content {
      flex: 1 1 0%;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      row-gap: var(--gap-xs);
      min-width: 0;
    }

    .disclosures__summary-item {
      display: flex;
      flex-direction: column;
      row-gap: var(--gap-xs);
      min-width: 0;
      overflow-wrap: break-word;
    }

    .disclosures__summary-item--measure {
      position: fixed;
      inset-block-start: 0;
      inset-inline-start: 0;
      display: block;
      width: max-content;
      max-width: none;
      visibility: hidden;
      white-space: nowrap;
      pointer-events: none;
      contain: layout style;
    }

    .disclosures__summary-item-row {
      display: flex;
      align-items: center;
      gap: var(--padding-2xs);
      min-width: 0;
      vertical-align: middle;
    }

    .disclosures__summary-item-title {
      font-weight: var(--font-weight-normal, normal);
      overflow-wrap: break-word;
    }

    .disclosures__summary-item--measure .disclosures__summary-item-title {
      white-space: nowrap;
      overflow-wrap: normal;
    }

    .disclosures .details__icon {
      display: inline-block;
      flex-shrink: 0;
      width: auto;
      max-inline-size: 100%;
      height: var(--disclosures-icon-size);
      margin: 0;
      object-fit: contain;
      vertical-align: middle;
    }

    .disclosures__summary-item-row:has(> .details__icon) {
      display: grid;
      grid-template-columns: var(--disclosures-symbol-width) minmax(0, 1fr);
      align-items: center;
      column-gap: var(--padding-2xs);
      min-inline-size: 0;
    }

    .disclosures__summary-item-row:has(> .details__icon) > .details__icon {
      grid-column: 1;
      justify-self: center;
    }

    .disclosures__summary-item-row:has(> .details__icon) > .disclosures__summary-item-title {
      grid-column: 2;
    }

    .disclosures details[open] > summary .disclosures__summary-item-title {
      font-weight: var(--font-weight-bold, bold);
    }

    .disclosures__summary-item-extra {
      display: block;
    }

    .disclosures__separator {
      display: none;
      flex-shrink: 0;
      padding-inline: var(--padding-xs);
      line-height: 1;
    }

    @container (min-width: 701px) {
      .disclosures:where([data-summary-layout='inline']) .details__header {
        align-items: center;
      }

      .disclosures:where([data-summary-layout='inline']) .details__header > .svg-wrapper {
        margin-block-start: 0;
      }

      .disclosures:where([data-summary-layout='inline']) .disclosures__summary-item {
        display: block;
      }

      .disclosures:where([data-summary-layout='inline']) .disclosures__summary-item-row {
        display: inline-flex;
      }

      .disclosures:where([data-summary-layout='inline']) .disclosures__summary-item-row:has(> .details__icon) {
        display: inline-grid;
      }

      .disclosures:where([data-summary-layout='inline']) .disclosures__summary-item-extra {
        display: inline-flex;
        align-items: center;
      }

      .disclosures:where([data-summary-layout='inline']) .disclosures__separator {
        display: inline-block;
      }
    }

    .disclosures__summary-item--measure .disclosures__summary-item-row {
      display: inline-flex;
      white-space: nowrap;
    }

    .disclosures__summary-item--measure .disclosures__summary-item-row:has(> .details__icon) {
      display: inline-grid;
    }

    .disclosures__summary-item--measure .disclosures__summary-item-extra {
      display: inline-flex;
      align-items: center;
      white-space: nowrap;
    }

    .disclosures__summary-item--measure .disclosures__separator {
      display: inline-block;
    }

    .disclosures details[open] .disclosures__summary-item-extra {
      display: none;
    }

    .disclosures__item {
      display: flex;
    }

    .disclosures__item + .disclosures__item {
      margin-block-start: var(--spacing-lg);
    }

    .disclosures__item-left {
      flex: 0 1 auto;
      min-width: 0;
      cursor: default;
    }

    .disclosures__item-right {
      flex: 1;
      cursor: pointer;
    }

    .disclosures__item-header {
      display: flex;
      align-items: center;
      gap: var(--padding-2xs);
      margin-block-end: var(--spacing-xs);
      padding-block-end: var(--padding-xs);
    }

    .disclosures__item-title {
      margin: 0;
    }

    .disclosures__item-header:has(> .details__icon) {
      display: grid;
      grid-template-columns: var(--disclosures-symbol-width) minmax(0, 1fr);
      align-items: center;
      column-gap: var(--padding-2xs);
      min-inline-size: 0;
    }

    .disclosures__item-header:has(> .details__icon) > .details__icon {
      grid-column: 1;
      justify-self: center;
    }

    .disclosures__item-header:has(> .details__icon) > .disclosures__item-title {
      grid-column: 2;
    }

    .disclosures details[open] .disclosures__item-title {
      font-weight: var(--font-weight-bold, bold);
    }

    .disclosures__item-content {
      max-width: var(--normal-content-width);
      padding-block-end: var(--padding-2xl);
    }

    .disclosures details[open] .details-content {
      padding-block-end: 0;
    }
/* END_BLOCK:disclosures */

/* START_BLOCK:email-signup (INDEX:107) */
.email-signup-block {
    --arrow-button-size: 58px;
    --arrow-button-size-integrated: 42px;
    --arrow-button-size-small: 20px;
    --arrow-icon-size: 32px;
    --arrow-icon-size-small: 24px;

    min-width: fit-content;

    @media screen and (max-width: 749px) {
      width: 100%;
      min-width: unset;
    }
  }

  .email-signup__heading {
    color: var(--color, inherit);
    padding-block: var(--padding-sm);
  }

  .email-signup__form {
    display: flex;
    flex-direction: column;
  }

  .email-signup__input-group {
    display: flex;
    align-items: stretch;
    background-color: transparent;
  }

  .email-signup__input-group:not(.email-signup__input-group--integrated):not(.email-signup__input-group--underline) {
    gap: var(--gap-xs);
    align-items: center;
  }

  .email-signup__input-group:not(.email-signup__input-group--arrow):not(.email-signup__input-group--underline):not(
      .email-signup__input-group--integrated
    ) {
    @media screen and (max-width: 749px) {
      flex-direction: column;
    }
  }

  .email-signup__input-group--integrated {
    border-width: var(--border-width);
    border-radius: var(--border-radius);
    border-style: solid;
    border-color: var(--color-input-border);
    background-color: var(--color-input-background);
  }

  .email-signup__input-group--integrated.email-signup__input-group--no-border {
    border: none;
  }

  .email-signup__input {
    flex: 1;
    min-width: 0;
    border-width: var(--border-width);
    border-radius: var(--border-radius);
    border-style: solid;
    border-color: var(--color-input-border);
    background-color: var(--color-input-background);
    transition: background-color var(--animation-speed) var(--animation-easing),
      color var(--animation-speed) var(--animation-easing);

    @media screen and (max-width: 749px) {
      width: 100%;
    }
  }

  .email-signup__input.paragraph {
    color: var(--color-input-text);
    outline-color: var(--color-input-background);
  }

  .email-signup__button {
    white-space: nowrap;
    padding: 0;

    @media screen and (max-width: 749px) {
      width: 100%;
    }
  }

  .email-signup__input,
  .email-signup__button--text {
    padding: var(--padding-lg) var(--padding-3xl);
  }

  .email-signup__input-group--underline {
    --box-shadow-color: var(--color-input-border);
    --box-shadow-multiplier: 1;
    --box-shadow-focused-multiplier: 1.75;

    box-shadow: 0 calc(var(--border-width) * var(--box-shadow-multiplier)) 0 var(--box-shadow-color);
    transition: box-shadow var(--animation-values);
    margin-block-end: calc(var(--border-width) * var(--box-shadow-focused-multiplier));

    &:focus-within {
      --box-shadow-multiplier: var(--box-shadow-focused-multiplier);
      --box-shadow-color: var(--color-input-text);
    }
  }

  .email-signup__input-group .email-signup__input--underline {
    color: var(--color-input-text);
    background-color: transparent;
    padding: 12px 0;
    border: none;
    border-radius: 0;

    &:focus-visible {
      outline: none;
    }
  }

  .email-signup__input::placeholder {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-70));
  }

  .email-signup__input-group .email-signup__input--none {
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    border: none;
  }

  .email-signup__input-group--integrated .email-signup__input {
    background-color: transparent;
    border: none;
    border-radius: 0;
  }

  .email-signup__button-icon {
    color: currentcolor;
    padding: 5px;

    @media screen and (max-width: 749px) {
      padding: 0;
      align-self: center;
      justify-self: center;
      width: var(--icon-size-lg);
      height: var(--icon-size-lg);
    }
  }

  .email-signup__button--arrow {
    width: var(--arrow-button-size-small);
    height: var(--arrow-button-size-small);
    padding: 0;

    &:not(.email-signup__button--integrated) {
      width: var(--arrow-button-size);
      height: var(--arrow-button-size);
      display: flex;
      align-items: center;
      justify-content: center;

      > .email-signup__button-icon {
        width: var(--arrow-icon-size);
        height: var(--arrow-icon-size);
        padding: 0;
      }
    }
  }

  .email-signup__button--integrated {
    --button-offset: var(--margin-xs);
    align-self: stretch;
    margin: var(--button-offset);
    flex-shrink: 0;

    @media screen and (max-width: 749px) {
      width: fit-content;
    }

    &.email-signup__button--text {
      padding: 0 var(--padding-3xl);
    }

    &.email-signup__button--text.button-unstyled {
      padding: 0 var(--padding-xl);
    }

    &.button-unstyled {
      border-radius: var(--border-radius);
    }

    > .email-signup__button-icon {
      padding: 0;
    }

    &.email-signup__button--arrow {
      width: var(--arrow-button-size-integrated);
      height: var(--arrow-button-size-integrated);
      align-self: center;
      display: flex;
      align-items: center;
      justify-content: center;

      > .email-signup__button-icon {
        width: var(--arrow-icon-size-small);
        height: var(--arrow-icon-size-small);
      }
    }
  }

  .email-signup__input--underline + .email-signup__button--integrated {
    margin: 0;
    align-self: center;

    &.email-signup__button--text {
      padding-block: 9px;
    }

    &.email-signup__button--text.button-unstyled {
      padding-inline: 0;
      min-width: 44px;
      min-height: 44px;
    }

    &.button-unstyled {
      border-radius: 0;
    }

    &.email-signup__button--arrow {
      width: var(--arrow-button-size-integrated);
      height: var(--arrow-button-size-integrated);
      display: flex;
      align-items: center;
      justify-content: center;

      > .email-signup__button-icon {
        width: var(--arrow-icon-size-small);
        height: var(--arrow-icon-size-small);
      }
    }
  }

  .email-signup__button:not(.button-unstyled) {
    background-color: var(--button-background-color);
    color: var(--button-color);
    text-transform: var(--button-text-case-primary);
  }

  .email-signup__button.button-secondary {
    text-transform: var(--button-text-case-secondary);
  }

  .email-signup__button.button-unstyled {
    background-color: transparent;
    color: var(--color-input-text);
  }

  .email-signup__button.button-unstyled:hover {
    --hover-color-rgb: var(--color-input-text-rgb);

    color: rgb(var(--hover-color-rgb) / var(--opacity-70));
    cursor: pointer;
  }

  .email-signup__message {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .email-signup__message-text {
    margin: 0;
  }
/* END_BLOCK:email-signup */

/* START_BLOCK:featured-collection (INDEX:108) */
.featured-collection-block {
    width: 100%;
  }
/* END_BLOCK:featured-collection */

/* START_BLOCK:filters (INDEX:109) */
.facets-block-wrapper {
    @media screen and (min-width: 750px) {
      margin: var(--facets-margin);
      grid-column: var(--grid-column--desktop);
    }
  }

  .facets-block-wrapper--vertical {
    @media screen and (min-width: 750px) {
      grid-column: var(--grid-column--desktop);
    }
  }

  .facets-toggle {
    --icon-offset: -3px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--minimum-touch-target);
    margin: var(--facets-margin);
    padding-block: var(--facets-inner-padding-block);
    padding-inline: var(--facets-inner-padding-inline);

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

  .facets-toggle__wrapper {
    margin-left: var(--icon-offset);
  }

  .facets-toggle__button {
    box-shadow: none;

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

  .filter-count-bubble {
    position: relative;
    width: 20px;
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    line-height: normal;
    place-content: center;
    color: var(--color-foreground);
    border: var(--icon-stroke-width) solid var(--color-background);
  }

  .facets-mobile__title-wrapper .h3 {
    margin-block-end: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .facets-mobile__title-wrapper .filter-count-bubble {
    width: 22px;
    height: 22px;
  }

  .facets-mobile__title-wrapper .filter-count-bubble__text {
    font-size: var(--font-size--xs);
  }

  .filter-count-bubble__background {
    position: absolute;
    inset: 0;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    border-radius: var(--style-border-radius-50);
  }

  .filter-count-bubble__text {
    font-size: 11px;
    font-weight: var(--font-paragraph--weight);
    aspect-ratio: 1 / 1;
  }

  .facets-toggle--no-filters {
    @media screen and (max-width: 749px) {
      /* stylelint-disable-next-line declaration-no-important */
      justify-content: unset !important;

      & > .facets-mobile-wrapper {
        width: 100%;
      }
    }
  }

  .facets-block-wrapper--vertical + .facets-toggle {
    @media screen and (max-width: 749px) {
      margin: 0;
    }
  }

  .facets-mobile-wrapper {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    justify-content: flex-end;
  }

  .facets-mobile-wrapper--multiple-controls {
    justify-content: space-between;
  }

  .facets {
    --facets-form-horizontal-gap: 20px;
    --facets-horizontal-max-input-wrapper-height: 230px;
    --facets-upper-z-index: var(--layer-raised);
    --facets-open-z-index: var(--layer-heightened);
    --facets-sticky-z-index: var(--layer-sticky);
    --facets-panel-min-width: 120px;
    --facets-panel-height: 300px;
    --facets-grid-panel-width: 300px;
    --facets-clear-padding: var(--padding-md);
    --facets-clear-shadow: 0 -4px 14px 0 rgb(var(--color-foreground-rgb) / var(--facets-low-opacity));
    --facets-input-label-color: rgb(var(--color-input-text-rgb) / var(--opacity-60));
    --facets-clear-all-min-width: 120px;
    --facets-see-results-min-width: 55%;
    --facets-mobile-gap: 22px;
    --facets-low-opacity: 10%;
    --facets-hover-opacity: 75%;

    @media screen and (min-width: 750px) {
      padding-inline: var(--padding-inline-start) var(--padding-inline-end);
    }
  }

  .facets--horizontal {
    display: none;

    @media screen and (min-width: 750px) {
      padding-block: var(--padding-block-start) var(--padding-block-end);
      display: flex;
      align-items: center;
      position: relative;
      z-index: var(--facets-upper-z-index);
      border: none;
      height: auto;
      top: initial;
      bottom: initial;
      max-height: none;
      width: auto;
      overflow: visible;
    }
  }

  .facets--vertical {
    display: none;

    @media screen and (min-width: 750px) {
      padding-block: 0 var(--padding-block-end);
      display: block;
      position: static;
      top: auto;
      bottom: auto;
      height: auto;
      max-height: none;
      width: auto;
      overflow: visible;
    }
  }

  .facets-drawer__form-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .facets-drawer__form-wrapper .facets__form {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .facets-drawer__filters {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
  }

  .facets-drawer__filters .facets__filters-wrapper,
  .facets-drawer__filters .filter-remove-buttons,
  .facets-drawer__filters .sorting-filter-component {
    overflow: visible;
  }

  .facets.facets-controls-wrapper {
    @media screen and (min-width: 750px) {
      grid-column: column-1 / column-12;
      color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
      gap: 0 var(--facets-form-horizontal-gap);
      padding-bottom: var(--padding-xs);
    }
  }

  .facets__inputs {
    display: flex;
    flex-direction: column;
    gap: var(--padding-lg);
    width: 100%;
  }

  :is(.facets--drawer, .facets--vertical) .facets__inputs:not(:has(.show-more)) {
    padding-block-end: var(--padding-sm);
  }

  /* Facets - Form */
  .facets__form-wrapper {
    display: flex;
    flex-direction: column;
    color: var(--color-foreground-subdued);
    width: 100%;
  }

  .facets--horizontal .facets__form-wrapper {
    @media screen and (min-width: 750px) {
      flex-direction: row;
      height: auto;
    }
  }

  .facets__form {
    display: flex;
    flex-flow: column;
    width: 100%;
    height: 100%;
  }

  .facets--horizontal .facets__form {
    @media screen and (min-width: 750px) {
      flex-flow: row nowrap;
      height: auto;
    }
  }

  .facets:not(.facets--drawer) .facets__filters-wrapper {
    @media screen and (min-width: 750px) {
      margin-inline-end: var(--margin-md);
    }
  }

  .facets--horizontal .facets__filters-wrapper {
    @media screen and (min-width: 750px) {
      max-width: 60%;
      display: flex;
      flex-wrap: wrap;
      column-gap: var(--gap-xl);
      margin-inline-end: 0;
    }
  }

  /* Facets - Summary */
  .facets__summary {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;
    --icon-opacity: 0.5;

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 26px;
      --variant-picker-swatch-height: 26px;
    }

    font-size: var(--font-h5--size);
    display: flex;
    justify-content: space-between;

    &:hover {
      --icon-opacity: 1;
    }
  }

  .facets__filters-wrapper:hover .facets__summary,
  .facets__filters-wrapper:has(.facets__panel[open]) .facets__summary {
    opacity: var(--facets-hover-opacity);
  }

  .facets__filters-wrapper .facets__summary:hover,
  .facets__filters-wrapper .facets__panel[open] .facets__summary {
    opacity: 1;
  }

  .facets--horizontal .facets__summary {
    @media screen and (min-width: 750px) {
      font-size: var(--font-paragraph--size);
      justify-content: flex-start;
      height: var(--minimum-touch-target);
    }
  }

  .facets__summary .icon-caret {
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
    color: rgb(var(--color-foreground-rgb) / var(--icon-opacity));
    margin-block: var(--margin-2xs);
    transition: color var(--animation-speed) var(--animation-easing);
  }

  .facets--drawer .facets__summary .icon-caret {
    margin-inline-start: var(--margin-2xs);
  }

  /* Facets - 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(--theme-drawer-padding);
  }

  .facets:not(.facets--drawer) .facets__panel,
  .facets-controls-wrapper .facets__panel {
    @media screen and (min-width: 750px) {
      padding: 0;
    }
  }

  .facets--horizontal .facets__panel {
    @media screen and (min-width: 750px) {
      position: relative;
    }
  }

  .facets-mobile-wrapper .facets__panel-content {
    border-radius: var(--style-border-radius-popover);
  }

  .facets-mobile-wrapper {
    --facets-upper-z-index: var(--layer-raised);
    --facets-panel-min-width: 120px;
    --facets-panel-height: 300px;
  }

  .facets--horizontal .facets__panel-content {
    @media screen and (min-width: 750px) {
      border-radius: var(--style-border-radius-popover);
      position: absolute;
      top: 100%;
      width: max-content;
      min-width: var(--facets-panel-min-width);
      max-width: var(--facets-panel-width);
      max-height: var(--facets-panel-height);
      z-index: var(--facets-upper-z-index);
      box-shadow: var(--shadow-popover);
      border: var(--style-border-popover);
      background-color: var(--color-background);
      overflow-y: hidden;
      gap: 0;
    }
  }

  :is(.facets--drawer, .facets--vertical) :is(.facets__item, .sorting-filter)::before {
    content: '';
    display: block;
    height: 0;
    width: calc(100% - var(--theme-drawer-padding) * 2);
    border-top: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    margin: 0 auto;
  }

  @media screen and (min-width: 750px) {
    .facets:not(.facets--drawer) :is(.facets__item, .sorting-filter)::before {
      width: 100%;
    }

    .facets--horizontal .facets__item:not(:first-of-type)::before,
    .facets--horizontal .sorting-filter::before {
      content: none;
    }
  }

  @media screen and (min-width: 750px) {
    .facets--vertical .facets__item:not(:first-of-type)::before,
    .facets--vertical .sorting-filter::before {
      content: '';
    }
  }

  /* Facets - Text */
  .facets__label,
  .facets__clear-all-link,
  .clear-filter {
    text-decoration-color: transparent;
    text-decoration-thickness: 0.075em;
    text-underline-offset: 0.125em;
    transition: text-decoration-color var(--animation-speed) var(--animation-easing);
  }

  .facets__clear-all-link {
    display: none;
    cursor: pointer;
    padding: var(--padding-xs);
    color: var(--button-color);
    transition: text-decoration-color var(--animation-speed) var(--animation-easing),
      color var(--animation-speed) var(--animation-easing);
  }

  .facets__clear-all-link:hover {
    --button-color: rgb(var(--color-foreground-rgb) / var(--opacity-80));

    text-decoration: underline;
    text-decoration-color: var(--button-color);
  }

  .facets__clear-all-link--horizontal {
    height: var(--minimum-touch-target);
    padding-inline: var(--facets-form-horizontal-gap);
    min-width: var(--facets-clear-all-min-width);
  }

  .facets__clear-all-link--active {
    display: block;
  }

  .facets__label,
  .products-count-wrapper {
    text-transform: var(--facet-label-transform);
  }

  .clear-filter {
    background-color: transparent;
    box-shadow: none;
    padding: 0;
  }

  .clear-filter:hover {
    text-decoration: underline;
  }

  /* Clear button */
  .facets__clear {
    display: none;
  }

  .facets--horizontal .facets__clear {
    @media screen and (min-width: 750px) {
      width: 100%;
      justify-content: flex-end;
      padding: 0 var(--facets-clear-padding) var(--facets-clear-padding) 0;
      cursor: pointer;
    }
  }

  .facets__clear--active {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  /* Facets - Label */
  .facets__label {
    color: var(--color-foreground);
    cursor: pointer;
    white-space: nowrap;

    @media screen and (min-width: 750px) {
      margin-inline-end: var(--margin-2xs);
    }
  }

  /* Products count */
  .products-count-wrapper {
    display: none;
  }

  .facets--horizontal .products-count-wrapper {
    @media screen and (min-width: 750px) {
      display: flex;
      margin-left: auto;
      flex-shrink: 0;
      align-items: center;
      height: var(--minimum-touch-target);
    }
  }

  /* Mobile specific components */
  .facets__title-wrapper {
    background-color: var(--color-background);
    color: var(--color-foreground);
    position: sticky;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: var(--padding-xs);
    padding-inline-start: var(--theme-drawer-padding);
    padding-inline-end: var(--padding-2xs);
    z-index: var(--facets-sticky-z-index);
  }

  :is(.facets--horizontal, .facets--vertical) .facets__title-wrapper {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets--drawer .theme-drawer__title {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 26px;
      --variant-picker-swatch-height: 26px;
    }
  }

  /* Status */
  .facets__status:not(:empty) {
    width: max-content;
    display: flex;
    margin-inline-start: auto;
    font-weight: 500;
    color: var(--color-foreground);
  }

  .facets__panel[open] .facets__status {
    display: none;
  }

  .facets--filters-title {
    margin-block-end: 0;
    color: var(--color-foreground);
    height: fit-content;

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

  .facets--horizontal .facets__panel .facets__status:has(:not(:empty)) {
    @media screen and (min-width: 750px) {
      display: flex;
      margin-inline-start: var(--margin-xs);
      margin-inline-end: var(--margin-xs);
    }
  }

  /* Horizontal filter style */
  .facets--horizontal .facets__form {
    @media screen and (min-width: 750px) {
      gap: 0 var(--facets-form-horizontal-gap);
    }
  }

  /* Facets - Actions */
  .facets__drawer-actions {
    --to-top-gradient-background: linear-gradient(
      to top,
      rgb(var(--color-background-rgb) / var(--opacity-90)),
      rgb(var(--color-background-rgb) / var(--opacity-80)),
      rgb(var(--color-background-rgb) / var(--opacity-40)),
      transparent
    );

    position: sticky;
    bottom: 0;
    z-index: var(--facets-sticky-z-index);
    order: 1;
    display: flex;
    flex-shrink: 0;
    justify-content: space-between;
    align-items: stretch;
    gap: var(--gap-sm);
    padding-block-start: var(--padding-xs);
    padding-block-end: var(--padding-md);
    padding-inline: var(--padding-lg);
    margin-top: auto;
    background-image: var(--to-top-gradient-background);
    background-color: var(--color-background);
  }

  /* Clear all button */
  .facets__clear-all {
    display: none;
    cursor: pointer;
    min-width: var(--facets-clear-all-min-width);
    flex-grow: 1;
    padding-block: var(--padding-lg);
    color: var(--button-color, inherit);
  }

  .facets__clear-all--active {
    display: block;
    opacity: 1;
    transform: translateY(0);
    transition: transform var(--animation-values), opacity var(--animation-values);
  }

  @starting-style {
    .facets__clear-all--active {
      opacity: 0;
      transform: translateY(100%);
    }
  }

  .facets__see-results {
    min-width: var(--facets-see-results-min-width);
    flex-grow: 1;
    padding-block: var(--padding-lg);

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

  .facets-horizontal-remove {
    display: flex;
    align-items: center;
  }

  .facets-horizontal-remove--active::before {
    content: '';
    border-inline-start: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    height: var(--font-paragraph--size);
    position: absolute;
  }
/* END_BLOCK:filters */

/* START_BLOCK:footer-copyright (INDEX:111) */
.footer-utilities__group-copyright {
    color: var(--color-utilities, var(--color-foreground-muted));
  }
/* END_BLOCK:footer-copyright */

/* START_BLOCK:footer-policy-list (INDEX:112) */
.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:114) */
.icon-block {
    display: flex;
    flex-shrink: 0;
  }

  .icon-block__media {
    height: auto;
  }
/* END_BLOCK:icon */

/* START_BLOCK:image (INDEX:115) */
.image-block__placeholder {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
    overflow: hidden;
    position: relative;
  }

  .placeholder-image {
    position: relative;
    aspect-ratio: var(--ratio);
    overflow: hidden;
  }

  .image-block {
    display: flex;

    /* When the image is nested in a group, section, etc, respect the parent's horizontal alignment */
    justify-content: var(--horizontal-alignment, 'inline-start');
  }

  .image-block--height-fill .image-block__image {
    height: 100%;
  }

  .image-block__image {
    object-fit: cover;
    aspect-ratio: var(--ratio);
  }
/* END_BLOCK:image */

/* START_BLOCK:legal-bar (INDEX:117) */
.legal-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: var(--lb-align);
    gap: var(--lb-row-gap) var(--lb-gap);
    color: var(--lb-color);
    opacity: var(--lb-opacity);
    font-size: var(--lb-size);
    font-weight: var(--lb-weight);
    text-transform: var(--lb-transform);
    letter-spacing: var(--lb-tracking);
    line-height: 1.5;
    border-block-start: var(--lb-border-width) solid var(--lb-border-color);
    padding-block-start: var(--lb-border-space);
    align-self: var(--lb-self, auto);
    height: fit-content;
  }

  .legal-bar--column {
    flex-direction: column;
    align-items: var(--lb-align);
  }

  .legal-bar--width-fill {
    width: 100%;
  }

  .legal-bar__copyright,
  .legal-bar__extra > * {
    margin: 0;
  }

  .legal-bar__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: var(--lb-align);
    gap: var(--lb-row-gap) var(--lb-gap);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .legal-bar--column .legal-bar__links {
    flex-direction: column;
    align-items: var(--lb-align);
  }

  .legal-bar__link {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.2s ease-in-out;
  }

  .legal-bar__link:hover {
    opacity: var(--lb-hover-opacity);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
/* END_BLOCK:legal-bar */

/* START_BLOCK:logo (INDEX:118) */
.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:119) */
.menu {
    width: 100%;
  }

  .menu:not(:has(.menu__heading--empty)) .details-content {
    margin-block-start: var(--spacing--size);
  }

  .menu__item + .menu__item {
    margin-block-start: var(--spacing--size);
  }

  .menu .menu__heading--empty {
    display: none;
  }

  .menu__heading__default {
    display: contents;
  }

  .menu__heading__accordion {
    display: none;
  }

  @media screen and (max-width: 749px) {
    /* Always show the fallback heading on mobile when accordion is enabled */
    .menu--accordion .menu__heading--empty {
      display: flex;
    }

    .menu--accordion .menu__heading__accordion {
      display: contents;
    }

    .menu--accordion .menu__heading__default {
      display: none;
    }

    .menu--accordion .details-content {
      margin-block-start: var(--spacing--size);
    }

    .menu--accordion .menu__details {
      padding-inline: 0;
    }

    .menu--dividers .menu__details {
      border-block-end: var(--style-border-width) solid var(--color-border);
    }

    .menu--dividers .details-content {
      padding-block-end: var(--padding-sm);
    }
  }
/* END_BLOCK:menu */

/* START_BLOCK:page-content (INDEX:120) */
.page-content {
    color: var(--color, inherit);
  }

  .page-content a {
    color: currentcolor;
  }
/* END_BLOCK:page-content */

/* START_BLOCK:page (INDEX:121) */
.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:122) */
.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:123) */
.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:price (INDEX:124) */
.qsh-swatches {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--qsh-swatch-gap, 5px);
  margin-top: 6px;
}

.qsh-swatch {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  display: block;
  width: var(--qsh-swatch-size, 14px) !important;
  height: var(--qsh-swatch-size, 14px) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background-size: cover;
  background-position: center;
  margin: 0;
  padding: 0;
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.qsh-swatch:hover {
  transform: scale(1.08);
}

.qsh-swatch.is-active {
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px #111;
}

@media screen and (max-width: 749px) {
  .qsh-swatch {
    width: var(--qsh-swatch-size-mobile, 9px) !important;
    height: var(--qsh-swatch-size-mobile, 9px) !important;
  }
}

product-price .price__sale .price-item--sale.price {
  color: var(--qsh-sale-color, inherit) !important;
}
/* END_BLOCK:price */

/* START_BLOCK:product-custom-property (INDEX:126) */
product-custom-property-component {
    display: block;
    width: 100%;
  }

  product-custom-property-component .__heading {
    margin-inline: 0;
    margin-block: 0 var(--padding-sm);
  }

  product-custom-property-component .__heading:has(+ .__description) {
    margin-block-end: var(--padding-2xs);
  }

  product-custom-property-component .__description {
    font-size: min(0.85em, var(--font-paragraph--size));
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
    margin-inline: 0;
    margin-block: 0 var(--padding-md);
  }

  product-custom-property-component .__field {
    position: relative;
  }

  product-custom-property-component .__input-wrapper {
    position: relative;
  }

  product-custom-property-component input,
  product-custom-property-component textarea {
    width: 100%;
    /* stylelint-disable-next-line declaration-no-important */
    color: var(--color-input-text) !important;
  }

  /* Add padding for inputs with counter inside */
  product-custom-property-component .__input-wrapper input {
    padding-bottom: calc(var(--padding-sm) * 3);
  }

  product-custom-property-component .__input-wrapper textarea {
    padding-bottom: calc(var(--padding-sm) * 3);
    scroll-padding-bottom: calc(var(--padding-sm) * 3);
  }

  product-custom-property-component textarea {
    min-height: 80px;
  }

  @supports (resize: vertical) {
    @media (hover: hover) and (pointer: fine) {
      product-custom-property-component textarea {
        resize: vertical; /* stylelint-disable-line */
      }
    }
  }

  product-custom-property-component .__character-label {
    position: absolute;
    left: var(--input-padding-x);
    bottom: var(--padding-sm);
    pointer-events: none;
  }

  product-custom-property-component .__character-count {
    font-style: italic;
    /* stylelint-disable-next-line declaration-no-important */
    color: var(--color-input-text) !important;
  }

  /* We should consolidate input styles that share the same behavior */
  .custom-property__input {
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    border-radius: var(--style-border-radius-inputs);

    /* this is needed to override the styles from field__input */
    box-shadow: none;

    &:is(:hover, :focus) {
      /* this is needed to override the styles from field__input */
      box-shadow: none;
    }

    &:focus {
      /* this is needed to override the styles from field__input */
      outline: var(--focus-outline-width) solid var(--color-input-background);
    }
  }
/* END_BLOCK:product-custom-property */

/* START_BLOCK:product-inventory (INDEX:128) */
.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:129) */
.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:product_card_glass (INDEX:131) */
.pcard {
  position: relative;
  display: flex;
  flex-direction: column;
}

.pcard-empty-box {
  border: 1px dashed rgb(var(--color-foreground-rgb) / 0.3);
  padding: 32px 16px;
  text-align: center;
  font-size: 13px;
  opacity: 0.7;
}

/* Zona de la imagen */
.pcard-media {
  position: relative;
  background: rgb(var(--color-foreground-rgb) / 0.05);
}

.pcard-image-link {
  display: block;
  aspect-ratio: var(--pcard-ratio, 3 / 4);
  overflow: hidden;
  border-radius: var(--pcard-radius, 0);
}

.pcard-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.pcard-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--color-background);
  border: 1px solid var(--color-foreground);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 3px 8px;
  text-transform: uppercase;
  z-index: 2;
}

/* Panel glass "portado" a document.body por JS y posicionado con
   position: fixed + coordenadas calculadas (ver bloque javascript). Al
   vivir fuera de CUALQUIER contenedor de este bloque, de la sección o del
   tema, es inmune a cualquier overflow:hidden / border-radius / transform
   que un padre externo le hubiera estado aplicando.
   Los blancos translúcidos son intencionales para el efecto frosted sobre
   la foto: no se atan a los tokens de foreground/background del tema. */
.pcard-sizes {
  position: fixed;
  top: 0;
  left: 0;
  padding: 10px;
  box-sizing: border-box;
  z-index: 9999;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

/* El desenfoque solo se enciende con el panel abierto: un
   `backdrop-filter` permanente en cada tarjeta obliga al navegador a
   recalcular el fondo desenfocado en cada fotograma de scroll, aunque el
   panel esté invisible. Ver la nota larga en _product-card-gallery. */
.pcard-sizes.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.pcard-sizes.is-open .pcard-sizes-inner {
  backdrop-filter: blur(var(--pcard-blur, 18px));
  -webkit-backdrop-filter: blur(var(--pcard-blur, 18px));
}

.pcard-sizes-inner {
  background: rgba(255, 255, 255, var(--pcard-glass-tint, 0.32));
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: var(--pcard-panel-radius, 0px) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  width: 100%;
}

.pcard-sizes-label {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #111;
}

.pcard-size-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1;
  justify-content: flex-end;
}

.pcard-size-btn {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 8px;
  cursor: pointer;
  color: #111;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.pcard-size-btn:hover,
.pcard-size-btn.is-selected {
  background: #111;
  color: #fff;
  border-color: #111;
}

.pcard-size-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  text-decoration: line-through;
}

.pcard-size-btn:disabled:hover {
  background: transparent;
  color: #111;
  border-color: transparent;
}

.pcard-add-btn {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.25);
  color: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease,
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.pcard-add-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.pcard-add-btn:not(:disabled):hover {
  background: #111;
  color: #fff;
  transform: scale(1.04);
}

.pcard-add-btn.is-added {
  background: #111;
  color: #fff;
}

/* Info bajo la imagen: nombre izquierda, precio derecha */
.pcard-info {
  padding-top: 10px;
}

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

.pcard-name {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-foreground);
  text-decoration: none;
  min-width: 0;
}

.pcard-name:hover {
  text-decoration: underline;
}

.pcard-prices {
  flex-shrink: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}

.pcard-price-was {
  font-size: 12px;
  opacity: 0.5;
}

.pcard-price-now {
  font-size: 13px;
  font-weight: 600;
}

.pcard-price-now.is-sale {
  color: var(--pcard-sale-color, #0055d4);
}

.pcard-swatches {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

.pcard-swatch {
  position: relative;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgb(var(--color-foreground-rgb) / 0.2);
  background-size: cover;
  background-position: center;
  padding: 0;
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.pcard-swatch:hover {
  transform: scale(1.08);
}

.pcard-swatch.is-active {
  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 3px var(--color-foreground);
}

@media screen and (max-width: 749px) {
  /* Área táctil ampliada sin agrandar el punto de color visible */
  .pcard-swatches {
    gap: 12px;
  }

  .pcard-swatch {
    width: 20px;
    height: 20px;
  }

  .pcard-swatch::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
  }

  .pcard-sizes-inner {
    flex-wrap: wrap;
    gap: 8px;
  }

  .pcard-size-list {
    gap: 6px;
    justify-content: flex-start;
  }

  .pcard-size-btn {
    min-height: 36px;
    min-width: 36px;
    padding: 0 10px;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .pcard-add-btn {
    width: 36px;
    height: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pcard-sizes,
  .pcard-image,
  .pcard-swatch,
  .pcard-add-btn {
    transition: none;
  }
}
/* END_BLOCK:product_card_glass */

/* START_BLOCK:review (INDEX:134) */
.rating-wrapper {
    --star-fill-color: var(--color-foreground);
    --star-fill-color-rgb: var(--color-foreground-rgb);
    --color: var(--color-foreground);
    --color-rgb: var(--color-foreground-rgb);
    gap: var(--gap-xs);
    min-width: fit-content;
  }

  .rating-wrapper,
  .rating {
    display: flex;
    align-items: center;
  }

  .rating-wrapper.justify-right {
    flex-direction: row-reverse;
  }

  .rating {
    gap: var(--gap-3xs);
  }

  .rating-wrapper .rating-count,
  .rating-wrapper .rating-count-separator {
    color: var(--star-fill-color);
    margin: 0;
    white-space: nowrap;
  }

  .rating-count-separator {
    opacity: var(--opacity-20);
    padding-left: calc(var(--padding-xs) / 2);
    padding-right: var(--padding-xs);
  }

  .stars {
    height: var(--star-size);
    fill: var(--empty-star-fill-color);
  }

  .filled-star {
    fill: var(--star-fill-color);
  }
/* END_BLOCK:review */

/* START_BLOCK:social-custom (INDEX:136) */
.social-custom {
    color: var(--sc-color);
    align-self: var(--sc-self, auto);
    height: fit-content;
  }

  .social-custom--width-fill {
    width: 100%;
  }

  .social-custom__heading {
    margin: 0 0 var(--sc-heading-space);
    font-size: var(--sc-heading-size);
    font-weight: var(--sc-weight);
    text-transform: var(--sc-transform);
    letter-spacing: var(--sc-tracking);
    text-align: var(--sc-align);
  }

  .social-custom__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: var(--sc-align);
    gap: var(--sc-gap);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .social-custom--column .social-custom__list {
    flex-direction: column;
    align-items: var(--sc-align);
  }

  .social-custom__link {
    display: inline-flex;
    align-items: center;
    gap: var(--sc-icon-gap);
    color: inherit;
    text-decoration: none;
    font-size: var(--sc-size);
    font-weight: var(--sc-weight);
    text-transform: var(--sc-transform);
    letter-spacing: var(--sc-tracking);
    line-height: 1.4;
    transition: opacity 0.2s ease-in-out;
  }

  .social-custom__link:hover {
    opacity: var(--sc-hover-opacity);
  }

  .social-custom__icon svg {
    display: block;
    width: var(--sc-icon-size);
    height: var(--sc-icon-size);
  }
/* END_BLOCK:social-custom */

/* START_BLOCK:social-links (INDEX:137) */
.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:138) */
/* 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:139) */
product-swatches {
    width: 100%;
    display: flex;
    position: relative;
    overflow: hidden;
    gap: 0;
    flex-shrink: 0;
  }
/* END_BLOCK:swatches */

/* START_BLOCK:variant-picker (INDEX:141) */
/* ---- Animación botones de variante ---- */
  .variant-option__button-label {
    position: relative;
    transition: color 220ms ease-in-out, background-color 220ms ease-in-out, border-color 220ms ease-in-out,
      transform 220ms ease-in-out;
  }

  @media (hover: hover) {
    .variant-option__button-label:hover {
      transform: translateY(-1px);
    }
  }

  .variant-option__button-label:active {
    transform: scale(0.96);
  }

  /* ---- Colores: misma animación que las tallas ---- */
  .variant-option__button-label--has-swatch,
  .variant-option__button-label--has-image,
  .variant-option__button-label .swatch,
  .variant-option__button-label__swatch {
    transition: transform 220ms ease-in-out, box-shadow 220ms ease-in-out, opacity 220ms ease-in-out;
  }

  @media (hover: hover) {
    .variant-option__button-label--has-swatch:hover,
    .variant-option__button-label--has-image:hover {
      transform: translateY(-1px);
    }
  }

  .variant-option__button-label--has-swatch:active,
  .variant-option__button-label--has-image:active {
    transform: scale(0.96);
  }

  /* Anillo del color seleccionado (el input va DENTRO del label) */
  .variant-option__button-label--has-swatch:has(input:checked),
  .variant-option__button-label--has-image:has(input:checked) {
    box-shadow: 0 0 0 1px var(--color-background), 0 0 0 2px var(--color-foreground);
  }

  @media (prefers-reduced-motion: reduce) {
    .variant-option__button-label,
    .variant-option__button-label--has-swatch,
    .variant-option__button-label--has-image {
      transition-duration: 1ms;
      transform: none;
    }
  }
/* END_BLOCK:variant-picker */

/* START_BLOCK:video (INDEX:142) */
.placeholder-video {
    aspect-ratio: 5 / 3;
  }
/* END_BLOCK:video */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:accordion-custom-component (INDEX:143) */
accordion-custom {
    details {
      &::details-content,
      .details-content {
        block-size: 0;
        overflow-y: clip;
        opacity: 0;
        interpolate-size: allow-keywords;
        transition: content-visibility var(--animation-speed-slow) allow-discrete,
          padding-block var(--animation-speed-slow) var(--animation-easing),
          opacity var(--animation-speed-slow) var(--animation-easing),
          block-size var(--animation-speed-slow) var(--animation-easing);
      }

      /* Disable transitions when the content toggle is not caused by the direct user interaction, e.g. opening the filters on mobile. */
      &:not(:focus-within)::details-content,
      &:not(:focus-within) .details-content {
        transition: none;
      }

      &:not([open]) {
        &::details-content,
        .details-content {
          padding-block: 0;
        }
      }

      &[open] {
        &::details-content,
        .details-content {
          opacity: 1;
          block-size: auto;

          @starting-style {
            block-size: 0;
            opacity: 0;
            overflow-y: clip;
          }

          &:focus-within {
            overflow-y: visible;
          }
        }
      }
    }
  }

  accordion-custom[data-disable-on-mobile='true'] summary {
    @media screen and (max-width: 749px) {
      cursor: auto;
    }
  }

  accordion-custom[data-disable-on-desktop='true'] summary {
    @media screen and (min-width: 750px) {
      cursor: auto;
    }
  }
/* END_SNIPPET:accordion-custom-component */

/* START_SNIPPET:accordion-styles (INDEX:144) */
.accordion {
    flex: 1;
    width: 100%;
  }

  .accordion--dividers accordion-custom:not(:first-child) .details {
    border-block-start: var(--style-border-width) solid var(--color-border);
  }

  /* When accordion borders are not set, show fallback borders */
  .accordion--dividers {
    /* stylelint-disable-next-line declaration-property-value-disallowed-list */
    --show-fallback-borders: 0;
  }

  .accordion--dividers:not([class*='color-'])[style*='--border-width: 0'],
  .accordion--dividers:not([class*='color-'])[style*='--border-style: none'] {
    --show-fallback-borders: 1;
  }

  .accordion--dividers accordion-custom:first-child .details {
    border-block-start: calc(var(--style-border-width) * var(--show-fallback-borders)) solid var(--color-border);
  }

  .accordion--dividers accordion-custom:last-child .details {
    border-block-end: calc(var(--style-border-width) * var(--show-fallback-borders)) solid var(--color-border);
  }

  .accordion--dividers .details-content {
    padding-block-end: var(--padding-sm);
  }

  .accordion--caret .icon-plus,
  .accordion--plus .icon-caret {
    display: none;
  }

  /* because we can't pass apply a specific class on a block based on its parent block setting */
  .accordion .details__header {
    font-family: var(--summary-font-family);
    font-style: var(--summary-font-style);
    font-weight: var(--summary-font-weight);
    font-size: var(--summary-font-size);
    line-height: var(--summary-font-line-height);
    text-transform: var(--summary-font-case);
    min-height: var(--minimum-touch-target);
  }

  .details__icon {
    height: auto;
    margin-inline-end: var(--margin-xs);
  }
/* END_SNIPPET:accordion-styles */

/* START_SNIPPET:background-media (INDEX:146) */
@media (prefers-reduced-motion: reduce) {
    video-background-component video {
      display: none;
    }
  }
/* END_SNIPPET:background-media */

/* START_SNIPPET:bento-grid (INDEX:147) */
.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:148) */
.blog-post-comments__form-container {
    --comment-form-gap: var(--gap-md);

    width: 100%;
    max-width: var(--normal-content-width);
    margin: var(--margin-4xl) auto 0;
  }

  .blog-post-comments__form {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--comment-form-gap);

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

  .blog-post-comments__form-input {
    padding: var(--padding-lg) var(--padding-xl);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
  }

  .blog-post-comments__form-input--textarea {
    resize: vertical;
    min-height: var(--input-textarea-min-height);
  }

  .blog-post-comments__form-message {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .blog-post-comments__form-body {
    grid-column: 1 / -1;
  }

  .blog-post-comments__form-input:focus-visible {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .blog-post-comments__form-moderated {
    font-size: var(--font-size--xs);
  }

  .blog-post-comments__form-submit {
    margin-block-start: var(--comment-form-gap);
  }
/* END_SNIPPET:blog-comment-form */

/* START_SNIPPET:buy-buttons-styles (INDEX:153) */
.buy-buttons-block {
    --buy-button-preferred-width: 185px;

    width: 100%;
  }

  .product-form-buttons {
    display: flex;
    flex-wrap: wrap;
  }

  .product-form-buttons:not(:has(.quantity-rules)) {
    gap: calc(var(--gap-sm) / 2);

    @media screen and (min-width: 750px) {
      gap: var(--gap-sm);
    }
  }

  .product-form-buttons
    > *:not(.quantity-selector-wrapper, .quantity-rules, .quantity-label, .volume-pricing, .product-form-text__error) {
    flex: 1 1 var(--buy-button-preferred-width, 0);
    min-width: fit-content;
  }

  .product-form-buttons--stacked
    > *:not(.quantity-selector-wrapper, .quantity-rules, .quantity-label, .volume-pricing, .product-form-text__error) {
    flex-basis: 51%;
  }

  .product-form-buttons button {
    width: 100%;
    padding-block: var(--padding-lg);
  }

  .quantity-selector {
    flex-grow: 0;
    flex-shrink: 0;
    height: var(--height-buy-buttons);
  }

  .quantity-label {
    flex: 1 0 100%;
    width: 100%;
    font-size: var(--font-size--sm);
    margin-block-end: var(--gap-xs);
  }

  .quantity-label__cart-count {
    color: var(--color-foreground-secondary);
  }

  .quantity-rules {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    row-gap: calc(var(--gap-xs) / 2);
    flex: 1 0 100%;
    width: 100%;
    font-size: var(--font-size--xs);
    color: var(--color-foreground-secondary);
    margin-block-start: var(--gap-xs);
    margin-block-end: var(--gap);
  }

  .product-form-buttons:has(~ .volume-pricing .volume-pricing__title) .quantity-rules {
    margin-block-end: var(--gap-md);
  }

  .quantity-rules__item {
    position: relative;
    display: inline-block;
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .quantity-rules__item:not(:last-child) {
    padding-right: var(--padding-xl);
    margin-right: var(--margin-2xs);
  }

  .quantity-rules__item:not(:last-child)::after {
    content: '•';
    position: absolute;
    inset-inline-end: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.5em;
    line-height: 0;
  }

  .add-to-cart-button {
    height: var(--height-buy-buttons);
    text-transform: var(--button-text-case-primary);
  }

  .add-to-cart-button.button-secondary {
    text-transform: var(--button-text-case-secondary);
  }

  .product-form-text__error {
    display: flex;
    flex: 1 0 100%;
    align-items: flex-start;
    gap: var(--gap-xs);
    margin-block-end: var(--gap-xs);
  }

  .product__pickup-availabilities {
    width: 100%;
    color: var(--color, var(--color-foreground));
  }

  .pickup-availability__column {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  .pickup-availability__row {
    display: flex;
    gap: var(--padding-xs);
  }

  .pickup-availability__dialog-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }

  .pickup-availability__header-container {
    padding-block-end: var(--padding-2xl);
  }

  .pickup-location__wrapper {
    display: flex;
    flex-direction: column;
    padding-block: var(--padding-2xl);
    padding-inline: var(--theme-drawer-padding);
    border-top: 1px solid var(--color-border);
    gap: var(--padding-xs);
  }

  .pickup-location__address-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--padding-md);
  }

  .pickup-location__text-sm {
    font-size: var(--font-size--sm);
    margin: 0;
  }

  .pickup-location__text-xs {
    font-size: var(--font-size--xs);
    margin: 0;
  }

  .pickup-location__button {
    width: fit-content;
    color: var(--color, var(--color-foreground));
    font-size: var(--font-size--xs);
    font-family: var(--font-body--family);
    padding: 0;
    cursor: pointer;
    margin-block: var(--margin-xs);
  }

  .pickup-location__button:hover {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .pickup-location__h4 {
    margin: 0;
  }

  .pickup-location__text-bold {
    font-size: var(--font-size--md);
    font-weight: 600;
    margin: 0;
  }

  .pickup-location__availability-wrapper {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    font-family: var(--font-paragraph--family);
  }

  .pickup-location__address {
    font-style: normal;
  }

  .volume-pricing {
    display: block;
    width: 100%;
    margin-bottom: var(--gap);
  }

  .volume-pricing:not(:has(.volume-pricing__title)) {
    margin-top: 0;
    margin-bottom: 0;
  }

  .volume-pricing__title {
    display: block;
    margin-block-end: var(--gap-sm);
    font-size: var(--font-size--sm);
    font-weight: var(--font-body--weight);
    color: var(--color-foreground);
  }

  .volume-pricing__table {
    width: 100%;
  }

  .volume-pricing__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-md);
    font-size: var(--font-size--sm);
  }

  .volume-pricing__row--even {
    background: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .volume-pricing__row--odd {
    background: var(--color-background);
  }

  .volume-pricing__collapsible-wrapper {
    block-size: 0;
    overflow-y: clip;
    opacity: 0;
    interpolate-size: allow-keywords;
    transition: opacity var(--animation-speed-slow) var(--animation-easing),
      block-size var(--animation-speed-slow) var(--animation-easing);
  }

  .volume-pricing__toggle {
    width: 100%;
    padding-bottom: 0;
    padding-inline: 0;
    text-align: left;
    color: var(--color-foreground-secondary);
    font-size: var(--font-size--xs);
    cursor: default;
    margin-block-start: 0;
    pointer-events: none;
  }

  button.volume-pricing__toggle {
    /* Need the extra specificity to override .product-form-buttons button */
    padding-block: var(--padding-sm);
  }

  .volume-pricing__toggle-text {
    cursor: pointer;
    display: inline-block;
    pointer-events: auto;
  }

  .volume-pricing__show-less {
    display: none;
  }

  .volume-pricing--expanded .volume-pricing__collapsible-wrapper {
    opacity: 1;
    block-size: auto;

    @starting-style {
      block-size: 0;
      opacity: 0;
      overflow-y: clip;
    }
  }

  .volume-pricing--expanded .volume-pricing__show-more {
    display: none;
  }

  .volume-pricing--expanded .volume-pricing__show-less {
    display: inline;
  }

  /* Accelerated checkout styles — co-located here so they compile on pages
       where the quick-add modal can display buy buttons (e.g. collection pages). */
  .accelerated-checkout-block[data-shopify-visual-preview] {
    width: 300px;
  }

  more-payment-options-link {
    font-size: smaller;
  }

  more-payment-options-link a:hover {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .shopify-payment-button__more-options[aria-hidden='true'] {
    display: none;
  }

  /* ---- Animación botones de compra ---- */
  .add-to-cart-button,
  .shopify-payment-button__button {
    position: relative;
    overflow: hidden;
    transition: transform 200ms ease-in-out, box-shadow 240ms ease-in-out, background-color 240ms ease-in-out,
      color 240ms ease-in-out;
  }

  @media (hover: hover) {
    .add-to-cart-button:hover,
    .shopify-payment-button__button:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 18px rgb(var(--color-foreground-rgb) / 0.14);
    }
  }

  .add-to-cart-button:active,
  .shopify-payment-button__button:active {
    transform: translateY(0) scale(0.985);
    box-shadow: none;
  }

  /* Barrido de luz sutil en el botón oscuro */
  .shopify-payment-button__button::after {
    content: '';
    position: absolute;
    inset-block: 0;
    inset-inline-start: -60%;
    width: 40%;
    background: linear-gradient(100deg, transparent, rgb(255 255 255 / 0.18), transparent);
    transform: skewX(-18deg);
    opacity: 0;
    pointer-events: none;
  }

  @media (hover: hover) {
    .shopify-payment-button__button:hover::after {
      opacity: 1;
      animation: buy-button-sheen 700ms ease-in-out;
    }
  }

  @keyframes buy-button-sheen {
    from {
      inset-inline-start: -60%;
    }

    to {
      inset-inline-start: 120%;
    }
  }

  .add-to-cart-button:focus-visible,
  .shopify-payment-button__button:focus-visible {
    outline: 2px solid var(--color-foreground);
    outline-offset: 2px;
  }

  @media (prefers-reduced-motion: reduce) {
    .add-to-cart-button,
    .shopify-payment-button__button {
      transition-duration: 1ms;
      transform: none;
    }

    .shopify-payment-button__button::after {
      display: none;
    }
  }
/* END_SNIPPET:buy-buttons-styles */

/* START_SNIPPET:card-gallery (INDEX:154) */
.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: block;
  }

  .product-card-gallery__title-placeholder .title-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    overflow: hidden;
  }

  .card-gallery[data-image-ratio='landscape'] .product-card-gallery__title-placeholder .title-text {
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }

  @media screen and (min-width: 750px) {
    .product-grid[data-product-card-size='extra-large'] .product-card-gallery__title-placeholder {
      padding: var(--padding-3xl);
      font-size: var(--font-size--3xl);
    }

    .product-grid[data-product-card-size='large'] .product-card-gallery__title-placeholder {
      padding: var(--padding-2xl);
      font-size: var(--font-size--2xl);
    }

    .product-grid[data-product-card-size='medium'] .product-card-gallery__title-placeholder {
      padding: var(--padding-xl);
      font-size: var(--font-size--xl);
    }

    .product-grid[data-product-card-size='small'] .product-card-gallery__title-placeholder {
      padding: var(--padding-sm);
      font-size: var(--font-size--lg);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-3xl) + 50px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-2xl) + 50px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-xl) + 50px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-sm) + 50px);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-3xl) + 40px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-2xl) + 40px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-xl) + 40px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-sm) + 40px);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-3xl) + 40px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-2xl) + 40px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-xl) + 40px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-sm) + 40px);
    }
  }

  @media screen and (max-width: 749px) {
    .product-card-gallery__title-placeholder {
      font-size: var(--font-size--xl);
      padding: var(--padding-md);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-sm) + 50px);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-sm) + 40px);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-sm) + 40px);
    }
  }

  [product-grid-view='zoom-out'] .card-gallery .product-card-gallery__title-placeholder {
    /* stylelint-disable-next-line declaration-no-important */
    padding: var(--padding-xs) !important;
    font-size: var(--font-size--xs);
  }

  [product-grid-view='zoom-out'] .card-gallery .slideshow-control {
    min-width: auto;
  }

  ul[product-grid-view='zoom-out'] .product-grid__card .card-gallery {
    display: block;
  }

  [product-grid-view='zoom-out']
    .card-gallery
    > :is(quick-add-component, .product-badges, slideshow-component > slideshow-controls) {
    display: none;
  }

  ul[product-grid-view='zoom-out'] .card-gallery > img {
    display: block;
  }

  .card-gallery slideshow-arrows .slideshow-control {
    /* Align icons with quick-add button */
    padding-inline: var(--padding-xl);

    @container (max-width: 249px) {
      padding-inline: 0 var(--padding-sm);
    }
  }

  /*
   * Card galleries preview the next or previous images on 'pointerenter', so we
   * try to kick load them beforehand (they are lazy loaded otherwise).
   */
  .card-gallery
    :is(
      slideshow-slide:has(+ slideshow-slide[aria-hidden='false']),
      slideshow-slide[aria-hidden='false'] + slideshow-slide
    ) {
    content-visibility: auto;

    slideshow-component[actioned] & {
      content-visibility: visible;
    }
  }
/* END_SNIPPET:card-gallery */

/* START_SNIPPET:cart-bubble (INDEX:156) */
.cart-bubble {
    --cart-padding: 0.2em;

    position: relative;
    width: 20px;
    aspect-ratio: 1;
    border-radius: 50%;
    border-width: 0;
    display: flex;
    line-height: normal;
    align-items: center;
    justify-content: center;
    color: var(--cart-bubble-text, var(--cart-bubble-text-fallback));
    padding-inline: var(--cart-padding);
  }

  .cart-bubble[data-maintain-ratio] {
    aspect-ratio: 1;
  }

  .cart-bubble[data-maintain-ratio] .cart-bubble__background {
    border-radius: var(--style-border-radius-50);
  }

  .cart-bubble__background {
    position: absolute;
    inset: 0;
    background-color: var(--cart-bubble-background, var(--cart-bubble-background-fallback));
    border-radius: var(--style-border-radius-lg);
  }

  .cart-bubble__text {
    font-size: var(--font-size--3xs);
    z-index: var(--layer-flat);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
/* END_SNIPPET:cart-bubble */

/* START_SNIPPET:cart-disclosure-tooltip (INDEX:157) */
.cart-disclosure-tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    flex-shrink: 0;
  }

  .cart-disclosure-tooltip__button {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
    color: var(--color-foreground-secondary);
    line-height: 1;
    transition: color var(--animation-speed) var(--animation-easing);
    cursor: pointer;
  }

  .cart-items__title-row .cart-disclosure-tooltip {
    position: static;
    align-self: flex-start;
    width: 1em;
    height: 1em;
    margin-block-start: calc((1lh - 1em) / 2 + 0.3rem);
    line-height: calc(var(--font-size--md) * var(--font-paragraph--line-height));
  }

  .cart-page .cart-items__title-row .cart-disclosure-tooltip {
    margin-block-start: calc((1lh - 1em) / 2);
  }

  .cart-items__title-row .cart-disclosure-tooltip__button {
    position: relative;
    justify-content: center;
    width: 1em;
    height: 1em;
  }

  .cart-items__title-row .cart-disclosure-tooltip__button::before {
    content: '';
    position: absolute;
    inset-block: calc((1em - var(--minimum-touch-target)) / 2);
    inset-inline-start: 0;
    inset-inline-end: calc(1em - var(--minimum-touch-target));
  }

  .cart-disclosure-tooltip__button:hover {
    color: var(--color-foreground);
  }

  .cart-disclosure-tooltip__button .svg-wrapper,
  .cart-disclosure-tooltip__button .svg-wrapper > svg {
    width: 1em;
    height: 1em;
  }

  .cart-disclosure-tooltip__popover {
    --cart-disclosure-tooltip-popover-max-width: 280px;
    --cart-disclosure-tooltip-popover-spacing: 8px;
    --cart-disclosure-tooltip-popover-offset-block: -4px;
    --cart-disclosure-tooltip-popover-viewport-margin: 16px;
    --cart-disclosure-tooltip-symbol-inset-inline: var(--padding-md);
    --cart-disclosure-tooltip-popover-native-fallback-top: calc(
      anchor(bottom) + var(--cart-disclosure-tooltip-popover-spacing) +
        var(--cart-disclosure-tooltip-popover-offset-block)
    );
    --cart-disclosure-tooltip-popover-fixed-fallback-top: calc(
      (var(--anchor-top) + var(--anchor-height)) * 1px + var(--cart-disclosure-tooltip-popover-spacing) +
        var(--cart-disclosure-tooltip-popover-offset-block)
    );

    inset: unset;
    top: var(--cart-disclosure-tooltip-popover-top, var(--cart-disclosure-tooltip-popover-native-fallback-top));
    left: max(
      var(--cart-disclosure-tooltip-popover-viewport-margin),
      min(
        calc(anchor(left) - var(--cart-disclosure-tooltip-symbol-inset-inline)),
        calc(
          100vw - var(--cart-disclosure-tooltip-popover-max-width) -
            var(--cart-disclosure-tooltip-popover-viewport-margin)
        )
      )
    );
    min-inline-size: 240px;
    max-inline-size: var(--cart-disclosure-tooltip-popover-max-width);
    padding: 0;
    margin: 0;
    color: var(--color-foreground);
    background: var(--color-background);
    border: var(--style-border-popover);
    border-radius: var(--style-border-radius-popover, 0);
    box-shadow: var(--shadow-popover);
    opacity: 0;
    transition-property: display, opacity, translate;
    transition-duration: 0.3s;
    transition-timing-function: var(--ease-out-quad);
    transition-behavior: allow-discrete;
    translate: 0 20px;
    overflow: hidden;
  }

  @supports not (position-anchor: --cart-disclosure-trigger) {
    .cart-disclosure-tooltip__popover {
      position: fixed;
      top: var(--cart-disclosure-tooltip-popover-fixed-fallback-top);
      left: max(
        var(--cart-disclosure-tooltip-popover-viewport-margin),
        min(
          calc((var(--anchor-left) * 1px) - var(--cart-disclosure-tooltip-symbol-inset-inline)),
          calc(
            100vw - var(--cart-disclosure-tooltip-popover-max-width) -
              var(--cart-disclosure-tooltip-popover-viewport-margin)
          )
        )
      );
    }
  }

  .cart-disclosure-tooltip__popover:popover-open {
    opacity: 1;
    translate: 0 0;
  }

  .cart-disclosure-tooltip__list {
    display: flex;
    flex-direction: column;
  }

  .cart-disclosure-tooltip__row {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-sm);
    padding-block: var(--padding-xs);
    padding-inline: var(--cart-disclosure-tooltip-symbol-inset-inline, var(--padding-md)) var(--padding-md);
    font-size: var(--font-size--sm);
    color: var(--color-foreground);
    background: var(--color-background);
    overflow-wrap: break-word;
  }

  .cart-disclosure-tooltip__row:has(> .cart-disclosure-tooltip__symbol) {
    --cart-disclosure-tooltip-symbol-height: 1em;
    --cart-disclosure-tooltip-symbol-slot-width: calc(
      var(--cart-disclosure-tooltip-symbol-height) * var(--cart-disclosure-symbol-aspect-ratio, 1)
    );

    display: grid;
    grid-template-columns: var(--cart-disclosure-tooltip-symbol-slot-width) minmax(0, 1fr);
    min-inline-size: 0;
  }

  .cart-disclosure-tooltip__symbol {
    justify-self: center;
    width: auto;
    max-inline-size: 100%;
    height: var(--cart-disclosure-tooltip-symbol-height, 1em);
    margin: 0;
    object-fit: contain;
    translate: 0 1px;
  }

  .cart-disclosure-tooltip__title {
    min-width: 0;
    margin: 0;
    line-height: var(--line-height--body-tight);
  }

  .cart-disclosure-tooltip__dialog {
    display: contents;
  }

  .cart-disclosure-modal {
    --cart-disclosure-modal-width: 28rem;
    --cart-disclosure-modal-max-height: 72dvh;
    --cart-disclosure-modal-border-radius: min(var(--style-border-radius-popover), 8px);

    position: fixed;
    top: 50%;
    left: 50%;
    width: min(var(--cart-disclosure-modal-width), calc(100vw - (var(--padding-2xl) * 2)));
    max-height: min(var(--cart-disclosure-modal-max-height), calc(100dvh - (var(--padding-2xl) * 2)));
    padding: 0;
    margin: 0;
    color: var(--color-foreground);
    background: var(--color-background);
    border: var(--style-border-popover);
    border-radius: var(--cart-disclosure-modal-border-radius);
    box-shadow: var(--shadow-popover);
    overflow: hidden;
    isolation: isolate;
    translate: -50% -50%;
  }

  .cart-disclosure-modal.dialog-modal[open] {
    animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .cart-disclosure-modal.dialog-modal.dialog-closing {
    animation: modalSlideOutTop var(--animation-speed) var(--animation-easing);
  }

  .cart-disclosure-modal::backdrop {
    backdrop-filter: brightness(0.65) blur(2px);
    background: rgb(var(--color-foreground-rgb) / var(--opacity-60));
  }

  .cart-disclosure-modal__content {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    max-height: inherit;
    padding: var(--padding-2xl);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .cart-disclosure-modal .cart-disclosure-modal__heading {
    margin: 0;
    padding-inline-end: var(--minimum-touch-target);
    font-size: var(--font-size--2xl);
    font-weight: 700;
    line-height: 1.15;
    overflow-wrap: break-word;
  }

  .cart-disclosure-modal__list {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
  }

  .cart-disclosure-modal__item {
    --cart-disclosure-modal-symbol-height: 1.5em;
    --cart-disclosure-modal-symbol-slot-width: calc(
      var(--cart-disclosure-modal-symbol-height) * var(--cart-disclosure-symbol-aspect-ratio, 1)
    );
    --cart-disclosure-modal-heading-offset: calc((var(--cart-disclosure-modal-symbol-height) - 1em) / 2);

    display: grid;
    grid-template-columns: var(--cart-disclosure-modal-symbol-slot-width) minmax(0, 1fr);
    align-items: flex-start;
    column-gap: var(--gap-xs);
    row-gap: var(--gap-xs);
    min-width: 0;
    font-size: var(--font-size--md);
    overflow-wrap: break-word;
  }

  .cart-disclosure-modal__item:not(:has(> .cart-disclosure-modal__symbol)) {
    grid-template-columns: minmax(0, 1fr);
  }

  .cart-disclosure-modal__symbol {
    justify-self: center;
    width: auto;
    max-inline-size: 100%;
    height: var(--cart-disclosure-modal-symbol-height);
    margin: 0;
    object-fit: contain;
  }

  .cart-disclosure-modal__item-content {
    display: contents;
  }

  .cart-disclosure-modal__item-heading {
    margin: 0;
    font-size: inherit;
    font-weight: 700;
    line-height: 1;
    overflow-wrap: break-word;
  }

  .cart-disclosure-modal__item:has(> .cart-disclosure-modal__symbol) .cart-disclosure-modal__item-heading {
    grid-column: 2;
    padding-block-start: var(--cart-disclosure-modal-heading-offset);
  }

  .cart-disclosure-modal__body {
    grid-column: 1 / -1;
    margin: 0;
    font-size: var(--font-size--sm);
    line-height: 1.35;
    overflow-wrap: break-word;
  }

  .cart-disclosure-modal__body > * {
    margin-block: 0;
  }

  .cart-disclosure-modal__close {
    position: absolute;
    inset-block-start: var(--padding-sm);
    inset-inline-end: var(--padding-sm);
    z-index: var(--layer-raised);
    overflow: visible;
  }

  @media screen and (min-width: 750px) {
    .cart-disclosure-modal__content {
      padding-block: var(--padding-2xl);
      padding-inline: var(--padding-2xl);
    }
  }

  @media screen and (max-width: 749px) {
    .cart-disclosure-modal {
      position: fixed;
      top: auto;
      left: 0;
      inset-block-start: auto;
      inset-block-end: 0;
      inset-inline: 0;
      width: 100%;
      height: fit-content;
      max-width: 100%;
      max-height: 100dvh;
      margin: auto 0 0;
      border-start-start-radius: var(--cart-disclosure-modal-border-radius);
      border-start-end-radius: var(--cart-disclosure-modal-border-radius);
      border-end-start-radius: 0;
      border-end-end-radius: 0;
      overflow: clip;
      translate: 0 0;
    }

    .cart-disclosure-modal__content {
      max-height: min(var(--modal-max-height), 100dvh);
    }
  }
/* END_SNIPPET:cart-disclosure-tooltip */

/* START_SNIPPET:cart-drawer-squeeze-override (INDEX:158) */
.page-wrapper--drawer-open {
    margin-right: 0 !important;
    margin-inline-end: 0 !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
  }
/* END_SNIPPET:cart-drawer-squeeze-override */

/* START_SNIPPET:cart-drawer (INDEX:159) */
cart-drawer-component {
    --cart-drawer-padding: var(--theme-drawer-padding);
    --font-paragraph--line-height: 1;
    display: contents;
  }

  .cart-drawer__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
  }

  .cart-drawer__inner > .cart-items-component {
    flex: 1;
    min-height: 0;
    height: auto;
  }

  .cart-drawer__content {
    height: calc(100% - var(--header-height));
    display: flex;
    flex-direction: column;
    padding: 0;
    background-color: var(--color-background);
    flex-grow: 1;
    overflow-y: auto;
  }

  .cart-drawer__items {
    display: flex;
    flex-direction: column;
    padding-inline: var(--cart-drawer-padding);
    overflow-y: auto;
  }

  .cart-drawer__items .cart-items__table-row {
    padding-bottom: var(--gap-xl);
    border-bottom: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    margin-bottom: var(--gap-xl);
  }

  .cart-drawer__items .cart-items__table-row:has(+ .cart-items__nested-line) {
    border-bottom: none;
    margin-bottom: 0;
  }

  .cart-drawer__items .cart-items__table-row:last-child {
    border-bottom: none;
    padding-block-end: 0;
    margin-block-end: 0;
  }

  .cart-drawer__close-button--empty {
    margin-inline-start: auto;
  }

  .cart-drawer__summary {
    --cart-drawer-summary-padding: var(--padding-lg);

    position: sticky;
    bottom: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-xl);
    padding: var(--cart-drawer-summary-padding);
    margin-top: auto;
    background-color: var(--color-background);
    /* stylelint-disable-next-line color-named */
    mask-image: linear-gradient(to bottom, transparent, black var(--cart-drawer-summary-padding));

    @media screen and (min-width: 750px) {
      --cart-drawer-summary-padding: var(--padding-2xl);
    }
  }

  .theme-drawer__dialog[cart-summary-sticky='false'] .cart-drawer__summary {
    position: static;
    mask-image: none;
  }

  .theme-drawer__dialog[cart-summary-sticky='false'] .cart-drawer__items {
    overflow: unset;
  }

  .cart-actions summary {
    padding-inline: 0;
    padding-block: var(--padding-sm);
    line-height: 1.2;
    min-height: var(--minimum-touch-target);
  }

  .cart-drawer__summary .cart__summary-totals:not(:has(.cart__subtotal-container:empty)) {
    border-block-start: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    padding-block-start: var(--padding-2xl);
  }

  .cart-drawer__summary .cart-note {
    @media screen and (min-width: 750px) {
      margin-block-start: var(--margin-3xs);
    }
  }

  .cart-drawer--empty .cart-drawer__content {
    text-align: center;
    align-items: center;
    justify-content: center;
    min-height: auto;
  }

  .cart-drawer--empty .cart-drawer__items {
    padding-inline: 0;
  }

  cart-drawer-component:not(:has(.cart-form)) .cart-drawer__content {
    text-align: center;
    align-items: center;
    justify-content: center;
  }

  cart-drawer-component:not(:has(.cart-form)) .cart-drawer__items {
    padding-inline: 0;
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    html:active-view-transition-type(empty-cart-drawer) {
      .theme-drawer__close-button {
        view-transition-name: cart-drawer-close-button;
      }
    }
  }

  :active-view-transition {
    .cart-drawer__header,
    .cart-drawer__content {
      background: transparent;
    }
  }

  #cart-drawer .theme-drawer__dialog::backdrop {
    background: rgb(0 0 0 / 0.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: backdrop-filter 0.3s ease, background-color 0.3s ease;
  }
/* END_SNIPPET:cart-drawer */

/* START_SNIPPET:cart-items-component (INDEX:160) */
.cart-items-component {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    html:active-view-transition-type(empty-cart-drawer),
    html:active-view-transition-type(fill-cart-drawer) {
      .cart-items-component {
        view-transition-name: cart-drawer-content;
      }
    }

    html:active-view-transition-type(empty-cart-page) {
      .cart-items-component {
        view-transition-name: cart-page-content;
      }
    }
  }

  ::view-transition-old(cart-page-content) {
    animation: cart-page-content-old var(--animation-speed-fast) var(--animation-easing) forwards;
  }

  @keyframes cart-page-content-old {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
      filter: blur(4px);
    }
  }

  ::view-transition-old(cart-drawer-content) {
    transform-origin: 50% 33%;
    animation: cart-contents-old var(--spring-d280-b0-duration) var(--spring-d280-b0-easing) forwards;
  }

  ::view-transition-new(cart-drawer-content) {
    transform-origin: top center;
    animation: cart-contents-new var(--spring-d280-b0-duration) var(--spring-d280-b0-easing) forwards;
  }

  @keyframes cart-contents-old {
    to {
      scale: 0.92;
      opacity: 0;
    }
  }

  @keyframes cart-contents-new {
    from {
      scale: 1.05;
      translate: 0 128px;
      filter: blur(1px);
      opacity: 0;
    }
  }
/* END_SNIPPET:cart-items-component */

/* START_SNIPPET:cart-products (INDEX:161) */
.cart-items {
    --cart-item-media-width-min: 2.5rem;
    --cart-item-media-width-max: 7.5rem;

    container-name: cart-items;
    container-type: inline-size;
    width: 100%;
  }

  .cart-items-disabled {
    pointer-events: none;
  }

  .cart-items__wrapper {
    display: flex;
    flex-direction: column;
  }

  .cart-page--empty .cart-items__wrapper {
    align-items: center;
    margin-block-start: 0;
    text-align: center;
  }

  .cart-items__wrapper--drawer-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .cart-items__table {
    width: 100%;
    border-spacing: 0;
  }

  .cart-items__table * {
    margin: 0;
  }

  .cart-items__table-row {
    --cart-item-price-width: 6rem;

    display: grid;
    grid-template-columns: clamp(2.5rem, 15cqi, 7.5rem) minmax(0, 1fr) minmax(var(--cart-item-price-width), auto);
    grid-template-areas:
      'media details price'
      'media quantity price'
      'media error error';
    column-gap: var(--gap-md);
    align-items: start;
    padding-bottom: var(--cart-items-gap);
    margin-bottom: var(--margin-lg);
  }

  .cart-items__details {
    grid-area: details;
    min-width: 0;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
  }

  .cart-items__product-info {
    min-width: 0;
  }

  /* Cart drawer: separate grid areas for variants and unit price */
  .cart-items__table-row--full-width-variants {
    grid-template-columns: clamp(2.5rem, 15cqi, 7.5rem) minmax(0, 1fr) auto;
    grid-template-rows: repeat(4, min-content) 1fr;
    grid-template-areas:
      'media details price'
      'media variants variants'
      'media unit_price unit_price'
      'media quantity quantity'
      'media error error';

    .cart-items__details {
      display: contents;
    }

    .cart-items__product-info {
      grid-area: details;
    }

    .cart-items__variants-wrapper {
      grid-area: variants;

      &:empty {
        display: none;
      }

      p {
        margin: 0;
      }
    }

    .cart-items__unit-price-wrapper {
      grid-area: unit_price;
      font-size: var(--font-size--sm);
    }

    .cart-items__price {
      min-width: auto;
      width: max-content;
    }
  }

  .cart-items__table-row.cart-items__nested-line td:first-child {
    width: 60%;
    justify-self: right;
  }

  html:active-view-transition-type(page-navigation) .cart-items__table-row {
    /* stylelint-disable-next-line declaration-no-important */
    view-transition-name: none !important;
  }

  .cart-items__table-row.removing {
    overflow: hidden;
    animation: removeRow calc(var(--animation-speed) * 2) var(--animation-easing) forwards;
    animation-delay: var(--animation-speed);
  }

  @keyframes removeRow {
    0% {
      height: var(--row-height);
    }

    100% {
      opacity: 0;
      height: 0;
      padding-bottom: 0;
      margin-bottom: 0;
      border-color: transparent;
    }
  }

  .cart-items__table-row.adding {
    interpolate-size: allow-keywords;
    overflow: hidden;
    animation: addRow calc(var(--animation-speed) * 2) var(--animation-easing) forwards;
  }

  @keyframes addRow {
    0% {
      opacity: 0;
      height: 0;
      padding-bottom: 0;
      margin-bottom: 0;
      border-color: transparent;
    }

    100% {
      opacity: 1;
      height: auto;
    }
  }

  .cart-items__table-row:last-child {
    padding-bottom: 0;
  }

  .cart-items--dividers .cart-items__table-row {
    border-bottom: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    margin-bottom: var(--cart-items-gap);
  }

  .cart-items--dividers .cart-items__table-row:has(+ .cart-items__nested-line) {
    border-bottom: none;
    margin-bottom: 0;
  }

  .cart-items--dividers .cart-items__table-row:last-of-type {
    border-block-end: none;
    padding-block-end: 0;
    margin-bottom: 0;
  }

  .cart-items__details > * + *,
  .cart-items__bundle li {
    margin-block-start: var(--margin-3xs);
  }

  .cart-items__details * {
    font-size: var(--font-size--sm);
  }

  .cart-items__details a {
    text-decoration: none;
  }

  .cart-items__title-row {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
    max-width: 100%;
    min-width: 0;
  }

  .cart-items__title {
    font-size: var(--font-size--md);
    color: var(--color-foreground);
    text-transform: var(--product-title-case);
    display: block;
    margin-block-start: 0;
    min-width: 0;
    overflow-wrap: break-word;
  }

  .cart-items__variants {
    display: block;
  }

  .cart-items__variant {
    display: inline;
  }

  .cart-items__variant dt,
  .cart-items__variant dd {
    display: inline;
    margin: 0;
  }

  .cart-items__quantity {
    grid-area: quantity;
    margin-block-start: var(--margin-xs);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap-xs);
    width: fit-content;
  }

  .cart-items__quantity-controls {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap-xs);
    width: fit-content;
  }

  .cart-items__quantity-controls > .volume-pricing-info {
    margin-inline-start: calc(-1 * var(--minimum-touch-target) - var(--gap-xs));
  }

  .cart-items__quantity .quantity-selector {
    display: inline-flex;
    font-size: var(--font-size--sm);
    height: auto;
  }

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

  .cart-items__media {
    grid-area: media;
    padding: 0;
  }

  .cart-items__price {
    grid-area: price;
    min-height: unset;
    min-width: var(--cart-item-price-width);
    text-align: end;
    display: block;
    font-size: var(--font-size--sm);
    line-height: var(--line-height);
  }

  .cart-items__price-unit {
    font-size: var(--font-size--xs);
    padding-block-start: var(--padding-2xs);
  }

  .cart-items__media-container {
    display: flex;
    aspect-ratio: var(--ratio);
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  .cart-items__media-image {
    aspect-ratio: inherit;
    object-fit: cover;
    object-position: center center;
    width: 100%;
    height: auto;
  }

  .cart-items__empty-button {
    margin-top: var(--margin-md);
    margin-inline: auto;
    padding-inline: var(--padding-4xl);
    padding-block: var(--padding-lg);
  }

  /* Error message */
  .cart-items__error {
    display: flex;
    align-items: flex-start;
    width: 100%;
    grid-area: error;
    margin-block-start: var(--margin-xs);
    opacity: 1;
    overflow: hidden;
    transform: translateY(0);
    transition: opacity var(--drawer-animation-speed) var(--animation-easing),
      transform var(--drawer-animation-speed) var(--animation-easing);

    @starting-style {
      opacity: 0;
      transform: translateY(-0.5rem);
    }
  }

  .cart-item__error {
    display: flex;
    align-items: flex-start;
    width: 100%;
    font-size: var(--font-size--sm);
    padding-block: var(--padding-2xs);
  }

  .cart-item__error .svg-wrapper {
    flex-shrink: 0;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    margin-inline: var(--margin-3xs) var(--margin-xs);
    margin-block-start: var(--margin-3xs);
  }

  @container cart-items (min-width: 720px) {
    /* Cart page: original layout */
    .cart-items__table-row {
      --cart-item-price-width: 6rem;

      grid-template-columns: 7.5rem 1fr 1fr minmax(var(--cart-item-price-width), auto);
      grid-template-rows: min-content 1fr;
      grid-template-areas:
        'media details quantity price'
        'media details error error';
    }

    .cart-items__quantity,
    .cart-items__price {
      grid-area: initial;
    }

    .cart-items__quantity {
      margin-top: 0;
    }

    .cart-items__price {
      min-height: var(--minimum-touch-target);
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }

    /* Cart drawer: separate areas for variants and unit price */
    .cart-items__table-row--full-width-variants {
      grid-template-rows: min-content min-content min-content 1fr;
      grid-template-areas:
        'media details quantity price'
        'media variants variants variants'
        'media unit_price unit_price unit_price'
        'media error error error';

      .cart-items__quantity,
      .cart-items__price {
        grid-area: initial;
      }
    }
  }

  .cart__subtotal-container,
  .cart__total-container {
    display: flex;
    flex-direction: column;
  }

  .cart__total-container {
    row-gap: var(--gap-2xs);

    &.cart__total-container--has-installments {
      row-gap: var(--gap-xs);
    }
  }

  .cart__subtotal-container:empty {
    display: none;
  }

  .cart__summary-totals {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    width: 100%;
    border-block-start: none;

    &:has(> :first-child:not(.cart__subtotal-container, .cart__total-container)) {
      padding-block-start: 0;
      border-block-start: none;
    }

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

  .cart__subtotal-container,
  .cart__subtotal-container * {
    font-size: var(--font-size--sm);
  }

  .cart__total {
    font-weight: var(--font-weight-bold);
  }

  .cart__total-label {
    font-size: var(--font-size--sm);
  }

  .cart__total-value {
    font-size: var(--font-size--xl);

    @media screen and (max-width: 749px) {
      font-size: var(--font-size--lg);
    }
  }

  .cart-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:162) */
.cart-actions {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-block: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    padding-block: 0;
    margin-block-start: var(--margin-3xs);
  }

  .cart-actions__divider {
    border-block-start: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
  }

  .cart-totals:not(:has(.cart-actions)) {
    margin-block-start: var(--margin-3xs);
    border-block-start: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    padding-block-start: var(--margin-xl);
  }

  .cart-totals__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-totals__tax-note {
    color: var(--color-foreground-subdued);
  }

  .cart-totals__tax-note a {
    color: var(--color-foreground-subdued);
    text-decoration-line: underline;
    text-decoration-color: currentColor;

    &:hover {
      text-decoration-color: transparent;
    }
  }

  .cart-totals__tax-note small {
    font-size: var(--font-size--2xs);
  }

  .cart-discounts {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .cart-discounts__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-discounts__label {
    display: flex;
    align-items: center;
    gap: var(--gap-2xs);
  }

  .cart-discounts__label svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    display: inline-block;
  }

  .cart-totals__original-container,
  .cart-totals__container {
    display: flex;
    flex-direction: column;
  }

  .cart-totals__container {
    row-gap: var(--gap-2xs);

    &.cart-totals__container--has-installments {
      row-gap: var(--gap-xs);
    }
  }

  .cart-totals__original-container:empty {
    display: none;
  }

  .cart-totals {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    width: 100%;
    border-block-start: none;

    &:has(> :first-child:not(.cart-totals__original-container, .cart-totals__container)) {
      padding-block-start: 0;
      border-block-start: none;
    }

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

  .cart-totals__original-container,
  .cart-totals__original-container * {
    font-size: var(--cart-font-size--sm);
  }

  .cart-totals__total {
    align-items: baseline;
    font-weight: var(--font-weight-bold);
  }

  .cart-totals__total-label {
    font-size: var(--cart-font-size--sm);
  }

  .cart-totals__total-value {
    font-size: var(--cart-font-size--xl);

    @media screen and (max-width: 749px) {
      font-size: var(--font-size--lg);
    }
  }

  .cart-totals__installments {
    color: var(--color-foreground);
    font-size: var(--font-size--2xs);
  }

  .cart-note {
    width: 100%;
  }

  @starting-style {
    .cart-note[open-by-default-on-desktop][open-by-default-on-mobile] .details-content {
      block-size: auto;
      opacity: 1;
      overflow-y: visible;
    }
  }

  .cart-note__inner {
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

  .cart-note__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-note__summary:hover {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .cart-note__label {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-2xs);
    font-size: var(--font-size--2xs);
    font-weight: 500;
  }

  .cart-note__instructions {
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    border-width: var(--style-border-width-inputs);
    border-color: var(--color-input-border);
    transition: box-shadow var(--animation-speed) ease;
    box-shadow: var(--input-box-shadow);
    min-height: 5.5rem;
    min-width: 100%;
    max-width: 100%;
    font-size: var(--font-size--sm);
    padding: max(4px, calc(var(--style-border-radius-inputs) * (1 - cos(45deg))));
  }

  .cart-totals__icon {
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
    margin: 0;
  }

  .cart__ctas {
    width: 100%;
    display: grid;
    gap: var(--checkout-button-gap);
    grid-auto-flow: row;
    grid-template-columns: 1fr;
  }

  .cart__ctas .cart__checkout-button {
    width: 100%;
    height: clamp(25px, var(--height-buy-buttons), 55px);
    padding-inline: var(--padding-4xl);
  }

  .cart-drawer__summary .cart-totals:not(:has(.cart-totals__original-container:empty)) {
    border-block-start: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    padding-block-start: var(--padding-2xl);
  }

  .cart-drawer__summary .cart-note {
    @media screen and (min-width: 750px) {
      margin-block-start: var(--margin-3xs);
    }
  }

  .cart-discount__input {
    background-color: var(--color-input-background);
    color: var(--color-input-text);
    border-width: var(--style-border-width-inputs);
    border-color: var(--color-input-border);
    border-style: solid;
    border-radius: var(--style-border-radius-inputs);
    padding: var(--padding-sm) var(--padding-md);
    height: 100%;
    flex-grow: 1;
    min-width: 0;
    font-size: var(--font-size--sm);
  }

  .cart-discount__input::placeholder {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-subdued-text));
  }

  .cart-discount__pill-code {
    overflow: hidden;
    max-width: 100px;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
  }

  .cart-discount {
    width: 100%;
  }

  .cart-discount__codes {
    display: none;
    gap: var(--padding-xs);
    flex-wrap: wrap;
    list-style: none;
    padding-inline: 0;
    margin: 0;
  }

  .cart-discount__codes:has(.cart-discount__pill) {
    display: flex;
  }

  .cart-discount__button {
    height: 100%;
  }

  .cart-discount__content {
    height: calc(var(--button-size) + var(--padding-2xs) + var(--padding-sm));
  }

  .cart-discount__pill {
    display: flex;
    color: var(--color-foreground);
    gap: var(--padding-xs);
    align-items: center;
    padding: var(--padding-xs) var(--padding-sm);
    border-radius: var(--style-border-radius-pills);
    background-color: var(--color-input-background);
    text-transform: uppercase;
  }

  .cart-discount__form {
    display: flex;
    gap: var(--padding-md);
    align-items: center;
    height: 100%;
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

  :is(.cart-discount__pill-remove, .cart-discount__pill-remove:hover) {
    --close-icon-opacity: 0.4;

    color: var(--color-foreground);
    background-color: transparent;
    pointer-events: all;
    cursor: pointer;
    height: 100%;
  }

  .cart-discount__error {
    display: flex;
    align-items: center;
    width: 100%;
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

  .cart-discount__error .svg-wrapper {
    flex-shrink: 0;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    margin-inline: var(--margin-3xs) var(--margin-xs);
  }

  .cart-discount__error-text {
    margin-block-start: var(--margin-3xs);
  }

  .cart-discount__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-discount__summary:hover {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .cart-discount__label {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-2xs);
    font-size: var(--font-size--2xs);
    font-weight: 500;
  }

  @media screen and (min-width: 750px) {
    .cart-summary--extend {
      height: 100%;
    }
  }
/* END_SNIPPET:cart-summary */

/* START_SNIPPET:chat-drawer (INDEX:163) */
/* Pin the chat's mobile/desktop boundary so the theme and the chat agree
     on where standalone mode kicks in. Must stay in sync with the @media
     query below — @shopify/storefront-components reads this value once at
     init and uses it to decide when to force standalone mode. */
  shopify-chat {
    --shopify-chat-breakpoint: 768px;
  }

  shopify-chat[mode='managed'] {
    position: static;
    height: 100%;
  }

  .theme-drawer__dialog:has(shopify-chat[mode='standalone'][open]) {
    z-index: calc(var(--layer-menu-drawer) + 1);
  }

  /* Keep the panel rendered while closed so <shopify-chat>'s position-fixed
     "Ask anything" launcher stays visible. */
  .theme-drawer__dialog.chat-drawer:has(shopify-chat:defined) {
    display: flex;
  }
/* END_SNIPPET:chat-drawer */

/* START_SNIPPET:collection-card (INDEX:165) */
.collection-card {
    --fixed-card-height: var(--height-small);

    width: 100%;
    position: relative;
    height: 100%;
    flex: 1 1 var(--card-width-small);
  }

  .collection-card > svg {
    height: 100%;
    width: 100%;
    aspect-ratio: var(--ratio);
  }

  .collection-card--image-bg .collection-card__inner {
    height: 100%;
  }

  .collection-card__link {
    position: absolute;
    inset: 0;

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

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

    a,
    button {
      pointer-events: auto;
    }
  }

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

  .collection-card__content {
    --flex-wrap: wrap;

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

  /* Nested image block rules */

  .collection-card.collection-card--image-bg {
    aspect-ratio: var(--ratio);
  }

  .collection-card.collection-card--image-bg .collection-card__content {
    padding: var(--padding-lg);
  }

  .collection-card--image-height-fixed {
    height: 100%;
  }

  /* Bento layout rules */
  .collection-card--image-height-fixed .collection-card__image {
    height: var(--fixed-card-height);
    width: 100%;
  }

  .collection-card--image-height-fixed.collection-card--image-bg {
    height: var(--fixed-card-height);
    aspect-ratio: unset;
  }

  .collection-card__image .resource-image__image {
    object-fit: cover;
    width: 100%;
    height: 100%;
    max-width: 100%;
  }

  .collection-card--image-bg .collection-card__image {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .collection-card__image svg {
    height: 100%;
    width: 100%;
  }

  /* Editorial layout */
  .resource-list:not(.hidden--desktop) .collection-card--flexible-aspect-ratio {
    .collection-card__image {
      aspect-ratio: 99;
      height: 100%;
    }

    .collection-card__inner {
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .collection-card__content {
      flex-shrink: 0;
    }

    &:not(.collection-card--image-bg) .collection-card__content {
      height: auto;
    }

    &.collection-card.collection-card--image-bg,
    &.collection-card .placeholder-svg {
      aspect-ratio: 99;
    }
  }
/* END_SNIPPET:collection-card */

/* START_SNIPPET:custom-pdp-styles (INDEX:169) */
/* ===== TALLA: cuadrado, solo borde inferior ===== */
  .variant-option__button-label:not(.variant-option__button-label--has-swatch) {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 14px;
    border-radius: 0;
    border: none;
    border-bottom: 2px solid rgb(var(--color-border-rgb) / 0.4);
    background-color: transparent;
    color: var(--color-foreground);
    font-weight: 500;
    cursor: pointer;
    transition:
      border-color 0.25s cubic-bezier(0.22, 1, 0.36, 1),
      border-width 0.25s cubic-bezier(0.22, 1, 0.36, 1),
      color 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .variant-option__button-label:not(.variant-option__button-label--has-swatch):hover {
    border-bottom-color: var(--color-foreground);
  }

  .variant-option__button-label:not(.variant-option__button-label--has-swatch):has(input:checked) {
    border-bottom: 3px solid var(--color-foreground);
    font-weight: 700;
  }

  .variant-option__button-label__pill {
    display: none;
  }

  /* ===== COLOR: swatch con foto real ===== */
  .variant-option__button-label--has-swatch {
    position: relative;
    border-radius: 0;
    overflow: hidden;
    cursor: pointer;
    transition:
      box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .variant-option__button-label--has-swatch:hover {
    transform: scale(1.04);
  }

  .variant-option__button-label--has-swatch:has(input:checked) {
    box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-foreground);
  }

  /* ===== BOTONES AGREGAR AL CARRITO / COMPRAR AHORA ===== */
  .product-form-buttons button,
  .add-to-cart-button {
    border-radius: 0;
    font-weight: 600;
    transition:
      opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .product-form-buttons button:hover {
    opacity: 0.85;
  }

  /* ===== ICONOS DE PAGO BAJO "COMPRAR AHORA" ===== */
  .payment-icons-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
  }

  .payment-icons-row img {
    height: 24px;
    width: auto;
    opacity: 0.85;
    transition: opacity 0.2s ease;
  }

  .payment-icons-row img:hover {
    opacity: 1;
  }

  /* ===== SELECTOR DE CANTIDAD (por si lo vuelves a mostrar) ===== */
  .quantity-selector {
    display: flex;
    align-items: center;
    border: 1px solid var(--color-foreground);
    border-radius: 0;
    overflow: hidden;
    height: var(--height-buy-buttons, 48px);
    background-color: var(--color-background);
  }

  .quantity-selector .quantity-minus,
  .quantity-selector .quantity-plus {
    background-color: var(--color-background);
    color: var(--color-foreground);
    border: none;
    width: 40px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.25s cubic-bezier(0.22, 1, 0.36, 1), color 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .quantity-selector .quantity-minus:hover,
  .quantity-selector .quantity-plus:hover {
    background-color: var(--color-foreground);
    color: var(--color-background);
  }

  .quantity-selector input[type='number'] {
    border: none;
    width: 40px;
    text-align: center;
    font-weight: 600;
    background: transparent;
    color: var(--color-foreground);
  }

  /* ===== FIX: evitar que el grid "equal-width" estire los botones de talla ===== */
  .variant-option--equal-width-buttons {
    display: flex !important;
    flex-wrap: wrap;
    gap: var(--gap-sm, 8px);
  }

  .variant-option--equal-width-buttons .variant-option__button-label {
    min-width: 44px !important;
    width: auto !important;
    flex: 0 0 auto !important;
  }

  /* Compacto extra en móvil (tabla de tallas) */
  @media screen and (max-width: 749px) {
    .variant-option__button-label:not(.variant-option__button-label--has-swatch) {
      min-width: 40px;
      height: 40px;
      padding: 0 12px;
      font-size: 0.85em;
    }
  }

  /* ===== Círculos de color más pequeños en móvil ===== */
  @media screen and (max-width: 749px) {
    product-swatches .swatch {
      --max-swatch-size: 18px;
      --min-width: 14px;
      --min-height: 14px;
    }
  }
/* END_SNIPPET:custom-pdp-styles */

/* START_SNIPPET:divider (INDEX:170) */
.divider {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: var(--divider-justify-content);
  }

  .divider__line {
    border-bottom: var(--divider-border-thickness) solid var(--color-border);
    border-right: var(--divider-border-thickness) solid var(--color-border);
    border-radius: calc(var(--style-border-radius-sm) * var(--divider-border-rounded));
    flex-basis: var(--divider-flex-basis);
    min-height: var(--divider-flex-basis);
  }
/* END_SNIPPET:divider */

/* START_SNIPPET:editorial-blog-grid (INDEX:171) */
.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:172) */
.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:173) */
.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:174) */
/* 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:179) */
.recipient-form {
    --options-border-radius: var(--variant-picker-button-radius);
    --options-border-width: var(--variant-picker-button-border-width);

    display: flex;
    flex-direction: column;
    color: var(--color, var(--color-foreground));
    padding-bottom: var(--padding-2xl);
  }

  .recipient-form__send-to {
    padding: 0;
    margin-block-end: var(--margin-xs);
  }

  .gift-card-form-option {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-sm);
    padding: 0;
    border: none;
  }

  .gift-card-form-option__button-label {
    display: flex;
    align-items: center;
    position: relative;
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-lg);
    border: var(--style-border-width) solid var(--color-variant-border);
    border-radius: var(--options-border-radius);
    border-width: var(--options-border-width);
    overflow: clip;
    justify-content: center;
    min-width: auto;
    background-color: var(--color-variant-background);
    color: var(--color-variant-text);
    transition: background-color var(--animation-speed) var(--animation-easing),
      border-color var(--animation-speed) var(--animation-easing);

    &:hover {
      background-color: var(--color-variant-hover-background);
      border-color: var(--color-variant-hover-border);
      color: var(--color-variant-hover-text);
    }
  }

  .gift-card-form-option__button-label:has(:focus-visible) {
    --variant-picker-stroke-color: var(--color-foreground);

    border-color: var(--color-foreground);
    outline: var(--focus-outline-width) solid var(--color-foreground);
    outline-offset: var(--focus-outline-offset);
  }

  .gift-card-form-option__button-label:has(:checked) {
    color: var(--color-selected-variant-text);
    background-color: var(--color-selected-variant-background);
    border-color: var(--color-selected-variant-border);
    transition: background-color var(--animation-speed) var(--animation-easing),
      border-color var(--animation-speed) var(--animation-easing);

    &:hover {
      background-color: var(--color-selected-variant-hover-background);
      border-color: var(--color-selected-variant-hover-border);
      color: var(--color-selected-variant-hover-text);
    }
  }

  .gift-card-form-option__button-label input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
  }

  .recipient-fields {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    transition: opacity 0.3s var(--animation-easing);
    padding-block-start: var(--padding-xl);
  }

  .recipient-fields[hidden] {
    display: none;
  }

  .field--send-on {
    display: flex;
    flex-direction: column;
  }

  .recipient-form__message {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--gap-sm);
    margin-top: var(--margin-sm);
  }

  .recipient-form-field-label {
    position: absolute;
    left: var(--padding-sm);
    bottom: var(--padding-sm);
    font-style: italic;
    color: var(--color-input-text);
  }

  .recipient-fields__textarea {
    min-height: 5.5rem;
    overflow-y: auto;

    /* Space for the character count */
    padding-bottom: calc(var(--padding-sm) * 3);
    scroll-padding-bottom: calc(var(--padding-sm) * 3);
  }

  .recipient-fields__input {
    flex-grow: 1;
    padding: var(--input-padding);
    background-color: var(--color-input-background);
    color: var(--color-input-text);
    text-align: left;
    font-size: var(--font-paragraph--size);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    border-radius: var(--style-border-radius-inputs);

    &:autofill {
      background-color: var(--color-input-background);
      color: var(--color-input-text);
    }

    &:is(:focus) {
      outline-color: var(--color-input-background);
    }
  }

  /* Date picker calendar icon
   * Safari doesn't show the icon and Firefox correctly applies the color from the input field.
   * Webkit browsers need the mask-image trick to use the correct icon color.
   */
  .field--send-on .recipient-fields__input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24' %3E%3Cg%3E%3Cpath d='M9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-image: none;
    background-color: currentColor;
    mask-type: match-source;
  }

  /* For Webkit browsers - text cursor for input area */
  .field--send-on .recipient-fields__input::-webkit-datetime-edit {
    cursor: text;
  }

  .field--send-on .recipient-fields__input::-webkit-datetime-edit-year-field,
  .field--send-on .recipient-fields__input::-webkit-datetime-edit-month-field,
  .field--send-on .recipient-fields__input::-webkit-datetime-edit-day-field {
    /* Override the disabled color */
    color: var(--color-input-text);
  }

  /* Fallback for other browsers */
  .field--send-on .recipient-fields__input {
    cursor: text;
  }

  /* For Firefox - entire field is clickable, so show pointer */
  @supports (-moz-appearance: none) {
    .field--send-on .recipient-fields__input {
      cursor: pointer;
    }
  }
/* END_SNIPPET:gift-card-recipient-form-styles */

/* START_SNIPPET:grid-density-controls (INDEX:181) */
.column-options-wrapper {
    --icon-offset: -3px;

    display: flex;
    gap: var(--gap-sm);
    min-width: fit-content;
    justify-content: flex-end;
    height: var(--minimum-touch-target);
    align-items: center;
    margin-right: var(--icon-offset);
  }

  .column-options-wrapper:only-child {
    margin-left: auto;
  }

  .facets__form-wrapper > .column-options-wrapper:first-child {
    margin-left: auto;
  }

  .facets .column-options-wrapper {
    display: none;

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

  .column-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-xs);
    margin: 0;
    padding: 0;
    border: none;

    @media screen and (min-width: 750px) {
      gap: var(--gap-2xs);
    }
  }

  .column-options__option {
    display: none;
    position: relative;
  }

  .column-options__option:has(.column-picker-mobile--single),
  .column-options__option:has(.column-picker-mobile--double) {
    @media screen and (max-width: 749px) {
      display: flex;
    }
  }

  .column-options__option:has(.column-picker--default),
  .column-options__option:has(.column-picker--zoom-out) {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  /* Override base rule for grid density controls - only when visible */
  .column-options-wrapper .column-options__option:has(input[type='radio']):has(.column-picker-mobile--single),
  .column-options-wrapper .column-options__option:has(input[type='radio']):has(.column-picker-mobile--double) {
    @media screen and (max-width: 749px) {
      display: flex;
    }
  }

  .column-options-wrapper .column-options__option:has(input[type='radio']):has(.column-picker--default),
  .column-options-wrapper .column-options__option:has(input[type='radio']):has(.column-picker--zoom-out) {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .column-options__legend {
    padding: 0;
    margin: 0;
  }

  .column-options__option-input {
    /* this is a repeating pattern a bit with the variant picker buttons */

    /* remove the checkbox from the page flow */
    position: absolute;

    /* set the dimensions to match those of the label */
    inset: 0;

    /* hide it */
    opacity: 0;
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    cursor: pointer;
  }

  .column-picker {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-50));
    padding: var(--padding-2xs);
    border-radius: var(--style-border-radius-xs);
    transition: background-color var(--animation-speed) ease, color var(--animation-speed) ease;
  }

  .column-options__option:hover .column-picker {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .column-options__option-input:checked ~ .column-picker {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)));
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }
/* END_SNIPPET:grid-density-controls */

/* START_SNIPPET:group (INDEX:182) */
.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:183) */
.header {
    --account-offset-top: calc(
      var(--header-group-height) + (var(--header-height) * var(--transparent-header-offset-boolean))
    );

    &[data-sticky-state='active'] {
      --account-offset-top: calc(var(--header-height) - 1px);
    }
  }

  .account-button {
    /* Remove the background color from the color scheme, we want to inherit the color of the header */
    background: transparent;
  }

  .account-button__icon,
  .account-button__text {
    color: var(--color-account-icon);
    transition: color var(--header-content-transition-timing);
    -webkit-font-smoothing: antialiased;
  }

  shopify-account {
    --shopify-account-font-heading: var(--font-heading--family);
    --shopify-account-font-heading-weight: var(--font-heading--weight);
    --shopify-account-font-body: var(--font-body--family);
    --shopify-account-font-body-weight: var(--font-body--weight);
    --shopify-account-radius-base: var(--style-border-radius-popover);
    --shopify-account-radius-button: var(--style-border-radius-buttons-primary);
    --shopify-account-radius-button-small: var(--style-border-radius-buttons-primary);
    --shopify-account-radius-input: var(--style-border-radius-buttons-primary);
    --shopify-account-color-background: var(--color-background);
    --shopify-account-color-text: var(--color-foreground);
    --shopify-account-color-accent: var(--color-primary-button-background);
    --shopify-account-color-accent-text: var(--color-primary-button-text);
    --shopify-account-dialog-position-top: var(--account-offset-top);

    &:not(:defined) {
      min-width: 44px;
      height: 44px;
      display: flex;
      justify-content: center;
      align-items: center;
      /* Match the line height of the other buttons */
      line-height: normal;
    }
  }

  .account-button__fallback {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--shopify-account-color-accent, #0a142f);
  }

  .account-button--text shopify-account {
    color: inherit;
  }

  .cart-actions summary {
    padding-inline: 0;
    padding-block: var(--padding-sm);
    line-height: 1.2;
    min-height: var(--minimum-touch-target);
  }

  header-actions {
    display: flex;

    @media screen and (max-width: 749px) {
      justify-self: flex-end;
    }
  }

  @media screen and (min-width: 750px) {
    .header-actions--text {
      gap: var(--gap-xl);
    }

    .header-actions__text-style {
      font-size: var(--header-actions-font-size);
      font-family: var(--header-actions-font-family);
      font-weight: var(--header-actions-font-weight);
      text-transform: var(--header-actions-text-case);
    }
  }

  #header-component[data-menu-style='drawer'] header-actions {
    justify-self: flex-end;
  }

  .header__column--right header-actions {
    margin-inline-start: calc(var(--gap-md) * -1);
  }

  .header-actions__cart-icon {
    --cart-bubble-size: 20px;
    --cart-bubble-top: 4.5px;
    --cart-bubble-right: 2.5px;

    position: relative;
  }

  .header-actions__cart-icon .cart-bubble {
    position: absolute;
    width: var(--cart-bubble-size, 20px);
    top: var(--cart-bubble-top);
    right: var(--cart-bubble-right);
  }

  @media screen and (min-width: 750px) {
    .header-actions__cart-icon--text.header-actions__cart-icon .cart-bubble {
      position: relative;
      top: 0;
    }
  }

  .header-actions__cart-icon .cart-bubble__text {
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
  }

  .header-actions__cart-icon.header-actions__cart-icon--has-cart svg {
    /* Create donut mask where the cart bubble sits */
    mask: radial-gradient(
      calc(var(--cart-bubble-size) + 2px) at calc(100% - var(--cart-bubble-right)) var(--cart-bubble-top),
      transparent 45.45%,
      #fff 45.45%,
      #fff 100%
    );
  }

  .cart-bubble.cart-bubble--animating .cart-bubble__background {
    animation: grow var(--animation-speed) var(--animation-easing);
  }

  .cart-bubble--animating .cart-bubble__text {
    --start-y: -1em;
    --start-opacity: 1;
    /* Set initial transform state before animation starts */
    transform: translate(0, var(--start-y, -1em));
    opacity: var(--start-opacity, 1);
    animation: move-and-fade var(--animation-speed) var(--animation-easing);
  }

  cart-icon:has(.cart-bubble__text-count:empty) {
    --cart-bubble-size: 10px;
    --cart-bubble-top: 9px;
    --cart-bubble-right: 9px;

    .svg-wrapper {
      --cart-bubble-top: 4px;
      --cart-bubble-right: 4px;
    }
  }

  @media screen and (min-width: 750px) {
    cart-icon.header-actions__cart-icon--text:has(.cart-bubble__text-count:empty) {
      --cart-bubble-right: 2.5px;
    }
  }

  .header-actions__text {
    display: flex;
    align-items: center;
  }

  @media screen and (min-width: 750px) {
    .header-actions__cart-icon--text {
      display: flex;
      align-items: center;
      gap: var(--gap-xs);
    }

    .header__column--right .header-actions--text {
      margin-inline-start: 0;
    }
  }
/* END_SNIPPET:header-actions */

/* START_SNIPPET:header-drawer (INDEX:184) */
.header__icon--menu {
    position: initial;
  }

  .menu-drawer-container .header__icon--summary {
    color: var(--color-foreground);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--padding-lg);
  }

  .header__icon--summary .header-drawer-icon {
    margin: auto;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__featured-content {
    z-index: var(--layer-base);
    container-type: inline-size;
  }

  .menu-drawer__featured-content--childlist {
    z-index: var(--layer-flat);
  }

  .menu-drawer__featured-content-list {
    display: flex;
    gap: 1em;
    overflow-x: auto;
    padding-block-end: var(--padding-lg);
  }

  .menu-drawer__featured-content-list-item {
    flex: 0 0 auto;
  }

  .menu-drawer__featured-content-list-item--product {
    width: 35cqi;
  }

  .menu-drawer__featured-content-list-item--collection img.resource-card__image {
    width: 80cqi;
  }

  .menu-drawer__featured-content-list-item:first-child {
    margin-inline-start: var(--margin-xl);
  }

  .menu-drawer__featured-content-list-item:last-child {
    margin-inline-end: var(--margin-xl);
  }

  .menu-drawer__navigation {
    padding: 0;

    @media screen and (min-width: 750px) {
      margin-top: var(--drawer-header-desktop-top);
    }
  }

  details:not(.menu-open) .header__icon--menu .header-drawer-icon--close {
    display: none;
  }

  details.menu-open .header__icon--menu .header-drawer-icon--close {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  details.menu-open .header__icon--menu .header-drawer-icon--open {
    display: none;

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

  .menu-drawer {
    position: fixed;
    transform: translateX(-100%);
    visibility: hidden;
    height: var(--drawer-height);
    width: var(--drawer-width);
    max-width: var(--drawer-max-width);
    z-index: var(--layer-menu-drawer);
    left: 0;
    top: 0;
    padding: 0;
    background-color: var(--color-background);
    overflow: auto;
    display: flex;
    border-right: var(--style-border-drawer);
    flex-direction: column;

    @media screen and (min-width: 750px) {
      width: 25rem;
    }
  }

  /* When opening a submenu we don't want the first-level menu to be scrollable, so we reset the overflow  */
  .menu-drawer.menu-drawer--has-submenu-opened {
    overflow: initial;
  }

  .menu-drawer__backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    backdrop-filter: brightness(0.75);
    z-index: var(--layer-overlay);
    opacity: 0;
    transition: opacity var(--drawer-animation-speed) ease;

    .menu-open & {
      opacity: 1;
    }
  }

  .menu-drawer,
  details[open] > .menu-drawer__submenu {
    transition: transform var(--drawer-animation-speed) ease, visibility var(--drawer-animation-speed) ease,
      opacity var(--drawer-animation-speed) ease;
  }

  .menu-open > .menu-drawer,
  .menu-open > .menu-drawer__submenu:not(.menu-drawer__menu--childlist) {
    transform: translateX(0);
    visibility: visible;
    opacity: 1;
    display: flex;
    flex-direction: column;
  }

  .menu-drawer__inner-container {
    position: relative;
    height: 100%;
  }

  .menu-drawer__navigation-container {
    display: grid;
    grid-template-rows: 1fr auto;
    align-content: space-between;
    overflow-y: auto;
    height: 100%;
  }

  .menu-drawer__inner-submenu {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;

    @media screen and (min-width: 750px) {
      margin-top: var(--drawer-header-desktop-top);
    }
  }

  .menu-drawer__nav-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .menu-drawer__menu {
    --menu-drawer-inline-padding: calc(var(--padding-sm) + 7px);

    list-style: none;
    padding-inline: var(--drawer-padding);
    margin-inline: 0;
    margin-block-start: 0;
  }

  .menu-drawer__menu--grid {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    gap: var(--padding-sm);
    padding-inline-end: var(--menu-drawer-inline-padding);
    padding-block-start: var(--padding-xs);
  }

  .menu-drawer__menu--childlist:not(.menu-drawer__menu--grid) {
    flex-grow: 1;
  }

  .menu-drawer__menu.has-submenu,
  .menu-drawer__menu--childlist:not(:has(.menu-drawer__animated-element)) {
    margin-block-end: var(--margin-xs);

    @media screen and (min-width: 750px) {
      margin-block-end: 2.5rem;
    }
  }

  .menu-drawer__list-item--divider {
    border-block-end: 1px solid var(--color-border);
  }

  .menu-drawer__list-item--deep:not(.menu-drawer__list-item--divider) .menu-drawer__menu {
    margin-block-start: -0.3rem;
  }

  .menu-drawer__list-item--flat.menu-drawer__list-item--divider .menu-drawer__menu {
    margin-block-start: -0.4rem;
  }

  .menu-drawer__menu-container--divider {
    border-block-end: 1px solid var(--color-border);
  }

  .menu-drawer__menu > .menu-drawer__list-item {
    display: flex;
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
  }

  .menu-drawer__list-item--deep .menu-drawer__list-item,
  .menu-drawer__list-item--flat .menu-drawer__list-item {
    min-height: auto;
  }

  .menu-drawer__menu .menu-drawer__list-item--flat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-block-end: var(--margin-md);
  }

  .menu-drawer__menu--childlist .menu-drawer__list-item--flat {
    margin-block-end: var(--margin-sm);

    @media screen and (min-width: 750px) {
      margin-block-end: var(--margin-lg);
    }
  }

  .menu-drawer__menu--childlist .menu-drawer__list-item--flat.menu-drawer__list-item--divider {
    margin-block-end: 0;
  }

  .menu-drawer__list-item--flat .menu-drawer__menu--childlist {
    width: 100%;
    padding-inline: 0;
  }

  .menu-drawer-container[open] .menu-drawer__animated-element {
    animation: menu-drawer-nav-open var(--drawer-animation-speed) ease-in-out;
    animation-delay: calc(var(--drawer-animation-speed) + (var(--menu-drawer-animation-index) - 1) * 0.1s);
    animation-fill-mode: backwards;
  }

  .menu-drawer__menu accordion-custom .details-content--no-animation {
    animation: none;
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
    transition: none;
  }

  .menu-drawer__menu details,
  .menu-drawer__menu-item,
  .menu-drawer__menu accordion-custom {
    width: 100%;
  }

  .menu-drawer__list-item--divider .menu-drawer__menu-item:not(.menu-drawer__menu-item--child) {
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
  }

  .menu-drawer__menu-item--mainlist {
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
    font-family: var(--menu-top-level-font-family);
    font-style: var(--menu-top-level-font-style);
    font-weight: var(--menu-top-level-font-weight);
    font-size: var(--menu-top-level-font-size);
    line-height: var(--menu-top-level-font-line-height);
    text-transform: var(--menu-top-level-font-case);
    color: var(--menu-top-level-font-color);
    justify-content: space-between;

    &:hover {
      color: var(--menu-top-level-font-color);
    }
  }

  .menu-drawer__menu-item--parent {
    font-family: var(--menu-parent-font-family);
    font-style: var(--menu-parent-font-style);
    font-weight: var(--menu-parent-font-weight);
    font-size: var(--menu-parent-font-size);
    line-height: var(--menu-parent-font-line-height);
    text-transform: var(--menu-parent-font-case);
    color: var(--menu-parent-font-color);

    &:hover {
      color: var(--menu-parent-font-color);
    }
  }

  .menu-drawer__menu-item--child {
    font-family: var(--menu-child-font-family);
    font-style: var(--menu-child-font-style);
    font-weight: var(--menu-child-font-weight);
    font-size: var(--menu-child-font-size);
    line-height: var(--menu-child-font-line-height);
    text-transform: var(--menu-child-font-case);
    color: var(--menu-child-font-color);

    &:hover {
      color: var(--menu-child-font-color);
    }
  }

  .menu-drawer__menu--childlist summary.menu-drawer__menu-item {
    display: flex;
    width: 100%;
    padding-inline-end: 0;
  }

  .menu-drawer__list-item--deep .menu-drawer__menu,
  .menu-drawer__menu--grandchildlist {
    padding-inline: 0;
  }

  .menu-drawer__list-item--deep .menu-drawer__menu {
    padding-block-end: 0.5rem;
  }

  .menu-drawer__list-item--deep.menu-drawer__list-item--divider .menu-drawer__menu {
    padding-block-end: 0.3rem;
  }

  .menu-drawer__list-item--flat.menu-drawer__list-item--divider .menu-drawer__menu--grandchildlist {
    padding-block-end: 0.5rem;
  }

  .menu-drawer__menu-item {
    display: flex;
    padding: var(--padding-2xs) 0;
    position: relative;
    text-decoration: none;
    justify-content: space-between;
    align-items: center;
  }

  .menu-drawer__menu-item:has(> .menu-drawer__link-image) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    row-gap: var(--padding-3xs);
    padding: 0;
  }

  .menu-drawer__link-image {
    width: 100%;
    position: relative;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  /* Fix alignment for collection image mode links without images in drawer */

  /* Target menu items in grids that have images */
  .menu-drawer__menu--grid:has(.menu-drawer__link-image) .menu-drawer__menu-item:not(:has(> .menu-drawer__link-image)) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    row-gap: var(--padding-3xs);
    padding: 0;
  }

  .menu-drawer__menu--grid:has(.menu-drawer__link-image)
    .menu-drawer__menu-item:not(:has(> .menu-drawer__link-image))::before {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: var(--color-foreground-muted);
    opacity: 0.1;
    border-radius: var(--menu-image-border-radius);
  }

  .menu-drawer__close-button {
    position: relative;
    right: auto;
    top: auto;
    width: fit-content;
    height: fit-content;
    color: inherit;
    padding: var(--padding-lg);
  }

  .menu-drawer__back-button {
    display: flex;
    width: 100%;
    padding: var(--padding-md) var(--padding-xl);
    border: none;
    align-items: center;
    color: var(--color-foreground);
    background-color: transparent;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    overflow-x: hidden;
    line-height: 1.2;
    box-shadow: none;
  }

  .menu-drawer__close-button.menu-drawer__close-button,
  .menu-drawer__back-button.menu-drawer__back-button {
    outline-color: var(--color-foreground-subdued);
  }

  .menu-drawer__menu-item-text {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /** Styles when the country selector is hidden */
  .menu-drawer .language-selector:not(.menu-drawer__submenu *) {
    width: fit-content;
    padding-inline-start: 0;

    .localization-form__select {
      text-align: left;
    }
  }

  .menu-drawer__menu-item > .svg-wrapper {
    width: fit-content;
    height: fit-content;
    margin: 0;
    padding-block: var(--padding-lg);
    padding-inline-start: var(--padding-xl);
    flex-shrink: 0;
  }

  .menu-drawer__list-item--divider .menu-drawer__menu-item > .svg-wrapper {
    padding-block: var(--padding-md);
  }

  .menu-drawer svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__submenu {
    position: absolute;
    width: 100%;
    top: 0;
    height: 100dvh;
    left: 0;
    background-color: var(--color-background);
    z-index: var(--layer-flat);
    transform: translateX(-5%);
    visibility: hidden;
    overflow-y: auto;
    opacity: 0;
  }

  .menu-drawer__back-button > .svg-wrapper {
    margin-right: var(--padding-md);
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__utility-links {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin-block: auto var(--padding-sm);
    margin-inline-start: var(--padding-xl);
  }

  .menu-drawer__account {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
    text-decoration: none;
    height: 44px;
    font-size: 1.4rem;
    color: rgb(var(--color-foreground));
  }

  .menu-drawer__account svg {
    height: var(--icon-size-sm);
    width: var(--icon-size-sm);
  }

  .menu-drawer__account shop-user-avatar {
    --shop-avatar-size: 2.4rem;

    margin-right: 0.55rem;
    margin-left: -0.45rem;
  }

  .menu-drawer__link-image,
  .menu-drawer__featured-product-image,
  .menu-drawer__featured-collection-image,
  .menu-drawer__featured-collection-link::before {
    border-radius: var(--menu-image-border-radius);
  }

  @keyframes menu-drawer-nav-open {
    0% {
      visibility: hidden;
      opacity: 0;
      transform: translateX(-0.5rem);
    }

    100% {
      visibility: visible;
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes menu-drawer-subnav-open {
    0% {
      visibility: visible;
      opacity: 1;
      transform: translateX(0);
    }

    100% {
      visibility: hidden;
      opacity: 0;
      transform: translateX(-1rem);
    }
  }

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

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

  .drawer-localization .country-filter {
    padding-block: 8px;
  }

  .drawer-localization .drawer-localization__button {
    display: flex;
    padding: 0;
    position: relative;
    text-decoration: none;
    height: 44px;

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

  .drawer-localization .drawer-localization__button .icon-caret {
    width: fit-content;
    height: fit-content;
    margin: 0;
    padding: var(--padding-xl) var(--padding-xl) var(--padding-xl) var(--padding-xs);
  }

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

  .menu-drawer__localization .language-selector.h5 {
    padding-inline-start: 0;
  }

  .drawer-localization {
    display: contents;
    color: var(--color-foreground);
  }

  .drawer-localization localization-form-component {
    position: relative;
    height: 100%;
  }

  .drawer-localization .mobile-localization,
  .drawer-localization .drawer-localization__button--label {
    display: flex;
    gap: var(--gap-xs);
    margin-block: 0;
    align-items: center;
  }

  .drawer-localization__button--label.h6 {
    font-family: var(--menu-localization-font);
  }

  .drawer-localization img {
    width: var(--icon-size-sm);
  }

  .drawer-localization .localization-button__icon,
  .drawer-localization .localization-button__icon svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .drawer-localization summary.is-disabled {
    pointer-events: none;
  }

  .drawer-localization .localization-wrapper {
    width: 100%;
  }

  .drawer-localization .localization-form {
    display: flex;
    flex-direction: column;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .drawer-localization .localization-form > * {
    padding-inline: var(--padding-xl);
  }

  .drawer-localization .language-selector .svg-wrapper.icon-caret {
    transform: translateY(-50%) rotate(0deg);
    right: 20px;
  }

  .drawer-localization .language-selector .svg-wrapper.icon-caret svg {
    transform: none;
  }
/* END_SNIPPET:header-drawer */

/* START_SNIPPET:jumbo-text (INDEX:190) */
.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:193) */
.facets input:checked + label {
    font-weight: 500;
  }

  .facets .checkbox .icon-checkmark {
    transition: border-color 0.2s ease, background-color 0.2s ease;
  }

  .facets .checkbox:not(.checkbox--disabled):hover .icon-checkmark {
    border-color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  /* Hover state for checked checkboxes - targeting via adjacent sibling */
  .facets .checkbox:not(.checkbox--disabled):hover .checkbox__input:checked + .checkbox__label .icon-checkmark {
    background-color: var(--color-foreground-subdued);
  }

  .facets .checkbox:not(.checkbox--disabled) .checkbox__label-text {
    color: var(--color-foreground-subdued);
  }
  .facets .checkbox:not(.checkbox--disabled):hover .checkbox__label-text {
    color: var(--color-foreground-rgb);
  }

  .facets .checkbox .checkbox__label-text {
    transition: color 0.2s ease, font-weight 0.2s ease;
  }

  /* Pill style */
  .facets__pill-label {
    --pill-label-padding-inline: var(--padding-xs);
    --pill-label-border-radius: var(--style-border-radius-md);
    --pill-label-border-width: var(--variant-picker-button-border-width);
    --pill-label-height: var(--button-size-md);
    --pill-label-focus-outline-color: var(--color-foreground);
    --pill-label-color: var(--color-foreground);
    --pill-label-color-rgb: var(--color-foreground-rgb);
    --pill-label-background-color: var(--color-background);
    --pill-label-background-color-rgb: var(--color-background-rgb);
    --pill-label-border-opacity: var(--facets-low-opacity);

    display: inline-flex;
    position: relative;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 var(--pill-label-border-width) rgb(var(--pill-label-color-rgb) / var(--opacity-10-25));
    border-radius: var(--pill-label-border-radius);
    height: var(--pill-label-height);
    width: 100%;
    padding-inline: var(--pill-label-padding-inline);
    color: rgb(var(--pill-label-color-rgb));
    background-color: rgb(var(--pill-label-background-color-rgb));
    cursor: pointer;
    transition: color var(--animation-speed) var(--animation-easing),
      background-color var(--animation-speed) var(--animation-easing);
    outline-color: var(--pill-label-focus-outline-color);

    &:hover {
      --pill-label-border-opacity: 100%;
    }
  }

  .facets__pill-input:not(:checked) + .facets__pill-label:hover {
    --pill-label-color-rgb: var(--color-foreground-rgb);
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .facets__pill-input {
    &:checked + .facets__pill-label {
      --pill-label-color-rgb: var(--color-background-rgb);
      --pill-label-background-color-rgb: var(--color-foreground-rgb);
      --pill-label-border-opacity: 0;

      font-weight: 500;
    }

    &:disabled + .facets__pill-label {
      opacity: var(--disabled-opacity);
      cursor: not-allowed;

      &:hover {
        --pill-label-border-opacity: var(--facets-low-opacity);
      }
    }
  }

  .facets__status-wrapper {
    display: flex;
    align-items: center;
  }

  .facets--drawer .facets__status-wrapper {
    @media screen and (max-width: 749px) {
      gap: var(--gap-3xs);
    }
  }

  .facets--vertical .facets__status-wrapper {
    gap: var(--gap-xs);
  }

  .facets--horizontal .facets__status-wrapper {
    gap: 0;
  }

  .facets__pill-input:disabled + .facets__pill-label svg {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: var(--style-border-radius-md);
  }

  .facets__pill-label svg line {
    stroke-width: 1.5px;
    stroke: rgb(var(--color-foreground-rgb) / var(--facets-low-opacity));
  }

  .facets__pill-wrapper {
    position: relative;
  }

  .facets__pill-input {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    opacity: 0;
    cursor: pointer;
  }

  /* Swatches */
  .facets__status--swatches {
    display: none;
  }

  .facets__swatch-wrapper {
    display: flex;
  }

  .variant-option__swatch-wrapper {
    position: relative;
    overflow: visible;
    border-radius: var(--options-border-radius);
  }

  .variant-option--swatches-disabled {
    pointer-events: none;
    cursor: not-allowed;
  }

  .variant-option--swatches-disabled .variant-option__swatch-wrapper {
    overflow: hidden;
  }

  .facets--horizontal .facets__status--swatches {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .facets--horizontal .sorting-filter .facets__status {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets__status--swatches .swatch {
    width: calc(var(--variant-picker-swatch-width) / 1.5);
    height: calc(var(--variant-picker-swatch-height) / 1.5);
  }

  .facets__status--swatches .swatch + .swatch {
    margin-left: calc(var(--variant-picker-swatch-width) / -3);
    outline: 1px solid rgb(var(--color-background-rgb));
  }

  .facets__inputs-wrapper .facets__inputs-list--images {
    display: grid;
    grid-template-columns: repeat(var(--image-columns), 125px);
    gap: var(--gap-sm);
  }

  .facets--drawer .facets__inputs-wrapper .facets__inputs-list--images {
    grid-template-columns: repeat(3, 1fr);

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

  .facets--vertical .facets__inputs-wrapper .facets__inputs-list--images {
    grid-template-columns: repeat(2, 1fr);
  }

  .facets--drawer .facets__inputs-list--images {
    padding-top: var(--padding-xs);
  }

  .facets__image-wrapper {
    aspect-ratio: 1/1;
    width: 100%;
    padding: var(--padding-xs);
    position: relative;
    overflow: hidden;
  }

  .facets__image-wrapper img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    border-radius: calc(var(--border-radius) / 2);
  }

  .facets__image-label {
    width: 100%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-block-end: var(--padding-xs);
    cursor: pointer;
  }

  .facets__inputs-list-item--disabled .facets__image-label {
    cursor: not-allowed;
  }

  .facets__inputs-list-item:not(.facets__inputs-list-item--disabled) .facets__image-label:hover {
    font-weight: 500;
  }

  /* Filter-specific variant-option styles */
  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch {
    --focus-outline: var(--focus-outline-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-35-55));

    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label:has(:focus-visible) .swatch {
    --focus-outline: var(--focus-outline-width) solid currentcolor;

    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label:has(:focus-visible) {
    outline: none;
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover {
    outline: none;
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:has(:checked) {
    --focus-outline: none;
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:has(:checked) .swatch {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  .facets__inputs-list--swatches .variant-option__button-label {
    --color-variant-text: var(--color-foreground);
  }

  .facets__inputs-list--swatches {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 26px;
      --variant-picker-swatch-height: 26px;
    }
  }

  .facets--vertical .facets__inputs-wrapper .facets__inputs-list--swatches-grid {
    gap: var(--gap-sm);
  }

  .facets--vertical .facets__inputs-list--swatches .facets__inputs-list-item {
    display: flex;
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid {
    --columns: 2;

    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid .variant-option--swatches {
    cursor: pointer;
    overflow: visible;
  }

  .facets__inputs-list-item--disabled .variant-option--swatches {
    cursor: not-allowed;
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid label {
    cursor: pointer;
    word-break: break-word;
    white-space: normal;
  }

  .facets__inputs-list--swatches-grid .facets__inputs-list-item--disabled label {
    cursor: not-allowed;
  }

  .facets__inputs-list-item--disabled .variant-option__button-label {
    cursor: not-allowed;
  }

  .facets__inputs-wrapper
    .facets__inputs-list--swatches-grid
    .variant-option__button-label--has-swatch:has(input[type='checkbox']) {
    align-items: center;
    overflow: visible;
    justify-content: flex-start;
    display: flex;
    width: 100%;
    flex-basis: unset;
    gap: var(--gap-sm);
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid .variant-option__button-label:has(:checked) {
    color: rgb(var(--color-foreground-rgb));
    background-color: rgb(var(--color-background-rgb));
    font-weight: 500;
    transition: font-weight 0.2s ease;
  }

  .facets .variant-option--swatches {
    --options-border-radius: var(--variant-picker-swatch-radius);

    width: auto;
  }

  .facets__inputs-list-item:not(.facets__inputs-list-item--disabled) .variant-option__button-label:hover {
    font-weight: 500;
  }

  /* Variant option images (filters) */
  .variant-option--images {
    --image-facet-border-width: var(--variant-picker-button-border-width);
    --image-facet-border-opacity: var(--facets-low-opacity);
    --image-facet-border-radius: var(--style-border-radius-xs);

    position: relative;
    border-radius: var(--image-facet-border-radius);
    box-shadow: inset 0 0 0 var(--image-facet-border-width)
      rgb(var(--color-foreground-rgb) / var(--image-facet-border-opacity));

    &:hover {
      --image-facet-border-opacity: 100%;
    }

    &:has(input:checked) {
      font-weight: 500;
      transition: font-weight 0.2s ease;
    }

    &:has(input:checked):hover {
      --image-facet-border-width: calc(var(--variant-picker-button-border-width) + 0.5px);
    }

    &:has(input:focus-visible) {
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: var(--focus-outline-offset);
    }
  }

  .variant-option--images input {
    /* remove the checkbox from the page flow */
    position: absolute;

    /* set the dimensions to match those of the label */
    inset: 0;

    /* hide it */
    opacity: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    cursor: pointer;
  }

  .facets__inputs-list-item--disabled .variant-option--images {
    --image-facet-border-opacity: 0;

    opacity: var(--disabled-opacity);
    cursor: not-allowed;

    &:hover {
      --image-facet-border-opacity: 0;
    }

    img {
      opacity: var(--disabled-opacity);
    }

    input,
    label,
    .facets__image-label {
      cursor: not-allowed;
    }

    .facets__image-wrapper {
      border: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-30));
      border-radius: var(--image-facet-border-radius);
    }
  }

  /* Position disabled-svg */
  .variant-option--images svg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    stroke-width: var(--border-width);
    stroke: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  /* Position label text and handle overflow */
  .facets__inputs-list-item,
  .variant-option--images {
    min-width: 0;
  }

  /* Safari < 16.4 outline border-radius workaround - filter-specific */
  @supports not (background-color: rgb(from red 150 g b / alpha)) {
    .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch {
      outline: none;
      position: relative;
      overflow: visible;
    }

    .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch::after {
      content: '';
      position: absolute;
      inset: calc(-1 * var(--focus-outline-offset));
      border: var(--focus-outline);
      border-radius: var(--focus-outline-radius, 50%);
      background-color: transparent;
      display: inherit;
    }
  }
/* END_SNIPPET:list-filter */

/* START_SNIPPET:localization-form (INDEX:194) */
/* Localization */
  localization-form-component {
    display: flex;
    width: var(--width, auto);

    @media screen and (min-width: 750px) {
      position: relative;
    }
  }

  localization-form-component[data-show-filter='false'] .country-selector-form__wrapper {
    padding-block-start: var(--padding-xs);
  }

  .localization-form {
    width: 100%;
  }

  localization-form-component .button:is(:not(.country-filter__reset-button)) {
    --button-color: var(--color-foreground);
    --button-background-color: var(--language-button-background-color, var(--color-background));
    --button-border-color: var(--language-button-border-color, var(--color-border));

    text-decoration-color: transparent;
    text-decoration-thickness: 0.075em;
    text-underline-offset: 0.125em;
    transition: text-decoration-color var(--animation-speed) var(--animation-easing);
  }

  localization-form-component .button:is(:not(.country-filter__reset-button)):hover,
  .localization-form__list-item:hover,
  .localization-form__list-item:focus {
    --button-color: var(--color-foreground-subdued);

    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
  }

  .localization-form__list-item[aria-current='true'] {
    --button-color: var(--color-primary-active);

    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10));
  }

  .localization-form__list-item-disabled {
    pointer-events: none;
  }

  .localization-form__list-item:focus-visible {
    outline: none;
  }

  localization-form-component .localization-selector {
    display: flex;
    align-items: center;
    gap: var(--margin-2xs);
  }

  localization-form-component .country-filter__search-icon {
    left: 8px;
    right: auto;
    color: var(--color-foreground-muted);
    pointer-events: none;
  }

  .country-filter__search-icon .svg-wrapper svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .disclosure {
    width: 100%;
  }

  .localization-form__list {
    position: relative;
    width: 100%;
    padding-block: 0 var(--padding-xs);
    font-size: var(--font-size-lg);
    scroll-padding: var(--padding-xs) 0;
    overflow-y: auto;
    white-space: nowrap;

    /* Hide scrollbar which would cause extra right padding in Safari */
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .localization-form__list-item:not([hidden]) {
    margin-block-end: var(--margin-3xs);
    display: flex;
    gap: var(--margin-sm);
    padding: 8px;
    border-radius: 8px;
    line-height: var(--font-line-height-md);
    align-items: center;
    text-align: start;
    cursor: pointer;
    transition: background-color var(--animation-speed) var(--animation-easing);

    .country {
      flex: 1;
      color: var(--color-foreground);
    }

    &:hover {
      background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
    }

    &[aria-current='true'] {
      .country {
        font-weight: 500;
      }
    }
  }

  .localization-form__list-item#no-results-message {
    grid-template-columns: 1fr;
    text-align: center;
    color: var(--color-foreground-subdued);
  }

  .is-searching .localization-form__list-item .country {
    color: var(--color-foreground-subdued);
  }

  .localization-form__list-item .country mark {
    font-weight: 500;
    background: none;
    color: var(--color-foreground);
  }

  .country-filter {
    position: relative;
    padding: var(--padding-xs);
    border-bottom: var(--style-border-width) solid transparent;
    transition: border-color var(--animation-values);
  }

  .country-filter.is-scrolled {
    border-color: var(--color-border);
  }

  .country-selector-form__wrapper {
    overflow-y: auto;
    max-height: 100%;
    flex-grow: 1;
  }

  .language-selector {
    display: flex;
    gap: var(--gap-xs);
    padding: var(--padding-md) var(--padding-lg);
    position: relative;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .language-selector__label {
    flex-shrink: 0;
    color: var(--color-foreground-subdued);
  }

  .localization-form__select {
    border: none;
    color: var(--color-foreground);
    appearance: none;
    background-color: var(--color-background);
    padding-block: var(--padding-3xs);
    padding-inline: var(--padding-xs) calc(var(--icon-size-xs) + var(--padding-xs));
    text-align: right;
    cursor: pointer;
    max-width: 40vw;
    text-overflow: ellipsis;
    field-sizing: content;

    &:focus-visible {
      outline: var(--focus-outline-width) solid currentcolor;
    }

    &:focus {
      outline: none;
    }
  }

  #header-component[transparent] localization-form-component .localization-form .localization-form__select {
    background-color: transparent;
  }

  .localization-form__select option {
    background-color: var(--color-input-background);
    color: var(--color-input-text);
  }

  .language-selector .svg-wrapper.icon-caret {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
  }

  .language-selector--collapse-space {
    padding-inline-end: var(--padding-2xs);
  }

  .language-selector--collapse-space .localization-form__select {
    padding-inline-end: var(--icon-size-xs);
  }

  .language-selector--collapse-space .svg-wrapper.icon-caret {
    right: 0;
  }

  .localization-form .icon-checkmark {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .localization-form .svg-wrapper.icon-checkmark {
    visibility: hidden;
  }

  .localization-form__list-item[aria-current='true'] .svg-wrapper.icon-checkmark {
    visibility: visible;
  }

  .country-filter__input {
    width: 100%;
    height: 44px;
    font-size: var(--font-size-lg);
    padding: var(--padding-md) var(--padding-lg) var(--padding-md) calc(var(--margin-md) + var(--padding-xl));
    border: 1px solid var(--color-foreground);
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    outline-offset: -1px;

    @media screen and (min-width: 750px) {
      height: 36px;
    }
  }

  .country-filter__input::placeholder {
    color: inherit;
  }

  .country-filter .field {
    position: relative;
  }

  .country-filter .field__label {
    font-size: var(--font-size-lg);
    left: var(--margin-2xl);
    top: var(--margin-xl);
    pointer-events: none;
    position: absolute;
  }

  .country-filter__input:focus ~ .field__label,
  .country-filter__input:not(:placeholder-shown) ~ .field__label,
  .country-filter__input:-webkit-autofill ~ .field__label {
    font-size: var(--font-size-xs);
    top: var(--margin-xs);
  }

  .country-filter .field__button:not([hidden]) {
    display: flex;
    height: fit-content;
    position: absolute;
    padding: 0;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    align-items: center;
    background-color: transparent;
    color: var(--color-input-text);
    border: 0;
  }

  input[type='search']::-webkit-search-cancel-button {
    appearance: none;
  }

  .country-selector__close-button {
    display: none;
  }
/* END_SNIPPET:localization-form */

/* START_SNIPPET:media (INDEX:195) */
.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:200) */
.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:201) */
.pagination {
    --pagination-size: 36px;
    --pagination-inset: 2px;
    --pagination-radius: 6;

    display: flex;
    justify-content: center;
    padding: var(--padding-xl) var(--padding-sm);
    margin-top: var(--padding-xl);
    position: relative;
    isolation: isolate;
  }

  .pagination__list {
    display: flex;
    gap: 0;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
  }

  .pagination__item {
    width: var(--pagination-size);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
  }

  .pagination__link {
    display: grid;
    place-items: center;
    color: var(--color-foreground);
    text-decoration: none;
    width: 100%;
    height: 100%;
    user-select: none;
    position: relative;
    outline-color: var(--color-foreground);
    -webkit-tap-highlight-color: transparent;
    font-size: var(--font-size--md);
    font-weight: var(--font-weight-normal);
    border-radius: calc(var(--pagination-radius) * 1px);
    transition: color var(--hover-transition-duration) var(--hover-transition-timing),
      opacity var(--hover-transition-duration) var(--hover-transition-timing);
  }

  .pagination__link:focus-visible {
    outline: 2px solid var(--color-foreground);
    outline-offset: 2px;
  }

  .pagination__link--current {
    color: var(--color-background);
    font-weight: var(--font-weight-medium);
    cursor: default;
  }

  .pagination__link--gap {
    cursor: default;
    pointer-events: none;
  }

  .pagination__link--arrow {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .pagination__link--disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
  }

  .pagination__link svg {
    width: 0.5rem;
    height: 0.75rem;
    flex-shrink: 0;
  }

  .pagination__item--mobile-only {
    display: none;
  }

  /* Fallback for browsers without anchor positioning support */
  @supports not (anchor-name: --pagination-active) {
    .pagination__link:not(.pagination__link--gap)::before {
      content: '';
      position: absolute;
      inset: var(--pagination-inset);
      border-radius: calc(var(--pagination-radius) * 1px);
      background: rgb(var(--color-foreground-rgb) / var(--opacity-10));
      z-index: -1;
      opacity: 0;
      transition: background var(--hover-transition-duration) var(--hover-transition-timing),
        opacity var(--hover-transition-duration) var(--hover-transition-timing);
    }

    .pagination__link[aria-current='page']::before {
      background: var(--color-foreground);
      opacity: 1;
    }

    .pagination__link:hover:not([aria-current='page'], .pagination__link--gap, .pagination__link--disabled)::before {
      opacity: 1;
    }
  }

  /* Modern approach with anchor positioning */
  @supports (anchor-name: --pagination-active) {
    .pagination__list::before {
      content: '';
      z-index: -1;
      position: absolute;
      width: calc(var(--pagination-size) - (2 * var(--pagination-inset)));
      aspect-ratio: 1;
      pointer-events: none;
      opacity: 0;
      border-radius: calc(var(--pagination-radius) * 1px);
      background: rgb(var(--color-foreground-rgb) / var(--opacity-10));
      transition: left var(--hover-transition-duration) var(--hover-transition-timing),
        top var(--hover-transition-duration) var(--hover-transition-timing);
    }

    /* Hide hover indicator on touch devices */
    @media (hover: none) and (pointer: coarse) {
      .pagination__list::before {
        content: unset;
      }
    }

    .pagination__list:has(
        .pagination__link:is(:hover, :focus-visible):not(.pagination__link--gap, .pagination__link--disabled)
      )::before {
      opacity: 1;
    }

    /* Style current page directly */
    .pagination__link[aria-current='page']::before {
      content: '';
      position: absolute;
      inset: var(--pagination-inset);
      border-radius: calc(var(--pagination-radius) * 1px);
      background: var(--color-foreground);
      z-index: -1;
    }

    .pagination__list
      .pagination__item:has(
        .pagination__link:is(:hover, :focus-visible):not(.pagination__link--gap, .pagination__link--disabled)
      ) {
      anchor-name: --pagination-hover;
    }

    /* Position hover indicator using anchor */
    .pagination__list::before {
      position-anchor: --pagination-hover;
      left: calc(anchor(left) + var(--pagination-inset));
      top: calc(anchor(top) + var(--pagination-inset));
    }

    .pagination__item:has(+ .pagination__item--gap) .pagination__link::after,
    .pagination__item--gap + .pagination__item .pagination__link::after {
      position: absolute;
      content: '';
      pointer-events: auto;
    }

    .pagination__item:has(+ .pagination__item--gap) .pagination__link::after {
      inset: 0 -50% 0 100%;
    }

    .pagination__item--gap + .pagination__item .pagination__link::after {
      inset: 0 100% 0 -50%;
    }
  }

  @media screen and (max-width: 749px) {
    .pagination {
      --pagination-size: 44px;
      --pagination-inset: 5px;

      padding: var(--padding-lg) var(--padding-sm);
    }

    .pagination__link {
      font-size: var(--font-size--sm);
    }

    .pagination__item--mobile-hide {
      display: none;
    }

    .pagination__item--mobile-only {
      display: grid;
    }

    .pagination__item:has(.pagination__link--gap) {
      width: calc(var(--pagination-size) * 0.5);
    }
  }
/* END_SNIPPET:pagination-controls */

/* START_SNIPPET:password-layout-styles (INDEX:202) */
.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:206) */
/* Shared predictive search styles (used by both predictive-search and predictive-search-empty sections) */
  .predictive-search-dropdown {
    display: flex;
    flex-direction: column;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--layer-base);
  }

  .predictive-search-results__inner {
    flex-grow: 1;
    overflow-y: auto;
    padding-block: var(--padding-lg);
    container-type: inline-size;
    color: var(--color-foreground);
  }

  .predictive-search-results__title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size--body-md);
    font-weight: 500;
    margin-block: var(--margin-sm) var(--margin-xs);
    width: 100%;
    text-transform: var(--title-case);

    &:first-of-type {
      margin-block-start: 0;
    }

    @media screen and (max-width: 749px) {
      margin-block: var(--margin-lg) var(--margin-sm);
    }
  }

  .predictive-search-results__no-results {
    animation-delay: 100ms;
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-in);
  }

  .predictive-search-results__no-results:last-child {
    margin-block: var(--margin-lg);
    text-align: center;
  }

  /* Predictive search section styles */
  input[type='search']::-webkit-search-decoration {
    -webkit-appearance: none; /* stylelint-disable-line */
  }

  .search-action .predictive-search {
    z-index: calc(var(--layer-header-menu) + 2);
  }

  .search-action .search-modal .predictive-search {
    z-index: var(--layer-window-overlay);
  }

  .header__column--right .predictive-search-form__content-wrapper {
    right: 0;
    left: unset;
  }

  .search-modal .predictive-search-form__content-wrapper {
    width: 100%;

    @media screen and (min-width: 750px) {
      height: fit-content;
    }
  }
  .dialog-modal .predictive-search-form__header-inner {
    @media screen and (min-width: 750px) {
      border: 0;
    }
  }

  .search-modal__content .predictive-search-form__content {
    max-height: var(--modal-max-height);
  }

  .predictive-search:has(.predictive-search-dropdown) .search-input {
    outline-color: transparent;
  }

  .predictive-search:has(.predictive-search-dropdown) .predictive-search-form__header-inner:focus-within {
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;

    @media screen and (max-width: 749px) {
      border-bottom-color: transparent;
    }
  }

  .predictive-search:has(.predictive-search-dropdown[aria-expanded='true'])
    .predictive-search-form__header-inner:focus-within {
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;
    border-radius: var(--search-border-radius);

    @media screen and (max-width: 749px) {
      border-radius: var(--style-border-radius-inputs);
    }
  }

  .dialog-modal .predictive-search-form__header {
    border: 0;
    border-radius: 0;
    background-color: var(--color-background);
    border-bottom: var(--style-border-width) solid var(--color-border);

    @media screen and (min-width: 750px) {
      padding: var(--padding-2xs) var(--padding-2xs) 0;
      border-bottom: var(--search-border-width) solid var(--color-border);
    }

    @media screen and (max-width: 749px) {
      transition: box-shadow 0.2s ease;
      box-shadow: none;
    }
  }

  .search-action .predictive-search:has(.predictive-search-dropdown) .predictive-search-form__header:focus-within {
    border-radius: var(--search-border-radius) var(--search-border-radius) 0 0;
    transition: box-shadow var(--animation-speed) var(--animation-easing);
    background-color: var(--color-background);

    @media screen and (max-width: 749px) {
      border-radius: var(--style-border-radius-inputs) var(--style-border-radius-inputs) 0 0;
    }
  }

  @media screen and (max-width: 749px) {
    .dialog-modal .predictive-search__close-modal-button {
      padding-inline-start: var(--margin-xs);
      margin-inline-start: 0;
    }
  }

  .dialog-modal[open] {
    @media screen and (max-width: 749px) {
      border-radius: 0;
    }
  }

  .dialog-modal .predictive-search-form__header:has(.predictive-search-form__header-inner:focus-within) {
    @media screen and (min-width: 750px) {
      border-bottom-color: transparent;
    }
  }

  @media screen and (max-width: 749px) {
    .dialog-modal {
      .predictive-search__reset-button-icon {
        display: none;
      }

      .predictive-search__reset-button-text {
        display: block;
      }

      .predictive-search-form__content {
        /* The parent has overflow auto, we want to prevent a double scrollbar during animation */
        max-height: 100%;
      }

      .predictive-search-form__content-wrapper {
        box-shadow: none;
      }

      .predictive-search-form__header {
        box-shadow: none;
      }

      .predictive-search-form__footer {
        padding-block: var(--padding-2xl);
      }
    }
  }

  .predictive-search-results__pill {
    font-weight: 500;
    white-space: nowrap;
    color: var(--color-foreground);
    transition: background-color var(--animation-speed-medium) var(--animation-timing-hover),
      box-shadow var(--animation-speed-medium) var(--animation-timing-bounce),
      transform var(--animation-speed-medium) var(--animation-timing-bounce);
    margin: 2px;

    &:hover {
      transform: scale(1.03);
      box-shadow: 0 2px 5px rgb(0 0 0 / var(--opacity-8));
    }
  }

  .predictive-search-results__pill mark {
    background-color: transparent;
    font-weight: 200;
    color: var(--color-foreground-subdued);
  }

  .predictive-search-results__pill:focus,
  .predictive-search-results__pill:hover,
  .predictive-search-results__card--query:is([aria-selected='true'], :focus-within) .predictive-search-results__pill {
    --pill-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));

    background-color: var(--pill-background-color);
    outline: var(--border-width-sm) solid var(--color-border);
    border: var(--border-width-sm);
    text-decoration: none;
  }

  .predictive-search-results__wrapper.predictive-search-results__wrapper-queries {
    margin-bottom: var(--margin-lg);
    padding-inline: var(--padding-xl);
    gap: var(--gap-2xs);
  }

  .predictive-search-results__card {
    --title-font-size: var(--font-size--md);
    --title-margin-block: var(--margin-xs);

    flex: 0 0 auto;
    scroll-snap-align: start;
    scroll-margin-block: calc(var(--title-font-size) + var(--title-margin-block) + var(--padding-sm))
      calc(var(--padding-xl) + var(--button-padding-block) * 2);
    transition: transform var(--animation-speed-medium) var(--animation-timing-default),
      background-color var(--animation-speed-medium) var(--animation-timing-hover),
      border-color var(--animation-speed-medium) var(--animation-timing-hover);

    &:nth-last-child(3) {
      scroll-snap-align: end;
    }

    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
    }
  }

  .recently-viewed-wrapper .predictive-search-results__card {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .recently-viewed-wrapper.removing .predictive-search-results__card {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
  }

  .predictive-search-results__card--product,
  .recently-viewed-wrapper .predictive-search-results__card--product {
    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
    }

    &:hover {
      background-color: var(--card-bg-hover);
      border-radius: var(--product-corner-radius);
      padding: calc(var(--padding-2xs) + 2px);
      margin: calc((var(--padding-2xs) + 2px) * -1);
    }

    &:is([aria-selected='true'].keyboard-focus, &:focus-visible, &:has(.resource-card:focus-visible)) {
      background-color: var(--card-bg-hover);
      padding: calc(var(--padding-2xs) + 1px);
      margin: calc((var(--padding-2xs) + 1px) * -1);
      outline: var(--border-width-sm) solid var(--color-border);
      border-radius: calc(var(--product-corner-radius) + 1px);
      border-color: var(--card-border-focus);
    }
  }

  .predictive-search-results__card:not(.predictive-search-results__card--product) {
    padding: var(--padding-sm);
    border: var(--border-width-sm) solid var(--color-border);
    border-radius: var(--card-corner-radius);
    width: 60cqi;
    content-visibility: visible;

    @media screen and (min-width: 750px) {
      width: 27.5cqi;
    }

    &:hover {
      border-color: var(--card-border-hover);
      background-color: var(--card-bg-hover);
    }

    &[aria-selected='true'].keyboard-focus {
      border-color: var(--card-border-hover);
      background-color: var(--card-bg-hover);
    }

    &:active {
      transform: scale(0.97);
      transition: transform var(--animation-speed-medium) var(--animation-timing-active);
    }
  }

  @keyframes search-element-scale-in {
    0% {
      transform: scale(0.95);
      opacity: 0;
    }

    40% {
      opacity: 1;
    }

    100% {
      transform: scale(1);
      opacity: 1;
    }
  }

  @keyframes search-element-scale-out {
    0% {
      transform: scale(1);
      opacity: 1;
    }

    100% {
      transform: scale(0.95);
      opacity: 0;
    }
  }

  @keyframes search-element-slide-in-top {
    from {
      margin-top: calc(var(--modal-top-margin) + var(--padding-sm));
      opacity: 0;
    }

    to {
      margin-top: var(--modal-top-margin);
      opacity: 1;
    }
  }

  @keyframes search-element-slide-out-top {
    from {
      margin-top: var(--modal-top-margin);
      opacity: 1;
    }

    to {
      margin-top: calc(var(--modal-top-margin) + var(--padding-sm));
      opacity: 0;
    }
  }

  @keyframes content-slide {
    from {
      transform: translateY(var(--slide-from, 0));
      opacity: var(--slide-opacity-from, 1);
    }

    to {
      transform: translateY(var(--slide-to, 0));
      opacity: var(--slide-opacity-to, 1);
    }
  }

  .predictive-search-results__list {
    --slide-width: 27.5%;
    --slideshow-gap: var(--gap-md);

    /* Make space for the outline to be visible */
    padding-block-start: var(--border-width-sm);
  }

  .predictive-search-results__list slideshow-arrows {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .predictive-search-results__no-results,
  .predictive-search-results__wrapper,
  .predictive-search-results__wrapper-products .predictive-search-results__card {
    animation: search-element-slide-up var(--animation-speed-medium) var(--animation-timing-bounce) backwards;
  }

  slideshow-slide .resource-card {
    /* stylelint-disable-next-line declaration-no-important */
    animation-delay: 0ms !important;
  }

  .predictive-search-results__list,
  .predictive-search-results__wrapper {
    animation-duration: var(--animation-speed-medium);
  }

  .predictive-search-results__wrapper-queries {
    animation-delay: 50ms;
  }

  .predictive-search-results__list:nth-of-type(2) {
    animation-delay: 150ms;
  }

  .predictive-search-results__list:nth-of-type(3) {
    animation-delay: 200ms;
  }

  .predictive-search-results__list:nth-of-type(4) {
    animation-delay: 250ms;
  }

  .predictive-search-results__list:last-child {
    margin-block-end: 0;
  }

  [data-resource-type] {
    /* stylelint-disable-next-line declaration-no-important */
    animation-delay: 0ms !important;
  }

  .predictive-search-results__no-results.removing,
  .predictive-search-results__wrapper.removing {
    animation: search-element-slide-down var(--animation-speed-medium) var(--animation-timing-fade-out) forwards;
  }

  .predictive-search-results__card.removing {
    animation: fadeOut var(--animation-speed-medium) var(--animation-timing-fade-out) forwards;
  }

  .predictive-search-results__wrapper {
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-in);
  }

  @keyframes search-element-slide-up {
    from {
      opacity: 0;
      transform: translateY(8px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes search-element-slide-down {
    from {
      opacity: 1;
      transform: translateY(0);
    }

    to {
      opacity: 0;
      transform: translateY(8px);
    }
  }

  .predictive-search-results__card--query {
    transition: transform var(--animation-speed-medium) var(--animation-timing-bounce);
    transform-origin: center;

    &:active {
      transform: scale(0.97);
    }
  }

  /* Products list styles */
  .predictive-search-results__products {
    padding-inline: var(--padding-xl);
  }

  .recently-viewed-wrapper {
    display: grid;
    grid-template-rows: auto auto;
    max-height: 1000px;
    opacity: 1;
    overflow: visible;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: top center;
    transform: translateY(0);
  }

  .recently-viewed-wrapper.removing {
    max-height: 0;
    opacity: 0;
    transform: translateY(-10px);
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
  }

  .predictive-search-results__clear.button-unstyled {
    color: var(--color-foreground);
    opacity: 0.68;
    transition: opacity var(--animation-speed-medium) var(--animation-easing);
    padding: 0;
    margin-left: var(--margin-sm);

    &:hover {
      opacity: 1;
    }
  }

  .recently-viewed-wrapper.removing .predictive-search-results__card {
    transition: none;
    transform: none;
    opacity: 1;
  }

  .recently-viewed-wrapper > * {
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(1) {
    animation-delay: 30ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(2) {
    animation-delay: 60ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(3) {
    animation-delay: 90ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(4) {
    animation-delay: 120ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(n + 5) {
    animation-delay: 150ms;
  }

  .predictive-search-results__wrapper-products {
    animation-delay: 50ms;
  }

  /* Resource carousel styles */
  .predictive-search-results__wrapper {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    padding-block-end: var(--padding-sm);
    padding-inline: 0;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--padding-xl);
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .predictive-search-results__wrapper slideshow-slides {
    --gutter-slide-width: var(--padding-xl);

    /* Add padding to prevent hover animations from being clipped in slideshow
       15px accommodates:
       - Scale effect (9px on each side from 1.03 scale)
       - Lift effect (4px upward movement)
       - Shadow (15px spread with -5px offset)
       Using 16px for better alignment with our spacing scale */
    padding-block: var(--padding-xl);
    margin-block: calc(-1 * var(--padding-xl));
    gap: var(--gap-md);
  }

  .predictive-search-results__resource-header {
    display: flex;
    padding-inline: var(--padding-xl);
    justify-content: space-between;
    align-items: center;
    height: 32px;
  }

  .predictive-search-results__resource-header .svg-wrapper {
    width: var(--icon-size-xs);
  }

  .predictive-search-results__wrapper-products {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding-block-end: var(--padding-sm);
    gap: var(--gap-md);
    transition: height var(--animation-speed-medium) var(--animation-easing);

    @container (min-width: 550px) {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .predictive-search-results__wrapper-products:last-child {
    padding-block-end: var(--padding-lg);

    @media screen and (min-width: 750px) {
      padding-block-end: var(--padding-sm);
    }
  }

  .predictive-search-results__resource-header .predictive-search-results__title {
    margin-block-end: 0;
  }

  .predictive-search-results__resource-header:has(slideshow-controls) .predictive-search-results__title {
    margin-block-end: 0;
  }

  .predictive-search-results__resource-header slideshow-controls {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }
/* END_SNIPPET:predictive-search-styles */

/* START_SNIPPET:price-filter (INDEX:207) */
/* Price filter */
  .price-facet {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
  }
  .price-facet--horizontal {
    min-width: 360px;
  }

  .price-facet__inputs-wrapper {
    display: flex;
    flex-direction: row;
    padding: var(--style-border-width-inputs);
    gap: calc(var(--gap-sm) + (var(--style-border-width-inputs) * 2));
  }

  @container (max-width: 199px) {
    .price-facet__inputs-wrapper {
      flex-wrap: wrap;
    }
  }

  .price-facet__input {
    width: 100%;
    text-align: right;
    padding-left: calc(2.5 * var(--input-padding-x));
  }

  .price-facet__input::placeholder {
    color: var(--facets-input-label-color);
  }

  .price-facet__separator {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-paragraph--size);
  }

  .price-facet__highest-price {
    color: var(--color-foreground-muted);
    padding: var(--padding-xs) 0 var(--padding-sm);
  }

  .price-facet__highest-price--horizontal {
    padding: 0 var(--padding-md) var(--padding-xs);
  }

  .price-facet__label {
    top: 0;
    left: 0;
    color: var(--facets-input-label-color);
    padding: var(--input-padding-y) var(--input-padding-x);
    transform: none;
  }
/* END_SNIPPET:price-filter */

/* START_SNIPPET:product-badges-styles (INDEX:209) */
.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:210) */
.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:211) */
.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 (INDEX:212) */
.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;
  }

  /* Desplazamiento horizontal de la columna de información (se ajusta desde el
     editor, en la sección "Información del producto").
     Se hace con márgenes y no con transform a propósito: dentro de esta columna
     hay paneles con position: fixed —la tabla de tallas, por ejemplo— y un
     transform en el contenedor los rompería. El margen negativo del otro lado
     mantiene el ancho de la columna, así solo se mueve de sitio. */
  .product-details {
    margin-inline-start: var(--pd-shift, 0px);
    margin-inline-end: calc(-1 * var(--pd-shift, 0px));
    max-width: var(--pd-width, none);
  }

  @media screen and (max-width: 749px) {
    .product-details {
      margin-inline-start: var(--pd-shift-mobile, 0px);
      margin-inline-end: calc(-1 * var(--pd-shift-mobile, 0px));
      max-width: none;
    }
  }

  /* Con ancho máximo, la columna se estrecha y se queda pegada al borde
     derecho de su espacio; el desplazamiento sigue sumando desde ahí. */
  @media screen and (min-width: 750px) {
    .product-information--details-narrow .product-details {
      width: min(100%, var(--pd-width, 100%));
      max-width: none;
      margin-inline-start: auto;
      margin-inline-end: calc(-1 * var(--pd-shift, 0px));
    }
  }

  /* Si la columna se desplaza hacia fuera, la página no debe abrir barra de
     scroll horizontal. */
  .product-information {
    overflow-x: clip;
  }

  .product-information__media {
    order: 0;
    width: 0;
    min-width: 100%;
  }

  /* Extiende la foto del producto hasta el borde de la pantalla, solo en
     móvil. Se calcula con el ancho del viewport (100vw) y un margen negativo
     que la re-centra, técnica estándar para que un elemento "rompa" el
     contenedor con relleno (page-width) sin tocar el resto del layout.
     ".product-information" ya tiene "overflow-x: clip" (ver más abajo), así
     que esto no genera scroll horizontal en la página. */
  @media screen and (max-width: 749px) {
    .product-information__media--extend-mobile {
      width: 100vw;
      max-width: 100vw;
      margin-inline-start: calc(50% - 50vw);
      margin-inline-end: calc(50% - 50vw);
    }
  }

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

  /* El panel de detalles del producto (título/precio/talla/color/comprar)
     tiene que empezar a pegarse justo debajo del header + la barra de
     anuncios (marquee), no debajo del punto 0 de la pantalla — si no, el
     título queda escondido detrás del header en vez de arriba de todo.

     Se deja el offset puesto SIEMPRE (sin condición de ":has(...active)")
     a propósito: mientras la página no se haya scrolleado lo suficiente
     como para que el panel llegue a "engancharse" arriba, este valor no
     hace nada (el panel sigue en su lugar normal, más abajo en la página),
     así que no hay ningún riesgo en dejarlo fijo — y así no depende de
     detectar el instante exacto en que el header pasa a su estado
     "pegado", que es donde fallaba antes.

     "--header-group-height" en este tema NO incluye al header (lo excluye
     a propósito, ver header.js / theme.liquid), así que no sirve sola. Esta
     tienda además tiene una barra de anuncios (marquee) pegada arriba del
     header, que expone su propia altura en "--marquee-bar-height" (así es
     como el marquee le avisa al header cuánto bajar su sticky, ver
     marquee-bar.liquid), así que el offset real es la suma de las dos:
     header + marquee. */
  .product-details.sticky-content--desktop {
    --sticky-header-offset: calc(var(--header-height, 0px) + var(--marquee-bar-height, 0px));
  }

  /* Cuando el bloque de detalles (titulo, precio, variantes, botones, etc.)
     queda fijo (sticky) en escritorio y su contenido es mas alto que el
     espacio libre debajo del header, se le da scroll propio en vez de
     dejarlo cortado o forzar a scrollear toda la pagina para verlo entero.
     Solo en escritorio: en movil no aplica (ahi no es sticky). */
  @media screen and (min-width: 750px) {
    .product-details--scroll-desktop {
      max-height: calc(100vh - var(--sticky-header-offset, 0px));
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-width: thin;
    }
  }
/* END_SNIPPET:product-information-content */

/* START_SNIPPET:product-media-gallery-content-styles (INDEX:213) */
media-gallery:where(.media-gallery--grid) .media-gallery__grid {
    display: none;
  }

  media-gallery.media-gallery--grid .media-gallery__grid .product-media-container {
    /* Needed for safari to stretch to full grid height */
    height: 100%;
  }

  @media screen and (min-width: 750px) {
    .media-gallery--two-column .media-gallery__grid {
      grid-template-columns: repeat(2, 1fr);
    }

    /* Display grid view as a carousel on mobile, grid on desktop */
    media-gallery:is(.media-gallery--grid) slideshow-component {
      display: none;
    }

    media-gallery:where(.media-gallery--grid) .media-gallery__grid {
      display: grid;
    }
  }

  zoom-dialog dialog {
    width: 100vw;
    height: 100vh;
    border: none;
    margin: 0;
    padding: 0;
    max-width: 100%;
    max-height: 100%;
    background: #fff;
    opacity: 0;
    transition: opacity var(--animation-speed) var(--animation-easing);
    scrollbar-width: none;

    &[open] {
      opacity: 1;
    }

    @media (prefers-reduced-motion: no-preference) {
      scroll-behavior: smooth;
    }

    &::backdrop {
      background: transparent;
    }
  }

  .product-media-container__zoom-button {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: var(--layer-flat);
    cursor: zoom-in;
    background-color: transparent;

    &:hover {
      background-color: transparent;
    }
  }

  slideshow-slide.product-media-container--tallest {
    content-visibility: visible;
  }

  .product-media__drag-zoom-wrapper {
    aspect-ratio: inherit;
    min-height: inherit;
    min-width: inherit;
    display: inherit;
    flex: inherit;
  }

  .media-gallery__mobile-controls {
    grid-area: auto;
  }

  .product-media-container--zoomable.product-media-container--image {
    cursor: zoom-in;
  }
/* END_SNIPPET:product-media-gallery-content-styles */

/* START_SNIPPET:product-media-gallery-content (INDEX:214) */
.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:215) */
.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:216) */
.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:217) */
#quick-add-dialog {
    display: contents;
  }

  /* Inputs inside the quick-add modal use the global Input Fields settings,
     not any per-block overrides set on the product page. */
  .quick-add-modal .quantity-selector-wrapper {
    --color-input-background: inherit;
    --color-input-text: inherit;
    --color-input-text-rgb: inherit;
    --color-input-border: inherit;
    --style-border-width-inputs: inherit;
    --style-border-radius-inputs: inherit;
    --style-border-radius-buttons-primary: var(--style-border-radius-inputs);
    --style-border-radius-buttons-secondary: var(--style-border-radius-inputs);
  }

  .quick-add-modal .product-details .quantity-selector {
    border-radius: var(--style-border-radius-inputs);
  }

  @media screen and (min-width: 750px) {
    .quick-add-modal {
      width: var(--quick-add-modal-width);
      height: var(--quick-add-modal-height);
      max-width: none;
    }
  }

  .quick-add-modal {
    padding: 0;
    border: var(--style-border-popover);
    overflow: hidden;
    box-shadow: 0 5px 30px rgb(0 0 0 / var(--opacity-15));

    @media screen and (max-width: 749px) {
      position: fixed;
      margin: auto 0 0 0;
      min-height: unset;
      max-width: 100%;
      border-radius: 0;
      overflow: clip;
      height: fit-content;
    }
  }

  .quick-add-modal[open] {
    @media screen and (max-width: 750px) {
      border-top-left-radius: var(--style-border-radius-popover);
      border-top-right-radius: var(--style-border-radius-popover);
    }
  }

  .quick-add-modal[open] {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .quick-add-modal .view-more-details__wrapper {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .quick-add-modal[open] {
    animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .quick-add-modal.dialog-closing {
    animation: modalSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .quick-add-modal__close {
    position: absolute;
    top: var(--margin-2xs);
    right: var(--margin-2xs);
    transition: transform 0.15s var(--animation-timing-bounce);
    z-index: var(--layer-raised);
    overflow: visible;
    transform-origin: center;
  }

  .quick-add-modal__close:active {
    transform: scale(0.99) translateY(1px);
  }

  .quick-add-modal__close {
    &:focus-visible {
      outline: none;
    }

    &:focus-visible::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: calc(var(--style-border-radius-popover) - var(--margin-2xs));
      outline: var(--focus-outline-width) solid currentColor;
    }
  }

  .quick-add-modal__content {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: 100% 1fr;
    position: relative;
    overflow-y: auto;
    max-height: 100vh;
    flex-grow: 1;

    @media screen and (max-width: 749px) {
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: auto;
      padding-inline: var(--padding-xl);
      padding-block: var(--padding-xl);
      gap: var(--gap-lg);
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      height: auto; /* Prevent a bug in Safari where height:fit-content is not respected */
      max-height: 100vh;
    }
  }

  .quick-add-modal__content .media-gallery--grid .media-gallery__grid {
    grid-template-columns: 1fr;
  }

  .quick-add-modal__content .media-gallery--grid.media-gallery--two-column .product-media-container:first-child {
    grid-column: auto;
  }

  .quick-add-modal__content {
    /* One column */
    .media-gallery--grid:not(.media-gallery--two-column) .product-media > *,
      /* Two column, small first image */
      .media-gallery--grid.media-gallery--two-column:not(.media-gallery--large-first-image)
      .product-media-container:nth-of-type(odd)
      .product-media > *,
      /* Two column, large first image */
      .media-gallery--grid.media-gallery--two-column.media-gallery--large-first-image
        .product-media-container:is(:first-of-type, :nth-of-type(even))
        .product-media > *,
        /* Carousel */
      .media-gallery--carousel slideshow-container {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }

  .quick-add-modal__content .view-more-details__wrapper {
    display: flex;
    justify-content: flex-start;
    width: 100%;
  }

  .view-more-details__wrapper .view-more-details {
    display: flex;
    align-items: center;
    width: fit-content;
  }

  .quick-add-modal__content .product-header {
    @media screen and (max-width: 749px) {
      display: flex;
      flex-direction: column;
      grid-column: 2 / -1;
      grid-row: 1;
      padding-right: var(--padding-2xl);
    }
  }

  .quick-add-modal__content .product-header a:not(product-price *) {
    @media screen and (max-width: 749px) {
      font-size: var(--font-size--md);
      font-weight: 500;
      color: inherit;
      width: fit-content;
    }
  }

  .quick-add-modal__content variant-picker,
  .quick-add-modal__content product-form-component {
    @media screen and (max-width: 749px) {
      grid-column: 1 / -1;
    }
  }

  .quick-add-modal__content .product-media-container__zoom-button {
    cursor: default;
  }

  .quick-add-modal__content .product-details {
    grid-column: 4 / -1;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    position: relative;

    dialog[open] & {
      animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
      animation-delay: 0.1s;
    }

    @media screen and (max-width: 749px) {
      grid-column: 2 / span 2;
      grid-row: span 1;
      max-height: 100%;
      height: 100%;
    }
  }

  @property --quick-add-modal-mask-start {
    syntax: '<length>';
    initial-value: 0px;
    inherits: false;
  }

  @property --quick-add-modal-mask-end {
    syntax: '<length>';
    initial-value: 0px;
    inherits: true;
  }

  @keyframes detect-scroll {
    from,
    to {
      --can-scroll: ;
    }
  }

  @supports (animation-timeline: scroll(self)) {
    dialog[open] .quick-add-modal__content .product-details {
      mask-image: linear-gradient(to bottom, transparent 0%, #000 var(--quick-add-modal-mask-start), #000 100%);
      animation: 0.3s var(--animation-timing-fade-in) 0.1s both fadeSlideIn, scrollStart 1s linear both,
        scrollEnd 1s linear both, detect-scroll 1ms linear none;
      animation-timeline: auto, scroll(self), scroll(self), scroll(self);
      animation-range: normal, 0px 48px, calc(100% - 48px) 100%, 0% 100%;
    }
  }

  @keyframes scrollStart {
    from {
      --quick-add-modal-mask-start: 0px;
    }
    to {
      --quick-add-modal-mask-start: 48px;
    }
  }

  @keyframes scrollEnd {
    from {
      --quick-add-modal-mask-end: 0px;
    }
    to {
      --quick-add-modal-mask-end: 48px;
    }
  }

  .quick-add-modal__content .product-details > .group-block {
    flex-grow: 1;
    width: auto;
  }

  .quick-add-modal__content > * {
    min-height: 0;
  }

  .quick-add-modal__content .product-details :is(.view-product-title, .buy-buttons-block) {
    flex: 0 0 auto;
  }
  .quick-add-modal__content .product-details :is(.buy-buttons-block) {
    margin-top: auto;
    position: sticky;
    bottom: 0;
    padding-bottom: var(--padding-3xl);
    background-color: var(--color-background);
    z-index: var(--layer-raised);

    &::before {
      --quick-add-modal-mask-end-progressive-enhanced: 0px;

      position: absolute;
      content: '';
      display: block;
      inset: auto 0 100% 0;
      pointer-events: none;
      height: min(var(--gap-2xl), var(--gap));
      background-color: inherit;
      mask-image: linear-gradient(
        to top,
        #000 0%,
        #000 calc(var(--gap-2xs)),
        transparent calc(100% - var(--quick-add-modal-mask-end-progressive-enhanced)),
        transparent
      );
    }
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) {
    position: static;
    padding-bottom: 0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) > product-form-component {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) form {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form)::before {
    display: none;
  }

  .quick-add-modal__content .product-details .buy-buttons-block__bar {
    display: block;
    position: sticky;
    bottom: 0;
    margin-top: auto;
    padding-block: var(--gap-md) var(--padding-3xl);
    background-color: var(--color-background);
    z-index: var(--layer-raised);

    &::before {
      --quick-add-modal-mask-end-progressive-enhanced: 0px;

      position: absolute;
      content: '';
      display: block;
      inset: auto 0 100% 0;
      pointer-events: none;
      height: min(var(--gap-2xl), var(--gap));
      background-color: inherit;
      mask-image: linear-gradient(
        to top,
        #000 0%,
        #000 calc(var(--gap-2xs)),
        transparent calc(100% - var(--quick-add-modal-mask-end-progressive-enhanced)),
        transparent
      );
    }
  }

  @supports (animation-timeline: scroll(self)) {
    .quick-add-modal__content .product-details :is(.buy-buttons-block)::before,
    .quick-add-modal__content .product-details .buy-buttons-block__bar::before {
      --mask-if-scroll: var(--can-scroll) var(--quick-add-modal-mask-end);
      --mask-if-no-scroll: 48px;
      --quick-add-modal-mask-end-progressive-enhanced: var(--mask-if-scroll, var(--mask-if-no-scroll));
      height: calc(var(--gap-2xs) + 48px);
    }
  }

  .quick-add-modal__content .product-details .variant-picker {
    flex: 0 0 auto;

    padding-block: min(var(--gap-2xl), var(--gap));
    margin-block-end: calc(var(--focus-outline-offset) + var(--focus-outline-width));
  }

  .quick-add-modal__content .variant-option--swatches {
    padding-inline-start: var(--padding-2xs);
  }

  .quick-add-modal__content .variant-option--swatches legend {
    margin-inline-start: calc(-1 * var(--padding-2xs));
  }

  .quick-add-modal__content:not(:has(.product-information__media)) .product-details {
    grid-column: 1 / -1;
  }

  .quick-add-modal__content .view-product-title {
    display: flex;
    padding-block: 0;
    margin-block-end: 12px;

    /* Prevent overlap between title and close button */
    padding-inline-end: calc(var(--padding-2xl) + calc(var(--minimum-touch-target) / 2));
  }

  .quick-add-modal__content .view-product-title a {
    color: inherit;
    text-decoration: none;
    text-align: left;
    font-size: var(--font-size--2xl);
    font-weight: 600;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s var(--animation-easing);
  }

  .quick-add-modal__content .product-details product-price {
    --text-align: left;
  }

  .quick-add-modal__content .product-details product-price.text-block--align-center {
    margin-inline: 0;
  }

  .quick-add-modal__content .product-details product-price.text-center {
    --text-align: left;
  }

  .quick-add-modal__content .product-details product-price > * {
    text-align: left;
  }

  .quick-add-modal__content
    .product-details
    *:not(
      .group-block,
      .group-block-content,
      .buy-buttons-block,
      .buy-buttons-block *,
      .view-product-title,
      .view-product-title *,
      variant-picker,
      variant-picker *,
      product-price,
      product-price *,
      product-inventory,
      product-inventory *,
      .view-more-details__wrapper,
      .view-more-details__wrapper *
    ) {
    @media screen and (min-width: 750px) {
      /* stylelint-disable-next-line declaration-no-important */
      display: none !important;
    }
  }

  .quick-add-modal__content
    .group-block:not(
      :has(
          .buy-buttons-block,
          .buy-buttons-block *,
          .view-product-title,
          .view-product-title *,
          variant-picker,
          variant-picker *,
          product-price,
          product-price *,
          product-inventory,
          product-inventory *,
          .view-more-details__wrapper,
          .view-more-details__wrapper *
        ),
      .buy-buttons-block
    ) {
    display: none;
  }

  @media screen and (min-width: 750px) {
    .quick-add-modal__content .group-block-content {
      gap: 0;
    }

    .quick-add-modal__content .media-gallery__grid {
      gap: min(var(--gap-2xs), var(--image-gap));
      border-radius: var(--style-border-radius-popover, 0);
    }

    .quick-add-modal__content .media-gallery--grid .product-media img {
      border-radius: 0;
    }
  }

  .quick-add-modal__content .product-details > .group-block {
    padding-block: var(--padding-3xl) 0;
  }

  .quick-add-modal__content :where(.product-details > .group-block > .group-block-content > *) {
    padding-inline: var(--padding-3xl);
  }

  .quick-add-modal__content slideshow-slide:not([aria-hidden='false']) {
    content-visibility: auto;
  }

  .quick-add-modal__content .product-information__media {
    width: 100%;
    grid-column: 1 / span 1;
    grid-row: 1;
    position: relative;
    top: 0;
    animation: fadeIn 0.4s var(--animation-timing-fade-in) both;

    @media screen and (min-width: 750px) {
      position: sticky;
      grid-column: 1 / 4;
      width: var(--quick-add-modal-gallery-width);
      overflow-y: auto;
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .quick-add-modal__content .product-information__media media-gallery {
    pointer-events: none;

    @media screen and (min-width: 750px) {
      position: absolute;
      inset: 0;
    }
  }

  .quick-add-modal media-gallery {
    padding: 0;
  }

  .quick-add-modal__content .product-information__media slideshow-arrows {
    display: none;
  }

  .quick-add-modal__content .product-information__media slideshow-container {
    display: block;
  }

  .quick-add-modal__content .product-information__media slideshow-slides {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
    overflow: visible;
    scroll-snap-type: none;
  }

  .quick-add-modal__content .product-information__media slideshow-slide {
    width: 100%;
    flex: none;
    scroll-snap-align: unset;
    position: relative;
    transform: none;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s var(--animation-easing);
  }

  .quick-add-modal__content .product-information__media slideshow-slide[aria-hidden='true'] {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(1) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(2) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
    animation-delay: 0.05s;
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(3) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
    animation-delay: 0.1s;
  }

  .quick-add-modal__content .product-information__media :is(slideshow-controls, slideshow-controls[thumbnails]) {
    display: none;
  }

  .quick-add-modal__content .sticky-content,
  .quick-add-modal__content .sticky-content--desktop {
    top: 0;
  }

  .quick-add-modal__content .text-block.rte:not(product-price),
  .quick-add-modal__content .view-more-details__wrapper {
    display: none;
  }

  @keyframes fadeSlideIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
/* END_SNIPPET:quick-add-modal-styles */

/* START_SNIPPET:quick-add-styles (INDEX:219) */
/* 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;
  }

  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(--quick-add-foreground, var(--color-foreground));
    background-color: var(--quick-add-background, var(--color-background));
    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(--quick-add-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:223) */
.resource-card__wrapper {
    display: block;
    height: 100%;
  }

  .resource-card {
    --resource-card-secondary-image-opacity: 0;
    --resource-card-primary-image-opacity: calc(1 - var(--resource-card-secondary-image-opacity));

    display: flex;
    flex-direction: column;
    row-gap: var(--padding-xs);
    position: relative;
    text-decoration: none;
    height: 100%;
    opacity: 0;
    animation: fadeIn var(--animation-speed-medium) var(--animation-timing-fade-in) forwards;
  }

  .resource-card__link {
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  .resource-card__content {
    display: flex;
    flex-direction: column;
    color: var(--color-foreground);
    gap: var(--padding-3xs);

    .price {
      font-weight: 500;
    }

    .volume-pricing-note {
      display: block;
      margin-top: var(--padding-3xs);
      font-family: var(--font-body--family);
      font-weight: normal;
      font-size: min(0.85em, var(--font-paragraph--size));
      line-height: normal;
      letter-spacing: normal;
      text-transform: none;
      color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
    }
  }

  .resource-card[data-resource-type='article'] .resource-card__content,
  .resource-card[data-resource-type='page'] .resource-card__content {
    gap: var(--padding-xs);
  }

  .resource-card__image {
    aspect-ratio: var(--resource-card-aspect-ratio, auto);
    object-fit: cover;
    border-radius: var(--resource-card-corner-radius);
    opacity: var(--resource-card-primary-image-opacity);
  }

  .resource-card__image--secondary {
    position: absolute;
    top: 0;
    opacity: var(--resource-card-secondary-image-opacity);
    border-radius: var(--resource-card-corner-radius);
  }

  .resource-card__media {
    position: relative;
  }

  .resource-card__media:empty {
    display: none;
  }

  .resource-card__image-placeholder {
    padding: var(--padding-sm);
    font-size: var(--font-size--lg);
    line-height: var(--line-height--display-loose);
    word-break: break-word;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    aspect-ratio: var(--resource-card-aspect-ratio, auto);
    border-radius: var(--resource-card-corner-radius);
    color: var(--color-foreground);
  }

  .resource-card__title {
    margin-block: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: 1.3;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .resource-card__title.paragraph {
    line-height: 1.3;
  }

  .resource-card--overlay {
    height: 100%;

    &::before {
      content: '';
      position: absolute;
      inset: 50% 0 0;
      background: var(--gradient-image-overlay);
      border-radius: var(--resource-card-corner-radius);
      pointer-events: none;
      z-index: var(--layer-flat);
    }
  }

  .resource-card--overlay .resource-card__image {
    height: 100%;
  }

  .resource-card--overlay .resource-card__content {
    position: absolute;
    inset: auto 0 0;
    padding: var(--padding-lg) var(--padding-lg) var(--padding-sm);
    z-index: var(--layer-raised);
  }

  .resource-card--overlay .resource-card__title {
    color: var(--color-white);
  }

  /* Collection images */
  .resource-card__image-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap-2xs);
  }

  .resource-card__collection-image {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: calc(var(--card-corner-radius) - (var(--padding-xs) / 2));
  }

  .resource-card__subtext {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
    margin-block-start: 0;
  }

  .resource-card__subtext.paragraph {
    font-size: var(--font-size--body-sm);
    line-height: var(--line-height--body-tight);
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .resource-card:has(.resource-card__image--secondary) {
    &:hover,
    &:focus {
      --resource-card-secondary-image-opacity: 1;
    }
  }

  /* Circulos de variantes disponibles (solo visual) sobre la foto.
     El tamaño y la separacion son configurables desde Ajustes del tema >
     Búsqueda > "Círculos de variantes en los resultados de búsqueda"
     (settings.search_variant_swatch_size / search_variant_swatch_gap),
     via las variables --search-swatch-size / --search-swatch-gap que trae
     cada tarjeta en su propio style="" (arriba en este mismo archivo). */
  .resource-card__variant-swatches {
    position: absolute;
    top: var(--padding-2xs);
    left: var(--padding-2xs);
    z-index: var(--layer-raised);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--search-swatch-gap, 4px);
    max-width: calc(100% - (2 * var(--padding-2xs)));
    /* Puramente decorativo: nunca intercepta clics ni toques, siempre
       pasan de largo hasta el enlace de la tarjeta. */
    pointer-events: none;
  }

  .resource-card__variant-swatches .swatch {
    /* Se fuerza el tamaño y el circulo perfecto aqui (en vez de heredar el
       tamaño/radio del selector de variantes de producto) para que sean
       circulos de verdad, sin importar la forma que tengan los swatches en
       el resto de la tienda, y para que el tamaño se pueda ajustar aparte. */
    width: var(--search-swatch-size, 16px) !important;
    height: var(--search-swatch-size, 16px) !important;
    border-radius: 50% !important;
    box-shadow: 0 0 0 1px rgb(var(--color-background-rgb) / var(--opacity-80));
  }

  .resource-card__variant-swatches-more {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--search-swatch-size, 16px);
    height: var(--search-swatch-size, 16px);
    border-radius: 50%;
    background-color: rgb(var(--color-background-rgb) / var(--opacity-80));
    color: var(--color-foreground);
    font-size: 9px;
    line-height: 1;
  }
/* END_SNIPPET:resource-card */

/* START_SNIPPET:resource-image (INDEX:224) */
.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:225) */
.resource-list__carousel {
    --slide-width: 60vw;
    width: 100%;
    position: relative;
    container-type: inline-size;
    container-name: resource-list-carousel;

    .slideshow-control[disabled] {
      display: none;
    }

    .slideshow-control--next {
      margin-inline-start: auto;
    }
  }

  @container resource-list-carousel (max-width: 749px) {
    .resource-list__carousel .resource-list__slide {
      --slide-width: clamp(150px, var(--mobile-card-size, 60cqw), var(--slide-width-max));
    }
  }

  @container resource-list-carousel (min-width: 750px) {
    .resource-list__carousel .resource-list__slide {
      --section-slide-width: calc(
        (100% - (var(--resource-list-column-gap) * (var(--column-count) - 1)) - var(--peek-next-slide-size)) /
          var(--column-count)
      );
      --fallback-slide-width: clamp(150px, var(--mobile-card-size, 60cqw), var(--slide-width-max));
      --slide-width: var(--section-slide-width, var(--fallback-slide-width));
    }
  }

  .resource-list__carousel slideshow-slides {
    gap: var(--resource-list-column-gap);

    /* Add padding to prevent hover animations from being clipped in slideshow
     15px accommodates:
     - Scale effect (9px on each side from 1.03 scale)
     - Lift effect (4px upward movement)
     - Shadow (15px spread with -5px offset)
     Using 16px for better alignment with our spacing scale */
    margin-block: -16px;
    padding-block: 16px;
  }

  .resource-list__carousel slideshow-arrows {
    padding-inline: var(--util-page-margin-offset);
  }

  .resource-list__carousel .resource-list__slide {
    width: var(--slide-width);
    flex: 0 0 auto;
    scroll-snap-align: start;
    min-width: 0;
  }

  /*
   * Resource list carousels have peeking slides on both sides.
   * We try to kick load them beforehand (they are lazy loaded otherwise).
   */
  .resource-list__carousel
    :is(
      slideshow-slide:has(+ slideshow-slide[aria-hidden='false']),
      slideshow-slide[aria-hidden='false'] + slideshow-slide
    ) {
    content-visibility: auto;

    slideshow-component[actioned] & {
      content-visibility: visible;
    }
  }
/* END_SNIPPET:resource-list-carousel */

/* START_SNIPPET:resource-list-styles (INDEX:226) */
.resource-list {
    --resource-list-mobile-gap-max: 9999px;
    --resource-list-column-gap: min(var(--resource-list-column-gap-desktop), var(--resource-list-mobile-gap-max));
    --resource-list-row-gap: min(var(--resource-list-row-gap-desktop), var(--resource-list-mobile-gap-max));

    width: 100%;

    @media screen and (max-width: 749px) {
      --resource-list-mobile-gap-max: 12px;
    }

    @container resource-list (max-width: 749px) {
      --resource-list-mobile-gap-max: 12px;
    }
  }

  .resource-list--grid {
    display: grid;
    gap: var(--resource-list-row-gap) var(--resource-list-column-gap);
    grid-template-columns: var(--resource-list-columns-mobile);

    @media screen and (min-width: 750px) {
      grid-template-columns: var(--resource-list-columns);
    }

    @container resource-list (max-width: 449px) {
      grid-template-columns: var(--resource-list-columns-mobile);
    }

    @container resource-list(min-width: 450px) and (max-width: 749px) {
      --resource-list-columns-per-row: 3;

      grid-template-columns: repeat(var(--resource-list-columns-per-row), 1fr);

      /* Avoid orphan in last row when there are 4, 7, or 10 items */
      &:has(.resource-list__item:first-child:nth-last-child(3n + 1)),
      /* Clean two full rows when there are 8 items */
      &:has(.resource-list__item:first-child:nth-last-child(8n)) {
        --resource-list-columns-per-row: 4;
      }
    }

    @container resource-list (min-width: 750px) {
      grid-template-columns: repeat(var(--resource-list-columns-per-row), 1fr);

      &:has(.resource-list__item:first-child:nth-last-child(n + 9)) {
        --resource-list-columns-per-row: 5;
      }

      &:has(.resource-list__item:first-child:nth-last-child(n + 7):nth-last-child(-n + 8)) {
        --resource-list-columns-per-row: 4;
      }

      &:has(.resource-list__item:first-child:nth-last-child(6)) {
        --resource-list-columns-per-row: 3;
      }

      &:has(.resource-list__item:first-child:nth-last-child(5)) {
        --resource-list-columns-per-row: 5;
      }

      &:has(.resource-list__item:first-child:nth-last-child(-n + 4)) {
        --resource-list-columns-per-row: 4;
      }
    }

    @container resource-list (min-width: 1200px) {
      &:has(.resource-list__item:first-child:nth-last-child(6)) {
        --resource-list-columns-per-row: 6;
      }
    }
  }

  .resource-list__item {
    height: 100%;
    color: var(--color-foreground);
    text-decoration: none;
  }
/* END_SNIPPET:resource-list-styles */

/* START_SNIPPET:search-modal (INDEX:229) */
/* Search modal style */
  .search-modal {
    --search-border-radius: var(--style-border-radius-popover);
    --search-border-width: var(--style-border-width);
  }

  .search-modal__content {
    /* Approx set the top so when the content is at max height, the modal is centered */
    --modal-top-margin: calc(50dvh - var(--modal-max-height) / 2 - 2rem);
    --modal-width: 66dvw;

    padding: 0;
    border: var(--style-border-popover);

    @media screen and (min-width: 750px) {
      width: var(--modal-width);
      margin-block-start: var(--modal-top-margin);
      overflow: hidden;
    }
  }

  /* Hide the default dialog backdrop on small screens */
  @media screen and (max-width: 749px) {
    .search-modal__content::backdrop {
      display: none;
    }
  }

  .dialog-modal[open].search-modal__content {
    transform-origin: bottom center;
    animation: search-element-slide-in-bottom 300ms var(--ease-out-quad) forwards;
    border-radius: var(--search-border-radius);
    box-shadow: var(--shadow-popover);

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

  .dialog-modal.search-modal__content.dialog-closing {
    animation: search-element-slide-out-bottom 200ms var(--ease-out-quad) forwards;
  }

  .search-modal__content[open] {
    display: flex;
  }

  .search-modal__content :is(.predictive-search-dropdown, .predictive-search-form__content-wrapper) {
    position: relative;
  }

  .dialog-modal
    .predictive-search-form__header:has(
      .predictive-search__reset-button:not(.predictive-search__reset-button[hidden])
    )::before {
    content: '';
    position: absolute;
    right: calc(var(--padding-sm) + var(--minimum-touch-target));
    top: 0;
    bottom: 0;
    width: var(--border-width-sm);
    background-color: var(--color-border);
  }

  .dialog-modal
    .predictive-search-form__header:has(.predictive-search__reset-button:not(.predictive-search__reset-button[hidden]))
    > .predictive-search__close-modal-button {
    &::before {
      content: none;
    }
  }

  @media screen and (min-width: 750px) {
    .dialog-modal
      .predictive-search-form__header:has(
        .predictive-search__reset-button:not(.predictive-search__reset-button[hidden])
      )::before {
      right: calc(var(--padding-2xl) * 2);
    }
  }

  predictive-search-component {
    --resource-card-corner-radius: var(--product-corner-radius);

    display: flex;
    width: 100%;
    position: relative;
    margin-inline: auto;
    align-items: center;
    background-color: var(--color-background);
    z-index: var(--layer-heightened);
  }

  .predictive-search-form__footer {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;

    @media screen and (min-width: 750px) {
      --to-top-gradient-background: linear-gradient(
        to top,
        rgb(var(--color-background-rgb) / var(--opacity-90)),
        rgb(var(--color-background-rgb) / var(--opacity-80)),
        rgb(var(--color-background-rgb) / var(--opacity-40)),
        transparent
      );

      padding-block: var(--padding-xs) var(--padding-lg);
      background-image: var(--to-top-gradient-background);
    }
  }

  predictive-search-component:has([data-search-results]):not(:has(.predictive-search-results__no-results))
    .predictive-search-form__footer {
    display: block;
  }

  .predictive-search-form {
    position: relative;
    width: 100%;
    align-self: flex-start;
  }

  .predictive-search-form__content {
    max-height: 50dvh;
    overflow-y: auto;
    background-color: var(--color-background);

    /* Firefox */
    scrollbar-width: none;

    /* Webkit browsers */
    &::-webkit-scrollbar {
      display: none;
    }
  }

  .predictive-search-form__content-wrapper {
    position: absolute;
    top: 100%;
    width: 100%;
    left: 0;
    z-index: var(--layer-raised);
    display: flex;
    flex-direction: column;
    border-radius: 0 0 var(--search-border-radius) var(--search-border-radius);
    transition: box-shadow var(--animation-speed) var(--animation-easing);
    transform: translateZ(0);
    overflow: hidden;

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

    @media screen and (min-width: 750px) {
      max-height: var(--modal-max-height);
    }
  }

  /* Add new rule to apply bottom padding only when search button exists */
  .predictive-search-form__content-wrapper:has([data-search-results]):not(:has(.predictive-search-results__no-results))
    > .predictive-search-form__content {
    padding-block-end: var(--padding-6xl);
  }

  .predictive-search-form__header-inner {
    background: var(--color-background);
    border: var(--search-border-width) solid var(--color-border);
    color: var(--color-foreground);
    border-radius: var(--style-border-radius-popover);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;

    @media screen and (max-width: 749px) {
      border-radius: var(--style-border-radius-inputs);
      border: none;
    }
  }

  .predictive-search-form__header-inner:focus-within {
    outline-offset: var(--focus-outline-offset);

    @media screen and (min-width: 750px) {
      outline: var(--focus-outline-width) solid var(--color-foreground);
    }
  }

  .predictive-search-form__header {
    display: flex;
    position: sticky;
    top: 0;
    z-index: var(--layer-heightened);
    width: 100%;
    align-items: center;
    background-color: var(--color-input-background);
    border: var(--search-border-width) solid var(--color-border);
    border-radius: var(--style-border-radius-inputs);

    @media screen and (max-width: 749px) {
      padding: var(--padding-2xs) var(--padding-sm);
    }
  }

  .predictive-search-form__header:focus-within,
  .predictive-search-form__header-inner:focus-within,
  .predictive-search-form__header-inner:has(.search-input:is(:focus, :focus-visible)) {
    outline: none;
    box-shadow: none;
    /* stylelint-disable-next-line declaration-no-important */
    border-color: var(--color-border) !important;
  }

  input.search-input {
    border-radius: var(--style-border-radius-inputs);
    padding-block: var(--padding-sm);
    font-size: var(--font-size--md);
    width: 100%;
    color: var(--color-foreground);
    padding-inline: calc(var(--margin-lg) + var(--icon-size-lg)) 0;
    background: transparent;
    text-overflow: ellipsis;
    overflow: hidden;
    outline: none;
    border: 0;
  }

  input.search-input::placeholder {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-muted-text));
  }

  input.search-input,
  input.search-input:is(:focus, :focus-visible, :focus-within),
  .predictive-search-form__header *:is(:focus, :focus-visible) {
    outline: none;
    box-shadow: none;
  }

  input.search-input:hover {
    background-color: transparent;
  }

  .predictive-search__icon {
    position: absolute;
    left: var(--margin-xl);
    top: auto;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-60));

    @media screen and (min-width: 750px) {
      left: var(--margin-md);
    }
  }

  .predictive-search__icon > svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  .predictive-search__reset-button {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    padding: 0;
    margin-inline-end: var(--margin-md);
    background: transparent;
    color: var(--color-foreground);
    opacity: 0.68;
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-out),
      visibility var(--animation-speed-medium) var(--animation-timing-fade-out);

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

    &:active {
      transform: scale(0.9);
      transition: transform 100ms var(--animation-timing-active);
    }

    @media screen and (min-width: 750px) {
      margin-inline-end: var(--margin-2xs);
    }
  }

  .predictive-search__reset-button[hidden] {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }

  .predictive-search__reset-button-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    transition: background-color var(--animation-speed-medium) ease-in-out,
      transform var(--animation-speed-medium) var(--animation-timing-bounce);
    border-radius: 50%;

    &:hover {
      background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
    }
  }

  .predictive-search__reset-button:active .predictive-search__reset-button-icon {
    transform: scale(0.85);
    transition-timing-function: var(--animation-timing-active);
    transition-duration: 100ms;
  }

  .predictive-search__reset-button svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  .predictive-search__reset-button-text {
    display: none;
  }

  .predictive-search__search-button {
    margin: auto;
    z-index: var(--layer-raised);
    transition: transform var(--animation-speed-medium) var(--animation-timing-bounce),
      box-shadow var(--animation-speed-medium) var(--animation-timing-hover);
    transform-origin: center;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgb(0 0 0 / var(--opacity-5));
    }

    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
      box-shadow: none;
    }
  }

  .predictive-search__close-modal-button {
    --button-color: var(--color-foreground);
    --button-background-color: transparent;

    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    margin-inline-start: var(--margin-sm);
    padding: 0;
    box-shadow: none;

    &:active {
      transform: scale(0.8);
      transition: transform 100ms var(--animation-timing-active);
    }

    .svg-wrapper,
    svg {
      width: var(--icon-size-xs);
      height: var(--icon-size-xs);
    }
  }

  .predictive-search__close-modal-button:hover {
    --button-color: var(--color-foreground);
    --button-background-color: transparent;
  }

  /* ---------- Personalización: panel de búsqueda sin bordes redondeados ----------
     Se anulan todos los border-radius del panel/modal de búsqueda (escritorio y
     móvil), sin tocar el radio de las tarjetas de producto/colección de dentro. */
  .search-modal {
    --search-border-radius: 0;
  }

  .dialog-modal[open].search-modal__content,
  .predictive-search-form__content-wrapper,
  .predictive-search-form__header,
  .predictive-search-form__header-inner,
  input.search-input {
    border-radius: 0 !important;
  }

  /* ---------- Personalización: ocultar el botón "Ver todo" ----------
     Lleva a la página de resultados de búsqueda, que no está bien configurada.
     Se oculta en escritorio y en móvil; el resto del panel sigue funcionando
     igual (buscar, ver resultados dentro del propio panel, etc). */
  .predictive-search-form__footer {
    display: none !important;
  }

  .predictive-search-form__content-wrapper:has([data-search-results]):not(:has(.predictive-search-results__no-results))
    > .predictive-search-form__content {
    padding-block-end: 0 !important;
  }

  /* ---------- Personalización: cuadrícula de productos a 3 filas + scroll ----------
     Cuando una búsqueda de texto trae más productos de los que caben en 3
     filas, la altura máxima (calculada en JS, en predictive-search.js) deja
     ver hasta 3 filas completas y el resto queda accesible con scroll DENTRO
     de la propia cuadrícula, sin salir del panel. Con pocos resultados no se
     aplica ningún límite (JS no fija max-height y esto no hace nada). */
  .predictive-search-results__wrapper-products {
    scrollbar-width: thin;
  }

  /* ---------- Personalización: botón "Continuar en {tipo}" ----------
     Aparece solo cuando una búsqueda trae más de 50 productos coincidentes
     (el máximo que permite el buscador normal de Shopify por página) y lleva
     al catálogo filtrado por el tipo de producto más común entre los
     resultados mostrados, en vez de a una página de resultados rota. */
  .predictive-search-results__overflow {
    display: flex;
    justify-content: center;
    padding-block: var(--padding-lg);
  }

  .predictive-search-results__overflow-button {
    width: 100%;
    max-width: 320px;
    text-align: center;
  }
/* END_SNIPPET:search-modal */

/* START_SNIPPET:search (INDEX:230) */
.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:231) */
.section-wrapper {
    --section-height-offset: 0px;
  }

  .section[data-shopify-visual-preview] {
    min-height: var(--section-preview-height);
    padding-top: 0;
  }

  .section[data-shopify-visual-preview] .custom-section-background {
    display: none;
  }

  body:has(#header-group > .header-section > #header-component[transparent]):not(
      :has(#header-group > .header-section + .shopify-section)
    )
    #MainContent
    > .section-wrapper:first-child {
    --section-height-offset: var(--header-group-height, 0);
  }

  .custom-section-background {
    grid-column: 1 / -1;
  }

  .custom-section-content {
    z-index: var(--layer-flat);
  }
/* END_SNIPPET:section */

/* START_SNIPPET:skip-to-content-link (INDEX:233) */
.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:235) */
.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:236) */
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:237) */
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:239) */
/*
   * 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:241) */
.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-component-shimmer-styles (INDEX:249) */
text-component {
    --shimmer-text-color: rgb(var(--color-foreground-rgb) / var(--opacity-50));
    --shimmer-color-light: rgb(var(--color-foreground-rgb) / var(--opacity-10));
    --shimmer-speed: 1.25s;

    display: inline-block;
    position: relative;
    transition: color var(--animation-speed-slow) ease;
    line-height: 1;

    &::after {
      /* Empty alt text: the pseudo-element is a visual shimmer overlay, not announceable content.
        Without this, VoiceOver reads attr(value) in addition to the inner text node, doubling the announcement. */
      content: attr(value) / '';
      position: absolute;
      inset: 0;
      color: transparent;
      opacity: 0;
      transition: opacity var(--animation-speed-slow) var(--animation-easing);
      pointer-events: none;
      background-image: linear-gradient(
        -85deg,
        var(--shimmer-text-color) 10%,
        var(--shimmer-color-light) 50%,
        var(--shimmer-text-color) 90%
      );
      background-clip: text;
      background-size: 200% 100%;
      background-position: 100% 0;
      place-content: center;
    }

    &[shimmer] {
      color: transparent;

      &::after {
        opacity: 1;
        animation: text-shimmer var(--shimmer-speed) infinite linear;
      }
    }
  }

  @keyframes text-shimmer {
    0% {
      background-position: 100% 0;
    }

    100% {
      background-position: -100% 0;
    }
  }
/* END_SNIPPET:text-component-shimmer-styles */

/* START_SNIPPET:text (INDEX:250) */
:root {
    --text-align-default: left;
  }

  [style*='--horizontal-alignment: center'] .text-block {
    --text-align-default: center;
  }

  [style*='--horizontal-alignment: flex-end'] .text-block {
    --text-align-default: right;
  }

  [style*='--horizontal-alignment: flex-start'] > .text-block {
    --text-align-default: left;
  }

  [style*='--horizontal-alignment: center'] > .text-block {
    --text-align-default: center;
  }

  [style*='--horizontal-alignment: flex-end'] > .text-block {
    --text-align-default: right;
  }

  .text-block {
    width: var(--width);
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: var(--horizontal-alignment);
    color: var(--color, var(--color-foreground));
  }

  .text-block > * {
    width: var(--width);
    max-inline-size: min(100%, var(--max-width, 100%));
    text-align: var(--text-align, var(--text-align-default));
    text-wrap: var(--text-wrap);
  }

  .text-block:not(.text-block--full-width).rte,
  .text-block:not(.text-block--full-width).paragraph {
    /* Safari doesn't support pretty, so fallback to balance */
    text-wrap: balance;
    text-wrap: pretty;
  }

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

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

    &:hover {
      text-decoration-line: none;
      color: currentColor;
    }
  }

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

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

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

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

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

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

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

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

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

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

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

  .text-block--background {
    background-color: var(--text-background-color);
    border-radius: var(--text-corner-radius);

    /* To avoid text being cropped when using a border radius we add a minimum padding. */
    padding-block-start: max(var(--text-padding), var(--padding-block-start, 0));
    padding-block-end: max(var(--text-padding), var(--padding-block-end, 0));
    padding-inline-start: max(var(--text-padding), var(--padding-inline-start, 0));
    padding-inline-end: max(var(--text-padding), var(--padding-inline-end, 0));
  }

  .custom-color,
  .custom-color > :is(h1, h2, h3, h4, h5, h6, p, *) {
    color: var(--color);
  }
/* END_SNIPPET:text */

/* START_SNIPPET:theme-drawer-styles (INDEX:252) */
theme-drawer {
    display: contents;
  }

  .theme-drawer__dialog {
    --theme-drawer-padding: var(--padding-xl);

    z-index: calc(var(--layer-sticky) + var(--drawer-stack-order, 0));
    position: fixed;
    inset: unset;
    top: 0;
    right: calc(-1 * var(--theme-drawer-width, var(--sidebar-width)));
    flex-direction: column;
    width: var(--theme-drawer-width, var(--sidebar-width));
    max-width: 100%;
    max-height: none;
    height: 100dvh;
    padding: 0;
    border: none;
    border-left: var(--style-border-drawer);
    background-color: var(--color-background);
    color: var(--color-foreground);
  }

  .theme-drawer__dialog[open] {
    display: flex;
    right: 0;
  }

  .theme-drawer__dialog--opening {
    animation: drawer-slide-in var(--animation-speed) var(--animation-timing-fade-in);
  }

  .theme-drawer__dialog--opening-inline-start {
    animation: drawer-slide-in-inline-start var(--animation-speed) var(--animation-timing-fade-in);
  }

  .theme-drawer__dialog--closing {
    animation: drawer-slide-out var(--animation-speed) var(--animation-timing-fade-out) forwards;
  }

  .theme-drawer__dialog-instant {
    animation: none;
  }

  @keyframes drawer-slide-in {
    from {
      right: calc(-1 * var(--theme-drawer-width, var(--sidebar-width)));
    }
  }

  @keyframes drawer-slide-in-inline-start {
    from {
      right: calc(var(--theme-drawer-width, var(--sidebar-width)) / 2);
    }
  }

  @keyframes drawer-slide-out {
    to {
      right: calc(-1 * var(--theme-drawer-width, var(--sidebar-width)));
    }
  }

  .theme-drawer__dialog::backdrop {
    background: rgb(var(--backdrop-color-rgb) / var(--backdrop-opacity));
  }

  /* Exclude open drawers from the page navigation cross-fade so they
     stay frozen (visually unchanged) while the rest of the page transitions. */
  html:active-view-transition-type(page-navigation) .theme-drawer__dialog[open] {
    view-transition-name: theme-drawer;
  }

  ::view-transition-old(theme-drawer),
  ::view-transition-new(theme-drawer) {
    animation: none;
  }

  .theme-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--theme-drawer-padding);
    flex-shrink: 0;
    color: var(--color-foreground);
  }

  .theme-drawer__title {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    margin: 0;
  }

  .theme-drawer__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: var(--style-border-radius-lg);
    background-color: rgb(var(--color-foreground-rgb) / 0.1);
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
    color: var(--color-foreground);
    font-size: clamp(var(--font-size--3xs), 0.75em, var(--font-size--xs));
    padding-inline: 0.5em;
    line-height: 1;
  }

  .theme-drawer__badge[data-maintain-ratio] {
    aspect-ratio: 1 / 1;
    padding-inline: 0.2em;
  }

  .theme-drawer__close-button {
    --private-button-size: 34px;
    --private-focus-ring-size: 2px;
    --private-motion-speed: 150ms;
    --private-motion-ease: cubic-bezier(0.25, 0, 0.1, 1);
    --private-border-width: 1px;
    --private-button-border-color: rgb(0, 0, 0, 0.06);
    --private-button-shadow: 0 2px 6px 0 var(--private-button-border-color);

    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-inline-start: auto;
    width: var(--private-button-size);
    height: var(--private-button-size);
    border-radius: var(--private-button-size);
    background-color: var(--color-background);
    outline: var(--private-focus-ring-size) solid transparent;
    outline-offset: var(--private-focus-ring-size);
    transition-property: color, outline-color, background-color;
    transition-duration: var(--private-motion-speed);
    transition-timing-function: var(--private-motion-ease);

    /* Legacy non-contrast-aware color scheme */
    --button-icon-opacity: 0.8;
    color: var(--color-foreground);
    border: var(--private-border-width) solid var(--private-button-border-color);
    box-shadow: var(--private-button-shadow);

    &:hover:not(:active) {
      /* Legacy non-contrast-aware color scheme */
      --button-icon-opacity: 1;
    }

    &:focus-visible {
      outline-color: var(--color-foreground);
    }
  }

  @supports (color: oklch(from red l c h)) {
    .theme-drawer__close-button {
      --contrast-color: oklch(from var(--color-background) clamp(0, (0.6 / l - 1) * infinity, 1) 0 0);
      --button-icon-opacity: 1;
      --private-button-border-color: color-mix(in srgb, var(--contrast-color) 6%, transparent);
      --private-button-shadow: 0 2px 6px 0 var(--private-button-border-color);

      color: color-mix(in srgb, var(--contrast-color) 50%, transparent);

      &:hover:not(:active) {
        color: color-mix(in srgb, var(--contrast-color) 70%, transparent);
      }
    }

    .theme-drawer__close-button:hover:not(:active) {
      background-color: color-mix(in srgb, var(--contrast-color) 6%, var(--color-background));
    }
  }
/* END_SNIPPET:theme-drawer-styles */

/* START_SNIPPET:variant-main-picker (INDEX:265) */
.variant-option__button-label__image {
    display: inline-flex;
    margin-right: 0.4em;
    line-height: 0;
  }
  .variant-option__button-label__image img {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 2px;
    display: block;
  }

  .variant-option__button-label__swatch {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 0.5em;
    vertical-align: middle;
    border: 1px solid rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
  }
  .variant-option__button-label__swatch img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .variant-option__button-label__pill {
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 2px solid #000 !important;
    border-radius: 0 !important;
  }
/* END_SNIPPET:variant-main-picker */

/* START_SNIPPET:variant-picker-styles (INDEX:266) */
/* Variant picker container styles - unique to main variant picker */
  .variant-picker {
    width: 100%;
  }

  .variant-picker__form {
    width: 100%;
  }

  .variant-picker[data-shopify-visual-preview] {
    min-width: 300px;
    padding-inline-start: max(4px, var(--padding-inline-start));
  }

  /* Dropdown variant option styles */
  .variant-option__select-wrapper {
    display: flex;
    position: relative;
    border: var(--style-border-width-inputs) solid var(--color-variant-border);
    border-radius: var(--style-border-radius-inputs);
    align-items: center;
    margin-top: var(--margin-2xs);
    overflow: clip;
    color: var(--color-variant-text);
  }

  .variant-option__select-wrapper:has(.swatch) {
    --variant-picker-swatch-width: 20px;
    --variant-picker-swatch-height: 20px;
  }

  .variant-option__select-wrapper:hover {
    border-color: var(--color-variant-hover-border);
    color: var(--color-variant-hover-text);
  }

  .variant-option__select-wrapper:hover .variant-option__select {
    background-color: var(--color-variant-hover-background);
  }

  .variant-option__select:focus-visible {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .variant-option__select {
    padding-block: var(--padding-md);
    padding-inline: var(--padding-lg) calc(var(--padding-lg) + var(--icon-size-2xs));
    appearance: none;
    background-color: var(--color-variant-background);
    color: inherit;
    border: 0;
    width: 100%;
    margin: 0;
    cursor: pointer;
  }

  .variant-option__select-wrapper .icon {
    position: absolute;
    right: var(--padding-md);
    top: 50%;
    transform: translateY(-50%);
    width: var(--icon-size-2xs);
    height: var(--icon-size-2xs);
    pointer-events: none;
  }

  .variant-option__select--has-swatch {
    padding-inline-start: calc((2 * var(--padding-sm)) + var(--variant-picker-swatch-width));
  }

  .variant-option__select-wrapper .swatch {
    position: absolute;
    top: 50%;
    left: var(--padding-md);
    transform: translateY(-50%);
  }

  /* Variant picker alignment modifiers */
  .variant-picker--center,
  .variant-picker--center .variant-option {
    text-align: center;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .variant-picker--right,
  .variant-picker--right .variant-option {
    text-align: right;
    justify-content: right;
  }
/* END_SNIPPET:variant-picker-styles */

/* START_SNIPPET:variant-swatches (INDEX:267) */
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:268) */
.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:269) */
.volume-pricing-info {
    display: inline-flex;
  }

  .volume-pricing-info__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    color: var(--color-foreground-secondary);
    cursor: pointer;
    transition: color var(--animation-speed) var(--animation-easing);
    flex-shrink: 0;
  }

  .volume-pricing-info__button:hover {
    color: var(--color-foreground);
  }

  .volume-pricing-info__button .svg-wrapper {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .volume-pricing-info__button--with-label {
    width: auto;
    gap: var(--gap-sm);
  }

  .volume-pricing-info__popover {
    --volume-pricing-popover-max-width: 320px;
    --volume-pricing-popover-spacing: 8px;
    --volume-pricing-popover-viewport-margin: 16px;

    min-inline-size: 280px;
    max-inline-size: var(--volume-pricing-popover-max-width);
    background: var(--color-background);
    border: var(--style-border-popover);
    border-radius: var(--style-border-radius-popover, 0);
    box-shadow: var(--shadow-popover);
    overflow: hidden;
    padding: 0;
    margin: 0;
    transition-property: display, opacity, translate;
    transition-duration: 0.3s;
    transition-timing-function: var(--ease-out-quad);
    transition-behavior: allow-discrete;
    translate: 0 20px;
    opacity: 0;
  }

  /* Native anchor positioning for supported browsers */
  .volume-pricing-info__popover {
    inset: unset;
    top: calc(anchor(bottom) + var(--volume-pricing-popover-spacing));
    left: anchor(left);
  }

  @supports (position-try-fallbacks: --top-left) {
    .volume-pricing-info__popover {
      position-try-fallbacks: --top-left;
    }

    @position-try --top-left {
      top: calc(anchor(top) - var(--volume-pricing-popover-spacing));
      bottom: auto;
      transform: translateY(-100%);
    }
  }

  /* Fallback positioning using custom properties */
  @supports not (position-anchor: --volume-pricing-trigger) {
    .volume-pricing-info__popover {
      position: fixed;
      top: calc(var(--anchor-bottom) * 1px + var(--volume-pricing-popover-spacing));
      left: max(
        var(--volume-pricing-popover-viewport-margin),
        min(
          var(--anchor-left) * 1px,
          100vw - var(--volume-pricing-popover-max-width) - var(--volume-pricing-popover-viewport-margin)
        )
      );
    }
  }

  .volume-pricing-info__popover:popover-open {
    translate: 0 0;
    opacity: 1;
  }

  @starting-style {
    .volume-pricing-info__popover:popover-open {
      translate: 0 20px;
      opacity: 0;
    }
  }

  .volume-pricing-info__rules {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
    padding: var(--padding-md);
    font-size: var(--font-size--xs);
  }

  .volume-pricing-info__rules,
  .volume-pricing-info__rules > span {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .volume-pricing-info__table {
    display: flex;
    flex-direction: column;
  }

  .volume-pricing-info__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--padding-sm) var(--padding-md);
    font-size: var(--font-size--sm);
    background: var(--color-background);
    border-inline-start: 3px solid transparent;
    transition: border-color var(--animation-speed) var(--animation-easing);
  }

  .volume-pricing-info__row:nth-child(odd) {
    background: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .volume-pricing-info__row--active {
    border-inline-start-color: var(--color-foreground);
    font-weight: var(--font-weight-medium);
  }

  .volume-pricing-info__quantity {
    color: var(--color-foreground);
  }

  .volume-pricing-info__price {
    display: flex;
    align-items: center;
    color: var(--color-foreground);
  }

  .volume-pricing-info__checkmark {
    display: none;
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    color: var(--color-foreground);
  }

  .volume-pricing-info__row--active .volume-pricing-info__checkmark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
/* END_SNIPPET:volume-pricing-info */