/* ============================================================
   CH STORE — Tarjeta de producto del catálogo (index)

   TARJETA PÓSTER (2026-11). La eligió el dueño en /pruebatarjeta, la "B"
   (Póster con la marca más arriba), en negro:

       ● BARBAS HATS                ← franja con la marca, ENCIMA de la foto
       ┌───────────────────────┐
       │        (gorra)        │    ← la foto grande
       │ 77                    │    ← nombre y precio sobre la sombra
       │ L. 950.00             │
       └───────────────────────┘
       [▢][▢][▢][+4]                ← fotos chiquitas: cambian la grande
       ( Ver detalles )             ← botón de borde

   Cosas que pidió y que no hay que volver a poner:
     · Nada encima de la foto que diga "Disponible" / "Quedan 1": tapaba la
       gorra. Agotada se nota en el precio tachado y el botón gris; en vuelo,
       en el botón azul.
     · Dos tarjetas por fila en el teléfono, siempre.

   Negra en los dos temas (como la portada). Todo va bajo #product-grid
   para no tocar otras páginas.

   LAS MEDIDAS DE ADENTRO SIGUEN AL ANCHO DE LA TARJETA, no al de la pantalla
   (container queries: unidades cqi). Una tarjeta de 165 px en un iPhone SE y
   una de 370 px en una Mac llevan la letra y los márgenes proporcionados sin
   escribir un caso por pantalla. Los navegadores que no las entienden se
   quedan con el valor en px que va justo antes.
   ============================================================ */

/* ---------- La grilla: 2 por fila en teléfono y tablet, 3 en PC/Mac ---------- */
#product-grid.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 640px) { #product-grid.grid { gap: 18px; } }
@media (min-width: 900px) { #product-grid.grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } }
#product-grid .cd-sk { aspect-ratio: 3 / 5.1; background: #111113; border-color: #1f1f22; }

/* ---------- La tarjeta ---------- */
#product-grid .card.cp {
    container-type: inline-size;
    display: flex; flex-direction: column; height: 100%;
    background: #111113; color: #fff;
    border-radius: var(--radius-ios); overflow: hidden;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
html[data-theme="dark"] #product-grid .card.cp { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07); }
#product-grid .card.cp:active { transform: scale(0.985); }
@media (hover: hover) {
    #product-grid .card.cp:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(0, 0, 0, 0.26); }
    html[data-theme="dark"] #product-grid .card.cp:hover { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 16px 34px rgba(0, 0, 0, 0.6); }
    #product-grid .card.cp:hover .cp-foto.lista > img { transform: scale(1.04); }
}
/* El destacado (Promo escrito en el panel) conserva su aro dorado. */
#product-grid .card.cp.destacado { outline: 2px solid rgba(255, 204, 0, 0.7); outline-offset: -2px; }

/* ---------- La franja de la marca, encima de la foto ---------- */
#product-grid .cp-marca {
    display: flex; align-items: center; gap: 7px;
    padding: 9px 11px;
    padding: 5.5cqi 6.5cqi;
    font-size: 10.5px; font-size: clamp(10px, 6cqi, 13px);
    font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase;
    white-space: nowrap; overflow: hidden; color: #fff;
}
#product-grid .cp-marca .badge-icon {
    width: 20px; height: 20px; width: clamp(18px, 12cqi, 26px); height: clamp(18px, 12cqi, 26px);
    border-radius: 50%; object-fit: cover; background: #fff; border: none; flex-shrink: 0;
}
#product-grid .cp-marca .badge-txt { overflow: hidden; text-overflow: ellipsis; }
#product-grid .cp-marca[data-logos] .badge-icon, #product-grid .cp-marca[data-logos] .badge-txt { transition: opacity 0.3s ease; }

/* ---------- La foto grande con el nombre y el precio encima ---------- */
#product-grid .cp-foto { position: relative; aspect-ratio: 4 / 4.7; background: #fff; overflow: hidden; }
/* Mientras carga, un brillo suave (igual que antes) en vez de un hueco. */
#product-grid .cp-foto::before {
    content: ''; position: absolute; inset: 0; z-index: 0;
    background: linear-gradient(100deg, #f1f1f4 30%, #fafafb 50%, #f1f1f4 70%); background-size: 220% 100%;
    animation: fotoBrillo 1.3s linear infinite; transition: opacity 0.3s ease;
}
#product-grid .cp-foto.lista::before, #product-grid .cp-foto.sin-foto::before { opacity: 0; animation: none; }
#product-grid .cp-foto > img {
    position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%;
    object-fit: contain; padding: 4% 6% 27%;
    opacity: 0; transition: opacity 0.35s ease, transform 0.35s ease;
}
#product-grid .cp-foto.lista > img { opacity: 1; }
#product-grid .cp-foto.sin-foto > img { visibility: hidden; }
#product-grid .cp-sombra {
    position: absolute; left: 0; right: 0; bottom: 0; height: 56%; z-index: 2; pointer-events: none;
    background: linear-gradient(to top, #111113 16%, rgba(17, 17, 19, 0.82) 42%, rgba(17, 17, 19, 0));
}
#product-grid .cp-abajo {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
    padding: 0 11px 10px; padding: 0 6.5cqi 6cqi;
}
#product-grid .cp .card-title {
    margin: 0; min-height: 0; color: #fff;
    font-size: 15px; font-size: clamp(14px, 8.6cqi, 23px);
    font-weight: 800; letter-spacing: -0.4px; line-height: 1.15;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
#product-grid .cp .card-price, #product-grid .cp .card-precio-fila .card-price {
    margin: 4px 0 0; color: #fff; text-decoration: none;
    font-size: 15px; font-size: clamp(14px, 8.2cqi, 20px);
    font-weight: 850; letter-spacing: -0.4px; white-space: nowrap;
}
#product-grid .cp .card-precio-fila { display: flex; align-items: baseline; gap: 2px 7px; flex-wrap: wrap; margin: 0; }
#product-grid .cp .card-price-antes { color: #a1a1a6; font-size: 11px; font-size: clamp(11px, 6cqi, 14px); font-weight: 700; text-decoration: line-through; }
#product-grid .cp.out-of-stock .card-title, #product-grid .cp.out-of-stock .card-price { color: #a1a1a6; }
#product-grid .cp.out-of-stock .card-price { text-decoration: line-through; }

/* La estrellita de "destacado" va arriba a la izquierda de la foto. */
#product-grid .cp .badge-destacado { top: 8px; bottom: auto; left: 8px; z-index: 4; }

/* ---------- Las fotos chiquitas ---------- */
#product-grid .cp-minis {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px; gap: 3cqi;
    padding: 9px 10px 0; padding: 5cqi 6cqi 0;
}
#product-grid .cp-mini, #product-grid .cp-mas {
    aspect-ratio: 1 / 1; border-radius: 8px; border-radius: clamp(7px, 4.5cqi, 12px); overflow: hidden;
}
#product-grid .cp-mini {
    padding: 0; margin: 0; background: #fff; border: 1.5px solid transparent; cursor: pointer;
    -webkit-appearance: none; appearance: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
    transition: border-color 0.2s ease, transform 0.15s ease;
}
#product-grid .cp-mini.on { border-color: #fff; }
#product-grid .cp-mini:active { transform: scale(0.92); }
#product-grid .cp-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
#product-grid .cp-mas {
    display: flex; align-items: center; justify-content: center; background: #2c2c2e; color: #a1a1a6;
    font-size: 11px; font-size: clamp(10px, 6cqi, 14px); font-weight: 800;
}

/* ---------- El botón ---------- */
#product-grid .cp-pie { margin-top: auto; padding: 10px 10px 11px; padding: 5.5cqi 6cqi 6.5cqi; }
#product-grid .cp-ver {
    display: block; text-align: center;
    padding: 9px 6px; padding: clamp(9px, 5.4cqi, 13px) 6px;
    border-radius: 12px; border-radius: clamp(11px, 6.5cqi, 15px);
    border: 1.5px solid #fff; color: #fff;
    font-size: 12.5px; font-size: clamp(12.5px, 7.2cqi, 15px); font-weight: 800;
    transition: background 0.2s ease, color 0.2s ease;
}
@media (hover: hover) { #product-grid .card.cp:hover .cp-ver { background: #fff; color: #111113; } }
#product-grid .cp.cp-vuelo .cp-ver { border-color: var(--accent); color: #4da3ff; }
@media (hover: hover) { #product-grid .card.cp.cp-vuelo:hover .cp-ver { background: var(--accent); color: #fff; } }
#product-grid .cp.out-of-stock .cp-ver { border-color: #3a3a3c; color: #8e8e93; }
@media (hover: hover) { #product-grid .card.cp.out-of-stock:hover .cp-ver { background: #2c2c2e; color: #fff; } }

/* ---------- Combos (promociones) ----------
   Su foto es el anuncio entero (con su título), así que va completa, sin
   sombra encima, y el nombre y el precio pasan debajo. */
#product-grid .cp.cp-promo .cp-foto { aspect-ratio: 4 / 5; }
#product-grid .cp.cp-promo .cp-foto > img { object-fit: cover; padding: 0; }
#product-grid .cp.cp-promo .cp-sombra { display: none; }
#product-grid .cp.cp-promo .cp-abajo { position: static; padding: 9px 11px 0; padding: 5cqi 6.5cqi 0; }
#product-grid .cp.cp-promo .card-price { color: var(--success-green); }

@media (prefers-reduced-motion: reduce) {
    #product-grid .cp-foto::before { animation: none; }
    #product-grid .card.cp, #product-grid .cp-foto > img { transition: none; }
}