/* =============================================================
 * Celumovil Mobile UX — master stylesheet
 *
 * Reglas envueltas en @media (max-width: 768px) para no afectar
 * desktop. Scope con body.cmx-mobile cuando un cambio necesita
 * isolation contra Elementor / Kava / Crocoblock.
 *
 * Tokens extraídos del Design DNA del home actual.
 * Fuente: _recursos/design-dna.md (Elementor Kit ID 8 + computed
 * styles via Playwright). NO cambiar sin re-extraer DNA.
 * ============================================================= */

:root {
    /* --- Color tokens (Elementor Kit globals) --- */
    --cmx-color-accent:           #E72380;  /* Fucsia primario del sitio. */
    --cmx-color-accent-light:     #F877A7;  /* Fucsia secundario. */
    --cmx-color-text:             #000000;
    --cmx-color-text-secondary:   #666666;
    --cmx-color-muted:            #B2B2B2;
    --cmx-color-strike:           #999999;
    --cmx-color-bg:               #FFFFFF;
    --cmx-color-bg-secondary:     #F1F1F1;
    --cmx-color-border:           #CCCCCC;
    --cmx-color-border-soft:      #EAEAEA;
    --cmx-color-whatsapp:         #25D366;  /* Verde brand oficial */

    /* --- Typography --- */
    --cmx-font-body:              "Lato", -apple-system, BlinkMacSystemFont, sans-serif;
    --cmx-font-display:           "Cocogoose", "Lato", sans-serif;
    --cmx-font-size-h1:           28px;
    --cmx-font-size-h2:           18px;
    --cmx-font-size-h3:           18px;
    --cmx-font-size-body:         15px;
    --cmx-font-size-small:        14px;
    --cmx-font-size-nano:         11px;
    --cmx-font-weight-bold:       900;
    --cmx-font-weight-medium:     500;
    --cmx-font-weight-regular:    400;
    --cmx-line-height-normal:     1.6;

    /* --- Spacing --- */
    --cmx-spacing-xs:             4px;
    --cmx-spacing-sm:             8px;
    --cmx-spacing-md:             16px;
    --cmx-spacing-lg:             24px;
    --cmx-spacing-xl:             32px;

    /* --- Radii (sharp corners — radius 0 en general) --- */
    --cmx-radius-sm:              0px;
    --cmx-radius-md:              0px;
    --cmx-radius-pill:            999px;

    /* --- Componentes --- */
    --cmx-nav-height-mobile:      51px;
    --cmx-bottom-nav-height:      60px;
    --cmx-sticky-cta-height:      64px;
    --cmx-fab-size:               56px;
    --cmx-fab-margin:             16px;
    --cmx-button-height:          44px;

    /* --- Precios --- */
    --cmx-price-current-size:     17px;
    --cmx-price-current-weight:   500;
    --cmx-price-strike-size:      14px;
    --cmx-price-strike-weight:    400;

    /* --- Swatches --- */
    --cmx-swatch-size:            50px;
    --cmx-swatch-border-selected: 3px solid var(--cmx-color-accent);
    --cmx-swatch-border-default:  1px solid var(--cmx-color-border);

    /* --- Breakpoints --- */
    --cmx-breakpoint-mobile:      768px;

    /* --- Z-index stack --- */
    --cmx-z-fab:                  9000;
    --cmx-z-bottom-nav:           9100;
    --cmx-z-modal:                9500;
}

/* =============================================================
 * Components — hidden por default en desktop, visibles solo en
 * @media (max-width: 768px). El DOM SIEMPRE contiene los elementos
 * (porque PHP los renderiza al wp_footer), pero solo aparecen en
 * mobile via media query. No requiere mobile cache separation.
 * ============================================================= */

.cmx-bottom-nav,
.cmx-whatsapp-fab,
.cmx-sticky-cta,
.cmx-mobile-header {
    display: none;
}

/* v0.7.0 — modales globales (categorías, menú) renderizados en wp_footer / dinámicamente */
.cmx-modal {
    display: none;
}

/* v0.7.27 — elementos cmx que el JS inyecta en cualquier viewport deben quedar
 * ocultos por default; las reglas mobile dentro de @media los re-muestran como flex. */
.cmx-shop-toolbar,
.cmx-cat-card__badge,
.cmx-cat-card__buy {
    display: none;
}

@media (max-width: 768px) {

    /* --- Bottom nav contextual (v0.1.0) --- */

    .cmx-bottom-nav,
    .cmx-sticky-cta {
        display: flex;
    }

    .cmx-bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: var(--cmx-bottom-nav-height);
        background: var(--cmx-color-bg);
        border-top: 1px solid var(--cmx-color-border-soft);
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        align-items: stretch;
        z-index: var(--cmx-z-bottom-nav);
        font-family: var(--cmx-font-body);
        padding: 0;
        margin: 0;
        list-style: none;
        /* respeta safe-area en iOS */
        padding-bottom: env(safe-area-inset-bottom, 0);
        height: calc(var(--cmx-bottom-nav-height) + env(safe-area-inset-bottom, 0px));
    }

    .cmx-bottom-nav__item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        text-decoration: none;
        color: var(--cmx-color-text-secondary);
        font-size: var(--cmx-font-size-nano);
        font-weight: var(--cmx-font-weight-medium);
        line-height: 1.1;
        padding: 6px 4px;
        transition: color 150ms ease;
        -webkit-tap-highlight-color: transparent;
    }

    .cmx-bottom-nav__item:hover,
    .cmx-bottom-nav__item:focus-visible {
        color: var(--cmx-color-accent);
        outline: none;
    }

    .cmx-bottom-nav__item.is-active {
        color: var(--cmx-color-accent);
    }

    .cmx-bottom-nav__icon {
        width: 22px;
        height: 22px;
        display: block;
        flex: 0 0 auto;
    }

    .cmx-bottom-nav__label {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    /* Empuja el contenido del body para que no quede tapado */
    body.cmx-has-bottom-nav {
        padding-bottom: var(--cmx-bottom-nav-height);
    }

    /* --- WhatsApp FAB (v0.7.11) — 35% más pequeño + magenta corporativo --- */

    .cmx-whatsapp-fab,
    a.cmx-whatsapp-fab {
        position: fixed !important;
        right: var(--cmx-fab-margin);
        bottom: calc(var(--cmx-bottom-nav-height) + var(--cmx-fab-margin) + env(safe-area-inset-bottom, 0px));
        width: 36px !important;
        height: 36px !important;
        background: var(--cmx-color-accent) !important;
        background-color: var(--cmx-color-accent) !important;
        background-image: none !important;
        color: #ffffff !important;
        border-radius: var(--cmx-radius-pill) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.20) !important;
        z-index: var(--cmx-z-fab) !important;
        text-decoration: none !important;
        transition: transform 200ms ease, box-shadow 200ms ease;
        -webkit-tap-highlight-color: transparent;
        padding: 0 !important;
        border: 0 !important;
    }

    .cmx-whatsapp-fab:hover,
    .cmx-whatsapp-fab:focus-visible {
        transform: scale(1.05);
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24);
        outline: none;
        background: var(--cmx-color-accent-light) !important;
    }

    .cmx-whatsapp-fab__icon {
        width: 18px !important;
        height: 18px !important;
        display: block;
        color: #fff !important;
        fill: #fff !important;
    }

    /* Si no hay bottom nav en esta página (caso producto en v0.1.0
     * cuando aún no existe el sticky CTA), el FAB baja al piso. */
    body:not(.cmx-has-bottom-nav) .cmx-whatsapp-fab {
        bottom: calc(var(--cmx-fab-margin) + env(safe-area-inset-bottom, 0px));
    }

    /* --- Product page: reorder + price + sticky CTA (v0.2.0) --- */

    /* v0.7.24 — reducir gap entre header mobile y bloque SKU/Categorías.
     * El .product_meta reordenado al wrap de la galería (v0.7.x #6) heredaba
     * margin-top:50px del section + padding-top:10px del widget-wrap +
     * margin-top:30px del propio meta = ~95px de espacio en blanco arriba.
     * Cliente lo reportó 2026-05-25 (_conversacion/espacio-exa.png). */
    body.cmx-product-page .product_meta {
        margin-top: 0 !important;
    }
    body.cmx-product-page section.elementor-element-6356c2b3 {
        margin-top: 0 !important;
    }
    body.cmx-product-page section.elementor-element-6356c2b3 > .elementor-container > .elementor-column:first-child > .elementor-widget-wrap {
        padding-top: 0 !important;
    }

    /* Precio actual (ins / sin descuento) — bold + fucsia */
    body.cmx-product-page .jet-woo-product-price ins .amount,
    body.cmx-product-page .jet-woo-product-price > .amount,
    body.cmx-product-page .woocommerce-variation-price ins .amount,
    body.cmx-product-page .woocommerce-variation-price > .amount,
    body.cmx-product-page .product .price ins .amount,
    body.cmx-product-page .product > .price > .amount {
        font-size: var(--cmx-price-current-size);
        font-weight: 700;
        color: var(--cmx-color-accent);
    }

    /* Precio tachado (del) — thin + gris + más pequeño */
    body.cmx-product-page .jet-woo-product-price del,
    body.cmx-product-page .jet-woo-product-price del .amount,
    body.cmx-product-page .woocommerce-variation-price del,
    body.cmx-product-page .woocommerce-variation-price del .amount,
    body.cmx-product-page .product .price del,
    body.cmx-product-page .product .price del .amount {
        font-size: var(--cmx-price-strike-size);
        font-weight: var(--cmx-price-strike-weight);
        color: var(--cmx-color-strike);
        opacity: 1;
    }

    /* v0.7.35/0.7.37 — Precio en single product:
     *  - Precio actual (ins) +60% (27px / 800).
     *  - Precio tachado (del) 14px / 400 + línea fina exactamente al CENTRO
     *    vertical (linear-gradient como background, no text-decoration nativo,
     *    que el browser pone cerca del baseline con thickness grueso).
     * El single usa el widget jet-single-price (NO archive-product-price). */
    body.cmx-product-page .elementor-widget-jet-single-price ins,
    body.cmx-product-page .elementor-widget-jet-single-price ins .amount,
    body.cmx-product-page .elementor-widget-jet-single-price .price > .amount,
    body.cmx-product-page .elementor-widget-jet-woo-builder-archive-product-price ins,
    body.cmx-product-page .elementor-widget-jet-woo-builder-archive-product-price ins .amount {
        font-size: 27px !important;
        font-weight: 800 !important;
    }
    body.cmx-product-page .elementor-widget-jet-single-price del,
    body.cmx-product-page .elementor-widget-jet-single-price del .amount,
    body.cmx-product-page .elementor-widget-jet-single-price del .woocommerce-Price-currencySymbol,
    body.cmx-product-page .elementor-widget-jet-woo-builder-archive-product-price del,
    body.cmx-product-page .elementor-widget-jet-woo-builder-archive-product-price del .amount {
        font-size: 14px !important;
        font-weight: 400 !important;
        text-decoration: none !important;
    }
    body.cmx-product-page .elementor-widget-jet-single-price del .amount,
    body.cmx-product-page .elementor-widget-jet-woo-builder-archive-product-price del .amount {
        display: inline-block !important;
        background-image: linear-gradient(transparent calc(50% - 0.5px), #999 calc(50% - 0.5px), #999 calc(50% + 0.5px), transparent calc(50% + 0.5px)) !important;
        background-repeat: no-repeat !important;
        background-size: 100% 100% !important;
        background-position: center !important;
    }

    /* v0.7.35 — Ajuste 3: títulos cursive de atributos ("Color", "Capacidad") más
     * delgados. Apuntar al <label> con font Autography (el <th class="label"> que
     * muestra "Color: Verde" en Lato se queda igual — es la versión textual). */
    body.cmx-product-page table.variations label,
    body.cmx-product-page .variations_form table.variations label {
        font-weight: 200 !important;
    }

    /* Sticky CTA bottom bar — reemplaza al bottom nav en context producto.
       v0.7.x: fieldset Cantidad + botón pill, según mockup PDF (pro3.png). */
    .cmx-sticky-cta {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 78px;
        background: var(--cmx-color-bg);
        border-top: 1px solid var(--cmx-color-border-soft);
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.06);
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 14px;
        z-index: var(--cmx-z-bottom-nav);
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        height: calc(78px + env(safe-area-inset-bottom, 0px));
    }

    /* Fieldset Cantidad — borde redondeado fino con legend "Cantidad" recortando el borde */
    .cmx-sticky-cta__qty-fieldset,
    fieldset.cmx-sticky-cta__qty-fieldset,
    .cmx-sticky-cta fieldset.cmx-sticky-cta__qty-fieldset {
        flex: 0 0 130px !important;
        width: 130px !important;
        max-width: 130px !important;
        min-width: 130px !important;
        position: relative !important;
        margin: 0 !important;
        padding: 4px 8px 4px !important;
        border: 1px solid var(--cmx-color-border) !important;
        border-radius: 10px !important;
        background: #fff !important;
        box-sizing: border-box !important;
    }
    .cmx-sticky-cta__qty-label {
        position: absolute;
        top: -9px;
        left: 14px;
        margin: 0;
        padding: 0 6px;
        background: #fff;
        font-family: var(--cmx-font-body);
        font-size: 11px;
        font-weight: 500;
        color: var(--cmx-color-text-secondary);
        line-height: 1.2;
        letter-spacing: 0.2px;
    }

    .cmx-sticky-cta__price {
        flex: 0 1 auto;
        min-width: 0;
        font-family: var(--cmx-font-body);
        line-height: 1.1;
        font-size: 13px;
        max-width: 90px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Quantity stepper dentro del fieldset */
    .cmx-sticky-cta__qty {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        height: 28px;
        border: 0;
    }
    .cmx-sticky-cta__qty-btn,
    button.cmx-sticky-cta__qty-btn {
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
        border: 0 !important;
        border-radius: 0 !important;
        width: 24px !important;
        min-width: 24px !important;
        height: 24px !important;
        font-family: var(--cmx-font-body) !important;
        font-size: 20px !important;
        font-weight: 400 !important;
        line-height: 1 !important;
        color: var(--cmx-color-text) !important;
        cursor: pointer;
        padding: 0 !important;
        margin: 0 !important;
        -webkit-tap-highlight-color: transparent;
        box-shadow: none !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
    }
    .cmx-sticky-cta__qty-btn:hover {
        color: var(--cmx-color-accent) !important;
        background: transparent !important;
    }
    .cmx-sticky-cta__qty-input {
        width: 36px;
        border: 0;
        text-align: center;
        font-family: var(--cmx-font-body);
        font-size: 16px;
        font-weight: 700;
        color: var(--cmx-color-text);
        background: transparent;
        -moz-appearance: textfield;
        padding: 0;
        outline: none;
    }
    .cmx-sticky-cta__qty-input::-webkit-inner-spin-button,
    .cmx-sticky-cta__qty-input::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    /* Reset del precio dentro del sticky CTA — WC mete spans con sus propios estilos.
       El precio ACTUAL (ins, o el span directo cuando no hay descuento) va fucsia bold.
       El strike va gris pequeño. */
    .cmx-sticky-cta__price ins,
    .cmx-sticky-cta__price ins .amount,
    .cmx-sticky-cta__price > .price > ins,
    .cmx-sticky-cta__price > .price > ins .amount,
    .cmx-sticky-cta__price > .amount {
        font-size: var(--cmx-price-current-size) !important;
        font-weight: 700 !important;
        color: var(--cmx-color-accent) !important;
        text-decoration: none !important;
    }

    .cmx-sticky-cta__price del,
    .cmx-sticky-cta__price del .amount,
    .cmx-sticky-cta__price > .price > del,
    .cmx-sticky-cta__price > .price > del .amount {
        font-size: var(--cmx-price-strike-size) !important;
        font-weight: var(--cmx-price-strike-weight) !important;
        color: var(--cmx-color-strike) !important;
        margin-right: 6px;
        opacity: 1;
    }

    /* Hide screen-reader text dentro del sticky CTA */
    .cmx-sticky-cta__price .screen-reader-text {
        display: none;
    }

    .cmx-sticky-cta__button,
    button.cmx-sticky-cta__button {
        flex: 1 1 auto !important;
        background: var(--cmx-color-accent) !important;
        background-color: var(--cmx-color-accent) !important;
        background-image: none !important;
        color: #ffffff !important;
        border: 0 !important;
        height: 46px !important;
        padding: 0 22px !important;
        font-family: var(--cmx-font-body) !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        text-transform: none !important;
        letter-spacing: 0.3px !important;
        border-radius: 999px !important;
        cursor: pointer;
        transition: opacity 150ms ease, background 150ms ease;
        -webkit-tap-highlight-color: transparent;
        white-space: nowrap;
        min-width: 0 !important;
        margin: 0 !important;
        line-height: 1 !important;
        box-shadow: none !important;
    }

    .cmx-sticky-cta__button:hover,
    .cmx-sticky-cta__button:focus-visible {
        opacity: 0.92;
        outline: none;
    }

    .cmx-sticky-cta__button:disabled {
        background: var(--cmx-color-muted);
        cursor: not-allowed;
    }

    /* Body padding-bottom para no tapar contenido — sticky CTA v2 = 78px */
    body.cmx-has-sticky-cta {
        padding-bottom: 90px;
    }

    /* WhatsApp FAB sube cuando hay sticky CTA en lugar de bottom nav */
    body.cmx-has-sticky-cta:not(.cmx-has-bottom-nav) .cmx-whatsapp-fab {
        bottom: calc(var(--cmx-sticky-cta-height) + var(--cmx-fab-margin) + env(safe-area-inset-bottom, 0px));
    }

    /* --- Product gallery + swatches restyle (v0.3.0) --- */

    /* CSS scoped a body.cmx-has-gallery-mod — solo se aplica cuando el módulo
       está activo (preview o enabled). En disabled, NO se carga el body class
       y el CSS no afecta nada. */

    /* === SWATCHES === */

    /* Wrapper común — layout single-row scrollable */
    body.cmx-has-gallery-mod .variable-items-wrapper {
        display: flex;
        flex-wrap: nowrap;
        gap: var(--cmx-spacing-sm);
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        padding: 6px 2px;
        margin: 0;
    }
    body.cmx-has-gallery-mod .variable-items-wrapper::-webkit-scrollbar {
        display: none;
    }

    /* Label del atributo arriba del wrapper (typography del título) */
    body.cmx-has-gallery-mod .variations label,
    body.cmx-has-gallery-mod .variations th.label {
        font-family: var(--cmx-font-body);
        font-size: var(--cmx-font-size-h3);
        font-weight: var(--cmx-font-weight-bold);
        color: var(--cmx-color-text);
        text-transform: none;
        letter-spacing: 0;
        margin-bottom: 6px;
    }

    /* === COLOR SWATCHES === */

    body.cmx-has-gallery-mod .color-variable-item {
        width: var(--cmx-swatch-size);
        height: var(--cmx-swatch-size);
        flex: 0 0 auto;
        border: var(--cmx-swatch-border-default);
        opacity: 0.55;
        filter: grayscale(40%);
        transition: opacity 180ms ease, filter 180ms ease, border-color 180ms ease;
        padding: 0;
        background-clip: padding-box;
        cursor: pointer;
    }

    body.cmx-has-gallery-mod .color-variable-item .variable-item-contents,
    body.cmx-has-gallery-mod .color-variable-item .variable-item-span-color {
        width: 100%;
        height: 100%;
        display: block;
        background-size: cover !important;
        background-position: center !important;
    }

    body.cmx-has-gallery-mod .color-variable-item:hover,
    body.cmx-has-gallery-mod .color-variable-item:focus-visible {
        opacity: 0.85;
        filter: grayscale(0%);
        outline: none;
    }

    body.cmx-has-gallery-mod .color-variable-item.selected,
    body.cmx-has-gallery-mod .color-variable-item[aria-checked="true"] {
        opacity: 1;
        filter: none;
        border: var(--cmx-swatch-border-selected);
    }

    /* Ocultar el SVG checkmark que inyecta Variation Swatches Pro:
       el contrato pide indicador visual = borde fucsia, no tick. */
    body.cmx-has-gallery-mod .color-variable-item .wvs-svg,
    body.cmx-has-gallery-mod .color-variable-item .ts-svg,
    body.cmx-has-gallery-mod .color-variable-item svg {
        display: none !important;
    }

    /* v0.7.35 — Ajuste 2: quitar borde NEGRO 2px (box-shadow) que Variation Swatches
     * Pro aplica al swatch seleccionado. Dejar solo el borde fucsia interior. */
    body.cmx-has-gallery-mod .variable-item.selected,
    body.cmx-has-gallery-mod .variable-item[aria-checked="true"],
    body.cmx-has-gallery-mod .color-variable-item.selected,
    body.cmx-has-gallery-mod .button-variable-item.selected,
    body.cmx-has-gallery-mod .variable-item.selected:hover,
    body.cmx-has-gallery-mod .variable-item.selected:focus,
    body.cmx-has-gallery-mod .variable-item.selected:focus-visible {
        box-shadow: none !important;
        outline: none !important;
    }

    /* === BUTTON SWATCHES (capacidad, RAM) === */

    body.cmx-has-gallery-mod .button-variable-item {
        flex: 0 0 auto;
        min-width: auto;
        width: auto;
        height: auto;
        border: 1px solid var(--cmx-color-border);
        background: var(--cmx-color-bg);
        opacity: 0.85;
        transition: opacity 180ms ease, border-color 180ms ease, background 180ms ease;
        cursor: pointer;
        padding: 0;
    }

    body.cmx-has-gallery-mod .button-variable-item .variable-item-contents {
        padding: 0;
    }

    /* Variation Swatches Pro tiene reglas con specificity alta (a veces inline);
       usar !important defensivamente para garantizar nuestro override.
       v0.7.35 — Ajuste 4: padding reducido (era 10/22) para terms tipo Select. */
    body.cmx-has-gallery-mod .button-variable-item .variable-item-span-button,
    body.cmx-has-gallery-mod ul.variable-items-wrapper .button-variable-item .variable-item-span-button {
        display: block !important;
        padding: 6px 14px !important;
        font-family: var(--cmx-font-body) !important;
        font-size: 15px !important;
        font-weight: var(--cmx-font-weight-bold) !important;
        line-height: 1.2 !important;
        color: var(--cmx-color-text);
        white-space: nowrap;
        letter-spacing: 0.3px;
        width: auto !important;
        height: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
    }

    /* También el contenedor — Variation Swatches Pro le mete width:42px height:42px */
    body.cmx-has-gallery-mod .button-variable-item,
    body.cmx-has-gallery-mod ul.variable-items-wrapper .button-variable-item {
        width: auto !important;
        height: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
    }
    body.cmx-has-gallery-mod .button-variable-item .variable-item-contents {
        width: auto !important;
        height: auto !important;
    }

    body.cmx-has-gallery-mod .button-variable-item:hover,
    body.cmx-has-gallery-mod .button-variable-item:focus-visible {
        opacity: 1;
        border-color: var(--cmx-color-text);
        outline: none;
    }

    body.cmx-has-gallery-mod .button-variable-item.selected,
    body.cmx-has-gallery-mod .button-variable-item[aria-checked="true"] {
        opacity: 1;
        border: 2px solid var(--cmx-color-accent);
        background: var(--cmx-color-bg);
    }

    body.cmx-has-gallery-mod .button-variable-item.selected .variable-item-span-button,
    body.cmx-has-gallery-mod .button-variable-item[aria-checked="true"] .variable-item-span-button {
        color: var(--cmx-color-accent);
        /* compensar 1px extra de border para que no salte el layout */
        padding: 9px 21px;
    }

    body.cmx-has-gallery-mod .button-variable-item .wvs-svg,
    body.cmx-has-gallery-mod .button-variable-item .ts-svg,
    body.cmx-has-gallery-mod .button-variable-item svg {
        display: none !important;
    }

    /* === Ocultar el form original WC en mobile producto ===
       El sticky CTA cubre la función. Mantenemos el form en DOM (no display:none
       en todo) para que el sticky CTA pueda disparar click() en el botón real
       y sincronizar quantity. */
    body.cmx-product-page .woocommerce-variation-add-to-cart,
    body.cmx-product-page form.cart .quantity,
    body.cmx-product-page form.cart .single_add_to_cart_button,
    body.cmx-product-page .single_variation_wrap .quantity,
    body.cmx-product-page .single_variation_wrap .single_add_to_cart_button,
    body.cmx-product-page .elementor-widget-jet-single-add-to-cart .quantity,
    body.cmx-product-page .elementor-widget-jet-single-add-to-cart .single_add_to_cart_button {
        position: absolute !important;
        left: -10000px !important;
        top: auto !important;
        width: 1px !important;
        height: 1px !important;
        overflow: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    /* La regla anterior esconde el botón sin display:none — sticky CTA puede aún hacer .click().
       Para esconder el wrap del widget jet-single-add-to-cart completo, hacemos:
       (el form se mueve fuera del viewport via los items hijos arriba) */

    /* Variation Swatches Pro inserta `.woo-selected-variation-item-name` con el valor
       seleccionado en .th.label. Lo dejamos en línea con el label (no en línea aparte). */
    body.cmx-has-gallery-mod .variations th.label {
        display: flex !important;
        align-items: baseline !important;
        flex-wrap: wrap !important;
        gap: 0 !important;
    }
    body.cmx-has-gallery-mod .variations th.label label {
        margin: 0 !important;
    }
    body.cmx-has-gallery-mod .variations th.label .woo-selected-variation-item-name {
        display: inline !important;
        font-family: inherit !important;
        font-size: inherit !important;
        font-weight: inherit !important;
        color: inherit !important;
        margin: 0 0 0 2px !important;
        padding: 0 !important;
    }

    /* === GALLERY THUMBS (defensive — múltiples plugins de gallery) === */

    /* Container: WC default flexslider | JetWoo | rtwpvg | swiper variants */
    body.cmx-has-gallery-mod .woocommerce-product-gallery .flex-control-thumbs,
    body.cmx-has-gallery-mod .woocommerce-product-gallery .flex-control-nav,
    body.cmx-has-gallery-mod .woocommerce-product-gallery__image-thumbs,
    body.cmx-has-gallery-mod .product-images-slider .swiper-pagination,
    body.cmx-has-gallery-mod .jet-woo-product-images-thumbs,
    body.cmx-has-gallery-mod ul.flex-control-nav,
    body.cmx-has-gallery-mod .rtwpvg-thumbnail-wrapper,
    body.cmx-has-gallery-mod .rtwpvg-thumbnail-slider {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: var(--cmx-spacing-sm) !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        list-style: none;
        padding: 8px 0 !important;
        margin: 12px 0 0;
        width: 100%;
    }
    /* rtwpvg fuerza display:grid con grid-columns-3 en xs vía specificity 0,0,6,0.
       Para ganar, replicamos su cadena de ancestros + agregamos body. = 0,0,6,1. */
    body.cmx-has-gallery-mod .rtwpvg-thumbnail-wrapper {
        height: auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    body.cmx-has-gallery-mod .rtwpvg-images.rtwpvg-has-product-thumbnail .rtwpvg-thumbnail-wrapper .rtwpvg-thumbnail-slider,
    body.cmx-has-gallery-mod .rtwpvg-images.rtwpvg-has-product-thumbnail .rtwpvg-thumbnail-wrapper .rtwpvg-thumbnail-slider:not(.slick-initialized),
    body.cmx-has-gallery-mod .rtwpvg-images.rtwpvg-has-product-thumbnail .rtwpvg-thumbnail-wrapper .rtwpvg-thumbnail-slider.slick-initialized,
    body.cmx-has-gallery-mod .rtwpvg-thumbnail-slider {
        display: flex !important;
        grid-template-columns: none !important;
        grid-template-rows: none !important;
        grid-auto-flow: unset !important;
        grid-auto-columns: unset !important;
        flex-wrap: nowrap !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        padding: 4px 2px !important;
        margin: 12px 0 0 !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }
    body.cmx-has-gallery-mod .rtwpvg-thumbnail-slider .slick-list,
    body.cmx-has-gallery-mod .rtwpvg-thumbnail-slider .slick-track {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 10px;
        width: auto !important;
        transform: none !important;
        overflow: visible;
        height: auto !important;
    }
    body.cmx-has-gallery-mod .woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar,
    body.cmx-has-gallery-mod .woocommerce-product-gallery .flex-control-nav::-webkit-scrollbar,
    body.cmx-has-gallery-mod .woocommerce-product-gallery__image-thumbs::-webkit-scrollbar,
    body.cmx-has-gallery-mod .jet-woo-product-images-thumbs::-webkit-scrollbar,
    body.cmx-has-gallery-mod .rtwpvg-thumbnail-wrapper::-webkit-scrollbar,
    body.cmx-has-gallery-mod .rtwpvg-thumbnail-slider::-webkit-scrollbar {
        display: none;
    }

    /* Thumb items: 4 visibles exactos por fila, con scroll para >4.
       Math: 4 items * width + 3 gaps * 10px = 100% → width = (100% - 30px) / 4.
       Tamaño resultante en viewport 390px: ~77px square (matching PDF reference).
       Specificity boost para vencer la regla rtwpvg display:inline-block default. */
    body.cmx-has-gallery-mod .woocommerce-product-gallery .flex-control-thumbs li,
    body.cmx-has-gallery-mod .woocommerce-product-gallery .flex-control-nav li,
    body.cmx-has-gallery-mod .woocommerce-product-gallery__image-thumbs li,
    body.cmx-has-gallery-mod .jet-woo-product-images-thumbs li,
    body.cmx-has-gallery-mod ul.flex-control-nav li,
    body.cmx-has-gallery-mod .rtwpvg-images.rtwpvg-has-product-thumbnail .rtwpvg-thumbnail-wrapper .rtwpvg-thumbnail-slider .rtwpvg-thumbnail-image,
    body.cmx-has-gallery-mod .rtwpvg-thumbnail-slider .rtwpvg-thumbnail-image,
    body.cmx-has-gallery-mod .rtwpvg-thumbnail-wrapper .rtwpvg-thumbnail-image {
        display: block !important;
        flex: 0 0 calc((100% - 30px) / 4) !important;
        max-width: calc((100% - 30px) / 4) !important;
        min-width: calc((100% - 30px) / 4) !important;
        width: calc((100% - 30px) / 4) !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        cursor: pointer;
        float: none !important;
        scroll-snap-align: start;
        aspect-ratio: 1 / 1;
        vertical-align: top;
    }

    /* Las slick-cloned NO deben renderizarse (son duplicados para el infinite loop) */
    body.cmx-has-gallery-mod .rtwpvg-thumbnail-slider .slick-cloned {
        display: none !important;
    }

    body.cmx-has-gallery-mod .woocommerce-product-gallery img.cmx-thumb,
    body.cmx-has-gallery-mod .woocommerce-product-gallery .flex-control-nav img,
    body.cmx-has-gallery-mod .woocommerce-product-gallery .flex-control-thumbs img,
    body.cmx-has-gallery-mod .woocommerce-product-gallery__image-thumbs img,
    body.cmx-has-gallery-mod .jet-woo-product-images-thumbs img,
    body.cmx-has-gallery-mod .rtwpvg-thumbnail-slider .rtwpvg-thumbnail-image img,
    body.cmx-has-gallery-mod .rtwpvg-thumbnail-wrapper .rtwpvg-thumbnail-image img {
        width: 100% !important;
        height: 100% !important;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        opacity: 0.5;
        filter: grayscale(60%);
        transition: opacity 180ms ease, filter 180ms ease, border-color 180ms ease;
        border: 2px solid transparent;
        background: var(--cmx-color-bg-secondary);
        display: block;
        max-width: 100%;
    }

    /* Esconder scrollbar pero mantener funcionalidad */
    body.cmx-has-gallery-mod .rtwpvg-thumbnail-slider {
        scrollbar-width: none;
    }
    body.cmx-has-gallery-mod .rtwpvg-thumbnail-slider::-webkit-scrollbar {
        display: none;
    }

    /* Estado selected: rtwpvg.current-thumbnail | WC flex-active | swiper | cmx-thumb-active | aria-current */
    body.cmx-has-gallery-mod .flex-active img,
    body.cmx-has-gallery-mod .swiper-slide-thumb-active img,
    body.cmx-has-gallery-mod .cmx-thumb-active img,
    body.cmx-has-gallery-mod li[aria-current="true"] img,
    body.cmx-has-gallery-mod li.is-active img,
    body.cmx-has-gallery-mod .rtwpvg-thumbnail-slider .current-thumbnail img,
    body.cmx-has-gallery-mod .rtwpvg-thumbnail-slider .cmx-thumb-active img,
    body.cmx-has-gallery-mod .rtwpvg-thumbnail-image.cmx-thumb-active img,
    body.cmx-has-gallery-mod .rtwpvg-thumbnail-image.current-thumbnail img {
        opacity: 1 !important;
        filter: none !important;
        border-color: var(--cmx-color-accent) !important;
    }

    /* Contenedor del slider principal — relativo para que el counter absoluto se anclear */
    body.cmx-has-gallery-mod .rtwpvg-slider-wrapper,
    body.cmx-has-gallery-mod .rtwpvg-slider {
        position: relative;
    }

    /* Contador de imagen N/M sobre la imagen principal.
       En bottom-left para no colisionar con el trigger de zoom (🔍 top-right de rtwpvg). */
    body.cmx-has-gallery-mod .cmx-gallery-counter {
        position: absolute;
        bottom: 12px;
        left: 12px;
        top: auto;
        right: auto;
        background: rgba(0, 0, 0, 0.65);
        color: #fff;
        padding: 5px 12px;
        font-family: var(--cmx-font-body);
        font-size: 12px;
        font-weight: var(--cmx-font-weight-bold);
        letter-spacing: 0.5px;
        z-index: 10;
        pointer-events: none;
        line-height: 1;
        border-radius: var(--cmx-radius-pill);
    }

    body.cmx-has-gallery-mod .woocommerce-product-gallery,
    body.cmx-has-gallery-mod .jet-woo-product-images {
        position: relative;
    }

    /* --- Cart modal (v0.7.39 redesign — paridad milimétrica con _cart2.png) ---
     *
     * YITH Add-to-Cart Popup tiene HTML opinado; aquí lo restilizamos sin tocar
     * los hooks PHP. JS adyacente (cartModal.applyMutations) reorganiza algunos
     * nodos: mueve el "agotarse pronto" al footer e inyecta el row de cantidad
     * + envío inline. */

    body.cmx-has-cart-modal #yith-wacp-popup .yith-wacp-wrapper {
        /* YITH inline-styles width/height/top/left fijos calculados a la
         * pre-mutation. Reescribimos para usar todo el ancho disponible y altura
         * automática (después de inyectar qty-shipping + footnote el contenido
         * es más alto). Centrado horizontal. */
        width: calc(100vw - 24px) !important;
        max-width: 380px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        border-radius: 12px !important;
        padding: 0 !important;
        font-family: var(--cmx-font-body) !important;
        background: #fff !important;
        height: auto !important;
        max-height: calc(100vh - 60px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    /* Anular perfect-scrollbar overlay para que el contenido fluya natural */
    body.cmx-has-cart-modal #yith-wacp-popup .yith-wacp-content {
        padding: 0 !important;
        overflow: visible !important;
        height: auto !important;
    }
    body.cmx-has-cart-modal #yith-wacp-popup .yith-wacp-content.ps,
    body.cmx-has-cart-modal #yith-wacp-popup .yith-wacp-content.ps--active-y {
        overflow: visible !important;
    }
    body.cmx-has-cart-modal #yith-wacp-popup .yith-wacp-content .ps__rail-x,
    body.cmx-has-cart-modal #yith-wacp-popup .yith-wacp-content .ps__rail-y {
        display: none !important;
    }
    body.cmx-has-cart-modal #yith-wacp-popup .yith-wacp-main { padding: 16px 16px 14px !important; position: relative; }

    /* X de cierre — más visible, esquina superior derecha del wrapper */
    body.cmx-has-cart-modal #yith-wacp-popup .yith-wacp-close-icon,
    body.cmx-has-cart-modal #yith-wacp-popup .yith-wacp-head.yith-wacp-close {
        position: absolute !important;
        top: 10px !important;
        right: 10px !important;
        width: 28px !important;
        height: 28px !important;
        cursor: pointer;
        z-index: 10;
        background: transparent !important;
        opacity: 0.85;
    }
    body.cmx-has-cart-modal #yith-wacp-popup .yith-wacp-close-icon:hover { opacity: 1; }

    /* Banner verde — UNA SOLA LÍNEA, sin subtítulo (movido al footnote por JS).
     * Padding-left amplio para separar el ✓ icon de YITH del texto del h3. */
    body.cmx-has-cart-modal #yith-wacp-popup .yith-wacp-message {
        display: flex !important;
        align-items: center !important;
        margin: 4px 0 14px !important;
        padding: 10px 14px 10px 48px !important;
        background: rgba(184, 230, 154, 0.35) !important;
        border-left: 0 !important;
        border-radius: 8px !important;
        position: relative;
    }
    body.cmx-has-cart-modal #yith-wacp-popup .yith-wacp-message.default-icon::before,
    body.cmx-has-cart-modal #yith-wacp-popup .yith-wacp-message svg,
    body.cmx-has-cart-modal #yith-wacp-popup .yith-wacp-message img {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        width: 20px;
        height: 20px;
    }
    body.cmx-has-cart-modal #yith-wacp-popup .yith-wacp-message h3 {
        font-family: var(--cmx-font-body) !important;
        font-size: 14px !important;
        font-weight: var(--cmx-font-weight-bold) !important;
        color: #1a1a1a !important;
        margin: 0 !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Bloque del producto: imagen izq + info derecha */
    body.cmx-has-cart-modal #yith-wacp-popup .yith-wacp-added-product {
        display: flex !important;
        gap: 12px !important;
        margin: 0 0 12px !important;
        align-items: flex-start;
    }
    body.cmx-has-cart-modal #yith-wacp-popup .product-thumb {
        flex: 0 0 92px !important;
        width: 92px !important;
        margin: 0 !important;
    }
    body.cmx-has-cart-modal #yith-wacp-popup .product-thumb img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        object-fit: cover !important;
        border-radius: 0 !important;
    }
    body.cmx-has-cart-modal #yith-wacp-popup .info-box {
        flex: 1 !important;
        min-width: 0 !important;
    }

    /* Layout interno de la card: título → variaciones → precio (left-aligned, grande) */
    body.cmx-has-cart-modal #yith-wacp-popup .info-box .product-info {
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
    }
    body.cmx-has-cart-modal #yith-wacp-popup .product-info .product-title { order: 1; }
    body.cmx-has-cart-modal #yith-wacp-popup .product-info .product-variation { order: 2; }
    body.cmx-has-cart-modal #yith-wacp-popup .product-info .product-price { order: 3; }

    body.cmx-has-cart-modal #yith-wacp-popup .product-title {
        margin: 0 !important;
        font-family: var(--cmx-font-body) !important;
        font-size: 15px !important;
        font-weight: var(--cmx-font-weight-bold) !important;
        line-height: 1.2 !important;
    }
    body.cmx-has-cart-modal #yith-wacp-popup .product-title a {
        color: var(--cmx-color-accent) !important;
        text-decoration: none !important;
    }

    /* Variations: label inline con valor, NO grid 2-col separados a derecha.
     * "Color: Negro" en una sola línea continua. */
    body.cmx-has-cart-modal #yith-wacp-popup .product-variation { margin: 0 !important; }
    body.cmx-has-cart-modal #yith-wacp-popup dl.variation {
        display: block !important;
        grid-template-columns: unset !important;
        gap: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
        color: #000 !important;
    }
    body.cmx-has-cart-modal #yith-wacp-popup dl.variation dt {
        display: inline !important;
        margin: 0 4px 0 0 !important;
        font-weight: var(--cmx-font-weight-bold) !important;
        color: #000 !important;
        white-space: nowrap;
    }
    body.cmx-has-cart-modal #yith-wacp-popup dl.variation dd {
        display: inline !important;
        margin: 0 !important;
        font-weight: var(--cmx-font-weight-regular) !important;
        color: #333 !important;
        text-align: left !important;
    }
    body.cmx-has-cart-modal #yith-wacp-popup dl.variation dd p {
        margin: 0 !important;
        display: inline !important;
    }
    /* Newline después de cada dd para que cada par dt/dd ocupe su propia línea */
    body.cmx-has-cart-modal #yith-wacp-popup dl.variation dd::after { content: ""; display: block; }

    /* Precio principal — grande, alineado izquierda, negro bold */
    body.cmx-has-cart-modal #yith-wacp-popup .product-info .product-price {
        text-align: left !important;
        margin: 4px 0 0 !important;
        padding: 0 !important;
        border-top: 0 !important;
        font-size: 17px !important;
        font-weight: var(--cmx-font-weight-bold) !important;
        color: #000 !important;
        display: block !important;
    }
    body.cmx-has-cart-modal #yith-wacp-popup .product-price .amount {
        color: #000 !important;
        font-weight: var(--cmx-font-weight-bold) !important;
    }

    /* Cart info — wrapper del row cantidad+envío + row Total */
    body.cmx-has-cart-modal #yith-wacp-popup .yith-wacp-cart-info {
        margin: 0 0 14px !important;
        padding: 10px 0 0 !important;
        border-top: 1px solid #e5e5e5 !important;
    }

    /* Row: cantidad (caja) + envío inline */
    body.cmx-has-cart-modal #yith-wacp-popup .cmx-cart-modal__qty-shipping {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        margin: 0 0 8px !important;
        padding: 0 !important;
    }
    body.cmx-has-cart-modal #yith-wacp-popup .cmx-cart-modal__qty {
        display: flex !important;
        align-items: center !important;
        border: 1px solid #ccc !important;
        border-radius: 6px !important;
        padding: 2px 4px !important;
        gap: 4px !important;
        background: #fff !important;
        height: 32px;
        box-sizing: border-box;
    }
    body.cmx-has-cart-modal #yith-wacp-popup .cmx-cart-modal__qty-btn {
        background: transparent !important;
        border: 0 !important;
        padding: 0 !important;
        min-width: 0 !important;
        width: 22px !important;
        height: 24px !important;
        font-size: 16px !important;
        font-weight: var(--cmx-font-weight-bold) !important;
        line-height: 1 !important;
        color: #000 !important;
        cursor: pointer;
        border-radius: 0 !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
    }
    body.cmx-has-cart-modal #yith-wacp-popup .cmx-cart-modal__qty-value {
        min-width: 18px;
        text-align: center;
        font-size: 13px;
        font-weight: var(--cmx-font-weight-bold);
        color: #000;
    }
    body.cmx-has-cart-modal #yith-wacp-popup .yith-wacp-cart-info .cart-shipping {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        font-size: 13px !important;
        font-weight: var(--cmx-font-weight-bold) !important;
        color: #000 !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    body.cmx-has-cart-modal #yith-wacp-popup .yith-wacp-cart-info .cart-shipping .shipping-cost {
        font-weight: var(--cmx-font-weight-regular) !important;
        color: #000 !important;
    }

    /* Row: Total del carrito — label izq + valor der, ambos en una línea sin
     * romper. Si el valor es muy grande (ej "$5,199,600") la fila se mantiene
     * en una línea y el valor queda alineado a la derecha del contenedor. */
    body.cmx-has-cart-modal #yith-wacp-popup .yith-wacp-cart-info .cart-totals {
        display: flex !important;
        align-items: baseline !important;
        justify-content: space-between !important;
        gap: 8px !important;
        padding: 6px 0 0 !important;
        font-size: 13px !important;
        font-weight: var(--cmx-font-weight-bold) !important;
        color: #000 !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
    }
    body.cmx-has-cart-modal #yith-wacp-popup .yith-wacp-cart-info .cart-totals .cart-cost,
    body.cmx-has-cart-modal #yith-wacp-popup .yith-wacp-cart-info .cart-totals .cart-cost .amount {
        font-size: 16px !important;
        font-weight: var(--cmx-font-weight-bold) !important;
        color: #000 !important;
        flex-shrink: 0 !important;
    }

    /* Botones de acción — v0.7.43:
     *  - "Proceso de pago": pill fucsia (border-radius 999px).
     *  - "Seguir comprando": SOLO texto magenta, sin background, sin border.
     *    Lado a lado, alineados centro vertical. */
    body.cmx-has-cart-modal #yith-wacp-popup .yith-wacp-popup-actions,
    body.cmx-has-cart-modal #yith-wacp-popup .yith-wacp-popup-actions.layout-2-buttons {
        display: flex !important;
        flex-direction: row !important;
        gap: 12px !important;
        align-items: center !important;
        justify-content: flex-start !important;
        margin: 6px 0 0 !important;
        padding: 0 !important;
        flex-wrap: nowrap !important;
    }
    /* Botón principal "Proceso de pago" — pill fucsia */
    body.cmx-has-cart-modal #yith-wacp-popup .yith-wacp-popup-actions .button.go-checkout {
        flex: 0 1 auto !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: var(--cmx-color-accent) !important;
        color: #fff !important;
        text-align: center !important;
        padding: 10px 20px !important;
        font-family: var(--cmx-font-body) !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        text-transform: none !important;
        letter-spacing: 0.2px !important;
        border-radius: 999px !important;
        border: 0 !important;
        text-decoration: none !important;
        line-height: 1.1 !important;
        min-height: 38px !important;
        height: auto !important;
    }
    body.cmx-has-cart-modal #yith-wacp-popup .yith-wacp-popup-actions .button.go-checkout:hover,
    body.cmx-has-cart-modal #yith-wacp-popup .yith-wacp-popup-actions .button.go-checkout:focus-visible {
        background: var(--cmx-color-accent-light) !important;
        color: #fff !important;
        outline: none !important;
    }
    /* Link secundario "Seguir comprando" — solo texto magenta, sin botón */
    body.cmx-has-cart-modal #yith-wacp-popup .yith-wacp-popup-actions .button.continue-shopping {
        flex: 0 0 auto !important;
        display: inline-flex !important;
        align-items: center !important;
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
        color: var(--cmx-color-accent) !important;
        text-align: left !important;
        padding: 0 !important;
        margin: 0 !important;
        font-family: var(--cmx-font-body) !important;
        font-size: 13px !important;
        font-weight: var(--cmx-font-weight-bold) !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        border-radius: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
        text-decoration: none !important;
        line-height: 1.2 !important;
        min-height: 0 !important;
        min-width: 0 !important;
        width: auto !important;
        height: auto !important;
    }
    body.cmx-has-cart-modal #yith-wacp-popup .yith-wacp-popup-actions .button.continue-shopping:hover,
    body.cmx-has-cart-modal #yith-wacp-popup .yith-wacp-popup-actions .button.continue-shopping:focus-visible {
        color: var(--cmx-color-accent-light) !important;
        background: transparent !important;
        text-decoration: underline !important;
        outline: none !important;
    }

    /* Footnote — texto "agotarse pronto" movido al pie por JS */
    body.cmx-has-cart-modal #yith-wacp-popup .cmx-cart-modal__footnote {
        margin: 12px 0 0 !important;
        padding: 8px 4px 0 !important;
        border-top: 1px solid #f0f0f0 !important;
        font-family: var(--cmx-font-body) !important;
        font-size: 11px !important;
        font-weight: var(--cmx-font-weight-regular) !important;
        color: #777 !important;
        line-height: 1.3 !important;
        text-align: center !important;
    }

    /* --- Archive de categoría (v0.7.26) — unificar grilla con /tienda/ ---
     *
     * /tienda/ usa el WC shop loop (ul.products.elementor-grid.columns-xs-1.columns-sm-2)
     * que naturalmente cae en 2 cols en viewport mobile sm. /categoria-producto/{cat}/
     * usa JetEngine Listing Grid (jet-listing-grid--393) con grid-col-mobile-1 que es
     * 1 col. Forzamos 2 cols en mobile SOLO cuando estamos en archive de categoría,
     * para no afectar el listing 393 en otros contextos (home featured, related, etc.).
     * No tocamos desktop — el @media (max-width:768px) garantiza eso. */
    body.tax-product_cat .jet-listing-grid__items.jet-listing-grid--393 {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        grid-template-columns: none !important;
    }
    body.tax-product_cat .jet-listing-grid__items.jet-listing-grid--393 > .jet-listing-grid__item {
        flex: 0 0 calc(50% - 6px) !important;
        width: calc(50% - 6px) !important;
        max-width: calc(50% - 6px) !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 10px !important;
        /* v0.7.29 — paridad milimétrica con cards de /tienda/ */
        border: 1px solid rgb(178, 178, 178) !important;
        border-radius: 22px !important;
        background: #fff !important;
        box-sizing: border-box !important;
        position: relative !important;
        overflow: hidden !important;
    }
    /* La card interna (Elementor wrapper) tiene width fijo inyectado por JetEngine;
     * forzar 100% del item parent. */
    body.tax-product_cat .jet-listing-grid__items.jet-listing-grid--393 > .jet-listing-grid__item > .elementor {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* Imagen: encajar a aspect-ratio 1:1, contain. La img cruda es 1600x1600 — la
     * limitamos al ancho del card via el wrapper widget. El widget Elementor tiene
     * la clase 'elementor-widget__width-initial' que NO se estira al column width;
     * la forzamos al 100% del card interior. */
    body.tax-product_cat .jet-listing-grid--393 .elementor-widget-jet-listing-dynamic-image {
        width: 100% !important;
        max-width: 100% !important;
    }
    body.tax-product_cat .jet-listing-grid--393 .elementor-widget-jet-listing-dynamic-image .elementor-widget-container {
        width: 100% !important;
    }
    body.tax-product_cat .jet-listing-grid--393 .elementor-widget-jet-listing-dynamic-image .jet-listing-dynamic-image {
        width: 100% !important;
        aspect-ratio: 1 / 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
    }
    body.tax-product_cat .jet-listing-grid--393 .elementor-widget-jet-listing-dynamic-image img {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        object-fit: contain !important;
    }
    /* La <section> que envuelve la imagen también puede tener margins/padding del
     * theme que reduzcan el espacio. Reset al máximo. */
    body.tax-product_cat .jet-listing-grid--393 > .jet-listing-grid__item .elementor-section,
    body.tax-product_cat .jet-listing-grid--393 > .jet-listing-grid__item .elementor-container,
    body.tax-product_cat .jet-listing-grid--393 > .jet-listing-grid__item .elementor-column,
    body.tax-product_cat .jet-listing-grid--393 > .jet-listing-grid__item .elementor-widget-wrap {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    /* v0.7.32 — quitar borde 2px blanco + sombra + radius 41px + hover fucsia
     * que el template Elementor del archive aplica al .elementor-widget-wrap
     * (contenedor de la imagen). El cliente lo notó como un borde visible
     * alrededor de la imagen que al hover se ponía magenta. Las cards de
     * /tienda/ no tienen ese wrapper styling. */
    body.tax-product_cat .jet-listing-grid--393 > .jet-listing-grid__item .elementor-widget-wrap,
    body.tax-product_cat .jet-listing-grid--393 > .jet-listing-grid__item .elementor-widget-wrap:hover,
    body.tax-product_cat .jet-listing-grid--393 > .jet-listing-grid__item .elementor-widget-wrap.elementor-element-populated,
    body.tax-product_cat .jet-listing-grid--393 > .jet-listing-grid__item .elementor-widget-wrap.elementor-element-populated:hover {
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        transition: none !important;
    }
    /* También quitar transición del .elementor-widget-container para que no anime
     * border/box-shadow accidentalmente. */
    body.tax-product_cat .jet-listing-grid--393 > .jet-listing-grid__item .elementor-widget-container {
        transition: none !important;
    }

    /* Título — matchear /tienda/: Lato 16/16 weight 900, color #3B3D42, alineado izquierda,
     * margin-top 8px del precio anterior (en este caso, post-imagen). */
    body.tax-product_cat .jet-listing-grid--393 .elementor-heading-title {
        font-family: 'Lato', sans-serif !important;
        font-size: 16px !important;
        font-weight: 900 !important;
        line-height: 16px !important;
        color: rgb(59, 61, 66) !important;
        text-align: left !important;
        margin: 8px 0 0 !important;
        padding: 0 !important;
    }
    body.tax-product_cat .jet-listing-grid--393 .elementor-heading-title a {
        color: rgb(231, 35, 128) !important;
        text-decoration: none !important;
    }

    /* Precio wrapper — matchear /tienda/: 16/800 negro, margin 6/0/16, center align */
    body.tax-product_cat .jet-listing-grid--393 .jet-woo-product-price {
        font-size: 16px !important;
        font-weight: 800 !important;
        color: rgb(0, 0, 0) !important;
        margin: 6px 0 12px !important;
        padding: 0 !important;
        text-align: center !important;
        display: block !important;
    }
    body.tax-product_cat .jet-listing-grid--393 .jet-woo-builder-archive-product-price {
        text-align: center !important;
    }
    /* Precio tachado: 14/400 gris */
    body.tax-product_cat .jet-listing-grid--393 .jet-woo-product-price del,
    body.tax-product_cat .jet-listing-grid--393 .jet-woo-product-price del .amount {
        font-size: 14px !important;
        font-weight: 400 !important;
        color: rgb(178, 178, 178) !important;
        text-decoration: line-through !important;
        opacity: 1 !important;
    }
    /* Precio actual (ins): 16/800 NEGRO */
    body.tax-product_cat .jet-listing-grid--393 .jet-woo-product-price ins,
    body.tax-product_cat .jet-listing-grid--393 .jet-woo-product-price ins .amount {
        font-size: 16px !important;
        font-weight: 800 !important;
        color: rgb(0, 0, 0) !important;
        text-decoration: none !important;
        background: transparent !important;
    }
    /* Cuando NO hay descuento (sin ins, solo amount directo): tratarlo como precio actual */
    body.tax-product_cat .jet-listing-grid--393 .jet-woo-product-price > .amount {
        font-size: 16px !important;
        font-weight: 800 !important;
        color: rgb(0, 0, 0) !important;
    }

    /* Badge "¡Oferta!" — pill fucsia 64x23 top-left de la imagen wrapper */
    .cmx-cat-card__badge {
        display: inline-block !important;
        position: absolute !important;
        top: 6px !important;
        left: 6px !important;
        background: rgb(231, 35, 128) !important;
        color: #fff !important;
        font-size: 11px !important;
        font-weight: 500 !important;
        line-height: 23px !important;
        height: 23px !important;
        padding: 0 12px !important;
        border-radius: 34px !important;
        z-index: 2 !important;
        pointer-events: none !important;
        font-family: 'Lato', sans-serif !important;
    }

    /* Botón "Comprar" — pill fucsia 36px high, full width del card */
    .cmx-cat-card__buy {
        display: block !important;
        background: rgb(231, 35, 128) !important;
        color: #fff !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        text-align: center !important;
        text-decoration: none !important;
        text-transform: none !important;
        letter-spacing: 0.3px !important;
        padding: 10px 26px !important;
        border-radius: 999px !important;
        border: 0 !important;
        margin: 0 !important;
        height: 36px !important;
        box-sizing: border-box !important;
        font-family: 'Lato', sans-serif !important;
    }
    /* Icono fa-wrench (\f0ad) — replica del theme que aparece en botones
     * .button.product_type_variable de /tienda/. Todos los celulares son
     * productos variables, por eso aplicamos siempre. */
    .cmx-cat-card__buy::before {
        content: "\f0ad";
        font-family: FontAwesome;
        font-weight: 400;
        font-size: 12px;
        margin-right: 7px;
        display: inline-block;
        color: #fff;
    }
    .cmx-cat-card__buy:hover,
    .cmx-cat-card__buy:focus-visible {
        background: rgb(208, 32, 115) !important;
        color: #fff !important;
        outline: none !important;
    }

    /* --- Shop toolbar inline (v0.7.x — Ajuste 4) — Filtros + Ordenar arriba de grilla --- */

    .cmx-shop-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 16px 10px;
        margin: 0 0 6px;
        border-bottom: 1px solid var(--cmx-color-border-soft);
        background: var(--cmx-color-bg);
    }

    .cmx-shop-toolbar__btn:hover,
    .cmx-shop-toolbar__btn:focus-visible {
        color: var(--cmx-color-accent) !important;
        background: transparent !important;
        outline: none;
    }

    .cmx-shop-toolbar__sort:hover {
        color: var(--cmx-color-accent) !important;
    }

    /* --- Card "Comprar" button styling (v0.7.x — Ajuste 5) --- */

    /* Las cards de WC en archive usan el botón `.add_to_cart_button` / `.product_type_*`.
       Forzamos look pill rounded fucsia, texto "Comprar" (texto viene del PHP filter). */
    body.cmx-has-shop-filters .products .product .button,
    body.cmx-has-shop-filters .products .product a.button,
    body.cmx-has-shop-filters .jet-woo-products .jet-woo-builder-archive-product .button {
        background: var(--cmx-color-accent) !important;
        background-color: var(--cmx-color-accent) !important;
        background-image: none !important;
        color: #fff !important;
        border: 0 !important;
        border-radius: 999px !important;
        padding: 10px 26px !important;
        font-family: var(--cmx-font-body) !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        text-transform: none !important;
        letter-spacing: 0.3px !important;
        box-shadow: none !important;
        height: auto !important;
        line-height: 1.2 !important;
        display: inline-block !important;
    }
    body.cmx-has-shop-filters .products .product .button:hover,
    body.cmx-has-shop-filters .jet-woo-products .jet-woo-builder-archive-product .button:hover {
        background: var(--cmx-color-accent-light) !important;
        color: #fff !important;
    }

    /* --- Shop filters in-view (v0.5.0) — overlay reutilizable --- */

    .cmx-overlay {
        position: fixed;
        inset: 0;
        background: var(--cmx-color-bg);
        z-index: var(--cmx-z-modal);
        display: none;
        flex-direction: column;
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 200ms ease, transform 200ms ease;
    }

    .cmx-overlay.is-open {
        display: flex;
        opacity: 1;
        transform: translateY(0);
    }

    .cmx-overlay__head {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 16px;
        border-bottom: 1px solid var(--cmx-color-border-soft);
        background: var(--cmx-color-bg);
    }

    .cmx-overlay__title {
        font-family: var(--cmx-font-body);
        font-size: 18px;
        font-weight: var(--cmx-font-weight-bold);
        color: var(--cmx-color-text);
        margin: 0;
    }

    /* .cmx-overlay__close — estilo unificado en el bloque agrupado de close (ver "Botón de cerrar UNIFICADO"). */

    .cmx-overlay__body {
        flex: 1 1 auto;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 16px;
        -webkit-overflow-scrolling: touch;
    }

    .cmx-overlay__foot {
        flex: 0 0 auto;
        padding: 12px 16px;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--cmx-color-border-soft);
        background: var(--cmx-color-bg);
        display: flex;
        gap: 10px;
    }

    .cmx-overlay__apply {
        flex: 1;
        background: var(--cmx-color-accent);
        color: #fff;
        border: 0;
        height: 48px;
        font-family: var(--cmx-font-body);
        font-size: 14px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-radius: 0;
        cursor: pointer;
    }

    .cmx-overlay__apply:hover {
        background: var(--cmx-color-accent-light);
    }

    /* Estilos para los JSF widgets MOVIDOS al overlay */
    .cmx-overlay__body .elementor-widget[data-widget_type*="jet-smart-filters"],
    .cmx-overlay__body .elementor-widget[data-widget_type*="jet-active-filters"] {
        width: 100% !important;
        margin: 0 0 18px !important;
        padding: 0 !important;
    }

    .cmx-overlay__body .jet-smart-filters-checkboxes-list,
    .cmx-overlay__body .jet-checkboxes-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .cmx-overlay__body .jet-checkboxes-list__row {
        padding: 8px 0;
        border-bottom: 1px solid var(--cmx-color-border-soft);
    }

    /* Sort options dentro del overlay */
    .cmx-overlay__body .cmx-sort-option {
        display: block;
        width: 100%;
        background: transparent;
        border: 0;
        border-bottom: 1px solid var(--cmx-color-border-soft);
        padding: 14px 4px;
        text-align: left;
        font-family: var(--cmx-font-body);
        font-size: 15px;
        font-weight: var(--cmx-font-weight-medium);
        color: var(--cmx-color-text);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .cmx-overlay__body .cmx-sort-option:hover {
        color: var(--cmx-color-accent);
    }

    .cmx-overlay__body .cmx-sort-option.is-active {
        color: var(--cmx-color-accent);
        font-weight: var(--cmx-font-weight-bold);
    }

    .cmx-overlay__body .cmx-sort-option.is-active::after {
        content: "✓";
        float: right;
        color: var(--cmx-color-accent);
    }

    /* --- Search overlay "Más buscados" (v0.6.0) --- */

    .cmx-search-overlay {
        position: fixed;
        inset: 0;
        background: var(--cmx-color-bg);
        z-index: var(--cmx-z-modal);
        display: none;
        flex-direction: column;
        opacity: 0;
        transform: translateY(-100%);
        transition: opacity 240ms cubic-bezier(0.16, 1, 0.3, 1), transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
    }
    .cmx-search-overlay.is-open {
        display: flex;
        opacity: 1;
        transform: translateY(0);
    }

    .cmx-search-overlay__head {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 14px;
        padding-top: calc(12px + env(safe-area-inset-top, 0px));
        border-bottom: 1px solid var(--cmx-color-border-soft);
        background: var(--cmx-color-bg);
    }

    .cmx-search-overlay__form {
        flex: 1;
        position: relative;
    }

    /* v0.7.33 — input matchea el trigger del header: pill fucsia con lupa circle a la derecha. */
    .cmx-search-overlay__input,
    input[type="search"].cmx-search-overlay__input {
        width: 100% !important;
        height: 44px !important;
        padding: 0 52px 0 18px !important;
        font-family: var(--cmx-font-body) !important;
        font-size: 16px !important;
        font-weight: var(--cmx-font-weight-regular) !important;
        color: var(--cmx-color-text) !important;
        background: #fff !important;
        border: 1.5px solid var(--cmx-color-accent) !important;
        border-radius: 999px !important;
        outline: none !important;
        transition: none !important;
        -webkit-appearance: none !important;
        box-sizing: border-box !important;
    }
    .cmx-search-overlay__input:focus {
        background: #fff;
        border-color: var(--cmx-color-accent);
    }
    .cmx-search-overlay__input::placeholder {
        color: #B2B2B2;
    }

    /* Botón submit (círculo fucsia con lupa blanca) — replica del trigger del header */
    .cmx-search-overlay__submit {
        position: absolute;
        right: 4px;
        top: 50%;
        transform: translateY(-50%);
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: var(--cmx-color-accent) !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        cursor: pointer;
        color: #fff !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        min-width: 0 !important;
        z-index: 2;
    }
    .cmx-search-overlay__submit svg {
        width: 18px;
        height: 18px;
        display: block;
        color: #fff;
    }
    .cmx-search-overlay__submit:hover,
    .cmx-search-overlay__submit:focus-visible {
        background: var(--cmx-color-accent-light, #D02073) !important;
        outline: none;
    }

    /* Clear (×) — visible solo cuando hay input. Reposicionado a la izquierda del submit. */
    .cmx-search-overlay__clear {
        position: absolute;
        right: 46px;
        top: 50%;
        transform: translateY(-50%);
        background: transparent !important;
        border: 0 !important;
        padding: 6px !important;
        cursor: pointer;
        color: #B2B2B2 !important;
        font-size: 18px !important;
        line-height: 1 !important;
        display: none;
        min-width: 0 !important;
        width: auto !important;
        height: auto !important;
    }
    .cmx-search-overlay__clear.is-visible {
        display: block;
    }

    /* =========================================================
     * Botón de cerrar UNIFICADO — buscador, filtros/orden,
     * categorías y menú nativo comparten EXACTAMENTE este estilo:
     * "X" negra fina vía SVG (cmx.closeIconSvg en mobile-ux.js),
     * 44px, sin fondo. Los !important neutralizan el botón magenta
     * del tema Kava/Woo que se filtraba en Filtros/Ordenar.
     * NO crear variantes: para un modal nuevo, agrega su clase aquí. */
    button.cmx-search-overlay__close,
    button.cmx-overlay__close,
    button.cmx-categories-modal__close,
    button.cmx-native-menu__close {
        appearance: none !important;
        -webkit-appearance: none !important;
        flex: 0 0 auto;
        width: 44px !important;
        height: 44px !important;
        min-width: 0 !important;
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        color: #000 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    button.cmx-search-overlay__close svg,
    button.cmx-overlay__close svg,
    button.cmx-categories-modal__close svg,
    button.cmx-native-menu__close svg {
        width: 22px;
        height: 22px;
        display: block;
        color: #000;
    }
    button.cmx-search-overlay__close:hover,
    button.cmx-overlay__close:hover,
    button.cmx-categories-modal__close:hover,
    button.cmx-native-menu__close:hover {
        color: var(--cmx-color-accent) !important;
        background: transparent !important;
    }

    .cmx-search-overlay__body {
        flex: 1 1 auto;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 16px;
        -webkit-overflow-scrolling: touch;
    }

    /* Section titles */
    .cmx-search-overlay__section-title {
        margin: 0 0 10px;
        font-family: var(--cmx-font-body);
        font-size: 13px;
        font-weight: var(--cmx-font-weight-bold);
        color: var(--cmx-color-text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.8px;
    }

    .cmx-search-overlay__section + .cmx-search-overlay__section {
        margin-top: 24px;
    }

    /* Recent searches — chips */
    .cmx-search-overlay__recents {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .cmx-search-overlay__recent-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        background: #f5f5f5;
        border: 1px solid var(--cmx-color-border-soft);
        border-radius: 20px;
        font-family: var(--cmx-font-body);
        font-size: 13px;
        color: var(--cmx-color-text);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: background 150ms ease, border-color 150ms ease;
    }
    .cmx-search-overlay__recent-chip:hover {
        background: #fff;
        border-color: var(--cmx-color-accent);
        color: var(--cmx-color-accent);
    }
    .cmx-search-overlay__recent-chip-remove {
        background: transparent;
        border: 0;
        padding: 0;
        margin-left: 4px;
        cursor: pointer;
        color: var(--cmx-color-muted);
        font-size: 16px;
        line-height: 1;
    }

    /* Popular pills/chips (v0.7.x — PDF spec: 4 chips fucsia clickeables) */
    .cmx-search-overlay__popular-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
    .cmx-search-overlay__popular-chip {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 8px 16px;
        background: var(--cmx-color-accent);
        color: #fff;
        text-decoration: none;
        font-family: var(--cmx-font-body);
        font-size: 13px;
        font-weight: 700;
        line-height: 1.2;
        border-radius: 999px;
        white-space: nowrap;
        -webkit-tap-highlight-color: transparent;
        transition: background 150ms ease, transform 150ms ease;
    }
    .cmx-search-overlay__popular-chip:hover {
        background: var(--cmx-color-accent-light);
        color: #fff;
        transform: translateY(-1px);
    }

    /* Popular products grid (LEGACY, kept para compat — ya no se usa) */
    .cmx-search-overlay__popular {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .cmx-search-overlay__product-card {
        display: flex;
        flex-direction: column;
        text-decoration: none;
        color: var(--cmx-color-text);
        background: var(--cmx-color-bg);
        border: 1px solid var(--cmx-color-border-soft);
        transition: border-color 150ms ease, transform 150ms ease;
        -webkit-tap-highlight-color: transparent;
    }
    .cmx-search-overlay__product-card:hover {
        border-color: var(--cmx-color-accent);
        transform: translateY(-2px);
    }
    .cmx-search-overlay__product-image {
        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        background: var(--cmx-color-bg-secondary);
        display: block;
    }
    .cmx-search-overlay__product-info {
        padding: 10px 12px 12px;
    }
    .cmx-search-overlay__product-name {
        font-family: var(--cmx-font-body);
        font-size: 13px;
        font-weight: var(--cmx-font-weight-bold);
        line-height: 1.3;
        margin: 0 0 4px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .cmx-search-overlay__product-price {
        font-family: var(--cmx-font-body);
        font-size: 13px;
        font-weight: var(--cmx-font-weight-bold);
        color: var(--cmx-color-accent);
        margin: 0;
    }

    /* Live results list */
    .cmx-search-overlay__results-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .cmx-search-overlay__result-row {
        display: flex;
        gap: 10px;
        padding: 8px;
        text-decoration: none;
        color: var(--cmx-color-text);
        border: 1px solid transparent;
        transition: border-color 150ms ease, background 150ms ease;
        -webkit-tap-highlight-color: transparent;
    }
    .cmx-search-overlay__result-row:hover {
        border-color: var(--cmx-color-border-soft);
        background: #fafafa;
    }
    .cmx-search-overlay__result-image {
        width: 56px;
        height: 56px;
        object-fit: cover;
        background: var(--cmx-color-bg-secondary);
        flex: 0 0 56px;
    }
    .cmx-search-overlay__result-content {
        flex: 1;
        min-width: 0;
    }
    .cmx-search-overlay__result-name {
        font-family: var(--cmx-font-body);
        font-size: 14px;
        font-weight: var(--cmx-font-weight-bold);
        line-height: 1.3;
        margin: 0 0 4px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .cmx-search-overlay__result-price {
        font-family: var(--cmx-font-body);
        font-size: 13px;
        font-weight: var(--cmx-font-weight-bold);
        color: var(--cmx-color-accent);
        margin: 0;
    }

    /* Empty / loading states */
    .cmx-search-overlay__empty,
    .cmx-search-overlay__loading {
        text-align: center;
        color: var(--cmx-color-muted);
        font-family: var(--cmx-font-body);
        font-size: 14px;
        padding: 32px 16px;
    }
    .cmx-search-overlay__loading::after {
        content: " ...";
    }

    /* CTA "ver todos los resultados" */
    .cmx-search-overlay__see-all {
        display: block;
        margin-top: 16px;
        padding: 14px 16px;
        background: var(--cmx-color-accent) !important;
        color: #fff !important;
        text-align: center;
        text-decoration: none !important;
        font-family: var(--cmx-font-body);
        font-size: 14px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    .cmx-search-overlay__see-all:hover {
        background: var(--cmx-color-accent-light) !important;
        color: #fff !important;
    }

    /* =========================================================
     * v0.7.0 — Mobile Header propio (Ajuste 1)
     * Oculta el header de Elementor/Kava y muestra uno propio.
     * ========================================================= */

    /* Oculta el header del theme/Elementor en mobile cuando el módulo está activo.
       Selectores defensivos para cubrir Elementor Pro headers + Kava theme. */
    body.cmx-has-mobile-header header.elementor-location-header,
    body.cmx-has-mobile-header header[data-elementor-type="header"],
    body.cmx-has-mobile-header .elementor-location-header,
    body.cmx-has-mobile-header .kava-header,
    body.cmx-has-mobile-header .site-header,
    body.cmx-has-mobile-header > #masthead,
    body.cmx-has-mobile-header > header[role="banner"] {
        display: none !important;
    }

    .cmx-mobile-header {
        display: block;
        position: sticky;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 9300;
        background: var(--cmx-color-bg);
        border-bottom: 1px solid var(--cmx-color-border-soft);
        font-family: var(--cmx-font-body);
    }

    .cmx-mobile-header__socials {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 14px;
        padding: 8px 14px;
        background: #f5f5f5;
    }
    .cmx-mobile-header__social {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: #000;
        color: #fff;
        text-decoration: none;
        transition: transform 150ms ease, background 150ms ease;
    }
    .cmx-mobile-header__social svg {
        width: 16px;
        height: 16px;
        display: block;
    }
    .cmx-mobile-header__social:hover {
        background: var(--cmx-color-accent);
        transform: scale(1.06);
    }

    .cmx-mobile-header__bar {
        display: grid;
        grid-template-columns: auto 1fr auto auto;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        background: var(--cmx-color-bg);
    }

    .cmx-mobile-header__logo {
        flex: 0 0 auto;
        display: block;
        line-height: 0;
    }
    .cmx-mobile-header__logo img {
        height: 38px;
        width: auto;
        display: block;
    }
    .cmx-mobile-header__logo-fallback {
        font-family: var(--cmx-font-display);
        font-weight: 700;
        font-size: 16px;
        color: var(--cmx-color-text);
        line-height: 1;
    }

    .cmx-mobile-header__search {
        appearance: none;
        -webkit-appearance: none;
        flex: 1;
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        height: 36px;
        padding: 0 0 0 14px;
        background: #fff;
        border: 1.5px solid var(--cmx-color-accent);
        border-radius: 999px;
        cursor: pointer;
        font-family: var(--cmx-font-body);
        font-size: 13px;
        color: var(--cmx-color-muted);
        text-align: left;
        -webkit-tap-highlight-color: transparent;
    }
    .cmx-mobile-header__search-placeholder {
        flex: 1;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .cmx-mobile-header__search-icon {
        flex: 0 0 36px;
        width: 36px;
        height: 36px;
        margin: -1.5px -1.5px -1.5px 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--cmx-color-accent);
        color: #fff;
        border-radius: 999px;
    }
    .cmx-mobile-header__search-icon svg {
        width: 18px;
        height: 18px;
        display: block;
    }

    .cmx-mobile-header__cart {
        position: relative;
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        color: var(--cmx-color-accent);
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }
    .cmx-mobile-header__cart svg {
        width: 24px;
        height: 24px;
        display: block;
    }
    .cmx-mobile-header__cart-count {
        position: absolute;
        top: -2px;
        right: -4px;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        border-radius: 999px;
        background: var(--cmx-color-accent);
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        line-height: 16px;
        text-align: center;
    }
    .cmx-mobile-header__cart-count[data-cmx-cart-count="0"] {
        display: none;
    }

    .cmx-mobile-header__menu,
    button.cmx-mobile-header__menu,
    .cmx-mobile-header button.cmx-mobile-header__menu {
        appearance: none !important;
        -webkit-appearance: none !important;
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 6px !important;
        margin: 0 -6px 0 0 !important;
        color: var(--cmx-color-text) !important;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        min-width: 0 !important;
        height: auto !important;
        width: auto !important;
        border-radius: 0 !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        font-size: inherit !important;
        line-height: 1 !important;
    }
    .cmx-mobile-header__menu:hover {
        color: var(--cmx-color-accent) !important;
        background: transparent !important;
    }
    .cmx-mobile-header__menu svg {
        width: 26px;
        height: 26px;
        display: block;
        color: inherit;
        stroke: currentColor;
    }

    /* Defensive: el theme/Elementor pone bg fucsia a buttons. Aislamos el search. */
    button.cmx-mobile-header__search,
    .cmx-mobile-header button.cmx-mobile-header__search {
        background: #fff !important;
        background-color: #fff !important;
        background-image: none !important;
        border: 1.5px solid var(--cmx-color-accent) !important;
        box-shadow: none !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        min-width: 0 !important;
    }

    /* =========================================================
     * v0.7.13 — Native Menu Bridge (offcanvas para JetMegaMenu nativo)
     * ========================================================= */
    .cmx-native-menu {
        display: none;
        position: fixed;
        inset: 0;
        z-index: var(--cmx-z-modal);
        background: var(--cmx-color-bg);
        flex-direction: column;
        opacity: 0;
        transform: translateX(100%);
        transition: opacity 220ms ease, transform 220ms ease;
        font-family: var(--cmx-font-body);
    }
    .cmx-native-menu.is-open {
        display: flex;
        opacity: 1;
        transform: translateX(0);
    }
    .cmx-native-menu__head {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 16px;
        border-bottom: 1px solid var(--cmx-color-border-soft);
        background: var(--cmx-color-bg);
    }
    .cmx-native-menu__title {
        margin: 0;
        font-family: var(--cmx-font-body);
        font-size: 18px;
        font-weight: var(--cmx-font-weight-bold);
        color: var(--cmx-color-text);
    }
    .cmx-native-menu__body {
        flex: 1 1 auto;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 12px 0;
        -webkit-overflow-scrolling: touch;
    }
    /* Los widgets jet-mega-menu MOVIDOS al panel necesitan espacio + visibilidad */
    .cmx-native-menu__body .elementor-widget-jet-mega-menu {
        width: 100% !important;
        margin: 0 0 12px !important;
        padding: 0 !important;
        display: block !important;
        visibility: visible !important;
        position: static !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }
    /* `.elementor-widget-container` heredaba height:0 del header oculto — forzamos auto */
    .cmx-native-menu__body .elementor-widget-container,
    .cmx-native-menu__body .jet-mega-menu {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        display: block !important;
    }
    /* Forzar el menú a vista vertical (mobile-style) cuando vive dentro del panel */
    .cmx-native-menu__body .jet-mega-menu-list {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .cmx-native-menu__body .jet-mega-menu-item {
        width: 100% !important;
        list-style: none !important;
    }
    .cmx-native-menu__body .jet-mega-menu-item__link {
        padding: 12px 16px !important;
        font-size: 15px !important;
    }
    /* El dropdown anidado aparece debajo del item, no como popover */
    .cmx-native-menu__body .jet-mega-menu-item__dropdown,
    .cmx-native-menu__body .jet-mega-menu-mega-container {
        position: static !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 8px 0 !important;
    }
    /* Ocultar los toggles internos de cada widget — el offcanvas mío YA es el menú */
    .cmx-native-menu__body .jet-mega-menu-toggle {
        display: none !important;
    }
    /* Forzar el container a estar abierto */
    .cmx-native-menu__body .jet-mega-menu-container {
        display: block !important;
        height: auto !important;
        max-height: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        overflow: visible !important;
    }

    /* =========================================================
     * v0.7.0 — Categories Modal (Ajuste 2)
     * Modal con árbol de categorías WC (sólo con productos).
     * ========================================================= */

    .cmx-categories-modal {
        display: none;
        position: fixed;
        inset: 0;
        z-index: var(--cmx-z-modal);
        background: var(--cmx-color-bg);
        flex-direction: column;
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 200ms ease, transform 200ms ease;
        font-family: var(--cmx-font-body);
    }
    .cmx-categories-modal.is-open {
        display: flex;
        opacity: 1;
        transform: translateY(0);
    }

    .cmx-categories-modal__head {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 16px;
        border-bottom: 1px solid var(--cmx-color-border-soft);
        background: var(--cmx-color-bg);
    }
    .cmx-categories-modal__title {
        margin: 0;
        font-family: var(--cmx-font-body);
        font-size: 18px;
        font-weight: var(--cmx-font-weight-bold);
        color: var(--cmx-color-text);
    }
    /* .cmx-categories-modal__close — estilo unificado en el bloque agrupado de close (ver "Botón de cerrar UNIFICADO"). */

    .cmx-categories-modal__body {
        flex: 1 1 auto;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 8px 0;
        -webkit-overflow-scrolling: touch;
    }

    .cmx-categories-modal__loading,
    .cmx-categories-modal__empty {
        text-align: center;
        padding: 40px 16px;
        color: var(--cmx-color-muted);
        font-size: 14px;
    }

    .cmx-cat-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .cmx-cat-list--root > .cmx-cat-item {
        border-bottom: 1px solid var(--cmx-color-border-soft);
    }
    .cmx-cat-item {
        position: relative;
    }
    .cmx-cat-row {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 14px 16px;
        text-decoration: none;
        color: var(--cmx-color-text);
        font-family: var(--cmx-font-body);
        font-size: 15px;
        font-weight: var(--cmx-font-weight-medium);
        -webkit-tap-highlight-color: transparent;
    }
    .cmx-cat-row__link {
        flex: 1;
        min-width: 0;
        text-decoration: none;
        color: inherit;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .cmx-cat-row__link:hover {
        color: var(--cmx-color-accent);
    }
    .cmx-cat-row__count {
        font-weight: 400;
        color: var(--cmx-color-muted);
        font-size: 13px;
    }
    button.cmx-cat-row__toggle,
    .cmx-categories-modal button.cmx-cat-row__toggle {
        appearance: none !important;
        -webkit-appearance: none !important;
        flex: 0 0 36px !important;
        width: 36px !important;
        height: 36px !important;
        min-width: 0 !important;
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        color: var(--cmx-color-text-secondary) !important;
        cursor: pointer;
        font-size: 18px !important;
        line-height: 1 !important;
        border-radius: 0 !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        -webkit-tap-highlight-color: transparent;
        transition: transform 200ms ease, color 150ms ease;
    }
    button.cmx-cat-row__toggle:hover {
        color: var(--cmx-color-accent) !important;
        background: transparent !important;
    }
    .cmx-cat-item.is-open > .cmx-cat-row .cmx-cat-row__toggle {
        transform: rotate(90deg);
    }

    .cmx-cat-children {
        display: none;
        list-style: none;
        margin: 0;
        padding: 0 0 8px 0;
        background: #fafafa;
    }
    .cmx-cat-item.is-open > .cmx-cat-children {
        display: block;
    }
    .cmx-cat-children .cmx-cat-row {
        padding-left: 36px;
        font-size: 14px;
        font-weight: var(--cmx-font-weight-regular);
    }
    .cmx-cat-children .cmx-cat-children .cmx-cat-row {
        padding-left: 56px;
        font-size: 13px;
    }

}

/* =============================================================
 * Fix GLOBAL (fuera de @media): X duplicada en el botón "eliminar"
 * de la página de carrito. JetWooBuilder inyecta <i class="fas fa-times">
 * Y el tema pinta otra X vía a.remove::before (FontAwesome v4, \f00d) →
 * dos glifos superpuestos ("xX"). Suprimimos el ::before y conservamos
 * el <i> del builder. El defecto existe en móvil Y desktop; corrección
 * global aprobada por el cliente (jun 2026). Scope acotado a la tabla del
 * carrito — NO afecta mini-cart ni el popup YITH.
 * ============================================================= */
.woocommerce-cart td.product-remove a.remove::before {
    content: none !important;
    display: none !important;
}