/* =========================================================================
Puente entre el marcado de WordPress/WooCommerce y el CSS del rediseño.
El resto de hojas son las del prototipo, portadas tal cual. Este archivo
es el ÚNICO sitio donde se añade CSS nuevo, y sólo por una razón:
WooCommerce emite marcado que el prototipo nunca tuvo (avisos, paginación,
contenedores .woocommerce, estados de carga del botón AJAX).
Manteniéndolo aparte se ve de un vistazo qué se ha tocado respecto al
diseño original, y las hojas portadas siguen comparables con las de
../public/css.
========================================================================= */
/* --------------------------------------------------------------- reset -- */
/*
El atributo `hidden` tiene que ganar.
Los navegadores lo aplican con `[hidden] { display: none }` en su hoja de
estilos, que es de autoría del agente y especificidad (0,1,0): cualquier
`display` que declare el tema la anula sin querer. Es un fallo silencioso
y desagradable de encontrar — el elemento sigue a la vista y el
JavaScript «no hace nada».
Aquí pasó dos veces: con el botón «Ver más» de la descripción
(`display: inline-flex`) y con el visor de la galería.
*/
[hidden] {
display: none !important;
}
/* ------------------------------------------------------------ marquesina -- */
/*
El prototipo generaba este grupo desde JS con estilos en línea
(sections.js → renderMarquee). Aquí es una clase para no repetir el
atributo style en cada pasada del bucle.
*/
.marquee__group {
display: flex;
align-items: center;
gap: 2.5rem;
padding: 1rem 1.25rem;
font-family: var(--mono);
font-size: 0.8rem;
letter-spacing: 0.12em;
color: var(--text-2);
white-space: nowrap;
}
/* --------------------------------------------- contenedores de WooCommerce -- */
/*
El shortcode [products] y las plantillas de Woo envuelven todo en
.woocommerce y en .columns-N. Se neutralizan para que la retícula la
gobierne .shop-grid / .prod-grid y no el layout de WooCommerce.
*/
.woocommerce,
.woocommerce-page .woocommerce {
max-width: none;
}
.woocommerce .prod-grid,
.woocommerce .shop-grid {
margin: 0;
padding: 0;
list-style: none;
}
/* Woo añade .columns-N al contenedor; no debe imponer anchos. */
[class*='columns-'] > .prod-grid,
[class*='columns-'] > .shop-grid {
width: 100%;
}
/* La tarjeta lleva .product de wc_product_class(): que no reintroduzca float. */
.prod-card.product,
.prod-card.type-product {
float: none;
width: auto;
margin: 0;
clear: none;
}
/*
Tarjeta a prueba de fallos.
---------------------------
components.css da por hecho que la imagen llena una caja de altura fija
(`height: 220px` + `img { height: 100% }`). Eso se apoya en dos cosas
frágiles con el marcado real de WooCommerce:
· `height: 100%` sobre el depende de que el padre tenga altura
resuelta. Si algo la altera, el colapsa a cero y la tarjeta
queda con un hueco blanco donde debería ir la foto.
· `mix-blend-mode: multiply` obliga al navegador a componer la imagen
en una capa aparte. Combinado con la transición de `transform` del
hover, hay motores que dejan de pintarla.
Aquí se fija la caja por `aspect-ratio` y la imagen por `max-width` /
`max-height`, que no dependen de la altura del padre, y se retira el
modo de fusión. El aspecto es el mismo: el fondo de la caja ya es
blanco, así que `multiply` no aportaba nada sobre estas fotos.
*/
.prod-card__media {
height: auto;
aspect-ratio: 1 / 1;
min-height: 180px;
}
.prod-card__media img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
mix-blend-mode: normal;
}
/* Sin foto: que el hueco no quede vacío del todo. */
.prod-card__media:empty::after,
.prod-card__media img[src=''] {
content: '';
display: block;
width: 40%;
height: 40%;
background: var(--bg-2);
}
/*
El pie de la tarjeta: precio a la izquierda y botón a la derecha, y si no
caben, el botón entero debajo. Sin `min-width: 0` el precio de
WooCommerce (que va envuelto en varios ) impide que la fila
encoja y empuja el botón fuera de la tarjeta.
*/
.prod-card__foot { min-width: 0; }
.prod-card__price { min-width: 0; }
.prod-card__foot .add-btn {
flex-shrink: 0;
}
@media (max-width: 380px) {
.prod-card__foot .add-btn {
width: 100%;
flex-shrink: 1;
}
}
/* --------------------------------------------------- botón «Agregar» AJAX -- */
/*
WooCommerce marca el botón con .loading mientras la petición está en
vuelo y con .added al terminar, y añade un enlace .added_to_cart que en
este diseño sobra (el cajón se abre solo).
*/
.add-btn {
display: inline-block;
text-align: center;
text-decoration: none;
line-height: 1.2;
}
.add-btn.loading {
opacity: 0.6;
pointer-events: none;
}
.add-btn.added {
background: var(--xg);
}
.prod-card .added_to_cart {
display: none;
}
/* Producto no comprable: el enlace «Ver producto» comparte estilo. */
.prod-card .add-btn.product_type_variable,
.prod-card .add-btn.product_type_grouped,
.prod-card .add-btn.product_type_external {
background: var(--panel);
color: var(--ink);
border: 1px solid var(--line-strong);
}
/* ------------------------------------------------------------ paginación -- */
/*
.pager del prototipo estilaba