/*
 Theme Name:   Woodmart Child
 Description:  Marea
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.0
 Text Domain:  woodmart
*/

/*css para si el texto del titulo de producto excede de una linea aparezca punto suspensivo*/
.wd-product .wd-entities-title {
  white-space: nowrap!important;
  text-overflow: ellipsis!important;
}
/*css para el grid de productos*/

@media(min-width:1024px){
	.wd-bottom-actions{display:none!important}
	.wd-product:hover .wd-bottom-actions{
		display:flex!important
	}

}
@media(max-width:1024px){
	.wd-add-btn{width:20px!important;height:20px!important;background-color:white!important;border-inline-start-style:none!important;}
	.wd-add-btn a{min-height:20px!important;max-height:20px!important;width:20px!important;background-color:white!important;border-radius:unset;}
	.wd-add-btn a:after{width:20px!important;height:20px!important;}
	.wd-add-btn a:before{color:black!important;}
	.wd-add-btn a .wd-action-icon span.wd-check-icon{
		inset-inline-start: calc(50% + var(--wd-action-icon-size) - 15px);
		bottom: calc(50% + var(--wd-action-icon-size) - 15px);
		width: 10px;
		height: 10px;
	}
	/*mover corazon y carrito en tablet y movil*/
	.wd-product .wd-product-card-hover, .wd-product .product-element-bottom{position:static!important;}
	.wd-bottom-actions .wrap-quickview-button{display:none;}
	.wd-bottom-actions .wrap-wishlist-button{position:absolute; top:10px;right:20px;}
	.wd-bottom-actions .wrap-wishlist-button .wd-wishlist-btn{width:20px!important;}
	.wd-bottom-actions .wd-add-btn {position: absolute;  bottom: calc(100% - 91%); right: 10px;}
}

.button.add_to_cart_button.add-to-cart-loop:before{transform: unset!important;}
.product-rating-price{display:flex;justify-content: space-between;height:auto!important;}
.wd-add-btn.wd-add-btn-replace a{width:42px;border-radius:5px;}

/*valores para las variaciones de producto*/
.variation-row .label.cell label{font-weight:600;}
.value.cell.with-swatches .wd-swatches-product{display:flex;flex-wrap:nowrap;overflow-x:scroll;padding-bottom:12px;}
.value.cell.with-swatches .wd-swatches-product a{min-width: 80px;}

.value.cell.with-swatches .wd-swatches-product::-webkit-scrollbar {
  height: 2px;
}

.value.cell.with-swatches .wd-swatches-product::-webkit-scrollbar-track {
  background: #ffffff;
}

.value.cell.with-swatches .wd-swatches-product::-webkit-scrollbar-thumb:horizontal {
  background: #000;
  border-radius: 10px;
}



    
/* ============================================
   MAREA — GRID DE CATEGORÍAS
   - 5 columnas en escritorio
   - Separación 20px
   - 3 o 4 categorías centradas
   - Imágenes cuadradas
   - Respeta el carrusel configurado aparte
   ============================================ */


/* ============================================
   CONTENEDOR PRINCIPAL
   ============================================ */

.marea-categorias-grid ul.products,
.marea-categorias-grid .wd-products,
.marea-categorias-grid .products,
.marea-categorias-grid .wd-categories-holder {
    display: grid !important;

    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;

    gap: 20px !important;

    width: 100% !important;

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

    list-style: none !important;

    justify-content: center !important;
}


/* ============================================
   TARJETAS
   ============================================ */

.marea-categorias-grid .category-grid-item,
.marea-categorias-grid .product-category,
.marea-categorias-grid .wd-cat {
    width: 100% !important;
    max-width: none !important;

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

    float: none !important;

    text-align: center !important;
}


/* ============================================
   IMÁGENES
   ============================================ */

.marea-categorias-grid .category-grid-item img,
.marea-categorias-grid .product-category img,
.marea-categorias-grid .wd-cat img {
    width: 100% !important;
    height: auto !important;

    aspect-ratio: 1 / 1 !important;

    object-fit: cover !important;

    display: block !important;

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


/* ============================================
   TÍTULOS
   ============================================ */

.marea-categorias-grid .woocommerce-loop-category__title,
.marea-categorias-grid .wd-entities-title,
.marea-categorias-grid .category-title,
.marea-categorias-grid .product-category h3,
.marea-categorias-grid .wd-cat h3 {
    width: 100% !important;

    text-align: center !important;

    margin: 12px 0 0 0 !important;
    padding: 0 !important;

    float: none !important;

    font-size: 14px !important;
    line-height: 1.3 !important;
}


/* ============================================
   SI HAY SOLO 4 CATEGORÍAS
   Mantienen el tamaño correspondiente
   a una cuadrícula de 5 y quedan centradas
   ============================================ */

.marea-categorias-grid .products:has(.category-grid-item:nth-child(4):last-child),
.marea-categorias-grid .wd-products:has(.category-grid-item:nth-child(4):last-child),
.marea-categorias-grid .wd-categories-holder:has(.category-grid-item:nth-child(4):last-child) {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;

    max-width: calc(
        ((100% - 80px) / 5 * 4) + 60px
    ) !important;
}


/* ============================================
   SI HAY SOLO 3 CATEGORÍAS
   Mantienen el tamaño correspondiente
   a una cuadrícula de 5 y quedan centradas
   ============================================ */

.marea-categorias-grid .products:has(.category-grid-item:nth-child(3):last-child),
.marea-categorias-grid .wd-products:has(.category-grid-item:nth-child(3):last-child),
.marea-categorias-grid .wd-categories-holder:has(.category-grid-item:nth-child(3):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

    max-width: calc(
        ((100% - 80px) / 5 * 3) + 40px
    ) !important;
}


/* ============================================
   SI HAY SOLO 2 CATEGORÍAS
   Por si aparece algún bloque así
   ============================================ */

.marea-categorias-grid .products:has(.category-grid-item:nth-child(2):last-child),
.marea-categorias-grid .wd-products:has(.category-grid-item:nth-child(2):last-child),
.marea-categorias-grid .wd-categories-holder:has(.category-grid-item:nth-child(2):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    max-width: calc(
        ((100% - 80px) / 5 * 2) + 20px
    ) !important;
}


/* ============================================
   SI HAY SOLO 1 CATEGORÍA
   ============================================ */

.marea-categorias-grid .products:has(.category-grid-item:only-child),
.marea-categorias-grid .wd-products:has(.category-grid-item:only-child),
.marea-categorias-grid .wd-categories-holder:has(.category-grid-item:only-child) {
    grid-template-columns: minmax(0, 1fr) !important;

    max-width: calc(
        (100% - 80px) / 5
    ) !important;
}


/* ============================================
   TABLET
   Solo ajustes tipográficos.
   No tocamos el comportamiento del carrusel.
   ============================================ */

@media (max-width: 1024px) {

    .marea-categorias-grid .woocommerce-loop-category__title,
    .marea-categorias-grid .wd-entities-title,
    .marea-categorias-grid .category-title,
    .marea-categorias-grid .product-category h3,
    .marea-categorias-grid .wd-cat h3 {
        font-size: 13px !important;
    }

}


/* ============================================
   MÓVIL
   ============================================ */

@media (max-width: 767px) {

    .marea-categorias-grid .woocommerce-loop-category__title,
    .marea-categorias-grid .wd-entities-title,
    .marea-categorias-grid .category-title,
    .marea-categorias-grid .product-category h3,
    .marea-categorias-grid .wd-cat h3 {
        font-size: 11px !important;

        margin-top: 6px !important;

        white-space: nowrap !important;
    }

}