/* ==========================================================================
   REDISEÑO PREMIUM PARA LA PÁGINA DE CARRITO (WOOCOMMERCE)
   ========================================================================== */

/* 1. Estructura en cuadrícula de dos columnas (Copia el layout del Checkout) */
@media (min-width: 992px) {
    .woocommerce-cart .woocommerce {
        /* display: grid !important; */
        grid-template-columns: 1.25fr 0.75fr !important;
        gap: 4rem !important;
        align-items: flex-start !important;
    }
    
    .woocommerce-cart .woocommerce-cart-form {
        margin: 0 !important;
    }
}

@media screen and (min-width: 1025px) {
    .kadence-woo-cart-form-wrap>form {
        float: left;
        width: 100% !important;
        padding-right: 0 !important;
    }
}

.cart-summary{
    display: none !important;
}

.kadence-woo-cart-form-wrap{
    display: flex;
    flex-direction: column;
}

/* 2. Rediseño de la tabla de productos (Formato Tarjeta Limpia) */
.woocommerce-cart .shop_table.cart {
    width: 100%;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-md) !important;
    background-color: var(--white) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    overflow: hidden !important;
    box-shadow: 0 4px 20px rgba(35, 42, 38, 0.02) !important;
}

/* Cabeceras de la tabla */
.woocommerce-cart .shop_table.cart th {
    background-color: var(--bg-alt) !important;
    color: var(--primary-color) !important;
    font-family: var(--font-sans) !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 1.25rem 1rem !important;
    border: none !important;
}

/* Filas de productos */
.woocommerce-cart .shop_table.cart td {
    padding: 1.5rem 1rem !important;
    /* border-bottom: 1px solid var(--glass-border) !important; */
    vertical-align: middle !important;
    color: var(--text-dark) !important;
    font-size: 0.95rem !important;
    text-align: center;
}

.woocommerce table.shop_table td{
    border-top: 1px solid var(--glass-border) !important;
}



.woocommerce-cart .shop_table.cart tr:last-of-type td {
    border-bottom: none !important;
}


/* Imagen del producto */
.woocommerce-cart .product-thumbnail img {
    width: 70px !important;
    height: auto !important;
    border-radius: var(--radius-sm) !important;
    border: 1px solid var(--glass-border) !important;
}

/* Nombre del producto */
.woocommerce-cart .product-name a {
    color: var(--primary-color) !important;
    font-family: var(--font-serif) !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: var(--transition-fast) !important;
}

.woocommerce-cart .product-name a:hover {
    color: var(--accent-color) !important;
}

/* Botón de eliminar (X) */
.woocommerce-cart .product-remove a.remove {
    color: var(--text-muted) !important;
    font-size: 1.25rem !important;
    transition: var(--transition-fast) !important;
}

.woocommerce-cart .product-remove a.remove:hover {
    color: #cc3333 !important;
    background-color: transparent !important;
}

/* Selector de Cantidad */
.woocommerce-cart .product-quantity .quantity input {
    width: 60px !important;
    height: 40px !important;
    padding: 0 !important;
    text-align: center !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-sm) !important;
    background-color: var(--bg-main) !important;
    color: var(--text-dark) !important;
    font-weight: 600 !important;
}

.woocommerce-cart .shop_table.cart td.actions {
    padding: 1.5rem !important;
    background-color: var(--white) !important;
}

.woocommerce-cart .actions .coupon {
    display: flex !important;
    gap: 0.75rem !important;
    align-items: center !important;
}

/* Ocultar el botón nativo de actualizar ya que el proceso es automático */
.woocommerce-cart td.actions button[name="update_cart"] {
    display: none !important;
}

/* Ajuste por si el botón de "Aplicar cupón" se quedara desalineado al quitar el otro */
.woocommerce-cart td.actions .coupon {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
}



/* Input del cupón */
.woocommerce-cart .actions .coupon input#coupon_code {
    height: 46px !important;
    width: 180px !important;
    padding: 0 1rem !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-full) !important;
    background-color: var(--white) !important;
    font-size: 0.9rem !important;
}

/* Botón Aplicar Cupón */
.woocommerce-cart .actions .coupon button[name="apply_coupon"] {
    height: 46px !important;
    background-color: transparent !important;
    border: 1px solid var(--primary-color) !important;
    color: var(--primary-color) !important;
    border-radius: var(--radius-full) !important;
    padding: 0 1.5rem !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    cursor: pointer !important;
    transition: var(--transition-fast) !important;
}

.woocommerce-cart .actions .coupon button[name="apply_coupon"]:hover {
    background-color: var(--primary-color) !important;
    color: var(--white) !important;
}

/* Botón Actualizar Carrito */
.woocommerce-cart .actions button[name="update_cart"] {
    height: 46px !important;
    background-color: var(--text-muted) !important;
    color: var(--white) !important;
    border: none !important;
    border-radius: var(--radius-full) !important;
    padding: 0 1.5rem !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    cursor: pointer !important;
    transition: var(--transition-fast) !important;
    opacity: 0.7;
}

.woocommerce-cart .actions button[name="update_cart"]:hover:not(:disabled) {
    background-color: var(--primary-color) !important;
    opacity: 1;
}

.woocommerce-cart .cart-collaterals {
    width: 100% !important;
    margin-top: 1rem !important;
}

.woocommerce-cart .cart_totals {
    width: 100% !important;
    float: none !important;
    background-color: var(--white) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-md) !important;
    padding: 2rem !important;
    box-shadow: 0 4px 20px rgba(35, 42, 38, 0.02) !important;
    box-sizing: border-box !important;
}

/* Título de los totales */
.woocommerce-cart .cart_totals h2 {
    font-family: var(--font-serif) !important;
    color: var(--primary-color) !important;
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    margin-bottom: 1.5rem !important;
    border-bottom: 1px solid var(--glass-border) !important;
    padding-bottom: 0.75rem !important;
}

/* Tabla interna de totales */
.woocommerce-cart .cart_totals table.shop_table {
    border: none !important;
    width: 100% !important;
    margin-bottom: 1.5rem !important;
}

.woocommerce-cart .cart_totals table.shop_table tr td, 
.woocommerce-cart .cart_totals table.shop_table tr th {
    padding: 1rem 0 !important;
    border-top: none !important;
    border-bottom: 1px solid var(--glass-border) !important;
    background: transparent !important;
    text-align: left !important;
}

.woocommerce-cart .cart_totals table.shop_table tr.order-total td,
.woocommerce-cart .cart_totals table.shop_table tr.order-total th {
    border-bottom: none !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: var(--primary-color) !important;
}

/* Botón "Finalizar Compra" (Estilo Botón Principal de la Web) */
.woocommerce-cart .cart_totals .wc-proceed-to-checkout a.checkout-button {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    background-color: var(--primary-color) !important;
    color: var(--white) !important;
    font-family: var(--font-sans) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    padding: 1.1rem 2rem !important;
    border-radius: var(--radius-full) !important;
    text-decoration: none !important;
    transition: var(--transition-fast) !important;
    box-shadow: 0 4px 12px rgba(26, 56, 43, 0.15) !important;
}

.woocommerce-cart .cart_totals .wc-proceed-to-checkout a.checkout-button:hover {
    background-color: var(--accent-color) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(201, 147, 59, 0.25) !important;
}

/* Adaptabilidad móvil para la tabla */
@media (max-width: 768px) {
    .woocommerce-cart .shop_table.cart th {
        display: none !important;
    }
    
    .woocommerce-cart .shop_table.cart tr td {
        display: block !important;
        text-align: right !important;
        /* padding-left: 50% !important; */
        position: relative !important;
        padding: 1rem !important;
    }
    
    .woocommerce-cart .shop_table.cart td::before {
        content: attr(data-title) !important;
        position: absolute !important;
        left: 1rem !important;
        font-weight: 600 !important;
        color: var(--primary-color) !important;
    }
    
    .woocommerce-cart .shop_table.cart td.product-remove {
        text-align: center !important;
        padding-left: 1rem !important;
        padding-top: 0 !important;
        border-top: none !important;
    }
    
    .woocommerce-cart .shop_table.cart td.product-remove::before {
        display: none !important;
    }
    
    .woocommerce-cart .actions .coupon {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    
    .woocommerce-cart .actions .coupon input#coupon_code {
        width: 100% !important;
    }

    span.woocommerce-Price-amount.amount{
        padding-left: 10px !important;
    }
}

/* Forzar el diseño móvil y la separación en tablets/móviles (hasta 768px) */
@media screen and (max-width: 768px) {
    
    /* 1. Forzamos a que las filas se comporten como bloques desde los 768px */
    .woocommerce table.shop_table_responsive tr, 
    .woocommerce-page table.shop_table_responsive tr {
        display: block !important;
    }

    /* 2. Aplicamos la separación y el diseño de "tarjeta" que querías */
    .woocommerce table.shop_table_responsive tbody tr.cart_item {
        margin-bottom: 0px !important;
        border-bottom: 1px solid #e5e7eb !important;
        padding: 15px !important;
        /* border-radius: 8px; */
        background-color: #fff;
    }

    

    table.shop_table.shop_table_responsive.cart.woocommerce-cart-form__contents {
        background: var(--bg-main) !important;
        /* border: none !important; */
        box-shadow: none !important;
    }

    table.shop_table.shop_table_responsive.cart.woocommerce-cart-form__contents thead{
        display: none !important;
    }

    .woocommerce table.cart td.actions .coupon, .woocommerce #content table.cart td.actions .coupon, .woocommerce-page table.cart td.actions .coupon, .woocommerce-page #content table.cart td.actions .coupon {
        float: none;
        padding-bottom: .5em;
    }

    .woocommerce table.cart td.actions .coupon input, .woocommerce table.cart td.actions .coupon .button, .woocommerce table.cart td.actions .coupon .input-text, .woocommerce #content table.cart td.actions .coupon input, .woocommerce #content table.cart td.actions .coupon .button, .woocommerce #content table.cart td.actions .coupon .input-text, .woocommerce-page table.cart td.actions .coupon input, .woocommerce-page table.cart td.actions .coupon .button, .woocommerce-page table.cart td.actions .coupon .input-text, .woocommerce-page #content table.cart td.actions .coupon input, .woocommerce-page #content table.cart td.actions .coupon .button, .woocommerce-page #content table.cart td.actions .coupon .input-text{
        width: 100% !important;
    }

    .woocommerce table.shop_table_responsive tr:nth-child(2n) td, .woocommerce-page table.shop_table_responsive tr:nth-child(2n) td{
        background-color: inherit !important;
    }

    .woocommerce table.cart .product-remove .remove, .woocommerce #content table.cart .product-remove .remove, .woocommerce-page table.cart .product-remove .remove, .woocommerce-page #content table.cart .product-remove .remove{
        transform: none !important;
    }

    .woocommerce-cart .shop_table.cart th.product-thumbnail, .woocommerce-cart .shop_table.cart td.product-thumbnail{
        width: 100vw !important;
        text-align: left !important;
    }
}



.product-content{
    height: 100% !important;
}

/* 1. Convertimos el interior de la columna de Kadence en una caja flexible */
.tarjeta-plan .kt-inside-inner-col {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

/* 2. El truco maestro: Empujamos el penúltimo elemento (El Precio) hacia abajo */
/* Al empujar el precio, el botón que está debajo bajará con él automáticamente */
.tarjeta-plan .kt-inside-inner-col > *:nth-last-child(2) {
    margin-top: auto !important;
    padding-top: 2rem !important; /* Añadimos un poco de aire para separarlo del texto de arriba */
}























/* ==========================================================================
   CORRECCIÓN DE IMÁGENES OCULTAS Y LAYOUT EN EL CARRITO
   ========================================================================== */

/* 1. Forzar a mostrar la columna de la imagen (Arreglo para image_21bc42.png) */
.woocommerce-cart .shop_table.cart th.product-thumbnail,
.woocommerce-cart .shop_table.cart td.product-thumbnail {
    display: table-cell !important;
    width: 100px !important;
    text-align: center !important;
}

/* Estilo y tamaño de la miniatura del producto */
.woocommerce-cart .product-thumbnail img {
    display: block !important;
    width: 65px !important;
    height: 65px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    border: 1px solid var(--glass-border, #e5e7eb) !important;
    margin: 0 auto !important;
}

/* 2. Asegurar el diseño en dos columnas en pantallas de escritorio */
@media (min-width: 992px) {
    /* Buscamos el contenedor nativo de WooCommerce sin importar los bloques del editor */
    .woocommerce {
        /* display: grid !important; */
        grid-template-columns: 1.25fr 0.75fr !important;
        gap: 3rem !important;
        /* align-items: flex-start !important; */
        width: 100% !important;
        /* max-width: 1200px !important; */
        margin: 0 auto !important;
    }

    .woocommerce-cart-form {
        grid-column: 1 !important;
    }

    .cart-collaterals {
        grid-column: 2 !important;
        margin-top: 0 !important;
    }
}

/* Ajustes de espaciado para los textos de los productos */
.woocommerce-cart .product-name {
    padding-left: 0.5rem !important;
}


@media screen and (max-width: 768px) {
    .woocommerce-cart .shop_table.cart th.product-thumbnail, .woocommerce-cart .shop_table.cart td.product-thumbnail{
        width: 100vw !important;
        text-align: left !important;
    }
    .woocommerce-cart .product-thumbnail img{
        width: 90px !important;
        height: 90px !important;
        text-align: left !important;
    }
}

.return-to-shop a, .wc-forward{
    background: var(--primary-color) !important;
    padding: .75rem 2rem;
    border-radius: 50px;
    color: var(--white);
}
.return-to-shop a:hover, .wc-forward:hover{
    color: var(--white) !important;
}

.wc-forward{
    display: none !important;
}



/* ==========================================================================
   ESTILOS DE PASARELA DE PAGO (CHECKOUT) - ADAPTACIÓN PREMIUM DEFINITIVA
   ========================================================================== */

/* Contenedor Grid Principal */
.yl-checkout-grid-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    width: 100%;
    max-width: 1200px; /* Alíneado con tu contenedor global */
    margin: 0 auto;
    align-items: flex-start;
}

/* Títulos de las Secciones del Formulario */
.yl-checkout-section-title {
    font-size: 1.35rem;
    color: var(--primary-color);
    border-bottom: 1px solid var(--glass-border);
    padding-bottom: 0.75rem;
    margin-bottom: 2rem;
    font-weight: 700;
    margin-top: 1rem;
}

/* Tarjeta Resumen de Compra */
.yl-checkout-summary-card {
    background-color: var(--white);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 3rem 2.5rem;
    box-shadow: var(--shadow-md);
}

.yl-checkout-summary-card h3 {
    font-size: 1.5rem;
    margin-bottom: 1.75rem;
    border-bottom: 1px solid var(--glass-border);
    padding-bottom: 1rem;
    font-family: var(--font-serif);
    color: var(--primary-color);
}

/* Badge de Conexión Segura */
.yl-checkout-secure-badge {
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-muted);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

.yl-checkout-secure-badge i {
    color: var(--success);
}



/* ==========================================================================
   RESET Y COMPATIBILIDAD CON COMPONENTES NATIVOS DE WOOCOMMERCE
   ========================================================================== */

/* Forzar que las columnas internas flotantes por defecto de Woo ocupen el 100% */
.woocommerce-checkout .col2-set { 
    width: 100% !important; 
    float: none !important; 
}
.woocommerce-checkout .col2-set .col-1, 
.woocommerce-checkout .col2-set .col-2 { 
    width: 100% !important; 
    float: none !important; 
    margin-bottom: 0 !important;
    padding: 0 !important;
}

/* Contenedor nativo de métodos de pago */
.woocommerce-checkout #payment {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

.woocommerce-checkout #payment ul.payment_methods {
    border-bottom: 1px solid var(--glass-border) !important;
    padding: 0 0 1rem 0 !important;
    list-style: none !important;
}

.yl-checkout-right-side .wc_payment_methods{
    display: none !important;
}

/* Caja de descripción desplegable de cada método (ej. transferencia, tarjeta) */
.woocommerce-checkout #payment div.payment_box {
    /* background-color: var(--bg-alt) !important; */
    color: var(--text-muted) !important;
    border-radius: var(--radius-md) !important;
    font-size: 0.85rem !important;
    /* padding: 1rem !important; */
    margin: 0.5rem 0 1rem 0 !important;
    position: relative;
}

.woocommerce-checkout #payment div.payment_box::before {
    border-bottom-color: var(--bg-alt) !important;
}

/* Botón Final "Realizar el pedido" Estilo de Autoridad */
.woocommerce #payment #place_order {
    width: 100% !important;
    background-color: var(--primary-color) !important;
    color: var(--bg-main) !important;
    font-family: var(--font-sans) !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    padding: 1.1rem 2rem !important;
    border-radius: var(--radius-full) !important;
    cursor: pointer !important;
    transition: var(--transition-elastic) !important;
    box-shadow: var(--shadow-sm) !important;
    border: none !important;
    display: block;
    text-align: center;
}

.woocommerce #payment #place_order:hover {
    background-color: var(--primary-light) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 25px rgba(26, 56, 43, 0.2) !important;
}

/* ==========================================================================
   MEDIA QUERIES: RESPONSIVIDAD Y EFECTO FIXED (STICKY)
   ========================================================================== */

/* En Escritorios (Pantallas grandes) habilitamos las dos columnas en paralelo */
@media (min-width: 992px) {
    .yl-checkout-grid-wrapper {
        grid-template-columns: 1.2fr 0.8fr;
        gap: 5rem;
    }

    /* Columna Derecha se queda fija de forma elegante mientras se hace scroll */
    .yl-checkout-right-side {
        position: sticky;
        top: 130px; /* Ajusta este valor según la altura de tu menú header fijo */
    }
}

/* ==========================================================================
   CORRECCIÓN COMPLETA: ANCHOS Y RELLENOS DEL RESUMEN DE COMPRA
   ========================================================================== */

/* 1. Forzar a que la tabla ocupe el 100% de la tarjeta sin contraerse */
table.woocommerce-checkout-review-order-table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important; /* Evita que las celdas se colapsen entre sí */
    border-collapse: collapse !important;
    display: table !important;
    margin-bottom: 1.5rem !important;
    float: none !important;
    clear: both !important;
}

/* 2. Corregir el comportamiento de las filas y columnas de la tabla */
table.woocommerce-checkout-review-order-table tr {
    display: table-row !important;
}

table.woocommerce-checkout-review-order-table th,
table.woocommerce-checkout-review-order-table td {
    display: table-cell !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
}

/* Distribución de espacio de las columnas: Nombre vs Precio */
table.woocommerce-checkout-review-order-table .product-name {
    width: 65% !important;
    text-align: left !important;
}

table.woocommerce-checkout-review-order-table .product-total,
table.woocommerce-checkout-review-order-table .cart-subtotal td,
table.woocommerce-checkout-review-order-table .order-total td {
    width: 35% !important;
    text-align: right !important;
}

/* 3. Evitar que el Badge SSL Seguro flote y forzarlo a ir abajo del todo */
.yl-checkout-secure-badge {
    display: flex !important;
    width: 100% !important;
    clear: both !important;
    margin-top: 2rem !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

/* 4. Corregir las cajas de Alertas e Información (Caja Azul de No hay Métodos) */
.woocommerce-notice,
.woocommerce-info,
.woocommerce-error,
.woocommerce-message,
#payment div.payment_box {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
    float: none !important;
    clear: both !important;
}

/* Asegurar que el texto dentro de la alerta respire bien y no se comprima */
.woocommerce-info, .woocommerce-notice {
    padding: 1.25rem !important;
    line-height: 1.5 !important;
    font-size: 0.9rem !important;
    margin-top: 1rem !important;
}

form.checkout .woocommerce-checkout-review-order{
    width: 100% !important;
    padding-left: 0 !important;
}

.woocommerce-notices-wrapper {
    margin-bottom: 1rem;
    border-radius: var(--radius-md) !important;
    overflow: hidden;
}

.woocommerce .woocommerce-message, .woocommerce .woocommerce-error, .woocommerce .woocommerce-info{
    border-left: 5px solid var(--primary-color) !important;
    background-color: var(--primary-background) !important;
    padding: 1.5rem;
    margin-bottom: 2rem;
    border-radius: var(--radius-md);
}

.woocommerce .woocommerce-message{
    margin-bottom: 0 !important;
}

.woocommerce form.login, .woocommerce form.checkout_coupon, .woocommerce form.register{
    border: 1px solid var(--primary-light) !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.woocommerce form.checkout_coupon{
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 1rem;
}

#woocommerce-checkout-form-coupon .form-row{
    margin: 0 !important;
}

.woocommerce form.checkout_coupon{
    border: none !important;
}

#woocommerce-checkout-form-coupon .form-row-last button{
    background: var(--primary-color);
    border-radius: 50px;
    border: none !important;
    padding: calc(.8em + 1px) 2em;
    color: var(--white);
    font-size: var(--font-sans);
    font-family: var(--font-sans);
    min-width: 220px;
    height: 100%;
}



/* ==========================================================================
   DISEÑO PREMIUM: REDISEÑO DE TABLA DE RESUMEN (IMAGEN 1)
   ========================================================================== */

/* 1. Limpieza absoluta de la estructura nativa de WooCommerce */
.yl-checkout-summary-card table.shop_table {
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    margin: 0 0 2rem 0 !important;
    width: 100% !important;
    border-collapse: collapse !important;
}

/* Ocultar los encabezados de "Producto / Subtotal" (No existen en Imagen 1) */
.yl-checkout-summary-card table.shop_table thead {
    display: none !important;
}

/* Forzar que las filas no tengan fondos alternos ni bordes nativos */
.yl-checkout-summary-card table.shop_table tr,
.yl-checkout-summary-card table.shop_table td,
.yl-checkout-summary-card table.shop_table th {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* 2. Estilo para las Filas de Productos (Equivalente a .summary-product-item) */
.yl-checkout-summary-card table.shop_table tbody tr.cart_item {
    border-bottom: 1px dashed var(--glass-border) !important; /* Línea discontinua elegante */
}

.yl-checkout-summary-card table.shop_table tbody tr.cart_item td {
    padding: 1rem 0 !important;
    font-size: 0.95rem !important;
}

/* Nombre del producto */
.yl-checkout-summary-card table.shop_table tbody tr.cart_item td.product-name {
    color: var(--text-dark) !important;
    font-weight: 600 !important;
    text-align: left !important;
}

/* Cantidad del producto (el famoso "× 1" de WooCommerce) */
.yl-checkout-summary-card table.shop_table tbody tr.cart_item td.product-name strong.product-quantity {
    color: var(--text-muted) !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    margin-left: 0.5rem !important;
}

/* Precio del producto a la derecha */
.yl-checkout-summary-card table.shop_table tbody tr.cart_item td.product-total {
    font-weight: 700 !important;
    color: var(--primary-color) !important;
    text-align: right !important;
}

/* 3. Estilo para las Filas Financieras Medias (Subtotal, Envío, Impuestos) */
.yl-checkout-summary-card table.shop_table tfoot tr.cart-subtotal th,
.yl-checkout-summary-card table.shop_table tfoot tr.cart-subtotal td,
.yl-checkout-summary-card table.shop_table tfoot tr.woocommerce-shipping-totals th,
.yl-checkout-summary-card table.shop_table tfoot tr.woocommerce-shipping-totals td,
.yl-checkout-summary-card table.shop_table tfoot tr.tax-rate th,
.yl-checkout-summary-card table.shop_table tfoot tr.tax-rate td {
    padding: 0.6rem 0 !important;
    font-size: 0.95rem !important;
    color: var(--text-muted) !important;
    font-weight: 500 !important;
}

.yl-checkout-summary-card table.shop_table tfoot tr th {
    text-align: left !important;
}

.yl-checkout-summary-card table.shop_table tfoot tr td {
    text-align: right !important;
    color: var(--text-dark) !important;
    font-weight: 600 !important;
}

/* 4. Estilo para la Fila del TOTAL (Equivalente a .summary-total-row) */
.yl-checkout-summary-card table.shop_table tfoot tr.order-total {
    border-top: 1px solid var(--glass-border) !important; /* Línea continua de cierre */
}

.yl-checkout-summary-card table.shop_table tfoot tr.order-total th,
.yl-checkout-summary-card table.shop_table tfoot tr.order-total td {
    padding-top: 1.75rem !important;
    padding-bottom: 0 !important;
    color: var(--primary-color) !important;
    font-weight: 700 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.yl-checkout-summary-card table.shop_table tfoot tr.order-total th {
    font-family: var(--font-serif) !important; /* Playfair Display */
    font-size: 1.35rem !important;
    text-align: left !important;
}

.yl-checkout-summary-card table.shop_table tfoot tr.order-total td strong {
    font-family: var(--font-serif) !important; /* Playfair Display */
    font-size: 1.45rem !important;
    color: var(--primary-color) !important;
    font-weight: 700 !important;
}

.yl-checkout-left-side #place_order{
    display: none !important;
}

/* ==========================================================================
   DISEÑO DEFINITIVO PREMIUM: INPUTS DINÁMICOS Y SELECTS FIJOS
   ========================================================================== */

/* Contenedor relativo general */
.woocommerce-checkout .woocommerce-input-wrapper {
    position: relative !important;
    display: block !important;
    width: 100% !important;
}

/* 1. CAJAS DE TEXTO E INPUTS (Comportamiento dinámico de la Home) */
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea {
    width: 100% !important;
    padding: 1.1rem 1.25rem !important;
    background-color: var(--white) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-md) !important;
    font-family: var(--font-sans) !important;
    font-size: 0.95rem !important;
    color: var(--text-dark) !important;
    outline: none !important;
    transition: var(--transition-fast) !important;
    height: 56px !important;
    box-sizing: border-box !important;
}

.woocommerce-checkout .form-row textarea {
    height: auto !important;
    min-height: 110px !important;
}

/* Estado inicial del Label en inputs normales (dentro del campo) */
.woocommerce-checkout .woocommerce-input-wrapper input.input-text + label,
.woocommerce-checkout .woocommerce-input-wrapper textarea + label {
    position: absolute !important;
    left: 1.25rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: var(--text-muted) !important;
    font-size: 0.95rem !important;
    pointer-events: none !important;
    transition: var(--transition-fast) !important;
    margin: 0 !important;
    z-index: 5 !important;
}

.woocommerce-checkout .woocommerce-input-wrapper textarea + label {
    top: 1.5rem !important;
    transform: none !important;
}

/* Animación flotante de los labels al hacer focus o escribir text */
.woocommerce-checkout .woocommerce-input-wrapper input.input-text:focus + label,
.woocommerce-checkout .woocommerce-input-wrapper input.input-text:not(:placeholder-shown) + label,
.woocommerce-checkout .woocommerce-input-wrapper textarea:focus + label,
.woocommerce-checkout .woocommerce-input-wrapper textarea:not(:placeholder-shown) + label {
    top: 0 !important;
    background-color: var(--white) !important;
    padding: 0 0.5rem !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    transform: translateY(-50%) scale(0.95) !important;
    border-radius: var(--radius-sm) !important;
    z-index: 10 !important;
    color: var(--text-muted) !important;
}

/* Cambio de color de la etiqueta activa en Inputs */
.woocommerce-checkout .woocommerce-input-wrapper input.input-text:focus + label,
.woocommerce-checkout .woocommerce-input-wrapper textarea:focus + label {
    color: var(--primary-color) !important;
}

.woocommerce form .form-row{
    margin: 0 0 1.5em !important;
}




/* ==========================================================================
   2. SOLUCIÓN COMPLETA PARA DESPLEGABLES (País, Provincia, Selects)
   ========================================================================== */

/* eliminar placeholder */
input#billing_address_1::placeholder{
    color: transparent;
}

/* Forzar que el contenedor Select2 mida y luzca exactamente igual que los inputs */
.woocommerce-checkout .select2-container--default .select2-selection--single {
    width: 100% !important;
    height: 56px !important;
    background-color: var(--white) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-md) !important;
    transition: var(--transition-fast) !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
}

/* Alineación y sangrado perfecto del texto interior seleccionado (Ej: "España") */
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 1.25rem !important; /* Alineado exacto con los inputs */
    line-height: 54px !important;
    color: var(--text-dark) !important;
    font-family: var(--font-sans) !important;
    font-size: 0.95rem !important;
}

/* Reajuste posicional de la flecha del desplegable */
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 54px !important;
    right: 1.25rem !important;
}

/* LA CLAVE: Forzar a los labels de los desplegables a estar SIEMPRE arriba flotando de forma limpia */
.woocommerce-checkout .form-row:has(select) label,
.woocommerce-checkout .form-row:has(.select2-container) label,
.woocommerce-checkout .woocommerce-input-wrapper .select2-container + label {
    position: absolute !important;
    left: 1.25rem !important;
    top: 0 !important;
    transform: translateY(-50%) scale(0.95) !important;
    background-color: var(--white) !important;
    padding: 0 0.5rem !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: var(--text-muted) !important;
    border-radius: var(--radius-sm) !important;
    z-index: 10 !important;
    transition: var(--transition-fast) !important;
    margin: 0 !important;
}

/* Estados de Focus: Iluminar borde y Label cuando el Select2 esté abierto o enfocado */
.woocommerce-checkout .select2-container--default.select2-container--focus .select2-selection--single,
.woocommerce-checkout .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--primary-color) !important;
    background-color: var(--white) !important;
}

/* Cambiar el color del label a verde corporativo solo cuando el menú desplegable esté abierto */
.woocommerce-checkout .form-row:has(.select2-container--open) label,
.woocommerce-checkout .woocommerce-input-wrapper .select2-container--open + label {
    color: var(--primary-color) !important;
}


#woo_ml_subscribe_field{
    display: none !important;
}

.woocommerce-additional-fields{
    padding-top: 1.5rem;
}








/* ==========================================================================
   PAGINA DE GRACIAS POR LA COMPRA
========================================================================== */

.woocommerce-order-received{
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100vh;
}

.woocommerce-order-received .contenedor-pagina-estandar {
    padding: 6rem 2rem 4rem !important;
}


.woocommerce-order-received .titulo-pagina{
    display: none;
}

.payment_box.payment_method_stripe fieldset {
    border: none !important;
}

.wc-stripe-upe-element{
    margin-bottom: 1rem;
}