/** Shopify CDN: Minification failed

Line 228:2 Unexpected "}"

**/
/* START_SECTION:gaela-barra (INDEX:12) */
/* 🔴 NI `sticky` NI `z-index` (2026-09-08). Iba en `position:sticky; top:0;
     z-index:20`, y `#header-group` —que sí es sticky de verdad— va en 8: al
     bajar, esta franja pasaba POR ENCIMA del encabezado y lo tapaba. Nada
     daba error; se veía y ya. Lo reportó el usuario.

     ⚠️ Y el `sticky` no se estaba usando para nada: medido, su envoltorio de
     sección mide 27 px, exactamente lo que la barra, así que el RECORRIDO es
     CERO y nunca llegó a pegarse. Lo único que hacía era crear el contexto de
     apilamiento que provocaba el fallo.

     Así que no se baja la capa: se quitan las tres propiedades. En flujo
     normal la franja pasa por debajo del encabezado sola, sin `z-index` que
     mantener, y el que la lea después no tiene que preguntarse a qué juega. */
  .gf-barra {
    background: var(--gf-oscuro);
    color: var(--gf-claro-tenue);
    font: 600 9.5px/1 var(--gf-sans);
    letter-spacing: .14em;
    text-transform: uppercase;
  }

  .gf-barra__dentro {
    max-width: 1240px;
    margin-inline: auto;
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 11px clamp(20px, 5vw, 64px);
  }

  .gf-barra b { color: var(--gf-arena); }

  /* 🔴 EN CELULAR, UN SOLO RENGLON. Medido: la barra ocupaba 59 px
     contra los 32 del mockup porque los tres mensajes se partian en dos lineas,
     y eso son 27 px robados a la primera pantalla —justo donde el usuario dijo
     que la cabecera se hacia grande—. Se esconde el tercero, que es el menos
     urgente, y se aprieta el interlineado. */
  @media (max-width: 700px) {
    .gf-barra span:nth-child(3) { display: none; }
    .gf-barra__dentro {
      gap: 14px;
      padding-block: 9px;
      flex-wrap: nowrap;
      white-space: nowrap;
      font-size: 9px;
      letter-spacing: .1em;
    }
  }
/* END_SECTION:gaela-barra */
/* START_SECTION:gaela-compra (INDEX:17) */
.gf-compra {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--gf-suelo, 0px);
    z-index: 30;
    background: var(--gf-velo-compra, rgba(252, 240, 240, .94));
    border-top: 1px solid var(--gf-linea-fuerte);
    transform: translateY(100%);
    transition: transform .3s ease;
    /* Los celulares con barra de gestos: el botón no puede quedar debajo. */
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* 🔴 ESCONDIDA ES ESCONDIDA. Bajarla su propio alto NO la quita de la
     pantalla: la foto vive 24 px POR ENCIMA del borde de la barra —margen
     negativo y `overflow: visible`, que es lo que hace el gesto— y su sombra
     se difumina 18 px más. O sea que al ocultarse asomaba justo la foto.
     Pedido textual: «cuando se esconde se ve un poquito en la parte de abajo
     y eso no me gusta».

     Se arregla por los dos lados y a propósito:
     1. `--gf-asoma` la baja también lo que la foto sobresale, así que durante
        la animación tampoco se ve asomar nada.
     2. `visibility: hidden` la apaga del todo al terminar de salir — no se
        pinta, no se toca y no la alcanza el tabulador. El retardo de
        `visibility` es exactamente la duración del viaje: se apaga cuando ya
        no está, no antes.
     ⚠️ `display: none` habría valido para lo primero y habría matado lo
     segundo: sin caja no hay transición, y la barra aparecería de golpe. */
  .gf-compra {
    /* 24 px de foto por encima del borde + 18 de desenfoque de su sombra, y
       cuatro de margen: 46. Es un número medido, no redondeado a ojo. */
    --gf-asoma: 46px;
    transform: translateY(calc(100% + var(--gf-suelo, 0px) + var(--gf-asoma)));
    visibility: hidden;
    transition: transform .32s ease, visibility 0s linear .32s;
  }
  .gf-compra--on {
    transform: translateY(0);
    visibility: visible;
    transition: transform .32s ease, visibility 0s;
  }

  /* El ojo: 1 px arriba del todo, sin caja visible. No es decorativo, es el
     centinela — por eso vive aquí y no en una hoja compartida. */
  .gf-compra__ojo {
    position: absolute;
    top: 0; left: 0;
    /* 🔴 6 px, NO 1. Con un solo píxel, al desplazarse justo ese píxel el ojo
       queda exactamente en el borde de la pantalla y Chrome todavía lo cuenta
       como visible: medido, no se encendía a 1 y sí a 60. Seis píxeles saltan
       en cuanto la página se mueve de verdad y siguen sin verse. */
    width: 1px; height: 6px;
    pointer-events: none;
  }

  .gf-compra__dentro {
    max-width: 1240px;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 13px;
    padding: 10px clamp(18px, 5vw, 64px);
  }

  /* 🔴 `overflow: visible` EN LA BARRA, o la foto que asoma se recorta contra
     su borde y el gesto entero desaparece. Y el margen negativo es de arriba:
     la foto sube, la barra no crece. */
  .gf-compra { overflow: visible; }
  .gf-compra__foto {
    flex: 0 0 auto;
    width: 58px;
    height: 58px;
    object-fit: cover;
    border-radius: var(--gf-radio-foto, 18px);
    margin-block-start: -24px;
    margin-block-end: -2px;
    box-shadow: 0 6px 18px rgba(110, 43, 84, .18);
  }
  .gf-compra__nombre {
    display: block;
    font: 600 8.5px/1.2 var(--gf-sans);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gf-tenue);
    margin-block-end: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .gf-compra__pv { line-height: 1; min-width: 0; }

  .gf-compra__pv b {
    display: block;
    font: 400 22px/1 var(--gf-serif);
    color: var(--gf-tinta);
    font-variant-numeric: tabular-nums;
  }

  .gf-compra__pv em {
    display: block;
    font: 600 8.5px/1 var(--gf-sans);
    letter-spacing: .12em;
    text-transform: uppercase;
    font-style: normal;
    color: var(--gf-tenue);
    margin-block-start: 6px;
  }

  .gf-compra__btn {
    padding: 15px 20px;
    font-size: 10px;
    white-space: nowrap;
    flex: 0 0 auto;
  }

  /* En escritorio la ficha ya tiene el precio a la vista en la columna
     derecha durante media página: la barra estorbaría más de lo que ayuda. */
  @media (min-width: 900px) {
    .gf-compra { display: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    .gf-compra { transition: none; }
  }
/* END_SECTION:gaela-compra */
/* START_SECTION:gaela-ev-banda (INDEX:22) */
/* ══════════════════════════════════════════════════════════════════════
     🔴 EL ENVOLTORIO DE LOS BLOQUES SE APARTA DEL LAYOUT.
     Shopify envuelve CADA theme block en un `div.shopify-block`. Eso rompe
     cualquier rejilla que coloque por hijo directo: aquí el despiece cayó
     debajo del texto en vez de ir a la columna 2 —la sección pasó de 578 a
     933 px de alto— y en la banda metía un `<div>` dentro de un `<ol>`, que
     además es marcado inválido.
     `display: contents` saca al envoltorio del layout sin quitarlo del DOM:
     el elemento de dentro vuelve a ser el hijo directo y todo vuelve a su
     sitio. Se descubrió mirando la página, no leyendo el Liquid.
     ⚠️ Sólo vale porque estos envoltorios no pintan nada —ni fondo, ni borde,
        ni sombra—: `display:contents` se llevaría eso por delante.
     ══════════════════════════════════════════════════════════════════════ */
  .gf__dentro > .shopify-block,
  .gf-ev-banda__carril > .shopify-block { display: contents; }

  .gf-ev-banda { padding-block: clamp(44px, 6vw, 84px); }
  .gf-ev-banda__h {
    margin: 0;
    max-width: 15ch;
    font-family: var(--gf-serif);
    font-weight: 400;
    color: var(--gf-acento);
    font-size: clamp(29px, 4vw, 44px);
    line-height: 1.04;
    text-wrap: balance;
  }

  /* LA FOTO, GRANDE. En celular sale del contenedor a ancho completo: es lo
     que pidió el usuario y es lo que hace que se lea como sección educativa
     y no como una lista con una miniatura al lado. */
  .gf-ev-banda .gf-ev-foto {
    margin-block-start: clamp(22px, 3vw, 34px);
  }
  /* 🔴 LA FOTO NO VA DE LADO A LADO. Estuvo a sangre —margen negativo del
     canalillo— y el usuario lo revirtió: *«haz lo de la imagen que te pedí,
     que no vaya de lado a lado»*. Sin ese margen se queda dentro del
     contenedor, alineada con el titular y con las tarjetas del carril.
     ⚠️ El carril SÍ sigue saliendo a sangre: son dos cosas distintas y él
     pidió justo eso. */
  }
  .gf-ev-banda .gf-ev-foto .gf-hueco { aspect-ratio: 4 / 3; }
  @media (min-width: 900px) {
    .gf-ev-banda .gf-ev-foto .gf-hueco { aspect-ratio: 21 / 9; }
  }

  /* ── EL CARRIL ─────────────────────────────────────────────────────────
     Scroll nativo con snap. Sin JS: el pulgar ya sabe hacer esto, y un
     carrusel escrito a mano son 60 líneas que se rompen en algún navegador. */
  .gf-ev-banda__carril {
    list-style: none;
    margin: clamp(20px, 2.6vw, 32px) 0 0;
    padding: 0 0 6px;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .gf-ev-banda__carril::-webkit-scrollbar { display: none; }
  /* En celular el carril sale a sangre, y el primero y el último respiran.
     🔴 Y RESPIRAN LO MISMO QUE EL TITULAR, NO UN NÚMERO SUYO. Iba con
     `var(--gf-aire, 18px)`, y `--gf-aire` no existe en ninguna parte: se
     quedaba siempre en el respaldo de 18 contra los 20 del canalillo de la
     página. El token bueno es `--gf-pad`, que es el que separa del borde a
     todo lo demás, así que ahora coinciden por construcción y no por
     parecido (Regla 18).

     🔴 Y `scroll-padding-inline`, QUE ES LO QUE DE VERDAD LO ARREGLA (A-200).
     Un carril con sangrado **nace ya desplazado**: medido, `scrollLeft` valía
     18 —exactamente su propio relleno—, porque el enganche alinea contra el
     puerto de scroll y no contra el relleno. Resultado: la primera tarjeta
     salía pegada al canto, que es lo que se veía. Se comprueba **leyendo
     `scrollLeft`**, nunca midiendo cajas: las cajas decían 18 px de relleno y
     era verdad. */
  @media (max-width: 899px) {
    .gf-ev-banda__carril {
      margin-inline: calc(var(--gf-pad, 20px) * -1);
      padding-inline: var(--gf-pad, 20px);
      scroll-padding-inline: var(--gf-pad, 20px);
    }
  }
  @media (min-width: 700px) { .gf-ev-banda__carril { grid-auto-columns: 46%; } }
  @media (min-width: 1000px) {
    .gf-ev-banda__carril {
      grid-auto-columns: minmax(0, 1fr);
      grid-auto-flow: row;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      overflow: visible;
    }
  }

  .gf-ev-banda__t {
    scroll-snap-align: start;
    background: var(--gf-papel);
    border-radius: var(--gf-radio-cont, 0);
    padding: clamp(18px, 2.4vw, 26px);
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  /* El isotipo como marca de cada componente: máscara alfa, el mismo PNG que
     usan la home y el catálogo. Es la variante C, que es la elegida. */
  .gf-ev-banda__marca {
    width: 26px;
    height: 26px;
    margin-block-end: 6px;
    background: var(--gf-acento);
    -webkit-mask: var(--gaela-isotipo-src) center / contain no-repeat;
    mask: var(--gaela-isotipo-src) center / contain no-repeat;
  }

  .gf-ev-banda__t h3 {
    margin: 0;
    font-family: var(--gf-serif);
    font-weight: 400;
    font-size: clamp(17px, 2vw, 20px);
    line-height: 1.15;
    color: var(--gf-acento);
  }
  /* LA CANTIDAD. Es el dato que separa una ficha educativa de un anuncio:
     va en tabular para que las cifras se alineen entre tarjetas. */
  .gf-ev-banda__dato {
    margin: 0;
    font: 600 11px/1 var(--gf-sans);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gf-ambar);
    font-variant-numeric: tabular-nums;
  }
  .gf-ev-banda__t p:not(.gf-ev-banda__dato) {
    margin: 2px 0 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--gf-tenue);
  }


  /* ══ VARIANTES DE LA SECCIÓN EDUCATIVA ═══════════════════════════════════
     Tres formas de contar lo mismo. No son la misma caja con otro borde: cada
     una decide QUÉ manda —el texto, la cifra o el campo de color—, que es lo
     que de verdad cambia cómo se lee.                                       */

  /* ── A · LA CIFRA MANDA ────────────────────────────────────────────────
     La cantidad es el dato que ninguna marca enseña, así que se pone del
     tamaño de un titular y el nombre debajo. Educativo sin necesitar foto. */
  .gf-ev-banda--cifra .gf-ev-banda__dato {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin-block: 2px 4px;
    color: var(--gf-acento);
    text-transform: none;
    letter-spacing: 0;
  }
  .gf-ev-banda--cifra .gf-ev-banda__dato b {
    font-family: var(--gf-serif);
    font-weight: 400;
    font-size: clamp(38px, 7vw, 52px);
    line-height: .9;
    font-variant-numeric: tabular-nums;
  }
  .gf-ev-banda--cifra .gf-ev-banda__dato span {
    font: 600 10px/1 var(--gf-sans);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gf-ambar);
  }
  .gf-ev-banda--cifra .gf-ev-banda__t {
    background: transparent;
    border-block-end: 1px solid var(--gf-linea);
    border-radius: 0;
    padding-inline: 0;
  }
  .gf-ev-banda--cifra .gf-ev-banda__marca { display: none; }
  .gf-ev-banda--cifra .gf-ev-banda__t h3 {
    order: -1;
    font-size: 15px;
    color: var(--gf-tenue);
  }

  /* ── B · EL CAMPO MANDA ────────────────────────────────────────────────
     Cada componente es una tarjeta a campo rosa completo, con el isotipo
     arriba: se lee como una colección de fichas, no como una lista. */
  .gf-ev-banda--campo .gf-ev-banda__t {
    background: var(--gf-rosa, #E9B1B5);
    color: var(--gf-acento);
    min-height: 270px;
    justify-content: flex-end;
  }
  .gf-ev-banda--campo .gf-ev-banda__marca {
    width: 34px;
    height: 34px;
    margin-block-end: auto;
    background: var(--gf-oscuro);
  }
  .gf-ev-banda--campo .gf-ev-banda__t h3 { font-size: clamp(19px, 2.4vw, 23px); }
  .gf-ev-banda--campo .gf-ev-banda__dato { color: var(--gf-acento); }
  .gf-ev-banda--campo .gf-ev-banda__dato b { font-weight: 700; font-size: 13px; }
  .gf-ev-banda--campo .gf-ev-banda__t p:not(.gf-ev-banda__dato) {
    color: var(--gf-acento);
    opacity: .82;
  }
/* END_SECTION:gaela-ev-banda */
/* START_SECTION:gaela-ev-comparativa (INDEX:24) */
/* ⚠️ LA COMPARATIVA VUELVE A HUESO. Con las fuentes en vino, dos secciones
     oscuras seguidas sumaban 2.400 px: un ancla que dura 2.400 px deja de ser
     un ancla. Aquí la columna propia se marca con LINEA, no con fondo. */
  .gf-ev-comp { padding-block: clamp(48px, 7vw, 96px); }

  /* 🔴 LA NOTA RECUPERA SU MARGEN DE ABAJO. Es un `<p>` y ahora es el ÚLTIMO
     hijo de la sección —antes le seguía el hueco de los bloques—, así que le
     entra `:last-child:is(p…){margin-block-end:0}` de Horizon y la sección
     perdía 12 px justos contra producción (A-196). El `1em` no es un número
     elegido: es el margen de `<p>` del navegador, el que tenía. */
  /* 🔴 LA NOTA RECUPERA SUS DOS MÁRGENES. Es un `<p>` y, como bloque, es hija
     ÚNICA de su envoltorio: primera y última a la vez, así que Horizon le come
     el de arriba con `:first-child:is(p…)` y el de abajo con su pareja
     (A-196). Se llevaba 22 px por arriba —los que la separan de la tabla— y
     12 por abajo. Dos clases pesan (0,2,0) y le ganan a los (0,1,1) de
     Horizon. El `1em` de abajo no es un número elegido: es el margen de `<p>`
     del navegador, el que tenía. */
  .gf-ev-comp .gf-ev-comp__nota { margin-block-start: 22px; margin-block-end: 1em; }
  /* 🔴 LA PISTA SE DECLARA `minmax(0, 1fr)` TAMBIÉN EN UNA COLUMNA. Sin
     esto la pista es `auto`, se dimensiona al MAX-CONTENT de lo que lleve
     dentro —un titular largo, una tabla, un carril con `overflow-x`— y en
     celular arrastra a la sección entera fuera de la pantalla. No se ve
     como desborde porque `.gf` lleva `overflow-x:clip`, que **recorta en
     silencio**: el texto sale cortado por la derecha y no hay scroll ni
     error. Medido a 390 px: 420 px de ancho en una pantalla de 390. */
  /* 🔴 LOS ENVOLTORIOS DE BLOQUE SE APARTAN DE LA REJILLA. La tabla es un
     bloque y su `div.shopify-block` sería un hijo más del grid: la rejilla
     pasaría a tener tres columnas y la tabla se quedaría sin sitio.
     `display: contents` lo saca del layout sin quitarlo del DOM. */
  .gf-ev-comp__g > .shopify-block { display: contents; }

  .gf-ev-comp__g {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(24px, 3vw, 44px);
    align-items: center;
  }
  @media (min-width: 900px) {
    .gf-ev-comp__g { grid-template-columns: minmax(0, .62fr) minmax(0, 1fr); }
  }
  /* De 700 arriba la tabla se desplaza dentro de su caja si hiciera falta:
     el cuerpo de la pagina no se mueve de lado nunca. */
  .gf-ev-comp__scroll { overflow-x: auto; }

  /* Con `min-width` la tabla no se deja aplastar: si no cabe, se desliza
     dentro de su caja en vez de partir cada celda en una palabra por línea. */
  .gf-ev-comp__t { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 13.5px; }
  .gf-ev-comp__t td,
  .gf-ev-comp__t th {
    padding: 15px 14px;
    text-align: left;
    border-block-end: 1px solid var(--gf-linea-cont);
    vertical-align: middle;
  }
  .gf-ev-comp__t thead th {
    font: 600 9px/1.4 var(--gf-sans);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gf-sobre-cont);
    text-align: left;
    vertical-align: bottom;
  }
  .gf-ev-comp__t thead .col { color: var(--gf-titular-cont); }
  .gf-ev-comp__vs { color: var(--gf-sobre-cont); opacity: .7; }
  /* La columna propia se separa con LÍNEA, no con un cuarto tono de fondo
     (D-145 aplicado al color: cada opacidad distinta es un color más). */
  /* 🔴 LA COLUMNA PROPIA YA NO ES UN ✓ SUELTO. Un check contra un «casi
     nunca» no dice nada: las dos celdas llevan ahora la FRASE concreta, y el
     check sólo marca cuál de las dos es la nuestra. Por eso la columna deja de
     ser una casilla de 120 px centrada y pasa a ser texto alineado. */
  .gf-ev-comp__t .col {
    color: var(--gf-titular-cont);
    width: 34%;
    vertical-align: top;
    box-shadow: inset 1px 0 0 var(--gf-linea-cont), inset -1px 0 0 var(--gf-linea-cont);
  }
  .gf-ev-comp__t .col span { display: block; }
  .gf-ev-comp__ok {
    float: left;
    width: 15px;
    height: 15px;
    margin: 2px 9px 0 0;
    fill: none;
    stroke: var(--gf-titular-cont);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .gf-ev-comp__t .otro {
    width: 30%;
    vertical-align: top;
    /* ⚠️ SIN `opacity`. El color ya es el tono de apoyo: añadirle un 85 %
       encima bajaba el contraste real de 5,16 a ~4,5, justo en la raya de
       AA. Lo tenue se dice con el TOKEN, no rebajando lo que ya es tenue. */
    color: var(--gf-sobre-cont);
  }
  /* La raya es el contrario del check: no es un «no», es un «aquí no se
     dice». Y va tenue a propósito —la comparación no se gana gritando. */
  .gf-ev-comp__no {
    float: left;
    width: 13px;
    height: 1px;
    margin: 9px 9px 0 0;
    background: var(--gf-sobre-cont);
  }
  .gf-ev-comp__t .pt {
    color: var(--gf-titular-cont);
    font-weight: 400;
    font-family: var(--gf-serif);
    font-size: 15px;
    vertical-align: top;
    width: 36%;
  }
  .gf-ev-comp__nota {
    margin-block-start: 22px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--gf-sobre-cont);
    max-width: 76ch;
  }

  /* 🔴 ESTE BLOQUE VA AL FINAL DE LA HOJA. Lo puse arriba y las reglas
     base —`.gf-ev-comp__t{min-width:640px}` entre ellas— lo pisaban: la
     tabla seguia deslizandose en celular. Un `@media` NO gana por ser
     `@media` (A-184), y es la segunda vez que me muerde. */
  /* ══ CELULAR · LA TABLA SE APILA, NO SE DESLIZA ═════════════════════════
     🔴 Tres columnas de texto no caben en 390 px por mucho que se aprieten, y
     obligar a deslizar una tabla de comparacion es perder justo la fila que
     no se ve. Aqui cada fila pasa a ser un bloque: el criterio arriba, y
     debajo las dos respuestas, cada una con el nombre de su columna delante.

     La cabecera de la tabla se esconde —sus nombres ya viajan en `data-et`—
     pero NO con `display:none`: se saca de pantalla, para que un lector de
     pantalla la siga anunciando y la tabla no pierda su estructura. */
  @media (max-width: 699px) {
    .gf-ev-comp__scroll { overflow-x: visible; }
    .gf-ev-comp__t { min-width: 0; display: block; }
    .gf-ev-comp__t thead {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
    .gf-ev-comp__t tbody,
    .gf-ev-comp__t tr { display: block; }
    .gf-ev-comp__t tr {
      padding-block: 16px;
      border-block-end: 1px solid var(--gf-linea-cont);
    }
    .gf-ev-comp__t tr:last-child { border-block-end: 0; }
    .gf-ev-comp__t td,
    .gf-ev-comp__t th { display: block; padding: 0; border: 0; width: auto; }

    /* el criterio, como titulillo de la tarjeta */
    .gf-ev-comp__t .pt {
      width: auto;
      font-size: 17px;
      margin-block-end: 12px;
    }

    /* las dos respuestas, con el nombre de su columna delante */
    .gf-ev-comp__t .col,
    .gf-ev-comp__t .otro {
      width: auto;
      box-shadow: none;
      display: grid;
      grid-template-columns: 74px minmax(0, 1fr);
      gap: 10px;
      align-items: start;
      padding-block: 5px;
      text-align: left;
    }
    .gf-ev-comp__t .col::before,
    .gf-ev-comp__t .otro::before {
      content: attr(data-et);
      font: 600 8.5px/1.5 var(--gf-sans);
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--gf-sobre-cont);
      opacity: .75;
    }
    .gf-ev-comp__t .col::before { color: var(--gf-titular-cont); opacity: 1; }
    /* 🔴 EL SELECTOR DE TEXTO NO PUEDE ALCANZAR A LOS MARCADORES.
       Con `.gf-ev-comp__t .otro span` (0,2,1) contra `.gf-ev-comp__no` (0,1,0),
       la raya ganaba el `display:block` y, al seguir siendo un item del grid,
       empujaba la frase a una fila nueva dentro de la columna de 74 px. No era
       orden: era PESO. Se acota a los spans sin clase, que son los de texto. */
    .gf-ev-comp__t .col span:not([class]),
    .gf-ev-comp__t .otro span:not([class]) { display: block; grid-column: 2; }
    .gf-ev-comp__t .col span:not([class]) { font-weight: 600; }
    /* 🔴 EL CHECK SE QUEDA, Y AHORA ES IMPRESCINDIBLE. Antes sobraba porque
       cada celda llevaba su frase; desde que la FILA es la afirmación y la
       columna propia sólo confirma, apagarlo dejaba a «GAELA» con su rótulo y
       NADA debajo. Se vio en captura, sin un solo error.
       La raya de la otra columna sí sobra: ahí sigue habiendo texto. */
    .gf-ev-comp__t .gf-ev-comp__ok {
      float: none;
      grid-column: 2;
      width: 18px;
      height: 18px;
      margin: 0;
      /* 🔴 `currentColor`, NO un hex. Con `--gf-acento` el check salía VINO
         SOBRE VINO en la sección oscura: invisible, y la celda parecía vacía
         otra vez. La celda ya tiene el color que le toca en cada fondo. */
      stroke: currentColor;
      stroke-width: 2.6;
    }
    .gf-ev-comp__t .gf-ev-comp__no { display: none; }
  }

  /* ══════════════════════════════════════════════════════════════════════════
     ESCRITORIO · EL DISEÑO DE LA TABLA DE SEED · 2026-09-14
     --------------------------------------------------------------------------
     Mirada su sección «How DS-01® Compares:» a 1.440 px, al lado de la nuestra.
     El contenido no se toca —pedido expreso: «que se parezca a la de seed sólo
     en diseño»—; lo que cambia son seis cosas de forma:

       1 · La tabla vive DENTRO DE UNA TARJETA redondeada con relleno tenue y
           un filete. La nuestra iba suelta sobre el panel.
       2 · NO HAY FILETES ENTRE FILAS. Las filas se separan con aire. Cinco
           rayas horizontales convierten una comparación en una factura.
       3 · La columna propia es una CÁPSULA CONTINUA que empieza ARRIBA, en la
           cabecera, y termina abajo. En la nuestra la cápsula empezaba debajo
           del rótulo, así que el rótulo se quedaba fuera de su propia columna.
       4 · El rótulo propio va en PÍLDORA con borde, dentro de la cápsula. El de
           los demás es texto plano: la jerarquía la marca la píldora.
       5 · La primera columna NO LLEVA CABECERA. «Qué se compara» es una
           etiqueta de tabla de datos y sobra: lo que se compara ya se lee.
       6 · El titular va ARRIBA, a la altura del techo de la tabla, no centrado
           verticalmente.

     🔴 EL CHECK SE QUEDA, y es la única desviación a propósito. Seed pone un
        punto; nosotros pusimos un check y el usuario ya eligió esa tabla en
        celular. Cambiarlo aquí dejaría las dos anchuras diciendo cosas
        distintas, y un punto además no afirma nada.

     ⚠️ Todo por encima de 700 px: por debajo manda `gaela-comp.css`, que es la
        tabla de celular ya elegida y no se toca. */
  @media (min-width: 700px) {
    .gf-ev-comp__g { align-items: start; }

    .gf-ev-comp__scroll {
      background: var(--gf-relleno-cont);
      border: 1px solid var(--gf-linea-cont);
      border-radius: var(--gf-radio-cont, 0);
      padding: clamp(12px, 1.4vw, 18px) clamp(14px, 1.8vw, 24px) clamp(16px, 2vw, 26px);
    }

    /* `separate` y no `collapse`: con las celdas fusionadas el radio de la
       cápsula no se puede pintar, que es el problema de siempre de esta
       columna. Con `fixed` los tres anchos mandan y la banda no baila. */
    .gf-ev-comp__t {
      border-collapse: separate;
      border-spacing: 0;
      table-layout: fixed;
      min-width: 0;
    }
    .gf-ev-comp__t td,
    .gf-ev-comp__t th {
      border-block-end: 0;
      padding: 16px 15px;
    }
    .gf-ev-comp__t .pt   { width: 46%; }
    .gf-ev-comp__t .col  { width: 22%; }
    .gf-ev-comp__t .otro { width: 32%; }

    /* 5 · la primera columna se queda sin cabecera, pero la celda sigue ahí:
       quitarla del marcado descuadraría las tres columnas.
       ⚠️ Va por POSICIÓN y no por clase: ese `<th>` no lleva `.pt` —lo
       comprobé en el marcado después de que «QUÉ SE COMPARA» siguiera
       saliendo—, sólo envuelve un `<span class="gf-ev-comp__vs">`. */
    .gf-ev-comp__t thead th:first-child { font-size: 0; }

    /* 3 · LA CÁPSULA. El relleno va en las celdas de la columna y el radio
       sólo en la primera y la última, que es lo que la cierra por los dos
       extremos sin pintar seis pastillas. */
    .gf-ev-comp__t .col {
      background: var(--gf-arena);
      text-align: center;
      vertical-align: middle;
      box-shadow: none;
    }
    /* 🔴 Y HAY QUE BORRAR EL RADIO CELDA A CELDA ANTES DE PONERLO. Algo de la
       hoja compilada le da `border-radius: 14px` a TODAS las celdas —medido—,
       y con `border-collapse: separate` eso convierte la cápsula en SEIS
       PASTILLAS sueltas, que es justo lo que la hoja de celular avisa en rojo.
       Se anula con un selector que incluye la etiqueta (`td.col`, `th.col`),
       para ganarle sin depender del orden de carga, y sólo después se redondean
       los dos extremos. */
    .gf-ev-comp .gf-ev-comp__t td.col,
    .gf-ev-comp .gf-ev-comp__t th.col { border-radius: 0; }
    .gf-ev-comp .gf-ev-comp__t thead th.col {
      border-start-start-radius: 24px;
      border-start-end-radius: 24px;
      padding-block: 20px 14px;
      vertical-align: middle;
    }
    .gf-ev-comp .gf-ev-comp__t tbody tr:last-child td.col {
      border-end-start-radius: 24px;
      border-end-end-radius: 24px;
      padding-block-end: 22px;
    }

    /* 4 · el rótulo propio, en píldora dentro de la cápsula */
    .gf-ev-comp__t thead .col .gf-ev-comp__largo { display: none; }
    .gf-ev-comp__t thead .col .gf-ev-comp__corto {
      display: inline-block;
      padding: 6px 13px;
      border-radius: 999px;
      border: 1px solid var(--gf-linea-cont);
      background: var(--gf-relleno-cont);
      color: var(--gf-titular-cont);
      font: 600 9px/1 var(--gf-sans);
      letter-spacing: .13em;
    }
    .gf-ev-comp__t thead .otro { text-align: center; vertical-align: middle; }

    /* el check deja de flotar: es todo el contenido de su celda */
    .gf-ev-comp__ok {
      float: none;
      display: inline-block;
      margin: 0;
      width: 17px;
      height: 17px;
    }
    /* la columna de los demás, centrada como en seed, y sin la rayita: con las
       celdas centradas un guion flotando a la izquierda queda descolgado */
    .gf-ev-comp__t .otro { text-align: center; vertical-align: middle; }
    .gf-ev-comp__no { display: none; }

    /* 2 · aire entre filas en vez de filetes */
    .gf-ev-comp__t tbody td { padding-block: 19px; }
  }
/* END_SECTION:gaela-ev-comparativa */
/* START_SECTION:gaela-ev-explicador (INDEX:26) */
/* ══════════════════════════════════════════════════════════════════════
     🔴 EL ENVOLTORIO DE LOS BLOQUES SE APARTA DEL LAYOUT.
     Shopify envuelve CADA theme block en un `div.shopify-block`. Eso rompe
     cualquier rejilla que coloque por hijo directo: aquí el despiece cayó
     debajo del texto en vez de ir a la columna 2 —la sección pasó de 578 a
     933 px de alto— y en la banda metía un `<div>` dentro de un `<ol>`, que
     además es marcado inválido.
     `display: contents` saca al envoltorio del layout sin quitarlo del DOM:
     el elemento de dentro vuelve a ser el hijo directo y todo vuelve a su
     sitio. Se descubrió mirando la página, no leyendo el Liquid.
     ⚠️ Sólo vale porque estos envoltorios no pintan nada —ni fondo, ni borde,
        ni sombra—: `display:contents` se llevaría eso por delante.
     ══════════════════════════════════════════════════════════════════════ */
  .gf-ev-exp__g > .shopify-block,
  .gf-ev-exp__txt > .shopify-block,
  .gf-ev-diag > .shopify-block { display: contents; }
  /* la columna de texto: los bloques se apilan dentro, como antes lo hacía
     el `<div>` que envolvía titular, cuerpo y enlace */
  .gf-ev-exp__col { display: flex; flex-direction: column; }

  .gf-ev-exp { padding-block: 0; }
    /* 🔴 LA PISTA SE DECLARA `minmax(0, 1fr)` TAMBIÉN EN UNA COLUMNA. Sin
     esto la pista es `auto`, se dimensiona al MAX-CONTENT de lo que lleve
     dentro —un titular largo, una tabla, un carril con `overflow-x`— y en
     celular arrastra a la sección entera fuera de la pantalla. No se ve
     como desborde porque `.gf` lleva `overflow-x:clip`, que **recorta en
     silencio**: el texto sale cortado por la derecha y no hay scroll ni
     error. Medido a 390 px: 420 px de ancho en una pantalla de 390. */
.gf-ev-exp__g {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(10px, 1.2vw, 16px);
  }
  /* 🔴 LAS DOS COLUMNAS, SÓLO SI HAY FOTO. Estaban declaradas siempre, y el
     hueco de la foto se esconde cuando no hay ninguna —que es el caso desde
     que el usuario la quitó—: quedaba UN solo hijo, y un solo hijo cae en la
     PRIMERA pista, la de `.32fr`. Medido a 1.440 px: el texto en una columna
     de 300 px con 938 vacíos al lado, el titular partido a UNA PALABRA POR
     RENGLÓN —«Lo / que / casi / nin...»— y la sección entera en 2.170 px de
     alto contra los 762 del móvil. En celular no se veía porque ahí la
     rejilla es de una columna. */
  /* ══════════════════════════════════════════════════════════════════════
     ESCRITORIO · LA COMPOSICIÓN DE SEED, MEDIDA EN SU PÁGINA
     ----------------------------------------------------------------------
     seed.com/ds-01, «Unlike many probiotics, DS-01® makes it to the gut
     alive», a 1.440 px:

       rejilla  356 px  +  1.036 px, hueco 16
         ├─ pieza   356 × 548, radio 32   ← un VÍDEO, no una foto
         └─ panel 1.036 × 548, radio 32, fondo de color
              ├─ titular + texto + enlace
              └─ recuadro MÁS OSCURO con la cápsula y sus dos señas

     Lo que teníamos no se parecía en tres cosas, y ninguna era el contenido:
     el color iba a SANGRE en vez de vivir en un panel, la pieza de la
     izquierda no existía, y el despiece flotaba sobre el mismo fondo en vez
     de ir en su propio recuadro.

     ⚠️ El recuadro del despiece SÍ va, aunque el 2026-09-14 se quitó el marco
        que llevaba: aquello era un filete de 1 px alrededor de la cápsula
        —una caja dibujada— y esto es el bloque de color de seed. Pedido
        expreso: «necesito que sea igual que seed». */
  @media (min-width: 860px) {
    .gf-ev-exp__g--foto {
      grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
      align-items: stretch;
    }
    /* el color deja de ir a sangre: lo lleva el panel */
    .gf-ev-exp { background: transparent; padding-block: clamp(40px, 5vw, 76px); }
    .gf-ev-exp__foto {
      border-radius: var(--gf-radio-cont, 0);
      overflow: hidden;
    }
    .gf-ev-exp__txt {
      background: var(--gf-vino);
      border-radius: var(--gf-radio-cont, 0);
    }
  }
  /* 🔴 `height:100%` + `aspect-ratio` = EL ANCHO LO MANDA LA RAZÓN.
     El hueco es `3/4` y su padre medía 530 px de alto: 530 × 3/4 = **397 px**
     de ancho dentro de una columna de 327. Se salía 70 px y tapaba la
     primera letra de cada renglón del texto —«o que casi ninguna»—.

     ⚠️ Y me costó dos intentos porque medí las cajas equivocadas: el padre
     daba 327 y el titular 368→840, así que «no se solapaban». El que
     desbordaba era el hueco de en medio, que nunca medí. Lo cantó un
     `elementFromPoint` a la primera: **cuando algo se ve tapado, se
     pregunta QUÉ hay pintado en ese píxel, no se miden cajas de una en una.**

     Se ata el ancho al contenedor y se anula la razón: el alto ya lo da
     `height:100%`, y una caja no puede obedecer a los dos a la vez. */
  .gf-ev-exp__foto .gf-hueco {
    height: 100%;
    width: 100%;
    aspect-ratio: auto;
  }
  /* el clip se comporta igual que el hueco: llena su columna y recorta */
  .gf-ev-exp__clip {
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
  }
  /* EL MOLDE, con el mismo lenguaje que el de los reels (Regla 18): filete
     discontinuo, la tela dentro y el rótulo en una chapa abajo a la izquierda.
     Un hueco liso parece una foto que no cargó; discontinuo dice qué falta. */
  .gf-ev-exp__clip--molde {
    background: var(--gf-crema);
    box-shadow: inset 0 0 0 1px var(--gf-linea-fuerte);
  }
  .gf-ev-exp__clip--molde::after {
    content: "";
    position: absolute;
    inset: 7px;
    border: 1px dashed var(--gf-linea-fuerte);
    pointer-events: none;
  }
  .gf-ev-exp__hueco {
    position: relative;
    z-index: 2;
    margin: 11px;
    font: 600 9px/1.4 var(--gf-sans);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gf-tenue);
    background: var(--gf-fondo);
    padding: 9px 11px;
  }
  .gf-ev-exp__clip video,
  .gf-ev-exp__clip img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* 🔴 EN CELULAR LA PIEZA VA DEBAJO DEL PANEL, Y CUADRADA. Mirada la página
     de seed a 390 px: primero el panel entero —titular, texto, enlace y las
     dos señas— y DESPUÉS, fuera de él, una tarjeta cuadrada redondeada con el
     clip dentro. Yo la había puesto arriba y apaisada, que es lo que él vio.
     El marcado no cambia —la pieza sigue siendo el primer hijo, que es lo que
     quiere el escritorio—: en celular se reordena con `order`. */
  @media (max-width: 859px) {
    .gf-ev-exp__g { display: flex; flex-direction: column; }
    .gf-ev-exp__txt { order: 1; }
    .gf-ev-exp__foto {
      order: 2;
      border-radius: var(--gf-radio-cont, 0);
      overflow: hidden;
    }
    .gf-ev-exp__clip { aspect-ratio: 1 / 1; height: auto; }
    .gf-ev-exp__foto .gf-hueco { aspect-ratio: 1 / 1; height: auto; }
  }
  @media (prefers-reduced-motion: reduce) {
    .gf-ev-exp__clip video { display: none; }
  }
  .gf-ev-exp__txt {
    padding: clamp(24px, 3vw, 42px);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    align-content: center;
  }
  /* 🔴 EL DIAGRAMA NO SE PONE AL LADO HASTA LOS 1.100 px. A 860 el texto
     se quedaba con 250 px de columna y se le echaba encima; el usuario lo
     vio antes que yo. Por debajo de eso el diagrama va DEBAJO, que es
     donde no estorba, y el texto tiene el ancho entero. */
  /* 🔴 LA COLUMNA SE ASIGNA, NO SE DEDUCE DEL ORDEN. Antes el panel tenía dos
     hijos exactos —un `<div>` con el texto y el diagrama— y bastaba con dos
     pistas. Ahora los hijos son bloques y pueden ser dos o seis: si se dejara
     al reparto automático, el segundo bloque de texto saltaría a la columna
     del despiece. Se manda a mano: todo a la 1, el despiece a la 2.
     ⚠️ `grid-row: 1 / -1` NO abarca filas implícitas —se resuelve a `1 / 1`
     (A-164)—, así que el despiece se estira con un `span` generoso. */
  @media (min-width: 1100px) {
    .gf-ev-exp__txt {
      grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
      align-items: center;
      gap: clamp(24px, 3vw, 46px);
    }
  }
  .gf-ev-exp__txt .gf-ev-enl-p { margin-block-start: 20px; }

  /* ── EL DIAGRAMA ────────────────────────────────────────────────────────
     🔴 SIN MARCO DETRÁS. Llevaba `box-shadow: inset 0 0 0 1px` y una razón
        fija, o sea una caja dibujada alrededor. Textual del usuario:
        «las píldoras no tenían nada detrás, o sea eran sólo las píldoras».
        La cápsula se apoya en el campo de la sección y ya.

     🔴 Y ERA UNA REJILLA DE TRES COLUMNAS DESDE EL PRINCIPIO, no absolutos
        sobre porcentajes. Con `position:absolute` + `max-width:15ch` las dos
        etiquetas SE METÍAN DEBAJO de la cápsula —medido a 390 px: la de la
        izquierda acababa en 144 y la cápsula empezaba en 122, 22 px de
        solape por cada lado— y el texto se leía cortado. Con la cápsula en la
        columna del medio el solape es imposible por construcción, a cualquier
        ancho, sin tener que acertar un porcentaje.

     ⚠️ Y el `@media` de celular que había ESTABA MUERTO (A-184): iba escrito
        ANTES que las reglas base, misma especificidad, así que ganaban las de
        después. La cápsula salía al 46 % y con razón 4/3 en el móvil, que es
        justo lo que se veía mal. Por eso ahora el bloque de celular va al
        final: un `@media` no gana por ser `@media`. */
  /* 🔴 EL ANCHO DE LA CÁPSULA LO LLEVA LA PISTA, NO LA CÁPSULA. Estaba como
     `grid-template-columns: … auto …` con la pieza en `width: clamp(…, 30%, …)`,
     y un ancho en PORCENTAJE dentro de una pista `auto` es circular: el
     navegador no puede medir la pista sin medir el hijo ni al revés, así que
     resuelve la pista a CERO. Medido a 390 px: las pistas salían
     `151px 0px 151px` y la cápsula, que sí conservaba su mínimo de 70 px, se
     pintaba DESBORDANDO su columna, encima de la etiqueta de la derecha: se
     leía «® · azufre orgánico», sin «OptiMSM».
     Con la medida en la pista, el porcentaje se resuelve contra el contenedor
     —que sí es definido— y la pieza sólo tiene que llenarla. */
  .gf-ev-diag {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(78px, 30%, 132px) minmax(0, 1fr);
    align-items: center;
    column-gap: clamp(8px, 2.5%, 20px);
    padding-block: clamp(20px, 6%, 38px);
  }
  /* el recuadro del despiece: un punto más hondo que el panel, como el negro
     de seed sobre su verde. Sólo en escritorio — en celular no hay cápsula. */
  @media (min-width: 1100px) {
    .gf-ev-diag {
      background: var(--gf-vino-oscuro);
      border-radius: calc(var(--gf-radio-cont, 0px) * .7);
      padding: clamp(20px, 2.4vw, 34px) clamp(14px, 1.6vw, 22px);
    }
  }
  .gf-ev-diag__pieza {
    position: relative;
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    aspect-ratio: 1 / 2;
    overflow: hidden;
  }
  /* es una CÁPSULA: sin los extremos redondos es un rectángulo oscuro, y sin el
     marco que tenía detrás eso se quedaba en una mancha. Medido: el radio salía
     en 14 px —lo pisaba una regla más general de la ficha—, así que se escribe
     con el peso del contenedor y sobre la pieza y su tela, que es la que de
     verdad pinta. */
  .gf-ev-diag .gf-ev-diag__pieza,
  .gf-ev-diag .gf-ev-diag__pieza .gf-seda { border-radius: 999px; }
  .gf-ev-diag__et {
    grid-row: 1;
    margin: 0;
    font-size: 11px;
    line-height: 1.4;
    color: var(--gf-sobre-cont);
  }
  .gf-ev-diag__et b {
    display: block;
    color: var(--gf-titular-cont);
    font-weight: 400;
    font-family: var(--gf-serif);
    font-size: 13px;
  }
  /* 🔴 EL HILO CON SU PUNTO, QUE ES LO QUE HACE QUE SE PAREZCA A SEED.
     Mirada su sección «Unlike many probiotics, DS-01® makes it to the gut
     alive» en las dos anchuras: cada seña va precedida de un FILETE DE 1 px
     con un punto en el extremo derecho. Es lo que convierte dos textos
     sueltos en las señas de un despiece — y era justo lo que nos faltaba:
     teníamos las etiquetas flotando al lado de la cápsula, sin nada que las
     atara a ella.
     Se dibuja con dos fondos sobre la misma caja de 5 px: la raya centrada y
     el punto a la derecha. Sin marcado extra y sin una imagen. */
  .gf-ev-diag__et::before {
    content: "";
    display: block;
    height: 5px;
    margin-block-end: 11px;
    background:
      linear-gradient(var(--gf-linea-cont), var(--gf-linea-cont)) left center / 100% 1px no-repeat,
      radial-gradient(2.5px 2.5px at calc(100% - 2.5px) center, var(--gf-titular-cont) 99%, transparent 100%)
        right center / 5px 5px no-repeat;
  }
  /* una baja a la izquierda y otra alta a la derecha: la lectura cruza la
     cápsula en diagonal, que es lo que hacía el diseño con los absolutos.

     🔴 SIN `justify-self`, Y ESTO ES LO QUE FALLABA. Con `justify-self:end` la
        etiqueta se dimensiona a MAX-CONTENT: «OptiMSM® · azufre orgánico» no
        cabía en su columna, no partía, y al estar alineada a la derecha el
        sobrante salía por la IZQUIERDA — debajo de la cápsula. Medido a 390 px:
        45 px tapados, y en pantalla se leía «® · azufre orgánico», sin la
        marca. Dejando el elemento estirado a su columna, el texto parte y no
        hay nada que desbordar; la alineación la da `text-align`, que es lo que
        de verdad se quería. */
  /* 🔴 UN CONTENEDOR POR LADO, Y AHÍ SE ACABÓ EL SOLAPE. Las señas eran items
     de la rejilla y todas pedían `grid-row: 1`: dos del mismo lado se pintaban
     UNA ENCIMA DE OTRA. Lo vio el usuario. Ahora cada lado es una columna con
     sus señas apiladas, y el lado es dónde está el bloque, no un ajuste.
     Se conserva la diagonal de la lectura: la izquierda se pega abajo y la
     derecha arriba, que es lo que hace que la vista cruce la cápsula. */
  .gf-ev-diag__lado {
    grid-row: 1;
    /* 🔴 `align-self: stretch` Y NO ES UN DETALLE: la rejilla tiene
       `align-items: center`, así que el contenedor del lado se quedaba del
       alto de su contenido y `justify-content` no tenía sitio donde empujar.
       Resultado: las dos señas centradas y **la diagonal perdida** — la
       izquierda abajo y la derecha arriba es lo que hace que la vista cruce la
       cápsula. Estirado, el flex reparte dentro de toda la fila. */
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 3%, 22px);
  }
  .gf-ev-diag__lado--izq { grid-column: 1; justify-content: flex-end; text-align: left; }
  .gf-ev-diag__lado--der { grid-column: 3; justify-content: flex-start; text-align: right; }
  .gf-ev-diag__lado > .shopify-block { display: contents; }

  /* ⚠️ Aquí vivía un `aspect-ratio: 16/9` para la pieza que, por ir DESPUÉS
     del bloque de celular de arriba, le ganaba y la devolvía a apaisada —justo
     lo que el usuario pidió cambiar—. La razón de la pieza se decide en un
     solo sitio: cuadrada, como en seed. */
  @media (max-width: 859px) {
    /* 🔴 EN CELULAR NO HAY CÁPSULA, COMO EN SEED. En su móvil el despiece
       desaparece y quedan sólo las dos señas, apiladas a ancho completo, cada
       una con su hilo. Tiene sentido: a 390 px la cápsula se come el centro y
       empuja las etiquetas a dos columnas de 110 px, que es donde se partían.
       Aquí se apaga la pieza y las señas ocupan la fila entera. */
    .gf-ev-diag {
      grid-template-columns: minmax(0, 1fr);
      row-gap: clamp(18px, 5%, 26px);
      padding-block: clamp(20px, 6%, 30px) 0;
    }
    .gf-ev-diag__pieza { display: none; }
    /* Los dos lados se apilan a ancho completo, y dentro las señas también. */
    .gf-ev-diag__lado--izq,
    .gf-ev-diag__lado--der {
      grid-column: 1;
      grid-row: auto;
      justify-content: flex-start;
      text-align: left;
    }
    .gf-ev-diag__et {
      grid-column: 1;
      grid-row: auto;
      align-self: auto;
      text-align: left;
      font-size: 11px;
    }
    .gf-ev-diag__et::before { width: 62%; }
  }
/* END_SECTION:gaela-ev-explicador */
/* START_SECTION:gaela-ev-formula (INDEX:27) */
/* Los envoltorios `div.shopify-block` se apartan del layout para que la
     rejilla y la cabecera coloquen por sus propias clases.
     ⚠️ `display:contents` cambia el layout, no el árbol de selectores: nada de
     reglas con `>` sobre estas clases. */
  .gf-ev-form__cab > .shopify-block,
  .gf-ev-form__g > .shopify-block,
  .gf-ev-filas > .shopify-block { display: contents; }

  .gf-ev-form { padding-block: clamp(48px, 7vw, 96px); }
  .gf-ev-form__cab {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 20px;
    flex-wrap: wrap;
  }
  /* 🔴 NADA DE `max-width: 24ch` AQUÍ. La unidad `ch` se calcula con la
     fuente DEL ELEMENTO, y este div hereda la sans de 15 px: 24ch daban
     **194 px** y el titular salía partido letra a letra —«Siete compon /
     entes, / ordenad / os por»—. Lo vio el usuario, no `theme check`.
     La medida va en la caja, y en píxeles. */
  .gf-ev-form__cab > div { flex: 1 1 clamp(280px, 46vw, 620px); min-width: 0; }
  .gf-ev-form__cab .gf-cab__h { max-width: 22ch; }
  /* 🔴 LA PISTA SE DECLARA `minmax(0, 1fr)` TAMBIÉN EN UNA COLUMNA. Sin
     esto la pista es `auto`, se dimensiona al MAX-CONTENT de lo que lleve
     dentro —un titular largo, una tabla, un carril con `overflow-x`— y en
     celular arrastra a la sección entera fuera de la pantalla. No se ve
     como desborde porque `.gf` lleva `overflow-x:clip`, que **recorta en
     silencio**: el texto sale cortado por la derecha y no hay scroll ni
     error. Medido a 390 px: 420 px de ancho en una pantalla de 390. */
  .gf-ev-form__g {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(26px, 3.4vw, 50px);
    margin-block-start: 36px;
  }
  @media (min-width: 960px) {
    .gf-ev-form__g { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); }
  }
  .gf-ev-filas { border-block-start: 1px solid var(--gf-linea); }
  .gf-ev-fila { border-block-end: 1px solid var(--gf-linea); }
  .gf-ev-fila summary {
    list-style: none;
    cursor: pointer;
    padding: 17px 30px 17px 0;
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    align-items: baseline;
  }
  .gf-ev-fila summary::-webkit-details-marker { display: none; }
  .gf-ev-fila summary::after {
    content: "+";
    position: absolute;
    right: 4px;
    top: 14px;
    font: 400 18px/1 var(--gf-sans);
    color: var(--gf-tenue);
  }
  .gf-ev-fila[open] summary::after { content: "–"; }
  .gf-ev-fila__n { font-family: var(--gf-serif); font-size: 17px; color: var(--gf-acento); }
  .gf-ev-fila__v {
    font: 600 10px/1 var(--gf-sans);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gf-ambar);
    font-variant-numeric: tabular-nums;
  }
  .gf-ev-fila__t,
  .gf-ev-fila__niv { margin: 0 0 14px; font-size: 13.5px; line-height: 1.6; color: var(--gf-tenue); max-width: 56ch; }
  .gf-ev-aviso {
    margin: 0 0 16px;
    padding: 14px 16px;
    background: var(--gf-oscuro);
    color: var(--gf-claro);
    border-inline-start: 3px solid var(--gf-ambar);
    font-size: 13px;
    line-height: 1.55;
    max-width: 62ch;
  }
/* END_SECTION:gaela-ev-formula */
/* START_SECTION:gaela-ev-hero (INDEX:29) */
/* ══════════════════════════════════════════════════════════════════════
     🔴 EL ENVOLTORIO DE LOS BLOQUES SE APARTA DEL LAYOUT.
     Shopify envuelve CADA theme block en un `div.shopify-block`. Eso rompe
     cualquier rejilla que coloque por hijo directo: aquí el despiece cayó
     debajo del texto en vez de ir a la columna 2 —la sección pasó de 578 a
     933 px de alto— y en la banda metía un `<div>` dentro de un `<ol>`, que
     además es marcado inválido.
     `display: contents` saca al envoltorio del layout sin quitarlo del DOM:
     el elemento de dentro vuelve a ser el hijo directo y todo vuelve a su
     sitio. Se descubrió mirando la página, no leyendo el Liquid.
     ⚠️ Sólo vale porque estos envoltorios no pintan nada —ni fondo, ni borde,
        ni sombra—: `display:contents` se llevaría eso por delante.
     ══════════════════════════════════════════════════════════════════════ */
  .gf-ev-panel > .shopify-block,
  .gf-ev-acor > .shopify-block { display: contents; }

  .gf-ev-h { padding-block: clamp(24px, 3vw, 44px) clamp(40px, 6vw, 80px); }


  .gf-ev-h__g { display: grid; gap: clamp(24px, 3vw, 44px); align-items: start; }
  @media (min-width: 960px) {
    .gf-ev-h__g { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
  }

  /* ══ LA GALERÍA: MOSAICO ARRIBA, CARRIL ABAJO ═══════════════════════════
     🔴 EL CORTE ES 960 px Y CADA LADO TIENE SU TAMAÑO. Aquí me equivoqué dos
     veces seguidas y en direcciones opuestas:

       1.ª  Encogí sólo el carril y dejé el mosaico igual. El usuario veía la
            imagen del mismo tamaño porque estaba mirando el MOSAICO.
       2.ª  Corregí pasándolo todo a carril, incluso en escritorio. Tampoco:
            «llega un punto que pasa de ser un mosaico a un carrusel, sólo esa
            parte es la que vamos las imágenes más pequeñas; el mosaico sí
            déjalo del tamaño que estaba».

     Así que el mosaico vuelve EXACTO a lo que era —2×2, hueco de 10 px, celdas
     de 302 px a 1440— y lo único que encoge es el carril. */
  .gf-ev-gal { display: grid; gap: 10px; }
  .gf-ev-gal__mos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

  /* 🔴 EL MOLDE SE MARCA CON FILETE DISCONTINUO, y es lo único de la ficha que
     lo lleva. Un hueco liso parece una foto que no cargó; discontinuo dice
     «aquí va a ir una foto». Desaparece solo cuando llega la foto. */
  .gf-ev-gal__molde { position: relative; }
  .gf-ev-gal__molde::after {
    content: "";
    position: absolute;
    inset: 8px;
    border: 1px dashed var(--gf-linea-fuerte);
    pointer-events: none;
    z-index: 3;
  }

  .gf-ev-panel {
    position: sticky;
    top: 86px;
    background: var(--gf-fondo);
    border: 1px solid var(--gf-linea);
    padding: clamp(20px, 2.4vw, 30px);
  }
  .gf-ev-panel__marca {
    display: inline-block;
    font: 600 9px/1 var(--gf-sans);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gf-tenue);
    box-shadow: inset 0 0 0 1px var(--gf-linea-fuerte);
    padding: 6px 9px;
  }
  .gf-ev-panel__h {
    margin: 14px 0 0;
    font-family: var(--gf-serif);
    font-weight: 400;
    font-size: clamp(24px, 2.6vw, 32px);
    line-height: 1.1;
    color: var(--gf-acento);
  }
  .gf-ev-panel__val {
    display: flex;
    align-items: center;
    gap: 11px;
    flex-wrap: wrap;
    margin: 12px 0 0;
  }
  .gf-ev-panel__val b {
    color: var(--gf-ambar);
    letter-spacing: .12em;
    font-weight: 400;
    font-size: 14px;
  }
  .gf-ev-panel__val span {
    font: 600 8.5px/1 var(--gf-sans);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gf-tenue);
    box-shadow: inset 0 0 0 1px var(--gf-linea-fuerte);
    padding: 5px 8px;
  }
  .gf-ev-panel__claim { margin: 16px 0 0; font-size: 14px; line-height: 1.6; color: var(--gf-tinta); }
  .gf-ev-panel__precio {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin-block-start: 20px;
  }
  .gf-ev-panel__precio b {
    font-family: var(--gf-serif);
    font-weight: 400;
    font-size: 34px;
    line-height: 1;
    color: var(--gf-acento);
    font-variant-numeric: tabular-nums;
  }
  .gf-ev-panel__precio s { color: var(--gf-tenue); font-size: 15px; }
  .gf-ev-etq {
    font: 600 8.5px/1 var(--gf-sans);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gf-claro);
    background: var(--gf-oscuro);
    padding: 6px 8px;
  }
  .gf-ev-panel__sus { margin: 12px 0 0; font-size: 12.5px; color: var(--gf-tenue); }
  .gf-ev-panel__form { margin: 0; }
  .gf-ev-panel__btn { width: 100%; margin-block-start: 18px; }
  .gf-ev-panel__gar { margin: 12px 0 0; text-align: center; font-size: 11.5px; color: var(--gf-tenue); }

  /* ══════════════════════════════════════════════════════════════════════
     🔴 LO QUE HORIZON LE COME A CADA PIEZA DESDE QUE EL PANEL ES DE BLOQUES.
     `base.css` trae `:first-child:is(p,h1…){margin-block-start:0}` y
     `:last-child:is(p,h1…){margin-block-end:0}`, pensadas para que un texto no
     meta aire al principio ni al final de su contenedor. Pero Shopify envuelve
     CADA bloque en su propio `div.shopify-block`, así que todas estas piezas
     son hijas ÚNICAS: primeras y últimas a la vez. Se quedaron **todas a cero**
     y el panel de escritorio perdió 89 px.
     Pesan (0,1,1) y una clase sola (0,1,0), así que se devuelven con DOS
     clases. Los valores son los de arriba, medidos contra producción.
     ⚠️ `.gf-ev-panel > *` no sirve: `display:contents` saca al envoltorio del
     layout pero **no del árbol de selectores**.
     🔴 El `1em` del precio NO es nuestro: es el margen de `<p>` del navegador,
     que sobrevivía porque la regla de arriba sólo declara `margin-block-start`.
     Son 15 px con la fuente base, y los echábamos de menos entre el precio y
     la línea de suscripción. Va en `em` para que siga al texto, como hacía. */
  .gf-ev-panel .gf-ev-panel__h { margin-block-start: 14px; }
  .gf-ev-panel .gf-ev-panel__val { margin-block-start: 12px; }
  .gf-ev-panel .gf-ev-panel__precio { margin-block-start: 20px; margin-block-end: 1em; }
  .gf-ev-panel .gf-ev-panel__sus { margin-block-start: 12px; }
  .gf-ev-panel .gf-ev-panel__gar { margin-block-start: 12px; }
  .gf-ev-panel .gf-ev-panel__claim { margin-block-start: 16px; }

  .gf-ev-acor { margin-block-start: 22px; border-block-start: 1px solid var(--gf-linea); }
  .gf-ev-acor details { border-block-end: 1px solid var(--gf-linea); }
  .gf-ev-acor summary {
    list-style: none;
    cursor: pointer;
    padding: 15px 30px 15px 0;
    position: relative;
    font: 600 10px/1 var(--gf-sans);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gf-tinta);
  }
  .gf-ev-acor summary::-webkit-details-marker { display: none; }
  .gf-ev-acor summary::after {
    content: "+";
    position: absolute;
    right: 4px;
    top: 12px;
    font: 400 18px/1 var(--gf-sans);
    color: var(--gf-tenue);
  }
  .gf-ev-acor details[open] summary::after { content: "–"; }
  .gf-ev-acor ul { margin: 0 0 16px; padding: 0 0 0 20px; font-size: 13.5px; color: var(--gf-tenue); }
  .gf-ev-acor li { margin-block-end: 7px; }
  .gf-ev-acor p { margin: 0 0 16px; font-size: 13.5px; line-height: 1.6; color: var(--gf-tenue); }
  .gf-ev-acor__enl { margin-block-end: 18px; }

  .gf-ev-bundle {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-block-start: 20px;
    border: 1px solid var(--gf-linea);
    padding: 12px;
    text-decoration: none;
    color: inherit;
  }
  .gf-ev-bundle:hover { border-color: var(--gf-linea-fuerte); }
  .gf-ev-bundle__f {
    position: relative;
    flex: 0 0 62px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    display: block;
  }
  .gf-ev-bundle__t { flex: 1; font-size: 12.5px; line-height: 1.45; color: var(--gf-tenue); }
  .gf-ev-bundle__t b { display: block; color: var(--gf-tinta); font-size: 13px; margin-block-end: 3px; }
  .gf-ev-bundle__v {
    box-shadow: inset 0 0 0 1px var(--gf-linea-fuerte);
    padding: 9px 15px;
    font: 600 9.5px/1 var(--gf-sans);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gf-acento);
    white-space: nowrap;
  }

  /* 🔴 ESTE BLOQUE VA AL FINAL DE LA HOJA, Y NO ES capricho: la primera
     vez lo puse arriba y `.gf-ev-h__g{display:grid}` y `.gf-ev-gal{display:grid}`,
     que están más abajo, lo pisaban — misma especificidad, gana el último.
     `.gf-ev-panel{display:contents}` sí aplicaba, porque ahí no competía con
     nada: el resultado era medio orden puesto y medio no. Medido: el `<h1>`
     seguía empezando en el píxel 830. Un `@media` NO gana por ser `@media`. */
  /* ══ CELULAR · EL ORDEN D ═════════════════════════════════════
     🔴 APILADAS TAL CUAL, LA GALERÍA SE COME LA PRIMERA PANTALLA: cinco
     imágenes antes del nombre del producto. Medido a 390 px: el título
     empezaba pasados 700 px de scroll.

     El orden que se decidió en la ficha 1 y que aquí se repite: **primero se
     dice QUÉ ES y se enseÑA; después se explica.** Marca · titular ·
     valoración · FOTO · precio · botón · garantía · el porqué · el resto.

     ⚠️ Para que la foto pueda meterse ENTRE dos trozos del panel, la galería
     y el panel dejan de ser cajas: con `display:contents` sus hijos pasan a
     ser hijos del mismo flex y entonces `order` puede mezclarlos. El panel
     pierde ahí su borde y su `sticky`, que en celular no pintan nada.

     ⚠️ Y todo lo no listado —los bloques de app— lleva `order:20`, para que
     caiga al final en vez de colarse al principio con el `order:0` de serie. */
  @media (max-width: 959px) {
    /* 🔴 `align-items: stretch` Y HAY QUE ESCRIBIRLO. La regla base lleva
       `align-items:start` para el grid de escritorio, y en un flex COLUMN ese
       eje transversal es el horizontal: todos los hijos se encogen a su
       contenido. La foto, que sólo tiene `aspect-ratio`, se quedó en ancho 0
       y **desapareció de la página**; el botón salió de 130 px. Ninguna de
       las dos cosas dio un error. */
    .gf-ev-h__g { display: flex; flex-direction: column; gap: 0; align-items: stretch; }

    /* 🔴 EN CELULAR LA GALERÍA ES UN CARRIL, NO UN MOSAICO. Apiladas, las
       cinco piezas eran cinco pantallas de scroll antes de llegar al precio.
       Aquí la galería SÍ conserva su caja —es la única que no se disuelve con
       `display:contents`— y dentro se desliza; el `__mos` sí se disuelve,
       para que sus cuatro huecos pasen a ser hermanos de la foto grande y
       todos entren en el mismo carril. */
    .gf-ev-panel { display: contents; }
    .gf-ev-panel > * { order: 20; }

    /* El carril ya está en la regla base. Aquí sólo queda lo que ES del
       celular: que vaya a sangre, y que abra el hero. */
    .gf-ev-gal {
      /* 🔴 PRIMERO LAS FOTOS, DESPUÉS EL NOMBRE. Pedido el 2026-09-08: «lo del
         hero es sólo que pongas primero las imágenes y después el título»,
         como en seed. ⚠️ DEROGA EL «ORDEN D» explicado aquí arriba, donde la
         foto entraba detrás del titular y la valoración. */
      order: 1;
      display: flex;
      gap: 8px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
      /* A sangre, y el aire lateral se recupera como padding para que la
         primera pieza no nazca pegada al borde. */
      margin-inline: calc(var(--gf-pad) * -1);
      padding-inline: var(--gf-pad);
      margin-block: 0 4px;
    }
    .gf-ev-gal::-webkit-scrollbar { display: none; }
    .gf-ev-gal__mos { display: contents; }
    .gf-ev-gal > .gf-hueco,
    .gf-ev-gal > .gf-ev-gal__molde,
    .gf-ev-gal__mos > * { scroll-snap-align: center; aspect-ratio: 1 / 1; flex-grow: 0; flex-shrink: 0; }
    .gf-ev-gal > .gf-hueco > img { height: 100%; object-fit: cover; }

    /* Todas del mismo alto: un 16:9 junto a cuatro cuadrados deja el carril
       con escalones. Y al 78 % asoma la siguiente, que es lo que le dice al
       pulgar que hay más sin necesidad de puntitos. */
    /* 🔴 LA PRIMERA PIEZA MANDA, y la proporción entre las dos es lo que se
       conserva. Estuvo en 90 % / 74 %; el 2026-09-07 el usuario las pidió más
       pequeñas y bajan a 76 % / 62 % — el mismo salto de 14 puntos entre la
       principal y las demás, así que la jerarquía no cambia: sigue asomando lo
       justo para que el pulgar sepa que hay más, sin robarle la pantalla a la
       principal. Como son `aspect-ratio: 1/1`, bajar el ancho baja el alto: el
       carril entero encoge, no sólo las cajas. */
    /* 🔴 AQUÍ, Y SÓLO AQUÍ, LAS IMÁGENES SON MÁS PEQUEÑAS. La escalera de
       esta parte, en tres pasos y todos pedidos por el usuario:
         90 % / 74 %  el original
         76 % / 62 %  primer recorte
         68 % / 54 %  ← ahora, «un poco más pequeñas»
       Se conserva el salto de 14 puntos entre la principal y las demás, que
       es lo que mantiene la jerarquía del carril. Como son `aspect-ratio 1/1`,
       bajar el ancho baja el alto: encoge el carril entero. */
    .gf-ev-gal > .gf-hueco,
    .gf-ev-gal > .gf-ev-gal__molde,
    .gf-ev-gal__mos > * { flex-basis: 54%; }

    .gf-ev-gal > .gf-hueco:first-child,
    .gf-ev-gal > .gf-ev-gal__molde:first-child { flex-basis: 68%; }

    /* 🔴 EL MOLDE SE ESTIRA Y SU HUECO NO, pero SÓLO en el carril: en un flex
       los hijos se estiran a lo alto, así que la caja del molde subía al alto
       de la foto principal mientras el gris de dentro se quedaba cuadrado —
       medido, 206 × 275 contra 206 × 206— y el filete discontinuo salía
       flotando por debajo. Sin error, sólo feo.
       ⚠️ VA DENTRO DEL @media A PROPÓSITO. En el mosaico el alto del molde lo
       da precisamente la razón de su hueco: anularla ahí lo dejaría en CERO. */
    .gf-ev-gal__molde > .gf-hueco { height: 100%; aspect-ratio: auto; }

    .gf-ev-panel__marca { order: 2; align-self: flex-start; margin-block-start: 20px; }
    .gf-ev-panel__h { order: 3; margin-block-start: 12px; }
    .gf-ev-panel__val { order: 4; margin-block-end: 20px; }

    .gf-ev-panel__precio { order: 5; margin-block-start: 22px; }
    .gf-ev-panel__sus { order: 6; }
    .gf-ev-panel__form { order: 7; }
    .gf-ev-panel__gar { order: 8; }
    .gf-ev-panel__claim { order: 9; margin-block-start: 22px; }
    /* 🔴 VA DESPUÉS DE `__claim`, Y NO ES UN CAPRICHO. El texto libre lleva
       las dos clases, `__claim` y `--entre`, y las dos pesan lo mismo (0,1,0):
       gana **la que va después en la hoja**. Puesta antes, el `order: 9` del
       claim la machacaba y en celular el campo se iba al final de la columna
       —en escritorio salía bien, que es lo que lo hace difícil de ver—. A
       igual `order` manda el orden del documento, y en la plantilla el campo
       va después de la valoración y antes del precio. */
    .gf-ev-txt--entre { order: 4; margin-block-start: 14px; }
    /* 🔴 LA LETRA MENUDA VA PEGADA A LO QUE ANOTA, no al sitio de la clase que
       reutiliza. Usa `__gar` —que es el orden 8— pero anota la garantía del
       110 %, que se escribe en el claim y tiene el 9: sin esto, en celular
       salía POR ENCIMA de la frase que explica, y en escritorio debajo.
       El 10 estaba libre entre el claim (9) y el acordeón (11). */
    .gf-ev-panel__gar.gf-ev-txt { order: 10; }
    .gf-ev-acor { order: 11; }
    .gf-ev-bundle { order: 12; }

    /* ── LO QUE HAY QUE DEVOLVER DESDE QUE EL PANEL ES DE BLOQUES ──────────
       🔴 HORIZON LE COME LOS MÁRGENES DE LOS EXTREMOS (A-196). Cada pieza del
       panel es ahora hija ÚNICA de su `div.shopify-block`, así que a todas les
       entran `:first-child:is(p…){margin-block-start:0}` y su pareja de abajo,
       que pesan (0,1,1) contra los (0,1,0) de una clase suelta. El titular
       perdía sus 12 px, el claim sus 22 y la valoración los dos suyos: en
       total el hero medía **44 px menos** que el de producción.
       Se devuelven con DOS clases, que pesan (0,2,0). Los valores son los
       mismos de siempre, medidos contra producción, no elegidos.
       ⚠️ Ojo con `.gf-ev-panel > *`: NO alcanza a estas piezas.
       `display:contents` saca al envoltorio del layout pero **no del árbol de
       selectores**, así que el hijo directo del panel sigue siendo el
       `div.shopify-block`. Por eso aquí todo va por descendencia. */
    /* En celular sólo cambian tres: el resto ya los devuelve la regla base. */
    .gf-ev-panel .gf-ev-panel__h { margin-block-start: 12px; }
    .gf-ev-panel .gf-ev-panel__val { margin-block-end: 20px; }
    .gf-ev-panel .gf-ev-panel__precio { margin-block-start: 22px; }
    .gf-ev-panel .gf-ev-panel__claim { margin-block-start: 22px; }
  }

  /* ══ EL POP-UP DE COMPRA ════════════════════════════════════════════════
     `<dialog>` nativo: el foco atrapado, la tecla Esc y el fondo inerte los
     pone el navegador. Una librería de modales pesaría más que el problema. */
  .gf-ev-pop {
    width: min(440px, calc(100vw - 32px));
    padding: clamp(22px, 3vw, 30px);
    border: 1px solid var(--gf-linea-fuerte);
    background: var(--gf-fondo);
    color: var(--gf-texto);
  }
  /* El velo del pop-up: era el vino 126,29,57; ahora el palo de rosa #8E3D50
     de la paleta nueva (2026-09-07). Va en rgba y no en el token porque un
     `::backdrop` necesita alfa y `--gf-oscuro` es opaco. */
  .gf-ev-pop::backdrop { background: rgba(142, 61, 80, .44); }
  .gf-ev-pop__cerrar { margin: 0; }
  .gf-ev-pop__cerrar button {
    position: absolute;
    right: 10px;
    top: 8px;
    border: 0;
    background: transparent;
    font: 400 21px/1 var(--gf-sans);
    color: var(--gf-tenue);
    cursor: pointer;
    padding: 6px 8px;
  }
  .gf-ev-pop__k {
    margin: 0;
    font: 600 9px/1 var(--gf-sans);
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--gf-ambar);
  }
  .gf-ev-pop__h {
    margin: 12px 0 0;
    font-family: var(--gf-serif);
    font-weight: 400;
    font-size: clamp(21px, 2.4vw, 26px);
    line-height: 1.1;
    color: var(--gf-acento);
  }
  .gf-ev-pop__s { margin: 8px 0 0; font-size: 12.5px; color: var(--gf-tenue); }

  /* 🔴 EL RADIO VA EN EL GRUPO, NO EN CADA CELDA. Este patrón —el contenedor
     pinta el color de la línea y cada celda lo tapa con su fondo, dejando ver
     1 px— es lo que dibuja los filetes sin un solo `border`. Pero si ADEMÁS
     cada celda tiene esquinas redondeadas, entre dos celdas contiguas queda un
     hueco en forma de cuña **y por ahí asoma el fondo del contenedor**, que es
     un velo de vino al 18 %: se ve como una mancha gris a los lados. Lo vio el
     usuario en el pop-up.
     La solución no es quitar el radio de la página: es ponerlo donde
     corresponde. El grupo entero se redondea y recorta, y las celdas van
     rectas por dentro — que es como se hace una lista de filetes. */
  .gf-ev-pop__ops {
    margin-block-start: 22px;
    display: grid;
    gap: 1px;
    background: var(--gf-linea);
    overflow: hidden;
  }
  .gf-ev-pop__ops .gf-ev-pop__op { border-radius: 0; }
  .gf-ev-pop__op {
    background: var(--gf-fondo);
    border: 0;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 15px;
    width: 100%;
  }
  .gf-ev-pop__r {
    flex: 0 0 15px;
    height: 15px;
    box-shadow: inset 0 0 0 1px var(--gf-linea-fuerte);
    position: relative;
  }
  .gf-ev-pop__op[aria-pressed="true"] { background: var(--gf-papel); box-shadow: inset 3px 0 0 var(--gf-oscuro); }
  .gf-ev-pop__op[aria-pressed="true"] .gf-ev-pop__r { box-shadow: inset 0 0 0 1px var(--gf-oscuro); }
  .gf-ev-pop__op[aria-pressed="true"] .gf-ev-pop__r::after {
    content: "";
    position: absolute;
    inset: 3px;
    background: var(--gf-oscuro);
  }
  .gf-ev-pop__t { flex: 1; }
  .gf-ev-pop__t b {
    display: block;
    font-family: var(--gf-serif);
    font-weight: 400;
    font-size: 16.5px;
    color: var(--gf-acento);
  }
  .gf-ev-pop__t span { display: block; font-size: 11.5px; color: var(--gf-tenue); margin-block-start: 2px; }
  .gf-ev-pop__p { text-align: right; font-variant-numeric: tabular-nums; }
  .gf-ev-pop__p b {
    display: block;
    font-family: var(--gf-serif);
    font-weight: 400;
    font-size: 17px;
    color: var(--gf-acento);
  }
  .gf-ev-pop__p span { display: block; font-size: 10.5px; color: var(--gf-tenue); }
  /* la chapa del ahorro: el dato que hacía que elegir dos o tres significara
     algo. Va con el texto, no con el precio, para que se lea al nombrar la
     opción y no compita con la cifra grande. */
  .gf-ev-pop__ah {
    display: inline-block;
    margin-block-start: 6px;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--gf-vino);
    color: var(--gf-acento);
    font: 600 9.5px/1 var(--gf-sans);
    letter-spacing: .09em;
  }

  .gf-ev-pop__libre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-block-start: 18px;
    padding-block-start: 16px;
    border-block-start: 1px solid var(--gf-linea);
  }
  .gf-ev-pop__lr {
    font: 600 9.5px/1.3 var(--gf-sans);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gf-tenue);
  }
  .gf-ev-pop__cont { display: flex; align-items: center; box-shadow: inset 0 0 0 1px var(--gf-linea-fuerte); }
  .gf-ev-pop__cont button {
    border: 0;
    background: transparent;
    cursor: pointer;
    font: 400 18px/1 var(--gf-sans);
    color: var(--gf-acento);
    padding: 11px 15px;
  }
  .gf-ev-pop__cont button:disabled { color: var(--gf-linea-fuerte); cursor: not-allowed; }
  .gf-ev-pop__cont output {
    min-width: 42px;
    text-align: center;
    font-family: var(--gf-serif);
    font-size: 18px;
    color: var(--gf-acento);
    font-variant-numeric: tabular-nums;
  }

  .gf-ev-pop__pie {
    margin-block-start: 20px;
    padding-block-start: 16px;
    border-block-start: 1px solid var(--gf-linea);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
  }
  .gf-ev-pop__pt {
    font: 600 9.5px/1 var(--gf-sans);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gf-tenue);
  }
  .gf-ev-pop__pn {
    font-family: var(--gf-serif);
    font-size: 29px;
    color: var(--gf-acento);
    font-variant-numeric: tabular-nums;
  }
  .gf-ev-pop__pd { width: 100%; font-size: 11.5px; color: var(--gf-tenue); }
  .gf-ev-pop__form { margin: 0; }
  .gf-ev-pop__btn { width: 100%; margin-block-start: 16px; text-decoration: none; }
  .gf-ev-pop__gar { margin: 11px 0 0; text-align: center; font-size: 11px; color: var(--gf-tenue); }
/* END_SECTION:gaela-ev-hero */
/* START_SECTION:gaela-ev-preguntas (INDEX:30) */
.gf-ev-preg { padding-block: clamp(48px, 7vw, 96px); }
  /* 🔴 LA PISTA SE DECLARA `minmax(0, 1fr)` TAMBIÉN EN UNA COLUMNA. Sin
     esto la pista es `auto`, se dimensiona al MAX-CONTENT de lo que lleve
     dentro —un titular largo, una tabla, un carril con `overflow-x`— y en
     celular arrastra a la sección entera fuera de la pantalla. No se ve
     como desborde porque `.gf` lleva `overflow-x:clip`, que **recorta en
     silencio**: el texto sale cortado por la derecha y no hay scroll ni
     error. Medido a 390 px: 420 px de ancho en una pantalla de 390. */
  .gf-ev-preg__g {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(22px, 3vw, 44px);
  }
  @media (min-width: 900px) {
    .gf-ev-preg__g { grid-template-columns: minmax(0, .66fr) minmax(0, 1fr); }
  }
  /* Los envoltorios de bloque se apartan de la rejilla de dos columnas. */
  .gf-ev-preg__g > .shopify-block { display: contents; }

  .gf-ev-preg__l { border-block-start: 1px solid var(--gf-linea); }
  .gf-ev-preg__l details { border-block-end: 1px solid var(--gf-linea); }
  .gf-ev-preg__l summary {
    list-style: none;
    cursor: pointer;
    padding: 19px 40px 19px 0;
    position: relative;
    font-family: var(--gf-serif);
    font-size: clamp(16px, 1.9vw, 20px);
    color: var(--gf-acento);
  }
  .gf-ev-preg__l summary::-webkit-details-marker { display: none; }
  .gf-ev-preg__l summary::after {
    content: "+";
    position: absolute;
    right: 6px;
    top: 18px;
    font: 400 20px/1 var(--gf-sans);
    color: var(--gf-tenue);
  }
  .gf-ev-preg__l details[open] summary::after { content: "–"; }
  summary.gf-ev-preg__ojo { padding-inline-start: 20px; }
  summary.gf-ev-preg__ojo::before {
    content: "";
    position: absolute;
    left: 0;
    top: 26px;
    width: 8px;
    height: 8px;
    background: var(--gf-ambar);
  }
  .gf-ev-preg__r { margin-block-end: 20px; max-width: 62ch; font-size: 14px; line-height: 1.62; }
  .gf-ev-preg__r p { margin: 0 0 12px; }
  .gf-ev-preg__r p:last-child { margin-block-end: 0; }
/* END_SECTION:gaela-ev-preguntas */
/* START_SECTION:gaela-ev-sellos (INDEX:32) */
/* 🔴 ES EL PIE DE LA FORMULA, NO UNA SECCION. Arriba no lleva aire: se pega
     a la seccion anterior, como en seed. Un corte de 78 px entre «que lleva» y
     «que no lleva» las partia en dos capitulos, y son el mismo. */
  .gf-ev-se { padding-block: 0 clamp(40px, 5.5vw, 78px); }
  .gf-ev-se__dos { margin-block-start: 26px; }

  /* 🔴 LA REJILLA SE HACE CON FILETES POR CELDA, NO CON `gap` SOBRE FONDO.
     Con diez sellos en cuatro columnas la ultima fila deja dos huecos, y el
     fondo del contenedor asomaba ahi como UN BLOQUE GRIS. Es la misma trampa
     de `A-185` —el truco del filete de 1 px solo vale cuando las celdas
     llenan la fila— y la volvi a pisar por copiar el patron sin mirar
     cuantas celdas iban a caber.

     Asi funciona con cualquier numero de sellos: el contenedor cierra arriba
     y por la izquierda, y cada casilla pinta su filete derecho e inferior.
     Lo que no existe, no se pinta. */
  .gf-ev-se__g {
    display: grid;
    /* 🔴 TRES COLUMNAS TAMBIEN EN CELULAR. Con dos, los nueve sellos daban
       cinco filas y 700 px: la rejilla dejaba de leerse de un golpe, que es
       para lo unico que sirve. Con tres es un cuadrado 3x3 en cualquier
       anchura, que es como esta en la referencia. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    border-block-start: 1px solid var(--gf-linea);
    border-inline-start: 1px solid var(--gf-linea);
  }
  /* 🔴 TRES POR TRES, Y NUEVE SELLOS. Un cuadrado exacto: sin filas rotas,
     sin huecos y sin depender de que el ancho reparta bien. Si algún día hay
     más de nueve, la rejilla sigue funcionando —los filetes los pinta cada
     casilla— pero deja de ser un cuadrado. */

  /* La casilla: la figura arriba y el rotulo debajo, como en la referencia.
     En fila, diez iconos de 19 px eran diez motas; apilados se leen. */
  .gf-ev-se__g li {
    background: var(--gf-fondo);
    border-inline-end: 1px solid var(--gf-linea);
    border-block-end: 1px solid var(--gf-linea);
    padding: 15px 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    font: 600 9px/1.35 var(--gf-sans);
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--gf-tinta);
    /* La casilla sube a 140: tres filas dan 420 px, y ese es el alto que
       hereda la ilustracion de al lado. Igualando alturas con 106 la foto
       se quedaba en 319 y «mas grande» era solo mas ancha. */
    min-height: 108px;
  }
  .gf-ev-se__ico {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: var(--gf-oscuro);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  /* La barra del «sin» va mas fina y en ambar: niega sin tapar la figura. */
  .gf-ev-se__ico__tacha { stroke: var(--gf-ambar); stroke-width: 1.7; }
  /* Lo que el mapa no reconoce cae en el isotipo, nunca en un hueco. */
  .gf-ev-se__ico--marca {
    display: block;
    width: 24px;
    height: 24px;
    background: var(--gf-acento);
    -webkit-mask: var(--gaela-isotipo-src) center / contain no-repeat;
    mask: var(--gaela-isotipo-src) center / contain no-repeat;
  }
  /* Pendiente de certificado: la misma figura, sin peso. La diferencia entre
     «analizado» y «por analizar» tiene que verse sin leer. */

  /* Las reglas de `__cab`, `__firma`, `__foto` y `__nota` se fueron con su
     marcado (Regla 18): ya no hay cabecera, ni ilustracion, ni nota al pie.
     Estan en docs/archivo/2026-09-13-form-ejes/ por si vuelven. */
/* END_SECTION:gaela-ev-sellos */
/* START_SECTION:gaela-ev-tiempo (INDEX:33) */
/* Shopify envuelve cada bloque en `div.shopify-block`; se aparta del layout
     para que la rejilla y el carril sigan colocando por sus propias clases.
     ⚠️ `display:contents` cambia el LAYOUT, no el árbol que casan los
     selectores: cualquier regla de hijo directo sobre estas clases hay que
     escribirla por DESCENDENCIA. */
  .gf-ev-t__cab > .shopify-block,
  .gf-ev-t__g > .shopify-block,
  .gf-ev-linea > .shopify-block,
  .gf-riel > .shopify-block { display: contents; }

  .gf-ev-t { padding-block: clamp(48px, 7vw, 96px); }
  /* 🔴 LA CABECERA VA A LA IZQUIERDA, como todas las demás de la ficha.
     Centrada quedaba a medio camino: ni centrada de verdad —porque debajo la
     línea de tiempo arranca pegada al margen— ni alineada. Dos alineaciones
     distintas en la misma sección se leen como un descuadre, no como ritmo. */
  .gf-ev-t__cab { text-align: left; }
  .gf-ev-t__cab .gf-ev-enl-p { margin-block-start: 16px; }
  /* 🔴 `minmax(0, 1fr)` Y NO `1fr`. El carril de reels lleva
     `overflow-x:auto`, y dentro de una columna `auto` la pista se estira al
     ancho de SU CONTENIDO — cuatro reels, unos 660 px— y arrastra a toda la
     sección: en celular la caja de «cómo se toma» salía cortada por la
     derecha. Y no se veía como desborde porque `.gf` lleva `overflow-x:clip`,
     que **recorta en silencio en vez de dar scroll**. Medido a 390 px. */
  .gf-ev-t__g {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(26px, 3.4vw, 50px);
    margin-block-start: 40px;
    text-align: left;
  }
  @media (min-width: 960px) {
    .gf-ev-t__g { grid-template-columns: minmax(0, .92fr) minmax(0, 1fr); }
  }
  .gf-ev-linea { position: relative; padding-inline-start: 22px; }
  .gf-ev-linea::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: var(--gf-linea-fuerte);
  }
  .gf-ev-hito { position: relative; padding-block: 0 26px; }
  .gf-ev-hito::before {
    content: "";
    position: absolute;
    left: -26px;
    top: 9px;
    width: 9px;
    height: 9px;
    background: var(--gf-acento);
  }
  /* ══ EL ENCENDIDO ═══════════════════════════════════════════════════════
     El hito nace apagado y se enciende al entrar en pantalla. La clase la
     pone un observador; **el CSS no depende de JS para ser legible**: si el
     script no corre, `.gf-ev-linea` no recibe `--vivo` y todos los hitos se
     quedan encendidos. Nunca al revés (A-024: la visibilidad no se ata a
     nada que pueda fallar). */
  .gf-ev-linea--vivo .gf-ev-hito {
    opacity: .42;
    transform: translateY(9px);
    transition: opacity .62s ease, transform .62s cubic-bezier(.2, .7, .3, 1);
  }
  /* 🔴 LOS MESES LEJANOS TAMBIÉN SE ENCIENDEN. Antes se quedaban al 45 %
     pasara lo que pasara: parecían desactivados, no «aún lejos». Ahora todos
     nacen grises y todos llegan al 100 % cuando el scroll los alcanza —que
     es justo la idea de una línea de tiempo—, y lo lejano se dice donde
     toca: en la pÍLDORA y en el punto, no apagando el texto. */
  .gf-ev-linea--vivo .gf-ev-hito.gf-ev-hito--on { opacity: 1; transform: none; }

  /* 🔴 LA PÍLDORA NACE EN HUESO Y SE PONE VINO. Antes las dos primeras ya
     nacían en vino y sólo las «lejanas» estaban grises: eso no era una línea
     de tiempo encendiéndose, era una lista con dos elementos desactivados.
     La animación **es** el paso del tiempo, así que las cuatro parten igual. */
  .gf-ev-linea--vivo .gf-ev-hito__p {
    background: var(--gf-fondo);
    color: var(--gf-tenue);
    box-shadow: inset 0 0 0 1px var(--gf-linea-fuerte);
    transition: background .45s ease, color .45s ease, box-shadow .45s ease;
  }
  .gf-ev-linea--vivo .gf-ev-hito--on .gf-ev-hito__p {
    background: var(--gf-oscuro);
    color: var(--gf-claro);
    box-shadow: none;
  }

  /* Y el titular, de tenue a vino. */
  .gf-ev-linea--vivo .gf-ev-hito__h { color: var(--gf-tenue); transition: color .45s ease; }
  .gf-ev-linea--vivo .gf-ev-hito--on .gf-ev-hito__h { color: var(--gf-acento); }

  /* ══ EL CUADRADO QUE PALPITA ════════════════════════════════
     Apagado es gris y quieto. Encendido es vino y late —despacio, 2,6 s, sin
     moverse de su sitio—: es lo que dice que ese mes está vivo ahora mismo.
     El latido va con `transform`, que compone en GPU, y no con `box-shadow`
     animado, que obliga a repintar en cada fotograma. */
  .gf-ev-linea--vivo .gf-ev-hito::before {
    background: var(--gf-tenue);
    transition: background .45s ease;
  }
  .gf-ev-linea--vivo .gf-ev-hito--on::before {
    background: var(--gf-oscuro);
    animation: gf-ev-late 2.6s ease-in-out infinite;
  }
  @keyframes gf-ev-late {
    0%, 100% { transform: scale(1); }
    38%      { transform: scale(1.42); }
    62%      { transform: scale(1.06); }
  }

  /* ══ LOS DESTELLOS ══════════════════════════════════════════════════════
     🔴 SON ROMBOS, NO CÍRCULOS. La ficha va a cero radio (D-145) y el punto
     de la línea ya es un cuadrado: un destello redondo sería la única curva
     de la página. Se giran 45° y llevan DENTRO la misma tela holográfica de
     la marca —el cónico de `gaela-seda.css`, con sus mismos hex— para que el
     brillo sea el de GAELA y no un blanco cualquiera. */
  .gf-ev-chispas {
    position: absolute;
    left: -22px;
    top: 13px;
    width: 1px;
    height: 1px;
    pointer-events: none;
  }
  .gf-ev-chispas i {
    position: absolute;
    inset: 0;
    display: block;
    width: 7px;
    height: 7px;
    margin: -3.5px;
    opacity: 0;
    background: conic-gradient(from 206deg,
      #F7CEC4, #F2D1BE, #FBCADF, #E6C7EE, #CFE4E0, #EFD8B8, #F5D0C4, #F7CEC4);
  }
  /* Cada una sale por su lado y con su retraso: cuatro chispas idénticas y
     a la vez no se leen como chispas, se leen como un parpadeo. */
  .gf-ev-hito--on .gf-ev-chispas i:nth-child(1) { animation: gf-ev-chispa .78s ease-out both; --dx: -16px; --dy: -13px; }
  .gf-ev-hito--on .gf-ev-chispas i:nth-child(2) { animation: gf-ev-chispa .86s ease-out .06s both; --dx: 15px; --dy: -9px; }
  .gf-ev-hito--on .gf-ev-chispas i:nth-child(3) { animation: gf-ev-chispa .72s ease-out .12s both; --dx: -11px; --dy: 15px; }
  .gf-ev-hito--on .gf-ev-chispas i:nth-child(4) { animation: gf-ev-chispa .92s ease-out .04s both; --dx: 17px; --dy: 11px; }

  @keyframes gf-ev-chispa {
    0%   { opacity: 0; transform: translate(0, 0) rotate(45deg) scale(.2); }
    22%  { opacity: 1; transform: translate(calc(var(--dx) * .45), calc(var(--dy) * .45)) rotate(45deg) scale(1); }
    100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(140deg) scale(.35); }
  }

  /* El halo: un cuadrado girado que se abre desde el punto y se apaga. */
  .gf-ev-chispas::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 13px;
    height: 13px;
    margin: -6.5px;
    opacity: 0;
    background: conic-gradient(from 206deg,
      #F7CEC4, #FBCADF, #E6C7EE, #CFE4E0, #F5D0C4, #F7CEC4);
  }
  .gf-ev-hito--on .gf-ev-chispas::after { animation: gf-ev-halo .95s ease-out both; }
  @keyframes gf-ev-halo {
    0%   { opacity: .95; transform: rotate(45deg) scale(.3); }
    100% { opacity: 0; transform: rotate(45deg) scale(3.4); }
  }

  /* Regla 10: con movimiento reducido, el hito se enciende y ya. */
  @media (prefers-reduced-motion: reduce) {
    .gf-ev-linea--vivo .gf-ev-hito { transition: opacity .2s linear; transform: none; }
    .gf-ev-linea--vivo .gf-ev-hito.gf-ev-hito--on { transform: none; }
    .gf-ev-chispas { display: none; }
    .gf-ev-linea--vivo .gf-ev-hito--on::before { animation: none; }
  }

  /* Fuera de la línea viva —sin JS— lo lejano sigue atenuado, que es su
     lectura estática. Dentro, manda el encendido de arriba. */
  /* ⚠️ El campo `lejano` YA NO PINTA distinto: los cuatro hitos nacen igual
     de grises y se encienden igual. Sólo queda su lectura estática, para
     cuando no hay JS. El dato sigue guardado por si vuelve a hacer falta. */
  .gf-ev-hito--lejos { opacity: .45; }
  .gf-ev-linea--vivo .gf-ev-hito--lejos { opacity: 1; }
  .gf-ev-hito__t { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
  .gf-ev-hito__p {
    font: 600 9px/1 var(--gf-sans);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gf-claro);
    background: var(--gf-oscuro);
    padding: 6px 9px;
  }
  .gf-ev-hito__h { font-family: var(--gf-serif); font-size: 19px; color: var(--gf-acento); }
  .gf-ev-hito ul { margin: 10px 0 0; padding-inline-start: 18px; font-size: 13.5px; color: var(--gf-tenue); }
  .gf-ev-hito li { margin-block-end: 5px; }

  @media (max-width: 599px) {
    .gf-ev-toma { display: block; }
    .gf-ev-toma b { display: block; margin-block-end: 7px; }
  }
  .gf-ev-toma {
    display: flex;
    gap: 14px;
    align-items: baseline;
    flex-wrap: wrap;
    margin-block-start: 14px;
    border: 1px solid var(--gf-linea);
    padding: 14px;
    font-size: 13px;
    color: var(--gf-tenue);
  }
  .gf-ev-toma b {
    font: 600 9px/1 var(--gf-sans);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gf-tinta);
  }
/* END_SECTION:gaela-ev-tiempo */
/* START_BLOCK:gaela-ev-componente (INDEX:189) */
/* El envoltorio de cada hijo se aparta: lo que maqueta es el contenido. */
  .gf-ev-fila__c > .shopify-block { display: contents; }

  /* 🔴 HORIZON LE COME LOS MÁRGENES A TODO BLOQUE DE TEXTO, Y ES MUDO.
     `base.css` trae estas dos reglas, pensadas para que un texto no meta aire
     de más al principio ni al final de su contenedor:

       :first-child:is(p, h1…) { margin-block-start: 0 }
       :last-child:is(p, h1…)  { margin-block-end: 0 }

     Pero Shopify envuelve CADA bloque en su propio `div.shopify-block`, así
     que un párrafo que es un bloque es SIEMPRE hijo único: primero y último a
     la vez. Resultado: pierde los dos márgenes. Y no se nota como error —
     `margin: 0 0 14px` sigue ahí, la fuente y el ancho sí se aplican, sólo el
     margen sale a cero, porque `:last-child:is(p)` pesa (0,1,1) y una clase
     sola pesa (0,1,0)—.
     Medido: la sección pasó de 1.036 px a 1.008, exactamente los 14+14 del
     componente abierto.
     Se devuelve con DOS clases, que pesan (0,2,0) y ganan; y se respeta la
     intención original de Horizon dejando a cero el último de verdad. */
  .gf-ev-fila__c .gf-ev-fila__t,
  .gf-ev-fila__c .gf-ev-fila__niv { margin-block-end: 14px; }
  .gf-ev-fila__c .gf-ev-aviso { margin-block-end: 16px; }
  .gf-ev-fila__c > .shopify-block:last-child :is(.gf-ev-fila__t, .gf-ev-fila__niv, .gf-ev-aviso) {
    margin-block-end: 0;
  }
/* END_BLOCK:gaela-ev-componente */
/* START_BLOCK:gaela-ev-despiece (INDEX:192) */
/* El vídeo o la foto llenan la cápsula y se recortan con su forma: el radio
     y el `overflow:hidden` los pone `.gf-ev-diag__pieza`, que ya existía. */
  .gf-ev-diag__pieza video,
  .gf-ev-diag__pieza img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
/* END_BLOCK:gaela-ev-despiece */
/* START_BLOCK:gaela-ev-reel (INDEX:221) */
/* ⚠️ EN CELULAR EL CLAMP SE QUEDABA EN SU MÍNIMO: 17vw de 390 px son 66,
     así que los tres reels salían a 150 px — sellos de correos, no vídeo
     vertical. En celular mandan los porcentajes; el clamp vale de 760 arriba,
     donde el carril comparte fila con la línea de tiempo. */
  /* 🔴 EL RADIO VA EN EL CARRIL, NO EN CADA REEL. El carril pinta el color de
     la línea y cada reel lo tapa con su fondo dejando ver 1 px: así salen los
     filetes sin un solo `border`. Pero con esquinas redondeadas en cada reel,
     entre dos contiguos queda una cuña **y por ahí asoma el velo de vino del
     carril**, que se ve como una mancha gris. El mismo defecto que el usuario
     señaló en el pop-up. El carril ya recorta —tiene `overflow-x`—, así que
     basta con que los reels vayan rectos por dentro. */
  .gf-riel .gf-ev-reel { border-radius: 0; }

  .gf-ev-reel {
    flex: 0 0 68%;
    max-width: 300px;
    scroll-snap-align: start;
    background: var(--gf-fondo);
    padding: 11px;
  }
  .gf-ev-reel__c {
    position: relative;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    background: var(--gf-crema);
    display: flex;
    align-items: flex-end;
  }
  /* 🔴 EL MOLDE SE MARCA CON FILETE DISCONTINUO. Un hueco liso parece una
     foto que no cargó; discontinuo dice «aquí va a ir un clip». Desaparece
     en cuanto el bloque tiene vídeo o imagen. */
  .gf-ev-reel--molde .gf-ev-reel__c { box-shadow: inset 0 0 0 1px var(--gf-linea-fuerte); }
  .gf-ev-reel--molde .gf-ev-reel__c::after {
    content: "";
    position: absolute;
    inset: 7px;
    border: 1px dashed var(--gf-linea-fuerte);
    pointer-events: none;
  }
  .gf-ev-reel__v { width: 100%; height: 100%; object-fit: cover; display: block; }
  .gf-ev-reel__hueco {
    position: relative;
    z-index: 2;
    font: 600 9px/1.4 var(--gf-sans);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gf-tenue);
    background: var(--gf-fondo);
    padding: 9px 11px;
    margin: 14px;
  }
  .gf-ev-reel__p { margin: 10px 0 0; font-size: 12px; line-height: 1.45; color: var(--gf-tenue); }

  @media (min-width: 760px) {
    /* 🔴 EL RADIO VA EN EL CARRIL, NO EN CADA REEL. El carril pinta el color de
     la línea y cada reel lo tapa con su fondo dejando ver 1 px: así salen los
     filetes sin un solo `border`. Pero con esquinas redondeadas en cada reel,
     entre dos contiguos queda una cuña **y por ahí asoma el velo de vino del
     carril**, que se ve como una mancha gris. El mismo defecto que el usuario
     señaló en el pop-up. El carril ya recorta —tiene `overflow-x`—, así que
     basta con que los reels vayan rectos por dentro. */
  .gf-riel .gf-ev-reel { border-radius: 0; }

  .gf-ev-reel { flex-basis: clamp(150px, 17vw, 196px); max-width: none; }
  }
/* END_BLOCK:gaela-ev-reel */
/* START_BLOCK:gaela-ev-sello (INDEX:227) */
.gf-ev-se__p { display: contents; }
  /* El molde, ahora POR SELLO: antes era una clase en la `<section>`, así que
     o estaban los nueve pendientes o los nueve confirmados. Con el certificado
     de tres en la mano eso era mentira en las dos direcciones. */
  .gf-ev-se__p--molde .gf-ev-se__ico { stroke: var(--gf-linea-fuerte); }
  .gf-ev-se__p--molde .gf-ev-se__ico__tacha { stroke: var(--gf-linea-fuerte); }
  .gf-ev-se__p--molde .gf-ev-se__ico--marca { background: var(--gf-linea-fuerte); }
  .gf-ev-se__p--molde > span { color: var(--gf-tenue); }
/* END_BLOCK:gaela-ev-sello */
/* START_BLOCK:gaela-ev-texto (INDEX:238) */
/* Sólo la separación: el aspecto lo ponen las clases del panel. */
  .gf-ev-txt { margin-block-start: 14px; }

  /* 🔴 LA NOTA ES LETRA MENUDA, NO OTRA FRASE. Con el tamaño y el color de la
     garantía —11,5 px y la misma tinta— las dos líneas se leían como dos
     afirmaciones del mismo peso, y una es la promesa y la otra su pie.
     Baja un punto, adelgaza a `300` —que la pila del sistema sí tiene: Segoe
     UI Light en Windows, SF Light en iOS— y se **pega** a la de arriba: 8 px
     en vez de 12, porque pertenece a ella.
     ⚠️ Gana por especificidad: (0,2,0) contra el (0,1,0) de `__gar` a secas,
     así que la garantía de verdad no se entera. El color NO se toca: bajarlo
     más rompería el contraste, que la ficha tiene medido. */
  .gf-ev-panel__gar.gf-ev-txt {
    margin-block-start: 8px;
    font-size: 10.5px;
    font-weight: 300;
  }
  .gf-ev-txt--h2 { font-size: 20px; }
  /* Un párrafo de texto enriquecido trae sus propios `<p>`: se les quita el
     margen de arriba al primero para que no doble la separación. */
  .gf-ev-txt > p:first-child { margin-block-start: 0; }
  .gf-ev-txt > p:last-child { margin-block-end: 0; }
/* END_BLOCK:gaela-ev-texto */
/* START_SNIPPET:card-hover-effect-styles (INDEX:312) */
.product-card:hover,
  .collection-card:hover,
  .predictive-search-results__card:hover {
    z-index: var(--layer-raised);
  }
/* END_SNIPPET:card-hover-effect-styles */
/* START_SNIPPET:cart-drawer (INDEX:315) */
cart-drawer-component {
    --cart-drawer-padding: var(--theme-drawer-padding);
    --font-paragraph--line-height: 1;
    display: contents;
  }

  .cart-drawer__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
  }

  .cart-drawer__inner > .cart-items-component {
    flex: 1;
    min-height: 0;
    height: auto;
  }

  .cart-drawer__content {
    display: flex;
    flex-direction: column;
    padding: 0;
    background-color: var(--color-background);
    flex-grow: 1;
    overflow-y: auto;
  }

  .cart-drawer__items {
    display: flex;
    flex-direction: column;
    padding-inline: var(--cart-drawer-padding);
    overflow-y: auto;
  }

  .cart-drawer__items .cart-items__table-row {
    padding-bottom: var(--gap-xl);
    border-bottom: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    margin-bottom: var(--gap-xl);
  }

  .cart-drawer__items .cart-items__table-row:has(+ .cart-items__nested-line) {
    border-bottom: none;
    margin-bottom: 0;
  }

  .cart-drawer__items .cart-items__table-row:last-child {
    border-bottom: none;
    padding-block-end: 0;
    margin-block-end: 0;
  }

  .cart-drawer__close-button--empty {
    margin-inline-start: auto;
  }

  .cart-drawer__summary {
    --cart-drawer-summary-padding: var(--padding-lg);

    position: sticky;
    bottom: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-xl);
    padding: var(--cart-drawer-summary-padding);
    margin-top: auto;
    background-color: var(--color-background);
    /* stylelint-disable-next-line color-named */
    mask-image: linear-gradient(to bottom, transparent, black var(--cart-drawer-summary-padding));

    @media screen and (min-width: 750px) {
      --cart-drawer-summary-padding: var(--padding-2xl);
    }
  }

  .theme-drawer__dialog[cart-summary-sticky='false'] .cart-drawer__summary {
    position: static;
    mask-image: none;
  }

  .theme-drawer__dialog[cart-summary-sticky='false'] .cart-drawer__items {
    overflow: unset;
  }

  .cart-actions summary {
    padding-inline: 0;
    padding-block: var(--padding-sm);
    line-height: 1.2;
    min-height: var(--minimum-touch-target);
  }

  .cart-drawer__summary .cart__summary-totals:not(:has(.cart__subtotal-container:empty)) {
    border-block-start: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    padding-block-start: var(--padding-2xl);
  }

  .cart-drawer__summary .cart-note {
    @media screen and (min-width: 750px) {
      margin-block-start: var(--margin-3xs);
    }
  }

  .cart-drawer--empty .cart-drawer__content {
    text-align: center;
    align-items: center;
    justify-content: center;
    min-height: auto;
  }

  .cart-drawer--empty .cart-drawer__items {
    padding-inline: 0;
  }

  cart-drawer-component:not(:has(.cart-form)) .cart-drawer__content {
    text-align: center;
    align-items: center;
    justify-content: center;
  }

  cart-drawer-component:not(:has(.cart-form)) .cart-drawer__items {
    padding-inline: 0;
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    html:active-view-transition-type(empty-cart-drawer) {
      .theme-drawer__close-button {
        view-transition-name: cart-drawer-close-button;
      }
    }
  }

  :active-view-transition {
    .cart-drawer__header,
    .cart-drawer__content {
      background: transparent;
    }
  }
/* END_SNIPPET:cart-drawer */
/* START_SNIPPET:cart-items-component (INDEX:316) */
.cart-items-component {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    html:active-view-transition-type(empty-cart-drawer),
    html:active-view-transition-type(fill-cart-drawer) {
      .cart-items-component {
        view-transition-name: cart-drawer-content;
      }
    }

    html:active-view-transition-type(empty-cart-page) {
      .cart-items-component {
        view-transition-name: cart-page-content;
      }
    }
  }

  ::view-transition-old(cart-page-content) {
    animation: cart-page-content-old var(--animation-speed-fast) var(--animation-easing) forwards;
  }

  @keyframes cart-page-content-old {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
      filter: blur(4px);
    }
  }

  ::view-transition-old(cart-drawer-content) {
    transform-origin: 50% 33%;
    animation: cart-contents-old var(--spring-d280-b0-duration) var(--spring-d280-b0-easing) forwards;
  }

  ::view-transition-new(cart-drawer-content) {
    transform-origin: top center;
    animation: cart-contents-new var(--spring-d280-b0-duration) var(--spring-d280-b0-easing) forwards;
  }

  @keyframes cart-contents-old {
    to {
      scale: 0.92;
      opacity: 0;
    }
  }

  @keyframes cart-contents-new {
    from {
      scale: 1.05;
      translate: 0 128px;
      filter: blur(1px);
      opacity: 0;
    }
  }
/* END_SNIPPET:cart-items-component */
/* START_SNIPPET:cart-products (INDEX:317) */
.cart-items {
    --cart-item-media-width-min: 2.5rem;
    --cart-item-media-width-max: 7.5rem;

    container-name: cart-items;
    container-type: inline-size;
    width: 100%;
  }

  .cart-items-disabled {
    pointer-events: none;
  }

  .cart-items__wrapper {
    display: flex;
    flex-direction: column;
  }

  .cart-page--empty .cart-items__wrapper {
    align-items: center;
    margin-block-start: 0;
    text-align: center;
  }

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

  .cart-items__table {
    width: 100%;
    border-spacing: 0;
  }

  .cart-items__table * {
    margin: 0;
  }

  .cart-items__table-row {
    --cart-item-price-width: 6rem;

    display: grid;
    grid-template-columns: clamp(2.5rem, 15cqi, 7.5rem) minmax(0, 1fr) minmax(var(--cart-item-price-width), auto);
    grid-template-areas:
      'media details price'
      'media quantity price'
      'media error error';
    column-gap: var(--gap-md);
    align-items: start;
    padding-bottom: var(--cart-items-gap);
    margin-bottom: var(--margin-lg);
  }

  .cart-items__details {
    grid-area: details;
    min-width: 0;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
  }

  .cart-items__product-info {
    min-width: 0;
  }

  /* Cart drawer: separate grid areas for variants and unit price */
  .cart-items__table-row--full-width-variants {
    grid-template-columns: clamp(2.5rem, 15cqi, 7.5rem) minmax(0, 1fr) auto;
    grid-template-rows: repeat(4, min-content) 1fr;
    grid-template-areas:
      'media details price'
      'media variants variants'
      'media unit_price unit_price'
      'media quantity quantity'
      'media error error';

    .cart-items__details {
      display: contents;
    }

    .cart-items__product-info {
      grid-area: details;
    }

    .cart-items__variants-wrapper {
      grid-area: variants;

      &:empty {
        display: none;
      }

      p {
        margin: 0;
      }
    }

    .cart-items__unit-price-wrapper {
      grid-area: unit_price;
      font-size: var(--font-size--sm);
    }

    .cart-items__price {
      min-width: auto;
      width: max-content;
    }
  }

  .cart-items__table-row.cart-items__nested-line td:first-child {
    width: 60%;
    justify-self: right;
  }

  html:active-view-transition-type(page-navigation) .cart-items__table-row {
    /* stylelint-disable-next-line declaration-no-important */
    view-transition-name: none !important;
  }

  .cart-items__table-row.removing {
    overflow: hidden;
    animation: removeRow calc(var(--animation-speed) * 2) var(--animation-easing) forwards;
    animation-delay: var(--animation-speed);
  }

  @keyframes removeRow {
    0% {
      height: var(--row-height);
    }

    100% {
      opacity: 0;
      height: 0;
      padding-bottom: 0;
      margin-bottom: 0;
      border-color: transparent;
    }
  }

  .cart-items__table-row.adding {
    interpolate-size: allow-keywords;
    overflow: hidden;
    animation: addRow calc(var(--animation-speed) * 2) var(--animation-easing) forwards;
  }

  @keyframes addRow {
    0% {
      opacity: 0;
      height: 0;
      padding-bottom: 0;
      margin-bottom: 0;
      border-color: transparent;
    }

    100% {
      opacity: 1;
      height: auto;
    }
  }

  .cart-items__table-row:last-child {
    padding-bottom: 0;
  }

  .cart-items--dividers .cart-items__table-row {
    border-bottom: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    margin-bottom: var(--cart-items-gap);
  }

  .cart-items--dividers .cart-items__table-row:has(+ .cart-items__nested-line) {
    border-bottom: none;
    margin-bottom: 0;
  }

  .cart-items--dividers .cart-items__table-row:last-of-type {
    border-block-end: none;
    padding-block-end: 0;
    margin-bottom: 0;
  }

  .cart-items__details > * + *,
  .cart-items__bundle li {
    margin-block-start: var(--margin-3xs);
  }

  .cart-items__details * {
    font-size: var(--font-size--sm);
  }

  .cart-items__details a {
    text-decoration: none;
  }

  .cart-items__title-row {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
    max-width: 100%;
    min-width: 0;
  }

  .cart-items__title {
    font-size: var(--font-size--md);
    color: var(--color-foreground);
    text-transform: var(--product-title-case);
    display: block;
    margin-block-start: 0;
    min-width: 0;
    overflow-wrap: break-word;
  }

  .cart-items__variants {
    display: block;
  }

  .cart-items__variant {
    display: inline;
  }

  .cart-items__variant dt,
  .cart-items__variant dd {
    display: inline;
    margin: 0;
  }

  .cart-items__quantity {
    grid-area: quantity;
    margin-block-start: var(--margin-xs);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap-xs);
    width: fit-content;
  }

  .cart-items__quantity-controls {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap-xs);
    width: fit-content;
  }

  .cart-items__quantity-controls > .volume-pricing-info {
    margin-inline-start: calc(-1 * var(--minimum-touch-target) - var(--gap-xs));
  }

  .cart-items__quantity .quantity-selector {
    display: inline-flex;
    font-size: var(--font-size--sm);
    height: auto;
  }

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

  .cart-items__media {
    grid-area: media;
    padding: 0;
  }

  .cart-items__price {
    grid-area: price;
    min-height: unset;
    min-width: var(--cart-item-price-width);
    text-align: end;
    display: block;
    font-size: var(--font-size--sm);
    line-height: var(--line-height);
  }

  .cart-items__price-unit {
    font-size: var(--font-size--xs);
    padding-block-start: var(--padding-2xs);
  }

  .cart-items__media-container {
    display: flex;
    aspect-ratio: var(--ratio);
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  .cart-items__media-image {
    aspect-ratio: inherit;
    object-fit: cover;
    object-position: center center;
    width: 100%;
    height: auto;
  }

  .cart-items__empty-button {
    margin-top: var(--margin-md);
    margin-inline: auto;
    padding-inline: var(--padding-4xl);
    padding-block: var(--padding-lg);
  }

  /* Error message */
  .cart-items__error {
    display: flex;
    align-items: flex-start;
    width: 100%;
    grid-area: error;
    margin-block-start: var(--margin-xs);
    opacity: 1;
    overflow: hidden;
    transform: translateY(0);
    transition: opacity var(--drawer-animation-speed) var(--animation-easing),
      transform var(--drawer-animation-speed) var(--animation-easing);

    @starting-style {
      opacity: 0;
      transform: translateY(-0.5rem);
    }
  }

  .cart-item__error {
    display: flex;
    align-items: flex-start;
    width: 100%;
    font-size: var(--font-size--sm);
    padding-block: var(--padding-2xs);
  }

  .cart-item__error .svg-wrapper {
    flex-shrink: 0;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    margin-inline: var(--margin-3xs) var(--margin-xs);
    margin-block-start: var(--margin-3xs);
  }

  @container cart-items (min-width: 720px) {
    /* Cart page: original layout */
    .cart-items__table-row {
      --cart-item-price-width: 6rem;

      grid-template-columns: 7.5rem 1fr 1fr minmax(var(--cart-item-price-width), auto);
      grid-template-rows: min-content 1fr;
      grid-template-areas:
        'media details quantity price'
        'media details error error';
    }

    .cart-items__quantity,
    .cart-items__price {
      grid-area: initial;
    }

    .cart-items__quantity {
      margin-top: 0;
    }

    .cart-items__price {
      min-height: var(--minimum-touch-target);
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }

    /* Cart drawer: separate areas for variants and unit price */
    .cart-items__table-row--full-width-variants {
      grid-template-rows: min-content min-content min-content 1fr;
      grid-template-areas:
        'media details quantity price'
        'media variants variants variants'
        'media unit_price unit_price unit_price'
        'media error error error';

      .cart-items__quantity,
      .cart-items__price {
        grid-area: initial;
      }
    }
  }

  .cart__subtotal-container,
  .cart__total-container {
    display: flex;
    flex-direction: column;
  }

  .cart__total-container {
    row-gap: var(--gap-2xs);

    &.cart__total-container--has-installments {
      row-gap: var(--gap-xs);
    }
  }

  .cart__subtotal-container:empty {
    display: none;
  }

  .cart__summary-totals {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    width: 100%;
    border-block-start: none;

    &:has(> :first-child:not(.cart__subtotal-container, .cart__total-container)) {
      padding-block-start: 0;
      border-block-start: none;
    }

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

  .cart__subtotal-container,
  .cart__subtotal-container * {
    font-size: var(--font-size--sm);
  }

  .cart__total {
    font-weight: var(--font-weight-bold);
  }

  .cart__total-label {
    font-size: var(--font-size--sm);
  }

  .cart__total-value {
    font-size: var(--font-size--xl);

    @media screen and (max-width: 749px) {
      font-size: var(--font-size--lg);
    }
  }

  .cart__ctas {
    width: 100%;
    display: grid;
    gap: var(--checkout-button-gap);
    grid-auto-flow: row;
    grid-template-columns: 1fr;
  }

  .cart__additional-checkout-buttons {
    width: 100%;
  }

  shopify-accelerated-checkout-cart {
    --shopify-accelerated-checkout-inline-alignment: center;
    --shopify-accelerated-checkout-button-border-radius: var(--style-border-radius-buttons-primary);
    --shopify-accelerated-checkout-button-block-size: var(--height-buy-buttons);
    --shopify-accelerated-checkout-row-gap: var(--checkout-button-gap, 10px);
  }

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

  .cart-items__remove:hover .remove-icon-top {
    transform: translate(calc(-1 * var(--icon-stroke-width)), var(--icon-stroke-width)) rotate(-15deg);
  }

  .cart-items__remove:is(:hover, :active) .remove-icon-bottom {
    transform: translateY(var(--icon-stroke-width));
  }

  .cart-items__table-row.removing .remove-icon-bottom {
    transform: translateY(0);
  }

  .cart-items__table-row.removing .remove-icon-top {
    animation: removeButtonClickedIconTop var(--animation-speed) var(--animation-easing) forwards;
  }

  @keyframes removeButtonClickedIconTop {
    50% {
      transform: translate(0, calc(-1 * var(--icon-stroke-width)));
    }

    100% {
      transform: translate(0, 0);
    }
  }

  .cart-items__properties {
    display: block;
    margin-block-start: var(--margin-2xs);
  }

  .cart-items__property {
    display: block;
  }

  .cart-items__properties dt,
  .cart-items__properties dd {
    display: inline;
    margin: 0;
    overflow-wrap: break-word;
  }

  @media screen and (min-width: 750px) {
    .cart-items .quantity-selector {
      --quantity-selector-width: 105px;
      height: var(--button-size-md);
      width: var(--quantity-selector-width);
    }

    .cart-items .quantity-selector button {
      width: var(--button-size-md);
      height: var(--button-size-md);
    }

    .cart-items .quantity-selector input {
      max-width: calc(var(--quantity-selector-width) - var(--button-size-md) * 2);
    }
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    html:active-view-transition-type(empty-cart-drawer) {
      .cart-items__empty-button,
      .cart__checkout-button {
        view-transition-name: cart-drawer-primary-action;

        & > .button-text {
          view-transition-name: cart-drawer-primary-action-text;
        }
      }
    }
  }

  ::view-transition-old(cart-drawer-primary-action-text),
  ::view-transition-new(cart-drawer-primary-action-text) {
    height: 100%;
    object-fit: none;
    overflow: clip;
    overflow-clip-margin: 1em;
  }

  ::view-transition-old(cart-drawer-primary-action-text) {
    animation: cart-drawer-primary-action-text var(--animation-speed) var(--animation-easing) reverse forwards;
  }
  ::view-transition-new(cart-drawer-primary-action-text) {
    animation: cart-drawer-primary-action-text var(--animation-speed) var(--animation-easing) forwards;
  }

  ::view-transition-old(cart-drawer-primary-action),
  ::view-transition-new(cart-drawer-primary-action) {
    height: 100%;
  }

  ::view-transition-group(cart-drawer-primary-action-text),
  ::view-transition-group(cart-drawer-primary-action) {
    animation-duration: var(--spring-d300-b0-duration);
    animation-timing-function: var(--spring-d300-b0-easing);
  }

  @keyframes cart-drawer-primary-action-text {
    from {
      filter: blur(3px);
      opacity: 0;
    }
    to {
      filter: none;
      opacity: 1;
    }
  }
/* END_SNIPPET:cart-products */
/* START_SNIPPET:cart-typography-styles (INDEX:319) */
.cart-primary-typography {
    font-family: var(--cart-primary-font-family);
    font-style: var(--cart-primary-font-style);
    font-weight: var(--cart-primary-font-weight);
  }

  .cart-secondary-typography {
    font-family: var(--cart-secondary-font-family);
    font-style: var(--cart-secondary-font-style);
    font-weight: var(--cart-secondary-font-weight);
  }
/* END_SNIPPET:cart-typography-styles */
/* START_SNIPPET:chat-drawer (INDEX:320) */
/* Pin the chat's mobile/desktop boundary so the theme and the chat agree
     on where standalone mode kicks in. Must stay in sync with the @media
     query below — @shopify/storefront-components reads this value once at
     init and uses it to decide when to force standalone mode. */
  shopify-chat {
    --shopify-chat-breakpoint: 768px;
  }

  shopify-chat[mode='managed'] {
    position: static;
    height: 100%;
  }

  .theme-drawer__dialog:has(shopify-chat[mode='standalone'][open]) {
    z-index: calc(var(--layer-menu-drawer) + 1);
  }

  /* Keep the panel rendered while closed so <shopify-chat>'s position-fixed
     "Ask anything" launcher stays visible. */
  .theme-drawer__dialog.chat-drawer:has(shopify-chat:defined) {
    display: flex;
  }
/* END_SNIPPET:chat-drawer */
/* START_SNIPPET:dialog-styles (INDEX:329) */
.dialog-modal {
    border: none;
    box-shadow: var(--shadow-popover);

    @media screen and (min-width: 750px) {
      border-radius: var(--style-border-radius-popover);
      max-width: var(--normal-content-width);
    }

    @media screen and (max-width: 749px) {
      max-width: 100%;
      max-height: 100%;
      height: 100dvh;
      width: 100dvw;
      padding: var(--padding-md);
    }
  }

  .dialog-modal::backdrop {
    transition: backdrop-filter var(--animation-speed) var(--animation-easing);
    backdrop-filter: brightness(1);
    background: rgb(var(--backdrop-color-rgb) / var(--backdrop-opacity));
  }

  :where(.dialog-modal)[open] {
    animation: elementSlideInTop var(--animation-speed) var(--animation-easing) forwards;

    &::backdrop {
      animation: backdropFilter var(--animation-speed) var(--animation-easing) forwards;
      transition: opacity var(--animation-speed) var(--animation-easing);
    }
  }

  :where(.dialog-modal).dialog-closing {
    animation: elementSlideOutTop var(--animation-speed) var(--animation-easing) forwards;

    &::backdrop {
      opacity: 0;
    }
  }

  /* stylelint-disable value-keyword-case */
  .dialog-drawer {
    --dialog-drawer-opening-animation: move-and-fade;
    --dialog-drawer-closing-animation: move-and-fade;
  }
  /* stylelint-enable value-keyword-case */

  .dialog-drawer[open] {
    --start-x: var(--custom-transform-from, 100%);
    --end-x: var(--custom-transform-to, 0px);
    --start-opacity: 1;

    animation: var(--dialog-drawer-opening-animation) var(--animation-speed) var(--animation-easing) forwards;
  }

  .dialog-drawer[open].dialog-closing {
    --start-x: 0px;
    --end-x: 100%;
    --start-opacity: 1;
    --end-opacity: 1;

    animation: var(--dialog-drawer-closing-animation) var(--animation-speed) var(--animation-easing);
  }
/* END_SNIPPET:dialog-styles */
/* START_SNIPPET:payment-terms-styles (INDEX:392) */
form.payment-terms {
    padding-top: 0.5em;
    font-size: min(0.85em, var(--font-paragraph--size));
    font-weight: var(--font-paragraph--weight);
    color: var(--color, rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text)));
  }

  .installments:not(:has(shopify-payment-terms)) {
    display: none;
  }
/* END_SNIPPET:payment-terms-styles */
/* START_SNIPPET:pills-styles (INDEX:393) */
/* Pills (used in facets and predictive search) */

  .pills__pill {
    --pills-pill-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5-15));

    color: var(--color-foreground);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--gap-sm);
    min-width: 48px;
    padding: 6px 12px;
    border-radius: var(--style-border-radius-pills);
    cursor: pointer;
    background-color: var(--pills-pill-background-color);
    transition: background-color var(--animation-speed) var(--animation-easing);

    &:hover {
      --pills-pill-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    }

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

  .pills__pill > .svg-wrapper {
    --close-icon-opacity: 0.4;
    --icon-stroke-width: 1px;

    color: var(--color-foreground);
  }

  .pills__pill--swatch {
    @media screen and (max-width: 749px) {
      padding-inline-start: var(--padding-sm);
    }
  }

  .pills__pill--swatch .swatch {
    margin-right: -4px;
  }

  .pills__pill--desktop-small {
    @media screen and (min-width: 750px) {
      font-size: var(--font-size--xs);
    }
  }
/* END_SNIPPET:pills-styles */
/* START_SNIPPET:predictive-search-styles (INDEX:397) */
/* Shared predictive search styles (used by both predictive-search and predictive-search-empty sections) */
  .predictive-search-dropdown {
    display: flex;
    flex-direction: column;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--layer-base);
  }

  .predictive-search-results__inner {
    flex-grow: 1;
    overflow-y: auto;
    padding-block: var(--padding-lg);
    container-type: inline-size;
    color: var(--color-foreground);
  }

  .predictive-search-results__title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size--body-md);
    font-weight: 500;
    margin-block: var(--margin-sm) var(--margin-xs);
    width: 100%;
    text-transform: var(--title-case);

    &:first-of-type {
      margin-block-start: 0;
    }

    @media screen and (max-width: 749px) {
      margin-block: var(--margin-lg) var(--margin-sm);
    }
  }

  .predictive-search-results__no-results {
    animation-delay: 100ms;
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-in);
  }

  .predictive-search-results__no-results:last-child {
    margin-block: var(--margin-lg);
    text-align: center;
  }

  /* Predictive search section styles */
  input[type='search']::-webkit-search-decoration {
    -webkit-appearance: none; /* stylelint-disable-line */
  }

  .search-action .predictive-search {
    z-index: calc(var(--layer-header-menu) + 2);
  }

  .search-action .search-modal .predictive-search {
    z-index: var(--layer-window-overlay);
  }

  .header__column--right .predictive-search-form__content-wrapper {
    right: 0;
    left: unset;
  }

  .search-modal .predictive-search-form__content-wrapper {
    width: 100%;

    @media screen and (min-width: 750px) {
      height: fit-content;
    }
  }
  .dialog-modal .predictive-search-form__header-inner {
    @media screen and (min-width: 750px) {
      border: 0;
    }
  }

  .search-modal__content .predictive-search-form__content {
    max-height: var(--modal-max-height);
  }

  .predictive-search:has(.predictive-search-dropdown) .search-input {
    outline-color: transparent;
  }

  .predictive-search:has(.predictive-search-dropdown) .predictive-search-form__header-inner:focus-within {
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;

    @media screen and (max-width: 749px) {
      border-bottom-color: transparent;
    }
  }

  .predictive-search:has(.predictive-search-dropdown[aria-expanded='true'])
    .predictive-search-form__header-inner:focus-within {
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;
    border-radius: var(--search-border-radius);

    @media screen and (max-width: 749px) {
      border-radius: var(--style-border-radius-inputs);
    }
  }

  .dialog-modal .predictive-search-form__header {
    border: 0;
    border-radius: 0;
    background-color: var(--color-background);
    border-bottom: var(--style-border-width) solid var(--color-border);

    @media screen and (min-width: 750px) {
      padding: var(--padding-2xs) var(--padding-2xs) 0;
      border-bottom: var(--search-border-width) solid var(--color-border);
    }

    @media screen and (max-width: 749px) {
      transition: box-shadow 0.2s ease;
      box-shadow: none;
    }
  }

  .search-action .predictive-search:has(.predictive-search-dropdown) .predictive-search-form__header:focus-within {
    border-radius: var(--search-border-radius) var(--search-border-radius) 0 0;
    transition: box-shadow var(--animation-speed) var(--animation-easing);
    background-color: var(--color-background);

    @media screen and (max-width: 749px) {
      border-radius: var(--style-border-radius-inputs) var(--style-border-radius-inputs) 0 0;
    }
  }

  @media screen and (max-width: 749px) {
    .dialog-modal .predictive-search__close-modal-button {
      padding-inline-start: var(--margin-xs);
      margin-inline-start: 0;
    }
  }

  .dialog-modal[open] {
    @media screen and (max-width: 749px) {
      border-radius: 0;
    }
  }

  .dialog-modal .predictive-search-form__header:has(.predictive-search-form__header-inner:focus-within) {
    @media screen and (min-width: 750px) {
      border-bottom-color: transparent;
    }
  }

  @media screen and (max-width: 749px) {
    .dialog-modal {
      .predictive-search__reset-button-icon {
        display: none;
      }

      .predictive-search__reset-button-text {
        display: block;
      }

      .predictive-search-form__content {
        /* The parent has overflow auto, we want to prevent a double scrollbar during animation */
        max-height: 100%;
      }

      .predictive-search-form__content-wrapper {
        box-shadow: none;
      }

      .predictive-search-form__header {
        box-shadow: none;
      }

      .predictive-search-form__footer {
        padding-block: var(--padding-2xl);
      }
    }
  }

  .predictive-search-results__pill {
    font-weight: 500;
    white-space: nowrap;
    color: var(--color-foreground);
    transition: background-color var(--animation-speed-medium) var(--animation-timing-hover),
      box-shadow var(--animation-speed-medium) var(--animation-timing-bounce),
      transform var(--animation-speed-medium) var(--animation-timing-bounce);
    margin: 2px;

    &:hover {
      transform: scale(1.03);
      box-shadow: 0 2px 5px rgb(0 0 0 / var(--opacity-8));
    }
  }

  .predictive-search-results__pill mark {
    background-color: transparent;
    font-weight: 200;
    color: var(--color-foreground-subdued);
  }

  .predictive-search-results__pill:focus,
  .predictive-search-results__pill:hover,
  .predictive-search-results__card--query:is([aria-selected='true'], :focus-within) .predictive-search-results__pill {
    --pill-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));

    background-color: var(--pill-background-color);
    outline: var(--border-width-sm) solid var(--color-border);
    border: var(--border-width-sm);
    text-decoration: none;
  }

  .predictive-search-results__wrapper.predictive-search-results__wrapper-queries {
    margin-bottom: var(--margin-lg);
    padding-inline: var(--padding-xl);
    gap: var(--gap-2xs);
  }

  .predictive-search-results__card {
    --title-font-size: var(--font-size--md);
    --title-margin-block: var(--margin-xs);

    flex: 0 0 auto;
    scroll-snap-align: start;
    scroll-margin-block: calc(var(--title-font-size) + var(--title-margin-block) + var(--padding-sm))
      calc(var(--padding-xl) + var(--button-padding-block) * 2);
    transition: transform var(--animation-speed-medium) var(--animation-timing-default),
      background-color var(--animation-speed-medium) var(--animation-timing-hover),
      border-color var(--animation-speed-medium) var(--animation-timing-hover);

    &:nth-last-child(3) {
      scroll-snap-align: end;
    }

    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
    }
  }

  .recently-viewed-wrapper .predictive-search-results__card {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .recently-viewed-wrapper.removing .predictive-search-results__card {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
  }

  .predictive-search-results__card--product,
  .recently-viewed-wrapper .predictive-search-results__card--product {
    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
    }

    &:hover {
      background-color: var(--card-bg-hover);
      border-radius: var(--product-corner-radius);
      padding: calc(var(--padding-2xs) + 2px);
      margin: calc((var(--padding-2xs) + 2px) * -1);
    }

    &:is([aria-selected='true'].keyboard-focus, &:focus-visible, &:has(.resource-card:focus-visible)) {
      background-color: var(--card-bg-hover);
      padding: calc(var(--padding-2xs) + 1px);
      margin: calc((var(--padding-2xs) + 1px) * -1);
      outline: var(--border-width-sm) solid var(--color-border);
      border-radius: calc(var(--product-corner-radius) + 1px);
      border-color: var(--card-border-focus);
    }
  }

  .predictive-search-results__card:not(.predictive-search-results__card--product) {
    padding: var(--padding-sm);
    border: var(--border-width-sm) solid var(--color-border);
    border-radius: var(--card-corner-radius);
    width: 60cqi;
    content-visibility: visible;

    @media screen and (min-width: 750px) {
      width: 27.5cqi;
    }

    &:hover {
      border-color: var(--card-border-hover);
      background-color: var(--card-bg-hover);
    }

    &[aria-selected='true'].keyboard-focus {
      border-color: var(--card-border-hover);
      background-color: var(--card-bg-hover);
    }

    &:active {
      transform: scale(0.97);
      transition: transform var(--animation-speed-medium) var(--animation-timing-active);
    }
  }

  @keyframes search-element-scale-in {
    0% {
      transform: scale(0.95);
      opacity: 0;
    }

    40% {
      opacity: 1;
    }

    100% {
      transform: scale(1);
      opacity: 1;
    }
  }

  @keyframes search-element-scale-out {
    0% {
      transform: scale(1);
      opacity: 1;
    }

    100% {
      transform: scale(0.95);
      opacity: 0;
    }
  }

  @keyframes search-element-slide-in-top {
    from {
      margin-top: calc(var(--modal-top-margin) + var(--padding-sm));
      opacity: 0;
    }

    to {
      margin-top: var(--modal-top-margin);
      opacity: 1;
    }
  }

  @keyframes search-element-slide-out-top {
    from {
      margin-top: var(--modal-top-margin);
      opacity: 1;
    }

    to {
      margin-top: calc(var(--modal-top-margin) + var(--padding-sm));
      opacity: 0;
    }
  }

  @keyframes content-slide {
    from {
      transform: translateY(var(--slide-from, 0));
      opacity: var(--slide-opacity-from, 1);
    }

    to {
      transform: translateY(var(--slide-to, 0));
      opacity: var(--slide-opacity-to, 1);
    }
  }

  .predictive-search-results__list {
    --slide-width: 27.5%;
    --slideshow-gap: var(--gap-md);

    /* Make space for the outline to be visible */
    padding-block-start: var(--border-width-sm);
  }

  .predictive-search-results__list slideshow-arrows {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .predictive-search-results__no-results,
  .predictive-search-results__wrapper,
  .predictive-search-results__wrapper-products .predictive-search-results__card {
    animation: search-element-slide-up var(--animation-speed-medium) var(--animation-timing-bounce) backwards;
  }

  slideshow-slide .resource-card {
    /* stylelint-disable-next-line declaration-no-important */
    animation-delay: 0ms !important;
  }

  .predictive-search-results__list,
  .predictive-search-results__wrapper {
    animation-duration: var(--animation-speed-medium);
  }

  .predictive-search-results__wrapper-queries {
    animation-delay: 50ms;
  }

  .predictive-search-results__list:nth-of-type(2) {
    animation-delay: 150ms;
  }

  .predictive-search-results__list:nth-of-type(3) {
    animation-delay: 200ms;
  }

  .predictive-search-results__list:nth-of-type(4) {
    animation-delay: 250ms;
  }

  .predictive-search-results__list:last-child {
    margin-block-end: 0;
  }

  [data-resource-type] {
    /* stylelint-disable-next-line declaration-no-important */
    animation-delay: 0ms !important;
  }

  .predictive-search-results__no-results.removing,
  .predictive-search-results__wrapper.removing {
    animation: search-element-slide-down var(--animation-speed-medium) var(--animation-timing-fade-out) forwards;
  }

  .predictive-search-results__card.removing {
    animation: fadeOut var(--animation-speed-medium) var(--animation-timing-fade-out) forwards;
  }

  .predictive-search-results__wrapper {
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-in);
  }

  @keyframes search-element-slide-up {
    from {
      opacity: 0;
      transform: translateY(8px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes search-element-slide-down {
    from {
      opacity: 1;
      transform: translateY(0);
    }

    to {
      opacity: 0;
      transform: translateY(8px);
    }
  }

  .predictive-search-results__card--query {
    transition: transform var(--animation-speed-medium) var(--animation-timing-bounce);
    transform-origin: center;

    &:active {
      transform: scale(0.97);
    }
  }

  /* Products list styles */
  .predictive-search-results__products {
    padding-inline: var(--padding-xl);
  }

  .recently-viewed-wrapper {
    display: grid;
    grid-template-rows: auto auto;
    max-height: 1000px;
    opacity: 1;
    overflow: visible;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: top center;
    transform: translateY(0);
  }

  .recently-viewed-wrapper.removing {
    max-height: 0;
    opacity: 0;
    transform: translateY(-10px);
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
  }

  .predictive-search-results__clear.button-unstyled {
    color: var(--color-foreground);
    opacity: 0.68;
    transition: opacity var(--animation-speed-medium) var(--animation-easing);
    padding: 0;
    margin-left: var(--margin-sm);

    &:hover {
      opacity: 1;
    }
  }

  .recently-viewed-wrapper.removing .predictive-search-results__card {
    transition: none;
    transform: none;
    opacity: 1;
  }

  .recently-viewed-wrapper > * {
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(1) {
    animation-delay: 30ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(2) {
    animation-delay: 60ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(3) {
    animation-delay: 90ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(4) {
    animation-delay: 120ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(n + 5) {
    animation-delay: 150ms;
  }

  .predictive-search-results__wrapper-products {
    animation-delay: 50ms;
  }

  /* Resource carousel styles */
  .predictive-search-results__wrapper {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    padding-block-end: var(--padding-sm);
    padding-inline: 0;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--padding-xl);
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .predictive-search-results__wrapper slideshow-slides {
    --gutter-slide-width: var(--padding-xl);

    /* Add padding to prevent hover animations from being clipped in slideshow
       15px accommodates:
       - Scale effect (9px on each side from 1.03 scale)
       - Lift effect (4px upward movement)
       - Shadow (15px spread with -5px offset)
       Using 16px for better alignment with our spacing scale */
    padding-block: var(--padding-xl);
    margin-block: calc(-1 * var(--padding-xl));
    gap: var(--gap-md);
  }

  .predictive-search-results__resource-header {
    display: flex;
    padding-inline: var(--padding-xl);
    justify-content: space-between;
    align-items: center;
    height: 32px;
  }

  .predictive-search-results__resource-header .svg-wrapper {
    width: var(--icon-size-xs);
  }

  .predictive-search-results__wrapper-products {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding-block-end: var(--padding-sm);
    gap: var(--gap-md);
    transition: height var(--animation-speed-medium) var(--animation-easing);

    @container (min-width: 550px) {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .predictive-search-results__wrapper-products:last-child {
    padding-block-end: var(--padding-lg);

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

  .predictive-search-results__resource-header .predictive-search-results__title {
    margin-block-end: 0;
  }

  .predictive-search-results__resource-header:has(slideshow-controls) .predictive-search-results__title {
    margin-block-end: 0;
  }

  .predictive-search-results__resource-header slideshow-controls {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }
/* END_SNIPPET:predictive-search-styles */
/* START_SNIPPET:price-styles (INDEX:399) */
.price,
  .compare-at-price,
  .unit-price {
    white-space: nowrap;
  }

  .unit-price {
    display: block;
    font-size: min(0.85em, var(--font-paragraph--size));
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .tax-note.tax-note.tax-note {
    font-size: min(0.85em, var(--font-paragraph--size));
    font-weight: var(--font-paragraph--weight);
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .tax-note:empty {
    display: none;
  }

  product-price.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) > *:not(.tax-note) {
    margin-block: 0;
  }

  /* Volume pricing note should match unit-price styling (small, grey text) */
  product-price .volume-pricing-note,
  product-price.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) .volume-pricing-note {
    display: block;
    font-family: var(--font-body--family);
    font-weight: normal;
    font-size: var(--font-size--xs);
    line-height: normal;
    letter-spacing: normal;
    text-transform: none;
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .compare-at-price {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
    text-decoration-line: line-through;
    text-decoration-thickness: 1.5px;
    text-decoration-color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-30));
  }

  .price-item__group {
    display: inline-block;
  }
/* END_SNIPPET:price-styles */
/* START_SNIPPET:product-media-container-styles (INDEX:407) */
:where(:not(.dialog-zoomed-gallery)) > .product-media-container {
    --slide-width: 100%;

    display: flex;
    aspect-ratio: var(--gallery-aspect-ratio, var(--media-preview-ratio));
    max-height: var(--constrained-height);
    width: var(--slide-width, 100%);

    /* Relative position needed for video and 3d models */
    position: relative;
    overflow: hidden;

    &:where(.constrain-height) {
      /* arbitrary offset value based on average theme spacing and header height */
      --viewport-offset: 400px;
      --constrained-min-height: 300px;
      --constrained-height: max(var(--constrained-min-height), calc(100vh - var(--viewport-offset)));

      margin-right: auto;
      margin-left: auto;
    }

    @supports (--test: round(up, 100%, 1px)) {
      /* width and overflow forces children to shrink to parent width */
      --slide-width: round(up, 100%, 1px);
    }
  }

  @media screen and (max-width: 749px) {
    .product-media-container.constrain-height {
      max-height: none;
    }
  }

  @media screen and (min-width: 750px) {
    .product-media-container.constrain-height {
      --viewport-offset: var(--header-height, 100px);
      --constrained-min-height: 500px;
    }

    body:has(header-component[transparent]) .product-media-container.constrain-height {
      --viewport-offset: 0px;
    }
  }

  .product-media-container img {
    aspect-ratio: inherit;
    object-fit: contain;
  }

  .product-media-container.media-fit-contain img {
    object-position: center center;
  }

  .product-media-container.media-fit {
    --product-media-fit: cover;

    img {
      object-fit: var(--product-media-fit);
    }
  }
/* END_SNIPPET:product-media-container-styles */
/* START_SNIPPET:product-media-gallery-content-styles (INDEX:408) */
/* Product Media */
  media-gallery {
    display: block;
    width: 100%;
  }

  :where(media-gallery, .product-grid__item) {
    .media-gallery__grid {
      grid-template-columns: 1fr;
      gap: var(--image-gap);
    }
  }

  @media screen and (min-width: 750px) {
    .media-gallery--large-first-image .product-media-container:first-child,
    .media-gallery--two-column .product-media-container:only-child {
      /* First child spans 2 columns */
      grid-column: span 2;
    }
  }

  media-gallery:where(.media-gallery--grid) .media-gallery__grid {
    display: none;
  }

  media-gallery.media-gallery--grid .media-gallery__grid .product-media-container {
    /* Needed for safari to stretch to full grid height */
    height: 100%;
  }

  @media screen and (min-width: 750px) {
    .media-gallery--two-column .media-gallery__grid {
      grid-template-columns: repeat(2, 1fr);
    }

    /* Display grid view as a carousel on mobile, grid on desktop */
    media-gallery:is(.media-gallery--grid) slideshow-component {
      display: none;
    }

    media-gallery:where(.media-gallery--grid) .media-gallery__grid {
      display: grid;
    }
  }

  zoom-dialog dialog {
    width: 100vw;
    height: 100vh;
    border: none;
    margin: 0;
    padding: 0;
    max-width: 100%;
    max-height: 100%;
    background: #fff;
    opacity: 0;
    transition: opacity var(--animation-speed) var(--animation-easing);
    scrollbar-width: none;

    &[open] {
      opacity: 1;
    }

    @media (prefers-reduced-motion: no-preference) {
      scroll-behavior: smooth;
    }

    &::backdrop {
      background: transparent;
    }
  }

  .product-media-container__zoom-button {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: var(--layer-flat);
    cursor: zoom-in;
    background-color: transparent;

    &:hover {
      background-color: transparent;
    }
  }

  slideshow-slide.product-media-container--tallest {
    content-visibility: visible;
  }

  .product-media__drag-zoom-wrapper {
    aspect-ratio: inherit;
    min-height: inherit;
    min-width: inherit;
    display: inherit;
    flex: inherit;
  }

  .media-gallery__mobile-controls {
    grid-area: auto;
  }

  .product-media-container--zoomable.product-media-container--image {
    cursor: zoom-in;
  }
/* END_SNIPPET:product-media-gallery-content-styles */
/* START_SNIPPET:quick-add-modal-styles (INDEX:414) */
#quick-add-dialog {
    display: contents;
  }

  /* Inputs inside the quick-add modal use the global Input Fields settings,
     not any per-block overrides set on the product page. */
  .quick-add-modal .quantity-selector-wrapper {
    --color-input-background: inherit;
    --color-input-text: inherit;
    --color-input-text-rgb: inherit;
    --color-input-border: inherit;
    --style-border-width-inputs: inherit;
    --style-border-radius-inputs: inherit;
    --style-border-radius-buttons-primary: var(--style-border-radius-inputs);
    --style-border-radius-buttons-secondary: var(--style-border-radius-inputs);
  }

  .quick-add-modal .product-details .quantity-selector {
    border-radius: var(--style-border-radius-inputs);
  }

  @media screen and (min-width: 750px) {
    .quick-add-modal {
      width: var(--quick-add-modal-width);
      height: var(--quick-add-modal-height);
      max-width: none;
    }
  }

  .quick-add-modal {
    padding: 0;
    border: var(--style-border-popover);
    overflow: hidden;
    box-shadow: 0 5px 30px rgb(0 0 0 / var(--opacity-15));

    @media screen and (max-width: 749px) {
      position: fixed;
      margin: auto 0 0 0;
      min-height: unset;
      max-width: 100%;
      border-radius: 0;
      overflow: clip;
      height: fit-content;
    }
  }

  .quick-add-modal[open] {
    @media screen and (max-width: 750px) {
      border-top-left-radius: var(--style-border-radius-popover);
      border-top-right-radius: var(--style-border-radius-popover);
    }
  }

  .quick-add-modal[open] {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .quick-add-modal .view-more-details__wrapper {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .quick-add-modal[open] {
    animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .quick-add-modal.dialog-closing {
    animation: modalSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .quick-add-modal__close {
    position: absolute;
    top: var(--margin-2xs);
    right: var(--margin-2xs);
    transition: transform 0.15s var(--animation-timing-bounce);
    z-index: var(--layer-raised);
    overflow: visible;
    transform-origin: center;
  }

  .quick-add-modal__close:active {
    transform: scale(0.99) translateY(1px);
  }

  .quick-add-modal__close {
    &:focus-visible {
      outline: none;
    }

    &:focus-visible::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: calc(var(--style-border-radius-popover) - var(--margin-2xs));
      outline: var(--focus-outline-width) solid currentColor;
    }
  }

  .quick-add-modal__content {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: 100% 1fr;
    position: relative;
    overflow-y: auto;
    max-height: 100vh;
    flex-grow: 1;

    @media screen and (max-width: 749px) {
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: auto;
      padding-inline: var(--padding-xl);
      padding-block: var(--padding-xl);
      gap: var(--gap-lg);
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      height: auto; /* Prevent a bug in Safari where height:fit-content is not respected */
      max-height: 100vh;
    }
  }

  .quick-add-modal__content .media-gallery--grid .media-gallery__grid {
    grid-template-columns: 1fr;
  }

  .quick-add-modal__content .media-gallery--grid.media-gallery--two-column .product-media-container:first-child {
    grid-column: auto;
  }

  .quick-add-modal__content {
    /* One column */
    .media-gallery--grid:not(.media-gallery--two-column) .product-media > *,
      /* Two column, small first image */
      .media-gallery--grid.media-gallery--two-column:not(.media-gallery--large-first-image)
      .product-media-container:nth-of-type(odd)
      .product-media > *,
      /* Two column, large first image */
      .media-gallery--grid.media-gallery--two-column.media-gallery--large-first-image
        .product-media-container:is(:first-of-type, :nth-of-type(even))
        .product-media > *,
        /* Carousel */
      .media-gallery--carousel slideshow-container {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }

  .quick-add-modal__content .view-more-details__wrapper {
    display: flex;
    justify-content: flex-start;
    width: 100%;
  }

  .view-more-details__wrapper .view-more-details {
    display: flex;
    align-items: center;
    width: fit-content;
  }

  .quick-add-modal__content .product-header {
    @media screen and (max-width: 749px) {
      display: flex;
      flex-direction: column;
      grid-column: 2 / -1;
      grid-row: 1;
      padding-right: var(--padding-2xl);
    }
  }

  .quick-add-modal__content .product-header a:not(product-price *) {
    @media screen and (max-width: 749px) {
      font-size: var(--font-size--md);
      font-weight: 500;
      color: inherit;
      width: fit-content;
    }
  }

  .quick-add-modal__content variant-picker,
  .quick-add-modal__content product-form-component {
    @media screen and (max-width: 749px) {
      grid-column: 1 / -1;
    }
  }

  .quick-add-modal__content .product-media-container__zoom-button {
    cursor: default;
  }

  .quick-add-modal__content .product-details {
    grid-column: 4 / -1;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    position: relative;

    dialog[open] & {
      animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
      animation-delay: 0.1s;
    }

    @media screen and (max-width: 749px) {
      grid-column: 2 / span 2;
      grid-row: span 1;
      max-height: 100%;
      height: 100%;
    }
  }

  @property --quick-add-modal-mask-start {
    syntax: '<length>';
    initial-value: 0px;
    inherits: false;
  }

  @property --quick-add-modal-mask-end {
    syntax: '<length>';
    initial-value: 0px;
    inherits: true;
  }

  @keyframes detect-scroll {
    from,
    to {
      --can-scroll: ;
    }
  }

  @supports (animation-timeline: scroll(self)) {
    dialog[open] .quick-add-modal__content .product-details {
      mask-image: linear-gradient(to bottom, transparent 0%, #000 var(--quick-add-modal-mask-start), #000 100%);
      animation: 0.3s var(--animation-timing-fade-in) 0.1s both fadeSlideIn, scrollStart 1s linear both,
        scrollEnd 1s linear both, detect-scroll 1ms linear none;
      animation-timeline: auto, scroll(self), scroll(self), scroll(self);
      animation-range: normal, 0px 48px, calc(100% - 48px) 100%, 0% 100%;
    }
  }

  @keyframes scrollStart {
    from {
      --quick-add-modal-mask-start: 0px;
    }
    to {
      --quick-add-modal-mask-start: 48px;
    }
  }

  @keyframes scrollEnd {
    from {
      --quick-add-modal-mask-end: 0px;
    }
    to {
      --quick-add-modal-mask-end: 48px;
    }
  }

  .quick-add-modal__content .product-details > .group-block {
    flex-grow: 1;
    width: auto;
  }

  .quick-add-modal__content > * {
    min-height: 0;
  }

  .quick-add-modal__content .product-details :is(.view-product-title, .buy-buttons-block) {
    flex: 0 0 auto;
  }
  .quick-add-modal__content .product-details :is(.buy-buttons-block) {
    margin-top: auto;
    position: sticky;
    bottom: 0;
    padding-bottom: var(--padding-3xl);
    background-color: var(--color-background);
    z-index: var(--layer-raised);

    &::before {
      --quick-add-modal-mask-end-progressive-enhanced: 0px;

      position: absolute;
      content: '';
      display: block;
      inset: auto 0 100% 0;
      pointer-events: none;
      height: min(var(--gap-2xl), var(--gap));
      background-color: inherit;
      mask-image: linear-gradient(
        to top,
        #000 0%,
        #000 calc(var(--gap-2xs)),
        transparent calc(100% - var(--quick-add-modal-mask-end-progressive-enhanced)),
        transparent
      );
    }
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) {
    position: static;
    padding-bottom: 0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) > product-form-component {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) form {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form)::before {
    display: none;
  }

  .quick-add-modal__content .product-details .buy-buttons-block__bar {
    display: block;
    position: sticky;
    bottom: 0;
    margin-top: auto;
    padding-block: var(--gap-md) var(--padding-3xl);
    background-color: var(--color-background);
    z-index: var(--layer-raised);

    &::before {
      --quick-add-modal-mask-end-progressive-enhanced: 0px;

      position: absolute;
      content: '';
      display: block;
      inset: auto 0 100% 0;
      pointer-events: none;
      height: min(var(--gap-2xl), var(--gap));
      background-color: inherit;
      mask-image: linear-gradient(
        to top,
        #000 0%,
        #000 calc(var(--gap-2xs)),
        transparent calc(100% - var(--quick-add-modal-mask-end-progressive-enhanced)),
        transparent
      );
    }
  }

  @supports (animation-timeline: scroll(self)) {
    .quick-add-modal__content .product-details :is(.buy-buttons-block)::before,
    .quick-add-modal__content .product-details .buy-buttons-block__bar::before {
      --mask-if-scroll: var(--can-scroll) var(--quick-add-modal-mask-end);
      --mask-if-no-scroll: 48px;
      --quick-add-modal-mask-end-progressive-enhanced: var(--mask-if-scroll, var(--mask-if-no-scroll));
      height: calc(var(--gap-2xs) + 48px);
    }
  }

  .quick-add-modal__content .product-details .variant-picker {
    flex: 0 0 auto;

    padding-block: min(var(--gap-2xl), var(--gap));
    margin-block-end: calc(var(--focus-outline-offset) + var(--focus-outline-width));
  }

  .quick-add-modal__content .variant-option--swatches {
    padding-inline-start: var(--padding-2xs);
  }

  .quick-add-modal__content .variant-option--swatches legend {
    margin-inline-start: calc(-1 * var(--padding-2xs));
  }

  .quick-add-modal__content:not(:has(.product-information__media)) .product-details {
    grid-column: 1 / -1;
  }

  .quick-add-modal__content .view-product-title {
    display: flex;
    padding-block: 0;
    margin-block-end: 12px;

    /* Prevent overlap between title and close button */
    padding-inline-end: calc(var(--padding-2xl) + calc(var(--minimum-touch-target) / 2));
  }

  .quick-add-modal__content .view-product-title a {
    color: inherit;
    text-decoration: none;
    text-align: left;
    font-size: var(--font-size--2xl);
    font-weight: 600;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s var(--animation-easing);
  }

  .quick-add-modal__content .product-details product-price {
    --text-align: left;
  }

  .quick-add-modal__content .product-details product-price.text-block--align-center {
    margin-inline: 0;
  }

  .quick-add-modal__content .product-details product-price.text-center {
    --text-align: left;
  }

  .quick-add-modal__content .product-details product-price > * {
    text-align: left;
  }

  .quick-add-modal__content
    .product-details
    *:not(
      .group-block,
      .group-block-content,
      .buy-buttons-block,
      .buy-buttons-block *,
      .view-product-title,
      .view-product-title *,
      variant-picker,
      variant-picker *,
      product-price,
      product-price *,
      product-inventory,
      product-inventory *,
      .view-more-details__wrapper,
      .view-more-details__wrapper *
    ) {
    @media screen and (min-width: 750px) {
      /* stylelint-disable-next-line declaration-no-important */
      display: none !important;
    }
  }

  .quick-add-modal__content
    .group-block:not(
      :has(
          .buy-buttons-block,
          .buy-buttons-block *,
          .view-product-title,
          .view-product-title *,
          variant-picker,
          variant-picker *,
          product-price,
          product-price *,
          product-inventory,
          product-inventory *,
          .view-more-details__wrapper,
          .view-more-details__wrapper *
        ),
      .buy-buttons-block
    ) {
    display: none;
  }

  @media screen and (min-width: 750px) {
    .quick-add-modal__content .group-block-content {
      gap: 0;
    }

    .quick-add-modal__content .media-gallery__grid {
      gap: min(var(--gap-2xs), var(--image-gap));
      border-radius: var(--style-border-radius-popover, 0);
    }

    .quick-add-modal__content .media-gallery--grid .product-media img {
      border-radius: 0;
    }
  }

  .quick-add-modal__content .product-details > .group-block {
    padding-block: var(--padding-3xl) 0;
  }

  .quick-add-modal__content :where(.product-details > .group-block > .group-block-content > *) {
    padding-inline: var(--padding-3xl);
  }

  .quick-add-modal__content slideshow-slide:not([aria-hidden='false']) {
    content-visibility: auto;
  }

  .quick-add-modal__content .product-information__media {
    width: 100%;
    grid-column: 1 / span 1;
    grid-row: 1;
    position: relative;
    top: 0;
    animation: fadeIn 0.4s var(--animation-timing-fade-in) both;

    @media screen and (min-width: 750px) {
      position: sticky;
      grid-column: 1 / 4;
      width: var(--quick-add-modal-gallery-width);
      overflow-y: auto;
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .quick-add-modal__content .product-information__media media-gallery {
    pointer-events: none;

    @media screen and (min-width: 750px) {
      position: absolute;
      inset: 0;
    }
  }

  .quick-add-modal media-gallery {
    padding: 0;
  }

  .quick-add-modal__content .product-information__media slideshow-arrows {
    display: none;
  }

  .quick-add-modal__content .product-information__media slideshow-container {
    display: block;
  }

  .quick-add-modal__content .product-information__media slideshow-slides {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
    overflow: visible;
    scroll-snap-type: none;
  }

  .quick-add-modal__content .product-information__media slideshow-slide {
    width: 100%;
    flex: none;
    scroll-snap-align: unset;
    position: relative;
    transform: none;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s var(--animation-easing);
  }

  .quick-add-modal__content .product-information__media slideshow-slide[aria-hidden='true'] {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(1) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(2) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
    animation-delay: 0.05s;
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(3) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
    animation-delay: 0.1s;
  }

  .quick-add-modal__content .product-information__media :is(slideshow-controls, slideshow-controls[thumbnails]) {
    display: none;
  }

  .quick-add-modal__content .sticky-content,
  .quick-add-modal__content .sticky-content--desktop {
    top: 0;
  }

  .quick-add-modal__content .text-block.rte:not(product-price),
  .quick-add-modal__content .view-more-details__wrapper {
    display: none;
  }

  @keyframes fadeSlideIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
/* END_SNIPPET:quick-add-modal-styles */
/* START_SNIPPET:resource-card (INDEX:419) */
.resource-card__wrapper {
    display: block;
    height: 100%;
  }

  .resource-card {
    --resource-card-secondary-image-opacity: 0;
    --resource-card-primary-image-opacity: calc(1 - var(--resource-card-secondary-image-opacity));

    display: flex;
    flex-direction: column;
    row-gap: var(--padding-xs);
    position: relative;
    text-decoration: none;
    height: 100%;
    opacity: 0;
    animation: fadeIn var(--animation-speed-medium) var(--animation-timing-fade-in) forwards;
  }

  .resource-card__link {
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  .resource-card__content {
    display: flex;
    flex-direction: column;
    color: var(--color-foreground);
    gap: var(--padding-3xs);

    .price {
      font-weight: 500;
    }

    .volume-pricing-note {
      display: block;
      margin-top: var(--padding-3xs);
      font-family: var(--font-body--family);
      font-weight: normal;
      font-size: min(0.85em, var(--font-paragraph--size));
      line-height: normal;
      letter-spacing: normal;
      text-transform: none;
      color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
    }
  }

  .resource-card[data-resource-type='article'] .resource-card__content,
  .resource-card[data-resource-type='page'] .resource-card__content {
    gap: var(--padding-xs);
  }

  .resource-card__image {
    aspect-ratio: var(--resource-card-aspect-ratio, auto);
    object-fit: cover;
    border-radius: var(--resource-card-corner-radius);
    opacity: var(--resource-card-primary-image-opacity);
  }

  .resource-card__image--secondary {
    position: absolute;
    top: 0;
    opacity: var(--resource-card-secondary-image-opacity);
    border-radius: var(--resource-card-corner-radius);
  }

  .resource-card__media:empty {
    display: none;
  }

  .resource-card__image-placeholder {
    padding: var(--padding-sm);
    font-size: var(--font-size--lg);
    line-height: var(--line-height--display-loose);
    word-break: break-word;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    aspect-ratio: var(--resource-card-aspect-ratio, auto);
    border-radius: var(--resource-card-corner-radius);
    color: var(--color-foreground);
  }

  .resource-card__title {
    margin-block: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: 1.3;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .resource-card__title.paragraph {
    line-height: 1.3;
  }

  .resource-card--overlay {
    height: 100%;

    &::before {
      content: '';
      position: absolute;
      inset: 50% 0 0;
      background: var(--gradient-image-overlay);
      border-radius: var(--resource-card-corner-radius);
      pointer-events: none;
      z-index: var(--layer-flat);
    }
  }

  .resource-card--overlay .resource-card__image {
    height: 100%;
  }

  .resource-card--overlay .resource-card__content {
    position: absolute;
    inset: auto 0 0;
    padding: var(--padding-lg) var(--padding-lg) var(--padding-sm);
    z-index: var(--layer-raised);
  }

  .resource-card--overlay .resource-card__title {
    color: var(--color-white);
  }

  /* Collection images */
  .resource-card__image-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap-2xs);
  }

  .resource-card__collection-image {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: calc(var(--card-corner-radius) - (var(--padding-xs) / 2));
  }

  .resource-card__subtext {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
    margin-block-start: 0;
  }

  .resource-card__subtext.paragraph {
    font-size: var(--font-size--body-sm);
    line-height: var(--line-height--body-tight);
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .resource-card:has(.resource-card__image--secondary) {
    &:hover,
    &:focus {
      --resource-card-secondary-image-opacity: 1;
    }
  }
/* END_SNIPPET:resource-card */
/* START_SNIPPET:search-modal (INDEX:425) */
/* Search modal style */
  .search-modal {
    --search-border-radius: var(--style-border-radius-popover);
    --search-border-width: var(--style-border-width);
  }

  .search-modal__content {
    /* Approx set the top so when the content is at max height, the modal is centered */
    --modal-top-margin: calc(50dvh - var(--modal-max-height) / 2 - 2rem);
    --modal-width: 66dvw;

    padding: 0;
    border: var(--style-border-popover);

    @media screen and (min-width: 750px) {
      width: var(--modal-width);
      margin-block-start: var(--modal-top-margin);
      overflow: hidden;
    }
  }

  /* Hide the default dialog backdrop on small screens */
  @media screen and (max-width: 749px) {
    .search-modal__content::backdrop {
      display: none;
    }
  }

  .dialog-modal[open].search-modal__content {
    transform-origin: bottom center;
    animation: search-element-slide-in-bottom 300ms var(--ease-out-quad) forwards;
    border-radius: var(--search-border-radius);
    box-shadow: var(--shadow-popover);

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

  .dialog-modal.search-modal__content.dialog-closing {
    animation: search-element-slide-out-bottom 200ms var(--ease-out-quad) forwards;
  }

  .search-modal__content[open] {
    display: flex;
  }

  .search-modal__content :is(.predictive-search-dropdown, .predictive-search-form__content-wrapper) {
    position: relative;
  }

  .dialog-modal
    .predictive-search-form__header:has(
      .predictive-search__reset-button:not(.predictive-search__reset-button[hidden])
    )::before {
    content: '';
    position: absolute;
    right: calc(var(--padding-sm) + var(--minimum-touch-target));
    top: 0;
    bottom: 0;
    width: var(--border-width-sm);
    background-color: var(--color-border);
  }

  .dialog-modal
    .predictive-search-form__header:has(.predictive-search__reset-button:not(.predictive-search__reset-button[hidden]))
    > .predictive-search__close-modal-button {
    &::before {
      content: none;
    }
  }

  @media screen and (min-width: 750px) {
    .dialog-modal
      .predictive-search-form__header:has(
        .predictive-search__reset-button:not(.predictive-search__reset-button[hidden])
      )::before {
      right: calc(var(--padding-2xl) * 2);
    }
  }

  predictive-search-component {
    --resource-card-corner-radius: var(--product-corner-radius);

    display: flex;
    width: 100%;
    position: relative;
    margin-inline: auto;
    align-items: center;
    background-color: var(--color-background);
    z-index: var(--layer-heightened);
  }

  .predictive-search-form__footer {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;

    @media screen and (min-width: 750px) {
      --to-top-gradient-background: linear-gradient(
        to top,
        rgb(var(--color-background-rgb) / var(--opacity-90)),
        rgb(var(--color-background-rgb) / var(--opacity-80)),
        rgb(var(--color-background-rgb) / var(--opacity-40)),
        transparent
      );

      padding-block: var(--padding-xs) var(--padding-lg);
      background-image: var(--to-top-gradient-background);
    }
  }

  predictive-search-component:has([data-search-results]):not(:has(.predictive-search-results__no-results))
    .predictive-search-form__footer {
    display: block;
  }

  .predictive-search-form {
    position: relative;
    width: 100%;
    align-self: flex-start;
  }

  .predictive-search-form__content {
    max-height: 50dvh;
    overflow-y: auto;
    background-color: var(--color-background);

    /* Firefox */
    scrollbar-width: none;

    /* Webkit browsers */
    &::-webkit-scrollbar {
      display: none;
    }
  }

  .predictive-search-form__content-wrapper {
    position: absolute;
    top: 100%;
    width: 100%;
    left: 0;
    z-index: var(--layer-raised);
    display: flex;
    flex-direction: column;
    border-radius: 0 0 var(--search-border-radius) var(--search-border-radius);
    transition: box-shadow var(--animation-speed) var(--animation-easing);
    transform: translateZ(0);
    overflow: hidden;

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

    @media screen and (min-width: 750px) {
      max-height: var(--modal-max-height);
    }
  }

  /* Add new rule to apply bottom padding only when search button exists */
  .predictive-search-form__content-wrapper:has([data-search-results]):not(:has(.predictive-search-results__no-results))
    > .predictive-search-form__content {
    padding-block-end: var(--padding-6xl);
  }

  .predictive-search-form__header-inner {
    background: var(--color-background);
    border: var(--search-border-width) solid var(--color-border);
    color: var(--color-foreground);
    border-radius: var(--style-border-radius-popover);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;

    @media screen and (max-width: 749px) {
      border-radius: var(--style-border-radius-inputs);
      border: none;
    }
  }

  .predictive-search-form__header-inner:focus-within {
    outline-offset: var(--focus-outline-offset);

    @media screen and (min-width: 750px) {
      outline: var(--focus-outline-width) solid var(--color-foreground);
    }
  }

  .predictive-search-form__header {
    display: flex;
    position: sticky;
    top: 0;
    z-index: var(--layer-heightened);
    width: 100%;
    align-items: center;
    background-color: var(--color-input-background);
    border: var(--search-border-width) solid var(--color-border);
    border-radius: var(--style-border-radius-inputs);

    @media screen and (max-width: 749px) {
      padding: var(--padding-2xs) var(--padding-sm);
    }
  }

  .predictive-search-form__header:focus-within,
  .predictive-search-form__header-inner:focus-within,
  .predictive-search-form__header-inner:has(.search-input:is(:focus, :focus-visible)) {
    outline: none;
    box-shadow: none;
    /* stylelint-disable-next-line declaration-no-important */
    border-color: var(--color-border) !important;
  }

  input.search-input {
    border-radius: var(--style-border-radius-inputs);
    padding-block: var(--padding-sm);
    font-size: var(--font-size--md);
    width: 100%;
    color: var(--color-foreground);
    padding-inline: calc(var(--margin-lg) + var(--icon-size-lg)) 0;
    background: transparent;
    text-overflow: ellipsis;
    overflow: hidden;
    outline: none;
    border: 0;
  }

  input.search-input::placeholder {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-muted-text));
  }

  input.search-input,
  input.search-input:is(:focus, :focus-visible, :focus-within),
  .predictive-search-form__header *:is(:focus, :focus-visible) {
    outline: none;
    box-shadow: none;
  }

  input.search-input:hover {
    background-color: transparent;
  }

  .predictive-search__icon {
    position: absolute;
    left: var(--margin-xl);
    top: auto;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-60));

    @media screen and (min-width: 750px) {
      left: var(--margin-md);
    }
  }

  .predictive-search__icon > svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  .predictive-search__reset-button {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    padding: 0;
    margin-inline-end: var(--margin-md);
    background: transparent;
    color: var(--color-foreground);
    opacity: 0.68;
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-out),
      visibility var(--animation-speed-medium) var(--animation-timing-fade-out);

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

    &:active {
      transform: scale(0.9);
      transition: transform 100ms var(--animation-timing-active);
    }

    @media screen and (min-width: 750px) {
      margin-inline-end: var(--margin-2xs);
    }
  }

  .predictive-search__reset-button[hidden] {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }

  .predictive-search__reset-button-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    transition: background-color var(--animation-speed-medium) ease-in-out,
      transform var(--animation-speed-medium) var(--animation-timing-bounce);
    border-radius: 50%;

    &:hover {
      background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
    }
  }

  .predictive-search__reset-button:active .predictive-search__reset-button-icon {
    transform: scale(0.85);
    transition-timing-function: var(--animation-timing-active);
    transition-duration: 100ms;
  }

  .predictive-search__reset-button svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  .predictive-search__reset-button-text {
    display: none;
  }

  .predictive-search__search-button {
    margin: auto;
    z-index: var(--layer-raised);
    transition: transform var(--animation-speed-medium) var(--animation-timing-bounce),
      box-shadow var(--animation-speed-medium) var(--animation-timing-hover);
    transform-origin: center;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgb(0 0 0 / var(--opacity-5));
    }

    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
      box-shadow: none;
    }
  }

  .predictive-search__close-modal-button {
    --button-color: var(--color-foreground);
    --button-background-color: transparent;

    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    margin-inline-start: var(--margin-sm);
    padding: 0;
    box-shadow: none;

    &:active {
      transform: scale(0.8);
      transition: transform 100ms var(--animation-timing-active);
    }

    .svg-wrapper,
    svg {
      width: var(--icon-size-xs);
      height: var(--icon-size-xs);
    }
  }

  .predictive-search__close-modal-button:hover {
    --button-color: var(--color-foreground);
    --button-background-color: transparent;
  }
/* END_SNIPPET:search-modal */
/* START_SNIPPET:skip-to-content-link (INDEX:429) */
.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:text-component-shimmer-styles (INDEX:448) */
text-component {
    --shimmer-text-color: rgb(var(--color-foreground-rgb) / var(--opacity-50));
    --shimmer-color-light: rgb(var(--color-foreground-rgb) / var(--opacity-10));
    --shimmer-speed: 1.25s;

    display: inline-block;
    position: relative;
    transition: color var(--animation-speed-slow) ease;
    line-height: 1;

    &::after {
      /* Empty alt text: the pseudo-element is a visual shimmer overlay, not announceable content.
        Without this, VoiceOver reads attr(value) in addition to the inner text node, doubling the announcement. */
      content: attr(value) / '';
      position: absolute;
      inset: 0;
      color: transparent;
      opacity: 0;
      transition: opacity var(--animation-speed-slow) var(--animation-easing);
      pointer-events: none;
      background-image: linear-gradient(
        -85deg,
        var(--shimmer-text-color) 10%,
        var(--shimmer-color-light) 50%,
        var(--shimmer-text-color) 90%
      );
      background-clip: text;
      background-size: 200% 100%;
      background-position: 100% 0;
      place-content: center;
    }

    &[shimmer] {
      color: transparent;

      &::after {
        opacity: 1;
        animation: text-shimmer var(--shimmer-speed) infinite linear;
      }
    }
  }

  @keyframes text-shimmer {
    0% {
      background-position: 100% 0;
    }

    100% {
      background-position: -100% 0;
    }
  }
/* END_SNIPPET:text-component-shimmer-styles */
/* START_SNIPPET:theme-drawer-styles (INDEX:451) */
theme-drawer {
    display: contents;
  }

  .theme-drawer__dialog {
    --theme-drawer-padding: var(--padding-xl);

    z-index: calc(var(--layer-sticky) + var(--drawer-stack-order, 0));
    position: fixed;
    inset: unset;
    top: 0;
    right: calc(-1 * var(--theme-drawer-width, var(--sidebar-width)));
    flex-direction: column;
    width: var(--theme-drawer-width, var(--sidebar-width));
    max-width: 100%;
    max-height: none;
    height: 100dvh;
    padding: 0;
    border: none;
    border-left: var(--style-border-drawer);
    background-color: var(--color-background);
    color: var(--color-foreground);
  }

  .theme-drawer__dialog[open] {
    display: flex;
    right: 0;
  }

  .theme-drawer__dialog--opening {
    animation: drawer-slide-in var(--animation-speed) var(--animation-timing-fade-in);
  }

  .theme-drawer__dialog--opening-inline-start {
    animation: drawer-slide-in-inline-start var(--animation-speed) var(--animation-timing-fade-in);
  }

  .theme-drawer__dialog--closing {
    animation: drawer-slide-out var(--animation-speed) var(--animation-timing-fade-out) forwards;
  }

  .theme-drawer__dialog-instant {
    animation: none;
  }

  @keyframes drawer-slide-in {
    from {
      right: calc(-1 * var(--theme-drawer-width, var(--sidebar-width)));
    }
  }

  @keyframes drawer-slide-in-inline-start {
    from {
      right: calc(var(--theme-drawer-width, var(--sidebar-width)) / 2);
    }
  }

  @keyframes drawer-slide-out {
    to {
      right: calc(-1 * var(--theme-drawer-width, var(--sidebar-width)));
    }
  }

  .theme-drawer__dialog::backdrop {
    background: rgb(var(--backdrop-color-rgb) / var(--backdrop-opacity));
  }

  /* Exclude open drawers from the page navigation cross-fade so they
     stay frozen (visually unchanged) while the rest of the page transitions. */
  html:active-view-transition-type(page-navigation) .theme-drawer__dialog[open] {
    view-transition-name: theme-drawer;
  }

  ::view-transition-old(theme-drawer),
  ::view-transition-new(theme-drawer) {
    animation: none;
  }

  .theme-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--theme-drawer-padding);
    flex-shrink: 0;
    color: var(--color-foreground);
  }

  .theme-drawer__title {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    margin: 0;
  }

  .theme-drawer__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: var(--style-border-radius-lg);
    background-color: rgb(var(--color-foreground-rgb) / 0.1);
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
    color: var(--color-foreground);
    font-size: clamp(var(--font-size--3xs), 0.75em, var(--font-size--xs));
    padding-inline: 0.5em;
    line-height: 1;
  }

  .theme-drawer__badge[data-maintain-ratio] {
    aspect-ratio: 1 / 1;
    padding-inline: 0.2em;
  }

  .theme-drawer__close-button {
    --private-button-size: 34px;
    --private-focus-ring-size: 2px;
    --private-motion-speed: 150ms;
    --private-motion-ease: cubic-bezier(0.25, 0, 0.1, 1);
    --private-border-width: 1px;
    --private-button-border-color: rgb(0, 0, 0, 0.06);
    --private-button-shadow: 0 2px 6px 0 var(--private-button-border-color);

    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-inline-start: auto;
    width: var(--private-button-size);
    height: var(--private-button-size);
    border-radius: var(--private-button-size);
    background-color: var(--color-background);
    outline: var(--private-focus-ring-size) solid transparent;
    outline-offset: var(--private-focus-ring-size);
    transition-property: color, outline-color, background-color;
    transition-duration: var(--private-motion-speed);
    transition-timing-function: var(--private-motion-ease);

    /* Legacy non-contrast-aware color scheme */
    --button-icon-opacity: 0.8;
    color: var(--color-foreground);
    border: var(--private-border-width) solid var(--private-button-border-color);
    box-shadow: var(--private-button-shadow);

    &:hover:not(:active) {
      /* Legacy non-contrast-aware color scheme */
      --button-icon-opacity: 1;
    }

    &:focus-visible {
      outline-color: var(--color-foreground);
    }
  }

  @supports (color: oklch(from red l c h)) {
    .theme-drawer__close-button {
      --contrast-color: oklch(from var(--color-background) clamp(0, (0.6 / l - 1) * infinity, 1) 0 0);
      --button-icon-opacity: 1;
      --private-button-border-color: color-mix(in srgb, var(--contrast-color) 6%, transparent);
      --private-button-shadow: 0 2px 6px 0 var(--private-button-border-color);

      color: color-mix(in srgb, var(--contrast-color) 50%, transparent);

      &:hover:not(:active) {
        color: color-mix(in srgb, var(--contrast-color) 70%, transparent);
      }
    }

    .theme-drawer__close-button:hover:not(:active) {
      background-color: color-mix(in srgb, var(--contrast-color) 6%, var(--color-background));
    }
  }
/* END_SNIPPET:theme-drawer-styles */