/**
 * 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;
    min-height: 32px;
    padding: 0 13px;
    background: rgba(255,255,255,0.92);
    border: 0;
    font-family: var(--ws-card-f-body, var(--ws-fb, inherit));
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ws-card-text, #1a1a1a);
    border-radius: 999px;
    box-shadow: 0 10px 24px rgba(17,24,39,0.10);
    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--new        { background: #fff7ed; color: #9a3412; }
.wapu-pcard__badge--low-stock  { background: #fef2f2; color: #b91c1c; }
.wapu-pcard__badge--custom     { /* default · sin override */ }
.wapu-pcard__badge--woo-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 13px;
    background: var(--wapu-pcard-tag-bg, rgba(22,163,74,0.14));
    color: var(--wapu-pcard-tag-text, #16a34a);
    border-radius: 999px;
    box-shadow: 0 10px 24px rgba(17,24,39,0.10);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1;
}
.wapu-pcard__badge--woo-tag::before {
    content: "";
    width: 6px;
    height: 6px;
    display: inline-flex;
    flex: 0 0 6px;
    border-radius: 999px;
    background: currentColor;
}

/* ──────────────────────────────────────────────────────────────
 * 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 { min-height: 28px; padding: 0 11px; font-size: 9px; }
}

/* ──────────────────────────────────────────────────────────────
 * 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: 12px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 32px;
    font-size: 10px;
    font-weight: 800;
    padding: 0 13px;
    border-radius: 999px;
    line-height: 1;
    white-space: nowrap;
    z-index: 2;
    pointer-events: none;
    font-family: var(--ws-card-f-body, inherit);
    box-shadow: 0 10px 24px rgba(17,24,39,0.10);
    text-shadow: none;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.ws-card-badge__emoji {
    font-size: 11px;
    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), 0 10px 24px rgba(17,24,39,0.10);
}
.ws-card-badge--dark {
    background: #111;
    color: #fff;
}

/* v1.4.22 · Contrast audit guard
   Las cards viven dentro de scenes con tokens distintos. Si una scene no
   declara --ws-card-* completos, caemos a los tokens canonicos --ws-* antes
   de usar valores claros. */
.wapu-pcard,
.wapu-prod {
    color: var(--ws-card-text, var(--ws-text, var(--ws-t, #1a1a1a)));
    overflow-wrap: anywhere;
}

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

.wapu-pcard:focus-visible {
    outline-color: var(--ws-card-text, var(--ws-text, var(--ws-t, #1a1a1a)));
}

.wapu-pcard__name,
.wapu-pcard__price,
.wapu-prod__name,
.wapu-prod__price {
    color: var(--ws-card-text, var(--ws-text, var(--ws-t, #1a1a1a)));
}

.wapu-pcard__name,
.wapu-prod__name {
    letter-spacing: 0;
}

.wapu-pcard__brand,
.wapu-pcard__brand::before,
.wapu-pcard__note,
.wapu-pcard__price del,
.wapu-prod__brand,
.wapu-prod__price del,
.wapu-prod__tag--out,
.wapu-prod--outofstock .wapu-prod__price {
    color: var(--ws-card-text-muted, var(--ws-text-muted, var(--ws-muted, var(--ws-m, #6f6f76))));
}

.wapu-pcard__price ins,
.wapu-prod__price ins,
.wapu-prod__tag--sale {
    color: var(--ws-card-accent, var(--ws-accent, var(--ws-a, currentColor)));
}

.wapu-pcard__media,
.wapu-pcard__media-empty {
    background: var(--ws-card-media-bg, var(--ws-surface-alt, var(--ws-sfa, #f5f3ec)));
}

.wapu-pcard__media-empty-glyph {
    color: color-mix(in srgb, var(--ws-card-text, var(--ws-text, var(--ws-t, #1a1a1a))) 18%, transparent);
}

@supports not (color: color-mix(in srgb, #000 18%, transparent)) {
    .wapu-pcard__media-empty-glyph {
        color: rgba(127, 127, 127, .28);
    }
}

/* Sprint 3 · Shared Wapu Components contract */
.wapu-pcard__content{gap:var(--ws-card-content-gap,6px)}
.wapu-pcard--hover-none,.wapu-pcard--hover-none:hover{transform:none}.wapu-pcard--hover-none:hover .wapu-pcard__media img{transform:none}
.wapu-pcard--hover-zoom:hover{transform:none}.wapu-pcard--hover-zoom:hover .wapu-pcard__media img{transform:scale(1.06)}
.wapu-pcard--hover-lift:hover{transform:translateY(-3px)}

/* Playground global badge contract · v2.0.4 */
.wapu-pcard__badges {
    --wapu-badge-size: 10px;
}
.wapu-pcard__badges--top-right { left: auto; right: 12px; align-items: flex-end; }
.wapu-pcard__badges--bottom-left { top: auto; bottom: 12px; }
.wapu-pcard__badges--bottom-right { top: auto; right: 12px; bottom: 12px; left: auto; align-items: flex-end; }
.wapu-pcard__badges .wapu-pcard__badge {
    font-size: var(--wapu-badge-size, 10px);
}
.wapu-pcard__badges--shape-minimal .wapu-pcard__badge {
    min-height: 0;
    padding: 6px 2px;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid currentColor;
}
.wapu-pcard__badges--shape-square .wapu-pcard__badge { border-radius: 0; }
.wapu-pcard__badges--shape-rounded .wapu-pcard__badge,
.wapu-pcard__badges--shape-editorial .wapu-pcard__badge { border-radius: 8px; }
.wapu-pcard__badges--shape-circle .wapu-pcard__badge {
    width: 5.2em;
    min-height: 5.2em;
    padding: .5em;
    border-radius: 50%;
    justify-content: center;
    text-align: center;
    white-space: normal;
}
.wapu-pcard__badges--shape-diamond .wapu-pcard__badge {
    border-radius: 0;
    clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%);
    min-width: 5.6em;
    min-height: 5.6em;
    padding: 1.2em;
    justify-content: center;
    text-align: center;
    white-space: normal;
}
.wapu-pcard__badges--shape-hexagon .wapu-pcard__badge {
    border-radius: 0;
    clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
    padding-inline: 1.8em;
}
.wapu-pcard__badges--shape-ticket .wapu-pcard__badge {
    border-radius: 4px;
    clip-path: polygon(0 0,100% 0,100% 35%,94% 50%,100% 65%,100% 100%,0 100%,0 65%,6% 50%,0 35%);
}
.wapu-pcard__badges--shape-ribbon .wapu-pcard__badge,
.wapu-pcard__badges--shape-flag .wapu-pcard__badge {
    border-radius: 3px 0 0 3px;
    clip-path: polygon(0 0,100% 0,88% 50%,100% 100%,0 100%);
    padding-right: 1.8em;
}
.wapu-pcard__badges--shape-tag .wapu-pcard__badge {
    border-radius: 3px 10px 10px 3px;
    clip-path: polygon(0 0,88% 0,100% 50%,88% 100%,0 100%);
    padding-right: 1.8em;
}
.wapu-pcard__badges--shape-seal .wapu-pcard__badge,
.wapu-pcard__badges--shape-scallop .wapu-pcard__badge,
.wapu-pcard__badges--shape-flower .wapu-pcard__badge,
.wapu-pcard__badges--shape-explosion .wapu-pcard__badge,
.wapu-pcard__badges--shape-splash .wapu-pcard__badge {
    min-width: 5.4em;
    min-height: 5.4em;
    padding: 1em;
    justify-content: center;
    text-align: center;
    white-space: normal;
    border-radius: 0;
    clip-path: polygon(50% 0,61% 13%,78% 5%,82% 23%,100% 25%,91% 42%,100% 55%,83% 62%,86% 82%,66% 79%,55% 100%,42% 84%,25% 96%,21% 76%,2% 72%,13% 53%,0 40%,19% 32%,18% 13%,38% 18%);
}
.wapu-pcard__badges--shape-flower .wapu-pcard__badge,
.wapu-pcard__badges--shape-scallop .wapu-pcard__badge {
    clip-path: polygon(50% 0,63% 12%,79% 7%,88% 22%,100% 35%,91% 51%,98% 69%,80% 77%,68% 96%,50% 87%,32% 96%,20% 77%,2% 69%,9% 51%,0 35%,12% 22%,21% 7%,37% 12%);
}
.wapu-pcard__badges--shape-blob .wapu-pcard__badge,
.wapu-pcard__badges--shape-cloud .wapu-pcard__badge {
    border-radius: 54% 46% 58% 42% / 45% 55% 45% 55%;
    min-height: 3.8em;
    padding: .9em 1.3em;
}
.wapu-pcard__badges--shape-heart .wapu-pcard__badge {
    min-width: 5.6em;
    min-height: 5.2em;
    padding: 1em 1.1em .7em;
    justify-content: center;
    text-align: center;
    white-space: normal;
    border-radius: 0;
    clip-path: polygon(50% 93%,8% 51%,3% 31%,12% 12%,31% 5%,50% 20%,69% 5%,88% 12%,97% 31%,92% 51%);
}
.wapu-pcard__badges--shape-trending .wapu-pcard__badge {
    min-width:5.4em;min-height:5.1em;padding:1em;justify-content:center;text-align:center;white-space:normal;border-radius:0;
    clip-path:polygon(50% 0,64% 18%,82% 16%,84% 35%,100% 50%,82% 65%,82% 84%,63% 82%,50% 100%,36% 82%,18% 84%,18% 65%,0 50%,18% 35%,18% 16%,36% 18%);
}
.wapu-pcard__badges--shape-best-seller .wapu-pcard__badge,
.wapu-pcard__badges--shape-new-drop .wapu-pcard__badge {
    min-width:5.4em;min-height:5.4em;padding:1em;justify-content:center;text-align:center;white-space:normal;border-radius:0;
    clip-path:polygon(50% 0,62% 12%,78% 6%,84% 23%,100% 32%,92% 50%,100% 68%,84% 77%,78% 94%,62% 88%,50% 100%,38% 88%,22% 94%,16% 77%,0 68%,8% 50%,0 32%,16% 23%,22% 6%,38% 12%);
}
.wapu-pcard__badges--shape-gone-viral .wapu-pcard__badge {
    min-width:5.4em;min-height:5.2em;padding:1em;justify-content:center;text-align:center;white-space:normal;border-radius:0;
    clip-path:polygon(50% 0,66% 19%,87% 18%,84% 39%,100% 55%,79% 67%,79% 88%,58% 84%,43% 100%,29% 82%,8% 83%,16% 61%,0 45%,19% 33%,23% 12%,42% 17%);
}
@media (max-width: 640px) {
    .wapu-pcard__badges--top-right { right: 10px; }
    .wapu-pcard__badges--bottom-left { bottom: 10px; }
    .wapu-pcard__badges--bottom-right { right: 10px; bottom: 10px; }
}