/* ==========================================================================
   Matati — tienda y categorías (archive-product.php), con la estructura de
   las colecciones de thewoobles.com. Tarjeta de producto: card-producto.css.
   ========================================================================== */

/* -------------------------------------------------------------------------
 * Cabecera (título + filtros) en crema y curva hacia el listado en blanco
 * ---------------------------------------------------------------------- */
.shop-cabecera {
	padding-bottom: 24px;
	background: var(--crema);
}

.shop-curva {
	line-height: 0;
	background: var(--blanco);
}

.shop-curva svg {
	display: block;
	width: 100%;
	height: 64px;
	fill: var(--crema);
}
.shop-hero__wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding-block: 64px 40px;
	text-align: center;
}

.shop-hero__antetitulo {
	font-size: var(--txt-antetitulo);
	font-style: normal;
	color: var(--turquesa);
}

.shop-hero__titulo {
	font-size: var(--txt-h2);
	line-height: .95;
}

.shop-hero__intro {
	max-width: 620px;
	font-size: var(--txt-grande);
}

.shop-hero__intro > * + * { margin-top: 12px; }

/* -------------------------------------------------------------------------
 * Barra de filtros y orden
 * ---------------------------------------------------------------------- */
.shop-filtros {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 32px;
}

.shop-filtros__grupo {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px 16px;
}

/* Botón "Ver filtros": solo en el celular */
.shop-filtros__toggle { display: none; }

.shop-filtros__puestos {
	display: inline-grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	margin-left: 2px;
	padding-inline: 6px;
	font-size: 12px;
	color: var(--blanco);
	background: var(--tinta);
	border-radius: var(--pastilla);
}

/* La etiqueta encima de su desplegable */
.shop-filtros__campo {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.shop-filtros__etiqueta {
	font-size: 14px;
	font-weight: 700;
}

.shop-filtros__select {
	height: var(--campo-alto);
	padding: 0 40px 0 16px;
	font: inherit;
	font-size: 15px;
	color: var(--tinta);
	background: var(--blanco) var(--flecha-select) no-repeat right 14px center / 16px;
	border: var(--campo-borde);
	border-radius: var(--campo-radio);
	cursor: pointer;
	appearance: none;
	transition: border-color var(--rapido), box-shadow var(--rapido);
}

.shop-filtros__select:hover { border-color: var(--tinta); }

.shop-filtros__select:focus-visible {
	border-color: var(--turquesa);
	outline: 0;
	box-shadow: var(--campo-foco);
}

.shop-filtros__quitar {
	align-self: center;
	margin-top: 22px; /* a la altura de los desplegables, bajo las etiquetas */
	font-size: 15px;
}



/* -------------------------------------------------------------------------
 * Listado (en blanco)
 * ---------------------------------------------------------------------- */
.shop-listado { background: var(--blanco); }

.shop-listado__wrapper { padding-block: 24px var(--espacio-seccion); }

.shop-listado__total {
	margin-bottom: 24px;
	font-size: 15px;
	font-weight: 600;
}

.shop-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 44px 24px;
}

.shop-listado__acciones {
	display: flex;
	justify-content: center;
	margin-top: 56px;
}

.shop-listado__vacio { text-align: center; }

/* -------------------------------------------------------------------------
 * Responsive
 * ---------------------------------------------------------------------- */
@media (max-width: 1023px) {
	.shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
	.shop-hero__wrapper { padding-block: 40px 28px; }

	.shop-hero__intro { font-size: 17px; }

	.shop-curva svg { height: 32px; }

	/* Filtros plegados tras "Ver filtros"; al abrirse, en dos columnas */
	/* Secundario en tamaño compacto (como el "Unirme" del header) */
	.shop-filtros__toggle {
		--btn-pad: 10px 20px;
		--btn-txt: 14px;
		display: inline-flex;
		align-items: center;
	}

	.shop-cabecera .wrapper:has(.shop-filtros__toggle) {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.shop-filtros {
		display: none;
		width: 100%;
		margin-top: 20px;
		gap: 14px;
	}

	.shop-filtros.is-abierto { display: flex; }

	.shop-filtros__grupo {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: end;
		gap: 12px;
		width: 100%;
	}

	.shop-filtros__campo { align-items: stretch; }

	.shop-filtros__select {
		width: 100%;
		font-size: 16px; /* con menos, el iPhone hace zoom */
	}

	.shop-filtros__quitar {
		grid-column: 1 / -1;
		margin-top: 0;
	}

	/* Dos productos por fila (la tarjeta es sencilla) */
	.shop-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px 16px;
	}
}