/**
 * Archivo: assets/css/shared/product-card.css
 * Sistema: Allage - Tarjeta de producto unificada
 * Versión: 1.2.0
 * Fecha:   2026-06-10
 *
 * Clase raíz .ltn-product-card con modificadores BEM por contexto.
 * Incluye aliases temporales de las clases anteriores para mantener
 * la compatibilidad visual durante la migración incremental (F.2–F.5).
 * Los aliases se eliminan en F.6 una vez sustituidas todas las tarjetas.
 *
 * RESPONSIVE: la tarjeta NO tiene ancho propio — ocupa el 100% del hueco
 * que le asigna el grid contenedor. Los breakpoints @media escalan los
 * elementos internos entre tarjeta estrecha (varias por fila) y ancha.
 * NO se usa @container (phytallage es tema PHP clásico, compatibilidad Webempresa).
 *
 * Breakpoints de escalado interno:
 *   ≤ 480px  → tarjetas estrechas (móvil, grid comprimido, ≤2 columnas pequeñas)
 *   481–768px → tarjetas medias (tablet)
 *   > 768px  → tamaños base (desktop: /album/ en 5 cols ~207px, collection ~207px)
 */

/* =============================================================================
   BASE — .ltn-product-card
   Aplica a todos los contextos. Los modificadores sobrescriben lo necesario.
   SIN width ni min-width: la tarjeta ocupa el 100% del hueco del grid.
   ============================================================================= */

.ltn-product-card {
    background: var(--ltn-white, #fff);
    border: 1px solid var(--ltn-gray-200, #e2e8f0);
    border-radius: var(--ltn-border-radius, 8px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    text-decoration: none;
    color: inherit;
    box-sizing: border-box;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

/* box-sizing en todos los hijos de la tarjeta */
.ltn-product-card *,
.ltn-product-card *::before,
.ltn-product-card *::after {
    box-sizing: border-box;
}

/* Hover base — sobrescrito por cada modificador de contexto */
.ltn-product-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--ltn-shadow-md);
}

/* =============================================================================
   THUMBNAIL — imagen del producto
   Todos los contextos usan aspect-ratio 1/1 — nunca height fijo.
   ============================================================================= */

.ltn-product-card__thumb {
    display: block;
    position: relative;
    overflow: hidden;
    background: var(--ltn-gray-100, #f8fafc);
    aspect-ratio: 1 / 1; /* base: cuadrado, igual que woocommerce_thumbnail */
}

.ltn-product-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.ltn-product-card:hover .ltn-product-card__thumb img {
    transform: scale(1.04);
}

/* Placeholder cuando no hay imagen */
.ltn-product-card__img-placeholder {
    position: absolute;
    inset: 0;
    background: var(--ltn-gray-100, #f8fafc);
}

.ltn-product-card__placeholder {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 48px;
    color: var(--ltn-gray-300, #cbd5e0);
    width: 48px !important;
    height: 48px !important;
}

/* Badge de etiqueta sobre la imagen (intercambio, etc.) */
.ltn-product-card__tag {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 1;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    pointer-events: none;
    white-space: nowrap;
}

/* Badge intercambio — terracota canónico en todos los contextos */
.ltn-product-card__tag.tag-trade {
    background: var(--ltn-terra);
    color: var(--ltn-white, #fff);
}

/* Badge agotado — usa .ltn-badge del sistema global */
.ltn-product-card__thumb .ltn-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 1;
}

/* =============================================================================
   BOTÓN FAVORITO (CORAZÓN) — posición absoluta esquina superior derecha del thumb
   Badge intercambio: top:8px left:8px  → sin solape con el corazón top:8px right:8px
   Visible para logueados y anónimos (el JS gestiona el flujo de guest → login).
   ============================================================================= */

.ltn-product-card__fav-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    padding: 0;
    cursor: pointer;
    background: var(--ltn-overlay-white-80);
    color: var(--ltn-gray-400, #94a3b8);
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
    /* El botón no propaga el clic al <a> raíz (evita navegar al producto al tocar el corazón) */
    pointer-events: auto;
}

.ltn-product-card__fav-btn:hover {
    background: var(--ltn-white, #fff);
    color: var(--ltn-terra);
    transform: scale(1.12);
    outline: none;
}

.ltn-product-card__fav-btn:focus-visible {
    outline: 2px solid var(--ltn-green-primary);
    outline-offset: 2px;
}

/* Estado: favorito — icono y fondo diferenciados */
.ltn-product-card__fav-btn[data-fav="1"],
.ltn-product-card__fav-btn.is-favorite {
    color: var(--ltn-terra);
    background: var(--ltn-overlay-white-90);
}

.ltn-product-card__fav-btn[data-fav="1"]:hover,
.ltn-product-card__fav-btn.is-favorite:hover {
    background: var(--ltn-white, #fff);
    color: var(--ltn-terra);
}

/* Estado: carga AJAX en vuelo */
.ltn-product-card__fav-btn.ltn-fav--loading {
    opacity: 0.5;
    cursor: wait;
    transform: none;
    pointer-events: none;
}

/* SVGs del corazón: por defecto muestra vacío, oculta relleno */
.ltn-product-card__fav-btn .ltn-fav-icon {
    display: block;
    flex-shrink: 0;
}

.ltn-product-card__fav-btn .ltn-fav-icon--filled {
    display: none;
}

/* Cuando es favorito: muestra relleno, oculta vacío */
.ltn-product-card__fav-btn[data-fav="1"] .ltn-fav-icon--empty,
.ltn-product-card__fav-btn.is-favorite  .ltn-fav-icon--empty {
    display: none;
}

.ltn-product-card__fav-btn[data-fav="1"] .ltn-fav-icon--filled,
.ltn-product-card__fav-btn.is-favorite  .ltn-fav-icon--filled {
    display: block;
}

/* En la rama show_actions (raíz <div>), el botón hereda position:relative del root card */

/* =============================================================================
   CUERPO — home / catalog (layout editorial con price-line y trade-orb)
   ============================================================================= */

.ltn-product-card__body {
    padding: 14px 16px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.ltn-product-card__name {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--ltn-gray-800, #1e293b);
    margin-bottom: 6px;
    line-height: 1.3;
    /* Una línea truncada en tarjetas estrechas */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Pie: grid de 3 columnas fijas — posiciones no se redistribuyen si un slot está vacío */
.ltn-product-card__foot {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    margin-top: auto;
    min-width: 0;
}

/* Slots del pie — siempre presentes, posición fija */
.foot-slot {
    display: flex;
    align-items: center;
    min-width: 0;
}

.foot-slot--left   { justify-content: flex-start; }
.foot-slot--center { justify-content: center; }
.foot-slot--right  { justify-content: flex-end; }

/* Botones circulares del pie — dimensiones compartidas idénticas.
   Unificado en un selector doble para garantizar que orb y carrito
   son visualmente del mismo tamaño independientemente del elemento HTML. */
.trade-orb,
.ltn-product-card__foot .add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex-shrink: 0;
    color: var(--ltn-white, #fff);
    transition: background 0.18s ease;
}

/* Colores y propiedades específicas de cada botón */
.trade-orb {
    background: var(--ltn-terra);
    border: none;
    padding: 0;
    cursor: pointer;
}

/* Estado "en cesta de intercambio" — anillo exterior sobre fondo terracota */
.trade-orb.is-in-exchange-cart {
    box-shadow: 0 0 0 2px var(--ltn-white, #fff), 0 0 0 4px var(--ltn-terra);
}

.trade-orb.ltn-exchange--loading {
    opacity: 0.6;
    cursor: wait;
}

.ltn-product-card__foot .add-btn {
    background: var(--ltn-green-primary);
    border: none;
    padding: 0;
    cursor: pointer;
}

/* SVG internos del pie — mismo tamaño en ambos botones.
   Ambos usan SVG inline: no dependen de la fuente Dashicons. */
.trade-orb svg,
.ltn-product-card__foot .add-btn svg {
    display: block;
    width: 18px;
    height: 18px;
    color: var(--ltn-white, #fff);
    flex-shrink: 0;
}

/* Hover — ambos a verde claro corporativo */
.trade-orb:hover,
.ltn-product-card__foot .add-btn:hover,
.ltn-product-card__foot .add-btn:focus-visible {
    background: var(--ltn-green-light);
    outline: none;
}

/* Estados feedback del botón carrito */
.ltn-product-card__foot .add-btn.loading {
    opacity: 0.6;
    cursor: wait;
}

.ltn-product-card__foot .add-btn.added {
    background: var(--ltn-green-light);
}

/* Precio en el pie */
.price-line {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
}

.price-line .num {
    font-size: 16px;
    font-weight: 700;
    color: var(--ltn-gray-800, #1e293b);
    white-space: nowrap;
}

/* =============================================================================
   INFO COMPACTA — store / collection (layout funcional con título y precio)
   ============================================================================= */

.ltn-product-card__info {
    padding: 8px 10px 6px;
    flex: 1;
}

.ltn-product-card__title {
    margin: 0 0 3px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ltn-gray-800, #1e293b);
    /* Dos líneas máximo con ellipsis */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ltn-product-card__title a {
    color: inherit;
    text-decoration: none;
}

.ltn-product-card__title a:hover {
    color: var(--ltn-green-primary, #506727);
}

.ltn-product-card__price {
    font-size: 12px;
    font-weight: 700;
    color: var(--ltn-green-primary, #506727);
    line-height: 1.2;
}

/* =============================================================================
   FILA DE ACCIONES — collection (carrito, ver, intercambio)
   Clases .ltn-collection-product-actions, .ltn-collection-action y
   .btn-ofrecer-intercambio NO se modifican — las usa el JS de intercambio.
   ============================================================================= */

.ltn-product-card__actions {
    display: flex;
    justify-content: flex-end;
    gap: 2px;
    padding: 3px 4px;
    border-top: 1px solid var(--ltn-gray-100, #f1f5f9);
    background: var(--ltn-gray-50, #f8fafc);
}

/* =============================================================================
   MODIFICADOR — home
   ============================================================================= */

.ltn-product-card--home {
    border-radius: 16px;
}

.ltn-product-card--home:hover {
    box-shadow: 0 18px 32px -16px var(--ltn-shadow-green-20);
}

/* home ya hereda aspect-ratio: 1/1 de .ltn-product-card__thumb base */

/* =============================================================================
   MODIFICADOR — catalog
   ============================================================================= */

.ltn-product-card--catalog {
    border-radius: 16px;
}

.ltn-product-card--catalog:hover {
    box-shadow: 0 18px 32px -16px var(--ltn-shadow-green-20);
}

/* catalog ya hereda aspect-ratio: 1/1 de .ltn-product-card__thumb base */

/* =============================================================================
   MODIFICADOR — store
   Antes: .ltn-vendor-store__product-img { height: 180px } (fijo — problemático).
   Ahora: aspect-ratio 1/1 — igual que woocommerce_thumbnail (300×300).
   A 207px de columna (5 cols en 1100px): thumbnail 207×207 vs 200×180 anterior.
   Diferencia < 15% en altura — cambio menor, mejora la fluidez responsive.
   ============================================================================= */

/* store hereda aspect-ratio: 1/1 de .ltn-product-card__thumb base.
   El placeholder .ltn-product-card__placeholder usa position:absolute
   para centrarse — no necesita override de display en el thumb. */

.ltn-product-card--store:hover {
    transform: translateY(-2px);
    box-shadow: var(--ltn-shadow-md);
}

/* Tamaños fieles al original .ltn-vendor-store__product-* de vendor-store.css */
.ltn-product-card--store .ltn-product-card__info {
    padding: 10px 12px;
}

.ltn-product-card--store .ltn-product-card__name {
    font-size: 14px;
    font-weight: 600; /* original: 600, base: 700 */
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ltn-product-card--store .ltn-product-card__price {
    font-size: 15px; /* original: 15px, base: 12px */
}

/* =============================================================================
   MODIFICADOR — collection
   ============================================================================= */

/* collection hereda aspect-ratio: 1/1 de .ltn-product-card__thumb base */

/* Sin translateY — igual que el original */
.ltn-product-card--collection:hover {
    transform: none;
    box-shadow: var(--ltn-shadow-md);
    border-color: var(--ltn-gray-300, #cbd5e0);
}

/* Tamaños fieles al original .ltn-collection-product-* de vendor-collection.css */
.ltn-product-card--collection .ltn-product-card__info {
    padding: 10px 12px 6px; /* original: ltn-collection-product-info */
}

.ltn-product-card--collection .ltn-product-card__title {
    font-size: 13px;  /* original: ltn-collection-product-title */
    margin-bottom: 4px;
}

.ltn-product-card--collection .ltn-product-card__price {
    font-size: 13px; /* original: ltn-collection-product-price */
}

/* La fila de acciones tiene clase dual (ltn-product-card__actions + ltn-collection-product-actions).
   El selector de vendor-collection.css aplica, pero product-card.css carga después.
   Override explícito para garantizar el padding original. */
.ltn-product-card--collection .ltn-product-card__actions {
    padding: 4px 6px; /* original: ltn-collection-product-actions */
}

/* =============================================================================
   RESPONSIVE — escalado interno por breakpoints
   La tarjeta no tiene ancho propio; los tamaños internos escalan con la pantalla.

   Lógica:
   - > 768px (desktop): 5 cols ~207px en /album/, 5 cols en /coleccion/ → tamaños base
   - 481–768px (tablet): 3-4 cols ~200–250px → tamaños base suficientes
   - ≤ 480px (móvil): grid comprimido, 1-2 cols muy anchas O layout de 1 col estrecho

   Nota: a ≤ 480px el grid auto-fill colapsa a 1 columna (tarjeta ~100% del viewport).
   Las tarjetas se vuelven ANCHAS (no estrechas), por lo que los estilos base ya sirven.
   El único escalón necesario es el de tipografía mínima para que el texto no se vea
   exageradamente pequeño (12-13px) en una tarjeta de ~340px de ancho en móvil.
   ============================================================================= */

@media (max-width: 480px) {
    /* Body editorial (home/catalog) */
    .ltn-product-card__body {
        padding: 12px 14px 14px;
    }

    .ltn-product-card__name {
        font-size: 15px; /* más grande en tarjeta ancha de móvil */
        white-space: normal; /* permitir wrap en tarjeta ancha */
    }

    /* Info compacta (store/collection) */
    .ltn-product-card__info {
        padding: 10px 12px 8px;
    }

    .ltn-product-card__title {
        font-size: 13px;
    }

    .ltn-product-card__price {
        font-size: 13px;
    }

    /* Fila de acciones más alta y cómoda al tacto */
    .ltn-product-card__actions {
        padding: 6px 8px;
        gap: 4px;
    }
}

/* =============================================================================
   ALIAS TEMPORALES — COMPATIBILIDAD DURANTE MIGRACIÓN (F.2–F.5)
   F.6: eliminados alias C (.ltn-vendor-store__product-card) y D
   (.ltn-collection-product-card) — ya no emitidos en ningún template.
   Alias A+B (.product-card) conservado: sigue usándose como selector
   jQuery en intercambiables-unified.js y lista-intercambios-multiple.php.
   ============================================================================= */

/*
 * Alias A+B: .product-card → selector jQuery en módulo intercambios
 * CONSERVADO: emitido en lista-intercambios-multiple.php + JS hooks.
 */
.product-card {
    background: var(--ltn-white, #fff);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--ltn-gray-200, #e2e8f0);
    transition: transform .2s, box-shadow .2s;
    display: flex;
    flex-direction: column;
}

.product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 32px -16px var(--ltn-shadow-green-20);
}

/* ── Wrapper para listado de favoritos (/mi-coleccion/?section=favorites) ── */

.ltn-fav-card-wrap {
    transition: opacity 0.28s ease, transform 0.28s ease;
}

.ltn-fav-card-wrap.ltn-fav-removing {
    opacity: 0;
    transform: scale(0.9);
    pointer-events: none;
}

/* ── Grid y sección de favoritos ── */

.ltn-favorites-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--ltn-space-4, 16px);
}

.ltn-fav-load-more {
    display: flex;
    justify-content: center;
    margin-top: var(--ltn-space-6, 24px);
}

.ltn-fav-total-count {
    font-size: 13px;
    color: var(--ltn-gray-500, #64748b);
    font-weight: 500;
}