/* ============================================================
   Nutrición Activa — "También te podría gustar"
   Estilos del componente que pinta assets/cross-sell.js.

   DOS VARIANTES DEL MISMO COMPONENTE, y la diferencia la marca
   el ancestro, no una clase distinta en la tarjeta:

     .xs-sec           en la ficha  → carril de tarjetas verticales
     .na-cross-box     en el panel  → filas compactas, una debajo
                                      de otra, porque el cajón mide
                                      420 px y ahí una rejilla de
                                      tres no cabe sin encogerse
                                      hasta lo ilegible.

   JERARQUÍA: esto va DESPUÉS de la compra principal y tiene que
   leerse como secundario. Por eso la tarjeta no lleva sombra, el
   botón "Agregar" es de contorno y no sólido, y el precio usa la
   tipografía de texto y no la Archivo Black del precio grande de
   la caja de compra. Nada de aquí puede competir con el CTA que
   está justo encima.

   EL NARANJA NO SE USA. craft.css lo reserva para "esto cobra":
   en cuanto aparece en un sitio que no es el botón de pagar, el
   ojo pierde el botón de pagar. El verde jade —"esto ya está
   resuelto"— es el que confirma el alta.
   ============================================================ */

/* ============================================================
   1. SECCIÓN — común a las dos variantes
   ============================================================ */
.xs-sec{margin:clamp(26px,3.4vw,38px) 0 0}
.xs-sec[hidden],.na-cross-box[hidden]{display:none}

.xs-h{font-family:Figtree,system-ui,sans-serif;font-size:12px;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  margin:0 0 3px;line-height:1.35}
.xs-sub{font-family:Figtree,system-ui,sans-serif;font-size:13.5px;line-height:1.5;
  color:var(--muted);margin:0 0 14px}
.xs-h + .xs-track{margin-top:14px}

/* ============================================================
   2. VARIANTE FICHA — carril horizontal

   En móvil se desliza y la tarjeta siguiente ASOMA: un carril que
   corta las tarjetas justo en el borde no se lee como deslizable y
   nadie lo intenta. El 76% + el hueco dejan ver un trozo de la
   siguiente en 375, 390 y 430 px.

   El scroll vive DENTRO del carril, nunca en la página: el
   contenedor lleva su propio overflow y overscroll-behavior-x
   contenido, así que al llegar al extremo el gesto muere ahí en vez
   de encadenarse al documento y mover el sitio de lado.
   ============================================================ */
.xs-track{display:flex;gap:12px;align-items:stretch}

.xs-card{position:relative;display:flex;flex-direction:column;
  flex:1 1 0;min-width:0;
  padding:14px 14px 13px;border:1.5px solid var(--line);border-radius:18px;
  background:var(--paper);
  transition:border-color var(--t-state) ease,transform var(--t-press) var(--ease-out)}
@media (hover:hover){
  .xs-card:hover{border-color:var(--jade-light)}
}
.xs-card.is-loading{opacity:.7}

/* El enlace envuelve SOLO foto + textos. El botón y los radios quedan
   fuera: un <a> no puede contener controles sin que el navegador se
   trague el clic o los expulse. */
.xs-media{display:block;text-decoration:none}
.xs-link{display:flex;flex-direction:column;gap:0;text-decoration:none;color:inherit}
.xs-link:focus-visible{outline:3px solid var(--jade-light);outline-offset:3px;border-radius:12px}

.xs-img{display:flex;align-items:center;justify-content:center;
  aspect-ratio:1;border-radius:13px;background:var(--ink);overflow:hidden;margin-bottom:11px}
.xs-img img{width:100%;height:100%;object-fit:contain;display:block;
  transition:transform var(--t-move) var(--ease-out)}
@media (hover:hover){
  .xs-card:hover .xs-img img{transform:scale(1.045)}
}
.xs-media:focus-visible{outline:3px solid var(--jade-light);outline-offset:3px;border-radius:13px}

.xs-cat{font-family:Figtree,system-ui,sans-serif;font-size:10.5px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--jade);line-height:1.3}
.xs-nm{font-family:Archivo,system-ui,sans-serif;font-size:15.5px;font-weight:700;
  letter-spacing:-.01em;color:var(--ink);line-height:1.25;margin-top:3px}
@media (hover:hover){
  .xs-card:hover .xs-nm{color:var(--jade-dark)}
}
.xs-pie{font-family:Figtree,system-ui,sans-serif;font-size:12px;line-height:1.4;
  color:var(--muted);margin-top:2px;
  /* dos líneas como techo: con tres, tarjetas vecinas de distinta altura
     desalinean los botones y el carril deja de leerse como una fila */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---- presentaciones: chips pequeños, mismo lenguaje que los de la ficha ---- */
.xs-vars{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.xs-var{position:relative;display:inline-flex;align-items:center;justify-content:center;
  min-height:32px;padding:0 9px;border:1.5px solid var(--line);border-radius:999px;
  background:var(--paper-alt);cursor:pointer;white-space:nowrap;
  font-family:Figtree,system-ui,sans-serif;font-size:11.5px;font-weight:700;
  color:var(--muted);line-height:1;
  transition:border-color var(--t-state) ease,background-color var(--t-state) ease,
    color var(--t-state) ease,transform var(--t-press) var(--ease-out)}
.xs-var input{position:absolute;opacity:0;width:100%;height:100%;left:0;top:0;margin:0;cursor:pointer}
.xs-var.is-on{border-color:var(--jade);background:var(--jade-bg);color:var(--jade-dark)}
.xs-var:active{transform:scale(.96)}
/* anillo solo con teclado: con :focus-within salía también al tocar */
.xs-var:has(input:focus-visible){outline:3px solid var(--jade-light);outline-offset:2px}
@supports not selector(:has(*)){.xs-var:focus-within{outline:3px solid var(--jade-light);outline-offset:2px}}

/* Presentación única: no se pinta un radio que no elige nada, solo el dato. */
.xs-uni{font-family:Figtree,system-ui,sans-serif;font-size:12px;font-weight:700;
  color:var(--muted);margin:10px 0 0;line-height:1.3}

/* margin-top:auto ES LO QUE ALINEA LA FILA.

   Las tarjetas no tienen el mismo contenido: Kreatina trae una sola
   presentación y Sonik dos, que además envuelven a dos renglones en una
   tarjeta estrecha. Sin esto, el precio y el botón de cada tarjeta quedaban
   a una altura distinta y la fila se leía como tres piezas sueltas en vez de
   como un grupo.

   Con el empuje al pie, el bloque precio + botón queda SIEMPRE al fondo,
   caiga como caiga lo de arriba. Y es robusto: vale igual si mañana un
   producto trae tres presentaciones o un nombre más largo. */
.xs-pz{display:flex;align-items:baseline;gap:5px;margin:10px 0 0;
  padding-top:2px;
  font-family:Archivo,system-ui,sans-serif;font-size:19px;font-weight:800;
  letter-spacing:-.02em;color:var(--ink);line-height:1}
.xs-sec .xs-pz{margin-top:auto}
.xs-cur{font-family:Figtree,system-ui,sans-serif;font-size:10.5px;font-weight:800;
  letter-spacing:.08em;color:var(--muted)}

/* ---- el botón ----
   De contorno y no sólido: el sólido de esta columna es "Comprar ahora",
   que está unos centímetros más arriba. Dos botones sólidos compitiendo
   por el mismo ojo hacen que ninguno de los dos se lea como el principal. */
.xs-add{margin-top:11px;width:100%;min-height:42px;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:0 12px;border:1.5px solid var(--jade);border-radius:12px;
  background:transparent;color:var(--jade-dark);cursor:pointer;
  font-family:Figtree,system-ui,sans-serif;font-size:13.5px;font-weight:800;
  letter-spacing:.01em;line-height:1;
  transition:background-color var(--t-state) ease,color var(--t-state) ease,
    border-color var(--t-state) ease,transform var(--t-press) var(--ease-out)}
.xs-add svg{width:16px;height:16px;flex:none}
@media (hover:hover){
  .xs-add:hover:not(:disabled){background:var(--jade);color:#fff;border-color:var(--jade)}
}
.xs-add:active:not(:disabled){transform:scale(.97)}
.xs-add:focus-visible{outline:3px solid var(--jade-light);outline-offset:2px}
.xs-add:disabled{cursor:default}

/* Confirmado. Verde lleno, que es la señal que craft.css reserva para
   "esto ya está resuelto" — la misma que usa el botón de la ficha. */
.xs-add.is-ok{background:var(--jade);border-color:var(--jade);color:#fff}
.xs-add.is-ok svg{animation:xs-tick var(--t-move) var(--ease-out) both}
@keyframes xs-tick{
  0%{transform:scale(.4);opacity:0}
  60%{transform:scale(1.15);opacity:1}
  100%{transform:scale(1);opacity:1}
}

/* ============================================================
   3. VARIANTE FICHA EN MÓVIL — deslizable con asomo
   ============================================================ */
@media (max-width:700px){
  .xs-sec .xs-track{
    overflow-x:auto;overflow-y:hidden;
    /* el gesto muere en el extremo del carril y no arrastra la página */
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    /* el sangrado deja la primera tarjeta alineada con el texto y permite
       que la última llegue hasta el borde al final del recorrido */
    padding:2px 2px 6px;margin:0 -2px;
    scroll-padding-left:2px}
  .xs-sec .xs-track::-webkit-scrollbar{display:none}
  .xs-sec .xs-card{
    flex:0 0 76%;            /* la siguiente asoma: 375 / 390 / 430 px */
    max-width:268px;
    scroll-snap-align:start}
}
@media (max-width:380px){
  .xs-sec .xs-card{flex-basis:80%}
}

/* Lenis no debe robarle el gesto al carril. */
.lenis .xs-track{touch-action:pan-x pan-y}

/* ============================================================
   4. VARIANTE CARRITO — filas compactas

   El cajón mide 420 px como mucho. Tres tarjetas verticales ahí
   dentro salen a 125 px cada una: la foto se queda en miniatura y
   el nombre parte en tres renglones. En fila se leen las tres de un
   vistazo sin empujar el resumen fuera de la pantalla.

   CUATRO PIEZAS, CUATRO CELDAS, NINGUNA COMPARTIDA:

       ┌───────┬──────────────┬──────────┐
       │       │  nombre      │  precio  │
       │ foto  ├──────────────┼──────────┤
       │       │  presentac.  │    [+]   │
       └───────┴──────────────┴──────────┘

   La foto ocupa las dos filas de su columna. El precio arriba a la
   derecha y el botón debajo: así el precio queda pegado al nombre
   que lo explica, y el botón en la esquina donde cae el pulgar.
   ============================================================ */
.na-cross-box{margin:18px 0 4px;padding:16px 0 0;border-top:1px solid var(--line)}
.na-cross-box .xs-track{flex-direction:column;gap:9px}
.na-cross-box .xs-h{margin-bottom:11px}

.na-cross-box .xs-card{
  flex:none;display:grid;
  grid-template-columns:52px minmax(0,1fr) auto;
  grid-template-areas:'media tx pz' 'media var add';
  align-items:center;column-gap:10px;row-gap:6px;
  padding:9px 10px;border-radius:14px;background:var(--paper)}

.na-cross-box .xs-media{grid-area:media;align-self:center}
.na-cross-box .xs-img{width:52px;height:52px;margin:0;border-radius:11px}

.na-cross-box .xs-link{grid-area:tx;min-width:0}
/* En una fila de 52 px no caben categoría y descriptor sin apretar el
   nombre, que es lo único que identifica el producto. El dato que sí hace
   falta para decidir —la presentación— tiene su propia celda. */
.na-cross-box .xs-cat,
.na-cross-box .xs-pie{display:none}
.na-cross-box .xs-nm{font-size:14px;margin:0;line-height:1.3}

.na-cross-box .xs-vars{grid-area:var;margin:0;gap:5px;flex-wrap:nowrap}
.na-cross-box .xs-var{min-height:26px;padding:0 8px;font-size:11px}
.na-cross-box .xs-uni{grid-area:var;margin:0;font-size:11.5px}

.na-cross-box .xs-pz{grid-area:pz;margin:0;padding:0;font-size:15px;
  justify-self:end;align-self:center}
.na-cross-box .xs-cur{display:none}

.na-cross-box .xs-add{grid-area:add;width:auto;margin:0;min-height:34px;
  padding:0 12px;font-size:12.5px;justify-self:end;align-self:center}
/* Solo el "+" hasta que confirma: con el texto siempre visible, la fila se
   queda sin ancho para el nombre del producto. El icono dentro de un botón
   con borde ya se lee como "agregar", y al confirmar sí aparece la palabra. */
.na-cross-box .xs-add .t{display:none}
.na-cross-box .xs-add.is-ok .t{display:inline}
.na-cross-box .xs-add svg{width:17px;height:17px}

@media (max-width:420px){
  .na-cross-box .xs-card{grid-template-columns:46px minmax(0,1fr) auto;column-gap:8px}
  .na-cross-box .xs-img{width:46px;height:46px}
  .na-cross-box .xs-nm{font-size:13.5px}
}

/* ============================================================
   5. MOVIMIENTO REDUCIDO
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .xs-card,.xs-img img,.xs-var,.xs-add{transition-duration:1ms}
  .xs-add.is-ok svg{animation:none}
  .xs-card:hover .xs-img img{transform:none}
  .xs-sec .xs-track{scroll-snap-type:none}
}