/* ==========================================================
MIL ESTILOS
Listado de productos / PLP
CSS consolidado - sin reglas duplicadas
========================================================== */
/* ==========================================================
1. TARJETA DE PRODUCTO
========================================================== */
.milestilos-product-card {
background: #fff;
height: 100%;
position: relative;
display: flex;
flex-direction: column;
}
/* ---------- IMAGEN ---------- */
.milestilos-product-card .milestilos-product-image {
position: relative;
background: #fff;
overflow: hidden;
margin-bottom: 0;
}
.milestilos-product-card .milestilos-product-image-link {
display: block;
text-decoration: none;
}
.milestilos-product-card .milestilos-product-image img {
display: block;
width: 100%;
height: auto;
object-fit: contain;
}
/* ---------- WISHLIST ---------- */
.milestilos-product-wishlist {
position: absolute;
top: 12px;
right: 12px;
z-index: 20;
}
.milestilos-product-wishlist button,
.milestilos-product-wishlist a {
width: 38px !important;
height: 38px !important;
min-width: 38px !important;
min-height: 38px !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
position: relative;
border: 1px solid #e4e4e4 !important;
border-radius: 50% !important;
background: rgba(255, 255, 255, .94) !important;
font-size: 0 !important;
line-height: 1 !important;
color: transparent !important;
box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
transition:
border-color .2s ease,
background-color .2s ease,
transform .2s ease;
}
.milestilos-product-wishlist button::after,
.milestilos-product-wishlist a::after {
content: "♡";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -52%);
font-family: Arial, sans-serif;
font-size: 23px;
font-weight: 400;
color: #333;
}
.milestilos-product-wishlist button:hover,
.milestilos-product-wishlist a:hover {
border-color: #d4a437 !important;
background: #fff !important;
transform: translateY(-1px);
}
.milestilos-product-wishlist button:hover::after,
.milestilos-product-wishlist a:hover::after {
color: #d4a437;
}
/* ---------- CONTENIDO ---------- */
.milestilos-product-content {
padding: 12px 8px 12px !important;
display: flex;
flex-direction: column;
flex: 1;
}
.milestilos-product-card .products-thumb {
margin-bottom: 0 !important;
}
.milestilos-product-card .products-content {
margin-top: 0 !important;
}
/* ---------- MARCA ---------- */
.milestilos-product-brand {
min-height: 16px;
font-size: 12px;
line-height: 1.3;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .3px;
color: #777;
margin-bottom: 5px;
}
/* ---------- TÍTULO ---------- */
.milestilos-product-card .milestilos-product-title {
min-height: 42px;
font-size: 14px;
line-height: 1.42;
font-weight: 500;
margin: 0 0 9px;
}
.milestilos-product-card .milestilos-product-title a {
color: #222;
text-decoration: none;
}
.milestilos-product-card .milestilos-product-title a:hover {
color: #d4a437;
}
/* ---------- ESPECIFICACIONES ---------- */
.milestilos-product-specs {
margin: 3px 0 12px;
min-height: 38px;
}
.milestilos-product-spec-line {
font-size: 12px;
line-height: 1.55;
color: #666;
}
.milestilos-product-spec-line + .milestilos-product-spec-line {
margin-top: 1px;
}
/* ---------- VALORACIÓN ---------- */
.milestilos-product-rating {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 8px;
}
.milestilos-product-rating .star-rating {
margin: 0;
}
.milestilos-rating-count {
font-size: 12px;
color: #777;
}
/* ---------- PRECIO ---------- */
.milestilos-product-price {
margin-top: auto;
margin-bottom: 7px;
font-size: 17px;
line-height: 1.35;
font-weight: 600;
color: #111;
}
.milestilos-product-price del {
color: #999;
font-size: 13px;
font-weight: 400;
margin-right: 5px;
}
.milestilos-product-price ins {
text-decoration: none;
color: #111;
}
/* ---------- DISPONIBILIDAD ---------- */
.milestilos-product-availability {
display: flex;
align-items: center;
gap: 6px;
color: #397244;
font-size: 11.5px;
margin-bottom: 12px;
}
.milestilos-stock-dot {
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
background: #397244;
}
/* ---------- BOTÓN ---------- */
.milestilos-view-product {
width: 100%;
min-height: 40px;
display: flex;
align-items: center;
justify-content: center;
padding: 9px 12px;
background: #151515;
color: #fff !important;
font-size: 12px;
line-height: 1.2;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .4px;
text-decoration: none !important;
transition:
background-color .2s ease,
color .2s ease;
}
.milestilos-view-product:hover {
background: #d4a437;
color: #fff !important;
}
/* ---------- BADGE DE STOCK ---------- */
.milestilos-stock-badge {
position: absolute;
left: 10px;
bottom: 10px;
z-index: 5;
padding: 5px 9px;
background: rgba(255, 255, 255, .94);
color: #333;
font-size: 11px;
font-weight: 600;
}
/* ---------- ETIQUETA DE DESCUENTO ---------- */
.milestilos-product-card .onsale,
.milestilos-product-card .product-label .onsale,
.milestilos-product-card .product-label .sale {
position: absolute !important;
top: 12px !important;
left: 12px !important;
right: auto !important;
min-width: auto !important;
min-height: auto !important;
padding: 6px 10px !important;
background: #d4a437 !important;
color: #fff !important;
border: 0 !important;
border-radius: 4px !important;
font-size: 12px !important;
line-height: 1 !important;
font-weight: 700 !important;
z-index: 20 !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}
/* ==========================================================
2. FILTROS - CATEGORÍAS CON PERFIL MIL ESTILOS
========================================================== */
body.milestilos-catalog-profile #bwp_form_filter_product {
width: 100%;
}
/* ---------- TÍTULO GENERAL: FILTROS ---------- */
body.milestilos-catalog-profile .sidebar-product .widget-title {
margin: 0 0 20px !important;
font-size: 17px !important;
line-height: 1.3;
font-weight: 700 !important;
color: #181818;
}
/* ---------- BLOQUES ---------- */
body.milestilos-catalog-profile #bwp_form_filter_product .bwp-filter,
body.milestilos-catalog-profile #bwp_form_filter_product .bwp-filter-price {
position: relative;
margin: 0 !important;
padding: 20px 0 22px !important;
border-top: 1px solid #eeeeee;
}
body.milestilos-catalog-profile #bwp_form_filter_product .bwp-filter-price {
padding-top: 5px !important;
border-top: 0;
}
/* ---------- TÍTULOS DE CADA FILTRO ---------- */
body.milestilos-catalog-profile #bwp_form_filter_product h3 {
position: relative;
margin: 0 0 13px !important;
padding-left: 10px;
font-size: 13px !important;
line-height: 1.35 !important;
font-weight: 700 !important;
letter-spacing: .25px !important;
text-transform: uppercase;
color: #222 !important;
}
body.milestilos-catalog-profile #bwp_form_filter_product h3::before {
content: "";
position: absolute;
left: 0;
top: 1px;
width: 3px;
height: 15px;
border-radius: 2px;
background: #d4a437;
}
/* ---------- RESET DE ESTILOS HEREDADOS WPBINGO ---------- */
body.milestilos-catalog-profile #bwp_form_filter_product .content_filter ul,
body.milestilos-catalog-profile #bwp_form_filter_product .content_filter li,
body.milestilos-catalog-profile #bwp_form_filter_product .content_filter li:not(.filter_color) > span {
border: 0 !important;
outline: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
body.milestilos-catalog-profile #bwp_form_filter_product .content_filter li {
margin: 0 !important;
padding: 0 !important;
}
body.milestilos-catalog-profile #bwp_form_filter_product .content_filter li > span {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0 !important;
padding: 0 !important;
}
body.milestilos-catalog-profile #bwp_form_filter_product .content_filter li::before,
body.milestilos-catalog-profile #bwp_form_filter_product .content_filter li::after,
body.milestilos-catalog-profile #bwp_form_filter_product .content_filter li > span::before,
body.milestilos-catalog-profile #bwp_form_filter_product .content_filter li > span::after {
display: none !important;
content: none !important;
}
/* ---------- LISTA DE OPCIONES ---------- */
body.milestilos-catalog-profile #bwp_form_filter_product .content_filter ul {
display: flex !important;
flex-wrap: wrap;
gap: 7px;
margin: 0 !important;
padding: 0 !important;
list-style: none;
}
/* ---------- CHECKBOX REAL ---------- */
body.milestilos-catalog-profile #bwp_form_filter_product .content_filter input[type="checkbox"] {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: pointer;
z-index: 3;
}
/* ---------- BOTÓN VISIBLE ---------- */
body.milestilos-catalog-profile #bwp_form_filter_product .content_filter label.name {
display: inline-flex !important;
align-items: center;
justify-content: center;
min-height: 34px;
margin: 0 !important;
padding: 7px 11px !important;
border: 1px solid #dddddd !important;
border-radius: 4px !important;
background: #fff !important;
color: #555 !important;
font-size: 12px !important;
line-height: 1.2 !important;
font-weight: 500 !important;
white-space: nowrap;
cursor: pointer;
box-shadow: none !important;
transition:
border-color .2s ease,
background-color .2s ease,
color .2s ease;
}
body.milestilos-catalog-profile #bwp_form_filter_product .content_filter li > span:hover label.name {
border-color: #d4a437 !important;
color: #9a731e !important;
}
body.milestilos-catalog-profile #bwp_form_filter_product .content_filter input[type="checkbox"]:checked + label.name {
background: #171717 !important;
border-color: #171717 !important;
color: #fff !important;
font-weight: 500 !important;
}
body.milestilos-catalog-profile #bwp_form_filter_product .content_filter input[type="checkbox"]:focus-visible + label.name {
outline: 2px solid #d4a437;
outline-offset: 2px;
}
body.milestilos-catalog-profile #bwp_form_filter_product .content_filter label.count {
display: none !important;
}
/* ---------- FILTRO DE PRECIO ---------- */
body.milestilos-catalog-profile #bwp_form_filter_product .content-filter-price {
padding-top: 3px;
}
body.milestilos-catalog-profile #bwp_slider_price {
height: 4px;
margin: 7px 6px 13px;
border: 0;
background: #e3e3e3;
}
body.milestilos-catalog-profile #bwp_slider_price .ui-slider-range {
background: #d4a437;
}
body.milestilos-catalog-profile #bwp_slider_price .ui-slider-handle {
width: 14px;
height: 14px;
top: -5px;
margin-left: -7px;
border: 2px solid #d4a437;
border-radius: 50%;
background: #fff;
cursor: pointer;
box-shadow: none;
}
body.milestilos-catalog-profile #bwp_form_filter_product .price-input {
margin-top: 10px;
color: #777;
font-size: 11.5px !important;
line-height: 1.5 !important;
}
body.milestilos-catalog-profile #bwp_form_filter_product .price-input .amount {
color: #444;
font-weight: 500;
}
/* ---------- REINICIAR ---------- */
body.milestilos-catalog-profile #bwp_form_filter_product a.reset,
body.milestilos-catalog-profile #bwp_form_filter_product .reset {
font-size: 11.5px !important;
color: #777;
text-decoration: underline;
}
body.milestilos-catalog-profile #bwp_form_filter_product a.reset:hover {
color: #d4a437;
}
/* ==========================================================
4. BARRA SUPERIOR DEL CATÁLOGO - PERFIL MIL ESTILOS
========================================================== */
body.milestilos-catalog-profile .bwp-top-bar.top {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin-bottom: 24px;
}
/* ----------------------------------------------------------
ORDENAMIENTO
---------------------------------------------------------- */
body.milestilos-catalog-profile
.bwp-top-bar.top .woocommerce-ordering {
position: relative;
margin: 0;
min-width: 220px;
}
/* Botón visible */
body.milestilos-catalog-profile
.bwp-top-bar.top .pwb-dropdown-toggle {
display: flex;
align-items: center;
width: 100%;
min-height: 40px;
padding: 9px 36px 9px 13px;
border: 1px solid #dedede;
border-radius: 4px;
background: #fff;
color: #333;
font-size: 12px;
line-height: 1.3;
font-weight: 500;
cursor: pointer;
}
/* Flecha */
body.milestilos-catalog-profile
.bwp-top-bar.top .pwb-dropdown-toggle::after {
content: "";
position: absolute;
right: 14px;
top: 50%;
width: 7px;
height: 7px;
margin-top: -5px;
border-right: 1px solid #555;
border-bottom: 1px solid #555;
transform: rotate(45deg);
}
/* Menú desplegable */
body.milestilos-catalog-profile
.bwp-top-bar.top .pwb-dropdown-menu {
min-width: 240px;
padding: 7px 0;
border: 1px solid #e4e4e4;
border-radius: 4px;
background: #fff;
box-shadow: 0 5px 18px rgba(0,0,0,.08);
}
body.milestilos-catalog-profile
.bwp-top-bar.top .pwb-dropdown-menu li a {
display: block;
padding: 9px 14px;
color: #444;
font-size: 12px;
line-height: 1.35;
text-decoration: none;
}
body.milestilos-catalog-profile
.bwp-top-bar.top .pwb-dropdown-menu li a:hover {
background: #f7f7f7;
color: #d4a437;
}
/* ----------------------------------------------------------
OCULTAR CAMBIO 2/3/4 COLUMNAS + LISTA
---------------------------------------------------------- */
body.milestilos-catalog-profile
.bwp-top-bar.top .display {
display: none !important;
}
/* ----------------------------------------------------------
FILTROS ACTIVOS
---------------------------------------------------------- */
body.milestilos-catalog-profile
.bwp-top-bar.top .woocommerce-filter-title {
width: 100%;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 7px;
margin-top: 2px;
}
/* Chip */
body.milestilos-catalog-profile
.bwp-top-bar.top .woocommerce-filter-title > span {
position: relative;
display: inline-flex;
align-items: center;
min-height: 32px;
padding: 6px 28px 6px 10px;
border: 1px solid #e2e2e2;
border-radius: 4px;
background: #f6f6f6;
color: #333;
font-size: 11.5px;
line-height: 1.2;
font-weight: 500;
cursor: pointer;
}
/* X del filtro */
body.milestilos-catalog-profile
.bwp-top-bar.top .woocommerce-filter-title > span::after {
content: "×";
position: absolute;
right: 9px;
top: 50%;
transform: translateY(-52%);
font-size: 16px;
line-height: 1;
color: #777;
}
body.milestilos-catalog-profile
.bwp-top-bar.top .woocommerce-filter-title > span:hover {
border-color: #d4a437;
background: #fff;
}
body.milestilos-catalog-profile
.bwp-top-bar.top .woocommerce-filter-title > span:hover::after {
color: #d4a437;
}
/* Limpiar todo */
body.milestilos-catalog-profile
.bwp-top-bar.top .filter_clear_all {
min-height: 32px;
padding: 5px 3px;
border: 0;
background: transparent;
color: #555;
font-size: 11.5px;
line-height: 1.2;
font-weight: 500;
text-decoration: underline;
cursor: pointer;
}
body.milestilos-catalog-profile
.bwp-top-bar.top .filter_clear_all:hover {
color: #d4a437;
}
/* Si no hay filtros activos, no reservar espacio */
body.milestilos-catalog-profile
.bwp-top-bar.top .woocommerce-filter-title:empty {
display: none;
}
/* ----------------------------------------------------------
BOTÓN DE FILTRO MÓVIL
---------------------------------------------------------- */
body.milestilos-catalog-profile
.bwp-top-bar.top .button-filter-toggle {
margin: 0;
}
/* ==========================================================
5. CABECERA DE CATEGORÍA - PROPORCIÓN 1920x350
Producto/escena a la izquierda + texto en zona limpia derecha.
========================================================== */
@media (min-width: 768px) {
body.milestilos-catalog-profile .page-title {
position: relative !important;
/*
* Mantener la relación visual del fondo 1920x350.
* 18.23vw = 350 / 1920 del ancho de viewport.
*/
height: clamp(210px, 13.5vw, 260px) !important;
min-height: clamp(210px, 13.5vw, 260px) !important;
max-height: 260px !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
background-repeat: no-repeat !important;
background-size: cover !important;
background-position: center center !important;
}
/*
* El bloque HTML vive en la zona limpia del fondo.
* No depende del container centrado que trae Mafoil.
*/
body.milestilos-catalog-profile .page-title .container {
position: absolute !important;
top: 50% !important;
left: 55% !important;
right: auto !important;
bottom: auto !important;
transform: translateY(-50%) !important;
width: 39% !important;
max-width: 39% !important;
margin: 0 !important;
padding: 0 !important;
text-align: left !important;
box-sizing: border-box !important;
}
body.milestilos-catalog-profile .page-title .content-title-heading,
body.milestilos-catalog-profile .page-title .title-heading,
body.milestilos-catalog-profile .page-title .content-breadcrumb {
position: static !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
transform: none !important;
text-align: left !important;
}
body.milestilos-catalog-profile .page-title .text-title-heading,
body.milestilos-catalog-profile .page-title h1,
body.milestilos-catalog-profile .page-title .title-heading {
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
text-align: left !important;
}
body.milestilos-catalog-profile .page-title .breadcrumb {
display: flex !important;
justify-content: flex-start !important;
margin-left: 0 !important;
margin-right: 0 !important;
text-align: left !important;
}
/*
* Respiración entre la cabecera de categoría y la zona de filtros/productos.
* Evita que el sidebar parezca pegado al banner.
*/
body.milestilos-catalog-profile .main-archive-product {
padding-top: 34px !important;
}
}
/* ==========================================================
6. HOVER DE FICHA COMPLETA - ESTILO TECNOLÓGICO
Solo escritorio/laptop con mouse. Sin Quick View ni botones.
========================================================== */
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
/*
* La tarjeta completa recibe el estado hover.
* No cambiamos el destino del clic: imagen y título siguen
* siendo los enlaces naturales al detalle.
*/
body.milestilos-catalog-profile
.milestilos-product-card {
position: relative !important;
z-index: 1;
border-radius: 14px !important;
background: #fff !important;
transition:
transform .30s cubic-bezier(.2,.7,.2,1),
box-shadow .30s ease,
background-color .30s ease !important;
}
body.milestilos-catalog-profile
.milestilos-product-card:hover {
z-index: 5;
transform: translateY(-4px);
box-shadow:
0 0 0 1px rgba(212,164,55,.26),
0 18px 42px rgba(20,26,35,.11) !important;
background: #fff !important;
}
/*
* Mafoil dispone de una segunda imagen para hover.
* En esta PLP dejamos siempre visible la destacada.
*/
body.milestilos-catalog-profile
.milestilos-product-card .product-thumb-hover img.hover-image,
body.milestilos-catalog-profile
.milestilos-product-card .product-thumb-hover img.back,
body.milestilos-catalog-profile
.milestilos-product-card .products-thumb img.hover-image,
body.milestilos-catalog-profile
.milestilos-product-card .products-thumb img.back {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
body.milestilos-catalog-profile
.milestilos-product-card .milestilos-product-image {
cursor: pointer !important;
border-radius: 12px 12px 8px 8px !important;
overflow: hidden !important;
}
body.milestilos-catalog-profile
.milestilos-product-card img.wp-post-image {
position: relative !important;
z-index: 2 !important;
opacity: 1 !important;
visibility: visible !important;
transition:
transform .32s cubic-bezier(.2,.7,.2,1),
filter .32s ease !important;
}
/*
* Capa de vidrio muy ligera sobre la imagen.
* Se percibe moderna, pero no tapa el producto.
*/
body.milestilos-catalog-profile
.milestilos-product-card .milestilos-product-image::after {
content: "";
position: absolute;
inset: 8px;
z-index: 11;
border: 1px solid rgba(255,255,255,.55);
border-radius: 10px;
background:
linear-gradient(
180deg,
rgba(255,255,255,.015) 0%,
rgba(255,255,255,.015) 62%,
rgba(19,25,34,.06) 100%
);
box-shadow:
inset 0 0 0 1px rgba(212,164,55,.12);
opacity: 0;
transform: scale(.99);
transition:
opacity .25s ease,
transform .30s cubic-bezier(.2,.7,.2,1);
pointer-events: none;
}
/*
* Indicador mínimo de navegación.
* No es un botón ni intercepta el clic.
*/
body.milestilos-catalog-profile
.milestilos-product-card .milestilos-product-image::before {
content: "↗";
position: absolute;
right: 18px;
bottom: 18px;
z-index: 12;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255,255,255,.78);
border-radius: 50%;
background: rgba(255,255,255,.86);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
box-shadow:
0 8px 20px rgba(15,20,28,.14);
color: #171717;
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1;
font-weight: 400;
opacity: 0;
transform: translateY(7px) scale(.92);
transition:
opacity .22s ease,
transform .28s cubic-bezier(.2,.7,.2,1);
pointer-events: none;
}
body.milestilos-catalog-profile
.milestilos-product-card:hover .milestilos-product-image::after,
body.milestilos-catalog-profile
.milestilos-product-card:hover .milestilos-product-image::before,
body.milestilos-catalog-profile
.milestilos-product-card .milestilos-product-image:focus-within::after,
body.milestilos-catalog-profile
.milestilos-product-card .milestilos-product-image:focus-within::before {
opacity: 1;
transform: translateY(0) scale(1);
}
body.milestilos-catalog-profile
.milestilos-product-card:hover img.wp-post-image,
body.milestilos-catalog-profile
.milestilos-product-card .milestilos-product-image:focus-within img.wp-post-image {
transform: scale(1.135) !important;
filter: saturate(1.03) contrast(1.01) !important;
}
/*
* El título acompaña el hover de la ficha.
*/
body.milestilos-catalog-profile
.milestilos-product-card:hover .milestilos-product-title a {
color: #9a731e !important;
}
}
/* ==========================================================
7. TARJETA RETAIL - TABLET / ESCRITORIO
Imagen protagonista + ficha compacta, sin CTA permanente.
========================================================== */
@media (min-width: 768px) {
body.milestilos-catalog-profile
.milestilos-product-card {
height: auto !important;
min-height: 0 !important;
}
/*
* La tienda usa 3 columnas en desktop: aprovechamos ese ancho.
* La imagen vuelve a ser el elemento dominante de la tarjeta.
*/
body.milestilos-catalog-profile
.milestilos-product-card .products-thumb,
body.milestilos-catalog-profile
.milestilos-product-card .milestilos-product-image {
height: clamp(230px, 15vw, 280px) !important;
min-height: clamp(230px, 15vw, 280px) !important;
max-height: clamp(230px, 15vw, 280px) !important;
overflow: hidden !important;
background: #fff !important;
}
body.milestilos-catalog-profile
.milestilos-product-card .products-thumb img,
body.milestilos-catalog-profile
.milestilos-product-card .milestilos-product-image img {
width: 100% !important;
height: clamp(230px, 15vw, 280px) !important;
max-height: clamp(230px, 15vw, 280px) !important;
object-fit: contain !important;
object-position: center center !important;
transform: scale(1.10);
transform-origin: center center;
}
/*
* Ficha compacta. Se reserva una fila pequeña para la valoración
* para mantener precios alineados cuando solo algunos productos
* tienen reseñas.
*/
body.milestilos-catalog-profile
.milestilos-product-content,
body.milestilos-catalog-profile
.milestilos-product-card .products-content {
display: grid !important;
grid-template-rows:
14px
40px
30px
16px
24px
16px;
row-gap: 3px !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
padding: 8px 8px 9px !important;
align-content: start !important;
}
body.milestilos-catalog-profile .milestilos-product-brand {
grid-row: 1;
min-height: 0 !important;
height: 14px !important;
margin: 0 !important;
font-size: 10.5px !important;
line-height: 14px !important;
overflow: hidden !important;
}
body.milestilos-catalog-profile
.milestilos-product-card .milestilos-product-title {
grid-row: 2;
min-height: 0 !important;
height: 40px !important;
margin: 0 !important;
font-size: 12.5px !important;
line-height: 1.35 !important;
overflow: hidden !important;
}
body.milestilos-catalog-profile
.milestilos-product-card .milestilos-product-title a {
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 2 !important;
line-clamp: 2 !important;
overflow: hidden !important;
}
body.milestilos-catalog-profile .milestilos-product-specs {
grid-row: 3;
min-height: 0 !important;
height: 30px !important;
margin: 0 !important;
overflow: hidden !important;
}
body.milestilos-catalog-profile .milestilos-product-spec-line {
font-size: 10.5px !important;
line-height: 1.35 !important;
}
body.milestilos-catalog-profile .milestilos-product-rating {
grid-row: 4;
align-self: center !important;
min-height: 0 !important;
height: 16px !important;
margin: 0 !important;
gap: 4px !important;
overflow: hidden !important;
}
body.milestilos-catalog-profile
.milestilos-product-rating .star-rating {
margin: 0 !important;
font-size: 12px !important;
line-height: 1 !important;
height: 13px !important;
}
body.milestilos-catalog-profile .milestilos-rating-count {
font-size: 10px !important;
line-height: 13px !important;
}
body.milestilos-catalog-profile .milestilos-product-price {
grid-row: 5;
align-self: center !important;
margin: 0 !important;
padding: 0 !important;
font-size: 16px !important;
line-height: 24px !important;
}
body.milestilos-catalog-profile .milestilos-product-price del {
font-size: 10.5px !important;
line-height: 24px !important;
}
body.milestilos-catalog-profile .milestilos-product-availability {
grid-row: 6;
align-self: center !important;
min-height: 0 !important;
height: 16px !important;
margin: 0 !important;
gap: 4px !important;
font-size: 10px !important;
line-height: 16px !important;
}
body.milestilos-catalog-profile .milestilos-stock-dot {
width: 5px !important;
height: 5px !important;
}
/*
* En PLP la imagen y el título ya llevan al detalle.
* Quitamos el CTA permanente para ganar espacio y acercarnos
* al patrón de grandes retailers.
*/
body.milestilos-catalog-profile .milestilos-view-product {
display: none !important;
}
}
/*
* Laptop: mantenemos imagen grande, pero controlada.
* No volver a reducirla a 175px.
*/
@media (min-width: 768px) and (max-width: 1366px) {
body.milestilos-catalog-profile
.milestilos-product-card .products-thumb,
body.milestilos-catalog-profile
.milestilos-product-card .milestilos-product-image {
height: 225px !important;
min-height: 225px !important;
max-height: 225px !important;
}
body.milestilos-catalog-profile
.milestilos-product-card .products-thumb img,
body.milestilos-catalog-profile
.milestilos-product-card .milestilos-product-image img {
height: 225px !important;
max-height: 225px !important;
transform: scale(1.10);
}
body.milestilos-catalog-profile
.milestilos-product-content,
body.milestilos-catalog-profile
.milestilos-product-card .products-content {
grid-template-rows:
13px
38px
28px
15px
22px
15px;
row-gap: 2px !important;
padding: 7px 6px 8px !important;
}
body.milestilos-catalog-profile
.milestilos-product-card .milestilos-product-title {
height: 38px !important;
font-size: 11.7px !important;
}
body.milestilos-catalog-profile .milestilos-product-specs {
height: 28px !important;
}
}
/* ==========================================================
8. MÓVIL FINAL - MONITORES
Grid compacto + tarjeta + breadcrumb
========================================================== */
@media (max-width: 767px) {
/* ------------------------------------------------------
BREADCRUMB / CABECERA DE CATEGORÍA
------------------------------------------------------ */
body.milestilos-catalog-profile .page-title {
display: flex !important;
align-items: center !important;
width: 100% !important;
height: 110px !important;
min-height: 110px !important;
max-height: 110px !important;
margin: 0 0 16px !important;
padding: 0 !important;
overflow: hidden !important;
background-repeat: no-repeat !important;
background-size: cover !important;
background-position: center center !important;
}
body.milestilos-catalog-profile .page-title .container {
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
transform: none !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 12px 0 44% !important;
}
body.milestilos-catalog-profile .page-title .content-title-heading,
body.milestilos-catalog-profile .page-title .title-heading,
body.milestilos-catalog-profile .page-title .content-breadcrumb {
position: static !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
transform: none !important;
width: auto !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
text-align: left !important;
opacity: 1 !important;
visibility: visible !important;
}
body.milestilos-catalog-profile .page-title .text-title-heading,
body.milestilos-catalog-profile .page-title h1,
body.milestilos-catalog-profile .page-title .title-heading {
display: block !important;
width: auto !important;
height: auto !important;
min-height: 0 !important;
margin: 0 0 5px !important;
padding: 0 !important;
font-size: 18px !important;
line-height: 1.1 !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
text-transform: uppercase !important;
color: #1f1f1f !important;
white-space: normal !important;
opacity: 1 !important;
visibility: visible !important;
}
body.milestilos-catalog-profile .page-title .breadcrumb {
position: static !important;
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 2px 4px !important;
width: auto !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
font-size: 9px !important;
line-height: 1.25 !important;
color: #555 !important;
opacity: 1 !important;
visibility: visible !important;
}
body.milestilos-catalog-profile .page-title .breadcrumb,
body.milestilos-catalog-profile .page-title .breadcrumb a,
body.milestilos-catalog-profile .page-title .breadcrumb span,
body.milestilos-catalog-profile .page-title .breadcrumb li {
font-size: 9px !important;
line-height: 1.25 !important;
}
/* ------------------------------------------------------
BARRA FILTRO / ORDENAMIENTO
------------------------------------------------------ */
body.milestilos-catalog-profile .bwp-top-bar.top {
gap: 8px !important;
margin-bottom: 10px !important;
}
body.milestilos-catalog-profile
.bwp-top-bar.top .woocommerce-ordering {
flex: 1 !important;
min-width: 0 !important;
margin: 0 !important;
}
body.milestilos-catalog-profile
.bwp-top-bar.top .pwb-dropdown-toggle {
min-height: 38px !important;
padding: 8px 34px 8px 10px !important;
font-size: 10.5px !important;
line-height: 1.2 !important;
}
body.milestilos-catalog-profile
.bwp-top-bar.top .woocommerce-filter-title {
gap: 5px !important;
margin-top: 0 !important;
}
body.milestilos-catalog-profile
.bwp-top-bar.top .woocommerce-filter-title > span {
min-height: 28px !important;
padding: 5px 25px 5px 8px !important;
font-size: 10px !important;
}
/* ------------------------------------------------------
GRID: elimina alturas/anchos heredados de Bootstrap
------------------------------------------------------ */
body.milestilos-catalog-profile
.content-products-list ul.products-list.grid,
body.milestilos-catalog-profile
ul.products-list.grid {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
grid-auto-rows: auto !important;
column-gap: 10px !important;
row-gap: 18px !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
align-items: start !important;
}
body.milestilos-catalog-profile
ul.products-list.grid > li.product {
float: none !important;
clear: none !important;
display: block !important;
width: auto !important;
max-width: none !important;
min-width: 0 !important;
height: auto !important;
min-height: 0 !important;
flex: none !important;
margin: 0 !important;
padding: 0 !important;
align-self: start !important;
}
body.milestilos-catalog-profile
ul.products-list.grid > li.product .products-entry,
body.milestilos-catalog-profile
ul.products-list.grid > li.product .product-wapper,
body.milestilos-catalog-profile
ul.products-list.grid > li.product .milestilos-product-card {
display: block !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* ------------------------------------------------------
IMAGEN: caja compacta, sin hueco artificial
------------------------------------------------------ */
/*
* Mafoil genera capas adicionales dentro de la miniatura
* (.product-thumb-hover y .woocommerce-LoopProduct-link).
* En móvil fijamos TODA la cadena a la misma altura para evitar
* que la imagen conserve una altura heredada de ~395 px y quede
* recortada por overflow.
*/
body.milestilos-catalog-profile
.milestilos-product-card .products-thumb,
body.milestilos-catalog-profile
.milestilos-product-card .milestilos-product-image,
body.milestilos-catalog-profile
.milestilos-product-card .product-thumb-hover,
body.milestilos-catalog-profile
.milestilos-product-card .woocommerce-LoopProduct-link {
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 152px !important;
min-height: 152px !important;
max-height: 152px !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
background: #fff !important;
}
body.milestilos-catalog-profile
.milestilos-product-card .milestilos-product-image-link {
display: contents !important;
}
/*
* IMPORTANTE:
* Mafoil carga dos imágenes cuando está activo el efecto hover:
* - .wp-post-image = imagen destacada del producto
* - .hover-image.back = imagen secundaria/hover
*
* En móvil mostramos únicamente la destacada. La versión anterior
* estilaba todos los ![]()
de products-thumb y hacía visible también
* la imagen hover, que quedaba superpuesta encima.
*/
body.milestilos-catalog-profile
.milestilos-product-card img.wp-post-image {
position: relative !important;
z-index: 2 !important;
display: block !important;
width: 100% !important;
height: 152px !important;
min-height: 152px !important;
max-height: 152px !important;
max-width: 100% !important;
margin: 0 auto !important;
padding: 0 !important;
object-fit: contain !important;
object-position: center center !important;
opacity: 1 !important;
visibility: visible !important;
transform: scale(1.12) !important;
transform-origin: center center !important;
}
/* Ocultar exclusivamente la imagen secundaria del efecto hover en móvil. */
body.milestilos-catalog-profile
.milestilos-product-card .product-thumb-hover img.hover-image,
body.milestilos-catalog-profile
.milestilos-product-card .product-thumb-hover img.back,
body.milestilos-catalog-profile
.milestilos-product-card .products-thumb img.hover-image,
body.milestilos-catalog-profile
.milestilos-product-card .products-thumb img.back {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
/* ------------------------------------------------------
BADGES
------------------------------------------------------ */
body.milestilos-catalog-profile .milestilos-product-wishlist {
top: 6px !important;
right: 6px !important;
}
body.milestilos-catalog-profile .milestilos-product-wishlist button,
body.milestilos-catalog-profile .milestilos-product-wishlist a {
width: 28px !important;
height: 28px !important;
min-width: 28px !important;
min-height: 28px !important;
}
body.milestilos-catalog-profile .milestilos-product-wishlist button::after,
body.milestilos-catalog-profile .milestilos-product-wishlist a::after {
font-size: 18px !important;
}
body.milestilos-catalog-profile .milestilos-product-card .onsale,
body.milestilos-catalog-profile .milestilos-product-card .product-label .onsale,
body.milestilos-catalog-profile .milestilos-product-card .product-label .sale {
top: 6px !important;
left: 6px !important;
padding: 4px 6px !important;
font-size: 9.5px !important;
border-radius: 3px !important;
}
/* ------------------------------------------------------
CONTENIDO DE TARJETA: sin min-heights ni flex que estire
------------------------------------------------------ */
body.milestilos-catalog-profile .milestilos-product-content,
body.milestilos-catalog-profile .milestilos-product-card .products-content {
display: grid !important;
grid-template-rows:
12px
43px
25px
14px
18px
13px;
row-gap: 2px !important;
flex: none !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 5px 4px 7px !important;
align-content: start !important;
}
body.milestilos-catalog-profile .milestilos-product-brand {
grid-row: 1;
min-height: 0 !important;
height: 12px !important;
margin: 0 !important;
font-size: 9px !important;
line-height: 12px !important;
overflow: hidden !important;
}
body.milestilos-catalog-profile
.milestilos-product-card .milestilos-product-title {
grid-row: 2;
height: 43px !important;
min-height: 0 !important;
margin: 0 !important;
font-size: 11px !important;
line-height: 1.3 !important;
overflow: hidden !important;
}
body.milestilos-catalog-profile
.milestilos-product-card .milestilos-product-title a {
display: -webkit-box !important;
overflow: hidden !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 3 !important;
line-clamp: 3 !important;
}
body.milestilos-catalog-profile .milestilos-product-specs {
grid-row: 3;
min-height: 0 !important;
height: 25px !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
font-size: 0 !important;
line-height: 1.25 !important;
}
body.milestilos-catalog-profile .milestilos-product-spec-line {
display: inline !important;
margin: 0 !important;
padding: 0 !important;
font-size: 9px !important;
line-height: 1.25 !important;
color: #666 !important;
}
body.milestilos-catalog-profile
.milestilos-product-spec-line + .milestilos-product-spec-line::before {
content: " · ";
}
/*
* Fila fija de valoración (14 px). Si el producto no tiene reseñas
* la fila queda vacía, pero precio/stock/botón permanecen alineados.
*/
body.milestilos-catalog-profile .milestilos-product-rating {
grid-row: 4;
align-self: center !important;
height: 14px !important;
min-height: 0 !important;
margin: 0 !important;
gap: 3px !important;
overflow: hidden !important;
}
body.milestilos-catalog-profile
.milestilos-product-rating .star-rating {
margin: 0 !important;
font-size: 10.5px !important;
line-height: 1 !important;
height: 12px !important;
}
body.milestilos-catalog-profile .milestilos-rating-count {
font-size: 8.5px !important;
line-height: 12px !important;
}
body.milestilos-catalog-profile .milestilos-product-price {
grid-row: 5;
align-self: center !important;
margin: 0 !important;
padding: 0 !important;
font-size: 13px !important;
line-height: 18px !important;
font-weight: 600 !important;
}
body.milestilos-catalog-profile .milestilos-product-price del {
display: inline !important;
margin: 0 4px 0 0 !important;
font-size: 9px !important;
line-height: 18px !important;
}
body.milestilos-catalog-profile .milestilos-product-price ins {
display: inline !important;
}
body.milestilos-catalog-profile .milestilos-product-availability {
grid-row: 6;
align-self: center !important;
gap: 3px !important;
min-height: 0 !important;
height: 13px !important;
margin: 0 !important;
font-size: 9px !important;
line-height: 13px !important;
}
body.milestilos-catalog-profile .milestilos-stock-dot {
width: 4px !important;
height: 4px !important;
}
body.milestilos-catalog-profile .milestilos-view-product {
display: none !important;
}
/* ------------------------------------------------------
DRAWER DE FILTROS
------------------------------------------------------ */
body.milestilos-catalog-profile #bwp_form_filter_product .bwp-filter,
body.milestilos-catalog-profile #bwp_form_filter_product .bwp-filter-price {
padding: 16px 0 18px !important;
}
body.milestilos-catalog-profile #bwp_form_filter_product .bwp-filter-price {
padding-top: 5px !important;
}
body.milestilos-catalog-profile #bwp_form_filter_product .content_filter label.name {
min-height: 34px !important;
padding: 7px 11px !important;
font-size: 12px !important;
}
}
/* ==========================================================
FEEDBACK AJAX - ORDENAMIENTO / FILTROS
Cierra el desplegable por JS y muestra estado de trabajo.
========================================================== */
body.milestilos-catalog-profile
.bwp-top-bar.top .woocommerce-ordering.milestilos-ordering-loading
.pwb-dropdown-toggle {
padding-right: 42px !important;
color: #222 !important;
}
/* Mientras ordena, la flecha se convierte en spinner. */
body.milestilos-catalog-profile
.bwp-top-bar.top .woocommerce-ordering.milestilos-ordering-loading
.pwb-dropdown-toggle::after {
width: 15px !important;
height: 15px !important;
right: 13px !important;
top: 50% !important;
margin-top: -8px !important;
border: 2px solid #e2e2e2 !important;
border-top-color: #d4a437 !important;
border-radius: 50% !important;
transform: none !important;
animation: milestilos-spin .7s linear infinite;
}
/* Área de productos: conservar espacio mientras responde AJAX. */
body.milestilos-catalog-profile .content-products-list {
position: relative !important;
min-height: 180px;
}
/* Capa ligera durante cualquier filtro/ordenamiento AJAX. */
body.milestilos-catalog-profile .content-products-list.active::before {
content: "";
position: absolute;
inset: 0;
z-index: 70;
background: rgba(224, 227, 234, .30);
-webkit-backdrop-filter: blur(0.8px);
backdrop-filter: blur(0.8px);
pointer-events: all;
}
/*
* Wpbingo ya inserta:
*
* Lo convertimos en un indicador moderno y visible.
*/
body.milestilos-catalog-profile
.content-products-list .loading.loading-filter {
position: absolute !important;
top: 72px !important;
left: 50% !important;
z-index: 80 !important;
width: auto !important;
min-width: 180px !important;
height: 44px !important;
margin: 0 !important;
padding: 0 18px 0 46px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transform: translateX(-50%) !important;
border: 1px solid rgba(212, 164, 55, .26) !important;
border-radius: 22px !important;
background: rgba(255, 255, 255, .96) !important;
background-image: none !important;
box-shadow: 0 10px 30px rgba(18, 24, 32, .12) !important;
color: #272727 !important;
font-size: 11px !important;
line-height: 1 !important;
font-weight: 600 !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Spinner del preloader. */
body.milestilos-catalog-profile
.content-products-list .loading.loading-filter::before {
content: "" !important;
position: absolute !important;
left: 15px !important;
top: 50% !important;
display: block !important;
width: 18px !important;
height: 18px !important;
margin: -9px 0 0 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
background: transparent !important;
background-image: none !important;
border: 2px solid #e4e4e4 !important;
border-top-color: #d4a437 !important;
border-right-color: #d4a437 !important;
border-radius: 50% !important;
opacity: 1 !important;
visibility: visible !important;
animation: milestilos-spin .65s linear infinite !important;
pointer-events: none !important;
}
/* Texto del indicador. */
body.milestilos-catalog-profile
.content-products-list .loading.loading-filter::after {
content: "Actualizando productos…";
white-space: nowrap;
}
@keyframes milestilos-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@media (max-width: 767px) {
body.milestilos-catalog-profile
.content-products-list .loading.loading-filter {
top: 55px !important;
min-width: 164px !important;
height: 40px !important;
padding-left: 42px !important;
font-size: 10px !important;
}
}
/* ==========================================================
MONITORES - NORMALIZAR COLUMNAS WPBINGO DESPUÉS DE AJAX
El UL ya es un grid de 2 columnas en móvil.
No permitir que Bootstrap vuelva a reducir cada celda al 50%.
========================================================== */
@media (max-width: 767px) {
body.milestilos-catalog-profile
.content-products-list
ul.products-list.grid > li {
width: 100% !important;
max-width: 100% !important;
flex-basis: auto !important;
flex-grow: 0 !important;
flex-shrink: 1 !important;
box-sizing: border-box !important;
}
body.milestilos-catalog-profile
.content-products-list
ul.products-list.grid > li
.milestilos-product-card {
width: 100% !important;
max-width: 100% !important;
}
}
/* Wpbingo activa esta flecha después del AJAX */
body.milestilos-catalog-profile .back-to-shop {
display: none !important;
}