por enlace: mete los cinco dentro de un mismo
`li.mega-menu__column`, cada uno en su . Medido en el DOM, no
supuesto — la primera versión de esto repartía columnas que no existían
y los cinco salían apilados en una.
Así que la fila se monta aquí: el
pasa a ser una rejilla de
columnas automáticas iguales, y se estira a todo el ancho del panel
porque su sitio de origen era una sola celda de 210px.
*/
.mega-menu__list:has(.lua-mm__icon),
.mega-menu__column:has(.lua-mm__icon) {
grid-column: 1 / -1;
}
.mega-menu__column:has(.lua-mm__icon) {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
align-items: start;
}
/* El filete separa hermanos, así que el primero se queda sin él. */
.mega-menu__column:has(.lua-mm__icon) > div + div {
border-inline-start: 1px solid rgba(10, 15, 14, 0.08);
}
/*
UNA ENTRADA SIN RECONOCER NO PUEDE ROMPER LA FILA. Pasó de verdad: en el
menú de Cats, "Toys" apunta a /collections/cats en vez de a cat-toys —un
error del menú de navegación, no del tema— y al no estar en el mapa
salía sin icono, pegada arriba y desalineada respecto a sus cuatro
vecinas.
Aquí se le da la misma caja que a las demás y se le reserva el hueco del
icono con un pseudo-elemento vacío, así la fila se sostiene aunque el
enlace esté mal apuntado o aunque mañana se añada una subcategoría que
todavía no tenga dibujo.
*/
.mega-menu__column:has(.lua-mm__icon) .mega-menu__link:not(:has(.lua-mm__icon)) {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 26px 18px 24px;
text-align: center;
text-decoration: none;
}
.mega-menu__column:has(.lua-mm__icon) .mega-menu__link:not(:has(.lua-mm__icon))::before {
content: '';
display: block;
width: 48px;
height: 48px;
}
.mega-menu__column:has(.lua-mm__icon) .mega-menu__link:not(:has(.lua-mm__icon)) .mega-menu__link-title {
font-family: var(--lua-font-ui, var(--font-paragraph--family));
font-size: 15px;
font-weight: 700;
line-height: 1.25;
color: #0a0f0e;
}
.lua-mm__icon {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
color: #18acb1;
}
.lua-mm__icon svg {
/* display:block y medidas explícitas: base.css impone un svg/img global. */
display: block;
width: 44px;
height: 44px;
}
.lua-mm__title {
font-family: var(--lua-font-ui, var(--font-paragraph--family));
font-size: 15px;
font-weight: 700;
line-height: 1.25;
color: #0a0f0e;
}
.lua-mm__sub {
max-width: 22ch;
font-family: var(--font-paragraph--family);
font-size: 13px;
font-weight: 400;
line-height: 1.4;
color: #5b6664;
}
/* Sólo el icono responde al puntero: el panel entero quieto. */
.mega-menu__link:has(.lua-mm__icon) .lua-mm__icon {
transition: transform 0.25s var(--ease-out-quad, ease-out);
}
.mega-menu__link:has(.lua-mm__icon):hover .lua-mm__icon {
transform: translateY(-2px);
}
.mega-menu__link:has(.lua-mm__icon):hover .lua-mm__title {
color: #18acb1;
}
@media (prefers-reduced-motion: reduce) {
.mega-menu__link:has(.lua-mm__icon) .lua-mm__icon {
transition: none;
}
}
/*
El apartado abierto se marca en turquesa con un filete debajo, como en
la referencia. Se engancha a [aria-expanded] y no a :hover para que
siga marcado mientras el panel está abierto, también si se abrió con el
teclado.
*/
.menu-list__link[aria-expanded='true'] {
position: relative;
color: #18acb1;
}
.menu-list__link[aria-expanded='true']::after {
content: '';
position: absolute;
inset-inline: 0;
bottom: -6px;
height: 2px;
border-radius: 2px;
background-color: #18acb1;
}
/* ============================================================
PÍLDORA "AVAILABLE IN N COLORS" — 08/08/2026, a una referencia
============================================================
Se coloca en la MISMA CELDA de la rejilla que la galería, no encima de
la tarjeta entera: la tarjeta incluye título y precio, así que un
position:absolute respecto a ella habría dejado la píldora flotando
sobre el texto. Compartiendo celda queda anclada al pie de la
fotografía pase lo que pase con el alto del texto.
Alcance: sólo las rejillas de producto, igual que el resto de reglas de
la tarjeta. La home móvil congelada usa su propia tarjeta y no la ve.
============================================================ */
:is(.product-grid-container, .product-recommendations, [data-testid='product-list'], .lua-also-like)
.product-card__content
> .lua-colors {
/*
Medido en el DOM: con sólo `grid-row: 1` la píldora se llevaba una
fila entera de 40px POR ENCIMA de la foto y empujaba toda la tarjeta
hacia abajo. La galería se coloca automáticamente y caía en la fila 2.
Hay que anclar las dos a la misma fila, y la regla de al lado se
encarga de la galería.
*/
grid-column: 1 / -1;
grid-row: 1;
align-self: end;
justify-self: start;
z-index: 2;
margin: 0 0 12px 12px;
display: inline-flex;
align-items: center;
gap: 8px;
max-width: calc(100% - 24px);
padding: 6px 12px 6px 8px;
border-radius: 999px;
/*
Sólo el fondo se vuelve translúcido. El texto y los puntos son hijos
con su propio color, así que bajar el alfa del background no los
toca; con `opacity` se habrían desvanecido también, que es justo lo
que no se quiere.
El desenfoque no es decorativo: a 0.72 de alfa, sobre una fotografía
con detalle, el texto de 11.5px empezaba a competir con lo que hay
debajo. Difuminando el fondo se mantiene legible sin subir el alfa.
*/
background-color: rgba(255, 255, 255, 0.72);
backdrop-filter: blur(7px);
-webkit-backdrop-filter: blur(7px);
box-shadow: 0 1px 4px rgba(10, 15, 14, 0.1);
/* La tarjeta entera es un enlace; esto no debe robarle el clic. */
pointer-events: none;
}
/*
Sólo en las tarjetas que llevan píldora, con :has, para no tocar el
emplazamiento de la galería en las demás.
*/
:is(.product-grid-container, .product-recommendations, [data-testid='product-list'], .lua-also-like)
.product-card__content:has(> .lua-colors)
> .card-gallery {
grid-row: 1;
}
.lua-colors__mark {
display: flex;
flex: 0 0 auto;
color: #18acb1;
}
.lua-colors__mark svg {
display: block;
width: 16px;
height: 16px;
}
.lua-colors__text {
font-family: var(--font-paragraph--family);
font-size: 11.5px;
font-weight: 500;
line-height: 1;
white-space: nowrap;
color: #0a0f0e;
}
.lua-colors__dots {
display: inline-flex;
flex: 0 0 auto;
gap: 3px;
}
.lua-colors__dot {
width: 9px;
height: 9px;
border-radius: 50%;
/* El filete es lo único que hace visible un punto blanco. */
box-shadow: inset 0 0 0 1px rgba(10, 15, 14, 0.18);
}
/* En rejillas estrechas cabe la cifra, no los puntos. */
@media screen and (max-width: 749px) {
:is(.product-grid-container, .product-recommendations, [data-testid='product-list'], .lua-also-like)
.product-card__content
> .lua-colors {
padding: 5px 10px 5px 7px;
gap: 6px;
}
.lua-colors__text {
font-size: 10.5px;
}
/*
En móvil la píldora comparte fila con el corazón, que está en la
esquina de abajo a la derecha. Con "Available in" delante sumaban más
que el ancho de la tarjeta y se montaban: medido, 11 de 24 tarjetas
solapaban. Se queda la cifra, que es lo que informa.
*/
.lua-colors__pre,
.lua-colors__dots {
display: none;
}
}
/* ============================================================
SUBCATEGORÍAS EN EL CAJÓN DE MÓVIL — 08/08/2026
============================================================
El cajón enseñaba las subcategorías como texto gris suelto bajo el
nombre de la categoría: la misma jerarquía visual que un pie de página,
y sin decir qué hay detrás de cada una. Aquí pasan a ser filas con el
icono en un disco, el nombre y su frase — el mismo contenido que el
mega-menú de escritorio, servido por el mismo snippet.
Todo cuelga de `.lua-mm__icon`, es decir, sólo de las entradas que
lua-menu-entry reconoce. Los demás enlaces del cajón —Home, Best
Sellers, Track Order— no se tocan.
============================================================ */
.menu-drawer .menu-drawer__menu-item--child:has(.lua-mm__icon) {
display: grid;
grid-template-columns: 44px minmax(0, 1fr);
align-items: center;
column-gap: 14px;
row-gap: 2px;
padding: 10px 0;
}
.menu-drawer .menu-drawer__menu-item--child .lua-mm__icon {
grid-row: 1 / span 2;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
background-color: #eaf5f5;
color: #2f8a8d;
}
.menu-drawer .menu-drawer__menu-item--child .lua-mm__icon svg {
display: block;
width: 24px;
height: 24px;
}
.menu-drawer .menu-drawer__menu-item--child .lua-mm__title {
align-self: end;
font-family: var(--lua-font-ui, var(--font-paragraph--family));
font-size: 16px;
font-weight: 600;
line-height: 1.2;
color: #0a0f0e;
}
.menu-drawer .menu-drawer__menu-item--child .lua-mm__sub {
align-self: start;
font-family: var(--font-paragraph--family);
font-size: 13px;
font-weight: 400;
line-height: 1.35;
color: #6b7574;
/*
Dos líneas como mucho. "Adventure starts with comfort and control."
ocupa tres en una columna de 300px y separaba tanto las filas que la
lista dejaba de leerse como un grupo.
*/
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
/*
Un poco de aire entre el nombre de la categoría y su lista, y un filete
que agrupa: sin él, las filas con icono flotaban entre dos titulares
grandes sin pertenecer a ninguno.
*/
.menu-drawer .menu-drawer__menu--childlist:has(.lua-mm__icon) {
margin-block: 6px 18px;
padding-inline-start: 2px;
border-inline-start: 2px solid #eaf5f5;
padding-inline-start: 14px;
}
/* ============================================================
ETIQUETA DE BEST SELLER EN LA TARJETA — 08/08/2026
============================================================
Píldora compacta arriba a la izquierda, con el corazón a su lado en la
misma línea.
Antes fue una cinta plegada como la de la home, primero horizontal y
luego vertical de canto. Las dos ocupaban la esquina del corazón: la
horizontal obligaba a bajarlo hasta media fotografía y la vertical no
quedaba bien. La esquina de la derecha tampoco servía —dos de los
cuatro best sellers tienen descuento, y ahí es donde va esa etiqueta—
así que la solución es una forma que quepa AL LADO del corazón en vez
de disputarle el sitio.
Va en la misma celda de rejilla que la galería, como la píldora de
colores.
============================================================ */
:is(.product-grid-container, .product-recommendations, [data-testid='product-list'], .lua-also-like)
.product-card__content
> .lua-bs-ribbon {
grid-column: 1 / -1;
grid-row: 1;
align-self: start;
justify-self: start;
z-index: 3;
margin: 12px 0 0 12px;
display: inline-flex;
align-items: center;
gap: 5px;
height: 34px;
padding: 0 11px;
border-radius: 999px;
background-color: #14969b;
box-shadow: 0 1px 4px rgba(10, 15, 14, 0.16);
pointer-events: none;
}
.lua-bs-ribbon__star {
display: block;
width: 12px;
height: 12px;
color: #ffffff;
}
.lua-bs-ribbon__text {
font-family: var(--lua-font-ui, var(--font-paragraph--family));
font-size: 10.5px;
font-weight: 700;
line-height: 1;
letter-spacing: 0.06em;
text-transform: uppercase;
white-space: nowrap;
color: #ffffff;
}
/*
EL CORAZÓN SE VA A LA ESQUINA INFERIOR DERECHA. Con eso las cuatro
esquinas de la fotografía quedan repartidas sin que ninguna se dispute:
best seller arriba a la izquierda, descuento arriba a la derecha,
colores abajo a la izquierda y el corazón abajo a la derecha.
Deja de ser `position: absolute` y pasa a ocupar la misma celda de
rejilla que la galería. Absoluto se posicionaba respecto a la tarjeta
ENTERA —que incluye título y precio— así que un `bottom: 12px` lo habría
dejado debajo del precio en vez de sobre la foto.
Sólo aquí: en la página de favoritos el corazón sigue siendo absoluto
dentro de su propio marco, y esa regla vive en lua-wishlist.css.
*/
:is(.product-grid-container, .product-recommendations, [data-testid='product-list'], .lua-also-like)
.product-card__content
> .lua-wish {
position: static;
grid-column: 1 / -1;
grid-row: 1;
align-self: end;
justify-self: end;
z-index: 3;
margin: 0 12px 12px 0;
}
/*
En móvil la píldora se encoge. La tarjeta mide 189px, así que con el
tamaño de escritorio la etiqueta ocupaba el 61% del ancho de la
fotografía: demasiado peso para lo que es.
Medidos cuatro tamaños sobre la tarjeta real —51%, 47%, 44% y 42%— y
elegido el de 8px, que baja al 44%. El siguiente escalón ganaba dos
puntos y ya se leía mal.
*/
@media screen and (max-width: 749px) {
:is(.product-grid-container, .product-recommendations, [data-testid='product-list'], .lua-also-like)
.product-card__content
> .lua-bs-ribbon {
height: 22px;
gap: 4px;
padding: 0 7px;
margin: 10px 0 0 10px;
}
.lua-bs-ribbon__star {
width: 9px;
height: 9px;
}
.lua-bs-ribbon__text {
font-size: 8px;
letter-spacing: 0.05em;
}
}
/*
Y la galería comparte esa fila SIEMPRE, no sólo cuando hay etiqueta:
ahora el corazón también vive en ella, y el corazón está en todas las
tarjetas. Sin esto, cada capa se llevaba una fila propia y empujaba la
foto hacia abajo.
*/
:is(.product-grid-container, .product-recommendations, [data-testid='product-list'], .lua-also-like)
.product-card__content
> .card-gallery {
grid-row: 1;
}