/**
 * Palace Shoes — catálogo, ficha de producto, carrito, checkout y portada.
 */

/* ==========================================================================
   1. Migas
   ========================================================================== */

.ps-crumbs {
	border-bottom: 1px solid var(--ps-border);
	font-size: .75rem;
	color: var(--ps-muted);
	padding-block: .75rem;
}
.ps-crumbs a { color: var(--ps-muted); }
.ps-crumbs a:hover { color: var(--ps-ink); }
.ps-crumbs__sep { margin-inline: .5rem; opacity: .5; }

/* WooCommerce imprime sus propias migas dentro del contenedor del theme, así que
   el área táctil hay que dársela también a esos enlaces. */
@media (hover: none), (max-width: 767px) {
	.ps-crumbs a,
	.ps-crumbs .woocommerce-breadcrumb a,
	.woocommerce-breadcrumb a {
		display: inline-block;
		padding-block: .625rem;
		line-height: 1.2;
	}
}

/* ==========================================================================
   2. Cabecera de catálogo
   ========================================================================== */

.ps-shop-head { padding-block: clamp(1.5rem, 4vw, 2.5rem) 1.25rem; }

.ps-shop-head__title {
	font-size: clamp(1.5rem, 4vw, 2.5rem);
	text-transform: uppercase;
	margin-bottom: .375rem;
}

.ps-shop-head__desc { color: var(--ps-muted); max-width: 68ch; }

.ps-shop-sub {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-top: 1.25rem;
}

.ps-shop-sub a {
	padding: .5rem 1rem;
	border: 1px solid var(--ps-border);
	font-size: .8125rem;
	font-weight: 500;
	white-space: nowrap;
	transition: border-color var(--ps-t), background var(--ps-t), color var(--ps-t);
}
.ps-shop-sub a:hover { border-color: var(--ps-ink); }
.ps-shop-sub a.is-active { background: var(--ps-ink); border-color: var(--ps-ink); color: #fff; }

/* --- Barra de herramientas --- */

.ps-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: .875rem;
	border-block: 1px solid var(--ps-border);
	position: sticky;
	top: calc(var(--ps-adminbar) + var(--ps-header-h));
	background: #fff;
	z-index: 90;
}

.ps-toolbar__count { font-size: .8125rem; color: var(--ps-muted); }

.ps-toolbar__right { display: flex; align-items: center; gap: .75rem; }

.ps-toolbar select {
	width: auto;
	min-width: 190px;
	padding-block: .5rem;
	font-size: .8125rem;
	border-color: var(--ps-border);
}

.ps-filters-toggle {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .5rem 1rem;
	border: 1px solid var(--ps-ink);
	font-size: .8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
}
.ps-filters-toggle:hover { background: var(--ps-ink); color: #fff; }

@media (min-width: 1025px) {
	.ps-filters-toggle { display: none; }
}

/* En pantalla estrecha los tres controles no caben en una línea: el contador
   pasa arriba y el filtro comparte fila con el orden. */
@media (max-width: 640px) {
	.ps-toolbar {
		flex-wrap: wrap;
		gap: .625rem;
	}

	.ps-toolbar__count {
		order: 1;
		width: 100%;
	}

	.ps-toolbar__right {
		order: 2;
		width: 100%;
	}

	.ps-toolbar__right .ps-filters-toggle { flex: 0 0 auto; }

	.ps-toolbar select {
		flex: 1;
		min-width: 0;
		width: auto;
	}
}

/* --- Chips de filtros activos --- */

.ps-chips {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	padding-block: 1rem;
}
.ps-chips:empty { display: none; }

.ps-chip {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .375rem .75rem;
	background: var(--ps-surface);
	border: 1px solid var(--ps-border);
	font-size: .75rem;
	font-weight: 500;
	transition: border-color var(--ps-t);
}
.ps-chip:hover { border-color: var(--ps-ink); }
.ps-chip span { font-size: 1rem; line-height: 1; opacity: .55; }

.ps-chip--clear {
	background: none;
	border-color: transparent;
	color: var(--ps-brand);
	text-decoration: underline;
}

/* ==========================================================================
   3. Layout de tienda
   ========================================================================== */

.ps-shop-layout {
	display: grid;
	grid-template-columns: 250px minmax(0, 1fr);
	gap: clamp(1.5rem, 3vw, 2.75rem);
	align-items: start;
	padding-bottom: clamp(2.5rem, 6vw, 4rem);
}

.ps-shop-layout--full { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 1024px) {
	.ps-shop-layout { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   4. Filtros
   ========================================================================== */

.ps-filters {
	position: sticky;
	top: calc(var(--ps-adminbar) + var(--ps-header-h) + 60px);
	max-height: calc(100vh - var(--ps-header-h) - 80px);
	overflow-y: auto;
	padding-right: .25rem;
}

.ps-filters__head,
.ps-filters__foot { display: none; }

.ps-filter { border-bottom: 1px solid var(--ps-border); padding-block: 1rem; }
.ps-filter:first-child { padding-top: 0; }

.ps-filter__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	font-size: .8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	margin-bottom: .875rem;
}
.ps-filter__head svg { transition: transform var(--ps-t); }
.ps-filter.is-collapsed .ps-filter__head { margin-bottom: 0; }
.ps-filter.is-collapsed .ps-filter__head svg { transform: rotate(-90deg); }
.ps-filter.is-collapsed .ps-filter__opts { display: none; }

.ps-filter__opts { display: grid; gap: .375rem; }

.ps-filter__opt {
	display: flex;
	align-items: center;
	gap: .625rem;
	font-size: .875rem;
	font-weight: 400;
	cursor: pointer;
	padding: .1875rem 0;
	transition: opacity var(--ps-t);
}

.ps-filter__opt input[type="checkbox"] {
	appearance: none;
	width: 17px; height: 17px;
	flex: 0 0 17px;
	border: 1px solid var(--ps-border-strong);
	background: #fff;
	cursor: pointer;
	transition: background var(--ps-t), border-color var(--ps-t);
}

.ps-filter__opt input[type="checkbox"]:checked {
	background: var(--ps-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E") center/12px no-repeat;
	border-color: var(--ps-ink);
}

.ps-filter__name { flex: 1; }

.ps-filter__count {
	font-size: .6875rem;
	color: var(--ps-muted);
	font-variant-numeric: tabular-nums;
}

.ps-filter__opt.is-empty { opacity: .35; }

/* Talla en cuadrícula */

.ps-filter--grid .ps-filter__opts {
	grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
	gap: .375rem;
}

.ps-filter--grid .ps-filter__opt {
	position: relative;
	justify-content: center;
	border: 1px solid var(--ps-border);
	padding: .5rem .25rem;
	font-size: .8125rem;
	font-weight: 600;
}
.ps-filter--grid .ps-filter__opt:hover { border-color: var(--ps-ink); }
.ps-filter--grid .ps-filter__opt input { position: absolute; opacity: 0; pointer-events: none; }
.ps-filter--grid .ps-filter__opt:has(input:checked) { background: var(--ps-ink); border-color: var(--ps-ink); color: #fff; }
.ps-filter--grid .ps-filter__name { flex: none; }
.ps-filter--grid .ps-filter__count { display: none; }

/* Color en muestras */

.ps-filter__swatch {
	width: 18px; height: 18px;
	flex: 0 0 18px;
	border: 1px solid var(--ps-border-strong);
	border-radius: 50%;
}

/* Precio */

.ps-filter__price { display: flex; align-items: center; gap: .5rem; }
.ps-filter__price label { flex: 1; }
.ps-filter__price input { padding: .5rem .625rem; font-size: .8125rem; }
.ps-filter__dash { color: var(--ps-muted); }

/* Panel deslizante en móvil */

@media (max-width: 1024px) {
	.ps-filters {
		position: fixed;
		inset-block: 0;
		left: 0;
		width: min(88vw, 360px);
		max-height: none;
		background: #fff;
		z-index: 400;
		display: flex;
		flex-direction: column;
		padding: 0;
		transform: translateX(-100%);
		transition: transform .28s var(--ps-ease);
		box-shadow: var(--ps-shadow-pop);
	}
	.ps-filters.is-open { transform: translateX(0); }

	.ps-filters__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 1rem 1.25rem;
		border-bottom: 1px solid var(--ps-border);
	}
	.ps-filters__title { margin: 0; font-size: 1rem; text-transform: uppercase; }
	.ps-filters__close { display: grid; place-items: center; width: 40px; height: 40px; margin-right: -.5rem; }

	.ps-filters__body { flex: 1; overflow-y: auto; padding: 1.25rem; }
	.ps-filters__foot { display: block; padding: 1rem 1.25rem; border-top: 1px solid var(--ps-border); }

	/* Filtros a medida de un dedo: casillas mayores y filas más altas. */
	.ps-filter__opt {
		padding-block: .625rem;
		font-size: .9375rem;
	}

	.ps-filter__opt input[type="checkbox"] {
		width: 24px;
		height: 24px;
		flex-basis: 24px;
		background-size: 15px;
	}

	.ps-filter__head {
		min-height: 48px;
		margin-bottom: .5rem;
		font-size: .875rem;
	}

	.ps-filter--grid .ps-filter__opt {
		min-height: 48px;
		padding-block: 0;
	}

	.ps-filter__price input { min-height: 46px; }
	.ps-filters__close { width: 48px; height: 48px; }
}

/* ==========================================================================
   5. Cuadrícula de productos
   ========================================================================== */

.ps-results { position: relative; min-height: 240px; }
.ps-results.is-loading { opacity: .4; pointer-events: none; }

.ps-results.is-loading::after {
	content: "";
	position: absolute;
	top: 3rem; left: 50%;
	width: 32px; height: 32px;
	margin-left: -16px;
	border: 2px solid var(--ps-border);
	border-top-color: var(--ps-ink);
	border-radius: 50%;
	animation: ps-spin .7s linear infinite;
}

@keyframes ps-spin { to { transform: rotate(360deg); } }

ul.products {
	display: grid;
	grid-template-columns: repeat(var(--ps-cols, 4), minmax(0, 1fr));
	/* Columnas juntas como en las tiendas de referencia (20 px), pero filas muy
	   separadas: sin caja que delimite cada producto, ese aire vertical es lo
	   único que impide leer una fila como continuación de la anterior. */
	gap: clamp(2.25rem, 3.5vw, 3rem) 1.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (max-width: 1200px) { ul.products { --ps-cols: 3; } }
@media (max-width: 860px)  { ul.products { --ps-cols: 3; } }
@media (max-width: 640px)  { ul.products { --ps-cols: 2; } }

/* --- Tarjeta --- */

li.product { position: relative; }

/* La foto va sobre el fondo de la página, sin caja: es lo que separa una tienda
   de calzado de un catálogo genérico. El producto manda, no el contenedor. */
.ps-card__media {
	position: relative;
	display: block;
	background: transparent;
	aspect-ratio: 1;
	overflow: hidden;
	margin-bottom: .875rem;
}

.ps-card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: opacity .4s var(--ps-ease), transform .6s var(--ps-ease);
}

.ps-card__img--alt {
	position: absolute;
	inset: 0;
	opacity: 0;
}

li.product:hover .ps-card__img--alt { opacity: 1; }
li.product:hover .ps-card__media img { transform: scale(1.04); }

/* Etiquetas: texto, no bloques de color. Un rectángulo rojo sobre cada foto
   abarata el catálogo entero; el descuento se lee igual en rojo sobre blanco. */
.ps-card__badges {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
	display: flex;
	align-items: baseline;
	gap: .625rem;
}

.ps-badge {
	display: inline-block;
	padding: 0;
	background: none;
	font-size: .6875rem;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: .035em;
}

.ps-badge--sale { color: var(--ps-brand-text); }
.ps-badge--new  { color: var(--ps-ink); }
.ps-badge--out  { color: var(--ps-muted); }

/* Acciones flotantes */

.ps-card__actions {
	position: absolute;
	top: .625rem;
	right: .625rem;
	z-index: 3;
	display: grid;
	justify-items: end;
	gap: .375rem;
	width: 34px;
	opacity: 0;
	transform: translateX(6px);
	transition: opacity var(--ps-t), transform var(--ps-t);
}


li.product:hover .ps-card__actions,
li.product:focus-within .ps-card__actions { opacity: 1; transform: translateX(0); }

/* Los plugins traen sus propias clases de botón (button, wp-element-button), que
   pintan un rectángulo sólido con la etiqueta visible. Aquí se reducen a un
   icono cuadrado: font-size 0 neutraliza el texto venga en el marcado que venga,
   y el nombre accesible sigue en el aria-label del enlace. */
.ps-card__actions > a,
.ps-card__actions > button,
.ps-card__actions > a.button,
.ps-main .ps-card__actions > .button {
	display: grid;
	place-items: center;
	justify-self: end;
	width: 34px;
	min-width: 0;
	height: 34px;
	/* Los plugins traen su propio margen, que descuadra y desborda la columna. */
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	/* Sin recuadro. El cuadrado blanco que había aquí se leía como un parche
	   pegado en la esquina de la foto, porque las fotos de producto ya vienen
	   sobre fondo claro: el chip no separaba nada, sólo añadía un borde duro. */
	background: transparent;
	color: var(--ps-ink);
	box-shadow: none;
	font-size: 0;
	line-height: 0;
	letter-spacing: 0;
	/* El plugin separa icono y etiqueta con un gap propio. Como aquí sólo queda
	   el icono, ese hueco descentraría el corazón dentro del cuadrado. */
	gap: 0;
	transition: background var(--ps-t), color var(--ps-t);
}

/* La etiqueta hay que sacarla del layout, no sólo de la vista: con font-size 0
   el <span> seguía midiendo 4,5 px y, sumado al gap del plugin, convertía el
   botón en un grid de dos filas de 34 px justos. El corazón se iba 6 px por
   encima del centro y debajo quedaba un hueco blanco: el icono parecía mal
   pegado sobre la foto. El nombre accesible lo pone el aria-label del enlace. */
.ps-card__actions .wcboost-wishlist-button__text,
.ps-card__actions .wcboost-products-compare-button__text { display: none; }

/* Sin caja que rellenar, el hover se marca con el rojo de marca. */
.ps-card__actions > a:hover,
.ps-card__actions > button:hover,
.ps-card__actions > a.button:hover,
.ps-main .ps-card__actions > .button:hover {
	background: transparent;
	color: var(--ps-brand);
}

/* compare.css define "ul.products li.product .wcboost-products-compare-button
   { margin: 10px }". Ese margen ensancha la columna del grid y empuja los dos
   iconos fuera de la tarjeta, así que hace falta igualar su especificidad. */
ul.products li.product .ps-card__actions > a,
ul.products li.product .ps-card__actions > button,
.ps-carousel__track li.product .ps-card__actions > a,
.ps-carousel__track li.product .ps-card__actions > button {
	margin: 0;
}

.ps-card__actions svg,
.ps-card__actions img {
	width: 17px;
	height: 17px;
	display: block;
	/* Red de seguridad de haber quitado el recuadro. Casi todas las fotos tienen
	   la esquina clara y ahí este contorno no se ve; en las pocas que la tienen
	   oscura es lo único que evita que un icono negro se pierda en la foto.
	   Van tres drop-shadow iguales a propósito: cada filtro toma como entrada la
	   salida del anterior, así que se suman hasta formar un trazo blanco de
	   verdad. Con una sola sombra, aunque sea de 2 px, el icono seguía sin leerse
	   sobre fondo oscuro (comprobado). */
	filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 1px 2px rgba(17, 17, 17, .25));
}

.ps-card__actions span {
	display: grid;
	place-items: center;
	line-height: 0;
}

/* Ya guardado en favoritos o en el comparador. */
.ps-card__actions .added,
.ps-card__actions .wcboost-wishlist-button--added,
.ps-card__actions .wcboost-products-compare-button--added { color: var(--ps-brand); }
.ps-card__actions .wcboost-wishlist-button--added:hover,
.ps-card__actions .wcboost-products-compare-button--added:hover { background: transparent; color: var(--ps-brand-dark); }

@media (hover: none) {
	.ps-card__actions { opacity: 1; transform: none; }
}

/* Texto */

/* Jerarquía de la tarjeta.
   El nombre del producto va en negro y negrita: es lo que el cliente busca al
   recorrer el catálogo. Dejarlo en gris fino y decorar en cambio los rótulos
   con tracking amplio invierte la jerarquía y es lo que hace que un catálogo
   parezca una plantilla. */
.ps-card__brand {
	display: block;
	font-size: .75rem;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: .02em;
	line-height: 1.4;
	color: var(--ps-muted);
	margin-bottom: .125rem;
}

.ps-card__title {
	font-size: .875rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0;
	color: var(--ps-ink);
	margin: 0 0 .375rem;
}

li.product .price {
	display: flex;
	align-items: baseline;
	gap: .5rem;
	font-size: .875rem;
	font-weight: 700;
	color: var(--ps-ink);
	margin: 0;
}

li.product .price del {
	font-size: .875rem;
	font-weight: 400;
	color: var(--ps-muted);
	text-decoration: line-through;
}

li.product .price ins { text-decoration: none; color: var(--ps-brand-text); }

/* Colores y tallas */

.ps-card__colors { display: flex; align-items: center; gap: .3125rem; margin-top: .5rem; }

.ps-dot {
	width: 13px; height: 13px;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, .14);
}

.ps-dot__more { font-size: .6875rem; color: var(--ps-muted); }

.ps-card__sizes {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .3125rem;
	margin-top: .5rem;
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-height .3s var(--ps-ease), opacity var(--ps-t), margin-top .3s var(--ps-ease);
}

li.product:hover .ps-card__sizes { max-height: 60px; opacity: 1; }

.ps-card__sizes-label {
	font-size: .625rem;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--ps-muted);
	margin-right: .125rem;
}

.ps-card__size {
	font-size: .6875rem;
	font-weight: 600;
	padding: .125rem .3125rem;
	border: 1px solid var(--ps-border);
	color: var(--ps-ink-soft);
}

@media (hover: none) {
	.ps-card__sizes { max-height: 60px; opacity: 1; }
}

.ps-card__cta {
	display: inline-flex;
	align-items: center;
	margin-top: .625rem;
	font-size: .75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .025em;
	border-bottom: 1px solid var(--ps-ink);
	padding-bottom: 2px;
	width: fit-content;
}
.ps-card__cta:hover { border-color: var(--ps-brand); }

/* En táctil el enlace debe poder pulsarse con el dedo, no sólo con precisión. */
@media (hover: none), (max-width: 767px) {
	.ps-card__cta {
		position: relative;
		min-height: 24px;
	}

	.ps-card__cta::after {
		content: "";
		position: absolute;
		inset: -12px -8px;
	}
}

/* Sin resultados */

.ps-no-results {
	grid-column: 1 / -1;
	text-align: center;
	padding-block: clamp(3rem, 8vw, 5rem);
	color: var(--ps-muted);
}
.ps-no-results svg { margin: 0 auto 1.25rem; opacity: .3; }
.ps-no-results h2 { font-size: 1.25rem; color: var(--ps-ink); margin-bottom: .5rem; }
.ps-no-results__actions { display: flex; gap: .625rem; justify-content: center; margin-top: 1.75rem; flex-wrap: wrap; }

/* ==========================================================================
   6. Ficha de producto
   ========================================================================== */

.ps-single {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 4rem);
	padding-block: clamp(1.5rem, 4vw, 3rem);
	align-items: start;
}

@media (max-width: 900px) {
	.ps-single { grid-template-columns: minmax(0, 1fr); }
}

/* Galería */

.woocommerce-product-gallery { position: relative; }
.woocommerce-product-gallery__wrapper { margin: 0; }

.woocommerce-product-gallery__image { background: var(--ps-surface); }
.woocommerce-product-gallery__image img { width: 100%; height: auto; }

.woocommerce-product-gallery .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
	gap: .5rem;
	list-style: none;
	margin: .625rem 0 0;
	padding: 0;
}

.woocommerce-product-gallery .flex-control-thumbs img {
	border: 1px solid transparent;
	cursor: pointer;
	background: var(--ps-surface);
	transition: border-color var(--ps-t);
}
.woocommerce-product-gallery .flex-control-thumbs img.flex-active,
.woocommerce-product-gallery .flex-control-thumbs img:hover { border-color: var(--ps-ink); }

/* Etiqueta de oferta que WooCommerce imprime sobre la galería. */
.ps-single .onsale {
	position: absolute;
	top: .875rem;
	left: .875rem;
	z-index: 5;
	margin: 0;
	padding: .3125rem .625rem;
	background: var(--ps-brand);
	color: #fff;
	font-size: .6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .025em;
	line-height: 1.2;
}

.ps-single__gallery { position: relative; }

/* Botón de comparar de la ficha: el plugin lo pinta bajo el carrito. */
.ps-single .wcboost-products-compare-button {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin-top: .875rem;
	font-size: .8125rem;
	font-weight: 600;
	color: var(--ps-muted);
}
.ps-single .wcboost-products-compare-button:hover { color: var(--ps-brand); }
.ps-single .wcboost-products-compare-button__icon { display: grid; place-items: center; line-height: 0; }
.ps-single .wcboost-products-compare-button svg { width: 16px; height: 16px; }

@media (hover: none), (max-width: 767px) {
	.ps-single .wcboost-products-compare-button {
		min-height: 44px;
		padding-block: .625rem;
	}

	/* Enlaces de categoría y código bajo el bloque de compra. */
	.ps-single__meta a {
		display: inline-block;
		padding-block: .5rem;
		line-height: 1.2;
	}

	.ps-single__meta { gap: .125rem; }
}

.woocommerce-product-gallery__trigger {
	position: absolute;
	top: .875rem; right: .875rem;
	z-index: 5;
	width: 38px; height: 38px;
	display: grid;
	place-items: center;
	background: #fff;
	box-shadow: var(--ps-shadow-sm);
	font-size: 1rem;
}

/* Resumen */

.ps-single__brand {
	font-size: .75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--ps-muted);
	margin-bottom: .375rem;
}

.product_title {
	font-size: clamp(1.375rem, 3vw, 2rem);
	margin-bottom: .625rem;
}

.ps-single .price {
	display: flex;
	align-items: baseline;
	gap: .625rem;
	font-size: 1.5rem;
	font-weight: 700;
	margin-bottom: .25rem;
}

.ps-single .price del { font-size: 1.0625rem; font-weight: 400; color: var(--ps-muted); }
.ps-single .price ins { text-decoration: none; color: var(--ps-brand); }

.ps-single__save {
	display: inline-block;
	background: var(--ps-brand);
	color: #fff;
	font-size: .6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .025em;
	padding: .25rem .5rem;
	margin-bottom: 1rem;
}

.woocommerce-product-details__short-description {
	color: var(--ps-ink-soft);
	font-size: .9375rem;
	margin-bottom: 1.5rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--ps-border);
}

/* Selector de tallas */

/* La etiqueta "Talla" la imprime WooCommerce en su propia celda, así que el
   enlace de la guía se sube a esa misma línea y se alinea a la derecha. */
.ps-sizes__head {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 1rem;
	min-height: 1.25rem;
	margin-top: -1.75rem;
	margin-bottom: .75rem;
}

.ps-sizes__label {
	font-size: .8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	margin-right: auto;
}

.ps-size-guide__open {
	display: inline-flex;
	align-items: center;
	gap: .375rem;
	font-size: .75rem;
	font-weight: 600;
	color: var(--ps-muted);
	border-bottom: 1px solid currentColor;
	padding-bottom: 1px;
}
.ps-size-guide__open:hover { color: var(--ps-brand); }

@media (hover: none), (max-width: 767px) {
	.ps-size-guide__open { position: relative; }
	.ps-size-guide__open::after {
		content: "";
		position: absolute;
		inset: -14px -10px;
	}
}

.ps-sizes {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
	gap: .5rem;
	margin-bottom: .5rem;
}

.ps-sizes.is-shake { animation: ps-shake .45s var(--ps-ease); }

@keyframes ps-shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-6px); }
	75% { transform: translateX(6px); }
}

.ps-size { position: relative; }

.ps-size input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.ps-size span {
	display: grid;
	place-items: center;
	height: 46px;
	border: 1px solid var(--ps-ink);
	font-size: .875rem;
	font-weight: 600;
	cursor: pointer;
	transition: border-color var(--ps-t), background var(--ps-t), color var(--ps-t);
}

/* El reposo ya lleva el borde negro, así que el hover necesita otra señal. Sólo
   con ratón y nunca sobre la talla ya elegida: mismo motivo que en el swatch. */
@media (hover: hover) {
	.ps-size:not(.is-out):hover input:not(:checked) + span { background: var(--ps-surface); }
}
.ps-size input:checked + span { background: var(--ps-ink); border-color: var(--ps-ink); color: #fff; }
.ps-size input:focus-visible + span { outline: 2px solid var(--ps-brand); outline-offset: 2px; }

/* Talla agotada: sigue a la vista, pero sin tinta.
   Antes iba tachada con una diagonal, y en una ficha con 17 de 22 tallas
   agotadas eso dibujaba una reja: lo que más se veía era justo lo que no se
   puede comprar. Ahora la señal es la ausencia —borde y número apagados, letra
   fina, sin relleno— y el contraste lo pone la talla disponible.
   --ps-muted-light no vale para texto que haya que leer, pero estas tallas son
   un control inactivo de verdad (ni clic ni tabulador), y la WCAG exime del
   mínimo de contraste a los componentes inactivos. */
.ps-size.is-out span {
	color: var(--ps-muted-light);
	border-color: var(--ps-border);
	background-image: none;
	font-weight: 400;
	cursor: not-allowed;
}

/* Cuántas tallas quedan. Lo escribe el JS, que es quien conoce el stock de las
   variaciones; en el HTML llega vacío, así que :empty lo esconde mientras. */
.ps-sizes__stock {
	margin: 0 0 .625rem;
	font-size: .8125rem;
	color: var(--ps-muted);
}
.ps-sizes__stock:empty { display: none; }
.ps-sizes__stock--none { color: var(--ps-brand-text); font-weight: 600; }

.ps-sizes__hint {
	font-size: .8125rem;
	color: var(--ps-brand);
	font-weight: 600;
	min-height: 1.2em;
	margin-bottom: .5rem;
}

/* WooCommerce necesita su desplegable para calcular la variación. */
.ps-sizes__native { display: none; }

/* WooCommerce imprime las variaciones en una <table>. En vertical y a ancho
   completo el selector de talla respira; en dos columnas queda estrujado. */
.variations,
.variations tbody,
.variations tr,
.variations th,
.variations td {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	text-align: left;
}

.variations { margin-bottom: 1.25rem; }
.variations tr { margin-bottom: 1.25rem; }
.variations tr:last-child { margin-bottom: 0; }

.variations .label {
	margin-bottom: .625rem;
	font-size: .8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
}
.variations .label label { margin: 0; font: inherit; }

.reset_variations {
	font-size: .75rem;
	color: var(--ps-muted);
	text-decoration: underline;
	display: inline-block;
	margin-top: .5rem;
}
.reset_variations:not([style*="visible"]) { display: none; }

/* --- Swatches del plugin WCBoost --- */

.wcboost-variation-swatches__wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.wcboost-variation-swatches__item {
	position: relative;
	display: grid;
	place-items: center;
	cursor: pointer;
	border: 1px solid var(--ps-border-strong);
	background: #fff;
	transition: border-color var(--ps-t), background var(--ps-t), color var(--ps-t);
}

.wcboost-variation-swatches__item:hover { border-color: var(--ps-ink); }

/* Talla: rectángulo con el número, como en el resto de la tienda.
   El plugin fija su propio radio y tamaño por variable, así que hace falta
   subir la especificidad para ganarle. */
/* El plugin fija el tamaño con --wcboost-swatches-item-height; se redefine la
   variable además de la altura para ganarle sin recurrir a !important. */
ul.wcboost-variation-swatches__wrapper[data-attribute_name*="talla"] .wcboost-variation-swatches__item {
	--wcboost-swatches-item-width: auto;
	--wcboost-swatches-item-height: 46px;
	width: auto;
	min-width: 58px;
	height: 46px;
	padding-inline: .625rem;
	border-radius: 0;
	border-color: var(--ps-ink);
	font-size: .875rem;
	font-weight: 600;
	line-height: 1;
}

/* Con el reposo ya en negro, el hover necesita otra señal que no sea el borde.
   Dos cautelas, y las dos hacen falta: este selector le gana en especificidad a
   .selected (0,5,1 contra 0,4,0), así que sin el :not(.selected) la talla recién
   elegida se queda gris con el texto blanco encima; y en táctil el :hover se
   queda pegado tras el toque, de ahí el (hover: hover). */
@media (hover: hover) {
	ul.wcboost-variation-swatches__wrapper[data-attribute_name*="talla"] .wcboost-variation-swatches__item:not(.is-out):not(.selected):hover {
		background: var(--ps-surface);
	}
}

.wcboost-variation-swatches__wrapper[data-attribute_name*="talla"] .wcboost-variation-swatches__item.selected {
	background: var(--ps-ink);
	border-color: var(--ps-ink);
	color: #fff;
}

/* Talla agotada: sigue a la vista, pero sin tinta. El porqué, en .ps-size.is-out. */
.wcboost-variation-swatches__wrapper[data-attribute_name*="talla"] .wcboost-variation-swatches__item.is-out {
	color: var(--ps-muted-light);
	border-color: var(--ps-border);
	background-image: none;
	font-weight: 400;
	cursor: not-allowed;
}

/* Una talla agotada puede acabar «seleccionada» sin que nadie la toque: basta
   llegar con ?attribute_pa_talla=39 en la URL. Sin esta regla se pintaba de
   negro y se convertía en lo más llamativo de la ficha. */
.wcboost-variation-swatches__wrapper[data-attribute_name*="talla"] .wcboost-variation-swatches__item.is-out.selected {
	background: var(--ps-base);
	border-color: var(--ps-border);
	color: var(--ps-muted-light);
}

/* El plugin apaga sus propios tooltips en los swatches de tipo botón, así que
   ::after queda libre para decir por qué esa talla no responde. Hay que anular
   el triángulo que deja dibujado (width/height a 0 y un borde de 5 px). Sólo
   con ratón: en móvil no hay hover, y allí la señal es el apagado más el
   contador de tallas disponibles. */
@media (hover: hover) {
	.wcboost-variation-swatches__wrapper[data-attribute_name*="talla"] .wcboost-variation-swatches__item.is-out:hover::after {
		content: attr(data-ps-out);
		display: block;
		position: absolute;
		bottom: calc(100% + 6px);
		left: 50%;
		z-index: 2;
		width: auto;
		height: auto;
		border: 0;
		padding: .25rem .5rem;
		transform: translateX(-50%);
		background: var(--ps-ink);
		color: #fff;
		font-size: .6875rem;
		font-weight: 600;
		line-height: 1.2;
		white-space: nowrap;
		pointer-events: none;
	}
}

/* Color: círculo con el tono de fondo y el nombre sólo para lectores de pantalla. */
.wcboost-variation-swatches--color .wcboost-variation-swatches__item {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background-color: var(--wcboost-swatches-item-color, #d4d4d8);
	overflow: hidden;
}

.wcboost-variation-swatches--color .wcboost-variation-swatches__name {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

.wcboost-variation-swatches--color .wcboost-variation-swatches__item:hover,
.wcboost-variation-swatches--color .wcboost-variation-swatches__item.selected {
	box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--ps-ink);
	border-color: transparent;
}

/* El <select> nativo sobra cuando hay swatches, pero debe seguir en el DOM. */
.wcboost-variation-swatches select { display: none; }

/* Compra */

.ps-single form.cart { margin-bottom: 1.25rem; }

.ps-single .quantity {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--ps-border-strong);
	margin-right: .625rem;
	vertical-align: top;
}

.ps-single .quantity button {
	width: 42px;
	display: grid;
	place-items: center;
	color: var(--ps-ink);
}
.ps-single .quantity button:hover { background: var(--ps-surface); }

.ps-single .quantity input.qty {
	width: 52px;
	border: 0;
	border-inline: 1px solid var(--ps-border-strong);
	text-align: center;
	padding: .75rem .25rem;
	font-weight: 600;
	appearance: textfield;
}
.ps-single .quantity input::-webkit-outer-spin-button,
.ps-single .quantity input::-webkit-inner-spin-button { appearance: none; margin: 0; }

.single_add_to_cart_button {
	flex: 1;
	min-width: 200px;
	height: 100%;
	min-height: 48px;
}

.ps-single form.cart:not(.variations_form) .single_add_to_cart_button,
.woocommerce-variation-add-to-cart { display: flex; gap: .625rem; align-items: stretch; flex-wrap: wrap; }

.ps-wa-product { margin-top: .75rem; }

.woocommerce-variation-price { margin-bottom: .875rem; font-size: 1.25rem; font-weight: 700; }
.woocommerce-variation-availability { font-size: .8125rem; margin-bottom: .625rem; }
.stock.in-stock { color: var(--ps-success); }
.stock.out-of-stock { color: var(--ps-brand); }

/* Garantías */

.ps-single__usps {
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 1.25rem 0 0;
	border-top: 1px solid var(--ps-border);
	display: grid;
	gap: .875rem;
}

.ps-single__usps li { display: flex; align-items: center; gap: .75rem; font-size: .8125rem; }
.ps-single__usps svg { flex: 0 0 20px; color: var(--ps-muted); }
.ps-single__usps span { display: grid; }
.ps-single__usps strong { font-size: .8125rem; font-weight: 600; }
.ps-single__usps span span { color: var(--ps-muted); }

.ps-single__meta {
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 0;
	font-size: .8125rem;
	color: var(--ps-muted);
	display: grid;
	gap: .375rem;
}
.ps-single__meta span { font-weight: 600; color: var(--ps-ink); margin-right: .375rem; }

/* Pestañas */

.woocommerce-tabs { padding-block: clamp(2rem, 5vw, 3.5rem); border-top: 1px solid var(--ps-border); }

.woocommerce-tabs ul.tabs {
	display: flex;
	gap: 2rem;
	list-style: none;
	margin: 0 0 1.75rem;
	padding: 0;
	border-bottom: 1px solid var(--ps-border);
	overflow-x: auto;
}

.woocommerce-tabs ul.tabs li a {
	display: block;
	padding: .875rem 0;
	font-size: .8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--ps-muted);
	border-bottom: 2px solid transparent;
	white-space: nowrap;
}

.woocommerce-tabs ul.tabs li.active a { color: var(--ps-ink); border-bottom-color: var(--ps-brand); }

.woocommerce-Tabs-panel { max-width: 76ch; font-size: .9375rem; color: var(--ps-ink-soft); }
.woocommerce-Tabs-panel h2 { font-size: 1.125rem; margin-bottom: .875rem; }
.woocommerce-Tabs-panel table.shop_attributes th,
.woocommerce-Tabs-panel table.shop_attributes td { padding: .625rem .875rem; border: 1px solid var(--ps-border); text-align: left; }
.woocommerce-Tabs-panel table.shop_attributes th { background: var(--ps-surface); width: 30%; }

/* Relacionados */

.related, .upsells { padding-block: clamp(2rem, 5vw, 3.5rem); border-top: 1px solid var(--ps-border); }
.related > h2, .upsells > h2 {
	font-size: clamp(1.125rem, 2.5vw, 1.5rem);
	text-transform: uppercase;
	margin-bottom: 1.5rem;
}

/* --------------------------------------------------------------------------
   Lectura en pantalla pequeña
   Estas reglas viven aquí y no en theme.css porque esta hoja se carga después:
   allí perderían frente a las declaraciones del catálogo.
   -------------------------------------------------------------------------- */

@media (hover: none), (max-width: 767px) {
	/*
	 * La marca sale de esta lista a propósito: es lo primero que busca quien
	 * compra zapatillas —«¿es Adidas?»— y a 11 px se leía peor que el resto de
	 * la tarjeta. Los chips, los badges y los contadores sí se quedan
	 * pequeños: ahí la densidad es buscada.
	 */
	.ps-badge,
	.ps-card__size,
	.ps-card__sizes-label,
	.ps-filter__count {
		font-size: .6875rem;
	}

	.ps-card__title { font-size: .875rem; }

	/* El icono ocupa toda la caja para que se pueda pulsar entera. */
	.ps-card__actions > a,
	.ps-card__actions > button,
	.ps-card__actions > a.button {
		width: 40px;
		height: 40px;
	}

	.ps-card__actions span {
		width: 100%;
		height: 100%;
	}
}

/* --------------------------------------------------------------------------
   Ficha de producto en móvil
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

	.ps-single { padding-block: 1rem 0; }

	.ps-single__summary { padding-bottom: 1rem; }

	.product_title { font-size: 1.375rem; }

	.ps-single .price { font-size: 1.375rem; }

	/* Las tallas son el control que más se usa aquí: rejilla amplia y alta. */
	.ps-sizes { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
	.ps-size span { height: 52px; font-size: .9375rem; }

	/* El «ul.» no es decorativo: la regla de escritorio lo lleva, y sin él esta
	   pierde por especificidad aunque vaya después y dentro del media query. Sin
	   el prefijo, las tallas se quedaban en 46 px también en móvil. */
	ul.wcboost-variation-swatches__wrapper[data-attribute_name*="talla"] .wcboost-variation-swatches__item {
		--wcboost-swatches-item-height: 52px;
		min-width: 64px;
		height: 52px;
		font-size: .9375rem;
	}

	.wcboost-variation-swatches--color .wcboost-variation-swatches__item {
		width: 42px;
		height: 42px;
	}

	.ps-single .quantity { margin-right: .5rem; }
	.ps-single .quantity button { width: 46px; }
	.ps-single .quantity input.qty { padding-block: .875rem; }

	.single_add_to_cart_button {
		min-height: 52px;
		flex: 1;
		min-width: 0;
	}

	.woocommerce-variation-add-to-cart {
		display: flex;
		gap: .5rem;
		align-items: stretch;
	}

	.ps-wa-product { min-height: 48px; }

	.ps-single__usps { gap: .75rem; }

	.woocommerce-tabs ul.tabs { gap: 1.25rem; }
	.woocommerce-tabs ul.tabs li a { font-size: .75rem; }
}

/* --------------------------------------------------------------------------
   Barra de compra fija (móvil)
   Aparece cuando el botón real sale de pantalla. Sólo en móvil: en escritorio
   el bloque de compra ya está a la vista junto a la galería.
   -------------------------------------------------------------------------- */

.ps-buybar { display: none; }

@media (max-width: 767px) {
	.ps-buybar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 250;
		display: flex;
		align-items: center;
		gap: .75rem;
		padding: .625rem var(--ps-gutter);
		padding-bottom: max(.625rem, env(safe-area-inset-bottom));
		background: #fff;
		border-top: 1px solid var(--ps-border);
		box-shadow: 0 -6px 24px rgba(17, 17, 17, .1);
		transform: translateY(105%);
		visibility: hidden;
		transition: transform .28s var(--ps-ease), visibility .28s var(--ps-ease);
	}

	.ps-buybar.is-visible {
		transform: translateY(0);
		visibility: visible;
	}

	.ps-buybar__info {
		display: flex;
		align-items: center;
		gap: .625rem;
		min-width: 0;
		flex: 1;
	}

	.ps-buybar__thumb {
		width: 42px;
		height: 42px;
		flex: 0 0 42px;
		object-fit: contain;
		background: var(--ps-surface);
	}

	.ps-buybar__text {
		display: grid;
		gap: .0625rem;
		min-width: 0;
	}

	.ps-buybar__name {
		font-size: .75rem;
		color: var(--ps-muted);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.ps-buybar__price {
		font-size: .9375rem;
		font-weight: 700;
		line-height: 1.2;
	}
	.ps-buybar__price del { display: none; }
	.ps-buybar__price ins { text-decoration: none; color: var(--ps-brand); }

	.ps-buybar__cta {
		flex: 0 0 auto;
		min-height: 46px;
		padding-inline: 1.5rem;
	}

	/* El botón flotante de WhatsApp sube para no taparse con la barra. */
	body.single-product .ps-wa { bottom: calc(72px + env(safe-area-inset-bottom)); }
}

/* Guía de tallas */

.ps-size-table { font-size: .875rem; }
.ps-size-table th, .ps-size-table td { padding: .625rem .875rem; border: 1px solid var(--ps-border); text-align: center; }
.ps-size-table th { background: var(--ps-surface); font-weight: 700; font-size: .75rem; text-transform: uppercase; letter-spacing: .025em; }
.ps-size-table tbody tr:nth-child(even) { background: #fafafa; }
.ps-size-table__note { margin-top: 1.25rem; font-size: .8125rem; color: var(--ps-muted); }

/* ==========================================================================
   7. Carrito
   ========================================================================== */

/*
 * Carrito CLÁSICO ([woocommerce_cart]), que es el que monta producción. Las
 * plantillas están en woocommerce/cart/ y la lógica en inc/cart.php.
 *
 * Mobile first. Cada línea es una ficha: foto a la izquierda y, al lado,
 * marca, nombre y talla, con la cantidad y el total debajo. El resumen va
 * después, y una barra fija lleva el total y «Finalizar compra» mientras el
 * botón real no se ve. Desde 1024 px el resumen pasa a una columna lateral.
 *
 * La ficha no cambia con el ancho de la PANTALLA sino con el de su columna
 * (container query): a 1024 px, con el resumen al lado, la columna de líneas
 * mide lo que un móvil apaisado, y a 800 px, sin columna lateral, mide más.
 * Un navegador sin container queries se queda con la ficha de móvil, que
 * funciona a cualquier ancho.
 */

.ps-page--cart { padding-top: clamp(1.25rem, 4vw, 2.5rem); }

/* Cabecera ---------------------------------------------------------------- */

.ps-cart-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .5rem 1.5rem;
	margin-bottom: clamp(1rem, 3vw, 1.75rem);
}

/* initCart() la esconde al vaciarse el carrito; el display de arriba ganaría al [hidden]. */
.ps-cart-head[hidden] { display: none; }

.ps-cart-head__title {
	margin: 0;
	font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
}

.ps-cart-head__count {
	margin-left: .375rem;
	font-size: .875rem;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--ps-muted);
	white-space: nowrap;
}

/* En el móvil la vuelta a la tienda va bajo el botón de compra, que es donde
   termina la lista; aquí arriba sólo le quitaría ancho al título. */
.ps-cart-head__back { display: none; }

@media (min-width: 768px) {
	.ps-cart-head__back {
		display: inline-flex;
		align-items: center;
		gap: .25rem;
		font-size: .8125rem;
		font-weight: 600;
		white-space: nowrap;
	}
}

/* Rejilla ----------------------------------------------------------------- */

.ps-cart {
	display: grid;
	gap: 1.75rem;
	align-items: start;
}

.ps-cart__main {
	min-width: 0;
	container: ps-cart / inline-size;
}

@media (min-width: 1024px) {
	.ps-cart {
		grid-template-columns: minmax(0, 1fr) minmax(340px, 400px);
		gap: clamp(2.5rem, 4vw, 4.5rem);
	}
}

/* El resumen acompaña al bajar por una lista larga, pero sólo si cabe entero
   en la ventana: más alto que ella, su final quedaría fuera de alcance hasta
   llegar al pie de la lista. */
@media (min-width: 1024px) and (min-height: 760px) {
	.ps-cart__aside {
		position: sticky;
		top: calc(var(--ps-adminbar) + 7rem);
	}
}

/* Líneas ------------------------------------------------------------------ */

.ps-cart__labels { display: none; }

.ps-cart__items { border-top: 1px solid var(--ps-border); }

.ps-line {
	position: relative;
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr) auto;
	grid-template-areas:
		"media info info"
		"media qty  total";
	column-gap: .875rem;
	row-gap: .75rem;
	padding-block: 1rem;
	border-bottom: 1px solid var(--ps-border);
}

/*
 * La foto es la casilla entera, a sangre. Cada proveedor manda su fondo
 * (blanco, #f5f5f5, #eaeeef…) y ninguno es fijo: sobre la casilla gris,
 * mix-blend-mode: multiply vuelve gris el blanco y apenas oscurece los fondos
 * grises, así que todas las fotos se leen como la misma pieza sin tener que
 * acertar el color de ninguna. isolation: isolate hace que la mezcla sea sólo
 * con la casilla y no con lo que haya detrás.
 */
.ps-line__media {
	grid-area: media;
	align-self: start;
	aspect-ratio: 1;
	overflow: hidden;
	background: var(--ps-surface);
	isolation: isolate;
}

.ps-line__media a { display: block; height: 100%; }

.ps-line__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	mix-blend-mode: multiply;
	transition: transform .35s var(--ps-ease);
}

@media (hover: hover) {
	.ps-line__media a:hover img { transform: scale(1.04); }
}

.ps-line__info {
	grid-area: info;
	min-width: 0;
	/* Hueco para la papelera, que va en la esquina. */
	padding-right: 2.25rem;
}

.ps-line__brand {
	display: block;
	margin-bottom: .125rem;
	font-size: .75rem;
	color: var(--ps-muted);
}

.ps-line__name {
	font-size: .875rem;
	font-weight: 700;
	line-height: 1.35;
}

.ps-line__name a { color: var(--ps-ink); }
.ps-line__name a:hover { color: var(--ps-brand); }

/* Talla y demás atributos, en una línea: «Talla: 38 · Color: Negro». Es lo
   que el cliente comprueba antes de pagar, así que el valor va en negro. */
.ps-line .variation {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .125rem .3rem;
	margin: .375rem 0 0;
	font-size: .8125rem;
	line-height: 1.4;
	color: var(--ps-muted);
}

.ps-line .variation dt { font-weight: 400; }

.ps-line .variation dd {
	margin: 0;
	font-weight: 600;
	color: var(--ps-ink);
}

.ps-line .variation dd:not(:last-child)::after {
	content: "·";
	margin-left: .3rem;
	font-weight: 400;
	color: var(--ps-muted-light);
}

.ps-line .variation dd p { display: inline; margin: 0; }

.ps-line .backorder_notification {
	margin: .375rem 0 0;
	font-size: .75rem;
	color: var(--ps-muted);
}

/* Cantidad */

.ps-line__qty {
	grid-area: qty;
	align-self: end;
}

.ps-line__qty.is-single .quantity { display: none; }

.ps-line .quantity {
	position: relative;
	display: inline-flex;
	align-items: stretch;
	height: 40px;
	background: #fff;
	border: 1px solid var(--ps-border-strong);
}

.ps-line .quantity .ps-qty-btn {
	display: grid;
	place-items: center;
	width: 38px;
	color: var(--ps-ink);
	transition: background var(--ps-t), color var(--ps-t);
}

@media (hover: hover) {
	.ps-line .quantity .ps-qty-btn:not(:disabled):hover { background: var(--ps-surface); }
}

/* En 1 el «menos» se apaga: para quitar la línea está la papelera, que deja
   deshacer. Bajar a 0 con el botón la borraba sin esa red. */
.ps-line .quantity .ps-qty-btn:disabled {
	color: var(--ps-muted-light);
	cursor: default;
}

.ps-line .quantity input.qty {
	width: 2.5rem;
	padding: 0;
	background: transparent;
	border: 0;
	text-align: center;
	font-size: .875rem;
	font-weight: 700;
	appearance: textfield;
	-moz-appearance: textfield;
}

.ps-line .quantity input.qty::-webkit-outer-spin-button,
.ps-line .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.ps-line .quantity input.qty:focus-visible {
	outline: 2px solid var(--ps-brand);
	outline-offset: -2px;
}

/* Mientras se guarda el cambio, un giro en lugar del número. */
.ps-line .quantity.is-updating input.qty { color: transparent; }

.ps-line .quantity.is-updating::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	border: 2px solid var(--ps-border-strong);
	border-top-color: var(--ps-ink);
	border-radius: 50%;
	animation: ps-spin .7s linear infinite;
}

/* Total de la línea: precio normal tachado, el que se paga, y el de cada
   unidad cuando hay más de una. */

.ps-line__total {
	grid-area: total;
	align-self: end;
	display: grid;
	align-content: center;
	justify-items: end;
	min-height: 40px;
	text-align: right;
	line-height: 1.25;
}

.ps-line__was {
	font-size: .75rem;
	color: var(--ps-muted);
}

.ps-line__amount {
	font-size: .9375rem;
	font-weight: 700;
	white-space: nowrap;
}

.ps-line__amount.is-sale { color: var(--ps-brand-text); }

.ps-line__each {
	margin-top: .125rem;
	font-size: .75rem;
	color: var(--ps-muted);
	white-space: nowrap;
}

/* Quitar */

.ps-line__remove {
	position: absolute;
	top: .375rem;
	right: -.625rem;
}

.ps-line__remove a {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	color: var(--ps-muted);
	transition: color var(--ps-t);
}

.ps-line__remove a:hover { color: var(--ps-brand-text); }

/* Columna ancha: una fila por línea, con cabecera de columnas. */
@container ps-cart (min-width: 620px) {
	.ps-cart__labels,
	.ps-line {
		grid-template-columns: 112px minmax(0, 1fr) 132px 120px 40px;
		column-gap: 1.25rem;
	}

	.ps-cart__labels {
		display: grid;
		padding-bottom: .75rem;
		font-size: .75rem;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: .03em;
		color: var(--ps-muted);
	}

	.ps-cart__labels span:first-child { grid-column: 1 / 3; }
	.ps-cart__labels span:last-child { text-align: right; }

	.ps-line {
		grid-template-areas: "media info qty total remove";
		align-items: center;
		padding-block: 1.25rem;
	}

	.ps-line__info { padding-right: 0; }

	.ps-line__qty,
	.ps-line__total { align-self: center; }

	.ps-line__remove {
		position: static;
		grid-area: remove;
		justify-self: end;
		margin-right: -.625rem;
	}
}

/* Cupón y actualización --------------------------------------------------- */

.ps-coupon { border-bottom: 1px solid var(--ps-border); }

.ps-coupon__toggle {
	display: flex;
	align-items: center;
	gap: .625rem;
	min-height: 52px;
	font-size: .8125rem;
	font-weight: 600;
	list-style: none;
	cursor: pointer;
	user-select: none;
}

.ps-coupon__toggle::-webkit-details-marker { display: none; }
.ps-coupon__toggle::marker { content: ""; }

.ps-coupon__chevron {
	margin-left: auto;
	color: var(--ps-muted);
	transition: transform var(--ps-t);
}

.ps-coupon[open] .ps-coupon__chevron { transform: rotate(180deg); }

.ps-coupon__form {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: .5rem;
	padding-bottom: 1rem;
}

@media (min-width: 768px) {
	.ps-coupon__form { max-width: 440px; }
}

.ps-coupon__form input.input-text {
	min-height: 46px;
	text-transform: uppercase;
	letter-spacing: .03em;
}

.ps-coupon__form input.input-text::placeholder {
	text-transform: none;
	letter-spacing: 0;
	color: var(--ps-muted);
}

.ps-coupon__form input.has-error { border-color: var(--ps-brand); }

/* Con ese peso para ganar a «.ps-main button[type="submit"]:not(.ps-plain)»
   (0,3,1), que es la regla general de botones del theme. */
.ps-main .ps-cart__actions .ps-coupon__form button {
	min-height: 46px;
	padding-inline: 1.25rem;
}

/* El error del cupón (lo añade cart.js) y lo que metan los plugins, debajo y
   a todo el ancho, no como una tercera columna. */
.ps-coupon__form > :not(input):not(button):not(label) { grid-column: 1 / -1; }

.ps-coupon__form .coupon-error-notice {
	margin: 0;
	font-size: .8125rem;
	color: var(--ps-brand-text);
}

.ps-main .ps-cart__actions .ps-cart__update { margin-top: 1rem; }

/* Con JavaScript la cantidad se guarda sola y el botón sobra. Sin él sigue
   siendo la única forma de aplicar un cambio. El selector pesa (0,3,2) para
   ganar al display de la regla general de botones, que pesa (0,3,1). */
body.ps-cart-js .ps-cart__actions button.ps-cart__update { display: none; }

/* Resumen ----------------------------------------------------------------- */

.ps-summary {
	padding: 1.25rem;
	background: var(--ps-surface);
}

@media (min-width: 1024px) {
	.ps-summary { padding: 1.75rem; }
}

.ps-summary__title {
	margin: 0 0 .375rem;
	font-size: 1.0625rem;
	text-transform: uppercase;
	letter-spacing: .01em;
}

/* Filas etiqueta · importe. Siguen siendo una tabla (ver cart-totals.php),
   pero en filas flexibles para que una etiqueta larga pueda partirse. */
.ps-summary__table,
.ps-summary__table tbody {
	display: block;
	width: 100%;
}

.ps-summary__table tr {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .25rem 1rem;
	padding-block: .75rem;
	border-bottom: 1px solid var(--ps-border-strong);
}

.ps-summary__table th,
.ps-summary__table td {
	display: block;
	padding: 0;
	border: 0;
	font-size: .875rem;
	line-height: 1.45;
}

.ps-summary__table th {
	font-weight: 400;
	text-align: left;
	color: var(--ps-ink-soft);
}

.ps-summary__table td {
	margin-left: auto;
	font-weight: 600;
	text-align: right;
}

.ps-summary__note {
	margin-left: .25rem;
	font-size: .8125rem;
	color: var(--ps-muted);
}

/* Cupones aplicados */

.ps-summary__table .cart-discount td { color: var(--ps-success); }

.ps-summary__table .woocommerce-remove-coupon {
	margin-left: .375rem;
	font-size: .75rem;
	font-weight: 500;
	color: var(--ps-muted);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Envío: la etiqueta arriba y las opciones debajo, a todo el ancho. */

.ps-summary__table tr.shipping { display: block; }

.ps-summary__table tr.shipping th { margin-bottom: .625rem; }

.ps-summary__table tr.shipping td {
	margin: 0;
	font-weight: 400;
	text-align: left;
}

.ps-summary #shipping_method {
	display: grid;
	gap: .5rem;
	margin: 0 0 .625rem;
	padding: 0;
	list-style: none;
}

.ps-summary #shipping_method li {
	position: relative;
	display: flex;
	align-items: center;
	gap: .625rem;
	margin: 0;
}

/* Con varias opciones, cada una es una casilla que se toca entera. */
.ps-summary #shipping_method li:has(input[type="radio"]) {
	padding: .75rem .875rem;
	background: #fff;
	border: 1px solid var(--ps-border-strong);
	transition: border-color var(--ps-t), box-shadow var(--ps-t);
}

.ps-summary #shipping_method li:has(input:checked) {
	border-color: var(--ps-ink);
	box-shadow: inset 0 0 0 1px var(--ps-ink);
}

.ps-summary #shipping_method li:has(input[type="radio"]) label::after {
	content: "";
	position: absolute;
	inset: 0;
}

.ps-summary #shipping_method input[type="radio"] {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--ps-ink);
}

.ps-summary #shipping_method label {
	display: flex;
	flex: 1;
	align-items: flex-start;
	justify-content: space-between;
	gap: .75rem;
	min-width: 0;
	font-size: .875rem;
	font-weight: 500;
	line-height: 1.4;
	cursor: pointer;
}

/* «Recojo en tienda (Manuel Ruiz 323, Chimbote)» parte en dos líneas: que
   parta el nombre y el precio se quede a la derecha, no debajo. */
.ps-ship__name { min-width: 0; }

.ps-ship__cost {
	flex: 0 0 auto;
	font-weight: 600;
	white-space: nowrap;
}

.ps-ship__cost.is-free { color: var(--ps-success); }

/* «Enviar a Áncash. Cambiar dirección», en una sola línea. El formulario de la
   calculadora es inline para que el enlace siga a la frase; al abrirse, su
   sección es un bloque y baja a su propia línea. */
.ps-summary .woocommerce-shipping-destination,
.ps-summary .woocommerce-shipping-calculator {
	display: inline;
	margin: 0;
	font-size: .8125rem;
	color: var(--ps-muted);
}

.ps-summary .woocommerce-shipping-destination strong {
	font-weight: 600;
	color: var(--ps-ink-soft);
}

.ps-summary .shipping-calculator-button {
	font-weight: 600;
	color: var(--ps-ink);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ps-summary .shipping-calculator-form {
	margin-top: .875rem;
	padding: 1rem;
	background: #fff;
	border: 1px solid var(--ps-border);
}

.ps-summary .shipping-calculator-form .form-row { margin: 0 0 .75rem; }

.ps-summary .shipping-calculator-form label {
	display: block;
	margin-bottom: .25rem;
	font-size: .75rem;
	color: var(--ps-ink);
}

.ps-summary .shipping-calculator-form .required {
	color: var(--ps-brand-text);
	text-decoration: none;
}

.ps-summary .shipping-calculator-form p:last-of-type { margin-bottom: 0; }

.ps-main .ps-summary .shipping-calculator-form .button { width: 100%; }

.ps-summary .woocommerce-shipping-contents {
	margin: .5rem 0 0;
	font-size: .75rem;
	color: var(--ps-muted);
}

/* El desplegable de región lo monta selectWoo; así casa con los demás campos. */
.ps-summary .select2-container .select2-selection--single {
	height: 46px;
	border: 1px solid var(--ps-border-strong);
	border-radius: 0;
}

.ps-summary .select2-container .select2-selection--single .select2-selection__rendered {
	padding-left: 1rem;
	line-height: 44px;
	font-size: .9375rem;
	color: var(--ps-ink);
}

.ps-summary .select2-container .select2-selection--single .select2-selection__arrow {
	height: 44px;
	right: .5rem;
}

/* Total */

.ps-summary__table tr.order-total {
	align-items: center;
	padding-top: 1rem;
	border-bottom: 0;
}

.ps-summary__table tr.order-total th {
	font-size: 1rem;
	font-weight: 700;
	color: var(--ps-ink);
}

.ps-summary__table tr.order-total td {
	font-size: 1.375rem;
	font-weight: 700;
	letter-spacing: -.01em;
}

.ps-summary__table tr.order-total strong { font-weight: inherit; }

.ps-summary__table tr.order-total small {
	display: block;
	font-size: .75rem;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--ps-muted);
}

/* Ahorro: el mismo aviso con filete que el resto de mensajes del theme. */
.ps-summary__savings {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: .25rem 0 0;
	padding: .625rem .75rem;
	background: #fff;
	border-left: 3px solid var(--ps-success);
	font-size: .8125rem;
	color: var(--ps-success);
}

.ps-summary__savings svg { flex: 0 0 16px; }

/* Botón de compra y lo que añadan las pasarelas (pago exprés) encima. */

.ps-summary .wc-proceed-to-checkout {
	display: grid;
	gap: .75rem;
	margin-top: 1.25rem;
}

.ps-main .ps-summary .checkout-button {
	width: 100%;
	min-height: 54px;
	gap: .625rem;
	font-size: .875rem;
}

.ps-summary .checkout-button svg { transition: transform var(--ps-t); }

@media (hover: hover) {
	.ps-summary .checkout-button:hover svg { transform: translateX(3px); }
}

.ps-summary__continue {
	display: block;
	margin-top: .5rem;
	padding-block: .625rem;
	text-align: center;
	font-size: .8125rem;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (min-width: 768px) {
	.ps-summary__continue { display: none; }
}

/* Garantías y medios de pago */

.ps-summary__trust {
	display: grid;
	gap: .875rem;
	margin: 1.25rem 0 0;
	padding: 1.25rem 0 0;
	border-top: 1px solid var(--ps-border-strong);
	list-style: none;
}

.ps-summary__trust li {
	display: flex;
	align-items: flex-start;
	gap: .75rem;
	font-size: .8125rem;
	line-height: 1.4;
}

.ps-summary__trust svg {
	flex: 0 0 20px;
	margin-top: .0625rem;
}

.ps-summary__trust strong {
	display: block;
	font-weight: 600;
}

.ps-summary__trust span span { color: var(--ps-muted); }

.ps-summary__pay {
	display: flex;
	flex-wrap: wrap;
	gap: .375rem;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
}

.ps-summary__pay li {
	padding: .1875rem .5rem;
	background: #fff;
	border: 1px solid var(--ps-border);
	font-size: .6875rem;
	font-weight: 600;
	color: var(--ps-ink-soft);
}

/* Avisos del carrito («… eliminado. ¿Deshacer?», stock, cupones) */

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

.woocommerce-cart .woocommerce-message a.restore-item,
.woocommerce-cart .woocommerce-info a:not(.button),
.woocommerce-cart .woocommerce-error a:not(.button) {
	margin-left: .25rem;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Barra fija --------------------------------------------------------------- */

/* Hasta 1023 px, que es donde el resumen va DEBAJO de las líneas y el botón de
   compra queda bajo el pliegue: en una tablet vertical pasa igual que en el
   móvil. Con la columna lateral el botón ya está a la vista. */

.ps-cartbar { display: none; }

@media (max-width: 1023px) {
	.ps-cartbar {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 250;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		padding: .625rem var(--ps-gutter);
		padding-bottom: max(.625rem, env(safe-area-inset-bottom));
		background: #fff;
		border-top: 1px solid var(--ps-border);
		box-shadow: 0 -6px 24px rgba(17, 17, 17, .1);
		transform: translateY(105%);
		visibility: hidden;
		transition: transform .28s var(--ps-ease), visibility .28s var(--ps-ease);
	}

	.ps-cartbar.is-visible {
		transform: translateY(0);
		visibility: visible;
	}

	.ps-cartbar__total {
		display: grid;
		min-width: 0;
		line-height: 1.2;
	}

	.ps-cartbar__label {
		font-size: .75rem;
		color: var(--ps-muted);
	}

	.ps-cartbar__amount {
		font-size: 1.0625rem;
		font-weight: 700;
		white-space: nowrap;
	}

	.ps-cartbar__cta {
		flex: 0 0 auto;
		min-height: 46px;
		padding-inline: 1.5rem;
	}

	/*
	 * Con la barra a la vista, WhatsApp y el Libro de Reclamaciones suben como
	 * en la ficha (ver «Carriles de la esquina inferior derecha»). Aquí sólo
	 * mientras se ve: en el carrito la barra se esconde en cuanto el resumen
	 * entra en pantalla, y los flotantes vuelven a su sitio.
	 */
	body.woocommerce-cart .ps-wa { transition: bottom .28s var(--ps-ease), transform var(--ps-t), background var(--ps-t); }
	body.woocommerce-cart #lrpp-floating-icon { transition: bottom .28s var(--ps-ease); }

	body.ps-cartbar-on .ps-wa { bottom: calc(72px + env(safe-area-inset-bottom)); }
	body.ps-cartbar-on #lrpp-floating-icon { bottom: 140px !important; }
	body.ps-cartbar-on:not(:has(.ps-wa)) #lrpp-floating-icon { bottom: 88px !important; }
}

/*
 * WhatsApp, sólo el círculo. La píldora con «Escríbenos» mide unos 150 px y en
 * portátiles de 1024-1440 × 768 caía encima de la mitad derecha de «Finalizar
 * compra» nada más cargar, con la flecha tapada y esa parte del botón
 * respondiendo a WhatsApp. El círculo sólo roza el borde del botón.
 */
@media (min-width: 561px) {
	body.woocommerce-cart .ps-wa {
		width: 54px;
		padding: 0;
		justify-content: center;
	}

	body.woocommerce-cart .ps-wa__label { display: none; }
}

/* Carrito vacío ------------------------------------------------------------ */

.ps-cart-empty {
	display: grid;
	justify-items: center;
	max-width: 34rem;
	margin-inline: auto;
	padding-block: clamp(1rem, 5vw, 3rem) clamp(.5rem, 3vw, 1.5rem);
	text-align: center;
}

.ps-cart-empty__icon {
	display: grid;
	place-items: center;
	width: 76px;
	height: 76px;
	margin-bottom: 1.25rem;
	border-radius: 50%;
	background: var(--ps-surface);
	color: var(--ps-ink);
}

.ps-cart-empty__title {
	margin: 0 0 .5rem;
	font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem);
}

.ps-cart-empty__text {
	max-width: 26rem;
	margin: 0 0 1.5rem;
	color: var(--ps-muted);
}

.ps-cart-empty__cta { margin: 0; }

.ps-main .ps-cart-empty__cta .button {
	min-width: 220px;
	min-height: 50px;
}

.ps-cart-empty__links { margin-top: 1.75rem; }

.ps-cart-empty__chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ps-cart-empty__chips a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 1rem;
	border: 1px solid var(--ps-border-strong);
	font-size: .75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .025em;
	transition: border-color var(--ps-t), background var(--ps-t), color var(--ps-t);
}

.ps-cart-empty__chips a:hover {
	background: var(--ps-ink);
	border-color: var(--ps-ink);
	color: #fff;
}

/* Tiras dentro del carrito (novedades del vacío, ventas cruzadas): el
   contenedor de la página ya pone el margen lateral, no se repite. */
.ps-page--cart .ps-page__content .ps-section {
	padding-inline: 0;
	padding-bottom: 0;
}

.ps-page--cart .ps-page__content .ps-section > .ps-container { padding-inline: 0; }

/* «Vistos recientemente», justo debajo: el aire ya lo pone la página. */
.ps-page--cart + .ps-recent { padding-top: 0; }

/* ==========================================================================
   8. Checkout y cuenta
   ========================================================================== */

.ps-checkout { padding-block: clamp(1.5rem, 4vw, 3rem); }

.woocommerce-checkout .col2-set { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .woocommerce-checkout .col2-set { grid-template-columns: 1fr 1fr; } }

.woocommerce-checkout h3 { font-size: 1rem; text-transform: uppercase; letter-spacing: .025em; margin-bottom: 1rem; }
.woocommerce-checkout .form-row { margin-bottom: 1rem; }
.woocommerce-checkout label { display: block; margin-bottom: .375rem; }
.woocommerce-checkout .required { color: var(--ps-brand); }

#order_review {
	background: var(--ps-surface);
	padding: 1.5rem;
	margin-top: 1.5rem;
}
#order_review table { font-size: .875rem; }
#order_review th, #order_review td { padding: .625rem 0; text-align: left; border-bottom: 1px solid var(--ps-border); }
#place_order { width: 100%; margin-top: 1rem; }

.woocommerce-info, .woocommerce-message, .woocommerce-error {
	list-style: none;
	padding: .875rem 1.125rem;
	margin: 0 0 1.25rem;
	font-size: .875rem;
	border-left: 3px solid var(--ps-ink);
	background: var(--ps-surface);
}
.woocommerce-message { border-left-color: var(--ps-success); }
.woocommerce-error { border-left-color: var(--ps-brand); }

/* --------------------------------------------------------------------------
   8b. Carrito y checkout con bloques
   WooCommerce 11 monta estas páginas con bloques por defecto. El theme.json ya
   aporta tipografía y color; aquí se ajustan ritmo, bordes y densidad para que
   combinen con el resto de la tienda.
   -------------------------------------------------------------------------- */

.ps-page__content { width: 100%; }

.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
	max-width: 100%;
	margin-inline: auto;
}

/* Los bloques traen su propio padding lateral; el contenedor del theme ya lo pone. */
.wp-block-woocommerce-cart .wc-block-components-sidebar-layout,
.wp-block-woocommerce-checkout .wc-block-components-sidebar-layout {
	padding-inline: 0;
}

.wc-block-components-sidebar-layout {
	gap: clamp(1.5rem, 3vw, 3rem);
}

/* Encabezados */

.wc-block-cart__totals-title,
.wc-block-components-title,
.wc-block-cart-items__header {
	font-size: .75rem !important;
	font-weight: 700 !important;
	text-transform: uppercase;
	letter-spacing: .035em;
	color: var(--ps-muted);
}

/* Filas de producto */

.wc-block-cart-items__row {
	border-bottom: 1px solid var(--ps-border);
	padding-block: 1.25rem;
}

.wc-block-cart-item__image img {
	background: var(--ps-surface);
	border-radius: 0;
}

.wc-block-components-product-name {
	font-size: .9375rem !important;
	font-weight: 600;
	line-height: 1.35;
}

.wc-block-components-product-metadata {
	font-size: .8125rem;
	color: var(--ps-muted);
}

.wc-block-components-product-price__value { font-weight: 700; }
.wc-block-components-product-price del { color: var(--ps-muted); font-weight: 400; }
.wc-block-components-product-price ins { text-decoration: none; color: var(--ps-brand); }

/* Selector de cantidad */

.wc-block-components-quantity-selector {
	border: 1px solid var(--ps-border-strong);
	border-radius: 0;
}
.wc-block-components-quantity-selector::after { display: none; }

.wc-block-components-quantity-selector__input {
	font-weight: 600;
	color: var(--ps-ink);
}

.wc-block-components-quantity-selector__button {
	color: var(--ps-ink);
	transition: background var(--ps-t);
}
.wc-block-components-quantity-selector__button:hover:not(:disabled) { background: var(--ps-surface); }

/* Totales */

.wc-block-cart__sidebar .wc-block-components-sidebar,
.wc-block-checkout__sidebar .wc-block-components-sidebar {
	background: var(--ps-surface);
	padding: 1.5rem;
	border-radius: 0;
}

.wc-block-components-totals-item { font-size: .875rem; padding-block: .5rem; }

.wc-block-components-totals-footer-item {
	border-top: 1px solid var(--ps-border);
	padding-top: .875rem;
	font-size: 1.0625rem;
	font-weight: 700;
}

.wc-block-components-totals-wrapper { border-color: var(--ps-border); }

/* Botones */

.wc-block-components-button:not(.is-link) {
	border-radius: 0 !important;
	background: var(--ps-ink);
	color: #fff;
	font-size: .8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .025em;
	min-height: 48px;
	transition: background var(--ps-t);
}
.wc-block-components-button:not(.is-link):hover { background: var(--ps-brand); }

.wc-block-components-button.is-link { color: var(--ps-brand); }

/* Campos del checkout */

.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-combobox-control input,
.wc-block-components-form .wc-blocks-components-select__container {
	border-radius: 0 !important;
	border-color: var(--ps-border-strong) !important;
}

.wc-block-components-text-input.is-active label,
.wc-block-components-text-input input:focus {
	border-color: var(--ps-ink) !important;
}

.wc-block-checkout__form .wc-block-components-checkout-step {
	border: 0;
	padding-inline: 0;
}

.wc-block-components-checkout-step__title {
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: .04em;
}

/* Avisos */

.wc-block-components-notice-banner {
	border-radius: 0;
	border-left-width: 3px;
}

/* Carrito vacío */

.wp-block-woocommerce-empty-cart-block { text-align: center; padding-block: 2rem; }

/* --------------------------------------------------------------------------
   8c. Mi cuenta
   -------------------------------------------------------------------------- */

.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.woocommerce-MyAccount-navigation li a {
	display: block;
	padding: .625rem 0;
	border-bottom: 1px solid var(--ps-border);
	font-size: .875rem;
	font-weight: 500;
}
.woocommerce-MyAccount-navigation li.is-active a { color: var(--ps-brand); font-weight: 700; }

@media (min-width: 900px) {
	.woocommerce-account .woocommerce {
		display: grid;
		grid-template-columns: 230px minmax(0, 1fr);
		gap: 2.5rem;
		align-items: start;
	}
}

/* ==========================================================================
   9. Portada
   ========================================================================== */

/* Hero */

.ps-hero { position: relative; background: var(--ps-surface); overflow: hidden; }

/* Portada de respaldo mientras no hay slides configurados. */
.ps-hero--empty { background: var(--ps-ink); }

.ps-hero__fallback {
	max-width: 40rem;
	padding-block: clamp(3rem, 10vw, 6rem);
	color: #fff;
}
.ps-hero__fallback .ps-hero__title { margin-bottom: 1rem; }

.ps-hero__admin {
	margin-top: 1.5rem;
	padding: .75rem 1rem;
	border: 1px dashed rgba(255, 255, 255, .35);
	font-size: .8125rem;
	color: rgba(255, 255, 255, .75);
}

.ps-hero__slides { position: relative; }

.ps-hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity .6s var(--ps-ease);
	pointer-events: none;
}
.ps-hero__slide:first-child { position: relative; }
.ps-hero__slide.is-active { opacity: 1; pointer-events: auto; z-index: 2; }

.ps-hero__media { position: relative; aspect-ratio: 16/7; }
@media (max-width: 768px) { .ps-hero__media { aspect-ratio: 4/5; } }

.ps-hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* Velo suave: lo justo para que el texto se lea sin apagar la foto. */
.ps-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(0, 0, 0, .38) 0%, rgba(0, 0, 0, .06) 48%, transparent 72%);
}

@media (max-width: 768px) {
	.ps-hero__media::after { background: linear-gradient(0deg, rgba(0, 0, 0, .55) 8%, transparent 62%); }
}

.ps-hero__body {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	align-items: center;
}

/* El texto va sobre la foto que suba la tienda, que puede ser clara. La sombra
   garantiza que se lea sin depender del velo ni de la imagen concreta. */
.ps-hero__inner {
	max-width: 38rem;
	color: #fff;
	text-shadow: 0 1px 12px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .3);
}

@media (max-width: 768px) {
	.ps-hero__body { align-items: flex-end; padding-bottom: 2.5rem; }
	.ps-hero__inner { max-width: none; }
}

.ps-hero__eyebrow {
	font-size: .75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .025em;
	margin-bottom: .75rem;
	color: #fff;
}

.ps-hero__title {
	font-size: clamp(1.875rem, 5vw, 3.5rem);
	line-height: 1.04;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: .875rem;
	text-wrap: balance;
}

.ps-hero__text { font-size: 1.0625rem; color: rgba(255, 255, 255, .88); margin-bottom: 1.75rem; }

.ps-hero__dots {
	position: absolute;
	left: 50%;
	bottom: 1.5rem;
	transform: translateX(-50%);
	z-index: 5;
	display: flex;
	gap: .5rem;
}

.ps-hero__dots button {
	width: 28px;
	height: 3px;
	background: rgba(255, 255, 255, .45);
	transition: background var(--ps-t);
}
.ps-hero__dots button.is-active { background: #fff; }

/* Las flechas van agrupadas abajo a la derecha: centradas a los lados chocaban
   con el titular del slide. */
.ps-hero__nav {
	position: absolute;
	bottom: 1.5rem;
	z-index: 5;
	width: 42px; height: 42px;
	display: grid;
	place-items: center;
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .35);
	color: #fff;
	backdrop-filter: blur(4px);
	transition: background var(--ps-t), color var(--ps-t);
}
.ps-hero__nav:hover { background: #fff; color: var(--ps-ink); }
.ps-hero__nav--prev { right: calc(var(--ps-gutter) + 50px); }
.ps-hero__nav--next { right: var(--ps-gutter); }

@media (max-width: 768px) { .ps-hero__nav { display: none; } }

/* Garantías */

.ps-usps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 1px;
	background: var(--ps-border);
	border-block: 1px solid var(--ps-border);
}

.ps-usps__item {
	display: flex;
	align-items: center;
	gap: .875rem;
	padding: 1.25rem clamp(1rem, 2vw, 1.5rem);
	background: #fff;
}
.ps-usps__item svg { flex: 0 0 26px; color: var(--ps-brand); }
.ps-usps__item strong { display: block; font-size: .8125rem; font-weight: 700; }
.ps-usps__item span { font-size: .75rem; color: var(--ps-muted); }

/* --------------------------------------------------------------------------
   Tiras de imagen (marcas y categorías)
   Van a sangre y pegadas entre sí, sin recuadros ni separaciones: es lo que
   distingue una portada de tienda de calzado de una rejilla de plantilla.
   -------------------------------------------------------------------------- */

.ps-strip { position: relative; width: 100%; }

.ps-strip__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 20%;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.ps-strip__track::-webkit-scrollbar { display: none; }

.ps-strip__item {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	/* Fondo oscuro: el rótulo va en blanco, y si la imagen tarda o falta, el
	   texto debe seguir leyéndose. */
	background: var(--ps-ink);
	scroll-snap-align: start;
}

.ps-strip--tall .ps-strip__item { aspect-ratio: 3 / 4; }

.ps-strip__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .7s var(--ps-ease);
}
.ps-strip__item:hover img { transform: scale(1.06); }

/* Velo suficiente para que el rótulo se lea también sobre foto de producto en
   fondo blanco, que es lo habitual en un catálogo de calzado. */
.ps-strip__item::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .28) 26%, rgba(0, 0, 0, .04) 48%, transparent 66%);
}

.ps-strip__label {
	position: absolute;
	left: clamp(.875rem, 1.5vw, 1.5rem);
	bottom: clamp(.875rem, 1.5vw, 1.5rem);
	z-index: 2;
	color: #fff;
	font-size: clamp(.8125rem, 1.1vw, .9375rem);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .035em;
	border-bottom: 2px solid #fff;
	padding-bottom: 3px;
	text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
}

@media (max-width: 1100px) { .ps-strip__track { grid-auto-columns: 30%; } }
@media (max-width: 760px)  { .ps-strip__track { grid-auto-columns: 46%; } }
@media (max-width: 460px)  { .ps-strip__track { grid-auto-columns: 66%; } }

/* Carrusel */

.ps-carousel { position: relative; }

/* El track reutiliza .products para heredar el estilo de tarjeta, así que hay
   que anular las columnas explícitas de la cuadrícula: si no, las primeras
   cuatro se resuelven a 0px y esas tarjetas quedan invisibles. */
/* El ancho de columna va fijo, sin minmax(0, …): con un mínimo de cero el grid
   encoge todas las tarjetas para que quepan en vez de desbordar, y el carrusel
   deja de tener nada que desplazar. */
.ps-carousel__track.products,
.ps-carousel__track {
	display: grid;
	grid-template-columns: none;
	grid-auto-flow: column;
	/* Algo menos de un cuarto: el siguiente producto asoma y se ve que hay más
	   a la derecha, en vez de parecer una fila cerrada de cuatro. */
	grid-auto-columns: calc(23% - .75rem);
	gap: clamp(.75rem, 1.5vw, 1.25rem);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-bottom: .25rem;
}
.ps-carousel__track::-webkit-scrollbar { display: none; }
.ps-carousel__track > * { scroll-snap-align: start; }

@media (max-width: 1100px) {
	.ps-carousel__track.products,
	.ps-carousel__track { grid-auto-columns: calc(33.333% - .834rem); }
}
@media (max-width: 760px) {
	.ps-carousel__track.products,
	.ps-carousel__track { grid-auto-columns: calc(50% - .5rem); }
}
/*
 * Dos tarjetas completas por pantalla, no una y media.
 *
 * Con el 72 % anterior el cliente veía un producto y el borde del siguiente, y
 * como la foto es aspect-ratio 1 esa anchura arrastraba la tarjeta hasta los
 * 413 px de alto. Al pasar a media pantalla, la tarjeta encoge sola y caben
 * dos: es el reparto que usan las tiendas de referencia y el que permite
 * comparar de un vistazo, que es como se compra calzado.
 */
@media (max-width: 460px) {
	.ps-carousel__track.products,
	.ps-carousel__track { grid-auto-columns: calc(50% - .5rem); }
}

.ps-carousel__nav { display: flex; gap: .375rem; }

.ps-carousel__nav button {
	width: 36px; height: 36px;
	display: grid;
	place-items: center;
	border: 1px solid var(--ps-border-strong);
	color: var(--ps-ink);
	transition: background var(--ps-t), color var(--ps-t), opacity var(--ps-t);
}
.ps-carousel__nav button:hover:not(:disabled) { background: var(--ps-ink); border-color: var(--ps-ink); color: #fff; }
.ps-carousel__nav button:disabled { opacity: .3; cursor: default; }

/* La tarjeta dentro del carrusel es la misma que en el catálogo. */
.ps-carousel__track li.product { list-style: none; }


/* Banners */

.ps-banners {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: clamp(.75rem, 1.5vw, 1.25rem);
}

.ps-banner {
	position: relative;
	display: block;
	aspect-ratio: 3/2;
	background: var(--ps-surface);
	overflow: hidden;
}

.ps-banner img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ps-ease); }
.ps-banner:hover img { transform: scale(1.04); }

.ps-banner::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(0, 0, 0, .55) 0%, transparent 70%);
}

.ps-banner__body {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(1.25rem, 4vw, 2.5rem);
	color: #fff;
	max-width: 26rem;
}

.ps-banner__title {
	font-size: clamp(1.25rem, 3vw, 1.875rem);
	text-transform: uppercase;
	color: #fff;
	margin-bottom: .375rem;
}

.ps-banner__text { font-size: .875rem; color: rgba(255, 255, 255, .85); margin-bottom: 1rem; }

.ps-banner__cta {
	font-size: .75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: #fff;
	border-bottom: 1px solid #fff;
	padding-bottom: 2px;
	width: fit-content;
}

/* Reseñas con talla ------------------------------------------------------ */

/* Veredicto de calce, encima del selector de tallas: es el dato que decide la
   compra, así que va antes de elegir y no enterrado en la pestaña de reseñas. */
.ps-fit-notice {
	display: flex;
	align-items: flex-start;
	gap: .5rem;
	background: var(--ps-surface, #fafafa);
	border-left: 2px solid var(--ps-brand);
	padding: .625rem .75rem;
	margin-bottom: 1rem;
	font-size: .8125rem;
	line-height: 1.45;
}

.ps-fit-notice svg { flex: none; margin-top: .1rem; color: var(--ps-brand); }
.ps-fit-notice small { display: block; color: var(--ps-muted); font-size: .75rem; margin-top: .125rem; }

/* Las dos preguntas del formulario de reseña. */
.ps-review-fields {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 1rem;
}

.ps-review-fields p { flex: 1 1 12rem; margin: 0; }

.ps-review-fields label {
	display: block;
	font-size: .75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	margin-bottom: .25rem;
}

.ps-review-fields select {
	width: 100%;
	padding: .5rem .625rem;
	border: 1px solid var(--ps-border);
	background: #fff;
	font: inherit;
	font-size: .875rem;
}

/* Talla y calce debajo de cada reseña. */
.ps-review-meta {
	font-size: .75rem;
	font-weight: 600;
	color: var(--ps-muted);
	text-transform: uppercase;
	letter-spacing: .03em;
	margin-top: .5rem;
}

/* Valoración en la ficha. Sólo aparece con reseñas de verdad. */
.ps-rating {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin-bottom: .75rem;
	font-size: .8125rem;
	color: var(--ps-muted);
}

.ps-rating:hover { color: var(--ps-brand); }
.ps-rating .star-rating { font-size: .875rem; }

/* Estrellas y formulario de reseña --------------------------------------- */

/* El theme quita woocommerce-general.css, que es donde viven la tipografía de
   iconos y los estilos de las estrellas. Sin esto, la valoración sale como
   texto suelto («Valorado con 4.50 de 5») y el selector del formulario como
   cinco enlaces numerados. Se rehacen con un carácter ★, que no depende de
   ninguna fuente de iconos. */

.star-rating {
	position: relative;
	display: inline-block;
	width: 5.6em;
	height: 1em;
	line-height: 1;
	overflow: hidden;
	font-size: .875rem;
	letter-spacing: .08em;
	flex: none;
}

.star-rating::before {
	content: "★★★★★";
	position: absolute;
	inset: 0;
	color: var(--ps-border-strong);
	white-space: nowrap;
}

/* WooCommerce marca la nota con el ancho en % de este span. */
.star-rating span {
	position: absolute;
	inset: 0 auto 0 0;
	overflow: hidden;
	white-space: nowrap;
	/* El span trae dentro el texto «4.50 de 5»: se empuja fuera del recorte
	   para que quede sólo para lectores de pantalla. */
	text-indent: -9999px;
}

.star-rating span::before {
	content: "★★★★★";
	position: absolute;
	inset: 0;
	color: var(--ps-brand);
	text-indent: 0;
}

/* Selector de estrellas del formulario. */
.comment-form-rating label { display: block; margin-bottom: .375rem; }

.comment-form-rating p.stars { margin: 0 0 1rem; }

/* WooCommerce mete las cinco estrellas dentro de un <span role="group">, así
   que el contenedor flex tiene que ser ese span y no el <p>: puesto en el <p>,
   los enlaces siguen siendo inline y quedan de 0x0. */
.comment-form-rating p.stars span {
	display: inline-flex;
	gap: .25rem;
}

.comment-form-rating p.stars a {
	display: inline-block;
	position: relative;
	width: 1.75rem;
	height: 1.75rem;
	/* Oculta el texto «1 de 5 estrellas» sin quitarlo: los lectores de
	   pantalla siguen leyéndolo y el enlace conserva su rol de radio. */
	font-size: 0;
	color: var(--ps-border-strong);
}

.comment-form-rating p.stars a::before {
	content: "★";
	position: absolute;
	inset: 0;
	font-size: 1.5rem;
	line-height: 1.15;
	text-align: center;
	color: currentColor;
	transition: color var(--ps-t);
}

/* Al pasar el ratón se llenan hasta la estrella señalada. */
.comment-form-rating p.stars:hover a { color: var(--ps-brand); }
.comment-form-rating p.stars a:hover ~ a { color: var(--ps-border-strong); }

/* Ya elegida: llenas hasta la activa. */
.comment-form-rating p.stars.selected a:not(.active) { color: var(--ps-brand); }
.comment-form-rating p.stars.selected a.active { color: var(--ps-brand); }
.comment-form-rating p.stars.selected a.active ~ a { color: var(--ps-border-strong); }

/* El botón de enviar es un input, y la regla de botones del theme sólo alcanza
   a <button>, así que aquí se iguala a mano. */
#review_form input[type="submit"] {
	display: inline-flex;
	padding: .875rem 1.75rem;
	background: var(--ps-ink);
	color: #fff;
	border: 1px solid var(--ps-ink);
	border-radius: var(--ps-radius);
	font-size: .8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .025em;
	cursor: pointer;
	transition: background var(--ps-t), border-color var(--ps-t);
}

#review_form input[type="submit"]:hover {
	background: var(--ps-brand);
	border-color: var(--ps-brand);
}

/* Lista de reseñas. */
.woocommerce-Reviews .commentlist {
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
	display: grid;
	gap: 1.5rem;
}

.woocommerce-Reviews .comment_container {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .875rem;
	align-items: start;
}

.woocommerce-Reviews .comment_container img.avatar {
	width: 40px;
	height: 40px;
	border-radius: var(--ps-radius-pill);
}

.woocommerce-Reviews .comment-text { min-width: 0; }
.woocommerce-Reviews .woocommerce-review__author { font-weight: 700; }

.woocommerce-Reviews .woocommerce-review__published-date {
	color: var(--ps-muted);
	font-size: .8125rem;
}

.woocommerce-Reviews .description p:last-child { margin-bottom: 0; }

/* Carriles de la esquina inferior derecha en móvil ------------------------ */

/*
 * Tres cosas se disputan ese rincón y ninguna sabe de las otras:
 *
 *   1. .ps-buybar          barra de compra del theme, pegada abajo, 67 px
 *   2. .ps-wa              botón de WhatsApp del theme, 54 px
 *   3. #lrpp-floating-icon icono del Libro de Reclamaciones, de un plugin
 *
 * (Y hay una cuarta en juego: los puntos del hero de portada, que por eso
 * se centran en móvil en vez de ir pegados a la derecha.)
 *
 * El theme ya subía su WhatsApp para no taparse con la barra, pero el icono
 * del plugin se quedaba abajo con z-index 9999 y acababa ENCIMA del botón
 * «Añadir al carrito» de la barra: el botón se leía «AÑA…» y no se podía
 * pulsar entero. El plugin escribe bottom y right en el atributo style, así
 * que sólo cede a !important.
 *
 * Se apilan de abajo arriba: barra, WhatsApp, libro. No se le toca el
 * z-index: el Libro de Reclamaciones es obligatorio en Perú y tiene que
 * quedar siempre accesible, nunca por debajo de otra cosa.
 */
@media (max-width: 767px) {
	#lrpp-floating-icon { bottom: 88px !important; }

	/* En la ficha, además de WhatsApp, está la barra de compra. */
	body.single-product #lrpp-floating-icon { bottom: 140px !important; }

	/*
	 * Sin número de WhatsApp configurado, el theme no pinta su botón y el
	 * icono no tiene por qué flotar tan arriba: sólo debe esquivar la barra.
	 * Los navegadores sin :has() se quedan con la posición alta de arriba,
	 * que es fea pero nunca tapa nada.
	 */
	body:not(:has(.ps-wa)) #lrpp-floating-icon { bottom: 1.25rem !important; }
	body.single-product:not(:has(.ps-wa)) #lrpp-floating-icon { bottom: 88px !important; }
}

/* Tallas duplicadas en la tarjeta del catálogo --------------------------- */

/*
 * En la tienda hay un plugin de swatches que inyecta un formulario de
 * variaciones ENTERO dentro de cada tarjeta del catálogo
 * (.cfvsw_variations_form). Medido en móvil: 267 px por tarjeta, con 40
 * elementos, sobre una tarjeta de 604 px. Es decir, el 44 % de la tarjeta son
 * tallas y la foto del zapato se queda en 162 px (27 %).
 *
 * Y encima está repetido: el theme ya muestra las tallas disponibles en
 * .ps-card__sizes, en 52 px y recortadas a dos filas, que es justo la señal
 * que hace falta en un listado («hay stock en varias tallas»). Elegir la talla
 * es tarea de la ficha, no del catálogo.
 *
 * Se oculta sólo en móvil, que es donde duele: en escritorio hay sitio y el
 * comportamiento se deja como está por si se activó a propósito.
 *
 * Mejor aún sería desactivarlo en los ajustes del plugin: así deja de
 * generarse el marcado en vez de generarse y esconderse. Ver el informe.
 */
@media (max-width: 767px) {
	li.product .cfvsw_variations_form { display: none; }
}

/* Garantías: dos columnas en móvil --------------------------------------- */

/*
 * La rejilla pide columnas de 210 px mínimo, así que en un móvil de 375 px
 * cabe una sola y las cuatro garantías se apilan: 338 px de alto. Sumadas a
 * la cabecera y al panel de portada, empujan el primer producto del home a
 * 878 px — más de una pantalla entera antes de ver un zapato.
 *
 * En dos columnas ocupan la mitad. Se recorta el icono y el interlineado
 * porque a 187 px de ancho el texto va justo.
 */
@media (max-width: 767px) {
	.ps-usps { grid-template-columns: 1fr 1fr; }

	.ps-usps__item {
		gap: .5rem;
		padding: .875rem .75rem;
		align-items: flex-start;
	}

	.ps-usps__item svg { flex: 0 0 20px; width: 20px; height: 20px; margin-top: .0625rem; }
	.ps-usps__item strong { font-size: .75rem; line-height: 1.25; }
	.ps-usps__item span { font-size: .6875rem; line-height: 1.3; }
}

/* Zonas táctiles en móvil ------------------------------------------------ */

/*
 * Los botones de la tarjeta miden 34 px, por debajo de los 44 que se
 * recomiendan para el dedo, y están pegados al enlace del producto: fallar el
 * toque manda al cliente a otra pantalla.
 *
 * Se amplía el área sensible con un pseudoelemento en vez de agrandar el
 * botón, para no rehacer el diseño de la tarjeta. Es el mismo recurso que ya
 * usa el enlace de la guía de tallas.
 */
@media (hover: none), (max-width: 767px) {
	.ps-card__actions > a,
	.ps-card__actions > button,
	.ps-card__actions > a.button,
	.ps-main .ps-card__actions > .button { position: relative; }

	.ps-card__actions > a::after,
	.ps-card__actions > button::after,
	.ps-card__actions > a.button::after,
	.ps-main .ps-card__actions > .button::after {
		content: "";
		position: absolute;
		inset: -5px;
	}
}

/* Tarjeta más compacta en móvil ------------------------------------------ */

/*
 * «Elegir talla» no lleva a ningún sitio nuevo: tanto la foto (.ps-card__link)
 * como el título (.ps-card__text) ya son enlaces al producto. En escritorio
 * funciona como llamada visible; en móvil, donde toda la tarjeta se toca, sólo
 * gasta alto. Se oculta sin quitarlo del marcado para no perder el enlace en
 * lectores de pantalla que recorran la tarjeta.
 */
@media (max-width: 767px) {
	.ps-carousel__track .ps-card__cta { display: none; }
}

/* Hero partido (respaldo sin banner) -------------------------------------- */

/*
 * Cuando no hay banner subido, la portada abre con este hero: mensaje de marca
 * en un panel oscuro y, al lado, la última novedad a tamaño grande.
 *
 * Sustituye al respaldo anterior (texto sobre negro + tira de 4 fotos), que en
 * un televisor dejaba ~700 px de negro vacío a la derecha del titular y sacaba
 * los cuatro zapatos diminutos: eran bandas apiladas y ninguna usaba el ancho,
 * que es justo lo que sobra en una pantalla 16:9.
 */

.ps-hero--split { overflow: hidden; }

.ps-hero__split {
	/* Alinea el contenido de cada panel con el ancho de lectura del sitio: los
	   paneles van a sangre, pero el texto no se despega del resto de la página. */
	--ps-edge: max(var(--ps-gutter), calc((100% - var(--ps-max)) / 2));
	display: grid;
	grid-template-columns: 1fr;
}

.ps-hero__pitch {
	background: var(--ps-ink);
	display: flex;
	align-items: center;
	padding: clamp(2rem, 5vh, 4rem) clamp(1.5rem, 3vw, 3rem) clamp(2rem, 5vh, 4rem) var(--ps-edge);
}

.ps-hero--split .ps-hero__fallback { padding-block: 0; max-width: 34rem; }
.ps-hero--split .ps-hero__title { font-size: clamp(1.875rem, 3.6vw, 3.25rem); margin-bottom: .875rem; }

/*
 * El panel derecho es LA FOTO, a sangre: no hay marco ni fondo alrededor.
 *
 * Antes había aquí un color fijo `#eaeeef`, que era el fondo exacto de las
 * fotos de Adidas, para que el zapato se fundiera con el panel. El catálogo
 * cambió de proveedores y ese supuesto se rompió: medido en producción sobre
 * las 24 novedades, 20 fotos vienen con fondo blanco y 4 en rgb(245,245,245);
 * ninguna en rgb(234,238,239). O sea que el color fijo garantizaba un
 * rectángulo visible en TODAS las diapositivas.
 *
 * Meter la foto dentro del panel obliga a acertar ese color. Llenando el panel
 * con la foto no queda fondo con el que desentonar y el problema desaparece por
 * construcción, con cualquier proveedor y sin detectar nada.
 *
 * Este color sólo se ve mientras la foto carga.
 */
.ps-hero__showcase {
	background: var(--ps-surface);
	display: grid;
	grid-template-rows: minmax(0, 1fr);
	overflow: hidden;
}

/*
 * Las diapositivas se apilan en la MISMA celda de rejilla en vez de con
 * position:absolute. Así la celda mide lo que la más alta y el apilado del
 * móvil no necesita alto fijo: es lo que permite que el mismo marcado sirva
 * con y sin columna partida.
 */
.ps-hero__spots { display: grid; min-height: 0; }

.ps-hero__spot {
	grid-area: 1 / 1;
	position: relative;
	display: block;
	color: var(--ps-ink);
	min-height: 0;
	/* Alto del bloque marca+nombre+precio: miden 87 px desde abajo, +5 de
	   holgura. De aquí sale el alto del velo. */
	--ps-ficha: 94px;
	/* La oculta se apaga con visibility, no sólo con opacidad: así sale del
	   orden de tabulación y no se puede llegar a ella con el teclado. */
	opacity: 0;
	visibility: hidden;
	transition: opacity .5s var(--ps-ease), visibility .5s var(--ps-ease);
}
.ps-hero__spot.is-active { opacity: 1; visibility: visible; }
.ps-hero__spot:hover { color: var(--ps-ink); }

/*
 * Velo bajo el texto. La foto puede ser clara u oscura justo ahí, así que la
 * legibilidad no puede depender de la foto concreta.
 *
 * El velo existe SÓLO para tapar la ficha, así que se deriva de ella con
 * `--ps-ficha` en vez de llevar un número suelto. Aquí decía `max(45%, 230px)`
 * y ese suelo se calculó contra el panel de ESCRITORIO (680 px), sin caer en
 * que en móvil el panel baja a 230-341 px: medido en producción, el velo
 * tapaba el 45 % de la foto en 1920x1080, el 67 % en 375x812 y el 100 % en
 * 360x640. El zapato salía lavado, que es lo contrario de lo que busca el
 * hero, y encima empeoraba según encogía la pantalla.
 *
 * El tramo opaco va en PX, porque la ficha mide lo mismo caiga en el panel que
 * caiga. El alto total va en % con suelo y techo, para que el desvanecido
 * conserve recorrido en los paneles bajos y no quede un canto duro cruzando la
 * foto. El suelo es mayor que la última parada, así que las paradas nunca se
 * desordenan.
 */
.ps-hero__spot::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: clamp(calc(var(--ps-ficha) + 40px), 28%, calc(var(--ps-ficha) + 110px));
	background: linear-gradient(0deg,
		#fff 0 var(--ps-ficha),
		rgba(255, 255, 255, .5) calc(var(--ps-ficha) + 24px),
		rgba(255, 255, 255, 0));
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.ps-hero__spot { transition: none; }
}

/* Puntos: mismo lenguaje que los del carrusel de banners. Van sobre el velo,
   en la esquina, para no robarle sitio a la foto. */
.ps-hero__spot-dots {
	position: absolute;
	right: var(--ps-edge);
	bottom: 1.5rem;
	z-index: 3;
	display: flex;
	gap: .5rem;
}
.ps-hero__spot-dots button {
	position: relative;
	width: 28px;
	height: 3px;
	background: rgba(17, 17, 17, .22);
	transition: background var(--ps-t);
}
.ps-hero__spot-dots button.is-active { background: var(--ps-ink); }
/* Área táctil de 24 px sin engordar la barra, que descuadraría la fila. */
.ps-hero__spot-dots button::after {
	content: "";
	position: absolute;
	inset: -11px -2px;
}

/* La foto ocupa la celda entera; `cover` es lo que elimina la costura. */
.ps-hero__spot-media {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 0;
}
.ps-hero__spot-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s var(--ps-ease);
}
.ps-hero__spot:hover .ps-hero__spot-media img { transform: scale(1.03); }

/*
 * Ficha. En la banda ancha va SUPERPUESTA abajo a la izquierda, sobre el velo;
 * en móvil se sale de la foto y se coloca debajo (ver el apilado, más abajo).
 * Las tres líneas van en un bloque en vez de sueltas con su propio `bottom`:
 * así el conjunto se recoloca cambiando una regla, y su alto lo mide el
 * navegador en lugar de tenerlo yo cuadrado a mano.
 */
.ps-hero__spot-ficha {
	position: absolute;
	left: clamp(1.25rem, 3vw, 3rem);
	right: clamp(1.25rem, 3vw, 3rem);
	bottom: .75rem;
	z-index: 2;
	display: grid;
	gap: .125rem;
}
.ps-hero__spot-brand {
	font-size: .75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .025em;
	color: var(--ps-muted);
}
.ps-hero__spot-name {
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
	/* Una línea: superpuesta, el velo se dimensiona con `--ps-ficha`, así que
	   la ficha no puede crecer sin descuadrarlo. */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ps-hero__spot-price {
	font-size: 1.25rem;
	font-weight: 700;
	/* Los puntos comparten renglón con el precio (uno a la izquierda, otros a
	   la derecha). Un precio de rango se metería debajo de ellos, así que se
	   corta antes de llegar en vez de solaparse. */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ps-hero__spot-price del { display: none; }
.ps-hero__spot-price ins { text-decoration: none; }

/*
 * Banda ancha: los dos paneles conviven y el conjunto recibe ALTO DEFINIDO.
 *
 * El alto es la clave de que esto funcione en televisores y en portátiles de
 * 1366×768: la foto se estira a su celda con `minmax(0, 1fr)`, así que en una
 * pantalla baja el zapato encoge en vez de empujar el resto fuera de pantalla.
 * Sin `minmax(0, 1fr)` la fila se dimensiona por contenido y el alto definido
 * no sirve de nada: el hero vuelve a crecer y a desbordar.
 */
@media (min-width: 1000px) {
	.ps-hero__split {
		grid-template-columns: minmax(300px, .92fr) minmax(0, 1.08fr);
		grid-template-rows: minmax(0, 1fr);
		height: clamp(420px, calc(100svh - 190px), 680px);
	}
	.ps-hero__pitch,
	.ps-hero__showcase { min-width: 0; min-height: 0; }
}

/*
 * Apilado (móvil y tablet en vertical).
 *
 * Medido en un 375×812 antes de tocar esto: el hero salía 821 px y sólo caben
 * 705 bajo la cabecera, así que el NOMBRE del producto quedaba partido por el
 * borde inferior y los puntos caían en 892 — fuera de pantalla, sin manera de
 * ver que había más de un producto.
 *
 * Aquí se recortan los dos bloques hasta que la ficha entera (zapato, marca,
 * nombre, precio y puntos) entra en la primera pantalla. La foto va atada al
 * ALTO de la ventana, no al ancho, porque es el alto lo que escasea.
 */
@media (max-width: 999px) {
	.ps-hero__pitch { padding-block: clamp(1.5rem, 3.5vh, 2.25rem); }
	.ps-hero--split .ps-hero__text { margin-bottom: 1.25rem; }
	/* La foto llena el panel, así que el alto lo fija el PANEL, no la imagen.
	   Estos números subieron al arreglar el velo: con el texto SUPERPUESTO la
	   ficha ya no ocupa fila propia bajo la foto, así que el alto que antes
	   necesitaba se le puede devolver al zapato sin sacar nada de pantalla. */
	.ps-hero__showcase { height: clamp(320px, 46vh, 440px); }

	/*
	 * Aquí la ficha SALE de encima de la foto y el velo se apaga.
	 *
	 * No es una preferencia, es que no caben: medidas las 6 fotos del hero
	 * (359x359), el zapato ocupa siempre la banda y=[103,298], o sea 195 px,
	 * y el velo necesita 132 para tapar las tres líneas. 195+132 = 327 sobre
	 * un panel de 256 px. Por eso afinar el velo no bastaba: con el texto
	 * encima, la suela quedaba lavada hiciera lo que hiciera. Superponer sólo
	 * sale bien cuando el panel es bastante más alto que el motivo, que es el
	 * caso de la banda ancha y no el del móvil.
	 *
	 * La foto sigue a sangre, así que el fondo de la imagen sigue sin pintar
	 * nada: no vuelve el problema del color que resolvió 1.6.0.
	 */
	.ps-hero__spot {
		display: grid;
		grid-template-rows: minmax(0, 1fr) auto;
	}
	.ps-hero__spot::after { content: none; }

	.ps-hero__spot-ficha {
		position: static;
		padding: .5rem clamp(1.25rem, 3vw, 3rem) .875rem;
		/* Blanco, no `--ps-surface`: el gris dejaba una costura contra la foto,
		   que en 20 de las 24 novedades tiene el fondo blanco. */
		background: #fff;
	}

	/*
	 * El zapato vive en la banda ALTA de la foto: el margen de arriba va de
	 * 103 a 154 px y el de abajo de 60 a 115, así que centrar el recorte
	 * desperdicia un tercio de la imagen en blanco. Bajando el punto de
	 * anclaje se recorta ese vacío y el calzado llena la caja.
	 */
	.ps-hero__spot-media img { object-position: center 62%; }

	/*
	 * Los puntos SUBEN por encima de la ficha y se centran.
	 *
	 * La esquina inferior derecha es el carril de los flotantes (el WhatsApp
	 * del theme y el Libro de Reclamaciones del plugin), y al crecer el hero
	 * la fila de puntos aterrizó justo ahí: medido en producción con
	 * `elementFromPoint`, en 360x640 la pulsación de los puntos 5 y 6 se la
	 * quedaba `a.ps-wa`, y en 414x896 el icono del plugin. Centrados quedan
	 * fuera de ese carril sea cual sea el alto del hero, que es lo que lo
	 * hace estable: no depende de dónde acabe el hero, sólo de que los
	 * flotantes vivan pegados a la derecha.
	 *
	 * El alto de la ficha se fija aquí y se reutiliza como ancla de los
	 * puntos: es el mismo número en los dos sitios, así que no pueden
	 * separarse. `align-content: end` mantiene las líneas abajo aunque el
	 * producto no traiga marca y la ficha tenga sólo dos.
	 */
	.ps-hero__showcase { --ps-ficha-movil: 99px; }

	.ps-hero__spot-ficha {
		height: var(--ps-ficha-movil);
		box-sizing: border-box;
		align-content: end;
	}

	.ps-hero__spot-dots {
		left: 0;
		right: 0;
		justify-content: center;
		bottom: calc(var(--ps-ficha-movil) + .5rem);
	}
}


/*
 * Móviles cortos (360×640 y parecidos). Con las medidas de arriba los puntos
 * caían en 722 con la pantalla acabando en 640: seguían sin verse, que era el
 * problema original. Aquí se aprieta un punto más.
 */
@media (max-width: 999px) and (max-height: 720px) {
	/* Los 18 px que se le quitan aquí al bloque negro son justo los que le
	   faltaban a la foto para no recortar el zapato. */
	.ps-hero__pitch { padding-block: .875rem; }
	.ps-hero--split .ps-hero__title { font-size: 1.625rem; margin-bottom: .5rem; }
	.ps-hero--split .ps-hero__text { font-size: .9375rem; margin-bottom: .75rem; }
	.ps-hero--split .ps-hero__eyebrow { margin-bottom: .5rem; }
	/* El velo no baja de 132 px porque tiene que tapar la ficha, así que con
	   los 230 px de antes se comía el 65 % de la foto por pura geometría: aquí
	   el arreglo es dar alto al PANEL, no seguir recortando el velo. Medido en
	   360x640: los puntos quedan en 594 y la pantalla acaba en 640. */
	/* La foto se queda con lo que la ficha no usa, y necesita 195 px: es la
	   banda que ocupa el zapato en las 6 fotos (y=103 a 298). Por debajo de
	   eso el recorte empieza a comérselo. Medido en 360x640: panel 294, foto
	   195, puntos en 600 y la pantalla acaba en 640. */
	.ps-hero__showcase { height: clamp(293px, 46vh, 340px); }
}

/* Galería de producto ----------------------------------------------------- */

/*
 * Sustituye a la de WooCommerce (flexslider + zoom + photoswipe, 85 KB de JS).
 * El paso de imágenes lo hace el navegador con scroll-snap: sin JavaScript, y
 * con el gesto que el usuario ya espera en el móvil.
 */
.ps-gallery { display: grid; gap: .75rem; }

.ps-gallery__main { position: relative; min-width: 0; }

.ps-gallery__track {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 100%;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.ps-gallery__track::-webkit-scrollbar { display: none; }
.ps-gallery__slide { scroll-snap-align: center; }

.ps-gallery__open {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: var(--ps-surface, #fafafa);
	/* Proporción fija: la foto puede tardar, pero el hueco ya está reservado y
	   la página no salta (CLS). */
	aspect-ratio: 1;
	cursor: zoom-in;
}

.ps-gallery__open img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Contador: sustituye a los puntos, ocupa menos y dice cuántas quedan. */
.ps-gallery__counter {
	position: absolute;
	right: .75rem;
	bottom: .75rem;
	margin: 0;
	padding: .25rem .5rem;
	background: rgba(17, 17, 17, .7);
	color: #fff;
	font-size: .6875rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: .04em;
}

/*
 * En móvil no hay miniaturas: se pasa con el dedo y el contador dice por dónde
 * vas. Ponerlas encima de la foto —que es el orden natural del marcado— le
 * robaba altura justo a lo que vende, y duplicaba una navegación que el gesto
 * ya resuelve.
 */
.ps-gallery__thumbs { display: none; }

@media (min-width: 768px) {
	.ps-gallery__thumbs {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		gap: .5rem;
		scrollbar-width: none;
	}
	.ps-gallery__thumbs::-webkit-scrollbar { display: none; }
}

.ps-gallery__thumb {
	display: block;
	width: 64px;
	padding: 0;
	background: var(--ps-surface, #fafafa);
	border: 1px solid transparent;
	aspect-ratio: 1;
	cursor: pointer;
	transition: border-color var(--ps-t), opacity var(--ps-t);
	opacity: .6;
}

.ps-gallery__thumb img { width: 100%; height: 100%; object-fit: contain; }
.ps-gallery__thumb:hover { opacity: 1; }
.ps-gallery__thumb.is-active { opacity: 1; border-color: var(--ps-ink); }

/* En escritorio el rail va vertical a la izquierda, como en las tiendas de
   moda: deja la foto lo más grande posible sin robarle ancho al carrito. */
@media (min-width: 768px) {
	.ps-gallery {
		grid-template-columns: 64px minmax(0, 1fr);
		align-items: start;
		gap: 1rem;
	}

	.ps-gallery--single { grid-template-columns: minmax(0, 1fr); }

	.ps-gallery__thumbs {
		flex-direction: column;
		overflow-y: auto;
		max-height: 620px;
	}

	/* Con el rail a la vista, el contador sobra. */
	.ps-gallery__counter { display: none; }
}

/* Ampliación: el modal a pantalla casi completa, con las fotos apiladas. */
.ps-modal--gallery .ps-modal__box {
	width: min(96vw, 1100px);
	max-height: 92vh;
	display: flex;
	flex-direction: column;
}

.ps-gallery__zoom {
	list-style: none;
	margin: 0;
	padding: 0 0 1rem;
	overflow-y: auto;
	display: grid;
	gap: .5rem;
}

.ps-gallery__zoom img {
	width: 100%;
	height: auto;
	display: block;
	background: var(--ps-surface, #fafafa);
}

/* Estrellas dentro de los bloques de WooCommerce ------------------------- */

/*
 * wc-blocks.css pinta las estrellas con su propia tipografía de iconos, donde
 * la letra «S» dibuja una estrella. Como el theme no carga esa fuente, en las
 * páginas con bloques —carrito, checkout— la valoración se leía literalmente
 * «SSSSS».
 *
 * Sus selectores llevan dos clases (.wc-block-grid__product-rating
 * .star-rating), así que ganaban a los de una clase de más arriba. Se repiten
 * aquí con el mismo peso en vez de recurrir a !important.
 */
.wc-block-grid__product-rating .star-rating,
.wc-block-components-product-rating .star-rating {
	font-family: inherit;
	letter-spacing: .08em;
}

.wc-block-grid__product-rating .star-rating::before,
.wc-block-components-product-rating .star-rating::before {
	content: "★★★★★";
	color: var(--ps-border-strong);
	opacity: 1;
}

.wc-block-grid__product-rating .star-rating span::before,
.wc-block-components-product-rating .star-rating span::before {
	content: "★★★★★";
	color: var(--ps-brand);
}

/* Añadir talla desde el catálogo ------------------------------------------ */

/*
 * Los chips pasan de informar a ser accionables. Se mantiene su tamaño: son
 * densos a propósito, y el área de toque ya se amplía en móvil con el
 * pseudoelemento de más arriba.
 */
.ps-card__sizes--add .ps-card__size {
	cursor: pointer;
	transition: background var(--ps-t), color var(--ps-t), border-color var(--ps-t);
}

.ps-card__sizes--add .ps-card__size:hover:not(:disabled) {
	background: var(--ps-ink);
	border-color: var(--ps-ink);
	color: #fff;
}

.ps-card__sizes--add .ps-card__size:disabled { opacity: .45; cursor: default; }

/* La etiqueta hace de zona de aviso: dice «Añadido al carrito» y vuelve sola. */
.ps-card__sizes--add.is-added .ps-card__sizes-label { color: var(--ps-success); }
.ps-card__sizes--add.is-error .ps-card__sizes-label { color: var(--ps-brand-text); }
.ps-card__sizes--add.is-loading { opacity: .6; pointer-events: none; }

/*
 * Con chips pulsables el bloque ya no se recorta a dos filas: esconder tallas
 * que ahora son botones dejaría media curva inalcanzable.
 */
.ps-card__sizes--add { max-height: none; }

/* Banner de campaña (bloque) ---------------------------------------------- */

/*
 * Variante del .ps-banner de la portada. Comparte foto, superposición y
 * tipografía; sólo cambia lo que una campaña necesita poder mover: dónde va el
 * texto, de qué color y cuánto ocupa.
 */
.ps-banner--block {
	aspect-ratio: 21 / 9;
	/* No es un enlace: dentro puede haber dos botones, y no se anidan. */
	cursor: auto;
}

.ps-banner--tall { aspect-ratio: 4 / 3; }

.ps-banner--block .ps-banner__body { max-width: 34rem; }

.ps-banner--center .ps-banner__body {
	max-width: 42rem;
	margin-inline: auto;
	align-items: center;
	text-align: center;
}

.ps-banner--right .ps-banner__body {
	margin-left: auto;
	align-items: flex-end;
	text-align: right;
}

/* Sobre foto clara el texto blanco no se lee: se invierte y se quita el velo. */
.ps-banner--dark .ps-banner__body { color: var(--ps-ink); }
.ps-banner--dark .ps-banner__text { color: var(--ps-ink-soft); }
.ps-banner--dark::after { display: none; }

.ps-banner__eyebrow {
	font-size: .75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	margin-bottom: .5rem;
}

.ps-banner--block .ps-banner__title {
	font-size: clamp(1.5rem, 4vw, 2.75rem);
	margin-bottom: .5rem;
}

.ps-banner__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin-top: 1.25rem;
}

.ps-banner__link {
	font-size: .8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .025em;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
}

/* En móvil, el texto centrado y la proporción más alta: a 21/9 no cabe nada. */
@media (max-width: 767px) {
	.ps-banner--block,
	.ps-banner--tall { aspect-ratio: 3 / 4; }

	.ps-banner--block .ps-banner__body,
	.ps-banner--right .ps-banner__body {
		max-width: none;
		margin: 0;
		align-items: flex-start;
		text-align: left;
	}
}

/* Acceso y cuenta --------------------------------------------------------- */

/*
 * Sin sesión, lo que se ve en «Mi cuenta» es el formulario de acceso, y estaba
 * a todo el ancho: en escritorio quedaba una caja de 1400 px para dos campos.
 * Se centra y se acota, que es como se lee un formulario corto.
 *
 * La rejilla de dos columnas de arriba sólo aplica cuando hay sesión —ahí sí
 * existe el menú lateral—, así que esto no la pisa.
 */
.woocommerce-account:not(.logged-in) .woocommerce {
	max-width: 26rem;
	margin-inline: auto;
}

/* Con registro activado, acceso y alta conviven en dos columnas. */
@media (min-width: 900px) {
	.woocommerce-account:not(.logged-in) .woocommerce {
		max-width: 54rem;
	}

	.woocommerce-account:not(.logged-in) .u-columns {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 3rem;
		align-items: start;
	}
}

.woocommerce-form-login,
.woocommerce-form-register {
	border: 1px solid var(--ps-border);
	padding: clamp(1.25rem, 4vw, 2rem);
}

.woocommerce-form-login .form-row,
.woocommerce-form-register .form-row { margin-bottom: 1rem; }

.woocommerce-form-login label,
.woocommerce-form-register label {
	display: block;
	margin-bottom: .25rem;
	font-size: .8125rem;
	font-weight: 600;
}

/*
 * «Recuérdame» y el botón iban pegados en la misma línea y se leían como una
 * sola cosa. Se separan y el botón pasa a ocupar el ancho, que en móvil es lo
 * que se espera del elemento principal de un formulario.
 */
.woocommerce-form-login .form-row:has( .woocommerce-form-login__rememberme ) {
	display: grid;
	gap: 1rem;
}

.woocommerce-form-login__rememberme {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-size: .8125rem;
	margin: 0;
}

.woocommerce-form-login__submit,
.woocommerce-form-register__submit { width: 100%; }

.woocommerce-LostPassword {
	margin: 1rem 0 0;
	font-size: .8125rem;
}
.woocommerce-LostPassword a { border-bottom: 1px solid currentColor; }

/* Los avisos de pedido y las tablas de la cuenta, con el mismo aire que el
   resto del theme. */
.woocommerce-MyAccount-content > p:first-child { font-size: .9375rem; }

.woocommerce-orders-table,
.woocommerce-table--order-details { font-size: .875rem; }

.woocommerce-orders-table th,
.woocommerce-table--order-details th {
	text-align: left;
	font-size: .75rem;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--ps-muted);
	border-bottom: 1px solid var(--ps-border);
	padding: .625rem 0;
}

.woocommerce-orders-table td,
.woocommerce-table--order-details td {
	padding: .875rem 0;
	border-bottom: 1px solid var(--ps-border);
}

/* Filas del carrito en móvil ---------------------------------------------- */

/*
 * WooCommerce reparte la fila del carrito en cuatro pistas pensadas para
 * escritorio: imagen, producto (que ocupa dos) y total. En un móvil de 375 px
 * eso dejaba la foto en 64 px y el NOMBRE en 179 —la mitad de la fila—, así que
 * «Adidas Gorra BB Cap Rubpur Rojo, Hombre» partía en dos líneas mientras
 * sobraba hueco a la derecha.
 *
 * Aquí pasa a dos columnas: foto a la izquierda, y a su lado nombre, talla,
 * cantidad y subtotal apilados. El nombre gana de 179 a 239 px y la foto sube a
 * 88, que en una zapatería es lo que permite reconocer el producto.
 *
 * Las declaraciones llevan !important a regañadientes: las reglas de
 * wc-blocks.css colocan estas celdas en la rejilla con la misma especificidad,
 * y sin esto la fila 2 del total se ignora y el precio se superpone al nombre.
 */
@media (max-width: 600px) {
	.woocommerce-cart .wc-block-cart-items__row {
		grid-template-columns: 88px minmax(0, 1fr) !important;
		grid-template-rows: auto auto !important;
		column-gap: 1rem;
	}

	.woocommerce-cart .wc-block-cart-item__image {
		grid-column: 1 !important;
		grid-row: 1 / span 2 !important;
	}

	.woocommerce-cart .wc-block-cart-item__image img {
		width: 88px !important;
		max-width: none;
	}

	.woocommerce-cart .wc-block-cart-item__product {
		grid-column: 2 / -1 !important;
		grid-row: 1 !important;
	}

	/* El subtotal, bajo el bloque del producto y alineado con él: suelto a la
	   derecha quedaba huérfano y parecía de otra fila. */
	.woocommerce-cart .wc-block-cart-item__total {
		grid-column: 2 / -1 !important;
		grid-row: 2 !important;
		padding: 0 !important;
		margin-top: .25rem;
	}

	.woocommerce-cart .wc-block-cart-item__total,
	.woocommerce-cart .wc-block-cart-item__total * {
		text-align: left !important;
		justify-content: flex-start !important;
	}
}

/* Tiras con pocas piezas -------------------------------------------------- */

/*
 * La pista reparte columnas del 20 %: cinco por pantalla. Las tiras de género
 * son SIEMPRE tres, y las de marca pueden ser dos, así que en escritorio
 * quedaba un hueco a la derecha que parecía contenido que falta.
 *
 * Cuando caben todas sin desplazar, deja de comportarse como carrusel y
 * reparte el ancho en columnas iguales. En móvil no se toca: allí el
 * desplazamiento sigue teniendo sentido y las piezas deben verse grandes.
 */
@media (min-width: 761px) {
	.ps-strip--fit .ps-strip__track {
		grid-auto-flow: row;
		grid-template-columns: repeat(var(--ps-strip-count, 3), minmax(0, 1fr));
		gap: 1px;
		overflow: visible;
	}

	/* Sin nada que desplazar, las flechas del carrusel sobran. */
	.ps-strip--fit ~ .ps-carousel__nav,
	.ps-strip--fit .ps-carousel__nav { display: none; }

	/*
	 * Al ocupar un tercio del ancho en vez de un quinto, la proporción alta
	 * dispararía el alto de la sección. Se ensancha la pieza.
	 */
	.ps-strip--fit .ps-strip__item,
	.ps-strip--fit.ps-strip--tall .ps-strip__item { aspect-ratio: var(--ps-strip-ratio, 1); }
}