.elementor-kit-5{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-color-6a79180:#9EAC67;--e-global-color-07937b8:#FFFDF0;--e-global-color-b340d76:#000000;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* --- 1. CENTRADO DE PRODUCTOS --- */
/* Esto obliga a que si sobran productos, se vayan al medio */
.elementor-widget-woocommerce-products ul.products,
.woocommerce ul.products {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
}

/* --- 2. DISEÑO DE TARJETA LIMPIO --- */
/* Quitamos bordes y fondos extraños para que se integre con tu color de fondo */
.woocommerce ul.products li.product {
    background-color: rgba(255, 255, 255, 0.9) !important; /* Blanco semitransparente */
    border-radius: 15px !important;
    padding: 20px !important;
    text-align: center !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important; /* Sombra suave */
    margin: 10px !important; /* Espacio entre tarjetas */
    border: none !important;
}

/* --- 3. UNIFICAR TODOS LOS BOTONES --- */
/* Esto fuerza a que todos los botones sean iguales sin importar la categoría */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button {
    background-color: #333333 !important; /* Fondo Negro/Gris Oscuro */
    color: #ffffff !important;            /* Texto Blanco */
    border: none !important;
    border-radius: 50px !important;       /* Forma redonda (pastilla) */
    padding: 10px 25px !important;
    font-weight: bold !important;
    font-size: 14px !important;
    margin-top: 10px !important;
    display: inline-block !important;
    opacity: 1 !important;                /* Asegura que se vean bien */
}

/* Efecto al pasar el mouse por el botón */
.woocommerce ul.products li.product .button:hover {
    background-color: #e63946 !important; /* Cambia a Rojo (o tu color de marca) */
    transform: translateY(-2px);          /* Se mueve un poquito hacia arriba */
}

/* --- 4. ARREGLAR TÍTULOS Y PRECIOS --- */
.woocommerce-loop-product__title {
    color: #2c3e50 !important;
    font-size: 16px !important;
    margin-bottom: 5px !important;
}

.price {
    color: #27ae60 !important; /* Precio en verde oscuro */
    font-weight: 800 !important;
    font-size: 18px !important;
}

/* --- DISEÑO CARRITO MÓVIL MODERNO --- */
@media (max-width: 768px) {
    
    /* 1. Convertir cada producto en una "Tarjeta" limpia */
    .woocommerce-cart-form__cart-item {
        display: block !important; /* Rompe la tabla */
        background-color: #ffffff;
        border: 1px solid #eee;
        border-radius: 12px;       /* Bordes redondos */
        padding: 20px !important;
        margin-bottom: 20px !important;
        box-shadow: 0 4px 10px rgba(0,0,0,0.05); /* Sombra suave */
        position: relative;
    }

    /* 2. Arreglar el Nombre del Producto (Adiós Rosa) */
    .product-name a {
        color: #2c3e50 !important; /* Color oscuro profesional */
        font-size: 18px !important;
        font-weight: bold !important;
        text-decoration: none !important;
    }

    /* 3. Arreglar el Precio */
    .product-price .amount, 
    .product-subtotal .amount {
        color: #25D366 !important; /* Tu verde bonito */
        font-size: 16px !important;
        font-weight: bold;
    }

    /* 4. Limpiar celdas y bordes feos */
    .shop_table.cart td {
        border: none !important;
        padding: 5px 0 !important;
        display: block !important; /* Uno debajo del otro */
        text-align: left !important;
    }

    /* 5. Esconder etiquetas repetitivas si molestan */
    .shop_table.cart thead {
        display: none !important;
    }

    /* 6. Botón de Eliminar más elegante */
    .product-remove a.remove {
        color: #e74c3c !important; /* Rojo para eliminar */
        font-size: 14px !important;
        font-weight: normal !important;
        text-decoration: underline !important;
    }
}
/* --- CÓDIGO CARRITO MÓVIL: VERSIÓN RESCATE DE IMAGEN --- */
@media only screen and (max-width: 768px) {

    /* 1. Convertir la fila en una TARJETA FLEXIBLE */
    body .woocommerce-cart-form__contents tr.cart_item {
        display: flex !important;
        flex-direction: column !important; /* Elementos uno encima del otro */
        align-items: center !important;    /* Centrar todo horizontalmente */
        background: #ffffff !important;
        border: 1px solid #dcdcdc !important;
        border-radius: 12px !important;
        margin-bottom: 25px !important;
        padding: 20px !important;
        box-shadow: 0 4px 8px rgba(0,0,0,0.05) !important;
        position: relative !important;
    }

    /* 2. --- RESCATE DE IMAGEN (Aquí está la magia) --- */
    /* Forzamos a la celda de la imagen a mostrarse y ocupar espacio */
    body .woocommerce-cart table.shop_table td.product-thumbnail {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        border: none !important;
        padding: 0 0 15px 0 !important; /* Espacio debajo de la foto */
    }

    /* Le damos tamaño a la foto */
    body .woocommerce-cart table.shop_table td.product-thumbnail img {
        width: 120px !important;       /* Ancho fijo visible */
        height: auto !important;
        border-radius: 8px !important;
        display: inline-block !important; /* Asegura que se pinte */
        object-fit: cover !important;
    }

    /* 3. ARREGLAR TEXTOS (Adiós letras rosas) */
    body .product-name a {
        color: #2c3e50 !important; /* Gris oscuro elegante */
        font-size: 18px !important;
        font-weight: 800 !important;
        text-decoration: none !important;
        text-align: center !important;
        display: block !important;
    }

    /* 4. PRECIO */
    body .product-price, 
    body .product-subtotal {
        display: block !important;
        border: none !important;
        text-align: center !important;
    }
    body .product-price .amount, 
    body .product-subtotal .amount {
        color: #25D366 !important; /* Verde */
        font-size: 20px !important;
        font-weight: bold !important;
    }

    /* 5. LIMPIAR CABECERAS Y BORDES */
    body .shop_table thead { display: none !important; }
    body .shop_table td { border: none !important; }

    /* 6. BOTÓN ELIMINAR (X) */
    body .product-remove {
        position: absolute !important;
        top: 10px !important;
        right: 10px !important;
        display: block !important;
        width: auto !important;
        border: none !important;
    }
    body .product-remove a {
        color: #e74c3c !important;
        font-size: 24px !important;
        background: transparent !important;
    }
}/* End custom CSS */