/*
Theme Name: Macchina Child
Author: VamTam
Author URI: https://vamtam.com
Template: macchina
*/



/*

put your child theme styles here

you don't need any @import rules

*/

.elementor-button-text {
    text-align: left;
}
.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {

    text-align: left;
}
.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {

    width: 22%;
}

ol, ul:not(.wp-block-gallery) {
    margin: 0;
}

.elementor-widget-post-comments.vamtam-has-theme-widget-styles .comments a.comment-reply-link, .elementor-widget-post-comments.vamtam-has-theme-widget-styles .woocommerce #reviews #comments a.comment-reply-link {
	padding: 6px 16px;
}

#scroll-to-top {
    font-size: 0 !important;
    color: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#scroll-to-top * {
    display: none !important;
}

#scroll-to-top::before {
    content: "↑" !important;
    font-size: 24px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    color: #000 !important;
}

/* CONTENEDOR IMAGEN FIJO */
.woocommerce ul.products li.product-category a img {
    width: 100%;
    height: 220px !important;
    object-fit: contain;
    object-position: center;
    display: block;
}

/* CAJA DE IMAGEN */
.woocommerce ul.products li.product-category a {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* BLOQUE SUPERIOR IMAGEN */
.woocommerce ul.products li.product-category .woocommerce-loop-category__title {
    margin-top: auto;
}

/* ÁREA IMAGEN SIEMPRE IGUAL */
.woocommerce ul.products li.product-category {
    display: flex;
    flex-direction: column;
}

.woocommerce ul.products li.product-category > a {
    height: 100%;
}

/* FORZAR ZONA IMAGEN */
.woocommerce ul.products li.product-category img {
    min-height: 220px;
    max-height: 220px;
}



/* 1. Contenedor de la Card */
.woocommerce ul.products li.product-category {
    background: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    min-height: auto !important;
}

/* 2. Área de la Imagen (Blanco) */
.woocommerce ul.products li.product-category a img {
    width: 100% !important;
    height: 220px !important;
    object-fit: contain !important;
    padding: 25px;
    background: #ffffff !important;
    margin: 0 auto;
    display: block;
    transition: transform 0.3s ease;
}

/* 3. Área del Título (Gris) */
.woocommerce ul.products li.product-category .woocommerce-loop-category__title {
    background: #f4f4f4 !important; /* Gris suave */
    color: #273485;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 !important;
    padding: 20px 10px !important;
    min-height: 75px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 4. Botón Personalizado (Centrado Perfecto) */
.woocommerce ul.products li.product-category a.button,
.woocommerce ul.products li.product-category .button {
    background-color: #273485 !important;
    color: #ffffff !important;
    padding: 15px !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    font-size: 0 !important; /* Oculta texto original */
    
    /* Centrado absoluto del contenido */
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    transition: background-color 0.3s ease;
}

.woocommerce ul.products li.product-category a.button::after,
.woocommerce ul.products li.product-category .button::after {
    content: "VER MÁS";
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    display: block; /* Asegura que el pseudo-elemento se comporte bien en flex */
}

/* 5. Efectos Hover */
.woocommerce ul.products li.product-category:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

/* Cambio a Rosa al pasar el ratón */
.woocommerce ul.products li.product-category:hover a.button,
.woocommerce ul.products li.product-category:hover .button {
    background-color: #e91e63 !important; /* Color Rosa */
}

.woocommerce ul.products li.product-category:hover img {
    transform: scale(1.05);
}

/* Quitar contador */
.woocommerce ul.products li.product-category .count {
    display: none !important;
}

/* --- AJUSTES RESPONSIVE (MÓVIL) --- */

@media (max-width: 768px) {
    /* 1. Forzar una sola columna */
    .woocommerce ul.products[class*="columns-"] li.product-category,
    .woocommerce-page ul.products[class*="columns-"] li.product-category {
        width: 100% !important;
        float: none !important;
        margin: 0 0 20px 0 !important; /* Espacio entre cards */
    }

    /* 2. Ajustar altura de imagen en móvil para que no sea gigante */
    .woocommerce ul.products li.product-category a img {
        height: 200px !important;
        padding: 15px !important;
    }

    /* 3. Corregir el título para que no se solape */
    .woocommerce ul.products li.product-category .woocommerce-loop-category__title {
        min-height: 60px !important;
        font-size: 13px !important;
        padding: 15px 10px !important;
    }

    /* 4. Asegurar que el botón "VER MÁS" se vea claro */
    .woocommerce ul.products li.product-category a.button, 
    .woocommerce ul.products li.product-category .button {
        padding: 12px !important;
    }
}