/*
 * Catálogo: encabezado, barra de filtros sticky, cards de producto,
 * paginación y avisos de WooCommerce.
 */

/* ---------- Encabezado de tienda ---------- */

.shop-page {
	padding-bottom: var(--section-gap);
}

/* Encabezado alineado a la izquierda: la vista la manda el catálogo, no el
   rótulo, y así la lectura empieza donde empieza la rejilla. */
.shop-header {
	padding-block: clamp(28px, 2vw + 18px, 48px) calc(var(--unit) * 5);
}

@media (max-width: 900px) {
	.shop-header {
		padding-block: calc(var(--unit) * 5) calc(var(--unit) * 4);
	}
}

/* ---------- Encabezado del catálogo ---------- */

.shop-title {
	font-family: var(--font-display);
	font-size: clamp(28px, 1.6vw + 20px, 44px);
	color: var(--heading);
	margin: calc(var(--unit) * 1) 0 0;
}

.shop-header .cleya-breadcrumb {
	margin-bottom: calc(var(--unit) * 1);
}

.shop-description {
	font-size: 15px;
	color: var(--on-surface-variant);
	max-width: 56ch;
	margin-top: calc(var(--unit) * 1);
}

/* ---------- Fila de categorías ----------
 * Primero se elige el tipo de pieza y luego se afina: por eso las categorías
 * van antes que los filtros, con foto, y no escondidas en un desplegable.
 */

.subcategory-row {
	margin-bottom: calc(var(--unit) * 6);
}

/* Ocho por pantalla: la fila sitúa el catálogo de un vistazo, no compite con
   la rejilla de piezas que viene debajo. Con menos categorías, cada una
   conserva ese ancho en vez de estirarse. */
.subcategory-row ul {
	list-style: none;
	display: flex;
	gap: var(--gutter);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	margin: 0;
	padding: 0;
}

.subcategory-row li {
	flex: 0 0 calc((100% - var(--gutter) * 7) / 8);
	min-width: 112px;
}

.subcategory-row ul::-webkit-scrollbar {
	display: none;
}

.subcategory-row a {
	display: block;
	text-align: center;
	color: var(--on-surface);
}

.subcategory-media {
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--surface-container-low);
	margin-bottom: calc(var(--unit) * 1.5);
}

.subcategory-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--duration-slow) var(--ease-out-expo);
}

.subcategory-row a:hover .subcategory-media img {
	transform: scale(1.05);
}

.subcategory-name {
	font-family: var(--font-display);
	font-size: clamp(14px, 0.3vw + 12px, 17px);
	color: var(--heading);
}

.subcategory-row a:hover .subcategory-name {
	text-decoration: underline;
	text-underline-offset: 5px;
}

/* ---------- Barra de filtros y orden ---------- */

.shop-toolbar {
	position: sticky;
	top: var(--header-h-min);
	z-index: 40;
	background: color-mix(in srgb, var(--surface) 92%, transparent);
	backdrop-filter: blur(12px);
	border-top: 1px solid var(--outline-variant);
	border-bottom: 1px solid var(--outline-variant);
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--gutter);
	margin-bottom: calc(var(--unit) * 5);
}

.filter-panel,
.sort-menu {
	position: relative;
}

.toolbar-trigger {
	list-style: none;
	display: inline-flex;
	align-items: center;
	gap: calc(var(--unit) * 1);
	padding: calc(var(--unit) * 2) 0;
	cursor: pointer;
	font-family: var(--font-body);
	font-size: var(--text-label-sm);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--on-surface);
	transition: color var(--duration-fast) ease;
}

.toolbar-trigger::-webkit-details-marker {
	display: none;
}

.toolbar-trigger:hover {
	color: var(--accent-strong);
}

.toolbar-caret {
	width: 16px;
	height: 16px;
	transition: transform var(--duration-fast) ease;
}

details[open] > .toolbar-trigger .toolbar-caret {
	transform: rotate(180deg);
}

/* Punto: avisa de que hay filtros puestos aunque el panel esté cerrado. */
.filter-dot {
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: var(--accent-strong);
}

/* Panel de filtros: ocupa el ancho del catálogo, en columnas. */
.filter-panel[open] {
	position: static;
}

.filter-panel-body {
	position: absolute;
	left: 0;
	right: 0;
	z-index: 44;
	background: var(--surface-container-lowest);
	border: 1px solid var(--outline-variant);
	border-top: 0;
	padding: calc(var(--unit) * 4);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: calc(var(--unit) * 4) var(--gutter);
	box-shadow: 0 24px 48px -32px rgb(0 0 0 / 0.35);
}

.filter-group-title {
	color: var(--on-surface-variant);
	margin: 0 0 calc(var(--unit) * 2);
}

.filter-group-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: calc(var(--unit) * 1);
	max-height: 260px;
	overflow-y: auto;
}

/* Casilla dibujada: el control nativo no admite el trazo de la marca. */
.filter-check {
	display: inline-flex;
	align-items: center;
	gap: calc(var(--unit) * 1.5);
	font-size: 14px;
	color: var(--on-surface);
	padding: 4px 0;
	transition: color var(--duration-fast) ease;
}

.filter-check-box {
	width: 16px;
	height: 16px;
	border: 1px solid var(--outline);
	flex-shrink: 0;
	position: relative;
	transition: background var(--duration-fast) ease, border-color var(--duration-fast) ease;
}

.filter-check:hover {
	color: var(--accent-strong);
}

.filter-check:hover .filter-check-box {
	border-color: var(--accent-strong);
}

.filter-check.is-active .filter-check-box {
	background: var(--accent-strong);
	border-color: var(--accent-strong);
}

/* Marca de verificación dibujada con dos trazos. */
.filter-check.is-active .filter-check-box::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 1px;
	width: 4px;
	height: 9px;
	border: solid var(--on-accent);
	border-width: 0 1.5px 1.5px 0;
	transform: rotate(45deg);
}

.filter-panel-foot {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gutter);
	border-top: 1px solid var(--outline-variant);
	padding-top: calc(var(--unit) * 2);
}

.filter-count {
	color: var(--on-surface-variant);
}

/* Menú de orden: mismo lenguaje que el panel, anclado a la derecha. */
.sort-menu-list {
	position: absolute;
	right: 0;
	top: 100%;
	z-index: 44;
	min-width: 260px;
	list-style: none;
	margin: 0;
	padding: calc(var(--unit) * 1) 0;
	background: var(--surface-container-lowest);
	border: 1px solid var(--outline-variant);
	box-shadow: 0 24px 48px -32px rgb(0 0 0 / 0.35);
}

.sort-menu-list a {
	display: block;
	padding: 10px calc(var(--unit) * 3);
	font-size: 14px;
	color: var(--on-surface-variant);
	transition: background var(--duration-fast) ease, color var(--duration-fast) ease;
}

.sort-menu-list a:hover {
	background: var(--surface);
	color: var(--on-surface);
}

.sort-menu-list a.is-active {
	color: var(--accent-strong);
	font-weight: 600;
}

@media (max-width: 700px) {
	/* En móvil entran tres y se recorre la fila con el dedo. */
	.subcategory-row li {
		flex-basis: calc((100% - var(--gutter) * 2) / 3);
		min-width: 96px;
	}
	.filter-panel-body {
		padding: calc(var(--unit) * 3) calc(var(--unit) * 2.5);
		max-height: 70vh;
		overflow-y: auto;
	}
	.sort-menu-list {
		min-width: 220px;
	}
}

/* ---------- Grilla de productos ---------- */

ul.products {
	list-style: none;
	display: grid;
	gap: var(--gutter);
	row-gap: calc(var(--unit) * 8);
	margin: 0;
	padding: 0;
}

ul.products.columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

ul.products.columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

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

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

@media (max-width: 820px) {
	ul.products.columns-3,
	ul.products.columns-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	ul.products,
	ul.products.columns-2,
	ul.products.columns-3,
	ul.products.columns-4 {
		grid-template-columns: repeat(2, 1fr);
		gap: calc(var(--unit) * 2);
		row-gap: calc(var(--unit) * 6);
	}
}

/* ---------- Card de producto ---------- */

.product-card {
	position: relative;
}

.card-media {
	position: relative;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--surface-container-low);
	margin-bottom: calc(var(--unit) * 3);
}

.card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--duration-slow) var(--ease-out-expo), opacity var(--duration-fast) ease;
}

.product-card:hover .card-media img {
	transform: scale(1.05);
}

/* Segunda foto de la galería: aparece al pasar el cursor. */
.card-media .card-image-hover {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 450ms ease, transform var(--duration-slow) var(--ease-out-expo);
}

.card-media.has-hover-image:hover .card-image-hover,
.product-card:focus-within .card-media.has-hover-image .card-image-hover {
	opacity: 1;
}

@media (hover: none) {
	.card-media .card-image-hover {
		display: none;
	}
}

.card-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgb(0 0 0 / 0);
	transition: background var(--duration-fast) ease;
	pointer-events: none;
}

.product-card:hover .card-media::after {
	background: rgb(0 0 0 / 0.05);
}

.card-media .onsale {
	position: absolute;
	top: calc(var(--unit) * 2);
	left: calc(var(--unit) * 2);
	z-index: 3;
	background: var(--surface);
}

.card-action {
	position: absolute;
	left: 50%;
	bottom: calc(var(--unit) * 2);
	transform: translate(-50%, 8px);
	width: 90%;
	opacity: 0;
	z-index: 3;
	transition: opacity var(--duration-fast) ease, transform var(--duration-fast) ease;
}

.product-card:hover .card-action,
.product-card:focus-within .card-action {
	opacity: 1;
	transform: translate(-50%, 0);
}

.card-action .button {
	width: 100%;
	padding: 12px 16px;
	background: var(--accent-strong);
	border-color: var(--accent-strong);
	color: var(--on-accent);
}

.card-action .button:hover {
	background: var(--accent-hover);
	border-color: var(--accent-hover);
	opacity: 1;
}

.card-action .added_to_cart {
	display: block;
	text-align: center;
	margin-top: var(--unit);
	background: var(--surface);
	padding: 8px;
	font-family: var(--font-body);
	font-size: var(--text-label-sm);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* ---------- Compra rápida en la ficha del catálogo ----------
 * Dos filas con la misma estructura: rótulo a la izquierda y opciones a la
 * derecha. El color lleva a la ficha; la talla añade al carrito.
 */

.card-quick {
	background: var(--surface-container-lowest);
	border-top: 1px solid var(--outline-variant);
	padding: 0;
	text-align: left;
}

.card-quick-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: calc(var(--unit) * 2);
	padding: calc(var(--unit) * 1.5) calc(var(--unit) * 2.5);
}

.card-quick-row + .card-quick-row {
	border-top: 1px solid var(--outline-variant);
}

.card-quick-label {
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--on-surface-variant);
	white-space: nowrap;
}

.card-quick-label.is-error {
	color: var(--error);
	letter-spacing: 0;
	text-transform: none;
	white-space: normal;
}

.card-quick-options {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: calc(var(--unit) * 1.25);
}

/* Muestra de color: el círculo es el color real de la pieza. */
.color-dot {
	width: 22px;
	height: 22px;
	border-radius: 999px;
	background: var(--dot, var(--outline-variant));
	box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.12);
	display: inline-block;
	position: relative;
	transition: transform var(--duration-fast) ease;
}

.color-dot::after {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: 999px;
	border: 1px solid transparent;
	transition: border-color var(--duration-fast) ease;
}

.color-dot:hover::after,
.color-dot:focus-visible::after,
.color-dot.is-active::after {
	border-color: var(--accent-strong);
}

/* Tallas: cifras sueltas, sin caja, como en una etiqueta de prenda. */
.card-quick-sizes .size-chip {
	min-width: 0;
	min-height: 32px;
	padding: 4px 6px;
	border: 0;
	background: transparent;
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--on-surface);
	cursor: pointer;
	transition: color var(--duration-fast) ease;
}

.card-quick-sizes .size-chip:hover,
.card-quick-sizes .size-chip:focus-visible {
	color: var(--accent-strong);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.size-chip.is-busy {
	opacity: 0.5;
	pointer-events: none;
}

.size-chip.is-done {
	color: var(--green);
}

/* El enlace que WooCommerce cuelga tras añadir sobra: el carrito lateral ya
   se abre solo y aquí solo descuadraba la fila. */
.card-quick .added_to_cart {
	display: none;
}

/* Sin puntero (móvil) el panel está siempre visible: no hay hover. */
@media (hover: none) {
	.card-action.card-quick {
		position: static;
		transform: none;
		opacity: 1;
		width: 100%;
	}
}

.card-info {
	text-align: center;
}

.card-title {
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 4px;
}

.card-info .price {
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--on-surface-variant);
}

.card-info .price del {
	opacity: 0.6;
	margin-right: 8px;
}

.card-info .price ins {
	text-decoration: none;
}

@media (max-width: 480px) {
	.card-action {
		display: none;
	}
}

/* ---------- Paginación ---------- */

.woocommerce-pagination {
	padding-block: calc(var(--unit) * 10);
	display: flex;
	justify-content: center;
}

.woocommerce-pagination .page-numbers {
	display: flex;
	align-items: center;
	gap: calc(var(--unit) * 2);
	list-style: none;
}

.woocommerce-pagination .page-numbers li a,
.woocommerce-pagination .page-numbers li span {
	display: inline-block;
	padding: 4px 8px;
	font-family: var(--font-body);
	font-size: var(--text-label-sm);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--on-surface-variant);
}

.woocommerce-pagination .page-numbers li span.current {
	color: var(--on-surface);
	border-bottom: 2px solid var(--on-surface);
}

.woocommerce-pagination .page-numbers li a:hover {
	color: var(--on-surface);
}

/* ---------- Avisos WooCommerce ---------- */

/* En carrito, pago y cuenta el contenido va sin envoltorio de página: el
   grupo de avisos se centra solo para no cruzar la pantalla de lado a lado. */
.woocommerce-notices-wrapper {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--margin-desktop);
}

@media (max-width: 900px) {
	.woocommerce-notices-wrapper {
		padding-inline: var(--margin-mobile);
	}
}

.woocommerce-notices-wrapper:empty {
	display: none;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	list-style: none;
	background: var(--surface-container-lowest);
	border: 1px solid var(--outline-variant);
	border-left: 2px solid var(--green);
	padding: calc(var(--unit) * 1.5) calc(var(--unit) * 2.5);
	margin: calc(var(--unit) * 3) 0 calc(var(--unit) * 2);
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--on-surface-variant);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--unit);
	transition: opacity var(--duration-normal) ease, transform var(--duration-normal) ease;
}

/* Se retira sin sobresaltos cuando el aviso cumple su tiempo. */
.cleya-notice.is-dismissed {
	opacity: 0;
	transform: translateY(-4px);
	pointer-events: none;
}

.woocommerce-error {
	border-left-color: var(--error);
}

.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
	padding: 8px 20px;
	order: 2;
}

.woocommerce-NoticeGroup {
	grid-column: 1 / -1;
}

/* Resultados vacíos */
.woocommerce-no-products-found {
	text-align: center;
	padding-block: calc(var(--unit) * 10);
}

/* El panel de compra rápida se pega al borde inferior de la foto, a todo su
   ancho, como una etiqueta de la prenda. */
.card-action.card-quick {
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	transform: translateY(10px);
}

.product-card:hover .card-action.card-quick,
.product-card:focus-within .card-action.card-quick {
	transform: translateY(0);
}

/* ---------- Etiqueta de descuento ----------
 * Anuncia cuánto se ahorra, no solo que hay oferta: el porcentaje es lo que
 * decide. Va en el marrón de la marca, sin redondeos ajenos al sistema.
 */
.onsale.chip {
	display: inline-block;
	background: var(--accent-strong);
	color: var(--on-accent);
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 6px 10px;
	border-radius: 0;
	line-height: 1;
}

.card-media .onsale {
	background: var(--accent-strong);
}

/* Precio rebajado: el anterior tachado y en tono secundario. */
.card-info del,
.pdp-price del {
	color: var(--outline);
	text-decoration: line-through;
	margin-right: calc(var(--unit) * 1);
	font-size: 0.9em;
}

.card-info ins,
.pdp-price ins {
	text-decoration: none;
	color: var(--accent-strong);
	font-weight: 500;
}

/* Corazón en la ficha del catálogo: guardar una pieza sin abrirla.
   Apenas se insinúa sobre la foto —la protagonista es la prenda— y toma
   cuerpo al acercarse o cuando la pieza ya está guardada. */
.card-media .favorite-btn {
	position: absolute;
	top: calc(var(--unit) * 1);
	right: calc(var(--unit) * 1);
	z-index: 4;
	width: 38px;
	height: 38px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--surface-container-lowest) 22%, transparent);
	backdrop-filter: blur(3px);
	color: var(--on-surface);
	opacity: 0.55;
	transition: opacity var(--duration-fast) ease, background var(--duration-fast) ease, transform var(--duration-fast) var(--ease-out-expo);
}

.card-media .favorite-btn .svg-icon {
	width: 19px;
	height: 19px;
}

.product-card:hover .favorite-btn,
.card-media .favorite-btn:focus-visible {
	opacity: 0.9;
	background: color-mix(in srgb, var(--surface-container-lowest) 70%, transparent);
}

.card-media .favorite-btn:hover {
	opacity: 1;
	background: var(--surface-container-lowest);
}

.card-media .favorite-btn.is-active {
	opacity: 1;
	background: color-mix(in srgb, var(--surface-container-lowest) 80%, transparent);
}