/*
 * Aislamiento contra el layout del <form class="cart"> de WooCommerce.
 * Este bloque se inyecta como hijo directo de ese form (vía
 * woocommerce_before_add_to_cart_button), y Elementor le pone su propio
 * display:flex/grid para colocar selectores de variación + botón en fila.
 *
 * Después de varias rondas fallidas incluso con ID + !important en el
 * precio, se aplica "all: revert !important" (resetea TODO a los valores
 * por defecto del navegador, ignorando cualquier hoja de estilos del
 * sitio) a CADA elemento del bloque, no solo al precio — por si el fallo
 * viene de la fila/contenedor y no del precio en sí.
 */

/* Parche temporal: el heading viejo "Accesorios adicionales" (el del
   contenedor antiguo con los 3 Loop Grid, que debería borrarse entero en
   Elementor) todavía no se ha borrado — se oculta aquí mientras tanto
   para que no salga duplicado. Cuando se borre en Elementor, esta regla
   deja de hacer nada (no hace falta quitarla, pero se puede limpiar). */
.elementor-element-0f2b8e2 {
    display: none !important;
}

/* Los widgets HTML "invisibles" (tooltip de colores y "ver fotos de
   tejidos") no pintan contenido propio, solo llevan <script>/<style> —
   ambos siguen funcionando con el contenedor oculto (display:none no
   afecta ni a que el script se ejecute ni a que el <style> se aplique).
   display:none es más robusto que solo poner margin/padding a 0, porque
   además evita el margen por defecto entre widgets del kit
   (--kit-widget-spacing: 20px cada uno) que dejaba un hueco fantasma. */
.elementor-element-1ed7264,
.elementor-element-5719408 {
    display: none !important;
}

/* El padre inmediato real (variations_button / woocommerce-variation-add-to-cart,
   el que agrupa el selector de cantidad + el botón) es flex SIN wrap — sin
   esto, nuestro bloque y el botón quedan forzados en la misma fila. */
form.cart,
form.cart .variations_button,
form.cart .woocommerce-variation-add-to-cart,
.woocommerce-variation-add-to-cart,
.variations_button,
.elementor-widget-woocommerce-product-add-to-cart form.cart {
    flex-wrap: wrap !important;
}

/* Excluye .numma-accessory-group del comodín: "all" incluye "display", y
   con !important ganaría al style="display:none" inline que alterna el
   JS para mostrar solo el grupo del tejido activo. */
#numma-accessories-before-cta,
#numma-accessories-before-cta *:not(.numma-accessory-group) {
    all: revert !important;
    box-sizing: border-box !important;
}

#numma-accessories-before-cta {
    display: block !important;
    position: static !important;
    width: 100% !important;
    flex: 1 1 100% !important;
    align-self: stretch !important;
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    order: 0 !important;
    margin: 24px 0 !important;
    font-family: Outfit, sans-serif !important;
}

#numma-accessories-before-cta .numma-accessories-before-cta-title {
    display: block !important;
    position: static !important;
    font-size: 19px !important;
    font-weight: 400 !important;
    color: #000 !important;
    margin: 0 0 16px 0 !important;
}

/* OJO: NO forzar display aquí. El PHP pone style="display:none" inline
   por defecto y el JS lo alterna a "" para mostrar el grupo del tejido
   activo — un display:block !important en la hoja de estilos GANARÍA a
   ese inline sin !important y los 3 grupos se verían a la vez siempre. */
#numma-accessories-before-cta .numma-accessory-group {
    position: static !important;
    width: 100% !important;
}

#numma-accessories-before-cta .numma-accessory-row {
    display: flex !important;
    position: static !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;
    width: 100% !important;
    padding: 16px 0 !important;
    margin: 0 !important;
    border: none !important;
    border-top: 1px solid #eee !important;
}

#numma-accessories-before-cta .numma-accessory-row:last-child {
    border-bottom: 1px solid #eee !important;
}

#numma-accessories-before-cta .numma-accessory-thumb {
    display: block !important;
    position: static !important;
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    object-fit: cover !important;
    border-radius: 4px !important;
    flex: 0 0 72px !important;
    margin: 0 !important;
    background: #f6f6f6 !important;
}

#numma-accessories-before-cta .numma-accessory-info {
    display: flex !important;
    position: static !important;
    flex-direction: column !important;
    gap: 2px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

#numma-accessories-before-cta .numma-accessory-title {
    display: block !important;
    position: static !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #111 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
}

#numma-accessories-before-cta .numma-accessory-dimensions {
    display: block !important;
    position: static !important;
    font-size: 12px !important;
    color: #777 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
}

#numma-accessories-before-cta .numma-accessory-price,
#numma-accessories-before-cta .numma-accessory-price .woocommerce-Price-amount,
#numma-accessories-before-cta .numma-accessory-price .amount,
#numma-accessories-before-cta .numma-accessory-price bdi,
#numma-accessories-before-cta .numma-accessory-price .woocommerce-Price-currencySymbol {
    display: inline !important;
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    inset: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    float: none !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    line-height: normal !important;
    color: #111 !important;
}

#numma-accessories-before-cta .numma-accessory-price {
    display: block !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    margin: 0 !important;
}

/* Ancho fijo con !important para cantidad y botón, para que no dependan
   de que el flex calcule bien el espacio disponible. */
#numma-accessories-before-cta .numma-accessory-qty {
    display: block !important;
    position: static !important;
    flex: 0 0 52px !important;
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: auto !important;
    padding: 6px !important;
    margin: 0 !important;
    text-align: center !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    color: #111 !important;
    background: #fff !important;
}

#numma-accessories-before-cta .numma-accessory-add-to-cart {
    display: inline-block !important;
    position: static !important;
    flex: 0 0 auto !important;
    align-self: center !important;
    height: auto !important;
    width: auto !important;
    min-width: 140px !important;
    background: #f3f3f3 !important;
    color: #111 !important;
    border-radius: 40px !important;
    padding: 10px 18px !important;
    margin: 0 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: normal !important;
    white-space: nowrap !important;
    text-align: center !important;
    text-decoration: none !important;
    box-shadow: none !important;
    border: none !important;
    cursor: pointer !important;
}

#numma-accessories-before-cta .numma-accessory-add-to-cart:hover {
    background: #ebebeb !important;
}

#numma-accessories-before-cta .numma-accessory-add-to-cart.loading {
    opacity: 0.6 !important;
    pointer-events: none !important;
}

/* Aviso visual: cuando el precio (del sofá o de un accesorio) se
   actualiza tras cambiar un atributo, se ilumina con un gris del tema
   un instante y se desvanece, para que el usuario note el cambio. */
@keyframes numma-price-update-flash {
    0% {
        background-color: #ececec;
    }
    100% {
        background-color: transparent;
    }
}

.numma-price-flash {
    animation: numma-price-update-flash 900ms ease-out;
    border-radius: 6px;
    padding: 4px 10px !important;
    margin: -4px -10px !important;
    display: inline-block !important;
}

/* Precio principal del sofá (el que se ilumina al cambiar atributos):
   más grande para que se note el cambio con claridad. */
.woocommerce-variation-price .price {
    font-size: 30px !important;
    font-weight: 500 !important;
}

@media (max-width: 480px) {
    #numma-accessories-before-cta .numma-accessory-row {
        flex-wrap: wrap !important;
    }

    #numma-accessories-before-cta .numma-accessory-price {
        order: 1 !important;
    }
}

/* No tiene relación con el bloque de accesorios — va aquí porque este
   CSS ya carga en la PDP. Acordeón "Detalles del producto / Dimensiones
   y variaciones / ...": cada item lleva borde arriba Y abajo
   (border-width: 1px 0px 1px 0px), así que al estar pegados sin margen
   el borde inferior de uno y el superior del siguiente se ven como una
   raya doble. Se quita el borde superior de todos menos el primero. */
.elementor-element-308552d > .e-n-accordion > .e-n-accordion-item + .e-n-accordion-item > .e-n-accordion-item-title {
    border-top: none !important;
}