/* =====================================================================
   conversion-v5.css — Mejoras de conversión (5-nov-2026)
   ---------------------------------------------------------------------
   MISMO archivo en Limonni y Niccola: solo usa las variables de marca
   (--black, --muted, --stone, --font-data...), así cada sitio lo pinta
   con su identidad. Se carga al final (includes/layout_header.php), así
   que estas reglas ganan sin tocar style.css, catalogo.css ni diseno-v2.css.
   Quitar este archivo devuelve el sitio a como estaba.
   ===================================================================== */

/* 1. La portada medía 604 px de ancho en un celular de 390 (583 en Niccola):
      el bloque de cápsulas + "Lo más pedido" usaba una columna "1fr", que no
      se encoge por debajo de su contenido. Todo el sitio se movía de lado. */
@media (max-width: 1100px) {
  .caps-zona.con-top { grid-template-columns: minmax(0, 1fr); }
}
.caps-zona > *, .caps-top, .caps-top-list, .caps-selector-row { min-width: 0; }
html { overflow-x: clip; }

/* 2. Acceso a país, moneda e idioma dentro del menú (en celular la franja
      superior de preferencias se oculta: ver punto 3). */
.nav-drawer-prefs {
  display: block; margin: 22px 0 6px; padding: 12px 0;
  border-top: 1px solid var(--stone-2, #ddd6c9); border-bottom: 1px solid var(--stone-2, #ddd6c9);
  font-size: 14px; color: var(--ink, #1a1a1a); text-decoration: none;
}

@media (max-width: 767px) {
  /* 3. Primera pantalla del celular: la franja de país/moneda/idioma ocupaba
        ~50 px antes del logo en TODAS las páginas. Si la franja trae una
        promoción (ticker), la promoción se queda; solo salen las píldoras. */
  .data-bar .pref-pills { display: none; }
  .data-bar.v5-vacia { display: none; }

  /* 4. Portada: menos encabezado, prendas antes. */
  body.page-home .home-hero { min-height: 0 !important; padding-top: 18px; padding-bottom: 12px; gap: 14px; }
  body.page-home .home-hero-collage,
  body.page-home .home-hero-envio,
  body.page-home .home-hero-text .eyebrow { display: none; }
  body.page-home .home-hero-text h1 { font-size: clamp(30px, 8.6vw, 40px); }

  /* 5. Barra fija de la ficha: con 9 tallas (XXS a 5XL en Niccola) la fila se
        cortaba sin aviso. Ahora se desliza y se ve que hay más. */
  .pdp-sticky-tallas {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent);
            mask-image: linear-gradient(90deg, #000 86%, transparent);
  }
  .pdp-sticky-tallas::-webkit-scrollbar { display: none; }
  .pdp-sticky-talla-btn { flex: 0 0 auto; }

  /* 6. Aviso de cookies: en la ficha tapaba el botón de agregar. La barra fija
        baja al borde y el aviso queda ENCIMA de ella (la altura la pone
        conversion-v5.js), más compacto. */
  body.page-producto.con-aviso-cookies .pdp-sticky { bottom: 0; }
  .cookie-banner--aviso { left: 10px; right: 10px; max-width: none; padding: 9px 12px; gap: 10px; font-size: 12px; }
  .cookie-banner--aviso .cookie-banner-texto p { font-size: 12px; line-height: 1.4; margin: 0; }
}

/* 7. "Más como esta" justo debajo del botón de comprar (producto.php). */
.v5-rail { margin: 22px 0 4px; }
.v5-rail-tit {
  font-family: var(--font-data, inherit); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted, #6f6a62); margin: 0 0 10px;
}
.v5-rail-fila {
  display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity;
  scrollbar-width: none; padding-bottom: 4px;
}
.v5-rail-fila::-webkit-scrollbar { display: none; }
.v5-rail-card { flex: 0 0 128px; scroll-snap-align: start; text-decoration: none; color: var(--ink, #1a1a1a); min-width: 0; }
.v5-rail-card img {
  display: block; width: 128px; height: 170px; object-fit: cover;
  border-radius: 6px; background: var(--stone, #ece7df);
}
.v5-rail-card b {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 12.5px; font-weight: 500; line-height: 1.3; margin-top: 7px;
}
.v5-rail-card span { display: block; font-size: 12.5px; margin-top: 2px; }
.v5-rail-card .precio-promo { display: inline; }

/* 8. El mensaje "1 prenda en el carrito — subtotal..." recibía clics de
      frustración: la gente lo tocaba para ir al carrito. Ahora es un enlace. */
.pdp-carrito-msg.v5-link { cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) { .v5-rail-fila { scroll-behavior: auto; } }