/* ═══════════════════════════════════════════════════════════════════
   assets/css/tarjeta-producto.css — LA TARJETA DE PRODUCTO (paso 50)
   -------------------------------------------------------------------
   Los estilos de la tarjeta del catálogo y de su ficha desplegable.
   Hasta el paso 49 vivían dentro del <style> de catalogo.html; desde el
   paso 50 la MISMA tarjeta sale también en producto.php (similares y
   te podría interesar) y en categoria.php, y la pinta el mismo
   JavaScript (assets/js/tarjeta-producto.js). Una copia de estas reglas
   por página duraría hasta el primer retoque.

   Se movieron tal cual. Lo que es SOLO del catálogo —su rejilla
   (#contenedor-productos), el resaltado del filtro de edad, la tarjeta
   abierta de borde a borde en el móvil— se quedó en catalogo.html.

   Lo nuevo del paso 50 va marcado: el título en negro (pedido F2a), las
   tiras de producto.php, la rejilla de categoria.php y el aviso
   flotante de las páginas que no tienen app2.js.

   ⚠️ Se incluye ANTES del <style> de cada página: lo que la página
   necesite cambiar lo cambia después, sin !important.
   ═══════════════════════════════════════════════════════════════════ */

/* Las variables de catalogo.html, para las páginas que no las tienen.
   Mismos valores: si cambian allá, cambian aquí. El :root de la página
   va después y manda. */
:root{
  --primary:#084f85; --primary-d:#042741; --primary-l:#e8f1f8;
  --secondary:#91717b; --secondary-l:#f5eef0;
  --accent:#f9b234; --red:#be2c2e;
  --white:#fff; --text:#2c2c2c; --muted:#6c757d;
  --radius:14px;
  --shadow:0 3px 14px rgba(8,79,133,.09);
  --shadow-h:0 10px 30px rgba(8,79,133,.18);
  --trans:all .3s cubic-bezier(.25,1,.5,1);
  /* PASO 50 (F2a): el color de los títulos de producto. Negro de verdad
     —no el gris del texto—, para que el nombre sea lo primero que se lee. */
  --titulo-producto:#111;
}

/* Medidas fijas de cada zona de la tarjeta resumida: así todas las tarjetas
   miden exactamente igual, tenga el producto 1 categoría o 10, título corto
   o larguísimo, con precio mayorista o sin él. */
:root{
  --card-img-h:185px;   /* foto                      */
  --card-cats-h:26px;   /* mini-slider de categorías */
  --card-title-h:2.6em; /* título: 2 líneas exactas  */
  --card-desc-h:2.5em;  /* descripción: 2 líneas     */
  --card-vars-h:24px;   /* mini-slider de variantes  */
  --card-edad-h:24px;   /* chip de edad              */
  --card-precio-h:66px; /* caja de precios           */
}
@media(max-width:767px){:root{--card-img-h:140px;--card-precio-h:60px;--card-title-h:2.6em;--card-desc-h:2.4em;}}
@media(max-width:380px){:root{--card-img-h:118px;--card-cats-h:24px;--card-vars-h:22px;}}

/* Expansión: la tarjeta abierta ocupa toda la fila de su rejilla. */
.fuerza-full-width{grid-column:1/-1!important;width:100%!important;}
.product-item{min-width:0;max-width:100%;transition:all .4s ease;}

/* ─── TARJETAS ──────────────────────────────────── */
.card-producto{
  background:var(--white);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;
  height:100%;         /* llena la celda del grid */
  min-width:0;max-width:100%;
  display:flex;flex-direction:column;
  position:relative;cursor:default;
  transition:var(--trans);border:2px solid transparent;
}
/* Línea superior en hover */
.card-producto::after{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--primary),var(--secondary));
  transform:scaleX(0);transform-origin:left;transition:transform .4s ease;
}
.card-producto:hover{transform:translateY(-5px);box-shadow:var(--shadow-h);}
.card-producto:hover::after{transform:scaleX(1);}

/* Imagen con zoom */
.img-container{
  overflow:hidden;cursor:pointer;background:#fafafa;
  height:var(--card-img-h);flex:0 0 var(--card-img-h);
}
.img-container img{
  display:block;height:100%;width:100%;object-fit:contain;padding:8px;
  transition:transform .45s cubic-bezier(.25,1,.5,1);
}
.card-producto:hover .img-container img{transform:scale(1.06);}

/* Vista resumida: flex columna para empujar acciones al fondo */
.vista-resumida{display:flex!important;flex-direction:column;flex:1;}
.vista-expandida{display:none!important;}
.card-producto.expandido{border-color:var(--primary);box-shadow:0 12px 38px rgba(8,79,133,.18);}
.card-producto.expandido .vista-resumida{display:none!important;}
.card-producto.expandido .vista-expandida{
  display:flex!important;animation:fadeInUp .4s ease;
}
@keyframes fadeInUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* ── GALERÍA DE LA FICHA AMPLIADA ───────────────────────────────
   Foto grande + tira de miniaturas con su nombre debajo. */
.galeria-prod{width:100%;min-width:0;display:flex;flex-direction:column;gap:8px;}
.gal-marco{
  position:relative;width:100%;display:flex;align-items:center;justify-content:center;
  background:#fafbfc;border-radius:10px;overflow:hidden;
}
.gal-marco .exp-galeria{
  display:block;max-width:100%;max-height:380px;width:auto;object-fit:contain;
  transition:opacity .25s ease;
}
.gal-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:32px;height:32px;border:none;border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--primary);
  font-size:1.3rem;line-height:1;cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.16);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .2s,background .2s;z-index:3;
}
.gal-marco:hover .gal-nav{opacity:1;}
.gal-nav:hover{background:var(--primary);color:#fff;}
.gal-prev{left:8px;} .gal-next{right:8px;}
.gal-contador{
  position:absolute;bottom:8px;right:8px;z-index:3;
  background:rgba(0,0,0,.55);color:#fff;border-radius:20px;
  padding:1px 9px;font-size:.68rem;font-weight:700;
}
.gal-pie{
  text-align:center;font-size:.78rem;font-weight:700;color:var(--primary);
  min-height:1.2em;line-height:1.2;overflow-wrap:anywhere;
}
.gal-tira{
  display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;
  scrollbar-width:thin;scroll-snap-type:x proximity;
}
.gal-tira::-webkit-scrollbar{height:5px;}
.gal-tira::-webkit-scrollbar-thumb{background:#cfd9e4;border-radius:4px;}
.gal-thumb{
  flex:0 0 auto;width:66px;padding:2px;cursor:pointer;scroll-snap-align:start;
  background:#fff;border:2px solid #e3eaf1;border-radius:8px;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  transition:var(--trans);
}
.gal-thumb:hover{border-color:var(--primary-l);transform:translateY(-2px);}
.gal-thumb.activo{border-color:var(--primary);box-shadow:0 2px 8px rgba(8,79,133,.2);}
.gal-thumb img{width:100%;height:48px;object-fit:contain;border-radius:5px;display:block;}
.gal-thumb-nom{
  font-size:.55rem;font-weight:700;color:var(--muted);line-height:1.1;
  width:100%;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.gal-thumb.activo .gal-thumb-nom{color:var(--primary);}

/* ── SELECTOR DE COLOR DE LA GALERÍA ────────────────────────────
   Tocar un color lleva la foto grande a ese color, como en
   MercadoLibre. Solo aparece si el producto tiene dos o más colores
   con foto y con existencias (ver coloresConFoto en tarjeta-producto.js). */
.gal-colores{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  margin:6px 0 2px;justify-content:center;
}
.gal-colores-tit{
  font-size:.7rem;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.04em;margin-right:2px;
}
.gal-color{
  border:2px solid #e3eaf1;background:#fff;color:var(--muted);
  border-radius:20px;padding:3px 12px;cursor:pointer;
  font-size:.72rem;font-weight:700;line-height:1.3;
  transition:var(--trans);
}
.gal-color:hover{border-color:var(--primary-l);color:var(--primary);}
.gal-color.activo{
  border-color:var(--primary);background:var(--primary);color:#fff;
  box-shadow:0 2px 8px rgba(8,79,133,.25);
}
/* El teclado tiene que ver dónde está: el botón activo se distingue por
   color, y sin esto quien navega con Tab no vería el foco. */
.gal-color:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}

/* ── VISTA EXPANDIDA: que nunca se salga del contenedor ─────────
   Todo lo de adentro puede encogerse (min-width:0) y los textos largos
   parten palabra antes que desbordar. */
.vista-expandida{width:100%;max-width:100%;min-width:0;}
.vista-expandida > *{min-width:0;max-width:100%;}
.vista-expandida img,
.vista-expandida .carousel{max-width:100%;}
.vista-expandida h3,
.vista-expandida p,
.vista-expandida .info-titulo,
.vista-expandida .badge{overflow-wrap:anywhere;}
.vista-expandida h3{font-size:clamp(1rem,2.4vw,1.55rem);line-height:1.25;}
.exp-scroll{max-height:280px;}
.exp-cats{display:flex;flex-wrap:wrap;gap:4px;min-width:0;}
.exp-cats .badge-cat{white-space:normal;overflow-wrap:anywhere;}

@media(max-width:767px){
  /* La letra baja de tamaño para que quepa toda la información sin
     encimarse ni salirse del recuadro. (Que la tarjeta abierta se coma el
     margen de la pantalla es cosa del catálogo: está en catalogo.html.) */
  .vista-expandida .col-md-5{padding:.6rem!important;border:none!important;}
  .vista-expandida .col-md-7{padding:.75rem!important;}
  .vista-expandida h3{font-size:clamp(.95rem,4.2vw,1.15rem);}
  .vista-expandida .fs-4{font-size:clamp(.95rem,4.4vw,1.2rem)!important;}
  .vista-expandida .precio-val{font-size:clamp(.8rem,3.6vw,1rem);}
  .vista-expandida .small,
  .vista-expandida p,
  .vista-expandida .form-label{font-size:.76rem!important;}
  .vista-expandida .badge,
  .vista-expandida .badge-cat{font-size:.62rem;}
  .vista-expandida .btn{font-size:.78rem;padding:.4rem .6rem;}
  .vista-expandida .alert{padding:.5rem .6rem!important;font-size:.72rem;}
  .vista-expandida .info-titulo{font-size:.68rem;}
  .exp-scroll{max-height:min(46vh,300px);}
  .gal-marco .exp-galeria{max-height:min(50vw,240px);}
  .gal-nav{opacity:1;width:28px;height:28px;font-size:1.1rem;}   /* en táctil no hay hover */
  .gal-thumb{width:56px;}
  /* En móvil los colores se apilan mal si son muchos: se dejan en una
     sola fila con desplazamiento lateral, igual que la tira de fotos. */
  .gal-colores{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
               scrollbar-width:none;padding-bottom:2px;}
  .gal-colores::-webkit-scrollbar{display:none;}
  .gal-color{flex:0 0 auto;font-size:.68rem;padding:3px 10px;}
  .gal-thumb img{height:40px;}
  .gal-pie{font-size:.72rem;}
  /* Los controles de compra se apilan en vez de apretarse */
  .vista-expandida .exp-acciones > [class*="col-"]{flex:0 0 100%;max-width:100%;}
}
@media(max-width:380px){
  .vista-expandida .col-md-7{padding:.55rem!important;}
  .vista-expandida .small,
  .vista-expandida p{font-size:.72rem!important;}
}

/* Card body uniforme. Va acotado a la tarjeta: `.card-body` es una clase
   de Bootstrap y fuera de aquí (el carrito, un aviso) no es asunto suyo.
   catalogo.html conserva además su regla suelta de siempre. */
.card-producto .card-body{flex:1;min-width:0;display:flex;flex-direction:column;padding:.7rem .8rem .8rem!important;}
.cats-row{height:var(--card-cats-h);min-width:0;margin-bottom:4px;overflow:hidden;}
.prod-title{
  font-size:.88rem;font-weight:700;margin-bottom:4px;cursor:pointer;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;height:var(--card-title-h);line-height:1.3;
  overflow-wrap:anywhere;
  color:var(--titulo-producto);
}
/* PASO 50 (F2a): el título en negro y en negrilla, también cuando es un
   enlace. Desde el paso 45 el nombre es un <a> a la página del producto
   y heredaba el azul subrayado de los enlaces de Bootstrap. */
.prod-title .enlace-ficha{color:inherit;font-weight:700;text-decoration:none;}
.prod-title .enlace-ficha:hover,
.prod-title .enlace-ficha:focus-visible{text-decoration:underline;}
.vista-expandida .exp-titulo{color:var(--titulo-producto);font-weight:700;}

/* Descripción corta bajo el nombre: 2 líneas exactas, siempre ocupa lo
   mismo (aunque el producto no tenga descripción) para que las tarjetas
   sigan midiendo igual. */
.prod-desc{
  height:var(--card-desc-h);margin:0 0 4px;
  font-size:.72rem;line-height:1.25;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;overflow-wrap:anywhere;
}
.vars-row{height:var(--card-vars-h);min-width:0;overflow:hidden;margin-bottom:4px;}
.edad-row{height:var(--card-edad-h);overflow:hidden;margin-bottom:6px;}

/* Las estrellas de la tarjeta (paso 46). Ocupan una línea fija para
   que las tarjetas con reseñas y sin ellas midan lo mismo: si no, la
   rejilla se desalinea en cuanto un producto estrena su primera. */
.tarjeta-estrellas{
  display:flex;align-items:center;gap:4px;height:16px;margin:-2px 0 2px;
  color:var(--accent);font-size:.68rem;line-height:1;
}
.tarjeta-estrellas small{color:var(--muted);font-size:.64rem;}

/* Etiquetas de variantes (tallas y colores disponibles) */
.chip-var{
  display:inline-flex;align-items:center;gap:3px;flex:0 0 auto;
  font-size:.64rem;font-weight:700;padding:2px 7px;border-radius:10px;
  white-space:nowrap;scroll-snap-align:start;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;
}
.chip-var i{font-size:.55rem;}
.chip-talla{background:var(--primary-l);color:var(--primary);}
.chip-color{background:var(--secondary-l);color:var(--secondary);}
.precio-box{
  background:#f8fafc;border:1px solid #e8edf2;border-radius:10px;margin-bottom:6px;
  height:var(--card-precio-h);display:flex;align-items:center;overflow:hidden;
}
.precio-box > .row{width:100%;margin:0;}
.precio-val{font-size:clamp(.78rem,2.2vw,1rem);white-space:nowrap;}

/* ── Mini-slider de categorías dentro de la tarjeta ──────────────
   Las categorías se desplazan DENTRO de la tarjeta (rueda, swipe o
   flechas) y nunca empujan su ancho: el carril tiene min-width:0 y
   scroll propio. */
.cats-slider{display:flex;align-items:center;gap:2px;height:100%;min-width:0;}
.cats-track{
  position:relative;
  flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:4px;
  overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;
  scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;
  overscroll-behavior-x:contain;
}
.cats-track::-webkit-scrollbar{display:none;}
.cats-track .badge-cat{
  flex:0 0 auto;scroll-snap-align:start;max-width:100%;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:0;
}
.cats-nav{
  display:none;flex:0 0 15px;width:15px;height:18px;padding:0;
  align-items:center;justify-content:center;
  border:none;background:transparent;color:var(--primary);
  font-size:.9rem;line-height:1;cursor:pointer;border-radius:4px;
  transition:background .2s,opacity .2s;
}
.cats-nav:hover{background:var(--primary-l);}
.cats-nav:disabled{opacity:.25;cursor:default;background:transparent;}
.cats-slider.desborda .cats-nav{display:flex;}

/* Los dos botones de la esquina de la foto.
   ───────────────────────────────────────────────────────────────────
   La tarjeta entera lleva a la página del producto, así que estos dos
   son lo único de la vista resumida que hace otra cosa: por eso son
   redondos y van sobre la foto, separados del resto.

   El de AMPLIAR se ve siempre. Es la única forma de mirar el producto
   sin salir del listado, y escondido tras el hover no existiría en un
   móvil. El de compartir sí aparece al pasar por encima: es una acción
   de segunda, y en pantalla pequeña se destapa igual (ver abajo). */
.btn-esquina{
  position:absolute;top:8px;
  width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.92);border:none;
  display:flex;align-items:center;justify-content:center;
  color:var(--primary);font-size:.85rem;
  box-shadow:0 2px 8px rgba(0,0,0,.14);
  transition:var(--trans);cursor:pointer;z-index:10;
}
.btn-esquina:hover{background:var(--primary);color:#fff;transform:scale(1.15);}

.btn-ampliar{right:8px;}
.btn-compartir{
  right:46px;
  opacity:0;transform:scale(.7) translateY(-4px);
}
.card-producto:hover .btn-compartir{opacity:1;transform:scale(1) translateY(0);}
.btn-compartir:hover{transform:scale(1.15)!important;}
/* Con teclado también: si no, el botón recibe el foco y no se ve. */
.btn-compartir:focus-visible{opacity:1;transform:none;}

/* Sin ratón no hay hover: en táctil se ven los dos desde el principio. */
@media (hover:none){
  .btn-compartir{opacity:1;transform:none;}
}

/* Toda la vista resumida es clicable (el manejador está en
   tarjeta-producto.js). El cursor es lo que lo anuncia; sin esto parece
   una ficha muerta. */
.vista-resumida{cursor:pointer;}
.vista-resumida .precio-box{cursor:pointer;}

/* Badges */
.badge-oferta-vibrante{
  background:linear-gradient(135deg,#ff3e3e,#c50000);color:#fff;
  font-weight:700;padding:.3em .6em;border-radius:6px;font-size:.72rem;
  display:inline-block;animation:pulseBadge 2s infinite;
}
@keyframes pulseBadge{0%,100%{box-shadow:0 2px 8px rgba(255,0,0,.3)}50%{box-shadow:0 4px 14px rgba(255,0,0,.6)}}
.badge-stock{
  background:rgba(255,255,255,.9);color:#333;
  padding:3px 7px;border-radius:4px;font-size:.7rem;font-weight:700;
  box-shadow:0 2px 5px rgba(0,0,0,.1);display:inline-block;
}
.badge-stock.alerta{color:var(--red);border:1px solid var(--red);}
.badge-cat{
  background:#e9ecef;color:#495057;font-size:.67rem;padding:2px 7px;
  border-radius:10px;margin-right:3px;cursor:pointer;transition:var(--trans);
  display:inline-block;font-weight:600;
}
.badge-cat:hover{background:var(--primary);color:#fff;transform:translateY(-1px);}
.edad-chip{
  display:inline-block;background:var(--secondary-l);color:var(--secondary);
  font-size:.7rem;font-weight:700;padding:2px 9px;border-radius:16px;
}
.info-titulo{
  display:block;font-size:.72rem;font-weight:700;text-transform:uppercase;
  color:var(--primary);margin-top:8px;
}
.precio-box-lg{background:#f8fafc;border:1px solid #e8edf2;border-radius:10px;}

@media(max-width: 480px) {
   .card-producto .card-body { padding: 0.5rem !important; } /* Reduce los bordes internos */
   .prod-title { font-size: 0.78rem; } /* Achica un poco el título */
   .precio-val { font-size: 0.9rem; } /* Achica el precio */
}

/* ── ENLACE A MERCADOLIBRE ──────────────────────────────────────
   Solo sale cuando el producto tiene una publicación ACTIVA allá; el
   enlace lo pone read.php desde el mapeo, no de un campo pegado a mano.

   Es DELIBERADAMENTE PEQUEÑO. Antes era un botón amarillo a todo lo
   ancho, del mismo tamaño y peso visual que "Agregar al carrito", así
   que las dos formas de comprar competían de tú a tú — y la de aquí es
   la única que no paga comisión. Ahora es un renglón discreto debajo
   del botón de compra: quien ya compra por MercadoLibre lo encuentra
   sin problema, y a quien está decidiendo no se le ofrece una salida
   del mismo tamaño que la entrada.

   Sigue siendo un objetivo táctil legítimo (32 px de alto), porque
   esconderlo hasta hacerlo impracticable sería la otra clase de error. */
.btn-ml{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  min-height:32px;padding:4px 12px;margin:6px auto 0;
  border:1px solid #e0c200;border-radius:20px;
  background:#fff8d6;color:#6b5800;
  font-size:.72rem;font-weight:700;line-height:1.2;
  text-decoration:none;white-space:nowrap;
  transition:var(--trans);
}
.btn-ml:hover,.btn-ml:focus-visible{
  background:#ffe600;color:#3c3000;border-color:#c9ae00;
}
.btn-ml:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}
.btn-ml i{font-size:.8rem;}
/* Va centrado en su propia línea, sin estirar la columna. */
.btn-ml-fila{display:flex;justify-content:center;}

/* ═══════════════════════════════════════════════════════════════════
   PASO 50 · LO NUEVO
   ═══════════════════════════════════════════════════════════════════ */

/* Los botones de la tarjeta y del panel de tallas y colores, con el azul
   de la tienda y no con el de Bootstrap. catalogo.html lo hace para toda
   la página; en producto.php y categoria.php hace falta aquí. */
.card-producto .btn-primary,
#modalVariantes .btn-primary{background:var(--primary);border-color:var(--primary);}
.card-producto .btn-primary:hover,
#modalVariantes .btn-primary:hover{background:var(--primary-d);border-color:var(--primary-d);}
#modalVariantes .btn-outline-primary{color:var(--primary);border-color:var(--primary);}
#modalVariantes .btn-outline-primary:hover,
#modalVariantes .btn-outline-primary.active{background:var(--primary);border-color:var(--primary);color:#fff;}

/* El botón de compra de un producto sin existencias: se ve, pero no se
   puede pulsar. Antes el botón seguía activo y el aviso llegaba después. */
.btn-agotado{background:#eef1f4!important;color:var(--muted)!important;border-color:#e3e8ee!important;cursor:not-allowed;}

/* ── LAS TIRAS DE producto.php ───────────────────────────────────
   «Productos similares» y «Te podría interesar». En escritorio, una
   rejilla como la del catálogo (cuatro por fila); en el móvil, un
   carrusel que se desliza de lado, como en MercadoLibre.

   Al desplegar una ficha el carrusel deja de serlo (`con-ampliada`, lo
   pone tarjeta-producto.js): una ficha abierta dentro de una fila que se
   desliza de lado no se puede leer. Al cerrarla, vuelve el carrusel. */
.kr-tira,
.kr-rejilla{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;
  align-items:stretch;
}
@media(max-width:991px){.kr-tira,.kr-rejilla{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(max-width:767px){
  .kr-rejilla,
  .kr-tira.con-ampliada{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  /* `grid-auto-columns` FIJO (46 %) y no minmax(0,46%): con un mínimo de
     cero, el navegador reparte el ancho visible entre las ocho tarjetas
     y cada una se queda en 26 px en vez de desbordar hacia el lado. Con
     46 % caben dos y asoma la tercera, que es lo que invita a deslizar. */
  .kr-tira:not(.con-ampliada){
    grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:46%;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    gap:10px;padding:4px 2px 10px;scrollbar-width:thin;
  }
  .kr-tira:not(.con-ampliada) > .product-item{scroll-snap-align:start;}
}
@media(max-width:380px){.kr-rejilla,.kr-tira.con-ampliada{gap:8px;}}

/* ── EL AVISO FLOTANTE de las páginas sin app2.js ─────────────────
   Por encima del panel de tallas y colores (z-index 1055 de Bootstrap):
   el panel se queda abierto después de añadir, y un aviso tapado por él
   sería un aviso que no se ve. */
.krt-aviso{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:2000;
  background:#1f7a4d;color:#fff;padding:11px 20px;border-radius:9px;
  font-weight:600;font-size:.9rem;box-shadow:0 8px 24px rgba(0,0,0,.2);
  max-width:calc(100vw - 32px);text-align:center;
}
.krt-aviso.error{background:var(--red);}
.krt-aviso a{color:#fff;text-decoration:underline;margin-left:6px;}