.show_list, .show_grid {
cursor:pointer;
opacity:1.0;
}
.show_list:hover, .show_grid:hover {
opacity:0.7;
}
.product_show_list {
width:100%;
}
.product_show_list .highlighted-informations, .product_show_list .product-description, .product_show_list .thumbnail-container {
width:100%!important;
}
.product_show_list .product-thumbnail {
text-align:center;
}
#ecommgridlistcategory .show_grid:before {
content: "";
width: 18px;
height: 18px;
mask-image: url('data:image/svg+xml;utf8,');
-webkit-mask: url('data:image/svg+xml;utf8,');
display: block;
background-repeat: no-repeat;
background-color: #c1c1c1;
}
#ecommgridlistcategory .show_list:before {
content: "";
width: 18px;
height: 18px;
display: block;
mask-image: url('data:image/svg+xml;utf8,');
-webkit-mask: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-color: #c1c1c1;
}
#ecommgridlistcategory .show_list:hover:before, #ecommgridlistcategory .show_list.active:before, #ecommgridlistcategory .show_grid:hover:before, #ecommgridlistcategory .show_grid.active:before {
background-color: black
}
div#ecommgridlistcategory {
display: flex;
flex-wrap: nowrap;
align-content: space-around;
justify-content: flex-start;
align-items: center;
gap: 15px;
}
#products #js-product-list.list_mode .product{
width: 100%
}
#products #js-product-list.list_mode .product article .thumbnail-container {
max-width: 195px;
}
#products #js-product-list.list_mode .product-description{
text-align: left;
}
/* ============================================================
Herdasa (override tema): vista LISTA (#js-product-list.list_mode)
Tarjetas horizontales (imagen izq + datos dcha), como el diseno.
NOTA: el JS del modulo aplica .list_mode a #js-product-list (la clase
.product_show_list de arriba queda muerta). Aqui estilamos list_mode.
============================================================ */
/* Una sola columna (romper el grid) */
#products #js-product-list.list_mode .products {
display: block;
}
/* Cada producto = tarjeta a ancho completo */
#products #js-product-list.list_mode .product-miniature {
width: 100% !important;
max-width: 100% !important;
flex: 0 0 100% !important;
margin: 0 0 16px !important;
border-radius: 16px;
position: relative;
}
/* Contenedor interno en fila */
#products #js-product-list.list_mode .product-miniature .thumbnail-container {
display: flex !important;
flex-direction: row;
align-items: center;
gap: 24px;
padding: 18px 22px;
width: 100% !important;
}
/* Imagen a la izquierda, fija */
#products #js-product-list.list_mode .product-miniature .thumbnail-top,
#products #js-product-list.list_mode .product-miniature .product-thumbnail {
flex: 0 0 auto;
width: 132px !important;
margin: 0;
}
#products #js-product-list.list_mode .product-miniature .product-thumbnail img {
width: 132px !important;
height: 132px !important;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: 12px;
display: block;
}
/* Datos a la derecha */
#products #js-product-list.list_mode .product-miniature .product-description {
flex: 1 1 auto;
width: auto !important;
padding: 0 !important;
text-align: left;
display: flex;
flex-direction: column;
gap: 8px;
align-items: flex-start;
}
#products #js-product-list.list_mode .product-miniature .product-title {
margin: 0;
font-size: 18px;
}
#products #js-product-list.list_mode .product-miniature .product-title a {
font-size: 18px;
}
#products #js-product-list.list_mode .product-miniature .product-price-and-shipping {
text-align: left;
margin: 0;
}
/* Badge (Nuevo / -20%) arriba a la derecha de la tarjeta */
#products #js-product-list.list_mode .product-miniature .product-flags {
top: 16px;
right: 16px;
left: auto;
}
/* El diseno de lista no muestra el corazon ni el overlay "vista rapida" */
#products #js-product-list.list_mode .product-miniature .mwl-btn--mini,
#products #js-product-list.list_mode .product-miniature .highlighted-informations {
display: none !important;
}
@media (max-width: 575px) {
#products #js-product-list.list_mode .product-miniature .thumbnail-container {
gap: 14px;
padding: 14px;
}
#products #js-product-list.list_mode .product-miniature .thumbnail-top,
#products #js-product-list.list_mode .product-miniature .product-thumbnail,
#products #js-product-list.list_mode .product-miniature .product-thumbnail img {
width: 92px !important;
}
#products #js-product-list.list_mode .product-miniature .product-thumbnail img {
height: 92px !important;
}
}
/* Fix: la tarjeta es flex+center por el tema -> block; flags absolutas arriba-dcha; ocultar heart-wrap */
#products #js-product-list.list_mode .product-miniature {
display: block !important;
}
#products #js-product-list.list_mode .product-miniature .thumbnail-container {
justify-content: flex-start !important;
}
#products #js-product-list.list_mode .product-miniature .product-flags {
/* position: absolute !important; */
/* top: 16px !important; */
/* right: 16px !important; */
/* left: auto !important; */
/* flex: none !important; */
/* z-index: 3; */ 3; */
;
display: flex;
align-content: flex-end;
}
#products #js-product-list.list_mode .product-miniature .mwl-mini-wrap,
#products #js-product-list.list_mode .product-miniature .mwl-btn--mini {
display: none !important;
}
/* Fix: quitar el max-width:195px del thumbnail-container (grid) para que la fila llene el ancho */
#products #js-product-list.list_mode .product-miniature .thumbnail-container {
max-width: none !important;
width: 100% !important;
}