/* ============================================================
 * EKIPATE · CSS modular — STORE COMPONENTS   (PKG-EK-W1-10 · Paquete C)
 * ------------------------------------------------------------
 * Primitivos de UI y comercio vestidos sobre el DOM real de
 * WooCommerce/WoodMart ("restyle, don't redraw"). SOLO tokens --ekp-*.
 * Frontera: aditivo — NO se reabre el style.css (PKG-01) ni los parciales
 * previos. Carga GLOBAL tras ekp-components (cache-bust por filemtime).
 * Acento: cobre Ekipate. NO se toca ekp-club.css (motor de color por club).
 * Datos (precio/talla/cantidad/recuento): Martian Mono.
 * ============================================================
 *
 * PATRON DE DOBLE REGISTRO DE SUPERFICIE (D-164b) — como funciona
 * --------------------------------------------------------------
 * La tienda tiene dos superficies: el CUERPO (catalogo/ficha) sobre hueso
 * claro y el CHROME (cabecera/pie/buscador/carrito) sobre ink oscuro. Un
 * mismo primitivo (input, boton fantasma) puede vivir en ambas. En vez de
 * duplicar la regla, el componente lee su primer plano / borde / campo de
 * unas VARIABLES DE CONTEXTO (--ekp-ctx-*): valen su registro ON-LIGHT por
 * defecto y se REMAPEAN a su registro OSCURO solo dentro de los
 * contenedores del chrome. Cambia el contexto, no el componente.
 * Las consumen Input (step 6) y los botones fantasma; el resto de
 * primitivos del cuerpo son on-light puro y los del header, chrome puro.
 * NO se fija un fondo global oscuro: cada contenedor de chrome pinta el
 * suyo (lo gobierna A / el paquete F).
 * ============================================================ */

/* ── Contexto de superficie: CUERPO (registro on-light, por defecto) ── */
:root {
    --ekp-ctx-fg:           var(--ekp-text-on-light);
    --ekp-ctx-fg-muted:     var(--ekp-text-on-light-muted);
    --ekp-ctx-border:       var(--ekp-border-on-light);
    --ekp-ctx-field-bg:     var(--ekp-card);
    --ekp-ctx-field-border: var(--ekp-border-on-light);
    --ekp-ctx-accent:       var(--ekp-copper-500);
}

/* ── Contexto de superficie: CHROME (registro oscuro) ──
 * Cabecera, pie, overlay de busqueda y carrito lateral de WoodMart
 * (clases reales del DOM). Dentro de estos contenedores los primitivos
 * viran a su registro oscuro SIN reescribir su logica: solo se remapean
 * las variables de contexto. */
.whb-header,
.wd-footer,
.wd-cart-drawer,
.cart-widget-side {
    --ekp-ctx-fg:           var(--ekp-on-dark-1);
    --ekp-ctx-fg-muted:     var(--ekp-on-dark-3);
    --ekp-ctx-border:       var(--ekp-line);
    --ekp-ctx-field-bg:     var(--ekp-ink-700);
    --ekp-ctx-field-border: var(--ekp-line-strong);
    --ekp-ctx-accent:       var(--ekp-accent-on-dark);
}

/* ============================================================
 * BUTTON / CTA — step 2
 * Spec Button (.eds core): CTA atletico en MAYUSCULAS, cobre por defecto
 * (primary). DOM real de Woo/WoodMart:
 *   · ficha: button.single_add_to_cart_button.button.alt
 *   · loop:  a.add_to_cart_button (simple) / "Elegir opciones" (variable)
 *   · base:  a/button/input.button  (.alt = enfasis primario)
 * El fondo cobre del .alt/.single ya lo fija PKG-01 (reuse-first); aqui se
 * anade el lenguaje atletico (uppercase + tracking + peso), el glow de hover
 * y la flecha; y se vira el boton del LOOP (ink en PKG-01) a cobre.
 * ============================================================ */

/* Caja atletica comun: MAYUSCULAS + tracking + peso (se gana por especificidad) */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce button.single_add_to_cart_button,
.woocommerce .products .wd-product a.add_to_cart_button {
    text-transform: uppercase;
    letter-spacing: var(--ekp-tracking-wide);
    font-weight: var(--ekp-fw-bold);
}

/* CTA PRIMARIO en cobre — fondo y texto unificados (ficha + .alt + loop).
 * [!] PKG-01 fija el .alt/.single a copper-500 (--ekp-accent) y el loop a ink
 *     (--ekp-dark), ambos con !important. Se unifican a copper-600
 *     (--ekp-accent-hover) con texto BLANCO para que el glifo de 13px cumpla
 *     AA-normal (4.88:1); copper-500/blanco da 3.72 (insuficiente a ese tamano).
 *     El acento de marca copper-500 se conserva en precios/enlaces/badges.
 *     Un !important ajeno solo se vence con otro !important (politica PKG-01). */
.woocommerce button.single_add_to_cart_button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce .products .wd-product a.add_to_cart_button {
    background-color: var(--ekp-accent-hover) !important;
    border-color: var(--ekp-accent-hover) !important;
    color: var(--ekp-accent-contrast) !important;
}

/* Radio sm afilado en el boton del LOOP (WoodMart lo computa a 0). [!] override. */
.woocommerce .products .wd-product a.add_to_cart_button {
    border-radius: var(--ekp-radius-sm) !important;
}

/* Hover del CTA primario: oscurece a copper-700, glow cobre y microelevacion. */
.woocommerce button.single_add_to_cart_button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce .products .wd-product a.add_to_cart_button:hover {
    background-color: var(--ekp-copper-700) !important;
    border-color: var(--ekp-copper-700) !important;
    box-shadow: var(--ekp-glow-accent);
    transform: translateY(-1px);
}

/* NOTA flecha (`arrow` de la spec): OMITIDA en el CTA de Woo. Ambos
 * pseudo-elementos del boton estan ocupados por WoodMart —::after = spinner
 * AJAX (animation wd-rotate, circulo con border-top), ::before = overlay de
 * fondo a tamano completo— y secuestrar cualquiera romperia el loader o el
 * fondo (lineas rojas: no romper el AJAX, restyle-don't-redraw). Meter un
 * elemento propio exigiria tocar el template (redraw) o un hook decorativo
 * (fuera del alcance "hooks solo para datos que no existen"). El "avance" se
 * transmite con la microelevacion + glow del hover. */

/* ============================================================
 * ICONBUTTON — step 3
 * Acciones del header (buscar / cuenta / favoritos / cesta). Spec .eds:
 * icon-only, area tactil touch-safe 44px, count = badge cobre.
 * DOM real: .whb-header .wd-tools-element (> a) ; contador .wd-cart-number.
 * Viven en el CHROME; su registro oscuro/claro lo gobierna A/F. Aqui: solo
 * el area tactil y la legibilidad del count (sin tocar el color del chrome).
 * ============================================================ */

/* Area tactil touch-safe: 44x44 minimo en cada accion del header */
.whb-header .wd-tools-element > a,
.whb-header a.wd-tools-element {
    min-width: 44px;
    min-height: 44px;
}

/* Contador del carrito: numero LEGIBLE sobre el badge cobre (PKG-01 fija el
 * bg cobre; el numero venia cobre sobre cobre = invisible).
 * [!] WoodMart fuerza el color del numero con !important; solo se vence con
 *     !important. El estado overcontent de la home (badge blanco + numero ink)
 *     lo conserva PKG-01 con mayor especificidad + !important (no se pisa). */
.whb-header .wd-cart-number {
    color: var(--ekp-accent-contrast) !important;
}

/* ============================================================
 * BADGE — step 4 (sale / featured / estado de stock)
 * DOM real Woo/WoodMart: .onsale.product-label (loop+ficha, YA emite -NN%),
 * .featured.product-label ("Hot"), .stock.in-stock / .out-of-stock (ficha).
 * Spec .eds: sale = rojo semantico, destacado = accent, estados de stock con
 * dot (success/low/sold). on-light (cuerpo).
 * ============================================================ */

/* Badge SALE: el -NN% que ya emite WoodMart, en ROJO semantico del DS (no cobre).
 * [!] PKG-01 fija .onsale a --ekp-accent (cobre) con !important; el rojo de
 *     rebaja (--ekp-sale-500) es el color semantico correcto. blanco/sale-500
 *     = 4.29:1 (badge indicador, glifo bold). */
.woocommerce span.onsale,
.woocommerce .product-labels .onsale,
.wd-product-labels .onsale {
    background-color: var(--ekp-sale-500) !important;
    color: var(--ekp-accent-contrast) !important;
}

/* Badge DESTACADO ("Hot", featured) en cobre (accent), para diferenciarlo del
 * sale rojo. WoodMart no emite un label "New" propio (el tag "nuevo" no genera
 * badge); el destacado mapea a la variante accent del DS. */
.woocommerce .product-label.featured,
.wd-product-labels .product-label.featured {
    background-color: var(--ekp-accent) !important;
    color: var(--ekp-accent-contrast) !important;
}

/* Estado de STOCK con dot (ficha). success = en stock (verde), sold = agotado
 * (rojo), backorder = pocas/bajo (ambar). El dot es un circulo del color
 * semantico; el texto en el fg del contexto (on-light). */
.woocommerce .stock {
    display: inline-flex;
    align-items: center;
    gap: var(--ekp-space-2);
    font-family: var(--font-sans);
    font-size: var(--ekp-text-sm);
    font-weight: var(--ekp-fw-semibold);
    color: var(--ekp-ctx-fg);
}

.woocommerce .stock::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: var(--ekp-radius-circle);
    background-color: var(--ekp-success-500);
    flex-shrink: 0;
}

.woocommerce .stock.out-of-stock::before {
    background-color: var(--ekp-sale-500);
}

.woocommerce .stock.available-on-backorder::before {
    background-color: var(--ekp-warn-500);
}

/* ============================================================
 * TAG — step 5 (chip de filtro activo del layered nav)
 * DOM real: .wd-active-filters .widget_layered_nav_filters li.chosen > a
 * (la × ya es un ::before en woodmart-font; el href del <a> quita el filtro,
 * AJAX de WoodMart). "Filtro activo invierte a ink sobre hueso": pill oscuro
 * removable. El sidebar-shop (price + 3 layered-nav) vive en panel; el chip se
 * inyecta al aplicar un filtro.
 * ============================================================ */
.wd-active-filters .widget_layered_nav_filters li.chosen > a {
    display: inline-flex;
    align-items: center;
    gap: var(--ekp-space-1);
    padding: var(--ekp-space-1) var(--ekp-space-3);
    background-color: var(--ekp-ink-900);
    color: var(--ekp-on-dark-1);
    border-radius: var(--ekp-radius-pill);
    font-family: var(--font-sans);
    font-size: var(--ekp-text-xs);
    font-weight: var(--ekp-fw-semibold);
    letter-spacing: var(--ekp-tracking-wide);
    text-transform: uppercase;
    transition: background-color var(--ekp-t-fast), color var(--ekp-t-fast);
}

/* Hover del chip -> rojo (afordancia de "quitar"); la × ::before lo acompana. */
.wd-active-filters .widget_layered_nav_filters li.chosen > a:hover {
    background-color: var(--ekp-sale-500);
    color: var(--ekp-accent-contrast);
}

/* ============================================================
 * INPUT — step 6 (campos Woo: busqueda / login / checkout / newsletter)
 * Spec .eds: label versalita, foco cobre con halo (copper-glow), error rojo.
 * DOBLE REGISTRO: el campo lee --ekp-ctx-* -> on-light en el cuerpo, oscuro en
 * el chrome (buscador del header, newsletter del footer) SIN duplicar la regla.
 * ============================================================ */

/* Label en versalita (uppercase + tracking), atenuado al contexto */
.woocommerce form .form-row > label:not(.woocommerce-form__label-for-checkbox),
.woocommerce-form-row > label:not(.woocommerce-form__label-for-checkbox) {
    font-family: var(--font-sans);
    font-size: var(--ekp-text-xs);
    font-weight: var(--ekp-fw-semibold);
    letter-spacing: var(--ekp-tracking-label);
    text-transform: uppercase;
    color: var(--ekp-ctx-fg-muted);
}

/* Campo de texto: caja segun contexto (on-light en cuerpo / oscuro en chrome) */
.woocommerce form .input-text,
.woocommerce-Input.input-text,
.wd-search-form input.s {
    background-color: var(--ekp-ctx-field-bg);
    color: var(--ekp-ctx-fg);
    border: 1px solid var(--ekp-ctx-field-border);
    border-radius: var(--ekp-radius-sm);
    transition: border-color var(--ekp-t-fast), box-shadow var(--ekp-t-fast);
}

/* Foco COBRE + halo copper-glow (la firma del DS) */
.woocommerce form .input-text:focus,
.woocommerce-Input.input-text:focus,
.wd-search-form input.s:focus {
    /* El anillo cobre lo aporta el HALO (box-shadow copper-glow). WoodMart
     * gobierna el border-color del input en :focus via sus variables; no se
     * fuerza (el halo basta para la firma de foco cobre). */
    border-color: var(--ekp-border-accent);
    box-shadow: 0 0 0 3px var(--ekp-copper-glow);
    outline: none;
}

/* Estado error: borde rojo del DS (WooCommerce marca .woocommerce-invalid) */
.woocommerce-invalid .input-text,
.woocommerce-invalid input.input-text {
    border-color: var(--ekp-sale-500);
}

/* ============================================================
 * BREADCRUMB — step 7
 * DOM real: nav.wd-breadcrumbs > a + span.wd-delimiter + span.wd-last (hoja).
 * La versalita ya la fija WoodMart/ekp-woocommerce.css (reuse-first); aqui solo
 * la HOJA ACTUAL (.wd-last, pagina actual) en tinta. on-light (cuerpo).
 * ============================================================ */
/* [!] WoodMart fija el color de la hoja segun la banda de titulo; se fuerza con
 *     !important. Antes cobre, pero sobre hueso cae a 3.33:1 (< AA): pasa a tinta
 *     calida warm-700 (8.31:1, PEND-27). Token FIJO (no --ekp-text-accent) -> no
 *     vira al color del club dentro de .ekp-club-scope: la hoja queda en tinta. */
.woocommerce-breadcrumb .wd-last,
.wd-breadcrumbs .wd-last {
    color: var(--ekp-warm-700) !important;
}

/* ============================================================
 * RATING — step 8 (FIN DE LOS PRIMITIVOS CORE)
 * DOM real WooCommerce: .star-rating (::before = 5 estrellas "vacias";
 * span::before = estrellas llenas recortadas al width% = valor). Llenas cobre,
 * vacias ink tenue; recuento de resenas en Martian Mono. on-light (cuerpo).
 * ============================================================ */
.star-rating::before {
    color: var(--ekp-bone-500);
}

.star-rating span::before {
    color: var(--ekp-copper-500);
}

/* Recuento de resenas en Mono (dato) */
.woocommerce-review-link,
.woocommerce-product-rating .woocommerce-review-link {
    font-family: var(--font-mono);
    font-size: var(--ekp-text-xs);
    letter-spacing: var(--ekp-tracking-mono);
}

/* ============================================================
 * PRICE — step 9 (precio y rebaja)
 * DOM real Woo: p.price con el importe en span.woocommerce-Price-amount.
 * Rebaja = del (antes) + ins (ahora), cada uno con su .woocommerce-Price-amount;
 * .screen-reader-text lleva la a11y (no se toca). WoodMart NO emite el -NN%
 * junto al precio (solo en el badge .onsale de la esquina, step 4): se genera
 * pegado al precio con un hook PHP minimo (woocommerce_format_sale_price ->
 * span.ekp-price__discount). Spec DS (Price.jsx, on-light): now normal = ink;
 * now en rebaja = rojo sale; was = muted tachado; -NN% = eyebrow rojo en SANS.
 * Importes en Mono con cifras tabulares para que las columnas de precio cuadren
 * entre tarjetas del loop. Doble registro: el now lee --ekp-ctx-* (on-light en
 * el cuerpo, claro en el mini-cart del chrome); el rojo de rebaja es invariante.
 * ============================================================ */

/* Todo importe en Martian Mono con cifras tabulares (columnas que cuadran).
 * En la ficha (p.price) esta regla basta; en el loop, la familia Mono la fija la
 * regla de orfebreria de ekp-woocommerce.css (realineada de sans a Mono en este
 * step), y aqui se aporta el tracking-mono que aquella no declara. */
.woocommerce .price,
.woocommerce .price .woocommerce-Price-amount {
    font-family: var(--font-mono);
    font-feature-settings: "tnum" 1;
    letter-spacing: var(--ekp-tracking-mono);
}

/* Precio NORMAL (sin rebaja): el amount cuelga directo del .price -> fg del contexto */
.woocommerce .price > .woocommerce-Price-amount {
    color: var(--ekp-ctx-fg);
    font-weight: var(--ekp-fw-semibold);
}

/* Precio ACTUAL en rebaja (ins): rojo del DS, peso, sin el subrayado nativo del <ins> */
.woocommerce .price ins,
.woocommerce .price ins .woocommerce-Price-amount {
    color: var(--ekp-sale-500);
    text-decoration: none;
    font-weight: var(--ekp-fw-semibold);
}

/* Precio ANTERIOR (del): atenuado al contexto y tachado */
.woocommerce .price del,
.woocommerce .price del .woocommerce-Price-amount {
    color: var(--ekp-ctx-fg-muted);
    text-decoration: line-through;
    font-weight: var(--ekp-fw-regular);
}

/* Sufijo -NN% generado junto al precio (hook PHP): eyebrow rojo en SANS, no Mono */
.woocommerce .price .ekp-price__discount {
    margin-left: var(--ekp-space-1);
    font-family: var(--font-sans);
    font-size: 0.7em;
    font-weight: var(--ekp-fw-bold);
    letter-spacing: var(--ekp-tracking-label);
    text-transform: uppercase;
    color: var(--ekp-sale-500);
    white-space: nowrap;
}

/* ============================================================
 * QUANTITYSTEPPER — step 10
 * DOM real Woo/WoodMart: div.quantity > input.minus.btn + input.qty (number,
 * min/max/step) + input.plus.btn. Spec DS (eds-qty): pieza unica con borde y
 * radio sm, botones -/+ a los lados, cifra central en Mono tabular; clamp
 * [min,max] que DESHABILITA -/+ en los limites. on-light (cuerpo, --ekp-ctx-*).
 * El clamp FUNCIONAL lo da Woo (atributos min/max del input + su quantity.js);
 * el FEEDBACK visual de disabled lo sincroniza un JS minimo (ekp-store-components.js)
 * que solo refleja el estado (no toca el incremento ni el AJAX del carrito).
 * ============================================================ */

/* Pieza unica: caja on-light (borde bone, radio sm) que envuelve -/+ y cifra */
.woocommerce .quantity {
    display: inline-flex;
    align-items: stretch;
    background-color: var(--ekp-ctx-field-bg);
    border: 1px solid var(--ekp-ctx-field-border);
    border-radius: var(--ekp-radius-sm);
    overflow: hidden;
}

/* PKG-EK-W1-23 · EXCEPCION: el "1 × precio" del mini-cart es un <span class="quantity">
 * que comparte clase con el QuantityStepper de la ficha (regla anterior) y heredaba su
 * CAJA (fondo del contexto + borde + radio). En el cart drawer eso se veia como una
 * ETIQUETA NEGRA con el importe en cobre, pequeno y poco legible. No es un stepper: se
 * neutraliza la caja SOLO en el mini-cart del drawer y el importe pasa a texto NEGRO
 * (--ekp-text-on-light) legible sobre el panel claro. El drawer NO se oscurece. */
.cart-widget-side .widget_shopping_cart .quantity {
    display: inline;
    background: none;
    border: 0;
    border-radius: 0;
    color: var(--ekp-text-on-light);
}
.cart-widget-side .widget_shopping_cart .quantity .woocommerce-Price-amount {
    color: var(--ekp-text-on-light);
}

/* Botones -/+ : cuadrados touch-safe, glifo centrado; hover vira a cobre */
.woocommerce .quantity input.minus,
.woocommerce .quantity input.plus {
    width: 2.75rem;
    min-height: 2.75rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ekp-ctx-fg-muted);
    font-family: var(--font-sans);
    font-size: var(--ekp-text-lg);
    font-weight: var(--ekp-fw-medium);
    line-height: 1;
    cursor: pointer;
    transition: color var(--ekp-t-fast), background-color var(--ekp-t-fast);
}

.woocommerce .quantity input.minus:hover:not(:disabled),
.woocommerce .quantity input.plus:hover:not(:disabled) {
    color: var(--ekp-ctx-accent);
}

/* Limite alcanzado: el JS pone [disabled]; se atenua con opacity y se bloquea el
 * cursor. (Chromium PROTEGE el color del `value` de un input[type=button] disabled
 * —ni !important lo cambia—, pero respeta la opacity.) [!] WoodMart ya atenua el
 * disabled a 0.6 con mas especificidad; se baja a 0.4 con !important para que el
 * limite sea inequivoco (la spec eds-qty exige -/+ visiblemente off). */
.woocommerce .quantity input.minus:disabled,
.woocommerce .quantity input.plus:disabled {
    opacity: 0.4 !important;
    cursor: not-allowed;
}

/* Cifra central en Mono tabular, aislada por hairlines del contexto */
.woocommerce .quantity input.qty {
    width: 3rem;
    padding: 0 var(--ekp-space-1);
    border: 0;
    border-inline: 1px solid var(--ekp-ctx-field-border);
    border-radius: 0;
    background: none;
    color: var(--ekp-ctx-fg);
    text-align: center;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    font-weight: var(--ekp-fw-medium);
    appearance: textfield;
    -moz-appearance: textfield;
}

/* Sin flechas nativas del input number (la cifra manda; -/+ son los controles) */
.woocommerce .quantity input.qty::-webkit-outer-spin-button,
.woocommerce .quantity input.qty::-webkit-inner-spin-button {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
}

/* ============================================================
 * SIZESELECTOR — step 11
 * DOM real: form.variations_form table.variations td.value .wd-swatches-product
 *   > .wd-swatch (role=radio). Estados WoodMart: .wd-enabled (disponible),
 *   .wd-active (seleccionado), sin .wd-enabled (no disponible). El label vive en
 *   .wd-swatch-text; el fondo (imagen del demo) en .wd-swatch-bg.
 * Spec DS (eds-size): chips de TEXTO Mono; seleccionado invierte a ink; agotado
 *   rayado (hatched) y no seleccionable. on-light (cuerpo).
 * Se viste el chip mostrando el label y neutralizando el fondo-imagen -> robusto
 *   para demo (talla como imagen) y produccion (talla-texto nativa). ACOTADO a
 *   .variations (PDP principal, no los relacionados del loop) y a :not(.wd-color)
 *   (el color es el step 12). ELEVAR a EK-B3: la talla real es pa_talla-textil
 *   (texto, tallaje Joma); el seed debe configurarla como texto, no imagen.
 * ============================================================ */

/* Rejilla de tallas (cabecera "Talla" la aporta WoodMart en th.label) */
.woocommerce .variations td.value .wd-swatches-product {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ekp-space-2);
}

/* Chip de talla: caja de texto Mono on-light. [!] WoodMart fija un tamano fijo
 * de swatch (wd-size-default) con su cascada; se repone a chip ancho con !important. */
.woocommerce .variations .wd-swatch:not(.wd-color) {
    width: auto !important;
    height: auto !important;
    min-width: 3rem;
    min-height: 2.75rem;
    padding: var(--ekp-space-2) var(--ekp-space-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--ekp-ctx-border);
    border-radius: var(--ekp-radius-sm);
    /* [!] WoodMart fija el color del swatch (gris) con su cascada; se repone a ink
     * on-light por contraste AA (el gris da 3.9:1, insuficiente a 14px). */
    color: var(--ekp-ctx-fg) !important;
    font-family: var(--font-mono);
    font-size: var(--ekp-text-sm);
    font-weight: var(--ekp-fw-medium);
    line-height: 1;
    cursor: pointer;
    transition: border-color var(--ekp-t-fast), color var(--ekp-t-fast), background-color var(--ekp-t-fast);
}

/* Neutralizar el fondo-imagen del swatch de talla; mostrar el label de texto */
.woocommerce .variations .wd-swatch:not(.wd-color) .wd-swatch-bg {
    display: none;
}

.woocommerce .variations .wd-swatch:not(.wd-color) .wd-swatch-text {
    display: inline;
    font: inherit;
    color: inherit;
    opacity: 1;
}

/* Hover (talla disponible): borde y texto a ink */
.woocommerce .variations .wd-swatch.wd-enabled:not(.wd-color):hover {
    border-color: var(--ekp-ctx-fg);
    color: var(--ekp-ctx-fg);
}

/* Seleccionada: invierte a ink (relleno oscuro, texto claro). WoodMart BLOQUEA el
 * background-color del .wd-swatch (no lo pinta ni con !important), asi que el relleno
 * se logra con un box-shadow inset (truco fiable, verificado); borde y texto a
 * ink/claro. [!] para clavar la inversion del DS sobre el estado activo nativo. */
.woocommerce .variations .wd-swatch.wd-active:not(.wd-color) {
    box-shadow: inset 0 0 0 6rem var(--ekp-ink-900) !important;
    border-color: var(--ekp-ink-900) !important;
    color: var(--ekp-on-dark-1) !important;
    font-weight: var(--ekp-fw-bold);
}

/* El label de la talla seleccionada no hereda (WoodMart le fija color propio):
 * se fuerza claro para que se lea sobre el relleno ink. */
.woocommerce .variations .wd-swatch.wd-active:not(.wd-color) .wd-swatch-text {
    color: var(--ekp-on-dark-1) !important;
}

/* Agotada (sin .wd-enabled): rayada (hatched), atenuada y no seleccionable */
.woocommerce .variations .wd-swatch:not(.wd-enabled):not(.wd-color) {
    color: var(--ekp-ctx-fg-muted);
    cursor: not-allowed;
    opacity: 0.7;
    background-image: repeating-linear-gradient(135deg, transparent 0 5px, var(--ekp-ctx-border) 5px 6px);
}

/* ============================================================
 * COLORSWATCH — step 12
 * DOM real: .variations .wd-swatch.wd-color (el color va de fondo del swatch).
 * Spec DS (eds-swatch): circulo con borde; seleccionado con ANILLO (separador del
 *   fondo hueso + cobre); agotado atenuado + SLASH rojo diagonal; nombre del color
 *   junto al label. Variante cuadrada (--square) para tejido/patron.
 * on-light. Complementa al SizeSelector (alli :not(.wd-color); aqui .wd-color).
 * ⚠️ NOTA seed (ELEVAR a EK-B3/D-154): el demo NO tiene productos con color de
 *   VARIACION (el color es atributo fijo; el modelo de club no varia por color).
 *   Aplica al catalogo generico (area comun, D-154) o a productos con opcion de
 *   color. CSS preparado; verificacion con dato real diferida a ese seed.
 * ============================================================ */

/* Swatch de color: circulo con el color de fondo (lo pinta WoodMart) + borde fino.
 * [!] WoodMart fija el tamano del swatch (wd-size-default); se repone a 2rem. */
.woocommerce .variations .wd-swatch.wd-color {
    width: 2rem !important;
    height: 2rem !important;
    border-radius: var(--ekp-radius-circle);
    border: 1px solid var(--ekp-ctx-border);
    cursor: pointer;
    position: relative;
    transition: transform var(--ekp-t-fast), box-shadow var(--ekp-t-fast);
}

.woocommerce .variations .wd-swatch.wd-color.wd-enabled:hover {
    transform: scale(1.08);
}

/* Seleccionado: anillo (separador hueso + cobre) — box-shadow, no toca el color de fondo */
.woocommerce .variations .wd-swatch.wd-color.wd-active {
    box-shadow: 0 0 0 2px var(--ekp-surface-body), 0 0 0 4px var(--ekp-copper-500) !important;
    transform: none;
}

/* Agotado (sin .wd-enabled): atenuado + slash rojo diagonal */
.woocommerce .variations .wd-swatch.wd-color:not(.wd-enabled) {
    cursor: not-allowed;
    opacity: 0.5;
}

.woocommerce .variations .wd-swatch.wd-color:not(.wd-enabled)::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: var(--ekp-radius-circle);
    background: linear-gradient(135deg, transparent 44%, var(--ekp-sale-500) 44% 56%, transparent 56%);
}

/* ── AVISO INFO ÁMBAR · contraste AA (PEND-28 · F5 · PKG-EK-B3-12) ────────────────
   WoodMart pinta el notice informativo (.woocommerce-info) en ámbar #e0b252 con el texto
   en BLANCO -> ~1.9:1 (medido en vivo :9001), muy por debajo de AA. Aparece site-wide
   (búsqueda sin resultados, cesta, toggles de cupón/login...). Se conserva el ámbar (es
   reconocible) y se vira el TEXTO + el icono a tinta cálida (--ekp-warm-900 #1c1a16 sobre
   #e0b252 ~8.3:1 = AA holgado). Acotado a .woocommerce-info: NO toca .woocommerce-message
   (verde, resuelto abajo); .woocommerce-error se trata en su propio bloque (mismo ámbar, no
   rojo: WoodMart no tiene paleta danger). !important:
   WoodMart fija color:#fff en .amount/enlaces con (0,2,0)+; se vence puntualmente. CLAVA
   PEND-28. El icono es un ::before en woodmart-font que hereda color. */
.woocommerce-info,
.woocommerce-info a,
.woocommerce-info .amount {
    color: var(--ekp-warm-900) !important;
}
.woocommerce-info::before {
    color: var(--ekp-warm-900);
}

/* ── AVISO ÉXITO VERDE · texto BLANCO con AA MEDIDO (PKG-EK-B4-10 micro-scope · refina PEND-32) ──
   Jose (t172) pide el notice de éxito con TEXTO BLANCO (texto+enlace+icono), no la tinta
   oscura que dejó PEND-32. Blanco sobre el verde NATIVO de WoodMart (#459647) = 3.68:1 MEDIDO
   en vivo (:9001) -> NO pasa AA. Solución (condición innegociable): se OSCURECE el fondo al
   verde de MARCA --ekp-success-600 (#1b7a34, secundario D-155) -> blanco sobre #1b7a34 = 5.41:1
   MEDIDO en :9001 = AA holgado. Se usa success-600 (verde de MARCA, hex fijo), NO --ekp-green
   (que el motor de identidad de club REMAPEA por club): así el verde del notice queda FUERA del
   motor de club (línea roja). Acotado a .woocommerce-message: NO toca .woocommerce-info (ámbar)
   ni .woocommerce-error (ámbar, Pieza D). !important: WoodMart fija el bg del notice y color:#fff
   en .amount/enlaces con (0,2,0)+; se vence puntualmente. El icono es un ::before en
   woodmart-font que hereda color. */
.woocommerce-message {
    background-color: var(--ekp-success-600) !important;
}
.woocommerce-message,
.woocommerce-message a,
.woocommerce-message .amount {
    color: var(--ekp-on-dark-1) !important;
}
.woocommerce-message::before {
    color: var(--ekp-on-dark-1);
}

/* ── AVISO ERROR · contraste AA (PKG-EK-B4-11 · Pieza D) ──────────────────────────
   CORRECCIÓN de supuesto: los dos bloques de arriba daban por hecho que .woocommerce-error
   era "rojo con su propio contraste". NO lo es. WoodMart 10.6 no define paleta danger:
   enruta .woocommerce-error a la paleta WARNING -> mismo ámbar #e0b252 con el texto en
   BLANCO -> 1.97:1 (medido, bg leído en vivo :9001), falla AA igual que .woocommerce-info.
   La re-validación de cobro (Pieza D) emite sus avisos BLOQUEANTES como .woocommerce-error
   («X ya no forma parte de… / su precio ha cambiado» + enlace quitar), así que deben ser
   legibles. Mismo patrón PEND-28/32: se conserva el ámbar y se vira TEXTO + enlace + icono a
   tinta cálida (--ekp-warm-900 #1c1a16 sobre #e0b252 = 8.82:1 medido = AA holgado). El enlace
   .ekp-cart-notice__remove hereda color y el subrayado nativo del notice -> se ve como enlace.
   !important: WoodMart fija color:#fff en .amount/enlaces con (0,2,0)+; se vence puntualmente. */
.woocommerce-error,
.woocommerce-error a,
.woocommerce-error .amount {
    color: var(--ekp-warm-900) !important;
}
.woocommerce-error::before {
    color: var(--ekp-warm-900);
}