/* Estilos de la tarjeta de producto compartida (_ProductoCard.cshtml).
   Las reglas .exp-* se comparten desde acá para que Favoritos/Home rendericen
   la MISMA card que Explorar. (Explorar mantiene su copia inline; son idénticas.) */

/* ─── Grid + card ───
   Feed denso estilo marketplace (ref. Temu): 2 columnas casi sin margen en
   mobile, masonry con columnas defasadas (alturas de imagen alternadas),
   más columnas en pantallas grandes. CSS columns = masonry real sin JS. */
.exp-grid {
    column-count: 2;
    column-gap: 5px;
    background: transparent;
}
@media (min-width: 576px)  { .exp-grid { column-count: 3; column-gap: 8px; } }
@media (min-width: 992px)  { .exp-grid { column-count: 4; } }
@media (min-width: 1400px) { .exp-grid { column-count: 5; } }

/* En mobile el feed va de borde a borde (anula el padding del .container) */
@media (max-width: 575px) {
    .exp-grid {
        margin-left: calc(-.5 * var(--bs-gutter-x, 1.5rem));
        margin-right: calc(-.5 * var(--bs-gutter-x, 1.5rem));
    }
}

.exp-grid .exp-card {
    break-inside: avoid;
    margin-bottom: 5px;
    display: block;
}

/* Defasaje de columnas: alturas de imagen alternadas (el object-fit:cover
   absorbe el recorte). !important porque el partial fija 3/4 inline. */
.exp-grid .exp-card:nth-child(3n+2) .exp-img-wrap { aspect-ratio: 3 / 4.5 !important; }
.exp-grid .exp-card:nth-child(3n)   .exp-img-wrap { aspect-ratio: 3 / 3.6 !important; }

.exp-card {
    background: #fff;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    transition: transform .22s ease, box-shadow .22s ease;
}
.exp-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .10);
}
@media (prefers-reduced-motion: reduce) {
    .exp-card { transition: none; }
    .exp-card:hover { transform: none; }
}

.exp-img-wrap {
    position: relative;
    aspect-ratio: 3 / 4;   /* el sizing definitivo va inline en el partial */
    overflow: hidden;
    background: #f4f3f1;
}
.exp-img-wrap img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.exp-card:hover .exp-img-wrap img { transform: scale(1.05); }

.exp-card-body { padding: 14px 12px 18px; text-align: center; }
.exp-store  { font-size: .68rem; color: #9a948b; letter-spacing: .11em; text-transform: uppercase; font-weight: 500; }
.exp-name   { font-size: .92rem; font-weight: 500; color: #2b2724; margin: 5px 0 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.exp-price  { font-size: .92rem; font-weight: 600; color: #1c1a18; letter-spacing: .01em; }

/* Dentro del feed denso la card se descarga de info: texto a la izquierda,
   tipografía compacta, precio protagonista; en mobile la tienda no se muestra. */
.exp-grid .exp-card-body { padding: 7px 9px 11px; text-align: left; }
.exp-grid .exp-name  { font-size: .82rem; margin: 0 0 3px; }
.exp-grid .exp-price { font-size: .95rem; font-weight: 700; }
@media (max-width: 767px) {
    .exp-grid .exp-store { display: none; }
    .exp-grid .pc-img-counter { display: none; }
}

/* Corazón de favorito: glifo pelado con halo (sin círculo blanco que lo
   camuflaba sobre fondos claros), área táctil generosa. */
.exp-fav-btn {
    position: absolute;
    top: 2px; left: 2px;
    z-index: 5;
    background: none;
    border: none;
    width: 42px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    color: #1c1a18;
}
.exp-fav-btn i {
    font-size: 1.2rem;
    text-shadow: 0 0 5px rgba(255,255,255,.95), 0 1px 2px rgba(0,0,0,.18);
}
.exp-fav-btn:active { transform: scale(.85); transition: transform 90ms ease; }

/* ─── Press-and-hold (peek): evita el callout de iOS, el arrastre de la imagen
   y la selección de texto mientras se mantiene presionada la card. ─── */
.exp-card a { -webkit-touch-callout: none; }
.exp-card img { -webkit-user-drag: none; user-select: none; }
.exp-card-peeking { cursor: progress; }

/* ─── Badges nuevos (Nuevo / Probador) ─── */

/* Arriba-DERECHA: el corazón de favorito ocupa arriba-izquierda; esta esquina
   queda libre para los badges de estado (Nuevo / Oferta / Últimas). */
.pc-badges {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 4;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-end;
    pointer-events: none;
}

.pc-badge {
    font-size: .66rem;
    font-weight: 600;
    line-height: 1;
    padding: 4px 7px;
    border-radius: 999px;
    letter-spacing: .02em;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
    white-space: nowrap;
}

.pc-badge-nuevo {
    background: #111;
    color: #fff;
}

.pc-badge-probador {
    background: rgba(255, 255, 255, .92);
    color: #6d28d9;
    border: 1px solid rgba(109, 40, 217, .25);
}
.pc-badge-oferta { background: #d71920; color: #fff; }
/* "Últimas": violeta de la marca (antes ámbar) */
.pc-badge-stock { background: #f3ecfb; color: #6d28d9; border: 1px solid rgba(109, 40, 217, .3); }

/* Acciones rápidas (vista rápida + probar) — pila de iconos esquina inf. der. */
.pc-actions {
    position: absolute;
    bottom: 8px;
    right: 8px;
    z-index: 4;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pc-action-btn {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    font-size: 1rem;
    text-decoration: none;
    cursor: pointer;
    background: none;
    box-shadow: none;
}
.pc-action-btn i { text-shadow: 0 0 5px rgba(255,255,255,.95), 0 1px 2px rgba(0,0,0,.18); }
.pc-action-btn:active { transform: scale(.85); transition: transform 90ms ease; }
.pc-quickview { color: #1c1a18; border: none; }
.pc-probar { color: #6d28d9; }
.pc-probar:hover { color: #6d28d9; }

/* ─── Carrusel de imágenes en la card (card-gallery.js) ─── */
/* Flechas del carrusel: glifo negro pelado (sin círculo blanco), halo para
   contraste sobre fotos, hit-area grande. */
.pc-img-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 40px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: #1c1a18;
    font-size: 1.15rem;
    cursor: pointer;
    box-shadow: none;
    opacity: 0;
    transition: opacity .18s ease;
}
.pc-img-nav i { text-shadow: 0 0 5px rgba(255,255,255,.95), 0 1px 2px rgba(0,0,0,.2); }
.pc-img-prev { left: 0; }
.pc-img-next { right: 0; }
.exp-card:hover .pc-img-nav { opacity: 1; }
.pc-img-nav:active { transform: translateY(-50%) scale(.85); transition: transform 90ms ease; }

/* En touch (sin hover) las flechas quedan siempre visibles, más discretas */
@media (hover: none) {
    .pc-img-nav { opacity: .85; }
}

.pc-img-counter {
    position: absolute;
    bottom: 8px;
    left: 8px;
    z-index: 4;
    font-size: .62rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .45);
    color: #fff;
    pointer-events: none;
    letter-spacing: .03em;
}

/* ─── Micro-interacciones ─── */

/* Pop del corazón al togglear favorito (lo dispara producto-card.js) */
@keyframes pc-fav-pop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.35); }
    100% { transform: scale(1); }
}
.pc-fav-pop { animation: pc-fav-pop .35s ease; }

@media (prefers-reduced-motion: reduce) {
    .pc-fav-pop { animation: none; }
    .exp-card:hover .exp-img-wrap img { transform: none; }
}