/* ============================================================
 * EKIPATE · CSS modular — PDP / FICHA DE PRODUCTO  (PKG-EK-W1-12)
 * ------------------------------------------------------------
 * Pantalla de ficha (single product) sobre HUESO NEUTRO (D-164b:
 * el cuerpo va on-light; el chrome claro de la ficha lo gobierna F).
 * "restyle, don't redraw": se viste el DOM real que emite el layout
 * Elementor 1607 (Single Product Layout de WoodMart, ajustado por la
 * demo PKG-14 — se viste SOBRE el, sin tocar su _elementor_data) y el
 * add-to-cart dispara el flujo REAL de Woo.
 *
 * Carga: condicional a la ficha (is_product()), tras ekp-store-components
 * (C) — reuse-first: Price, Rating, SizeSelector, ColorSwatch,
 * QuantityStepper, Button y Badge viven en C; aqui solo el CONTEXTO de
 * pantalla. SOLO tokens --ekp-* (stylelint). Breakpoints: 1024/768/480.
 * ============================================================ */

/* ── Step 1 · Grid galeria/info 1.15fr / 1fr + galeria sticky ─
 * El layout 1607 ya trae el contenedor fila con 2 columnas (galeria
 * 60% / info 40%, flex). El DS (st-pdp__grid) pide 1.15fr/1fr con gap
 * fluido y align start: se RE-VISTE el contenedor existente a CSS grid
 * (los anchos --width de Elementor dejan de aplicar al ser tracks) sin
 * editar el layout. Selectores ESTRUCTURALES (:has sobre el widget de
 * galeria), no IDs de Elementor: sobreviven a una regeneracion del
 * layout y declaran la intencion ("el contenedor que aloja la galeria"). */
.single-product .e-parent:has(.elementor-widget-wd_single_product_gallery) > .e-con-inner {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: clamp(28px, 4vw, 64px);
    align-items: start;
}

/* Banda de breadcrumb: el layout demo la pinta AMARILLA (#f8bd18, ajena
 * al DS; deuda anotada por C "la banda amarilla de la PDP se rehace en E").
 * El cuerpo es hueso (D-164b): banda transparente sobre el lienzo y migas
 * en el muted on-light (el gris nativo roza el AA); la hoja actual en
 * cobre ya la viste C. body.single-product da la especificidad que gana
 * al CSS generado de Elementor (post-1607) sin recurrir a !important. */
body.single-product .e-con.e-parent:has(.elementor-widget-wd_wc_breadcrumb) {
    background-color: transparent;
    padding-block: var(--ekp-space-2);
}

body.single-product .e-parent .wd-breadcrumbs a,
body.single-product .e-parent .wd-breadcrumbs .wd-delimiter {
    color: var(--ekp-text-on-light-muted);
}

body.single-product .e-parent .wd-breadcrumbs a:hover {
    color: var(--ekp-text-accent);
}

/* ── Club-aware · PKG-EK-W1-17 (P3 · step 3) · acentos de la ficha al color del club ─
 * La ficha consume el contrato de P1 (body.ekp-club--{slug} + 6 vars del club) pero NO
 * esta envuelta en .ekp-club-scope (el plugin no la envuelve), asi que la familia de
 * tokens-puente del cuerpo (--ekp-accent*, --ekp-copper-*, --ekp-text-accent...) seguia
 * congelada en COBRE: el CTA salia #b05620 (cobre, 5.00) y los acentos del cuerpo
 * (iconos perks, breadcrumb activo, thumb activo, hover del acordeon/favoritos) tambien.
 *
 * Aqui se RE-RESUELVE esa familia al color del club re-declarando los tokens-puente del
 * motor (mismo patron que la cabecera de P2 en ekp-chrome §4: se consume el contrato, no
 * se toca ekp-club.css). OJO: las derivadas --_ekp-cp-* del motor se HORNEAN en :root con
 * el cobre y heredan ya computadas (no se recalculan fuera de un sitio de declaracion
 * :root/.ekp-club-scope), asi que NO sirven aqui. Se expresan los tokens DIRECTAMENTE
 * desde --ekp-club-primary (que P1 deja en el body, si resuelve aqui) con las MISMAS
 * formulas color-mix del motor, y el texto on-color con --ekp-club-on-primary (precalc
 * AA de P1). Para Gallarta: CTA blanco/rojo AA, perks y acentos en rojo. SOLO on-light
 * (la ficha es cuerpo/hueso); el on-dark lo da la cabecera (P2). Acotado al BLOQUE de
 * producto (galeria+info) + breadcrumb: el related-E (.elementor-widget-wd_products)
 * queda FUERA del scope -> INTACTO (linea roja). 2 acentos: el secundario no se toca. */
body[class*="ekp-club--"].single-product .e-parent:has(.elementor-widget-wd_single_product_gallery),
body[class*="ekp-club--"].single-product .e-con.e-parent:has(.elementor-widget-wd_wc_breadcrumb) {
    --ekp-accent:          var(--ekp-club-primary);
    --ekp-accent-hover:    color-mix(in oklab, var(--ekp-club-primary), #000 14%);
    --ekp-accent-soft:     color-mix(in oklab, var(--ekp-club-primary) 14%, var(--ekp-surface-body));
    --ekp-accent-glow:     color-mix(in srgb, var(--ekp-club-primary) 22%, transparent);
    --ekp-copper-500:      var(--ekp-club-primary);
    --ekp-copper-600:      color-mix(in oklab, var(--ekp-club-primary), #000 14%);
    --ekp-copper-700:      color-mix(in oklab, var(--ekp-club-primary), #000 26%);
    --ekp-copper-glow:     color-mix(in srgb, var(--ekp-club-primary) 22%, transparent);
    --ekp-text-accent:     var(--ekp-club-primary);
    --ekp-border-accent:   color-mix(in srgb, var(--ekp-club-primary) 38%, transparent);
    --ekp-accent-contrast: var(--ekp-club-on-primary);
    --ekp-focus-ring:      var(--ekp-club-primary);
    --ekp-ctx-accent:      var(--ekp-club-primary);
    --ekp-glow-accent:
        0 0 0 1px color-mix(in srgb, var(--ekp-club-primary) 40%, transparent),
        0 8px 28px -8px color-mix(in srgb, var(--ekp-club-primary) 45%, transparent);
    --ekp-glow-accent-sm:
        0 4px 16px -6px color-mix(in srgb, var(--ekp-club-primary) 50%, transparent);
}

/* Las columnas pasan a items de grid: se neutraliza el ancho fijo de
 * Elementor (60%/40% via --width) para que el track mande. */
.single-product .e-parent:has(.elementor-widget-wd_single_product_gallery) > .e-con-inner > .e-con {
    --width: 100%;

    max-width: none;
}

/* El layout demo trae el patron INVERSO al DS: columna info sticky
 * (wd-sticky-container-lg, JS de WoodMart que inyecta position:sticky
 * INLINE en scroll). El DS manda galeria sticky + info desfilando; se
 * neutraliza el sticky de la info. [!] un estilo inline solo se vence
 * con !important (politica PKG-01/C). No es trabajo de PKG-14 (la demo
 * ajusto contenidos, no este comportamiento del demo Merchandise). */
body.single-product .wd-sticky-container-lg {
    position: static !important;
    top: auto !important;
}

/* Galeria sticky con offset de header: acompana el scroll mientras la
 * columna info (mas larga: compra + perks + acordeon) se recorre.
 * El offset cubre la cabecera sticky clara (~70px de fila) + aire. */
.single-product .e-con:has(> .elementor-widget-wd_single_product_gallery) {
    position: sticky;
    top: 96px;
}

/* ≤768 (tablet vertical / movil): una columna, galeria primero y
 * estatica (el sticky en columna unica secuestraria el scroll). */
@media (max-width: 768px) {
    .single-product .e-parent:has(.elementor-widget-wd_single_product_gallery) > .e-con-inner {
        grid-template-columns: 1fr;
        /* el layout demo deja el contenedor a 0 en movil y el contenido
         * tocaba el viewport; 15px = el gutter del .container de WoodMart
         * (mismo que usa la banda del breadcrumb). */
        padding-inline: 15px;
    }

    .single-product .e-con:has(> .elementor-widget-wd_single_product_gallery) {
        position: static;
    }
}

/* ── Step 2 · Galeria: principal 1:1 enmarcada + thumbs + flags ──
 * DS st-gallery: principal 1:1 con marco (hairline + radio lg) sobre
 * carta clara; el carrusel nativo de WoodMart (swiper) queda intacto —
 * solo se viste su caja. Las fotos de producto (fondo blanco, 7:8) se
 * encajan con contain sobre la carta: sin recortes de prenda. */
.single-product .wd-gallery-images {
    aspect-ratio: 1 / 1;
    background-color: var(--ekp-card);
    border: 1px solid var(--ekp-border-on-light);
    border-radius: var(--ekp-radius-lg);
    overflow: hidden;
}

.single-product .wd-gallery-images .wd-carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* La cadena interna del carrusel debe dar el alto del marco al item */
.single-product .wd-gallery-images .wd-carousel-inner,
.single-product .wd-gallery-images .woocommerce-product-gallery__wrapper,
.single-product .wd-gallery-images .wd-carousel-wrap,
.single-product .wd-gallery-images .wd-carousel-item,
.single-product .wd-gallery-images .woocommerce-product-gallery__image,
.single-product .wd-gallery-images .woocommerce-product-gallery__image > a {
    height: 100%;
}

/* Thumbs: rejilla de miniaturas 1:1 con marco fino; la activa, en cobre
 * (anillo del DS). El carrusel de WoodMart ya pone 4 por fila (columns-4);
 * se viste el item, no se toca su mecanica de click/swipe. */
.single-product .wd-gallery-thumb .wd-carousel-item {
    aspect-ratio: 1 / 1;
    border: 1px solid var(--ekp-border-on-light);
    border-radius: var(--ekp-radius-sm);
    overflow: hidden;
    background-color: var(--ekp-card);
    cursor: pointer;
    transition: border-color var(--ekp-t-fast);
}

.single-product .wd-gallery-thumb .wd-carousel-item:hover {
    border-color: var(--ekp-border-strong);
}

.single-product .wd-gallery-thumb .wd-carousel-item.wd-thumb-active {
    border-color: var(--ekp-copper-500);
}

.single-product .wd-gallery-thumb .wd-carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Flags de estado (sale/-NN%, agotado, destacado): los emite el hook del
 * child (woodmart_on_product_image) con el markup nativo .product-labels
 * que C ya viste (sale rojo, featured cobre). Aqui solo la esquina del DS
 * (st-gallery__flags: top/left 16, sobre la foto). */
.single-product .wd-gallery-images .product-labels {
    position: absolute;
    top: var(--ekp-space-4);
    left: var(--ekp-space-4);
    right: auto;
    z-index: 2;
    display: flex;
    flex-direction: row;
    gap: var(--ekp-space-2);
}

/* ── Step 3 · Bloque info: cabecera editorial del producto ────
 * DS st-info: [categoria Mono → nombre display → rating + stock] →
 * precio → descripcion light/airy → hairline → compra. El layout trae
 * otro orden (desc antes del precio, tablas de atributos y SKU como
 * ruido): la columna es flex, se reordena con `order` (restyle: el DOM
 * no se reescribe) y el ruido se oculta. Los widgets de single solo
 * existen en la ficha; los contenedores se señalan con :has. */

/* Ritmo vertical de la columna (st-info: gap 22px) */
.single-product .e-con:has(> .elementor-widget-wd_single_product_price) {
    row-gap: var(--ekp-space-5);
}

/* Orden DS. Flex order explicito para TODOS los hermanos visibles
 * (un item sin order=0 saltaria encima del bloque title con order 1). */
.single-product .e-con:has(> .elementor-widget-wd_wc_notices) .elementor-widget-wd_wc_notices { order: -1; }
.single-product .e-con > .e-con:has(> .elementor-widget-wd_single_product_title) { order: 1; }
.single-product .elementor-widget-wd_single_product_rating { order: 2; }
.single-product .e-con > .e-con:has(> .elementor-widget-wd_single_product_stock_status) { order: 3; }
.single-product .elementor-widget-wd_single_product_countdown { order: 4; }
.single-product .elementor-widget-wd_single_product_price { order: 5; }
.single-product .elementor-widget-wd_single_product_short_description { order: 6; }
.single-product .elementor-widget-wd_single_product_add_to_cart { order: 7; }
.single-product .e-con > .e-con:has(> .elementor-widget-wd_single_product_wishlist_button) { order: 8; }

/* Ruido del layout fuera del DS: tablas de atributos (la talla vive en
 * el selector; los materiales, en el acordeon del step 6) y el segundo
 * meta (SKU duplicado al pie). Solo display — reversible. */
.single-product .e-con .elementor-widget-wd_single_product_additional_info_table {
    display: none;
}

/* El meta SUELTO al pie de la columna (hijo directo) duplica el SKU del
 * bloque stock+meta y, sin order propio, saltaria sobre el titulo. Fuera.
 * (El primer meta vive en el sub-contenedor del stock y no le afecta.) */
.single-product .e-con:has(> .elementor-widget-wd_single_product_price) > .elementor-widget-wd_single_product_meta {
    display: none;
}

/* Eyebrow de categoria (hook del child): Mono versalita atenuada */
.ekp-pdp__cat {
    display: block;
    margin-block-end: var(--ekp-space-2);
    font-family: var(--ekp-type-mono-family);
    font-size: var(--ekp-text-xs);
    font-weight: var(--ekp-type-mono-weight);
    letter-spacing: var(--ekp-tracking-label);
    text-transform: uppercase;
    color: var(--ekp-text-on-light-muted);
}

/* Nombre en display (Archivo, D-166): grande, prieto, ink on-light */
.single-product h1.product_title {
    font-family: var(--ekp-type-display-family);
    font-size: var(--ekp-text-display-md);
    font-weight: var(--ekp-type-display-weight);
    line-height: var(--ekp-type-display-leading);
    letter-spacing: var(--ekp-type-display-tracking);
    color: var(--ekp-text-on-light);
}

/* Rating del widget de la ficha: el CSS del widget pisa el color de las
 * estrellas vacias de C (#bbb nativo) -> se repone el token on-light. */
.single-product .elementor-widget-wd_single_product_rating .star-rating::before {
    color: var(--ekp-bone-500);
}

/* SKU: dato tecnico en Mono mudo (el DS no lo lleva en cabecera; se
 * conserva discreto junto al stock — es dato real de comercio) */
.single-product .elementor-widget-wd_single_product_meta .sku_wrapper {
    font-family: var(--ekp-type-mono-family);
    font-size: var(--ekp-text-xs);
    letter-spacing: var(--ekp-type-mono-tracking);
    color: var(--ekp-text-on-light-muted);
}

/* Descripcion light/airy (st-info__desc): Archivo 300, aire y medida */
.single-product .elementor-widget-wd_single_product_short_description {
    max-width: 48ch;
}

.single-product .elementor-widget-wd_single_product_short_description p {
    font-family: var(--ekp-type-body-family);
    font-weight: var(--ekp-fw-light);
    font-size: var(--ekp-text-md);
    line-height: var(--ekp-leading-relaxed);
    color: var(--ekp-text-on-light-muted);
}

/* El widget add_to_cart antepone su propia linea de disponibilidad al
 * form (duplica el badge del bloque stock en simples). Se oculta SOLO
 * esa (hija directa); la disponibilidad por variacion (dentro de
 * .single_variation, feedback dinamico al elegir talla) se conserva. */
.single-product .elementor-widget-wd_single_product_add_to_cart > .elementor-widget-container > p.stock {
    display: none;
}

/* Hairline del DS (st-info__divider) antes de la zona de compra.
 * Vive en el FORM (no en el widget): el widget va en display:contents
 * desde el step 5 y un contents no pinta cajas. */
.single-product form.cart {
    border-top: 1px solid var(--ekp-border-on-light);
    padding-block-start: var(--ekp-space-5);
}

/* ── Step 4 · Fila de compra: stepper + CTA + favoritos ───────
 * DS st-info__row: QuantityStepper y CTA creciendo en una fila; el
 * IconButton de favoritos cierra la fila. El form y el widget de
 * favoritos son hermanos de la columna: la columna pasa a GRID
 * [1fr auto] — todos los hijos abarcan el ancho salvo form (col 1) y
 * favoritos (col 2, alineado al pie = a la altura del CTA). El order
 * del step 3 sigue mandando (el grid auto-coloca respetando order). */
.single-product .e-con:has(> .elementor-widget-wd_single_product_price) {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: var(--ekp-space-3);
}

.single-product .e-con:has(> .elementor-widget-wd_single_product_price) > * {
    grid-column: 1 / -1;
    min-width: 0;
}

/* El widget add_to_cart se DISUELVE en el grid (display:contents): sus
 * hijos —form, perks (step 5) y acordeon (step 6), emitidos por hooks
 * dentro del widget— pasan a ser items directos de la columna. Asi el
 * corazon (col 2, align-self end) queda a la altura del CTA (pie del
 * FORM), no del pie del widget entero con perks y acordeon dentro. */
.single-product .e-con:has(> .elementor-widget-wd_single_product_price) > .elementor-widget-wd_single_product_add_to_cart,
.single-product .e-con:has(> .elementor-widget-wd_single_product_price) > .elementor-widget-wd_single_product_add_to_cart > .elementor-widget-container {
    display: contents;
}

/* Items disueltos: mismo orden que el widget tenia (7) y siguientes;
 * sin order explicito saltarian encima del titulo (order 1). */
.single-product .e-con:has(> .elementor-widget-wd_single_product_price) form.cart {
    grid-column: 1;
    order: 7;
    min-width: 0;
}

.single-product .e-con:has(> .elementor-widget-wd_single_product_price) .ekp-perks {
    grid-column: 1 / -1;
    order: 9;
}

.single-product .e-con:has(> .elementor-widget-wd_single_product_price) > .e-con:has(> .elementor-widget-wd_single_product_wishlist_button) {
    grid-column: 2;
    grid-row: span 1;
    align-self: end;
    order: 8;
}

/* El acordeon (step 6) cierra la columna tras los perks */
.single-product .e-con:has(> .elementor-widget-wd_single_product_price) .wc-tabs-wrapper {
    grid-column: 1 / -1;
    order: 10;
}

/* ── Step 6 · Acordeon (st-acc): hairlines on-light + versalita + chevron ──
 * Markup y JS NATIVOS de WoodMart (layout accordion + primera abierta,
 * opcion virada en functions.php). Aqui solo el idioma visual del DS:
 * cabecera en versalita ink, hairlines finas, panel mudo con medida;
 * el chevron nativo (wd-accordion-opener) ya rota al abrir. */
/* Hairlines: se adopta el MODELO de bordes del acordeon del tema
 * (bottom por item + top en el primero) remapeando su token de color al
 * del DS — mismo patron que el --wd-main-bgcolor del style.css — y
 * afinando el grosor 2px -> 1px (hairline). Un border propio por item
 * duplicaria lineas contra el bottom nativo. */
.single-product .wc-tabs-wrapper {
    --brdcolor-gray-300: var(--ekp-border-on-light);
}

.single-product .wc-tabs-wrapper.wd-accordion > .wd-accordion-item:first-of-type {
    border-top-width: 1px;
}

.single-product .wc-tabs-wrapper.wd-accordion > .wd-accordion-item:last-of-type {
    border-bottom-width: 1px;
}

.single-product .wc-tabs-wrapper .wd-accordion-title {
    padding: var(--ekp-space-4) 0;
    font-family: var(--ekp-type-body-family);
    font-size: var(--ekp-text-sm);
    font-weight: var(--ekp-fw-bold);
    letter-spacing: var(--ekp-tracking-wide);
    text-transform: uppercase;
    color: var(--ekp-text-on-light);
    transition: color var(--ekp-t-fast);
}

.single-product .wc-tabs-wrapper .wd-accordion-title:hover {
    color: var(--ekp-text-accent);
}

.single-product .wc-tabs-wrapper .wd-accordion-opener {
    color: var(--ekp-text-on-light-muted);
}

.single-product .wc-tabs-wrapper .wd-accordion-content {
    padding: 0 0 var(--ekp-space-4);
    font-family: var(--ekp-type-body-family);
    font-size: var(--ekp-text-sm);
    line-height: var(--ekp-leading-relaxed);
    color: var(--ekp-text-on-light-muted);
}

.single-product .wc-tabs-wrapper .wd-accordion-content p {
    max-width: 56ch;
}

/* ── Step 5 · Perks (st-perk): icono Lucide cobre + titulo + texto ── */
.ekp-perks {
    display: flex;
    flex-direction: column;
    gap: var(--ekp-space-3);
}

.ekp-perk {
    display: flex;
    align-items: flex-start;
    gap: var(--ekp-space-3);
}

.ekp-perk svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--ekp-copper-500);
}

.ekp-perk__title {
    display: block;
    font-family: var(--ekp-type-body-family);
    font-size: var(--ekp-text-sm);
    font-weight: var(--ekp-fw-semibold);
    color: var(--ekp-text-on-light);
}

.ekp-perk__text {
    font-family: var(--ekp-type-body-family);
    font-size: var(--ekp-text-xs);
    color: var(--ekp-text-on-light-muted);
}

/* CTA creciendo en su fila (variable y simple); el stepper ya es pieza
 * Mono de C. El boton "Buy now" de WoodMart no existe en el DS: fuera. */
.single-product form.cart .woocommerce-variation-add-to-cart,
.single-product form.cart {
    gap: var(--ekp-space-3);
}

.single-product form.cart button.single_add_to_cart_button {
    flex: 1 1 auto;
}

.single-product form.cart .wd-buy-now-btn {
    display: none;
}

/* Favoritos como IconButton outline de C: 44px, corazon solo, borde
 * que vira a cobre al hover; el texto queda para lectores/tooltip. */
.single-product .elementor-widget-wd_single_product_wishlist_button a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    border: 1px solid var(--ekp-ctx-border);
    border-radius: var(--ekp-radius-sm);
    color: var(--ekp-ctx-fg);
    transition: border-color var(--ekp-t-fast), color var(--ekp-t-fast);
}

.single-product .elementor-widget-wd_single_product_wishlist_button a:hover {
    border-color: var(--ekp-copper-500);
    color: var(--ekp-text-accent);
}

.single-product .elementor-widget-wd_single_product_wishlist_button .wd-action-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Talla agotada REAL: el modulo JS (D-169) marca .ekp-soldout leyendo
 * is_in_stock de data-product_variations. Mismo lenguaje rayado que el
 * estado sin .wd-enabled de C; ademas NO seleccionable (eds-size). */
.woocommerce .variations .wd-swatch.ekp-soldout:not(.wd-color) {
    color: var(--ekp-ctx-fg-muted);
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.7;
    background-image: repeating-linear-gradient(135deg, transparent 0 5px, var(--ekp-ctx-border) 5px 6px);
}

/* Placeholder de marca (producto sin foto): la palabra EKIPATE en display
 * sobre la carta, como el st-gallery__mark del DS; se oculta el gris
 * "Awaiting product image" de Woo. */
.single-product .wd-gallery-images .woocommerce-product-gallery__image--placeholder {
    position: relative;
}

.single-product .wd-gallery-images .woocommerce-product-gallery__image--placeholder img {
    opacity: 0;
}

.single-product .wd-gallery-images .woocommerce-product-gallery__image--placeholder::after {
    content: "EKIPATE";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: var(--ekp-type-display-family);
    font-size: var(--ekp-text-display-md);
    font-weight: var(--ekp-type-display-weight);
    letter-spacing: var(--ekp-type-display-tracking);
    text-transform: uppercase;
    /* marca sutil ON-LIGHT (st-gallery__mark del DS es on-dark; --ekp-text-faint
     * es blanco y desapareceria sobre la carta): bone-500, como las estrellas
     * vacias del Rating de C. */
    color: var(--ekp-bone-500);
}

/* PKG-EK-W1-23 · Ocultar el titulo huerfano "Opiniones de clientes" de la ficha.
 * Es un widget wd_title del template de Elementor (data-id abe48e6) SIN seccion de
 * resenas detras: tras el va directamente el modulo de relacionados. Con las resenas
 * desactivadas (woocommerce_enable_reviews=no) nunca habra contenido, asi que ese
 * encabezado queda vacio y delata las resenas a medio quitar. Se oculta limpio aqui
 * (linea roja: solo child). Lo robusto a futuro es eliminar el widget en Elementor;
 * el data-id es estable mientras el template no se reedite. */
.single-product .elementor-element-abe48e6 {
    display: none;
}

/* PKG-EK-B13-16 · Nombre YITH: solo addon text2 del formulario principal
 * del layout PDP observado. El scope estructural excluye quick view y la barra
 * sticky de compra; tambien se aplica si este mismo addon aparece en otra ficha.
 * No se modifica el motor de club ni el contenido/contrato del formulario. */
body.single-product #main-content .single-product-page > .elementor .elementor-widget-wd_single_product_add_to_cart > .elementor-widget-container > form.cart > #yith-wapo-container #yith-wapo-addon-2.yith-wapo-addon-type-text {
    /* Unico !important del delta: vence el blanco inline de este addon. */
    background-color: var(--ekp-surface-body) !important;
    box-sizing: border-box;
    min-width: 0;
    margin-block: 0 var(--ekp-space-4);
    padding: var(--ekp-space-4);
    border: 1px solid var(--ekp-border-on-light);
    border-radius: var(--ekp-radius-sm);
    color: var(--ekp-text-on-light);
}

body.single-product #main-content .single-product-page > .elementor .elementor-widget-wd_single_product_add_to_cart > .elementor-widget-container > form.cart > #yith-wapo-container #yith-wapo-addon-2.yith-wapo-addon-type-text .wapo-addon-title {
    margin: 0 0 var(--ekp-space-1);
    font-family: var(--ekp-type-heading-family);
    font-size: var(--ekp-text-base);
    font-weight: var(--ekp-fw-semibold);
    line-height: var(--ekp-leading-normal);
    color: var(--ekp-text-on-light);
}

body.single-product #main-content .single-product-page > .elementor .elementor-widget-wd_single_product_add_to_cart > .elementor-widget-container > form.cart > #yith-wapo-container #yith-wapo-addon-2.yith-wapo-addon-type-text label[for="yith-wapo-2-0"] {
    display: block;
    margin: 0 0 var(--ekp-space-2);
    line-height: var(--ekp-leading-normal);
}

body.single-product #main-content .single-product-page > .elementor .elementor-widget-wd_single_product_add_to_cart > .elementor-widget-container > form.cart > #yith-wapo-container #yith-wapo-addon-2.yith-wapo-addon-type-text .option-price {
    font-family: var(--ekp-type-mono-family);
    font-size: var(--ekp-text-sm);
    font-weight: var(--ekp-type-mono-weight);
    line-height: var(--ekp-leading-normal);
    color: var(--ekp-text-on-light-muted);
}

/* El importe tiene color y peso propios en YITH: hereda el recargo completo. */
body.single-product #main-content .single-product-page > .elementor .elementor-widget-wd_single_product_add_to_cart > .elementor-widget-container > form.cart > #yith-wapo-container #yith-wapo-addon-2.yith-wapo-addon-type-text .option-price span {
    font: inherit;
    color: inherit;
}

body.single-product #main-content .single-product-page > .elementor .elementor-widget-wd_single_product_add_to_cart > .elementor-widget-container > form.cart > #yith-wapo-container #yith-wapo-addon-2.yith-wapo-addon-type-text input#yith-wapo-2-0.yith-wapo-option-value {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    height: auto;
    padding: var(--ekp-space-3);
    font-family: var(--ekp-type-body-family);
    font-size: var(--ekp-text-base);
    line-height: var(--ekp-leading-normal);
    color: var(--ekp-text-on-light);
    background-color: var(--ekp-surface-body);
    border: 1px solid var(--ekp-text-on-light-muted);
    border-radius: var(--ekp-radius-sm);
}

body.single-product #main-content .single-product-page > .elementor .elementor-widget-wd_single_product_add_to_cart > .elementor-widget-container > form.cart > #yith-wapo-container #yith-wapo-addon-2.yith-wapo-addon-type-text input#yith-wapo-2-0.yith-wapo-option-value:focus-visible {
    outline: 2px solid var(--ekp-focus-ring);
    outline-offset: 2px;
}

/* PKG-EK-B13-16 · Resumen nativo compacto; las clases solo se activan
 * en el formulario principal validado por el adaptador. */
body.single-product #main-content .ekp-addon-summary #wapo-total-price-table {
    margin-block: var(--ekp-space-3) var(--ekp-space-4);
    padding: 0;
    background: var(--ekp-surface-body);
    color: var(--ekp-text-on-light);
}

body.single-product #main-content .ekp-addon-summary #wapo-total-price-table table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    background: var(--ekp-surface-body);
}

body.single-product #main-content .ekp-addon-summary #wapo-total-price-table :is(th, td) {
    padding: var(--ekp-space-2) 0;
    border: 0;
    font-family: var(--ekp-type-body-family);
    font-size: var(--ekp-text-sm);
    line-height: var(--ekp-leading-normal);
    color: var(--ekp-text-on-light-muted);
    background: var(--ekp-surface-body);
    vertical-align: top;
}

body.single-product #main-content .ekp-addon-summary #wapo-total-price-table th {
    padding-inline-end: var(--ekp-space-3);
    text-align: start;
    overflow-wrap: anywhere;
}

body.single-product #main-content .ekp-addon-summary #wapo-total-price-table td {
    text-align: end;
    font-family: var(--ekp-type-mono-family);
}

body.single-product #main-content .ekp-addon-summary #wapo-total-price-table .amount {
    font: inherit;
    color: inherit;
}

body.single-product #main-content .ekp-addon-summary #wapo-total-price-table .wapo-total-order :is(th, td) {
    border-top: 1px solid var(--ekp-border-on-light);
    padding-block-start: var(--ekp-space-3);
    color: var(--ekp-text-on-light);
    font-weight: var(--ekp-fw-semibold);
    font-size: var(--ekp-text-base);
}

body.single-product #main-content .ekp-addon-summary :is(.ekp-addon-help, .ekp-addon-status) {
    margin-block: var(--ekp-space-2) 0;
    font-family: var(--ekp-type-body-family);
    font-size: var(--ekp-text-sm);
    line-height: var(--ekp-leading-normal);
    color: var(--ekp-text-on-light-muted);
    overflow-wrap: anywhere;
}

/* hidden gana a los estilos del plugin y sale de AX/Tab. Durante una
 * actualizacion se conserva el detalle anterior con aviso; no su total viejo. */
body.single-product #main-content .ekp-addon-summary #wapo-total-price-table[hidden],
body.single-product #main-content .ekp-addon-summary .ekp-addon-status[hidden],
body.single-product #main-content .ekp-addon-summary[data-ekp-price-state="pending"] .wapo-total-order {
    display: none !important;
}

body.single-product #main-content .ekp-addon-summary input.yith-wapo-option-value {
    transition: border-color var(--ekp-t-fast), background-color var(--ekp-t-fast);
}

@media (prefers-reduced-motion: reduce) {
    body.single-product #main-content .ekp-addon-summary input.yith-wapo-option-value {
        transition: none;
    }
}