/**
 * Tienda: rejilla del catálogo, tarjeta de producto y cabecera de categoría.
 *
 * La tarjeta es la pieza más importante del sitio: es donde se decide la
 * compra. Lleva foto grande, formatos disponibles y elección de tamaño sin
 * salir del listado.
 */

/* ------------------------------------------- Cabecera del catálogo (nueva) */

.catalogo-portada {
	position: relative;
	background: var(--crema);
	border-bottom: 1px solid var(--borde);
	overflow: hidden;
}

/* Fotografía de cabecera, sangrando por la derecha. Cuando su fondo no coincide
   con el de la banda se marca «fundir» al editar la categoría y una máscara la
   difumina hacia la izquierda: así no se ve el corte y no hay que retocar la
   foto en ningún programa. */
.catalogo-portada__foto {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(60%, 940px);
	z-index: 0;
	pointer-events: none;
	/* En fila y pegada a la derecha: así la imagen ocupa exactamente lo que
	   mide la foto y el difuminado cae sobre su propio borde, no sobre el
	   hueco vacío que dejaría un contenedor más ancho. */
	display: flex;
	justify-content: flex-end;
}

/* Por defecto la foto se ve entera y pegada a la derecha: así vale cualquier
   proporción sin que se corte el producto. */
.catalogo-portada__foto img {
	width: auto;
	max-width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: 100% 100%;
}

/* Si es bien apaisada sí puede llenar la banda y sangrar. */
.catalogo-portada__foto--panoramica img {
	width: 100%;
	object-fit: cover;
	object-position: 50% 100%;
}

.catalogo-portada__foto--fundida img {
	-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 32%);
	mask-image: linear-gradient(to right, transparent 0%, #000 32%);
}

/* El texto siempre por encima de la fotografía. */
.catalogo-portada .migas,
.catalogo-portada__texto {
	position: relative;
	z-index: 1;
}

@media (max-width: 900px) {
	.catalogo-portada__foto {
		display: none;
	}
}

.catalogo-portada__interior {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
	gap: var(--e-6);
	align-items: center;
	padding-bottom: var(--e-6);
	min-height: 240px;
}

/* Con fotografía a sangre la banda pide algo más de aire, y el texto tiene que
   quedarse corto para no meterse debajo de la foto. */
.catalogo-portada:has(.catalogo-portada__foto) .catalogo-portada__interior {
	min-height: 300px;
}

/* Una foto que no es panorámica se ve entera, así que necesita más alto para
   no quedarse en un sello diminuto. */
.catalogo-portada:has(.catalogo-portada__foto):not(:has(.catalogo-portada__foto--panoramica)) .catalogo-portada__interior {
	min-height: clamp(300px, 25vw, 380px);
}

.catalogo-portada:has(.catalogo-portada__foto) .entradilla__texto {
	max-width: 48ch;
}

@media (max-width: 900px) {
	.catalogo-portada__interior {
		grid-template-columns: 1fr;
		min-height: 0;
	}
}

.catalogo-portada h1 {
	margin-bottom: var(--e-4);
}

/* Entradilla: resumen breve bajo el título. El texto largo de posicionamiento
   va al final de la página, y este enlace baja hasta él. */
.entradilla__texto {
	max-width: 70ch;
	color: var(--tinta-media);
	font-size: var(--t-base);
	line-height: 1.7;
}

.entradilla__mas {
	display: inline-block;
	margin-top: var(--e-3);
	font-size: var(--t-s);
	font-weight: 700;
	color: var(--marca-oscura);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.entradilla__mas:hover {
	color: var(--tinta);
}

/* ------------------------------------------- Texto largo de posicionamiento */

.sobre-categoria {
	background: var(--crema);
	border-top: 1px solid var(--borde);
	/* La cabecera es fija: sin este hueco el salto del ancla corta el título. */
	scroll-margin-top: calc(var(--cabecera) + 2rem);
}

.sobre-categoria__caja {
	max-width: 78ch;
}

.sobre-categoria__titulo {
	font-size: var(--t-xl);
	margin-bottom: var(--e-4);
}

.sobre-categoria__texto {
	color: var(--tinta-media);
	line-height: 1.8;
}

.sobre-categoria__texto h3 {
	font-size: var(--t-l);
	margin-top: var(--e-6);
	margin-bottom: var(--e-3);
	color: var(--tinta);
}

.sobre-categoria__texto p {
	margin-bottom: var(--e-4);
}

/* Montaje: piezas superpuestas aprovechando el fondo transparente de las
   fotos de producto. */
.montaje {
	position: relative;
	height: 100%;
	min-height: 220px;
}

@media (max-width: 900px) {
	.montaje {
		display: none;
	}
}

.montaje__pieza {
	position: absolute;
	bottom: 0;
	display: block;
}

.montaje__pieza img {
	width: 100%;
	height: auto;
	object-fit: contain;
}

.montaje__pieza--1 {
	right: 4%;
	width: 46%;
	z-index: 3;
}

.montaje__pieza--2 {
	right: 34%;
	width: 38%;
	bottom: -6%;
	z-index: 2;
}

.montaje__pieza--3 {
	right: 62%;
	width: 32%;
	bottom: 4%;
	z-index: 1;
	opacity: 0.92;
}

/* ------------------------------------------- Rejilla catálogo + filtros */

.catalogo {
	display: grid;
	grid-template-columns: 270px minmax(0, 1fr);
	gap: clamp(1.5rem, 1rem + 2vw, 3rem);
	align-items: start;
	padding-block: var(--e-6) var(--e-8);
}

@media (max-width: 1000px) {
	.catalogo {
		grid-template-columns: 1fr;
	}
}

/* Con la columna de filtros, el catálogo baja a tres columnas cómodas. */
.catalogo__lista .productos,
.catalogo__lista ul.products {
	grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1400px) {
	.catalogo__lista .productos,
	.catalogo__lista ul.products {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 620px) {
	.catalogo__lista .productos,
	.catalogo__lista ul.products {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------- Columna de filtros */

.filtros {
	position: sticky;
	top: calc(var(--cabecera) + 1.5rem);
	background: var(--blanco);
	border: 1px solid var(--borde);
	border-radius: var(--radio-g);
	padding: var(--e-5);
}

@media (max-width: 1000px) {
	.filtros {
		position: static;
	}
}

.filtros__cabecera {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--e-3);
	padding-bottom: var(--e-4);
	border-bottom: 1px solid var(--borde);
	margin-bottom: var(--e-4);
}

.filtros__titulo {
	font-family: var(--fuente-titulo);
	font-size: var(--t-l);
	margin: 0;
}

.filtros__limpiar {
	font-size: var(--t-xs);
	color: var(--tinta-suave);
	text-decoration: underline;
}

.filtros__limpiar:hover {
	color: var(--rojo);
}

.filtros__grupo + .filtros__grupo {
	margin-top: var(--e-5);
	padding-top: var(--e-5);
	border-top: 1px solid var(--borde);
}

.filtros__rotulo {
	font-size: var(--t-s);
	font-weight: 700;
	margin: 0 0 var(--e-3);
}

.filtros__opcion {
	display: flex;
	align-items: center;
	gap: var(--e-3);
	padding: var(--e-2) 0;
	margin: 0;
	font-size: var(--t-s);
	font-weight: 400;
	cursor: pointer;
}

.filtros__opcion input {
	width: 18px;
	height: 18px;
	accent-color: var(--marca);
	flex-shrink: 0;
	margin: 0;
}

.filtros__opcion span:first-of-type {
	flex: 1;
}

.filtros__cuenta {
	font-size: var(--t-xs);
	color: var(--tinta-suave);
	font-variant-numeric: tabular-nums;
}

.filtros__precio {
	display: flex;
	align-items: center;
	gap: var(--e-2);
}

.filtros__precio input {
	min-width: 0;
	padding: 0.55rem 0.6rem;
	font-size: var(--t-s);
	text-align: center;
}

.filtros form > .boton {
	margin-top: var(--e-5);
}

/* ------------------------------------------------ Cabecera de la tienda */

.tienda-portada {
	position: relative;
	background: var(--crema);
	overflow: hidden;
}

.tienda-portada__interior {
	position: relative;
	z-index: 2;
	padding-block: clamp(3rem, 2rem + 5vw, 6rem);
	max-width: 56ch;
}

.tienda-portada__foto {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.tienda-portada__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.22;
}

.tienda-portada h1 {
	margin-bottom: var(--e-4);
}

.tienda-portada__texto {
	font-size: var(--t-m);
	color: var(--tinta-media);
	max-width: 54ch;
}

/* Familias de producto en fila, con foto redonda */
.familias {
	display: flex;
	gap: var(--e-4);
	flex-wrap: wrap;
	padding-block: var(--e-6);
	border-bottom: 1px solid var(--borde);
}

.familia {
	display: inline-flex;
	align-items: center;
	gap: var(--e-3);
	padding: var(--e-2) var(--e-5) var(--e-2) var(--e-2);
	border: 1px solid var(--borde);
	border-radius: 999px;
	background: var(--blanco);
	text-decoration: none;
	color: var(--tinta);
	font-weight: 600;
	font-size: var(--t-s);
	transition: all var(--transicion);
}

.familia:hover,
.familia.esta-activa {
	border-color: var(--marca);
	background: var(--marca);
	color: var(--blanco);
}

.familia__foto {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--crema-honda);
	flex-shrink: 0;
}

.familia__cuenta {
	opacity: 0.6;
	font-weight: 500;
}

/* Barra de orden y recuento */
.tienda-barra {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--e-4);
	flex-wrap: wrap;
	padding-block: var(--e-5);
}

.tienda-barra__cuenta,
.tienda-barra__cuenta .woocommerce-result-count {
	font-size: var(--t-s);
	color: var(--tinta-suave);
	margin: 0;
	text-align: left;
}

.tienda-barra form.woocommerce-ordering {
	margin: 0;
}

/* Selector de orden: se sustituye la flecha del sistema por una punta fina
   dibujada en SVG, con hueco a la derecha para que no toque el texto. */
.tienda-barra select {
	width: auto;
	min-width: 230px;
	padding: 0.7rem 2.75rem 0.7rem 1rem;
	font-size: var(--t-s);
	font-weight: 500;
	color: var(--tinta);
	border-color: var(--borde-fuerte);
	border-radius: 999px;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-color: var(--blanco);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f6459' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 17px 17px;
	cursor: pointer;
	transition: border-color var(--transicion);
}

.tienda-barra select:hover {
	border-color: var(--marca);
}

/* --------------------------------------------------- Rejilla de productos */

/* «ul.products» es el contenedor que imprime WooCommerce en el catálogo;
   «.productos» el que usa el tema en portada y bloques propios. */
.productos,
.woocommerce ul.products,
ul.products {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.5rem, 1rem + 2vw, 3rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Se anulan los restos de la maquetación flotante de WooCommerce. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
ul.products::before,
ul.products::after {
	content: none;
}

.woocommerce ul.products li.product,
ul.products li.product {
	width: auto;
	float: none;
	margin: 0;
	clear: none;
}

@media (max-width: 1100px) {
	.productos,
	.woocommerce ul.products,
	ul.products {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 620px) {
	.productos,
	.woocommerce ul.products,
	ul.products {
		grid-template-columns: 1fr;
		gap: var(--e-6);
	}
}

.productos--4 {
	grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1300px) {
	.productos--4 {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 1100px) {
	.productos--4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 620px) {
	.productos--4 {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------ Tarjeta de producto */

.tarjeta {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0;
	background: var(--blanco);
	border: 1px solid var(--borde);
	border-radius: var(--radio-g);
	overflow: hidden;
	transition: border-color var(--transicion), box-shadow var(--transicion),
		transform var(--transicion);
}

.tarjeta:hover {
	border-color: var(--borde-fuerte);
	box-shadow: var(--sombra-m);
	transform: translateY(-4px);
}

/* Cuadrado y con la pieza ajustada: las fotos de producto son PNG con fondo
   transparente y mucho margen, que dejaba un hueco muerto bajo el tarro. */
.tarjeta__marco {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--crema);
}

.tarjeta__marco img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 6%;
	transition: transform 700ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.tarjeta:hover .tarjeta__marco img {
	transform: scale(1.05);
}

.tarjeta__etiquetas {
	position: absolute;
	top: var(--e-4);
	left: var(--e-4);
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--e-2);
}

.tarjeta__cuerpo {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: var(--e-5);
	gap: var(--e-3);
}

.tarjeta__familia {
	font-size: var(--t-xs);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--marca);
}

.tarjeta__nombre {
	font-family: var(--fuente-titulo);
	font-size: var(--t-l);
	line-height: 1.15;
	margin: 0;
}

.tarjeta__nombre a {
	color: var(--tinta);
	text-decoration: none;
}

.tarjeta__nombre a:hover {
	color: var(--marca-oscura);
}

/* Resumen breve: da el contexto que faltaba en el listado anterior. */
.tarjeta__resumen {
	font-size: var(--t-s);
	line-height: 1.6;
	color: var(--tinta-media);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Rasgos: origen, textura, formato… en dos columnas compactas */
.tarjeta__rasgos {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-2) var(--e-4);
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--t-xs);
	color: var(--tinta-suave);
}

.tarjeta__rasgos li {
	display: inline-flex;
	align-items: center;
	gap: var(--e-1);
	margin: 0;
}

.tarjeta__rasgos svg {
	width: 15px;
	height: 15px;
	color: var(--marca);
	flex-shrink: 0;
}

.tarjeta__pie {
	margin-top: auto;
	padding-top: var(--e-3);
	display: flex;
	flex-direction: column;
	gap: var(--e-4);
}

.tarjeta__precio {
	font-family: var(--fuente-titulo);
	font-size: var(--t-l);
	color: var(--tinta);
	line-height: 1.1;
}

.tarjeta__precio .desde {
	font-family: var(--fuente-texto);
	font-size: var(--t-xs);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--tinta-suave);
	display: block;
	margin-bottom: 2px;
}

.tarjeta__precio del {
	color: var(--tinta-suave);
	font-size: var(--t-m);
	margin-right: var(--e-2);
}

.tarjeta__precio ins {
	text-decoration: none;
	color: var(--marca-oscura);
}

/* Elección de formato dentro de la propia tarjeta */
.opciones {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-2);
}

.opciones__boton {
	padding: 0.45rem 0.9rem;
	border: 1px solid var(--borde-fuerte);
	border-radius: 999px;
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--tinta-media);
	background: var(--blanco);
	transition: all var(--transicion);
}

.opciones__boton:hover {
	border-color: var(--marca);
	color: var(--marca-oscura);
}

.opciones__boton[aria-pressed="true"] {
	background: var(--tinta);
	border-color: var(--tinta);
	color: var(--blanco);
}

.opciones__boton[disabled] {
	opacity: 0.35;
	text-decoration: line-through;
	pointer-events: none;
}

/* Botón de añadir: perfilado en oro, siempre en una sola línea. */
.tarjeta__anadir {
	--fondo-boton: transparent;
	--texto-boton: var(--marca-oscura);

	position: relative;
	width: 100%;
	overflow: hidden;
	border-color: var(--oro);
	padding-inline: 1rem;
	white-space: nowrap;
	letter-spacing: 0.04em;
	font-size: var(--t-xs);
}

.tarjeta__anadir:hover {
	--fondo-boton: var(--marca);
	--texto-boton: var(--blanco);

	border-color: var(--marca);
	color: var(--blanco);
}

/* El icono se oculta en tarjetas estrechas antes de partir el texto. */
@media (max-width: 1400px) {
	.tarjeta__anadir svg {
		display: none;
	}
}

.tarjeta__anadir.esta-cargando {
	pointer-events: none;
	color: transparent;
}

.tarjeta__anadir.esta-cargando::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 20px;
	margin: -10px 0 0 -10px;
	border: 2px solid rgb(255 255 255 / 40%);
	border-top-color: var(--blanco);
	border-radius: 50%;
	animation: mlm-girar 700ms linear infinite;
}

.tarjeta__anadir.esta-hecho {
	background: var(--verde);
	border-color: var(--verde);
}

@keyframes mlm-girar {
	to {
		transform: rotate(360deg);
	}
}

/* ------------------------------------------------- Estado vacío / sin stock */

.tarjeta.esta-agotado .tarjeta__marco img {
	filter: grayscale(0.7);
	opacity: 0.75;
}

.sin-resultados {
	text-align: center;
	padding-block: var(--e-9);
	max-width: 52ch;
	margin-inline: auto;
}

.sin-resultados h2 {
	margin-bottom: var(--e-3);
}