/**
 * Wapu Scenes — Product Card (componente unificado)
 *
 * Look ultra-minimal · estilo editorial Muji/Kinfolk.
 *
 * Sin border, sin shadow, sin radius en el card. La separación entre cards
 * es solo whitespace del grid de la scene. La imagen es el único elemento
 * con cuerpo visual — el meta (nombre + precio) es texto que respira
 * debajo, sin caja.
 *
 * 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-radius (aplica solo a media)
 *
 * @version 7.15.0 — ultra minimal · sin border · badges como texto
 */

/* ──────────────────────────────────────────────────────────────
 * Card raíz · sin border, sin shadow, sin radius propio
 * ────────────────────────────────────────────────────────────── */
.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: opacity .2s ease;
}

.wapu-pcard:hover {
    text-decoration: none;
    color: var(--ws-card-text, #1a1a1a);
    opacity: 0.85;
}

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

/* ──────────────────────────────────────────────────────────────
 * Media · imagen con radius propio (configurable por scene)
 * ────────────────────────────────────────────────────────────── */
.wapu-pcard__media {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: var(--ws-card-media-bg, #f5f3ec);
    border-radius: var(--ws-card-radius, 2px);
}

.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 0.6s ease;
}

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

/* Empty state · fondo plano del drop, sin glyph ni gradient */
.wapu-pcard__media-empty {
    position: absolute;
    inset: 0;
    background: var(--ws-card-media-bg, #f0eee6);
}
/* Si el merchant manda glyph igual, lo mantenemos discreto. */
.wapu-pcard__media-empty-glyph {
    display: none;
}

/* ──────────────────────────────────────────────────────────────
 * Badges · text-only, sin pill background, sin uppercase loud
 *
 * Por default ya no se muestran "Oferta" ni "Agotado" como badges
 * encima de la imagen — la oferta vive en el precio (<del>/<ins>) y
 * el agotado vive en la nota inferior. Los badges siguen existiendo
 * para plugins externos que extienden via `wapu_product_card_badges`
 * (loyalty, reviews, etc.) — pero su rendering es minimal.
 * ────────────────────────────────────────────────────────────── */
.wapu-pcard__badges {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    z-index: 2;
    pointer-events: none;
}

.wapu-pcard__badge {
    display: inline-flex;
    align-items: center;
    padding: 0;
    background: transparent;
    border: 0;
    font-family: var(--ws-card-f-body, var(--ws-fb, 'Manrope', sans-serif));
    font-size: 10px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ws-card-text, #1a1a1a);
    white-space: nowrap;
}

.wapu-pcard__badge--sale       { color: var(--ws-card-accent, #1a1a1a); }
.wapu-pcard__badge--outofstock { color: var(--ws-card-text-muted, #888); }
.wapu-pcard__badge--custom     { color: var(--ws-card-text, #1a1a1a); }

/* ──────────────────────────────────────────────────────────────
 * Outofstock modifier · opacity al media + hover desactivado
 * ────────────────────────────────────────────────────────────── */
.wapu-pcard--outofstock .wapu-pcard__media {
    opacity: 0.5;
}
.wapu-pcard--outofstock:hover .wapu-pcard__media img {
    transform: none;
}

/* ──────────────────────────────────────────────────────────────
 * Content · meta sin caja, padding solo arriba
 * ────────────────────────────────────────────────────────────── */
.wapu-pcard__content {
    padding: 14px 0 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.wapu-pcard--center .wapu-pcard__content {
    text-align: center;
    align-items: center;
}

.wapu-pcard__brand {
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ws-card-text-muted, #888);
    line-height: 1.3;
    margin: 0;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.wapu-pcard__name {
    font-family: var(--ws-card-f-body, var(--ws-fb, 'Manrope', sans-serif));
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: 0.01em;
    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-size: 12px;
    font-weight: 400;
    color: var(--ws-card-text-muted, #888);
    line-height: 1.5;
    letter-spacing: 0.01em;
    margin: 0;
}

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

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

/* Nota inferior · usada cuando un producto está agotado (reemplaza al
   precio) o para texto auxiliar minimal de scenes. */
.wapu-pcard__note {
    font-size: 11px;
    font-weight: 400;
    color: var(--ws-card-text-muted, #888);
    line-height: 1.5;
    letter-spacing: 0.06em;
    margin: 0;
}

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

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

/* ══════════════════════════════════════════════════════════════════════
 * [v7.26.0] UTILITY CLASSES SHARED · estandarización de cards de producto
 *
 * Las scenes con layouts editoriales propios (feature-spread, gazette-hero,
 * new-arrivals-magazine) que NO usan Wapu_Product_Card pueden adoptar estas
 * clases en su markup interno para obtener la misma tipografía, tokens y
 * comportamiento que la card unificada — sin perder su layout específico.
 *
 * Reglas de uso:
 *   .wapu-prod              · wrapper del item de producto (anchor o div)
 *   .wapu-prod__brand       · eyebrow marca uppercase tracked
 *   .wapu-prod__name        · nombre del producto (tipografía canónica)
 *   .wapu-prod__price       · precio + del/ins canónicos
 *   .wapu-prod__tag--sale   · etiqueta "Oferta" (text-only, color accent)
 *   .wapu-prod__tag--out    · etiqueta "Agotado" (text-only, gris)
 *   .wapu-prod--outofstock  · modifier que aplica opacity al wrapper
 *
 * Importantes:
 *  - NO definen layout (sin width, sin grid, sin flex direction). Eso lo
 *    decide cada scene.
 *  - Heredan los mismos tokens --ws-card-* que Wapu_Product_Card.
 *  - Hover compatible: aplicar `:hover .wapu-prod__name` en la scene si
 *    se quiere highlight.
 * ══════════════════════════════════════════════════════════════════════ */

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

.wapu-prod__brand {
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.1em;
    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__name {
    font-family: var(--ws-card-f-body, var(--ws-fb, inherit)) !important;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: 0.01em;
    margin: 0;
    color: var(--ws-card-text, var(--ws-t, #1a1a1a));
}

.wapu-prod__price {
    font-size: 12px;
    font-weight: 400;
    color: var(--ws-card-text-muted, var(--ws-m, #888));
    line-height: 1.5;
    letter-spacing: 0.01em;
    margin: 0;
}
.wapu-prod__price del {
    color: var(--ws-card-text-muted, #bbb);
    font-weight: 400;
    margin-right: 6px;
    text-decoration: line-through;
}
.wapu-prod__price ins {
    text-decoration: none;
    color: var(--ws-card-text, var(--ws-t, #1a1a1a));
    font-weight: 400;
}

.wapu-prod__tag {
    display: inline-block;
    font-family: var(--ws-card-f-body, var(--ws-fb, inherit));
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.4;
    margin: 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; }
}