/**
 * woocommerce-dark.css
 * Sobrescribe los estilos genéricos blancos de Storefront/WooCommerce 
 * para respetar el diseño "Dark Premium" de Nuvvia Store.
 */

/* -------------------------------------------------------------
 * 1. Globales WooCommerce
 * ------------------------------------------------------------- */
body.woocommerce,
body.woocommerce-page {
    /* Fondo "futurista/nocturno" emulando los orbes de la home */
    background-color: var(--nv-bg, #080812) !important;
    background-image:
        radial-gradient(circle at 15% 50%, rgba(88, 86, 214, 0.15), transparent 40%),
        radial-gradient(circle at 85% 30%, rgba(61, 219, 160, 0.08), transparent 40%) !important;
    background-attachment: fixed !important;
    color: var(--nv-text, #f0f0f0) !important;
    font-family: var(--nv-font, 'Space Grotesk', system-ui, sans-serif);
}

/* Override Storefront Theme Header & Footer SOLO en subpáginas WC */
body.woocommerce .site-header,
body.woocommerce .site-footer,
body.woocommerce .site-header-wrapper,
body.woocommerce-page .site-header,
body.woocommerce-page .site-footer,
body.woocommerce-page .site-header-wrapper {
    background-color: var(--nv-bg, #0a0a0a) !important;
    border-bottom: 1px solid #262626 !important;
}

body.woocommerce .site-header *,
body.woocommerce .site-footer *,
body.woocommerce-page .site-header *,
body.woocommerce-page .site-footer * {
    color: var(--nv-text, #fff) !important;
}

.site-branding .site-title a {
    color: var(--nv-text, #fff) !important;
    font-weight: 700 !important;
}

/* Forzar todo el texto del área principal a blanco para evitar que el gris oscuro de Storefront (#43454b) lo haga invisible */
body.woocommerce .site-main,
body.woocommerce .site-main *,
body.woocommerce-page .site-main,
body.woocommerce-page .site-main * {
    color: var(--nv-text, #fff) !important;
}

/* Secondary Navigation / Breadcrumbs */
.storefront-breadcrumb {
    color: #a3a3a3 !important;
    margin-bottom: 2rem !important;
}

.storefront-breadcrumb a {
    color: #a3a3a3 !important;
}

.storefront-breadcrumb a:hover {
    color: var(--nv-primary, #6366f1) !important;
}

/* Títulos de página (Shop, Cart, Checkout) */
.woocommerce-products-header__title.page-title,
.entry-title {
    color: var(--nv-text, #fff) !important;
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-align: center;
}

/* Mensajes de WooCommerce (Info, Error, Success) */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    background-color: var(--nv-surface, #151515) !important;
    border-top-color: var(--nv-primary, #6366f1) !important;
    color: var(--nv-text, #fff) !important;
    border-radius: 12px;
}

.woocommerce-error {
    border-top-color: #ef4444 !important;
}

.woocommerce-message::before,
.woocommerce-info::before {
    color: var(--nv-primary, #6366f1) !important;
}

/* Enlaces genéricos */
.woocommerce a {
    color: var(--nv-primary, #6366f1);
    text-decoration: none;
    transition: color 0.2s ease;
}

.woocommerce a:hover {
    color: #818cf8;
}

/* Botones genéricos de WC (Update cart, Apply coupon, Submit) */
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button {
    background: var(--nv-primary, #6366f1) !important;
    color: #fff !important;
    border-radius: 999px !important;
    padding: 0.75rem 1.5rem !important;
    font-weight: 500 !important;
    border: none !important;
    transition: all 0.3s ease !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce input.button:hover {
    background: linear-gradient(135deg, #4845B5 0%, #5856D6 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

/* Botones específicos de Añadir al carrito en la Tienda */
ul.products li.product a.button.add_to_cart_button,
ul.products li.product a.button.product_type_simple {
    background: linear-gradient(135deg, var(--iris, #5856D6) 0%, var(--iris-light, #7B79E8) 100%) !important;
    color: var(--txt-white, #fff) !important;
    border-radius: 9999px !important;
    padding: 12px 24px !important;
    font-weight: 600 !important;
    border: none !important;
    box-shadow: 0 4px 20px rgba(88, 86, 214, 0.40) !important;
    margin-top: 1rem !important;
    display: inline-flex !important;
}

ul.products li.product a.button.add_to_cart_button:hover,
ul.products li.product a.button.product_type_simple:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 40px rgba(88, 86, 214, 0.55) !important;
}

/* Elementos de formulario intensivos (Checkout y Cart) */

/* 1. Forzar color de texto oscuro/visible o blanco dependiendo del fondo */
body.woocommerce form .form-row input.input-text,
body.woocommerce form .form-row textarea,
body.woocommerce-page form .form-row input.input-text,
body.woocommerce-page form .form-row textarea,
body.woocommerce-checkout form .form-row input.input-text,
.woocommerce form .form-row input[type="text"],
body.woocommerce form .form-row input[type="email"],
.woocommerce form .form-row input[type="tel"],
.woocommerce form .form-row input[type="password"],
.select2-container .select2-selection--single,
/* WOOCOMMERCE BLOCKS (O NUEVO CHECKOUT GUTENBERG) */
.wc-block-components-text-input input,
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-combobox-control input,
.wc-block-checkout__form .wc-block-components-text-input__input,
.wc-blocks-components-select__select,
.wc-block-components-address-form__country select,
.wc-block-components-address-form__state select,
.wc-block-components-select__select:focus,
.wc-blocks-components-select__select:focus {
    background-color: var(--bg-2, #13131F) !important;
    border: 1px solid rgba(196, 188, 255, 0.3) !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    font-size: 1rem !important;
    box-shadow: none !important;
    appearance: none !important;
    /* Quita el estilo nativo gris feo del select */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

/* 2. Placeholders explícitos para que se lean de verdad */
body.woocommerce form .form-row input::-webkit-input-placeholder,
body.woocommerce form .form-row textarea::-webkit-input-placeholder,
body.woocommerce-page form .form-row input::-webkit-input-placeholder,
.woocommerce form .form-row input::placeholder,
.wc-block-components-text-input input::placeholder {
    color: rgba(196, 188, 255, 0.6) !important;
    opacity: 1 !important;
}

/* 3. Etiquetas (Labels) siempre visibles y por encima del input */
body.woocommerce form .form-row label,
body.woocommerce-page form .form-row label,
body.woocommerce-checkout form .form-row label,
.wc-block-components-text-input label,
.wc-block-components-combobox-control label,
.wc-blocks-components-select__label {
    color: var(--txt-1, #F0EEFF) !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    margin-bottom: 8px !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Ocultar astéricos rojos si molestan visualmente */
body.woocommerce form .form-row .required {
    color: var(--mint, #3DDBA0) !important;
}

/* Solución para el Autocompletado (Autofill) de Chrome/Safari que forzaba fondo blanco */
body.woocommerce form .form-row input:-webkit-autofill,
body.woocommerce form .form-row input:-webkit-autofill:hover,
body.woocommerce form .form-row input:-webkit-autofill:focus,
body.woocommerce form .form-row input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 50px var(--bg-2, #13131F) inset !important;
    -webkit-text-fill-color: #ffffff !important;
    transition: background-color 5000s ease-in-out 0s;
}

body.woocommerce form .form-row input.input-text:focus,
body.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row input[type="text"]:focus,
.woocommerce form .form-row input[type="email"]:focus,
.woocommerce form .form-row input[type="tel"]:focus,
.select2-container--open .select2-selection--single {
    border-color: var(--nv-primary, #6366f1) !important;
    box-shadow: 0 0 0 3px rgba(88, 86, 214, 0.25) !important;
    outline: none !important;
    background-color: var(--bg-3, #181828) !important;
}

/* Eliminar el fondo blanco base de WooCommerce Blocks */
.wc-block-components-main.wc-block-checkout__main.wp-block-woocommerce-checkout-fields-block,
.wc-block-components-checkout-step,
.wc-block-components-panel__content {
    background: transparent !important;
}

.wc-block-checkout__sidebar {
    background: var(--bg-1, #0E0E1A) !important;
    border: 1px solid rgba(88, 86, 214, 0.2) !important;
    border-radius: 16px !important;
    padding: 1.5rem !important;
}

/* Color del texto interno (placeholder incrustado por Storefront a veces) */
body.woocommerce form .form-row input::placeholder,
body.woocommerce form .form-row textarea::placeholder {
    color: rgba(196, 188, 255, 0.45) !important;
}

/* Etiquetas (Labels) del Formulario de Pago y Envío */
body.woocommerce form .form-row label,
body.woocommerce-page form .form-row label {
    color: var(--txt-2, #C4BCFF) !important;
    font-weight: 500 !important;
    margin-bottom: 8px !important;
    display: block !important;
}

/* Cajas de métodos de pago (Checkout radios) */
#add_payment_method #payment,
.woocommerce-cart #payment,
.woocommerce-checkout #payment,
.wc-block-components-checkout-step--payment {
    background: var(--bg-1, #0E0E1A) !important;
    border-radius: 16px !important;
    border: 1px solid rgba(88, 86, 214, 0.3) !important;
    overflow: hidden !important;
}

ul.wc_payment_methods.payment_methods.methods {
    background: transparent !important;
    border: none !important;
}

#add_payment_method #payment div.payment_box,
.woocommerce-cart #payment div.payment_box,
.woocommerce-checkout #payment div.payment_box,
.woocommerce-checkout #payment ul.payment_methods li {
    background-color: var(--bg-2, #13131F) !important;
    color: #ffffff !important;
    border: none !important;
}

.woocommerce-checkout #payment ul.payment_methods li {
    padding: 1rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Hacer que el iframe o caja de Mercado Pago reciba el dark mode si es posible */
.mp-checkout-container,
.mercadopago-button,
.wc-block-components-radio-control-accordion-content,
div#radio-control-wc-payment-method-options-woo-mercado-pago-basic__content,
.mp-checkout-pro-content,
.mp-checkout-pro-benefits,
.mp-checkout-pro-payment-methods {
    background-color: var(--bg-2, #13131F) !important;
    background: var(--bg-2, #13131F) !important;
    color: #ffffff !important;
    border: none !important;
}

/* El Box general de Mercado Pago con Borde Blanco */
.mp-checkout-pro-container {
    background-color: var(--bg-2, #13131F) !important;
    background: var(--bg-2, #13131F) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    /* Borde blanquecino simétrico */
    border-radius: 12px !important;
    overflow: hidden !important;
}

/* El bloque especifico gris claro de "Te llevaremos a MP" */
.mp-checkout-pro-redirect,
.woocommerce-checkout #payment div.payment_box p.mp-checkout-pro-redirect {
    background: var(--bg-3, #181828) !important;
    background-color: var(--bg-3, #181828) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

/* En caso de que Mercado Pago inyecte un fondo blanco al iframe de pago transparente */
.woocommerce-checkout #payment div.payment_box p,
.mp-checkout-pro-benefit-description,
.wc-block-components-radio-control-accordion-content *,
.mp-checkout-pro-benefits-title,
.mp-checkout-pro-redirect-title,
.mp-checkout-pro-redirect-description {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Fuerza el label de MP a blanco */
label.wc-block-components-radio-control__label {
    color: #ffffff !important;
}

/* Flechita del Checkbox / Radio buttons */
.woocommerce form .form-row .input-checkbox,
.woocommerce form .form-row .input-radio {
    accent-color: #5856D6 !important;
}

/* -------------------------------------------------------------
  * 2. Página de Catálogo / Shop
  * ------------------------------------------------------------- */
ul.products li.product {
    background: var(--nv-surface, #151515);
    border: 1px solid #262626;
    border-radius: 24px;
    padding: 1.5rem !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
}

ul.products li.product:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border-color: #333;
}

ul.products li.product img {
    border-radius: 12px;
    margin-bottom: 1rem;
}

ul.products li.product .woocommerce-loop-product__title {
    color: var(--nv-text, #fff) !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
}

ul.products li.product .price {
    color: var(--nv-text, #fff) !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    margin-bottom: 1rem !important;
}

/* Ordenamiento y filtros superiores */
.woocommerce-ordering select {
    background-color: #1a1a1a !important;
    color: #fff !important;
    border: 1px solid #333 !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
}

/* -------------------------------------------------------------
  * 3. Página de Carrito (Cart)
  * ------------------------------------------------------------- */
.woocommerce-cart .woocommerce-cart-form {
    background: var(--nv-surface, #151515);
    border-radius: 20px;
    padding: 2rem;
    border: 1px solid #262626;
    margin-bottom: 2rem;
}

.woocommerce table.shop_table {
    border: none !important;
    border-radius: 0 !important;
}

.woocommerce table.shop_table th {
    color: #a3a3a3 !important;
    border-bottom: 1px solid #333 !important;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    padding-bottom: 1rem;
}

.woocommerce table.shop_table td {
    border-top: 1px solid #262626 !important;
    color: #fff !important;
    vertical-align: middle;
}

.woocommerce table.shop_table td.product-name a {
    color: #fff !important;
    font-weight: 600;
}

.woocommerce table.shop_table td.product-remove a {
    color: #ef4444 !important;
    font-size: 1.5rem !important;
    font-weight: 300 !important;
}

.woocommerce table.shop_table td.product-remove a:hover {
    background: rgba(239, 68, 68, 0.1) !important;
    border-radius: 50%;
}

/* Cantidades */
.woocommerce .quantity .qty {
    background-color: #1a1a1a !important;
    border: 1px solid #333 !important;
    color: #fff !important;
    border-radius: 8px !important;
}

/* Totales del carrito */
.woocommerce .cart-collaterals .cart_totals {
    background: var(--nv-surface, #151515);
    border-radius: 20px;
    padding: 2rem;
    border: 1px solid #262626;
}

.woocommerce .cart-collaterals .cart_totals h2 {
    color: #fff !important;
    border-bottom: 1px solid #333 !important;
    padding-bottom: 1rem;
}

.woocommerce-cart .cart-collaterals .cart_totals table th {
    color: #a3a3a3 !important;
}

.woocommerce-cart .cart-collaterals .cart_totals table td {
    color: #fff !important;
    text-align: right;
}

/* -------------------------------------------------------------
  * 4. Página de Checkout (Finalizar Compra)
  * ------------------------------------------------------------- */
.woocommerce-checkout #customer_details {
    background: var(--nv-surface, #151515);
    border-radius: 20px;
    padding: 2rem;
    border: 1px solid #262626;
    margin-bottom: 2rem;
}

.woocommerce-checkout #customer_details h3 {
    color: #fff !important;
    border-bottom: 1px solid #333;
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
}

/* Order Review (El cajón de lo que va a pagar) */
#order_review_heading {
    color: #fff !important;
    margin-top: 2rem;
}

.woocommerce-checkout #order_review {
    background: var(--nv-surface, #151515);
    border-radius: 20px;
    padding: 2rem;
    border: 1px solid #262626;
}

.woocommerce-checkout table.shop_table th,
.woocommerce-checkout table.shop_table td {
    border-color: #333 !important;
    color: #fff !important;
}

.woocommerce-checkout table.shop_table tfoot th,
.woocommerce-checkout table.shop_table tfoot td {
    border-top: 1px solid #333 !important;
}

.woocommerce-checkout table.shop_table .order-total td {
    color: var(--nv-primary, #6366f1) !important;
    font-size: 1.2rem;
    font-weight: 700;
}

/* Caja de Pago (Mercado Pago, Trasferencias) */
.woocommerce-checkout #payment {
    background: #1a1a1a !important;
    border-radius: 12px;
    border: 1px solid #333 !important;
    padding: 1.5rem !important;
    margin-top: 1.5rem;
}

.woocommerce-checkout #payment ul.payment_methods {
    border-bottom: 1px solid #333 !important;
}

.woocommerce-checkout #payment div.payment_box {
    background-color: #111 !important;
    color: #a3a3a3 !important;
    border-radius: 8px;
}

.woocommerce-checkout #payment div.payment_box::before {
    border-bottom-color: #111 !important;
}

.woocommerce-checkout #payment .place-order {
    padding: 1.5rem 0 0 0 !important;
}

/* -------------------------------------------------------------
  * 5. Página de Producto Individual (Fallback por si acaso)
  * ------------------------------------------------------------- */
.woocommerce div.product {
    background: var(--nv-surface, #151515);
    border-radius: 24px;
    padding: 2rem;
    border: 1px solid #262626;
}

.woocommerce div.product .product_title {
    color: #fff !important;
}

.woocommerce div.product p.price {
    color: var(--nv-primary, #6366f1) !important;
    font-weight: 700;
}

/* ==========================================================
   4. SINGLE PRODUCT POLISH (FASE 29)
   ========================================================== */

/* a. Swatches/Pills para Variaciones (generados por nuvvia-variations.js) */
.nv-swatch-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 1rem;
}

.nv-swatch {
    background: #111 !important;
    border: 2px solid #333 !important;
    color: #fff !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    font-size: 0.9rem !important;
    font-family: inherit !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    outline: none !important;
}

.nv-swatch:hover {
    border-color: #555 !important;
    background: #1a1a1a !important;
}

.nv-swatch.active {
    border-color: var(--iris, #5856D6) !important;
    background: rgba(88, 86, 214, 0.1) !important;
    box-shadow: 0 0 10px rgba(88, 86, 214, 0.3) !important;
}

/* Ocultar botón nativo de "Limpiar selección" para mantenerlo limpio */
.reset_variations {
    display: none !important;
}

/* b. Icono de Lupa (Zoom de imagen) */
.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
    background: rgba(19, 19, 31, 0.8) !important;
    color: var(--iris, #5856D6) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-indent: -9999px !important;
    /* Oculta el texto nativo */
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    z-index: 100 !important;
    transition: all 0.3s ease !important;
}

.woocommerce div.product div.images .woocommerce-product-gallery__trigger::before {
    /* Re-dibujar el icono de lupa si es necesario usando content de font o un svg base */
    content: "🔍" !important;
    font-size: 16px !important;
    color: #fff !important;
    text-indent: 0 !important;
    position: absolute !important;
    display: block !important;
}

.woocommerce div.product div.images .woocommerce-product-gallery__trigger:hover {
    background: rgba(88, 86, 214, 0.9) !important;
    border-color: var(--iris) !important;
}

/* c. Pestañas de Información / Valoraciones */
.woocommerce div.product .woocommerce-tabs ul.tabs::before {
    border-bottom: 1px solid #333 !important;
    /* Línea separadora global */
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    padding: 10px 0 !important;
    margin-right: 20px !important;
    border-radius: 0 !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    background: transparent !important;
    border-bottom: 2px solid var(--iris, #5856D6) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active::after {
    display: none !important;
    /* Quitar alitas grises extrañas de Storefront */
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    color: #a3a3a3 !important;
    font-weight: 500 !important;
    padding: 0 !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: #fff !important;
}

.woocommerce div.product .woocommerce-Tabs-panel {
    background-color: var(--bg-2, #13131F) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    color: #fff !important;
    border-radius: 12px;
    padding: 2rem !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}

/* Tablas dentro de "Información adicional" */
.woocommerce table.shop_attributes {
    border: none !important;
}

.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td {
    border-bottom: 1px solid #262626 !important;
    background: transparent !important;
    color: #fff !important;
}

.woocommerce table.shop_attributes th {
    color: #a3a3a3 !important;
}

/* d. Barra de Notificación Top (Añadido al carrito) */
.woocommerce-message {
    background: rgba(19, 19, 31, 0.9) !important;
    backdrop-filter: blur(12px) !important;
    border-top: none !important;
    border-left: 4px solid var(--iris, #5856D6) !important;
    color: #fff !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
    padding: 1rem 2rem !important;
    margin-bottom: 2rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.woocommerce-message::before {
    color: var(--iris, #5856D6) !important;
    position: static !important;
    margin-right: 15px !important;
}

.woocommerce-message .button {
    background: linear-gradient(135deg, var(--iris, #5856D6) 0%, var(--iris-light, #7B79E8) 100%) !important;
    color: #fff !important;
    border-radius: 9999px !important;
    border: none !important;
    padding: 8px 20px !important;
    font-weight: 500 !important;
    float: none !important;
    /* Storefront lo hace flotar a la derecha */
}

/* e. Formulario de Valoraciones (Reviews) */
#reviews #commentform textarea,
#reviews #commentform input[type="text"],
#reviews #commentform input[type="email"] {
    background-color: var(--bg-2, #13131F) !important;
    border: 1px solid rgba(196, 188, 255, 0.2) !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

#reviews #commentform textarea::placeholder,
#reviews #commentform input[type="text"]::placeholder,
#reviews #commentform input[type="email"]::placeholder {
    color: rgba(196, 188, 255, 0.4) !important;
}

#reviews #commentform .form-submit .submit {
    background: linear-gradient(135deg, var(--iris, #5856D6) 0%, var(--iris-light, #7B79E8) 100%) !important;
    color: #ffffff !important;
    border-radius: 9999px !important;
    padding: 12px 30px !important;
    font-weight: 600 !important;
    border: none !important;
    box-shadow: 0 4px 20px rgba(88, 86, 214, 0.40) !important;
    cursor: pointer !important;
}

/* f. Storefront Sticky Add-To-Cart Bar */
.storefront-sticky-add-to-cart {
    background-color: rgba(19, 19, 31, 0.95) !important;
    backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    color: #fff !important;
}

.storefront-sticky-add-to-cart__content .storefront-sticky-add-to-cart__content-product-info .product-title {
    color: #fff !important;
}

.storefront-sticky-add-to-cart__content .storefront-sticky-add-to-cart__content-product-info .price {
    color: var(--nv-text, #ffffff) !important;
}

.storefront-sticky-add-to-cart__content .storefront-sticky-add-to-cart__content-button .button {
    background: linear-gradient(135deg, var(--iris, #5856D6) 0%, var(--iris-light, #7B79E8) 100%) !important;
    color: #fff !important;
    border-radius: 9999px !important;
    border: none !important;
    padding: 8px 20px !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 20px rgba(88, 86, 214, 0.40) !important;
}

/* ==========================================================
   6. OPTIMIZACIÓN MOBILE (FASE 33 NUCLEAR)
   ========================================================== */
@media (max-width: 768px) {

    /* Gutenberg Cart Grid Nuclear Override */
    #page .wp-block-woocommerce-product-new.has-4-columns .wc-block-grid__products .wc-block-grid__product,
    #page .wp-block-woocommerce-product-new.has-3-columns .wc-block-grid__products .wc-block-grid__product,
    body .wc-block-grid.has-4-columns .wc-block-grid__product,
    body .wc-block-grid.has-3-columns .wc-block-grid__product,
    ul.wc-block-grid__products.has-4-columns li.wc-block-grid__product,
    ul.wc-block-grid__products li.wc-block-grid__product {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        margin-bottom: 2rem !important;
    }

    /* Opcional: Si se prefieren 2 columnas en mobile como en Tienda */
    /*
    .wc-block-grid__products .wc-block-grid__product {
        flex: 0 1 48% !important;
        max-width: 48% !important;
    }
    */

    /* Botón Hamburguesa del Header de Storefront - MÁXIMA ESPECIFICIDAD */
    body .site-header .menu-toggle,
    body button.menu-toggle,
    #page .site-header button.menu-toggle {
        background-color: var(--bg-2, #13131F) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        color: #fff !important;
        border-radius: 8px !important;
    }

    /* Evitar que el icono (el before/after) sea oscuro */
    body .site-header .menu-toggle::before {
        color: #fff !important;
    }

    /* Corrección del ancho del botón en tarjetas mobile */
    #page .wc-block-grid__products .wc-block-grid__product .wp-block-button__link {
        width: 100% !important;
        white-space: normal !important;
        /* Evitar que el texto se rompa verticalmente */
    }

    /* Floating Mobile Cart / Added to Cart Popup (Storefront Handheld Footer) */
    body .storefront-handheld-footer-bar ul {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    body .storefront-handheld-footer-bar,
    body .storefront-handheld-footer-bar ul li,
    body .storefront-handheld-footer-bar ul li>a {
        background: transparent !important;
        background-color: transparent !important;
    }
    
    body .storefront-handheld-footer-bar ul li {
        flex: 1 !important;
        max-width: 33.33% !important;
        float: none !important;
    }

    body .storefront-handheld-footer-bar {
        background: rgba(8, 8, 18, 0.85) !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
        box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.2) !important;
    }

    body .storefront-handheld-footer-bar ul li>a {
        color: #fff !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        height: 52px !important; /* Altura más baja y menos invasiva */
        line-height: 1 !important;
        font-size: 0.75rem !important;
        position: relative !important;
    }

    body .storefront-handheld-footer-bar ul li.cart .count {
        background-color: var(--iris, #5856D6) !important;
        color: #fff !important;
        border: none !important;
    }

    /* ----------------------------------------------------
       FASE 34: Premium Mobile Footer Icons & Search Block
       ---------------------------------------------------- */
    /* Anular glyphs nativos de Storefront y preparar máscaras SVG */
    body .storefront-handheld-footer-bar ul li>a::before {
        content: '' !important;
        display: block !important;
        width: 24px !important;
        height: 24px !important;
        margin: 0 auto !important; /* Eliminado el margen inferior de 6px que los deformaba hacia arriba */
        background-color: rgba(255, 255, 255, 0.7) !important;
        /* Color base del icono inactivo */
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        transition: background-color 0.3s ease !important;
    }

    /* Iluminar icono si el ítem está activo o hover */
    body .storefront-handheld-footer-bar ul li.active>a::before,
    body .storefront-handheld-footer-bar ul li:focus>a::before,
    body .storefront-handheld-footer-bar ul li:active>a::before {
        background-color: var(--iris, #5856D6) !important;
    }

    /* 1. Icono My Account (Usuario) */
    body .storefront-handheld-footer-bar ul li.my-account>a::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
    }

    /* 2. Icono Search (Lupa) */
    body .storefront-handheld-footer-bar ul li.search>a::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    }

    /* 3. Icono Cart (Bolso) */
    body .storefront-handheld-footer-bar ul li.cart>a::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");
    }

    /* Ocultar el recuadro blanco destructivo de la búsqueda desplegable */
    body .storefront-handheld-footer-bar .site-search {
        background-color: var(--bg-1, #08080E) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        padding: 1rem 1.5rem !important;
        
        /* Posicionarlo SOBRE la barra de iconos y animar */
        position: absolute !important;
        bottom: 100% !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 1000 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateY(10px) !important;
        transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important;
        display: block !important;
    }

    /* Mostrar cuando la lupa tiene la clase active */
    body .storefront-handheld-footer-bar ul li.search.active .site-search,
    body .storefront-handheld-footer-bar .search.active .site-search {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
    }

    /* Restilizar el campo input dentro del nav móvil */
    body .storefront-handheld-footer-bar .site-search input[type="search"] {
        background-color: var(--bg-1, #08080E) !important;
        border: 1px solid rgba(196, 188, 255, 0.2) !important;
        color: #fff !important;
        border-radius: 9999px !important;
        padding: 12px 20px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Si aparece el modal/popup de "Añadido al carrito" en mobile */
    .woocommerce-message,
    .woocommerce-error,
    .woocommerce-info {
        margin: 1rem !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
        gap: 15px !important;
    }

    .woocommerce-message .button {
        width: 100% !important;
        text-align: center !important;
    }
}

/* ==========================================================
   5. DETALLES FINALES: HEADER SEARCH, MINI-CART Y CROSS-SELLS
   ========================================================== */

/* Buscador del Header (Storefront default) */
.site-search .widget_product_search form {
    position: relative;
}

.site-search .widget_product_search input[type="search"],
.site-search .widget_product_search input.search-field {
    background-color: var(--bg-2, #13131F) !important;
    border: 1px solid rgba(196, 188, 255, 0.3) !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    padding: 12px 16px 12px 40px !important;
    /* Espacio para el icono si lo hubiera */
}

.site-search .widget_product_search input::placeholder {
    color: rgba(196, 188, 255, 0.6) !important;
}

.site-search .widget_product_search button {
    background: transparent !important;
    color: #ffffff !important;
}

/* Mini-Cart Dropdown (Carrito del Header) */
ul.site-header-cart .widget_shopping_cart,
.site-header .widget_shopping_cart {
    background-color: var(--bg-1, #0E0E1A) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
    color: #ffffff !important;
}

.site-header-cart .widget_shopping_cart p.total,
.site-header-cart .widget_shopping_cart p.buttons {
    background-color: var(--bg-2, #13131F) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.site-header-cart .widget_shopping_cart a.button {
    background: var(--bg-3, #181828) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.site-header-cart .widget_shopping_cart a.button.checkout {
    background: linear-gradient(135deg, var(--nv-primary) 0%, var(--nv-secondary) 100%) !important;
    border: none !important;
}

ul.site-header-cart .widget_shopping_cart ul.cart_list li {
    padding-left: 0 !important;
}

ul.site-header-cart .widget_shopping_cart ul.cart_list li a {
    color: #ffffff !important;
}

ul.site-header-cart .widget_shopping_cart ul.cart_list li img {
    border-radius: 8px !important;
}

/* Grilla de productos en el Carrito Vacío (Cross-sells / Nuevo en la tienda) */
.woocommerce .cart-empty {
    background: transparent !important;
    color: #ffffff !important;
    border: none !important;
}

/* Fallback: Grilla de WooCommerce Blocks (Gutenberg) para el carrito vacío */
ul.wc-block-grid__products {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 3.8% !important;
    /* Igual margen de Storefront clásico */
    justify-content: flex-start !important;
    margin: 0 !important;
    padding: 0 !important;
}

.wc-block-grid__products .wc-block-grid__product {
    background-color: var(--bg-2, #13131F) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 20px !important;
    padding: 1rem !important;
    text-align: center !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    margin: 0 !important;
    /* Margin es ahora gestionado por el gap flexbox */
    /* Exacta misma medida de Tienda (Storefront columns-3 width) */
    flex: 0 1 30.79616% !important;
    max-width: 30.79616% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
}

.wc-block-grid__products .wc-block-grid__product:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

.wc-block-grid__products .wc-block-grid__product-title {
    color: #ffffff !important;
    font-size: 1.1rem !important;
    margin: 0 0 0.5rem 0 !important;
    padding: 0 !important;
}

.wc-block-grid__products .wc-block-grid__product-price {
    color: var(--nv-text, #ffffff) !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Forzar reset de márgenes de las imágenes que añade Gutenberg para igualar Tienda */
.wc-block-grid__products .wc-block-grid__product-image {
    margin: 0 0 1rem 0 !important;
    padding: 0 !important;
}

.wc-block-grid__products .wc-block-grid__product-image img {
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 12px !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* Botones de Add to cart de los Bloques de Gutenberg (con alta especificidad para ganarle a Storefront) */
body .wc-block-grid__products .wc-block-grid__product .wp-block-button__link,
.wc-block-grid__products .wc-block-grid__product .wp-block-button__link,
.wc-block-grid__products .wp-block-button__link {
    background: linear-gradient(135deg, var(--iris, #5856D6) 0%, var(--iris-light, #7B79E8) 100%) !important;
    background-color: transparent !important;
    /* Override Storefront's #43454b */
    color: var(--txt-white, #ffffff) !important;
    border: none !important;
    border-radius: 9999px !important;
    padding: 12px 24px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 1rem 0 0 0 !important;
    display: inline-flex !important;
    text-decoration: none !important;
    text-align: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    box-shadow: 0 4px 20px rgba(88, 86, 214, 0.40) !important;
    align-self: center !important;
}

body .wc-block-grid__products .wc-block-grid__product .wp-block-button__link:hover,
.wc-block-grid__products .wc-block-grid__product .wp-block-button__link:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 40px rgba(88, 86, 214, 0.55) !important;
}

.woocommerce .cart-empty::before {
    color: var(--nv-primary) !important;
    /* Icono carita triste en lila en vez de negro */
    font-size: 3rem !important;
}

.woocommerce .return-to-shop a.button {
    background: linear-gradient(135deg, var(--nv-primary) 0%, var(--nv-secondary) 100%) !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    padding: 12px 24px !important;
}

/* (Estos estilos ya fueron sobrescritos arriba en FASE 29) */

/* Tarjetas de productos sugeridos (Cross-sells en el carrito) */
ul.products li.product,
.woocommerce-page ul.products li.product {
    background-color: var(--bg-2, #13131F) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 20px !important;
    padding: 1rem !important;
    text-align: center !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

ul.products li.product img,
.woocommerce-page ul.products li.product img {
    border-radius: 12px !important;
    margin-bottom: 1rem !important;
}

ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
    color: #ffffff !important;
    font-size: 1.1rem !important;
    margin-bottom: 0.5rem !important;
}

ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
    color: var(--nv-text, #ffffff) !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
}

/* Modificar el botón "Añadir al carrito" de esas tarjetas para que parezca Nuvvia */
ul.products li.product .button,
.woocommerce-page ul.products li.product .button {
    background: linear-gradient(135deg, var(--nv-primary) 0%, var(--nv-secondary) 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 30px !important;
    padding: 10px 20px !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    width: 100% !important;
    margin-top: 1rem !important;
    display: inline-block !important;
}