.elementor-widget-container .eael-protected-content-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-container .protected-content-error-msg{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-689 .elementor-element.elementor-element-64567a6{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-image-carousel .eael-protected-content-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-image-carousel .protected-content-error-msg{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-689 .elementor-element.elementor-element-adfb412{--e-image-carousel-slides-to-show:1;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-689 .elementor-element.elementor-element-ded7670{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:2em;--padding-bottom:2em;--padding-left:5em;--padding-right:5em;}.elementor-689 .elementor-element.elementor-element-9a99915{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-breadcrumbs .eael-protected-content-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-breadcrumbs .protected-content-error-msg{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-breadcrumbs{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-689 .elementor-element.elementor-element-3b6be51{padding:1% 0% 1% 0%;font-family:"Roboto", Sans-serif;font-size:1rem;font-weight:400;color:var( --e-global-color-text );}.elementor-689 .elementor-element.elementor-element-3b6be51 a{color:var( --e-global-color-fbee252 );}.elementor-widget-wc-categories .eael-protected-content-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-wc-categories .protected-content-error-msg{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-wc-categories .woocommerce .woocommerce-loop-category__title{color:var( --e-global-color-primary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-wc-categories .woocommerce-loop-category__title .count{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-689 .elementor-element.elementor-element-6ac0c24.elementor-wc-products ul.products{grid-column-gap:30px;grid-row-gap:40px;}.elementor-689 .elementor-element.elementor-element-6ac0c24 .woocommerce .woocommerce-loop-category__title{color:var( --e-global-color-727ce01 );font-family:"Roboto", Sans-serif;font-size:16px;font-weight:400;}.elementor-689 .elementor-element.elementor-element-6ac0c24 .woocommerce-loop-category__title .count{color:var( --e-global-color-727ce01 );font-family:"Roboto", Sans-serif;font-size:16px;font-weight:600;}.elementor-689 .elementor-element.elementor-element-30acd81{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:2em;--padding-bottom:5em;--padding-left:1em;--padding-right:1em;}.elementor-widget-wc-archive-products .eael-protected-content-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-wc-archive-products .protected-content-error-msg{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .woocommerce-loop-product__title{color:var( --e-global-color-primary );}.elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .woocommerce-loop-category__title{color:var( --e-global-color-primary );}.elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .woocommerce-loop-product__title, .elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .woocommerce-loop-category__title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .price{color:var( --e-global-color-primary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .price ins{color:var( --e-global-color-primary );}.elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .price ins .amount{color:var( --e-global-color-primary );}.elementor-widget-wc-archive-products{--products-title-color:var( --e-global-color-primary );}.elementor-widget-wc-archive-products.products-heading-show .related-products > h2, .elementor-widget-wc-archive-products.products-heading-show .upsells > h2, .elementor-widget-wc-archive-products.products-heading-show .cross-sells > h2{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .price del{color:var( --e-global-color-primary );}.elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .price del .amount{color:var( --e-global-color-primary );}.elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .price del {font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .button{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-wc-archive-products.elementor-wc-products .added_to_cart{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-wc-archive-products .elementor-products-nothing-found{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-689 .elementor-element.elementor-element-b2db802.elementor-wc-products ul.products{grid-column-gap:10px;grid-row-gap:20px;}.elementor-689 .elementor-element.elementor-element-b2db802.elementor-wc-products .attachment-woocommerce_thumbnail{border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-eca1340 );border-radius:17px 17px 17px 17px;margin-bottom:14px;}.elementor-689 .elementor-element.elementor-element-b2db802.elementor-wc-products ul.products li.product .woocommerce-loop-product__title{color:var( --e-global-color-727ce01 );margin-bottom:7px;}.elementor-689 .elementor-element.elementor-element-b2db802.elementor-wc-products ul.products li.product .woocommerce-loop-category__title{color:var( --e-global-color-727ce01 );margin-bottom:7px;}.elementor-689 .elementor-element.elementor-element-b2db802.elementor-wc-products ul.products li.product .woocommerce-loop-product__title, .elementor-689 .elementor-element.elementor-element-b2db802.elementor-wc-products ul.products li.product .woocommerce-loop-category__title{font-family:"Roboto", Sans-serif;font-size:21px;font-weight:700;text-transform:capitalize;}.elementor-689 .elementor-element.elementor-element-b2db802.elementor-wc-products ul.products li.product .star-rating{color:var( --e-global-color-fbee252 );}.elementor-689 .elementor-element.elementor-element-b2db802.elementor-wc-products ul.products li.product .star-rating::before{color:var( --e-global-color-eca1340 );}.elementor-689 .elementor-element.elementor-element-b2db802.elementor-wc-products ul.products li.product .price{color:var( --e-global-color-727ce01 );font-family:"Roboto", Sans-serif;font-size:18px;font-weight:600;}.elementor-689 .elementor-element.elementor-element-b2db802.elementor-wc-products ul.products li.product .price ins{color:var( --e-global-color-727ce01 );}.elementor-689 .elementor-element.elementor-element-b2db802.elementor-wc-products ul.products li.product .price ins .amount{color:var( --e-global-color-727ce01 );}.elementor-689 .elementor-element.elementor-element-b2db802.elementor-wc-products ul.products li.product .price del{color:var( --e-global-color-ffa01fa );}.elementor-689 .elementor-element.elementor-element-b2db802.elementor-wc-products ul.products li.product .price del .amount{color:var( --e-global-color-ffa01fa );}.elementor-689 .elementor-element.elementor-element-b2db802.elementor-wc-products ul.products li.product .price del {font-family:"Roboto", Sans-serif;font-size:18px;font-weight:600;}.elementor-689 .elementor-element.elementor-element-b2db802.elementor-wc-products ul.products li.product .button{color:var( --e-global-color-a58c24b );background-color:var( --e-global-color-fbee252 );border-radius:7px 7px 7px 7px;}.elementor-689 .elementor-element.elementor-element-b2db802.elementor-wc-products ul.products li.product{padding:50px 0px 50px 0px;}.elementor-689 .elementor-element.elementor-element-b2db802 nav.woocommerce-pagination ul{border-color:var( --e-global-color-727ce01 );}.elementor-689 .elementor-element.elementor-element-b2db802 nav.woocommerce-pagination ul li{border-right-color:var( --e-global-color-727ce01 );border-left-color:var( --e-global-color-727ce01 );}.elementor-689 .elementor-element.elementor-element-b2db802 nav.woocommerce-pagination{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-689 .elementor-element.elementor-element-b2db802 nav.woocommerce-pagination ul li a{color:var( --e-global-color-727ce01 );}.elementor-689 .elementor-element.elementor-element-b2db802 .elementor-products-nothing-found{color:var( --e-global-color-727ce01 );font-family:"Roboto", Sans-serif;font-size:18px;font-weight:400;}.elementor-689 .elementor-element.elementor-element-92ec3a5{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:5em;--padding-bottom:5em;--padding-left:1em;--padding-right:1em;}.elementor-689 .elementor-element.elementor-element-92ec3a5:not(.elementor-motion-effects-element-type-background), .elementor-689 .elementor-element.elementor-element-92ec3a5 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FCFCFC;}.elementor-widget-image-gallery .eael-protected-content-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-image-gallery .protected-content-error-msg{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-image-gallery .gallery-item .gallery-caption{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-689 .elementor-element.elementor-element-3ab5528 .gallery-item .gallery-caption{display:none;}@media(max-width:1024px){.elementor-689 .elementor-element.elementor-element-b2db802.elementor-wc-products ul.products{grid-column-gap:20px;grid-row-gap:40px;}}@media(min-width:768px){.elementor-689 .elementor-element.elementor-element-ded7670{--content-width:100%;}.elementor-689 .elementor-element.elementor-element-30acd81{--content-width:1440px;}.elementor-689 .elementor-element.elementor-element-92ec3a5{--content-width:1440px;}}@media(max-width:767px){.elementor-689 .elementor-element.elementor-element-ded7670{--padding-top:0em;--padding-bottom:0em;--padding-left:1em;--padding-right:1em;}.elementor-689 .elementor-element.elementor-element-6ac0c24{padding:0% 5% 0% 2%;}.elementor-689 .elementor-element.elementor-element-30acd81{--padding-top:50px;--padding-bottom:50px;--padding-left:10px;--padding-right:10px;}.elementor-689 .elementor-element.elementor-element-b2db802.elementor-wc-products ul.products li.product{text-align:left;}.elementor-689 .elementor-element.elementor-element-b2db802.elementor-wc-products ul.products{grid-column-gap:20px;grid-row-gap:40px;}}/* Start custom CSS for wc-categories, class: .elementor-element-6ac0c24 */.elementor-689 .elementor-element.elementor-element-6ac0c24 .woocommerce .product-category .count {
display: none;
}
h2.woocommerce-loop-category__title {
text-align: center;
font-weight: bold !important;
}
li.product-category.product {
width: 150px !important;
}
.elementor-689 .elementor-element.elementor-element-6ac0c24 h2.woocommerce-loop-category__title {
word-wrap: break-word;
max-width: 150px;
text-transform: uppercase;
}/* End custom CSS */
/* Start custom CSS for wc-archive-products, class: .elementor-element-b2db802 *//* Espaciado más claro entre elementos */
#product-grid-custom.my-product-grid ul.products li.product {
display: flex;
flex-direction: column;
gap: 5px; /* Añade espacio entre todos los elementos hijos */
}
/* Estructura explícita para los elementos */
#product-grid-custom.my-product-grid ul.products li.product > * {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
#product-grid-custom.my-product-grid ul.products li.product img.attachment-woocommerce_thumbnail {
margin-bottom: 8px !important;
}
#product-grid-custom.my-product-grid ul.products li.product h2.woocommerce-loop-product__title {
margin-bottom: 8px !important;
}
#product-grid-custom.my-product-grid ul.products li.product .star-rating {
margin-bottom: 8px !important;
}
#product-grid-custom.my-product-grid ul.products li.product .price {
margin-bottom: 8px !important;
}@media (min-width: 1024px) {
/* 1) Convertimos el en un grid de 2 columnas x 4 filas */
#product-grid-custom.my-product-grid ul.products li.product {
display: grid;
grid-template-columns: max-content 1fr;
grid-template-rows: auto auto auto auto;
column-gap: 15px;
align-items: start;
margin-bottom: 20px !important;
padding-bottom: 0 !important;
}
/* 2) Imagen abarca las 4 filas en la columna 1 y tiene altura completa */
#product-grid-custom.my-product-grid ul.products li.product img.attachment-woocommerce_thumbnail {
grid-column: 1;
grid-row: 1 / span 4;
margin: 0;
max-width: 120px;
height: 100%;
object-fit: contain;
align-self: stretch;
/* Volvemos a añadir el borde */
border: 1px solid #e0e0e0 !important;
border-radius: 5px !important;
padding: 5px !important;
box-shadow: none !important;
}
/* Borde para la imagen dentro del contenedor */
#product-grid-custom.my-product-grid ul.products li.product .woocommerce-LoopProduct-link img {
border: 1px solid #e0e0e0 !important;
border-radius: 5px !important;
padding: 5px !important;
box-shadow: none !important;
}
/* 3) Título en columna 2, fila 1 */
#product-grid-custom.my-product-grid ul.products li.product h2.woocommerce-loop-product__title {
grid-column: 2;
grid-row: 1;
margin: 0 0 6px;
text-align: left;
}
/* 4) Estrellas debajo del título en columna 2, fila 2 */
#product-grid-custom.my-product-grid ul.products li.product .star-rating {
grid-column: 2;
grid-row: 2;
margin: 0 0 8px !important;
text-align: left;
font-size: 1em !important;
}
/* 5) Precio en columna 2, fila 3 */
#product-grid-custom.my-product-grid ul.products li.product .price {
grid-column: 2;
grid-row: 3;
margin: 0 0 8px;
text-align: left;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
width: 100%;
gap: 10px;
}
/* Estilo para el precio actual (no tachado) */
#product-grid-custom.my-product-grid ul.products li.product .price ins,
#product-grid-custom.my-product-grid ul.products li.product .price > .amount {
order: 1;
text-decoration: none;
margin-right: 0;
}
/* Estilo para el precio normal (tachado) */
#product-grid-custom.my-product-grid ul.products li.product .price del {
order: 2;
margin-left: 0;
}
/* Para productos sin descuento, asegurar que el precio esté a la izquierda */
#product-grid-custom.my-product-grid ul.products li.product .price:not(:has(del)) {
justify-content: flex-start;
}
/* 6) Botón en columna 2, fila 4 */
#product-grid-custom.my-product-grid ul.products li.product .button {
grid-column: 2;
grid-row: 4;
justify-self: start;
margin: 0 !important;
padding: 10px 15px !important;
}
/* 7) Aseguramos que el enlace principal no rompa el grid */
#product-grid-custom.my-product-grid ul.products li.product a.woocommerce-LoopProduct-link {
display: contents;
}
/* Botón de Add to Cart específico */
#product-grid-custom.my-product-grid ul.products li.product .button.product_type_simple.add_to_cart_button.ajax_add_to_cart,
#product-grid-custom.my-product-grid ul.products li.product a[class*="add_to_cart"] {
margin: 0 !important;
padding: 10px 15px !important;
padding-bottom: 10px !important;
}
/* Eliminar margen del contenedor del botón */
#product-grid-custom.my-product-grid ul.products li.product .button-container,
#product-grid-custom.my-product-grid ul.products li.product .add_to_cart_container {
margin: 0 !important;
padding: 0 !important;
}
/* Eliminar margen en el contenedor del enlace add to cart */
#product-grid-custom.my-product-grid ul.products li.product a[class*="add_to_cart"] {
margin-bottom: 0 !important;
}
/* Eliminar pantalla del lector */
#product-grid-custom.my-product-grid ul.products li.product .screen-reader-text {
display: none;
}
}
/* Estilos comunes para dispositivos móviles */
@media (max-width: 1023px) and (min-width: 481px) {
/* Establece 2 columnas para tablets */
#product-grid-custom.my-product-grid ul.products {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
}
#product-grid-custom.my-product-grid ul.products li.product {
text-align: center;
margin-bottom: 0;
padding-bottom: 0 !important;
width: 100% !important;
margin-right: 0 !important;
}
/* Invertir el orden en móvil también */
#product-grid-custom.my-product-grid ul.products li.product .price ins,
#product-grid-custom.my-product-grid ul.products li.product .price > .amount {
order: 1;
}
#product-grid-custom.my-product-grid ul.products li.product .price del {
order: 2;
}
/* Añadir borde a imagen en móvil también */
#product-grid-custom.my-product-grid ul.products li.product img.attachment-woocommerce_thumbnail,
#product-grid-custom.my-product-grid ul.products li.product .woocommerce-LoopProduct-link img {
border: 1px solid #e0e0e0 !important;
border-radius: 5px !important;
padding: 5px !important;
box-shadow: none !important;
max-height: 160px;
}
/* Corregir el padding del botón Add to cart en móvil */
#product-grid-custom.my-product-grid ul.products li.product .button.product_type_simple.add_to_cart_button.ajax_add_to_cart,
#product-grid-custom.my-product-grid ul.products li.product a[class*="add_to_cart"] {
margin: 0 auto !important;
padding: 10px 15px !important;
padding-bottom: 10px !important;
width: 80% !important;
max-width: 120px !important;
}
/* Eliminar margen del contenedor del botón */
#product-grid-custom.my-product-grid ul.products li.product .button-container,
#product-grid-custom.my-product-grid ul.products li.product .add_to_cart_container {
margin: 0 !important;
padding: 0 !important;
}
/* Asegurar que WooCommerce no imponga sus propios márgenes */
#product-grid-custom.my-product-grid ul.products[class*=columns-] li.product {
width: 100% !important;
margin-right: 0 !important;
}
}
/* CSS optimizado para móviles */
@media (max-width: 1023px) {
/* Espaciado más claro entre elementos */
#product-grid-custom.my-product-grid ul.products li.product {
display: flex;
flex-direction: column;
gap: 5px; /* Añade espacio entre todos los elementos hijos */
}
/* Estructura explícita para los elementos */
#product-grid-custom.my-product-grid ul.products li.product > * {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
#product-grid-custom.my-product-grid ul.products li.product img.attachment-woocommerce_thumbnail {
margin-bottom: 8px !important;
}
#product-grid-custom.my-product-grid ul.products li.product h2.woocommerce-loop-product__title {
margin-bottom: 8px !important;
}
#product-grid-custom.my-product-grid ul.products li.product .star-rating {
margin-bottom: 8px !important;
}
#product-grid-custom.my-product-grid ul.products li.product .price {
margin-bottom: 8px !important;
}
@media (min-width: 1024px) {
/* 1) Convertimos el en un grid de 2 columnas x 4 filas */
#product-grid-custom.my-product-grid ul.products li.product {
display: grid;
grid-template-columns: max-content 1fr;
grid-template-rows: auto auto auto auto;
column-gap: 15px;
align-items: start;
margin-bottom: 20px !important;
padding-bottom: 0 !important;
}
/* 2) Imagen abarca las 4 filas en la columna 1 y tiene altura completa */
#product-grid-custom.my-product-grid ul.products li.product img.attachment-woocommerce_thumbnail {
grid-column: 1;
grid-row: 1 / span 4;
margin: 0;
max-width: 120px;
height: 100%;
object-fit: contain;
align-self: stretch;
/* Volvemos a añadir el borde */
border: 1px solid #e0e0e0 !important;
border-radius: 5px !important;
padding: 5px !important;
box-shadow: none !important;
}
/* Borde para la imagen dentro del contenedor */
#product-grid-custom.my-product-grid ul.products li.product .woocommerce-LoopProduct-link img {
border: 1px solid #e0e0e0 !important;
border-radius: 5px !important;
padding: 5px !important;
box-shadow: none !important;
}
/* 3) Título en columna 2, fila 1 */
#product-grid-custom.my-product-grid ul.products li.product h2.woocommerce-loop-product__title {
grid-column: 2;
grid-row: 1;
margin: 0 0 6px;
text-align: left;
}
/* 4) Estrellas debajo del título en columna 2, fila 2 */
#product-grid-custom.my-product-grid ul.products li.product .star-rating {
grid-column: 2;
grid-row: 2;
margin: 0 0 8px !important;
text-align: left;
font-size: 1em !important;
}
/* 5) Precio en columna 2, fila 3 */
#product-grid-custom.my-product-grid ul.products li.product .price {
grid-column: 2;
grid-row: 3;
margin: 0 0 8px;
text-align: left;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
width: 100%;
gap: 10px;
}
/* Estilo para el precio actual (no tachado) */
#product-grid-custom.my-product-grid ul.products li.product .price ins,
#product-grid-custom.my-product-grid ul.products li.product .price > .amount {
order: 1;
text-decoration: none;
margin-right: 0;
}
/* Estilo para el precio normal (tachado) */
#product-grid-custom.my-product-grid ul.products li.product .price del {
order: 2;
margin-left: 0;
}
/* Para productos sin descuento, asegurar que el precio esté a la izquierda */
#product-grid-custom.my-product-grid ul.products li.product .price:not(:has(del)) {
justify-content: flex-start;
}
/* 6) Botón en columna 2, fila 4 */
#product-grid-custom.my-product-grid ul.products li.product .button {
grid-column: 2;
grid-row: 4;
justify-self: start;
margin: 0 !important;
padding: 10px 15px !important;
}
/* 7) Aseguramos que el enlace principal no rompa el grid */
#product-grid-custom.my-product-grid ul.products li.product a.woocommerce-LoopProduct-link {
display: contents;
}
/* Botón de Add to Cart específico */
#product-grid-custom.my-product-grid ul.products li.product .button.product_type_simple.add_to_cart_button.ajax_add_to_cart,
#product-grid-custom.my-product-grid ul.products li.product a[class*="add_to_cart"] {
margin: 0 !important;
padding: 10px 15px !important;
padding-bottom: 10px !important;
}
/* Eliminar margen del contenedor del botón */
#product-grid-custom.my-product-grid ul.products li.product .button-container,
#product-grid-custom.my-product-grid ul.products li.product .add_to_cart_container {
margin: 0 !important;
padding: 0 !important;
}
/* Eliminar margen en el contenedor del enlace add to cart */
#product-grid-custom.my-product-grid ul.products li.product a[class*="add_to_cart"] {
margin-bottom: 0 !important;
}
/* Eliminar pantalla del lector */
#product-grid-custom.my-product-grid ul.products li.product .screen-reader-text {
display: none;
}
}
/* Estilos comunes para dispositivos móviles */
@media (max-width: 1023px) and (min-width: 481px) {
/* Establece 2 columnas para tablets */
#product-grid-custom.my-product-grid ul.products {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
}
#product-grid-custom.my-product-grid ul.products li.product {
text-align: center;
margin-bottom: 0;
padding-bottom: 0 !important;
width: 100% !important;
margin-right: 0 !important;
}
/* Invertir el orden en móvil también */
#product-grid-custom.my-product-grid ul.products li.product .price ins,
#product-grid-custom.my-product-grid ul.products li.product .price > .amount {
order: 1;
}
#product-grid-custom.my-product-grid ul.products li.product .price del {
order: 2;
}
/* Añadir borde a imagen en móvil también */
#product-grid-custom.my-product-grid ul.products li.product img.attachment-woocommerce_thumbnail,
#product-grid-custom.my-product-grid ul.products li.product .woocommerce-LoopProduct-link img {
border: 1px solid #e0e0e0 !important;
border-radius: 5px !important;
padding: 5px !important;
box-shadow: none !important;
max-height: 160px;
}
/* Corregir el padding del botón Add to cart en móvil */
#product-grid-custom.my-product-grid ul.products li.product .button.product_type_simple.add_to_cart_button.ajax_add_to_cart,
#product-grid-custom.my-product-grid ul.products li.product a[class*="add_to_cart"] {
margin: 0 auto !important;
padding: 10px 15px !important;
padding-bottom: 10px !important;
width: 80% !important;
max-width: 120px !important;
}
/* Eliminar margen del contenedor del botón */
#product-grid-custom.my-product-grid ul.products li.product .button-container,
#product-grid-custom.my-product-grid ul.products li.product .add_to_cart_container {
margin: 0 !important;
padding: 0 !important;
}
/* Asegurar que WooCommerce no imponga sus propios márgenes */
#product-grid-custom.my-product-grid ul.products[class*=columns-] li.product {
width: 100% !important;
margin-right: 0 !important;
}
}
/* CSS optimizado para móviles */
@media (max-width: 1023px) {
/* Reorganizar los productos en una sola columna */
#product-grid-custom.my-product-grid ul.products {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
/* 1) Estructura general del producto */
#product-grid-custom.my-product-grid ul.products li.product {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 15px !important;
padding-bottom: 0 !important;
text-align: center !important;
width: 100% !important;
max-width: 100% !important;
}
/* 2) Imagen del producto */
#product-grid-custom.my-product-grid ul.products li.product img.attachment-woocommerce_thumbnail {
width: 100%;
max-width: 180px;
height: auto;
object-fit: contain;
margin: 0 auto 10px;
border: 1px solid #e0e0e0 !important;
border-radius: 5px !important;
padding: 5px !important;
box-shadow: none !important;
}
/* 3) Título del producto - AUMENTO DE TAMAÑO A 16-18px */
#product-grid-custom.my-product-grid ul.products li.product h2.woocommerce-loop-product__title {
margin: 0 auto 10px !important;
text-align: center !important;
font-size: 16px !important; /* Aumentado de 14px a 16px */
width: 100%;
max-width: 180px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
line-height: 1.4 !important; /* Ajustado para mejor legibilidad */
min-height: 42px; /* Ajustado para la nueva altura de fuente */
padding: 0 5px;
}
/* 4) Estrellas de valoración */
#product-grid-custom.my-product-grid ul.products li.product .star-rating {
margin: 0 auto 10px !important;
font-size: 1em !important; /* Aumentado ligeramente */
float: none !important;
clear: both !important;
}
/* 5) Precio - AUMENTO DE TAMAÑO */
#product-grid-custom.my-product-grid ul.products li.product .price {
margin: 0 auto 10px !important;
text-align: center !important;
display: flex;
flex-direction: row;
justify-content: center !important;
align-items: center;
width: 100%;
gap: 8px;
}
/* Precio actual (no tachado) - AUMENTADO */
#product-grid-custom.my-product-grid ul.products li.product .price ins,
#product-grid-custom.my-product-grid ul.products li.product .price > .amount {
order: 1;
text-decoration: none;
margin-right: 0;
font-size: 18px !important; /* Aumentado de 14px a 18px */
font-weight: bold; /* Añadido para mejor legibilidad */
}
/* Precio tachado - AUMENTADO */
#product-grid-custom.my-product-grid ul.products li.product .price del {
order: 2;
margin-left: 0;
font-size: 16px !important; /* Aumentado de 13px a 16px */
}
/* 6) Botón Add to cart - AUMENTADO */
#product-grid-custom.my-product-grid ul.products li.product .button {
margin: 0 auto !important;
padding: 12px 20px !important; /* Ligeramente más grande */
font-size: 16px !important; /* Aumentado de 13px a 16px */
width: 80% !important;
max-width: 150px !important;
text-align: center !important;
}
/* 7) Aseguramos que el enlace principal no rompa la estructura */
#product-grid-custom.my-product-grid ul.products li.product a.woocommerce-LoopProduct-link {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
/* Botón de Add to Cart específico - AJUSTADO */
#product-grid-custom.my-product-grid ul.products li.product .button.product_type_simple.add_to_cart_button.ajax_add_to_cart,
#product-grid-custom.my-product-grid ul.products li.product a[class*="add_to_cart"] {
margin: 0 !important;
padding: 10px 15px !important;
padding-bottom: 10px !important;
text-align: center !important;
line-height: 1.3 !important; /* Ajustado para mejor legibilidad */
font-size: 16px !important; /* Aumentado a 16px */
}
/* Eliminar margen del contenedor del botón */
#product-grid-custom.my-product-grid ul.products li.product .button-container,
#product-grid-custom.my-product-grid ul.products li.product .add_to_cart_container {
margin: 0 !important;
padding: 0 !important;
}
/* Eliminar pantalla del lector */
#product-grid-custom.my-product-grid ul.products li.product .screen-reader-text {
display: none;
}
/* Asegurar buen espaciado entre productos */
#product-grid-custom.my-product-grid ul.products {
row-gap: 15px !important;
}
/* Ajustes para móviles más pequeños */
@media (max-width: 480px) {
/* Mantener vista de dos columnas para dispositivos pequeños pero con productos más estrechos */
#product-grid-custom.my-product-grid ul.products {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
#product-grid-custom.my-product-grid ul.products li.product {
margin-bottom: 5px !important;
}
#product-grid-custom.my-product-grid ul.products li.product img.attachment-woocommerce_thumbnail {
max-width: 120px;
}
/* Título más grande incluso en móviles pequeños */
#product-grid-custom.my-product-grid ul.products li.product h2.woocommerce-loop-product__title {
font-size: 16px !important; /* Mantenemos 16px incluso en pantallas pequeñas */
margin-bottom: 8px !important;
max-width: 120px;
min-height: 42px; /* Ajustado para la nueva altura de texto */
}
/* Ajuste de las estrellas en móviles pequeños */
#product-grid-custom.my-product-grid ul.products li.product .star-rating {
margin-top: 4px !important;
margin-bottom: 8px !important;
font-size: 0.9em !important; /* Ligeramente más grande */
}
#product-grid-custom.my-product-grid ul.products li.product .star-rating {
margin-bottom: 5px !important;
}
/* Precio en móviles pequeños */
#product-grid-custom.my-product-grid ul.products li.product .price {
font-size: 16px !important; /* Mantenemos el tamaño aumentado */
margin-bottom: 5px !important;
}
/* Botón en móviles pequeños */
#product-grid-custom.my-product-grid ul.products li.product .button {
padding: 8px 12px !important;
font-size: 16px !important; /* Mantenemos 16px */
width: 90% !important;
}
}
}
}
p.woocommerce-result-count {
font-family: 'Roboto';
font-size: 1rem;
}
select.orderby {
border: 1px solid #f1f1f1 !important;
border-radius: 10px;
font-size: 1rem;
font-family: 'Roboto';
}
img.woocommerce-placeholder.wp-post-image {
max-width: 100px !important;
}/* End custom CSS */