/* ==========================================================
   KUALI - TIENDA / SHOP WOOCOMMERCE
   ========================================================== */

/*
 * CONTENEDOR GENERAL
 */

body.woocommerce-shop .site-main,
body.post-type-archive-product .site-main,
body.woocommerce-shop .woocommerce,
body.post-type-archive-product .woocommerce {
    width: min(1400px, 92%);
    margin: 0 auto;
}


/*
 * TÍTULO DE LA TIENDA
 */

body.woocommerce-shop .woocommerce-products-header,
body.post-type-archive-product .woocommerce-products-header {
    margin-bottom: 35px;
}


body.woocommerce-shop .woocommerce-products-header__title,
body.post-type-archive-product .woocommerce-products-header__title {
    margin: 0;

    font-family: Georgia, serif;
    font-size: 42px;
    line-height: 1.1;
    font-weight: 400;

    color: #111;
}


/*
 * RESULTADOS + ORDENAR
 */

body.woocommerce-shop .woocommerce-result-count,
body.post-type-archive-product .woocommerce-result-count {
    margin: 0 0 28px;

    font-family: Arial, sans-serif;
    font-size: 15px;
    color: #111;
}


body.woocommerce-shop .woocommerce-ordering,
body.post-type-archive-product .woocommerce-ordering {
    margin: 0 0 28px;
}


body.woocommerce-shop .woocommerce-ordering select,
body.post-type-archive-product .woocommerce-ordering select {
    min-height: 42px;

    padding: 0 35px 0 14px;

    border: 1px solid #111;
    border-radius: 24px;

    background: #fff;

    font-size: 14px;
    color: #111;
}


/*
 * GRID DE PRODUCTOS
 */

body.woocommerce-shop ul.products,
body.post-type-archive-product ul.products {
    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 42px 18px;

    margin: 0;
    padding: 0;

    list-style: none;
}


/*
 * ELIMINAR MÁRGENES NATIVOS
 */

body.woocommerce-shop ul.products::before,
body.woocommerce-shop ul.products::after,
body.post-type-archive-product ul.products::before,
body.post-type-archive-product ul.products::after {
    display: none;
}


/*
 * CARD
 */

body.woocommerce-shop ul.products li.product,
body.post-type-archive-product ul.products li.product {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex;
    flex-direction: column;
}


/*
 * IMAGEN
 */

body.woocommerce-shop ul.products li.product a img,
body.post-type-archive-product ul.products li.product a img {
    width: 100%;
    height: auto;

    aspect-ratio: 1 / 1.12;

    object-fit: cover;

    display: block;

    margin: 0 0 14px !important;

    transition:
        transform 0.35s ease;
}


/*
 * HOVER IMAGEN
 */

body.woocommerce-shop ul.products li.product a:hover img,
body.post-type-archive-product ul.products li.product a:hover img {
    transform: scale(1.02);
}


/*
 * TÍTULO DEL PRODUCTO
 */

body.woocommerce-shop ul.products li.product .woocommerce-loop-product__title,
body.post-type-archive-product ul.products li.product .woocommerce-loop-product__title {
    margin: 0 0 8px !important;

    padding: 0 !important;

    font-family: Georgia, serif;

    font-size: 24px;

    line-height: 1.15;

    font-weight: 700;

    color: #111 !important;
}


/*
 * PRECIO
 */

body.woocommerce-shop ul.products li.product .price,
body.post-type-archive-product ul.products li.product .price {
    margin: 0 0 16px !important;

    padding: 0 !important;

    font-family: Arial, sans-serif;

    font-size: 16px;

    line-height: 1.4;

    color: #111 !important;
}


/*
 * PRECIO VIEJO
 */

body.woocommerce-shop ul.products li.product .price del,
body.post-type-archive-product ul.products li.product .price del {
    color: #999;
}


/*
 * PRECIO ACTUAL
 */

body.woocommerce-shop ul.products li.product .price ins,
body.post-type-archive-product ul.products li.product .price ins {
    text-decoration: none;

    color: #111;
}


/*
 * BOTÓN
 */

body.woocommerce-shop ul.products li.product .button,
body.post-type-archive-product ul.products li.product .button {
    width: 100%;

    min-height: 46px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin: auto 0 0 !important;

    padding: 10px 20px;

    border: 1px solid #111;

    border-radius: 30px;

    background: #fff;

    color: #111 !important;

    font-family: Arial, sans-serif;

    font-size: 16px;

    font-weight: 500;

    text-align: center;

    text-decoration: none;

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}


/*
 * HOVER BOTÓN
 */

body.woocommerce-shop ul.products li.product .button:hover,
body.post-type-archive-product ul.products li.product .button:hover {
    background: #111;

    color: #fff !important;
}


/*
 * PAGINACIÓN
 */

body.woocommerce-shop .woocommerce-pagination,
body.post-type-archive-product .woocommerce-pagination {
    margin-top: 48px;

    text-align: center;
}


body.woocommerce-shop .woocommerce-pagination ul.page-numbers,
body.post-type-archive-product .woocommerce-pagination ul.page-numbers {
    display: inline-flex;

    align-items: center;

    gap: 22px;

    margin: 0;
    padding: 0;

    border: 0;
}


body.woocommerce-shop .woocommerce-pagination .page-numbers,
body.post-type-archive-product .woocommerce-pagination .page-numbers {
    border: 0 !important;

    background: transparent !important;

    color: #111;

    font-size: 14px;

    text-decoration: none;
}


body.woocommerce-shop .woocommerce-pagination .page-numbers.current,
body.post-type-archive-product .woocommerce-pagination .page-numbers.current {
    font-weight: 700;
}


body.woocommerce-shop .woocommerce-pagination .page-numbers:hover,
body.post-type-archive-product .woocommerce-pagination .page-numbers:hover {
    color: #b43d0b;
}


/*
 * ==========================================================
 * RESPONSIVE
 * ==========================================================
 */

@media (max-width: 900px) {

    body.woocommerce-shop ul.products,
    body.post-type-archive-product ul.products {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 35px 18px;
    }

}


@media (max-width: 650px) {

    body.woocommerce-shop .woocommerce-products-header__title,
    body.post-type-archive-product .woocommerce-products-header__title {
        font-size: 32px;
    }


    body.woocommerce-shop ul.products,
    body.post-type-archive-product ul.products {
        grid-template-columns: 1fr;

        gap: 32px;
    }


    body.woocommerce-shop ul.products li.product .woocommerce-loop-product__title,
    body.post-type-archive-product ul.products li.product .woocommerce-loop-product__title {
        font-size: 21px;
    }

}




/* ==========================================================
   RECOMENDACIONES - MÓVIL
   ========================================================== */

@media (max-width: 768px) {

    .related ul.products,
    .upsells ul.products {

        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 30px 20px !important;

        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .related ul.products li.product,
    .upsells ul.products li.product {

        width: 100% !important;
        margin: 0 !important;
    }

    .related ul.products li.product img,
    .upsells ul.products li.product img {

        width: 100% !important;
        height: auto !important;
    }

    .related ul.products li.product .woocommerce-loop-product__title,
    .upsells ul.products li.product .woocommerce-loop-product__title {

        font-size: 20px !important;
        line-height: 1.15 !important;
    }

}


/* ==========================================================
   PRODUCTO - TÍTULO MÓVIL
   ========================================================== */

.kuali-mobile-product-heading {
    display: none;
}

@media (max-width: 768px) {

    .kuali-mobile-product-heading {
        display: block;
        width: 100%;
        margin-bottom: 30px;
    }

    .kuali-mobile-product-heading .kuali-title {
        margin: 0 0 18px;
    }

    .kuali-mobile-product-heading .kuali-subtitle {
        margin: 0;
    }

    /* Ocultar título original en móvil */
    .kuali-info .kuali-title,
    .kuali-info .kuali-product-heading {
        display: none;
    }

}