/* ============================================================
 * EKIPATE · CSS modular — WOOCOMMERCE (overrides)   (PKG-EK-W1-02)
 * ------------------------------------------------------------
 * "restyle, don't redraw": se viste el DOM de WooCommerce/WoodMart,
 * no se reescribe. SOLO tokens --ekp-*. Lo que ya resuelve Theme
 * Settings (color/tipografía/badges, Step 1) NO se duplica (reuse-first).
 * Frontera: aditivo — NO se reabre el style.css de PKG-01.
 * Carga: SOLO en tienda (is_woocommerce / cart / checkout / account).
 * ============================================================ */

/* ── Loop de producto (tarjeta) ───────────────────────────────
 * Lenguaje de tarjeta del provisional (.ekp-club): superficie clara,
 * hairline en reposo que vira a cobre al elevar, con una sombra sobria
 * (no la caja flotante genérica). DOM real de WoodMart:
 *   .wd-product › .product-element-top (imagen) + .product-element-bottom
 * Sin overflow en la tarjeta: los botones flotantes (wishlist/quick-view)
 * no deben recortarse; el recorte de la imagen lo hace su propia caja. */
.woocommerce .products .wd-product {
    background: var(--ekp-card);
    border: 1px solid var(--ekp-line);
    border-radius: var(--r-lg);
    box-shadow: var(--ekp-shadow-card);
    transition: transform var(--t-med), border-color var(--t-med), box-shadow var(--t-med);
}

.woocommerce .products .wd-product:hover {
    transform: translateY(-4px);
    border-color: var(--ekp-accent);
    box-shadow: var(--ekp-shadow-raise);
}

/* Imagen: funde con la cabecera de la tarjeta (radio sólo arriba).
 * [!] vence el border-radius !important de la card en PKG-01 (style.css
 * lo redondea en las 4 esquinas); aquí, mayor especificidad, sólo top. */
.woocommerce .products .wd-product .product-element-top {
    border-radius: var(--r-lg) var(--r-lg) 0 0 !important;
}

/* ── Tratamiento de imagen: rejilla uniforme (Step 4) ─────────
 * aspect-ratio fijo + object-fit: cover → TODAS las miniaturas a la
 * misma altura, así TODAS las tarjetas quedan alineadas (la altura ya
 * no la dicta el ratio nativo de cada foto). Fondo normalizado para
 * PNG transparentes / placeholders. restyle sin redraw: sólo el marco;
 * la imagen es contenido. Hereda el overflow:hidden del card (PKG-01). */
.woocommerce .products .wd-product .product-element-top {
    aspect-ratio: 1 / 1;
    background: var(--ekp-paper);
}

.woocommerce .products .wd-product .product-element-top .wd-product-img-link,
.woocommerce .products .wd-product .product-element-top .wd-product-img-hover {
    display: block;
    width: 100%;
    height: 100%;
}

.woocommerce .products .wd-product .product-element-top img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform var(--ekp-t-slow);
}

/* ProductCard (step 13): micro-zoom de la imagen al elevar la tarjeta — cierra el
 * conjunto (media + nombre + precio + badge + rating) con la misma intención del DS
 * (eds-pcard:hover img scale 1.05). La caja .product-element-top ya recorta
 * (overflow:hidden). El hover NO se dispara en headless: se valida por regla + aspecto. */
.woocommerce .products .wd-product:hover .product-element-top img {
    transform: scale(1.05);
}

/* Info inferior: aire editorial (respiración imagen → texto) */
.woocommerce .products .wd-product .product-element-bottom {
    padding: var(--space-md) var(--space-sm) var(--space-md);
}

/* Título de producto: Archivo (la familia la fija el panel, post-titles; el sistema
 * de diseño realineó la tipografía a Archivo/Mono — cae Fraunces, D-164/D-166).
 * Aquí sólo métrica editorial + viraje a cobre al elevar la tarjeta. */
.woocommerce .products .wd-product .wd-entities-title {
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.01em;
    text-wrap: balance;
    margin: 0 0 0.35rem;
}

.woocommerce .products .wd-product .wd-entities-title a {
    color: var(--ekp-ink-warm);
    transition: color var(--t-fast);
}

.woocommerce .products .wd-product:hover .wd-entities-title a {
    color: var(--ekp-accent);
}

/* Categoría: kicker discreto bajo el título (versalita en muted) */
.woocommerce .products .wd-product .wd-product-cats {
    margin: 0 0 0.6rem;
}

.woocommerce .products .wd-product .wd-product-cats a {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ekp-muted);
    transition: color var(--t-fast);
}

.woocommerce .products .wd-product .wd-product-cats a:hover {
    color: var(--ekp-accent);
}

/* ── Precio (Mono tabular) y estados ──────────────────────────
 * Métrica de orfebrería del loop: cifras tabulares para que los importes
 * alineen y la coma decimal española quede a plomo entre tarjetas. La FAMILIA
 * se realinea al sistema de diseño en C (PKG-EK-W1-10 · step 9): el precio es un
 * dato → Martian Mono (antes sans, pre-DS). El color y la capa de rebaja
 * (del/ins/-NN%) los gobierna el bloque Price de ekp-store-components.css. */
.woocommerce .products .wd-product .price,
.woocommerce .products .wd-product .price .amount {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    font-size: 0.95rem;
    font-weight: 600;
}

.woocommerce .products .wd-product .price {
    display: block;
    margin-top: var(--space-xs);
}

/* ── Ficha de producto (single) ───────────────────────────── */
/* [Step 4] */

/* ── Cabecera de tienda / breadcrumbs ─────────────────────────
 * El panel de título (page-title-default) va sobre hueso (D-164b), no banda
 * oscura. Aquí, el acabado tipográfico (título a plomo, breadcrumbs en
 * versalita) y el COLOR del rastro: el default de WoodMart (#767676) mide
 * 4.02:1 sobre el hueso (< AA 4.5:1), así que el texto del breadcrumb se
 * tokeniza al muted on-light AA-safe (~5.06:1). El item actual (.wd-last)
 * conserva el acento de club por su PROPIA regla (la herencia no lo pisa);
 * su contraste cobre-sobre-hueso es deuda aparte = línea roja. (PKG-EK-W1-24) */
.wd-page-title .title {
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.woocommerce-breadcrumb,
.wd-breadcrumbs.woocommerce-breadcrumb {
    font-family: var(--font-sans);
    font-size: 0.76rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ekp-text-on-light-muted);
}

/* Los enlaces del rastro traen su propio color de WoodMart (#767676, 4.02:1);
 * se tokenizan directamente al muted on-light para ganar a esa regla. */
.woocommerce-breadcrumb a,
.wd-breadcrumbs.woocommerce-breadcrumb a {
    color: var(--ekp-text-on-light-muted);
}

/* Descripción de categoría/tienda sobre hueso: WoodMart la deja en #767676
 * (4.02:1 < AA). Se tokeniza al muted on-light AA-safe (~5.06:1). (PKG-EK-W1-24) */
.term-description {
    color: var(--ekp-text-on-light-muted);
}

/* ── Mi Cuenta · dashboard (EK-W1 · override myaccount/dashboard.php) ──────────
 * "según entres, bonito": saludo editorial + bloque «Accede a la tienda» con los
 * clubes accesibles del usuario (ecm_get_user_clubs). On-light (la cuenta vive sobre
 * hueso). Escudo del club o monograma de respaldo. Solo tokens --ekp-*. */

/* Saludo / intro: eyebrow + título display + lead. Reemplaza el texto plano de Woo. */
.ekp-account-intro {
    margin-block-end: var(--space-lg);
}
.ekp-account-intro__eyebrow {
    margin: 0 0 var(--space-xs);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ekp-warm-700);
}
.ekp-account-intro__title {
    margin: 0 0 var(--space-sm);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    letter-spacing: -0.02em;
    line-height: 1.08;
    color: var(--ekp-ink-warm);
}
.ekp-account-intro__lead {
    margin: 0;
    max-width: 60ch;
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--ekp-warm-700);
}
.ekp-account-intro__lead a {
    color: var(--ekp-ink-warm);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--t-fast);
}
.ekp-account-intro__lead a:hover,
.ekp-account-intro__lead a:focus-visible {
    color: var(--ekp-accent);
}
.ekp-account-intro__logout {
    white-space: nowrap;
}

/* Bloque «Accede a la tienda» */
.ekp-account-clubs {
    margin-block-start: var(--space-lg);
}
.ekp-account-clubs__title {
    margin: 0 0 var(--space-xs);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.3rem, 2.4vw, 1.75rem);
    letter-spacing: -0.01em;
    color: var(--ekp-ink-warm);
}
.ekp-account-clubs__hint {
    margin: 0 0 var(--space-md);
    font-family: var(--font-sans);
    font-size: 0.9rem;
    color: var(--ekp-warm-700);
}
.ekp-account-clubs__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-sm);
}
.ekp-account-clubs__cell {
    margin: 0;
}

/* Tarjeta de club: superficie clara, hairline → cobre al elevar (mismo lenguaje que el
 * loop de producto). Escudo/monograma + nombre + CTA. */
.ekp-club-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    height: 100%;
    padding: var(--space-md);
    text-align: center;
    text-decoration: none;
    background: var(--ekp-card);
    border: 1px solid var(--ekp-line);
    border-radius: var(--r-lg);
    box-shadow: var(--ekp-shadow-card);
    transition: transform var(--t-med), border-color var(--t-med), box-shadow var(--t-med);
}
.ekp-club-card:hover,
.ekp-club-card:focus-visible {
    transform: translateY(-4px);
    border-color: var(--ekp-accent);
    box-shadow: var(--ekp-shadow-raise);
}
.ekp-club-card__shield {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
}
.ekp-club-card__img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.ekp-club-card__monogram {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--ekp-paper);
    border: 1px solid var(--ekp-line);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: -0.01em;
    color: var(--ekp-ink-warm);
}
.ekp-club-card__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
}
.ekp-club-card__name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--ekp-ink-warm);
}
.ekp-club-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-family: var(--font-sans);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ekp-accent-hover);
}
.ekp-club-card__cta svg {
    width: 14px;
    height: 14px;
    transition: transform var(--t-fast);
}
.ekp-club-card:hover .ekp-club-card__cta svg,
.ekp-club-card:focus-visible .ekp-club-card__cta svg {
    transform: translateX(3px);
}