/* ========================================================================== The Lab Room · listado de tienda y de categoría Solo lo propio de estas dos páginas. La paleta, la retícula, los botones y la tarjeta de producto salen de piezas.css, que es la hoja compartida. Se encola a 100001, después de las de WooCommerce, que aquí se conservan porque son las que hacen funcionar el añadir al carrito y el selector de orden. Todo lo de abajo gana por orden de cascada, sin !important. ========================================================================== */ /* 9 de septiembre: sin aire arriba, la banda arranca pegada a la cabecera (referencia: la "Shop All" de omorovicza.eu, medida a 1440: cabecera → banda sin blanco, migas dentro de la banda, barra de filtros con fondo propio y la rejilla debajo). */ .listado{padding-top:0} /* ---------- migas ---------- */ /* 18 oct, tipografía A (Oak, elegida por Dani para toda la web): migas, filtros y orden en la voz de etiqueta; título en Zodiak 300; descripción en Archivo 300 a 14,5/1,75. Tokens de design-system.css, con reserva. */ .listado-migas{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font:var(--tlr-t-etiqueta,600 11.5px/1.3 'Archivo',system-ui,sans-serif);letter-spacing:var(--tlr-t-etiqueta-ls,.16em);text-transform:uppercase;color:var(--ink-soft);margin-bottom:clamp(1.4rem,2.6vw,2.1rem)} .listado-migas a{transition:opacity .3s} .listado-migas a:hover{opacity:.6} .listado-migas span[aria-current]{color:var(--ink);font-weight:600} .listado-avisos:empty{display:none} /* ---------- cabecera de colección, con banda ---------- */ /* Oportunidad del 7 de septiembre, referencia estructural de la "Shop All" de omorovicza.eu: el título dejaba de ir desnudo sobre blanco. La regla de oro del proyecto es tomar la estructura y no la piel, así que el color es nuestro: un lavado suave del salvia de los botones (`--eucalyptus`), no el color sólido — a toda anchura y sólido se leía como un botón gigante, medido en pantalla antes de decidir esto. `.listado-cabeza` pierde su margen propio porque ahora el espacio lo da la banda que lo envuelve. */ /* 9 de septiembre: Dani pide la cabecera de tienda igual que la referencia, que lleva su banda a color pleno pegada a la cabecera. El equivalente en nuestra piel es el salvia oficial sólido (`--eucalyptus`) con la tinta encima, sin lavado: ya no hay migas en blanco por encima ni blanco entre cabecera y banda, que era lo que la hacía leerse como un botón gigante. Sin margen inferior: la barra de filtros va pegada debajo. */ .listado-banda{position:relative;overflow:hidden;background:var(--eucalyptus);padding-block:clamp(1.3rem,2.4vw,1.9rem) clamp(2.4rem,4.6vw,3.5rem);margin-bottom:0} .listado-banda>.wrap{position:relative;z-index:1} /* 10 de septiembre: la tienda entera (sin foto) deja el salvia plano por un degradado de la misma familia: base salvia → salvia lavado hacia la derecha, un claro de bone arriba a la derecha y una sombra de verde-texto abajo a la izquierda. Ningún color nuevo: todo color-mix de los tokens. */ .listado-banda--tienda{background: radial-gradient(70% 140% at 88% 12%, color-mix(in srgb,var(--bone) 58%,var(--eucalyptus)) 0%, transparent 62%), radial-gradient(55% 120% at 10% 105%, color-mix(in srgb,var(--verde-texto) 26%,var(--eucalyptus)) 0%, transparent 58%), linear-gradient(100deg, var(--eucalyptus) 0%, color-mix(in srgb,var(--eucalyptus) 72%,var(--bone)) 100%)} /* ---------- banda con foto de categoría ---------- */ /* 9 de septiembre, referencia: las colecciones de omorovicza.eu llevan una foto a la derecha que se funde en el color de la banda. Aquí la foto ocupa el 60% derecho y su borde izquierdo se desvanece con una máscara hacia el salvia, así el texto sigue en tinta sobre salvia limpio (sin velos oscuros ni texto en blanco, que no son de la casa). Desde 900 px hacia abajo la foto baja debajo del texto, a toda anchura, fundida por arriba. */ /* 10 de septiembre: Dani la quiere "un poco más estrecha" (302 px medidos a 1440 → unos 250) y con una descripción corta debajo del título. */ .listado-banda--foto{min-height:clamp(200px,17.5vw,252px);padding-bottom:clamp(1.6rem,3vw,2.2rem)} .listado-banda--foto .listado-titulo{font-size:clamp(2.2rem,4.8vw,3.8rem)} .listado-banda--foto .listado-intro{margin-top:.8rem;max-width:52ch} .listado-banda__foto{position:absolute;top:0;right:0;bottom:0;width:min(60%,980px); -webkit-mask-image:linear-gradient(to right,transparent,#000 45%);mask-image:linear-gradient(to right,transparent,#000 45%)} /* Las fotos llegan ya recortadas a formato banda (2,4:1) desde assets/photos/bandas-categorias, así el encuadre lo decide el fichero y aquí basta con centrar. */ .listado-banda__foto img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%} .listado-banda--foto .listado-titulo, .listado-banda--foto .listado-intro{max-width:min(58ch,52%)} /* Móvil, segunda versión del 9 de septiembre (Dani: la primera, con la foto debajo del texto, "es una mierda"). Como hace omorovicza.eu a 390 px, medido: la foto pasa a ocupar toda la banda por detrás, con un velo de tinta que crece hacia abajo, y el texto encima en bone. Es el mismo gesto que la cabecera sobre el vídeo de la portada, así que no es un color nuevo en la casa. Sin máscara lateral: aquí no hay salvia que fundir. */ @media(max-width:900px){ .listado-banda--foto{min-height:330px;display:flex;flex-direction:column;justify-content:flex-end; padding-block:1.3rem 2rem;color:var(--bone)} .listado-banda--foto>.wrap{width:100%} .listado-banda__foto{position:absolute;inset:0;width:auto;height:auto;margin:0; -webkit-mask-image:none;mask-image:none} .listado-banda__foto::after{content:"";position:absolute;inset:0; background:linear-gradient(to bottom,rgba(27,26,23,.18),rgba(27,26,23,.68))} .listado-banda--foto .listado-migas{color:var(--bone);opacity:.8;margin-bottom:auto;padding-bottom:1.6rem} .listado-banda--foto .listado-migas span[aria-current]{color:var(--bone)} .listado-banda--foto .listado-titulo, .listado-banda--foto .listado-intro{max-width:58ch;color:var(--bone)} } /* La hoja del tema viejo pone `h1` en mayúsculas por debajo de 1024 px; el título de colección se queda en caja normal, como en escritorio. */ .listado-banda h1.listado-titulo{text-transform:none} .listado-cabeza{max-width:min(var(--maxw),100%)} .listado-titulo{font-family:var(--serif);font-weight:var(--tlr-t-titulo-peso,300);font-size:clamp(2.4rem,5.5vw,4.4rem);line-height:1.02;letter-spacing:-.015em;margin:0} .listado-intro{margin-top:1.1rem;max-width:58ch;color:var(--ink-soft);font:var(--tlr-t-cuerpo,300 14.5px/1.75 'Archivo',system-ui,sans-serif)} .listado-intro p+p{margin-top:.8rem} .listado-intro a{border-bottom:1px solid var(--line)} /* ---------- subcategorías ---------- */ /* 10 de septiembre: los chips van dentro de la franja de filtros. Sobre el gris de la franja llevan fondo bone para leerse como pastillas. */ .listado-hijas{display:flex;flex-wrap:wrap;gap:.5rem;margin:0} .listado-barra .chip{background:var(--bone);padding:.45rem .85rem;font-size:.68rem} .chip--link{display:inline-flex;align-items:center;gap:.5rem;transition:background .35s,color .35s,border-color .35s} .chip--link:hover{background:var(--eucalyptus);border-color:var(--eucalyptus);color:var(--ink)} .chip-num{font-size:.62rem;opacity:.6;font-variant-numeric:tabular-nums} /* ---------- barra de filtros, contador y orden ---------- */ /* "Filtrar: Disponibilidad · Precio" a la izquierda, referencia de omorovicza.eu — pero aquí es SOLO la franja y el texto, no un filtro que funcione. Montar el filtro real pide los bloques de filtro de WooCommerce 11 (Gutenberg) con `render_block()` y estado de la Store API para no recargar la página: un cambio de plantilla mucho más gordo que esta franja, apuntado para quien lo retome. El texto no lleva ningún estilo de botón o enlace a propósito: no es clicable todavía y fingir que lo es sería peor que no ponerlo. */ /* 9 de septiembre: franja con fondo propio a toda anchura, pegada bajo la banda, en la familia neutra de las baldosas de producto (un velo de tinta sobre el blanco, no un hex nuevo). Sin filo inferior: el cambio de fondo ya separa. Los tres términos van sueltos, con el mismo aire entre ellos que en la referencia. El contador de WooCommerce ya no se pinta. */ .listado-barra{background:color-mix(in srgb,var(--ink) 7%,var(--bone));padding-block:1.25rem;margin-bottom:clamp(1.8rem,3vw,2.6rem)} .listado-barra__in{display:flex;justify-content:space-between;align-items:center;gap:1rem 1.5rem;flex-wrap:wrap} /* ---------- guía de Elementor (rutinas, perfumes, tarjetas) ---------- */ .listado-guia{margin-bottom:clamp(2rem,4vw,3.5rem)} /* Las fotos de las guías vienen a tamaño completo (1296×729 medido); se acotan en alto para que la guía no se coma la pantalla antes de la rejilla. */ .listado-guia img{max-width:100%;height:auto;max-height:480px;object-fit:cover} .listado-guia .elementor-section.elementor-section-boxed>.elementor-container{max-width:100%} .listado-filtros{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(1.2rem,2.6vw,2.4rem);margin:0; font:var(--tlr-t-etiqueta,600 11.5px/1.3 'Archivo',system-ui,sans-serif);letter-spacing:var(--tlr-t-etiqueta-ls,.16em);text-transform:uppercase;color:var(--ink-soft)} /* margin-left:auto: cuando la franja parte en dos líneas (móvil), el orden sigue pegado a la derecha, como en escritorio. */ .listado-barra .woocommerce-ordering{margin:0 0 0 auto;position:relative} /* Oportunidad 6 del pase de animaciones, 1 de septiembre. Un ` nativo se esconde sin salir del documento y la lista propia ocupa su sitio: bone, filo de la casa, versalitas, punto salvia en la opción activa, hover en salvia lavado. Sin él (JS apagado) el