/** Shopify CDN: Minification failed

Line 14408:20 Expected identifier but found whitespace
Line 14408:43 Unexpected "8%"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:buscador-indajaus (INDEX:2) */
.bsc {
    padding-block: var(--bsc-pt, 56px) var(--bsc-pb, 56px);
    --bsc-oro: #C8A66B;
  }

  .bsc--claro { background: #F7F7F7; --bsc-fg: #0F1512; --bsc-sub: #6a6a6a; --bsc-card: #FFFFFF; --bsc-borde: #e4e4e4; }
  .bsc--oscuro { background: #0F1512; --bsc-fg: #FFFFFF; --bsc-sub: rgba(255,255,255,0.6); --bsc-card: #18211d; --bsc-borde: rgba(255,255,255,0.14); }

  .bsc__inner {
    max-width: 760px;
    margin-inline: auto;
    padding-inline: 20px;
    text-align: center;
  }

  .bsc__title {
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 8px;
    color: var(--bsc-fg);
  }

  .bsc__subtitle {
    margin: 0 0 24px;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--bsc-sub);
  }

  .bsc__box { position: relative; }

  .bsc__form {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bsc-card);
    border: 1.5px solid var(--bsc-borde);
    border-radius: 999px;
    padding: 6px 6px 6px 18px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }

  .bsc__form:focus-within {
    border-color: var(--bsc-oro);
    box-shadow: 0 0 0 4px rgba(200, 166, 107, 0.16);
  }

  .bsc__icon {
    display: flex;
    flex: none;
    color: var(--bsc-oro);
  }
  .bsc__icon svg { width: 20px; height: 20px; }

  .bsc__input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    color: var(--bsc-fg);
    font-family: inherit;
    font-size: 15.5px;
    padding-block: 14px;
  }
  .bsc__input::placeholder { color: var(--bsc-sub); }
  .bsc__input::-webkit-search-cancel-button { display: none; }

  .bsc__clear {
    flex: none;
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    border: none; border-radius: 50%;
    background: transparent; color: var(--bsc-sub);
    cursor: pointer;
  }
  .bsc__clear:hover { color: var(--bsc-fg); }
  .bsc__clear svg { width: 15px; height: 15px; }

  .bsc__submit {
    flex: none;
    border: none;
    border-radius: 999px;
    background: var(--bsc-oro);
    color: #0F1512;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 13px 26px;
    cursor: pointer;
    transition: background 0.2s ease;
  }
  .bsc__submit:hover { background: #d8b982; }

  /* ── Panel de sugerencias ── */
  .bsc__panel {
    position: absolute;
    top: calc(100% + 10px);
    left: 0; right: 0;
    z-index: 40;
    background: var(--bsc-card);
    border: 1px solid var(--bsc-borde);
    border-radius: 16px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.16);
    overflow: hidden;
    text-align: left;
  }

  .bsc__panel-inner { max-height: 60vh; overflow-y: auto; padding: 6px; }

  .bsc__row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--bsc-fg);
    transition: background 0.15s ease;
  }
  .bsc__row:hover, .bsc__row:focus-visible { background: rgba(200, 166, 107, 0.12); }

  .bsc__thumb {
    width: 44px; height: 44px; flex: none;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--bsc-borde);
    border-radius: 8px;
  }

  .bsc__row-txt { min-width: 0; flex: 1; }
  .bsc__row-name {
    display: block;
    font-size: 13.5px; font-weight: 600; line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .bsc__row-price { display: block; font-size: 12.5px; font-weight: 700; color: var(--bsc-oro); margin-top: 2px; }

  .bsc__group {
    font-size: 10.5px; font-weight: 800;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--bsc-sub);
    padding: 10px 12px 4px;
  }

  .bsc__empty, .bsc__loading {
    padding: 18px 14px;
    font-size: 13.5px;
    color: var(--bsc-sub);
    text-align: center;
  }

  .bsc__all {
    display: block;
    padding: 12px;
    margin-top: 4px;
    border-top: 1px solid var(--bsc-borde);
    font-size: 13px; font-weight: 700;
    color: var(--bsc-oro);
    text-align: center;
    text-decoration: none;
  }
  .bsc__all:hover { background: rgba(200, 166, 107, 0.1); }

  /* ── Chips ── */
  .bsc__pops { margin-top: 20px; }

  .bsc__pops-label {
    display: block;
    font-size: 11px; font-weight: 800;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--bsc-sub);
    margin-bottom: 10px;
  }

  .bsc__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
  }

  .bsc__chip {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    color: var(--bsc-fg);
    background: var(--bsc-card);
    border: 1px solid var(--bsc-borde);
    border-radius: 999px;
    padding: 8px 15px;
    text-decoration: none;
    transition: border-color 0.18s ease, color 0.18s ease, transform 0.15s ease;
  }
  .bsc__chip:hover {
    border-color: var(--bsc-oro);
    color: var(--bsc-oro);
    transform: translateY(-1px);
  }

  @media (max-width: 749px) {
    .bsc__inner { padding-inline: 16px; }
    .bsc__form { padding-left: 14px; gap: 6px; }
    .bsc__submit { padding: 12px 18px; font-size: 12.5px; }
    .bsc__input { font-size: 15px; padding-block: 12px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .bsc__chip, .bsc__submit, .bsc__form, .bsc__row { transition: none; }
    .bsc__chip:hover { transform: none; }
  }
/* END_SECTION:buscador-indajaus */

/* START_SECTION:cabecera-busqueda (INDEX:3) */
.cbz--busqueda .cbz__inner { padding-block-end: 36px; }

  /* La foto de un producto suelto tiene mas detalle que la de una coleccion,
     asi que va un poco mas apagada para que no le compita al titulo. */
  .cbz--busqueda .cbz__fondo img { opacity: 0.3; }

  .cbz--busqueda .cbq__form {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 560px;
    margin-block-start: 22px;
    padding: 6px 6px 6px 16px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: border-color 220ms ease, background 220ms ease;
  }

  .cbz--busqueda .cbq__form:focus-within {
    border-color: rgba(200, 166, 107, 0.7);
    background: rgba(255, 255, 255, 0.12);
  }

  .cbz--busqueda .cbq__lupa {
    display: flex;
    flex: none;
    color: rgba(255, 255, 255, 0.6);
  }

  .cbz--busqueda .cbq__lupa svg { inline-size: 18px; block-size: 18px; }

  /* Con la clase de la seccion adelante para ganarle a los estilos que el
     theme aplica a input[type=search]. */
  .cbz--busqueda .cbq__input,
  .cbz--busqueda input.cbq__input[type='search'] {
    flex: 1;
    min-width: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    padding: 10px 0;
    block-size: auto;
    min-block-size: 0;
  }

  .cbz--busqueda .cbq__input::placeholder { color: rgba(255, 255, 255, 0.45); font-weight: 500; }
  .cbz--busqueda .cbq__input:focus { outline: none; box-shadow: none; }
  .cbz--busqueda .cbq__input::-webkit-search-cancel-button { filter: invert(1); opacity: 0.5; }

  .cbz--busqueda .cbq__btn {
    flex: none;
    padding: 11px 20px;
    border: none;
    border-radius: 10px;
    background: #C8A66B;
    color: #0F1512;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 160ms ease-out, background 200ms ease;
  }

  @media (hover: hover) and (pointer: fine) {
    .cbz--busqueda .cbq__btn:hover { background: #D8B87C; }
  }

  .cbz--busqueda .cbq__btn:active { transform: scale(0.97); }

  .cbz--busqueda .cbq__btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
  }

  .cbz--busqueda .cbq__sugeridas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-block-start: 16px;
  }

  .cbz--busqueda .cbq__sug-label {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
  }

  .cbz--busqueda .cbq__chip {
    padding: 7px 14px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.82);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 200ms ease, color 200ms ease, background 200ms ease;
  }

  @media (hover: hover) and (pointer: fine) {
    .cbz--busqueda .cbq__chip:hover {
      border-color: rgba(200, 166, 107, 0.7);
      background: rgba(200, 166, 107, 0.14);
      color: #fff;
    }
  }

  .cbz--busqueda .cbq__chip:focus-visible {
    outline: 2px solid #C8A66B;
    outline-offset: 3px;
  }

  @media (max-width: 749px) {
    .cbz--busqueda .cbz__inner { padding-block-end: 24px; }
    .cbz--busqueda .cbq__form { margin-block-start: 18px; padding-inline-start: 13px; }
    .cbz--busqueda .cbq__btn { padding: 10px 15px; font-size: 13px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .cbz--busqueda .cbq__form,
    .cbz--busqueda .cbq__btn,
    .cbz--busqueda .cbq__chip { transition: none; }
  }
/* END_SECTION:cabecera-busqueda */

/* START_SECTION:cabecera-pagina (INDEX:5) */
/* La de pagina no lleva pills, asi que necesita su propio aire abajo. */
  .cbz--pagina .cbz__inner { padding-block-end: 40px; }

  @media (max-width: 749px) {
    .cbz--pagina .cbz__inner { padding-block-end: 28px; }
  }
/* END_SECTION:cabecera-pagina */

/* START_SECTION:collection-links (INDEX:10) */
collection-links-component {
    --alignment: flex-start;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* START_SECTION:custom-product-carousel (INDEX:15) */
/* ═══════════════════════════════════════
   INDAJAUS — Product Carousel
   Estética: Indajaus Growshop
   Cards blancas, btn dorado/negro, cuotas verde CRO
═══════════════════════════════════════ */
.cpc-section {
  --cpc-radius:    14px;
  --cpc-radius-sm: 8px;
  --cpc-gap:       14px;
  --cpc-arrow-size: 46px;
  --cpc-transition: 0.42s cubic-bezier(0.4, 0, 0.2, 1);
  background: var(--cpc-section-bg);
  padding: 32px 0 16px;
  overflow: hidden;
  position: relative;
  isolation: isolate;
}
.cpc-section * { box-sizing: border-box; }
.cpc-section .cpc-wrapper { width: 100%; }

/* ── HEADER ── */
.cpc-section .cpc-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 28px;
  gap: 16px;
  padding: 0 24px;
}
.cpc-section .cpc-header__eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #0B7A3B;
  margin-bottom: 4px;
}
.cpc-section .cpc-title {
  font-size: var(--cpc-title-desktop);
  font-weight: 800;
  color: var(--cpc-text);
  margin: 0;
  letter-spacing: -0.5px;
  line-height: 1.15;
}
.cpc-section .cpc-view-all-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--cpc-accent);
  text-decoration: none;
  white-space: nowrap;
  padding-bottom: 2px;
  border-bottom: 1.5px solid transparent;
  transition: border-color 0.22s, opacity 0.22s;
  flex-shrink: 0;
  margin-bottom: 6px;
}
.cpc-section .cpc-view-all-link svg { width: 15px; height: 15px; transition: transform 0.22s; }
.cpc-section .cpc-view-all-link:hover { border-color: var(--cpc-accent); }
.cpc-section .cpc-view-all-link:hover svg { transform: translateX(3px); }

/* ── CAROUSEL ── */
.cpc-section .cpc-carousel-outer { position: relative; }
.cpc-section .cpc-track-container {
  width: 100%;
  overflow: hidden;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
  /* Aire para que overflow:hidden no recorte la sombra de las cards.
     El margin negativo compensa el padding para no mover el layout.
     El de arriba cubre el hover, que levanta la card 6px. */
  padding-block: 12px 24px;
  margin-block: -12px -18px;
}
.cpc-section .cpc-track-container:active { cursor: grabbing; }
.cpc-section .cpc-track-container.is-dragging-h { touch-action: none; }
.cpc-section .cpc-track {
  display: flex;
  gap: var(--cpc-gap);
  transition: transform var(--cpc-transition);
  will-change: transform;
}

/* ── CARDS — 6 visibles en desktop ── */
.cpc-section .cpc-card {
  flex: 0 0 calc((100% - var(--cpc-gap) * 5.25) / 6.25);
  min-width: 0;
  background: var(--cpc-card-bg);
  border-radius: var(--cpc-radius);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.07);
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  position: relative;
  border: 1px solid rgba(0,0,0,0.05);
}
.cpc-section .cpc-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.13);
}

/* IMAGEN */
.cpc-section .cpc-card__image-link { display: block; text-decoration: none; }
.cpc-section .cpc-card__image-wrap {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  overflow: hidden;
  background: #f5f5f5;
}
.cpc-section .cpc-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s cubic-bezier(0.4,0,0.2,1);
}
.cpc-section .cpc-card:hover .cpc-card__img { transform: scale(1.05); }

/*
  Acá había cuatro declaraciones sueltas, sin selector, cerradas por una
  llave huérfana: border-radius 40px, opacity 0, translateY y una
  transición. Restos de una versión vieja de las flechas de la foto, que
  hoy se estilan más abajo con .cpc-card__media-arrow.

  No cambiaban nada (el navegador descarta un bloque sin selector y salta
  hasta la siguiente llave), pero dejaban la hoja de estilos con un error
  de sintaxis justo en el medio, que es lo que hace que al editar cerca se
  rompa algo sin motivo aparente. Encontrado el 21/10/2026 contando llaves.
*/
.cpc-section .cpc-card__img-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ccc;
}
.cpc-section .cpc-card__img-placeholder svg { width: 52px; height: 52px; }

/* BADGE */
.cpc-section .cpc-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 40px;
  line-height: 1.4;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.cpc-section .cpc-badge--new  { background: #1a1a1a; color: #fff; }
.cpc-section .cpc-badge--sale { background: #E53935; color: #fff; }

/* BODY */
.cpc-section .cpc-card__body {
  padding: 14px 14px 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.cpc-section .cpc-card__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--cpc-text);
  text-decoration: none;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.35em * 2);
  margin-bottom: 10px;
  transition: color 0.2s;
  text-align: center;
}
.cpc-section .cpc-card__title:hover { color: var(--cpc-accent); }

/* PRECIO */
.cpc-section .cpc-card__pricing {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.cpc-section .cpc-price { font-size: 18px; font-weight: 800; color: var(--cpc-text); }
.cpc-section .cpc-price--original { font-size: 12px; font-weight: 400; color: #aaa; text-decoration: line-through; }
.cpc-section .cpc-price--sale { color: var(--cpc-accent); }

/* CUOTAS — verde igual al reference */
.cpc-section .cpc-installments {
  color: #16A34A !important;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #edfbf4;
  border-radius: 6px;
  padding: 5px 10px;
  margin-bottom: 12px;
  width: 100%;
  max-width: 100%;
}
.cpc-section .cpc-installments span { font-size: 11px; font-weight: 600; color: #1a9e5c; line-height: 1.4; }
.cpc-section .cpc-installments strong { font-weight: 800; }

/* URGENCIA */
.cpc-section .cpc-urgency,
.cpc-drawer .cpc-urgency,
.cpc-sheet .cpc-urgency {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 8px;
}
.cpc-urgency__dot {
  background: #E53935 !important;
  width: 7px;
  height: 7px;
  background: #e53e3e;
  border-radius: 50%;
  flex-shrink: 0;
  animation: cpc-dot-pulse 1.5s ease-in-out infinite;
}
@keyframes cpc-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(229,62,62,0.65); }
  50%       { box-shadow: 0 0 0 5px rgba(229,62,62,0); }
}
.cpc-urgency__text { font-size: 10px; font-weight: 700; color: #e53e3e; }

/* BOTÓN ATC — azul FUNTEC */
.cpc-section .cpc-card__actions { margin-top: auto; }
.cpc-section .cpc-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 13px 14px;
  background: #C8A66B;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  border: none;
  border-radius: var(--cpc-radius-sm);
  cursor: pointer;
  letter-spacing: 0.3px;
  line-height: 1.4;
  position: relative;
  overflow: hidden;
  transition: filter 0.2s, transform 0.15s;
}
.cpc-section .cpc-btn:hover { filter: brightness(0.88); transform: translateY(-1px); }
.cpc-section .cpc-btn:active { transform: translateY(0); }
.cpc-section .cpc-btn--cart::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.28) 50%, transparent 100%);
  transform: skewX(-20deg);
  animation: cpc-shimmer 2s ease-in-out infinite;
}
@keyframes cpc-shimmer {
  0%  { left: -80%; opacity: 1; }
  50% { left: 140%; opacity: 1; }
  51% { left: 140%; opacity: 0; }
  100%{ left: -80%; opacity: 0; }
}

/* NAV */
.cpc-section .cpc-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; padding: 0 24px; }
.cpc-section .cpc-arrow {
  flex-shrink: 0;
  width: var(--cpc-arrow-size);
  height: var(--cpc-arrow-size);
  background: #fff;
  border: 1.5px solid #e0e0e0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #1a1a1a;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: background 0.22s, border-color 0.22s, color 0.22s, transform 0.22s;
}
.cpc-section .cpc-arrow:hover {
  background: #C8A66B;
  border-color: #C8A66B;
  color: #fff;
  transform: scale(1.08);
}
.cpc-section .cpc-arrow:disabled { opacity: 0.28; cursor: default; pointer-events: none; }
.cpc-section .cpc-arrow svg { width: 19px; height: 19px; }

/* DOTS */
.cpc-section .cpc-dots { display: flex; align-items: center; gap: 6px; }
.cpc-section .cpc-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ccc;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.25s, width 0.3s, border-radius 0.3s;
}
.cpc-section .cpc-dot.is-active {
  background: #C8A66B;
  width: 22px;
  border-radius: 4px;
}

/* FOOTER */
.cpc-section .cpc-footer { text-align: center; margin-top: 36px; padding: 0 24px; }
.cpc-section .cpc-view-all-btn {
  display: inline-block;
  padding: 13px 40px;
  border: 2px solid #C8A66B;
  color: #C8A66B;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.22s, color 0.22s;
}
.cpc-section .cpc-view-all-btn:hover { background: #0F0F0F; color: #fff; }
.cpc-section .cpc-empty { color: #999; font-size: 15px; padding: 24px; }

/* RESPONSIVE */
@media (max-width: 1100px) {
  .cpc-section .cpc-card { flex: 0 0 calc((100% - var(--cpc-gap) * 2.5) / 3.5); }
}
@media (max-width: 640px) {
  .cpc-section { padding: 20px 0 10px; }
  .cpc-section .cpc-wrapper { padding: 0; }
  .cpc-section .cpc-header { padding: 0 16px; margin-bottom: 18px; flex-direction: column; align-items: flex-start; gap: 8px; }
  .cpc-section .cpc-footer { padding: 0 16px; }
  .cpc-section .cpc-title { font-size: var(--cpc-title-mobile) !important; }
  .cpc-section .cpc-card { flex: 0 0 calc((100vw - 40px - var(--cpc-gap)) / 2); }
  .cpc-section .cpc-track-container { padding: 10px 20px 22px; margin-block: -10px -16px; }
  .cpc-section { overflow: hidden; }
  .cpc-section .cpc-track-container { cursor: default; }
  .cpc-section .cpc-btn { font-size: 12px; padding: 11px 10px; }
  .cpc-section .cpc-price { font-size: 17px; }
}
@media (max-width: 380px) {
  .cpc-section .cpc-card { flex: 0 0 calc((100vw - 40px - var(--cpc-gap)) / 2); }
}
@media (hover: none) {
  .cpc-section .cpc-card:hover { transform: none; box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.07); }
  .cpc-section .cpc-card:hover .cpc-card__img { transform: none; }
}

/* ── SPINNER ── */
.cpc-spinner {
  width: 32px; height: 32px;
  border: 2.5px solid rgba(0,0,0,0.08);
  border-top-color: #C8A66B;
  border-radius: 50%;
  animation: cpc-spin 0.72s linear infinite;
  margin: 28px auto;
}
@keyframes cpc-spin { to { transform: rotate(360deg); } }

/* ── ATC BTN DRAWER/SHEET ── */
.cpc-qa-atc-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 15px;
  background: #0F0F0F; color: #fff;
  border: none; border-radius: 10px;
  font-size: 15px; font-weight: 700;
  cursor: pointer; letter-spacing: 0.3px;
  position: relative; overflow: hidden;
  transition: filter 0.2s, transform 0.15s;
}
.cpc-qa-atc-btn:hover { filter: brightness(0.88); transform: translateY(-1px); }
.cpc-qa-atc-btn:disabled { opacity: 0.42; cursor: not-allowed; transform: none; }

.cpc-qa-view-btn {
  display: block; text-align: center;
  font-size: 13px; font-weight: 600;
  color: #aaa; text-decoration: none;
  transition: color 0.2s;
}
.cpc-qa-view-btn:hover { color: #1a1a1a; }

/* ── VARIANTES ── */
.cpc-variant-btn {
  padding: 9px 18px;
  border: 1.5px solid #e8e8e8;
  border-radius: 8px;
  background: #fff;
  font-size: 13px; font-weight: 600;
  color: #1a1a1a; cursor: pointer;
  transition: border-color 0.18s, background 0.18s, color 0.18s;
}
.cpc-variant-btn:hover { border-color: #1a1a1a; }
.cpc-variant-btn.is-selected { border-color: #C8A66B; background: #0F0F0F; color: #fff; }
.cpc-variant-btn.is-unavailable { opacity: 0.3; cursor: not-allowed; text-decoration: line-through; }

/* ── DRAWER (Desktop) ── */
.cpc-drawer { position: fixed; inset: 0; z-index: 9999; pointer-events: none; visibility: hidden; }
.cpc-drawer.is-open { pointer-events: all; visibility: visible; }
.cpc-drawer__overlay { position: absolute; inset: 0; background: rgba(0,0,0,0); transition: background 0.5s ease; cursor: pointer; }
.cpc-drawer.is-open .cpc-drawer__overlay { background: rgba(0,0,0,0.45); }
.cpc-drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: 420px; max-width: 100vw;
  background: #fff; display: flex; flex-direction: column;
  transform: translateX(110%); transition: transform 0.55s cubic-bezier(0.16,1,0.3,1);
  box-shadow: -12px 0 48px rgba(0,0,0,0.14);
}
.cpc-drawer.is-open .cpc-drawer__panel { transform: translateX(0); }
.cpc-drawer__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px; border-bottom: 1px solid #f0f0f0; flex-shrink: 0;
}
.cpc-drawer__title { font-size: 15px; font-weight: 700; color: #1a1a1a; }
.cpc-drawer__close {
  width: 32px; height: 32px; background: #f5f5f5; border: none;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: #1a1a1a; transition: background 0.2s, transform 0.3s;
}
.cpc-drawer__close:hover { background: #eaeaea; transform: rotate(90deg); }
.cpc-drawer__close svg { width: 15px; height: 15px; }
.cpc-drawer__body { flex: 1; overflow-y: auto; padding: 24px; }
.cpc-drawer__product-info { display: flex; gap: 16px; margin-bottom: 24px; align-items: flex-start; }
.cpc-drawer__img-wrap { width: 96px; height: 96px; border-radius: 10px; overflow: hidden; flex-shrink: 0; background: #f5f5f5; }
/* El atributo hidden solo no alcanza: la regla de abajo le pone display a la
   imagen y le gana a la del navegador. Se esconde el contenedor entero, asi
   el panel de un producto sin foto no queda con un cuadrado gris al costado. */
.cpc-drawer__img-wrap[hidden] { display: none; }
.cpc-drawer__img { width: 100%; height: 100%; object-fit: cover; }
.cpc-drawer__details { flex: 1; min-width: 0; }
.cpc-drawer__product-title { font-size: 14px; font-weight: 600; color: #1a1a1a; margin: 0 0 8px; line-height: 1.35; }
.cpc-drawer__pricing { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cpc-drawer__price { font-size: 18px; font-weight: 800; color: #1a1a1a; }
.cpc-drawer__compare { font-size: 13px; color: #bbb; text-decoration: line-through; }
.cpc-drawer__compare:empty { display: none; }
.cpc-drawer__variants-label { font-size: 11px; font-weight: 700; color: #888; text-transform: uppercase; letter-spacing: 0.8px; margin: 0 0 12px; }
.cpc-drawer__variants-list { display: flex; flex-wrap: wrap; gap: 8px; }
.cpc-drawer__footer { padding: 18px 24px; border-top: 1px solid #f0f0f0; flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 767px) { .cpc-drawer { display: none !important; } }

/* ── BOTTOM SHEET (Mobile) ── */
.cpc-sheet { position: fixed; inset: 0; z-index: 9999; pointer-events: none; visibility: hidden; }
.cpc-sheet.is-open { pointer-events: all; visibility: visible; }
.cpc-sheet__overlay { position: absolute; inset: 0; background: rgba(0,0,0,0); transition: background 0.5s ease; cursor: pointer; }
.cpc-sheet.is-open .cpc-sheet__overlay { background: rgba(0,0,0,0.5); }
.cpc-sheet__panel {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: #fff; border-radius: 20px 20px 0 0;
  transform: translateY(105%); transition: transform 0.55s cubic-bezier(0.16,1,0.3,1);
  display: flex; flex-direction: column; max-height: 88vh;
  box-shadow: 0 -8px 32px rgba(0,0,0,0.14);
}
.cpc-sheet.is-open .cpc-sheet__panel { transform: translateY(0); }
.cpc-sheet__topbar { display: flex; align-items: center; justify-content: center; position: relative; padding: 14px 16px 6px; flex-shrink: 0; }
.cpc-sheet__handle { width: 36px; height: 4px; background: #ddd; border-radius: 2px; }
.cpc-sheet__close { position: absolute; right: 16px; top: 10px; width: 30px; height: 30px; background: #f2f2f2; border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s, transform 0.3s; color: #1a1a1a; }
.cpc-sheet__close:hover { background: #e0e0e0; transform: rotate(90deg); }
.cpc-sheet__close svg { width: 13px; height: 13px; }
.cpc-sheet__body { flex: 1; overflow-y: auto; padding: 10px 20px 4px; }
.cpc-sheet__product-info { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 20px; }
.cpc-sheet__img-wrap { width: 100px; height: 100px; border-radius: 12px; overflow: hidden; background: #f5f5f5; margin-bottom: 12px; }
.cpc-sheet__img-wrap[hidden] { display: none; }
.cpc-sheet__img { width: 100%; height: 100%; object-fit: cover; }
.cpc-sheet__product-title { font-size: 15px; font-weight: 700; color: #1a1a1a; margin: 0 0 7px; line-height: 1.3; }
.cpc-sheet__pricing { display: flex; align-items: baseline; justify-content: center; gap: 8px; flex-wrap: wrap; }
.cpc-sheet__price { font-size: 20px; font-weight: 800; color: #1a1a1a; }
.cpc-sheet__compare { font-size: 13px; color: #bbb; text-decoration: line-through; }
.cpc-sheet__compare:empty { display: none; }
.cpc-sheet__variants-label { font-size: 11px; font-weight: 700; color: #999; text-transform: uppercase; letter-spacing: 0.8px; margin: 0 0 10px; text-align: center; }
.cpc-sheet__variants-list { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.cpc-sheet__footer { padding: 14px 20px 32px; flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid #f4f4f4; }
@media (min-width: 768px) { .cpc-sheet { display: none !important; } }
/* ── MEDIA NAV ── */
.cpc-section .cpc-card__img { display: none; }
.cpc-section .cpc-card__img.is-active { display: block; }
.cpc-section .cpc-card__media-arrow {
  position: absolute;
  bottom: 8px;
  z-index: 3;
  width: 26px;
  height: 26px;
  border: none;
  background: rgba(255,255,255,0.9);
  color: #999;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  padding: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
  transition: background 0.15s, color 0.15s;
}
.cpc-section .cpc-card__media-arrow--prev { left: 8px; }
.cpc-section .cpc-card__media-arrow--next { right: 8px; }
.cpc-section .cpc-card__media-arrow:hover { background: #FFFFFF; color: #0F0F0F; }


  /* Centrar precio, título y cuotas en las cards del tema (colecciones, búsqueda, etc.) */
  .product-card__info,
  .resource-card__info {
    text-align: center !important;
  }

  .price__container,
  .price,
  .product-card .price {
    justify-content: center !important;
  }

  .product-card__title,
  .resource-card__title {
    text-align: center !important;
  }
/* ── MEDIA NAV ── */
.cpc-section .cpc-card__img { display: none; }
.cpc-section .cpc-card__img.is-active { display: block; }
.cpc-section .cpc-card__media-arrow {
  position: absolute;
  bottom: 8px;
  z-index: 3;
  width: 26px;
  height: 26px;
  border: none;
  background: rgba(255,255,255,0.9);
  color: #999;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  padding: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
  transition: background 0.15s, color 0.15s;
}
.cpc-section .cpc-card__media-arrow--prev { left: 8px; }
.cpc-section .cpc-card__media-arrow--next { right: 8px; }
.cpc-section .cpc-card__media-arrow:hover { background: #FFFFFF; color: #0F0F0F; }
/* END_SECTION:custom-product-carousel */

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

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

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

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

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

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

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

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

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

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

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

  .utilities > * {
    text-align: center;

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

  @media screen and (min-width: 750px) {
    .utilities--blocks-1 {
      grid-template-columns: 1fr;
      justify-content: start;
    }
    .utilities--blocks-1 > * {
      justify-self: start;
      text-align: left;
    }
    .utilities--blocks-2 {
      grid-template-columns: 1fr 1fr;
    }
    .utilities--blocks-2 > *:nth-child(2) {
      justify-self: end;
      text-align: right;
    }
    .utilities--blocks-3 {
      grid-template-columns: 1fr auto 1fr;
    }
    .utilities--blocks-3 > *:nth-child(2) {
      justify-self: center;
      text-align: center;
    }
    .utilities--blocks-3 > *:nth-child(3) {
      justify-self: end;
      text-align: right;
    }
  }
/* END_SECTION:footer-utilities */

/* START_SECTION:header-announcements (INDEX:22) */
.announcement-bar {
    border-block-end: var(--border-bottom-width) solid var(--color-border);
  }

  .announcement-bar__slider {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;

    @media screen and (max-width: 749px) {
      grid-column: 1 / -1;
    }
  }

  .announcement-bar__slides {
    display: grid;
    grid: [stack] auto / [stack] auto;
    width: calc(100% - var(--button-size) * 2);
    max-width: 680px;
    margin-inline: auto;
  }

  .announcement-bar__slides > * {
    grid-area: stack;
  }

  .announcement-bar__slide {
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
    content-visibility: visible;

    &[aria-hidden='true'] {
      opacity: 0;
      visibility: hidden;
    }
  }

  .announcement-bar__slider slideshow-arrows {
    padding: 0;
    mix-blend-mode: normal;
  }

  .announcement-bar__slider slideshow-arrows .slideshow-control {
    color: var(--color-foreground);
  }

  .announcement-bar__slider .slideshow-control {
    display: flex;
    padding: 0;
    width: var(--button-size);
    height: var(--button-size);
    align-items: center;
    justify-content: center;
    opacity: 1;
    animation: none;

    @media screen and (min-width: 750px) {
      --slideshow-control-offset: calc((var(--button-size) - var(--icon-size-xs)) / 2);

      .section--page-width &.slideshow-control--previous {
        transform: translateX(var(--slideshow-control-offset));
      }
    }
  }

  .announcement-bar__slider .slideshow-control .svg-wrapper {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .announcement-bar__slide {
    place-content: center;
  }

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

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

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

  .header {
    --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 {
      transition: color var(--header-content-transition-timing), border-color var(--header-content-transition-timing);
    }
  }

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

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

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

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

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

    --closed-underlay-height: 0px;

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

    &:not([data-sticky-state='active']):not(:has(.menu-list__link:is(:hover, [aria-expanded='true']))) .header__row {
      --color-foreground: inherit;
      --color-foreground-rgb: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;
      --color-primary-button-background: inherit;
      --color-primary-button-text: inherit;
    }

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

  [data-transparent-color-scheme='top']:hover .header__row--top,
  [data-transparent-color-scheme='top']:focus-within .header__row--top,
  [data-transparent-color-scheme='both']:hover .header__row--top,
  [data-transparent-color-scheme='both']:focus-within .header__row--top {
    --color-foreground: inherit;
    --color-foreground-rgb: inherit;
    --color-border: inherit;
    --color-border-rgb: inherit;
    --color-primary-button-background: inherit;
    --color-primary-button-text: inherit;
  }

  [data-transparent-color-scheme='bottom']:hover .header__row--bottom,
  [data-transparent-color-scheme='bottom']:focus-within .header__row--bottom,
  [data-transparent-color-scheme='both']:hover .header__row--bottom,
  [data-transparent-color-scheme='both']:focus-within .header__row--bottom {
    --color-foreground: inherit;
    --color-foreground-rgb: inherit;
    --color-border: inherit;
    --color-border-rgb: inherit;
    --color-primary-button-background: inherit;
    --color-primary-button-text: inherit;
  }

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

  #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;
    top: -1px;
    z-index: var(--layer-sticky);
  }

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

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

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

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

  .header__underlay {
    position: absolute;
    inset: 0;
  }

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

  .header__underlay-open {
    height: var(--full-open-header-height);
    background: linear-gradient(
      var(--color-scheme-top-row) 0 var(--top-row-height),
      var(--color-scheme-bottom-row) var(--top-row-height) var(--header-height),
      var(--color-submenu) var(--header-height) 100%
    );
    transition: height var(--submenu-animation-speed) var(--ease-out-cubic);
  }

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

  [data-transparent-color-scheme='top']:hover,
  [data-transparent-color-scheme='top']:focus-within,
  [data-transparent-color-scheme='both']:hover,
  [data-transparent-color-scheme='both']:focus-within {
    :is(.header__underlay-open, .header__underlay-closed) {
      --color-scheme-top-row: var(--color-background);
    }
  }

  [data-transparent-color-scheme='bottom']:hover,
  [data-transparent-color-scheme='bottom']:focus-within,
  [data-transparent-color-scheme='both']:hover,
  [data-transparent-color-scheme='both']:focus-within {
    :is(.header__underlay-open, .header__underlay-closed) {
      --color-scheme-bottom-row: var(--color-background);
    }
  }

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

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

  .header__row {
    --color-account-icon: var(--color-foreground);

    position: relative;
    background-color: transparent;

    &:has(.mega-menu__list:hover),
    &:has(.menu-list__link[aria-haspopup]:is(:hover, [aria-expanded='true'])),
    &:has(.menu-list__list-item[slot='overflow'] .menu-list__link:is(:hover, [aria-expanded='true'])) {
      z-index: var(--layer-heightened);
    }
  }

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

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

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

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

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

    @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 {
    --header-left: 1fr;
    --header-center: auto;
    --header-right: 1fr;
    --header-template-columns: var(--header-left) var(--header-center) var(--header-right);

    --header-mobile-bookend: 44px;

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

    &:has(.header__column--center header-menu) {
      --header-center: auto;
      --header-left: minmax(max-content, 1fr);
      --header-right: minmax(max-content, 1fr);
    }

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

      &:has(.header__column--right header-menu) {
        --header-right: auto;
        --header-left: minmax(max-content, 1fr);
      }

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

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

  .header__columns:not(:has(.header__column)) {
    grid-template-columns: 1fr;
  }

  @media (hover: hover) {
    .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);
      }
    }
  }

  header-menu,
  .header-actions__action,
  .header__icon--menu {
    transition: opacity var(--animation-speed) var(--animation-easing);
  }

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

  .header-section:has(.header[transparent]) + .shopify-section {
    margin-top: var(--header-height);
  }

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

      :is(.spacing-style, .inherit-spacing) {
        --section-top-offset: 0px;
      }
    }

    .sticky-content {
      margin-top: calc(var(--header-height) * var(--transparent-header-offset-boolean) * -1);
    }
  }

  .header-menu .menu-list__submenu {
    content-visibility: auto;
    contain-intrinsic-size: 0px 500px;
  }

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

  dropdown-localization-component .language-selector.language-selector {
    padding: 10px 8px 10px 16px;
  }

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

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

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

  .dropdown-localization .language-selector:where(:not(.top-shadow)) {
    font-weight: var(--menu-top-level-font-weight);
  }

  .dropdown-localization:not(dropdown-localization-component) .language-selector {
    font-family: var(--menu-localization-font);
    font-size: var(--menu-localization-font-size);
  }

  /* ================================
   * CRO: Menú en negrita
   * ================================ */
  .menu-list__link-title {
    font-weight: 700 !important;
  }

  /* ================================
   * FIX: gap de 1px del sticky
   * ================================ */
  .header-section:has(> #header-component[sticky='always']) {
    top: 0 !important;
  }

  /* ================================
   * FIX: sin margin-top en sección siguiente al header no transparente
   * ================================ */
  .header-section:not(:has(.header[transparent])) + .shopify-section {
    margin-top: 0 !important;
  }

  /* ================================
   * NIDO: header blanco + línea negra abajo
   * ================================ */
  #header-component {
    --color-scheme-top-row: #FFFFFF !important;
    --color-scheme-bottom-row: #FFFFFF !important;
  }

  #header-component .header__row {
    --color-background: #FFFFFF;
    --color-background-rgb: 255 255 255;
  }

  #header-component .header__row--top:not(.divider--page-width),
  #header-component .header__row--top.divider--page-width .header__columns {
    border-bottom: none !important;
  }
/* END_SECTION:header */

/* START_SECTION:hero (INDEX:26) */
.hero-wrapper {
    --hero-height-offset: 0px;
  }

  /* Being extra specific in the selector for performance reasons */
  body:has(> #header-group > .header-section > #header-component) .hero-wrapper:first-child {
    --hero-height-offset: var(--header-group-height, 0);
  }

  .hero {
    position: relative;
    min-height: calc(var(--hero-min-height) - var(--hero-height-offset));
  }

  .hero[data-shopify-visual-preview] {
    --hero-min-height: 600px;

    min-height: 600px;
  }

  .hero__container {
    position: relative;
    overflow: hidden;
    border: var(--hero-border-width) var(--hero-border-style) rgb(var(--color-border-rgb) / var(--hero-border-opacity));
    min-height: inherit;
    align-items: var(--vertical-alignment-mobile);
    justify-content: var(--horizontal-alignment);
    z-index: var(--layer-base);

    @media screen and (min-width: 750px) {
      align-items: var(--vertical-alignment);
    }
  }

  .hero__content-wrapper.page-width {
    grid-column: 2 / 3;
  }

  .hero__content-wrapper {
    position: relative;
    inset: 0;
    z-index: var(--layer-flat);
  }

  .hero__content-wrapper .group-block-content {
    position: relative;
  }

  .hero__media-grid {
    position: absolute;
    inset: 0;
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(var(--hero-media-count, 1), 1fr);
  }

  .hero--auto .hero__media {
    aspect-ratio: var(--hero-media-aspect-ratio);
  }

  .hero--no-blocks-auto-height {
    .hero__media {
      width: 100%;
      aspect-ratio: auto;
    }

    .hero__media-grid {
      /* When there are no blocks and the height is auto, allow the image to appear. */
      position: relative;
    }
  }

  .hero__media-wrapper {
    overflow: hidden;
    position: relative;
  }

  .hero__media {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
    overflow: hidden;
    position: relative;
    z-index: var(--layer-base);
  }

  /* Mobile/Desktop media visibility */

  .hero__media-wrapper--mobile {
    display: none;
  }

  .hero__media-wrapper--desktop {
    display: block;
  }

  @media screen and (max-width: 749px) {
    .hero__media-wrapper--desktop {
      display: none;
    }

    .hero__media-wrapper--mobile {
      display: block;
    }

    .hero__media-grid {
      grid-template-columns: repeat(var(--hero-media-count-mobile, 1), 1fr);
    }

    /* Mobile stacking */
    .hero--stack-mobile .hero__media-grid {
      grid-template-columns: 1fr;
      grid-template-rows: repeat(var(--hero-media-count-mobile, 1), calc(100% / var(--hero-media-count-mobile, 1)));
    }
  }

  .hero__link {
    position: absolute;
    inset: 0;
    grid-column: 1 / -1;
  }

  .hero__media-grid,
  .hero__content-wrapper {
    pointer-events: none;

    :is(a, button, input, textarea, select, details, summary) {
      pointer-events: auto;
    }
  }

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

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

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

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

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

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

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

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

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

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

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

/* START_SECTION:indajaus-password (INDEX:32) */
/* El pie se saco del layout el 05/11. El body igual va oscuro: cuando la
     tarjeta es mas alta que la pantalla y hay que scrollear, lo que asoma
     arriba y abajo tiene que ser negro y no blanco. */
  body:has(.ipw) { background: #0B0F0D; }

  /* EL DIALOGO DE LA CONTRASEÑA lo dibuja el layout y viene blanco de
     fabrica: sobre una pagina oscura entra como un flash. Se le pone el
     mismo vidrio ahumado. */
  /* De fabrica el dialogo mide `100vw x 100svh` y se ancla con `top:0;
     left:0`: ocupa toda la pantalla y parece un velo, no una tarjeta. Hay
     que pisar las dos cosas, el tamaño y el anclaje. */
  body:has(.ipw) .password-dialog,
  body:has(.ipw) .password-dialog[open] {
    inline-size: min(420px, calc(100vw - 40px));
    max-inline-size: min(420px, calc(100vw - 40px));
    block-size: auto;
    max-block-size: min(86svh, 360px);
    inset: 0;
    margin: auto;
    padding: 28px 26px 30px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 22px;
    background: rgba(12, 16, 14, 0.9);
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
    color: #fff;
  }

  /* El theme lo esconde con `display: none` porque el dialogo tapaba todo;
     ahora que es una tarjeta, el velo vuelve a hacer falta. */
  body:has(.ipw) .password-dialog::backdrop {
    display: block;
    background: rgba(6, 8, 7, 0.62);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }

  /* El contenido del dialogo, con clases propias. De fabrica era un titulo
     y un campo con el boton pegado al costado; en un acceso conviene que
     cada cosa este en su renglon y que el candado diga de que se trata
     antes de leer nada. */
  body:has(.ipw) .ipwd { text-align: center; }

  body:has(.ipw) .ipwd__candado {
    display: grid;
    place-items: center;
    inline-size: 46px;
    block-size: 46px;
    margin: 0 auto 14px;
    border-radius: 50%;
    border: 1px solid rgba(200, 166, 107, 0.4);
    background: rgba(200, 166, 107, 0.12);
    color: #C8A66B;
  }

  body:has(.ipw) .ipwd__candado svg { inline-size: 21px; block-size: 21px; }

  body:has(.ipw) .ipwd__titulo {
    margin: 0;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #fff;
  }

  body:has(.ipw) .ipwd__bajada {
    margin: 7px auto 18px;
    max-inline-size: 30ch;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.6);
  }

  body:has(.ipw) .ipwd__grupo {
    display: flex;
    flex-direction: column;
    gap: 9px;
  }

  body:has(.ipw) .ipwd__input {
    inline-size: 100%;
    padding: 13px 16px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font: inherit;
    font-size: 15px;
    text-align: center;
    letter-spacing: 0.04em;
  }

  body:has(.ipw) .ipwd__input::placeholder { color: rgba(255, 255, 255, 0.45); letter-spacing: 0; }
  body:has(.ipw) .ipwd__input:focus { outline: 2px solid #C8A66B; outline-offset: 2px; }

  body:has(.ipw) .ipwd__btn {
    inline-size: 100%;
    padding: 13px 20px;
    border: 0;
    border-radius: 12px;
    background: #C8A66B;
    color: #1A1407;
    font: inherit;
    font-size: 14.5px;
    font-weight: 800;
    cursor: pointer;
    transition: background 200ms ease, transform 160ms ease-out;
  }

  body:has(.ipw) .ipwd__btn:active { transform: scale(0.98); }

  body:has(.ipw) .password-dialog .email-signup__message {
    margin-block-start: 12px;
    font-size: 13px;
    color: #FF9B9B;
  }

  body:has(.ipw) .password-dialog .close-button { color: rgba(255, 255, 255, 0.65); }

  @media (hover: hover) and (pointer: fine) {
    body:has(.ipw) .ipwd__btn:hover { background: #D9B87C; }
    body:has(.ipw) .password-dialog .close-button:hover { color: #fff; }
  }

  .ipw {
    --ipw-oro: #C8A66B;
    --ipw-verde: #25D366;
    --ipw-ease: cubic-bezier(0.23, 1, 0.32, 1);

    position: relative;
    min-block-size: 100dvh;
    display: grid;
    place-items: center;
    padding: 18px;
    overflow: hidden;
    color: #fff;
    font-family: var(--font-body--family, system-ui, sans-serif);
  }

  /* ── EL FONDO ─────────────────────────────────────────────────── */
  .ipw__fondo { position: absolute; inset: 0; z-index: 0; }

  /* El <picture> se mide por su contenido, asi que sin esto el alto del
     100% de la foto se calcula contra la altura natural de la
     imagen y no contra la pantalla: en una ventana alta la foto tapaba los
     primeros 500px y el resto quedaba negro, justo detras de la tarjeta.
     Y el vidrio sin nada atras que desenfocar es una caja gris. */
  .ipw__fondo picture {
    display: block;
    inline-size: 100%;
    block-size: 100%;
  }

  .ipw__img,
  .ipw__video {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
  }

  /* Dos capas: una oscura pareja para que el texto se lea, y una radial
     que ilumina el centro, que es donde esta la tarjeta. */
  /* ── LAS FOTOS DEL FONDO ───────────────────────────────────────
     Apiladas y cruzandose. La que esta puesta lleva ademas un
     acercamiento lentisimo de 12 segundos: sin el, una foto quieta
     detras de un vidrio parece un fondo pegado; con el, parece que hay
     algo pasando del otro lado.

     1,6 segundos de cruce. Mas rapido se nota el cambio y distrae de
     lo unico que importa, que es el contador y la oferta. */
  .ipw__slides { position: absolute; inset: 0; }

  .ipw__slide {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1600ms ease;
  }
  .ipw__slide.is-activa { opacity: 1; }

  @media (prefers-reduced-motion: no-preference) {
    .ipw__slide.is-activa { animation: ipw-acercar 12s ease-out forwards; }
  }
  @keyframes ipw-acercar {
    from { transform: scale(1); }
    to   { transform: scale(1.08); }
  }

  /* ── LA ESCALERA ───────────────────────────────────────────────
     Tres renglones y nada mas. Cada uno es: numero, que pasa, y cuanto
     off. El tercero va mas apagado porque es el que menos empuja a
     apurarse. */
  .ipw__escalera {
    inline-size: 100%;
    margin-block-start: 18px;
    padding: 13px 14px 11px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
  }

  .ipw__escalera-tit {
    margin: 0 0 10px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    text-align: center;
  }

  .ipw__pasos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
  }

  .ipw__paso {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 9px;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.04);
    font-size: 12.5px;
    line-height: 1.25;
    color: rgba(255, 255, 255, 0.72);
  }

  .ipw__paso-n {
    flex: none;
    inline-size: 20px;
    block-size: 20px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.1);
    font-size: 10px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.7);
  }

  .ipw__paso-txt { flex: 1; min-inline-size: 0; }

  .ipw__paso-off {
    flex: none;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: rgba(255, 255, 255, 0.85);
    font-variant-numeric: tabular-nums;
  }

  /* El primero es el que queremos que mire. */
  .ipw__paso.is-primero {
    background: rgba(200, 166, 107, 0.16);
    border: 1px solid rgba(232, 217, 168, 0.34);
    color: #FFFFFF;
  }
  .ipw__paso.is-primero .ipw__paso-n {
    background: var(--ipw-oro, #C8A66B);
    color: #16110A;
  }
  .ipw__paso.is-primero .ipw__paso-off {
    font-size: 16px;
    color: var(--ipw-oro-cl, #E8D9A8);
  }

  .ipw__paso.is-ultimo { color: rgba(255, 255, 255, 0.55); }
  .ipw__paso.is-ultimo .ipw__paso-off { color: rgba(255, 255, 255, 0.62); }

  @media (max-width: 420px) {
    .ipw__paso { font-size: 11.5px; gap: 8px; padding: 6px 8px; }
    .ipw__paso.is-primero .ipw__paso-off { font-size: 15px; }
  }

  .ipw__velo {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(120% 80% at 50% 45%, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.55) 60%, rgba(0, 0, 0, 0.78) 100%),
      linear-gradient(180deg, rgba(10, 12, 10, 0.55) 0%, rgba(10, 12, 10, 0.35) 40%, rgba(10, 12, 10, 0.7) 100%);
  }

  .ipw__centro { position: relative; z-index: 1; inline-size: 100%; display: grid; place-items: center; }

  /* ── LA TARJETA DE VIDRIO ─────────────────────────────────────── */
  .ipw__glass {
    position: relative;
    inline-size: 100%;
    max-inline-size: 560px;
    padding: 32px 32px 26px;
    border-radius: 30px;
    /* VIDRIO OSCURO. La version clara dejaba pasar demasiado de la foto y
       el texto peleaba con lo que hubiera atras. Con el vidrio ahumado la
       foto se sigue viendo, pero apagada, y el blanco queda limpio. */
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: linear-gradient(135deg, rgba(10, 14, 12, 0.72) 0%, rgba(10, 14, 12, 0.5) 48%, rgba(10, 14, 12, 0.66) 100%);
    backdrop-filter: blur(30px) saturate(150%);
    -webkit-backdrop-filter: blur(30px) saturate(150%);
    box-shadow:
      0 36px 90px rgba(0, 0, 0, 0.6),
      inset 0 1px 0 rgba(255, 255, 255, 0.2),
      inset 0 -1px 0 rgba(255, 255, 255, 0.05);
    text-align: center;
    overflow: hidden;
  }

  /* El brillo especular: sin esto la superficie se lee plana. */
  .ipw__glass::before {
    content: "";
    position: absolute;
    inset-block-start: -60%;
    inset-inline-start: -30%;
    inline-size: 120%;
    block-size: 120%;
    background: radial-gradient(closest-side, rgba(255, 255, 255, 0.13), transparent 70%);
    transform: rotate(-12deg);
    pointer-events: none;
  }

  .ipw__glass > * { position: relative; }

  /* Sin backdrop-filter el vidrio es un vidrio invisible: el texto queda
     sobre la foto y no se lee. */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .ipw__glass { background: rgba(12, 16, 14, 0.82); }
  }

  /* ── LAS COLUMNAS ──────────────────────────────────────────────
     En celular los dos envoltorios son transparentes para el layout:
     `display: contents` los borra de la caja y sus hijos caen en el
     vidrio como si no estuvieran. El movil no cambia en nada.

     De 900px para arriba el vidrio pasa a grilla de dos columnas y los
     envoltorios vuelven a ser cajas. La firma cruza las dos. */
  .ipw__col { display: contents; }

  @media (min-width: 820px) {
    .ipw__glass {
      max-inline-size: min(940px, calc(100vw - 28px));
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
      /* El aire entre columnas y el del borde acompañan al ancho: con
         34 y 36 fijos, a 820 las dos columnas no entraban y volvia la
         columna unica con sus 1154 de alto. */
      column-gap: clamp(20px, 2.6vw, 34px);
      align-items: start;
      padding: clamp(22px, 2.4vw, 34px) clamp(20px, 2.6vw, 36px) 22px;
    }

    .ipw__col {
      display: flex;
      flex-direction: column;
      /* Que las dos columnas empiecen arriba y no se estiren: si se
         estiran, la escalera y los locales crecen para emparejarse y
         vuelve el alto que estamos sacando. */
      align-self: start;
      min-inline-size: 0;
    }

    /* La firma cruza las dos columnas, al pie. */
    .ipw__firma {
      grid-column: 1 / -1;
      margin-block-start: 18px;
    }

    /* La columna izquierda respira: es la que lleva el mensaje. */
    .ipw__col--a { justify-content: center; }
    .ipw__col--a .ipw__titulo { font-size: clamp(30px, 2.6vw, 40px); }

    /* Y la derecha arranca sin el aire de arriba, que en una sola
       columna servia para separarla del contador y ahora no separa
       nada. */
    .ipw__col--b > :first-child { margin-block-start: 0; }
  }

  .ipw__logo {
    display: block;
    inline-size: 112px;
    aspect-ratio: 600 / 545;
    margin: 0 auto 14px;
  }

  .ipw__logo-img { inline-size: 100%; block-size: 100%; object-fit: contain; display: block; }

  @supports ((-webkit-mask-image: url('#')) or (mask-image: url('#'))) {
    .ipw__logo {
      -webkit-mask: var(--ipw-logo) center / contain no-repeat;
      mask: var(--ipw-logo) center / contain no-repeat;
      background-image: linear-gradient(
        115deg,
        #C8A66B 0%,
        #F6E7C1 14%,
        #FFFFFF 26%,
        #9FD8FF 42%,
        #D9B8FF 58%,
        #F6E7C1 74%,
        #C8A66B 100%
      );
      background-size: 320% 100%;
      background-position: 0% 50%;
      animation: ipw-brillo 11s ease-in-out infinite;
    }

    /* Queda por debajo de la mascara ocupando el lugar; invisible, pero
       sostiene la caja si la imagen tarda. */
    .ipw__logo-img { opacity: 0; }
  }

  @keyframes ipw-brillo {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }

  .ipw__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px 7px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.12);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    line-height: 1;
  }

  .ipw__punto {
    inline-size: 6px;
    block-size: 6px;
    border-radius: 50%;
    background: var(--ipw-verde);
    flex: none;
    animation: ipw-late 2s ease-in-out infinite;
  }

  @keyframes ipw-late { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

  .ipw__titulo {
    margin: 18px 0 0;
    font-size: clamp(30px, 6vw, 44px);
    line-height: 1.04;
    letter-spacing: -0.03em;
    font-weight: 800;
    text-wrap: balance;
  }

  .ipw__bajada {
    margin: 12px auto 0;
    max-inline-size: 42ch;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.78);
  }

  /* ── EL CONTADOR ──────────────────────────────────────────────── */
  .ipw__contador {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-block-start: 26px;
  }

  .ipw__contador[hidden] { display: none; }

  .ipw__tile {
    padding: 14px 6px 11px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
  }

  .ipw__tile b {
    display: block;
    font-size: clamp(22px, 5vw, 30px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
  }

  .ipw__tile span {
    display: block;
    margin-block-start: 5px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.62);
  }

  .ipw__ya {
    margin: 22px 0 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--ipw-oro);
  }

  .ipw__ya[hidden] { display: none; }

  /* ── LOS LOCALES ──────────────────────────────────────────────── */
  .ipw__locales-tit {
    margin: 22px 0 10px;
    padding-block-start: 18px;
    border-block-start: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
  }

  .ipw__locales { text-align: start; }

  /* El bloque de sucursales nacio para la ficha, sobre fondo claro y con
     acentos dorados. Aca va sobre vidrio oscuro: se le da vuelta la paleta
     sin tocar el snippet, que lo comparte con la ficha y la pestaña. */
  .ipw .ijsuc__caja {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.05);
  }

  .ipw .ijsuc__fila { border-block-start-color: rgba(255, 255, 255, 0.1); }
  .ipw .ijsuc__fila:active { background: rgba(255, 255, 255, 0.08); }
  .ipw .ijsuc__nom { color: #FFFFFF; }
  .ipw .ijsuc__dir { color: rgba(255, 255, 255, 0.58); }
  .ipw .ijsuc__ver { color: var(--ipw-oro); }
  .ipw .ijsuc__foto,
  .ipw .ijsuc__cab-foto { background: rgba(255, 255, 255, 0.08); }
  .ipw .ijsuc__cab-nom { color: #FFFFFF; }

  .ipw .ijsuc__volver {
    border-color: rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.08);
    color: #FFFFFF;
  }

  .ipw .ijsuc__marco {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.06);
  }

  .ipw .ijsuc__maps {
    color: var(--ipw-oro);
    text-decoration-color: rgba(200, 166, 107, 0.5);
  }

  @media (hover: hover) and (pointer: fine) {
    .ipw .ijsuc__fila:hover { background: rgba(255, 255, 255, 0.07); }
    .ipw .ijsuc__volver:hover { background: rgba(255, 255, 255, 0.16); }
  }

  /* ── ACCIONES ─────────────────────────────────────────────────── */

  .ipw__acciones {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-block-start: 16px;
  }

  .ipw__wa,
  .ipw__ig {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 18px;
    border-radius: 999px;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 700;
    transition: transform 160ms ease-out, background 200ms ease;
  }

  .ipw__wa { background: var(--ipw-verde); color: #0A2E16; }
  .ipw__ig { border: 1px solid rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.1); color: #fff; }
  .ipw__wa svg { inline-size: 15px; block-size: 15px; }
  .ipw__wa:active, .ipw__ig:active { transform: scale(0.97); }

  /* Es un boton de verdad, no un enlace perdido: lo usa el equipo y tiene
     que encontrarse de una. Vidrio como el resto, pero sin relleno, para
     que no compita con el de WhatsApp. */
  .ipw__clave {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-block-start: 20px;
    padding: 11px 20px;
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: rgba(255, 255, 255, 0.88);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 200ms ease, border-color 200ms ease, transform 160ms ease-out;
  }

  .ipw__clave svg { inline-size: 14px; block-size: 14px; flex: none; opacity: 0.8; }

  .ipw__clave:active { transform: scale(0.97); }

  .ipw__clave:focus-visible { outline: 2px solid var(--ipw-oro); outline-offset: 3px; }

  /* ── LA FIRMA ─────────────────────────────────────────────────── */
  .ipw__firma {
    display: block;
    margin-block-start: 18px;
    padding-block-start: 14px;
    border-block-start: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.38);
    transition: color 220ms ease;
  }

  @media (hover: hover) and (pointer: fine) {
    .ipw__firma:hover { color: var(--ipw-oro); }
  }

  @media (hover: hover) and (pointer: fine) {
    .ipw__btn:hover { background: #D9B87C; }
    .ipw__wa:hover { background: #1FBD5B; }
    .ipw__ig:hover { background: rgba(255, 255, 255, 0.18); }
    .ipw__clave:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.45); color: #fff; }
  }

  @media (max-width: 480px) {
    .ipw__glass { padding: 30px 22px 24px; border-radius: 24px; }
    .ipw__contador { gap: 7px; }
    .ipw__tile { padding: 12px 4px 9px; border-radius: 14px; }
  }

  /* ── PANTALLAS BAJAS ───────────────────────────────────────────────
     En un telefono de 812 de alto la tarjeta medía 877, asi que la firma y
     el boton de contraseña caian abajo del pliegue y habia que scrollear
     una pagina que es toda una sola pantalla. Se achican los AIRES, no los
     textos: el contenido se lee igual. Medido el 05/11/2026. */
  @media (max-height: 900px) {
    .ipw { padding: 12px; }
    .ipw__glass { padding: 22px 20px 18px; }
    .ipw__logo { inline-size: 84px; margin-block-end: 10px; }
    .ipw__titulo { margin-block-start: 14px; }
    .ipw__bajada { margin-block-start: 10px; }
    .ipw__contador { margin-block-start: 18px; }
    .ipw__locales-tit { margin-block-start: 16px; margin-block-end: 8px; }
    .ipw__acciones { margin-block-start: 12px; }
    .ipw__clave { margin-block-start: 14px; }
    .ipw__firma { margin-block-start: 12px; }
    .ipw__tile { padding: 10px 4px 8px; }
  }

  /* ── EL TELEFONO, UN POCO MAS COMPACTO ─────────────────────────
     09/11/2026, Rodrigo: "en movil esta bien, quizas yo lo achicaria
     un poco mas para que no ocupe tanto, pero un poquito nomas".

     Se bajan AIRES y el logo, que es lo que mas lugar ocupa sin decir
     nada nuevo. Los textos no se tocan: achicar el titulo de una
     pagina que es casi puro titulo es achicar el mensaje. */
  @media (max-width: 480px) {
    .ipw { padding: 10px; }
    .ipw__glass { padding: 20px 17px 16px; }
    .ipw__logo { inline-size: 74px; margin-block-end: 8px; }
    .ipw__titulo { margin-block-start: 11px; }
    .ipw__bajada { margin-block-start: 8px; }
    .ipw__contador { margin-block-start: 14px; gap: 6px; }
    .ipw__tile { padding: 9px 4px 7px; border-radius: 13px; }
    .ipw__escalera { margin-block-start: 13px; }
    .ipw__locales-tit { margin-block-start: 13px; margin-block-end: 7px; }
    .ipw__acciones { margin-block-start: 10px; }
    .ipw__clave { margin-block-start: 11px; }
    .ipw__firma { margin-block-start: 9px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .ipw__punto { animation: none; }
    .ipw__logo { animation: none; background-position: 0% 50%; }
    .ipw__wa, .ipw__ig, .ipw__clave { transition: none; }
  }
/* END_SECTION:indajaus-password */

/* START_SECTION:layered-slideshow (INDEX:34) */
.layered-slideshow-section {
    position: relative;
  }

  layered-slideshow-component {
    display: block;
    width: 100%;
  }

  .layered-slideshow__container {
    --radius: calc(var(--corner-radius, 1) * 1rem);
    --button-width: 56px;
    --border-color: var(--color-background);
    --inactive-tabs-width: calc((var(--total-tabs) - 1) * var(--button-width));
    --active-panel-width: calc(100cqi - var(--inactive-tabs-width));
    width: 100%;
    position: relative;
    container-type: inline-size;
    border-radius: var(--radius);
    overflow: hidden;
  }

  .layered-slideshow__container:not([size='auto']) {
    height: 100%;
  }

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

  @media screen and (min-width: 750px) {
    layered-slideshow-component {
      min-height: var(--layered-min-height-desktop, 0px);
    }
  }

  .layered-slideshow__tablist {
    display: grid;
    grid-template-columns: var(--active-tab);
    position: absolute;
    inset: 0;
    height: 100%;
    pointer-events: none;
    z-index: var(--layer-raised);
  }

  .layered-slideshow__tablist button {
    width: var(--button-width);
    height: 100%;
    pointer-events: all;
    opacity: 0;
    cursor: grab;
    border: none;
    background: transparent;
    padding: 0;
    position: relative;
    outline: none;
    transition: opacity 0.2s ease;
  }

  .layered-slideshow__tablist button:active {
    cursor: grabbing;
  }

  .layered-slideshow__tablist button[aria-selected='true'] {
    cursor: default;
  }

  .layered-slideshow__tablist button:focus-visible {
    opacity: 1;
  }

  .layered-slideshow__container[data-dragging] {
    cursor: grabbing;
  }

  .layered-slideshow__container[data-instant-transitions],
  .layered-slideshow__container:is([data-dragging], [data-instant-transitions])
    :is(
      .layered-slideshow__tablist,
      .layered-slideshow__panels,
      .layered-slideshow__panel-content,
      .layered-slideshow__content
    ) {
    transition: none;
  }

  .layered-slideshow__panels {
    display: grid;
    grid-template-columns: var(--active-tab);
    height: 100%;
    overflow: hidden;
  }

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

  .layered-slideshow__panel:first-child .layered-slideshow__panel-content {
    width: var(--active-panel-width);
    border-left: var(--border-width) solid var(--border-color);
  }

  .layered-slideshow__panel:not(:first-child) .layered-slideshow__content {
    padding-inline-start: calc((var(--radius) * 2) + var(--padding-inline-start, 0px));
  }

  .layered-slideshow__panel-content {
    border: var(--border-width) solid var(--border-color);
    border-left: none;
    border-radius: var(--radius);
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;
    width: calc(var(--active-panel-width) + (var(--radius) * 2));
  }

  .layered-slideshow__panel-content :is(img, video, svg) {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Video poster visibility - poster shows initially and hides when panel becomes active */
  .layered-slideshow__video-poster {
    z-index: 1;
  }

  .layered-slideshow__video {
    z-index: 0;
  }

  /* When panel is active, hide poster so video is visible */
  .layered-slideshow__panel:not([inert]) .layered-slideshow__video-poster {
    opacity: 0;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* START_SECTION:logo (INDEX:36) */
.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:38) */
.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:39) */
/**
   * Blog posts page layout
   */
  .blog-posts {
    --page-content-width: var(--narrow-page-width);
    --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
    --columns-gap: 36px;
    --rows-gap: 36px;
  }

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

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

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

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

/* START_SECTION:main-cart (INDEX:40) */
.cart-page {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 var(--padding-5xl);
  }

  .cart-page--empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .cart-page--empty .cart-page__title,
  .cart-page--empty .cart-page__more-blocks {
    margin-top: var(--margin-6xl);
  }

  .cart-page__more-blocks {
    width: 100%;
  }

  .cart-page--empty .cart-title {
    text-align: center;
  }

  .cart-page__main {
    grid-column: 1;
  }

  .cart-page__summary {
    padding-top: var(--padding-xl);
  }

  .cart-page__title + .cart-page__items {
    margin-block-start: var(--margin-lg);
  }

  @media screen and (min-width: 750px) {
    .cart-page {
      grid-template-columns: 1fr min(50vw, var(--sidebar-width));
      grid-template-rows: min-content min-content 1fr;
    }

    .cart-page__summary {
      display: grid;
      height: 100%;
      grid-column: 2;
      grid-row: 1 / -1;
      align-self: stretch;
      grid-template-rows: subgrid;
      padding-top: 0;

      /* needed to support blurred effect from hero section */
      position: relative;
    }

    .section--page-width .cart-page:has(.cart-summary--extend) {
      grid-column: 2 / 4;
      grid-template-columns: 1fr minmax(
          var(--sidebar-width),
          calc((100vw - var(--page-width)) / 2 + var(--sidebar-width))
        );
    }
  }

  @media screen and (min-width: 1400px) {
    .cart-page {
      grid-template-columns: 1fr var(--sidebar-width);
    }
  }
/* END_SECTION:main-cart */

/* START_SECTION:marquee (INDEX:44) */
marquee-component {
    display: block;
    width: 100%;
    overflow: hidden;
  }

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

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

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

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

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

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

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

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

/* START_SECTION:media-with-content (INDEX:45) */
.section--page-width {
    &.media-with-content {
      grid-template-areas: 'margin-left media margin-right' 'margin-left content margin-right';

      @media screen and (min-width: 750px) {
        /* Wide proportion is media 3.5 parts, content 2.5 parts. Which equals 7|5. So divide the central column by 7+5 and multiply accordingly */
        --media-with-content-grid-columns: var(--full-page-grid-margin)
          calc((var(--full-page-grid-central-column-width) / 12) * 7)
          calc((var(--full-page-grid-central-column-width) / 12) * 5) var(--full-page-grid-margin);

        grid-template-areas: 'margin-left media content margin-right';
      }
    }

    &.media-with-content--media-right {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: var(--full-page-grid-margin)
          calc((var(--full-page-grid-central-column-width) / 12) * 5)
          calc((var(--full-page-grid-central-column-width) / 12) * 7) var(--full-page-grid-margin);

        grid-template-areas: 'margin-left content media margin-right';
      }
    }

    &.media-with-content--medium {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: var(--full-page-grid-margin)
          repeat(2, calc(var(--full-page-grid-central-column-width) / 2)) var(--full-page-grid-margin);
      }
    }

    &.media-with-content--narrow.media-with-content--media-right {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: var(--full-page-grid-margin)
          calc((var(--full-page-grid-central-column-width) / 3) * 2)
          calc(var(--full-page-grid-central-column-width) / 3) var(--full-page-grid-margin);
      }
    }

    &.media-with-content--narrow {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: var(--full-page-grid-margin)
          calc(var(--full-page-grid-central-column-width) / 3)
          calc((var(--full-page-grid-central-column-width) / 3) * 2) var(--full-page-grid-margin);
      }
    }
  }

  .section--full-width {
    &.media-with-content--media-right {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: 2.5fr 3.5fr;

        grid-template-areas: 'content media';
      }
    }

    &.media-with-content--medium {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: 1fr 1fr;
      }
    }

    &.media-with-content--narrow {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: 2fr 4fr;
      }
    }

    &.media-with-content--narrow.media-with-content--media-right {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: 4fr 2fr;
      }
    }
  }

  /* Keep the CSS specificity lower assuming that liquid won't assign this class with a full width section */
  .media-with-content.media-with-content--media-extend {
    grid-template-columns: var(--media-with-content-grid-columns);
    grid-template-areas: 'media media media' 'margin-left content margin-right';

    @media screen and (min-width: 750px) {
      grid-template-areas: 'media media content margin-right';
    }
  }

  .media-with-content--media-extend.media-with-content--media-right {
    @media screen and (min-width: 750px) {
      grid-template-areas: 'margin-left content media media';
    }
  }

  .media-with-content--media-right {
    @media screen and (min-width: 750px) {
      grid-template-areas: 'margin-left content media media';
    }
  }

  .media-with-content {
    --media-with-content-grid-columns: var(--full-page-grid-with-margins);

    grid-template-columns: var(--media-with-content-grid-columns);
    grid-template-areas: 'media media media' 'content content content';

    @media screen and (min-width: 750px) {
      --media-with-content-grid-columns: 3.5fr 2.5fr;

      /* Default desktop layout is wide media, on the left, in full page section */
      grid-template-areas: 'media content';
    }

    .media-block {
      grid-area: media;
    }

    .media-with-content__content {
      grid-area: content;
    }

    /* Inner blocks spacing */
    .media-with-content__content > .group-block-content {
      padding-inline: var(--page-margin);
      padding-block: calc(2 * var(--page-margin));

      @media screen and (min-width: 750px) {
        padding-block: var(--page-margin);
      }
    }

    &.section--page-width .media-with-content__content > .group-block-content {
      padding-inline: 0;

      @media screen and (min-width: 750px) {
        padding-inline-start: var(--page-margin);
      }
    }

    &.section--page-width.media-with-content--media-right .media-with-content__content > .group-block-content {
      padding-inline-end: var(--page-margin);
      padding-inline-start: 0;
    }
  }

  .media-with-content[data-shopify-visual-preview] {
    --hero-min-height: 500px;

    min-height: 500px;
  }
/* END_SECTION:media-with-content */

/* START_SECTION:password-footer (INDEX:46) */
.password-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-sm);
    padding-block: var(--padding-xl);
  }

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

    > a {
      display: flex;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* START_SECTION:quick-order-list (INDEX:55) */
.quick-order-list {
    --quantity-selector-width: 124px;
    --image-size: 43px;
    --quantity-header-padding: calc(var(--minimum-touch-target) + var(--gap-sm));
    --quick-order-quantity-column-width: calc(
      var(--quantity-selector-width) + 2 * var(--gap-sm) + 2 * var(--minimum-touch-target)
    );
    --transform-offset-negative: calc(-1 * var(--icon-stroke-width));
    --quick-order-first-column-width: 2fr; /* Takes 2 fractions of available space */
    --quick-order-price-column-width: 1fr; /* Takes 1 fraction */
    --quick-order-total-column-width: 1fr; /* Takes 1 fraction */

    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
  }

  .quick-order-list__container {
    width: 100%;
  }

  /* Grid container setup */
  .quick-order-list__grid {
    width: 100%;
    display: block; /* Container is block, children use grid */
    contain: layout; /* Isolate layout calculations for performance */
  }

  .quick-order-list__grid-body {
    contain: layout; /* Isolate layout calculations for performance */
  }

  .quick-order-list__grid-header,
  .quick-order-list__grid-row {
    display: grid;
    grid-template-columns:
      var(--quick-order-first-column-width) /* Variant column - takes 2 parts of available space */
      var(--quick-order-quantity-column-width) /* Fixed pixel width for quantity */
      var(--quick-order-price-column-width) /* Price column - takes 1 part */
      var(--quick-order-total-column-width); /* Total column - takes 1 part */
    gap: var(--gap-md);
    align-items: center;
  }

  .quick-order-list__grid-header {
    border-block-end: var(--style-border-width) solid var(--color-border);
    padding-block-end: var(--padding-xl);
    margin-block-end: var(--padding-sm);
    opacity: var(--opacity-85);
    font-weight: normal;
    font-size: var(--font-size--xs);
    letter-spacing: var(--letter-spacing--body-loose);
  }

  /* Add padding to quantity column header to align with content */
  .quick-order-list__grid-header .quick-order-list__grid-cell--quantity {
    padding-inline-start: var(--quantity-header-padding);
  }

  .quick-order-list__grid-row {
    padding-block-start: var(--padding-sm);
    padding-block-end: var(--padding-sm);
    content-visibility: auto;
    contain-intrinsic-size: auto
      calc(2 * var(--padding-sm) + var(--image-size) + var(--minimum-touch-target) + var(--padding-2xl));
  }

  @media screen and (min-width: 750px) {
    .quick-order-list__grid-row {
      contain-intrinsic-size: auto calc(2 * var(--padding-sm) + var(--image-size));
    }
  }

  .quick-order-list__grid-cell--variant {
    text-align: start;
    justify-self: stretch;
  }

  .quick-order-list__grid-cell--quantity {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    justify-self: stretch;
  }

  .quick-order-list__grid-cell--quantity .variant-item__inner-container {
    width: 100%;
    justify-content: flex-start;
  }

  .quick-order-list__grid-cell--price {
    text-align: end;
    justify-self: stretch;
  }

  .quick-order-list__grid-cell--total {
    text-align: end;
    justify-self: stretch;
  }

  .variant-item__image-container,
  .quick-order-list__table-image {
    width: var(--image-size);
    height: auto;
  }

  .quick-order-list .pagination {
    margin-block-start: 0;
    padding-block-start: var(--padding-xl);
    padding-block-end: 0;
  }

  .variant-item__inner-container {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
  }

  .volume-pricing-info-placeholder {
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
  }

  .variant-item__quantity .quantity-selector {
    display: flex;
    flex: 0 0 var(--quantity-selector-width);
    min-width: var(--quantity-selector-width);
    font-size: var(--font-size--xs);
    height: auto;
  }

  .variant-item__remove {
    background-color: transparent;
    color: var(--color-foreground);
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    justify-content: center;
    box-shadow: none;
    padding: 0;
  }

  .remove-icon-bottom,
  .remove-icon-top {
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  .variant-item__remove:not(.variant-item__remove--hidden):hover .remove-icon-top {
    transform: translate(var(--transform-offset-negative), var(--icon-stroke-width)) rotate(-15deg);
  }

  .variant-item__remove:not(.variant-item__remove--hidden):is(:hover, :active) .remove-icon-bottom {
    transform: translateY(var(--icon-stroke-width));
  }

  /* Hide remove button with opacity to prevent layout shift */
  .variant-item__remove--hidden {
    opacity: 0;
    pointer-events: none;
    cursor: default;
  }

  .variant-item__name {
    font-weight: var(--font-weight-medium);
  }

  .variant-item__sku {
    font-size: var(--font-size--3xs);
    opacity: var(--opacity-85);
  }

  .variant-item__details {
    display: inline-flex;
    flex-direction: column;
  }

  .variant-item__totals {
    flex: 0 0 auto;
    padding-block-start: var(--padding-2xs);
  }

  /* Compare at price styles */
  .variant-item__discounted-prices {
    display: flex;
    gap: var(--gap-2xs);
    justify-content: flex-end;
  }

  .variant-item__discounted-prices dd {
    margin: 0;
  }

  /* Mobile layout */
  @media screen and (max-width: 749px) {
    .quick-order-list__grid-header,
    .quick-order-list__grid-row {
      grid-template-columns: 1fr auto; /* Variant column and total column on mobile */
      gap: var(--gap-sm);
      max-width: 100%;
      overflow: hidden;
      align-items: flex-start;
    }

    .quick-order-list__grid-header .quick-order-list__grid-cell--total {
      text-align: end;
    }

    .quick-order-list__grid-row {
      margin-block-end: var(--margin-2xl);
      padding-block-end: var(--padding-2xl);
      border-block-end: var(--style-border-width) solid var(--color-border);
    }

    .quick-order-list__grid-row:last-child {
      margin-block-end: 0;
      border-block-end: none;
    }

    .variant-item__inner {
      flex: 1 1 auto;
      padding-inline-end: var(--padding-lg);
    }

    .variant-item__inner-container {
      display: flex;
      gap: var(--gap-md);
      align-items: flex-start;
    }

    .variant-item__details {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-width: 0; /* Allow text to shrink */
    }

    .variant-item__totals {
      flex: 0 0 auto;
      text-align: end;
      padding-block-start: var(--padding-2xs);
    }

    .variant-item__totals .variant-item__total-price {
      font-size: var(--font-size--sm);
      font-weight: var(--font-weight-medium);
    }

    .variant-item__title-container .variant-item__name {
      display: block;
      font-size: var(--font-size--sm);
      line-height: var(--line-height-tight);
      margin: 0;
    }

    .variant-item__mobile-price-container {
      margin-block-end: var(--margin-xs);
    }

    .variant-item__mobile-price {
      font-size: var(--font-size--sm);
      opacity: var(--opacity-85);
      white-space: nowrap;
    }

    /* Mobile compare at price styles */
    .variant-item__discounted-prices--mobile {
      display: flex;
      flex-direction: row;
      align-items: baseline;
      justify-content: flex-start;
      gap: var(--gap-xs);
      margin-block-start: var(--margin-2xs);
      margin-block-end: 0;
    }

    .variant-item__discounted-prices--mobile dd {
      display: inline;
    }

    .variant-item__mobile-quantity {
      display: flex;
      align-items: center;
      gap: 0;
    }

    /* Mobile-only content styles */
    .variant-item__mobile-info {
      display: flex;
      flex-direction: column;
      width: 100%;
    }

    .variant-item__image-container {
      flex: 0 0 var(--image-size);
      width: var(--image-size);
      height: var(--image-size);
    }

    .quick-order-list__table-image {
      width: 100%;
      height: 100%;
    }

    .variant-item__mobile-quantity .quantity-selector {
      display: flex;
      flex: 0 0 var(--quantity-selector-width);
      min-width: var(--quantity-selector-width);
      font-size: var(--font-size--xs);
      margin: 0;
      padding: 0;
    }

    /* Mobile remove button styling */
    .variant-item__remove--mobile {
      background-color: transparent;
      color: var(--color-foreground);
      width: var(--minimum-touch-target);
      height: var(--minimum-touch-target);
      min-width: var(--minimum-touch-target);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: none;
      padding: 0;
      margin: 0;
      flex-shrink: 0;
      border: none;
      cursor: pointer;
    }

    .variant-item__remove--mobile svg {
      width: var(--icon-size-sm);
      height: var(--icon-size-sm);
    }

    .variant-item__remove--mobile:not(.variant-item__remove--hidden):hover {
      opacity: var(--opacity-70);
    }

    .quick-order-list .pagination {
      padding-block-start: var(--padding-2xl);
    }
  }

  .quick-order-list-disabled {
    pointer-events: none;
  }

  .quick-order-list-total {
    background: var(--color-background);
    border-block-start: var(--style-border-width) solid var(--color-border);
  }

  /* Tablet and Desktop styles - sticky footer */
  @media screen and (min-width: 750px) {
    .quick-order-list-total {
      position: sticky;
      inset-block-end: 0;
      z-index: var(--layer-raised);
    }
  }

  .quick-order-list-total__info,
  .quick-order-list-total__confirmation {
    min-height: 8rem;
    padding-block-start: var(--padding-4xl);
  }

  .quick-order-list-total__info {
    align-items: flex-start;
    gap: var(--gap-md);
  }

  .quick-order-list-total__confirmation {
    display: flex;
    gap: var(--gap-2xl);
    align-items: center;
    justify-content: center;
    padding: var(--padding-2xl) var(--padding-xl);
  }

  .quick-order-list-total__column {
    display: flex;
    flex-direction: column;
  }

  .quick-order-list-total__actions {
    display: flex;
  }

  /* Desktop layout - Use CSS Grid to match main table alignment */
  @media screen and (min-width: 750px) {
    .quick-order-list-total__info {
      display: grid;
      grid-template-columns:
        var(--quick-order-first-column-width) /* Variant column - takes 2 parts of available space */
        var(--quick-order-quantity-column-width) /* Fixed pixel width for quantity */
        var(--quick-order-price-column-width) /* Price column - takes 1 part */
        var(--quick-order-total-column-width); /* Total column - takes 1 part */
    }

    .quick-order-list-total__column {
      grid-column: 1;
      display: flex;
      flex-direction: column;
      gap: var(--gap-md);
    }

    .quick-order-list-total__summary {
      grid-column: 2 / 5;
      display: grid;
      grid-template-columns: var(--quick-order-quantity-column-width, 234px) auto;
    }

    .quick-order-list-total__items {
      grid-column: 1;
      justify-self: center;
      text-align: center;
    }

    .quick-order-list-total__price {
      grid-column: 3;
      justify-self: end;
      text-align: end;
    }
  }

  /* Tablet-specific overrides - 750px to 989px */
  @media screen and (min-width: 750px) and (max-width: 989px) {
    .quick-order-list-total__actions {
      flex-direction: column;
    }

    .quick-order-list-total__messages {
      align-items: stretch;
    }

    .quick-order-list__remove-all-button {
      padding-inline: 0;
    }
  }

  .quick-order-list__button.button--full-width {
    width: 100%;
  }

  .quick-order-list__button.button {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .quick-order-list-total .button--unstyled {
    border: none;
    box-shadow: none;
    background-color: transparent;
    color: var(--color-foreground);
    cursor: pointer;
  }

  .quick-order-list__remove-all-button svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    flex-shrink: 0;
  }

  .quick-order-list-total__items span {
    display: block;
    margin-block-end: var(--margin-xs);
  }

  .quick-order-list-total__items .h5 {
    margin: 0;
    letter-spacing: var(--letter-spacing--body-loose);
    opacity: var(--opacity-85);
  }

  .quick-order-list-total__subtotal-value {
    display: block;
    margin-block-end: var(--margin-xs);
    line-height: var(--font-paragraph--line-height);
  }

  /* Ensure text-component displays properly */
  .quick-order-list-total__subtotal-value text-component {
    display: block;
  }

  .quick-order-list-total__subtotal {
    margin: 0;
    letter-spacing: var(--letter-spacing--body-loose);
    opacity: var(--opacity-85);
  }

  .quick-order-list-total__tax-note {
    opacity: var(--opacity-subdued-text);
  }

  .quick-order-list-total__messages {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
  }

  .quick-order-list-total__success,
  .quick-order-list-total__error {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .quick-order-list-total__success .icon-success,
  .quick-order-list-total__error .quick-order-list-total__icon--error {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    color: inherit;
  }

  .quick-order-list-total__success .icon-success svg,
  .quick-order-list-total__error .quick-order-list-total__icon--error svg {
    width: 100%;
    height: 100%;
  }

  .quick-order-list-total__error:empty,
  .quick-order-list-total__success:empty {
    display: none;
  }

  .quick-order-list-total__info.confirmation-visible {
    display: none;
  }

  .quick-order-list-total__confirmation-text {
    white-space: nowrap;
  }

  .quick-order-list-total__confirmation-buttons {
    display: flex;
    gap: var(--gap-md);
    align-items: center;
  }

  .quick-order-list-total__confirmation button {
    margin: 0;
    white-space: nowrap;
  }

  .quick-order-list__remove-all-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-sm);
  }

  /* Mobile styles */
  @media screen and (max-width: 749px) {
    .quick-order-list-total__info {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .quick-order-list-total__column {
      order: 3; /* Move column to the end on mobile */
      width: 100%;
      flex: 1 1 auto;
    }

    .quick-order-list-total__actions {
      flex-direction: column;
      width: 100%;
    }

    .quick-order-list-total__messages {
      width: 100%;
      align-items: center;
      margin-block-start: var(--margin-xs);
    }

    .quick-order-list-total__summary {
      order: 1; /* First on mobile */
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      gap: var(--gap-md);
    }

    .quick-order-list-total__items {
      text-align: center;
      width: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--gap-xs);
    }

    .quick-order-list-total__items span {
      display: inline;
      margin-block-end: 0;
    }

    .quick-order-list-total__items .h5 {
      display: inline;
    }

    .quick-order-list-total__price {
      text-align: center;
      width: 100%;
    }

    .quick-order-list-total__product-total {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--gap-xs);
    }

    .quick-order-list-total__product-total .quick-order-list-total__subtotal-value {
      display: inline-block;
      margin-block-end: 0;
    }

    .quick-order-list-total__product-total .quick-order-list-total__subtotal {
      display: inline;
    }

    .quick-order-list__button,
    .quick-order-list__remove-all-button {
      width: 100%;
      justify-content: center;
    }

    .quick-order-list-total__confirmation {
      flex-direction: column;
    }

    .quick-order-list-total__tax-note {
      margin-block-start: var(--margin-xs);
    }
  }
/* END_SECTION:quick-order-list */

/* START_SECTION:servicio-detalle (INDEX:61) */
.svd { --svd-oro: #C8A66B; --svd-negro: #0F1512; color: var(--svd-negro); }

  .svd__hero {
    background: var(--svd-negro);
    color: #fff;
    padding-block: 40px 44px;
  }
  .svd__hero-inner { max-width: 1120px; margin-inline: auto; padding-inline: 24px; }

  .svd__back {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 12.5px; font-weight: 700;
    color: rgba(255,255,255,0.62);
    text-decoration: none;
    margin-bottom: 18px;
    transition: color 0.2s ease;
  }
  .svd__back:hover { color: var(--svd-oro); }
  .svd__back svg { width: 15px; height: 15px; }

  .svd__eyebrow {
    display: block;
    font-size: 11px; font-weight: 800;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--svd-oro);
    margin-bottom: 8px;
  }

  .svd__title {
    font-size: clamp(26px, 4vw, 42px);
    font-weight: 800; letter-spacing: -0.02em; line-height: 1.1;
    margin: 0;
  }

  .svd__body {
    max-width: 1120px;
    margin-inline: auto;
    padding: 44px 24px 72px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 44px;
    align-items: start;
  }

  .svd__content { min-width: 0; font-size: 15px; line-height: 1.7; color: #3a3a3a; }
  .svd__content .svd-lead { font-size: 17px; line-height: 1.6; color: #1a1a1a; font-weight: 500; margin: 0 0 26px; }
  .svd__content h2 {
    font-size: 19px; font-weight: 800; color: var(--svd-negro);
    margin: 34px 0 12px; letter-spacing: -0.01em;
  }
  .svd__content h2::after {
    content: ""; display: block;
    inline-size: 26px; block-size: 2px;
    margin-block-start: 8px; background: var(--svd-oro);
  }
  .svd__content ul, .svd__content ol { margin: 0 0 16px; padding-left: 20px; }
  .svd__content li { margin-bottom: 7px; }
  .svd__content p { margin: 0 0 14px; }

  /* ── Carrusel ── */
  .svd-gallery {
    position: relative;
    margin: 0 0 30px;
    border-radius: 14px;
    overflow: hidden;
    background: #f2f2f2;
  }
  .svd-gallery img {
    width: 100%; height: auto; display: block;
    aspect-ratio: 16 / 10; object-fit: cover;
  }

  .svd-gallery.is-carousel { display: block; }
  .svd-gallery.is-carousel .svd-track {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .svd-gallery.is-carousel .svd-track img { flex: 0 0 100%; }

  .svd-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(15, 21, 18, 0.62);
    border: none; border-radius: 50%;
    color: #fff; cursor: pointer; z-index: 2;
    transition: background 0.2s ease;
  }
  .svd-arrow:hover { background: var(--svd-oro); color: var(--svd-negro); }
  .svd-arrow svg { width: 17px; height: 17px; }
  .svd-arrow--prev { left: 12px; }
  .svd-arrow--next { right: 12px; }

  .svd-dots {
    position: absolute; bottom: 12px; left: 0; right: 0;
    display: flex; justify-content: center; gap: 6px; z-index: 2;
  }
  .svd-dot {
    width: 7px; height: 7px; border-radius: 50%; border: none; padding: 0;
    background: rgba(255,255,255,0.55); cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
  }
  .svd-dot.is-active { background: var(--svd-oro); transform: scale(1.4); }

  /* ── Aside ── */
  .svd__aside { position: sticky; top: 100px; }

  .svd__card {
    background: #faf6ee;
    border: 1px solid rgba(200, 166, 107, 0.4);
    border-radius: 14px;
    padding: 22px 20px;
  }
  .svd__card-title { margin: 0 0 8px; font-size: 16px; font-weight: 800; color: var(--svd-negro); }
  .svd__card-text { margin: 0 0 16px; font-size: 13.5px; line-height: 1.6; color: #555; }

  .svd__wsp {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: #25D366; color: #fff;
    font-size: 14px; font-weight: 700;
    text-decoration: none;
    padding: 13px 16px; border-radius: 10px;
    transition: background 0.2s ease;
  }
  .svd__wsp:hover { background: #1DA851; color: #fff; }
  .svd__wsp svg { width: 18px; height: 18px; flex: none; }

  .svd__card-note { margin: 12px 0 0; font-size: 12px; color: #8a8a8a; text-align: center; }

  @media (max-width: 899px) {
    .svd__body { grid-template-columns: 1fr; gap: 32px; padding-block: 32px 56px; }
    .svd__aside { position: static; }
  }

  @media (max-width: 749px) {
    .svd__hero-inner, .svd__body { padding-inline: 16px; }
    .svd-arrow { width: 32px; height: 32px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .svd-gallery.is-carousel .svd-track { transition: none; }
  }
/* END_SECTION:servicio-detalle */

/* START_SECTION:slideshow (INDEX:63) */
.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:sucursales-indajaus (INDEX:64) */
.sux {
    --sux-ease: cubic-bezier(0.23, 1, 0.32, 1);
    --sux-oro: #C8A66B;
    --sux-verde: #25D366;
    --sux-verde-txt: #0B7A3B;
    --sux-tinta: #0F1512;
    --sux-linea: rgba(15, 21, 18, 0.11);

    background: #F7F6F3;
    color: var(--sux-tinta);
    padding-block: 72px 88px;
  }

  .sux__inner {
    max-width: 1180px;
    margin: 0 auto;
    padding-inline: 40px;
  }

  .sux__head { margin-block-end: 36px; max-inline-size: 70ch; }

  /* El badge va en el verde nuevo, no en dorado: es la regla que quedo el
     05/11/2026 para todas las pastillas de la tienda. */
  .sux__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px 7px 12px;
    border: 1px solid rgba(16, 170, 80, 0.4);
    border-radius: 999px;
    background: rgba(37, 211, 102, 0.13);
    color: var(--sux-verde-txt);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1;
  }

  .sux__punto {
    inline-size: 6px;
    block-size: 6px;
    flex: none;
    border-radius: 50%;
    background: var(--sux-verde);
  }

  .sux__title {
    margin: 16px 0 0;
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.04;
    letter-spacing: -0.03em;
    font-weight: 800;
    text-wrap: balance;
  }

  .sux__subtitle {
    margin: 12px 0 0;
    font-size: 15.5px;
    line-height: 1.68;
    color: rgba(15, 21, 18, 0.58);
  }

  .sux__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }

  .sux__card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--sux-linea);
    border-radius: 18px;
    overflow: hidden;
  }

  .sux__media { aspect-ratio: 4 / 3; background: #E6E3DC; }

  .sux__img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
  }

  .sux__body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }

  .sux__nombre {
    margin: 0;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.02em;
  }

  .sux__dir { margin: 5px 0 0; font-size: 14.5px; color: rgba(15, 21, 18, 0.6); }

  .sux__datos {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    border-block-start: 1px solid var(--sux-linea);
  }

  .sux__datos li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 0;
    border-block-end: 1px solid var(--sux-linea);
    font-size: 13.5px;
  }

  .sux__datos span { color: rgba(15, 21, 18, 0.56); }
  .sux__datos b { font-weight: 700; text-align: end; }

  .sux__retiro {
    display: inline-flex;
    align-self: flex-start;
    margin: 14px 0 0;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(37, 211, 102, 0.13);
    border: 1px solid rgba(16, 170, 80, 0.32);
    color: var(--sux-verde-txt);
    font-size: 12px;
    font-weight: 800;
  }

  .sux__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-block-start: 18px;
  }

  .sux__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 11px 18px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: transform 160ms ease-out, background 200ms ease, border-color 200ms ease;
  }

  .sux__btn:active { transform: scale(0.97); }

  .sux__btn:focus-visible { outline: 2px solid var(--sux-verde); outline-offset: 3px; }

  .sux__btn--mapa { background: var(--sux-tinta); color: #fff; }

  .sux__btn--ghost {
    background: transparent;
    border-color: rgba(15, 21, 18, 0.2);
    color: var(--sux-tinta);
  }

  .sux__btn--wa { background: #25D366; color: #0A2E16; }
  .sux__btn--wa svg { inline-size: 15px; block-size: 15px; }

  @media (hover: hover) and (pointer: fine) {
    .sux__btn--mapa:hover { background: #1C2622; }
    .sux__btn--ghost:hover { background: rgba(15, 21, 18, 0.04); border-color: rgba(15, 21, 18, 0.36); }
    .sux__btn--wa:hover { background: #1FBD5B; }
  }

  /* El mapa aparece debajo de los botones, dentro de la misma tarjeta: no
     hay que irse a ningun lado para ver donde queda. */
  .sux__marco {
    margin-block-start: 16px;
    block-size: 230px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--sux-linea);
    background: #EFEAE0;
  }

  .sux__marco[hidden] { display: none; }
  .sux__marco iframe { inline-size: 100%; block-size: 100%; border: 0; display: block; }

  .sux__nota {
    margin: 28px 0 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: rgba(15, 21, 18, 0.56);
  }

  @media (max-width: 899px) {
    .sux__grid { grid-template-columns: 1fr; }
  }

  @media (max-width: 749px) {
    .sux { padding-block: 48px 64px; }
    .sux__inner { padding-inline: 20px; }
    .sux__body { padding: 20px 18px 22px; }
    .sux__btn { flex: 1 1 auto; }
  }

  @media (prefers-reduced-motion: reduce) {
    .sux__btn { transition: none; }
  }
/* END_SECTION:sucursales-indajaus */

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

/* START_BLOCK:_announcement (INDEX:66) */
.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:67) */
.blog-post-card {
    display: flex;
    flex-direction: column;
    text-align: var(--text-align);
    column-gap: var(--columns-gap);
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .cart-summary--extend .cart-summary__inner {
    height: 100%;
    padding: var(--padding-md) 0 var(--padding-4xl);

    @media screen and (min-width: 750px) {
      grid-row: 2 / -1;
      padding-inline: var(--page-margin);
      width: var(--sidebar-width);
    }
  }

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

  @media screen and (max-width: 749px) {
    .inherit-parent-scheme--mobile {
      --color-background: inherit;
      --color-background-rgb: inherit;
      --color-foreground: inherit;
      --color-foreground-rgb: inherit;
      --color-primary: inherit;
      --color-primary-rgb: inherit;
      --color-primary-hover: inherit;
      --color-primary-hover-rgb: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;
      --color-shadow: inherit;
      --color-shadow-rgb: inherit;
      --color-foreground-heading: inherit;
      --color-primary-button-text: inherit;
      --color-primary-button-background: inherit;
      --color-primary-button-border: inherit;
      --color-primary-button-hover-text: inherit;
      --color-primary-button-hover-background: inherit;
      --color-primary-button-hover-border: inherit;
      --color-secondary-button-text: inherit;
      --color-secondary-button-background: inherit;
      --color-secondary-button-border: inherit;
      --color-secondary-button-hover-text: inherit;
      --color-secondary-button-hover-background: inherit;
      --color-secondary-button-hover-border: inherit;
      --color-input-text: inherit;
      --color-input-text-rgb: inherit;
      --color-input-background: inherit;
    }
  }
/* END_BLOCK:_cart-summary */

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

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

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

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

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

/* START_BLOCK:_collection-image (INDEX:80) */
.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:82) */
.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:86) */
.featured-blog-posts-card {
    text-align: var(--text-align);
  }

  .featured-blog-posts-card__inner {
    gap: var(--gap);
  }

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

  /* Editorial layout */
  .resource-list:not(.hidden--desktop) .blog-post-card--flexible-aspect-ratio {
    .featured-blog-posts-card__content {
      --flex-wrap: nowrap;
    }
  }

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

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

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

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

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

/* START_BLOCK:_featured-blog-posts-image (INDEX:87) */
.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:89) */
.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:92) */
.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:93) */
.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:94) */
.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);
  }

  /* ── EL CAMBIO DE LOGO AL BAJAR ─────────────────────────────────────
     Los dos logos van en la MISMA celda de una grilla de 1x1. Asi no hay
     posicionamiento absoluto, el enlace conserva su alto y al cruzarse no
     se mueve nada alrededor.

     Se cruzan con opacity y no con display, porque display no se puede
     animar y el cambio seria de golpe. La visibility acompaña para que el
     que esta apagado no reciba clics.

     Ojo: el logo chico tiene adentro su propio juego de display (el de
     --header-logo-display, para el header transparente). Por eso el
     cruce se hace en este envoltorio y no sobre esos contenedores: asi
     esa logica sigue funcionando sin que nos pisemos.

     Manda la clase ij-bajo en <html>, que pone el script de arriba. Sin
     JavaScript se ve el logo grande, que es el estado correcto al entrar. */
  /* El min-inline-size reserva el ancho del logo grande. Como el grande
     va absoluto, no empuja nada por si solo, y sin esto el enlace media
     lo que mide el logo chico y el grande se montaba sobre el menu. El
     alto, en cambio, lo sigue marcando el chico: eso es lo que queremos. */
  .ij-logo__swap {
    position: relative;
    display: grid;
    align-items: center;
    justify-items: center;
    min-inline-size: var(--ij-ancho-mob);
  }

  @media screen and (min-width: 750px) {
    .ij-logo__swap {
      min-inline-size: var(--ij-ancho);
    }
  }

  .ij-logo__swap > * {
    grid-area: 1 / 1;
    transition:
      opacity 260ms cubic-bezier(0.23, 1, 0.32, 1),
      scale 330ms cubic-bezier(0.23, 1, 0.32, 1),
      visibility 330ms;
  }

  /* ── POR QUE EL GRANDE VA ABSOLUTO ──────────────────────────────────
     Primero estaban los dos en la grilla y el header crecia de 74 a 92px:
     la celda toma el alto del mas alto de los dos, y el logo arrastra
     ademas los ~22px de aire que tiene alrededor en la fila.

     Lo peor no era que creciera, sino que crecia SIEMPRE, tambien al
     bajar, porque la celda se mide igual este el grande visible o no.
     Quedaba un header alto justo cuando queremos que se sienta compacto.

     Sacandolo del flujo, el alto del header lo sigue marcando el logo
     normal y el grande se dibuja encima, centrado. Entra holgado porque
     es mas bajo que el header, y la fila tiene overflow visible.

     Se usan las propiedades translate y scale por separado, y no
     transform, porque el centrado y la animacion tienen que convivir:
     con transform, la regla de la animacion pisaba el centrado. */
  /* width: max-content es obligatorio aca. Un elemento absoluto sin ancho
     se encoge a lo que le quede libre, y con left:50% eso es la MITAD del
     contenedor: la primera vez el logo quedo en 29px de ancho en vez de
     77, aplastado. */
  .ij-logo__grande {
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    inline-size: max-content;
  }

  /* width:auto, no una medida fija: la proporcion la da el aspect-ratio
     que el navegador deduce de los atributos width y height de la imagen,
     asi que no hay salto de maquetacion igual. Con medida fija, el dia que
     cambien el archivo por uno de otra proporcion, se deformaba. */
  .ij-logo__grande-img {
    display: block;
    object-fit: contain;
    height: var(--ij-alto-mob);
    width: auto;
  }

  @media screen and (min-width: 750px) {
    .ij-logo__grande-img {
      height: var(--ij-alto);
    }
  }

  /* ── EL CRUCE ───────────────────────────────────────────────────────
     Rodrigo pidio que fuera "mas clean". Antes los dos se desvanecian al
     mismo tiempo y en el medio se veian los dos pisados al 50%: son dos
     dibujos distintos superpuestos, y eso se lee sucio.

     Dos cambios. Uno: el que entra arranca 90ms despues de que el que sale
     empieza a irse, asi no se pisan. El retraso se pone SIEMPRE sobre el
     estado que entra, en los dos sentidos, para que al volver arriba pase
     lo mismo y no se invierta.

     Dos: el que se va se achica un poco y el que llega entra apenas mas
     grande. Como los dos comparten la misma marca, el ojo lo lee como UNA
     pieza que se transforma y suelta la palabra INDAJAUS, en vez de dos
     imagenes que se cambian. */

  /* Arriba de todo: se ve el grande. */
  .ij-logo__chico {
    opacity: 0;
    visibility: hidden;
    scale: 1.1;
    transition-delay: 0ms;
  }

  .ij-logo__grande {
    scale: 1;
    transition-delay: 130ms;
  }

  /* Corrido: se ve el chico. */
  :root.ij-bajo .ij-logo__grande {
    opacity: 0;
    visibility: hidden;
    scale: 0.82;
    transition-delay: 0ms;
  }

  :root.ij-bajo .ij-logo__chico {
    opacity: 1;
    visibility: visible;
    scale: 1;
    transition-delay: 130ms;
  }

  @media (prefers-reduced-motion: reduce) {
    .ij-logo__swap > * {
      transition: none;
    }
  }
/* END_BLOCK:_header-logo */

/* START_BLOCK:_header-menu (INDEX:95) */
.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: flex;
      min-height: var(--header-drawer-min-height);
    }
  }

  .header--compact .header__drawer {
    min-height: var(--minimum-touch-target);
  }

  .menu-list--mobile {
    &.menu-list {
      display: grid;
    }

    & .menu-list__list {
      width: max-content;
      margin-inline: auto;
      gap: var(--menu-horizontal-gap);
    }

    & li {
      width: max-content;
      padding-block: var(--padding-sm);
    }

    & li:first-of-type {
      padding-inline-start: var(--menu-horizontal-gap);
    }

    & li:last-of-type {
      padding-inline-end: var(--menu-horizontal-gap);
    }

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

  .menu-list__scroll-container {
    position: relative;
    overflow-x: auto;
    mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
    padding-block: var(--padding-2xs);
  }

  .menu-list {
    --menu-horizontal-gap: var(--gap-xl);
    --menu-vertical-gap: var(--gap-xl);

    display: flex;
    height: 100%;
  }

  .menu-list__list {
    display: flex;
    justify-content: var(--grid-area-alignment);
  }

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

  .menu-list__list-item[aria-hidden='true'] {
    visibility: hidden;
  }

  .menu-list__link {
    font-family: var(--menu-top-level-font-family);
    font-style: var(--menu-top-level-font-style);
    font-weight: var(--menu-top-level-font-weight);
    font-size: var(--menu-top-level-font-size);
    line-height: var(--menu-top-level-font-line-height);
    text-transform: var(--menu-top-level-font-case);
    color: var(--menu-top-level-font-color);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
    height: 100%;
    margin-block: 0;

    &::after {
      content: '';
      position: absolute;
      display: none;
      top: var(--header-padding);
      height: var(--box-height);
      left: 0;
      right: 0;
    }

    &[data-safety-box='true']::after {
      display: block;
    }

    &:hover,
    &:focus {
      color: var(--menu-top-level-font-color);
    }

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

  .menu-list__link-title {
    padding-inline: calc(var(--gap-xl) / 2);
  }
  [slot='overflow'] .menu-list__link-title {
    padding-inline: 0;
  }

  .menu-list__list-item:not([slot='overflow']) {
    flex-direction: column;
  }
  .menu-list__list-item:not([slot='overflow'])::after {
    content: '';
    width: 100%;
    height: var(--header-padding);
    margin-bottom: calc(-1 * var(--header-padding));
  }

  [slot='overflow'] > .menu-list__link::after {
    content: none;
  }

  /*
    High specificity selectors to subdue non-hovered links without javascript.
    If the need for js-generated `hovered` and `focused` classes arises for another reason we can simplify these.
  */
  .menu-list:where(:has(.menu-list__list-item:hover)),
  .menu-list:where(:has(.menu-list__list-item:focus-within)),
  .menu-list:where(:has(.menu-list__list-item:not([aria-hidden='true']) .menu-list__link--active)) {
    .menu-list__link {
      color: rgb(var(--menu-top-level-font-color-rgb) / var(--opacity-subdued-text));
    }
  }

  /* stylelint-disable-next-line selector-max-specificity */
  .menu-list:not(:has(.menu-list__list-item:hover)) .menu-list__link--active,
  .menu-list .menu-list__list-item:where(:hover, :focus-within) .menu-list__link,
  .menu-list .menu-list__list-item[slot='overflow'] .menu-list__link[aria-expanded='true'] {
    color: var(--menu-top-level-font-color);
  }

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

    gap: 0;
    margin-inline: calc(-1 * var(--menu-horizontal-gap) / 2);
  }

  .overflow-menu {
    background-color: transparent;
    padding: var(--focus-outline-size);
    margin: calc(-1 * var(--focus-outline-size));
  }

  /** mega menu **/
  .menu-list__submenu,
  .overflow-menu::part(overflow) {
    --submenu-padding-block-start: var(--padding-3xl);
    --submenu-padding-block-end: var(--padding-3xl);

    background-color: transparent;
  }

  .header__row[style*='--border-bottom-width: 0px'] {
    .menu-list__submenu.color-scheme-matches-parent,
    .overflow-menu.color-scheme-matches-parent::part(overflow) {
      --submenu-padding-block-start: 0px;
    }
  }

  .menu-list__list-item:where(:not([slot='overflow'])) > .menu-list__submenu,
  .overflow-menu::part(overflow) {
    --submenu-content-opacity: 0;
    --submenu-content-animation: opacity calc(var(--submenu-animation-speed) * 0.75) var(--animation-easing);

    visibility: hidden;
    position: absolute;
    width: 100%;
    left: 0;
    top: calc(100% - 1px + var(--border-bottom-width) - (var(--full-open-header-height) - var(--submenu-height)));
    z-index: var(--layer-header-menu);
    padding-inline: var(--padding-inline);
    /* Clip path starts at header height so it doesn't mess with the pointer events in the header */
    clip-path: rect(var(--header-height) 100% var(--full-open-header-height) 0); /* stylelint-disable-line */
    transition: clip-path var(--submenu-animation-speed) var(--ease-out-cubic); /* stylelint-disable-line */
  }

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

  /* Show the submenus on hover */
  .menu-list__list-item:has([aria-expanded='true']) > .menu-list__submenu,
  /* Show the overflow menu when a menu item is hovered */
  .overflow-menu:has([slot="overflow"] [aria-expanded='true'])::part(overflow-list),
  /* Keep the submenus open when they are hovered */
  .menu-list__submenu:is(:hover),
  .overflow-menu::part(overflow):hover {
    --submenu-content-opacity: 1;

    visibility: visible;
  }

  .overflow-menu::part(overflow) {
    --menu-top-level-font-size: var(--font-size--xlarge);

    display: grid;
    grid-template-columns: var(--full-page-grid-with-margins);
  }

  .overflow-menu::part(overflow-list) {
    position: relative;
    display: grid;
    grid-template-columns: minmax(auto, 200px) 1fr;
    grid-template-areas: 'left right';
    grid-template-rows: max-content;
    grid-gap: 0;
    grid-column: 2;
  }

  .menu-list__list-item:is([slot='overflow']) {
    --menu-top-level-font-color: var(--color-foreground);
    --menu-top-level-font-color-rgb: var(--color-foreground-rgb);

    display: contents;
    white-space: normal;

    .menu-list__link {
      grid-area: left;
      grid-row: auto;
      height: min-content;
      font-size: var(--font-size--xl);
      transition: var(--submenu-content-animation);
    }

    .menu-list__submenu {
      visibility: hidden;
      grid-row: 1;
      grid-area: right;
      grid-row-end: span calc(var(--overflow-count) + 1);
      padding-inline-start: var(--menu-horizontal-gap);
    }

    .menu-list__submenu-inner {
      transform: none;
      grid-column: unset;
      padding-block: 0;
    }

    .menu-list__link[aria-expanded='true'] + .menu-list__submenu {
      visibility: visible;
    }
  }

  .header-menu {
    height: 100%;
  }

  .menu-list__submenu-inner {
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .menu-list__submenu-inner,
  .overflow-menu::part(overflow-list) {
    padding-block-start: var(--submenu-padding-block-start);
    padding-block-end: var(--submenu-padding-block-end);
    padding-inline: var(--section-padding-inline);
    opacity: var(--submenu-content-opacity);
    transition: var(--submenu-content-animation);
    transform: translateY(calc(var(--full-open-header-height) - var(--submenu-height)));

    /* Make overflow menu scrollable when content exceeds viewport */
    max-height: calc(80vh - var(--header-height));
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--color-foreground-rgb) / var(--opacity-40)) transparent;
  }

  .mega-menu__link {
    font-family: var(--menu-child-font-family);
    font-style: var(--menu-child-font-style);
    font-weight: var(--menu-child-font-weight);
    font-size: var(--menu-child-font-size);
    line-height: var(--menu-child-font-line-height);
    text-transform: var(--menu-child-font-case);
    color: var(--menu-child-font-color);
    white-space: normal;
    text-decoration: none;
    display: inline-flex;
    padding: var(--padding-2xs) 0;

    &:hover {
      color: var(--menu-child-active-font-color);
    }
  }

  .mega-menu__link--parent {
    font-family: var(--menu-parent-font-family);
    font-style: var(--menu-parent-font-style);
    font-weight: var(--menu-parent-font-weight);
    font-size: var(--menu-parent-font-size);
    line-height: var(--menu-parent-font-line-height);
    text-transform: var(--menu-parent-font-case);
    color: var(--menu-parent-font-color);

    &:hover {
      color: var(--menu-parent-active-font-color);
    }
  }

  @media screen and (max-width: 989px) {
    .mega-menu__content-list-item--hidden-tablet {
      display: none;
    }
  }

  .mega-menu__link:has(.mega-menu__link-image) {
    display: flex;
    flex-direction: column;
    padding-inline: 0;
    padding-block: var(--padding-sm) 0;
  }

  .mega-menu__link-image {
    width: 100%;
    position: relative;
    aspect-ratio: 16 / 9;
    margin-bottom: var(--padding-sm);
    object-fit: cover;
    border-radius: var(--menu-image-border-radius);
  }

  /* Fix alignment for collection image mode links without images */

  /* Target only top-level links (direct children of column > div) in collection image mode */
  .mega-menu__grid:has(.mega-menu__link-image)
    .mega-menu__column
    > div
    > .mega-menu__link:not(:has(.mega-menu__link-image)) {
    display: flex;
    flex-direction: column;
    padding-inline: 0;
    padding-block: var(--padding-sm) 0;
  }

  .mega-menu__grid:has(.mega-menu__link-image)
    .mega-menu__column
    > div
    > .mega-menu__link:not(:has(.mega-menu__link-image))::before {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-bottom: var(--padding-sm);
    background-color: var(--color-foreground-muted);
    opacity: 0.1;
    border-radius: var(--menu-image-border-radius);
  }

  .mega-menu__grid {
    display: grid;
    grid-template-columns: repeat(var(--menu-columns-tablet), minmax(0, 1fr));
    gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);
    width: 100%;

    @media screen and (min-width: 990px) {
      grid-template-columns: repeat(var(--menu-columns-desktop), minmax(0, 1fr));
    }
  }

  .mega-menu__column {
    grid-column: span 1;
  }

  .mega-menu__column--span-2 {
    grid-column: span 2;
  }

  .mega-menu__column--span-3 {
    grid-column: span 3;
  }

  .mega-menu__column--span-4 {
    grid-column: span 4;
  }

  .mega-menu__column--wide-collection-image {
    grid-column: span 1;

    @media screen and (min-width: 990px) {
      grid-column: span 2;
    }
  }

  .mega-menu__submenu .mega-menu__column--wide-collection-image {
    grid-column: span 1;
  }

  .mega-menu__content-list {
    display: grid;
    justify-content: end;
    gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);
  }

  .mega-menu__content-list--products {
    grid-template-columns: repeat(var(--menu-content-columns-tablet), minmax(0, 1fr));

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

  .mega-menu__content-list--collections {
    grid-template-columns: repeat(var(--menu-content-columns-tablet), minmax(0, 300px));

    @media screen and (min-width: 990px) {
      grid-template-columns: repeat(var(--menu-content-columns-desktop), minmax(0, 300px));
    }
  }

  .mega-menu__list {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: span var(--menu-columns-tablet);
    gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);

    @media screen and (min-width: 990px) {
      grid-column: span var(--menu-columns-desktop);
    }
  }

  .mega-menu__content {
    grid-column: span var(--menu-content-columns-tablet) / -1;

    @media screen and (min-width: 990px) {
      grid-column: span var(--menu-content-columns-desktop) / -1;
    }
  }

  .menu-list__list-item[slot='overflow'] .section {
    grid-template-columns: 1fr;
  }

  .menu-list__list-item[slot='overflow'] .section .mega-menu__grid {
    grid-column: 1;
  }

  .mega-menu__content-list li {
    white-space: normal;
  }

  /* mega more menu */
  .mega-menu__more-list {
    --menu-child-font-size: var(--font-size--xl);

    width: 200px;
  }

  .mega-menu__submenu {
    /* preserves the inherited grid layout when this submenu wrapper is used */
    display: contents;
  }
/* END_BLOCK:_header-menu */

/* START_BLOCK:_image (INDEX:99) */
.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:103) */
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:105) */
.card-gallery .media img,
  .card-gallery img,
  .product-card .media img,
  .product-card__image img,
  product-card img.media__image,
  product-card .media > img,
  product-card [class*="media"] img {
    object-fit: contain !important;
    padding: 8% !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    width: 100% !important;
    height: 100% !important;
  }
  .card-gallery .media,
  .card-gallery [class*="media"] {
    max-height: 210px !important;
  }
  @media screen and (min-width: 750px) {
    .card-gallery .media,
    .card-gallery [class*="media"] {
      max-height: 280px !important;
    }
  }
/* END_BLOCK:_product-card-gallery */

/* START_BLOCK:_product-details (INDEX:108) */
/* Clear padding on mobile, if not full-width */
  @media screen and (max-width: 749px) {
    .product-information.section--page-width .product-details > .group-block {
      padding-inline: 0;
    }
  }

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

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

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

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

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

  /* ===== ISLAS — fondo gris, bloques blancos marcados ===== */
  .product-details > .group-block {
    background: #EBEBEA;
    border-radius: 16px;
    padding: 8px;
    gap: 6px !important;
  }

  .product-details > .group-block > * {
    background: #FFFFFF;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
    border: 1px solid rgba(0,0,0,0.06);
    padding: 14px 16px;
  }

  .product-details > .group-block > .variant-picker {
    background: #FFFFFF;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
    border: 1px solid rgba(0,0,0,0.06);
    padding: 12px 16px;
  }

  .product-details > .group-block > buy-buttons {
    background: #FFFFFF;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
    border: 1px solid rgba(0,0,0,0.06);
    padding: 14px 16px;
    display: block;
  }

  @media screen and (max-width: 749px) {
    .product-details > .group-block {
      border-radius: 12px;
      padding: 6px;
    }
    .product-details > .group-block > * {
      border-radius: 8px;
      padding: 12px 14px;
    }
  }
/* END_BLOCK:_product-details */

/* START_BLOCK:_search-input (INDEX:113) */
.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:114) */
.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:115) */
.social-icons__icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--icon-size-lg);
  }

  .social-icons__icon {
    display: flex;
    flex-shrink: 0;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
  }

  .social-icons__icon {
    display: none;
  }

  .social-icons__icon-wrapper:has(.social-icons__icon path) {
    width: var(--icon-size-lg);

    .social-icons__icon {
      display: block;
    }

    .social-icons__icon-label {
      display: none;
    }
  }

  /* Disabled state for editor */
  .shopify-design-mode .social-icons__icon-wrapper--disabled {
    opacity: var(--disabled-opacity, 0.5);
    cursor: not-allowed;
  }

  .shopify-design-mode .social-icons__icon-wrapper--disabled a {
    pointer-events: none;
  }
/* END_BLOCK:_social-link */

/* START_BLOCK:accordion (INDEX:117) */
.accordion {
    flex: 1;
    width: 100%;
  }

  .accordion--dividers accordion-custom:not(:first-child) .details {
    border-block-start: var(--style-border-width) solid var(--color-border);
  }

  /* When accordion borders are not set, show fallback borders */
  .accordion--dividers {
    /* stylelint-disable-next-line declaration-property-value-disallowed-list */
    --show-fallback-borders: 0;
  }

  .accordion--dividers:not([class*='color-'])[style*='--border-width: 0'],
  .accordion--dividers:not([class*='color-'])[style*='--border-style: none'] {
    --show-fallback-borders: 1;
  }

  .accordion--dividers accordion-custom:first-child .details {
    border-block-start: calc(var(--style-border-width) * var(--show-fallback-borders)) solid var(--color-border);
  }

  .accordion--dividers accordion-custom:last-child .details {
    border-block-end: calc(var(--style-border-width) * var(--show-fallback-borders)) solid var(--color-border);
  }

  .accordion--dividers .details-content {
    padding-block-end: var(--padding-sm);
  }

  .accordion--caret .icon-plus,
  .accordion--plus .icon-caret {
    display: none;
  }

  /* because we can't pass apply a specific class on a block based on its parent block setting */
  .accordion .details__header {
    font-family: var(--summary-font-family);
    font-style: var(--summary-font-style);
    font-weight: var(--summary-font-weight);
    font-size: var(--summary-font-size);
    line-height: var(--summary-font-line-height);
    text-transform: var(--summary-font-case);
    min-height: var(--minimum-touch-target);
  }
/* END_BLOCK:accordion */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  [data-orientation='vertical'] .cs-slider__handle {
    left: 50%;
    top: calc((100 - var(--compare)) * 1%);
    transform: translate(-50%, -50%) rotate(90deg);
  }

  /* Text Labels */
  .comparison-slider__text {
    position: absolute;
    padding: var(--padding-xs);
    pointer-events: none;
  }

  .comparison-slider__text--with-bg {
    background: var(--text-background-color);
    border-radius: var(--text-corner-radius);
  }

  /* Horizontal: before/after control inline (left/right), position controls block (top/bottom) */
  [data-orientation='horizontal'] .comparison-slider__text--before {
    inset-inline-start: var(--padding-sm);
  }

  [data-orientation='horizontal'] .comparison-slider__text--after {
    inset-inline-end: var(--padding-sm);
  }

  [data-orientation='horizontal'][data-text-position='start'] .comparison-slider__text {
    inset-block-start: var(--padding-sm);
  }

  [data-orientation='horizontal'][data-text-position='end'] .comparison-slider__text {
    inset-block-end: var(--padding-sm);
  }

  /* Vertical: before/after control block (top/bottom), position controls inline (left/right) */
  [data-orientation='vertical'] .comparison-slider__text--before {
    inset-block-start: var(--padding-sm);
  }

  [data-orientation='vertical'] .comparison-slider__text--after {
    inset-block-end: var(--padding-sm);
  }

  [data-orientation='vertical'][data-text-position='start'] .comparison-slider__text {
    inset-inline-start: var(--padding-sm);
  }

  [data-orientation='vertical'][data-text-position='end'] .comparison-slider__text {
    inset-inline-end: var(--padding-sm);
  }
/* END_BLOCK:comparison-slider */

/* START_BLOCK:contact-form-submit-button (INDEX:124) */
.submit-button {
    min-width: max-content;
  }
/* END_BLOCK:contact-form-submit-button */

/* START_BLOCK:contact-form (INDEX:125) */
.contact-form__form {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
  }

  .contact-form__form-row {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);

    @media screen and (min-width: 750px) {
      flex-direction: row;
      align-items: center;
    }
  }

  .contact-form__input {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    padding: var(--padding-lg) var(--padding-xl);
    border-radius: var(--style-border-radius-inputs);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    -webkit-font-smoothing: antialiased;
  }

  .contact-form__input--textarea {
    resize: vertical;
    min-height: var(--input-textarea-min-height);
  }

  .contact-form__error,
  .contact-form__success {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }
/* END_BLOCK:contact-form */

/* START_BLOCK:email-signup (INDEX:127) */
.email-signup-block {
    --arrow-button-size: 58px;
    --arrow-button-size-integrated: 42px;
    --arrow-button-size-small: 20px;
    --arrow-icon-size: 32px;
    --arrow-icon-size-small: 24px;

    min-width: fit-content;

    @media screen and (max-width: 749px) {
      width: 100%;
      min-width: unset;
    }
  }

  .email-signup__heading {
    padding-block: var(--padding-sm);
  }

  .email-signup__form {
    display: flex;
    flex-direction: column;
  }

  .email-signup__input-group {
    display: flex;
    align-items: stretch;
    background-color: transparent;
  }

  .email-signup__input-group:not(.email-signup__input-group--integrated):not(.email-signup__input-group--underline) {
    gap: var(--gap-xs);
    align-items: center;
  }

  .email-signup__input-group:not(.email-signup__input-group--arrow):not(.email-signup__input-group--underline):not(
      .email-signup__input-group--integrated
    ) {
    @media screen and (max-width: 749px) {
      flex-direction: column;
    }
  }

  .email-signup__input-group--integrated {
    border-width: var(--border-width);
    border-radius: var(--border-radius);
    border-style: solid;
    border-color: var(--color-input-border);
    background-color: var(--color-input-background);
  }

  .email-signup__input-group--integrated.email-signup__input-group--no-border {
    border: none;
  }

  .email-signup__input {
    flex: 1;
    min-width: 0;
    border-width: var(--border-width);
    border-radius: var(--border-radius);
    border-style: solid;
    border-color: var(--color-input-border);

    @media screen and (max-width: 749px) {
      width: 100%;
    }
  }

  .email-signup__input-group--integrated .email-signup__input {
    background-color: transparent;
    border: none;
    border-radius: 0;
  }

  .email-signup__input.paragraph {
    color: var(--color-input-text);
    outline-color: var(--color-input-background);
  }

  .email-signup__button {
    white-space: nowrap;
    padding: 0;

    @media screen and (max-width: 749px) {
      width: 100%;
    }
  }

  .email-signup__input,
  .email-signup__button--text {
    padding: var(--padding-lg) var(--padding-3xl);
  }

  .email-signup__input-group--underline {
    --box-shadow-color: var(--color-input-border);
    --box-shadow-multiplier: 1;
    --box-shadow-focused-multiplier: 1.75;

    box-shadow: 0 calc(var(--border-width) * var(--box-shadow-multiplier)) 0 var(--box-shadow-color);
    transition: box-shadow var(--animation-values);
    margin-block-end: calc(var(--border-width) * var(--box-shadow-focused-multiplier));

    &:focus-within {
      --box-shadow-multiplier: var(--box-shadow-focused-multiplier);
      --box-shadow-color: var(--color-input-text);
    }
  }

  .email-signup__input-group .email-signup__input--underline {
    color: var(--color-input-text);
    background-color: transparent;
    padding: 12px 0;
    border: none;
    border-radius: 0;

    &:focus-visible {
      outline: none;
    }
  }

  .email-signup__input::placeholder {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-70));
  }

  .email-signup__input-group .email-signup__input--none {
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    border: none;
  }

  .email-signup__button-icon {
    color: currentcolor;
    padding: 5px;

    @media screen and (max-width: 749px) {
      padding: 0;
      align-self: center;
      justify-self: center;
      width: var(--icon-size-lg);
      height: var(--icon-size-lg);
    }
  }

  .email-signup__button--arrow {
    width: var(--arrow-button-size-small);
    height: var(--arrow-button-size-small);
    padding: 0;

    &:not(.email-signup__button--integrated) {
      width: var(--arrow-button-size);
      height: var(--arrow-button-size);
      display: flex;
      align-items: center;
      justify-content: center;

      > .email-signup__button-icon {
        width: var(--arrow-icon-size);
        height: var(--arrow-icon-size);
        padding: 0;
      }
    }
  }

  .email-signup__button--integrated {
    --button-offset: var(--margin-xs);
    align-self: stretch;
    margin: var(--button-offset);
    flex-shrink: 0;

    @media screen and (max-width: 749px) {
      width: fit-content;
    }

    &.email-signup__button--text {
      padding: 0 var(--padding-3xl);
    }

    &.email-signup__button--text.button-unstyled {
      padding: 0 var(--padding-xl);
    }

    &.button-unstyled {
      border-radius: var(--border-radius);
    }

    > .email-signup__button-icon {
      padding: 0;
    }

    &.email-signup__button--arrow {
      width: var(--arrow-button-size-integrated);
      height: var(--arrow-button-size-integrated);
      align-self: center;
      display: flex;
      align-items: center;
      justify-content: center;

      > .email-signup__button-icon {
        width: var(--arrow-icon-size-small);
        height: var(--arrow-icon-size-small);
      }
    }
  }

  .email-signup__input--underline + .email-signup__button--integrated {
    margin: 0;
    align-self: center;

    &.email-signup__button--text {
      padding-block: 9px;
    }

    &.email-signup__button--text.button-unstyled {
      padding-inline: 0;
      min-width: 44px;
      min-height: 44px;
    }

    &.button-unstyled {
      border-radius: 0;
    }

    &.email-signup__button--arrow {
      width: var(--arrow-button-size-integrated);
      height: var(--arrow-button-size-integrated);
      display: flex;
      align-items: center;
      justify-content: center;

      > .email-signup__button-icon {
        width: var(--arrow-icon-size-small);
        height: var(--arrow-icon-size-small);
      }
    }
  }

  .email-signup__button:not(.button-unstyled) {
    background-color: var(--button-background-color);
    color: var(--button-color);
    text-transform: var(--button-text-case-primary);
  }

  .email-signup__button.button-secondary {
    text-transform: var(--button-text-case-secondary);
  }

  .email-signup__button.button-unstyled {
    background-color: transparent;
    color: var(--color-input-text);
  }

  .email-signup__button.button-unstyled:hover {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-70));
    cursor: pointer;
  }

  .email-signup__message {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .email-signup__message-text {
    margin: 0;
  }
/* END_BLOCK:email-signup */

/* START_BLOCK:filters (INDEX:129) */
.facets-block-wrapper {
    @media screen and (min-width: 750px) {
      margin: var(--facets-margin);
      grid-column: var(--grid-column--desktop);
    }
  }

  .facets-block-wrapper--vertical {
    @media screen and (min-width: 750px) {
      grid-column: var(--grid-column--desktop);
    }
  }

  .facets-toggle {
    --icon-offset: -3px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--minimum-touch-target);
    margin: var(--facets-margin);
    padding-block: var(--facets-inner-padding-block);
    padding-inline: var(--facets-inner-padding-inline);

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

  .facets-toggle__wrapper {
    margin-left: var(--icon-offset);
  }

  .facets-toggle__button {
    box-shadow: none;

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

  .filter-count-bubble {
    position: relative;
    width: 20px;
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    line-height: normal;
    place-content: center;
    color: var(--color-foreground);
    border: var(--icon-stroke-width) solid var(--color-background);
  }

  .facets-mobile__title-wrapper .h3 {
    margin-block-end: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .facets-mobile__title-wrapper .filter-count-bubble {
    width: 22px;
    height: 22px;
  }

  .facets-mobile__title-wrapper .filter-count-bubble__text {
    font-size: var(--font-size--xs);
  }

  .filter-count-bubble__background {
    position: absolute;
    inset: 0;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    border-radius: var(--style-border-radius-50);
  }

  .filter-count-bubble__text {
    font-size: 11px;
    font-weight: var(--font-paragraph--weight);
    aspect-ratio: 1 / 1;
  }

  .facets-toggle--no-filters {
    @media screen and (max-width: 749px) {
      /* stylelint-disable-next-line declaration-no-important */
      justify-content: unset !important;

      & > .facets-mobile-wrapper {
        width: 100%;
      }
    }
  }

  .facets-block-wrapper--vertical + .facets-toggle {
    @media screen and (max-width: 749px) {
      margin: 0;
    }
  }

  .facets-mobile-wrapper {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    justify-content: flex-end;
  }

  .facets-mobile-wrapper--multiple-controls {
    justify-content: space-between;
  }

  @media screen and (min-width: 750px) {
    dialog-component.facets-block-wrapper {
      position: absolute;
      width: 0;
      height: 0;
    }
  }

  .facets {
    --facets-form-horizontal-gap: 20px;
    --facets-horizontal-max-input-wrapper-height: 230px;
    --facets-upper-z-index: var(--layer-raised);
    --facets-open-z-index: var(--layer-heightened);
    --facets-sticky-z-index: var(--layer-sticky);
    --facets-panel-min-width: 120px;
    --facets-panel-height: 300px;
    --facets-grid-panel-width: 300px;
    --facets-clear-padding: var(--padding-md);
    --facets-clear-shadow: 0 -4px 14px 0 rgb(var(--color-foreground-rgb) / var(--facets-low-opacity));
    --facets-input-label-color: rgb(var(--color-input-text-rgb) / var(--opacity-60));
    --facets-clear-all-min-width: 120px;
    --facets-see-results-min-width: 55%;
    --facets-mobile-gap: 22px;
    --facets-low-opacity: 10%;
    --facets-hover-opacity: 75%;

    top: auto;
    bottom: 0;
    height: var(--drawer-height);
    max-height: var(--drawer-height);
    width: var(--drawer-width);
    max-width: var(--drawer-max-width);
    box-shadow: none;
    padding-block: 0;

    &:not(.facets--drawer) {
      @media screen and (min-width: 750px) {
        padding-inline: var(--padding-inline-start) var(--padding-inline-end);
        width: 100%;
        max-width: 100%;
      }
    }
  }

  .facets--horizontal {
    display: none;

    @media screen and (min-width: 750px) {
      padding-block: var(--padding-block-start) var(--padding-block-end);
      display: flex;
      align-items: center;
      position: relative;
      z-index: var(--facets-upper-z-index);
      border: none;
      height: auto;
      top: initial;
      bottom: initial;
      max-height: none;
      width: auto;
      overflow: visible;
    }
  }

  .facets--vertical {
    display: none;

    @media screen and (min-width: 750px) {
      padding-block: 0 var(--padding-block-end);
      display: block;
      position: static;
      top: auto;
      bottom: auto;
      height: auto;
      max-height: none;
      width: auto;
      overflow: visible;
    }
  }

  .facets--drawer {
    border-radius: 0;
    border-right: var(--style-border-drawer);
    box-shadow: var(--shadow-drawer);
    padding-inline: 0;
  }

  .facets--drawer[open] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
  }

  .facets-drawer__form-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .facets-drawer__form-wrapper .facets__form {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .facets-drawer__filters {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
  }

  .facets-drawer__filters .facets__filters-wrapper,
  .facets-drawer__filters .filter-remove-buttons,
  .facets-drawer__filters .sorting-filter-component {
    overflow: visible;
  }

  .facets.facets-controls-wrapper {
    @media screen and (min-width: 750px) {
      grid-column: column-1 / column-12;
      color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
      gap: 0 var(--facets-form-horizontal-gap);
      padding-bottom: var(--padding-xs);
    }
  }

  .facets__inputs {
    display: flex;
    flex-direction: column;
    gap: var(--padding-lg);
    width: 100%;
  }

  :is(.facets--drawer, .facets--vertical) .facets__inputs:not(:has(.show-more)) {
    padding-block-end: var(--padding-sm);
  }

  /* Facets - Form */
  .facets__form-wrapper {
    display: flex;
    flex-direction: column;
    color: var(--color-foreground-muted);
    width: 100%;
  }

  .facets--horizontal .facets__form-wrapper {
    @media screen and (min-width: 750px) {
      flex-direction: row;
      height: auto;
    }
  }

  .facets__form {
    display: flex;
    flex-flow: column;
    width: 100%;
    height: 100%;
  }

  .facets--horizontal .facets__form {
    @media screen and (min-width: 750px) {
      flex-flow: row nowrap;
      height: auto;
    }
  }

  .facets:not(.facets--drawer) .facets__filters-wrapper {
    @media screen and (min-width: 750px) {
      margin-inline-end: var(--margin-md);
    }
  }

  .facets--horizontal .facets__filters-wrapper {
    @media screen and (min-width: 750px) {
      max-width: 60%;
      display: flex;
      flex-wrap: wrap;
      column-gap: var(--gap-xl);
      margin-inline-end: 0;
    }
  }

  /* Facets - Summary */
  .facets__summary {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;
    --icon-opacity: 0.5;

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 26px;
      --variant-picker-swatch-height: 26px;
    }

    font-size: var(--font-h5--size);
    display: flex;
    justify-content: space-between;

    &:hover {
      --icon-opacity: 1;
    }
  }

  .facets__filters-wrapper:hover .facets__summary,
  .facets__filters-wrapper:has(.facets__panel[open]) .facets__summary {
    opacity: var(--facets-hover-opacity);
  }

  .facets__filters-wrapper .facets__summary:hover,
  .facets__filters-wrapper .facets__panel[open] .facets__summary {
    opacity: 1;
  }

  .facets--horizontal .facets__summary {
    @media screen and (min-width: 750px) {
      font-size: var(--font-paragraph--size);
      justify-content: flex-start;
      height: var(--minimum-touch-target);
    }
  }

  .facets__summary .icon-caret {
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
    color: rgb(var(--color-foreground-rgb) / var(--icon-opacity));
    margin-block: var(--margin-2xs);
    transition: color var(--animation-speed) var(--animation-easing);
  }

  .facets--drawer .facets__summary .icon-caret {
    margin-inline-start: var(--margin-2xs);
  }

  /* Facets - Bubble */
  .facets__bubble {
    display: inline-flex;
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
    aspect-ratio: 1 / 1;
  }

  /* Facets - Inputs */
  .facets__inputs-wrapper {
    margin-block: var(--padding-xs) var(--padding-xs);
  }

  .facets__inputs .show-more {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    margin-block-end: var(--padding-xl);
  }

  .facets:not(.facets--drawer) .facets__inputs-wrapper {
    @media screen and (min-width: 750px) {
      gap: var(--gap-sm);
    }
  }

  .facets--horizontal .facets__inputs .show-more {
    @media screen and (min-width: 750px) {
      display: contents;
    }
  }

  .facets--horizontal .facets__inputs-wrapper {
    @media screen and (min-width: 750px) {
      max-height: var(--facets-horizontal-max-input-wrapper-height);
      scrollbar-width: none;
      -ms-overflow-style: none;
      overflow-x: auto;
      padding: var(--padding-md);
      margin-block: 0;
    }
  }

  .facets--vertical .facets__inputs:has(.show-more) .facets__inputs-wrapper {
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-sm);
    margin-block: calc(var(--padding-sm) * -1);
    margin-inline: calc(var(--padding-sm) * -1);
  }

  @media screen and (max-width: 749px) {
    .facets__inputs:has(.show-more) .facets__inputs-wrapper {
      padding-block: var(--padding-sm);
      padding-inline: var(--padding-sm);
      margin-block: calc(var(--padding-sm) * -1);
      margin-inline: calc(var(--padding-sm) * -1);
    }
  }

  .facets__inputs-wrapper:not(:has(.facets__inputs-list)),
  .facets__inputs-wrapper .facets__inputs-list {
    display: flex;
    gap: var(--facets-mobile-gap);
    flex-direction: column;

    @media screen and (min-width: 750px) {
      gap: var(--gap-sm);
    }
  }

  @media screen and (min-width: 750px) {
    .facets--vertical .facets__inputs-wrapper .facets__inputs-list--swatches {
      gap: var(--gap-sm);
    }

    .facets--horizontal
      .facets__inputs-wrapper
      .facets__inputs-list--swatches:not(.facets__inputs-list--swatches-grid) {
      display: grid;
      grid-template-columns: repeat(var(--swatch-columns, 4), 1fr);
    }
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches {
    --facets-mobile-gap: var(--gap-sm);
  }

  .facets__inputs-wrapper .facets__inputs-list--grid {
    --min-column-width: 20%;

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--min-column-width), 1fr));
    gap: var(--gap-sm);

    @media screen and (min-width: 750px) {
      --min-column-width: 50px;
    }
  }

  .facets-block-wrapper:not(.facets-block-wrapper--vertical) .facets__inputs-list--grid {
    @media screen and (min-width: 750px) {
      width: var(--facets-grid-panel-width);
    }
  }

  .facets__inputs-wrapper--row:not(:has(.facets__inputs-list)),
  .facets__inputs-wrapper--row .facets__inputs-list {
    flex-wrap: wrap;
    flex-direction: row;
  }

  .facets__inputs .show-more__button {
    --show-more-icon-size: 22px;
    --show-more-gap: 8px;

    gap: var(--show-more-gap);

    @media screen and (min-width: 750px) {
      --show-more-icon-size: 16px;
      --show-more-gap: 6px;
    }
  }

  .facets__inputs .show-more__button .icon-plus {
    width: var(--show-more-icon-size);
    height: var(--show-more-icon-size);

    svg {
      width: var(--icon-size-xs);
      height: var(--icon-size-xs);
    }
  }

  /* Facets - Panel */
  .facets__panel {
    padding: 0 var(--drawer-padding);
  }

  .facets:not(.facets--drawer) .facets__panel,
  .facets-controls-wrapper .facets__panel {
    @media screen and (min-width: 750px) {
      padding: 0;
    }
  }

  .facets--horizontal .facets__panel {
    @media screen and (min-width: 750px) {
      position: relative;
    }
  }

  .facets-mobile-wrapper .facets__panel-content {
    border-radius: var(--style-border-radius-popover);
  }

  .facets-mobile-wrapper {
    --facets-upper-z-index: var(--layer-raised);
    --facets-panel-min-width: 120px;
    --facets-panel-height: 300px;
  }

  .facets--horizontal .facets__panel-content {
    @media screen and (min-width: 750px) {
      border-radius: var(--style-border-radius-popover);
      position: absolute;
      top: 100%;
      width: max-content;
      min-width: var(--facets-panel-min-width);
      max-width: var(--facets-panel-width);
      max-height: var(--facets-panel-height);
      z-index: var(--facets-upper-z-index);
      box-shadow: var(--shadow-popover);
      border: var(--style-border-popover);
      background-color: var(--color-background);
      overflow-y: hidden;
      gap: 0;
    }
  }

  :is(.facets--drawer, .facets--vertical) :is(.facets__item, .sorting-filter)::before {
    content: '';
    display: block;
    height: 0;
    width: calc(100% - var(--drawer-padding) * 2);
    border-top: var(--style-border-width) solid var(--color-border);
    margin: 0 auto;
  }

  @media screen and (min-width: 750px) {
    .facets:not(.facets--drawer) :is(.facets__item, .sorting-filter)::before {
      width: 100%;
    }

    .facets--horizontal .facets__item:not(:first-of-type)::before,
    .facets--horizontal .sorting-filter::before {
      content: none;
    }
  }

  @media screen and (min-width: 750px) {
    .facets--vertical .facets__item:not(:first-of-type)::before,
    .facets--vertical .sorting-filter::before {
      content: '';
    }
  }

  /* Facets - Text */
  .facets__label,
  .facets__clear-all-link,
  .clear-filter {
    text-decoration-color: transparent;
    text-decoration-thickness: 0.075em;
    text-underline-offset: 0.125em;
    transition: text-decoration-color var(--animation-speed) var(--animation-easing);
  }

  .facets__clear-all-link {
    display: none;
    cursor: pointer;
    padding: var(--padding-xs);
    color: var(--button-color);
    transition: text-decoration-color var(--animation-speed) var(--animation-easing),
      color var(--animation-speed) var(--animation-easing);
  }

  .facets__clear-all-link:hover {
    --button-color: var(--color-primary-hover);

    text-decoration: underline;
    text-decoration-color: var(--button-color);
  }

  .facets__clear-all-link--horizontal {
    height: var(--minimum-touch-target);
    padding-inline: var(--facets-form-horizontal-gap);
    min-width: var(--facets-clear-all-min-width);
  }

  .facets__clear-all-link--active {
    display: block;
  }

  .facets__label,
  .products-count-wrapper {
    text-transform: var(--facet-label-transform);
  }

  .clear-filter {
    background-color: transparent;
    box-shadow: none;
    padding: 0;
  }

  .clear-filter:hover {
    text-decoration: underline;
  }

  /* Clear button */
  .facets__clear {
    display: none;
  }

  .facets--horizontal .facets__clear {
    @media screen and (min-width: 750px) {
      width: 100%;
      justify-content: flex-end;
      padding: 0 var(--facets-clear-padding) var(--facets-clear-padding) 0;
      cursor: pointer;
    }
  }

  .facets__clear--active {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  /* Facets - Label */
  .facets__label {
    color: var(--color-foreground);
    cursor: pointer;
    white-space: nowrap;

    @media screen and (min-width: 750px) {
      margin-inline-end: var(--margin-2xs);
    }
  }

  /* Products count */
  .products-count-wrapper {
    display: none;
  }

  .facets--horizontal .products-count-wrapper {
    @media screen and (min-width: 750px) {
      display: flex;
      margin-left: auto;
      flex-shrink: 0;
      align-items: center;
      height: var(--minimum-touch-target);
    }
  }

  /* Mobile specific components */
  .facets__title-wrapper {
    background-color: var(--color-background);
    color: var(--color-foreground);
    position: sticky;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: var(--padding-xs);
    padding-inline-start: var(--drawer-padding);
    padding-inline-end: var(--padding-2xs);
    z-index: var(--facets-sticky-z-index);
  }

  :is(.facets--horizontal, .facets--vertical) .facets__title-wrapper {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets-drawer__title {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;

    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--gap-xs);

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 26px;
      --variant-picker-swatch-height: 26px;
    }
  }

  .facets-drawer__close {
    position: relative;
    top: 0;
    right: 0;
    padding: 0;
    cursor: pointer;
  }

  /* Status */
  .facets__status:not(:empty) {
    width: max-content;
    display: flex;
    margin-inline-start: auto;
    font-weight: 500;
    color: var(--color-foreground);
  }

  .facets__panel[open] .facets__status {
    display: none;
  }

  .facets--filters-title {
    margin-block-end: 0;
    color: var(--color-foreground);
    height: fit-content;

    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .facets--horizontal .facets__panel .facets__status:has(:not(:empty)) {
    @media screen and (min-width: 750px) {
      display: flex;
      margin-inline-start: var(--margin-xs);
      margin-inline-end: var(--margin-xs);
    }
  }

  /* Horizontal filter style */
  .facets--horizontal .facets__form {
    @media screen and (min-width: 750px) {
      gap: 0 var(--facets-form-horizontal-gap);
    }
  }

  /* Facets - Actions */
  .facets__drawer-actions {
    --to-top-gradient-background: linear-gradient(
      to top,
      rgb(var(--color-background-rgb) / var(--opacity-90)),
      rgb(var(--color-background-rgb) / var(--opacity-80)),
      rgb(var(--color-background-rgb) / var(--opacity-40)),
      transparent
    );

    position: sticky;
    bottom: 0;
    z-index: var(--facets-sticky-z-index);
    order: 1;
    display: flex;
    flex-shrink: 0;
    justify-content: space-between;
    align-items: stretch;
    gap: var(--gap-sm);
    padding-block-start: var(--padding-xs);
    padding-block-end: var(--padding-md);
    padding-inline: var(--padding-lg);
    margin-top: auto;
    background-image: var(--to-top-gradient-background);
    background-color: var(--color-background);
  }

  /* Clear all button */
  .facets__clear-all {
    display: none;
    cursor: pointer;
    min-width: var(--facets-clear-all-min-width);
    flex-grow: 1;
    padding-block: var(--padding-lg);
    color: var(--button-color, inherit);
  }

  .facets__clear-all--active {
    display: block;
    opacity: 1;
    transform: translateY(0);
    transition: transform var(--animation-values), opacity var(--animation-values);
  }

  @starting-style {
    .facets__clear-all--active {
      opacity: 0;
      transform: translateY(100%);
    }
  }

  .facets__see-results {
    min-width: var(--facets-see-results-min-width);
    flex-grow: 1;
    padding-block: var(--padding-lg);
  }

  .facets-horizontal-remove {
    display: flex;
    align-items: center;
  }

  .facets-horizontal-remove--active::before {
    content: '';
    border-inline-start: var(--style-border-width) solid var(--color-border);
    height: var(--font-paragraph--size);
    position: absolute;
  }


  /* =========================================================
     CRO MINIMAL — estética limpia blanca/negra + acentos marca
     No toca lógica, solo visual de filtros/sorting/drawer
  ========================================================= */
  .facets-toggle {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0,0,0,.05);
    min-height: 62px;
    height: auto;
    margin: 10px 14px 14px;
    padding: 10px 12px;
  }

  .facets-toggle__button,
  .facets-mobile-wrapper :is(button, summary),
  .facets-mobile-wrapper .sorting-filter__button,
  .facets-mobile-wrapper .sorting-filter__select-wrapper {
    min-height: 44px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,.10);
    background: #ffffff;
    color: #111111;
    font-weight: 800;
    letter-spacing: .01em;
    box-shadow: 0 4px 14px rgba(0,0,0,.04);
  }

  .facets-toggle__button {
    padding: 0 16px;
    gap: 9px;
    text-transform: uppercase;
  }

  .facets-toggle__button .svg-wrapper,
  .facets-mobile-wrapper .svg-wrapper {
    color: #111111;
  }

  .facets-toggle__button:hover,
  .facets-mobile-wrapper :is(button, summary):hover {
    background: #fafafa;
    border-color: rgba(0,0,0,.20);
  }

  .filter-count-bubble {
    width: 22px;
    height: 22px;
    border: 2px solid #ffffff;
    color: #111111;
    font-weight: 900;
  }

  .filter-count-bubble__background {
    background: #C8A66B;
  }

  .filter-count-bubble__text {
    font-size: 11px;
    font-weight: 900;
  }

  .facets-block-wrapper--horizontal,
  .facets.facets-controls-wrapper,
  .facets--horizontal {
    background: transparent;
  }

  .facets-block-wrapper--horizontal .facets--horizontal,
  .facets.facets-controls-wrapper {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(0,0,0,.045);
    padding: 12px 14px !important;
  }

  .facets--horizontal .facets__form {
    align-items: center;
  }

  .facets--horizontal .facets__summary,
  .facets--horizontal .sorting-filter__button,
  .facets--horizontal .sorting-filter__select-wrapper,
  .facets--horizontal .facets__clear-all-link--horizontal {
    min-height: 44px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,.10);
    background: #ffffff;
    color: #111111;
    padding: 0 16px;
    font-weight: 800;
    letter-spacing: .01em;
    box-shadow: 0 4px 14px rgba(0,0,0,.035);
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
  }

  .facets--horizontal .facets__summary:hover,
  .facets--horizontal .sorting-filter__button:hover,
  .facets--horizontal .sorting-filter__select-wrapper:hover,
  .facets--horizontal .facets__clear-all-link--horizontal:hover {
    background: #fafafa;
    border-color: rgba(0,0,0,.20);
    transform: translateY(-1px);
  }

  .facets__filters-wrapper:hover .facets__summary,
  .facets__filters-wrapper:has(.facets__panel[open]) .facets__summary {
    opacity: 1;
  }

  .facets__panel[open] .facets__summary,
  .facets--horizontal .facets__panel[open] .facets__summary {
    border-color: #111111;
    background: #ffffff;
  }

  .facets--horizontal .facets__panel-content {
    border-radius: 16px !important;
    border: 1px solid rgba(0,0,0,.10) !important;
    background: #ffffff !important;
    box-shadow: 0 18px 50px rgba(0,0,0,.12) !important;
    overflow: hidden;
  }

  .products-count-wrapper {
    font-weight: 800;
    color: #4b4b4b;
  }

  .facets--horizontal .products-count-wrapper span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 999px;
    background: #f5f5f5;
    color: #444444;
    font-weight: 800;
    letter-spacing: .01em;
  }

  .facets__label {
    font-weight: 750;
    color: #111111;
  }

  .facets__inputs-list label,
  .facets__inputs-list .facets__label {
    border-radius: 10px;
  }

  .facets__clear-all-link--active,
  .facets__clear-all--active {
    font-weight: 900;
  }

  dialog-component.facets-block-wrapper {
    z-index: 2147483646;
  }

  /* El cajon abre desde la izquierda: el theme le pone la clase
     dialog-drawer--right, que en Horizon significa "viaja hacia la
     derecha", o sea que arranca en -100% (fuera de pantalla por la
     izquierda) y se queda pegado a ese borde. Ahi esta bien: el boton
     FILTRO que lo abre tambien esta a la izquierda.

     Lo que estaba mal era esto: las esquinas redondeadas y la sombra se
     habian escrito como si el cajon fuera de la derecha, asi que caian
     sobre el borde de la pantalla, donde no las ve nadie. Van del lado
     de adentro, que es el unico que se ve. */
  .facets--drawer {
    background: #ffffff;
    color: #111111;
    border-radius: 0 20px 20px 0;
    border-right: 1px solid rgba(0,0,0,.08);
    box-shadow: 18px 0 55px rgba(0,0,0,.16);
  }

  .facets__title-wrapper {
    background: #ffffff;
    border-bottom: 1px solid rgba(0,0,0,.08);
    padding-block: 16px;
  }

  .facets-drawer__title {
    font-weight: 950;
    letter-spacing: -.03em;
    color: #111111;
  }

  .facets-drawer__close {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: #f7f7f7;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .facets-drawer__close:hover {
    background: #eeeeee;
  }

  .facets--drawer .facets__summary,
  .facets--vertical .facets__summary {
    font-weight: 850;
    color: #111111;
    padding-block: 16px;
  }

  .facets__drawer-actions {
    background: linear-gradient(to top, rgba(255,255,255,1) 74%, rgba(255,255,255,.86), rgba(255,255,255,0));
    gap: 10px;
    padding: 14px 18px 18px;
    border-top: 1px solid rgba(0,0,0,.07);
  }

  .facets__clear-all,
  .facets__see-results {
    border-radius: 14px;
    font-weight: 900;
    letter-spacing: -.01em;
  }

  .facets__clear-all {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,.14);
    color: #111111;
  }

  .facets__see-results {
    background: #C8A66B;
    border: 1px solid #C8A66B;
    color: #111111;
    box-shadow: 0 8px 20px rgba(255,204,0,.22);
  }

  .facets__see-results:hover {
    filter: brightness(.98);
  }

  @media screen and (max-width: 749px) {
    .facets-toggle {
      border-radius: 16px;
      margin: 10px 12px 14px;
      padding: 10px;
      min-height: 62px;
    }

    .facets-toggle__wrapper {
      margin-left: 0;
    }

    .facets-toggle__button {
      height: 44px;
      padding: 0 16px;
      border-radius: 12px;
      background: #ffffff;
      color: #111111;
      border: 1px solid rgba(0,0,0,.12);
      box-shadow: 0 4px 14px rgba(0,0,0,.045);
      font-size: 13px;
    }

    .facets-mobile-wrapper {
      gap: 8px;
    }

    .facets-mobile-wrapper :is(button, summary),
    .facets-mobile-wrapper .sorting-filter__button,
    .facets-mobile-wrapper .sorting-filter__select-wrapper {
      width: 44px;
      height: 44px;
      min-height: 44px;
      padding: 0;
      border-radius: 12px;
      background: #ffffff;
    }

    .filter-count-bubble {
      position: absolute;
      top: -7px;
      right: -7px;
    }

    .facets--drawer {
      border-radius: 0 20px 20px 0;
    }
  }


  /* FIX: sin sombra negra — mantener estética blanca minimal */
  .facets-block-wrapper,
  .facets-block-wrapper--horizontal .facets--horizontal,
  .facets,
  .facets-toggle,
  .facets-toggle__button,
  .facets-mobile-wrapper,
  .facets-mobile-wrapper :is(button, summary),
  .facets-mobile-wrapper .sorting-filter__button,
  .facets-mobile-wrapper .sorting-filter__select-wrapper,
  .facets-controls-wrapper,
  .facets__panel,
  .facets__panel-content,
  .facets--drawer,
  dialog.facets,
  .facets__drawer-actions,
  .facets__clear-all,
  .facets__see-results,
  .sorting-filter-component,
  .sorting-filter__button,
  .sorting-filter__select-wrapper,
  .products-count-wrapper,
  .facets__summary,
  .facets__filters-wrapper {
    box-shadow: none !important;
  }
/* END_BLOCK:filters */

/* START_BLOCK:footer-policy-list (INDEX:132) */
.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:134) */
.icon-block {
    display: flex;
    flex-shrink: 0;
  }

  .icon-block__media {
    height: auto;
  }
/* END_BLOCK:icon */

/* START_BLOCK:image (INDEX:135) */
.image-block__placeholder {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
    overflow: hidden;
    position: relative;
  }

  .placeholder-image {
    position: relative;
    aspect-ratio: var(--ratio);
    overflow: hidden;
  }

  .image-block {
    display: flex;

    /* When the image is nested in a group, section, etc, respect the parent's horizontal alignment */
    justify-content: var(--horizontal-alignment, 'inline-start');
  }

  .image-block--height-fill .image-block__image {
    height: 100%;
  }

  .image-block__image {
    object-fit: cover;
    aspect-ratio: var(--ratio);
  }
/* END_BLOCK:image */

/* START_BLOCK:logo (INDEX:137) */
.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:138) */
.menu {
    width: 100%;
  }

  .menu:not(:has(.menu__heading--empty)) .details-content {
    margin-block-start: var(--spacing--size);
  }

  .menu__item + .menu__item {
    margin-block-start: var(--spacing--size);
  }

  .menu .menu__heading--empty {
    display: none;
  }

  .menu__heading__default {
    display: contents;
  }

  .menu__heading__accordion {
    display: none;
  }

  @media screen and (max-width: 749px) {
    /* Always show the fallback heading on mobile when accordion is enabled */
    .menu--accordion .menu__heading--empty {
      display: flex;
    }

    .menu--accordion .menu__heading__accordion {
      display: contents;
    }

    .menu--accordion .menu__heading__default {
      display: none;
    }

    .menu--accordion .details-content {
      margin-block-start: var(--spacing--size);
    }

    .menu--accordion .menu__details {
      padding-inline: 0;
    }

    .menu--dividers .menu__details {
      border-block-end: var(--style-border-width) solid var(--color-border);
    }

    .menu--dividers .details-content {
      padding-block-end: var(--padding-sm);
    }
  }
/* END_BLOCK:menu */

/* START_BLOCK:page (INDEX:140) */
.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:141) */
.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:142) */
.popup-link__button svg {
    display: inline-block;
    position: relative;
    top: var(--margin-2xs);
  }

  .popup-link__content {
    box-shadow: var(--shadow-popover);
    border: var(--style-border-popover);
    border-radius: var(--style-border-radius-popover);
    background-color: var(--color-background);
    padding: var(--padding-4xl) var(--padding-xl) var(--padding-xl);
    max-width: var(--normal-content-width);
    max-height: var(--modal-max-height);

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

  .popup-link__content[open] {
    animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .popup-link__content.dialog-closing {
    animation: modalSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .popup-link__content--drawer {
    position: fixed;
    border-radius: 0;
    width: var(--sidebar-width);
    max-width: 95vw;
    height: 100%;
    margin: 0 0 0 auto;
  }

  /* Needed to ensure the drawer is full height */
  .popup-link__content--drawer:modal {
    max-height: 100dvh;
  }

  .popup-link__close {
    top: var(--margin-2xs);
    right: var(--margin-2xs);
    opacity: 0.8;
    animation: none;
  }
/* END_BLOCK:popup-link */

/* START_BLOCK:product-custom-property (INDEX:145) */
product-custom-property-component {
    display: block;
    width: 100%;
  }

  product-custom-property-component .__heading {
    margin-inline: 0;
    margin-block: 0 var(--padding-sm);
  }

  product-custom-property-component .__heading:has(+ .__description) {
    margin-block-end: var(--padding-2xs);
  }

  product-custom-property-component .__description {
    font-size: min(0.85em, var(--font-paragraph--size));
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    margin-inline: 0;
    margin-block: 0 var(--padding-md);
  }

  product-custom-property-component .__field {
    position: relative;
  }

  product-custom-property-component .__input-wrapper {
    position: relative;
  }

  product-custom-property-component input,
  product-custom-property-component textarea {
    width: 100%;
    /* stylelint-disable-next-line declaration-no-important */
    color: var(--color-input-text) !important;
  }

  /* Add padding for inputs with counter inside */
  product-custom-property-component .__input-wrapper input {
    padding-bottom: calc(var(--padding-sm) * 3);
  }

  product-custom-property-component .__input-wrapper textarea {
    padding-bottom: calc(var(--padding-sm) * 3);
    scroll-padding-bottom: calc(var(--padding-sm) * 3);
  }

  product-custom-property-component textarea {
    min-height: 80px;
  }

  @supports (resize: vertical) {
    @media (hover: hover) and (pointer: fine) {
      product-custom-property-component textarea {
        resize: vertical; /* stylelint-disable-line */
      }
    }
  }

  product-custom-property-component .__character-label {
    position: absolute;
    left: var(--input-padding-x);
    bottom: var(--padding-sm);
    pointer-events: none;
  }

  product-custom-property-component .__character-count {
    font-style: italic;
    /* stylelint-disable-next-line declaration-no-important */
    color: var(--color-input-text) !important;
  }

  /* We should consolidate input styles that share the same behavior */
  .custom-property__input {
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    border-radius: var(--style-border-radius-inputs);

    /* this is needed to override the styles from field__input */
    box-shadow: none;

    &:is(:hover, :focus) {
      /* this is needed to override the styles from field__input */
      box-shadow: none;
    }

    &:focus {
      /* this is needed to override the styles from field__input */
      outline: var(--focus-outline-width) solid var(--color-input-background);
    }
  }
/* END_BLOCK:product-custom-property */

/* START_BLOCK:product-inventory (INDEX:147) */
.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:148) */
.block-resource-list {
    display: flex;
    flex-direction: column;
    row-gap: var(--gap);
    min-width: 0;
    min-height: 0;
    container-type: inline-size;
    container-name: resource-list;
    border-radius: var(--border-radius, 0);
  }

  .product-recommendations-wrapper {
    width: 100%;
  }

  .product-recommendations-wrapper:has(product-recommendations[data-shopify-editor-preview]) {
    width: 100vw;
  }
/* END_BLOCK:product-recommendations */

/* START_BLOCK:review (INDEX:151) */
.rating-wrapper {
    gap: var(--gap-xs);
    min-width: fit-content;
  }

  .rating-color--primary {
    --star-fill-color: var(--color-primary);
    --star-fill-color-rgb: var(--color-primary-rgb);
    --color: var(--color-primary);
  }

  .rating-color--foreground {
    --star-fill-color: var(--color-foreground);
    --star-fill-color-rgb: var(--color-foreground-rgb);
    --color: var(--color-foreground);
  }

  .rating-wrapper,
  .rating {
    display: flex;
    align-items: center;
  }

  .rating-wrapper.justify-right {
    flex-direction: row-reverse;
  }

  .rating {
    gap: var(--gap-3xs);
  }

  .rating-wrapper .rating-count,
  .rating-wrapper .rating-count-separator {
    color: var(--star-fill-color);
    margin: 0;
    white-space: nowrap;
  }

  .rating-count-separator {
    opacity: var(--opacity-20);
    padding-left: calc(var(--padding-xs) / 2);
    padding-right: var(--padding-xs);
  }

  .stars {
    height: var(--star-size);
    fill: var(--empty-star-fill-color);
  }

  .filled-star {
    fill: var(--star-fill-color);
  }
/* END_BLOCK:review */

/* START_BLOCK:social-links (INDEX:153) */
.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:154) */
/* 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:155) */
product-swatches {
    width: 100%;
    display: flex;
    position: relative;
    overflow: hidden;
    gap: 0;
    flex-shrink: 0;
  }
/* END_BLOCK:swatches */

/* START_BLOCK:video (INDEX:158) */
.placeholder-video {
    aspect-ratio: 5 / 3;
  }
/* END_BLOCK:video */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:accordion-custom-component (INDEX:159) */
accordion-custom {
    details {
      &::details-content,
      .details-content {
        block-size: 0;
        overflow-y: clip;
        opacity: 0;
        interpolate-size: allow-keywords;
        transition: content-visibility var(--animation-speed-slow) allow-discrete,
          padding-block var(--animation-speed-slow) var(--animation-easing),
          opacity var(--animation-speed-slow) var(--animation-easing),
          block-size var(--animation-speed-slow) var(--animation-easing);
      }

      /* Disable transitions when the content toggle is not caused by the direct user interaction, e.g. opening the filters on mobile. */
      &:not(:focus-within)::details-content,
      &:not(:focus-within) .details-content {
        transition: none;
      }

      &:not([open]) {
        &::details-content,
        .details-content {
          padding-block: 0;
        }
      }

      &[open] {
        &::details-content,
        .details-content {
          opacity: 1;
          block-size: auto;

          @starting-style {
            block-size: 0;
            opacity: 0;
            overflow-y: clip;
          }

          &:focus-within {
            overflow-y: visible;
          }
        }
      }
    }
  }

  accordion-custom[data-disable-on-mobile='true'] summary {
    @media screen and (max-width: 749px) {
      cursor: auto;
    }
  }

  accordion-custom[data-disable-on-desktop='true'] summary {
    @media screen and (min-width: 750px) {
      cursor: auto;
    }
  }
/* END_SNIPPET:accordion-custom-component */

/* START_SNIPPET:background-media (INDEX:161) */
@media (prefers-reduced-motion: reduce) {
    video-background-component video {
      display: none;
    }
  }
/* END_SNIPPET:background-media */

/* START_SNIPPET:bento-grid (INDEX:162) */
.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:163) */
.blog-post-comments__form-container {
    --comment-form-gap: var(--gap-md);

    width: 100%;
    max-width: var(--normal-content-width);
    margin: var(--margin-4xl) auto 0;
  }

  .blog-post-comments__form {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--comment-form-gap);

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

  .blog-post-comments__form-input {
    padding: var(--padding-lg) var(--padding-xl);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
  }

  .blog-post-comments__form-input--textarea {
    resize: vertical;
    min-height: var(--input-textarea-min-height);
  }

  .blog-post-comments__form-message {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .blog-post-comments__form-body {
    grid-column: 1 / -1;
  }

  .blog-post-comments__form-input:focus-visible {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .blog-post-comments__form-moderated {
    font-size: var(--font-size--xs);
  }

  .blog-post-comments__form-submit {
    margin-block-start: var(--comment-form-gap);
  }
/* END_SNIPPET:blog-comment-form */

/* START_SNIPPET:button (INDEX:165) */
.link {
    text-decoration: none;
    text-decoration-color: currentcolor;

    &:hover {
      color: var(--color-primary-hover);
      text-decoration-color: transparent;
    }
  }
/* END_SNIPPET:button */

/* START_SNIPPET:buy-buttons-styles (INDEX:166) */
.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: compacto y premium ─── */
  .quantity-selector {
    flex-grow: 0;
    flex-shrink: 0;
    height: var(--height-buy-buttons);
    /* Forzamos ancho más angosto para ceder espacio al botón */
    max-width: 108px;
    min-width: 90px;
  }

  /* Inputs y botones internos del quantity más compactos */
  .quantity-selector input,
  .quantity-selector__input {
    font-size: 0.85rem;
    font-weight: 700;
  }

  .quantity-label {
    flex: 1 0 100%;
    width: 100%;
    font-size: var(--font-size--sm);
    margin-block-end: var(--gap-xs);
  }

  .quantity-label__cart-count {
    color: var(--color-foreground-secondary);
  }

  .quantity-rules {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    row-gap: calc(var(--gap-xs) / 2);
    flex: 1 0 100%;
    width: 100%;
    font-size: var(--font-size--xs);
    color: var(--color-foreground-secondary);
    margin-block-start: var(--gap-xs);
    margin-block-end: var(--gap);
  }

  .product-form-buttons:has(~ .volume-pricing .volume-pricing__title) .quantity-rules {
    margin-block-end: var(--gap-md);
  }

  .quantity-rules__item {
    position: relative;
    display: inline-block;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .quantity-rules__item:not(:last-child) {
    padding-right: var(--padding-xl);
    margin-right: var(--margin-2xs);
  }

  .quantity-rules__item:not(:last-child)::after {
    content: '•';
    position: absolute;
    inset-inline-end: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.5em;
    line-height: 0;
  }

  /* ─── Add to cart: CRO máximo ─── */
  .add-to-cart-button {
    height: var(--height-buy-buttons);
    text-transform: var(--button-text-case-primary);
    position: relative;
    overflow: hidden;
    /* Gradient amarillo CRO */
    background: linear-gradient(110deg, #B8985A 0%, #C8A66B 40%, #E8D5A3 60%, #C8A66B 80%, #B8985A 100%) !important;
    background-size: 200% 100% !important;
    color: #1a1a1a !important;
    font-weight: 800 !important;
    font-size: 1.05rem !important;
    letter-spacing: 0.04em;
    border: none !important;
    box-shadow: 0 4px 18px 0 rgba(255, 204, 0, 0.38), 0 1px 4px rgba(0,0,0,0.10) !important;
    transition: box-shadow 0.2s ease, transform 0.15s ease;
    /* Botón más grande */
    padding-block: calc(var(--padding-lg) + 3px) !important;
    /* Shake animation trigger */
    animation: atcShake 3.5s ease-in-out infinite;
  }

  .add-to-cart-button:hover {
    box-shadow: 0 6px 28px 0 rgba(255, 204, 0, 0.55), 0 2px 6px rgba(0,0,0,0.12) !important;
    transform: translateY(-1px);
    animation-play-state: paused;
  }

  .add-to-cart-button:active {
    transform: scale(0.98) translateY(0);
    animation-play-state: paused;
  }

  /* Shimmer overlay */
  .add-to-cart-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
      120deg,
      transparent 0%,
      rgba(255, 255, 255, 0.55) 50%,
      transparent 100%
    );
    animation: atcShimmer 2.2s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
  }

  /* Shimmer keyframes */
  @keyframes atcShimmer {
    0%   { left: -75%; opacity: 0; }
    10%  { opacity: 1; }
    60%  { left: 130%; opacity: 1; }
    61%  { opacity: 0; }
    100% { left: 130%; opacity: 0; }
  }

  /* Shake CRO: se sacude izquierda-derecha fuerte cada ~3.5s */
  @keyframes atcShake {
    0%    { transform: translateX(0); }
    88%   { transform: translateX(0); }
    90%   { transform: translateX(-6px); }
    92%   { transform: translateX(6px); }
    94%   { transform: translateX(-5px); }
    96%   { transform: translateX(5px); }
    98%   { transform: translateX(-2px); }
    100%  { transform: translateX(0); }
  }

  .add-to-cart-button.button-secondary {
    text-transform: var(--button-text-case-secondary);
  }

  /* Contenido del botón por encima del shimmer */
  .add-to-cart-button .add-to-cart-text {
    position: relative;
    z-index: 2;
  }

  .product-form-text__error {
    display: flex;
    flex: 1 0 100%;
    align-items: flex-start;
    gap: var(--gap-xs);
    margin-block-end: var(--gap-xs);
  }

  .product__pickup-availabilities {
    width: 100%;
  }

  .pickup-availability__column {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  .pickup-availability__row {
    display: flex;
    gap: var(--padding-xs);
  }

  .pickup-availability__dialog-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }

  .pickup-availability__header-container {
    padding-block-end: var(--padding-2xl);
  }

  .pickup-location__wrapper {
    display: flex;
    flex-direction: column;
    padding-block: var(--padding-2xl);
    border-top: 1px solid var(--color-border);
    gap: var(--padding-xs);
  }

  .pickup-location__address-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--padding-md);
  }

  .pickup-location__dialog {
    padding: var(--padding-2xl);
    position: fixed;
    border-radius: 0;
    width: var(--sidebar-width);
    max-width: 95vw;
    height: 100%;
    margin: 0 0 0 auto;
    border: var(--style-border-drawer);
    box-shadow: var(--shadow-drawer);
    background-color: var(--color-background);
  }

  .pickup-location__dialog:modal {
    max-height: 100dvh;
  }

  .pickup-location__text-sm {
    font-size: var(--font-size--sm);
    margin: 0;
  }

  .pickup-location__text-xs {
    font-size: var(--font-size--xs);
    margin: 0;
  }

  .pickup-location__button {
    width: fit-content;
    color: var(--color-primary);
    font-size: var(--font-size--xs);
    font-family: var(--font-body--family);
    padding: 0;
    cursor: pointer;
    margin-block: var(--margin-xs);
  }

  .pickup-location__button:hover {
    color: var(--color-primary-hover);
  }

  .pickup-location__h4 {
    margin: 0;
  }

  .pickup-location__text-bold {
    font-size: var(--font-size--md);
    font-weight: 600;
    margin: 0;
  }

  .pickup-location__availability-wrapper {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    font-family: var(--font-paragraph--family);
  }

  .pickup-location__address {
    font-style: normal;
  }

  .pickup-location__close-button {
    top: calc(var(--padding-2xl) - (var(--icon-size-xs) / 2));
    right: calc(var(--padding-2xl) - var(--icon-size-xs));
  }

  .volume-pricing {
    display: block;
    width: 100%;
    margin-bottom: var(--gap);
  }

  .volume-pricing:not(:has(.volume-pricing__title)) {
    margin-top: 0;
    margin-bottom: 0;
  }

  .volume-pricing__title {
    display: block;
    margin-block-end: var(--gap-sm);
    font-size: var(--font-size--sm);
    font-weight: var(--font-body--weight);
    color: var(--color-foreground);
  }

  .volume-pricing__table {
    width: 100%;
  }

  .volume-pricing__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-md);
    font-size: var(--font-size--sm);
  }

  .volume-pricing__row--even {
    background: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .volume-pricing__row--odd {
    background: var(--color-background);
  }

  .volume-pricing__collapsible-wrapper {
    block-size: 0;
    overflow-y: clip;
    opacity: 0;
    interpolate-size: allow-keywords;
    transition: opacity var(--animation-speed-slow) var(--animation-easing),
      block-size var(--animation-speed-slow) var(--animation-easing);
  }

  .volume-pricing__toggle {
    width: 100%;
    padding-bottom: 0;
    padding-inline: 0;
    text-align: left;
    color: var(--color-foreground-secondary);
    font-size: var(--font-size--xs);
    cursor: default;
    margin-block-start: 0;
    pointer-events: none;
  }

  button.volume-pricing__toggle {
    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-block[data-shopify-visual-preview] {
    width: 300px;
  }

  more-payment-options-link {
    font-size: smaller;
  }

  more-payment-options-link a {
    --button-color: var(--color-primary);
  }

  more-payment-options-link a:hover {
    --button-color: var(--color-primary-hover);
  }

  .shopify-payment-button__more-options[aria-hidden='true'] {
    display: none;
  }
/* END_SNIPPET:buy-buttons-styles */

/* START_SNIPPET:card-gallery (INDEX:167) */
.card-gallery {
    overflow: hidden;
    container-type: inline-size; /* Make card-gallery a container */
    container-name: card-gallery-container; /* Optional: name the container */
  }

  .card-gallery__placeholder svg {
    height: 100%;
    width: 100%;
  }

  .card-gallery svg {
    aspect-ratio: var(--gallery-aspect-ratio, var(--ratio));
  }

  .product-card-gallery__title-placeholder {
    padding: var(--padding-md);
    font-size: var(--font-size--2xl);
    line-height: var(--line-height--display-loose);
    word-break: break-word;
    color: var(--color-foreground);
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    aspect-ratio: var(--gallery-aspect-ratio);
    border-radius: var(--product-corner-radius);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .product-card-gallery__title-placeholder a {
    color: var(--color-foreground);
  }

  @media screen and (min-width: 750px) {
    .product-grid[data-product-card-size='extra-large'] .product-card-gallery__title-placeholder {
      padding: var(--padding-3xl);
      font-size: var(--font-size--3xl);
    }

    .product-grid[data-product-card-size='large'] .product-card-gallery__title-placeholder {
      padding: var(--padding-2xl);
      font-size: var(--font-size--2xl);
    }

    .product-grid[data-product-card-size='medium'] .product-card-gallery__title-placeholder {
      padding: var(--padding-xl);
      font-size: var(--font-size--xl);
    }

    .product-grid[data-product-card-size='small'] .product-card-gallery__title-placeholder {
      padding: var(--padding-sm);
      font-size: var(--font-size--lg);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-3xl) + 50px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-2xl) + 50px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-xl) + 50px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-sm) + 50px);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-3xl) + 40px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-2xl) + 40px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-xl) + 40px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-sm) + 40px);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-3xl) + 40px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-2xl) + 40px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-xl) + 40px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-sm) + 40px);
    }
  }

  @media screen and (max-width: 749px) {
    .product-card-gallery__title-placeholder {
      font-size: var(--font-size--xl);
      padding: var(--padding-md);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-sm) + 50px);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-sm) + 40px);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-sm) + 40px);
    }
  }

  [product-grid-view='zoom-out'] .card-gallery .product-card-gallery__title-placeholder {
    /* stylelint-disable-next-line declaration-no-important */
    padding: var(--padding-xs) !important;
    font-size: var(--font-size--xs);
  }

  [product-grid-view='zoom-out'] .card-gallery .slideshow-control {
    min-width: auto;
  }

  ul[product-grid-view='zoom-out'] .product-grid__card .card-gallery {
    display: block;
  }

  [product-grid-view='zoom-out']
    .card-gallery
    > :is(quick-add-component, .product-badges, slideshow-component > slideshow-controls) {
    display: none;
  }

  ul[product-grid-view='zoom-out'] .card-gallery > img {
    display: block;
  }

  .card-gallery slideshow-arrows .slideshow-control {
    /* Align icons with quick-add button */
    padding-inline: var(--padding-xl);

    @container (max-width: 249px) {
      padding-inline: 0 var(--padding-sm);
    }
  }

  /*
   * Card galleries preview the next or previous images on 'pointerenter', so we
   * try to kick load them beforehand (they are lazy loaded otherwise).
   */
  .card-gallery
    :is(
      slideshow-slide:has(+ slideshow-slide[aria-hidden='false']),
      slideshow-slide[aria-hidden='false'] + slideshow-slide
    ) {
    content-visibility: auto;

    slideshow-component[actioned] & {
      content-visibility: visible;
    }
  }
/* END_SNIPPET:card-gallery */

/* START_SNIPPET:cart-bubble (INDEX:168) */
.cart-bubble {
    --cart-padding: 0.2em;

    position: relative;
    width: 20px;
    aspect-ratio: 1;
    border-radius: 50%;
    border-width: 0;
    display: flex;
    line-height: normal;
    align-items: center;
    justify-content: center;
    color: var(--color-primary-button-text);
    padding-inline: var(--cart-padding);
  }

  .cart-bubble[data-maintain-ratio] {
    aspect-ratio: 1;
  }

  .cart-bubble[data-maintain-ratio] .cart-bubble__background {
    border-radius: var(--style-border-radius-50);
  }

  .cart-bubble__background {
    position: absolute;
    inset: 0;
    background-color: var(--color-primary-button-background);
    border-radius: var(--style-border-radius-lg);
  }

  .cart-bubble__text {
    font-size: var(--font-size--3xs);
    z-index: var(--layer-flat);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
/* END_SNIPPET:cart-bubble */

/* START_SNIPPET:cart-items-component (INDEX:169) */
.cart-items-component {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    html:active-view-transition-type(empty-cart-drawer) {
      .cart-items-component {
        view-transition-name: cart-drawer-content;
      }
    }

    html:active-view-transition-type(empty-cart-page) {
      .cart-items-component {
        view-transition-name: cart-page-content;
      }
    }
  }

  ::view-transition-old(cart-page-content) {
    animation: cart-page-content-old var(--animation-speed-fast) var(--animation-easing) forwards;
  }

  @keyframes cart-page-content-old {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
      filter: blur(4px);
    }
  }

  ::view-transition-old(cart-drawer-content) {
    transform-origin: 50% 33%;
    animation: cart-contents-old var(--spring-d280-b0-duration) var(--spring-d280-b0-easing) forwards;
  }

  ::view-transition-new(cart-drawer-content) {
    transform-origin: top center;
    animation: cart-contents-new var(--spring-d280-b0-duration) var(--spring-d280-b0-easing) forwards;
  }

  @keyframes cart-contents-old {
    to {
      scale: 0.92;
      opacity: 0;
    }
  }

  @keyframes cart-contents-new {
    from {
      scale: 1.05;
      translate: 0 128px;
      filter: blur(1px);
      opacity: 0;
    }
  }
/* END_SNIPPET:cart-items-component */

/* START_SNIPPET:cart-products-styles (INDEX:170) */
/* La regla que tapaba la barra de envio gratis se saco el 27/10/2026,
     junto con el markup que tapaba. El porque esta escrito donde estaba
     ese markup, en snippets/header-actions.liquid. */

  /* ─── CART ITEMS ──────────────────────────────────── */
  .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 { min-height: 1px; position: relative; }

  .cart-items__wrapper:has(.cart-items__table-row.removing) .cart-items__table-row:not(.removing) {
    opacity: 1 !important;
    visibility: visible !important;
    display: grid !important;
  }

  .cart-items__table-row.removing { min-height: 1px !important; }

  .cart-page--empty .cart-items__wrapper,
  .cart-drawer:not(:has(.cart-form)) .cart-items__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-block-start: 0;
    text-align: center;
  }

  .cart-items__table { width: 100%; border-spacing: 0; }
  .cart-items__table * { margin: 0; }

  .cart-items__table-row {
    --cart-item-price-width: 5rem;
    display: grid;
    grid-template-columns: clamp(2rem, 12cqi, 5.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-sm);
    align-items: start;
    padding-bottom: calc(var(--cart-items-gap) * 0.65);
    margin-bottom: var(--margin-lg);
  }

  .cart-drawer .cart-items__table-row--full-width-variants {
    grid-template-columns: clamp(2.5rem, 15cqi, 7.5rem) minmax(0, 1fr) auto;
    grid-template-rows: repeat(4, min-content) 1fr;
    grid-template-areas: 'media details price' 'media variants variants' 'media unit_price unit_price' 'media quantity quantity' 'media error error';
    .cart-items__details { display: contents; }
    .cart-items__product-info { grid-area: details; }
    .cart-items__variants-wrapper { grid-area: variants; &:empty { display: none; } p { margin: 0; } }
    .cart-items__unit-price-wrapper { grid-area: unit_price; font-size: var(--font-size--sm); }
    .cart-items__price { min-width: auto; width: max-content; }
  }

  .cart-items__table-row.cart-items__nested-line td:first-child { width: 60%; justify-self: right; }
  html:active-view-transition-type(page-navigation) .cart-items__table-row { 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);
  }

  @media screen and (max-width: 749px) {
    .cart-items__table-row.removing {
      animation-duration: calc(var(--animation-speed) * 1.5) !important;
      animation-delay: calc(var(--animation-speed) * 0.5) !important;
    }
  }
  @keyframes removeRow {
    0% { height: var(--row-height); }
    100% { opacity: 0; height: 0; padding-bottom: 0; margin-bottom: 0; border-color: transparent; }
  }

  .cart-items__table-row:last-child { padding-bottom: 0; }
  .cart-items--dividers .cart-items__table-row { border-bottom: 1px solid var(--color-border); margin-bottom: var(--cart-items-gap); }
  .cart-items--dividers .cart-items__table-row:has(+ .cart-items__nested-line) { border-bottom: none; margin-bottom: 0; }
  .cart-items--dividers .cart-items__table-row:last-of-type { border-block-end: none; padding-block-end: 0; margin-bottom: 0; }

  .cart-items__details { grid-area: details; color: rgb(var(--color-foreground-rgb) / var(--opacity-70)); }
  .cart-items__details > * + *, .cart-items__bundle li { margin-block-start: var(--margin-3xs); }
  .cart-items__details * { font-size: calc(var(--font-size--sm) * 0.88); }
  .cart-items__details a { text-decoration: none; }
  .cart-items__title { font-size: calc(var(--font-size--md) * 0.75); color: var(--color-foreground); text-transform: var(--product-title-case); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-block-start: 0; line-height: 1.25; }
  .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); }

  /* Selector de cantidad dentro del carrito: mas compacto que en la
     ficha. Se ajusta redefiniendo las variables del snippet, NO
     sobreescribiendo width, height ni flex-basis. Antes habia aca un
     `height: auto` que le ganaba por especificidad al snippet y dejaba
     los botones con `height:100%` de una altura automatica. */
  /* 06/11/2026, Rodrigo: "que el quantity variant este mucho mas chico,
     que no ocupe tanto". De 38px de alto a 28: en el carrito la cantidad
     es un ajuste, no una decision, y antes pesaba igual que el precio.
     28px sigue siendo tocable con el pulgar; mas abajo de eso ya se
     empieza a errar el boton. */
  .cart-items .quantity-selector {
    --qty-height: 28px;
    --qty-button-size: 26px;
    --qty-input-width: 30px;
    --qty-icon-size: 12px;
    --qty-stroke: 2.4;
  }

  @media screen and (max-width: 749px) {
    .cart-items .quantity-selector {
      --qty-height: 30px;
      --qty-button-size: 28px;
      --qty-input-width: 32px;
      --qty-icon-size: 13px;
      --qty-stroke: 2.6;
    }
  }

  .cart-items__remove { background-color: transparent; color: var(--color-foreground); width: var(--minimum-touch-target); height: var(--minimum-touch-target); justify-content: center; box-shadow: none; padding: 0; }
  .cart-items__media { grid-area: media; padding: 0; }
  .cart-items__price { grid-area: price; min-height: unset; min-width: var(--cart-item-price-width); text-align: end; display: block; font-size: var(--font-size--sm); line-height: var(--line-height); }
  .cart-items__price-unit { font-size: var(--font-size--xs); padding-block-start: var(--padding-2xs); }
  .cart-items__media-container { display: flex; aspect-ratio: var(--ratio); position: relative; width: 100%; overflow: hidden; }
  .cart-items__media-image { aspect-ratio: inherit; object-fit: cover; object-position: center center; width: 100%; height: auto; }
  .cart-items__empty-button { margin-top: var(--margin-md); padding-inline: var(--padding-4xl); padding-block: var(--padding-lg); }

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

  /* ══════════════════════════════════════════════════════════════════
     INDAJAUS — LAS FILAS DEL CARRITO, 05/11/2026

     Rodrigo: "mejoraría el cart products, los espaciados, ocupa mucha
     altura innecesaria. Y hay como dos precios y no entiendo: que el del
     total esté en strong y el de la unidad que no esté arriba del
     quantity section, que esté abajo del total del producto."

     Tenia razon en las dos cosas.

     1. LOS DOS PRECIOS. Uno es el unitario y otro el total de la linea, y
        estaban en extremos opuestos de la fila: el unitario abajo a la
        izquierda, pegado al selector de cantidad (que es justo donde
        parece que dice el total), y el total arriba a la derecha. Nadie
        puede saber cual es cual.

        La grilla ya tenia areas con nombre, asi que alcanza con mover
        unit_price al lado de price: queda el total arriba y el unitario
        justo abajo, los dos a la derecha, en columna. Se lee solo.

     2. EL ALTO. Al juntarlos se va una fila entera de la grilla. El resto
        es apretar los margenes que el theme deja entre bloques.
     ══════════════════════════════════════════════════════════════════ */

  /* La columna angosta: cajon y telefono. */
  /* ── POR QUE LA FILA DEL BADGE VA AL FINAL ───────────────────────
     06/11/2026. La puse en el medio y el badge seguia saliendo angosto
     por mas que editara. El motivo: con variants en el medio, el area
     media queda partida en DOS bloques separados (arriba y abajo), y las
     areas de una grilla tienen que ser un rectangulo entero. Cuando no lo
     son, el navegador descarta la declaracion COMPLETA y manda la regla
     vieja del theme. Al final, media queda entera y el badge se lleva el
     ancho de la tarjeta. */
  /* La columna angosta. OJO: esta es la que gana casi siempre, no la de
     .cart-drawer de mas abajo. El 06/11/2026 edite solo aquella y el badge
     siguio saliendo angosto, porque el que mandaba era este bloque.

     Mismo criterio que en la ancha: el titulo se lleva el renglon, abajo
     van cantidad y precio, y el hueco de variantes (donde vive el badge
     del descuento) se lleva la fila ENTERA, foto incluida. */
  .cart-items__table-row--full-width-variants {
    grid-template-areas:
      'media details details'
      'media quantity price'
      'media unit_price unit_price'
      'media error error'
      'variants variants variants' !important;
  }

  /* ── EL TITULO SE QUEDA CON EL RENGLON ENTERO ────────────────────
     06/11/2026, Rodrigo: 'que adentro este toda la info bien acomodada'.

     Medido en el cajon (420px): las columnas quedaban en 52 / 85 / 80 /
     75. O sea que al NOMBRE del producto le tocaban 85px, y un nombre
     de esta tienda mide 48 caracteres: se leia 'EXTRACTOR TUBULAR P...'
     y no habia forma de saber que era. El precio y la cantidad, que son
     dos numeros cortos, se llevaban el doble de lugar que la unica cosa
     que identifica al producto.

     El cajon mide 420px SIEMPRE, no importa el monitor, asi que la
     grilla 'ancha' de cuatro cosas en un renglon nunca tuvo sentido
     aca. Ahora el titulo se lleva el renglon entero (264px, el nombre
     entra en dos lineas) y abajo van cantidad y precio, que juntos
     ocupan poco. El unitario, en su propio renglon, alineado con el
     precio. */
  .cart-drawer .cart-items__table-row--full-width-variants {
    grid-template-areas:
      'media details details details'
      'media quantity quantity price'
      'media unit_price unit_price unit_price'
      'media error error error'
      'variants variants variants variants' !important;
  }

  /* El unitario, debajo del total y alineado con el: en columna, los dos a
     la derecha, el total manda y el unitario explica. */
  .cart-items__unit-price-wrapper {
    text-align: end;
    align-self: start;
    font-size: 11.5px !important;
    line-height: 1.3;
    color: #6B6560;
    margin-block-start: 1px;
  }

  /* El total de la linea, en strong. Es el numero que el cliente suma de
     cabeza mientras mira el carrito. */
  .cart-items__price {
    font-weight: 800 !important;
    font-size: 14.5px !important;
    color: #0F0F0F;
    font-variant-numeric: tabular-nums;
  }

  /* ── MENOS ALTO ────────────────────────────────────────────────── */
  .cart-items__quantity { margin-block-start: 4px !important; }
  .cart-items__variants-wrapper { margin-block-start: 2px; }
  .cart-items__product-info { gap: 2px; }

  @media screen and (max-width: 749px) {
    .cart-items__price { font-size: 14px !important; }
    .cart-items__unit-price-wrapper { font-size: 11px !important; }
    .cart-items__quantity { margin-block-start: 3px !important; }
  }
/* END_SNIPPET:cart-products-styles */

/* START_SNIPPET:cart-summary (INDEX:173) */
.cart-actions { display: flex; flex-direction: column; gap: 0; border-block: 1px solid var(--color-border); padding-block: 0; margin-block-start: var(--margin-3xs); }
  .cart-actions__divider { border-block-start: 1px solid var(--color-border); }
  .cart-totals:not(:has(.cart-actions)) { margin-block-start: 0; border-block-start: 1px solid var(--color-border); padding-block-start: 8px; }
  .cart-totals__item { display: flex; align-items: center; justify-content: space-between; }
  .cart-totals__tax-note { color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text)); }
  .cart-totals__tax-note small { font-size: var(--font-size--2xs); }
  .cart-discounts { list-style: none; padding: 0; margin: 0; }
  .cart-discounts__item { display: flex; align-items: center; justify-content: space-between; }
  .cart-discounts__label { display: flex; align-items: center; gap: var(--gap-2xs); }
  .cart-discounts__label svg { width: var(--icon-size-sm); height: var(--icon-size-sm); display: inline-block; }
  .cart-totals__original-container, .cart-totals__container { display: flex; flex-direction: column; }
  .cart-totals__container { row-gap: var(--gap-2xs); &.cart-totals__container--has-installments { row-gap: var(--gap-xs); } }
  .cart-totals__original-container:empty { display: none; }
  .cart-totals { display: flex; flex-direction: column; gap: var(--gap-xl); width: 100%; border-block-start: none; &:has(> :first-child:not(.cart-totals__original-container, .cart-totals__container)) { padding-block-start: 0; border-block-start: none; } @media screen and (min-width: 750px) { padding-block-start: 0; } }
  .cart-totals__original-container, .cart-totals__original-container * { font-size: var(--cart-font-size--sm); }
  .cart-totals__total { align-items: baseline; font-weight: var(--font-weight-bold); }
  .cart-totals__total-label { font-size: var(--cart-font-size--sm); }
  .cart-totals__total-value { font-size: var(--cart-font-size--xl); @media screen and (max-width: 749px) { font-size: var(--font-size--lg); } }
  .cart-totals__installments { color: var(--color-foreground); font-size: var(--font-size--2xs); }
  .cart-note { width: 100%; }
  @starting-style { .cart-note[open-by-default-on-desktop][open-by-default-on-mobile] .details-content { block-size: auto; opacity: 1; overflow-y: visible; } }
  .cart-note__inner { padding-block: var(--padding-2xs) var(--padding-sm); }
  .cart-note__summary { display: flex; align-items: center; justify-content: space-between; }
  .cart-note__summary:hover { color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text)); }
  .cart-note__label { display: flex; align-items: flex-start; gap: var(--gap-2xs); font-size: var(--font-size--2xs); font-weight: 500; }
  .cart-note__instructions { color: var(--color-input-text); background-color: var(--color-input-background); border-width: var(--style-border-width-inputs); border-color: var(--color-input-border); transition: box-shadow var(--animation-speed) ease; box-shadow: var(--input-box-shadow); min-height: 5.5rem; min-width: 100%; max-width: 100%; font-size: var(--font-size--sm); padding: max(4px, calc(var(--style-border-radius-inputs) * (1 - cos(45deg)))); }
  .cart-totals__icon { height: var(--icon-size-xs); width: var(--icon-size-xs); margin: 0; }
  .cart__ctas { width: 100%; display: grid; gap: 5px; grid-auto-flow: row; grid-template-columns: 1fr; padding-block-start: 0; }
  .cart__ctas .cart__checkout-button { width: 100%; height: clamp(25px, var(--height-buy-buttons), 55px); padding-inline: var(--padding-4xl); }
  .cart-drawer__summary .cart-totals:not(:has(.cart-totals__original-container:empty)) { border-block-start: var(--style-border-width) solid var(--color-border); padding-block-start: 8px; }
  .cart-drawer__summary .cart-note { @media screen and (min-width: 750px) { margin-block-start: var(--margin-3xs); } }
  .cart-discount__input { background-color: var(--color-input-background); color: var(--color-input-text); border-width: var(--style-border-width-inputs); border-color: var(--color-input-border); border-style: solid; border-radius: var(--style-border-radius-inputs); padding: var(--padding-sm) var(--padding-md); height: 100%; flex-grow: 1; min-width: 0; font-size: var(--font-size--sm); }
  .cart-discount__input::placeholder { color: rgb(var(--color-input-text-rgb) / var(--opacity-subdued-text)); }
  .cart-discount__pill-code { overflow: hidden; max-width: 100px; text-overflow: ellipsis; white-space: nowrap; margin: 0; }
  .cart-discount { width: 100%; }
  .cart-discount__codes { display: none; gap: var(--padding-xs); flex-wrap: wrap; list-style: none; padding-inline: 0; margin: 0; }
  .cart-discount__codes:has(.cart-discount__pill) { display: flex; }
  .cart-discount__button { height: 100%; }
  .cart-discount__content { height: calc(var(--button-size) + var(--padding-2xs) + var(--padding-sm)); }
  .cart-discount__pill { display: flex; color: var(--color-foreground); gap: var(--padding-xs); align-items: center; padding: var(--padding-xs) var(--padding-sm); border-radius: var(--style-border-radius-pills); background-color: var(--color-input-background); text-transform: uppercase; }
  .cart-discount__form { display: flex; gap: var(--padding-md); align-items: center; height: 100%; padding-block: var(--padding-2xs) var(--padding-sm); }
  :is(.cart-discount__pill-remove, .cart-discount__pill-remove:hover) { --close-icon-opacity: 0.4; color: var(--color-foreground); background-color: transparent; pointer-events: all; cursor: pointer; height: 100%; }
  .cart-discount__error { display: flex; align-items: center; width: 100%; padding-block: var(--padding-2xs) var(--padding-sm); }
  .cart-discount__error .svg-wrapper { flex-shrink: 0; width: var(--icon-size-xs); height: var(--icon-size-xs); margin-inline: var(--margin-3xs) var(--margin-xs); }
  .cart-discount__error-text { margin-block-start: var(--margin-3xs); }
  .cart-discount__summary { display: flex; align-items: center; justify-content: space-between; }
  .cart-discount__summary:hover { color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text)); }
  .cart-discount__label { display: flex; align-items: flex-start; gap: var(--gap-2xs); font-size: var(--font-size--2xs); font-weight: 500; }
  @media screen and (min-width: 750px) { .cart-summary--extend { height: 100%; } }
/* END_SNIPPET:cart-summary */

/* START_SNIPPET:collection-card (INDEX:175) */
.collection-card {
    --fixed-card-height: var(--height-small);

    flex: 1 1 var(--card-width-small);
  }

  .collection-card > svg {
    height: 100%;
    width: 100%;
    aspect-ratio: var(--ratio);
  }

  .collection-card--image-bg .collection-card__inner {
    height: 100%;
  }

  .collection-card__inner {
    gap: var(--gap);

    a,
    button {
      pointer-events: auto;
    }
  }

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

  .collection-card__content {
    max-width: 100%;
    --flex-wrap: wrap;
  }

  /* Nested image block rules */

  .collection-card.collection-card--image-bg {
    aspect-ratio: var(--ratio);
  }

  .collection-card.collection-card--image-bg .collection-card__content {
    padding: var(--padding-lg);
  }

  .collection-card--image-height-fixed {
    height: 100%;
  }

  /* Bento layout rules */
  .collection-card--image-height-fixed .collection-card__image {
    height: var(--fixed-card-height);
    width: 100%;
  }

  .collection-card--image-height-fixed.collection-card--image-bg {
    height: var(--fixed-card-height);
    aspect-ratio: unset;
  }

  .collection-card__image .resource-image__image {
    object-fit: cover;
    width: 100%;
    height: 100%;
    max-width: 100%;
  }

  .collection-card--image-bg .collection-card__image {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .collection-card__image svg {
    height: 100%;
    width: 100%;
  }

  .resource-list:not(.hidden--desktop) .collection-card--flexible-aspect-ratio {
    &.collection-card.collection-card--image-bg,
    &.collection-card .placeholder-svg {
      aspect-ratio: 99;
    }
  }
/* END_SNIPPET:collection-card */

/* START_SNIPPET:cuotas-urgencia (INDEX:178) */
.cuotas-urgencia__cuotas {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    margin-block: 6px 0;
    background: rgb(245 166 35 / 0.08);
    border: 1px solid rgb(245 166 35 / 0.28);
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--color-foreground);
    width: fit-content;
    max-width: 100%;
  }

  .cuotas-urgencia__cuotas-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }

  .cuotas-urgencia__cuotas-texto strong {
    font-weight: 700;
  }

  /* Stock urgencia */
  .cuotas-urgencia__stock {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 16px;
    margin-block: 8px 0;
    background: rgb(220 38 38 / 0.05);
    border: 1px solid rgb(220 38 38 / 0.18);
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--color-foreground);
    width: fit-content;
    max-width: 100%;
  }

  .cuotas-urgencia__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #dc2626;
    flex-shrink: 0;
    animation: stockPulse 1.4s ease-in-out infinite;
  }

  @keyframes stockPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.5; transform: scale(0.75); }
  }

  .cuotas-urgencia__stock-texto strong {
    font-weight: 700;
  }

  @media screen and (max-width: 749px) {
    .cuotas-urgencia__cuotas,
    .cuotas-urgencia__stock {
      font-size: 0.8rem;
      padding: 8px 12px;
    }
  }
/* END_SNIPPET:cuotas-urgencia */

/* START_SNIPPET:divider (INDEX:179) */
.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:180) */
.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:181) */
.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:182) */
.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:183) */
/* 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:188) */
.recipient-form {
    --options-border-radius: var(--variant-picker-button-radius);
    --options-border-width: var(--variant-picker-button-border-width);

    display: flex;
    flex-direction: column;
    padding-bottom: var(--padding-2xl);
  }

  .recipient-form__send-to {
    padding: 0;
    margin-block-end: var(--margin-xs);
  }

  .gift-card-form-option {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-sm);
    padding: 0;
    border: none;
  }

  .gift-card-form-option__button-label {
    display: flex;
    align-items: center;
    position: relative;
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-lg);
    border: var(--style-border-width) solid var(--color-variant-border);
    border-radius: var(--options-border-radius);
    border-width: var(--options-border-width);
    overflow: clip;
    justify-content: center;
    min-width: auto;
    background-color: var(--color-variant-background);
    color: var(--color-variant-text);
    transition: background-color var(--animation-speed) var(--animation-easing),
      border-color var(--animation-speed) var(--animation-easing);

    &:hover {
      background-color: var(--color-variant-hover-background);
      border-color: var(--color-variant-hover-border);
      color: var(--color-variant-hover-text);
    }
  }

  .gift-card-form-option__button-label:has(:focus-visible) {
    --variant-picker-stroke-color: var(--color-foreground);

    border-color: var(--color-foreground);
    outline: var(--focus-outline-width) solid var(--color-foreground);
    outline-offset: var(--focus-outline-offset);
  }

  .gift-card-form-option__button-label:has(:checked) {
    color: var(--color-selected-variant-text);
    background-color: var(--color-selected-variant-background);
    border-color: var(--color-selected-variant-border);
    transition: background-color var(--animation-speed) var(--animation-easing),
      border-color var(--animation-speed) var(--animation-easing);

    &:hover {
      background-color: var(--color-selected-variant-hover-background);
      border-color: var(--color-selected-variant-hover-border);
      color: var(--color-selected-variant-hover-text);
    }
  }

  .gift-card-form-option__button-label input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
  }

  .recipient-fields {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    transition: opacity 0.3s var(--animation-easing);
    padding-block-start: var(--padding-xl);
  }

  .recipient-fields[hidden] {
    display: none;
  }

  .field--send-on {
    display: flex;
    flex-direction: column;
  }

  .recipient-form__message {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--gap-sm);
    margin-top: var(--margin-sm);
  }

  .recipient-form-field-label {
    position: absolute;
    left: var(--padding-sm);
    bottom: var(--padding-sm);
    font-style: italic;
    color: var(--color-input-text);
  }

  .recipient-fields__textarea {
    min-height: 5.5rem;
    overflow-y: auto;

    /* Space for the character count */
    padding-bottom: calc(var(--padding-sm) * 3);
    scroll-padding-bottom: calc(var(--padding-sm) * 3);
  }

  .recipient-fields__input {
    flex-grow: 1;
    transition: background-color var(--animation-speed) ease, border-color var(--animation-speed) ease;
    padding: var(--input-padding);
    background-color: var(--color-input-background);
    color: var(--color-input-text);
    text-align: left;
    font-size: var(--font-paragraph--size);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    border-radius: var(--style-border-radius-inputs);

    &:autofill {
      background-color: var(--color-input-background);
      color: var(--color-input-text);
    }

    &:is(:focus, :hover) {
      background-color: var(--color-input-hover-background);
    }

    &:is(:focus) {
      outline-color: var(--color-input-background);
    }
  }

  /* Date picker calendar icon
   * Safari doesn't show the icon and Firefox correctly applies the color from the input field.
   * Webkit browsers need the mask-image trick to use the correct icon color.
   */
  .field--send-on .recipient-fields__input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24' %3E%3Cg%3E%3Cpath d='M9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-image: none;
    background-color: currentColor;
    mask-type: match-source;
  }

  /* For Webkit browsers - text cursor for input area */
  .field--send-on .recipient-fields__input::-webkit-datetime-edit {
    cursor: text;
  }

  .field--send-on .recipient-fields__input::-webkit-datetime-edit-year-field,
  .field--send-on .recipient-fields__input::-webkit-datetime-edit-month-field,
  .field--send-on .recipient-fields__input::-webkit-datetime-edit-day-field {
    /* Override the disabled color */
    color: var(--color-input-text);
  }

  /* Fallback for other browsers */
  .field--send-on .recipient-fields__input {
    cursor: text;
  }

  /* For Firefox - entire field is clickable, so show pointer */
  @supports (-moz-appearance: none) {
    .field--send-on .recipient-fields__input {
      cursor: pointer;
    }
  }
/* END_SNIPPET:gift-card-recipient-form-styles */

/* START_SNIPPET:grid-density-controls (INDEX:190) */
.column-options-wrapper {
    --icon-offset: -3px;

    display: flex;
    gap: var(--gap-sm);
    min-width: fit-content;
    justify-content: flex-end;
    height: var(--minimum-touch-target);
    align-items: center;
    margin-right: var(--icon-offset);
  }

  .column-options-wrapper:only-child {
    margin-left: auto;
  }

  .facets__form-wrapper > .column-options-wrapper:first-child {
    margin-left: auto;
  }

  .facets .column-options-wrapper {
    display: none;

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

  .column-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-xs);
    margin: 0;
    padding: 0;
    border: none;

    @media screen and (min-width: 750px) {
      gap: var(--gap-2xs);
    }
  }

  .column-options__option {
    display: none;
    position: relative;
  }

  .column-options__option:has(.column-picker-mobile--single),
  .column-options__option:has(.column-picker-mobile--double) {
    @media screen and (max-width: 749px) {
      display: flex;
    }
  }

  .column-options__option:has(.column-picker--default),
  .column-options__option:has(.column-picker--zoom-out) {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  /* Override base rule for grid density controls - only when visible */
  .column-options-wrapper .column-options__option:has(input[type="radio"]):has(.column-picker-mobile--single),
  .column-options-wrapper .column-options__option:has(input[type="radio"]):has(.column-picker-mobile--double) {
    @media screen and (max-width: 749px) {
      display: flex;
    }
  }

  .column-options-wrapper .column-options__option:has(input[type="radio"]):has(.column-picker--default),
  .column-options-wrapper .column-options__option:has(input[type="radio"]):has(.column-picker--zoom-out) {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .column-options__legend {
    padding: 0;
    margin: 0;
  }

  .column-options__option-input {
    /* this is a repeating pattern a bit with the variant picker buttons */

    /* remove the checkbox from the page flow */
    position: absolute;

    /* set the dimensions to match those of the label */
    inset: 0;

    /* hide it */
    opacity: 0;
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    cursor: pointer;
  }

  .column-picker {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-50));
    padding: var(--padding-2xs);
    border-radius: var(--style-border-radius-xs);
    transition: background-color var(--animation-speed) ease, color var(--animation-speed) ease;
  }

  .column-options__option:hover .column-picker {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .column-options__option-input:checked ~ .column-picker {
    color: rgb(var(--color-foreground-rgb));
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }
/* END_SNIPPET:grid-density-controls */

/* START_SNIPPET:group (INDEX:191) */
.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:192) */
.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 { 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; line-height: normal; }
  }
  .account-button__fallback { width: 28px; height: 28px; border-radius: 50%; background-color: var(--shopify-account-color-accent, #0F0F0F); }
  .account-button--text shopify-account { color: inherit; }
  .cart-drawer { --cart-drawer-padding: var(--padding-xl) var(--padding-xl); --cart-drawer-padding-desktop: var(--padding-xl) var(--padding-2xl); @media screen and (min-width: 750px) { margin-inline-end: calc(var(--gap-xs) * -1); } }
  @media screen and (min-width: 750px) { .cart-drawer--text { display: flex; align-items: center; } }
  .cart-drawer__dialog { position: fixed; overflow: hidden; border-radius: 0; width: 100%; height: 100%; margin: 0 0 0 auto; padding: 0; border-left: var(--style-border-drawer); box-shadow: var(--shadow-drawer); background-color: var(--color-background); @media screen and (min-width: 750px) { width: var(--sidebar-width); max-width: 95vw; } }
  .cart-drawer__dialog:modal { max-height: 100dvh; overflow-y: hidden; }
  .cart-drawer__inner { height: 100%; overflow: hidden; }
  /* El alto lo reparte el flex de la columna, no una resta a mano.
     Antes decia `calc(100% - var(--header-height))` con 60px escritos
     en el markup, y la cabecera de verdad mide 87 (medido el 27/10 en
     375x812). Esos 27px de diferencia el contenido los perdia por
     abajo, que es parte de por que no se llegaba al final del pedido. */
  .cart-drawer__content { display: flex; flex-direction: column; padding: 0; background-color: var(--color-background); flex-grow: 1; min-height: 0; overflow: hidden; }

  .cart-drawer__heading { display: flex; align-items: center; gap: var(--gap-xs); margin-bottom: 0; }
  .cart-drawer__close-button { margin-right: calc(var(--padding-sm) * -1); top: var(--margin-sm); @media screen and (max-width: 749px) { top: var(--margin-2xs); } }
  .cart-drawer--empty .cart-drawer__content { text-align: center; min-height: auto; }
  .cart-drawer--empty .cart-drawer__heading { margin-bottom: var(--margin-md); }
  .cart-drawer__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); 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); } }
  /* ══════════════════════════════════════════════════════════════
     ACA ESTABA EL BUG MAS GRANDE DEL CARRITO

     Horizon mide el resumen contra el alto del cajon al abrirlo y, si
     el resumen se pasa de la mitad, le pone al dialogo
     cart-summary-sticky="false". En ese modo habia dos reglas, y la
     segunda era grave: la lista de productos pasaba a `overflow:
     unset`, o sea DEJABA DE SCROLLEAR.

     Medido el 27/10/2026 en 375x812 con cuatro productos: la lista
     ocupaba 273px y tenia 595px de contenido adentro, sin forma de
     bajar. Los ultimos dos productos del pedido eran inalcanzables.

     Y como la cuenta es una proporcion, el resultado dependia del
     telefono. Resumen 429px sobre cajon 792px da 0,542: pasa la mitad
     y se rompe. En una pantalla mas alta la misma web no llega a la
     mitad y anda bien. Eso es, exactamente, la diferencia que se veia
     entre el 17 Pro Max y el 16 Pro.

     Las dos reglas se borraron. La lista scrollea siempre y el resumen
     se comporta igual en todos los telefonos. El atributo lo sigue
     poniendo Horizon, pero ya no cambia nada.
     ══════════════════════════════════════════════════════════════ */

  .cart-actions summary { padding-inline: 0; padding-block: var(--padding-sm); line-height: 1.2; min-height: var(--minimum-touch-target); }
  .cart-drawer__heading--empty { display: flex; justify-content: center; }
  .cart-drawer__items { display: flex; flex-direction: column; padding-inline: var(--cart-drawer-padding); overflow-y: auto; @media screen and (min-width: 750px) { padding-inline: var(--cart-drawer-padding-desktop); } }
  .cart-drawer__items .cart-items__table-row { padding-bottom: var(--gap-xl); border-bottom: var(--style-border-width) solid var(--color-border); margin-bottom: var(--gap-xl); }
  .cart-drawer__items .cart-items__table-row: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--empty .cart-drawer__inner { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100dvh; margin-top: 0; }
  .cart-drawer:not(:has(.cart-form)) .cart-drawer__content { justify-content: center; }
  .cart-drawer__header { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: var(--cart-drawer-padding); border-bottom: none; position: sticky; top: 0; z-index: 1; @media screen and (min-width: 750px) { padding-inline: var(--cart-drawer-padding-desktop); } }
  .cart-drawer--empty .cart-drawer__header { justify-content: right; border-bottom: none; padding-bottom: 0; }
  .cart-drawer--empty .cart-drawer__heading { text-align: center; }
  header-actions { display: flex; @media screen and (max-width: 749px) { justify-self: flex-end; } }
  @media screen and (min-width: 750px) {
    .header-actions--text { gap: var(--gap-xl); }
    .header-actions__text-style { font-size: var(--header-actions-font-size); font-family: var(--header-actions-font-family); font-weight: var(--header-actions-font-weight); text-transform: var(--header-actions-text-case); }
  }
  #header-component[data-menu-style='drawer'] header-actions { justify-self: flex-end; }
  .header__column--right header-actions { margin-inline-start: calc(var(--gap-md) * -1); }
  .header-actions__cart-icon { --cart-bubble-size: 20px; --cart-bubble-top: 4.5px; --cart-bubble-right: 2.5px; position: relative; }
  .header-actions__cart-icon .cart-bubble { position: absolute; width: var(--cart-bubble-size, 20px); top: var(--cart-bubble-top); right: var(--cart-bubble-right); }
  @media screen and (min-width: 750px) { .header-actions__cart-icon--text.header-actions__cart-icon .cart-bubble { position: relative; top: 0; } }
  .cart-drawer__heading .cart-bubble { width: fit-content; border-radius: var(--style-border-radius-buttons-primary); aspect-ratio: auto; padding: var(--cart-padding); }
  .cart-drawer__heading .cart-bubble[data-maintain-ratio] { width: min(1lh, 22px); height: min(1lh, 22px); }
  .header-actions__cart-icon .cart-bubble__text, .cart-drawer__heading .cart-bubble__text { font-family: var(--font-paragraph--family); font-weight: var(--font-paragraph--weight); }
  .header-actions__cart-icon.header-actions__cart-icon--has-cart svg { mask: radial-gradient(calc(var(--cart-bubble-size) + 2px) at calc(100% - var(--cart-bubble-right)) var(--cart-bubble-top), transparent 45.45%, #fff 45.45%, #fff 100%); }
  .cart-drawer__heading .cart-bubble .cart-bubble__background { background-color: rgba(255,255,255,0.25); }
  .cart-drawer__heading .cart-bubble__text { color: #ffffff; font-size: clamp(var(--font-size--3xs), 0.75em, var(--font-size--xs)); }
  .cart-bubble.cart-bubble--animating .cart-bubble__background { animation: grow var(--animation-speed) var(--animation-easing); }
  .cart-bubble--animating .cart-bubble__text { --start-y: -1em; --start-opacity: 1; 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; } }
  /* ══════════════════════════════════════════════════════════════════
     ACA HABIA CINCO REGLAS DEL CARRITO. SE SACARON EL 25/10/2026.

     Rodrigo reporto que el cajon del carrito cerraba tosco en PC y
     parpadeando en telefono, y paso un export de Kaboa (kaboa.com.uy)
     porque ahi cierra bien. Se comparo archivo por archivo.

     assets/dialog.js es IDENTICO en las dos tiendas, byte por byte. La
     diferencia estaba en las capas de CSS propias, y este bloque era una
     de ellas. Kaboa, en este mismo archivo y en este mismo lugar, no
     tiene nada: solo las reglas de view-transition de Horizon que siguen
     abajo.

     Lo que habia, y por que molestaba:

       :root { --animation-speed: 0.55s !important; }
         Un override GLOBAL, con !important, de la duracion que usan
         TODOS los cajones del theme: carrito, buscador, menu y filtros.
         Sacarlo los devuelve al valor de fabrica de Horizon.

       .cart-drawer__dialog { transition: transform .65s, opacity .65s !important }
         Esta era la que rompia el cierre. closeDialog() de Horizon
         agrega la clase dialog-closing y espera un animationend sobre el
         <dialog> antes de restaurar el body y cerrar. Horizon le da esa
         animacion con `.dialog-drawer[open].dialog-closing`. Esta regla
         sumaba ADEMAS una transicion de 650ms sobre las mismas dos
         propiedades: dos motores moviendo el mismo transform con
         duraciones distintas, mientras el JS encima toca
         `dialog.style.animation` en el medio. Eso es el tiron.

       .cart-drawer__dialog::backdrop (dos reglas)
         El velo, que ahora lo define indajaus-carrito-flotante.

       @media (max-width: 749px) width / max-width
         El ancho en telefono, que tambien lo define el flotante, y con
         `max-inline-size` en vez de `max-width`.

     El movimiento del cajon vive ahora en UN SOLO lugar:
     snippets/indajaus-carrito-flotante.liquid, con las variables de
     Horizon (--start-x, --start-opacity, --animation-speed y compania).
     Si hay que tocar como abre o como cierra, es ahi.

     Para volver atras: se restauran las cinco lineas que estaban aca.
     Estan en CHECKLIST.md, en el item de esta tanda.
     ══════════════════════════════════════════════════════════════════ */
  @media screen and (prefers-reduced-motion: no-preference) { html:active-view-transition-type(empty-cart-drawer) { .cart-drawer__close-button { view-transition-name: cart-drawer-close-button; } } }
  :active-view-transition { .cart-drawer__header, .cart-drawer__content { background: transparent; } }
  ::view-transition-old(cart-drawer-content) { transform-origin: 50% 33%; animation: cart-contents-old 0.65s cubic-bezier(0.16,1,0.3,1) forwards; }
  ::view-transition-new(cart-drawer-content) { transform-origin: top center; animation: cart-contents-new 0.65s cubic-bezier(0.16,1,0.3,1) forwards; }
  @keyframes cart-contents-old { to { scale: 0.95; opacity: 0; } }
  @keyframes cart-contents-new { from { scale: 1.02; translate: 0 40px; filter: blur(2px); opacity: 0; } }
  .header-actions__text { display: flex; align-items: center; }
  @media screen and (min-width: 750px) { .header-actions__cart-icon--text { display: flex; align-items: center; gap: var(--gap-xs); } .header__column--right .header-actions--text { margin-inline-start: 0; } }
/* END_SNIPPET:header-actions */

/* START_SNIPPET:header-drawer (INDEX:193) */
.header__icon--menu { position: initial; }

  .menu-drawer-container .header__icon--summary {
    color: var(--color-foreground);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--padding-lg);
  }

  .header__icon--summary .header-drawer-icon {
    margin: auto;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__featured-content { z-index: var(--layer-base); container-type: inline-size; }
  .menu-drawer__featured-content--childlist { z-index: var(--layer-flat); }

  .menu-drawer__featured-content-list {
    display: flex;
    gap: 1em;
    overflow-x: auto;
    padding-block-end: var(--padding-lg);
  }

  .menu-drawer__featured-content-list-item { flex: 0 0 auto; }
  .menu-drawer__featured-content-list-item--product { width: 35cqi; }
  .menu-drawer__featured-content-list-item--collection img.resource-card__image { width: 80cqi; }
  .menu-drawer__featured-content-list-item:first-child { margin-inline-start: var(--margin-xl); }
  .menu-drawer__featured-content-list-item:last-child { margin-inline-end: var(--margin-xl); }

  .menu-drawer__navigation {
    padding: 0;
    @media screen and (min-width: 750px) { margin-top: var(--drawer-header-desktop-top); }
  }

  details:not(.menu-open) .header__icon--menu .header-drawer-icon--close { display: none; }
  details.menu-open .header__icon--menu .header-drawer-icon--close { @media screen and (min-width: 750px) { display: none; } }
  details.menu-open .header__icon--menu .header-drawer-icon--open { display: none; @media screen and (min-width: 750px) { display: flex; } }

  .menu-drawer {
    position: fixed;
    transform: translateX(-100%);
    visibility: hidden;
    height: var(--drawer-height);
    width: var(--drawer-width);
    max-width: var(--drawer-max-width);
    z-index: var(--layer-menu-drawer);
    left: 0; top: 0; padding: 0;
    background-color: var(--color-background);
    overflow: auto;
    display: flex;
    border-right: var(--style-border-drawer);
    box-shadow: var(--shadow-drawer);
    flex-direction: column;
    @media screen and (min-width: 750px) { width: 25rem; }
  }

  .menu-drawer.menu-drawer--has-submenu-opened { overflow: initial; }

  .menu-drawer__backdrop {
    position: fixed; top: 0; left: 0;
    width: 100vw; height: 100dvh;
    backdrop-filter: brightness(0.75);
    z-index: var(--layer-heightened);
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.32, 0.72, 0, 1);
    .menu-open & { opacity: 1; }
  }

  .menu-drawer,
  details[open] > .menu-drawer__submenu {
    transition: transform 0.52s cubic-bezier(0.32, 0.72, 0, 1), visibility 0.52s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.52s cubic-bezier(0.32, 0.72, 0, 1);
  }

  .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 0.52s cubic-bezier(0.22, 1, 0.36, 1);
    animation-delay: calc(0.22s + (var(--menu-drawer-animation-index) - 1) * 0.065s);
    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; }

  .menu-drawer__menu--grid:has(.menu-drawer__link-image) .menu-drawer__menu-item:not(:has(> .menu-drawer__link-image)) {
    display: flex; flex-direction: column; align-items: flex-start;
    justify-content: flex-start; row-gap: var(--padding-3xs); padding: 0;
  }

  .menu-drawer__menu--grid:has(.menu-drawer__link-image) .menu-drawer__menu-item:not(:has(> .menu-drawer__link-image))::before {
    content: ''; display: block; width: 100%; aspect-ratio: 16 / 9;
    background-color: var(--color-foreground-muted); opacity: 0.1;
    border-radius: var(--menu-image-border-radius);
  }

  .menu-drawer__close-button {
    position: relative; right: auto; top: auto;
    width: fit-content; height: fit-content; color: inherit; padding: var(--padding-lg);
  }

  .menu-drawer__back-button {
    display: flex; width: 100%; padding: var(--padding-md) var(--padding-xl);
    border: none; align-items: center; color: var(--color-foreground);
    background-color: transparent; text-align: left; text-decoration: none;
    white-space: nowrap; overflow-x: hidden; line-height: 1.2; box-shadow: none;
  }

  .menu-drawer__menu-item-text { overflow: hidden; text-overflow: ellipsis; }

  .menu-drawer .language-selector:not(.menu-drawer__submenu *) {
    width: fit-content; padding-inline-start: 0;
    .localization-form__select { text-align: left; }
  }

  .menu-drawer__menu-item > .svg-wrapper {
    width: fit-content; height: fit-content; margin: 0;
    padding-block: var(--padding-lg); padding-inline-start: var(--padding-xl); flex-shrink: 0;
  }

  .menu-drawer__list-item--divider .menu-drawer__menu-item > .svg-wrapper { padding-block: var(--padding-md); }
  .menu-drawer svg { width: var(--icon-size-xs); height: var(--icon-size-xs); }

  .menu-drawer__submenu {
    position: absolute; width: 100%; top: 0; height: 100dvh; left: 0;
    background-color: var(--color-background); z-index: var(--layer-flat);
    transform: translateX(-5%); visibility: hidden; overflow-y: auto; opacity: 0;
  }

  .menu-drawer__back-button > .svg-wrapper {
    margin-right: var(--padding-md); width: var(--icon-size-xs); height: var(--icon-size-xs);
  }

  .menu-drawer__utility-links {
    display: flex; flex-direction: column; padding: 0;
    margin-block: auto var(--padding-sm); margin-inline-start: var(--padding-xl);
    background-color: rgb(var(--color-foreground) 0.03);
  }

  .menu-drawer__account {
    display: inline-flex; align-items: center; gap: var(--gap-xs);
    text-decoration: none; height: 44px; font-size: 1.4rem; color: rgb(var(--color-foreground));
  }

  .menu-drawer__account svg { height: var(--icon-size-sm); width: var(--icon-size-sm); }
  .menu-drawer__account shop-user-avatar { --shop-avatar-size: 2.4rem; margin-right: 0.55rem; margin-left: -0.45rem; }

  .menu-drawer__link-image,
  .menu-drawer__featured-product-image,
  .menu-drawer__featured-collection-image,
  .menu-drawer__featured-collection-link::before { border-radius: var(--menu-image-border-radius); }

  @keyframes menu-drawer-nav-open {
    0% { visibility: hidden; opacity: 0; transform: translateX(-18px); filter: blur(5px); }
    55% { filter: blur(0px); }
    100% { visibility: visible; opacity: 1; transform: translateX(0); filter: blur(0px); }
  }

  @keyframes menu-drawer-subnav-open {
    0% { visibility: visible; opacity: 1; transform: translateX(0); }
    100% { visibility: hidden; opacity: 0; transform: translateX(-1rem); }
  }

  /* Drawer Localization */
  .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%); background-position: center; background-size: cover;
    margin-inline-end: 4px; position: relative;
  }

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

  .drawer-localization .country-filter { padding-block: 8px; }

  .drawer-localization .drawer-localization__button {
    display: flex; padding: 0; position: relative; text-decoration: none; height: 44px;
    &:hover { color: var(--color-foreground); }
  }

  .drawer-localization .drawer-localization__button .icon-caret {
    width: fit-content; height: fit-content; margin: 0;
    padding: var(--padding-xl) var(--padding-xl) var(--padding-xl) var(--padding-xs);
  }

  .menu-drawer__localization:not(drawer-localization-component) .language-selector {
    font-family: var(--menu-localization-font); font-size: var(--menu-localization-font-size);
  }

  .menu-drawer__localization .language-selector.h5 { padding-inline-start: 0; }
  .drawer-localization { display: contents; color: var(--color-foreground); }
  .drawer-localization localization-form-component { position: relative; height: 100%; }

  .drawer-localization .mobile-localization,
  .drawer-localization .drawer-localization__button--label {
    display: flex; gap: var(--gap-xs); margin-block: 0; align-items: center;
  }

  .drawer-localization__button--label.h6 { font-family: var(--menu-localization-font); }
  .drawer-localization img { width: var(--icon-size-sm); }

  .drawer-localization .localization-button__icon,
  .drawer-localization .localization-button__icon svg { width: var(--icon-size-xs); height: var(--icon-size-xs); }

  .drawer-localization summary.is-disabled { pointer-events: none; }
  .drawer-localization .localization-wrapper { width: 100%; }

  .drawer-localization .localization-form {
    display: flex; flex-direction: column; position: absolute;
    inset: 0; width: 100%; height: 100%;
  }

  .drawer-localization .localization-form > * { padding-inline: var(--padding-xl); }

  .drawer-localization .language-selector .svg-wrapper.icon-caret { transform: translateY(-50%) rotate(0deg); }
  .drawer-localization .language-selector .svg-wrapper.icon-caret svg { transform: none; }

  /* ─────────────────────────────────────────
     CRO: BADGE SUCURSALES SLIDEANDO
  ───────────────────────────────────────── */
  .mic-drawer-shipping-wrap {
    padding: 8px 14px 14px;
  }

  .mic-drawer-shipping-badge {
    position: relative;
    width: 100%; min-height: 90px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e8e0d0;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(200,166,107,0.10);
    user-select: none;
  }

  .mic-shipping-slide {
    position: absolute; inset: 0;
    display: flex; align-items: stretch;
    opacity: 0; transform: translateY(10px);
    transition: opacity 0.48s cubic-bezier(0.22,1,0.36,1), transform 0.48s cubic-bezier(0.22,1,0.36,1);
    pointer-events: none;
  }

  .mic-shipping-slide--active { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .mic-shipping-slide--exit   { opacity: 0; transform: translateY(-10px); pointer-events: none; }

  /* Barra lateral dorada */
  .mic-suc-accent {
    width: 3px; flex-shrink: 0;
    background: #C8A66B;
    border-radius: 12px 0 0 12px;
  }

  .mic-suc-body {
    flex: 1; display: flex; flex-direction: column;
    justify-content: center; gap: 3px;
    padding: 12px 12px 18px 14px;
  }

  .mic-suc-eyebrow {
    font-family: var(--font-body--family, sans-serif);
    font-size: 9px; font-weight: 700; letter-spacing: 0.14em;
    text-transform: uppercase; color: #C8A66B; line-height: 1;
  }

  .mic-suc-name {
    font-family: var(--font-body--family, sans-serif);
    font-size: 14px; font-weight: 700;
    color: #111; letter-spacing: -0.2px; line-height: 1.2;
    margin-top: 1px;
  }

  .mic-suc-horario {
    font-family: var(--font-body--family, sans-serif);
    font-size: 11px; font-weight: 400; color: #888; line-height: 1.4;
    margin-top: 1px;
  }

  .mic-suc-btn {
    display: inline-flex; align-items: center; gap: 5px;
    margin-top: 8px; padding: 5px 12px;
    background: #111; color: #fff;
    font-family: var(--font-body--family, sans-serif);
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 6px; text-decoration: none;
    width: fit-content;
    transition: background 0.18s;
  }

  .mic-suc-btn:hover { background: #C8A66B; }

  .mic-suc-btn-icon {
    width: 11px; height: 11px; flex-shrink: 0;
  }

  /* Dots indicadores */
  .mic-suc-dots {
    position: absolute; bottom: 8px; right: 12px;
    display: flex; gap: 5px; align-items: center;
    pointer-events: none;
  }

  .mic-suc-dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: #ddd;
    transition: background 0.3s, transform 0.3s;
  }

  .mic-suc-dot--active {
    background: #C8A66B;
    transform: scale(1.25);
  }

  /* ─────────────────────────────────────────
     PREMIUM: Títulos en negrita
  ───────────────────────────────────────── */
  .menu-drawer__menu-item--mainlist .menu-drawer__menu-item-text {
    font-weight: 700; letter-spacing: -0.01em;
  }

  /* ─────────────────────────────────────────
     PREMIUM: Animaciones drawer
  ───────────────────────────────────────── */
  .menu-drawer {
    transition:
      transform 0.52s cubic-bezier(0.32, 0.72, 0, 1),
      visibility 0.52s cubic-bezier(0.32, 0.72, 0, 1),
      opacity 0.52s cubic-bezier(0.32, 0.72, 0, 1) !important;
  }

  .menu-drawer-container:not([open]) .menu-drawer {
    transition:
      transform 0.34s cubic-bezier(0.4, 0, 1, 1),
      visibility 0.34s cubic-bezier(0.4, 0, 1, 1),
      opacity 0.34s cubic-bezier(0.4, 0, 1, 1) !important;
  }

  .menu-drawer__backdrop {
    transition: opacity 0.5s cubic-bezier(0.32, 0.72, 0, 1) !important;
  }
/* END_SNIPPET:header-drawer */

/* START_SNIPPET:indajaus-ambientes-css (INDEX:200) */
.cp__amb {
    --cpa-ease: cubic-bezier(0.23, 1, 0.32, 1);
    --cpa-oro: #C8A66B;
    --cpa-tinta: #0F1512;
  }

  .cp__amb[hidden] { display: none; }

  .cp__amb-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 9px;
    margin-block-end: 22px;
  }

  .cp__amb-pill {
    position: relative;
    padding: 10px 18px;
    border: 1px solid rgba(15, 21, 18, 0.14);
    border-radius: 999px;
    background: #fff;
    color: rgba(15, 21, 18, 0.72);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: -0.005em;
    cursor: pointer;
    transition: transform 160ms ease-out, background 220ms ease, border-color 220ms ease, color 220ms ease;
  }

  @media (hover: hover) and (pointer: fine) {
    .cp__amb-pill:hover {
      border-color: rgba(200, 166, 107, 0.65);
      color: var(--cpa-tinta);
    }
  }

  .cp__amb-pill:active { transform: scale(0.96); }

  .cp__amb-pill:focus-visible {
    outline: 2px solid var(--cpa-oro);
    outline-offset: 3px;
  }

  .cp__amb-pill.is-active {
    background: var(--cpa-tinta);
    border-color: var(--cpa-tinta);
    color: #fff;
  }

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

  /* Entrada corta al cambiar de ambiente. Se dispara sola cada vez que el
     panel deja de estar hidden, que es justo lo que hace la rotacion. */
  .cp__amb-panel:not([hidden]) {
    animation: cpa-entra 320ms var(--cpa-ease) both;
  }

  @keyframes cpa-entra {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
  }

  .cp__amb-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
  }

  .cp__amb-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px 10px 10px;
    border: 1px solid rgba(15, 21, 18, 0.1);
    border-radius: 14px;
    background: #fff;
    text-decoration: none;
    color: var(--cpa-tinta);
    transition: transform 280ms var(--cpa-ease), border-color 220ms ease, box-shadow 280ms var(--cpa-ease);
  }

  .cp__amb-foto {
    position: relative;
    flex: none;
    inline-size: 48px;
    block-size: 48px;
    border-radius: 11px;
    overflow: hidden;
    background: #F1EFEA;
  }

  .cp__amb-foto img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
    transition: transform 520ms var(--cpa-ease);
  }

  /* Sin foto queda la inicial, mejor que un cuadro gris vacio. */
  .cp__amb-ini {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 800;
    color: rgba(15, 21, 18, 0.3);
  }

  .cp__amb-txt {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .cp__amb-nombre {
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.005em;
  }

  .cp__amb-cuenta {
    font-size: 11.5px;
    font-weight: 600;
    color: rgba(15, 21, 18, 0.45);
  }

  @media (hover: hover) and (pointer: fine) {
    .cp__amb-item:hover {
      transform: translateY(-2px);
      border-color: rgba(200, 166, 107, 0.6);
      box-shadow: 0 10px 24px rgba(15, 21, 18, 0.1);
    }
    .cp__amb-item:hover .cp__amb-foto img { transform: scale(1.08); }
  }

  .cp__amb-item:active { transform: scale(0.985); }

  .cp__amb-item:focus-visible {
    outline: 2px solid var(--cpa-oro);
    outline-offset: 3px;
  }

  .cp__amb-vacio {
    margin: 0;
    padding: 18px 0;
    font-size: 14px;
    color: rgba(15, 21, 18, 0.5);
  }

  @media (max-width: 1099px) {
    .cp__amb-grid { grid-template-columns: repeat(3, 1fr); }
  }

  @media (max-width: 899px) {
    .cp__amb-grid { grid-template-columns: repeat(2, 1fr); }
  }

  /* TELEFONO: lista a la izquierda, colecciones a la derecha.
     Todos los paneles comparten la misma celda de la grilla (columna 2,
     fila 1). Como solo uno esta sin hidden por vez, no se pisan, y asi no
     hace falta tocar el markup para agruparlos. */
  @media (max-width: 749px) {
    .cp__amb {
      display: grid;
      grid-template-columns: minmax(98px, 34%) 1fr;
      gap: 12px;
      align-items: start;
    }

    .cp__amb-tabs {
      grid-column: 1;
      grid-row: 1;
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: flex-start;
      gap: 6px;
      margin: 0;
      overflow: visible;
    }

    .cp__amb-pill {
      inline-size: 100%;
      padding: 11px 12px;
      border-radius: 12px;
      font-size: 12.5px;
      text-align: start;
    }

    .cp__amb-panel {
      grid-column: 2;
      grid-row: 1;
      min-width: 0;
    }

    .cp__amb-grid { grid-template-columns: 1fr; gap: 8px; }
    .cp__amb-item { padding: 8px 10px 8px 8px; gap: 10px; }
    .cp__amb-foto { inline-size: 40px; block-size: 40px; border-radius: 10px; }
    .cp__amb-nombre { font-size: 12.5px; }
    .cp__amb-cuenta { font-size: 11px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .cp__amb-pill,
    .cp__amb-item,
    .cp__amb-foto img { transition: none; }
    .cp__amb-panel:not([hidden]) { animation: none; }
  }
/* END_SNIPPET:indajaus-ambientes-css */

/* START_SNIPPET:indajaus-badges-css (INDEX:203) */
.ijmm__badge {
    display: inline-block;
    margin-left: 7px;
    padding: 2px 6px;
    border-radius: 3px;
    background: rgba(15, 15, 15, 0.1);
    color: inherit;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.2;
    text-transform: uppercase;
    vertical-align: middle;
  }

  /* La de acento, para una novedad de verdad. Misma forma, otro color. */
  .ijmm__badge--oro {
    background: rgba(37, 211, 102, 0.14);
    color: #0B7A3B;
  }

  .ijmm__badge--neutro {
    background: rgba(15, 15, 15, 0.08);
    color: inherit;
    letter-spacing: 0.03em;
  }

  /* ── EN EL MENU HAMBURGUESA ───────────────────────────────────────────
     Ahi el nombre del item es de 28px en blanco sobre fondo casi negro. El
     fondo de la etiqueta pasa a blanco translucido, que es el equivalente de
     "el color del texto al 10 por ciento" cuando el texto es blanco, y sube
     un punto de tamaño para no quedar perdida al lado de un renglon tan
     grande. Va alineada al medio y subida 3px, porque pegada a la base de un
     renglon de 28px parece caida. */
  .menu-drawer__menu-item .ijmm__badge {
    margin-left: 10px;
    padding: 3px 8px;
    font-size: 10px;
    position: relative;
    top: -3px;
    white-space: nowrap;
  }

  /* En el drawer, la etiqueta sin modificador es la de acento: el markup de
     header-drawer.liquid usa la clase pelada para Nuevo y --neutro para la
     cantidad. Se respeta ese markup en vez de ir a editar un archivo de
     69 KB para agregarle una clase. */
  .menu-drawer__menu-item .ijmm__badge,
  .menu-drawer__menu-item .ijmm__badge--oro {
    background: rgba(37, 211, 102, 0.18);
    color: #4BE38C;
  }

  .menu-drawer__menu-item .ijmm__badge--neutro {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.62);
  }
/* END_SNIPPET:indajaus-badges-css */

/* START_SNIPPET:indajaus-buscador-menu-css (INDEX:204) */
.ijbs {
    display: flex;
    align-items: center;
    gap: 10px;
    inline-size: calc(100% - 24px);
    margin: 10px 12px 14px;
    padding: 12px 14px;
    border: 1px solid rgba(15, 21, 18, 0.14);
    border-radius: 14px;
    background: #F5F4F1;
    color: rgba(15, 21, 18, 0.55);
    text-align: start;
    cursor: pointer;
    transition: border-color 220ms ease, background 220ms ease, transform 160ms ease-out;
  }

  .ijbs__lupa {
    display: flex;
    flex: none;
    color: #0F1512;
  }

  .ijbs__lupa svg {
    inline-size: 17px;
    block-size: 17px;
  }

  .ijbs__txt {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* La pista de la derecha se cae primero cuando no hay lugar. */
  .ijbs__kbd {
    flex: none;
    padding: 4px 9px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(15, 21, 18, 0.1);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: rgba(15, 21, 18, 0.45);
    white-space: nowrap;
  }

  @media (hover: hover) and (pointer: fine) {
    .ijbs:hover {
      border-color: rgba(200, 166, 107, 0.65);
      background: #fff;
    }
  }

  .ijbs:active { transform: scale(0.985); }

  .ijbs:focus-visible {
    outline: 2px solid #C8A66B;
    outline-offset: 2px;
  }

  @media (max-width: 400px) {
    .ijbs__kbd { display: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    .ijbs { transition: none; }
  }
/* END_SNIPPET:indajaus-buscador-menu-css */

/* START_SNIPPET:indajaus-cabecera-css (INDEX:206) */
.cbz {
    --cbz-ease: cubic-bezier(0.23, 1, 0.32, 1);
    --cbz-oro: #C8A66B;
    position: relative;
    background: #0F1512;
    color: #fff;
    overflow: hidden;
    isolation: isolate;
  }

  /* La foto va de fondo, atenuada: tiene que ambientar, no competir con el
     titulo. Si la coleccion no tiene imagen queda el negro solo y se ve igual
     de bien. */
  .cbz__fondo {
    position: absolute;
    inset: 0;
    z-index: -2;
  }

  .cbz__fondo img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.38;
  }

  .cbz__velo {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      linear-gradient(to right, rgba(15, 21, 18, 0.92) 0%, rgba(15, 21, 18, 0.72) 42%, rgba(15, 21, 18, 0.5) 100%),
      linear-gradient(to top, rgba(15, 21, 18, 0.96) 0%, rgba(15, 21, 18, 0.2) 56%);
  }

  .cbz__inner {
    max-width: 1360px;
    margin: 0 auto;
    padding: 24px 40px 0; /* antes 40px arriba */
  }

  /* Miga de pan: la coleccion principal arriba en chico, el titulo es la
     subcoleccion en la que estas. */
  .cbz__miga {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px; /* antes 12px */
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.58);
  }

  .cbz__miga a {
    color: inherit;
    text-decoration: none;
    transition: color 200ms ease;
  }

  .cbz__miga a:hover { color: var(--cbz-oro); }

  .cbz__miga svg {
    inline-size: 13px;
    block-size: 13px;
    flex: none;
    opacity: 0.6;
  }

  .cbz__volanta {
    display: block;
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--cbz-oro);
  }

  .cbz__title {
    margin: 0;
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1.07;
    letter-spacing: -0.025em;
    font-weight: 800;
    text-wrap: balance;
  }

  .cbz__desc {
    margin: 14px 0 0;
    max-width: 62ch;
    font-size: 15px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.64);
  }

  .cbz__desc p { margin: 0 0 10px; }
  .cbz__desc p:last-child { margin-block-end: 0; }

  .cbz__cuenta {
    margin: 7px 0 0; /* antes 12px */
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
  }

  /* Las pills van dentro de la misma caja con fondo, debajo del titulo. */
  .cbz__pills {
    display: flex;
    gap: 14px;
    margin-block-start: 18px;  /* antes 30px */
    padding-block-end: 16px;   /* antes 30px */
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

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

  .cbz__pill {
    flex: 0 0 auto;
    inline-size: 86px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.78);
    transition: color 220ms ease, transform 300ms var(--cbz-ease);
  }

  .cbz__pill-foto {
    position: relative;
    inline-size: 72px;
    block-size: 72px;
    border-radius: 18px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    transition: border-color 220ms ease, box-shadow 300ms var(--cbz-ease);
  }

  .cbz__pill-foto img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
    transition: transform 560ms var(--cbz-ease);
  }

  /* Sin foto queda la inicial de la categoria: mejor que un hueco gris. */
  .cbz__pill-ini {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.34);
  }

  .cbz__pill-label {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.26;
    text-align: center;
    letter-spacing: -0.005em;
  }

  @media (hover: hover) and (pointer: fine) {
    .cbz__pill:hover { color: #fff; }
    .cbz__pill:hover .cbz__pill-foto {
      border-color: rgba(200, 166, 107, 0.7);
      box-shadow: 0 8px 22px rgba(0, 0, 0, 0.34);
    }
    .cbz__pill:hover .cbz__pill-foto img { transform: scale(1.08); }
  }

  .cbz__pill:active { transform: scale(0.96); }

  .cbz__pill:focus-visible {
    outline: 2px solid var(--cbz-oro);
    outline-offset: 4px;
    border-radius: 8px;
  }

  /* La categoria en la que estas parada se marca, para no hacer click en el
     lugar donde ya estas. */
  .cbz__pill.is-aca { color: #fff; }

  .cbz__pill.is-aca .cbz__pill-foto {
    border-color: var(--cbz-oro);
    box-shadow: 0 0 0 1px var(--cbz-oro);
  }

  @media (max-width: 749px) {
    .cbz__inner { padding: 16px 20px 0; } /* antes 26px arriba */
    .cbz__fondo img { opacity: 0.3; }
    .cbz__pills {
      margin-block-start: 14px; /* antes 22px */
      padding-block-end: 12px;  /* antes 22px */
      gap: 10px;
      margin-inline: -20px;
      padding-inline: 20px;
    }
    .cbz__pill { inline-size: 74px; }
    .cbz__pill-foto { inline-size: 64px; block-size: 64px; border-radius: 16px; }
    .cbz__pill-label { font-size: 11px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .cbz__pill, .cbz__pill-foto, .cbz__pill-foto img { transition: none; }
  }
/* END_SNIPPET:indajaus-cabecera-css */

/* START_SNIPPET:indajaus-cards-css (INDEX:207) */
/* El contenedor de texto de la tarjeta. Se centra el bloque entero y
     despues se alinean los hijos, porque algunos son flex y no heredan
     text-align. */
  product-card .product-card__content,
  product-card .product-title,
  product-card .product-card__title,
  product-card .price,
  product-card .price-list,
  product-card .product-card__price,
  product-card .cuotas-urgencia__cuotas,
  .product-grid product-card .product-card__content {
    text-align: center;
  }

  /* Los bloques de precio de Horizon son flex: sin esto el texto queda
     centrado pero las piezas (precio, comparativo, porcentaje) siguen
     pegadas a la izquierda. */
  product-card .price,
  product-card .price-list,
  product-card .product-card__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
  }

  /* La linea de cuotas en verde tambien al medio, y de ancho completo para
     que el centrado sea el de la tarjeta y no el del texto. */
  product-card .cuotas-urgencia__cuotas,
  product-card [class*='cuotas'] {
    justify-content: center;
    margin-inline: auto;
  }

  /* El titulo puede ocupar dos lineas: centrado se lee mejor equilibrado
     que con la segunda linea corta a la izquierda. */
  product-card .product-title,
  product-card .product-card__title,
  product-card h4 {
    text-wrap: balance;
  }

  /* ── EL TITULO REAL ES UN h4 CON UN <a> ADENTRO ────────────────────
     Mirando el DOM: el nombre del producto vive en un h4 y adentro hay un
     <a> sin clase que trae su propio text-align a la izquierda. Centrar
     solo las clases con nombre no alcanzaba, el enlace seguia alineado a
     la izquierda. Por eso se centra el h4 y tambien lo que tenga adentro. */
  /* ── DONDE ESTA DE VERDAD EL NOMBRE DEL PRODUCTO ───────────────────
     Mirado en el DOM el 21/10/2026, la cadena es esta:

       h3.h4  ->  div.text-block  ->  p   <- el texto que se ve

     Centrar el h3 no alcanza: ese <p> trae su propio text-align a la
     izquierda del theme, y el hijo le gana al padre. Hay que centrar el
     parrafo, que es el que manda. */
  product-card h3,
  product-card h3 .text-block,
  product-card h3 p,
  product-card .text-block,
  product-card .text-block p,
  product-card h4,
  product-card h4 a,
  product-card [class*='card__content'],
  product-card [class*='card__info'] {
    text-align: center !important;
  }
  /* ── LAS CELDAS VACIAS DE LOS PRODUCTOS SIN FOTO ───────────────────
     Al esconder los productos sin foto, la tarjeta deja de dibujarse
     pero el <li> que la envuelve se sigue emitiendo, porque lo arma la
     seccion y no el snippet de la tarjeta. Resultado: huecos en la
     grilla. En telefono, con dos columnas, el primer producto aparecia
     corrido a la derecha con medio ancho en blanco al lado.

     Se esconde la celda que no tiene tarjeta adentro. Asi la grilla se
     cierra sola y no quedan agujeros. */
  li.product-grid__item:not(:has(product-card)) {
    display: none !important;
  }
/* END_SNIPPET:indajaus-cards-css */

/* START_SNIPPET:indajaus-carrito-extras (INDEX:208) */
/* Las diapositivas van detras del velo, con el mismo z-index que tenia la
     foto fija. El ::before del snippet de CSS se apaga cuando estas existen,
     asi que si el JS no corre queda la foto de siempre y no un hueco. */
  dialog.cart-drawer__dialog .cart-drawer__header.ijc-con-slides::before {
    display: none;
  }

  dialog.cart-drawer__dialog .ijc-slide {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-size: cover;
    background-position: center 42%;
    opacity: 0;
    transition: opacity 900ms ease;
    pointer-events: none;
  }

  dialog.cart-drawer__dialog .ijc-slide.is-active { opacity: 0.55; }

  /* La cabecera pasa a grilla para que el contador entre como una fila
     propia debajo del titulo. Con el flex del tema quedaba al lado del
     boton de cerrar. */
  dialog.cart-drawer__dialog .cart-drawer__header {
    display: grid !important;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 12px;
    padding: 30px 20px 24px !important;
  }

  /* ── MAS BAJA EN COMPU ──────────────────────────────────────────
     06/11/2026, Rodrigo: "en PC el header action ocupa mucho, quizas
     sacarle un poco de altura". Medido en 1440: 100px de alto, de los
     cuales 54 eran padding. En el telefono esos 30px de arriba hacen
     falta porque ahi arriba esta la muesca y la barra del navegador;
     en compu no hay nada de eso, es aire y nada mas.

     Con 18/16 la cabecera queda en ~76px y la foto de fondo se sigue
     viendo. */
  /* La clase va repetida a proposito. El bloque de estilos de este
     snippet se emite DOS veces en la pagina (lo verifique recorriendo
     document.styleSheets: la regla de 30px aparece dos veces, una antes
     y otra despues de esta). Con la misma especificidad gana la ultima,
     asi que la de arriba volvia a pisar esta. Repitiendo la clase sube
     la especificidad y gana siempre, este donde este. */
  @media screen and (min-width: 750px) {
    dialog.cart-drawer__dialog.cart-drawer__dialog .cart-drawer__header {
      padding: 18px 20px 16px !important;
    }
  }

  dialog.cart-drawer__dialog .cart-drawer__heading,
  dialog.cart-drawer__dialog .jq-empty-header__title {
    grid-column: 1;
    grid-row: 1;
  }

  dialog.cart-drawer__dialog .cart-drawer__header .close-button,
  dialog.cart-drawer__dialog .cart-drawer__header button[aria-label] {
    grid-column: 2;
    grid-row: 1;
  }

  /* ── EL CONTADOR, YA ADENTRO DE LA CABECERA ───────────────────────────
     Primera version: pastilla dorada, todo en mayuscula y con blur. Gritaba
     mas que el titulo del carrito, que es lo que uno tiene que leer primero,
     y el dorado sobre dorado de la foto se ensuciaba.

     Esta version lo baja de tono: fondo oscuro translucido en vez de dorado,
     el texto en minuscula y en gris claro, y el dorado reservado para una
     sola cosa, el numero, que es la que de verdad importa. El punto que late
     al costado hace el trabajo que antes hacia el color de todo el badge.

     Los numeros van tabulares para que no baile el ancho al cambiar de
     segundo. */
  dialog.cart-drawer__dialog .cart-drawer__header .jq-timer {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: start;
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0 0;
    padding: 6px 13px 6px 11px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    background: rgba(10, 14, 12, 0.55);
    color: rgba(255, 255, 255, 0.72);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
  }

  /* El candado del tema se reemplaza por un punto que late: es mas chico,
     dice lo mismo y no compite con el titulo. */
  dialog.cart-drawer__dialog .cart-drawer__header .jq-timer__icon { display: none; }

  dialog.cart-drawer__dialog .cart-drawer__header .jq-timer::before {
    content: "";
    flex: none;
    inline-size: 6px;
    block-size: 6px;
    border-radius: 50%;
    background: #C8A66B;
    animation: ijc-late 2s ease-in-out infinite;
  }

  @keyframes ijc-late {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
  }

  dialog.cart-drawer__dialog .cart-drawer__header .jq-timer strong {
    color: #fff;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
  }

  @media (max-width: 749px) {
    /* ── 08/11/2026 · LA CABECERA, MAS BAJA EN TELEFONO ──────────
       Rodrigo: "acortarle un poco la altura, mas que nada en movil,
       para ganarla en cart products".

       Medido antes de tocar, en 375x812 con 5 lineas y 15 unidades:
         cajon 792 · cabecera 133 · lista 348 · resumen 309
       O sea 442px de 792 que no son productos: el 56%. Y el que
       scrollea tenia 916px de contenido en 348 de ventana, asi que se
       veia el 38% del carrito a la vez.

       De los 133 de la cabecera, 44 eran relleno y 13 mas el margen
       del reloj. El contenido de verdad son 75.

       No se saca NADA de lo que comunica: sigue el titulo, el contador
       de unidades, el reloj de stock reservado y la foto de fondo. Lo
       unico que se va es el vacio. */
    dialog.cart-drawer__dialog .cart-drawer__header {
      padding: 12px 16px 10px !important;
    }
    /* 13 de margen mas 12 de relleno para un renglon de 17px. Con 7 y 8
       el reloj sigue separado del titulo y se lee igual. */
    dialog.cart-drawer__dialog .cart-drawer__header .jq-timer {
      margin-block-start: 7px;
      font-size: 11px;
      padding: 4px 11px;
    }
    dialog.cart-drawer__dialog .cart-drawer__header .jq-timer {
      background: rgba(10, 14, 12, 0.62);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    dialog.cart-drawer__dialog .ijc-slide { transition: none; }
    dialog.cart-drawer__dialog .cart-drawer__header .jq-timer::before { animation: none; }
  }
/* END_SNIPPET:indajaus-carrito-extras */

/* START_SNIPPET:indajaus-carrito-flotante (INDEX:209) */
dialog.cart-drawer__dialog {
    --ijc-tinta: #0F1512;
    --ijc-oro: #C8A66B;

    /* ── EL MOVIMIENTO, POR LAS VARIABLES DE HORIZON ──────────────────
       Ver "EL CIERRE" en el comentario de arriba. Horizon ya le aplica
       `animation: move-and-fade var(--animation-speed) var(--animation-easing)`
       por la clase dialog-drawer: aca solo se le dice cuanto y como. */
    /* ── MAS LENTO Y MAS SUAVE, 26/10/2026 ──────────────────────────
       Rodrigo: "ya ni parpadea, pero se abre y se cierra demasiado
       demasiado rapido, tiene que ser mil veces mas clean premium".

       Estaba en 420 para abrir y 300 para cerrar, que son numeros de
       interfaz que quiere sentirse rapida. Para un cajon grande eso se
       lee como un golpe. Fueron a 560 y 440.

       ── Y SEGUIA SINTIENDOSE RAPIDO. EL NUMERO NO ERA EL PROBLEMA ──
       27/10/2026. Rodrigo volvio a decir que abre muy rapido, con los
       560ms ya publicados. Medido en la tienda en vivo para descartar
       que la variable no estuviera llegando: llegaba, el dialogo corria
       move-and-fade 560ms con la curva puesta. O sea que la sensacion no
       mentia pero la causa era otra.

       Son dos cosas, y ninguna es la duracion:

       1. EL RECORRIDO ERA DE 26px. Un panel de 420px de ancho que se
          corre 26 y aparece no "entra": parpadea en el lugar. El ojo lee
          movimiento, no tiempo. Con tan poco camino, 560ms o 200ms se
          ven casi igual.

       2. LA CURVA GASTABA TODO AL PRINCIPIO. cubic-bezier(0.16, 0.84,
          0.24, 1) es un frenazo muy marcado: a un cuarto del tiempo ya
          recorrio casi todo. Los otros tres cuartos el panel esta quieto
          esperando que termine la animacion. De ahi sale "abre rapido y
          despues no pasa nada".

       Lo que se cambia: el recorrido pasa de 26 a 56px en escritorio y
       de 24 a 64 en telefono, y la curva pasa a
       cubic-bezier(0.32, 0.72, 0, 1), que es la de los cajones de iOS.
       Esa reparte el movimiento a lo largo de todo el tiempo en vez de
       gastarlo en el primer cuarto.

       La duracion sube poco, de 560 a 600: mas que eso un cajon que se
       abre veinte veces por visita se vuelve pesado. El cierre va a 480,
       siempre mas corto que la apertura, que es lo que se espera de algo
       que uno decide cerrar. */
    /* ── CUARTA VUELTA, 05/11/2026 ──────────────────────────────────
       Rodrigo: "se abre muy rapido y se cierra muy rapido, quiero algo
       premium". Revisando el codigo aparecio algo peor que una sensacion:
       **el cierre nunca se hizo**. El comentario de la vuelta anterior
       dice "el cierre va a 480", pero abajo, en los keyframes, seguia en
       300ms y con 44px de recorrido contra los 56 de la apertura. O sea
       que el cierre era literalmente la mitad de largo que la apertura y
       recorria menos camino. Por eso se sentia un portazo.

       Vale la leccion de la vuelta pasada, que sigue siendo la buena: el
       ojo lee MOVIMIENTO, no tiempo. Asi que sube el recorrido antes que
       el reloj. */
    --animation-speed: 660ms;
    --animation-easing: cubic-bezier(0.32, 0.72, 0, 1);

    /* ── FLOTANTE Y DE ALTO COMPLETO, PERO MEDIDO CON dvh ─────────────
       Antes iba con `inset: 14px 14px 14px auto`, que en escritorio anda
       bien pero en telefono no: en iOS el inset de un elemento fijo se
       resuelve contra el viewport GRANDE, el de la barra de direcciones
       escondida. Con la barra a la vista, el borde de abajo del cajon
       queda fuera de la pantalla, y ahi es donde esta el boton de pagar.

       Ahora el alto se declara con dvh, que es la unidad que sigue a la
       barra cuando aparece y desaparece, y se le descuenta el area segura
       de abajo (34px en los iPhone con gesto de inicio). El cajon nunca
       se pasa de lo que realmente se ve. */
    position: fixed;
    inset-block-start: 14px;
    inset-inline-end: 14px;
    /* ── ESTE `auto` NO SE BORRA ──────────────────────────────────────
       Al pasar de `inset: 14px 14px 14px auto` a propiedades sueltas me
       comi el lado de arranque. Horizon le deja un `left: 0` puesto, asi
       que el cajon quedaba con los dos costados fijados y un ancho
       declarado: sobredefinido. En ese caso el navegador ignora el lado
       final y gana el de arranque, o sea que el carrito se abria desde la
       IZQUIERDA. Con `auto` vuelve a quedar anclado solo a la derecha. */
    inset-inline-start: auto;
    inset-block-end: auto;
    inline-size: min(420px, calc(100vw - 28px));
    max-inline-size: none !important;
    block-size: calc(100dvh - 28px - env(safe-area-inset-bottom, 0px));
    max-block-size: calc(100dvh - 28px);
    margin: 0;
    padding: 0;
    border: 1px solid rgba(15, 21, 18, 0.08);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 28px 70px rgba(15, 21, 18, 0.3);
  }

  /* Entra desde la derecha, con un fundido corto. Los 56px de recorrido
     son a proposito y el porque esta arriba, en la nota de la curva. */
  dialog.cart-drawer__dialog[open] {
    --start-x: 76px;
    --end-x: 0px;
    --start-y: 0px;
    --end-y: 0px;
    --start-opacity: 0;
    --end-opacity: 1;
  }

  /* Y sale por donde entro, mas rapido de lo que entro. La duracion y la
     curva van en la regla porque Horizon pone las suyas en el mismo lugar
     y hay que ganarle: la variable sola no alcanza. */
  /* ══════════════════════════════════════════════════════════════════
     EL CIERRE NECESITA UNA ANIMACION CON NOMBRE PROPIO

     04/11/2026. Rodrigo seguia viendo el carrito "parpadear" al cerrar.
     Medido en Chrome, en la tienda, cerrando con la X como lo cierra un
     cliente: durante 1,26 segundos despues del clic el cajon quedaba con
     la clase `dialog-closing` puesta, con opacity 1, sin moverse un
     pixel, y `dialog.open` seguia en true. Y en todo ese rato el
     navegador pinto DOS cuadros: la pagina no estaba animando nada.

     O sea que la animacion de salida no arrancaba nunca. closeDialog()
     de Horizon hace `await onAnimationEnd(...)` justo antes de cerrar el
     dialog de verdad, asi que se quedaba colgado esperando un evento que
     no iba a llegar, y el cajon terminaba desapareciendo de golpe cuando
     saltaba el plazo de seguridad. Ese golpe es lo que se ve como un
     parpadeo: no es que parpadee, es que NO se anima y despues salta.

     ── POR QUE NO ARRANCABA ──────────────────────────────────────────
     La regla de cierre pedia `move-and-fade`, que es EL MISMO
     animation-name que ya estaba corriendo para la apertura. Para el
     navegador no hay animacion nueva que empezar: cambiaron las
     variables, pero el nombre es el mismo, asi que no reinicia y no
     dispara animationend. Horizon intenta forzarlo poniendo
     `style.animation = 'none'` y volviendolo a vaciar, pero en este
     cajon ese truco no alcanza.

     La solucion es que el cierre tenga su PROPIA animacion. Con otro
     nombre el navegador no tiene con que confundirla: arranca siempre y
     dispara animationend siempre.

     Tambien se dejan de usar las variables --start-* para la salida y se
     escriben los valores en los keyframes. Esas variables se resuelven
     en un momento que no controlamos, y fue parte del lio: si algo falla
     ahi, falla en silencio.

     ── SI SE VUELVE A TOCAR ──────────────────────────────────────────
     Cambiar el movimiento aca adentro, en los keyframes. Lo que NO hay
     que hacer es volver a poner `move-and-fade` en el cierre.
     ══════════════════════════════════════════════════════════════════ */
  /* El cierre recorre lo mismo que la apertura y dura 460ms: mas corto
     que abrir (660), que es lo que se espera de algo que uno decide
     cerrar, pero no la mitad. Antes eran 300ms y 44px: un portazo. */
  @keyframes ij-cajon-sale {
    from {
      translate: 0 0;
      opacity: 1;
    }
    to {
      translate: 76px 0;
      opacity: 0;
    }
  }

  dialog.cart-drawer__dialog[open].dialog-closing {
    animation: ij-cajon-sale 460ms cubic-bezier(0.32, 0.72, 0, 1) forwards;
  }

  /* ══════════════════════════════════════════════════════════════════
     EL VELO, SIN DESENFOQUE Y SIN PELEA

     Medido en la tienda en vivo el 26/10/2026, con el carrito abierto y
     cerrado:

       cerrado  ->  backdrop-filter: blur(3px)    animation: none
       abierto  ->  backdrop-filter: brightness(1) animation: backdropFilter

     O sea que mientras el cajon esta abierto NO se aplicaba el blur de
     aca: Horizon le corre encima su propia animacion `backdropFilter`
     (regla `.dialog-modal[open]::backdrop`), que anima brightness. Al
     terminar o arrancar esa animacion, el valor salta de brightness a
     blur de un cuadro al otro. Son dos funciones de filtro distintas, no
     hay interpolacion posible entre ellas: el navegador lo resuelve como
     un corte. Eso es parte del parpadeo que se veia al abrir.

     Se saca el desenfoque por dos motivos, no uno:

     1. Elimina el choque. Queda una sola propiedad animandose, la
        opacidad, y la maneja Horizon como en cualquier otro cajon.
     2. El blur era lo caro. Obliga al navegador a guardar una copia
        desenfocada de toda la pagina y a rehacerla en cada cuadro. Ya se
        habia sacado en telefono por esto mismo el 21/10; en escritorio
        tampoco paga.

     El velo oscuro al 46 por ciento separa el cajon del fondo de sobra.
     Si alguna vez se quiere el desenfoque de vuelta, es una linea, pero
     hay que sacarle antes la animacion a Horizon o vuelve el salto. */
  dialog.cart-drawer__dialog::backdrop {
    background: rgba(10, 14, 12, 0.46);
  }

  /* Columna de alto completo, para que el total quede fijo abajo y solo
     scrollee la lista de productos. */
  dialog.cart-drawer__dialog .cart-drawer__inner,
  dialog.cart-drawer__dialog cart-items-component {
    block-size: 100%;
    max-block-size: none;
    min-block-size: 0;
    display: flex;
    flex-direction: column;
  }

  dialog.cart-drawer__dialog .cart-drawer__content {
    flex: 1 1 auto;
    min-block-size: 0;
    overflow: hidden;
  }

  /* ── LA LISTA ES EL UNICO CARRIL QUE SCROLLEA ───────────────────────
     Y scrollea SIEMPRE. El `!important` no es pereza: Horizon le mete
     `overflow: unset` desde una regla con mas peso cuando decide que el
     resumen quedo alto, y esa regla es la que dejaba el pedido cortado en
     los telefonos mas chicos. Se borro de header-actions, y esto es el
     cinturon por si vuelve con una actualizacion del theme.

     `overscroll-behavior: contain` es lo que impide que, al llegar al
     final de la lista, el gesto se le escape a la pagina de atras. Sin
     eso, en iOS el tiron de mas arrastra el documento y el cajon parece
     que se mueve.

     El piso sigue estando por si alguna vez el resumen vuelve a crecer:
     es lo que evita que la lista se colapse a nada.

     ── EL PISO ERA DEMASIADO ALTO (03/11/2026) ─────────────────────
     Rodrigo: a un cliente "se le cortaba debajo". Reproducido con 5
     productos en un telefono de 320x568, midiendo el cajon abierto:

       cajon          548 px de alto
       cabecera       133
       piso de lista  193   (34dvh de 568)
       resumen        231   (a 320 de ancho el total y las cuotas
                             envuelven y el bloque crece)
       suma           557  ->  9 px mas de lo que entra

     Como el contenedor recorta, esos 9 px no se van en blanco: el
     resumen se monta ENCIMA de la lista y parte el ultimo producto al
     medio. De ahi el "se corta".

     El piso baja a min(140px, 22dvh). Sigue impidiendo que la lista se
     colapse (140 px muestran una fila entera), pero ahora cede cuando
     no hay lugar. Con los mismos numeros: 133 + 140 + 231 = 504 contra
     548, y entra con 44 px de aire. En un telefono acostado de 480 px
     el piso pasa a 106 y tambien entra.

     Ojo: es un MINIMO, no una altura. Con flex 1 1 auto la lista se
     sigue estirando a todo lo que sobre en una pantalla grande. */
  dialog.cart-drawer__dialog .cart-drawer__items {
    flex: 1 1 auto;
    min-block-size: min(140px, 22dvh);
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  dialog.cart-drawer__dialog .cart-drawer__summary { flex: 0 0 auto; }

  /* ── AIRE ARRIBA DEL PRIMER PRODUCTO ────────────────────────────────
     La primera fila arrancaba pegada al borde de la cabecera con foto:
     cero pixeles entre una cosa y la otra, asi que el producto se leia
     como parte de la cabecera en vez de como el primero de una lista.

     Va como padding de la lista y no como margen de la fila para que al
     scrollear el contenido pase por debajo de la cabecera sin un corte
     raro, y para no tocar el espaciado ENTRE productos, que ya estaba
     bien.

     08/11/2026, Rodrigo: "quitar espaciado desde la primera card hasta
     el header actions, ahorrar 50% espaciado". Medido, del pie de la
     cabecera al techo de la primera tarjeta habia 23px: 14 de este
     relleno y 9 que trae la tabla. Baja a 3 y quedan 12, que es la
     mitad justa.

     Tres y no cero: con cero la primera tarjeta vuelve a tocar la
     cabecera y se lee como parte de ella, que es el problema que este
     bloque vino a arreglar. Tres alcanza para que se separen y no
     alcanza para que sobre. */
  dialog.cart-drawer__dialog .cart-drawer__items {
    padding-block-start: 3px;
  }

  /* Y aire abajo de la lista, por la misma razon del otro lado. */
  dialog.cart-drawer__dialog .cart-items__wrapper {
    padding-block-end: 2px;
  }

  /* Cabecera con foto, igual que la de las pages y la de coleccion: fondo
     oscuro, la foto atenuada y un velo encima para que el titulo se lea
     siempre, sin importar que foto se ponga. */
  dialog.cart-drawer__dialog .cart-drawer__header {
    /* ── NO SE ENCOGE ───────────────────────────
       Medido el 27/10/2026: la cabecera pedia 88px de alto y el
       navegador le estaba dando 75. En una columna flex, un hijo sin
       `flex` declarado vale `0 1 auto`, o sea que se deja encoger cuando
       falta lugar. Y falta siempre, porque el cajon mide exacto.

       Se notaba como una foto recortada y el titulo un poco apretado
       contra el borde de arriba. Con `0 0 auto` la cabecera se planta en
       su tamanio y el que reparte es el contenido, que para eso
       scrollea. */
    flex: 0 0 auto;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-color: var(--ijc-tinta) !important;
    color: #fff;
    padding: 30px 20px 24px !important;
    border: none !important;
    border-bottom: 1px solid rgba(200, 166, 107, 0.45) !important;
  }

  dialog.cart-drawer__dialog .cart-drawer__header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: url("/cdn/shop/collections/cat-fertilizantes.jpg?v=1792527821&width=900");
    background-size: cover;
    background-position: center 42%;
    opacity: 0.55;
  }

  dialog.cart-drawer__dialog .cart-drawer__header::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      linear-gradient(to right, rgba(15, 21, 18, 0.9) 0%, rgba(15, 21, 18, 0.62) 52%, rgba(15, 21, 18, 0.42) 100%),
      linear-gradient(to top, rgba(15, 21, 18, 0.78) 0%, rgba(15, 21, 18, 0) 70%);
  }

  dialog.cart-drawer__dialog .cart-drawer__heading,
  dialog.cart-drawer__dialog .jq-empty-header__title {
    font-size: 28px !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em;
    color: #fff !important;
  }

  /* El contador al lado del titulo, en dorado. */
  dialog.cart-drawer__dialog .cart-bubble__background { background: var(--ijc-oro); }

  dialog.cart-drawer__dialog .cart-bubble__text,
  dialog.cart-drawer__dialog .cart-bubble__text-count {
    color: var(--ijc-tinta);
    font-weight: 800;
  }

  /* ── LA CRUZ DE CERRAR ────────────────────────────────────────────
     Era chica y se sentia dura de tocar, sobre todo en telefono: queda
     arriba a la derecha, el pulgar llega de costado y si errabas por
     poco no pasaba nada. Ahora es una pastilla cuadrada de 44px, que es
     el minimo de area tactil que recomienda Apple, con fondo de vidrio
     (translucido y desenfocado) para que se despegue de la foto de la
     cabecera sin importar que foto toque.

     El icono adentro tambien crece: antes el dibujo era mas chico que
     el boton y parecia que el area util era solo el trazo. */
  dialog.cart-drawer__dialog .cart-drawer__header .close-button,
  dialog.cart-drawer__dialog .cart-drawer__header button[aria-label] {
    /* Con !important porque el theme le fija ancho, alto y radio por su
       cuenta y le gana a esto: medido, quedaba en 36px y con las esquinas
       en 0. El blur si entraba, que fue lo que me hizo creer que la regla
       entera estaba aplicando. */
    inline-size: 44px !important;
    block-size: 44px !important;
    display: grid;
    place-items: center;
    padding: 0 !important;
    color: #fff;
    border-radius: 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.26);
    background: rgba(255, 255, 255, 0.14);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
    transition: background 200ms ease, border-color 200ms ease, transform 160ms ease-out;
  }

  dialog.cart-drawer__dialog .cart-drawer__header .close-button svg,
  dialog.cart-drawer__dialog .cart-drawer__header button[aria-label] svg {
    inline-size: 19px;
    block-size: 19px;
  }

  dialog.cart-drawer__dialog .cart-drawer__header .close-button:active,
  dialog.cart-drawer__dialog .cart-drawer__header button[aria-label]:active {
    transform: scale(0.93);
    background: rgba(255, 255, 255, 0.22);
  }

  @media (hover: hover) and (pointer: fine) {
    dialog.cart-drawer__dialog .cart-drawer__header .close-button:hover,
    dialog.cart-drawer__dialog .cart-drawer__header button[aria-label]:hover {
      background: rgba(255, 255, 255, 0.16);
      border-color: rgba(200, 166, 107, 0.6);
    }
  }

  /* ── EL CONTENIDO ENTRA ESCALONADO, PERO SOLO AL ABRIR ──────────────
     Son 2 bloques, no mas: pasado eso se siente lento en vez de prolijo.

     El `:not(.dialog-closing)` es nuevo y no es decorativo. Sin el, estas
     animaciones seguian corriendo durante el cierre, encima de la del
     panel, y era parte de lo que se veia tosco: el panel saliendo para un
     lado y el contenido de adentro todavia acomodandose. */
  /* Uno de los dos bloques que entraban escalonados era la barra de envio
     gratis, que se borro el 27/10/2026 porque estaba tapada por CSS desde
     hacia semanas. En su lugar entra la cabecera, que es lo primero que
     se mira, y detras el contenido.

     Los tiempos acompañan a la apertura nueva, que es de 600ms: el
     contenido termina de entrar antes que el panel, nunca despues, o se
     ve como si el carrito siguiera cargando. */
  dialog.cart-drawer__dialog[open]:not(.dialog-closing) .cart-drawer__header,
  dialog.cart-drawer__dialog[open]:not(.dialog-closing) .cart-drawer__content {
    animation: ijc-entra 400ms cubic-bezier(0.32, 0.72, 0, 1) both;
  }

  dialog.cart-drawer__dialog[open]:not(.dialog-closing) .cart-drawer__header { animation-delay: 80ms; }
  dialog.cart-drawer__dialog[open]:not(.dialog-closing) .cart-drawer__content { animation-delay: 150ms; }

  @keyframes ijc-entra {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
  }

  /* En telefono tambien va de alto completo y flotando, con un poco menos de
     aire en los bordes. */
  @media (max-width: 749px) {
    dialog.cart-drawer__dialog {
      inset-block-start: 10px;
      inset-inline: 10px;
      inset-block-end: auto;
      inline-size: auto !important;
      block-size: calc(100dvh - 20px - env(safe-area-inset-bottom, 0px)) !important;
      max-block-size: calc(100dvh - 20px) !important;
      border-radius: 20px !important;
    }

    /* Aca sube en vez de venir del costado: el cajon ocupa casi todo el
       ancho, asi que entrar de lado seria barrer la pantalla entera. Es el
       mismo criterio que se uso en el buscador. */
    dialog.cart-drawer__dialog[open] {
      --start-x: 0px;
      --end-x: 0px;
      --start-y: 92px;
      --end-y: 0px;
    }

    /* En telefono sale hacia ABAJO, por donde entro. Necesita sus propios
       keyframes: los de escritorio corren 44px al costado, y aca el cajon
       ocupa casi todo el ancho, asi que irse de lado se ve raro. */
    @keyframes ij-cajon-sale-movil {
      from {
        translate: 0 0;
        opacity: 1;
      }
      to {
        translate: 0 92px;
        opacity: 0;
      }
    }

    dialog.cart-drawer__dialog[open].dialog-closing {
      animation: ij-cajon-sale-movil 460ms cubic-bezier(0.32, 0.72, 0, 1) forwards;
    }

    /* Aca estaba la regla que le sacaba el desenfoque al velo solo en
       telefono, puesta el 21/10/2026. Ya no hace falta: desde el
       26/10/2026 el velo no lleva desenfoque en ningun tamanio. El por
       que esta arriba, en "EL VELO, SIN DESENFOQUE Y SIN PELEA". */

    /* Ver el porque en indajaus-carrito-extras.liquid. */
    dialog.cart-drawer__dialog .cart-drawer__header {
      padding: 12px 16px 10px !important;
    }

    dialog.cart-drawer__dialog .cart-drawer__heading,
    dialog.cart-drawer__dialog .jq-empty-header__title { font-size: 24px !important; }
  }

  /* Si el sistema pide menos movimiento, no se saca la animacion: se deja
     cortisima. Sacarla del todo dejaria a closeDialog() esperando un
     animationend que nunca llega, y el cajon no cerraria. */
  @media (prefers-reduced-motion: reduce) {
    dialog.cart-drawer__dialog {
      --animation-speed: 1ms;
    }

    dialog.cart-drawer__dialog[open] {
      --start-x: 0px;
      --start-y: 0px;
      --start-opacity: 1;
    }

    /* Cortisima, pero con el nombre nuevo: si queda `move-and-fade` vuelve
       el problema de que no arranca y el cajon no cierra. */
    dialog.cart-drawer__dialog[open].dialog-closing {
      animation: ij-cajon-sale 1ms linear forwards;
    }

    dialog.cart-drawer__dialog[open] .cart-drawer__header,
    dialog.cart-drawer__dialog[open] .cart-drawer__content { animation: none; }
  }

  /* ══════════════════════════════════════════════════════════════════
     LA PAGINA ENTERA SE CORRIA 10px AL ABRIR EL CAJON

     Esta era la causa principal de "parpadea toda la web", y es la que
     se me habia escapado en las mediciones anteriores: yo venia midiendo
     el dialogo, no la pagina.

     Medido en la tienda en vivo el 26/10/2026, mirando
     document.documentElement.clientWidth durante un ciclo completo:

       carrito cerrado  ->  1910
       carrito abierto  ->  1920
       carrito cerrado  ->  1910

     Que pasa. Para bloquear el scroll de atras, dialog.js le pone al
     body `position: fixed`. En ese momento el documento deja de poder
     scrollear y el navegador le saca la barra de scroll, que en este
     equipo mide 10px. Esos 10px se los queda el contenido: TODA la
     pagina se ensancha y se recorre de golpe. Al cerrar, la barra
     vuelve y la pagina se corre otra vez para el otro lado.

     No es un problema del carrito: le pasa igual al buscador, al menu y
     a los filtros, porque todos bloquean el scroll del mismo modo. Por
     eso la regla es global y no esta acotada al cajon.

     `scrollbar-gutter: stable` le reserva el carril de la barra siempre,
     este o no este la barra. El ancho util no cambia nunca, asi que no
     hay nada que se corra. Es una linea y no cuesta nada: ni JS, ni
     medir la barra a mano, ni compensar con padding.

     El costo es que en pantallas sin barra visible (telefonos, y
     escritorios con barras superpuestas) no se nota nada, y en las que
     si la tienen quedan 10px reservados aunque la pagina no scrollee.
     Es exactamente el intercambio que se quiere.

     Para sacarlo: se borra esta regla y vuelve el salto.
     ══════════════════════════════════════════════════════════════════ */
  html {
    scrollbar-gutter: stable;
  }
/* END_SNIPPET:indajaus-carrito-flotante */

/* START_SNIPPET:indajaus-carrito-inteligente (INDEX:210) */
/* ── Boton de completar unidades ──────────────────────────────────────── */
  /* DOS COSAS SOBRE EL CONTENEDOR DE LA LISTA

     1. Se colapsa: declara un alto menor que el de su propia tabla, que
        entonces le sale por abajo. Sin nada debajo no se notaba; con los
        botones ahi, la tabla les caia encima. fit-content lo arregla.

     2. La lista es un flex column, asi que sus hijos se encogen cuando falta
        lugar en vez de dejar que el contenedor scrollee. Al mudar el upsell
        al resumen, el area de productos quedo en 160px y el producto se
        comprimio: desaparecieron el selector de cantidad y el boton de
        completar unidades, sin barra de scroll que avisara. Con flex: none
        cada bloque conserva su alto y la lista scrollea como corresponde. */
  dialog.cart-drawer__dialog .cart-items__wrapper {
    min-block-size: fit-content;
    flex: none;
  }

  dialog.cart-drawer__dialog .ijsc-ofertas { flex: none; }

  /* ── ADENTRO DE LA FILA DE SU PRODUCTO ───────────────────────────────
     Desde el 22/10/2026 el badge no va en un bloque al final de la lista
     sino colgado del hueco de variantes de cada fila, que el theme ya
     dibuja a todo el ancho abajo del nombre y el precio. Queda pegado a
     su producto y no hace falta aclarar de cual habla. */
  /* Compacto a proposito. Adentro de la fila cada pixel de alto es un
     producto menos a la vista, asi que el badge entra en una sola linea:
     cuerpo de 10px, pastilla de 9 y el aviso de clic en 8,5. Medido: de
     38px de alto a 26. */
  /* Aca habia cuatro reglas que achicaban el badge cuando vivia dentro
     del hueco de variantes. El badge ya no vive ahi (ver el JS), asi que
     no aplicaban mas: se sacaron para que nadie las lea como vivas. */

  /* Con una sola unidad, el precio unitario repite el total de la linea
     que ya esta arriba a la derecha. Se esconde y se gana una linea. */
  /* Tambien en la pagina del carrito, no solo en el cajon: ahi el
     unitario repetido se seguia viendo. */
  /* El precio unitario se esconde SIEMPRE en el cajon, no solo con una
     unidad. Con dos o mas aparecia de golpe y la tarjeta crecia un
     renglon justo al apretar el badge: eso es parte de lo que Rodrigo
     vio moverse. El total de la linea ya esta arriba a la derecha. */
  .cart-drawer__dialog .cart-items__unit-price-wrapper,
  tr.ijsc-sin-unitario .cart-items__unit-price-wrapper {
    display: none;
  }

  /* Si por lo que sea el hueco de variantes trae contenido del theme, el
     badge se separa un poco mas para no pegarse al texto de la variante. */
  dialog.cart-drawer__dialog .cart-items__variants-wrapper > *:not(.ijsc-badge) + .ijsc-badge {
    margin-block-start: 4px;
  }

  /* La mitad de alto que la primera version. Ocupaba como una tarjeta y
     competia con el producto; es una sugerencia, no el protagonista. */
  /* 05/11/2026, Rodrigo: "que lo del 5 off llevando 3 o más sea como un
     badge que se resalta más, así se sabe bien qué lleva el cliente".

     El borde punteado y el fondo al 10% lo hacian parecer un placeholder.
     Borde entero, fondo al 18% y la pastilla del porcentaje mas grande:
     ahora pesa lo que vale, que es plata que el cliente se esta dejando
     sobre la mesa. */
  /* ── VIDRIO GRIS Y UN SOLO RENGLON ────────────────────────────────
     06/11/2026, Rodrigo: "hacerlo glass, gris glass, liquid glass", y que
     no pase nunca de un renglon.

     nowrap es lo que garantiza el renglon unico. La que cede es la frase
     del medio (ver .ijsc-badge__txt); el porcentaje, la plata y el aviso
     van con flex: none y no se mueven. */
  /* ── EL BADGE, A TODO EL ANCHO DE LA TARJETA ────────────────────
     grid-column 1 / -1 lo pone en una fila propia de la grilla del
     producto, de borde a borde. Antes compartia columna con el precio
     unitario y le quedaban ~140px: de ahi que solo se vieran numeros.

     Y como ya no es del cajon nomas (se le saco el prefijo del dialog),
     este mismo badge se dibuja igual en la pagina del carrito, donde
     antes salia sin un solo estilo. */
  /* 08/11/2026, Rodrigo: "se sigue pudiendo ahorrar espaciado entre el
     badge de llevá una unidad más y el quantity selector del card del
     cart products, quitar ese espaciado para ganar altura".

     Medido en el cajon: habia 10px entre el pie de la fila de cantidad
     y el techo del badge, y salian de dos lados que se sumaban —8 de
     este margen y 2 del hueco que lo contiene—. Los dos a 0: quedan
     pegados, que ademas es lo correcto de leer, porque el badge habla
     justamente de la cantidad que esta arriba. Separados parecian dos
     cosas; pegados son una sola.

     El alto que se gana no es decorativo: en un cajon de 480px, 10px
     por tarjeta son 40 en cuatro productos, casi un tercio de tarjeta
     mas a la vista. */
  .ijsc-badge {
    grid-column: 1 / -1;
    inline-size: 100%;
    margin-block-start: 0;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    /* 5 y no 7: en el cajon de 420px la frase quedaba 6px corta y se
       cortaba en "y aho...". Tres huecos de 2px menos alcanzan, y no
       hay que sacarle palabras a nadie. */
    gap: 5px;
    /* 06/11/2026, tercera vuelta: "sigue ocupando mucha altura, tiene que
       ocupar muchisimo menos". De 6px de padding a 3 y la letra a 10:
       la fila mide ahora lo que mide una linea de texto y poco mas. */
    padding: 5px 9px;
    border: 1px solid var(--ijv-claro-borde, rgba(255, 255, 255, 0.6));
    border-radius: 10px;
    background: linear-gradient(135deg,
      var(--ijv-claro, rgba(255, 255, 255, 0.72)) 0%,
      rgba(90, 94, 92, 0.16) 50%,
      var(--ijv-claro, rgba(255, 255, 255, 0.72)) 100%);
    backdrop-filter: blur(var(--ijv-blur, 18px)) saturate(var(--ijv-sat, 150%));
    -webkit-backdrop-filter: blur(var(--ijv-blur, 18px)) saturate(var(--ijv-sat, 150%));
    box-shadow: inset 0 1px 0 var(--ijv-claro-luz, rgba(255, 255, 255, 0.85));
    color: #0F1512;
    text-align: start;
    cursor: pointer;
    transition: transform 160ms ease-out, background 200ms ease, border-color 200ms ease;
  }

  /* La frase del medio es la unica que se achica y se recorta. */
  .ijsc-badge__txt {
    flex: 1 1 auto;
    min-inline-size: 0;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .ijsc-badge__plata { font-size: 11.5px; }

  /* ── CUANDO YA SE APLICO ────────────────────────────────────────
     Misma pastilla, mismo alto, mismo lugar: solo cambia lo que dice.
     Antes desaparecia y el bloque de abajo se reacomodaba de golpe, que
     es lo que Rodrigo vio como "se descontrola y se agranda la card".

     Deja de parecer un boton: no se toca mas, no tiene flecha, y el
     verde confirma en vez de invitar. */
  .ijsc-badge.is-listo {
    background: #E8F9EF;
    border-color: rgba(10, 107, 47, 0.25);
    color: #0A6B2F;
    cursor: default;
    pointer-events: none;
  }

  .ijsc-badge.is-listo .ijsc-badge__off {
    background: #0A6B2F;
    color: #FFFFFF;
  }

  .ijsc-badge.is-listo .ijsc-badge__plata { color: #0A6B2F; }

  .ijsc-badge__off i { font-style: normal; }

  /* ── EL CHIP VA CORTO EN EL CAJON, NO SOLO EN TELEFONO ───────────
     06/11/2026. Esto arranco como una regla de telefono y estaba mal
     planteado: el cajon mide 420px SIEMPRE, en el monitor que sea. En
     PC, con el chip largo y el "CLICK ACA" entero, a la frase le
     quedaban 0px de sobra y se cortaba en "y ah...".

     Con el chip en "5%" se liberan 27px y la frase entra con aire, sin
     tener que sacarle las palabras al boton, que es lo que Rodrigo
     pidio trabajar. El porcentaje no se pierde: sigue ahi, al lado de
     "ahorras $186", que es donde se entiende. */
  dialog.cart-drawer__dialog .ijsc-badge__off {
    padding: 1px 5px;
    font-size: 8.5px;
  }

  dialog.cart-drawer__dialog .ijsc-badge__off i { display: none; }

  /* ── EN TELEFONO, LA FRASE ANTES QUE EL CARTELITO ────────────────
     06/11/2026, medido en 375: la tarjeta deja ~276px para la fila y
     "CLICK ACA ›" se come 85. La frase quedaba en "Llevá ...", que es
     exactamente lo que Rodrigo no queria: una cifra sin palabras.

     Ahi el cartelito se queda solo con la flecha. No se pierde la
     señal de que se toca (la pastilla dorada sigue, y entera es un
     boton), y la frase entra completa, que es lo que informa. */
  /* Los selectores van repetidos a proposito: el bloque de estilos de
     este snippet se emite DOS veces en la pagina, asi que una regla de
     media query con la misma especificidad que la base la pierde contra
     la segunda copia. Con la clase repetida gana siempre.

     Medido en 375: la fila da 245px de contenido. off 52 + plata 38 +
     "CLICK ACA" 84 + tres huecos = 195, y a la frase le quedaban 48
     para 115 que mide. Achicando el cartelito a la flecha y el chip del
     porcentaje, la frase se queda con ~123 y entra entera. */
  /* Segunda vuelta del 06/11/2026: con el titulo ya acomodado probe
     con un producto de ahorro mas grande ($186 en vez de $6) y la frase
     volvio a cortarse: la plata pasa de 38px a 54 y se come la
     diferencia. Se aprieta todo lo que no es la frase (huecos, el chip
     del porcentaje, el padding) y la letra baja medio punto. Con eso la
     frase tiene ~12px de sobra aunque el ahorro sea de cuatro cifras. */
  /* ── UN SOLO RENGLON, DE VUELTA ──────────────────────────────────
     06/11/2026, Rodrigo: "ocupa dos lineas, no quiero eso".

     Lo habia partido en dos para que entrara el boton. Ya no hace falta:
     ahora la pastilla se lleva la fila ENTERA de la tarjeta, foto
     incluida (ver la grilla en cart-products-styles), asi que pasa de
     245px utiles a ~319 y las cuatro piezas entran en una linea. */
  @media screen and (max-width: 749px) {
    .ijsc-badge.ijsc-badge {
      flex-wrap: nowrap;
      gap: 4px;
      padding: 5px 8px;
    }

    .ijsc-badge .ijsc-badge__txt { font-size: 10.5px; }

    /* ── EL BOTON, EN SU PROPIO RENGLON ──────────────────────────
       06/11/2026, Rodrigo: "el boton no se logra ver".

       Error mio y feo: para que la frase entrara le habia puesto
       font-size 0 al cartelito dejando solo la flecha del ::after.
       Pero ese ::after tiene line-height 0, asi que entre las dos
       reglas la pastilla medía literalmente 0x0. No era chica: no
       existia.

       Medido en 375px: la fila da 245px utiles, y el chip + la frase +
       la plata + un "CLICK ACA" entero suman 278. No entran.

       Entonces en telefono el badge va a dos renglones: arriba la
       informacion, abajo el boton a todo el ancho. Crece ~25px de alto
       y los vale, porque un boton que no se ve no sirve de nada. En
       computadora sigue en un renglon, que ahi si entra. */
    .ijsc-badge .ijsc-badge__clic {
      flex: none;
      padding: 3px 8px;
      font-size: 9px;
    }

  }

  .ijsc-badge__off,
  .ijsc-badge__plata,
  .ijsc-badge__clic { flex: none; }

  /* Mientras agrega, o si no hay stock, el texto ocupa todo y lo demas
     sobra: "Agregando... $566 click acá" no quiere decir nada. */
  .ijsc-badge[disabled] .ijsc-badge__plata,
  .ijsc-badge[disabled] .ijsc-badge__clic,
  .ijsc-badge.is-sin-stock .ijsc-badge__plata,
  .ijsc-badge.is-sin-stock .ijsc-badge__clic { display: none; }

  @media (hover: hover) and (pointer: fine) {
    .ijsc-badge:hover {
      background: rgba(200, 166, 107, 0.2);
      border-color: #C8A66B;
    }
  }

  .ijsc-badge:active { transform: scale(0.985); }
  .ijsc-badge[disabled] { opacity: 0.6; cursor: default; }

  /* Cuando no hay stock para completar, el boton deja de parecer una oferta. */
  .ijsc-badge.is-sin-stock {
    border-style: solid;
    border-color: rgba(15, 21, 18, 0.14);
    background: rgba(15, 21, 18, 0.04);
  }

  .ijsc-badge.is-sin-stock .ijsc-badge__off { display: none; }

  .ijsc-badge__off {
    flex: none;
    padding: 1px 6px;
    border-radius: 999px;
    background: #C8A66B;
    color: #0F1512;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1.35;
  }

  .ijsc-badge__txt {
    font-size: 11px;
    font-weight: 600;
    line-height: 1.25;
  }

  /* La plata que se ahorra, en el mismo verde que todo lo demas que suma.
     Es lo unico del badge que se lee de lejos. */
  .ijsc-badge__plata {
    font-weight: 900;
    color: #0A7A35;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  dialog.cart-drawer__dialog .cart-items__variants-wrapper .ijsc-badge .ijsc-badge__plata {
    font-size: 10.5px;
  }

  /* Va al final de la misma linea, en dorado y mayuscula, para que se lea
     como la accion y no como parte de la frase. */
  /* ── EL "CLIC ACA", REHECHO 05/11/2026 ────────────────────────────
     Rodrigo: "el botón de clic acá, más laburado".

     Era texto suelto, del mismo tamaño que la letra chica y en un dorado
     apagado: decia "se toca" con la misma voz con la que el resto del
     badge decia cosas que no se tocan. Ahora es una pastilla dorada con
     flecha, que es la forma que ya tiene todo lo que se aprieta en esta
     tienda. Al pasar el mouse por el badge, la flecha se corre: la
     pastilla contesta antes de que la toques. */
  .ijsc-badge__clic {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    border-radius: 999px;
    background: #C8A66B;
    color: #1A1206;
    font-size: 9.5px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: 1px;
  }

  .ijsc-badge__clic::after {
    content: '›';
    font-size: 11px;
    line-height: 0;
    translate: 0 -0.5px;
    transition: translate 180ms cubic-bezier(0.23, 1, 0.32, 1);
  }

  @media (hover: hover) and (pointer: fine) {
    .ijsc-badge:hover .ijsc-badge__clic::after { translate: 2px -0.5px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .ijsc-badge__clic::after { transition: none; }
  }

  /* Solo aparece cuando hay mas de un producto: con uno solo, decir cual es
     sobra, ya se esta viendo justo arriba. */
  .ijsc-badge__prod {
    display: block;
    font-size: 9.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(15, 21, 18, 0.55);
  }

  /* ── Ahorro ───────────────────────────────────────────────────────────── */
  /* ── EL AHORRO, REHECHO 05/11/2026 ────────────────────────────────
     Rodrigo: "que lo que ahorra esté en verde, más remarcado, negrita".

     Era una fila de texto mas, del mismo tamaño que el resto del resumen,
     en un verde apagado (#1F7A4D). Ahora es una caja verde con el numero
     grande: es la unica linea del carrito que son buenas noticias y tiene
     que leerse antes que el total.

     El verde es el mismo que ya usan las cuotas y el badge de envios, no
     uno nuevo. */
  /* Segunda vuelta del 05/11/2026: la caja que le hice a la mañana ocupaba
     demasiado. Rodrigo: "está bueno, pero tiene que ser más chiquito, un
     badge de ahorrás tanto". Es una pastilla que se alinea a la derecha y
     no una franja de lado a lado: en el resumen manda el total. */
  dialog.cart-drawer__dialog .ijsc-ahorro {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin-block-end: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    background: #E8F9EF;
    color: #0A6B2F;
    font-weight: 800;
    inline-size: fit-content;
    margin-inline-start: auto;
  }

  dialog.cart-drawer__dialog .ijsc-ahorro__label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  dialog.cart-drawer__dialog .ijsc-ahorro__valor {
    font-size: 12.5px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
  }

  /* ── Relacionados ─────────────────────────────────────────────────────── */
  /* Desde el 27/10/2026 este bloque es el ultimo renglon de la lista que
     scrollea, asi que necesita separarse del ultimo producto y cerrar con
     aire abajo. La linea de arriba hace de corte entre "tu pedido" y "lo
     que te sugerimos": sin ella parecia un producto mas del carrito. */
  /* 06/11/2026: el carril entero mas corto. Rodrigo: "que ocupe menos
     altura". El aire de arriba y abajo valia 24px por un corte que la
     linea ya hace sola. */
  dialog.cart-drawer__dialog .ijsc-rel {
    margin-block-start: 10px;
    padding-block: 10px 6px;
    border-block-start: 1px solid rgba(15, 21, 18, 0.12);
  }

  /* ── CABECERA DEL CARRIL: TITULO Y FLECHAS ────────────────────────── */
  dialog.cart-drawer__dialog .ijsc-rel__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  dialog.cart-drawer__dialog .ijsc-rel__flechas {
    display: flex;
    gap: 5px;
    flex: none;
  }

  dialog.cart-drawer__dialog .ijsc-rel__flecha {
    inline-size: 26px;
    block-size: 26px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(15, 21, 18, 0.14);
    border-radius: 8px;
    background: #fff;
    color: #0F1512;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    transition: border-color 180ms ease, background 180ms ease, transform 140ms ease-out;
  }

  @media (hover: hover) and (pointer: fine) {
    dialog.cart-drawer__dialog .ijsc-rel__flecha:hover {
      border-color: #C8A66B;
      background: #FDFBF7;
    }
  }

  dialog.cart-drawer__dialog .ijsc-rel__flecha:active { transform: scale(0.94); }

  /* ── PUNTOS ───────────────────────────────────────────────────────── */
  /* Puntos y flechas comparten la fila del titulo. */
  dialog.cart-drawer__dialog .ijsc-rel__nav {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: none;
    margin-block-end: 8px;
  }

  dialog.cart-drawer__dialog .ijsc-rel__puntos {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
  }

  dialog.cart-drawer__dialog .ijsc-rel__punto {
    inline-size: 6px;
    block-size: 6px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(15, 21, 18, 0.18);
    cursor: pointer;
    transition: background 200ms ease, transform 200ms ease;
  }

  dialog.cart-drawer__dialog .ijsc-rel__punto.is-on {
    background: #C8A66B;
    transform: scale(1.35);
  }

  /* Cuando entran todas las sugerencias de una, los controles sobran. */
  dialog.cart-drawer__dialog .ijsc-rel.is-sin-slider .ijsc-rel__flechas,
  dialog.cart-drawer__dialog .ijsc-rel.is-sin-slider .ijsc-rel__puntos {
    display: none;
  }

  /* Mientras se arrastra con el mouse, el cursor y el texto acompanian. */
  dialog.cart-drawer__dialog .ijsc-rel__rail { cursor: grab; }
  dialog.cart-drawer__dialog .ijsc-rel__rail.is-arrastrando {
    cursor: grabbing;
    scroll-snap-type: none;
    user-select: none;
  }

  /* ── EL CARRIL, REHECHO 05/11/2026 ────────────────────────────────
     El titulo tenia 0.16em de espaciado en 11px: a ese tamaño las letras
     se separan tanto que la frase deja de leerse como frase. Baja a 0.1 y
     gana un punto de tamaño. El dorado se queda, que es lo que lo separa
     del pedido de arriba. */
  dialog.cart-drawer__dialog .ijsc-rel__titulo {
    margin: 0 0 10px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #A98A4E;
  }

  /* Carril: con cuatro sugerencias apiladas el boton de pagar se iba abajo
     de todo, que es justo lo que no queremos en el carrito. */
  /* ── DESLIZABLE, Y QUE SE NOTE ───────────────────────────────────────
     Con diez sugerencias el carril tiene que invitar a correrlo. El
     scroll-snap hace que cada arrastre caiga parado en una tarjeta en vez
     de quedar a mitad de camino, y el padding de la derecha deja asomar
     la siguiente, que es la pista de que hay mas. */
  /* ── POR QUE EL SLIDER NO SE MOVIA ──────────────────────────────────
     Medido el 21/10/2026: con nueve sugerencias, el carril media 968px de
     ancho dentro de un cajon de 420. O sea, no scrolleaba: se desbordaba.
     Un contenedor con overflow-x solo scrollea si TIENE un ancho; si crece
     con el contenido, no hay nada que correr.

     Pasa porque el carril es hijo de un flex column, y en flex el tamanio
     minimo por defecto es el del contenido (min-width: auto). Hay que
     bajarlo a cero a lo largo de toda la cadena: el carril y el bloque que
     lo contiene. Es el clasico de flexbox y cuesta verlo, porque la regla
     de overflow esta puesta y parece correcta. */
  dialog.cart-drawer__dialog .ijsc-rel {
    min-inline-size: 0;
    max-inline-size: 100%;
  }

  dialog.cart-drawer__dialog .ijsc-rel__rail {
    display: flex;
    /* OJO: aca NO va scroll-behavior: smooth. Con esa propiedad puesta,
       asignar scrollLeft desde JS tambien pasa por el camino del scroll
       suave, y si el navegador lo tiene desactivado (por "reducir
       movimiento" del sistema) el carril deja de moverse del todo.
       Medido el 21/10/2026: con smooth, cero pixeles. El movimiento suave
       lo hace el JS, que ademas respeta esa preferencia por su cuenta. */
    inline-size: 100%;
    min-inline-size: 0;
    max-inline-size: 100%;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-inline-start: 0;
    padding-inline-end: 24px;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  dialog.cart-drawer__dialog .ijsc-rel__item { scroll-snap-align: start; }

  /* El velo degradado de la derecha se saco: con flechas y puntos ya se
     entiende que la lista sigue, y el velo le comia el precio a la ultima
     tarjeta visible. */
  dialog.cart-drawer__dialog .ijsc-rel {
    position: relative;
  }

  dialog.cart-drawer__dialog .ijsc-rel__rail::-webkit-scrollbar { display: none; }

  /* Mas chicas que antes: este bloque esta en la zona fija del cajon, asi
     que cada pixel que ocupa se lo saca a la lista de productos. */
  dialog.cart-drawer__dialog .ijsc-rel__item {
    flex: 0 0 104px;
    display: flex;
    flex-direction: column;
    /* 09/11/2026: 6 -> 4. Ver el comentario del nombre, mas abajo. */
    gap: 4px;
  }

  dialog.cart-drawer__dialog .ijsc-rel__link {
    display: flex;
    flex-direction: column;
    /* 5 -> 3: entre la foto, el nombre y el precio no hace falta aire,
       los tres se leen como una sola tarjeta. */
    gap: 3px;
    text-decoration: none;
    color: #0F1512;
  }

  /* La foto con marco propio: sin el, los productos de fondo blanco se
     derraman sobre el fondo del cajon y la tarjeta no se ve como tarjeta. */
  dialog.cart-drawer__dialog .ijsc-rel__foto {
    inline-size: 104px;
    block-size: 66px;
    border: 1px solid #F2EBDD;
    border-radius: 12px;
    overflow: hidden;
    background: #FDFBF7;
  }

  dialog.cart-drawer__dialog .ijsc-rel__foto img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
    display: block;
  }

  /* ── EL NOMBRE, COMPLETO ──────────────────────────────────────────
     09/11/2026, Rodrigo: "los titulos achicarlos mas asi se ven
     completos, ahorrar espaciados entre el titulo precio y boton de
     agregar".

     A 11.5px en una tarjeta de 104px entran unas 17 letras por linea, y
     con dos lineas se cortaban casi todos los nombres de esta tienda
     ("Fertilizante BioNatura Floracion 1L" son 35). Bajar la letra sola
     no alcanzaba: daba 19 letras por linea, 38 en dos, justo en el filo.

     Entonces van las dos cosas juntas: letra mas chica Y una tercera
     linea. La tercera linea se paga con el aire que se saco arriba (los
     dos gap) y abajo (el padding del boton), asi que la tarjeta no crece:
     medido, queda ~2px MAS BAJA que antes y muestra 50% mas de nombre.
     Importa porque este carril vive en la zona fija del cajon y cada
     pixel que ocupa se lo saca a la lista de productos. */
  dialog.cart-drawer__dialog .ijsc-rel__nombre {
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: -0.008em;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  dialog.cart-drawer__dialog .ijsc-rel__precio {
    font-size: 12.5px;
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
  }

  /* El boton era blanco con borde gris: parecia un "cancelar", no un
     "agregar". Ahora lleva el dorado de la casa, que es el color con el
     que en esta tienda se compra. */
  /* 06/11/2026, Rodrigo: "que sean glass los botones, en verde". El verde
     es el mismo que todo lo que suma en esta tienda (el ahorro, las
     cuotas, la entrega), asi que el boton de agregar queda del color con
     el que el visitante ya asocia las buenas noticias. */
  dialog.cart-drawer__dialog .ijsc-rel__add {
    inline-size: 100%;
    /* 7px -> 5px de alto: el boton sigue midiendo 26px, que se toca bien,
       y los 4px que suelta van a la tercera linea del nombre. */
    padding: 5px 10px;
    border: 1px solid rgba(18, 194, 91, 0.42);
    border-radius: 999px;
    background: linear-gradient(135deg,
      rgba(232, 249, 239, 0.9) 0%,
      rgba(18, 194, 91, 0.16) 50%,
      rgba(232, 249, 239, 0.9) 100%);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
    color: #0A6B2F;
    font-size: 11.5px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 160ms ease-out, background 200ms ease, border-color 200ms ease;
  }

  @media (hover: hover) and (pointer: fine) {
    dialog.cart-drawer__dialog .ijsc-rel__add:hover {
      background: #0F1512;
      border-color: #0F1512;
      color: #fff;
    }
  }

  dialog.cart-drawer__dialog .ijsc-rel__add:active { transform: scale(0.97); }
  dialog.cart-drawer__dialog .ijsc-rel__add[disabled] { opacity: 0.6; cursor: default; }

  dialog.cart-drawer__dialog .ijsc-rel__add.is-cargando { opacity: 0.75; }

  dialog.cart-drawer__dialog .ijsc-rel__add.is-listo {
    opacity: 1;
    border-color: #1F7A4D;
    background: #1F7A4D;
    color: #fff;
  }

  dialog.cart-drawer__dialog .ijsc-rel__add.is-listo::before {
    content: "";
    display: inline-block;
    inline-size: 9px;
    block-size: 5px;
    margin-inline-end: 6px;
    border-inline-start: 1.8px solid currentColor;
    border-block-end: 1.8px solid currentColor;
    transform: rotate(-45deg) translateY(-1px);
  }

  @media (prefers-reduced-motion: reduce) {
    .ijsc-badge,
    dialog.cart-drawer__dialog .ijsc-rel__add { transition: none; }
  }

  /* ══════════════════════════════════════════════════════════════════
     MENOS ALTO POR PRODUCTO

     Pedido de Rodrigo el 22/10/2026: "el quantity variant achicarlo para
     meter el boton asi acortamos altura en las cards del cart product,
     hay que racionar".

     Medido antes de tocar: los botones de mas y menos eran de 38x38 y la
     celda de cantidad medía 46 de alto, con la fila entera en 102. El
     numero que se ve ocupa 16px: los otros 22 eran area tactil.

     Van a 32. Es menos que los 44 que se recomiendan para el dedo, y es
     a proposito: en un cajon donde cada fila que se gana es un producto
     mas a la vista, 32 sigue siendo comodo y el boton de borrar, que es
     el unico irreversible, se deja en su tamaño.
     ══════════════════════════════════════════════════════════════════ */
  /* Se ajusta POR VARIABLES y no sobreescribiendo medidas. No es un
     detalle de estilo: cart-products-styles.liquid lo deja avisado,

       "Se ajusta redefiniendo las variables del snippet, NO
        sobreescribiendo width, height ni flex-basis. Antes habia aca un
        `height: auto` que le ganaba por especificidad al snippet y
        dejaba los botones con `height:100%` de una altura automatica."

     La primera version de este bloque forzaba inline-size y block-size
     con !important sobre el <button>, que es exactamente lo que ese
     aviso dice que no se haga. El resultado es el que reporto Rodrigo:
     el mas y el menos dejan de responder, porque el recuadro del boton
     queda de 32px pero su contenido sigue midiendo lo que el componente
     calcula, y el area que recibe el clic deja de coincidir con el
     icono que se ve.

     Redefinir las variables mueve al componente entero: alto, boton,
     input e icono quedan coherentes y el clic cae donde tiene que caer.
     El selector es mas especifico que el del theme (0,3,1 contra 0,2,0),
     asi que gana en los dos breakpoints sin !important. */
  dialog.cart-drawer__dialog .cart-items .quantity-selector {
    --qty-height: 32px;
    --qty-button-size: 30px;
    --qty-input-width: 34px;
    --qty-icon-size: 14px;
  }

  /* En movil el theme los agranda a proposito (40/38) por el dedo. Se
     baja menos que en escritorio: 34 en vez de 32. */
  @media screen and (max-width: 749px) {
    dialog.cart-drawer__dialog .cart-items .quantity-selector {
      --qty-height: 34px;
      --qty-button-size: 32px;
      --qty-input-width: 36px;
      --qty-icon-size: 15px;
    }
  }

  dialog.cart-drawer__dialog .cart-items__quantity-controls {
    gap: 4px;
  }


  /* ══════════════════════════════════════════════════════════════════
     QUE EL + Y EL - NO SE MUEVAN MIENTRAS LOS ESTAS USANDO

     Pedido de Rodrigo el 26/10/2026: "en pc y movil en el cart products
     se tiene que poder subir y bajar correctamente, es una web que se
     suelen llevar muchos productos".

     ── QUE PASABA, MEDIDO ────────────────────────────────────────────
     Se hicieron 6 clics reales sobre el + , al ritmo de alguien
     apurado, con el mouse en una posicion fija. Entraron 3. Se
     perdieron 3.

     No era el debounce: con clics sinteticos entran los 6 y el servidor
     queda bien. El problema es que **el boton se corre de abajo del
     cursor**. Registrado durante la rafaga:

         ms 0     ->  boton en (1668, 255)
         ms 2495  ->  boton en (1642, 245)

     Y comparando la fila con 1 unidad contra 4:

                              1 unidad        4 unidades
         columnas del grid    56/220.8/74.7   56/212.8/82.8
         badge                si              no
         alto de la fila      122             137
         posicion Y del +     245             260

     Tres cosas la reacomodan justo al cruzar las 3 unidades, que es
     cuando entra el descuento por volumen:

     1. El precio pasa de una linea a dos: aparece "Precio de oferta" y
        el original tachado. La fila crece 15px de alto.
     2. El badge de "llevá 2 más" desaparece, porque ya llegaste.
     3. El texto del precio se alarga, y como la columna del precio es
        `auto`, CRECE y le roba ancho a la del medio. De ahi el
        corrimiento horizontal.

     En telefono es peor: el area tactil es mas chica y el reacomodo es
     mayor, asi que se pierden mas toques.

     ── EL ARREGLO ────────────────────────────────────────────────────
     Que la fila no cambie de forma. Se le reserva el lugar a las tres
     cosas que aparecen y desaparecen, asi el + y el - quedan clavados
     donde estan pase lo que pase con la cantidad.

     Es CSS puro y no toca la logica: no hay que bloquear clics, ni
     encolarlos, ni pinear nada desde JS. Si el boton no se mueve, el
     clic entra.
     ══════════════════════════════════════════════════════════════════ */

  /* 1. La columna del precio deja de crecer con el texto.
        El theme la declara `minmax(--cart-item-price-width, auto)`: ese
        `auto` es el que la deja ensancharse cuando el precio se hace mas
        largo. Se fija, y si el texto no entra que se acomode adentro. */
  dialog.cart-drawer__dialog .cart-items__table-row,
  dialog.cart-drawer__dialog .cart-items__table-row--full-width-variants {
    grid-template-columns:
      clamp(2.5rem, 15cqi, 7.5rem)
      minmax(0, 1fr)
      var(--cart-item-price-width, 5rem) !important;
  }

  /* ── EL AVISO DE "CON ESTE CODIGO NO SE SUMA" ────────────────────
     08/11/2026. Gris y no verde: esto no es un beneficio que se gana,
     es una condicion. El verde de esta tienda es para lo que suma, y si
     un aviso de que ALGO NO APLICA fuera verde, se leeria al reves.

     Mismo alto que los otros dos carteles (24px) para que la tarjeta no
     cambie de tamanio al poner o sacar el cupon. */
  dialog.cart-drawer__dialog .ijsc-bloqueado {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    block-size: 24px;
    padding-inline: 9px;
    border-radius: 99px;
    background: rgba(42, 36, 28, 0.05);
    border: 1px solid rgba(42, 36, 28, 0.16);
    color: #6E655A;
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    width: fit-content;
  }
  dialog.cart-drawer__dialog .ijsc-bloqueado b { font-weight: 800; color: #2A241C; }
  dialog.cart-drawer__dialog .ijsc-bloqueado__ic { display: grid; place-items: center; flex: none; }

  /* ── EL CARTEL DE "YA LO TENES" ─────────────────────────────────
     08/11/2026. Verde, porque es un DATO —lo que ya conseguiste— y no
     una accion: no hay nada que tocar. Misma reparticion de color que
     en toda la tienda.

     Relleno suave con texto verde oscuro y no verde pleno con blanco:
     #0B7A3B sobre claro mide 5,5 y el blanco sobre #25D366 mide 1,9.

     Mismo alto que el otro badge (24px) para que una fila no cambie de
     tamanio al cruzar el umbral: al apretar el + la tarjeta no salta.

     Y se esconde el texto gris del tema que decia "5% OFF llevando 3 o
     mas" en las lineas que YA tienen el descuento: decir la condicion
     en futuro a quien ya la cumplio es contarle al reves lo que paso. */
  dialog.cart-drawer__dialog .ijsc-aplicado {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    block-size: 24px;
    padding-inline: 9px;
    border-radius: 99px;
    background: rgba(37, 211, 102, 0.12);
    border: 1px solid rgba(37, 211, 102, 0.5);
    color: #0B7A3B;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    width: fit-content;
  }
  dialog.cart-drawer__dialog .ijsc-aplicado b { font-weight: 800; }
  dialog.cart-drawer__dialog .ijsc-aplicado__ic {
    display: grid;
    place-items: center;
    inline-size: 14px;
    block-size: 14px;
    border-radius: 50%;
    background: #25D366;
    color: #FFFFFF;
    flex: none;
  }
  dialog.cart-drawer__dialog .ijsc-aplicado__plata {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
  }

  /* El texto gris del tema, fuera de las filas que ya tienen el cartel.
     Sin esto quedarian los dos diciendo cosas distintas del mismo
     descuento, uno en pasado y el otro en futuro. */
  dialog.cart-drawer__dialog .cart-items__variants-wrapper:has(.ijsc-aplicado) > ul,
  dialog.cart-drawer__dialog .cart-items__variants-wrapper:has(.ijsc-aplicado) > .list-unstyled {
    display: none;
  }

  /* ── MENOS AIRE ENTRE EL BADGE Y EL RESTO ────────────────────────
     08/11/2026, Rodrigo: "achicar el espaciado en la altura entre el
     badge este y la otra info de la card del cart products".

     El aire venia de tres lugares distintos que se sumaban, y por eso
     a ojo parecia mas de lo que cualquiera de los tres explicaba:

       · el theme le pone margen ARRIBA a la fila de cantidad
         (var(--margin-xs)), pensado para cuando no hay badge debajo;
       · el hueco de variantes trae 2px propios;
       · y los hijos de .cart-items__details se separan entre si con
         var(--margin-3xs).

     Se bajan los tres a la vez. El badge NO se achica: lo que se
     achica es la distancia, que es lo que se pidio. Un cartel pegado
     a lo que explica se lee como parte de la misma cosa, que es
     justamente lo que es. */
  dialog.cart-drawer__dialog .cart-items__quantity {
    margin-block-start: 1px !important;
  }
  dialog.cart-drawer__dialog .cart-items__variants-wrapper {
    margin-block-start: 0 !important;
  }
  /* El theme le vuelve a poner 2px desde su propia hoja con mas
     especificidad; esta gana por ser mas larga y llevar !important. */
  dialog.cart-drawer__dialog .cart-items__details .cart-items__variants-wrapper,
  dialog.cart-drawer__dialog td .cart-items__variants-wrapper {
    margin-block-start: 0 !important;
  }
  dialog.cart-drawer__dialog .cart-items__details > * + * {
    margin-block-start: 2px !important;
  }

  /* 2. El hueco del badge queda reservado aunque el badge no este.
        Asi pasar de 2 a 3 unidades no acorta la fila. La medida sale del
        badge compacto: 26px de alto mas los 4 de margen. */
  /* 08/11/2026: medido, el badge usa 20 de los 30 reservados. Con 24
     sigue sin saltar la fila al cambiar cantidades —que es para lo que
     existe esta reserva— y devuelve 6px por tarjeta. */
  dialog.cart-drawer__dialog .cart-items__variants-wrapper {
    min-block-size: 24px;
  }

  /* 3. Y el lugar de la segunda linea de precio, la del descuento.
        Con una sola linea queda un hueco que no se ve, y al aparecer la
        oferta lo ocupa sin empujar nada. */
  dialog.cart-drawer__dialog .cart-items__price-wrapper {
    min-block-size: 42px;
  }

  /* ── EL PRECIO DE ANTES, TACHADO ──────────────────────────────────
     09/11/2026, Rodrigo: "que aparezca el precio tachado de sin
     descuento, el precio viejo".

     El markup sale de cart-products.liquid, que ahora calcula la mayor
     entre el precio de linea sin descuentos y el comparativo del
     producto, y solo la escribe si quedo por encima del precio final.
     Aca va nada mas que como se ve.

     Va ARRIBA del precio final y no al lado: la columna del precio en
     el cajon mide poco mas de 80px y dos numeros de cinco cifras uno
     al lado del otro no entran sin achicar el que importa. En una
     segunda linea el precio final conserva su tamaño, que es el dato
     por el que la persona esta mirando esa columna.

     0.72em y no un tamaño fijo: asi sigue al precio final si algun dia
     cambia. Gris calido, el mismo tachado de las tarjetas de Ofertas,
     para que se lean como la misma cosa en los dos lugares. */
  dialog.cart-drawer__dialog .cart-items__price .ijcp-antes {
    display: block;
    font-size: 0.72em;
    font-weight: 500;
    line-height: 1.15;
    color: #9A948C;
    text-decoration: line-through;
    margin-block-end: 1px;
    white-space: nowrap;
  }

  /* El numero puede quedar mas angosto, pero el bloque de botones no se
     encoge nunca: es lo que garantiza que el + siga en su lugar aunque
     el precio ocupe mas. */
  dialog.cart-drawer__dialog .cart-items__quantity,
  dialog.cart-drawer__dialog .cart-items__quantity-controls {
    flex-shrink: 0;
  }

  /* ══════════════════════════════════════════════════════════════════
     LA FOTO DEL CARRITO: MAS GRANDE Y CON LAS DEMAS DETRAS
     09/11/2026, Rodrigo: "que los multimedia aparezcan un 15% mas grande
     y abajo en las esquinas que aparezcan flechas de multimedia".

     EL 15%: la columna de la foto la define Horizon en
     cart-products-styles.liquid con clamp(2rem, 12cqi, 5.5rem). Los tres
     numeros suben 15%: 2.3rem / 13.8cqi / 6.33rem. Hay que subir los
     tres, no solo el maximo: cqi es el que manda en el ancho real del
     cajon, el maximo casi nunca llega a tocarse.

     EL @container: Horizon pasa la fila a cuatro columnas cuando el
     contenedor supera 720px (es un container query, no un media query,
     asi que mide el cajon y no la pantalla). Hoy el cajon nunca llega a
     720, pero si algun dia llega, esta regla con !important le ganaria a
     la de cuatro columnas y dejaria la fila rota. Encerrandola en el
     tramo angosto, ese caso queda intacto.

     Las filas SIN foto siguen en 0: esa regla vive en cart-summary.liquid
     y tiene mas especificidad que esta, asi que gana igual. */
     OJO CON EL cqi: el cajon se achico un 8% (ver el bloque siguiente), y
     cqi se mide contra el cajon. 12 x 1.15 daria 13.8, pero sobre un
     contenedor 8% mas angosto la foto terminaria apenas 6% mas grande que
     antes. Por eso va 15cqi (12 x 1.15 / 0.92): el resultado en pixeles
     reales es el 15% que se pidio. Los topes en rem son absolutos y suben
     1.15 a secas. */
  @container cart-items (max-width: 719.98px) {
    dialog.cart-drawer__dialog .cart-items__table-row {
      grid-template-columns: clamp(2.3rem, 15cqi, 6.33rem) minmax(0, 1fr) minmax(var(--cart-item-price-width), auto) !important;
    }
    dialog.cart-drawer__dialog .cart-items__table-row--full-width-variants {
      grid-template-columns: clamp(2.88rem, 18.75cqi, 8.63rem) minmax(0, 1fr) auto !important;
    }
  }

  /* ══════════════════════════════════════════════════════════════════
     EL CAJON NO TAPA TODA LA PANTALLA
     09/11/2026, Rodrigo: "que el carrito ocupe un poquito menos de ancho
     asi para mas CRO no ocupa todo el ancho de la pagina y el usuario
     siente que no se fue de la pagina".

     Horizon le pone width:100% en celular. A pantalla completa el carrito
     deja de leerse como un cajon y se lee como otra pagina: el visitante
     pierde el hilo de lo que estaba mirando y le cuesta mas volver. Con
     92% queda una franja de la tienda asomando a la izquierda —unos 30px
     en un telefono de 375— y el velo de atras la oscurece sin taparla.
     Eso solo ya dice "esto se cierra y seguis donde estabas".

     ── CORREGIDO EL MISMO DIA ────────────────────────────────────
     Primero lo hice con `width: 92%`, y quedo al reves de lo pedido.
     Rodrigo: "no te pedi eso, te pedi que este donde estaba pero que
     deje un espacio en la parte izquierda (...) no que me lo muevas a
     la izquierda y me dejes espacio en la derecha".

     Por que pasaba: el cajon se ancla por la derecha
     (`inset-inline-end: 14px` en indajaus-carrito-flotante.liquid, con
     `inset-inline-start: auto`). Con el ancho en 100% el borde izquierdo
     caia fuera de la pantalla y no se veia; al bajarlo a 92% el ancho
     sale de un porcentaje del viewport, que NO es lo mismo que el hueco
     que deja el inset. Medido a 375px: 10px de aire a la izquierda y 20
     a la derecha. Corrido al reves.

     La forma correcta es no tocar el ancho: se atan los DOS bordes y el
     ancho sale solo de la resta. La derecha se queda clavada en los 14px
     de siempre —el cajon no se mueve de donde estaba— y el aire aparece
     entero a la izquierda. Asi no hay porcentaje que interpretar.

     clamp(28,8vw,48): 30px en un telefono de 375 y hasta 48 en los
     grandes, que es donde sobra ancho. */
  @media screen and (max-width: 749px) {
    dialog.cart-drawer__dialog {
      inline-size: auto !important;
      inset-inline-start: clamp(28px, 8vw, 48px) !important;
      inset-inline-end: 14px !important;
    }
  }

  /* La celda pasa a ser el marco de referencia de las flechas. El <a> de
     adentro no sirve para eso: meter botones dentro de un enlace es HTML
     invalido y ademas cada toque navegaria a la ficha. Por eso las
     flechas son hermanas del enlace, no hijas. */
  dialog.cart-drawer__dialog .cart-items__media { position: relative; }

  dialog.cart-drawer__dialog .ijgal {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    display: flex;
    justify-content: space-between;
    padding: 3px;
    pointer-events: none;   /* solo los botones reciben el toque */
  }

  /* Aparecen al pasar el mouse en escritorio y estan siempre a la vista
     donde se toca con el dedo (no hay hover que las revele). La opacidad
     base baja deja ver la foto; al tocarlas se afirman. */
  dialog.cart-drawer__dialog .ijgal__f {
    pointer-events: auto;
    inline-size: 20px;
    block-size: 20px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 999px;
    background: rgba(15, 21, 18, 0.52);
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    color: #fff;
    cursor: pointer;
    opacity: 0.82;
    box-shadow: 0 1px 4px rgba(15, 21, 18, 0.28);
    transition: opacity 180ms ease, transform 140ms ease-out, background 180ms ease;
  }

  dialog.cart-drawer__dialog .ijgal__f svg { inline-size: 11px; block-size: 11px; display: block; }
  dialog.cart-drawer__dialog .ijgal__f:active { transform: scale(0.9); }

  @media (hover: hover) and (pointer: fine) {
    dialog.cart-drawer__dialog .ijgal__f { opacity: 0; }
    dialog.cart-drawer__dialog .cart-items__media:hover .ijgal__f,
    dialog.cart-drawer__dialog .ijgal__f:focus-visible { opacity: 1; }
    dialog.cart-drawer__dialog .ijgal__f:hover { background: rgba(15, 21, 18, 0.78); }
  }

  /* El cambio de foto, sin salto: la que sale se desvanece y la que entra
     aparece. Es transition y no keyframes a proposito, porque alguien
     puede tocar la flecha tres veces seguidas y un keyframe reiniciaria
     desde cero en cada toque. */
  dialog.cart-drawer__dialog .cart-items__media-image {
    transition: opacity 200ms ease;
  }
  dialog.cart-drawer__dialog .cart-items__media-image.ijgal-cambiando { opacity: 0.25; }

  @media (prefers-reduced-motion: reduce) {
    dialog.cart-drawer__dialog .ijgal__f,
    dialog.cart-drawer__dialog .cart-items__media-image { transition: none; }
  }
/* END_SNIPPET:indajaus-carrito-inteligente */

/* START_SNIPPET:indajaus-carrito-vacio (INDEX:211) */
/* ── EL CONTENEDOR QUE HEREDAMOS ─────────────────────────────────
     .jq-empty-content venia con display:flex, align-items:center,
     justify-content:center y overflow:hidden, todo !important: estaba
     hecho para un bloque chico de 280px centrado en el cajon.

     Con el contenido nuevo eso rompia dos cosas: el carril horizontal
     de productos estiraba la caja a 1054px (un hijo de flex se mide por
     su contenido) y se salia del cajon por la izquierda, y lo que no
     entraba a lo alto quedaba recortado sin poder scrollear.

     Vuelve a ser un bloque normal que scrollea. */
  dialog.cart-drawer__dialog .jq-empty-content {
    display: block !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    overflow-y: auto !important;
    padding: 0 !important;
  }

  .ijcv {
    inline-size: 100%;
    box-sizing: border-box;
    padding: 18px 20px 28px;
    color: #0F1512;
  }

  .ijcv__titulo {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.01em;
  }

  .ijcv__sub {
    margin: 3px 0 0;
    font-size: 13px;
    color: #6B6560;
  }

  /* El rotulo de cada bloque: chico, dorado y en mayusculas, que es como
     esta tienda separa secciones en todos lados. */
  .ijcv__rotulo {
    margin: 22px 0 10px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #B8985A;
  }

  .ijcv__fila-rotulo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
  }

  .ijcv__vertodo {
    flex: none;
    font-size: 11px;
    font-weight: 700;
    color: #6B6560;
    text-decoration: none;
  }

  /* ── CATEGORIAS ─────────────────────────────────────────────────── */
  .ijcv__cats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .ijcv__cat {
    display: flex;
    align-items: center;
    gap: 9px;
    min-inline-size: 0;
    padding: 7px 10px 7px 7px;
    border-radius: 10px;
    background: #F7F7F8;
    color: inherit;
    text-decoration: none;
    transition: background 160ms ease-out, transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
  }

  @media (hover: hover) and (pointer: fine) {
    .ijcv__cat:hover { background: #EFEFF1; }
  }

  .ijcv__cat:active { transform: scale(0.97); }

  .ijcv__cat-foto {
    inline-size: 34px;
    block-size: 34px;
    flex: none;
    overflow: hidden;
    border-radius: 8px;
    background: #FFFFFF;
  }

  .ijcv__cat-foto img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
  }

  /* Dos renglones, no uno. Con uno solo quedaba "Insumos para ..." y
     "Fertilizantes y ...": la mitad de las categorias de esta tienda
     tienen nombre largo y recortadas no se entienden. Dos renglones
     entran enteras y la tarjeta crece 8px. */
  .ijcv__cat-txt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    min-inline-size: 0;
    overflow: hidden;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
  }

  /* ── PRODUCTOS ──────────────────────────────────────────────────── */
  /* En carril horizontal y no en grilla: en un cajon de 420px una grilla
     de dos obliga a hacer scroll vertical para ver cuatro productos, y el
     scroll vertical ya lo esta usando la pagina entera. */
  .ijcv__prods {
    display: flex;
    gap: 10px;
    min-inline-size: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: -20px;
    padding-inline: 20px;
    padding-block-end: 4px;
  }

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

  .ijcv__prod {
    inline-size: 118px;
    flex: none;
    scroll-snap-align: start;
    color: inherit;
    text-decoration: none;
  }

  .ijcv__prod-foto {
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 10px;
    background: #F7F7F8;
  }

  .ijcv__prod-foto img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
    display: block;
  }

  /* Dos renglones como mucho. Los nombres de esta tienda traen medidas y
     potencias entre parentesis y se van a cinco lineas si los dejas. */
  .ijcv__prod-nom {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-block-start: 6px;
    font-size: 11px;
    line-height: 1.3;
    color: #3A3A3A;
  }

  .ijcv__prod-precio {
    display: block;
    margin-block-start: 2px;
    font-size: 12.5px;
    font-weight: 800;
  }

  /* ── SUCURSALES ─────────────────────────────────────────────────── */
  .ijcv__sucs {
    display: grid;
    gap: 8px;
  }

  .ijcv__suc {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #F7F7F8;
    color: inherit;
    text-decoration: none;
    transition: background 160ms ease-out, transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
  }

  @media (hover: hover) and (pointer: fine) {
    .ijcv__suc:hover { background: #EFEFF1; }
  }

  .ijcv__suc:active { transform: scale(0.985); }

  .ijcv__suc-pin {
    inline-size: 16px;
    block-size: 16px;
    flex: none;
    color: #B8985A;
  }

  .ijcv__suc-pin svg { inline-size: 100%; block-size: 100%; display: block; }

  .ijcv__suc-txt { min-inline-size: 0; }

  .ijcv__suc-txt b {
    display: block;
    font-size: 12.5px;
    font-weight: 800;
    line-height: 1.2;
  }

  /* La direccion puede ir en dos renglones. En telefono, con el "como
     llegar" al lado, "Av. Centenario 3141, Montevideo" se cortaba. Una
     direccion a medias no sirve para nada. */
  .ijcv__suc-txt small {
    display: block;
    font-size: 11px;
    line-height: 1.3;
    color: #6B6560;
  }

  .ijcv__suc-ir {
    flex: none;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #B8985A;
    white-space: nowrap;
  }

  @media (prefers-reduced-motion: reduce) {
    .ijcv__cat, .ijcv__suc { transition: none; }
    .ijcv__cat:active, .ijcv__suc:active { transform: none; }
  }
/* END_SNIPPET:indajaus-carrito-vacio */

/* START_SNIPPET:indajaus-categorias-css (INDEX:212) */
.cdx {
    --cdx-ease: cubic-bezier(0.23, 1, 0.32, 1);
    --cdx-oro: #C8A66B;
    position: relative;
    background: var(--cdx-bg, #fff);
    padding-block: var(--cdx-pt, 80px) var(--cdx-pb, 88px);
  }

  .cdx__inner {
    max-width: 1360px;
    margin: 0 auto;
    padding-inline: 40px;
  }

  .cdx__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-block-end: 28px;
  }

  .cdx__title {
    margin: 0;
    font-size: clamp(22px, 2.6vw, 32px);
    line-height: 1.1;
    letter-spacing: -0.01em;
    font-weight: 700;
    color: #0F1512;
  }

  .cdx__title span {
    display: block;
    inline-size: 34px;
    block-size: 3px;
    margin-block-start: 12px;
    border-radius: 2px;
    background: var(--cdx-oro);
  }

  .cdx__nav { display: flex; gap: 8px; flex: none; }

  .cdx__arrow {
    inline-size: 42px;
    block-size: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(15, 21, 18, 0.14);
    border-radius: 13px;
    background: #fff;
    color: #0F1512;
    cursor: pointer;
    transition: transform 160ms ease-out, background 200ms ease, border-color 200ms ease, color 200ms ease, opacity 200ms ease;
  }

  .cdx__arrow svg { inline-size: 19px; block-size: 19px; }

  /* Cuando el carril llega al tope la flecha se apaga pero no desaparece: si
     se va, los botones saltan de lugar. */
  .cdx__arrow[disabled] {
    opacity: 0.32;
    cursor: default;
  }

  @media (hover: hover) and (pointer: fine) {
    .cdx__arrow:not([disabled]):hover {
      background: #0F1512;
      border-color: #0F1512;
      color: #fff;
    }
  }

  .cdx__arrow:not([disabled]):active { transform: scale(0.94); }

  .cdx__arrow:focus-visible {
    outline: 2px solid var(--cdx-oro);
    outline-offset: 3px;
  }

  /* Carril con snap. El padding lateral negativo deja que las cards lleguen
     al borde de la pantalla en mobile sin romper el ancho del contenedor. */
  .cdx__rail {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-block-end: 4px;
  }

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

  .cdx__card {
    position: relative;
    flex: 0 0 clamp(186px, 17vw, 238px);
    aspect-ratio: 3 / 4;
    border-radius: 20px;
    overflow: hidden;
    scroll-snap-align: start;
    text-decoration: none;
    color: #fff;
    background: #0F1512;
    transition: transform 320ms var(--cdx-ease), box-shadow 320ms var(--cdx-ease);
  }

  .cdx__img {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
    transition: transform 640ms var(--cdx-ease);
  }

  /* Dos capas: una general para que el blanco de las fotos no coma el texto,
     y otra mas fuerte abajo donde va la etiqueta. */
  .cdx__shade {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(to top, rgba(10, 14, 12, 0.88) 0%, rgba(10, 14, 12, 0.34) 38%, rgba(10, 14, 12, 0.04) 68%);
    pointer-events: none;
  }

  .cdx__body {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    padding: 16px 16px 18px;
    z-index: 2;
  }

  .cdx__label {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.24;
    font-weight: 700;
    letter-spacing: -0.005em;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
  }

  .cdx__count {
    display: block;
    margin-block-start: 5px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.66);
  }

  /* Filete dorado que barre de izquierda a derecha. Va con clip-path para no
     tocar el layout. */
  .cdx__card::after {
    content: "";
    position: absolute;
    inset-inline: 16px;
    inset-block-end: 12px;
    block-size: 2px;
    border-radius: 2px;
    background: var(--cdx-oro);
    clip-path: inset(0 100% 0 0);
    transition: clip-path 420ms var(--cdx-ease);
    z-index: 3;
  }

  @media (hover: hover) and (pointer: fine) {
    .cdx__card:hover {
      transform: translateY(-4px);
      box-shadow: 0 16px 34px rgba(15, 21, 18, 0.22);
    }
    .cdx__card:hover .cdx__img { transform: scale(1.07); }
    .cdx__card:hover::after { clip-path: inset(0 0 0 0); }
  }

  .cdx__card:active { transform: scale(0.985); }

  .cdx__card:focus-visible {
    outline: 2px solid var(--cdx-oro);
    outline-offset: 3px;
  }

  .cdx__icono {
    position: absolute;
    inset-block-start: 12px;
    inset-inline-end: 12px;
    z-index: 2;
    inline-size: 34px;
    block-size: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: rgba(12, 16, 14, 0.36);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .cdx__icono svg { inline-size: 17px; block-size: 17px; color: #fff; }

  @media (max-width: 1099px) {
    .cdx__card { flex-basis: clamp(170px, 26vw, 210px); }
  }

  @media (max-width: 749px) {
    .cdx { padding-block: 48px 52px; }
    .cdx__inner { padding-inline: 20px; }
    .cdx__head { align-items: center; margin-block-end: 20px; }
    .cdx__nav { display: none; }
    .cdx__rail {
      gap: 12px;
      margin-inline: -20px;
      padding-inline: 20px;
    }
    .cdx__card { flex: 0 0 46%; border-radius: 16px; }
    .cdx__body { padding: 12px 12px 14px; }
    .cdx__label { font-size: 14px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .cdx__rail { scroll-behavior: auto; }
    .cdx__card,
    .cdx__img,
    .cdx__arrow { transition: none; }
    .cdx__card::after { transition: none; }
  }
/* END_SNIPPET:indajaus-categorias-css */

/* START_SNIPPET:indajaus-confianza (INDEX:213) */
/* ══ LA TIRA DE CONFIANZA DE LA FICHA ══════════════════════════════ */
  .ijcf {
    --ijcf-alto: 46px;
    --ijcf-ease: cubic-bezier(0.23, 1, 0.32, 1);

    position: relative;
    width: 100%;
    box-sizing: border-box;
    margin: 0;

    /* La piel del vidrio, sin el desenfoque. Ver el comentario de arriba. */
    border: 1px solid var(--ijv-claro-borde, rgba(255, 255, 255, 0.6));
    border-radius: 14px;
    background:
      linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(250,245,234,0.78) 48%, rgba(255,255,255,0.95) 100%),
      linear-gradient(0deg, rgba(200,166,107,0.10), rgba(200,166,107,0.10));
    box-shadow:
      0 1px 2px rgba(20, 16, 8, 0.05),
      0 8px 20px -10px rgba(20, 16, 8, 0.28),
      inset 0 1px 0 var(--ijv-claro-luz, rgba(255, 255, 255, 0.85));
  }

  /* El alto lo manda la pista y no el mensaje: si no, la ficha entera
     salta cada vez que cambia el texto. */
  .ijcf__pista {
    position: relative;
    height: var(--ijcf-alto);
    overflow: hidden;
  }

  .ijcf__slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 0 13px;

    /* Nunca desde scale(0): nada en el mundo real aparece de la nada.
       Entra desde abajo, un cuarto de su alto, y con el borde de la
       opacidad ya puesto. */
    opacity: 0;
    transform: translateY(11px);
    pointer-events: none;
    transition:
      opacity 420ms var(--ijcf-ease),
      transform 420ms var(--ijcf-ease);
  }

  .ijcf__slide.is-activo {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  /* El que se va baja, no sube: los dos mensajes viajan en la misma
     direccion y se lee como una cinta, no como un parpadeo. */
  .ijcf__slide.is-saliendo {
    opacity: 0;
    transform: translateY(-11px);
  }

  .ijcf__txt {
    margin: 0;
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    line-height: 1.35;
    /* 500 y no 400: sobre un fondo que no es blanco puro el texto
       liviano se diluye. Misma regla que adentro de los paneles. */
    font-weight: 500;
    color: #1A1A1A;
  }
  .ijcf__txt strong {
    font-weight: 800;
    color: #0F1512;
  }

  /* ── Los avatares ── */
  .ijcf__avs {
    position: relative;
    display: block;
    flex-shrink: 0;
    height: 28px;
    width: calc(28px * 4 - 8px * 3);
    overflow: hidden;
  }
  .ijcf__av {
    position: absolute;
    top: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.3px;
    box-shadow: 0 1px 3px rgba(20, 16, 8, 0.18);
  }

  /* ── El logo ── */
  .ijcf__logo {
    flex-shrink: 0;
    width: 36px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .ijcf__logo img {
    display: block;
    width: auto;
    height: 22px;
  }

  /* ── Celular ── */
  @media screen and (max-width: 480px) {
    .ijcf { --ijcf-alto: 44px; }
    .ijcf__slide { gap: 9px; padding: 0 11px; }
    .ijcf__txt { font-size: 12px; }
  }

  /* Quien pidio menos movimiento no ve nada moverse: los mensajes se
     cruzan por opacidad y los avatares se quedan quietos. */
  @media (prefers-reduced-motion: reduce) {
    .ijcf__slide {
      transform: none;
      transition: opacity 300ms ease;
    }
    .ijcf__slide.is-saliendo { transform: none; }
  }
/* END_SNIPPET:indajaus-confianza */

/* START_SNIPPET:indajaus-ficha-cta (INDEX:215) */
/* ── EL BOTON DE AGREGAR ──────────────────────────────────────────── */
  .buy-buttons-block .add-to-cart-icon { display: none !important; }

  .buy-buttons-block .product-form-buttons .button {
    font-size: 16px !important;
    font-weight: 800 !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;
  }

  @media (max-width: 480px) {
    .buy-buttons-block .product-form-buttons .button { font-size: 15.5px !important; }
  }

  /* ── LA PASTILLA DE ENTREGA ───────────────────────────────────────── */
  /* Decorativa: nunca tiene que comerse un toque destinado al boton. */
  .ijfe {
    pointer-events: none;
    --ijfe-alto: 26px;
    block-size: var(--ijfe-alto);
    margin: 0 2px 6px;
    overflow: hidden;
    border-radius: 999px;
    background: #E8F9EF;
    opacity: 0;
    translate: 0 10px;
  }

  .ijfe[hidden] { display: none; }

  @media (prefers-reduced-motion: no-preference) {
    .ijfe {
      transition: opacity 320ms cubic-bezier(0.23, 1, 0.32, 1),
                  translate 420ms cubic-bezier(0.23, 1, 0.32, 1);
    }
  }

  .ijfe.is-visible { opacity: 1; translate: 0 0; }

  .ijfe__riel { display: block; translate: 0 0; }

  @media (prefers-reduced-motion: no-preference) {
    .ijfe__riel { transition: translate 520ms cubic-bezier(0.23, 1, 0.32, 1); }
  }

  .ijfe__riel[data-ijfe-en='1'] { translate: 0 calc(var(--ijfe-alto) * -1); }

  .ijfe__msj {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    block-size: var(--ijfe-alto);
    padding: 0 12px;
    font-size: 11.5px;
    font-weight: 800;
    color: #0A6B2F;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
/* END_SNIPPET:indajaus-ficha-cta */

/* START_SNIPPET:indajaus-filtros-css (INDEX:216) */
/* ── LA BARRA DE FILTROS ES PARTE DE LA CABECERA ──────────────────────
     Antes era una tarjeta blanca, con borde y esquinas redondeadas, metida
     justo abajo del bloque oscuro del titulo, y adentro un boton negro.
     Quedaban tres bloques distintos pegados y el boton negro sobre blanco se
     leia como un error, no como un control.

     Ahora la barra continua el bloque oscuro: mismo fondo, sin margen ni
     borde, pegada arriba. El titulo, las pastillas de categorias y los
     filtros se leen como una sola pieza, y los controles pasan a ser
     translucidos sobre oscuro en vez de negro sobre blanco.

     El margen va en 0 a proposito: el contenedor de arriba
     (.collection-wrapper) ya ocupa todo el ancho, asi que al sacarle el
     margen lateral la barra llega sola de borde a borde y empalma con la
     cabecera sin trucos de ancho. */
  /* OJO: .facets-toggle y .facets-block-wrapper son HERMANOS, no uno adentro
     del otro. Los dos cuelgan de .collection-wrapper. Lo probe al reves,
     poniendo el fondo solo en el de afuera, y quedo una franja oscura de
     28px y el boton de filtro sobre blanco: el wrapper no contiene al
     toggle. Por eso los dos llevan fondo. */
  /* ══════════════════════════════════════════════════════════════════
     LA BARRA VA DE BORDE A BORDE

     El bloque oscuro del titulo es una seccion, asi que ocupa todo el
     ancho. La barra de filtros, en cambio, vive dentro de
     .collection-wrapper, que esta metido en el margen de pagina: 40px a
     cada lado en una pantalla chica y mucho mas en una grande. Resultado:
     un rectangulo oscuro flotando debajo de otro mas ancho, con dos
     escalones blancos a los costados. Se veia roto, y lo estaba.

     COMO SE SACA, Y POR QUE ASI
     No se puede ensanchar el elemento con 100vw: vw incluye la barra de
     scroll, asi que sobra una decena de pixeles y aparece scroll
     horizontal. Tampoco sirve estirar un ::before con inset negativo,
     porque eso SI cuenta como desborde y termina en el mismo scroll.

     La salida es una sombra: un box-shadow con spread enorme pinta hacia
     afuera sin ocupar lugar y sin generar desborde, nunca. El clip-path
     la recorta arriba y abajo para que no tiña media pagina, y la deja
     correr a los costados.

     Va sobre un ::before y no sobre el elemento porque el clip-path
     aplicado al elemento tambien le recortaria los desplegables de los
     filtros, que se abren por fuera de la barra. Un ::before no tiene
     hijos, asi que recortarlo no rompe nada. Es el mismo error que ya
     cometi una vez con overflow: hidden.
     ══════════════════════════════════════════════════════════════════ */
  /* La barra arrancaba 18px abajo del bloque oscuro, asi que entre una
     cosa y la otra quedaba una franja blanca finita. Con el margen en
     cero las dos quedan pegadas y se leen como un solo bloque. */
  .collection-wrapper > .facets-toggle:first-child,
  .collection-wrapper > .facets-block-wrapper:first-child {
    margin-block-start: 0 !important;
  }

  .facets-toggle,
  .facets-block-wrapper {
    position: relative !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
  }

  .facets-toggle::before,
  .facets-block-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #0F1512;
    box-shadow: 0 0 0 100vmax #0F1512;
    clip-path: inset(0 -100vmax);
    z-index: 0;
    pointer-events: none;
  }

  /* El contenido por encima de la sombra. */
  .facets-toggle > *,
  .facets-block-wrapper > * {
    position: relative;
    z-index: 1;
  }

  /* ── MENOS AIRE ───────────────────────────────────────────────────
     La barra traia 16 arriba y 22 abajo, casi un tercio de su alto en
     espacio muerto. Con los controles en pastilla no hace falta: 10 y 12
     alcanzan para que respiren y la barra deja de empujar la grilla de
     productos hacia abajo. */
  .facets-toggle { padding: 10px 20px 12px !important; }
  .facets-block-wrapper { padding: 10px 0 12px !important; }

  /* ══════════════════════════════════════════════════════════════════
     EL BOTON DE FILTRO TIENE QUE PEDIR QUE LO TOQUEN

     Pedido de Rodrigo: "arreglame el boton de filtros, quitale ese icono
     o no se, pero dejamelo mejor, que den ganas de tocar el filtrado".

     Medido antes de tocar, en 375 de ancho: 102x44, fondo blanco al CINCO
     por ciento sobre una franja oscura, borde al once, texto al noventa y
     dos. O sea: casi transparente. No se leia como un boton sino como un
     rotulo, y ocupaba 102 de 375 pixeles con 273 de vacio al lado.

     Lo que cambia y por que:

     - Fondo blanco solido en vez de translucido. Es el unico elemento
       claro de esa franja, asi que se lee como LA accion. El contraste
       pasa de casi nada a maximo.
     - El embudo se queda, pero en dorado. El icono no era el problema:
       el problema era que no se veia. En dorado ademas ata el control a
       la marca sin que el boton entero grite.
     - En telefono ocupa todo el ancho util de la franja. Es la unica
       accion de esa barra y el pulgar no tiene que apuntar.
     - 48px de alto, que es la medida comoda para el dedo, y mayuscula con
       aire entre letras, igual que el boton de pagar del carrito.
     - Sombra suave para despegarlo del fondo oscuro.

     Se mantiene el scale(0.97) al apretar, que ya estaba: es lo que hace
     que el boton conteste.
     ══════════════════════════════════════════════════════════════════ */
  .facets-toggle__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 14px 24px;
    border: none;
    border-radius: 999px;
    background: #FFFFFF;
    color: #0F1512;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    min-inline-size: 150px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.26);
    transition: transform 160ms ease-out, background 200ms ease, box-shadow 200ms ease;
  }

  .facets-toggle__button svg {
    color: #C8A66B;
    inline-size: 17px;
    block-size: 17px;
  }

  @media (hover: hover) and (pointer: fine) {
    .facets-toggle__button:hover {
      background: #F6F3EC;
      box-shadow: 0 8px 22px rgba(0, 0, 0, 0.32);
      transform: translateY(-1px);
    }
  }

  .facets-toggle__button:active { transform: scale(0.97); }

  .facets-toggle__button:focus-visible {
    outline: 2px solid #C8A66B;
    outline-offset: 3px;
  }

  /* Los botones de cambiar la vista de la grilla. Son labels con un radio
     adentro, no botones, y el color lo lleva el svg: sin esto quedaban
     negros sobre el fondo negro y no se veian. El activo va en blanco pleno
     y el otro apagado, que es como se nota cual esta puesto. */
  .facets-controls-wrapper .column-options__option,
  .facets-controls-wrapper .column-options__option svg {
    color: rgba(255, 255, 255, 0.5) !important;
    transition: color 200ms ease;
  }

  .facets-controls-wrapper .column-options__option:has(:checked),
  .facets-controls-wrapper .column-options__option:has(:checked) svg {
    color: #fff !important;
  }

  @media (hover: hover) and (pointer: fine) {
    .facets-controls-wrapper .column-options__option:hover,
    .facets-controls-wrapper .column-options__option:hover svg {
      color: rgba(255, 255, 255, 0.85);
    }
  }

  .facets-controls-wrapper .column-options__option-input:focus-visible + * {
    outline: 2px solid #C8A66B;
    outline-offset: 3px;
    border-radius: 6px;
  }

  /* En escritorio las pastillas se alinean con el titulo de la cabecera, que
     arranca a 40px del borde.

     OJO CON ESTA REGLA: `.facets-block-wrapper--horizontal` son dos clases,
     asi que le gana por especificidad a `.facets-block-wrapper` de mas
     arriba, y las dos son !important. Si se cambia el alto de la barra hay
     que tocar ACA, no alla. Perdi un rato buscando por que no se aplicaba
     el padding nuevo. */
  @media (min-width: 750px) {
    /* Segunda pasada: la mitad otra vez. Con los controles ya compactos,
       5 y 6 alcanzan. Medido antes: 90px de alto de barra; con esto baja
       a cerca de 60. */
    .facets-toggle { padding: 8px 40px 9px !important; }
    .facets-block-wrapper--horizontal { padding: 8px 40px 9px !important; }
  }

  /* ── LOS BOTONES DE CAMBIAR LA VISTA SE SACAN ──────────────────────
     Son los que cambian la grilla entre uno y cuatro productos por fila.
     Pedido de Rodrigo el 21/10/2026: afuera en escritorio y en telefono.
     Nadie los usa y le estaban comiendo alto a la barra.

     Se esconden en vez de borrarse del markup porque el markup lo arma
     Horizon en archivos de la seccion, y esconderlos es reversible en una
     linea si algun dia se los quiere de vuelta. */
  /* Globales a proposito: hay copias de estos botones en el bloque
     horizontal y en el drawer, y antes se me escapaban dos. */
  .column-options,
  .column-options__option,
  column-options-component {
    display: none !important;
  }

  /* ── DE DONDE SALIA EL ALTO DE LA BARRA ────────────────────────────
     Medido: la barra daba 79px con solo 11 de padding propio. Los otros
     68 venian de dos lados que no habia mirado: `.facets--horizontal`
     tiene 12px arriba y abajo por su cuenta, y cada pastilla declara
     min-height 44px. Bajando las dos cosas la barra queda cerca de 47,
     que es la mitad de los 90 originales. 36px de pastilla sigue siendo
     comodo para el dedo porque el area tactil real incluye el padding de
     la barra. */
  /* ── OJO: ACA SE CORTARON LAS PASTILLAS ────────────────────────────
     Primer intento: padding-block 0 en el bloque y min-height 36 en la
     pastilla. Error mio. El min-height no achica nada si el contenido
     pide mas alto, asi que las pastillas siguieron midiendo 44 y, sin
     padding que las contuviera, se salieron por abajo de la banda
     oscura. Como debajo arranca el blanco de la grilla, se veian
     cortadas al medio.

     La forma correcta de bajar una pastilla es bajarle el padding y la
     letra, que es lo que define su alto real, y dejarle al bloque el
     aire justo para contenerla. 30 de pastilla mas 8 arriba y 9 abajo
     dan una barra de 47, que es casi la mitad de los 90 del principio y
     sin nada cortado. */
  .facets.facets--horizontal {
    padding-block: 0 !important;
  }

  .facets--horizontal .facets__summary {
    min-height: 0 !important;
    block-size: auto !important;
    padding-block: 5px !important;
    padding-inline: 13px !important;
    font-size: 12.5px !important;
    line-height: 1.5 !important;
  }

  /* Los otros controles de la fila (la cuenta de articulos y Ordenar)
     tienen que bajar igual, o la barra la define el mas alto. */
  .facets--horizontal .facets__summary,
  .facets-block-wrapper--horizontal .facets__item,
  .facets-block-wrapper--horizontal .facets__panel {
    min-block-size: 0 !important;
  }

  /* ── "ORDENAR" NO MOSTRABA NADA ────────────────────────────────────
     En escritorio se abria el panel blanco y adentro no habia texto, solo
     el tilde del elegido. Medido el 21/10/2026: hay dos
     sorting-filter-component, el de escritorio y el de telefono, y el de
     escritorio se quedaba con la clase `hidden` puesta aunque su panel ya
     estuviera abierto, asi que su contenido seguia en display:none.

     El de telefono se reconoce porque trae `desktop:hidden`, asi que se lo
     deja afuera con :not() para no mostrarlo donde no va. */
  @media (min-width: 750px) {
    /* La copia de telefono se reconoce por la clase `desktop:hidden`. Se
       la deja afuera con un selector de atributo y no con `.desktop\:hidden`:
       esa clase lleva dos puntos adentro y hay que escaparla con barra, y
       si el empaquetador de Shopify toca esa barra el selector queda
       invalido y se cae la regla entera, sin avisar. Con [class*=] el
       texto va entre comillas y no hay nada que escapar. */
    /* Se apunta directo a la copia de escritorio, que es la que queda con
       la clase `hidden` sola. La de telefono lleva `desktop:hidden`, que
       es otra clase, asi que no entra por este selector y no hace falta
       ningun :not() ni escapar los dos puntos. Menos piezas, menos formas
       de que se rompa. */
    .facets__panel[open] .sorting-filter__container.hidden,
    .facets__item[open] .sorting-filter__container.hidden {
      display: block !important;
    }
  }

  /* ══════════════════════════════════════════════════════════════════
     "ORDENAR" MOSTRABA UN PANEL VACIO

     Estuve buscando esto en el lugar equivocado. No era que el panel no
     se abriera ni que el contenido estuviera escondido: el panel abre,
     mide 292px de alto y adentro hay seis opciones, todas visibles.

     Era el color. Medido el 21/10/2026: el texto de cada opcion salia en
     `rgba(255, 255, 255, 0.7)` sobre un panel `rgb(255, 255, 255)`.
     Blanco sobre blanco. Por eso en pantalla solo se veia el tilde de la
     opcion elegida, que es un svg con color propio, flotando en un
     rectangulo vacio.

     Y el blanco lo puse yo: el panel se abre DENTRO de la barra oscura,
     que tiene el texto en blanco, y el color se hereda. Es el costo de
     pintar de blanco un contenedor entero en vez de los elementos
     puntuales.

     Se arregla devolviendole color oscuro a lo que vive adentro del panel
     flotante, que es una tarjeta blanca y nunca va a querer texto blanco.
     ══════════════════════════════════════════════════════════════════ */
  .sorting-filter__options,
  .sorting-filter__options *,
  .sorting-filter__options .sorting-filter__label {
    color: #0F1512 !important;
  }

  /* El tilde de la opcion elegida en dorado, que es como se marca el
     estado activo en el resto del sitio. */
  .sorting-filter__options .sorting-filter__checkmark,
  .sorting-filter__options .sorting-filter__checkmark svg {
    color: #C8A66B !important;
  }

  /* ── EL FONDO DE LA BARRA NO SE PONE ARRIBA DEL PRELOADER ──────────
     Al cambiar de coleccion, Horizon usa transiciones de vista: el
     navegador saca una foto de la pagina y la dibuja en una capa que va
     por encima de todo, incluso de elementos fijos. En esa foto entraba
     la franja oscura de la barra de filtros, asi que se veia una banda
     negra cruzando el preloader blanco.

     Mientras el preloader esta a la vista, la franja no se pinta. Dura lo
     que dura la transicion y nadie la ve apagarse. */
  html:has(#ij-preloader:not(.is-hidden)) .facets-toggle::before,
  html:has(#ij-preloader:not(.is-hidden)) .facets-block-wrapper::before,
  html:has(#ij-preloader:not(.is-hidden)) .facets-block-wrapper--horizontal::before {
    display: none !important;
  }

  /* ── EL HUECO BLANCO ARRIBA DE LA BARRA ────────────────────────────
     En la pagina de resultados de busqueda quedaban 40px de blanco entre
     el bloque oscuro del titulo y la barra de filtros. No era un margen de
     la barra: es el padding de arriba de la seccion de la grilla, que vale
     40px. Como la barra es lo primero que va adentro, ese padding sobra:
     la barra tiene que empalmar con la cabecera. El de abajo se respeta,
     que ahi si hace falta aire antes del pie. */
  .section.product-grid-container,
  results-list.product-grid-container {
    padding-block-start: 0 !important;
  }

  /* La sombra que estira el fondo hasta los bordes tambien tiene que
     alcanzar a la variante --horizontal, que es la que se usa en
     escritorio. Misma tecnica que arriba: box-shadow enorme, que no genera
     desborde, y clip-path sobre un ::before para no recortar los
     desplegables. */
  .facets-block-wrapper--horizontal {
    position: relative !important;
    background: transparent !important;
  }

  .facets-block-wrapper--horizontal::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #0F1512;
    box-shadow: 0 0 0 100vmax #0F1512;
    clip-path: inset(0 -100vmax);
    z-index: 0;
    pointer-events: none;
  }

  .facets-block-wrapper--horizontal > * {
    position: relative;
    z-index: 1;
  }

  .facets-block-wrapper--horizontal .facets--horizontal {
    border: none;
    border-radius: 0;
    padding-inline: 0;
    background: transparent;
  }

  /* Pastilla de cada filtro desplegable, SOLO en la barra horizontal.
     Acotado a --horizontal a proposito: en el drawer de celular el mismo
     summary ocupa todo el ancho, asi que la pastilla negra del estado abierto
     se veia como una barra negra de lado a lado. El drawer tiene su propio
     tratamiento mas abajo. */
  /* Ahora las pastillas estan sobre el fondo oscuro, asi que se invierten:
     translucidas con texto blanco, y doradas cuando el filtro esta abierto.
     Antes eran blancas con texto negro y se invertian a negro; sobre oscuro
     el estado abierto desaparecia. */
  /* ══════════════════════════════════════════════════════════════════
     LOS BOTONES DE FILTRO, TERCERA VERSION

     Que tenian de malo los anteriores. Eran pastillas completamente
     redondas, con borde blanco al 22 por ciento y relleno al 8: una forma
     que en el sitio ya significa otra cosa (las categorias del menu, las
     del buscador). Y al abrirse se pintaban de dorado pleno con texto
     negro, un bloque de color que pesaba mas que el titulo de la
     coleccion que esta justo arriba.

     Que cambia. Esquinas de 10px en vez de pastilla, que es el radio que
     usan las tarjetas, asi el filtro se lee como un control y no como una
     etiqueta. El relleno y el borde bajan a 0.05 y 0.11: sobre un fondo
     casi negro eso alcanza para que el boton exista sin dibujarse de mas.

     El estado abierto deja de ser un bloque dorado. Ahora es un fondo
     dorado al 14 por ciento con el borde dorado y el texto en un dorado
     claro. Se nota cual esta abierto sin que el ojo se vaya ahi antes que
     al producto, que es lo que de verdad hay que mirar.
     ══════════════════════════════════════════════════════════════════ */
  .facets--horizontal .facets__summary {
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 10px;
    padding: 9px 14px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.005em;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.92);
    transition: border-color 200ms ease, background 200ms ease, color 200ms ease;
  }

  /* La flecha baja de intensidad y gira al abrirse: el movimiento dice
     "esto se despliega" mejor que cualquier borde. */
  .facets--horizontal .facets__summary svg {
    opacity: 0.45;
    transition: opacity 200ms ease, transform 260ms cubic-bezier(0.23, 1, 0.32, 1);
  }

  .facets--horizontal .facets__panel[open] > .facets__summary svg {
    opacity: 1;
    transform: rotate(180deg);
  }

  .facets--horizontal .facets__summary * { color: rgba(255, 255, 255, 0.92); }

  @media (hover: hover) and (pointer: fine) {
    .facets--horizontal .facets__summary:hover {
      border-color: rgba(255, 255, 255, 0.24);
      background: rgba(255, 255, 255, 0.09);
    }
    .facets--horizontal .facets__summary:hover * { color: #fff; }
  }

  .facets--horizontal .facets__summary:active { transform: scale(0.98); }

  .facets--horizontal .facets__item[open] > .facets__summary,
  .facets--horizontal .facets__panel[open] > .facets__summary {
    border-color: rgba(200, 166, 107, 0.85);
    background: rgba(200, 166, 107, 0.14);
  }

  /* El texto de la pastilla vive en un span con color propio, asi que no
     hereda el color del summary: sin esto quedaba blanco sobre dorado y no
     se leia. Va el span y la flecha. */
  .facets--horizontal .facets__item[open] > .facets__summary *,
  .facets--horizontal .facets__panel[open] > .facets__summary * {
    color: #E3CB9C;
  }

  /* En el drawer de celular cada filtro es una fila de acordeon, no una
     pastilla: titulo con peso y una linea fina abajo, y dorado al abrirse. */
  .facets--drawer .facets__summary {
    padding: 14px 0;
    border: none;
    border-block-end: 1px solid rgba(15, 21, 18, 0.1);
    border-radius: 0;
    background: transparent;
    font-size: 15px;
    font-weight: 700;
    transition: color 200ms ease;
  }

  .facets--drawer .facets__panel[open] > .facets__summary,
  .facets--drawer .facets__item[open] > .facets__summary {
    color: #C8A66B;
    border-block-end-color: rgba(200, 166, 107, 0.5);
  }

  /* El desplegable de verdad. Solo en la barra horizontal: en el drawer de
     mobile este mismo elemento es contenido en linea, no una tarjeta. */
  .facets--horizontal .facets__panel-content {
    margin-block-start: 8px;
    padding: 10px 8px;
    border: 1px solid rgba(15, 21, 18, 0.1);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(15, 21, 18, 0.16);
    min-inline-size: 220px;
  }

  /* Opciones: mas aire, toda la fila clickeable y fondo al pasar el mouse. */
  .facets__inputs-list-item .checkbox {
    border-radius: 10px;
    padding-inline: 8px;
    transition: background 160ms ease;
  }

  @media (hover: hover) and (pointer: fine) {
    .facets__inputs-list-item .checkbox:hover { background: rgba(200, 166, 107, 0.12); }
  }

  .facets__inputs-list label {
    padding-block: 8px;
    font-size: 14px;
  }

  .facets__inputs-list input[type='checkbox'],
  .checkbox__input {
    accent-color: #C8A66B;
  }

  /* Selector de orden y contador de productos, sobre el mismo fondo oscuro. */
  .sorting-filter__select {
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    padding: 9px 16px;
    font-size: 13.5px;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    transition: border-color 200ms ease, background 200ms ease;
  }

  .facets-block-wrapper--horizontal .product-count,
  .facets-block-wrapper--horizontal [class*='results-count'],
  .facets-block-wrapper--horizontal .sorting-filter__label {
    color: rgba(255, 255, 255, 0.7);
  }

  @media (hover: hover) and (pointer: fine) {
    .sorting-filter__select:hover {
      border-color: rgba(200, 166, 107, 0.7);
      background: rgba(255, 255, 255, 0.16);
    }
  }

  .sorting-filter__options {
    border: 1px solid rgba(15, 21, 18, 0.1);
    border-radius: 16px;
    box-shadow: 0 18px 40px rgba(15, 21, 18, 0.16);
  }

  /* ── FILTROS YA APLICADOS: CHIPS DORADOS ──────────────────────────
       Esta regla existia desde la barra horizontal y no se aplicaba a
       nada: el chip no es un <a> ni un <button>, es un elemento propio
       del theme, <facet-remove-component class="facets-remove__pill">.
       Medido el 21/10/2026: los chips salian grises, del theme.
       Con la clase agregada al selector, se pintan. */
  .facets-remove a,
  .facets-remove button,
  .facets .facets-remove__pill,
  .active-facets__button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border: 1px solid rgba(200, 166, 107, 0.55);
    border-radius: 999px;
    background: rgba(200, 166, 107, 0.14);
    color: #0F1512;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    transition: background 200ms ease, border-color 200ms ease;
  }

  @media (hover: hover) and (pointer: fine) {
    .facets-remove a:hover,
    .facets-remove button:hover,
    .facets .facets-remove__pill:hover,
    .active-facets__button:hover {
      background: rgba(200, 166, 107, 0.28);
      border-color: #C8A66B;
    }
  }

  /* Borrar todo queda como link discreto, no compite con los chips. */
  .facets__clear-all-link,
  .facets__clear-all {
    font-size: 12.5px;
    font-weight: 700;
    color: rgba(15, 21, 18, 0.5);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 200ms ease;
  }

  @media (hover: hover) and (pointer: fine) {
    .facets__clear-all-link:hover,
    .facets__clear-all:hover { color: #0F1512; }
  }

  /* Drawer de filtros en mobile. El boton de cerrar va de 44 y radio 14,
     igual que el del carrito y el del buscador: es el mismo gesto en los
     tres cajones y el dedo ya sabe donde cae. */
  .facets-drawer__close {
    inline-size: 44px !important;
    block-size: 44px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(15, 21, 18, 0.12);
    background: #fff;
  }

  /* El boton de aplicar es lo ultimo que se toca: grande y con contraste. */
  .facets__see-results {
    inline-size: 100%;
    justify-content: center;
    padding: 15px 20px;
    border: none;
    border-radius: 14px;
    background: #0F1512;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    transition: transform 160ms ease-out, background 200ms ease;
  }

  @media (hover: hover) and (pointer: fine) {
    .facets__see-results:hover { background: #1C2622; }
  }

  .facets__see-results:active { transform: scale(0.98); }

  .clear-filter {
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
  }

  /* En telefono la barra tiene que ocupar lo menos posible: abajo viene la
     grilla de productos y cada pixel que se come la barra es uno menos de
     producto a la vista.

     Lo de .facets-block-wrapper--horizontal: en telefono los filtros van en
     un drawer, asi que ese contenedor queda vacio, pero su padding seguia
     ocupando una franja de 18px entre la cabecera y el boton FILTRO. Medido
     el 21/10/2026: alto 18, contenido 0. Se le saca el pading de arriba y
     abajo y la franja desaparece. */
  @media (max-width: 749px) {
    /* ── EL LAYOUT VERTICAL NO TIENE QUE AFECTAR AL TELEFONO ──────────
       Al pasar los filtros a columna quedaron dos cosas en telefono: un
       hueco de 22px entre la cabecera y el boton FILTRO, que es el
       contenedor de la columna vacio, y la grilla ocupando media pantalla
       porque heredaba la columna 5 a 14 del escritorio. Las dos se
       corrigen aplastando ese contenedor, que en telefono no se usa, y
       devolviendole el ancho completo a la grilla. */
    .facets-block-wrapper--vertical {
      padding-block: 0 !important;
      block-size: 0 !important;
      overflow: hidden !important;
    }

    .collection-wrapper > .main-collection-grid,
    .collection-wrapper > .facets--horizontal.facets-controls-wrapper {
      grid-column: 1 / -1 !important;
    }

    /* ── AIRE ENTRE LA BARRA Y LOS PRODUCTOS ───────────────────────
       Medido: la primera card arrancaba EXACTAMENTE donde terminaba la
       barra, cero pixeles entre una cosa y la otra, asi que el boton y
       el primer producto se leian como un solo bloque. 14px abajo es lo
       que hace falta para que se entienda que son dos zonas distintas.
       Arriba sigue pegado a la cabecera a proposito: la barra continua
       ese bloque oscuro, no arranca uno nuevo. */
    .facets-toggle { padding: 6px 16px 14px !important; }

    /* En telefono el boton ocupa el ancho util de la franja: es la unica
       accion que hay ahi y asi el pulgar no tiene que apuntar. */
    .facets-toggle__wrapper { inline-size: 100%; }
    .facets-toggle__button { inline-size: 100%; }

    .facets-block-wrapper--horizontal { padding-block: 0 !important; padding-inline: 16px !important; }
    .facets-toggle__button { padding: 15px 20px; font-size: 12.5px; }
  }

  /* Y al reves en escritorio: ahi los filtros van en la barra horizontal y
     el que queda vacio es el boton FILTRO. Mismo problema, misma solucion. */
  @media (min-width: 750px) {
    .facets-toggle:not(:has(.facets-toggle__button)) { padding-block: 0 !important; }
  }

  @media (prefers-reduced-motion: reduce) {
    .facets-toggle__button,
    .facets__summary,
    .facets__inputs-list-item .checkbox,
    .facets-remove a,
    .facets__see-results { transition: none; }
  }

  /* ══════════════════════════════════════════════════════════════════
     ESCRITORIO: LOS FILTROS VAN EN UNA COLUMNA A LA IZQUIERDA

     Pedido de Rodrigo el 21/10/2026: sacar la barra horizontal y poner el
     filtrado a la izquierda, como cualquier tienda. En telefono queda
     como estaba, con el boton FILTRO que abre un drawer.

     NO SE HIZO CON CSS A LA FUERZA. El theme ya trae las dos formas: el
     bloque de filtros tiene un ajuste `filter_style` con valores
     `horizontal` y `vertical`, y en templates/collection.json se cambio a
     vertical. Eso solo ya arma la columna, esconde el boton FILTRO en
     escritorio y deja arriba una tira con el titulo, la cuenta de
     articulos y Ordenar. Es la via del theme: si manana Shopify actualiza
     Horizon, esto sigue andando.

     Lo que falta aca es acomodar lo que yo mismo habia puesto antes para
     la barra oscura, que ahora sobra en escritorio.
     ══════════════════════════════════════════════════════════════════ */
  @media (min-width: 750px) {
    /* ── 1. La columna y la grilla, en la misma fila ────────────────
       Las dos estaban bien asignadas por columna (la columna 2 a 5 para
       los filtros, 5 a 14 para los productos) pero caian en filas
       distintas, asi que la grilla arrancaba DEBAJO de la columna en vez
       de al lado. Medido: grilla en y=778, que es justo donde terminaba
       la columna. Con la fila puesta a mano quedan lado a lado. */
    .collection-wrapper > .facets--horizontal.facets-controls-wrapper { grid-row: 1; }
    .collection-wrapper > .facets-block-wrapper--vertical { grid-row: 2; }
    .collection-wrapper > .main-collection-grid { grid-row: 2; }

    /* La columna arranca a la misma altura que el primer producto. El
       bloque interno trae su propio padding de arriba (medido: 90px de
       diferencia contra la grilla) y ahi no llega el padding: 0 de
       afuera. */
    .facets--vertical.spacing-style,
    .facets--vertical {
      padding-block-start: 0 !important;
      margin-block-start: 0 !important;
    }

    /* La columna no tiene que estirarse hasta el largo de la grilla. */
    /* Sin sticky. Probado: con `position: sticky; top: 90px` la columna
       arrancaba 90px mas abajo que el primer producto incluso con la
       pagina sin scrollear (medido: columna en y=516, producto en 426;
       sacando el sticky, las dos en 426). Una columna de filtros que
       empieza desalineada se nota mas que lo que se gana con que
       acompanie el scroll. */
    .collection-wrapper > .facets-block-wrapper--vertical {
      align-self: start;
      position: static;
    }

    /* ── 2. Nada de fondo oscuro en escritorio ──────────────────────
       Todo lo oscuro era para la barra pegada a la cabecera. Con los
       filtros a un costado, sobre el blanco de la pagina, el negro no va:
       la columna tiene que desaparecer y dejar que miren los productos. */
    .facets-toggle::before,
    .facets-block-wrapper::before,
    .facets-block-wrapper--horizontal::before,
    .facets-block-wrapper--vertical::before {
      display: none !important;
    }

    .facets-toggle,
    .facets-block-wrapper,
    .facets-block-wrapper--horizontal,
    .facets-block-wrapper--vertical {
      background: transparent !important;
      padding: 0 !important;
    }

    /* ── 3. Los controles de arriba, sobre fondo claro ───────────────
       Esa tira lleva la clase .facets--horizontal, la misma que usaba la
       barra oscura, asi que se llevaba puesto el texto en blanco y
       quedaba invisible sobre el blanco. */
    .facets-controls-wrapper,
    .facets-controls-wrapper * {
      color: rgba(15, 15, 15, 0.82) !important;
    }

    .facets--filters-title {
      margin: 0;
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: #0F1512 !important;
    }

    .facets-controls-wrapper .facets__summary {
      border: 1px solid rgba(15, 21, 18, 0.14) !important;
      background: #fff !important;
      color: #0F1512 !important;
    }

    .facets-controls-wrapper .facets__summary * { color: #0F1512 !important; }

    /* ── 4. La columna ──────────────────────────────────────────────
       Cada filtro es un acordeon. Se le pone una linea fina de
       separacion y un titulo con peso, que es como se lee una columna de
       filtros sin que parezca una lista suelta. */
    .facets--vertical .facets__item,
    .facets--vertical .facets__panel {
      border-block-end: 1px solid rgba(15, 21, 18, 0.1);
    }

    .facets--vertical .facets__summary {
      padding-block: 13px !important;
      padding-inline: 0 !important;
      border: none !important;
      border-radius: 0 !important;
      background: transparent !important;
      color: #0F1512 !important;
      font-size: 13.5px !important;
      font-weight: 700 !important;
      letter-spacing: -0.005em;
    }

    .facets--vertical .facets__summary * { color: #0F1512 !important; }

    .facets--vertical .facets__summary svg { opacity: 0.5; }

    .facets--vertical .facets__panel[open] > .facets__summary svg {
      transform: rotate(180deg);
    }

    /* ── EL TITULO NO SE PINTA DE DORADO ──────────────────────────
       En modo columna los tres paneles arrancan abiertos, asi que
       pintar de dorado el abierto pintaba los tres: un bloque de
       dorado claro sobre blanco que ademas se lee mal (el dorado
       sobre blanco no llega al contraste minimo). El titulo queda en
       tinta y el que avisa que el panel esta abierto es la flecha,
       que ya gira. */
    .facets--vertical .facets__panel[open] > .facets__summary,
    .facets--vertical .facets__panel[open] > .facets__summary * {
      color: #0F1512 !important;
    }

    .facets--vertical .facets__panel[open] > .facets__summary .icon-caret {
      color: #9A7B3F !important;
      opacity: 1;
    }

    /* Las opciones de adentro, con aire para el dedo y el mouse. */
    .facets--vertical .facets__inputs label,
    .facets--vertical .facets__inputs-list label {
      padding-block: 5px;
      font-size: 13px;
      color: rgba(15, 21, 18, 0.82) !important;
    }
  }


  /* ══════════════════════════════════════════════════════════════════
     DISEÑO DEL FILTRADO: COLUMNA DE ESCRITORIO Y DRAWER DE TELEFONO

     Pedido de Rodrigo el 21/10/2026, despues de dejar andando la columna
     de la izquierda y el filtro de marca.

     Lo que habia, medido en la tienda antes de tocar nada:

       - La casilla era la de Horizon: 16px en escritorio, borde gris al
         35 por ciento, radio 5, y al marcarse se pintaba de gris oscuro.
         En una tienda que en todo lo demas usa dorado, la unica parte que
         el cliente toca para filtrar no tenia nada de la marca.
       - La fila no existia como fila: el fondo al pasar el mouse estaba,
         pero el marcado no se distinguia salvo por el peso de la letra.
       - Los titulos de seccion, mismo tamaño y peso que los valores.
       - El precio: dos campos de 48px con radio 4 y un aro gris duro,
         que es el unico radio de 4 que queda en el sitio.
       - En el drawer: "Filtro" en 32px, el titulo de cada seccion en
         dorado sobre blanco (2.1 a 1 de contraste, ilegible), el texto de
         los valores al 60 por ciento y la barra de abajo transparente,
         con los productos pasando por atras del boton de aplicar.
       - Y dos cosas rotas de antes: el drawer se abria pegado a la
         izquierda aunque el theme lo marca como dialog-drawer--right, y
         el "Ordenar" de adentro era texto blanco sobre blanco.

     Todo lo de abajo trabaja sobre el markup del theme, sin tocar Liquid:
     la casilla que se pinta es el propio svg .icon-checkmark, que Horizon
     usa como caja (el input de verdad esta en opacity 0 arriba).
     ══════════════════════════════════════════════════════════════════ */

  /* ── 1. LA CASILLA ────────────────────────────────────────────────
     Caja de 19px con radio 6 y borde fino, y al marcarse dorado pleno
     con el tilde en tinta. El tilde del theme viene en blanco, que sobre
     dorado queda en 1.9 a 1: casi no se ve. En tinta sobre dorado da 7.8
     a 1 y ademas es el par de colores que usa el resto del sitio. */
  .facets .checkbox .icon-checkmark {
    width: 19px !important;
    height: 19px !important;
    border: 1.5px solid rgba(15, 21, 18, 0.2) !important;
    border-radius: 6px !important;
    background-color: #FFFFFF !important;
    transition: background-color 180ms cubic-bezier(0.23, 1, 0.32, 1),
      border-color 180ms cubic-bezier(0.23, 1, 0.32, 1);
  }

  .facets .checkbox .icon-checkmark path {
    stroke: #0F1512 !important;
    stroke-width: 2.3px;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .facets .checkbox__input:checked + .checkbox__label .icon-checkmark {
    background-color: #C8A66B !important;
    border-color: #C8A66B !important;
  }

  @media (hover: hover) and (pointer: fine) {
    .facets .checkbox:not(.checkbox--disabled):hover .icon-checkmark {
      border-color: rgba(200, 166, 107, 0.8) !important;
      background-color: rgba(200, 166, 107, 0.12) !important;
    }

    .facets .checkbox:not(.checkbox--disabled):hover .checkbox__input:checked + .checkbox__label .icon-checkmark {
      background-color: #B99455 !important;
      border-color: #B99455 !important;
    }
  }

  /* El foco de teclado se dibuja sobre la caja, no sobre la fila. */
  .facets .checkbox__input:focus-visible + .checkbox__label .icon-checkmark {
    outline: 2px solid #9A7B3F !important;
    outline-offset: 2px !important;
  }

  /* ── 2. LA FILA ───────────────────────────────────────────────────
     La fila marcada se tiñe de dorado al 10 por ciento y el texto pasa a
     tinta plena. Sin esto, con cuatro marcas tildadas hay que leer el
     peso de la letra para saber cuales estan puestas. */
  .facets .facets__inputs-list-item .checkbox {
    padding-inline: 9px;
    border-radius: 10px;
  }

  .facets .facets__inputs-list-item:has(.checkbox__input:checked) .checkbox {
    background: rgba(200, 166, 107, 0.1);
  }

  .facets .checkbox__label-text {
    color: rgba(15, 21, 18, 0.78) !important;
    letter-spacing: -0.005em;
    transition: color 180ms ease;
  }

  .facets .checkbox__input:checked + .checkbox__label .checkbox__label-text {
    color: #0F1512 !important;
    font-weight: 600 !important;
  }

  /* ── 3. LAS LINEAS QUE SEPARAN SECCIONES ──────────────────────────
     El theme ya las dibuja con un ::before. No hacen falta bordes
     nuevos: alcanza con bajarles el tono, que venia del color de borde
     general y quedaba mas oscuro que el texto de los valores. */
  :is(.facets--vertical, .facets--drawer) :is(.facets__item, .sorting-filter)::before {
    border-top-color: rgba(15, 21, 18, 0.08) !important;
  }

  /* ── 4. PRECIO ────────────────────────────────────────────────────
     Mismo radio que las tarjetas, aro fino en vez del gris duro y el
     foco en dorado. El alto no se toca: el "$U" es una etiqueta flotante
     adentro del campo y moverle el alto la descoloca. */
  .facets .price-facet__input {
    border-radius: 10px !important;
    box-shadow: inset 0 0 0 1px rgba(15, 21, 18, 0.14) !important;
    background-color: #FFFFFF !important;
    color: #0F1512 !important;
    font-size: 13.5px !important;
    font-weight: 600;
    transition: box-shadow 180ms ease;
  }

  .facets .price-facet__input:focus,
  .facets .price-facet__input:focus-visible {
    box-shadow: inset 0 0 0 1.5px #C8A66B !important;
    outline: none !important;
  }

  .facets .price-facet__label {
    color: rgba(15, 21, 18, 0.42) !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
  }

  .facets .price-facet__separator {
    color: rgba(15, 21, 18, 0.35);
    font-size: 12px;
  }

  .facets .price-facet__highest-price {
    color: rgba(15, 21, 18, 0.42) !important;
    font-size: 11px !important;
  }

  /* ── 5. LISTAS LARGAS ─────────────────────────────────────────────
     El theme muestra diez valores y un "mostrar mas". Al desplegarlo,
     una lista de treinta marcas empuja todo lo de abajo fuera de la
     pantalla. Desplegada se le pone techo y scroll propio, con la barra
     fina en dorado. El techo de 268px deja ocho valores a la vista, que
     alcanza para saber que hay mas sin perder el resto del filtrado. */
  .facets show-more-component[data-expanded='true'] .facets__inputs-list {
    max-block-size: 268px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-inline-end: 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(200, 166, 107, 0.6) transparent;
  }

  .facets show-more-component[data-expanded='true'] .facets__inputs-list::-webkit-scrollbar {
    width: 5px;
  }

  .facets show-more-component[data-expanded='true'] .facets__inputs-list::-webkit-scrollbar-thumb {
    background: rgba(200, 166, 107, 0.6);
    border-radius: 999px;
  }

  .facets .show-more__button {
    gap: 6px;
    padding: 9px;
    font-size: 12px;
    font-weight: 700;
    color: #9A7B3F;
  }

  .facets .show-more__button svg {
    width: 13px;
    height: 13px;
  }

  /* La bolita con la cantidad de filtros puestos, en dorado. */
  .facets .facets__bubble {
    background: #C8A66B !important;
    color: #0F1512 !important;
    font-weight: 800 !important;
  }

  /* ── "INDAJAUS" NO ES UNA MARCA ───────────────────────────────────
     Shopify arma el filtro de marca con el campo vendor, y los 1579
     productos que todavia no tienen marca real cargada quedaron con el
     nombre de la tienda. Asi, el filtro ofrecia "INDAJAUS" como si
     fuera una marca mas, que es el valor con mas productos de todos:
     el cliente lo toca esperando algo y le vuelve casi el catalogo
     entero. Pedido de Rodrigo el 21/10/2026: esconderlo.

     Se esconde la fila entera, no solo el texto, asi tampoco queda
     alcanzable con el tabulador. Va por el `value` del input, que es
     donde Shopify escribe el nombre del proveedor, y acotado al filtro
     de marca para no pisar ningun otro.

     OJO: esto esconde, no borra. Los productos siguen teniendo vendor
     INDAJAUS. El dia que se terminen de cargar las marcas de verdad,
     esta regla hay que sacarla, si no se van a esconder tambien los
     que queden sin cargar. */
  .facets__inputs-list-item:has(input[name='filter.p.vendor'][value='INDAJAUS']) {
    display: none !important;
  }

  /* ══════════════════════════════════════════════════════════════════
     ESCRITORIO
     ══════════════════════════════════════════════════════════════════ */
  @media (min-width: 750px) {
    /* El titulo de seccion deja de competir con los valores: mas chico,
       en mayuscula y con aire entre letras. Es la forma de decir "esto
       es una etiqueta" sin agrandar nada ni meter color. */
    .facets--vertical .facets__summary {
      padding-block: 12px !important;
      font-size: 11.5px !important;
      font-weight: 700 !important;
      letter-spacing: 0.07em !important;
      text-transform: uppercase;
      color: #0F1512 !important;
    }

    .facets--vertical .facets__summary .facets__label {
      font-size: 11.5px !important;
      letter-spacing: 0.07em !important;
    }

    .facets--vertical .facets__summary .icon-caret {
      opacity: 0.38;
      transition: opacity 200ms ease;
    }

    /* Los valores: 13px, alto de fila comodo para el mouse. */
    .facets--vertical .facets__inputs-list-item .checkbox {
      min-block-size: 32px;
    }

    .facets--vertical .checkbox__label-text {
      font-size: 13px !important;
    }

    /* El panel abierto respira abajo, antes de la linea siguiente. */
    .facets--vertical .facets__panel-content {
      padding-block-end: 8px;
    }
  }

  /* ══════════════════════════════════════════════════════════════════
     TELEFONO: EL DRAWER
     ══════════════════════════════════════════════════════════════════ */
  @media (max-width: 749px) {
    /* ── 5.1 DE QUE LADO ABRE EL CAJON ──────────────────────────────
       Medido el 21/10/2026: el theme le pone dialog-drawer--right, que
       en Horizon no quiere decir "va a la derecha" sino "viaja hacia la
       derecha": la regla es .dialog-drawer--right[open]{--start-x:-100%},
       asi que entra desde afuera por la izquierda y descansa pegado a
       ese borde. Esta bien asi, y ademas el boton FILTRO que lo abre
       esta del mismo lado.

       Aca estuvo un rato una regla que lo pasaba a la derecha. Se saco:
       la animacion seguia entrando desde la izquierda y el cajon
       cruzaba la pantalla entera para terminar del otro lado. Lo que
       estaba mal no era el lado sino la decoracion, que se corrigio en
       blocks/filters.liquid.

       Las esquinas y la sombra se repiten aca con !important porque el
       theme trae un .facets--drawer{border-radius:0;box-shadow:var(--shadow-drawer)}
       que en telefono resuelve a none y que, por orden de cascada, cae
       despues de lo que escribe el bloque. Medido: sin esto el cajon
       sale con esquinas rectas y sin sombra, pegado a los productos. */
    dialog.facets--drawer {
      border-start-end-radius: 20px !important;
      border-end-end-radius: 20px !important;
      box-shadow: 18px 0 55px rgba(15, 21, 18, 0.18) !important;
    }

    /* ── 5.2 LA CABECERA ────────────────────────────────────────────
       "Filtro" venia en 32px, el tamaño de un titulo de coleccion, para
       una palabra que nadie vino a leer. A 17px, con la bolita de
       cuantos filtros hay al lado, dice lo mismo y devuelve 20px de
       alto a la lista. */
    .facets--drawer .facets__title-wrapper {
      padding: 12px 12px 12px 18px !important;
      border-block-end: 1px solid rgba(15, 21, 18, 0.08) !important;
      gap: 10px;
    }

    .facets--drawer .facets-drawer__title {
      font-size: 17px !important;
      font-weight: 800 !important;
      letter-spacing: -0.01em !important;
      color: #0F1512 !important;
    }

    /* ── 5.3 TITULOS DE SECCION ─────────────────────────────────────
       Estaban en dorado sobre blanco. Sobre un fondo claro ese dorado
       da 2.1 a 1, menos de la mitad del minimo que se le pide a un
       texto. Van en tinta, y el dorado pasa a la flecha. */
    .facets--drawer .facets__summary,
    .facets--drawer .facets__panel[open] > .facets__summary,
    .facets--drawer .facets__item[open] > .facets__summary {
      color: #0F1512 !important;
      font-size: 14.5px !important;
      padding-block: 13px !important;
      border-block-end-color: rgba(15, 21, 18, 0.08) !important;
    }

    .facets--drawer .facets__panel[open] > .facets__summary .icon-caret {
      color: #9A7B3F !important;
    }

    /* ── 5.4 LOS VALORES ────────────────────────────────────────────
       Fila de 44px, que es el minimo que se toca sin errarle, y texto
       en tinta al 82 en vez del gris al 60 que traia. */
    .facets--drawer .facets__inputs-list-item .checkbox {
      min-block-size: 44px;
      padding-inline: 10px;
    }

    .facets--drawer .checkbox__label-text {
      font-size: 14px !important;
      color: rgba(15, 21, 18, 0.82) !important;
      padding-inline-start: 10px !important;
    }

    .facets--drawer .checkbox .icon-checkmark {
      width: 21px !important;
      height: 21px !important;
      border-radius: 7px !important;
    }

    /* ── 5.5 ORDENAR, ADENTRO DEL DRAWER ────────────────────────────
       Estaba en blanco sobre blanco: la regla del selector de orden se
       habia escrito para la barra oscura y no estaba limitada a ella,
       asi que el mismo blanco caia adentro del cajon, que es claro.
       Aca se le devuelve el color. Y la palabra "Ordenar" venia en 24px
       porque usa la clase de titulo del theme: se iguala al resto de
       los titulos de seccion. */
    .facets--drawer .sorting-filter__select {
      border: 1px solid rgba(15, 21, 18, 0.14) !important;
      background: #FFFFFF !important;
      color: #0F1512 !important;
      font-size: 13.5px !important;
    }

    .facets--drawer .sorting-filter .facets__label {
      font-size: 14.5px !important;
      font-weight: 700 !important;
      color: #0F1512 !important;
    }

    .facets--drawer .sorting-filter__container {
      padding-block: 13px !important;
    }

    /* ── 5.6 LA BARRA DE ABAJO ──────────────────────────────────────
       Es sticky pero el fondo venia transparente, asi que los productos
       pasaban por atras del boton de aplicar mientras se scrollea.
       Fondo blanco, una linea arriba y la sombra corta que ya usa el
       carrito, mas el respiro del borde de abajo del telefono. */
    .facets__drawer-actions {
      background: #FFFFFF !important;
      border-block-start: 1px solid rgba(15, 21, 18, 0.08) !important;
      box-shadow: 0 -10px 24px rgba(15, 21, 18, 0.06);
      padding: 12px 16px max(14px, env(safe-area-inset-bottom, 0px)) !important;
      gap: 10px !important;
    }

    .facets__see-results {
      block-size: 50px !important;
      padding-block: 0 !important;
    }

    /* En la barra de abajo "Borrar todo" ya es una caja con borde, asi
       que el subrayado sobra: dos formas de decir "esto se toca" sobre
       el mismo boton. Afuera de la barra sigue siendo un link y ahi el
       subrayado se queda. */
    .facets__drawer-actions .facets__clear-all {
      block-size: 50px !important;
      flex: 0 0 auto;
      border-radius: 14px !important;
      color: rgba(15, 21, 18, 0.55) !important;
      font-size: 12.5px !important;
      font-weight: 700 !important;
      text-decoration: none !important;
    }

    /* Los chips de filtro puesto, pegados a la cabecera. */
    .facets--drawer .facets-remove {
      padding-block: 10px !important;
    }
  }

  /* ══════════════════════════════════════════════════════════════════
     EL AIRE ENTRE EL FILTRO Y LAS PRIMERAS CARDS
     09/11/2026, Rodrigo: "entre las primeras cards del main collection y
     esa section tiene que haber un espaciado", y despues, cuando lo puse
     arriba del filtro: "el espaciado que te pedi no era aca, era abajo de
     filtro".

     Medido a 375px antes de esto: la barra de filtros cierra en 465 y la
     primera card arranca en 465. Cero. Las cards nacian pegadas al borde
     de la franja oscura y la primera fila parecia parte de la barra.

     Va en .main-collection-grid y NO en .facets-toggle. El toggle tiene
     `margin: 0 !important` unas lineas mas arriba, puesto a proposito
     para que la barra empalme con el bloque oscuro del titulo: pelearle
     con otro !important dejaria dos reglas contradictorias en el mismo
     archivo, y la proxima persona que lea una de las dos va a romper la
     otra. El grid no tiene margen propio, asi que aca no se pisa nada.

     28px en celular, hasta 44 en escritorio: alcanza para que se lea el
     corte sin regalar media pantalla antes del primer producto, que en
     una coleccion de 765 items es lo que mas importa.

     EL SELECTOR LLEVA EL PADRE A PROPOSITO. Con `.main-collection-grid`
     a secas no pasaba nada, y lo medi: el theme trae despues, en la
     misma hoja, `.main-collection-grid { padding: var(--grid--margin--mobile) }`.
     Misma especificidad y mas abajo, asi que ganaba; y ademas es el
     atajo `padding`, que reescribe los cuatro lados y borra el mio.
     Con el padre delante la cuenta queda 2 clases contra 1 y gana esta,
     sin tener que meter un !important mas en un archivo que ya tiene
     demasiados. Los otros tres lados los sigue poniendo el theme. */
  .collection-wrapper > .main-collection-grid {
    padding-block-start: clamp(28px, 5vw, 44px);
  }
/* END_SNIPPET:indajaus-filtros-css */

/* START_SNIPPET:indajaus-footer (INDEX:217) */
.ql-footer { background: var(--ql-bg, #0F0F0F); color: var(--ql-text, #fff); }
  .ql-footer * { box-sizing: border-box; }

  .ql-footer__main {
    max-width: 1360px;
    margin: 0 auto;
    padding: 48px 40px 28px;
  }

  /* ── Marca ── */
  .ql-footer__brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding-block-end: 34px;
    margin-block-end: 34px;
    border-block-end: 1px solid rgba(255, 255, 255, 0.12);
  }

  .ql-footer__logo-link { display: inline-block; line-height: 0; }

  .ql-footer__logo {
    inline-size: var(--ql-logo-w, 150px);
    block-size: auto;
    display: block;
  }

  .ql-footer__tagline {
    margin: 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.55);
  }

  /* Cuatro columnas: una por sucursal, mas contacto y ayuda. Las sucursales
     piden un poco mas de ancho porque llevan direccion y horario. */
  .ql-footer__grid {
    display: grid;
    grid-template-columns: 1.15fr 1.15fr 1fr 0.85fr;
    gap: 40px;
    align-items: start;
  }

  .ql-footer__heading {
    margin: 0 0 16px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.01em;
  }

  /* Un filete dorado corto debajo del titulo: ordena las columnas sin
     mayusculas chiquitas ni grises. */
  .ql-footer__heading::after {
    content: "";
    display: block;
    inline-size: 26px;
    block-size: 2px;
    margin-block-start: 8px;
    background: var(--ql-accent, #C8A66B);
  }

  /* La tarjeta ya no es una caja con padding: el titulo de la sucursal subio
     a ser el heading de la columna, asi que adentro solo quedan los datos. */
  .ql-suc__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .ql-suc__dato {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.72);
  }

  .ql-suc__horario {
    font-size: 13px;
    margin-block-start: 6px;
    color: rgba(255, 255, 255, 0.58);
  }

  .ql-suc__maps {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-block-start: 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ql-accent, #C8A66B) !important;
    text-decoration: none;
    border-block-end: 1px solid transparent;
    align-self: flex-start;
  }

  .ql-suc__maps:hover { border-block-end-color: currentColor; }
  .ql-suc__maps svg { inline-size: 13px; block-size: 13px; flex: none; }

  .ql-footer__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
  }

  .ql-footer__lista li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.72);
  }

  .ql-footer__lista svg {
    inline-size: 16px;
    block-size: 16px;
    flex: none;
    opacity: 0.85;
  }

  /* La columna de Ayuda son links pelados, sin icono: se compactan. */
  .ql-footer__lista--links { gap: 9px; }

  .ql-footer a {
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    transition: color 0.2s ease;
  }

  .ql-footer a:hover { color: var(--ql-accent, #C8A66B); }

  .ql-footer a:focus-visible {
    outline: 2px solid var(--ql-accent, #C8A66B);
    outline-offset: 3px;
    border-radius: 3px;
  }

  .ql-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-block-start: 40px;
    padding-block-start: 22px;
    border-block-start: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.55);
  }

  .ql-footer__bottom p { margin: 0; }

  /* En tablet van de a dos: las dos sucursales arriba, contacto y ayuda
     abajo. Cuatro columnas en 900px quedaban ilegibles. */
  @media (max-width: 1099px) {
    .ql-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px 36px; }
  }

  @media (max-width: 749px) {
    .ql-footer__main { padding: 34px 20px 24px; }
    .ql-footer__brand {
      align-items: center;
      text-align: center;
      padding-block-end: 26px;
      margin-block-end: 26px;
    }
    .ql-footer__grid { grid-template-columns: 1fr; gap: 28px; }
    .ql-footer__bottom { justify-content: flex-start; }
  }
/* END_SNIPPET:indajaus-footer */

/* START_SNIPPET:indajaus-frenar-animaciones (INDEX:218) */
.pr-btn--cart::after,
  .pr-qa-atc-btn::after,
  .cpc-btn--cart::after,
  .qlo-btn--cart::after,
  .qlo-panel-atc::after {
    animation: none !important;
    /* Sin la animacion, el pseudo-elemento quedaria plantado encima del
       boton tapandole el texto: se lo saca de la vista. */
    opacity: 0 !important;
  }

  /* El latido del boton de los recomendados tambien es infinito y es por
     tarjeta. El mismo criterio: en algo que se repite, no paga. */
  .pr-btn--cart,
  .pr-qa-atc-btn {
    animation: none !important;
  }

  /* ── LOS PUNTITOS QUE LATEN CON box-shadow ──────────────────────────
     04/11/2026, segunda pasada. Despues de apagar los brillos quedaban
     16 `cpc-dot-pulse` en el home animando `box-shadow`. No es tan caro
     como `left`, porque no recalcula maquetacion, pero repinta igual, y
     dieciseis a la vez no son gratis.

     Se reemplaza por el mismo efecto hecho con `opacity`, que el
     compositor resuelve sin repintar nada. Se ve igual: un punto que
     late. Mismo criterio para el de los recomendados. */
  .cpc-urgency__dot,
  .pr-urgency__dot {
    animation: ij-latido 1.5s ease-in-out infinite !important;
    box-shadow: none !important;
  }

  @keyframes ij-latido {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
  }
/* END_SNIPPET:indajaus-frenar-animaciones */

/* START_SNIPPET:indajaus-hero-css (INDEX:220) */
.mhero {
    position: relative;
    width: 100%;
    display: block;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #0F1512;
  }

  /* El alto sale de padding-top en porcentaje y no de aspect-ratio porque el
     porcentaje se puede transicionar en todos los navegadores; aspect-ratio
     recien interpola en los nuevos. */
  .mhero__viewport {
    position: relative;
    width: 100%;
    padding-top: calc(100% / var(--mhero-ar, 2.1));
    overflow: hidden;
  }

  .mhero--adaptable .mhero__viewport {
    transition: padding-top 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  @media (max-width: 749px) {
    .mhero__viewport { padding-top: calc(100% / var(--mhero-ar-mobile, 0.6)); }

    /* Cinturon y tiradores: aunque algo vuelva a escribir la variable, en
       celular el alto no se anima. Un hero que cambia de alto arrastra la
       pagina entera, que es lo que hacia vibrar el home. */
    .mhero--adaptable .mhero__viewport { transition: none; }
  }

  /* Todos los slides apilados; solo cambia la opacidad. */
  .mhero__slide {
    position: absolute;
    inset: 0;
    display: block;
    opacity: 0;
    visibility: hidden;
    transition: opacity 900ms cubic-bezier(0.25, 0, 0.75, 1), visibility 900ms;
    text-decoration: none;
    line-height: 0;
  }

  .mhero__slide.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
  }

  /* Con el alto siguiendo la proporcion del slide activo, cover no recorta
     nada: queda como seguro ante el redondeo y durante la transicion. */
  .mhero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  .mhero__fade {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 26%;
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.7) 65%,
      rgba(255, 255, 255, 1) 100%
    );
    pointer-events: none;
    z-index: 3;
  }

  /* Flechas: rectangulo redondeado con blur en vez de circulo gris. Se apoya
     sobre la foto sin taparla y no compite con el contenido del banner. */
  .mhero__arrow {
    position: absolute;
    top: 50%;
    z-index: 4;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 15px;
    background: rgba(18, 22, 20, 0.28);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    color: #fff;
    cursor: pointer;
    opacity: 0;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    transition:
      opacity 320ms cubic-bezier(0.22, 0.61, 0.36, 1),
      transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1),
      background 200ms ease,
      border-color 200ms ease,
      color 200ms ease;
  }

  .mhero__arrow svg {
    width: 21px;
    height: 21px;
    display: block;
  }

  /* Entran deslizandose desde el borde, no apareciendo de la nada. */
  .mhero__arrow--prev { left: 20px; transform: translateY(-50%) translateX(-8px); }
  .mhero__arrow--next { right: 20px; transform: translateY(-50%) translateX(8px); }

  .mhero:hover .mhero__arrow--prev,
  .mhero:focus-within .mhero__arrow--prev { opacity: 1; transform: translateY(-50%) translateX(0); }

  .mhero:hover .mhero__arrow--next,
  .mhero:focus-within .mhero__arrow--next { opacity: 1; transform: translateY(-50%) translateX(0); }

  .mhero__arrow:hover {
    background: rgba(200, 166, 107, 0.92);
    border-color: rgba(200, 166, 107, 0.92);
    color: #0F1512;
  }

  .mhero__arrow:active { transform: translateY(-50%) scale(0.94); }

  .mhero__arrow:focus-visible {
    opacity: 1;
    outline: 2px solid #C8A66B;
    outline-offset: 3px;
  }

  /* En touch no hay hover y el swipe ya resuelve la navegacion: las flechas
     solo taparian la foto. */
  @media (hover: none) {
    .mhero__arrow { display: none; }
  }

  /* Puntos: el activo lleva adentro una barra dorada que avanza durante el
     intervalo, asi se ve cuanto falta para el proximo banner sin agregar nada
     mas a la pantalla. */
  .mhero__dots {
    position: absolute;
    bottom: 16px;
    left: 0;
    right: 0;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
  }

  .mhero__dot {
    position: relative;
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: rgba(15, 21, 18, 0.22);
    cursor: pointer;
    overflow: hidden;
    transition:
      width 420ms cubic-bezier(0.22, 0.61, 0.36, 1),
      background 260ms ease;
  }

  .mhero__dot:hover { background: rgba(15, 21, 18, 0.42); }

  .mhero__dot.is-active {
    width: 30px;
    background: rgba(15, 21, 18, 0.18);
  }

  .mhero__dot.is-active::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: #C8A66B;
    transform-origin: left center;
    animation: mheroAvance var(--mhero-delay, 5000ms) linear forwards;
  }

  /* Al frenar el autoplay por hover, la barra tambien se queda quieta. */
  .mhero:hover .mhero__dot.is-active::after { animation-play-state: paused; }

  @keyframes mheroAvance {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }

  .mhero__dot:focus-visible { outline: 2px solid #C8A66B; outline-offset: 3px; }

  .mhero--vacio .mhero__placeholder { width: 100%; height: auto; display: block; }

  @media (prefers-reduced-motion: reduce) {
    .mhero__slide,
    .mhero__dot,
    .mhero__arrow { transition: none; }
    .mhero--adaptable .mhero__viewport { transition: none; }
    .mhero__dot.is-active::after { animation: none; transform: scaleX(1); }
  }
/* END_SNIPPET:indajaus-hero-css */

/* START_SNIPPET:indajaus-kit-indoor-css (INDEX:221) */
.kit {
    --kit-oro: #C8A66B;
    --kit-negro: #0F1512;
    background: #fff;
    color: var(--kit-negro);
  }

  .kit__inner {
    max-width: 1120px;
    margin-inline: auto;
    padding-inline: 24px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
  }

  /* ── La foto ── */
  .kit__foto { position: relative; }

  .kit__img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
  }

  .kit__off {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 3;
    padding: 7px 13px;
    border-radius: 999px;
    background: var(--kit-negro);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
  }

  /* ── Los puntos ── */
  .kit__punto {
    position: absolute;
    left: calc(var(--x) * 1%);
    top: calc(var(--y) * 1%);
    z-index: 4;
  }

  .kit__dot {
    position: relative;
    display: block;
    inline-size: 26px;
    block-size: 26px;
    margin: -13px 0 0 -13px;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--kit-oro);
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    transition: transform 0.16s ease-out;
  }
  .kit__dot:hover { transform: scale(1.12); }
  .kit__dot:active { transform: scale(0.97); }

  /* El anillo que late. Es un pseudo-elemento para que la animacion no
     toque el boton y el :active siga respondiendo. */
  .kit__dot::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    border: 2px solid var(--kit-oro);
    animation: kit-late 2.2s ease-out infinite;
    pointer-events: none;
  }
  @keyframes kit-late {
    0% { transform: scale(1); opacity: 0.85; }
    70% { transform: scale(2.3); opacity: 0; }
    100% { transform: scale(2.3); opacity: 0; }
  }

  .kit__dot[aria-expanded="true"] { background: var(--kit-negro); }
  .kit__dot[aria-expanded="true"]::after { animation: none; opacity: 0; }

  /* ── La tarjeta del punto ── */
  .kit__card {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 16px);
    z-index: 5;
    inline-size: 212px;
    transform: translateX(-50%) translateY(6px);
    padding: 10px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.26);
    display: flex;
    gap: 10px;
    align-items: center;
    text-decoration: none;
    color: inherit;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s ease-out, transform 0.18s ease-out, visibility 0.18s;
  }
  .kit__punto--abajo .kit__card {
    bottom: auto;
    top: calc(100% + 16px);
    transform: translateX(-50%) translateY(-6px);
  }
  .kit__punto.is-abierto .kit__card {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }

  .kit__card-img {
    inline-size: 52px;
    block-size: 52px;
    flex: none;
    border-radius: 8px;
    object-fit: cover;
    background: #f2f2f2;
  }
  .kit__card-txt { min-width: 0; }
  .kit__card-nombre {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 3px;
  }
  .kit__card-precio {
    display: block;
    font-size: 13px;
    font-weight: 800;
    color: var(--kit-oro);
  }
  .kit__card-ver {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #8a8a8a;
    margin-top: 2px;
  }

  /* ── La columna de texto ── */
  .kit__eyebrow {
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #0B7A3B;
    margin-bottom: 10px;
  }

  .kit__title {
    margin: 0 0 14px;
    font-size: clamp(26px, 3.4vw, 40px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.02em;
  }

  .kit__desc {
    margin: 0 0 22px;
    font-size: 15px;
    line-height: 1.6;
    color: #4a4a4a;
  }

  .kit__checks { list-style: none; margin: 0 0 22px; padding: 0; }
  .kit__checks li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 9px;
    font-size: 14.5px;
    line-height: 1.45;
  }
  .kit__checks li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.3em;
    inline-size: 16px;
    block-size: 16px;
    border-radius: 50%;
    background: rgba(37, 211, 102, 0.14);
  }
  .kit__checks li::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 0.52em;
    inline-size: 5px;
    block-size: 9px;
    border: solid #16a34a;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }

  .kit__precio { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
  .kit__precio-ahora { font-size: 28px; font-weight: 800; }
  .kit__precio-antes { font-size: 16px; color: #9a9a9a; text-decoration: line-through; }

  .kit__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 15px 28px;
    border-radius: 10px;
    background: var(--kit-negro);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    transition: transform 0.16s ease-out, background-color 0.2s ease;
  }
  .kit__cta:hover { background: #1d2a24; color: #fff; }
  .kit__cta:active { transform: scale(0.97); }

  .kit__regalo {
    margin-top: 20px;
    padding: 14px 16px;
    border: 1px solid rgba(200, 166, 107, 0.4);
    border-radius: 12px;
    background: #faf6ee;
  }
  .kit__regalo-t { display: block; font-size: 13.5px; font-weight: 800; margin-bottom: 4px; }
  .kit__regalo-x { display: block; font-size: 12.5px; line-height: 1.5; color: #6a6a6a; }

  .kit__urgencia {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 14px;
    font-size: 12.5px;
    font-weight: 700;
    color: #dc2626;
  }
  .kit__urgencia::before {
    content: "";
    inline-size: 7px;
    block-size: 7px;
    border-radius: 50%;
    background: #dc2626;
  }

  .kit__mayorista {
    display: block;
    margin-top: 14px;
    font-size: 12.5px;
    font-weight: 700;
    color: #8a8a8a;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .kit__mayorista:hover { color: var(--kit-oro); }

  @media (max-width: 899px) {
    .kit__inner { grid-template-columns: 1fr; gap: 28px; }
  }

  @media (max-width: 749px) {
    .kit__inner { padding-inline: 16px; }
    .kit__card { inline-size: 186px; }
    .kit__cta { inline-size: 100%; }
  }

  @media (prefers-reduced-motion: reduce) {
    .kit__dot::after { animation: none; }
  }
/* END_SNIPPET:indajaus-kit-indoor-css */

/* START_SNIPPET:indajaus-menu-flotante (INDEX:223) */
.menu-drawer {
    inset-block-start: 10px !important;
    inset-inline-start: 10px !important;
    inset-block-end: auto !important;
    block-size: calc(100dvh - 20px - env(safe-area-inset-bottom, 0px)) !important;
    max-block-size: calc(100dvh - 20px) !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    box-shadow: 0 28px 70px rgba(15, 21, 18, 0.34) !important;

    /* El cerrado se corre un poco mas, para que no asome por el costado. */
    transform: translateX(calc(-100% - 16px)) !important;
  }

  .menu-open > .menu-drawer {
    transform: translateX(0) !important;
  }

  /* ── MAS ANCHO ────────────────────────────────────────────────────────
     Estaba en 330px fijos. Pedido del 26/10: un poco mas ancho. Va a 360,
     que en un telefono de 375 queda topeado por el `calc` y ocupa todo el
     ancho util menos los 10px de aire de cada lado. En telefonos grandes
     gana los 30px de verdad.

     El tope por calc no se saca: sin el, en pantallas angostas el panel se
     pasaria de la pantalla. */
  @media (max-width: 749px) {
    .menu-drawer {
      /* Otro 5% menos, pedido del 27/10. Venia de 360 tras el 15% del
         26/10. En un telefono de 375 el cajon pasa de 355 a 337. */
      inline-size: min(342px, calc(100vw - 38px)) !important;
      max-inline-size: calc(100vw - 20px) !important;
    }
  }

  /* ── LA CRUZ DE CERRAR ────────────────────────────────────────────────
     Medida antes de tocar: 52x52 pero con fondo transparente, sin borde y
     con el trazo fino. O sea que el area existia pero no se veia, y por eso
     "no tiene presencia": uno no sabe que ahi hay un boton.

     Ahora es una pastilla con borde y fondo translucido, el mismo criterio
     que la cruz del carrito, y el dibujo adentro crece. El area tactil no
     cambia: ya estaba bien. */
  .menu-drawer > .menu-drawer__close-button {
    margin-block-start: 6px;
    margin-inline-end: 6px;
    inline-size: 44px !important;
    block-size: 44px !important;
    /* Medido: sin esto el contenedor flex lo aplastaba a 40 de alto. */
    min-block-size: 44px !important;
    flex: 0 0 auto !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    background: rgba(255, 255, 255, 0.10) !important;
    color: #FFFFFF !important;
    transition: background 180ms ease, border-color 180ms ease, transform 150ms ease-out;
  }

  .menu-drawer > .menu-drawer__close-button svg {
    inline-size: 20px !important;
    block-size: 20px !important;
    stroke-width: 2.1 !important;
  }

  .menu-drawer > .menu-drawer__close-button:active {
    transform: scale(0.93);
    background: rgba(255, 255, 255, 0.18) !important;
  }

  /* ── EL + , QUE SE VEA QUE ES UN BOTON ────────────────────────────────
     Medido: el area ya era de 44x51, o sea que de tamanio estaba bien. Lo
     que fallaba es que no se leia como boton: era un simbolo suelto contra
     el borde. Ahora lleva su propio recuadro, asi uno sabe donde apuntar.

     El `flex: 0 0 auto` es para que no se achique cuando el titulo es largo
     y ocupa dos lineas, que es cuando mas cuesta embocarle. */
  .menu-drawer__menu-item--mainlist .icon-plus {
    inline-size: 46px !important;
    block-size: 46px !important;
    flex: 0 0 auto !important;
    /* ── LA CRUZ ESTABA CORRIDA, NO TORCIDA ──────────────────────────
       Reportado por Rodrigo el 27/10: "las + estan torcidas, no
       centradas". Medido en 375 de ancho: el recuadro mide 46 y el
       dibujo de adentro caia 10px a la derecha del centro.

       No era el dibujo: era el relleno heredado. El span traia
       `padding: 12.8px 0 12.8px 20px`, veinte pixeles de un solo lado.
       Con `place-items: center` el contenido se centra en la caja de
       CONTENIDO, que con ese relleno arranca 20px adentro. La mitad de
       esos 20 es exactamente el desvio que se veia.

       Con el relleno en cero la caja vuelve a ser cuadrada y el signo
       queda en el medio de verdad. */
    padding: 0 !important;
    /* El theme le mete un scale(1.3) global a .svg-wrapper.icon-plus desde
       el bloque de overrides del header. Se neutraliza aca para que el
       tamanio sea predecible y, sobre todo, para que al abrirse el rotate
       no reemplace ese scale y el boton pegue un salto de 57 a 44. */
    transform: none !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    background: rgba(255, 255, 255, 0.07) !important;
    transition: background 180ms ease, transform 220ms cubic-bezier(0.23, 1, 0.32, 1);
  }

  .menu-drawer__menu-item--mainlist .icon-plus svg {
    inline-size: 18px !important;
    block-size: 18px !important;
    transform: none !important;
    transition: transform 240ms cubic-bezier(0.23, 1, 0.32, 1);
  }

  /* ── ABIERTO, EL + SE VUELVE UNA CRUZ ──────────────────────────────
     La primera version giraba el RECUADRO entero 135 grados. Un cuadrado
     redondeado girado asi es un rombo: en la pantalla se veia un diamante
     torcido, no una cruz. Error mio y se nota feo.

     Ahora gira solo el dibujo de adentro y la caja queda derecha, que es
     lo que uno espera de un boton. */
  details[open] > .menu-drawer__menu-item--mainlist .icon-plus {
    background: rgba(200, 166, 107, 0.18) !important;
    border-color: rgba(200, 166, 107, 0.45) !important;
  }

  details[open] > .menu-drawer__menu-item--mainlist .icon-plus svg {
    transform: rotate(135deg) !important;
  }

  /* ── UN 15% MAS CHICO ──────────────────────────────────────────────
     Pedido del 26/10. Medido antes de tocar: el titulo estaba en 23.24px
     y los sublinks en 14.5. Bajan a 19.5 y 12.5, que es ese 15%, y los
     respiros acompanian para que no quede texto chico en cajas grandes.

     El area tactil NO baja: el boton sigue en 48 y el alto de fila lo
     sostiene el padding. Mas chico de leer, igual de facil de tocar. */
  .menu-drawer__menu-item--mainlist .menu-drawer__menu-item-text {
    font-size: 18.5px !important;
    line-height: 1.25 !important;
  }

  .menu-drawer__menu-item--mainlist {
    gap: 10px;
    padding-block: 8px !important;
  }

  /* ── LOS TITULOS DE SUBCOLECCION, CON PRESENCIA ───────────────────────
     Eran links chicos y grises, apretados contra el borde, y se leian como
     una nota al pie del titulo de arriba en vez de como opciones para
     tocar.

     Ahora cada uno es una fila propia con fondo tenue y un canto dorado a
     la izquierda: se ve que es una lista de cosas donde entrar, y el area
     tactil pasa a ser toda la fila. Es la idea de las pastillas que pidio
     Rodrigo, pero en fila y no en chip, porque los nombres son largos
     ("Hojillas, blunts y conos") y en chip quedarian cortados. */
  .menu-drawer__menu--childlist > li > a {
    display: block;
    padding: 10px 12px !important;
    margin-block-end: 5px;
    border-radius: 10px;
    border-inline-start: 2px solid rgba(200, 166, 107, 0.55);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.92) !important;
    font-size: 11.9px !important;
    font-weight: 600 !important;
    line-height: 1.3;
    transition: background 160ms ease, border-color 160ms ease, transform 140ms ease-out;
  }

  .menu-drawer__menu--childlist > li > a:active {
    transform: scale(0.985);
    background: rgba(255, 255, 255, 0.10);
  }

  @media (hover: hover) and (pointer: fine) {
    .menu-drawer__menu--childlist > li > a:hover {
      background: rgba(255, 255, 255, 0.10);
      border-inline-start-color: #C8A66B;
    }
  }

  .menu-drawer__menu--childlist {
    padding-block: 4px 10px !important;
  }

  /* ── EL "VER TODO", QUE LO PONE EL SCRIPT ─────────────────────────────
     Va primero de la lista y en dorado, para que se note que no es una
     subcoleccion mas sino la categoria entera. Es lo que hace descubrible
     que la categoria tambien se puede abrir. */
  .ijmd__vertodo {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 12px 14px !important;
    margin-block-end: 8px;
    border-radius: 10px;
    border: 1px dashed rgba(200, 166, 107, 0.6) !important;
    border-inline-start-width: 2px !important;
    background: rgba(200, 166, 107, 0.10) !important;
    color: #C8A66B !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em;
    text-decoration: none;
  }

  .ijmd__vertodo::after {
    content: "→";
    margin-inline-start: auto;
    font-weight: 700;
  }

  /* ── LA ANIMACION DE DESPLEGAR Y PLEGAR ───────────────────────────────
     Un <details> nativo no anima: abre y cierra de golpe, y eso es lo que
     se sentia tosco. Medido antes de tocar: el contenido tenia
     `transition: all` sin duracion, o sea nada, y `animation: none`.

     La anima el script de abajo, no el CSS, porque hay que medir el alto
     real de cada lista y eso solo se puede hacer en JS. Aca solo queda el
     estado inicial del fundido. */
  .menu-drawer__menu--childlist {
    will-change: height;
  }

  /* ── EL SALE, PRIMERO DE TODO ─────────────────────────────────────────
     Pedido del 26/10. Venia quinto. En vez de tocar el menu en el admin,
     que afectaria tambien al escritorio, se reordena solo aca con `order`,
     que es lo unico que hace falta y no cambia el HTML.

     Para que `order` funcione la lista tiene que ser flex. Pasa de block a
     flex en columna, que visualmente es lo mismo. */
  .menu-drawer__navigation > ul,
  .menu-drawer__navigation > .menu-drawer__menu {
    display: flex;
    flex-direction: column;
  }

  /* 03/11/2026: la coleccion de ofertas paso de /collections/sale a
     /collections/ofertas. Sin actualizar este selector, el item perdia el
     order:-1 y dejaba de ir primero en el drawer. */
  .menu-drawer__navigation > ul > li:has(> a[href="/collections/ofertas"]) {
    order: -1;
  }

  @media (prefers-reduced-motion: reduce) {
    .menu-drawer__menu-item--mainlist .icon-plus,
    .menu-drawer__menu--childlist > li > a,
    .menu-drawer > .menu-drawer__close-button { transition: none; }
  }
/* END_SNIPPET:indajaus-menu-flotante */

/* START_SNIPPET:indajaus-pills-hermanos (INDEX:227) */
/* Shopify extrae y deduplica este bloque, asi que no se repite por
     tarjeta aunque el snippet corra decenas de veces en la pagina. */
  .ijpl {
    /* z-index: ver el comentario de arriba. El enlace invisible de la
       tarjeta esta estirado encima y si no, se come los clics. */
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    margin-block-end: 2px;
  }

  .ijpl__p {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border: 1px solid #E0DCD3;
    border-radius: 999px;
    background: #fff;
    color: #3A3A3A;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.01em;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 160ms cubic-bezier(0.23, 1, 0.32, 1),
                color 160ms cubic-bezier(0.23, 1, 0.32, 1);
  }

  .ijpl__p:active { transform: scale(0.97); }

  @media (hover: hover) and (pointer: fine) {
    .ijpl__p:hover { border-color: #C8A66B; color: #0F0F0F; }
  }

  /* La presentacion de esta tarjeta: marcada, y sin enlace porque ya
     estas parado en ella. */
  .ijpl__p--actual {
    border-color: #C8A66B;
    background: #C8A66B;
    color: #0F0F0F;
  }

  /* Sin stock: se muestra igual para que se vea que la presentacion
     existe, pero tachada. Esconderla haria creer que no se fabrica. */
  .ijpl__p--sin {
    color: #A6A6A6;
    text-decoration: line-through;
    border-style: dashed;
  }

  .ijpl__p--mas {
    border-style: dashed;
    color: #8A6D3B;
  }

  /* Tarjetas sobre fondo oscuro (carruseles del home). */
  .ijpl[data-ijpl-tono='oscuro'] .ijpl__p {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.06);
    color: #E8E3DA;
  }
  .ijpl[data-ijpl-tono='oscuro'] .ijpl__p--actual {
    border-color: #C8A66B;
    background: #C8A66B;
    color: #0F0F0F;
  }
  .ijpl[data-ijpl-tono='oscuro'] .ijpl__p--sin { color: rgba(255, 255, 255, 0.4); }

  @media (prefers-reduced-motion: reduce) {
    .ijpl__p { transition: none; }
    .ijpl__p:active { transform: none; }
  }
/* END_SNIPPET:indajaus-pills-hermanos */

/* START_SNIPPET:indajaus-scroll (INDEX:231) */
/* El hero se clava arriba. Va sticky y no fixed: sigue en el flujo, asi que
     la rueda y el dedo scrollean la pagina como siempre. */
  .malvo-hero-section {
    position: sticky;
    top: 0;
    z-index: 0;
  }

  /* Todo lo que viene despues viaja por encima y lo tapa.
     El fondo opaco no es decorativo: estas secciones son transparentes, y sin
     el se veria el hero a traves de los carruseles. */
  .malvo-hero-section ~ .shopify-section {
    position: relative;
    z-index: 1;
    background: #fff;
  }

  /* La primera que sube lleva el canto redondeado: es lo que da la sensacion
     de hoja levantandose sobre la foto.

     El overflow no es un extra, es lo que hace que el redondeo SE VEA: adentro
     hay un hijo con fondo blanco y esquinas rectas pegado al borde de arriba,
     que le pintaba encima y tapaba las puntas. Recortando, ese hijo queda
     dentro de la caja redondeada.

     Va clip y no hidden: hidden crea un contenedor de scroll y, si algo de
     adentro se pasa, se come la rueda. Clip recorta igual sin ese efecto. */
  .malvo-hero-section + .shopify-section {
    border-top-left-radius: 28px;
    border-top-right-radius: 28px;
    overflow: clip;
  }

  /* El pie tambien viaja por encima. El fondo solo a las que son
     transparentes: footer-utilities ya trae el suyo negro (#0F0F0F) y
     pisarselo lo dejaria blanco. */
  body:has(.malvo-hero-section) .shopify-section-group-footer-group {
    position: relative;
    z-index: 1;
  }

  body:has(.malvo-hero-section) .shopify-section-group-footer-group:not(.footer-utilities) {
    background: #fff;
  }

  /* ── EL BUSCADOR TIENE QUE DESPLEGAR POR ENCIMA ────────────────────
     Pedido de Rodrigo el 21/10/2026: al escribir en el buscador del
     home, el panel de resultados quedaba DETRAS de la seccion que
     viene abajo y no se leian los productos.

     Por que pasaba, medido en la tienda: el panel (.bsc__panel) es
     absolute con z-index 40, pero cuelga de la seccion del buscador,
     que por la regla de aca arriba tiene `position: relative` y
     `z-index: 1`. Eso le crea un contexto de apilamiento propio y lo
     encierra: ese 40 solo compite contra sus hermanos de adentro de la
     seccion, no contra el resto de la pagina. Y la seccion siguiente
     tiene TAMBIEN z-index 1, asi que entre hermanos empatados gana la
     que va despues en el DOM.

     Por eso no se toca el z-index del panel, que ya es alto y no sirve
     de nada ahi adentro: se sube la seccion entera un escalon.

     Los dos selectores no son un descuido. El de abajo (tres clases)
     le gana a `.malvo-hero-section ~ .shopify-section` (dos clases) sin
     depender del orden del archivo. El de arriba (dos clases) cubre las
     paginas donde no hay hero y por lo tanto nada de esto corre, como
     la ficha de producto, donde el buscador tambien aparece.

     Queda en 2 a proposito: alcanza para pasar a las secciones
     hermanas y sigue por debajo del header, que es sticky en 8 y tiene
     que quedar siempre arriba. */
  .shopify-section.buscador-indajaus-section,
  .malvo-hero-section ~ .shopify-section.buscador-indajaus-section {
    position: relative;
    z-index: 2;
  }

  /* ══════════════════════════════════════════════════════════════════
     EL HEADER REACCIONA CUANDO LA CORTINA LE LLEGA

     Pedido de Rodrigo el 21/10/2026: "cuando choca con el header, me
     gustaria que al header se le genere como un borde negro, una buena
     transicion, un lineado negro debajo, algo que quede premium".

     ── POR QUE HACE FALTA ────────────────────────────────────────────
     Medido en el home el 22/10/2026: el header es transparente, sin
     borde ni sombra. Arriba de todo eso esta bien, porque atras hay una
     foto y el header tiene que flotar sobre ella. Pero cuando la cortina
     sube, el header queda sobre blanco y no hay NADA que lo separe del
     contenido: el texto de la cortina se corta contra el borde de abajo
     del header, sin linea, y se lee como un error de maquetado.

     ── QUE APARECE ───────────────────────────────────────────────────
     Tres cosas juntas, que es lo que lo hace ver terminado y no pegado:

     1. Una linea de 1px abajo. Va como box-shadow `inset` y no como
        border-bottom a proposito: un borde de verdad suma 1px al alto
        del header y empuja la pagina entera un pixel cuando aparece.
        El inset se dibuja adentro y no mueve nada.
     2. Una sombra corta y cerrada, para que el header se despegue del
        contenido que le pasa por abajo.
     3. Fondo blanco casi opaco, asi lo que pasa por atras desaparece
        detras del header en vez de verse a medias.

     El negro va en tinta al 12 por ciento, no pleno: sobre blanco un
     negro pleno queda duro y se ve como una raya, no como un canto.

     240ms y cubic-bezier(0.23, 1, 0.32, 1), que arranca rapido y frena
     suave. La transicion se declara por propiedad y no con `all`: el
     header trae `transition: all` del theme, que sin duracion no anima
     nada, y ademas `all` haria animar cualquier cosa que cambie.
     ══════════════════════════════════════════════════════════════════ */
  .shopify-section-group-header-group.header-section {
    transition:
      background-color 240ms cubic-bezier(0.23, 1, 0.32, 1),
      box-shadow 240ms cubic-bezier(0.23, 1, 0.32, 1),
      -webkit-backdrop-filter 240ms cubic-bezier(0.23, 1, 0.32, 1),
      backdrop-filter 240ms cubic-bezier(0.23, 1, 0.32, 1) !important;
  }

  html.ij-cortina-tocando .shopify-section-group-header-group.header-section {
    background-color: rgba(255, 255, 255, 0.9) !important;
    box-shadow:
      inset 0 -1px 0 rgba(15, 21, 18, 0.12),
      0 10px 24px -18px rgba(15, 21, 18, 0.45) !important;
  }

  /* El desenfoque solo en escritorio. En telefono obliga al navegador a
     guardar una copia desenfocada de lo que hay atras en cada cuadro del
     scroll, y no paga: la linea y la sombra ya resuelven el problema. */
  @media screen and (min-width: 750px) {
    html.ij-cortina-tocando .shopify-section-group-header-group.header-section {
      background-color: rgba(255, 255, 255, 0.74) !important;
      -webkit-backdrop-filter: saturate(150%) blur(12px) !important;
      backdrop-filter: saturate(150%) blur(12px) !important;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .shopify-section-group-header-group.header-section {
      transition: none !important;
    }
  }
/* END_SNIPPET:indajaus-scroll */

/* START_SNIPPET:indajaus-servicios-css (INDEX:235) */
.svx {
    --svx-ease: cubic-bezier(0.23, 1, 0.32, 1);
    --svx-oro: #C8A66B;
    --svx-tinta: #0F1512;
    /* ── 09/11/2026 · LA LINEA, MAS MARCADA ───────────────────
       Rodrigo: "que los servicios los bordes tengan mejor color y
       mas pronunciado".

       Era rgba(15,21,18,0.12): gris frio al 12%, o sea casi nada.
       Sobre cards blancas ese borde no existia y las cards se
       derramaban sobre el fondo.

       Ahora es el dorado de la casa al 55%. Dorado y no gris porque
       el gris en esta seccion no significa nada, y el dorado ya es
       el color con el que la tienda marca lo suyo. Al 55% sobre
       blanco da un tono arena que se ve a un metro de distancia sin
       gritar. */
    --svx-linea: rgba(200, 166, 107, 0.55);

    /* ── 09/11/2026 · EL FONDO VUELVE ──────────────────────────
       Esta manana lo pase a la crema #F6F1E7 para despegar la
       seccion de los carruseles blancos. Rodrigo: "solo le cambiaste
       el fondo xD, horrible, volver al anterior fondo". Vuelve
       #F7F6F3, que es el que estaba. Lo que se pedia no era el
       fondo: era esto de aca abajo, los bordes y la card activa. */
    background: #F7F6F3;
    color: var(--svx-tinta);
    padding-block: 88px;
  }

  .svx__inner {
    max-width: 1320px;
    margin: 0 auto;
    padding-inline: 40px;
  }

  .svx__head {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 48px;
    align-items: end;
    margin-block-end: 44px;
  }

  .svx__title {
    margin: 0;
    font-size: clamp(30px, 3.8vw, 48px);
    line-height: 1.03;
    letter-spacing: -0.03em;
    font-weight: 700;
    text-wrap: balance;
  }

  .svx__subtitle {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.68;
    color: rgba(15, 21, 18, 0.58);
  }

  .svx__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }

  .svx__card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--svx-linea);
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 320ms var(--svx-ease), border-color 240ms ease, box-shadow 240ms ease;
  }

  .svx__media {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: #E6E3DC;
  }

  .svx__img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
    transition: transform 640ms var(--svx-ease);
  }

  /* El numero va calado sobre la foto, grande y sin caja. Es lo que le da
     identidad a la card sin agregarle un elemento mas. */
  .svx__num {
    position: absolute;
    inset-block-end: 10px;
    inset-inline-start: 16px;
    z-index: 2;
    font-size: 46px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    color: transparent;
    /* Mismo numero calado de siempre —esa decision no se toca— pero
       en el dorado de la casa en vez de blanco. Es el mismo dibujo
       diciendo de quien es. */
    -webkit-text-stroke: 1.5px rgba(200, 166, 107, 0.95);
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
  }

  .svx__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(12, 16, 14, 0.5) 0%, rgba(12, 16, 14, 0.05) 46%, transparent 72%);
    pointer-events: none;
  }

  .svx__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 8px;
    padding: 20px 22px 22px;
  }

  .svx__card-title {
    margin: 0;
    font-size: 18px;
    line-height: 1.26;
    font-weight: 700;
    letter-spacing: -0.015em;
  }

  .svx__desc {
    margin: 0;
    font-size: 14px;
    line-height: 1.62;
    color: rgba(15, 21, 18, 0.56);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* ── EL LINEADO ────────────────────────────────────────────────
     Una hairline entre lo que se LEE y lo que se TOCA. No es adorno:
     separa el texto del servicio de la accion, que es la unica raya
     que una card necesita. Y va adentro, no arriba del titulo, que
     es justo lo que se habia bajado en la v1. */
  .svx__desc {
    padding-block-end: 16px;
    border-block-end: 1px solid var(--svx-linea);
  }

  /* CTA de texto con subrayado que crece. Sin circulito ni pastilla. */
  .svx__cta {
    position: relative;
    align-self: flex-start;
    margin-block-start: auto;
    padding-block-start: 14px;
    font-size: 13.5px;
    font-weight: 700;
    /* En dorado: antes era tinta y el unico color aparecia recien al
       pasar el mouse, o sea nunca en un telefono. */
    color: #8E6F30;
  }

  .svx__cta::after {
    content: "";
    position: absolute;
    inset-block-end: -2px;
    inset-inline-start: 0;
    inline-size: 100%;
    block-size: 1.5px;
    background: var(--svx-oro);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 320ms var(--svx-ease);
  }

  /* ── LA CARD QUE SE ESTA MIRANDO ───────────────────────────────
     09/11/2026, Rodrigo: "que el servicio que esta viendo el cliente
     este como mas grande y con un buena linea de borde".

     En compu "la que esta viendo" es la del mouse encima. Antes solo
     se levantaba 4px; ahora ademas crece un 2% y el borde dorado se
     duplica con un anillo de 1.5px por fuera, que es lo que se lee
     como "linea marcada" sin mover la caja.

     El anillo va en box-shadow y no en border-width: cambiar el borde
     agranda la caja y las tres cards de la grilla se correrian entre
     si al pasar el mouse. */
  @media (hover: hover) and (pointer: fine) {
    .svx__card:hover {
      transform: translateY(-4px) scale(1.02);
      border-color: #C8A66B;
      box-shadow:
        0 0 0 1.5px rgba(200, 166, 107, 0.55),
        0 14px 32px rgba(142, 111, 48, 0.16);
    }
    .svx__card:hover .svx__img { transform: scale(1.055); }
    .svx__card:hover .svx__cta::after { transform: scaleX(1); }
  }

  .svx__card:active { transform: scale(0.99); }

  .svx__card:focus-visible {
    outline: 2px solid var(--svx-oro);
    outline-offset: 3px;
  }

  .svx__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-block-start: 40px;
    padding-block-start: 26px;
    border-block-start: 1px solid var(--svx-linea);
  }

  .svx__note {
    margin: 0;
    font-size: 14.5px;
    color: rgba(15, 21, 18, 0.56);
  }

  .svx__btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 14px 26px;
    border-radius: 999px;
    background: var(--svx-tinta);
    color: #fff;
    font-size: 14.5px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 160ms ease-out, background 220ms ease;
  }

  .svx__btn svg {
    inline-size: 16px;
    block-size: 16px;
    transition: transform 260ms var(--svx-ease);
  }

  @media (hover: hover) and (pointer: fine) {
    .svx__btn:hover { background: #1C2622; }
    .svx__btn:hover svg { transform: translateX(3px); }
  }

  .svx__btn:active { transform: scale(0.97); }

  .svx__btn:focus-visible {
    outline: 2px solid var(--svx-oro);
    outline-offset: 3px;
  }

  @media (max-width: 1099px) {
    .svx__head { grid-template-columns: 1fr; gap: 18px; align-items: start; }
    .svx__grid { grid-template-columns: repeat(2, 1fr); }
  }

  /* En mobile pasa a carril con snap: seis cards apiladas son un scroll
     eterno para una seccion de paso. */
  @media (max-width: 749px) {
    .svx { padding-block: 56px; }
    .svx__inner { padding-inline: 20px; }
    .svx__head { margin-block-end: 28px; }
    .svx__grid {
      display: flex;
      gap: 14px;
      margin-inline: -20px;
      padding-inline: 20px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }
    .svx__grid::-webkit-scrollbar { display: none; }
    .svx__card { flex: 0 0 80%; scroll-snap-align: start; }
    .svx__num { font-size: 38px; }
    .svx__btn { inline-size: 100%; justify-content: center; }
  }

  @media (prefers-reduced-motion: reduce) {
    .svx__card, .svx__img, .svx__cta::after, .svx__btn, .svx__btn svg { transition: none; }
  }
/* END_SNIPPET:indajaus-servicios-css */

/* START_SNIPPET:indajaus-sticky-css (INDEX:238) */
.ijsk {
    --ijsk-ease: cubic-bezier(0.23, 1, 0.32, 1);
    --ijsk-oro: #C8A66B;
    --ijsk-oro-oscuro: #8A6D3B;
    --ijsk-tinta: #0F1512;
    --ijsk-gris: #4A4A4A;
    --ijsk-linea: rgba(15, 21, 18, 0.1);
    --ijsk-verde: #0A6B2F;
    --ijsk-verde-fondo: #E8F9EF;

    /* El alto de la pastilla de entrega. Lo usan la caja, los dos mensajes
       y el translate del riel: si se escribe suelto en cada lado, cambiar
       uno rompe la rotacion. */
    --ijsk-pastilla: 26px;
  }

  /* Este theme no pone border-box global, y la barra lleva un ancho
     declarado: sin esto el padding y el borde se le SUMAN. En un telefono de
     375 medía 377 y se salía un pixel por cada lado. Medido el 05/11/2026. */
  .ijsk .sticky-add-to-cart__bar,
  .ijsk .sticky-add-to-cart__bar * {
    box-sizing: border-box;
  }

  /* ── LA CAJA ───────────────────────────────────────────────────────── */
  .ijsk .sticky-add-to-cart__bar {
    position: fixed;
    bottom: 14px;
    left: 50%;
    z-index: calc(var(--layer-sticky) - 1);
    display: flex;
    flex-direction: column;
    width: min(620px, calc(100vw - 24px));
    padding: 8px;
    border: 1px solid var(--ijsk-linea);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(18px) saturate(170%);
    -webkit-backdrop-filter: blur(18px) saturate(170%);
    box-shadow: 0 18px 44px rgba(15, 21, 18, 0.18);
    opacity: 0;
    transform: translateX(-50%) translateY(calc(100% + 32px));
  }

  @media (prefers-reduced-motion: no-preference) {
    .ijsk .sticky-add-to-cart__bar {
      transition: transform 340ms var(--ijsk-ease), opacity 260ms var(--ijsk-ease);
    }
  }

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

  /* ── 1. EL DETALLE ─────────────────────────────────────────────────── */
  .ijsk__panel {
    padding: 12px 10px 10px;
    border-bottom: 1px solid var(--ijsk-linea);
    margin-bottom: 8px;
  }

  .ijsk__panel[hidden] { display: none; }

  /* La flechita gira con el panel. Es la unica pista de que ese precio
     es un boton: quieta, parece una decoracion. */
  .ijsk__ver svg {
    transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  [data-ijsk-abrir][aria-expanded="true"] .ijsk__ver svg {
    transform: rotate(180deg);
  }
  @media (prefers-reduced-motion: reduce) {
    .ijsk__ver svg { transition: none; }
  }

  .ijsk__panel-cab {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 11px;
  }

  .ijsk__media {
    flex: none;
    inline-size: 46px;
    block-size: 46px;
    border-radius: 11px;
    overflow: hidden;
    background: #F4F1EA;
  }

  .ijsk__media img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
  }

  .ijsk__panel-txt { min-inline-size: 0; }

  .ijsk__title {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ijsk-tinta);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .ijsk .sticky-add-to-cart__variant,
  .ijsk__pres {
    margin: 3px 0 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--ijsk-gris);
  }

  .ijsk__pres b { color: var(--ijsk-tinta); font-weight: 800; }

  .ijsk__cuenta { margin: 0; }

  .ijsk__cuenta > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 0;
  }

  .ijsk__cuenta dt {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ijsk-gris);
  }

  .ijsk__cuenta dd {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--ijsk-tinta);
    font-variant-numeric: tabular-nums;
  }

  .ijsk__cuenta-desc[hidden] { display: none; }
  .ijsk__cuenta-desc dt, .ijsk__cuenta-desc dd { color: var(--ijsk-verde); font-weight: 700; }

  .ijsk__cuenta-total {
    margin-top: 2px;
    padding-top: 9px !important;
    border-top: 1px solid var(--ijsk-linea);
  }

  .ijsk__cuenta-total dt { font-size: 13px; font-weight: 800; color: var(--ijsk-tinta); }
  .ijsk__cuenta-total dd { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; }

  .ijsk__panel-nota {
    margin: 9px 0 0;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--ijsk-gris);
  }

  /* ── 2. LA PASTILLA DE ENTREGA ─────────────────────────────────────── */
  .ijsk__entrega {
    block-size: var(--ijsk-pastilla);
    margin: 0 2px 7px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--ijsk-verde-fondo);
  }

  .ijsk__entrega[hidden] { display: none; }

  /* Dos mensajes apilados, y el riel sube uno. Con translate y no con
     opacidad sola para que se lea como que pasa a la siguiente. */
  .ijsk__riel {
    display: block;
    translate: 0 0;
  }

  @media (prefers-reduced-motion: no-preference) {
    .ijsk__riel { transition: translate 520ms var(--ijsk-ease); }
  }

  .ijsk__riel[data-ijsk-en='1'] { translate: 0 calc(var(--ijsk-pastilla) * -1); }

  .ijsk__msj {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    block-size: var(--ijsk-pastilla);
    padding: 0 12px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: var(--ijsk-verde);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .ijsk__msj b { font-weight: 800; }

  /* ── 3. LA FILA ────────────────────────────────────────────────────── */
  .ijsk__fila {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .ijsk__resumen {
    flex: 0 1 auto;
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    padding: 4px 8px 4px 10px;
    border: 0;
    border-radius: 12px;
    background: none;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    transition: background 160ms ease, transform 140ms ease-out;
  }

  .ijsk__resumen:active { transform: scale(0.98); }

  @media (hover: hover) and (pointer: fine) {
    .ijsk__resumen:hover { background: rgba(15, 21, 18, 0.045); }
  }

  .ijsk__precio { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }

  .ijsk__ahora {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ijsk-tinta);
    font-variant-numeric: tabular-nums;
  }

  .ijsk__fila-antes { display: inline-flex; align-items: baseline; gap: 5px; }
  .ijsk__antes { font-size: 12.5px; color: #8A8580; text-decoration: line-through; }

  .ijsk__off {
    padding: 1px 6px;
    border-radius: 999px;
    background: #FDECEC;
    color: #C62828;
    font-size: 11px;
    font-weight: 800;
  }

  .ijsk__ver {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--ijsk-oro-oscuro);
  }

  .ijsk__ver svg {
    inline-size: 12px;
    block-size: 12px;
    rotate: 0deg;
    transition: rotate 220ms var(--ijsk-ease);
  }

  .ijsk__resumen[aria-expanded='true'] .ijsk__ver svg { rotate: 180deg; }

  /* ── EL BOTON ──────────────────────────────────────────────────────── */
  .ijsk .ijsk__cta {
    flex: 1 1 auto;
    min-block-size: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 20px;
    border: 0;
    border-radius: 14px;
    background: var(--ijsk-oro);
    color: var(--ijsk-tinta);
    font-family: inherit;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.01em;
    text-decoration: none;
    cursor: pointer;
    transition: filter 160ms ease, transform 140ms ease-out;
  }

  .ijsk .ijsk__cta:active { transform: scale(0.985); }

  @media (hover: hover) and (pointer: fine) {
    .ijsk .ijsk__cta:hover { filter: brightness(1.04); }
  }

  .ijsk .ijsk__cta[hidden] { display: none; }

  /* El verde de WhatsApp con tinta oscura encima: blanco sobre este verde
     da 1,9:1 y no se lee. */
  .ijsk .ijsk__cta--wa {
    background: #25D366;
    color: #06270F;
  }

  .ijsk .ijsk__cta--wa svg { inline-size: 18px; block-size: 18px; flex: none; }

  /* ── TELEFONO ──────────────────────────────────────────────────────── */
  @media (max-width: 480px) {
    .ijsk .sticky-add-to-cart__bar {
      bottom: 6px;
      width: calc(100vw - 16px);
      padding: 6px;
      border-radius: 18px;
    }

    /* 44px es el minimo para que el dedo no falle (es el piso que pide
       Apple en sus guias). De ahi para abajo no se toca. */
    .ijsk .ijsk__cta { min-block-size: 44px; font-size: 14.5px; padding: 0 16px; }

    .ijsk { --ijsk-pastilla: 22px; }
    .ijsk__entrega { margin-block-end: 5px; }
    .ijsk__msj { font-size: 11px; }

    .ijsk__ahora { font-size: 16px; }
    .ijsk__ver { font-size: 11px; }
    .ijsk__resumen { padding: 2px 6px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .ijsk .sticky-add-to-cart__bar,
    .ijsk__riel,
    .ijsk__resumen,
    .ijsk .ijsk__cta,
    .ijsk__ver svg { transition: none; }
  }
/* END_SNIPPET:indajaus-sticky-css */

/* START_SNIPPET:indajaus-sucursales-css (INDEX:241) */
.sucx {
    position: relative;
    background: #0F1512;
    overflow: hidden;
  }

  .sucx__pista {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .sucx__pista::-webkit-scrollbar { display: none; }

  .sucx__slide {
    position: relative;
    flex: 0 0 100%;
    scroll-snap-align: start;
    display: grid;
    min-block-size: clamp(560px, 78vh, 820px);
    /* Imprescindible para el paneo: la foto mide mas que el slide. */
    overflow: hidden;
  }

  .sucx__foto {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  /* ── Paneo lateral (celular) ── */
  @keyframes sucx-pan {
    from { transform: translateX(0); }
    to   { transform: translateX(var(--sucx-pan, 0px)); }
  }

  @media (max-width: 749px) {
    /* Solo el cambio de caja: la foto pasa a su ancho natural escalado. */
    .sucx__foto.is-paneando {
      inset-block: 0;
      inset-inline: 0 auto;
      inline-size: auto;
      max-inline-size: none;
      block-size: 100%;
      object-fit: fill;
    }
    /* Y recien despues la animacion, cuando el JS ya midio la distancia.
       Separadas a proposito: si fueran una sola clase, el primer cuadro
       animaria con la distancia vieja. */
    .sucx__foto.is-animando {
      animation: sucx-pan var(--sucx-pan-dur, 9s) ease-in-out infinite alternate;
      will-change: transform;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .sucx__foto.is-animando { animation: none; }
  }

  /* Nada encima de la foto hasta el 48%. El 0.22 del principio es solo
     para que el header no se pierda contra un cielo claro. */
  .sucx__velo {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      rgba(15, 21, 18, 0.22) 0%,
      rgba(15, 21, 18, 0) 18%,
      rgba(15, 21, 18, 0) 48%,
      rgba(15, 21, 18, 0.5) 60%,
      rgba(15, 21, 18, 0.86) 70%,
      rgba(15, 21, 18, 0.95) 100%
    );
  }

  .sucx__info {
    position: relative;
    z-index: 2;
    align-self: end;
    justify-self: center;
    max-inline-size: 680px;
    padding: 0 24px 64px;
    text-align: center;
    color: #fff;
    /* Red de seguridad para el pixel mas claro que se le escape al
       degrade. No reemplaza al velo, lo acompana. */
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
  }

  .sucx__volanta {
    margin: 0 0 7px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
  }

  .sucx__nombre {
    margin: 0 0 8px;
    font-size: clamp(32px, 4.8vw, 54px);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: #fff;
  }

  .sucx__dir {
    margin: 0 0 3px;
    font-size: clamp(14px, 1.3vw, 16px);
    font-weight: 700;
  }

  .sucx__horario {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.92);
  }

  /* Arranca oculto: el JS lo muestra solo si pudo resolver la hora de
     Montevideo. Mejor sin cartel que con un horario inventado. Va en la
     misma linea que los botones para no sumar alto. */
  .sucx__estado {
    display: none;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-shadow: none;
  }
  .sucx__estado[data-estado="abierto"] {
    display: inline-block;
    background: rgba(37, 211, 102, 0.22);
    color: #6ee7a0;
  }
  .sucx__estado[data-estado="cerrado"] {
    display: inline-block;
    background: rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.92);
  }

  .sucx__acciones {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px 14px;
    margin-block-start: 14px;
  }

  .sucx__btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 17px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    text-shadow: none;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.16s ease-out;
  }
  .sucx__btn:hover {
    background: #fff;
    border-color: #fff;
    color: #0F1512;
  }
  .sucx__btn:active { transform: scale(0.97); }
  .sucx__btn svg { inline-size: 13px; block-size: 13px; flex: none; }

  .sucx__wsp {
    font-size: 11.5px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.92);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
  }
  .sucx__wsp:hover { color: var(--sucx-oro, #C8A66B); }

  /* ── Barra de abajo: flecha, rayas, flecha ── */
  .sucx__barra {
    position: absolute;
    inset-block-end: 20px;
    inset-inline: 0;
    z-index: 3;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    pointer-events: none;
  }
  .sucx__barra > * { pointer-events: auto; }

  .sucx__flecha {
    inline-size: 28px;
    block-size: 28px;
    display: grid;
    place-items: center;
    padding: 0;
    border: none;
    background: none;
    color: rgba(255, 255, 255, 0.82);
    cursor: pointer;
    transition: color 0.2s ease;
  }
  .sucx__flecha:hover { color: #fff; }
  .sucx__flecha svg { inline-size: 15px; block-size: 15px; }

  .sucx__rayas { display: flex; gap: 8px; }

  .sucx__raya {
    inline-size: 24px;
    block-size: 2px;
    padding: 0;
    border: none;
    background: rgba(255, 255, 255, 0.42);
    cursor: pointer;
    transition: background-color 0.25s ease;
  }
  .sucx__raya[aria-current="true"] { background: #fff; }

  @media (max-width: 749px) {
    .sucx__slide { min-block-size: clamp(520px, 80vh, 680px); }
    .sucx__info { padding: 0 20px 62px; max-inline-size: 420px; }

    /* En vertical el bloque ocupa mas alto en proporcion, asi que la parte
       oscura arranca antes. Aun asi la mitad de arriba queda limpia. */
    .sucx__velo {
      background: linear-gradient(
        180deg,
        rgba(15, 21, 18, 0.24) 0%,
        rgba(15, 21, 18, 0) 16%,
        rgba(15, 21, 18, 0) 42%,
        rgba(15, 21, 18, 0.56) 55%,
        rgba(15, 21, 18, 0.88) 66%,
        rgba(15, 21, 18, 0.95) 100%
      );
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .sucx__pista { scroll-behavior: auto; }
  }
/* END_SNIPPET:indajaus-sucursales-css */

/* START_SNIPPET:indajaus-tira-sticky (INDEX:245) */
/* Una custom property comun NO se anima: el navegador no sabe que tipo
     de dato tiene, asi que salta de un valor al otro. Registrandola como
     color, si. Sin esto el desvanecido del carril aparece y desaparece de
     golpe en vez de fundirse. */
  @property --cbzs-izq {
    syntax: "<color>";
    inherits: false;
    initial-value: #000;
  }
  @property --cbzs-der {
    syntax: "<color>";
    inherits: false;
    initial-value: #000;
  }

  /* ── SIN FONDO ──────────────────────────────────────────────────
     08/11/2026, pedido de Rodrigo: que quede "sin fondo".

     Antes era una barra blanca de punta a punta, con borde arriba y
     sombra: un piso opaco que partia la pantalla en dos y le comia
     alto a la lista de productos.

     Ahora no hay barra: hay un desvanecido. El crema de la casa sube
     desde abajo y se disuelve antes de llegar a los productos, asi que
     no hay ningun borde duro y la pagina sigue respirando. El
     desvanecido no es decoracion: sin algo detras, los nombres de las
     categorias caerian sobre fotos de producto y un dia no se leerian.

     Y NO lleva backdrop-filter. La regla de la casa es que el vidrio
     va en lo que se monta sobre el contenido, nunca en una fila de
     elementos: aca hay hasta quince tarjetas desplazandose con el dedo
     y un desenfoque por elemento arruina el scroll en un telefono
     barato. El unico vidrio de la tira es el de la barra de buscar,
     que es UNA pieza. */
  /* ── LA TIRA VA DEBAJO DE CUALQUIER CAJON ──────────────────────
     08/11/2026, Rodrigo: "abro el menu hamburguesa y el sticky de
     abajo esta por encima del menu, y jamas puede ser eso".

     Tenia 40, un numero puesto a ojo para ganarle a todo. El theme
     tiene una escala de capas declarada en theme-styles-variables:
     sticky 8, menu del header 12, velos 16, cajon del menu 18, y 20
     el techo. Un 40 no esta "arriba de la escala": esta FUERA de la
     escala, y por eso le ganaba hasta al menu, que es justamente lo
     que nunca puede pasar. Un cajon es una pantalla nueva; nada de la
     pantalla anterior puede flotar encima.

     Ahora va en 14: arriba del contenido y del header, debajo de los
     velos y de los cajones.

     Y abajo queda el cinturon: con un cajon abierto la tira se
     desvanece sola. El theme marca ese estado con `scroll-lock` en el
     <html>, asi que vale para el menu, el carrito y el buscador por
     igual. Se desvanece en vez de desaparecer con display none, que
     cortaria la transicion y se veria el salto. Con los dos —el numero
     correcto y el cinturon— esto no vuelve aunque manana entre un
     cajon nuevo con otra capa. */
  html[scroll-lock] .cbzs {
    opacity: 0;
    pointer-events: none;
  }

  .cbzs {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 14;
    transition: opacity 160ms ease;
    display: none;
    padding: 26px 0 calc(7px + env(safe-area-inset-bottom, 0px));
    /* ── SOLIDO DONDE HAY CONTENIDO, DESVANECIDO SOLO ARRIBA ──────
       08/11/2026, segunda corregida. El degradado anterior llegaba al
       72% con 0,82 de opacidad, asi que DETRAS de las tarjetas se
       seguian leyendo los botones de los productos: "Consultar stock",
       "Pocas unidades". Eso no es transparencia elegante, es suciedad:
       dos textos peleando por el mismo lugar.

       Ahora el crema es SOLIDO en todo el alto del contenido y el
       desvanecido vive solo en los 28px de aire de arriba, que es donde
       tiene que estar: su trabajo es que no haya un borde duro cortando
       la pagina, no dejar ver a traves. */
    background: linear-gradient(
      to top,
      #FAF5EA 0%,
      #FAF5EA 80%,
      rgba(250, 245, 234, 0.86) 92%,
      rgba(250, 245, 234, 0) 100%
    );
    opacity: 0;
    translate: 0 100%;
  }

  /* La barra de buscar: la unica pieza con vidrio de verdad. */
  .cbzs__buscar {
    display: flex;
    align-items: center;
    gap: 9px;
    /* ── QUE NO SE PASE DE LA PANTALLA ──────────────────────────
       08/11/2026, Rodrigo: "a la barra de busqueda hay que cortarle
       el ancho para que calce perfecto".

       Con margenes laterales el ancho es lo que sobra, y si algo de
       afuera corre la caja, el sobrante se va para un lado. Ahora el
       ancho es un numero: el de la tira menos 32, centrado. No hay
       forma de que se pase, venga de donde venga.

       El tope de 520 es para tablets: estirada a lo ancho de un iPad
       una barra de buscar no se lee como un control, se lee como una
       franja. */
    inline-size: calc(100% - 32px);
    max-inline-size: 520px;
    margin: 0 auto 9px;
    padding: 0 14px;
    block-size: 36px;
    border-radius: 11px;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.7);
    background: linear-gradient(135deg, rgba(255,255,255,0.96) 0%, rgba(250,245,234,0.82) 48%, rgba(255,255,255,0.96) 100%);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    box-shadow:
      0 1px 2px rgba(20, 16, 8, 0.05),
      0 10px 24px -12px rgba(20, 16, 8, 0.34),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
    color: #6E655A;
    font-size: 12.5px;
    font-weight: 500;
    transition: transform 150ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 200ms ease;
  }

  /* ── EL PASO AL BUSCADOR ───────────────────────────────────────
     08/11/2026, Rodrigo: "mejorar las transiciones cuando pasa al
     buscador".

     El problema no era la animacion del buscador: era que entre el
     dedo y el buscador no pasaba NADA. Tocabas una barra muerta y un
     rato despues aparecia un panel. Ese hueco se siente como lentitud
     aunque el panel tarde lo mismo.

     Ahora la barra se hunde en el momento del toque. Son 140ms y casi
     no se ven, pero son la diferencia entre "ya te escuche" y "no se
     si aprete". El panel sale igual de rapido; lo que cambia es que
     la espera ahora empieza con una respuesta.

     0.97 y no menos: un boton que se achica mucho parece que se
     rompe. */
  .cbzs__buscar:active {
    transform: scale(0.97);
    box-shadow:
      0 1px 2px rgba(20, 16, 8, 0.05),
      0 4px 10px -8px rgba(20, 16, 8, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }
  @media (prefers-reduced-motion: reduce) {
    .cbzs__buscar:active { transform: none; }
  }
  .cbzs__buscar svg {
    inline-size: 17px;
    block-size: 17px;
    flex: none;
    color: #8A6D3B;
  }
  /* El :active de esta barra vive mas arriba, junto a su transicion.
     Habia dos reglas compitiendo y ganaba la de abajo por estar ultima:
     un 0.985 que no se siente. Una sola, y que se note. */

  .cbzs[hidden] { display: none; }

  @media (max-width: 749px) {
    .cbzs { display: block; }
  }

  @media (prefers-reduced-motion: no-preference) {
    .cbzs {
      transition: opacity 240ms cubic-bezier(0.23, 1, 0.32, 1),
                  translate 420ms cubic-bezier(0.32, 0.72, 0, 1);
    }
    /* Al irse no hay escalonado ni demoras: se va entera y rapido.
       Escalonar una salida es hacer esperar a alguien que ya decidio. */
    .cbzs:not(.is-visible) {
      transition-duration: 200ms, 240ms;
    }
  }

  .cbzs.is-visible { opacity: 1; translate: 0 0; }

  /* ── LA ENTRADA, EN DOS TIEMPOS ──────────────────────────────────
     Mas limpio no es mas movimiento: es MENOS cosas moviendose, pero
     en orden. Sube la tira entera, y adentro entran dos piezas —la
     barra y el carril— con sesenta milisegundos de diferencia. Eso
     alcanza para que se lean como dos cosas distintas.

     Las tarjetas NO entran una por una: quince cosas animandose a la
     vez en un telefono es ruido, y ademas cada una sigue siendo una
     capa que el navegador tiene que componer mientras el dedo
     scrollea. */
  /* ── LA ENTRADA ──────────────────────────────────────────────────
     08/11/2026, Rodrigo: "las animaciones estan medias novatas".

     Tenia razon y el problema era que TODO entraba igual: el carril
     completo subia como un bloque, que es lo que hace cualquiera.

     Ahora entran las tarjetas una por una, 34ms de diferencia entre
     cada una, naciendo desde 0.9 de escala. Eso es lo que hace que se
     lea como una cosa armada y no como un div que aparecio.

     Es una animacion de UNA sola pasada, no un loop: cuesta un suspiro
     al aparecer y despues no queda nada corriendo mientras el dedo
     scrollea, que es la regla de la casa.

     Nunca desde scale(0): nada en el mundo real aparece de la nada. */
  .cbzs__buscar {
    opacity: 0;
    translate: 0 10px;
  }
  @media (prefers-reduced-motion: no-preference) {
    .cbzs__buscar {
      transition: opacity 280ms ease, translate 440ms cubic-bezier(0.23, 1, 0.32, 1);
      transition-delay: 60ms;
    }
    .cbzs.is-visible .cbzs__item {
      animation: cbzs-entra 420ms cubic-bezier(0.23, 1, 0.32, 1) backwards;
      animation-delay: calc(170ms + var(--cbzs-i, 0) * 34ms);
    }
  }
  @keyframes cbzs-entra {
    from { opacity: 0; translate: 0 12px; scale: 0.9; }
    to   { opacity: 1; translate: 0 0;    scale: 1; }
  }
  .cbzs.is-visible .cbzs__buscar {
    opacity: 1;
    translate: 0 0;
  }

  /* overscroll-behavior-inline evita que al llegar al final del carril el
     gesto se lo lleve la pagina. */
  .cbzs__rail {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    /* La ultima tarjeta se desvanece en vez de quedar cortada a la
       mitad. Cortada parece un error de maquetacion; desvanecida dice
       "hay mas, segui con el dedo", que es la verdad. */
    /* ── EL DEDO SIEMPRE DEJA TARJETAS ENTERAS ────────────────────
       08/11/2026, Rodrigo: "siguen cortandose las fotos".

       El desvanecido de la derecha avisaba que habia mas, pero al
       soltar el dedo el carril frenaba en cualquier lado y podia quedar
       media tarjeta a la vista. Con el iman, el desplazamiento siempre
       termina con una tarjeta completa pegada al margen.

       proximity y no mandatory: mandatory pelea con el dedo cuando el
       gesto es corto y se siente trabado. proximity solo corrige si ya
       quedo cerca, que es lo que uno espera.

       scroll-padding para que la tarjeta no se pegue al borde mismo:
       respeta los 14px de aire de la izquierda. */
    scroll-snap-type: x proximity;
    scroll-padding-inline-start: 14px;

    /* ── EL DESVANECIDO SOLO EXISTE SI HAY MAS ────────────────────
       08/11/2026, Rodrigo: "siguen cortandose las fotos".

       Tenia razon y el error era mio: el desvanecido estaba SIEMPRE.
       Cuando llegabas al final del carril la ultima tarjeta seguia
       saliendo lavada, y ahi el degradado ya no avisa nada: miente.
       Una foto a medio borrar sin razon se lee como un defecto.

       Ahora el carril dice en que parte esta y el desvanecido aparece
       solo del lado que todavia tiene contenido. Al llegar a la punta
       la ultima tarjeta se ve ENTERA y nitida, que es lo correcto:
       no hay nada mas, no hay nada que insinuar.

       Las dos mascaras se declaran por separado y no con una variable
       porque Safari viejo no interpola variables dentro de mask-image. */
    --cbzs-izq: #000;
    --cbzs-der: #000;
    mask-image: linear-gradient(to right, var(--cbzs-izq) 0, #000 26px, #000 calc(100% - 34px), var(--cbzs-der) 100%);
    -webkit-mask-image: linear-gradient(to right, var(--cbzs-izq) 0, #000 26px, #000 calc(100% - 34px), var(--cbzs-der) 100%);
    transition: --cbzs-izq 220ms ease, --cbzs-der 220ms ease;
    /* El aire de la derecha es para que el ultimo item pueda quedar fuera
       del boton de WhatsApp, que vive en esa esquina. */
    padding: 0 68px 0 14px;
  }

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

  /* Sin estas clases el carril no se desvanece por ningun lado: es el
     estado de "entra todo", y es el que tiene que verse si algun dia el
     javascript no corre. Que el respaldo sea la foto nitida y no la
     lavada. */
  .cbzs__rail.hay-izq { --cbzs-izq: transparent; }
  .cbzs__rail.hay-der { --cbzs-der: transparent; }

  .cbzs__item {
    flex: none;
    scroll-snap-align: start;
    inline-size: 68px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    color: #2A241C;
    transition: transform 140ms ease-out;
  }

  .cbzs__item:active { transform: scale(0.94); }

  /* Cuadradas con esquina blanda, como las de la cabecera de arriba.
     Redondas parecian avatares de personas; cuadradas se leen como
     categorias, que es lo que son. Y asi las dos tiras de la pagina
     hablan el mismo idioma. */
  .cbzs__foto {
    inline-size: 52px;
    block-size: 52px;
    display: grid;
    place-items: center;
    overflow: hidden;
    /* El borde blanco de 1px sobre fotos oscuras hacia un halo y las
       fotos parecian recortadas con tijera. Una linea de tinta al 8%
       apoya la forma sin dibujarse encima. */
    border: 1px solid rgba(15, 21, 18, 0.08);
    border-radius: 16px;
    background: #F4F1EA;
    box-shadow: 0 2px 8px -3px rgba(20, 16, 8, 0.26);
    transition: border-color 180ms ease, box-shadow 180ms ease;
  }

  /* ── POR QUE SE VEIAN CORTADAS ─────────────────────────────────
     08/11/2026, Rodrigo, tercera vez: "sigue cortandose las fotos".

     Lo medi y el error era real, no de gusto: dentro de una caja de
     52x52 la imagen se estaba dibujando **50 x 71**. El `block-size:
     100%` no llegaba a aplicarse —el `height: auto` del tema le gana
     en la cascada— asi que la foto conservaba su proporcion original
     (72x101, son apaisadas y verticales, no cuadradas) y sobresalia
     21px por abajo. Con `overflow: hidden` eso se recorta: se veia
     el techo de la foto y el producto quedaba cortado al pie.

     La tira de arriba de esta misma pagina lo hacia bien desde
     siempre: sus pills dibujan la imagen en 62x62 dentro de 64x64,
     cuadrada y centrada. Asi que esto no es un invento, es ponerle a
     la tira de abajo lo que la de arriba ya tenia.

     `aspect-ratio: 1` es el seguro: si manana alguien vuelve a pisar
     el alto con un `height: auto`, la proporcion la sostiene igual.
     Y `object-position` al centro, que es donde esta el producto. */
  .cbzs__foto img {
    inline-size: 100%;
    block-size: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    object-position: 50% 50%;
    display: block;
  }

  .cbzs__ini {
    font-size: 15px;
    font-weight: 800;
    color: #A89880;
  }

  .cbzs__foto--buscar {
    border-color: rgba(200, 166, 107, 0.5);
    background: #FBF6EC;
    color: #8A6D3B;
  }

  .cbzs__foto--buscar svg { inline-size: 19px; block-size: 19px; }

  /* ── LAS ETIQUETAS NO SE CORTAN ──────────────────────────────────
     08/11/2026, Rodrigo: "que no se corten".

     Antes era una linea con puntos suspensivos y la mitad de las
     categorias quedaban en "Desmorru…", "Cenicero…". Un nombre a
     medias no ayuda a elegir: es tan inutil como no ponerlo.

     Ahora entran en DOS lineas, y el alto es fijo —dos renglones
     siempre, tenga una palabra o tres— para que las tarjetas queden
     alineadas abajo y el carril no suba y baje al desplazarse.
     Las poquisimas que no entren en dos lineas se recortan ahi, que
     ya es un nombre leible y no una silaba. */
  .cbzs__label {
    inline-size: 100%;
    /* 9.5 y no 10.5. Medido: "Desmorrugadores" ocupa 93px a 10.5 y 84
       a 9.5, contra una tarjeta de 68. Achicar no lo hace entrar —para
       eso la tarjeta tendria que medir 84 y entrarian cuatro en
       pantalla— pero deja los nombres de dos palabras comodos en sus
       dos renglones en vez de apretados contra el borde. */
    font-size: 9.5px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    block-size: calc(9.5px * 1.25 * 2);
    /* ── EL GUION ──────────────────────────────────────────────────
       `hyphens: auto` NO alcanza. Lo probe en vivo: el <html> declara
       lang="es", la propiedad llega aplicada, y aun asi "Almacenamiento"
       salia "Almacenami / ento", partido al medio y sin guion. El
       navegador necesita un diccionario de separacion en espaniol y este
       Chrome no lo tiene.

       Asi que el corte lo decide el javascript de abajo, con la regla de
       silabas, y mete guiones BLANDOS. `hyphens: manual` —el valor por
       defecto— los respeta en todos los navegadores desde siempre.

       Un guion blando es invisible salvo que la palabra se parta justo
       ahi. Por eso se pueden poner de mas sin ensuciar nada, y por eso
       copiar el texto sigue dando "Almacenamiento" entero.

       break-word queda de ultimo recurso: si algun dia aparece una
       palabra que la regla no sabe cortar, preferimos que se parta fea a
       que se desborde de la tarjeta. */
    word-break: normal;
    overflow-wrap: break-word;
    -webkit-hyphens: manual;
    hyphens: manual;
  }

  .cbzs__item.is-aca .cbzs__foto {
    border-color: #C8A66B;
    box-shadow: 0 0 0 2.5px rgba(200, 166, 107, 0.25);
  }

  .cbzs__item.is-aca .cbzs__label { color: #8A6D3B; }
/* END_SNIPPET:indajaus-tira-sticky */

/* START_SNIPPET:indajaus-ver-orden (INDEX:246) */
/* ── EL TEXTO QUE ABRE ─────────────────────────────────────────────
     Centrado y pegado al boton de agregar: 6px, lo justo para que no se
     toque pero se lea como parte del mismo bloque. */
  /* 08/11/2026, segunda pasada. Rodrigo: "el ver orden actual mas chico,
     en negro, mas pegado al boton y menos espaciado con lo de abajo".

     12px, negro, y pegado: 1px arriba y 0 abajo. Los 40px de area
     tactil los sigue dando el relleno —que es invisible— asi que el
     dedo tiene donde caer aunque el texto sea chico. Achicar el DIBUJO
     sin achicar el AREA es la unica forma de tener las dos cosas. */
  .ijvo-abrir {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    inline-size: 100%;
    margin-block-start: 1px;
    min-block-size: 40px;
    padding: 9px 12px;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: #0F0F0F;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: color 180ms ease;
  }

  .ijvo-abrir[hidden] { display: none; }
  .ijvo-abrir:hover { color: #4A4238; }
  .ijvo-abrir:focus-visible { outline: 2px solid #C8A66B; outline-offset: 2px; border-radius: 8px; }

  .ijvo-abrir__txt { text-decoration: underline; text-underline-offset: 4px; }

  .ijvo-abrir__n {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 99px;
    background: #16A34A;
    color: #FFFFFF;
    font-size: 10.5px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
  }

  /* Late cuando cambia el numero: el texto esta FUERA de donde mira el
     ojo al tocar "agregar", asi que el latido es lo que avisa que el
     producto entro. */
  @media (prefers-reduced-motion: no-preference) {
    .ijvo-abrir__n.is-nuevo { animation: ijvo-late 620ms cubic-bezier(0.23, 1, 0.32, 1); }
  }
  @keyframes ijvo-late {
    0%   { transform: scale(1); }
    38%  { transform: scale(1.22); }
    100% { transform: scale(1); }
  }

  .ijvo-abrir__chev {
    inline-size: 13px;
    block-size: 13px;
    flex: none;
    transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  .ijvo-abrir[aria-expanded="true"] .ijvo-abrir__chev { transform: rotate(180deg); }

  /* ── LA LISTA ──────────────────────────────────────────────────────
     08/11/2026, Rodrigo: "que el diseño sea mas normal, literal como en
     el sticky add to cart del product page cuando le das a ver detalle".

     Era una tarjeta de vidrio con borde dorado. Ahi se equivoco el
     nivel: una tarjeta es una cosa que se destaca, y esto es apenas el
     detalle de algo que ya esta. Compitiendo con el boton de agregar,
     que es lo unico que tiene que destacarse en esa zona.

     El panel del sticky lo resuelve con lo minimo: sin fondo, sin
     borde, apenas una linea abajo. Se copia eso. Lo que organiza la
     lista son las lineas entre productos, no una caja alrededor. */
  .ijvo-panel {
    inline-size: 100%;
    margin-block-start: 0;
    padding: 4px 2px 8px;
    border: 0;
    border-block-end: 1px solid rgba(42, 36, 28, 0.12);
    background: none;
  }

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

  .ijvo-linea {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-block: 7px;
  }
  .ijvo-linea + .ijvo-linea { border-block-start: 1px solid rgba(42, 36, 28, 0.08); }

  .ijvo-linea__foto {
    flex: none;
    inline-size: 40px;
    block-size: 40px;
    border-radius: 9px;
    overflow: hidden;
    background: #F3EFE6;
    border: 1px solid rgba(42, 36, 28, 0.08);
  }
  .ijvo-linea__foto img { inline-size: 100%; block-size: 100%; object-fit: contain; display: block; }

  .ijvo-linea__txt { min-inline-size: 0; flex: 1; }

  .ijvo-linea__nom {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    color: #2A241C;
  }

  .ijvo-linea__cant {
    font-size: 11px;
    color: #6E655A;
    margin-block-start: 1px;
  }

  .ijvo-linea__plata {
    flex: none;
    font-size: 12.5px;
    font-weight: 800;
    color: #2A241C;
    font-variant-numeric: tabular-nums;
  }

  /* El que ya estas mirando, marcado. Es la respuesta a "¿este ya lo
     puse?", que es la pregunta por la que se abre esto. */
  .ijvo-linea.is-esta { background: rgba(22, 163, 74, 0.07); border-radius: 9px; }
  .ijvo-linea__esta {
    display: inline-block;
    margin-inline-start: 6px;
    padding: 1px 7px;
    border-radius: 99px;
    background: #16A34A;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: 1px;
  }

  .ijvo-pie {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-block-start: 9px;
    padding-block-start: 9px;
    border-block-start: 1px solid rgba(42, 36, 28, 0.12);
  }
  .ijvo-pie__et {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6E655A;
  }
  .ijvo-pie__n {
    font-size: 16px;
    font-weight: 800;
    color: #2A241C;
    font-variant-numeric: tabular-nums;
  }

  .ijvo-editar {
    display: block;
    inline-size: 100%;
    margin-block-start: 4px;
    min-block-size: 40px;
    padding: 10px;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    color: #6B5426;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    touch-action: manipulation;
  }
/* END_SNIPPET:indajaus-ver-orden */

/* START_SNIPPET:indajaus-vidrio (INDEX:247) */
:root {
    --ijv-blur: 26px;
    --ijv-sat: 160%;

    /* Claro: para paneles con texto oscuro, que es casi todo en esta web. */
    --ijv-claro: rgba(255, 255, 255, 0.72);
    --ijv-claro-2: rgba(255, 255, 255, 0.52);
    --ijv-claro-borde: rgba(255, 255, 255, 0.6);
    --ijv-claro-luz: rgba(255, 255, 255, 0.85);
    --ijv-claro-caja: rgba(255, 255, 255, 0.55);
    --ijv-claro-linea: rgba(15, 21, 18, 0.1);

    /* Oscuro: para cuando el panel va sobre una foto, como la tienda
       cerrada. Ahi el texto es blanco. */
    --ijv-oscuro: rgba(10, 14, 12, 0.72);
    --ijv-oscuro-2: rgba(10, 14, 12, 0.5);
    --ijv-oscuro-borde: rgba(255, 255, 255, 0.16);
    --ijv-oscuro-luz: rgba(255, 255, 255, 0.2);

    --ijv-sombra: 0 32px 80px rgba(20, 16, 8, 0.3);
    --ijv-velo: rgba(14, 18, 15, 0.42);
  }

  /* ── EL PANEL ──────────────────────────────────────────────────────
     Se aplica con la clase o copiando estas tres lineas; lo importante es
     que los valores salgan de las variables de arriba. */
  .ijv {
    position: relative;
    border: 1px solid var(--ijv-claro-borde);
    background: linear-gradient(135deg, var(--ijv-claro) 0%, var(--ijv-claro-2) 48%, var(--ijv-claro) 100%);
    backdrop-filter: blur(var(--ijv-blur)) saturate(var(--ijv-sat));
    -webkit-backdrop-filter: blur(var(--ijv-blur)) saturate(var(--ijv-sat));
    box-shadow: var(--ijv-sombra), inset 0 1px 0 var(--ijv-claro-luz);
    overflow: hidden;
  }

  .ijv--oscuro {
    border-color: var(--ijv-oscuro-borde);
    background: linear-gradient(135deg, var(--ijv-oscuro) 0%, var(--ijv-oscuro-2) 48%, var(--ijv-oscuro) 100%);
    box-shadow: var(--ijv-sombra), inset 0 1px 0 var(--ijv-oscuro-luz);
  }

  /* El brillo. Va en un ::before para no gastar un elemento. */
  .ijv::before {
    content: "";
    position: absolute;
    inset-block-start: -55%;
    inset-inline-start: -25%;
    inline-size: 115%;
    block-size: 115%;
    background: radial-gradient(closest-side, rgba(255, 255, 255, 0.5), transparent 70%);
    transform: rotate(-12deg);
    pointer-events: none;
    z-index: 0;
  }

  .ijv--oscuro::before {
    background: radial-gradient(closest-side, rgba(255, 255, 255, 0.13), transparent 70%);
  }

  .ijv > * { position: relative; z-index: 1; }

  /* ── EL VELO ───────────────────────────────────────────────────────
     Lo que va detras de un modal. Desenfocar tambien el fondo es la mitad
     del efecto: sin esto el vidrio no tiene de donde sacar la imagen. */
  .ijv-velo {
    background: var(--ijv-velo);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
  }

  /* ── EL RESPALDO ───────────────────────────────────────────────────
     Sin `backdrop-filter` el panel queda translucido de verdad y el texto
     cae sobre el contenido de atras. Se vuelve opaco. */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .ijv { background: #F7F6F3; }
    .ijv--oscuro { background: #0F1512; }
    .ijv-velo { background: rgba(14, 18, 15, 0.72); }
  }
/* END_SNIPPET:indajaus-vidrio */

/* START_SNIPPET:jumbo-text (INDEX:248) */
.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:251) */
.facets input:checked + label {
    font-weight: 500;
  }

  .facets .checkbox .icon-checkmark {
    transition: border-color 0.2s ease, background-color 0.2s ease;
  }

  .facets .checkbox:not(.checkbox--disabled):hover .icon-checkmark {
    border-color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  /* Hover state for checked checkboxes - targeting via adjacent sibling */
  .facets .checkbox:not(.checkbox--disabled):hover .checkbox__input:checked + .checkbox__label .icon-checkmark {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-85));
  }

  .facets .checkbox:not(.checkbox--disabled):hover .checkbox__label-text {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-90));
  }

  .facets .checkbox .checkbox__label-text {
    transition: color 0.2s ease, font-weight 0.2s ease;
  }

  /* Pill style */
  .facets__pill-label {
    --pill-label-padding-inline: var(--padding-xs);
    --pill-label-border-radius: var(--style-border-radius-md);
    --pill-label-border-width: var(--variant-picker-button-border-width);
    --pill-label-height: var(--button-size-md);
    --pill-label-focus-outline-color: var(--color-foreground);
    --pill-label-color: var(--color-foreground);
    --pill-label-color-rgb: var(--color-foreground-rgb);
    --pill-label-background-color: var(--color-background);
    --pill-label-background-color-rgb: var(--color-background-rgb);
    --pill-label-border-opacity: var(--facets-low-opacity);

    display: inline-flex;
    position: relative;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 var(--pill-label-border-width) rgb(var(--pill-label-color-rgb) / var(--opacity-10-25));
    border-radius: var(--pill-label-border-radius);
    height: var(--pill-label-height);
    width: 100%;
    padding-inline: var(--pill-label-padding-inline);
    color: rgb(var(--pill-label-color-rgb));
    background-color: rgb(var(--pill-label-background-color-rgb));
    cursor: pointer;
    transition: color var(--animation-speed) var(--animation-easing),
      background-color var(--animation-speed) var(--animation-easing);
    outline-color: var(--pill-label-focus-outline-color);

    &:hover {
      --pill-label-border-opacity: 100%;
    }
  }

  .facets__pill-input {
    &:checked + .facets__pill-label {
      --pill-label-color-rgb: var(--color-background-rgb);
      --pill-label-background-color-rgb: var(--color-foreground-rgb);
      --pill-label-border-opacity: 0;

      font-weight: 500;
    }

    &:disabled + .facets__pill-label {
      opacity: var(--disabled-opacity);
      cursor: not-allowed;

      &:hover {
        --pill-label-border-opacity: var(--facets-low-opacity);
      }
    }
  }

  .facets__status-wrapper {
    display: flex;
    align-items: center;
  }

  .facets--drawer .facets__status-wrapper {
    @media screen and (max-width: 749px) {
      gap: var(--gap-3xs);
    }
  }

  .facets--vertical .facets__status-wrapper {
    gap: var(--gap-xs);
  }

  .facets--horizontal .facets__status-wrapper {
    gap: 0;
  }

  .facets__pill-input:disabled + .facets__pill-label svg {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: var(--style-border-radius-md);
  }

  .facets__pill-label svg line {
    stroke-width: 1.5px;
    stroke: rgb(var(--color-foreground-rgb) / var(--facets-low-opacity));
  }

  .facets__pill-wrapper {
    position: relative;
  }

  .facets__pill-input {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    opacity: 0;
    cursor: pointer;
  }

  /* Swatches */
  .facets__status--swatches {
    display: none;
  }

  .facets__swatch-wrapper {
    display: flex;
  }

  .variant-option__swatch-wrapper {
    position: relative;
    overflow: visible;
    border-radius: var(--options-border-radius);
  }

  .variant-option--swatches-disabled {
    pointer-events: none;
    cursor: not-allowed;
  }

  .variant-option--swatches-disabled .variant-option__swatch-wrapper {
    overflow: hidden;
  }

  .facets--horizontal .facets__status--swatches {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .facets--horizontal .sorting-filter .facets__status {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets__status--swatches .swatch {
    width: calc(var(--variant-picker-swatch-width) / 1.5);
    height: calc(var(--variant-picker-swatch-height) / 1.5);
  }

  .facets__status--swatches .swatch + .swatch {
    margin-left: calc(var(--variant-picker-swatch-width) / -3);
    outline: 1px solid rgb(var(--color-background-rgb));
  }

  .facets__inputs-wrapper .facets__inputs-list--images {
    display: grid;
    grid-template-columns: repeat(var(--image-columns), 125px);
    gap: var(--gap-sm);
  }

  .facets--drawer .facets__inputs-wrapper .facets__inputs-list--images {
    grid-template-columns: repeat(3, 1fr);

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

  .facets--vertical .facets__inputs-wrapper .facets__inputs-list--images {
    grid-template-columns: repeat(2, 1fr);
  }

  .facets--drawer .facets__inputs-list--images {
    padding-top: var(--padding-xs);
  }

  .facets__image-wrapper {
    aspect-ratio: 1/1;
    width: 100%;
    padding: var(--padding-xs);
    position: relative;
    overflow: hidden;
  }

  .facets__image-wrapper img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    border-radius: calc(var(--border-radius) / 2);
  }

  .facets__image-label {
    width: 100%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-block-end: var(--padding-xs);
    cursor: pointer;
  }

  .facets__inputs-list-item--disabled .facets__image-label {
    cursor: not-allowed;
  }

  .facets__inputs-list-item:not(.facets__inputs-list-item--disabled) .facets__image-label:hover {
    font-weight: 500;
  }

  /* Filter-specific variant-option styles */
  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch {
    --focus-outline: var(--focus-outline-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-35-55));

    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label:has(:focus-visible) .swatch {
    --focus-outline: var(--focus-outline-width) solid currentcolor;

    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label:has(:focus-visible) {
    outline: none;
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover {
    outline: none;
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:has(:checked) {
    --focus-outline: none;
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:has(:checked) .swatch {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  .facets__inputs-list--swatches .variant-option__button-label {
    --color-variant-text: var(--color-foreground);
  }

  .facets__inputs-list--swatches {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 26px;
      --variant-picker-swatch-height: 26px;
    }
  }

  .facets--vertical .facets__inputs-wrapper .facets__inputs-list--swatches-grid {
    gap: var(--gap-sm);
  }

  .facets--vertical .facets__inputs-list--swatches .facets__inputs-list-item {
    display: flex;
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid {
    --columns: 2;

    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid .variant-option--swatches {
    cursor: pointer;
    overflow: visible;
  }

  .facets__inputs-list-item--disabled .variant-option--swatches {
    cursor: not-allowed;
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid label {
    cursor: pointer;
    word-break: break-word;
    white-space: normal;
  }

  .facets__inputs-list--swatches-grid .facets__inputs-list-item--disabled label {
    cursor: not-allowed;
  }

  .facets__inputs-list-item--disabled .variant-option__button-label {
    cursor: not-allowed;
  }

  .facets__inputs-wrapper
    .facets__inputs-list--swatches-grid
    .variant-option__button-label--has-swatch:has(input[type='checkbox']) {
    align-items: center;
    overflow: visible;
    justify-content: flex-start;
    display: flex;
    width: 100%;
    flex-basis: unset;
    gap: var(--gap-sm);
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid .variant-option__button-label:has(:checked) {
    color: rgb(var(--color-foreground-rgb));
    background-color: rgb(var(--color-background-rgb));
    font-weight: 500;
    transition: font-weight 0.2s ease;
  }

  .facets .variant-option--swatches {
    --options-border-radius: var(--variant-picker-swatch-radius);

    width: auto;
  }

  .facets__inputs-list-item:not(.facets__inputs-list-item--disabled) .variant-option__button-label:hover {
    font-weight: 500;
  }

  /* Variant option images (filters) */
  .variant-option--images {
    --image-facet-border-width: var(--variant-picker-button-border-width);
    --image-facet-border-opacity: var(--facets-low-opacity);
    --image-facet-border-radius: var(--style-border-radius-xs);

    position: relative;
    border-radius: var(--image-facet-border-radius);
    box-shadow: inset 0 0 0 var(--image-facet-border-width)
      rgb(var(--color-foreground-rgb) / var(--image-facet-border-opacity));

    &:hover {
      --image-facet-border-opacity: 100%;
    }

    &:has(input:checked) {
      font-weight: 500;
      transition: font-weight 0.2s ease;
    }

    &:has(input:checked):hover {
      --image-facet-border-width: calc(var(--variant-picker-button-border-width) + 0.5px);
    }

    &:has(input:focus-visible) {
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: var(--focus-outline-offset);
    }
  }

  .variant-option--images input {
    /* remove the checkbox from the page flow */
    position: absolute;

    /* set the dimensions to match those of the label */
    inset: 0;

    /* hide it */
    opacity: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    cursor: pointer;
  }

  .facets__inputs-list-item--disabled .variant-option--images {
    --image-facet-border-opacity: 0;

    opacity: var(--disabled-opacity);
    cursor: not-allowed;

    &:hover {
      --image-facet-border-opacity: 0;
    }

    img {
      opacity: var(--disabled-opacity);
    }

    input,
    label,
    .facets__image-label {
      cursor: not-allowed;
    }

    .facets__image-wrapper {
      border: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-30));
      border-radius: var(--image-facet-border-radius);
    }
  }

  /* Position disabled-svg */
  .variant-option--images svg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    stroke-width: var(--border-width);
    stroke: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  /* Position label text and handle overflow */
  .facets__inputs-list-item,
  .variant-option--images {
    min-width: 0;
  }

  /* Safari < 16.4 outline border-radius workaround - filter-specific */
  @supports not (background-color: rgb(from red 150 g b / alpha)) {
    .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch {
      outline: none;
      position: relative;
      overflow: visible;
    }

    .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch::after {
      content: '';
      position: absolute;
      inset: calc(-1 * var(--focus-outline-offset));
      border: var(--focus-outline);
      border-radius: var(--focus-outline-radius, 50%);
      background-color: transparent;
      display: inherit;
    }
  }
/* END_SNIPPET:list-filter */

/* START_SNIPPET:localization-form (INDEX:252) */
/* Localization */
  localization-form-component {
    display: flex;
    width: var(--width, auto);

    @media screen and (min-width: 750px) {
      position: relative;
    }
  }

  localization-form-component[data-show-filter='false'] .country-selector-form__wrapper {
    padding-block-start: var(--padding-xs);
  }

  .localization-form {
    width: 100%;
  }

  localization-form-component .button:is(:not(.country-filter__reset-button)) {
    --button-color: var(--color-primary);
    --button-background-color: var(--language-button-background-color, var(--color-background));
    --button-border-color: var(--language-button-border-color, var(--color-border));

    text-decoration-color: transparent;
    text-decoration-thickness: 0.075em;
    text-underline-offset: 0.125em;
    transition: text-decoration-color var(--animation-speed) var(--animation-easing);
  }

  localization-form-component .button:is(:not(.country-filter__reset-button)):hover,
  .localization-form__list-item:hover,
  .localization-form__list-item:focus {
    --button-color: var(--color-primary-hover);

    background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-8));
  }

  .localization-form__list-item[aria-current='true'] {
    --button-color: var(--color-primary-active);

    background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-10));
  }

  .localization-form__list-item-disabled {
    pointer-events: none;
  }

  .localization-form__list-item:focus-visible {
    outline: none;
  }

  localization-form-component .localization-selector {
    display: flex;
    align-items: center;
    gap: var(--margin-2xs);
  }

  localization-form-component .country-filter__search-icon {
    left: 8px;
    right: auto;
    color: var(--color-foreground-muted);
    pointer-events: none;
  }

  .country-filter__search-icon .svg-wrapper svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .disclosure {
    width: 100%;
  }

  .localization-form__list {
    position: relative;
    width: 100%;
    padding-block: 0 var(--padding-xs);
    font-size: var(--font-size-lg);
    scroll-padding: var(--padding-xs) 0;
    overflow-y: auto;
    white-space: nowrap;

    /* Hide scrollbar which would cause extra right padding in Safari */
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .localization-form__list-item:not([hidden]) {
    margin-block-end: var(--margin-3xs);
    display: flex;
    gap: var(--margin-sm);
    padding: 8px;
    border-radius: 8px;
    line-height: var(--font-line-height-md);
    align-items: center;
    text-align: start;
    cursor: pointer;
    transition: background-color var(--animation-speed) var(--animation-easing);

    .country {
      flex: 1;
      color: var(--color-foreground);
    }

    &:hover {
      background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
    }

    &[aria-current='true'] {
      .country {
        font-weight: 500;
      }
    }
  }

  .localization-form__list-item#no-results-message {
    grid-template-columns: 1fr;
    text-align: center;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .is-searching .localization-form__list-item .country {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-80));
  }

  .localization-form__list-item .country mark {
    font-weight: 500;
    background: none;
    color: var(--color-foreground);
  }

  .country-filter {
    position: relative;
    padding: var(--padding-xs);
    border-bottom: var(--style-border-width) solid transparent;
    transition: border-color var(--animation-values);
  }

  .country-filter.is-scrolled {
    border-color: var(--color-border);
  }

  .country-selector-form__wrapper {
    overflow-y: auto;
    max-height: 100%;
    flex-grow: 1;
  }

  .language-selector {
    display: flex;
    gap: var(--gap-xs);
    padding: var(--padding-md) var(--padding-lg);
    position: relative;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .language-selector__label {
    flex-shrink: 0;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .localization-form__select {
    border: none;
    color: var(--color-foreground);
    appearance: none;
    background-color: var(--color-input-background);
    padding-block: var(--padding-3xs);
    padding-inline: var(--padding-xs) calc(var(--icon-size-xs) + var(--padding-xs));
    text-align: right;
    cursor: pointer;
    max-width: 40vw;
    text-overflow: ellipsis;
    field-sizing: content;

    &:focus-visible {
      outline: var(--focus-outline-width) solid currentcolor;
    }

    &:focus {
      outline: none;
    }
  }

  #header-component[transparent] localization-form-component .localization-form .localization-form__select {
    background-color: transparent;
  }

  .localization-form__select option {
    background-color: var(--color-input-background);
    color: var(--color-input-text);
  }

  .language-selector .svg-wrapper.icon-caret {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
  }

  .language-selector--collapse-space {
    padding-inline-end: var(--padding-2xs);
  }

  .language-selector--collapse-space .localization-form__select {
    padding-inline-end: var(--icon-size-xs);
  }

  .language-selector--collapse-space .svg-wrapper.icon-caret {
    right: 0;
  }

  .localization-form .icon-checkmark {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .localization-form .svg-wrapper.icon-checkmark {
    visibility: hidden;
  }

  .localization-form__list-item[aria-current='true'] .svg-wrapper.icon-checkmark {
    visibility: visible;
  }

  .country-filter__input {
    width: 100%;
    height: 44px;
    font-size: var(--font-size-lg);
    padding: var(--padding-md) var(--padding-lg) var(--padding-md) calc(var(--margin-md) + var(--padding-xl));
    border: 1px solid var(--color-foreground);
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    outline-offset: -1px;

    @media screen and (min-width: 750px) {
      height: 36px;
    }
  }

  .country-filter__input::placeholder {
    color: inherit;
  }

  .country-filter .field {
    position: relative;
  }

  .country-filter .field__label {
    font-size: var(--font-size-lg);
    left: var(--margin-2xl);
    top: var(--margin-xl);
    pointer-events: none;
    position: absolute;
  }

  .country-filter__input:focus ~ .field__label,
  .country-filter__input:not(:placeholder-shown) ~ .field__label,
  .country-filter__input:-webkit-autofill ~ .field__label {
    font-size: var(--font-size-xs);
    top: var(--margin-xs);
  }

  .country-filter .field__button:not([hidden]) {
    display: flex;
    height: fit-content;
    position: absolute;
    padding: 0;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    align-items: center;
    background-color: transparent;
    color: var(--color-input-text);
    border: 0;
  }

  input[type='search']::-webkit-search-cancel-button {
    appearance: none;
  }

  .country-selector__close-button {
    display: none;
  }
/* END_SNIPPET:localization-form */

/* START_SNIPPET:media (INDEX:253) */
.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:261) */
.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:263) */
.pagination {
    --pagination-size: 36px;
    --pagination-inset: 2px;
    --pagination-radius: 6;

    display: flex;
    justify-content: center;
    padding: var(--padding-xl) var(--padding-sm);
    margin-top: var(--padding-xl);
    position: relative;
  }

  .pagination__list {
    display: flex;
    gap: 0;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
  }

  .pagination__item {
    width: var(--pagination-size);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
  }

  .pagination__link {
    display: grid;
    place-items: center;
    color: var(--color-foreground);
    text-decoration: none;
    width: 100%;
    height: 100%;
    user-select: none;
    position: relative;
    outline-color: var(--color-foreground);
    -webkit-tap-highlight-color: transparent;
    font-size: var(--font-size--md);
    font-weight: var(--font-weight-normal);
    border-radius: calc(var(--pagination-radius) * 1px);
    transition: color var(--hover-transition-duration) var(--hover-transition-timing),
      opacity var(--hover-transition-duration) var(--hover-transition-timing);
  }

  .pagination__link:focus-visible {
    outline: 2px solid var(--color-foreground);
    outline-offset: 2px;
  }

  .pagination__link--current {
    color: var(--color-background);
    font-weight: var(--font-weight-medium);
    cursor: default;
  }

  .pagination__link--gap {
    cursor: default;
    pointer-events: none;
  }

  .pagination__link--arrow {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .pagination__link--disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
  }

  .pagination__link svg {
    width: 0.5rem;
    height: 0.75rem;
    flex-shrink: 0;
  }

  .pagination__item--mobile-only {
    display: none;
  }

  /* Fallback for browsers without anchor positioning support */
  @supports not (anchor-name: --pagination-active) {
    .pagination__link:not(.pagination__link--gap)::before {
      content: '';
      position: absolute;
      inset: var(--pagination-inset);
      border-radius: calc(var(--pagination-radius) * 1px);
      background: rgb(var(--color-foreground-rgb) / var(--opacity-10));
      z-index: -1;
      opacity: 0;
      transition: background var(--hover-transition-duration) var(--hover-transition-timing),
        opacity var(--hover-transition-duration) var(--hover-transition-timing);
    }

    .pagination__link[aria-current='page']::before {
      background: var(--color-foreground);
      opacity: 1;
    }

    .pagination__link:hover:not([aria-current='page'], .pagination__link--gap, .pagination__link--disabled)::before {
      opacity: 1;
    }
  }

  /* Modern approach with anchor positioning */
  @supports (anchor-name: --pagination-active) {
    .pagination__list::before {
      content: '';
      z-index: -1;
      position: absolute;
      width: calc(var(--pagination-size) - (2 * var(--pagination-inset)));
      aspect-ratio: 1;
      pointer-events: none;
      opacity: 0;
      border-radius: calc(var(--pagination-radius) * 1px);
      background: rgb(var(--color-foreground-rgb) / var(--opacity-10));
      transition: left var(--hover-transition-duration) var(--hover-transition-timing),
        top var(--hover-transition-duration) var(--hover-transition-timing);
    }

    /* Hide hover indicator on touch devices */
    @media (hover: none) and (pointer: coarse) {
      .pagination__list::before {
        content: unset;
      }
    }

    .pagination__list:has(
        .pagination__link:is(:hover, :focus-visible):not(.pagination__link--gap, .pagination__link--disabled))::before {
      opacity: 1;
    }

    /* Style current page directly */
    .pagination__link[aria-current='page']::before {
      content: '';
      position: absolute;
      inset: var(--pagination-inset);
      border-radius: calc(var(--pagination-radius) * 1px);
      background: var(--color-foreground);
      z-index: -1;
    }

    .pagination__list
      .pagination__item:has(
        .pagination__link:is(:hover, :focus-visible):not(.pagination__link--gap, .pagination__link--disabled)) {
      anchor-name: --pagination-hover;
    }

    /* Position hover indicator using anchor */
    .pagination__list::before {
      position-anchor: --pagination-hover;
      left: calc(anchor(left) + var(--pagination-inset));
      top: calc(anchor(top) + var(--pagination-inset));
    }

    .pagination__item:has(+ .pagination__item--gap) .pagination__link::after,
    .pagination__item--gap + .pagination__item .pagination__link::after {
      position: absolute;
      content: '';
      pointer-events: auto;
    }

    .pagination__item:has(+ .pagination__item--gap) .pagination__link::after {
      inset: 0 -50% 0 100%;
    }

    .pagination__item--gap + .pagination__item .pagination__link::after {
      inset: 0 100% 0 -50%;
    }
  }

  @media screen and (max-width: 749px) {
    .pagination {
      --pagination-size: 44px;
      --pagination-inset: 5px;

      padding: var(--padding-lg) var(--padding-sm);
    }

    .pagination__link {
      font-size: var(--font-size--sm);
    }

    .pagination__item--mobile-hide {
      display: none;
    }

    .pagination__item--mobile-only {
      display: grid;
    }

    .pagination__item:has(.pagination__link--gap) {
      width: calc(var(--pagination-size) * 0.5);
    }
  }
/* END_SNIPPET:pagination-controls */

/* START_SNIPPET:password-layout-styles (INDEX:264) */
.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:270) */
/* Shared predictive search styles (used by both predictive-search and predictive-search-empty sections) */
  .predictive-search-dropdown {
    display: flex;
    flex-direction: column;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--layer-base);
  }

  .predictive-search-results__title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size--body-md);
    font-weight: 500;
    margin-block: var(--margin-sm) var(--margin-xs);
    width: 100%;
    text-transform: var(--title-case);

    &:first-of-type {
      margin-block-start: 0;
    }

    @media screen and (max-width: 749px) {
      margin-block: var(--margin-lg) var(--margin-sm);
    }
  }

  .predictive-search-results__no-results {
    animation-delay: 100ms;
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-in);
  }

  .predictive-search-results__no-results:last-child {
    margin-block: var(--margin-lg);
    text-align: center;
  }

  /* Predictive search section styles */
  input[type='search']::-webkit-search-decoration {
    -webkit-appearance: none; /* stylelint-disable-line */
  }

  .search-action .predictive-search {
    z-index: calc(var(--layer-header-menu) + 2);
  }

  .search-action .search-modal .predictive-search {
    z-index: var(--layer-window-overlay);
  }

  .header__column--right .predictive-search-form__content-wrapper {
    right: 0;
    left: unset;
  }

  .search-modal .predictive-search-form__content-wrapper {
    width: 100%;

    @media screen and (min-width: 750px) {
      height: fit-content;
    }
  }
  .dialog-modal .predictive-search-form__header-inner {
    @media screen and (min-width: 750px) {
      border: 0;
    }
  }

  .search-modal__content .predictive-search-form__content {
    max-height: var(--modal-max-height);
  }

  .predictive-search:has(.predictive-search-dropdown) .search-input {
    outline-color: transparent;
  }

  .predictive-search:has(.predictive-search-dropdown) .predictive-search-form__header-inner:focus-within {
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;

    @media screen and (max-width: 749px) {
      border-bottom-color: transparent;
    }
  }

  .predictive-search:has(.predictive-search-dropdown[aria-expanded='true'])
    .predictive-search-form__header-inner:focus-within {
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;
    border-radius: var(--search-border-radius);

    @media screen and (max-width: 749px) {
      border-radius: var(--style-border-radius-inputs);
    }
  }

  .dialog-modal .predictive-search-form__header {
    border: 0;
    border-radius: 0;
    background-color: var(--color-background);
    border-bottom: var(--style-border-width) solid var(--color-border);

    @media screen and (min-width: 750px) {
      padding: var(--padding-2xs) var(--padding-2xs) 0;
      border-bottom: var(--search-border-width) solid var(--color-border);
    }

    @media screen and (max-width: 749px) {
      transition: box-shadow 0.2s ease;
      box-shadow: none;
    }
  }

  .search-action .predictive-search:has(.predictive-search-dropdown) .predictive-search-form__header:focus-within {
    border-radius: var(--search-border-radius) var(--search-border-radius) 0 0;
    transition: box-shadow var(--animation-speed) var(--animation-easing);
    background-color: var(--color-background);

    @media screen and (max-width: 749px) {
      border-radius: var(--style-border-radius-inputs) var(--style-border-radius-inputs) 0 0;
    }
  }

  @media screen and (max-width: 749px) {
    .dialog-modal .predictive-search__close-modal-button {
      padding-inline-start: var(--margin-xs);
      margin-inline-start: 0;
    }
  }

  .dialog-modal[open] {
    @media screen and (max-width: 749px) {
      border-radius: 0;
    }
  }

  .dialog-modal .predictive-search-form__header:has(.predictive-search-form__header-inner:focus-within) {
    @media screen and (min-width: 750px) {
      border-bottom-color: transparent;
    }
  }

  @media screen and (max-width: 749px) {
    .dialog-modal {
      .predictive-search__reset-button-icon {
        display: none;
      }

      .predictive-search__reset-button-text {
        display: block;
      }

      .predictive-search-form__content {
        /* The parent has overflow auto, we want to prevent a double scrollbar during animation */
        max-height: 100%;
      }

      .predictive-search-form__content-wrapper {
        box-shadow: none;
      }

      .predictive-search-form__header {
        box-shadow: none;
      }

      .predictive-search-form__footer {
        padding-block: var(--padding-2xl);
      }
    }
  }

  .predictive-search-results__pill {
    font-weight: 500;
    white-space: nowrap;
    color: var(--color-foreground);
    transition: background-color var(--animation-speed-medium) var(--animation-timing-hover),
      box-shadow var(--animation-speed-medium) var(--animation-timing-bounce),
      transform var(--animation-speed-medium) var(--animation-timing-bounce);
    margin: 2px;

    &:hover {
      transform: scale(1.03);
      box-shadow: 0 2px 5px rgb(0 0 0 / var(--opacity-8));
    }
  }

  .predictive-search-results__pill mark {
    background-color: transparent;
    font-weight: 200;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-80));
  }

  .predictive-search-results__pill:focus,
  .predictive-search-results__pill:hover,
  .predictive-search-results__card--query:is([aria-selected='true'], :focus-within) .predictive-search-results__pill {
    --pill-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));

    background-color: var(--pill-background-color);
    outline: var(--border-width-sm) solid var(--color-border);
    border: var(--border-width-sm);
    text-decoration: none;
  }

  .predictive-search-results__wrapper.predictive-search-results__wrapper-queries {
    margin-bottom: var(--margin-lg);
    padding-inline: var(--padding-xl);
    gap: var(--gap-2xs);
  }

  .predictive-search-results__card {
    --title-font-size: var(--font-size--md);
    --title-margin-block: var(--margin-xs);

    flex: 0 0 auto;
    scroll-snap-align: start;
    scroll-margin-block: calc(var(--title-font-size) + var(--title-margin-block) + var(--padding-sm))
      calc(var(--padding-xl) + var(--button-padding-block) * 2);
    transition: transform var(--animation-speed-medium) var(--animation-timing-default),
      background-color var(--animation-speed-medium) var(--animation-timing-hover),
      border-color var(--animation-speed-medium) var(--animation-timing-hover);

    &:nth-last-child(3) {
      scroll-snap-align: end;
    }

    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
    }
  }

  .recently-viewed-wrapper .predictive-search-results__card {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .recently-viewed-wrapper.removing .predictive-search-results__card {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
  }

  .predictive-search-results__card--product,
  .recently-viewed-wrapper .predictive-search-results__card--product {
    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
    }

    &:hover {
      background-color: var(--card-bg-hover);
      border-radius: var(--product-corner-radius);
      padding: calc(var(--padding-2xs) + 2px);
      margin: calc((var(--padding-2xs) + 2px) * -1);
    }

    &:is([aria-selected='true'].keyboard-focus, &:focus-visible, &:has(.resource-card:focus-visible)) {
      background-color: var(--card-bg-hover);
      padding: calc(var(--padding-2xs) + 1px);
      margin: calc((var(--padding-2xs) + 1px) * -1);
      outline: var(--border-width-sm) solid var(--color-border);
      border-radius: calc(var(--product-corner-radius) + 1px);
      border-color: var(--card-border-focus);
    }
  }

  .predictive-search-results__card:not(.predictive-search-results__card--product) {
    padding: var(--padding-sm);
    border: var(--border-width-sm) solid var(--color-border);
    border-radius: var(--card-corner-radius);
    width: 60cqi;
    content-visibility: visible;

    @media screen and (min-width: 750px) {
      width: 27.5cqi;
    }

    &:hover {
      border-color: var(--card-border-hover);
      background-color: var(--card-bg-hover);
    }

    &[aria-selected='true'].keyboard-focus {
      border-color: var(--card-border-hover);
      background-color: var(--card-bg-hover);
    }

    &:active {
      transform: scale(0.97);
      transition: transform var(--animation-speed-medium) var(--animation-timing-active);
    }
  }

  @keyframes search-element-scale-in {
    0% {
      transform: scale(0.95);
      opacity: 0;
    }

    40% {
      opacity: 1;
    }

    100% {
      transform: scale(1);
      opacity: 1;
    }
  }

  @keyframes search-element-scale-out {
    0% {
      transform: scale(1);
      opacity: 1;
    }

    100% {
      transform: scale(0.95);
      opacity: 0;
    }
  }

  @keyframes search-element-slide-in-top {
    from {
      margin-top: calc(var(--modal-top-margin) + var(--padding-sm));
      opacity: 0;
    }

    to {
      margin-top: var(--modal-top-margin);
      opacity: 1;
    }
  }

  @keyframes search-element-slide-out-top {
    from {
      margin-top: var(--modal-top-margin);
      opacity: 1;
    }

    to {
      margin-top: calc(var(--modal-top-margin) + var(--padding-sm));
      opacity: 0;
    }
  }

  @keyframes content-slide {
    from {
      transform: translateY(var(--slide-from, 0));
      opacity: var(--slide-opacity-from, 1);
    }

    to {
      transform: translateY(var(--slide-to, 0));
      opacity: var(--slide-opacity-to, 1);
    }
  }

  .predictive-search-results__list {
    --slide-width: 27.5%;
    --slideshow-gap: var(--gap-md);

    /* Make space for the outline to be visible */
    padding-block-start: var(--border-width-sm);
  }

  .predictive-search-results__list slideshow-arrows {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .predictive-search-results__no-results,
  .predictive-search-results__wrapper,
  .predictive-search-results__wrapper-products .predictive-search-results__card {
    animation: search-element-slide-up var(--animation-speed-medium) var(--animation-timing-bounce) backwards;
  }

  slideshow-slide .resource-card {
    /* stylelint-disable-next-line declaration-no-important */
    animation-delay: 0ms !important;
  }

  .predictive-search-results__list,
  .predictive-search-results__wrapper {
    animation-duration: var(--animation-speed-medium);
  }

  .predictive-search-results__wrapper-queries {
    animation-delay: 50ms;
  }

  .predictive-search-results__list:nth-of-type(2) {
    animation-delay: 150ms;
  }

  .predictive-search-results__list:nth-of-type(3) {
    animation-delay: 200ms;
  }

  .predictive-search-results__list:nth-of-type(4) {
    animation-delay: 250ms;
  }

  .predictive-search-results__list:last-child {
    margin-block-end: 0;
  }

  [data-resource-type] {
    /* stylelint-disable-next-line declaration-no-important */
    animation-delay: 0ms !important;
  }

  .predictive-search-results__no-results.removing,
  .predictive-search-results__wrapper.removing {
    animation: search-element-slide-down var(--animation-speed-medium) var(--animation-timing-fade-out) forwards;
  }

  .predictive-search-results__card.removing {
    animation: fadeOut var(--animation-speed-medium) var(--animation-timing-fade-out) forwards;
  }

  .predictive-search-results__wrapper {
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-in);
  }

  @keyframes search-element-slide-up {
    from {
      opacity: 0;
      transform: translateY(8px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes search-element-slide-down {
    from {
      opacity: 1;
      transform: translateY(0);
    }

    to {
      opacity: 0;
      transform: translateY(8px);
    }
  }

  .predictive-search-results__card--query {
    transition: transform var(--animation-speed-medium) var(--animation-timing-bounce);
    transform-origin: center;

    &:active {
      transform: scale(0.97);
    }
  }

  /* Products list styles */
  .predictive-search-results__products {
    padding-inline: var(--padding-xl);
  }

  .recently-viewed-wrapper {
    display: grid;
    grid-template-rows: auto auto;
    max-height: 1000px;
    opacity: 1;
    overflow: visible;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: top center;
    transform: translateY(0);
  }

  .recently-viewed-wrapper.removing {
    max-height: 0;
    opacity: 0;
    transform: translateY(-10px);
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
  }

  .predictive-search-results__clear.button-unstyled {
    color: var(--color-foreground);
    opacity: 0.68;
    transition: opacity var(--animation-speed-medium) var(--animation-easing);
    padding: 0;
    margin-left: var(--margin-sm);

    &:hover {
      opacity: 1;
    }
  }

  .recently-viewed-wrapper.removing .predictive-search-results__card {
    transition: none;
    transform: none;
    opacity: 1;
  }

  .recently-viewed-wrapper > * {
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(1) {
    animation-delay: 30ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(2) {
    animation-delay: 60ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(3) {
    animation-delay: 90ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(4) {
    animation-delay: 120ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(n + 5) {
    animation-delay: 150ms;
  }

  .predictive-search-results__wrapper-products {
    animation-delay: 50ms;
  }

  /* Resource carousel styles */
  .predictive-search-results__wrapper {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    padding-block-end: var(--padding-sm);
    padding-inline: 0;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--padding-xl);
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .predictive-search-results__wrapper slideshow-slides {
    --gutter-slide-width: var(--padding-xl);

    /* Add padding to prevent hover animations from being clipped in slideshow
       15px accommodates:
       - Scale effect (9px on each side from 1.03 scale)
       - Lift effect (4px upward movement)
       - Shadow (15px spread with -5px offset)
       Using 16px for better alignment with our spacing scale */
    padding-block: var(--padding-xl);
    margin-block: calc(-1 * var(--padding-xl));
    gap: var(--gap-md);
  }

  .predictive-search-results__resource-header {
    display: flex;
    padding-inline: var(--padding-xl);
    justify-content: space-between;
    align-items: center;
    height: 32px;
  }

  .predictive-search-results__resource-header .svg-wrapper {
    width: var(--icon-size-xs);
  }

  .predictive-search-results__wrapper-products {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding-block-end: var(--padding-sm);
    gap: var(--gap-md);
    transition: height var(--animation-speed-medium) var(--animation-easing);

    @container (min-width: 550px) {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .predictive-search-results__wrapper-products:last-child {
    padding-block-end: var(--padding-lg);

    @media screen and (min-width: 750px) {
      padding-block-end: var(--padding-sm);
    }
  }

  .predictive-search-results__resource-header .predictive-search-results__title {
    margin-block-end: 0;
  }

  .predictive-search-results__resource-header:has(slideshow-controls) .predictive-search-results__title {
    margin-block-end: 0;
  }

  .predictive-search-results__resource-header slideshow-controls {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }
/* END_SNIPPET:predictive-search-styles */

/* START_SNIPPET:price-filter (INDEX:271) */
/* Price filter */
  .price-facet {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
  }
  .price-facet--horizontal {
    min-width: 360px;
  }

  .price-facet__inputs-wrapper {
    display: flex;
    flex-direction: row;
    padding: var(--style-border-width-inputs);
    gap: calc(var(--gap-sm) + (var(--style-border-width-inputs) * 2));
  }

  @container (max-width: 199px) {
    .price-facet__inputs-wrapper {
      flex-wrap: wrap;
    }
  }

  .price-facet__input {
    width: 100%;
    text-align: right;
    padding-left: calc(2.5 * var(--input-padding-x));
  }

  .price-facet__input::placeholder {
    color: var(--facets-input-label-color);
  }

  .price-facet__separator {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-paragraph--size);
  }

  .price-facet__highest-price {
    padding: var(--padding-xs) 0 var(--padding-sm);
  }

  .price-facet__highest-price--horizontal {
    padding: 0 var(--padding-md) var(--padding-xs);
  }

  .price-facet__label {
    top: 0;
    left: 0;
    color: var(--facets-input-label-color);
    padding: var(--input-padding-y) var(--input-padding-x);
    transform: none;
  }
/* END_SNIPPET:price-filter */

/* START_SNIPPET:price (INDEX:272) */
.price-discount-badge {
    display: inline-flex;
    align-items: center;
    background-color: #e02020;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 5px 8px;
    border-radius: 4px;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
    position: relative;
    top: -1px;
    margin-left: 6px;
  }

  .price-discount-badge__mobile {
    display: none;
  }

  .price-discount-badge__desktop {
    display: inline;
  }

  @media screen and (max-width: 749px) {
    .price-discount-badge__desktop {
      display: none;
    }
    .price-discount-badge__mobile {
      display: inline;
    }
  }
/* END_SNIPPET:price */

/* START_SNIPPET:product-badges-styles (INDEX:273) */
.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:274) */
product-card .media,
  product-card [class*="card-media"] {
    aspect-ratio: 1 / 1 !important;
    max-height: 160px !important;
  }
  @media screen and (min-width: 750px) {
    product-card .media,
    product-card [class*="card-media"] {
      max-height: 220px !important;
    }
  }
  .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; }
  }

  /* ── Card ── */
  product-card .product-card__content,
  product-card .product-grid__card {
    border: 1px solid #e8e8e8 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: #fff !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* ── Imagen ── */
  product-card .media,
  product-card [class*="card-media"],
  product-card .product-card__image {
    background: #fff !important;
    border-bottom: 1px solid #f0f0f0 !important;
  }
  product-card .media img,
  product-card [class*="card-media"] img,
  product-card .product-card__image img {
    object-fit: contain !important;
    padding: 6% !important;
    box-sizing: border-box !important;
    background: #fff !important;
  }

  /* ── Precio ── */
  product-card .price,
  product-card [class*="price"] .price-item,
  product-card .price__regular,
  product-card .price-item--regular,
  product-card .price-item--sale {
    font-size: 1.08rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
  }
  product-card .price__sale .price-item--regular {
    font-size: 0.78rem !important;
    font-weight: 400 !important;
    color: #999 !important;
    text-decoration: line-through !important;
  }

  /* ── Bloque inferior ── */
  product-card .qlo-below-fold {
    border-top: 1px solid #f0f0f0;
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    flex: 1;
    box-sizing: border-box;
  }

  /* ── Badges ── */
  product-card { position: relative; }
  /* ── TERCERA VUELTA, 08/11/2026: EL ESTILO DE LA CASA ───────────
     Rodrigo, con captura del NUEVO verde macizo: "el badge este es
     horrible, no queda bien ese color (...) necesito que tengan el
     mismo estilo que el badge de envío rápido y seguro del product
     page. Ese mismo. Que las cocardas de acá y de todos lados tengan
     ese estilo".

     El #25D366 macizo es el verde de WhatsApp, y ese es justamente el
     problema: no es un color de esta tienda, es el color de otra marca
     que ademas aparece en la misma pantalla (el boton flotante). Y en
     un catalogo de fotos sobre fondo blanco, un bloque de verde fuerte
     en la esquina es lo primero que se ve de la tarjeta, por encima
     del producto.

     El badge de envios ya tenia resuelto el idioma: fondo clarito en
     el tono, borde del mismo color y letra oscura. Se lee enseguida,
     no le gana a la foto, y es lo mismo que hablan el vidrio, el
     cartel de ahorro del carrito y las pastillas de las sucursales.
     Las cocardas pasan a hablarlo tambien.

     Las variables son las mismas que define shipping-badge, con
     respaldo escrito al lado por si esa pieza no esta en la pagina
     —en una coleccion no esta—.

     El fondo va casi opaco y no translucido: estas se apoyan sobre la
     FOTO del producto, que puede ser de cualquier color. El del envio
     puede darse el lujo de ser transparente porque vive sobre el
     blanco de la ficha.

     Tres familias y nada mas: verde lo que suma (nuevo, tendencia,
     consultar), oro lo que es plata (el descuento). */
  /* ── EL MISMO JUEGO QUE LA FICHA ────────────────────────────────
     08/11/2026, Rodrigo, con captura del NUEVO: "el badge este es
     horrible, no queda bien ese color (...) necesito que tengan el
     mismo estilo que el badge de envío rápido y seguro del product
     page. Ese mismo. Que las cocardas de acá y de todos lados tengan
     ese estilo".

     Primero lo lei mal y las pase a pastilla clara de vidrio, que es
     el otro badge de envios de la ficha (el de "LLEGA HOY"). No es
     ese: el que nombro por su texto es el verde MACIZO de arriba de
     todo en la ficha, `.ij-badge--shipping`, que vive en el bloque de
     liquid de templates/product.json.

     Asi que estas copian ese juego, tal cual, los tres:

       · verde #16A34A con letra blanca para lo que suma,
       · amarillo #F5C518 con tinta oscura para la oferta,
       · y la misma geometria (11px, 800, 3/10, radio 50).

     Lo que estaba mal del anterior no era que fuera macizo —eso le
     gusta y lo pidio dos veces— sino el COLOR: #25D366 es el verde de
     WhatsApp, o sea el color de otra marca que ademas esta en la misma
     pantalla, en el boton flotante. El #16A34A es mas oscuro, se
     banca la letra blanca y es el que ya usaba la ficha.

     El amarillo lleva tinta oscura y no blanca: con blanca daba 1,9 de
     contraste y habia que adivinar que decia. Misma correccion que ya
     se habia hecho en la ficha.

     La sombra se queda: estas se apoyan sobre la FOTO del producto,
     que a veces es clara, y sin ella el borde se pierde. */
  .qlo-badge {
    position: absolute; top: 10px; left: 10px; z-index: 10;
    font-size: 11px; font-weight: 800; letter-spacing: 0.03em;
    padding: 3px 10px; border-radius: 50px; line-height: 1.5;
    display: inline-flex; align-items: center; gap: 5px;
    box-shadow: 0 2px 8px rgba(20, 16, 10, 0.18);
    text-transform: none; pointer-events: none;
  }
  /* ── 09/11/2026 · EL AMARILLO SE VA ────────────────────────────
     Rodrigo: "cambiar el color de ahorrar". El amarillo era el unico
     color de la tarjeta que no significa nada en esta tienda: el oro es
     lo que se toca, el verde es lo que suma, el rojo es lo que se
     acaba. Un amarillo suelto se lee como un post-it.

     Va el rojo de la casa, macizo y con tinta blanca. Macizo porque los
     badges con contorno ya se probaron y se rechazaron. #D32F1E y no el
     coral #FF5A47 porque sobre coral el blanco da 3,1 de contraste y a
     11px en negrita no alcanza; este da 5,2. */
  .qlo-badge--sale  { background: #D32F1E; color: #FFFFFF; }
  .qlo-badge--new   { background: #16A34A; color: #FFFFFF; }
  .qlo-badge--trend { background: #0F0F0F; color: #FFFFFF; }
  .qlo-badge--consultar { background: #A8863F; color: #FFFFFF; font-weight: 800; }

  /* ── Consultar stock (WhatsApp) ──
     Vive aca y no en el snippet: render abre scope aislado, asi que una
     bandera "ya imprimi el CSS" no sobrevive y se repetiria por cada tarjeta.
     Shopify extrae y deduplica este bloque. El PDP si lo imprime inline,
     porque ahi el snippet corre una sola vez. */
  /* ── EL GRIS, MAS CLARO ───────────────────────────────────────
     08/11/2026, Rodrigo: "el boton de consultar stock en todos lados,
     cambiar ese gris por otro mas claro".
  
     El #6B7280 era un gris de framework: no sale de esta marca y al lado
     del oro del boton de comprar se veia apagado, como un boton
     deshabilitado. Y eso es justo lo que NO es: consultar stock es la
     unica salida que le queda a alguien que quiere ese producto.
  
     El claro nuevo es el crema de la casa. Al aclarar el fondo, el texto
     tiene que dejar de ser blanco o no se lee: blanco sobre #F2EFE8 da
     1,1. Con la tinta #2A241C mide 13,2.
  
     Y se le pone un borde fino, porque un boton claro sobre una tarjeta
     blanca sin contorno deja de parecer un boton y parece un cartel. */
  .cs-btn {
    --cs-gris: #F2EFE8;
    --cs-gris-oscuro: #E6E0D2;
    --cs-tinta: #2A241C;
    display: flex; align-items: center; justify-content: center; gap: 7px;
    width: 100%; box-sizing: border-box;
    background: var(--cs-gris); color: var(--cs-tinta);
    border: 1px solid rgba(42, 36, 28, 0.14); border-radius: 10px;
    font-family: inherit; font-weight: 700; line-height: 1.2;
    letter-spacing: 0.2px; text-align: center; text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
  }
  .cs-btn:hover { background: var(--cs-gris-oscuro); color: var(--cs-tinta); border-color: rgba(42,36,28,.24); transform: translateY(-1px); }
  .cs-btn:active { transform: translateY(0); }
  .cs-btn:focus-visible { outline: 2px solid var(--cs-tinta); outline-offset: 2px; }
  .cs-btn__icon { width: 17px; height: 17px; flex-shrink: 0; display: block; }
  .cs-btn--card { padding: 12px 10px; font-size: 13px; }
  @media (prefers-reduced-motion: reduce) {
    .cs-btn { transition: none; }
    .cs-btn:hover { transform: none; }
  }
  .qlo-badge__tiktok-icon {
    width: 18px; height: 18px; object-fit: contain;
    display: inline-block; vertical-align: middle;
  }

  /* ── Cuotas ── */
  .qlo-installments { font-size: 0.82rem; color: #2e7d32; font-weight: 400; text-align: center; line-height: 1.4; }
  .qlo-installments strong { font-weight: 700; }

  /* ── Urgencia ── */
  .qlo-urgency {
    display: flex; align-items: center; justify-content: center; gap: 5px;
    height: 24px; min-height: 24px; padding: 0 10px;
    background: rgba(220,38,38,0.05); border: 1px solid rgba(220,38,38,0.2);
    border-radius: 50px; font-size: 10px; font-weight: 700; color: #dc2626;
    width: fit-content; max-width: 100%; margin: 0 auto; box-sizing: border-box;
    overflow: hidden; white-space: nowrap;
  }
  .qlo-urgency--hidden { opacity: 0; pointer-events: none; border-color: transparent !important; background: transparent !important; }
  .qlo-urgency__dot { width: 7px; height: 7px; flex-shrink: 0; border-radius: 50%; background: #dc2626; animation: qlo-pulse 1.4s ease-in-out infinite; }
  .qlo-urgency--hidden .qlo-urgency__dot { animation: none; }
  .qlo-urgency__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  @keyframes qlo-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.65); } }

  /* ── Botón ── */
  .qlo-actions { margin-top: auto; }
  .qlo-btn {
    display: block; width: 100%; padding: 12px 10px;
    background: #C8A66B; color: #1a1a1a;
    font-size: 13px; font-weight: 700; text-align: center;
    border: none; border-radius: 10px; cursor: pointer;
    text-decoration: none; letter-spacing: 0.2px;
    transition: filter 0.2s, transform 0.15s;
    position: relative; overflow: hidden; box-sizing: border-box;
  }
  .qlo-btn:hover { filter: brightness(0.92); transform: translateY(-1px); }
  .qlo-btn:active { transform: translateY(0); }
  .qlo-btn--cart::after {
    content: ''; position: absolute; top: 0; left: -100%;
    width: 45%; height: 100%;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.28) 50%, transparent 100%);
    transform: skewX(-20deg);
    animation: qlo-shimmer 1.6s ease-in-out infinite;
  }
  @keyframes qlo-shimmer { 0% { left: -80%; opacity: 1; } 50% { left: 140%; opacity: 1; } 51% { left: 140%; opacity: 0; } 100% { left: -80%; opacity: 0; } }

  /* ── Spinner ── */
  .qlo-spinner { width: 32px; height: 32px; border: 3px solid rgba(0,0,0,0.1); border-top-color: #1a1a1a; border-radius: 50%; animation: qlo-spin 0.7s linear infinite; margin: 20px auto; }
  @keyframes qlo-spin { to { transform: rotate(360deg); } }

  /* ── ATC button en panel ── */
  .qlo-panel-atc {
    display: block; width: 100%; padding: 16px;
    background: #C8A66B; color: #1a1a1a;
    border: none; border-radius: 12px;
    font-size: 15px; font-weight: 700; cursor: pointer;
    letter-spacing: 0.3px; position: relative; overflow: hidden;
    transition: filter 0.2s, transform 0.15s; text-align: center;
    animation: qlo-btn-pulse 1.8s ease-in-out infinite;
  }
  .qlo-panel-atc::after {
    content: ''; position: absolute; top: 0; left: -100%;
    width: 45%; height: 100%;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.28) 50%, transparent 100%);
    transform: skewX(-20deg);
    animation: qlo-shimmer 1.6s ease-in-out infinite;
  }
  .qlo-panel-atc:hover { filter: brightness(0.92); transform: translateY(-1px); animation: none; }
  .qlo-panel-atc:disabled { opacity: 0.45; cursor: not-allowed; transform: none; animation: none; }
  .qlo-panel-atc:disabled::after { display: none; }
  @keyframes qlo-btn-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0,0,0,0.12); }
    50%       { box-shadow: 0 0 0 5px rgba(0,0,0,0); }
  }

  .qlo-panel-view { display: block; text-align: center; font-size: 13px; font-weight: 600; color: #888; text-decoration: none; transition: color 0.2s; }
  .qlo-panel-view:hover { color: #1a1a1a; }

  /* ── Trust badges en panel ── */
  .qlo-trust {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 14px;
    background: #f0faf0;
    border: 1px solid #c8e6c9;
    border-radius: 10px;
    margin-top: 2px;
  }
  .qlo-trust__item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 600;
    color: #2e7d32;
  }

  .qlo-variant-btn { padding: 9px 18px; border: 1.5px solid #e0e0e0; border-radius: 8px; background: #fff; font-size: 13px; font-weight: 600; color: #1a1a1a; cursor: pointer; transition: border-color 0.18s, background 0.18s, color 0.18s; line-height: 1; }
  .qlo-variant-btn:hover { border-color: #1a1a1a; }
  .qlo-variant-btn.is-selected { border-color: #1a1a1a; background: #1a1a1a; color: #fff; }
  .qlo-variant-btn.is-unavailable { opacity: 0.35; cursor: not-allowed; text-decoration: line-through; }

  /* ── DRAWER desktop ── */
  .qlo-drawer {
    position: fixed; inset: 0; z-index: 2147483647;
    pointer-events: none; visibility: hidden;
  }
  .qlo-drawer.is-open { pointer-events: all; visibility: visible; }
  .qlo-drawer__overlay { position: absolute; inset: 0; background: rgba(0,0,0,0); transition: background 0.55s cubic-bezier(0.4,0,0.2,1); cursor: pointer; }
  .qlo-drawer.is-open .qlo-drawer__overlay { background: rgba(0,0,0,0.48); }
  .qlo-drawer__panel {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: 420px; max-width: 100vw; background: #fff;
    display: flex; flex-direction: column;
    transform: translateX(110%);
    transition: transform 0.58s cubic-bezier(0.16,1,0.3,1);
    box-shadow: -12px 0 60px rgba(0,0,0,0.18);
  }
  .qlo-drawer.is-open .qlo-drawer__panel { transform: translateX(0); }
  .qlo-drawer__header { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; }
  .qlo-drawer__title { font-size: 16px; font-weight: 700; color: #1a1a1a; }
  .qlo-drawer__close { width: 36px; height: 36px; background: #f5f5f5; border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s, transform 0.3s; color: #1a1a1a; }
  .qlo-drawer__close:hover { background: #e8e8e8; transform: rotate(90deg); }
  .qlo-drawer__close svg { width: 16px; height: 16px; }
  .qlo-drawer__body { flex: 1; overflow-y: auto; padding: 24px; }
  .qlo-drawer__product-info { display: flex; gap: 16px; margin-bottom: 24px; align-items: flex-start; }
  .qlo-drawer__img-wrap { width: 100px; height: 100px; border-radius: 12px; overflow: hidden; flex-shrink: 0; background: #f5f5f5; }
  .qlo-drawer__img-wrap[hidden] { display: none; }
  .qlo-drawer__img { width: 100%; height: 100%; object-fit: cover; }
  .qlo-drawer__details { flex: 1; min-width: 0; }
  .qlo-drawer__product-title { font-size: 15px; font-weight: 600; color: #1a1a1a; margin: 0 0 8px; line-height: 1.35; }
  .qlo-drawer__pricing { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
  .qlo-drawer__price { font-size: 18px; font-weight: 800; color: #1a1a1a; }
  .qlo-drawer__compare { font-size: 13px; color: #aaa; text-decoration: line-through; }
  .qlo-drawer__compare:empty { display: none; }
  .qlo-drawer__urgency { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
  .qlo-drawer__variants-label { font-size: 12px; font-weight: 700; color: #666; text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 12px; }
  .qlo-drawer__variants-list { display: flex; flex-wrap: wrap; gap: 8px; }
  .qlo-drawer__footer { padding: 20px 24px; border-top: 1px solid #f0f0f0; flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; }
  @media (max-width: 767px) { .qlo-drawer { display: none !important; } }

  /* ── BOTTOM SHEET mobile ── */
  .qlo-sheet { position: fixed; inset: 0; z-index: 2147483647; pointer-events: none; visibility: hidden; }
  .qlo-sheet.is-open { pointer-events: all; visibility: visible; }
  .qlo-sheet__overlay { position: absolute; inset: 0; background: rgba(0,0,0,0); transition: background 0.5s cubic-bezier(0.4,0,0.2,1); cursor: pointer; }
  .qlo-sheet.is-open .qlo-sheet__overlay { background: rgba(0,0,0,0.52); }
  .qlo-sheet__panel { position: absolute; bottom: 0; left: 0; right: 0; background: #fff; border-radius: 24px 24px 0 0; transform: translateY(105%); transition: transform 0.58s cubic-bezier(0.16,1,0.3,1); display: flex; flex-direction: column; max-height: 88vh; }
  .qlo-sheet.is-open .qlo-sheet__panel { transform: translateY(0); }
  .qlo-sheet__topbar { display: flex; align-items: center; justify-content: center; position: relative; padding: 14px 16px 4px; flex-shrink: 0; }
  .qlo-sheet__handle { width: 40px; height: 4px; background: #ddd; border-radius: 2px; }
  .qlo-sheet__close { position: absolute; right: 16px; top: 10px; width: 32px; height: 32px; background: #f2f2f2; border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s, transform 0.3s; color: #1a1a1a; }
  .qlo-sheet__close:hover { background: #e0e0e0; transform: rotate(90deg); }
  .qlo-sheet__close svg { width: 14px; height: 14px; }
  .qlo-sheet__body { flex: 1; overflow-y: auto; padding: 12px 20px 4px; }
  .qlo-sheet__product-info { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 20px; }
  .qlo-sheet__img-wrap { width: 110px; height: 110px; border-radius: 14px; overflow: hidden; background: #f5f5f5; margin-bottom: 12px; }
  .qlo-sheet__img-wrap[hidden] { display: none; }
  .qlo-sheet__img { width: 100%; height: 100%; object-fit: cover; }
  .qlo-sheet__product-title { font-size: 15px; font-weight: 700; color: #1a1a1a; margin: 0 0 6px; line-height: 1.3; }
  .qlo-sheet__pricing { display: flex; align-items: baseline; justify-content: center; gap: 8px; flex-wrap: wrap; }
  .qlo-sheet__price { font-size: 20px; font-weight: 800; color: #1a1a1a; }
  .qlo-sheet__compare { font-size: 13px; color: #aaa; text-decoration: line-through; }
  .qlo-sheet__compare:empty { display: none; }
  .qlo-sheet__urgency { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 8px; }
  .qlo-sheet__variants-label { font-size: 12px; font-weight: 700; color: #888; text-transform: uppercase; letter-spacing: 0.6px; margin: 0 0 10px; text-align: center; }
  .qlo-sheet__variants-list { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
  .qlo-sheet__footer { padding: 14px 20px 28px; flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid #f0f0f0; }
  @media (min-width: 768px) { .qlo-sheet { display: none !important; } }

  /* ══════════════════════════════════════════════════════════════════
     LA TARJETA EN OFERTA, 09/11/2026
     Rodrigo: "ya se entiende que esta en oferta, el de oferta quitarlo y
     lo cumple el de ahorrar (...) centrar el precio, y el precio de
     comparacion abajo, mas chico".

     EL PROBLEMA ERA REPETICION. Una tarjeta rebajada decia el mismo dato
     TRES veces: el badge "AHORRA 49%" sobre la foto, la pastilla "Oferta"
     arriba a la derecha, y el chip rojo "49% OFF" al lado del precio.
     Tres carteles para un solo hecho. El que lee tres veces lo mismo deja
     de leer.

     Queda uno solo: el de la foto, que es el que trae el numero y el que
     se ve desde lejos al barrer la grilla.
     ══════════════════════════════════════════════════════════════════ */

  /* La pastilla "Oferta" de Horizon, fuera. No se borra el markup: lo
     dibuja snippets/card-gallery.liquid para todas las tarjetas del
     theme y tocarlo ahi afectaria lugares que no estamos mirando. */
  product-card .product-badges { display: none !important; }

  /* ── EL PRECIO, EN UNA SOLA LINEA ────────────────────────────────
     Primera vuelta lo puse en columna y Rodrigo lo corrigio: "el precio
     de comparacion a la derecha del precio y el badge a la derecha (...)
     todo en una misma linea, no es necesario tanta altura". Y queria de
     vuelta el badge del descuento, que yo habia sacado por repetido.

     Queda: [ precio ] [ tachado ] [ -35% ]

     El bloque va centrado como GRUPO, no cada cosa por su lado. Asi el
     precio —que es el primero— cae a la izquierda del centro, que es el
     "un poco a la izquierda" que pidio, y la tarjeta no se desbalancea
     contra el titulo y las cuotas, que siguen centrados.

     flex-wrap esta puesto como red: a 375px, con dos columnas, la
     tarjeta mide unos 170px y los tres elementos juntos andan cerca del
     limite. Si un precio de cinco cifras no entra, el badge baja solo a
     un segundo renglon en vez de desbordar la tarjeta. */
  /* :not(.price__hidden) NO ES DECORATIVO, NO LO SAQUES.
     09/11/2026. Horizon dibuja SIEMPRE los dos bloques de precio y
     esconde el que no toca poniendole la clase .price__hidden:
     en un producto sin rebaja, .price__sale existe igual y viene
     con esa clase. Este display:flex !important le ganaba y el
     producto mostraba el precio DOS VECES en toda coleccion que no
     fuera Ofertas ("$5.090,00 Precio de oferta $5.090,00").
     Reportado por Rodrigo y reproducido en /collections/bongs. */
  product-card .price__sale:not(.price__hidden) {
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    column-gap: 4px;
    row-gap: 1px;
    text-align: center !important;
  }

  product-card .price__sale .price-item--sale {
    font-size: 1.08rem !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em;
  }

  /* El tachado baja de 0.78 a 0.74rem y se aclara: tiene que leerse
     como referencia, no competir con el numero de arriba. */
  product-card .price__sale .price-item--regular,
  product-card .price__sale .compare-at-price {
    font-size: 0.7rem !important;
    font-weight: 500 !important;
    color: #9A948C !important;
    text-decoration: line-through !important;
    line-height: 1.2 !important;
  }

  /* ── EL BADGE DEL DESCUENTO VUELVE ───────────────────────────────
     Lo habia sacado por ser la tercera vez que la tarjeta decia el mismo
     numero. Rodrigo lo quiere: "lo sacaste y a mi me gustaba". Es su
     tienda y su decision; queda, mas chico, al final de la linea.

     Se achica a 10px y se le baja el relleno porque ahora comparte
     renglon con dos numeros mas. El rojo es el mismo del badge de la
     foto, para que se lean como la misma cosa dicha dos veces y no como
     dos promociones distintas. */
  /* ── DONDE ENTRA, Y DONDE NO ─────────────────────────────────────
     Lo medi en las 19 tarjetas en oferta a 375px: la tarjeta mide 182px
     y los tres elementos juntos piden entre 190 y 213 segun el precio.
     Solo 5 de 19 entraban en un renglon; el resto empujaba el badge a un
     segundo renglon, que es justo lo que Rodrigo no queria.

     Achicar la letra no alcanza: con un precio de cinco cifras como
     $35.000,00 habria que bajar el precio a 13px, y el precio es el dato
     que mas importa de la tarjeta. No se achica el numero principal para
     hacerle lugar a un cartel que repite algo que ya dice el badge de la
     foto.

     Entonces el badge aparece desde 750px, que es donde la tarjeta pasa
     a tener ancho de sobra. En celular queda el renglon limpio —precio y
     tachado, una sola linea, que era el otro pedido— y el porcentaje lo
     sigue cantando el badge rojo sobre la foto, que en celular se ve
     mas grande que este. */
  product-card .price-discount-badge { display: none !important; }

  @media screen and (min-width: 750px) {
    product-card .price-discount-badge {
      display: inline-flex !important;
    }
  }

  product-card .price-discount-badge {
    align-items: center;
    background: #D32F1E;
    color: #FFFFFF;
    font-size: 9.5px !important;
    font-weight: 800;
    line-height: 1.5;
    padding: 1px 5px;
    border-radius: 50px;
    white-space: nowrap;
    flex: 0 0 auto;
  }

  /* Una sola linea: la tarjeta gana el alto del renglon que ocupaba el
     tachado cuando estaba abajo. */
  product-card .price__sale { margin-block: 2px 4px; }
/* END_SNIPPET:product-card */

/* START_SNIPPET:product-grid (INDEX:275) */
.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:276) */
.product-information {
    gap: var(--gap) 0;
  }

  /* Base grid layout */
  .product-information__grid {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
  }

  /* Default column positions */
  .product-details {
    order: 1;
  }

  .product-information__media {
    order: 0;
    width: 0;
    min-width: 100%;
  }

  .product-information__media .product-media-gallery__placeholder-image {
    width: 100%;
    height: 100%;
  }

  /* Mobile styles */
  @media screen and (max-width: 749px) {
    .product-information__media {
      grid-column: 1 / -1;
    }

    .product-details {
      grid-column: 2 / 3;
    }
  }

  /* Desktop styles */
  @media screen and (min-width: 750px) {
    .product-information__grid {
      grid-column: 2;
    }

    /* Position when there is no media */
    .product-information__grid.product-information--media-none {
      .product-details {
        width: var(--narrow-content-width);
        margin: 0 auto;
      }
    }

    /* Position when there is media */
    .product-information__grid:not(.product-information--media-none) {
      /* Media on the left side */
      &.product-information--media-left {
        grid-template-columns: 1fr min(50vw, var(--sidebar-width));

        .product-information__media {
          padding-right: calc(var(--gap, 0) / 2);
        }

        .product-details {
          padding-left: calc(var(--gap, 0) / 2);
        }

        &:has(.media-gallery--extend) {
          grid-column: 1 / 3;
        }
      }

      /* Media on the right side */
      &.product-information--media-right {
        grid-template-columns: min(50vw, var(--sidebar-width)) 1fr;

        .product-information__media {
          padding-left: calc(var(--gap, 0) / 2);
          order: 1;
        }

        .product-details {
          padding-right: calc(var(--gap, 0) / 2);
          order: 0;
        }

        &:has(.media-gallery--extend) {
          grid-column: 2 / -1;
        }
      }

      /* Equal width columns */
      &.product-information__grid--half,
      &.product-information__grid--half:has(.media-gallery--extend) {
        grid-column: 1 / -1;
        grid-template-columns:
          var(--full-page-grid-margin) calc(var(--full-page-grid-central-column-width) / 2) calc(
            var(--full-page-grid-central-column-width) / 2
          )
          var(--full-page-grid-margin);

        &.product-information--media-left {
          .product-information__media {
            grid-column: 2 / 3;

            &:has(.media-gallery--extend) {
              grid-column: 1 / 3;
            }
          }

          .product-details {
            grid-column: 3 / 4;
          }
        }

        &.product-information--media-right {
          .product-information__media {
            grid-column: 3 / 4;

            &:has(.media-gallery--extend) {
              grid-column: 3 / -1;
            }
          }

          .product-details {
            grid-column: 2 / 3;
          }
        }
      }
    }

    /* Handle full width section */
    .section--full-width {
      .product-information__grid:not(.product-information--media-none) {
        &.product-information--media-left,
        &.product-information--media-right {
          grid-column: 1 / -1;
        }

        &.product-information--media-left .product-details {
          padding-inline-end: var(--padding-lg);
        }

        &.product-information--media-right .product-details {
          padding-inline-start: var(--padding-lg);
        }

        &.product-information__grid--half.product-information--media-left {
          .product-information__media {
            grid-column: 1 / 3;
          }

          .product-details {
            grid-column: 3 / -1;
          }
        }

        &.product-information__grid--half.product-information--media-right {
          .product-information__media {
            grid-column: 3 / -1;
          }

          .product-details {
            grid-column: 1 / 3;
          }
        }
      }
    }
  }

  /* Wider sidebar for large screens */
  @media screen and (min-width: 1200px) {
    .product-information__grid:not(
        .product-information__grid--half,
        .product-information--media-none
      ).product-information--media-left {
      grid-template-columns: 2fr 1fr;
    }

    .product-information__grid:not(
        .product-information__grid--half,
        .product-information--media-none
      ).product-information--media-right {
      grid-template-columns: 1fr 2fr;
    }
  }

  .product-information__grid--limit-details .product-details > .group-block {
    --details-max-width: var(--sidebar-width);
    max-width: var(--details-max-width);
  }

  @media screen and (min-width: 1600px) {
    .product-information__grid--limit-details .product-details > .group-block {
      --details-max-width: 32rem;
    }
  }

  /* If the header is sticky, make product details content stick underneath the header */
  body:has(#header-group #header-component[data-sticky-state='active']) .product-details.sticky-content--desktop {
    --sticky-header-offset: var(--header-height);
  }
/* END_SNIPPET:product-information-content */

/* START_SNIPPET:product-media-gallery-content-styles (INDEX:277) */
media-gallery:where(.media-gallery--grid) .media-gallery__grid {
    display: none;
  }

  media-gallery.media-gallery--grid .media-gallery__grid .product-media-container {
    /* Needed for safari to stretch to full grid height */
    height: 100%;
  }

  @media screen and (min-width: 750px) {
    .media-gallery--two-column .media-gallery__grid {
      grid-template-columns: repeat(2, 1fr);
    }

    /* Display grid view as a carousel on mobile, grid on desktop */
    media-gallery:is(.media-gallery--grid) slideshow-component {
      display: none;
    }

    media-gallery:where(.media-gallery--grid) .media-gallery__grid {
      display: grid;
    }
  }

  .product-media-container__zoom-button {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: var(--layer-flat);
    cursor: zoom-in;
    background-color: transparent;

    &:hover {
      background-color: transparent;
    }
  }

  slideshow-slide.product-media-container--tallest {
    content-visibility: visible;
  }

  .product-media__drag-zoom-wrapper {
    aspect-ratio: inherit;
    min-height: inherit;
    min-width: inherit;
    display: inherit;
    flex: inherit;
  }

  .media-gallery__mobile-controls {
    grid-area: auto;
  }

  .product-media-container--zoomable.product-media-container--image {
    cursor: zoom-in;
  }
/* END_SNIPPET:product-media-gallery-content-styles */

/* START_SNIPPET:product-media-gallery-content (INDEX:278) */
.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:279) */
.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);
  }

  /* ── EL TOPE DE 2x SE PROBO Y SE SACO ───────────────────────────────
     03/11/2026. Se habia acotado la foto a 2 veces el tamaño real del
     archivo, para que una foto chica se viera chica y nitida en vez de
     grande y borrosa.

     Medido en escritorio de verdad (1920px), no sirve: el recuadro de
     esta galeria mide 1093x560, y con el tope el bong de 94x127 quedaba
     dibujado en 188x254. O sea una estampilla flotando en el medio de
     tanto blanco, que se lee como que la pagina esta rota. Blanda pero
     llenando el recuadro se ve mejor que nitida y diminuta, y ademas
     queda del mismo tamaño que el resto de los productos.

     Se dejan las medidas reales en --nat-w y --nat-h por si mas adelante
     se quiere algo intermedio (por ejemplo un piso de tamaño), pero hoy
     NO se usan para limitar nada.

     El arreglo de verdad sigue siendo subir fotos mas grandes: hay 33
     productos cuyo original es tan chico que no hay CSS que los salve.
     Con 900px de lado alcanza para esta galeria, incluso en celular. */

  /*** 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:qlo-quick-add (INDEX:280) */
/* ── ESCALONES DE DESCUENTO POR CANTIDAD EN EL AGREGADO RAPIDO ──── */
  .qlo-vol {
    margin-block: 14px 0;
    padding-block-start: 14px;
    border-block-start: 1px solid #eee;
  }

  .qlo-vol[hidden] { display: none; }

  .qlo-vol__title {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #0F0F0F;
  }

  .qlo-vol__rows { display: flex; flex-direction: column; gap: 6px; }

  .qlo-vol__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    inline-size: 100%;
    padding: 9px 12px;
    border: 1.5px solid #E8E2D9;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    text-align: start;
    transition: border-color 180ms ease, background 180ms ease, transform 140ms ease-out;
  }

  .qlo-vol__row:active { transform: scale(0.985); }
  .qlo-vol__row.is-on { border-color: #C8A66B; background: #FDFBF7; }

  .qlo-vol__izq { display: flex; align-items: center; gap: 7px; min-inline-size: 0; }
  .qlo-vol__cant { font-size: 13px; font-weight: 700; color: #0F0F0F; }

  .qlo-vol__off {
    font-size: 10px;
    font-weight: 800;
    color: #fff;
    background: #00A650;
    border-radius: 4px;
    padding: 2px 5px;
    letter-spacing: 0.02em;
  }

  .qlo-vol__der { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
  .qlo-vol__precio { font-size: 13.5px; font-weight: 800; color: #0F0F0F; }
  .qlo-vol__ahorro { font-size: 10.5px; font-weight: 700; color: #00A650; }

  .qlo-vol__note {
    margin: 7px 0 0;
    font-size: 10.5px;
    color: #777;
    text-align: center;
  }
/* END_SNIPPET:qlo-quick-add */

/* START_SNIPPET:quantity-selector (INDEX:281) */
.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);
    }
  }

  /* El tamano se gobierna con variables. Otros contextos las redefinen
     en lugar de pelear contra width, height o flex-basis. */
  .quantity-selector {
    --qty-height: var(--height-buy-buttons);
    --qty-button-size: 40px;
    --qty-input-width: 44px;
    --qty-icon-size: 16px;
    --qty-stroke: 2.6;
    --qty-line: rgb(var(--color-border-rgb, 0 0 0) / 0.22);
    --qty-ink: rgb(var(--color-foreground-rgb, 0 0 0) / 1);

    display: inline-flex;
    align-items: stretch;
    width: fit-content;
    height: var(--qty-height);
    border: 1.5px solid var(--qty-line);
    border-radius: var(--style-border-radius-inputs, 10px);
    overflow: hidden;
    background: var(--color-background);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
  }

  .quantity-selector:focus-within {
    border-color: rgb(var(--color-foreground-rgb, 0 0 0) / 0.45);
    box-shadow: 0 0 0 3px rgb(var(--color-foreground-rgb, 0 0 0) / 0.07);
  }

  .quantity-selector .quantity-minus,
  .quantity-selector .quantity-plus {
    flex: 0 0 var(--qty-button-size);
    width: var(--qty-button-size);
    min-width: 0;
    height: auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    color: var(--qty-ink);
    cursor: pointer;
    transition: background 0.15s ease, opacity 0.15s ease;
    -webkit-tap-highlight-color: transparent;
  }

  /* ─── Override necesario: el + se veia blanco ───────────────────
     El bloque "INDAJAUS DRAWER OVERRIDES" del header declara

         .svg-wrapper.icon-plus { color:#FFFFFF !important;
                                  font-weight:900 !important;
                                  transform: scale(1.3); }

     sin acotarlo al menu drawer (que es negro, y ahi el blanco es
     correcto). Al no estar acotado pinta de blanco TODOS los simbolos
     + del sitio: sobre el fondo blanco del carrito el + desaparecia,
     y el scale(1.3) ademas lo descuadraba respecto del menos.

     Ese bloque vive en el header, y header.liquid (46 KB),
     header-actions.liquid (42 KB) y header-drawer.liquid (67 KB)
     superan todos el limite de 16.384 caracteres de un documento
     GraphQL, asi que no se puede corregir en el origen por API.

     Se neutraliza aca: 0,3,0 de especificidad contra los 0,2,0 de esa
     regla, con !important para empatarle la prioridad.

     HECHO el 27/10/2026: la regla de origen quedo acotada a
     `.menu-drawer .svg-wrapper.icon-plus`, asi que ya no pisa nada fuera
     del menu. Se pudo cuando el theme paso a editarse con el CLI, que no
     tiene el limite de tamanio de la API.

     Este bloque se deja igual: el color ya no hace falta, pero las medidas
     si, porque el stepper necesita un icono de tamanio fijo.
     ─────────────────────────────────────────────────────────────── */
  .quantity-selector .quantity-minus .svg-wrapper,
  .quantity-selector .quantity-plus .svg-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--qty-icon-size) !important;
    height: var(--qty-icon-size) !important;
    color: var(--qty-ink) !important;
    transform: none !important;
    pointer-events: none;
  }

  .quantity-selector .quantity-minus svg,
  .quantity-selector .quantity-plus svg {
    width: var(--qty-icon-size);
    height: var(--qty-icon-size);
    display: block;
    overflow: visible;
  }

  /* Grosor de los simbolos. Los iconos vienen con viewBox 0 0 24 24 y
     stroke-width 1.75: escalados a 15-16px el trazo real cae por debajo
     de 1px. non-scaling-stroke lo desacopla del viewBox, asi que queda
     en pixeles CSS y no se adelgaza. El stroke se fija a --qty-ink y no
     a currentColor para no depender de lo que herede el span. */
  .quantity-selector .quantity-minus svg path,
  .quantity-selector .quantity-plus svg path,
  .quantity-selector .quantity-minus svg line,
  .quantity-selector .quantity-plus svg line {
    stroke: var(--qty-ink) !important;
    stroke-width: var(--qty-stroke) !important;
    stroke-linecap: round !important;
    vector-effect: non-scaling-stroke;
  }

  @media (hover: hover) {
    .quantity-selector .quantity-minus:hover:not(:disabled),
    .quantity-selector .quantity-plus:hover:not(:disabled) {
      background: rgb(var(--color-foreground-rgb, 0 0 0) / 0.07);
    }
  }

  .quantity-selector .quantity-minus:active:not(:disabled),
  .quantity-selector .quantity-plus:active:not(:disabled) {
    background: rgb(var(--color-foreground-rgb, 0 0 0) / 0.13);
  }

  /* Deshabilitado. Antes no existia: el JS apagaba el boton al llegar
     al minimo y se veia identico a uno activo. */
  .quantity-selector .quantity-minus:disabled,
  .quantity-selector .quantity-plus:disabled {
    opacity: 0.25;
    cursor: not-allowed;
    background: transparent;
  }

  .quantity-selector input[type='number'] {
    flex: 1 1 var(--qty-input-width);
    width: var(--qty-input-width);
    min-width: var(--qty-input-width);
    height: auto;
    min-height: 0;
    border: none;
    border-left: 1px solid var(--qty-line);
    border-right: 1px solid var(--qty-line);
    border-radius: 0;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    background: transparent;
    padding: 0;
    margin: 0;
    box-shadow: none;
    -moz-appearance: textfield;
    appearance: textfield;
    color: var(--qty-ink);
  }

  .quantity-selector input[type='number']::-webkit-inner-spin-button,
  .quantity-selector input[type='number']::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .quantity-selector input[type='number']:focus { outline: none; }
  .quantity-selector input[type='number']:disabled { opacity: 0.5; cursor: not-allowed; }

  .cart-items-disabled .quantity-selector {
    opacity: 0.55;
    transition: opacity 0.15s ease;
  }

  @media screen and (max-width: 749px) {
    .quantity-selector {
      --qty-button-size: 42px;
      --qty-input-width: 46px;
      --qty-icon-size: 17px;
      --qty-stroke: 2.8;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .quantity-selector,
    .quantity-selector .quantity-minus,
    .quantity-selector .quantity-plus {
      transition: none;
    }
  }

  .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:282) */
#quick-add-dialog {
    display: contents;
  }

  @media screen and (min-width: 750px) {
    .quick-add-modal {
      width: var(--quick-add-modal-width);
      height: var(--quick-add-modal-height);
      max-width: none;
    }
  }

  .quick-add-modal {
    padding: 0;
    border: var(--style-border-popover);
    overflow: hidden;
    box-shadow: 0 5px 30px rgb(0 0 0 / var(--opacity-15));

    @media screen and (max-width: 749px) {
      position: fixed;
      margin: auto 0 0 0;
      min-height: unset;
      max-width: 100%;
      border-radius: 0;
      overflow: clip;
      height: fit-content;
    }
  }

  .quick-add-modal[open] {
    @media screen and (max-width: 750px) {
      border-top-left-radius: var(--style-border-radius-popover);
      border-top-right-radius: var(--style-border-radius-popover);
    }
  }

  .quick-add-modal[open] {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .quick-add-modal .view-more-details__wrapper {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .quick-add-modal[open] {
    animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .quick-add-modal.dialog-closing {
    animation: modalSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .quick-add-modal__close {
    position: absolute;
    top: var(--margin-2xs);
    right: var(--margin-2xs);
    transition: transform 0.15s var(--animation-timing-bounce);
    z-index: var(--layer-raised);
    overflow: visible;
    transform-origin: center;
  }

  .quick-add-modal__close:active {
    transform: scale(0.99) translateY(1px);
  }

  .quick-add-modal__close {
    &:focus-visible {
      outline: none;
    }

    &:focus-visible::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: calc(var(--style-border-radius-popover) - var(--margin-2xs));
      outline: var(--focus-outline-width) solid currentColor;
    }
  }

  .quick-add-modal__content {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: 100% 1fr;
    position: relative;
    overflow-y: auto;
    max-height: 100vh;
    flex-grow: 1;

    @media screen and (max-width: 749px) {
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: auto;
      padding-inline: var(--padding-xl);
      padding-block: var(--padding-xl);
      gap: var(--gap-lg);
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      height: auto; /* Prevent a bug in Safari where height:fit-content is not respected */
      max-height: 100vh;
    }
  }

  .quick-add-modal__content .media-gallery--grid .media-gallery__grid {
    grid-template-columns: 1fr;
  }

  .quick-add-modal__content .media-gallery--grid.media-gallery--two-column .product-media-container:first-child {
    grid-column: auto;
  }

  .quick-add-modal__content {
    /* One column */
    .media-gallery--grid:not(.media-gallery--two-column) .product-media > *,
      /* Two column, small first image */
      .media-gallery--grid.media-gallery--two-column:not(.media-gallery--large-first-image)
      .product-media-container:nth-of-type(odd)
      .product-media > *,
      /* Two column, large first image */
      .media-gallery--grid.media-gallery--two-column.media-gallery--large-first-image
        .product-media-container:is(:first-of-type, :nth-of-type(even))
        .product-media > *,
        /* Carousel */
      .media-gallery--carousel slideshow-container {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }

  .quick-add-modal__content .view-more-details__wrapper {
    display: flex;
    justify-content: flex-start;
    width: 100%;
  }

  .view-more-details__wrapper .view-more-details {
    display: flex;
    align-items: center;
    width: fit-content;
  }

  .quick-add-modal__content .product-header {
    @media screen and (max-width: 749px) {
      display: flex;
      flex-direction: column;
      grid-column: 2 / -1;
      grid-row: 1;
      padding-right: var(--padding-2xl);
    }
  }

  .quick-add-modal__content .product-header a:not(product-price *) {
    @media screen and (max-width: 749px) {
      font-size: var(--font-size--md);
      font-weight: 500;
      color: inherit;
      width: fit-content;
    }
  }

  .quick-add-modal__content variant-picker,
  .quick-add-modal__content product-form-component {
    @media screen and (max-width: 749px) {
      grid-column: 1 / -1;
    }
  }

  .quick-add-modal__content .product-media-container__zoom-button {
    cursor: default;
  }

  .quick-add-modal__content .product-details {
    grid-column: 4 / -1;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    position: relative;

    dialog[open] & {
      animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
      animation-delay: 0.1s;
    }

    @media screen and (max-width: 749px) {
      grid-column: 2 / span 2;
      grid-row: span 1;
      max-height: 100%;
      height: 100%;
    }
  }

  @property --quick-add-modal-mask-start {
    syntax: '<length>';
    initial-value: 0px;
    inherits: false;
  }

  @property --quick-add-modal-mask-end {
    syntax: '<length>';
    initial-value: 0px;
    inherits: true;
  }

  @keyframes detect-scroll {
    from,
    to {
      --can-scroll: ;
    }
  }

  @supports (animation-timeline: scroll(self)) {
    dialog[open] .quick-add-modal__content .product-details {
      mask-image: linear-gradient(to bottom, transparent 0%, #000 var(--quick-add-modal-mask-start), #000 100%);
      animation: 0.3s var(--animation-timing-fade-in) 0.1s both fadeSlideIn, scrollStart 1s linear both,
        scrollEnd 1s linear both, detect-scroll 1ms linear none;
      animation-timeline: auto, scroll(self), scroll(self), scroll(self);
      animation-range: normal, 0px 48px, calc(100% - 48px) 100%, 0% 100%;
    }
  }

  @keyframes scrollStart {
    from {
      --quick-add-modal-mask-start: 0px;
    }
    to {
      --quick-add-modal-mask-start: 48px;
    }
  }

  @keyframes scrollEnd {
    from {
      --quick-add-modal-mask-end: 0px;
    }
    to {
      --quick-add-modal-mask-end: 48px;
    }
  }

  .quick-add-modal__content .product-details > .group-block {
    flex-grow: 1;
    width: auto;
  }

  .quick-add-modal__content > * {
    min-height: 0;
  }

  .quick-add-modal__content .product-details :is(.view-product-title, .buy-buttons-block) {
    flex: 0 0 auto;
  }
  .quick-add-modal__content .product-details :is(.buy-buttons-block) {
    margin-top: auto;
    position: sticky;
    bottom: 0;
    padding-bottom: var(--padding-3xl);
    background-color: var(--color-background);
    z-index: var(--layer-raised);

    &::before {
      --quick-add-modal-mask-end-progressive-enhanced: 0px;

      position: absolute;
      content: '';
      display: block;
      inset: auto 0 100% 0;
      pointer-events: none;
      height: min(var(--gap-2xl), var(--gap));
      background-color: inherit;
      mask-image: linear-gradient(
        to top,
        #000 0%,
        #000 calc(var(--gap-2xs)),
        transparent calc(100% - var(--quick-add-modal-mask-end-progressive-enhanced)),
        transparent
      );
    }
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) {
    position: static;
    padding-bottom: 0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) > product-form-component {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) form {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form)::before {
    display: none;
  }

  .quick-add-modal__content .product-details .buy-buttons-block__bar {
    display: block;
    position: sticky;
    bottom: 0;
    margin-top: auto;
    padding-block: var(--gap-md) var(--padding-3xl);
    background-color: var(--color-background);
    z-index: var(--layer-raised);

    &::before {
      --quick-add-modal-mask-end-progressive-enhanced: 0px;

      position: absolute;
      content: '';
      display: block;
      inset: auto 0 100% 0;
      pointer-events: none;
      height: min(var(--gap-2xl), var(--gap));
      background-color: inherit;
      mask-image: linear-gradient(
        to top,
        #000 0%,
        #000 calc(var(--gap-2xs)),
        transparent calc(100% - var(--quick-add-modal-mask-end-progressive-enhanced)),
        transparent
      );
    }
  }

  @supports (animation-timeline: scroll(self)) {
    .quick-add-modal__content .product-details :is(.buy-buttons-block)::before,
    .quick-add-modal__content .product-details .buy-buttons-block__bar::before {
      --mask-if-scroll: var(--can-scroll) var(--quick-add-modal-mask-end);
      --mask-if-no-scroll: 48px;
      --quick-add-modal-mask-end-progressive-enhanced: var(--mask-if-scroll, var(--mask-if-no-scroll));
      height: calc(var(--gap-2xs) + 48px);
    }
  }

  .quick-add-modal__content .product-details .variant-picker {
    flex: 0 0 auto;

    padding-block: min(var(--gap-2xl), var(--gap));
    margin-block-end: calc(var(--focus-outline-offset) + var(--focus-outline-width));
  }

  .quick-add-modal__content .variant-option--swatches {
    padding-inline-start: var(--padding-2xs);
  }

  .quick-add-modal__content .variant-option--swatches legend {
    margin-inline-start: calc(-1 * var(--padding-2xs));
  }

  .quick-add-modal__content:not(:has(.product-information__media)) .product-details {
    grid-column: 1 / -1;
  }

  .quick-add-modal__content .view-product-title {
    display: flex;
    padding-block: 0;
    margin-block-end: 12px;

    /* Prevent overlap between title and close button */
    padding-inline-end: calc(var(--padding-2xl) + calc(var(--minimum-touch-target) / 2));
  }

  .quick-add-modal__content .view-product-title a {
    color: inherit;
    text-decoration: none;
    text-align: left;
    font-size: var(--font-size--2xl);
    font-weight: 600;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s var(--animation-easing);
  }

  .quick-add-modal__content .product-details product-price {
    --text-align: left;
  }

  .quick-add-modal__content .product-details product-price.text-block--align-center {
    margin-inline: 0;
  }

  .quick-add-modal__content .product-details product-price.text-center {
    --text-align: left;
  }

  .quick-add-modal__content .product-details product-price > * {
    text-align: left;
  }

  .quick-add-modal__content
    .product-details
    *:not(
      .group-block,
      .group-block-content,
      .buy-buttons-block,
      .buy-buttons-block *,
      .view-product-title,
      .view-product-title *,
      variant-picker,
      variant-picker *,
      product-price,
      product-price *,
      product-inventory,
      product-inventory *,
      .view-more-details__wrapper,
      .view-more-details__wrapper *
    ) {
    @media screen and (min-width: 750px) {
      /* stylelint-disable-next-line declaration-no-important */
      display: none !important;
    }
  }

  .quick-add-modal__content
    .group-block:not(
      :has(
          .buy-buttons-block,
          .buy-buttons-block *,
          .view-product-title,
          .view-product-title *,
          variant-picker,
          variant-picker *,
          product-price,
          product-price *,
          product-inventory,
          product-inventory *,
          .view-more-details__wrapper,
          .view-more-details__wrapper *
        ),
      .buy-buttons-block
    ) {
    display: none;
  }

  @media screen and (min-width: 750px) {
    .quick-add-modal__content .group-block-content {
      gap: 0;
    }

    .quick-add-modal__content .media-gallery__grid {
      gap: min(var(--gap-2xs), var(--image-gap));
      border-radius: var(--style-border-radius-popover, 0);
    }

    .quick-add-modal__content .media-gallery--grid .product-media img {
      border-radius: 0;
    }
  }

  .quick-add-modal__content .product-details > .group-block {
    padding-block: var(--padding-3xl) 0;
  }

  .quick-add-modal__content :where(.product-details > .group-block > .group-block-content > *) {
    padding-inline: var(--padding-3xl);
  }

  .quick-add-modal__content slideshow-slide:not([aria-hidden='false']) {
    content-visibility: auto;
  }

  .quick-add-modal__content .product-information__media {
    width: 100%;
    grid-column: 1 / span 1;
    grid-row: 1;
    position: relative;
    top: 0;
    animation: fadeIn 0.4s var(--animation-timing-fade-in) both;

    @media screen and (min-width: 750px) {
      position: sticky;
      grid-column: 1 / 4;
      width: var(--quick-add-modal-gallery-width);
      overflow-y: auto;
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .quick-add-modal__content .product-information__media media-gallery {
    pointer-events: none;

    @media screen and (min-width: 750px) {
      position: absolute;
      inset: 0;
    }
  }

  .quick-add-modal media-gallery {
    padding: 0;
  }

  .quick-add-modal__content .product-information__media slideshow-arrows {
    display: none;
  }

  .quick-add-modal__content .product-information__media slideshow-container {
    display: block;
  }

  .quick-add-modal__content .product-information__media slideshow-slides {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
    overflow: visible;
    scroll-snap-type: none;
  }

  .quick-add-modal__content .product-information__media slideshow-slide {
    width: 100%;
    flex: none;
    scroll-snap-align: unset;
    position: relative;
    transform: none;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s var(--animation-easing);
  }

  .quick-add-modal__content .product-information__media slideshow-slide[aria-hidden='true'] {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(1) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(2) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
    animation-delay: 0.05s;
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(3) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
    animation-delay: 0.1s;
  }

  .quick-add-modal__content .product-information__media :is(slideshow-controls, slideshow-controls[thumbnails]) {
    display: none;
  }

  .quick-add-modal__content .sticky-content,
  .quick-add-modal__content .sticky-content--desktop {
    top: 0;
  }

  .quick-add-modal__content .text-block.rte:not(product-price),
  .quick-add-modal__content .view-more-details__wrapper {
    display: none;
  }

  @keyframes fadeSlideIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
/* END_SNIPPET:quick-add-modal-styles */

/* START_SNIPPET:quick-add-styles (INDEX:284) */
/* Quick Add */
  .quick-add {
    --quick-add-offset: var(--padding-sm);
    --quick-add-right: calc(var(--quick-add-offset) + var(--padding-inline-end));
    --quick-add-bottom: calc(var(--quick-add-offset) + var(--padding-block-end));

    position: absolute;
    inset: 0;
    z-index: var(--layer-raised);
    pointer-events: none;

    @media screen and (min-width: 750px) {
      --quick-add-offset: var(--padding-md);
    }
  }

  .quick-add .variant-option__button-label input[data-option-available='false'] {
    cursor: not-allowed;
  }

  .quick-add[class*='color-scheme-'] {
    background-color: #0000;
  }

  product-card:is(:hover, :focus-within) .quick-add__button {
    opacity: 1;
  }

  .quick-add__button {
    display: var(--quick-add-mobile-display, none);
    align-items: center;
    background: linear-gradient(var(--color-background) 0 100%) padding-box;
    padding: 0;
    border-radius: 50px;
    border: 2px solid hsl(0 0% 0% / 0.15);
    height: var(--button-size-md);
    cursor: pointer;
    opacity: var(--quick-add-mobile-opacity, 0);
    overflow: hidden;
    color: var(--color-foreground);
    pointer-events: all;
    position: absolute;
    right: max(var(--quick-add-right), calc((var(--border-radius) + var(--quick-add-right)) * (1 - cos(45deg))));
    bottom: max(var(--quick-add-bottom), calc((var(--border-radius) + var(--quick-add-bottom)) * (1 - cos(45deg))));
    backdrop-filter: blur(20px) saturate(180%);

    &:hover {
      scale: 1.03;

      /* Hover stabilizer: extends hit area to maintain hover state */
      &::before {
        content: '';
        position: absolute;
        inset: -10px;
        z-index: -1;
      }
    }

    &:active {
      scale: 0.99;
    }

    .quick-add[stay-visible] & {
      display: grid;
    }

    @media screen and (min-width: 750px) {
      display: var(--quick-add-display, flex);
      opacity: 0;
    }
  }

  .quick-add__button.add-to-cart-button {
    height: var(--button-size-md);
  }

  .quick-add__button .add-to-cart-text {
    background: var(--color-background);
    overflow: hidden;
    border-radius: 50px;
    height: 100%;
    gap: 0;
  }

  .quick-add__button .svg-wrapper .checkmark-burst {
    width: 22px;
    height: 22px;
  }

  .quick-add__button .add-to-cart-icon {
    /* account for border width */
    height: 100%;
    width: calc(var(--button-size-md) - 4px);
  }

  .quick-add__button .add-to-cart-text__content {
    display: grid;
    grid-template-columns: 0fr;

    & > span {
      min-width: 0;

      span {
        padding-right: var(--padding-sm);
        opacity: 0;
        display: inline-block;
        filter: blur(2px);
        translate: 0.5ch 0;
      }
    }
  }

  .quick-add__button[data-added='true'] .add-to-cart-text {
    animation-name: atc-fade-out;
  }

  .quick-add__button[data-added='true'] .add-to-cart-text--added {
    translate: 0 0;
    animation-name: atc-fade-in;
  }

  .quick-add__product-form-component {
    height: 100%;
  }

  .quick-add__product-form-component .shopify-product-form {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    container-type: inline-size;
    height: 100%;
  }

  .quick-add-modal .product-media {
    width: 100%;
    height: 100%;
  }

  .quick-add-modal deferred-media {
    display: none;
  }

  .quick-add-modal .media-gallery--carousel slideshow-component {
    --cursor: default;
  }

  .quick-add__button:is(:hover, :focus-visible) {
    .add-to-cart-text__content {
      grid-template-columns: 1fr;

      span span {
        opacity: 1;
        translate: 0 0;
        filter: blur(0);
      }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .quick-add__button .add-to-cart-text__content {
      grid-template-columns: 1fr;

      span span {
        opacity: 1;
        translate: 0 0;
        filter: blur(0);
      }
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .quick-add__button {
      transition-property: scale, translate, opacity;
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--ease-out-cubic);
    }

    .quick-add__button:is(:hover, :focus-visible) {
      .add-to-cart-text__content,
      .add-to-cart-text__content span span {
        transition-delay: var(--animation-speed);
      }
    }

    .quick-add__button .add-to-cart-text__content {
      transition-property: grid-template-columns;
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--ease-out-cubic);

      span span {
        transition-property: opacity, filter, translate;
        transition-duration: var(--animation-speed-slow);
        transition-timing-function: var(--ease-out-quad);
      }
    }
  }
/* END_SNIPPET:quick-add-styles */

/* START_SNIPPET:quick-add (INDEX:285) */
.qlo-qa-wrap { width: 100%; }
  .qlo-qa-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 10px 12px;
    background: #C8A66B;
    color: #1a1a1a;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    transition: filter 0.2s, transform 0.15s;
  }
  .qlo-qa-btn:hover { filter: brightness(0.92); transform: translateY(-1px); }
  .qlo-qa-btn:active { transform: translateY(0); }
  .qlo-qa-btn--sold { opacity: 0.45; cursor: default; }
  .qlo-qa-btn--sold:hover { filter: none; transform: none; }
  .qlo-qa-btn .svg-wrapper svg { width: 18px; height: 18px; flex-shrink: 0; }

  /* Shimmer */
  .qlo-qa-btn--add::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 60%; height: 100%;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%);
    transform: skewX(-20deg);
    animation: qlo-qa-shimmer 2.8s ease-in-out infinite;
  }
  @keyframes qlo-qa-shimmer {
    0%   { left: -100%; }
    40%  { left: 150%; }
    100% { left: 150%; }
  }
/* END_SNIPPET:quick-add */

/* START_SNIPPET:resource-card (INDEX:286) */
.resource-card {
    --resource-card-secondary-image-opacity: 0;
    --resource-card-primary-image-opacity: calc(1 - var(--resource-card-secondary-image-opacity));

    display: flex;
    flex-direction: column;
    row-gap: var(--padding-xs);
    position: relative;
    text-decoration: none;
    height: 100%;
    opacity: 0;
    animation: fadeIn var(--animation-speed-medium) var(--animation-timing-fade-in) forwards;
  }

  .resource-card__link {
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  .resource-card__content {
    display: flex;
    flex-direction: column;
    color: var(--color-foreground);
    gap: var(--padding-3xs);

    .price {
      font-weight: 500;
    }

    .volume-pricing-note {
      display: block;
      margin-top: var(--padding-3xs);
      font-family: var(--font-body--family);
      font-weight: normal;
      font-size: min(0.85em, var(--font-paragraph--size));
      line-height: normal;
      letter-spacing: normal;
      text-transform: none;
      color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    }
  }

  .resource-card[data-resource-type='article'] .resource-card__content,
  .resource-card[data-resource-type='page'] .resource-card__content {
    gap: var(--padding-xs);
  }

  .resource-card__image {
    aspect-ratio: var(--resource-card-aspect-ratio, auto);
    object-fit: cover;
    border-radius: var(--resource-card-corner-radius);
    opacity: var(--resource-card-primary-image-opacity);
  }

  /* ── LA FOTO DE HOVER SE DESBORDABA ───────────────────────────────
     05/11/2026, lo vio Rodrigo en el buscador de la lupita: al pasar el
     mouse por los primeros productos la foto se iba de madre.

     Eran dos cosas encadenadas. La segunda foto es `position: absolute`,
     pero el contenedor de la imagen (.resource-card__media) no estaba
     posicionado, asi que se colgaba de la TARJETA ENTERA. Y como no tenia
     ancho propio, su tamaño salia del atributo `sizes`, que en estas
     tarjetas vale "auto": cuando el navegador no puede medir la caja —y no
     puede, porque es absoluta y sin ancho— "auto" cae en 100vw. O sea que
     elegia la version de 1200px y la dibujaba del ancho de la pantalla.

     Con el contenedor posicionado y la foto atada a sus cuatro lados, la
     segunda ocupa exactamente lo mismo que la primera y `sizes: auto` pasa
     a medir bien. Toca el buscador y el mega menu, que son los dos lugares
     que piden foto de hover. */
  .resource-card__media {
    position: relative;
  }

  .resource-card__image--secondary {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    opacity: var(--resource-card-secondary-image-opacity);
    border-radius: var(--resource-card-corner-radius);
  }

  .resource-card__media:empty {
    display: none;
  }

  .resource-card__image-placeholder {
    padding: var(--padding-sm);
    font-size: var(--font-size--lg);
    line-height: var(--line-height--display-loose);
    word-break: break-word;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    aspect-ratio: var(--resource-card-aspect-ratio, auto);
    border-radius: var(--resource-card-corner-radius);
    color: var(--color-foreground);
  }

  .resource-card__title {
    margin-block: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: 1.3;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .resource-card__title.paragraph {
    line-height: 1.3;
  }

  .resource-card--overlay {
    height: 100%;

    &::before {
      content: '';
      position: absolute;
      inset: 50% 0 0;
      background: var(--gradient-image-overlay);
      border-radius: var(--resource-card-corner-radius);
      pointer-events: none;
      z-index: var(--layer-flat);
    }
  }

  .resource-card--overlay .resource-card__image {
    height: 100%;
  }

  .resource-card--overlay .resource-card__content {
    position: absolute;
    inset: auto 0 0;
    padding: var(--padding-lg) var(--padding-lg) var(--padding-sm);
    z-index: var(--layer-raised);
  }

  .resource-card--overlay .resource-card__title {
    color: var(--color-white);
  }

  /* Collection images */
  .resource-card__image-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap-2xs);
  }

  .resource-card__collection-image {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: calc(var(--card-corner-radius) - (var(--padding-xs) / 2));
  }

  .resource-card__subtext {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    margin-block-start: 0;
  }

  .resource-card__subtext.paragraph {
    font-size: var(--font-size--body-sm);
    line-height: var(--line-height--body-tight);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .resource-card:has(.resource-card__image--secondary) {
    &:hover,
    &:focus {
      --resource-card-secondary-image-opacity: 1;
    }
  }
/* END_SNIPPET:resource-card */

/* START_SNIPPET:resource-image (INDEX:287) */
.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:288) */
.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;
  }

  /* Ocultar clones duplicados de accesibilidad */
  .resource-list__slide--clone {
    aria-hidden: true;
  }

  /*
   * Resource list carousels have peeking slides on both sides.
   * We try to kick load them beforehand (they are lazy loaded otherwise).
   */
  .resource-list__carousel
    :is(
      slideshow-slide:has(+ slideshow-slide[aria-hidden='false']),
      slideshow-slide[aria-hidden='false'] + slideshow-slide
    ) {
    content-visibility: auto;

    slideshow-component[actioned] & {
      content-visibility: visible;
    }
  }
/* END_SNIPPET:resource-list-carousel */

/* START_SNIPPET:search-modal (INDEX:291) */
.search-modal {
    --search-border-radius: 0;
    --search-border-width: 0;
    --sd-tinta: #0F1512;
    --sd-oro: #C8A66B;
  }

  dialog.search-modal__content:not([open]) {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }

  dialog.search-modal__content[open] {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: rgba(10, 14, 12, 0.46) !important;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    box-shadow: none !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    justify-content: flex-end !important;
    z-index: 99998 !important;
    transform: none !important;
  }

  dialog.search-modal__content::backdrop {
    display: none !important;
  }

  .dialog-modal[open].search-modal__content {
    /* 360ms y la curva del panel: antes eran 460 lineales, que con el
       panel en 520 dejaba el fondo terminando antes y se notaba. */
    /* 09/11/2026: 360 -> 520ms. "Mas lento y clean". */
    animation: sd-dialog-open 520ms cubic-bezier(0.32, 0.72, 0, 1) both !important;
    transform: none !important;
  }

  /* ══════════════════════════════════════════════════════════════════
     EL FONDO BORROSO SE VA CON EL PANEL

     Que pasaba: al cerrar, el panel se desliza y desaparece, pero el
     dialog se queda vivo un rato mas por la animacion sd-dialog-close, que
     va de opacity 1 a 0.9999. O sea, no hace nada: esta solo para que el
     navegador no saque el elemento de la pantalla antes de que termine de
     salir el panel.

     El problema es que el fondo oscuro y el desenfoque viven en ESE
     elemento. Mientras dura la animacion fantasma, la pagina de atras
     sigue borrosa aunque el buscador ya no este. Se veia como un parpadeo
     raro de medio segundo despues de cerrar.

     Ahora el fondo y el desenfoque se van en 320ms, que es lo que tarda el
     panel en salir. Los dos se apagan juntos y no queda nada colgado.
     ══════════════════════════════════════════════════════════════════ */
  .dialog-modal.search-modal__content.dialog-closing {
    /* Cerrar deja de ser lineal: lineal se lee como un corte. */
    animation: sd-dialog-close 380ms cubic-bezier(0.32, 0.72, 0, 1) both !important;
    transform: none !important;
    background: rgba(10, 14, 12, 0) !important;
    -webkit-backdrop-filter: blur(0px) !important;
    backdrop-filter: blur(0px) !important;
    /* 08/11/2026: de 400 a 240ms, y es EL numero que importa. Ver la nota
       de abajo sobre la pantalla muerta: onAnimationEnd usa
       getAnimations(), que devuelve animaciones Y transiciones, y espera a
       la mas larga de todas. Con la animacion en 260 pero esta transicion
       en 400, el que mandaba era el 400 y acortar la animacion no servia
       de nada. Medido: no bajaba de ~460ms. */
    transition:
      background 240ms ease,
      -webkit-backdrop-filter 240ms ease,
      backdrop-filter 240ms ease !important;
  }

  /* ── EL CAJON NO PUEDE QUEDAR TAPANDO DESPUES DE IRSE ────────────────
     closeDialog() de dialog.js espera el animationend del <dialog> antes
     de llamar a dialog.close(). Mientras tanto el dialog sigue abierto y
     ocupa la pantalla entera, invisible pero comiendose los toques.

     Con sd-dialog-close en 1000ms eso daba un segundo entero de pantalla
     muerta despues de cerrar, donde el panel ya se habia ido mucho antes.
     Es la otra mitad de "cierra medio raro".

     Desde el 22/10/2026 en escritorio el panel sale en 320ms y el dialog
     en 360, asi que ahi tampoco sobra. En telefono se acorta un poco mas,
     que la salida es de 240. */
  @media screen and (max-width: 749px) {
    .dialog-modal.search-modal__content.dialog-closing {
      animation-duration: 240ms !important;
      transition-duration: 210ms !important;
    }
  }

  /* ══════════════════════════════════════════════════════════════════
     POR QUE LA SALIDA SE ACORTO (08/11/2026)

     closeDialog() espera el animationend del <dialog> antes de llamar a
     dialog.close(), y hasta ese close() la pagina de atras esta inerte:
     no se puede tocar NADA. Medido de punta a punta en escritorio, desde
     el click en la X hasta que la lupita vuelve a responder: 496ms. Medio
     segundo en el que la persona toca y no pasa nada. Ese es el "a veces
     no abre" que reporto Rodrigo, y no se arregla con CSS de
     pointer-events ni con la bandera #closing de dialog.js: el navegador
     directamente no entrega el evento.

     La unica palanca es que el dialogo cierre antes. Y "antes" lo define
     el elemento mas lento del <dialog>, no la animacion sola:
     onAnimationEnd llama a getAnimations(), que trae animaciones Y
     transiciones, y espera a que terminen TODAS. En el dialogo corrian
     tres cosas a la vez: la animacion fantasma sd-dialog-close (440ms),
     la transicion del velo y el desenfoque del CSS (400ms) y otra
     transicion que apagarFondo() pone en linea desde el JS (320ms).
     Mandaba la de 440.

     Bajan las tres juntas, que es lo que lo hace funcionar: animacion a
     260ms, transicion del CSS a 240 y la de apagarFondo() a 240. En
     telefono, 240 y 210. El panel acompania: de 400 a 260 en escritorio
     y de 360 a 240 en telefono.

     La ENTRADA no se toca. Es la que Rodrigo mira y la que le gusta
     (520ms de costado en escritorio, 460 de subida en telefono). Una
     salida mas corta que la entrada es ademas lo que uno espera de algo
     que decidio cerrar.

     Y con la curva cubic-bezier(0.23, 1, 0.32, 1) sobra: a los 280ms de
     una salida de 280 el panel recorrio todo, pero ya a mitad de camino
     va por el 90% de la distancia. Se acorta el reloj, no el movimiento.
     ══════════════════════════════════════════════════════════════════ */

  /* ══════════════════════════════════════════════════════════════════
     EL FONDO ENTRA CON EL PANEL, NO ANTES

     08/11/2026, Rodrigo: "mejorar la transicion al abrir el buscador".

     Que pasaba: el panel entra de costado en 520ms, pero el fondo
     oscuro y el desenfoque aparecian de GOLPE en el primer cuadro. O
     sea que la pantalla se oscurecia entera y recien despues llegaba el
     panel. Se leia como dos cosas: un flash y, aparte, un cajon.

     Al cerrar ya se iban juntos —eso se habia arreglado el 22/10— pero
     la apertura habia quedado sin tocar.

     Ahora los keyframes de apertura, que ya corrian igual para mantener
     vivo al elemento, hacen trabajo de verdad: llevan el velo de
     transparente a su valor y el desenfoque de 0 a 3px en 360ms, con la
     misma curva del panel. Las dos cosas se materializan juntas.

     Van en los keyframes y no en una transition porque al abrirse un
     <dialog> no hay estado anterior del que interpolar: la transition
     no tendria de donde arrancar.
     ══════════════════════════════════════════════════════════════════ */
  @keyframes sd-dialog-open {
    from {
      background: rgba(10, 14, 12, 0);
      -webkit-backdrop-filter: blur(0px);
      backdrop-filter: blur(0px);
    }
    to {
      background: rgba(10, 14, 12, 0.46);
      -webkit-backdrop-filter: blur(3px);
      backdrop-filter: blur(3px);
    }
  }
  @keyframes sd-dialog-close {
    from { opacity: 1; }
    to   { opacity: 0.9999; }
  }

  /* ══════════════════════════════════════════════════════════════════
     COMO ENTRA Y COMO SALE EL PANEL

     Reescrito el 22/10/2026. Pedido de Rodrigo: "abre muy rapido y medio
     tirado para la izquierda".

     ── QUE PASABA ────────────────────────────────────────────────────
     Habia un bloque de reglas sin acotar, pensado para escritorio, y
     abajo un @media de telefono que pretendia cambiarle el movimiento a
     una subida corta con fundido. Medido cuadro a cuadro en el preview,
     a 375px de ancho, lo que llegaba a la pantalla era otra cosa: del
     bloque de telefono solo mandaba el TIEMPO (420ms) y el movimiento
     seguia siendo el horizontal de escritorio. O sea que el panel, que
     en telefono mide 355 de 375px, cruzaba la pantalla entera de derecha
     a izquierda en 420ms. Eso es exactamente lo que se ve como un tiron
     hacia la izquierda, y como va rapido se siente de golpe.

     Y habia un segundo choque, este sin lugar a dudas: la regla de
     cierre que estaba al final, FUERA del @media, tenia el selector
     IDENTICO a la de adentro y las dos con !important. Gana la que va
     ultima, asi que en telefono el cierre tampoco era el previsto.

     ── COMO SE ARREGLA ───────────────────────────────────────────────
     Cada tamanio en su propio @media, sin reglas sueltas que se filtren
     de uno al otro. Lo que es comun a los dos (la caja, el fondo, la
     sombra) queda afuera, pero sin tocar transform ni transition, que
     son justo las que se peleaban.

     ── POR QUE EN TELEFONO NO SE DESLIZA ─────────────────────────────
     Un panel que ocupa 355 de 375px no "viene desde un costado": ocupa
     todo. Hacerlo cruzar la pantalla es mucho movimiento para algo que
     va a terminar cubriendola igual, y encima obliga a una animacion
     corta para que no se haga eterna, que es de donde sale la sensacion
     de golpe. Sube 14px y aparece: poco recorrido, y la curva fuerte de
     salida hace que arranque rapido y frene suave, que es lo que se lee
     como que responde.

     En escritorio el panel mide 400px contra 1280 de pantalla, asi que
     ahi si entra desde la derecha y se ve bien. Ese movimiento no se
     toco, el cliente lo pidio asi.
     ══════════════════════════════════════════════════════════════════ */

  /* Lo comun a los dos tamanios. Sin transform ni transition aca. */
  dialog.search-modal__content predictive-search-component.predictive-search {
    position: relative !important;
    max-width: 100vw !important;
    height: auto !important;
    min-height: 0 !important;
    align-self: stretch !important;
    background: #fff !important;
    box-shadow: 0 28px 70px rgba(15, 21, 18, 0.3) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    will-change: transform, opacity !important;
    animation: none !important;
  }

  /* ── ESCRITORIO: entra desde la derecha ─────────────────────────────
     Aca el panel mide 400px contra 1280 de pantalla, asi que deslizarlo
     desde el costado se ve bien. El movimiento no se toco: eso es lo que
     al cliente le gusta y sigue igual.

     ── LOS TIEMPOS, BAJADOS EL 22/10/2026 ────────────────────────────
     Estaban en 1600ms para entrar y 1000 para salir. Medido en el
     preview, la apertura tardaba 1390ms de punta a punta: un segundo y
     medio para que aparezca un buscador es mucho, y mas en algo que se
     abre para escribir rapido una busqueda.

     Van a 420 y 320, que es el rango donde un cajon se siente que
     responde. Son los mismos numeros del telefono, asi que ahora los dos
     tamanios abren al mismo ritmo.

     Tambien cambia la curva. cubic-bezier(0.76, 0, 0.24, 1) es un
     ease-in-out: arranca lento. A 1600ms eso no se notaba, pero a 420 si,
     porque el arranque es justo el momento que el ojo mira. Pasa a
     cubic-bezier(0.23, 1, 0.32, 1), que sale rapido y frena suave, que es
     lo que se lee como que responde. Para volver atras, son estos dos
     numeros y esta curva. */
  @media screen and (min-width: 750px) {
    dialog.search-modal__content predictive-search-component.predictive-search {
      --sd-desde: translateX(calc(100% + 14px));
      --sd-desde-opacidad: 1;

      width: 400px !important;
      margin: 14px 14px 14px 0 !important;
      border-radius: 22px !important;
      transform: var(--sd-desde) !important;
      opacity: var(--sd-desde-opacidad) !important;
      /* 05/11/2026: de 420 a 520. El panel entra de costado y recorre su
         ancho entero, asi que aca si se nota el reloj. */
      transition: transform 680ms cubic-bezier(0.32, 0.72, 0, 1) 16ms !important;
    }

    dialog.search-modal__content[open] predictive-search-component.predictive-search {
      transform: none !important;
      opacity: 1 !important;
    }

    .dialog-modal.search-modal__content.dialog-closing predictive-search-component.predictive-search {
      transform: var(--sd-desde) !important;
      opacity: var(--sd-desde-opacidad) !important;
      transition: transform 400ms cubic-bezier(0.32, 0.72, 0, 1) !important;
    }
  }

  /* ── TELEFONO: sube un poco y aparece ─────────────────────────────── */
  @media screen and (max-width: 749px) {
    dialog.search-modal__content predictive-search-component.predictive-search {
      /* Ancho por calc y no por auto: el contenedor es un flex row con
         justify-content: flex-end, asi que un ancho automatico se achica
         al contenido y el panel quedaba corrido 7px fuera del borde. */
      width: calc(100vw - 20px) !important;
      max-width: calc(100vw - 20px) !important;
      /* Mismo aire que el carrito a los cuatro lados, mas el area segura
         de abajo, para que los dos paneles del sitio midan igual. */
      margin: 10px 10px max(10px, env(safe-area-inset-bottom, 0px)) 10px !important;
      border-radius: 20px !important;
      /* 05/11/2026: de 14 a 40px. Con 14 el panel no entraba, parpadeaba
         en el lugar — el mismo problema que tenia el carrito. */
      --sd-desde: translateY(40px);
      --sd-desde-opacidad: 0;

      transform: var(--sd-desde) !important;
      opacity: var(--sd-desde-opacidad) !important;
      transition: transform 460ms cubic-bezier(0.23, 1, 0.32, 1),
                  opacity 220ms ease !important;
    }

    dialog.search-modal__content[open] predictive-search-component.predictive-search {
      transform: none !important;
      opacity: 1 !important;
    }

    /* Sale mas rapido de lo que entra, que es como se espera que
       responda algo que uno decide cerrar. */
    .dialog-modal.search-modal__content.dialog-closing predictive-search-component.predictive-search {
      transform: translateY(40px) !important;
      opacity: 0 !important;
      transition: transform 240ms cubic-bezier(0.23, 1, 0.32, 1),
                  opacity 150ms ease !important;
    }
  }

  /* Si el sistema pide menos movimiento, solo el fundido. */
  @media (prefers-reduced-motion: reduce) {
    dialog.search-modal__content predictive-search-component.predictive-search,
    dialog.search-modal__content[open] predictive-search-component.predictive-search,
    .dialog-modal.search-modal__content.dialog-closing predictive-search-component.predictive-search {
      transform: none !important;
      transition: opacity 160ms ease !important;
    }
  }

  /* ── Cabecera oscura ─────────────────────────────────────────────────── */

  .sd-header {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    padding: 24px 20px 20px !important;
    border: none !important;
    border-bottom: 1px solid rgba(200, 166, 107, 0.45) !important;
    flex-shrink: 0 !important;
    background: #0F1512 !important;
  }

  .sd-header__top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }

  .sd-title {
    margin: 0 !important;
    font-size: 26px !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em !important;
    color: #fff !important;
    line-height: 1.1 !important;
  }

  /* El campo como caja sobre el fondo oscuro, no como input pelado. */
  .sd-field {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 14px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    background: rgba(255, 255, 255, 0.07) !important;
    transition: border-color 200ms ease, background 200ms ease !important;
  }

  .sd-field:focus-within {
    border-color: rgba(200, 166, 107, 0.8) !important;
    background: rgba(255, 255, 255, 0.11) !important;
  }

  .sd-search-icon {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    color: rgba(255, 255, 255, 0.55) !important;
  }
  .sd-search-icon svg { width: 17px !important; height: 17px !important; }

  .sd-input-wrap {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
  }

  .sd-input-wrap input.search-input {
    font-size: 15px !important;
    font-weight: 600 !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    width: 100% !important;
    padding: 0 !important;
    color: #fff !important;
  }
  .sd-input-wrap input.search-input::placeholder {
    color: rgba(255, 255, 255, 0.45) !important;
    font-weight: 500 !important;
  }

  .sd-input-wrap .predictive-search__reset-button {
    flex-shrink: 0 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: rgba(255, 255, 255, 0.55) !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
  }
  .sd-input-wrap .predictive-search__reset-button:hover { color: #fff !important; }

  .search-modal__content .predictive-search__close-modal-button {
    --button-color: #fff !important;
    --button-background-color: transparent !important;
    width: 36px !important;
    height: 36px !important;
    min-width: unset !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 11px !important;
    color: #fff !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    transition: background 200ms ease, border-color 200ms ease !important;
    margin-inline-start: 0 !important;
  }
  .search-modal__content .predictive-search__close-modal-button:hover {
    background: rgba(255, 255, 255, 0.16) !important;
    border-color: rgba(200, 166, 107, 0.6) !important;
    box-shadow: none !important;
  }
  .search-modal__content .predictive-search__close-modal-button .svg-wrapper svg {
    width: 15px !important;
    height: 15px !important;
  }

  .predictive-search__icon { display: none !important; }

  /* ── Pastillas de categorias ─────────────────────────────────────────── */
  .sd-pills {
    flex: none;
    padding: 16px 18px 6px;
  }

  .sd-pills__titulo {
    margin: 0 0 10px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #C8A66B;
  }

  /* Carril en vez de varias lineas: con todas las categorias puestas, el
     envolver empujaba los resultados fuera de la pantalla. El padding de
     la derecha deja asomar la siguiente pastilla, que es la pista de que
     hay mas para el costado. */
  .sd-pills__fila {
    display: flex;
    flex-wrap: nowrap;
    gap: 7px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-inline-end: 22px;
    min-inline-size: 0;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  .sd-pills__fila::-webkit-scrollbar { display: none; }

  .sd-pill {
    flex: 0 0 auto;
    scroll-snap-align: start;
    white-space: nowrap;
  }

  /* Las de segundo nivel se ven un punto mas livianas, para que se note
     que cuelgan de la de al lado y no que son todas del mismo rango. */
  .sd-pill--hija {
    background: rgba(15, 21, 18, 0.03);
    border-color: rgba(15, 21, 18, 0.1);
  }

  /* ── VIDRIO ──────────────────────────────────────────────────────
     09/11/2026, Rodrigo: "las pills mas liquid glass".

     El vidrio de la casa es translucido con desenfoque detras, y eso
     sobre un panel blanco no se nota: no hay nada que desenfocar. Lo
     que hace que una pastilla se lea como vidrio sobre blanco son
     otras tres cosas, y son las que se usan aca:

     · un degradado muy corto de blanco a crema, para que la superficie
       no sea plana;
     · una luz interior arriba (inset), que es el brillo del canto;
     · una sombra baja y muy abierta, que la despega del fondo sin
       dibujarle un borde duro.

     El borde pasa de gris neutro a dorado al 28%: el canto de un
     vidrio toma el color de lo que lo rodea, y lo que rodea a esta
     tienda es el dorado. */
  .sd-pill {
    padding: 8px 14px;
    border: 1px solid rgba(200, 166, 107, 0.30);
    border-radius: 999px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 245, 238, 0.86) 100%);
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    box-shadow:
      0 1px 2px rgba(15, 21, 18, 0.05),
      0 8px 18px -12px rgba(15, 21, 18, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.95);
    color: #0F1512;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    transition:
      transform 220ms cubic-bezier(0.32, 0.72, 0, 1),
      border-color 280ms ease,
      box-shadow 280ms ease,
      background 280ms ease;
  }
  .sd-pill:active {
    transform: scale(0.96);
    box-shadow:
      0 1px 1px rgba(15, 21, 18, 0.06),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }

  @media (hover: hover) and (pointer: fine) {
    .sd-pill:hover {
      border-color: rgba(200, 166, 107, 0.7);
      background: #FDFBF7;
    }
  }

  .sd-pill:active { transform: scale(0.96); }

  .sd-pill:focus-visible {
    outline: 2px solid #C8A66B;
    outline-offset: 3px;
  }

  /* Apenas hay resultados las pastillas sobran: el visitante ya sabe que
     busca. Misma regla que usa el boton de ver todo. */
  dialog.search-modal__content predictive-search-component:has([data-search-results]) .sd-pills {
    display: none;
  }

  /* ── Cuerpo ──────────────────────────────────────────────────────────── */

  dialog.search-modal__content .predictive-search-form {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    width: 100% !important;
  }

  dialog.search-modal__content .predictive-search-form__content-wrapper {
    position: static !important;
    overflow: visible !important;
    max-height: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
  }

  dialog.search-modal__content .predictive-search-form__content {
    flex: 1 !important;
    overflow-y: auto !important;
    max-height: none !important;
    padding: 6px 14px 14px !important;
    scrollbar-width: none !important;
  }
  dialog.search-modal__content .predictive-search-form__content::-webkit-scrollbar {
    display: none !important;
  }

  /* Volanta dorada para Productos y Colecciones. */
  dialog.search-modal__content .predictive-search-results__title {
    margin: 18px 6px 10px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: #C8A66B !important;
  }

  /* Resultados en filas, no en grilla: a 400px de ancho la grilla de 2
     columnas cortaba los nombres justo donde se decide la compra. */
  dialog.search-modal__content .predictive-search-results__wrapper-products {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    grid-template-columns: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  dialog.search-modal__content .predictive-search-results__card--product {
    width: auto !important;
    max-width: none !important;
  }

  dialog.search-modal__content .predictive-search-results__card--product .resource-card {
    display: grid !important;
    grid-template-columns: 62px 1fr !important;
    gap: 14px !important;
    align-items: center !important;
    padding: 9px 6px !important;
    border-radius: 14px !important;
    transition: background 180ms ease !important;
  }

  @media (hover: hover) and (pointer: fine) {
    dialog.search-modal__content .predictive-search-results__card--product .resource-card:hover {
      background: rgba(200, 166, 107, 0.12) !important;
    }
  }

  dialog.search-modal__content .predictive-search-results__card--product .resource-card__media {
    --resource-card-aspect-ratio: 1 !important;
    width: 62px !important;
    height: 62px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: #F7F6F3 !important;
    flex: none !important;
  }

  dialog.search-modal__content .predictive-search-results__card--product .resource-card__image {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  dialog.search-modal__content .predictive-search-results__card--product .resource-card__content {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    min-width: 0 !important;
    text-align: start !important;
  }

  /* El tema centra el texto de las cards. En fila eso se lee mal: el ojo
     tiene que buscar donde empieza cada nombre. Va alineado a la izquierda. */
  dialog.search-modal__content .resource-card__title {
    margin: 0 !important;
    text-align: start !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: #0F1512 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  dialog.search-modal__content .resource-card__content .price,
  dialog.search-modal__content .resource-card__content [ref='priceContainer'],
  dialog.search-modal__content .resource-card__content .price__regular {
    text-align: start !important;
  }

  dialog.search-modal__content .resource-card__content .price {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #0F1512 !important;
  }

  /* Colecciones: el tema las trae en un carrusel. Se deja el carrusel pero
     las tarjetas quedan mas chicas, para que no le coman la pantalla a los
     productos, que son lo que mas se busca. */
  dialog.search-modal__content .predictive-search-results__card--collection .resource-card__media {
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  dialog.search-modal__content .predictive-search-results__card--collection .resource-card__title {
    font-size: 12.5px !important;
    font-weight: 700 !important;
  }

  /* ── Pie ─────────────────────────────────────────────────────────────── */

  dialog.search-modal__content .predictive-search-form__footer {
    display: none !important;
    padding: 14px 16px 18px !important;
    background: #fff !important;
    border-top: 1px solid rgba(15, 21, 18, 0.08) !important;
    flex-shrink: 0 !important;
  }
  dialog.search-modal__content predictive-search-component:has([data-search-results]):not(:has(.predictive-search-results__no-results))
    .predictive-search-form__footer {
    display: block !important;
  }
  dialog.search-modal__content .predictive-search__search-button {
    width: 100% !important;
    padding: 15px 20px !important;
    border: none !important;
    border-radius: 14px !important;
    background: #0F1512 !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    transition: transform 160ms ease-out, background 200ms ease !important;
  }
  dialog.search-modal__content .predictive-search__search-button:hover {
    background: #1C2622 !important;
  }
  dialog.search-modal__content .predictive-search__search-button:active {
    transform: scale(0.98) !important;
  }

  @media (prefers-reduced-motion: reduce) {
    dialog.search-modal__content .predictive-search-results__card--product .resource-card,
    dialog.search-modal__content .predictive-search__search-button,
    .sd-field { transition: none !important; }
  }


  /* ══════════════════════════════════════════════════════════════════
     MIENTRAS SE VA, NO SE COME LOS TOQUES
     08/11/2026.

     El <dialog> cubre la pantalla entera (inset: 0, z-index 99998) y
     sigue vivo todo el cierre, porque closeDialog() espera el
     animationend antes de llamar a close(). Medido en escritorio: 549ms
     en los que document.elementFromPoint devuelve el DIALOG en cualquier
     punto de la pantalla, con el panel ya invisible. O sea medio segundo
     de pantalla muerta despues de cerrar.

     CUIDADO CON LO QUE ESTO ARREGLA Y LO QUE NO. Medido: esto NO le
     devuelve el toque a la lupita. Un dialogo abierto con showModal()
     deja TODA la pagina de atras inerte mientras siga abierto, y sigue
     abierto hasta que corre dialog.close(). Con la clase dialog-closing
     puesta, document.elementFromPoint sobre la lupita devuelve el <html>,
     no el boton: ningun toque real llega al header hasta que el dialogo
     cierra de verdad. Eso no se arregla con CSS, se arregla acortando la
     salida, que es lo que se hizo mas abajo con los tiempos.

     Lo que SI hace: mientras el panel se va, no se le puede pegar a nada
     de adentro. Sin esto, la unica cosa clickeable en toda la pantalla
     durante la salida eran las tarjetas del panel que se esta yendo, y
     pegarle a una abre un producto que la persona ya dejo de mirar.
     ══════════════════════════════════════════════════════════════════ */
  .dialog-modal.search-modal__content.dialog-closing,
  .dialog-modal.search-modal__content.dialog-closing predictive-search-component.predictive-search {
    pointer-events: none !important;
  }

  /* ══════════════════════════════════════════════════════════════════
     CON EL TECLADO ARRIBA, LA CABECERA SE ACHICA

     Medido a 375x420 (lo que queda de un telefono con el teclado
     abierto), buscando "bong": cabecera 147px + pie 87px = 234px de
     cromo sobre 420 de pantalla. Quedaban 166px para los resultados, o
     sea UN resultado entero visible de los 10 que habia. La persona esta
     escribiendo y no ve lo que busca.

     De donde salen esos 147: el titulo "Buscar" en 26px con su fila
     propia, mas 24px de padding arriba. El titulo dice lo mismo que el
     placeholder del campo que tiene justo abajo, asi que con poco alto se
     va y la cabecera pasa a una sola fila: campo a la izquierda, cerrar a
     la derecha, que es la barra de busqueda de toda la vida.

     El <h2> no se borra ni se le saca al lector de pantalla: queda como
     visually-hidden, asi que el dialogo conserva su nombre accesible
     (aria-labelledby apunta a el).

     El atributo lo pone el JS de mas abajo mirando visualViewport, y no
     una @media (max-height), porque en iOS el teclado NO achica el
     viewport de layout: una media query de altura ahi no se dispara.
     ══════════════════════════════════════════════════════════════════ */
  html[ij-teclado] .search-modal .sd-header {
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 14px !important;
  }
  html[ij-teclado] .search-modal .sd-header__top {
    order: 2 !important;
    flex: none !important;
  }
  html[ij-teclado] .search-modal .sd-title {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }
  html[ij-teclado] .search-modal .sd-field {
    order: 1 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 9px 12px !important;
  }
  html[ij-teclado] .search-modal .sd-pills {
    padding: 10px 16px 4px !important;
  }
  html[ij-teclado] .search-modal .sd-pills__titulo {
    margin-bottom: 7px !important;
  }
  html[ij-teclado] dialog.search-modal__content .predictive-search-form__footer {
    padding: 8px 14px 10px !important;
  }
  html[ij-teclado] dialog.search-modal__content .predictive-search__search-button {
    padding: 11px 16px !important;
    font-size: 14px !important;
  }

  /* ══════════════════════════════════════════════════════════════════
     LA FILA ELEGIDA CON EL TECLADO TIENE QUE VERSE

     Las flechas y el Enter ya funcionaban: predictive-search.js marca la
     fila con aria-selected y la clase keyboard-focus, y la lleva sola a
     la vista. Lo que no funcionaba era VERLO. Medido comparando la fila
     elegida contra una normal, lo unico que cambiaba era el fondo a
     rgba(15,15,15,0.05) y un contorno de 1px en #E8E2D9. Sobre el panel
     blanco eso da 1.19:1 de contraste: invisible.

     Ahora la fila elegida se pinta con el mismo oro del hover y le entra
     una barra dorada por la izquierda. Oro porque esa fila es lo que el
     Enter va a abrir: es accion, no dato.
     ══════════════════════════════════════════════════════════════════ */
  dialog.search-modal__content .predictive-search-results__card[aria-selected='true'] > .resource-card,
  dialog.search-modal__content .predictive-search-results__card.keyboard-focus > .resource-card,
  dialog.search-modal__content .predictive-search-results__card[aria-selected='true'] .sd-col-pill,
  dialog.search-modal__content .predictive-search-results__card.keyboard-focus .sd-col-pill {
    background: rgba(200, 166, 107, 0.18) !important;
    box-shadow: inset 3px 0 0 0 #A8863F !important;
  }

  /* ══════════════════════════════════════════════════════════════════
     COLECCIONES: PASTILLAS ARRIBA, NO UN CARRUSEL ABAJO

     Esta tienda tiene decenas de colecciones anidadas y cientos de
     productos. Buscando "ilum" Shopify devuelve CINCO colecciones
     (Iluminacion, Iluminacion Accesorios, Iluminacion Equipos, Kits
     Iluminacion, Accesorios de Iluminacion) y seis productos sueltos.
     Para quien busca asi, la coleccion es mejor respuesta que seis
     productos al azar: lo lleva a todo el rubro de una.

     Y sin embargo quedaban ABAJO de los ocho productos. Medido a 375x420
     con el teclado abierto: el cuerpo mide 897px de alto real y se ven
     166. Las colecciones arrancaban cerca del pixel 700. En telefono no
     existian.

     Ahora van primero y como pastillas que envuelven, no como carrusel:
     cinco colecciones entran en dos filas de ~34px en vez de una tira de
     tarjetas con foto. Ocupan poco y se leen de un vistazo.
     ══════════════════════════════════════════════════════════════════ */
  dialog.search-modal__content .sd-cols {
    margin: 0 0 4px;
  }

  dialog.search-modal__content .sd-cols__fila {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 0 6px !important;
    list-style: none !important;
  }

  dialog.search-modal__content .sd-cols__item {
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    max-width: 100% !important;
  }

  dialog.search-modal__content .sd-col-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    padding: 8px 13px;
    border: 1px solid rgba(200, 166, 107, 0.55);
    border-radius: 999px;
    background: #fff;
    color: #0F1512;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    transition: background 180ms ease, border-color 180ms ease, transform 160ms ease-out;
  }

  dialog.search-modal__content .sd-col-pill__nombre {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* El conteo es dato, no accion: va en el verde de la casa, no en oro. */
  dialog.search-modal__content .sd-col-pill__n {
    flex: none;
    font-size: 11px;
    font-weight: 800;
    color: #1B7F43;
    background: rgba(37, 211, 102, 0.14);
    border-radius: 999px;
    padding: 1px 7px;
  }

  @media (hover: hover) and (pointer: fine) {
    dialog.search-modal__content .sd-col-pill:hover {
      background: rgba(200, 166, 107, 0.14);
      border-color: rgba(200, 166, 107, 0.9);
    }
  }

  dialog.search-modal__content .sd-col-pill:active { transform: scale(0.97); }

  dialog.search-modal__content .sd-col-pill:focus-visible {
    outline: 2px solid #A8863F;
    outline-offset: 2px;
  }

  /* ══════════════════════════════════════════════════════════════════
     SIN RESULTADOS: QUE NO SEA UNA PARED

     Las pastillas de categoria se escondian con :has([data-search-results]),
     y el bloque de "no encontramos nada" TAMBIEN trae ese atributo. O sea
     que justo cuando la persona se queda sin nada le sacabamos ademas las
     categorias, y le dejabamos una frase sola y ninguna salida.
     ══════════════════════════════════════════════════════════════════ */
  dialog.search-modal__content
    predictive-search-component:has([data-search-results]):has(.predictive-search-results__no-results)
    .sd-pills {
    display: block !important;
  }

  dialog.search-modal__content .predictive-search-results__no-results {
    margin: 18px 6px 4px !important;
    padding: 18px 16px !important;
    border: 1px dashed rgba(15, 21, 18, 0.16) !important;
    border-radius: 14px !important;
    background: #FAF5EA !important;
    color: #2A241C !important;
    font-size: 13.5px !important;
    line-height: 1.45 !important;
    text-align: center !important;
  }

  @media (prefers-reduced-motion: reduce) {
    dialog.search-modal__content .sd-col-pill { transition: none !important; }
  }


  /* ══════════════════════════════════════════════════════════════════
     UNA VOLANTA ARRIBA DE NADA NO VA
     08/11/2026.

     indajaus-sin-foto.liquid esconde, a proposito, los productos que no
     tienen foto cargada: les pone display:none y aria-hidden. Es una
     regla de la casa y esta bien.

     El efecto colateral aparecia aca. Buscando "ilum", Shopify devuelve
     ocho productos y SIETE no tienen foto en el catalogo (verificado
     contra /search/suggest.json: featured_image viene nulo). Se
     escondian los siete, pero el titulo PRODUCTOS y su lista vacia
     quedaban igual, asi que se veia una volanta dorada seguida de un
     hueco de 200px.

     Si no quedo ni un producto a la vista, el bloque entero se va. Las
     colecciones de arriba quedan como la respuesta a esa busqueda, que
     para "ilum" son tres y con 254 productos entre las tres.

     OJO: esto NO arregla el catalogo. Esos productos siguen sin
     aparecer en ningun lado hasta que tengan foto.
     ══════════════════════════════════════════════════════════════════ */
  dialog.search-modal__content
    .predictive-search-results__products:not(:has(li:not([aria-hidden='true']))) {
    display: none !important;
  }
/* END_SNIPPET:search-modal */

/* START_SNIPPET:search (INDEX:292) */
.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:293) */
.section-wrapper {
    --section-height-offset: 0px;
  }

  .section[data-shopify-visual-preview] {
    min-height: var(--section-preview-height);
    padding-top: 0;
  }

  .section[data-shopify-visual-preview] .custom-section-background {
    display: none;
  }

  body:has(> #header-group > .header-section > #header-component[transparent]):not(
      :has(> #header-group > .header-section + .shopify-section)
    )
    > main
    > .section-wrapper:first-child {
    --section-height-offset: var(--header-group-height, 0);
  }

  .custom-section-background {
    grid-column: 1 / -1;
  }

  .custom-section-content {
    z-index: var(--layer-flat);
  }
/* END_SNIPPET:section */

/* START_SNIPPET:skip-to-content-link (INDEX:296) */
.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:298) */
.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:299) */
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:300) */
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;
      }
    }
  }

  /* ── IJ-MINIATURAS ────────────────────────────────────────────────
     09/11/2026, Rodrigo: "las miniaturas del carrousel del product page
     rediseñar, estan de estetica muy basica y horizon theme".

     Lo que las delataba como de theme de fabrica era el estado activo:
     Horizon le pone un contorno solido en currentColor, o sea un
     recuadro NEGRO de esquinas vivas alrededor de la foto elegida. Es
     el recurso mas barato que hay para marcar una seleccion.

     Lo que se hace ahora:
     · esquinas redondeadas, como todo lo demas de la ficha;
     · las no elegidas bajan a 72% de opacidad, asi la elegida gana por
       contraste y no por un borde gritando;
     · la elegida se marca con el dorado de la casa y una sombra corta
       que la levanta un pixel. Se nota cual es sin que nada encierre a
       la foto.
     · y todo con la curva lenta de los cajones, que es la que usa el
       resto de la tienda. */
  /* 09/11/2026, Rodrigo: "un poco mas grande que esten". El clamp de
     Horizon arranca en 44px; sube a 58 y el tope lo sigue poniendo el
     ajuste del editor. */
  media-gallery .slideshow-controls__thumbnails .slideshow-control {
    width: clamp(58px, 9vw, var(--thumbnail-width)) !important;
    border-radius: 12px;
    overflow: hidden;
    /* 09/11/2026, Rodrigo: "les agregaria un buen borde gris, como la
       seccion que bordea la informacion del producto". Ese borde es
       rgba(0,0,0,.06) sobre blanco —medido en .group-block-content— y a
       1px en una miniatura chica practicamente no se ve, asi que sube a
       0.13: mismo gris, visible a este tamaño.

       Y se va el apagado al 72%: con borde propio ya no hace falta
       atenuarlas para que la elegida destaque. Destaca por el dorado y
       por el tamaño, que es lo que pidio. */
    border: 1px solid rgba(15, 21, 18, 0.13);
    box-shadow: 0 1px 2px rgba(15, 21, 18, 0.04);
    opacity: 1;
    transition:
      opacity 340ms cubic-bezier(0.32, 0.72, 0, 1),
      border-color 340ms ease,
      box-shadow 340ms ease,
      transform 340ms cubic-bezier(0.32, 0.72, 0, 1);
  }
  media-gallery .slideshow-controls__thumbnails .slideshow-control img {
    border-radius: 11px;
  }
  /* 09/11/2026, Rodrigo: "que la que esta seleccionada este aun mas
     grande y con un buen lineado del color de indajaus, como ya tiene
     pero un poco mas marcado".
     Crece un 7% y el aro pasa de 1 a 2px. El transform-origin abajo
     hace que crezca hacia arriba y quede apoyada en la misma linea que
     las otras, en vez de desalinear la fila. */
  media-gallery .slideshow-controls__thumbnails .slideshow-control:is([aria-selected='true']) {
    outline: none;
    opacity: 1;
    border-color: #C8A66B;
    box-shadow:
      0 0 0 2px #C8A66B,
      0 10px 22px -10px rgba(15, 21, 18, 0.42);
    transform: scale(1.07);
    transform-origin: 50% 100%;
  }
  /* Aire para que la que crece no quede recortada por el contenedor. */
  media-gallery .slideshow-controls__thumbnails {
    padding-block: 6px 3px;
  }
  @media (hover: hover) and (pointer: fine) {
    media-gallery .slideshow-controls__thumbnails .slideshow-control:hover {
      border-color: rgba(200, 166, 107, 0.55);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    media-gallery .slideshow-controls__thumbnails .slideshow-control { transition: none; transform: none; }
  }
/* END_SNIPPET:slideshow-controls */

/* START_SNIPPET:slideshow-styles (INDEX:302) */
/*
   * 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:304) */
.sorting-filter__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: var(--drawer-padding) 0;
    padding-block: var(--padding-sm);
    margin-inline-end: var(--margin-md);
    position: relative;
  }

  .sorting-filter__container .facets__label {
    font-size: var(--font-h4--size);
  }

  .sorting-filter__select-wrapper {
    display: flex;
    position: relative;
    border-radius: var(--variant-picker-button-radius);
    align-items: center;
    overflow: clip;
    padding: var(--padding-2xs) var(--padding-xs);
  }

  .sorting-filter__select-wrapper:has(:focus-visible) {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .sorting-filter__select-wrapper:has(:focus-visible) .sorting-filter__select {
    outline: none;
  }

  .sorting-filter__container .sorting-filter__select {
    appearance: none;
    border: 0;
    margin: 0;
    cursor: pointer;
    width: 100%;
    padding-inline-end: var(--icon-size-2xs);
    text-align: right;

    /* Needed for Safari */
    text-align-last: right;
  }

  .sorting-filter__select .icon {
    position: absolute;
    right: var(--padding-md);
    top: 50%;
    transform: translateY(-50%);
    width: var(--icon-size-2xs);
    height: var(--icon-size-2xs);
    pointer-events: none;
  }

  .sorting-filter {
    @media screen and (min-width: 750px) {
      z-index: var(--facets-upper-z-index);
    }
  }

  .sorting-filter__options {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    position: absolute;
    top: 100%;
    right: 0;
    color: var(--color-foreground);
    z-index: var(--facets-upper-z-index);
    box-shadow: var(--shadow-popover);
    border: var(--style-border-popover);
    background-color: var(--color-background);
    border-radius: var(--style-border-radius-popover);
    width: max-content;
    min-width: var(--facets-panel-min-width);
    min-height: 0;

    transition: grid-template-rows var(--animation-speed-slow) var(--animation-easing),
      opacity var(--animation-speed-slow) var(--animation-easing);
  }

  details[open] .sorting-filter__options {
    opacity: 1;
    grid-template-rows: 1fr;
  }

  .sorting-filter__options-inner {
    display: flex;
    flex-direction: column;
    grid-row: 1 / span 2;
    gap: var(--gap-sm);
    padding: calc(var(--drawer-padding) / 2);
    color: var(--color-foreground);
    overflow: clip;
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
      display: none;
    }

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

  .sorting-filter__option {
    cursor: pointer;
    display: grid;
    grid-template-columns: var(--icon-size-sm) 1fr;
    gap: var(--margin-2xs);
    align-items: center;
    min-width: 180px;
    max-width: 16em;
    padding: var(--padding-2xs) calc(var(--drawer-padding) / 2) var(--padding-2xs) var(--padding-2xs);

    &:hover {
      border-radius: calc(var(--style-border-radius-popover) / 2);
      background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
    }

    &:focus {
      border-radius: calc(var(--style-border-radius-popover) / 2);
    }
  }

  .sorting-filter__input {
    display: none;

    &:checked + .sorting-filter__checkmark + .sorting-filter__label {
      font-weight: 500;
    }
  }

  .sorting-filter__checkmark {
    visibility: hidden;
  }

  *:checked ~ .sorting-filter__checkmark {
    visibility: visible;
  }

  .sorting-filter__label {
    cursor: pointer;
    pointer-events: none;
  }

  .facets-toggle--no-filters .sorting-filter__select-wrapper {
    @media screen and (max-width: 749px) {
      padding-inline-start: 0;
    }
  }

  .facets-mobile-wrapper .sorting-filter .facets__panel {
    padding-inline: 0;
    position: relative;
  }

  .facets-mobile-wrapper .sorting-filter .facets__status {
    display: none;
  }

  .facets-mobile-wrapper:has(> :nth-child(2)) .sorting-filter .sorting-filter__options {
    left: 0;
    right: unset;
  }

  .facets-mobile-wrapper .sorting-filter .facets__label {
    margin-inline-end: var(--margin-2xs);
    font-size: var(--font-paragraph--size);
    color: var(--color-foreground-muted);
  }

  .facets-toggle .sorting-filter__container {
    @media screen and (max-width: 749px) {
      padding: 0;
    }
  }

  .facets-toggle .sorting-filter__container .facets__label {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .facets-toggle .sorting-filter::before {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .facets--drawer .sorting-filter {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }
/* END_SNIPPET:sorting */

/* START_SNIPPET:text (INDEX:312) */
:root {
    --text-align-default: left;
  }

  [style*='--horizontal-alignment: center'] .text-block {
    --text-align-default: center;
  }

  [style*='--horizontal-alignment: flex-end'] .text-block {
    --text-align-default: right;
  }

  [style*='--horizontal-alignment: flex-start'] > .text-block {
    --text-align-default: left;
  }

  [style*='--horizontal-alignment: center'] > .text-block {
    --text-align-default: center;
  }

  [style*='--horizontal-alignment: flex-end'] > .text-block {
    --text-align-default: right;
  }

  .text-block {
    width: var(--width);
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: var(--horizontal-alignment);
  }

  .text-block > * {
    width: var(--width);
    max-inline-size: min(100%, var(--max-width, 100%));
    text-align: var(--text-align, var(--text-align-default));
    text-wrap: var(--text-wrap);
    font-weight: 700;
  }

  .text-block:not(.text-block--full-width).rte,
  .text-block:not(.text-block--full-width).paragraph {
    /* Safari doesn't support pretty, so fallback to balance */
    text-wrap: balance;
    text-wrap: pretty;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

  .text-block--background {
    background-color: var(--text-background-color);
    border-radius: var(--text-corner-radius);

    /* To avoid text being cropped when using a border radius we add a minimum padding. */
    padding-block-start: max(var(--text-padding), var(--padding-block-start, 0));
    padding-block-end: max(var(--text-padding), var(--padding-block-end, 0));
    padding-inline-start: max(var(--text-padding), var(--padding-inline-start, 0));
    padding-inline-end: max(var(--text-padding), var(--padding-inline-end, 0));
  }

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

  /* Bold all text content inside text blocks */
  .text-block p,
  .text-block span,
  .text-block li,
  .text-block a {
    font-weight: 700;
  }
/* END_SNIPPET:text */

/* START_SNIPPET:variant-main-picker (INDEX:322) */
/* =============================================
     VARIANT PICKER — BASE
     ============================================= */
  .variant-picker {
    width: 100%;
  }

  .variant-picker__form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  @media screen and (max-width: 749px) {
    .variant-picker__form {
      gap: 5px;
    }
  }

  .variant-picker[data-shopify-visual-preview] {
    min-width: 300px;
    padding-inline-start: max(4px, var(--padding-inline-start));
  }

  /* =============================================
     LABEL ROW
     ============================================= */
  .variant-option__label {
    display: inline-block;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    opacity: 0.85;
  }

  @media screen and (max-width: 749px) {
    .variant-option__label {
      font-size: 0.67rem;
      letter-spacing: 0.07em;
    }
  }

  /* Legend layout */
  .variant-option--buttons legend,
  .variant-option--swatches legend {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 5px;
    width: 100%;
  }

  @media screen and (max-width: 749px) {
    .variant-option--buttons legend,
    .variant-option--swatches legend {
      margin-bottom: 4px;
    }
  }

  /* Selected value inline */
  .variant-option__swatch-value {
    font-size: 0.75rem;
    font-weight: 400;
    opacity: 0.5;
    letter-spacing: 0;
    text-transform: none;
  }

  /* Flash animation when value changes */
  .vp-selected-label {
    transition: opacity 0.15s ease;
  }

  .vp-selected-label--flash {
    opacity: 1 !important;
    font-weight: 600;
  }

  /* Divider between option groups */
  .variant-option + .variant-option {
    padding-top: 3px;
    border-top: 1px solid rgb(var(--color-border-rgb, 0 0 0) / 0.06);
  }

  /* =============================================
     BUTTONS — COMPACT MOBILE
     ============================================= */

  /* Desktop */
  .variant-option__button-label__text {
    padding-block: 8px;
    padding-inline: 14px;
  }

  /* Mobile: mucho más compacto */
  @media screen and (max-width: 749px) {
    .variant-option__button-label {
      font-size: 0.75rem;
    }

    .variant-option__button-label__text {
      padding-block: 5px;
      padding-inline: 9px;
    }
  }

  /* =============================================
     COLOR OPTION — SWATCHES CRO
     ============================================= */

  /* Label de color = chip swatch + nombre — siempre inline-flex */
  .vp-color-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    cursor: pointer !important;
    padding: 3px 10px 3px 4px !important;
    border-radius: 30px !important;
    border: 2px solid transparent !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease !important;
    position: relative !important;
    overflow: visible !important;
    background: transparent !important;
    text-decoration: none !important;
  }

  @media screen and (max-width: 749px) {
    .vp-color-label {
      padding: 2px 8px 2px 3px !important;
      gap: 4px !important;
    }
  }

  /* Circulo de color */
  .vp-color-swatch {
    display: inline-block !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    border: 1.5px solid rgba(0,0,0,0.13) !important;
    flex-shrink: 0 !important;
    transition: transform 0.15s ease !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  @media screen and (max-width: 749px) {
    .vp-color-swatch {
      width: 18px !important;
      height: 18px !important;
    }
  }

  /* Nombre del color — SIEMPRE visible, override todo lo que lo pueda ocultar */
  .vp-color-name {
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    color: inherit !important;
    clip: auto !important;
    clip-path: none !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
  }

  @media screen and (max-width: 749px) {
    .vp-color-name {
      font-size: 0.73rem !important;
    }
  }

  /* Input oculto — accesible */
  .vp-color-label input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
    margin: 0 !important;
  }

  /* Estado: seleccionado — anillo de acento bien visible + check */
  .vp-color-label:has(input[type="radio"]:checked) {
    border-color: #C8A66B !important;
    box-shadow: 0 0 0 2px #C8A66B !important;
    background: rgba(255,204,0,0.14) !important;
  }

  .vp-color-label:has(input[type="radio"]:checked) .vp-color-swatch {
    transform: scale(1.1) !important;
    border-color: rgba(0,0,0,0.35) !important;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #C8A66B !important;
    position: relative !important;
  }

  /* Checkmark sobre el swatch seleccionado */
  .vp-color-label:has(input[type="radio"]:checked) .vp-color-swatch::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60%;
    background-color: rgba(0,0,0,0.32);
  }

  .vp-color-label:has(input[type="radio"]:checked) .vp-color-name,
  .vp-color-label:has(input[type="radio"]:checked) .variant-option__button-label__text {
    font-weight: 800 !important;
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    opacity: 1 !important;
  }

  /* También forzar en todos los estados — Horizon puede poner color:white en el label checked */
  .vp-color-label .vp-color-name {
    color: #1a1a1a !important;
  }

  /* Estado: hover */
  .vp-color-label:hover {
    border-color: rgba(255,204,0,0.6) !important;
  }

  .vp-color-label:hover .vp-color-swatch {
    transform: scale(1.06) !important;
  }

  /* Override: asegurarse que el pill del theme no tape el color-name */
  .vp-color-label .variant-option__button-label__pill {
    display: none !important;
  }

  /* Estado: agotado — strikethrough encima del swatch */
  .vp-color-label:has(input[aria-disabled="true"]) {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
  }

  .vp-color-label:has(input[aria-disabled="true"]) .vp-color-swatch {
    position: relative;
  }

  .vp-color-label:has(input[aria-disabled="true"]) .vp-color-swatch::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    background: linear-gradient(
      135deg,
      transparent calc(50% - 0.7px),
      rgba(0,0,0,0.45) calc(50% - 0.7px),
      rgba(0,0,0,0.45) calc(50% + 0.7px),
      transparent calc(50% + 0.7px)
    );
  }

  /* =============================================
     VARIANTES AGOTADAS — STRIKETHROUGH VISIBLE
     (botones regulares, no color)
     ============================================= */

  /* El botón agotado baja la opacidad y muestra diagonal */
  .variant-option__button-label:has(input[aria-disabled="true"]) {
    opacity: 0.38;
    cursor: not-allowed;
    position: relative;
  }

  /* Línea diagonal sobre el botón agotado */
  .variant-option__button-label:has(input[aria-disabled="true"])::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
      135deg,
      transparent calc(50% - 0.8px),
      color-mix(in srgb, var(--color-strikethrough-mix, #000) 40%, transparent) calc(50% - 0.8px),
      color-mix(in srgb, var(--color-strikethrough-mix, #000) 40%, transparent) calc(50% + 0.8px),
      transparent calc(50% + 0.8px)
    );
    pointer-events: none;
  }

  /* =============================================
     BOTÓN SELECCIONADO — ACENTO + TEXTO LEGIBLE
     ============================================= */

  .variant-picker .variant-option__button-label.variant-option__button-label:has(input[type="radio"]:checked):not(.vp-color-label) {
    position: relative !important;
    overflow: hidden !important;
    background-color: #C8A66B !important;
    background-image: none !important;
    border-color: #C8A66B !important;
  }

  .variant-picker .variant-option__button-label.variant-option__button-label:has(input[type="radio"]:checked):not(.vp-color-label),
  .variant-picker .variant-option__button-label.variant-option__button-label:has(input[type="radio"]:checked):not(.vp-color-label) *,
  .variant-picker .variant-option__button-label.variant-option__button-label:has(input[data-option-available="true"]:checked):not(.vp-color-label),
  .variant-picker .variant-option__button-label.variant-option__button-label:has(input[data-option-available="true"]:checked):not(.vp-color-label) * {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    font-weight: 800 !important;
    opacity: 1 !important;
    text-shadow: none !important;
  }
  /* =============================================
     DROPDOWN VARIANT
     ============================================= */
  .variant-option__select-wrapper {
    display: flex;
    position: relative;
    border: var(--style-border-width-inputs) solid var(--color-border);
    border-radius: var(--style-border-radius-inputs);
    align-items: center;
    margin-top: var(--margin-2xs);
    overflow: clip;
    transition: border-color 0.18s ease;
  }

  .variant-option__select-wrapper:has(.swatch) {
    --variant-picker-swatch-width: 20px;
    --variant-picker-swatch-height: 20px;
  }

  .variant-option__select-wrapper:hover {
    border-color: var(--color-variant-hover-border);
  }

  .variant-option__select:focus-visible {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .variant-option__select {
    padding-block: var(--padding-md);
    padding-inline: var(--padding-lg) calc(var(--padding-lg) + var(--icon-size-2xs));
    appearance: none;
    border: 0;
    width: 100%;
    margin: 0;
    cursor: pointer;
    font-weight: 600;
  }

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

  /* =============================================
     ALIGNMENT MODIFIERS
     ============================================= */
  .variant-picker--center,
  .variant-picker--center .variant-option {
    text-align: center;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .variant-picker--right,
  .variant-picker--right .variant-option {
    text-align: right;
    justify-content: right;
  }
/* END_SNIPPET:variant-main-picker */

/* START_SNIPPET:variant-swatches (INDEX:323) */
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:324) */
.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:325) */
.volume-pricing-info {
    display: inline-flex;
  }

  .volume-pricing-info__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    color: var(--color-foreground-secondary);
    cursor: pointer;
    transition: color var(--animation-speed) var(--animation-easing);
    flex-shrink: 0;
  }

  .volume-pricing-info__button:hover {
    color: var(--color-foreground);
  }

  .volume-pricing-info__button .svg-wrapper {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .volume-pricing-info__button--with-label {
    width: auto;
    gap: var(--gap-sm);
  }

  .volume-pricing-info__popover {
    --volume-pricing-popover-max-width: 320px;
    --volume-pricing-popover-spacing: 8px;
    --volume-pricing-popover-viewport-margin: 16px;

    min-inline-size: 280px;
    max-inline-size: var(--volume-pricing-popover-max-width);
    background: var(--color-background);
    border: var(--style-border-popover);
    border-radius: var(--style-border-radius-popover, 0);
    box-shadow: var(--shadow-popover);
    overflow: hidden;
    padding: 0;
    margin: 0;
    transition-property: display, opacity, translate;
    transition-duration: 0.3s;
    transition-timing-function: var(--ease-out-quad);
    transition-behavior: allow-discrete;
    translate: 0 20px;
    opacity: 0;
  }

  /* Native anchor positioning for supported browsers */
  .volume-pricing-info__popover {
    inset: unset;
    top: calc(anchor(bottom) + var(--volume-pricing-popover-spacing));
    left: anchor(left);
  }

  @supports (position-try-fallbacks: --top-left) {
    .volume-pricing-info__popover {
      position-try-fallbacks: --top-left;
    }

    @position-try --top-left {
      top: calc(anchor(top) - var(--volume-pricing-popover-spacing));
      bottom: auto;
      transform: translateY(-100%);
    }
  }

  /* Fallback positioning using custom properties */
  @supports not (position-anchor: --volume-pricing-trigger) {
    .volume-pricing-info__popover {
      position: fixed;
      top: calc(var(--anchor-bottom) * 1px + var(--volume-pricing-popover-spacing));
      left: max(
        var(--volume-pricing-popover-viewport-margin),
        min(
          var(--anchor-left) * 1px,
          100vw - var(--volume-pricing-popover-max-width) - var(--volume-pricing-popover-viewport-margin)
        )
      );
    }
  }

  .volume-pricing-info__popover:popover-open {
    translate: 0 0;
    opacity: 1;
  }

  @starting-style {
    .volume-pricing-info__popover:popover-open {
      translate: 0 20px;
      opacity: 0;
    }
  }

  .volume-pricing-info__rules {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
    padding: var(--padding-md);
    font-size: var(--font-size--xs);
  }

  .volume-pricing-info__rules,
  .volume-pricing-info__rules > span {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .volume-pricing-info__table {
    display: flex;
    flex-direction: column;
  }

  .volume-pricing-info__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--padding-sm) var(--padding-md);
    font-size: var(--font-size--sm);
    background: var(--color-background);
    border-inline-start: 3px solid transparent;
    transition: border-color var(--animation-speed) var(--animation-easing);
  }

  .volume-pricing-info__row:nth-child(odd) {
    background: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .volume-pricing-info__row--active {
    border-inline-start-color: var(--color-foreground);
    font-weight: var(--font-weight-medium);
  }

  .volume-pricing-info__quantity {
    color: var(--color-foreground);
  }

  .volume-pricing-info__price {
    display: flex;
    align-items: center;
    color: var(--color-foreground);
  }

  .volume-pricing-info__checkmark {
    display: none;
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    color: var(--color-primary);
  }

  .volume-pricing-info__row--active .volume-pricing-info__checkmark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
/* END_SNIPPET:volume-pricing-info */