/**
 * Wapu Scenes — Product Card (componente unificado)
 *
 * Look EDITORIAL PREMIUM (v7.28.0)
 * Más cuerpo que el ultra-minimal previo · brand eyebrow con guión,
 * nombre serif/heading 14px weight 500, hover sutil con translateY + image
 * scale, price-row inline, tag "En oferta" en text color del drop.
 *
 * Sin border ni shadow en el card raíz · la imagen es el único elemento
 * con cuerpo visual. El meta (brand + nombre + precio) es texto premium
 * que respira debajo.
 *
 * Consume tokens del drop activo:
 *   --ws-card-text, --ws-card-text-muted, --ws-card-media-bg,
 *   --ws-card-accent, --ws-card-f-body, --ws-card-f-heading,
 *   --ws-card-radius (aplica a imagen)
 *
 * @version 7.28.0 — editorial premium
 */

/* ──────────────────────────────────────────────────────────────
 * Card raíz · hover con elevación sutil
 * ────────────────────────────────────────────────────────────── */
.wapu-pcard {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-decoration: none;
    color: var(--ws-card-text, #1a1a1a);
    background: transparent;
    border: 0;
    overflow: visible;
    font-family: var(--ws-card-f-body, var(--ws-fb, 'Manrope', sans-serif));
    min-width: 0;
    box-sizing: border-box;
    position: relative;
    transition: transform .35s cubic-bezier(.22,.61,.36,1);
}

.wapu-pcard:hover {
    text-decoration: none;
    color: var(--ws-card-text, #1a1a1a);
    transform: translateY(-3px);
}

.wapu-pcard:focus-visible {
    outline: 1px solid var(--ws-card-text, #1a1a1a);
    outline-offset: 4px;
}

/* ──────────────────────────────────────────────────────────────
 * Media · imagen con radius + zoom in al hover
 * ────────────────────────────────────────────────────────────── */
.wapu-pcard__media {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: var(--ws-card-media-bg, #f5f3ec);
    border-radius: var(--ws-card-radius, 4px);
}

.wapu-pcard--aspect-square .wapu-pcard__media    { aspect-ratio: 1 / 1; }
.wapu-pcard--aspect-portrait .wapu-pcard__media  { aspect-ratio: 4 / 5; }
.wapu-pcard--aspect-wide .wapu-pcard__media      { aspect-ratio: 3 / 4; }

.wapu-pcard__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s cubic-bezier(.22,.61,.36,1);
}

.wapu-pcard:hover .wapu-pcard__media img {
    transform: scale(1.04);
}

/* Empty state · fondo plano del drop con inicial sutil */
.wapu-pcard__media-empty {
    position: absolute;
    inset: 0;
    background: var(--ws-card-media-bg, #f0eee6);
    display: flex;
    align-items: center;
    justify-content: center;
}
.wapu-pcard__media-empty-glyph {
    font-family: var(--ws-card-f-heading, var(--ws-fh, serif));
    font-size: clamp(40px, 6vw, 64px);
    font-weight: 300;
    color: rgba(0,0,0,0.15);
    line-height: 1;
}

/* ──────────────────────────────────────────────────────────────
 * Badges · sutiles en la esquina superior izquierda del media
 * Las versiones 7.12+ tienen sistema de badges via filter (loyalty,
 * reviews, etc.) — quedan como text-only chips, sin pill loud.
 * ────────────────────────────────────────────────────────────── */
.wapu-pcard__badges {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    z-index: 2;
    pointer-events: none;
}

.wapu-pcard__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 9px;
    background: rgba(255,255,255,0.92);
    border: 0;
    font-family: var(--ws-card-f-body, var(--ws-fb, inherit));
    font-size: 9px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ws-card-text, #1a1a1a);
    border-radius: 999px;
    white-space: nowrap;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.wapu-pcard__badge--sale       { background: var(--ws-card-accent, #c2410c); color: #fff; }
.wapu-pcard__badge--outofstock { background: rgba(28,28,28,0.92); color: #fff; }
.wapu-pcard__badge--custom     { /* default · sin override */ }

/* ──────────────────────────────────────────────────────────────
 * Outofstock modifier · opacity + hover off
 * ────────────────────────────────────────────────────────────── */
.wapu-pcard--outofstock .wapu-pcard__media {
    opacity: 0.55;
}
.wapu-pcard--outofstock:hover {
    transform: none;
}
.wapu-pcard--outofstock:hover .wapu-pcard__media img {
    transform: none;
}

/* ──────────────────────────────────────────────────────────────
 * Content · meta editorial · brand + nombre serif + precio
 * ────────────────────────────────────────────────────────────── */
.wapu-pcard__content {
    padding: 14px 4px 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.wapu-pcard--center .wapu-pcard__content {
    text-align: center;
    align-items: center;
    padding-left: 0;
    padding-right: 0;
}

.wapu-pcard__brand {
    font-family: var(--ws-card-f-body, var(--ws-fb, inherit));
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ws-card-text-muted, var(--ws-m, #888));
    line-height: 1.3;
    margin: 0 0 2px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.wapu-pcard__brand::before {
    content: '— ';
    margin-right: 2px;
    color: var(--ws-card-text-muted, var(--ws-m, #888));
    opacity: 0.7;
}

.wapu-pcard__name {
    font-family: var(--ws-card-f-heading, var(--ws-fh, var(--ws-card-f-body, inherit))) !important;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -0.005em;
    margin: 0;
    color: var(--ws-card-text, #1a1a1a);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wapu-pcard__price {
    font-family: var(--ws-card-f-body, var(--ws-fb, inherit));
    font-size: 13px;
    font-weight: 500;
    color: var(--ws-card-text, #1a1a1a);
    line-height: 1.4;
    letter-spacing: 0;
    margin: 4px 0 0;
}

.wapu-pcard__price del {
    color: var(--ws-card-text-muted, #aaa);
    font-weight: 400;
    margin-right: 8px;
    text-decoration: line-through;
    font-size: 12px;
}

.wapu-pcard__price ins {
    text-decoration: none;
    color: var(--ws-card-accent, var(--ws-card-text, #1a1a1a));
    font-weight: 600;
}

/* Nota inferior · usada cuando un producto está agotado o para text auxiliar. */
.wapu-pcard__note {
    font-size: 10px;
    font-weight: 500;
    color: var(--ws-card-text-muted, var(--ws-m, #888));
    line-height: 1.4;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 4px 0 0;
}

/* ──────────────────────────────────────────────────────────────
 * Responsive
 * ────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .wapu-pcard__content { padding-top: 12px; }
    .wapu-pcard__name { font-size: 13px; }
    .wapu-pcard__price { font-size: 12px; }
    .wapu-pcard__price del { font-size: 11px; }
    .wapu-pcard__badges { top: 10px; left: 10px; }
    .wapu-pcard__badge { font-size: 8px; padding: 3px 7px; }
}

/* ──────────────────────────────────────────────────────────────
 * Accesibilidad · prefers-reduced-motion
 * ────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .wapu-pcard,
    .wapu-pcard__media img {
        transition: none !important;
    }
    .wapu-pcard:hover {
        transform: none !important;
    }
    .wapu-pcard:hover .wapu-pcard__media img {
        transform: none !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════
 * [v7.26.0] UTILITY CLASSES SHARED · para scenes con markup propio
 * (gazette-hero sidebar) que adoptan tipografía estandarizada.
 * ══════════════════════════════════════════════════════════════════════ */

.wapu-prod {
    transition: opacity 0.25s ease;
    text-decoration: none;
}
.wapu-prod:hover { opacity: 0.85; }

.wapu-prod__brand {
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ws-card-text-muted, var(--ws-m, #888));
    line-height: 1.3;
    margin: 0 0 2px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wapu-prod__brand::before {
    content: '— ';
    opacity: 0.7;
}

.wapu-prod__name {
    font-family: var(--ws-card-f-heading, var(--ws-fh, inherit)) !important;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -0.005em;
    margin: 0;
    color: var(--ws-card-text, var(--ws-t, #1a1a1a));
}

.wapu-prod__price {
    font-family: var(--ws-card-f-body, var(--ws-fb, inherit));
    font-size: 13px;
    font-weight: 500;
    color: var(--ws-card-text, var(--ws-t, #1a1a1a));
    line-height: 1.4;
    margin: 4px 0 0;
}
.wapu-prod__price del {
    color: var(--ws-card-text-muted, #aaa);
    font-weight: 400;
    margin-right: 8px;
    text-decoration: line-through;
    font-size: 12px;
}
.wapu-prod__price ins {
    text-decoration: none;
    color: var(--ws-card-accent, var(--ws-card-text, #1a1a1a));
    font-weight: 600;
}

.wapu-prod__tag {
    display: inline-block;
    font-family: var(--ws-card-f-body, var(--ws-fb, inherit));
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1.4;
    margin: 6px 0 0;
}
.wapu-prod__tag--sale { color: var(--ws-card-accent, var(--ws-a, currentColor)); }
.wapu-prod__tag--out  { color: var(--ws-card-text-muted, var(--ws-m, #888)); }

.wapu-prod--outofstock { opacity: 0.55; }
.wapu-prod--outofstock .wapu-prod__price { text-decoration: line-through; color: var(--ws-card-text-muted, #aaa); }

@media (prefers-reduced-motion: reduce) {
    .wapu-prod { transition: none !important; }
}

/* ──────────────────────────────────────────────────────────────
 * [v7.61.0] Card badges · sistema canónico (Wapu_Badges)
 *
 * Pills emoji-first shared con el menú. El render emite markup
 * con prefijo `ws-card-badge` (distinto del menú que usa
 * `wpg-nav-item__badge-preview`) para permitir styling independiente.
 *
 * Se monta absolute top-left sobre `.wapu-pcard__media` · NO interfiere
 * con `.wapu-pcard__badges` (sale/agotado legacy v7.12.0) · ambos sistemas
 * coexisten porque viven en stacking contexts distintos (z-index 2 vs sin z).
 * ────────────────────────────────────────────────────────────── */
.wapu-pcard__media {
    /* nota · `.wapu-pcard__media` ya tiene position:relative arriba.
       Esta declaración es defensiva por si el orden de override cambia. */
    position: relative;
}
.ws-card-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 999px;
    line-height: 1.2;
    white-space: nowrap;
    z-index: 2;
    pointer-events: none;
    font-family: var(--ws-card-f-body, inherit);
}
.ws-card-badge__emoji {
    font-size: 11.5px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}
.ws-card-badge--soft {
    background: #f5f0e6;
    color: #1a1a1a;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
}
.ws-card-badge--dark {
    background: #111;
    color: #fff;
}