/**
 * DREZZ — estilos del tema.
 *
 * Organizado en capas, de lo general a lo particular:
 *   1. Fundamentos    · lo que theme.json no puede expresar
 *   2. Accesibilidad  · foco, salto al contenido, movimiento reducido
 *   3. Tokens         · la etiqueta en mayúsculas y las utilidades
 *   4. Encabezado     · las dos barras del mockup
 *   5. Pie
 *   6. Celular        · el replanteo, no un encogimiento
 *
 * Todos los valores salen de theme.json como variables --wp--*. Si un color o
 * una medida está escrita a mano acá, es un bug.
 */

/* ------------------------------------------------------------------ *
 * 1. Fundamentos
 * ------------------------------------------------------------------ */

:root {
	--drezz-transicion: 160ms cubic-bezier(0.2, 0, 0.2, 1);
}

/* Los números de los precios no pueden bailar cuando se los escanea en columna.
 * Asap trae `tnum` (verificado en la fuente antes de cambiarla: también `kern`,
 * `liga`, `lnum` y `onum`), así que la cifra tabular sigue saliendo. Si algún día
 * se cambia la familia de textos, esto es lo primero que hay que comprobar. */
.drezz-cifra,
.woocommerce-Price-amount,
.wp-block-woocommerce-product-price {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

/* Menos de 16px en un campo dispara el zoom automático de Safari en iOS. En el
 * formulario de publicar eso es un desastre, así que no se negocia por tamaño
 * de fuente en ningún input del sitio. */
input,
select,
textarea,
button {
	font-family: inherit;
	font-size: 1rem;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

/* ------------------------------------------------------------------ *
 * 2. Accesibilidad
 * ------------------------------------------------------------------ */

/* Anillo de foco de dos tonos: una sola regla que se ve tanto sobre el lienzo
 * blanco como sobre los botones negros. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--negro);
	outline-offset: 2px;
	box-shadow: 0 0 0 4px var(--wp--preset--color--blanco);
	border-radius: var(--wp--custom--radio--xs);
}

.drezz-salto {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--negro);
	color: var(--wp--preset--color--blanco);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	text-decoration: none;
}

.drezz-salto:focus {
	left: 1rem;
	top: 1rem;
}

.drezz-solo-lectores {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ------------------------------------------------------------------ *
 * 3. Tokens reutilizables
 * ------------------------------------------------------------------ */

/* El detalle más característico del mockup: etiqueta chica, en mayúsculas, con
 * tracking ancho. Existe también como variación de estilo de bloque
 * (styles/etiqueta.json) para poder aplicarla desde el editor sin saber CSS. */
.drezz-etiqueta,
.is-style-drezz-etiqueta {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: var(--wp--custom--etiqueta--peso);
	letter-spacing: var(--wp--custom--etiqueta--tracking);
	line-height: var(--wp--custom--etiqueta--alto);
	text-transform: uppercase;
	color: var(--wp--preset--color--gris-600);
}

.drezz-hairline-abajo {
	border-bottom: var(--wp--custom--borde--hairline);
}

/* ------------------------------------------------------------------ *
 * 4. Encabezado — las dos barras
 * ------------------------------------------------------------------ */

.drezz-encabezado {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--wp--preset--color--blanco);
}

/* --- Barra 1: marca, buscador, enlaces, cuenta --- */

.drezz-barra-superior {
	background: var(--wp--preset--color--blanco);
}

.drezz-barra-superior .wp-block-site-title a {
	color: var(--wp--preset--color--negro);
	text-decoration: none;
}

/* El buscador NO es una pastilla: los mockups lo muestran como un rectángulo de
 * radio chico, con la lupa adentro contra el borde derecho. La diferencia importa
 * más de lo que parece — una pastilla se lee como "filtro", un rectángulo ancho
 * se lee como "buscador principal del sitio". */
.drezz-buscador {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 560px;
}

.drezz-buscador .wp-block-search__inside-wrapper {
	background: var(--wp--preset--color--blanco);
	border: var(--wp--custom--borde--hairline);
	border-radius: var(--wp--custom--radio--sm);
	padding: 0 0.25rem 0 0.875rem;
	transition: border-color var(--drezz-transicion);
}

.drezz-buscador .wp-block-search__inside-wrapper:focus-within {
	border-color: var(--wp--preset--color--negro);
}

.drezz-buscador .wp-block-search__input {
	background: transparent;
	border: 0;
	padding: 0.5rem 0;
	font-size: 1rem;
	color: var(--wp--preset--color--gris-900);
}

.drezz-buscador .wp-block-search__input:focus {
	outline: none;
	box-shadow: none;
}

.drezz-buscador .wp-block-search__input::placeholder {
	color: var(--wp--custom--gris--500);
	opacity: 1;
}

.drezz-buscador .wp-block-search__button {
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--gris-600);
	padding: 0.5rem;
	min-width: 40px;
	display: grid;
	place-items: center;
	cursor: pointer;
}

.drezz-buscador .wp-block-search__button:hover {
	color: var(--wp--preset--color--negro);
}

.drezz-buscador .wp-block-search__button svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

/* --- Los tres enlaces de sección --- */

.drezz-acciones {
	gap: var(--wp--preset--spacing--50);
}

.drezz-enlaces-menores .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: var(--wp--custom--etiqueta--peso);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	/* Casi negro, no gris: en los mockups estos enlaces pesan lo mismo que el
	 * resto del header, no son texto secundario. */
	color: var(--wp--preset--color--gris-900);
	white-space: nowrap;
	padding: 0.55rem 0.75rem;
	border-radius: var(--wp--custom--radio--boton);
}

.drezz-enlaces-menores .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--negro);
	background: var(--wp--preset--color--gris-50);
}

/* VENDER lleva pastilla con tinte arena, y la misma pastilla marca la seccion
 * activa. Es la unica forma que dan los mockups de indicar donde estas parado en
 * la barra de arriba. El atributo aria-current lo pone WordPress solo. */
#nav-vender > .wp-block-navigation-item__content,
#nav-vender.wp-block-navigation-item > a,
.drezz-enlaces-menores .wp-block-navigation-item__content[aria-current] {
	background: var(--wp--custom--tinte--pastilla);
	color: var(--wp--preset--color--negro);
}

#nav-vender > .wp-block-navigation-item__content:hover,
#nav-vender.wp-block-navigation-item > a:hover {
	background: var(--wp--custom--tinte--arena);
}

/* El boton negro de acceso: dos lineas, en mayusculas, con la barra al final de
 * la primera. Provisorio hasta que exista el bloque drezz/cuenta, que ademas
 * tiene que mostrar el menu de cuenta a quien ya ingreso — WordPress no tiene
 * ningun bloque nativo de "si esta logueado". */
.drezz-cuenta .wp-block-button__link {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	line-height: 1.25;
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	white-space: nowrap;
	padding: 0.5rem 1rem;
	text-align: center;
}

/* Carrito */
.drezz-encabezado .wp-block-woocommerce-mini-cart {
	color: var(--wp--preset--color--negro);
}

.drezz-encabezado .wc-block-mini-cart__badge {
	background: var(--wp--preset--color--rojo);
	color: var(--wp--preset--color--blanco);
}

/* --- Barra 2: categorías, sobre blanco --- */

/* Blanca, no gris. Las dos barras leen como una sola superficie y el header se
 * siente editorial en lugar de "barra de navegación de tienda". */
.drezz-barra-categorias {
	background: var(--wp--preset--color--blanco);
	border-bottom: var(--wp--custom--borde--hairline);
}

.drezz-barra-categorias .wp-block-navigation {
	font-size: var(--wp--preset--font-size--sm);
}

.drezz-barra-categorias .wp-block-navigation-item__content {
	position: relative;
	text-decoration: none;
	color: var(--wp--preset--color--gris-900);
	padding: 0.625rem 0;
	font-weight: 500;
	/* En el mockup la barra entera va en mayúsculas. Antes solo REGIONAL las
	 * llevaba y la fila se leía a dos voces: un ítem gritando y siete hablando. */
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.drezz-barra-categorias .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--negro);
}

/* El item activo lleva subrayado negro de 2px pegado al pie de la barra, y pasa a
 * peso 700. El aria-current lo pone WordPress cuando la URL coincide. */
.drezz-barra-categorias .wp-block-navigation-item__content[aria-current] {
	font-weight: 700;
	color: var(--wp--preset--color--negro);
}

.drezz-barra-categorias .wp-block-navigation-item__content[aria-current]::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: var(--wp--preset--color--negro);
}

/* REGIONAL es el unico item en mayusculas con tracking ancho. Esa diferencia
 * tipografica es la que lo marca como un eje de navegacion distinto y no como una
 * categoria mas: es afinidad por comunidad, no una rama del arbol de ropa. */
#nav-regional > .wp-block-navigation-item__content,
#nav-regional.wp-block-navigation-item > a {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--xs);
}

/* En las pantallas de Regional el item va en azul. El azul es el segundo acento
 * del sistema y significa una sola cosa: comunidad verificada. */
body.drezz-en-regional #nav-regional > .wp-block-navigation-item__content,
body.drezz-en-regional #nav-regional.wp-block-navigation-item > a {
	color: var(--wp--preset--color--azul);
}

/* "Nuevo" en rojo. core/navigation-link no soporta className ni color, asi que el
 * unico camino con bloques nativos es un anchor mas este selector de id. */
#nav-nuevo > .wp-block-navigation-item__content,
#nav-nuevo.wp-block-navigation-item > a {
	color: var(--wp--preset--color--rojo);
	font-weight: 600;
}

.drezz-barra-categorias .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--blanco);
	border: var(--wp--custom--borde--hairline);
	border-radius: var(--wp--custom--radio--sm);
	box-shadow: var(--wp--custom--sombra--sutil);
	padding: 0.5rem 0;
	min-width: 220px;
}

/* --- Banda de confianza --- */

.drezz-confianza {
	background: var(--wp--custom--tinte--arena);
	border-bottom: var(--wp--custom--borde--hairline);
}

.drezz-confianza__fila {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--80);
	padding: 0.625rem 0;
	margin: 0;
	list-style: none;
}

.drezz-confianza__item {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--gris-900);
}

.drezz-confianza__item svg {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	stroke: currentColor;
	fill: none;
}

/* ------------------------------------------------------------------ *
 * 5. Pie
 * ------------------------------------------------------------------ */

.drezz-pie {
	background: var(--wp--preset--color--blanco);
	border-top: var(--wp--custom--borde--hairline);
}

.drezz-pie a {
	text-decoration: none;
	color: var(--wp--preset--color--gris-600);
}

.drezz-pie a:hover {
	color: var(--wp--preset--color--negro);
	text-decoration: underline;
}

.drezz-pie .wp-block-heading {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: var(--wp--custom--etiqueta--peso);
	letter-spacing: var(--wp--custom--etiqueta--tracking);
	text-transform: uppercase;
	color: var(--wp--preset--color--gris-900);
}

/* ------------------------------------------------------------------ *
 * 6. Celular — replanteado, no encogido
 * ------------------------------------------------------------------ */

@media (max-width: 781px) {

	/* El buscador NO se esconde detrás de un ícono: en un marketplace es la
	 * acción principal. Pasa a una fila propia, a lo ancho. */
	.drezz-barra-superior {
		row-gap: 0.5rem !important;
	}

	.drezz-buscador {
		order: 10;
		flex-basis: 100%;
		max-width: none;
	}

	/* Los enlaces menores se van al menú de cuenta; en el header ocupan un
	 * espacio que en 390px no existe. */
	.drezz-enlaces-menores {
		display: none;
	}

	.drezz-cuenta .wp-block-button__link {
		padding: 0.5rem 0.75rem;
	}

	/* La barra de categorías se vuelve una fila de chips con scroll. Los
	 * desplegables desaparecen: las subcategorías pasan a ser una segunda fila
	 * de chips en la propia página de categoría. */
	.drezz-barra-categorias .wp-block-navigation__container {
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		-ms-overflow-style: none;
		gap: 0.5rem;
		padding-bottom: 2px;
	}

	.drezz-barra-categorias .wp-block-navigation__container::-webkit-scrollbar {
		display: none;
	}

	.drezz-barra-categorias .wp-block-navigation-item {
		scroll-snap-align: start;
		flex: 0 0 auto;
	}

	.drezz-barra-categorias .wp-block-navigation__submenu-icon {
		display: none;
	}
}

/* ------------------------------------------------------------------ *
 * 7. Portada
 * ------------------------------------------------------------------ */

/* --- El banner rotativo --- */

/* El desplazamiento lo hace scroll-snap, no JavaScript. Eso da el gesto de
 * arrastrar con el dedo gratis y con la inercia nativa del sistema, que ninguna
 * librería imita bien. El JS solo empuja el scroll y sincroniza el estado. */
.drezz-carrusel {
	position: relative;
}

.drezz-carrusel__pista {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	/* Altura fija, no mínima: si las diapositivas definieran la altura, cambiaría
	 * en cada rotación y la página saltaría. Un banner que empuja el contenido
	 * cada seis segundos es la peor versión de esto.
	 *
	 * El 40vw sigue la proporción 2:1 de los banners, así que la imagen llena sin
	 * recortar casi nada; el tope de 600px evita que en un monitor grande el
	 * banner se coma la pantalla entera. */
	height: clamp(360px, 40vw, 600px);
	border-radius: var(--wp--custom--radio--lg);
}

.drezz-carrusel__pista::-webkit-scrollbar {
	display: none;
}

.drezz-carrusel__diapositiva {
	flex: 0 0 100%;
	scroll-snap-align: start;
	min-width: 0;
}

/* El grupo interno es la diapositiva visible. */
.drezz-diapositiva {
	position: relative;
	overflow: hidden;
	/* La altura la manda la pista, no la diapositiva: así todas miden lo mismo y
	 * la rotación no mueve nada de lugar. */
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--90) var(--wp--preset--spacing--80);
	border: var(--wp--custom--borde--hairline);
	border-radius: var(--wp--custom--radio--lg);
	background: var(--wp--custom--tinte--arena);
}

.drezz-diapositiva > * {
	margin-block: 0;
}

.drezz-diapositiva .wp-block-buttons {
	margin-top: var(--wp--preset--spacing--40);
}

/* Hueco para una foto al costado de un texto. En escritorio ocupa la mitad
 * derecha; en celular se esconde, porque ahí el texto tiene que ganar y una foto
 * de fondo detrás de un titular nunca tiene contraste garantizado. */
.drezz-diapositiva__foto {
	display: none;
}

/* --- Diapositiva de imagen a sangre --- */

/* Para banners que ya traen su propio diseño y texto: acá la imagen ES la
 * diapositiva. Sin relleno ni tinte, porque cualquier margen alrededor
 * competiría con la composición del banner. */
.drezz-diapositiva--imagen {
	padding: 0;
	background: var(--wp--custom--tinte--neutro);
	display: block;
	height: 100%;
}

.drezz-diapositiva__enlace {
	display: block;
	width: 100%;
	height: 100%;
	line-height: 0;
}

/* La imagen llena toda la diapositiva. Como la altura de la pista sigue la
 * proporción 2:1 de los banners, el recorte es mínimo en escritorio.
 *
 * En celular sí recorta de los costados, y eso es inevitable: un banner
 * horizontal con el texto quemado adentro no cabe en una pantalla vertical sin
 * perder algo. La solución de verdad no es CSS, es una versión vertical del
 * banner — se exporta en un clic desde donde se diseñó. */
.drezz-diapositiva__imagen {
	display: block;
	width: 100%;
	height: 100%;
	/* En celular: `contain`. Un banner 2:1 en una pantalla angosta recortado con
	 * `cover` pierde la mitad de los costados, y ahí está justo el titular. Con
	 * `contain` se ve completo, y las bandas que sobran usan el tinte del sistema
	 * de diseño, así que se leen como marco y no como error.
	 *
	 * Esto es un paliativo, no la solución. La solución de verdad es una versión
	 * vertical del banner, que se exporta en un clic desde donde se diseñó. */
	object-fit: contain;
	object-position: center;
}

/* De tablet para arriba el ancho ya alcanza para llenar sin sacrificar el
 * mensaje: la caja mide casi exactamente 2:1, así que `cover` recorta poco. */
@media (min-width: 600px) {
	.drezz-diapositiva__imagen {
		object-fit: cover;
	}
}

@media (min-width: 900px) {
	/* El :has() es lo que evita el bug que ya cometí una vez: sin él, este
	 * padding se aplicaba a TODAS las diapositivas, incluidas las que son una
	 * imagen a sangre — y la imagen quedaba ocupando el 48% del ancho con la
	 * mitad derecha vacía. Ahora el hueco lateral solo existe cuando realmente
	 * hay una foto al costado. */
	.drezz-diapositiva:has(.drezz-diapositiva__foto) {
		padding-right: 52%;
	}

	.drezz-diapositiva__foto {
		display: block;
		position: absolute;
		inset: 0 0 0 50%;
		margin: 0;
	}

	.drezz-diapositiva__foto img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

/* --- Flechas --- */

.drezz-carrusel__flecha {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: grid;
	place-items: center;
	/* 44px es el mínimo táctil: más chico que eso y en un celular se falla el
	 * toque más veces de las que se acierta. */
	width: 44px;
	height: 44px;
	padding: 0;
	border: var(--wp--custom--borde--hairline);
	border-radius: var(--wp--custom--radio--pill);
	background: var(--wp--preset--color--blanco);
	color: var(--wp--preset--color--gris-900);
	cursor: pointer;
	opacity: 0;
	transition: opacity var(--drezz-transicion), background var(--drezz-transicion);
}

/* Aparecen al acercarse, pero SIEMPRE están visibles si alguien navega con
 * teclado: una flecha que solo existe con el mouse encima no existe para quien
 * usa teclado. */
.drezz-carrusel:hover .drezz-carrusel__flecha,
.drezz-carrusel__flecha:focus-visible {
	opacity: 1;
}

@media (hover: none) {
	/* En pantallas táctiles no hay hover, y el gesto de arrastrar ya resuelve la
	 * navegación. Las flechas solo taparían la foto. */
	.drezz-carrusel__flecha {
		display: none;
	}
}

.drezz-carrusel__flecha:hover {
	background: var(--wp--preset--color--gris-50);
}

.drezz-carrusel__flecha svg {
	width: 20px;
	height: 20px;
}

.drezz-carrusel__flecha--anterior {
	left: var(--wp--preset--spacing--40);
}

.drezz-carrusel__flecha--siguiente {
	right: var(--wp--preset--spacing--40);
}

/* --- Puntos y pausa --- */

.drezz-carrusel__controles {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--60);
	margin-top: var(--wp--preset--spacing--50);
}

.drezz-carrusel__puntos {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
}

.drezz-carrusel__punto {
	width: 28px;
	height: 3px;
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--radio--pill);
	background: var(--wp--custom--gris--300);
	cursor: pointer;
	transition: background var(--drezz-transicion), width var(--drezz-transicion);
}

/* Área táctil de 44px sin agrandar la marca visible. */
.drezz-carrusel__punto::before {
	content: "";
	position: absolute;
	width: 44px;
	height: 44px;
	transform: translate(-8px, -20px);
}

.drezz-carrusel__punto {
	position: relative;
}

.drezz-carrusel__punto[aria-selected="true"] {
	width: 40px;
	background: var(--wp--preset--color--negro);
}

.drezz-carrusel__pausa {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.35rem 0.75rem;
	border: var(--wp--custom--borde--hairline);
	border-radius: var(--wp--custom--radio--pill);
	background: transparent;
	color: var(--wp--preset--color--gris-600);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: var(--wp--custom--etiqueta--peso);
	letter-spacing: var(--wp--custom--etiqueta--tracking);
	text-transform: uppercase;
	cursor: pointer;
}

.drezz-carrusel__pausa:hover {
	color: var(--wp--preset--color--negro);
	background: var(--wp--preset--color--gris-50);
}

.drezz-carrusel__pausa-icono {
	width: 8px;
	height: 10px;
	border-left: 3px solid currentColor;
	border-right: 3px solid currentColor;
}

.drezz-carrusel.esta-pausado .drezz-carrusel__pausa-icono {
	/* Triángulo de "reproducir" cuando está pausado. */
	width: 0;
	height: 0;
	border-left: 8px solid currentColor;
	border-right: 0;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
}

/* --- El carrusel en el editor --- */

.drezz-carrusel-editor__aviso {
	margin: 0 0 1rem;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #6B6B73;
}

.drezz-carrusel-editor__pista > * + * {
	margin-top: 1rem;
}

/* --- Comprá por categoría --- */

.drezz-grilla-categorias {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
}

.drezz-tarjeta-categoria {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	/* Reservar altura: el mockup tiene tarjetas de foto, y sin una proporción
	 * fija estas quedarían chatas y desparejas entre sí. */
	min-height: 200px;
	padding: var(--wp--preset--spacing--60);
	border: var(--wp--custom--borde--hairline);
	border-radius: var(--wp--custom--radio--md);
	transition: transform var(--drezz-transicion), box-shadow var(--drezz-transicion);
}

.drezz-tarjeta-categoria:hover {
	transform: translateY(-2px);
	box-shadow: var(--wp--custom--sombra--sutil);
}

.drezz-tarjeta-categoria .wp-block-heading {
	margin: 0.25rem 0 0;
}

.drezz-tarjeta-categoria a {
	text-decoration: none;
	color: var(--wp--preset--color--gris-900);
}

/* El enlace del título cubre toda la tarjeta, así se puede tocar en cualquier
 * parte. Es lo que se espera de una tarjeta, y en un celular es la diferencia
 * entre acertar y no acertar. */
.drezz-tarjeta-categoria .wp-block-heading a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.drezz-tinte-arena  { background: var(--wp--custom--tinte--arena); }
.drezz-tinte-salvia { background: var(--wp--custom--tinte--salvia); }
.drezz-tinte-cielo  { background: var(--wp--custom--tinte--cielo); }
.drezz-tinte-rosa   { background: var(--wp--custom--tinte--rosa); }

@media (min-width: 782px) {
	.drezz-grilla-categorias {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 1.25rem;
	}

	.drezz-tarjeta-categoria {
		min-height: 260px;
	}
}

/* --- Grilla de prendas --- */

/* 2 columnas en celular, no 1. El usuario argentino está entrenado por
 * Marketplace de Facebook, y una sola columna hace que un catálogo flaco se
 * sienta todavía más flaco. */
.drezz-grilla-prendas .wp-block-post-template,
.drezz-grilla-prendas .wc-block-product-template {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 0.75rem;
	row-gap: 1.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 600px) {
	.drezz-grilla-prendas .wp-block-post-template,
	.drezz-grilla-prendas .wc-block-product-template {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.drezz-grilla-prendas .wp-block-post-template,
	.drezz-grilla-prendas .wc-block-product-template {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		column-gap: 1.25rem;
	}
}

/* El plato de la foto. Una prenda fotografiada sobre una sábana blanca no tiene
 * borde contra una tarjeta blanca: flota y se lee como imagen que no cargó. El
 * tinte más el filete interno le dan límite a cualquier foto, sea como sea. */
.drezz-grilla-prendas .wc-block-components-product-image,
.drezz-grilla-prendas .wp-block-woocommerce-product-image {
	position: relative;
	background: var(--wp--custom--tinte--neutro);
	border-radius: var(--wp--custom--radio--sm);
	overflow: hidden;
	box-shadow: var(--wp--custom--sombra--interior);
	margin-bottom: 0;
}

.drezz-grilla-prendas .wc-block-components-product-image img,
.drezz-grilla-prendas .wp-block-woocommerce-product-image img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

/* Altura del título reservada a dos líneas. Una grilla que mezcla títulos de una
 * y dos líneas queda despareja, y lo desparejo es la señal número uno de tienda
 * amateur. Cuesta unos píxeles y compra "se ve profesional". */
.drezz-grilla-prendas .wp-block-post-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.6em;
	line-height: 1.3;
}

.drezz-grilla-prendas .wp-block-post-title a {
	text-decoration: none;
	color: var(--wp--preset--color--gris-900);
}

.drezz-grilla-prendas .wp-block-post-title a:hover {
	text-decoration: underline;
}

/* El precio es el elemento más pesado de la tarjeta: en segunda mano es el eje
 * principal de decisión. Tabular para que la columna no baile. */
.drezz-grilla-prendas .wp-block-woocommerce-product-price {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
	margin: 0;
}

/* --- Estados vacíos --- */

.drezz-vacio {
	padding: var(--wp--preset--spacing--90) var(--wp--preset--spacing--60);
	background: var(--wp--preset--color--gris-50);
	border: var(--wp--custom--borde--hairline);
	border-radius: var(--wp--custom--radio--md);
	text-align: center;
}

.drezz-vacio .wp-block-buttons {
	justify-content: center;
	margin-top: var(--wp--preset--spacing--60);
}

/* --- Banda de vendé --- */

.drezz-cta-vender .drezz-etiqueta {
	color: var(--wp--custom--gris--300);
}

.drezz-cta-vender a:not(.wp-block-button__link) {
	color: var(--wp--preset--color--blanco);
}

/* --- Selector de provincias --- */

.drezz-provincias .wp-block-categories {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5rem 1.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 600px) {
	.drezz-provincias .wp-block-categories {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.drezz-provincias .wp-block-categories {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.drezz-provincias .wp-block-categories li {
	padding: 0.625rem 0;
	border-bottom: var(--wp--custom--borde--hairline);
	font-size: var(--wp--preset--font-size--sm);
}

.drezz-provincias .wp-block-categories a {
	text-decoration: none;
}

.drezz-provincias .wp-block-categories a:hover {
	text-decoration: underline;
}

/* ------------------------------------------------------------------ *
 * 8. Tarjeta de prenda y catálogo
 * ------------------------------------------------------------------ */

.drezz-tarjeta {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

/* El plato de la foto: una prenda sobre una sábana blanca no tiene borde contra
 * una tarjeta blanca, flota y se lee como imagen que no cargó. */
.drezz-tarjeta .wp-block-woocommerce-product-image,
.drezz-tarjeta .wc-block-components-product-image {
	position: relative;
	margin: 0 0 0.625rem;
	background: var(--wp--custom--tinte--neutro);
	border-radius: var(--wp--custom--radio--sm);
	overflow: hidden;
	box-shadow: var(--wp--custom--sombra--interior);
}

.drezz-tarjeta .wp-block-woocommerce-product-image img,
.drezz-tarjeta .wc-block-components-product-image img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	transition: transform var(--drezz-transicion);
}

.drezz-tarjeta:hover .wp-block-woocommerce-product-image img {
	transform: scale(1.02);
}

.drezz-tarjeta__fecha {
	display: block;
	color: var(--wp--custom--gris--500);
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: 0.02em;
}

/* Marca a la izquierda, talle a la derecha: dos columnas limpias para escanear.
 * El comprador filtra mentalmente por las dos cosas en una sola pasada. */
.drezz-tarjeta__meta {
	gap: 0.5rem;
	min-height: 1.15em;
}

.drezz-tarjeta__marca {
	margin: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.drezz-tarjeta__atributo {
	flex: 0 0 auto;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--gris-600);
	font-variant-numeric: tabular-nums;
}

/* Altura del título reservada a dos líneas. Una grilla que mezcla títulos de una
 * y dos líneas queda despareja, y lo desparejo es la señal número uno de tienda
 * amateur. Cuesta unos píxeles y compra "se ve profesional". */
.drezz-tarjeta .wp-block-post-title {
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.6em;
	line-height: 1.3;
}

.drezz-tarjeta .wp-block-post-title a {
	text-decoration: none;
	color: var(--wp--preset--color--gris-900);
}

.drezz-tarjeta .wp-block-post-title a:hover {
	text-decoration: underline;
}

/* El precio es el elemento más pesado: en segunda mano es el eje principal de
 * decisión. El comprador escanea la columna de precios y después lee los títulos
 * de los que están en rango. */
.drezz-tarjeta__precio {
	gap: 0.5rem;
	margin-top: 0.125rem;
}

.drezz-tarjeta__precio .wp-block-woocommerce-product-price {
	margin: 0;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* En oferta: el precio nuevo en rojo, el viejo tachado y chico al lado. */
.drezz-tarjeta__precio ins,
.drezz-tarjeta__precio .wc-block-components-product-price__value.is-discounted {
	text-decoration: none;
	color: var(--wp--preset--color--rojo);
}

.drezz-tarjeta__precio del,
.drezz-tarjeta__precio .wc-block-components-product-price__regular {
	margin-right: 0.35rem;
	color: var(--wp--custom--gris--500);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 400;
}

.drezz-tarjeta__descuento {
	color: var(--wp--preset--color--rojo);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: var(--wp--custom--etiqueta--peso);
	letter-spacing: 0.04em;
	white-space: nowrap;
}

/* --- Cabecera del catálogo --- */

.drezz-catalogo__cabecera {
	padding-bottom: var(--wp--preset--spacing--40);
	border-bottom: var(--wp--custom--borde--hairline);
}

/* El contador de resultados cambia con cada filtro, así que es texto plano y
 * nunca un encabezado: si fuera heading, contaminaría el esquema de títulos de
 * la página en cada clic. */
.drezz-catalogo__cabecera .wc-block-product-results-count,
.drezz-catalogo__cabecera .wp-block-woocommerce-product-results-count {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--gris-600);
}

.drezz-catalogo__cabecera select {
	border: var(--wp--custom--borde--hairline);
	border-radius: var(--wp--custom--radio--pill);
	background: var(--wp--preset--color--blanco);
	padding: 0.45rem 2rem 0.45rem 0.875rem;
	font-size: var(--wp--preset--font-size--sm);
}

/* --- Filtros en fila --- */

/* La maquetación va sobre el contenedor de WooCommerce, no sobre grupos propios.
 * Los filtros tienen que ser hijos DIRECTOS de product-filters: el contexto de
 * bloques solo se propaga a través de bloques que lo declaran en `usesContext`, y
 * `core/group` no declara el de los filtros, así que envueltos en un group
 * pierden la conexión con la consulta y renderizan vacío sin ningún error. */
.drezz-filtros {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--50);
	border-bottom: var(--wp--custom--borde--hairline);
}

.drezz-filtros > * {
	flex: 0 1 auto;
	min-width: 0;
	margin: 0;
}

/* Los títulos que ponen los bloques de filtro van en versalitas, para que la
 * fila se lea como una barra de controles y no como cinco secciones distintas. */
.drezz-filtros h3,
.drezz-filtros .wp-block-heading {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: var(--wp--custom--etiqueta--peso);
	letter-spacing: var(--wp--custom--etiqueta--tracking);
	text-transform: uppercase;
	color: var(--wp--preset--color--gris-600);
	margin: 0 0 0.5rem;
}

/* Chips de los valores disponibles */
.drezz-filtros .wc-block-product-filter-chips__item {
	border: var(--wp--custom--borde--hairline);
	border-radius: var(--wp--custom--radio--pill);
	background: var(--wp--preset--color--blanco);
	font-size: var(--wp--preset--font-size--sm);
	padding: 0.35rem 0.75rem;
}

.drezz-filtros .wc-block-product-filter-chips__item[aria-checked="true"] {
	background: var(--wp--preset--color--negro);
	border-color: var(--wp--preset--color--negro);
	color: var(--wp--preset--color--blanco);
}

/* Los chips de lo que está filtrado y el "limpiar todo" ocupan su propia línea,
 * debajo de los controles. */
.drezz-filtros__activos,
.drezz-filtros__limpiar {
	flex-basis: 100%;
	gap: var(--wp--preset--spacing--40);
}

.drezz-filtros__activos:empty,
.drezz-filtros__limpiar:empty {
	display: none;
}

.drezz-filtros__activos .wc-block-product-filter-removable-chips__item {
	background: var(--wp--preset--color--gris-50);
	border: var(--wp--custom--borde--hairline);
	border-radius: var(--wp--custom--radio--pill);
	font-size: var(--wp--preset--font-size--sm);
	padding: 0.3rem 0.65rem;
}

@media (max-width: 781px) {
	/* En celular la fila de filtros se apila y se vuelve alta. WooCommerce ya trae
	 * un panel deslizante accesible para esto — se activa desde el propio bloque,
	 * y es la vista que corresponde acá. Mientras tanto, scroll horizontal para
	 * que no empuje la grilla fuera de la pantalla. */
	.drezz-filtros {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		gap: var(--wp--preset--spacing--60);
		padding-bottom: 0.75rem;
	}

	.drezz-filtros::-webkit-scrollbar {
		display: none;
	}

	/* En celular los chips activos no pueden robar el 100% del ancho dentro de un
	 * contenedor que ahora scrollea en horizontal. */
	.drezz-filtros__activos,
	.drezz-filtros__limpiar {
		flex-basis: auto;
	}
}

/* ------------------------------------------------------------------ *
 * 9. Video del inicio
 * ------------------------------------------------------------------ */

/* El fondo es el mismo negro del video, así que no se ve ninguna costura entre
 * el contenedor y el video: ni mientras carga, ni en los bordes del recorte. */
.drezz-video-hero {
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--negro);
	line-height: 0;
	/* Franja cinematográfica, no un 16:9. El video es 16:9, pero mostrarlo con esa
	 * proporción a lo ancho de la pantalla da 810px de alto en un monitor de 1440
	 * y empuja el catálogo entero abajo del pliegue.
	 *
	 * El 21vw recorta bastante arriba y abajo, y eso es exactamente lo que se
	 * busca: la marca está centrada en el cuadro, así que sobrevive al recorte y
	 * queda encuadrada en el centro de la franja.
	 *
	 * El mínimo de 200px es para el celular: a 390px de ancho el 16:9 natural son
	 * 219px, así que ahí el recorte es casi nulo. */
	height: clamp(200px, 21vw, 420px);
	border-radius: 0;
}

.drezz-video-hero__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* El botón aparece solo si el navegador rechazó la reproducción automática o si
 * el sistema pidió menos animación. Nunca queda un rectángulo negro sin salida. */
.drezz-video-hero__reproducir {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	width: 100%;
	height: 100%;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--blanco);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: var(--wp--custom--etiqueta--peso);
	letter-spacing: var(--wp--custom--etiqueta--tracking);
	text-transform: uppercase;
	line-height: 1;
	cursor: pointer;
}

.drezz-video-hero__reproducir[hidden] {
	display: none;
}

.drezz-video-hero__triangulo {
	width: 0;
	height: 0;
	border-left: 16px solid currentColor;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
}

/* ------------------------------------------------------------------ *
 * 10. Centro de ayuda (/preguntas/)
 * ------------------------------------------------------------------ */

/* Toda la pantalla va sobre un plato arena cálido, distinto del lienzo casi
 * blanco del resto del sitio. Es lo que la separa del catálogo: se siente
 * "sección de ayuda" antes de leer una palabra. */
.drezz-ayuda {
	position: relative;
	overflow: hidden;
	background: var(--wp--custom--tinte--pagina);
	padding-block: var(--wp--preset--spacing--100) var(--wp--preset--spacing--90);
}

/* La marca de agua gigante. Es decoración pura, así que va como ::before y no
 * como texto: un lector de pantalla no tiene por qué leer "DREZZ" a los gritos
 * antes del titular. */
.drezz-ayuda::before {
	content: "DREZZ";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(-10deg);
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(12rem, 26vw, 30rem);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--wp--custom--tinte--pastilla);
	white-space: nowrap;
	pointer-events: none;
	user-select: none;
	z-index: 0;
}

.drezz-ayuda > * {
	position: relative;
	z-index: 1;
}

.drezz-ayuda__hero {
	max-width: 620px;
	margin-inline: auto;
	text-align: center;
}

.drezz-ayuda__titulo {
	margin: 0;
	font-size: var(--wp--preset--font-size--xxl);
	font-weight: 700;
	letter-spacing: -0.025em;
	color: var(--wp--preset--color--negro);
}

.drezz-ayuda__bajada {
	margin: 0.75rem 0 0;
	color: var(--wp--preset--color--gris-600);
}

/* El buscador del hero lleva la lupa a la IZQUIERDA, al revés del buscador del
 * header. No es un descuido del mockup: son dos cosas distintas — uno busca
 * prendas en todo el sitio, el otro busca dentro de esta página. */
.drezz-ayuda__buscador {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin: var(--wp--preset--spacing--70) auto 0;
	padding: 0 1rem;
	max-width: 590px;
	height: 46px;
	background: var(--wp--preset--color--blanco);
	border: var(--wp--custom--borde--hairline);
	border-radius: var(--wp--custom--radio--sm);
}

.drezz-ayuda__buscador:focus-within {
	border-color: var(--wp--preset--color--negro);
}

.drezz-ayuda__buscador svg {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	color: var(--wp--custom--gris--500);
}

.drezz-ayuda__buscador input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	padding: 0;
	color: var(--wp--preset--color--gris-900);
}

.drezz-ayuda__buscador input:focus {
	outline: none;
}

/* --- Las 8 pestañas por tema --- */

.drezz-ayuda__temas {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: center;
	gap: 0.25rem;
	margin-top: var(--wp--preset--spacing--80);
}

.drezz-ayuda__tema {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	min-width: 94px;
	padding: 0.875rem 0.75rem;
	border-radius: var(--wp--custom--radio--boton);
	text-decoration: none;
	color: var(--wp--preset--color--negro);
	font-size: var(--wp--preset--font-size--sm);
	transition: background var(--drezz-transicion);
}

.drezz-ayuda__tema svg {
	width: 20px;
	height: 20px;
}

.drezz-ayuda__tema:hover {
	background: rgba(255, 255, 255, 0.6);
}

.drezz-ayuda__tema.esta-activo {
	background: var(--wp--custom--tinte--pastilla);
	font-weight: 600;
}

/* --- Cuerpo: acordeón + barra lateral --- */

.drezz-ayuda__cuerpo {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--80);
	max-width: 1000px;
	margin: var(--wp--preset--spacing--90) auto 0;
}

@media (min-width: 900px) {
	.drezz-ayuda__cuerpo {
		grid-template-columns: minmax(0, 1fr) 400px;
	}
}

.drezz-ayuda__seccion {
	margin: 0 0 var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 700;
	color: var(--wp--preset--color--negro);
}

/* Cada pregunta es un <details> con el mismo `name`, así abrir una cierra la
 * anterior sin JavaScript. */
.drezz-pregunta {
	background: #F8F4F2;
	border: 1px solid #E9E4E0;
	border-radius: var(--wp--custom--radio--xs);
	margin-bottom: 0.5rem;
}

.drezz-pregunta > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.75rem 1rem;
	cursor: pointer;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--gris-900);
	list-style: none;
}

/* El triángulo nativo hay que matarlo en los dos motores. */
.drezz-pregunta > summary::-webkit-details-marker {
	display: none;
}

.drezz-pregunta > summary::marker {
	content: "";
}

/* Chevron propio, que rota al abrir. */
.drezz-pregunta > summary::after {
	content: "";
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform var(--drezz-transicion);
}

.drezz-pregunta[open] > summary::after {
	transform: rotate(-135deg) translateY(-2px);
}

.drezz-pregunta__cuerpo {
	padding: 0 1rem 1rem;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--gris-600);
}

.drezz-pregunta__cuerpo p {
	margin: 0;
}

.drezz-ayuda__vacio {
	padding: 1.5rem;
	background: var(--wp--preset--color--blanco);
	border: var(--wp--custom--borde--hairline);
	border-radius: var(--wp--custom--radio--sm);
	font-size: var(--wp--preset--font-size--sm);
}

/* --- Barra lateral --- */

.drezz-ayuda__lateral {
	display: grid;
	gap: var(--wp--preset--spacing--60);
	align-content: start;
}

.drezz-tarjeta-ayuda {
	padding: var(--wp--preset--spacing--60);
	background: #FAF7F5;
	border: 1px solid #EDEAE9;
	border-radius: var(--wp--custom--radio--sm);
}

.drezz-tarjeta-ayuda h2 {
	margin: 0 0 0.75rem;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	color: var(--wp--preset--color--negro);
}

.drezz-tarjeta-ayuda__bajada {
	margin: 0 0 1rem;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--gris-600);
}

.drezz-guias {
	list-style: none;
	margin: 0;
	padding: 0;
}

.drezz-guias li + li {
	border-top: 1px solid #EDEAE9;
}

.drezz-guias a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.75rem 0;
	text-decoration: none;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--gris-900);
}

.drezz-guias a:hover {
	color: var(--wp--preset--color--negro);
}

.drezz-guias svg {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	color: var(--wp--custom--gris--500);
}

/* El formulario de seguimiento de WooCommerce, maquetado como el par
 * campo + botón del mockup. */
.drezz-tarjeta-ayuda .woocommerce form.track_order {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
}

.drezz-tarjeta-ayuda .woocommerce form.track_order p {
	margin: 0;
	flex: 1 1 160px;
}

.drezz-tarjeta-ayuda .woocommerce form.track_order label {
	display: block;
	font-size: var(--wp--preset--font-size--micro);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--etiqueta--tracking);
	color: var(--wp--preset--color--gris-600);
	margin-bottom: 0.25rem;
}

.drezz-tarjeta-ayuda .woocommerce form.track_order input[type="text"],
.drezz-tarjeta-ayuda .woocommerce form.track_order input[type="email"] {
	width: 100%;
	padding: 0.5rem 0.75rem;
	background: var(--wp--preset--color--blanco);
	border: var(--wp--custom--borde--hairline);
	border-radius: var(--wp--custom--radio--boton);
}

.drezz-tarjeta-ayuda .woocommerce form.track_order button {
	align-self: flex-end;
	padding: 0.55rem 1rem;
	background: var(--wp--preset--color--negro);
	color: var(--wp--preset--color--blanco);
	border: 0;
	border-radius: var(--wp--custom--radio--boton);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	cursor: pointer;
}

/* --- Botones compartidos con /vender/ --- */

.drezz-boton-negro,
.drezz-boton-contorno {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.7rem 1.25rem;
	border-radius: var(--wp--custom--radio--boton);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.drezz-boton-negro {
	background: var(--wp--preset--color--negro);
	color: var(--wp--preset--color--blanco);
	border: 1px solid var(--wp--preset--color--negro);
}

.drezz-boton-negro:hover {
	background: var(--wp--preset--color--gris-900);
	color: var(--wp--preset--color--blanco);
}

.drezz-boton-contorno {
	background: transparent;
	color: var(--wp--preset--color--negro);
	/* Borde casi negro, no gris-200: en los mockups los botones secundarios
	 * compiten de igual a igual con el primario, no son terciarios. */
	border: 1px solid #1A1A1C;
}

.drezz-boton-contorno:hover {
	background: var(--wp--preset--color--gris-50);
}

/* ------------------------------------------------------------------ *
 * 11. Vender (/vender/)
 * ------------------------------------------------------------------ */

.drezz-vender {
	background: var(--wp--custom--tinte--pagina);
	padding-block: var(--wp--preset--spacing--100);
}

/* La misma composición del modal del mockup, pero como página: dos columnas y
 * un pie a lo ancho. */
.drezz-vender__panel {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--80);
	max-width: 810px;
	margin-inline: auto;
	padding: var(--wp--preset--spacing--90) var(--wp--preset--spacing--80);
	background: #F4F0EF;
	border-radius: var(--wp--custom--radio--lg);
}

@media (min-width: 860px) {
	.drezz-vender__panel {
		grid-template-columns: minmax(0, 1fr) 297px;
	}

	.drezz-vender__pie {
		grid-column: 1 / -1;
	}
}

.drezz-vender__titulo {
	margin: 0;
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--negro);
	max-width: 15ch;
}

.drezz-vender__bajada {
	margin: 1rem 0 0;
	color: var(--wp--preset--color--gris-600);
	max-width: 28ch;
}

/* --- Los cinco pasos --- */

.drezz-pasos {
	list-style: none;
	margin: var(--wp--preset--spacing--70) 0 0;
	padding: 0;
	border-top: 1px solid #E4DDD8;
}

.drezz-paso {
	display: grid;
	grid-template-columns: 42px 24px 1fr;
	align-items: start;
	gap: 1rem;
	padding: 1.25rem 0;
	border-bottom: 1px solid #E4DDD8;
}

.drezz-paso__numero {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: var(--wp--custom--radio--pill);
	background: #E7DED8;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	color: #2D2119;
}

.drezz-paso__icono {
	width: 24px;
	height: 24px;
	margin-top: 0.5rem;
	color: var(--wp--preset--color--negro);
}

.drezz-paso__texto {
	display: block;
	padding-top: 0.25rem;
}

.drezz-paso__texto strong {
	display: block;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	color: var(--wp--preset--color--negro);
}

.drezz-paso__texto > span {
	display: block;
	margin-top: 0.25rem;
	font-size: var(--wp--preset--font-size--sm);
	color: #454343;
}

/* --- Tarjeta de beneficios --- */

.drezz-vender__beneficios {
	align-self: start;
	padding: var(--wp--preset--spacing--60);
	background: #E7DED8;
	border-radius: var(--wp--custom--radio--md);
}

.drezz-vender__ilustracion {
	position: relative;
	display: grid;
	place-items: center;
	padding: 1rem 0 1.5rem;
	color: #8A7A6C;
}

.drezz-vender__ilustracion svg {
	width: 100%;
	max-width: 204px;
	height: auto;
}

.drezz-vender__moneda {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: var(--wp--custom--radio--pill);
	background: var(--wp--preset--color--negro);
	color: var(--wp--preset--color--blanco);
	font-weight: 700;
}

.drezz-vender__beneficios h2 {
	margin: 0 0 1rem;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	color: var(--wp--preset--color--negro);
}

.drezz-vender__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.75rem;
}

.drezz-vender__lista li {
	display: grid;
	grid-template-columns: 20px 1fr;
	gap: 0.625rem;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--gris-900);
}

.drezz-vender__lista svg {
	width: 18px;
	height: 18px;
	margin-top: 2px;
	color: var(--wp--preset--color--negro);
}

/* El aviso lavanda es el único color frío del mockup fuera del azul de Regional.
 * Se usa acá y en ningún otro lado, así que va con valores propios en lugar de
 * meter un token nuevo al sistema por un solo uso. */
.drezz-vender__aviso {
	display: grid;
	grid-template-columns: 20px 1fr;
	gap: 0.625rem;
	margin-top: var(--wp--preset--spacing--60);
	padding: 0.875rem;
	background: #D7D6E4;
	border-radius: var(--wp--custom--radio--sm);
	font-size: var(--wp--preset--font-size--xs);
	color: #2A2A45;
	line-height: 1.45;
}

.drezz-vender__aviso svg {
	width: 18px;
	height: 18px;
	margin-top: 1px;
	color: #1E2350;
}

.drezz-vender__aviso strong {
	display: block;
	font-size: var(--wp--preset--font-size--sm);
}

/* --- Pie del panel --- */

.drezz-vender__pie {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--60);
	padding-top: var(--wp--preset--spacing--70);
	border-top: 1px solid #E4DDD8;
}

.drezz-vender__pie p {
	margin: 0;
	max-width: 34ch;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--gris-600);
}

.drezz-vender__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

/* --- Chips de subcategorías del catálogo --- */

.drezz-subcategorias ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0 0 var(--wp--preset--spacing--60);
	padding: 0;
}

.drezz-subcategorias .wc-block-product-categories-list-item a {
	display: inline-block;
	padding: 0.35rem 0.75rem;
	background: var(--wp--preset--color--blanco);
	border: var(--wp--custom--borde--hairline);
	border-radius: var(--wp--custom--radio--pill);
	font-size: var(--wp--preset--font-size--sm);
	text-decoration: none;
	color: var(--wp--preset--color--gris-900);
}

.drezz-subcategorias .wc-block-product-categories-list-item a:hover {
	background: var(--wp--preset--color--gris-50);
	border-color: var(--wp--preset--color--negro);
}

/* --- Pastillas desplegables de filtro --- */

.drezz-filtro {
	border: var(--wp--custom--borde--hairline);
	border-radius: var(--wp--custom--radio--boton);
	background: var(--wp--preset--color--blanco);
}

.drezz-filtro > summary {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.875rem;
	cursor: pointer;
	font-size: var(--wp--preset--font-size--sm);
	white-space: nowrap;
	list-style: none;
}

.drezz-filtro > summary::-webkit-details-marker {
	display: none;
}

.drezz-filtro > summary::marker {
	content: "";
}

.drezz-filtro > summary::after {
	content: "";
	width: 8px;
	height: 8px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform var(--drezz-transicion);
}

.drezz-filtro[open] > summary::after {
	transform: rotate(-135deg) translateY(-1px);
}

/* Abierto, el panel flota sobre el contenido en lugar de empujar la grilla:
 * si empujara, cada apertura movería todas las prendas de lugar. */
.drezz-filtro[open] {
	position: relative;
}

.drezz-filtro > *:not(summary) {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	z-index: 20;
	min-width: 240px;
	max-height: 320px;
	overflow-y: auto;
	padding: 0.875rem;
	background: var(--wp--preset--color--blanco);
	border: var(--wp--custom--borde--hairline);
	border-radius: var(--wp--custom--radio--sm);
	box-shadow: var(--wp--custom--sombra--sutil);
}

@media (max-width: 781px) {
	/* En celular el panel absoluto se sale de la pantalla: pasa a fluir. */
	.drezz-filtro > *:not(summary) {
		position: static;
		min-width: 0;
		box-shadow: none;
		border: 0;
		padding: 0.5rem 0 0;
	}
}

/* ------------------------------------------------------------------ *
 * 12. Regional — el mapa
 * ------------------------------------------------------------------ */

.drezz-eyebrow-regional {
	color: var(--wp--preset--color--azul);
	margin: 0;
}

.drezz-regional {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--80);
	margin-top: var(--wp--preset--spacing--90);
}

@media (min-width: 900px) {
	.drezz-regional {
		grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
		gap: var(--wp--preset--spacing--100);
		align-items: start;
	}
}

/* --- El mapa --- */

/* En celular el mapa se esconde y la lista pasa a ser la vista principal. No es
 * degradación: Argentina en 390px de ancho deja a Tucumán del tamaño de una uña,
 * y una forma que no se puede tocar con el dedo no es un control. */
/* El mapa vive dentro de una tarjeta con borde: flotando en el blanco se leia
 * como un dibujo suelto. Encajado, se lee como un control. */
.drezz-regional__mapa {
	display: none;
	margin: 0;
	padding: var(--wp--preset--spacing--60);
	background: var(--wp--preset--color--blanco);
	border: var(--wp--custom--borde--hairline);
	border-radius: var(--wp--custom--radio--md);
}

.drezz-regional__rotulo {
	margin: 0 0 var(--wp--preset--spacing--50);
}

@media (min-width: 900px) {
	.drezz-regional__mapa {
		display: block;
	}
}

.drezz-regional__mapa svg {
	display: block;
	width: 100%;
	height: auto;
	max-height: 420px;
	margin-inline: auto;
}

/* Las provincias con prendas se pintan oscuras; las vacías, claras. Así el mapa
 * contesta de un vistazo la pregunta que uno tiene al mirarlo —dónde hay algo—
 * en lugar de ser una silueta decorativa. */
.drezz-provincia path {
	stroke: var(--wp--preset--color--blanco);
	stroke-width: 1.2;
	vector-effect: non-scaling-stroke;
	transition: fill var(--drezz-transicion);
}

.drezz-provincia.esta-vacia path {
	fill: var(--wp--preset--color--gris-200);
}

.drezz-provincia.tiene-prendas path {
	fill: var(--wp--preset--color--gris-900);
	cursor: pointer;
}

a.drezz-provincia:hover path,
a.drezz-provincia:focus-visible path {
	fill: var(--wp--preset--color--azul);
}

/* El anillo de foco por defecto recorta mal sobre una forma irregular: en un SVG
 * conviene marcar el foco con el trazo de la propia provincia. */
a.drezz-provincia:focus-visible {
	outline: none;
}

a.drezz-provincia:focus-visible path {
	stroke: var(--wp--preset--color--negro);
	stroke-width: 2.5;
}

.drezz-regional__pie {
	margin-top: var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--gris-600);
}

/* --- La lista de provincias --- */

.drezz-regional__lista h2 {
	margin: 0 0 var(--wp--preset--spacing--50);
}

.drezz-regional__lista ul {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 var(--wp--preset--spacing--60);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 600px) {
	.drezz-regional__lista ul {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.drezz-regional__lista li {
	border-bottom: var(--wp--custom--borde--hairline);
}

.drezz-regional__lista a,
.drezz-regional__lista .esta-vacia {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.625rem 0;
	font-size: var(--wp--preset--font-size--sm);
	text-decoration: none;
	color: var(--wp--preset--color--gris-900);
}

.drezz-regional__lista a:hover {
	color: var(--wp--preset--color--azul);
}

/* Las provincias sin prendas no son enlaces: un enlace a una página vacía es una
 * promesa incumplida, y en un mapa de 24 formas serían 24 promesas. */
.drezz-regional__lista .esta-vacia {
	color: var(--wp--custom--gris--500);
}

.drezz-regional__total {
	flex: 0 0 auto;
	font-variant-numeric: tabular-nums;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--gris-600);
}

.drezz-regional__lista a .drezz-regional__total {
	font-weight: 600;
	color: var(--wp--preset--color--negro);
}

/* --- Provincia seleccionada --- */

/* Azul: el color de Regional. Se distingue de "tiene prendas" (oscuro) porque
 * son dos estados distintos: hay stock, y estoy mirando esta. */
a.drezz-provincia.esta-seleccionada path {
	fill: var(--wp--preset--color--azul);
}

a.drezz-provincia.esta-seleccionada:hover path {
	fill: var(--wp--preset--color--gris-900);
}

/* Con una provincia elegida, el mapa se queda quieto a la vista mientras se
 * recorren las prendas: comparar entre provincias es tocar y tocar. */
@media (min-width: 900px) {
	.drezz-regional.tiene-seleccion .drezz-regional__mapa {
		position: sticky;
		top: calc(var(--wp--custom--barra--superior) + 4rem);
	}

	.drezz-regional.tiene-seleccion .drezz-regional__mapa svg {
		max-height: 60vh;
	}
}

.drezz-regional__pie a {
	color: var(--wp--preset--color--azul);
	text-decoration: none;
}

.drezz-regional__pie a:hover {
	text-decoration: underline;
}

/* --- Resultados de la provincia --- */

.drezz-regional__cabecera {
	margin-bottom: var(--wp--preset--spacing--70);
	padding-bottom: var(--wp--preset--spacing--50);
	border-bottom: var(--wp--custom--borde--hairline);
}

.drezz-regional__cabecera h2 {
	margin: 0;
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--negro);
}

.drezz-regional__cabecera p {
	margin: 0.375rem 0 0;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--gris-600);
}

/* Menos columnas que en el catalogo: la mitad del ancho se la lleva el mapa. */
.drezz-regional__resultados .drezz-grilla-prendas .wc-block-product-template {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 1100px) {
	.drezz-regional__resultados .drezz-grilla-prendas .wc-block-product-template {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1400px) {
	.drezz-regional__resultados .drezz-grilla-prendas .wc-block-product-template {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ------------------------------------------------------------------ *
 * 13. Portada: la fila de arriba (mapa + promociones)
 * ------------------------------------------------------------------ */

.drezz-portada-dos {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--60);
	align-items: stretch;
}

@media (min-width: 900px) {
	.drezz-portada-dos {
		/* El mapa es angosto y alto por la forma de Argentina; el banner es 2:1.
		 * 4 a 6 le da al banner el ancho que necesita sin achicar el mapa al punto
		 * de que las provincias chicas dejen de ser tocables. */
		grid-template-columns: 4fr 6fr;
		gap: var(--wp--preset--spacing--70);
	}
}

/* Los dos patterns traen su propio alignwide, que dentro de la grilla sobra: los
 * márgenes negativos de alignwide romperían las columnas. */
.drezz-portada-dos > .alignwide,
.drezz-portada-dos > * {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	margin-top: 0;
	min-width: 0;
}

.drezz-portada-dos .drezz-regional.es-solo-mapa {
	display: block;
	height: 100%;
}

/* En la portada el mapa se muestra también en celular: es la sección que hay que
 * mostrar, no esconder. Lo que no se puede es tocarlo con el dedo a ese tamaño,
 * así que abajo lleva el enlace a /regional/, donde está la lista. */
.drezz-portada-dos .drezz-regional__mapa {
	display: block;
	height: 100%;
	box-sizing: border-box;
}

.drezz-portada-dos .drezz-regional__mapa svg {
	max-height: 360px;
}

/* El carrusel estira al alto de la fila, que lo fija la tarjeta del mapa. */
.drezz-portada-dos .drezz-carrusel {
	height: 100%;
	margin-top: 0;
}

.drezz-portada-dos .drezz-carrusel__pista {
	height: 100%;
	min-height: 300px;
}

/* ------------------------------------------------------------------ *
 * 14. Portada nueva: hero crema + tarjeta Regional
 * ------------------------------------------------------------------ */

/* --- El hero --- */

/* A sangre completa y en crema. La banda es lo que separa el hero del resto de la
 * página: sin ella, el titular queda flotando sobre el mismo blanco que todo lo
 * demás y la portada se lee plana. */
.drezz-hero {
	background: var(--wp--custom--tinte--hero);
	/* Medido con navegador contra el mockup: allá la banda es el ~18% del ancho de
	 * pantalla. Acá llegó a medir el 31% y sobraban 200px de crema vacía debajo de
	 * las garantías — porque en el mockup el alto lo define la foto y el texto
	 * entra adentro, y acá no hay foto. */
	padding-block: var(--wp--preset--spacing--70) 0;
}

.drezz-hero__grilla {
	display: flex;
	flex-wrap: wrap;
	/* Arriba, no abajo: sin foto que llene la columna derecha, alinear al pie
	 * empujaba el lema al fondo de la banda y separaba las dos mitades. */
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--70);
	padding-bottom: var(--wp--preset--spacing--70);
}

.drezz-hero__texto {
	flex: 1 1 420px;
	min-width: 0;
}

/* MIENTRAS NO EXISTA LA FOTO DEL MOCKUP.
 *
 * En el mockup la foto de las dos personas ocupa la mitad del hero. No hay
 * ninguna foto así en la biblioteca —hoy tiene cinco archivos y ninguno sirve—,
 * así que `.drezz-hero__foto:empty` se saca de la fila y el texto se estiraba a
 * ocupar todo: el titular quedaba chico contra una banda enorme y la fila de
 * garantías se desparramaba lejos de los botones.
 *
 * Con el hueco vacío, el texto se queda en su ancho y el aire de la derecha queda
 * como aire, que se lee deliberado en lugar de roto. Cuando la foto exista, esta
 * regla deja de aplicar sola: el `:empty` ya no coincide. */
.drezz-hero__grilla:has(.drezz-hero__foto:empty) .drezz-hero__texto {
	flex: 0 1 560px;
}

/* La foto crece cuando existe; cuando no esta, flex la saca de la fila sin
 * dejar hueco. */
.drezz-hero__foto {
	flex: 1 1 340px;
	min-width: 0;
	align-self: stretch;
}



.drezz-hero__titulo {
	margin: 0;
	/* 9ch: dos líneas, "Moda que te" / "representa.".
	 *
	 * El mockup parte una palabra antes ("Moda que" / "te representa."), y para
	 * eso hacen falta 8ch — pero con 8ch el titular se va a TRES líneas y el hero
	 * crece 54px. Medido con navegador: 9ch da 258px y dos líneas; 8ch da tres.
	 * Dos líneas con el corte una palabra corrido es mejor que tres con el corte
	 * exacto. Si alguna vez importa el corte exacto, va con un <br> en el patrón,
	 * no peleando con `ch`. */
	/* Serif solo acá y en el titular de la tarjeta Regional. Que sea la excepción
	 * es lo que le da el aire editorial: si todo fuera serif, no destacaría nada. */
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 400;
	font-size: clamp(2.125rem, 3.6vw, 3.25rem);
	line-height: 1.04;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--negro);
	max-width: 9ch;
}

.drezz-hero__bajada {
	margin: var(--wp--preset--spacing--50) 0 0;
	max-width: 42ch;
	font-size: var(--wp--preset--font-size--sm);
	color: #4A4744;
}

.drezz-hero__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: var(--wp--preset--spacing--60);
}

.drezz-hero__acciones .drezz-boton-negro,
.drezz-hero__acciones .drezz-boton-contorno {
	min-width: 120px;
	padding-block: 0.5rem;
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* La fila de garantías. Cuatro ítems chicos, en una línea en escritorio. */
.drezz-hero__garantias {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40) 0.9rem;
	list-style: none;
	margin: var(--wp--preset--spacing--60) 0 0;
	padding: 0;
}

.drezz-hero__garantias li {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	flex: 0 0 auto;
	min-width: 0;
	max-width: 106px;
	font-size: var(--wp--preset--font-size--micro);
	line-height: 1.25;
	color: #4A4744;
}

.drezz-hero__icono {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border: 1px solid rgba(10, 10, 11, 0.16);
	border-radius: var(--wp--custom--radio--pill);
	color: var(--wp--preset--color--negro);
}

.drezz-hero__icono svg {
	width: 13px;
	height: 13px;
}

/* Hueco de la foto del mockup. Vacío no rompe nada: la banda crema lo sostiene y
 * la columna simplemente no ocupa alto. */
.drezz-hero__foto:empty {
	display: none;
}

.drezz-hero__foto img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radio--md);
}

/* El lema vertical de la derecha. */
.drezz-hero__lema {
	display: none;
}

@media (min-width: 1000px) {
	.drezz-hero__lema {
		display: block;
		flex: 0 0 auto;
		align-self: flex-start;
		text-align: right;
	}
}

.drezz-hero__lema p {
	margin: 0;
	/* 22ch y alineado a la izquierda, como el mockup: con 16ch y `margin-left:
	 * auto` quedaba pegado al borde derecho partido en cinco líneas de dos
	 * palabras, que se lee como una columna de sobras y no como un lema. */
	max-width: 22ch;
	line-height: 1.45;
	text-align: left;
	color: var(--wp--preset--color--negro);
}

/* El sello dibujado a mano del mockup, resuelto con un óvalo de CSS. */
.drezz-hero__sello {
	display: inline-block;
	margin-top: var(--wp--preset--spacing--60);
	padding: 0.7rem 1.1rem;
	border: 1px solid rgba(10, 10, 11, 0.35);
	border-radius: 50%;
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--sm);
	font-style: italic;
	line-height: 1.15;
	color: var(--wp--preset--color--negro);
	transform: rotate(-4deg);
}

/* --- La tarjeta Regional --- */

/* Monta sobre la banda crema: es lo que cose el hero con el cuerpo de la página en
 * lugar de dejar dos bloques apilados. */
.drezz-tarjeta-regional {
	position: relative;
	z-index: 2;
	margin-top: -32px;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--70);
	padding: var(--wp--preset--spacing--70);
	background: var(--wp--preset--color--blanco);
	border: var(--wp--custom--borde--hairline);
	border-radius: var(--wp--custom--radio--md);
	box-shadow: 0 1px 3px rgba(10, 10, 11, 0.04);
}

/* Tres columnas: texto, mapa y prendas. Es la diferencia con la versión anterior
 * —el mapa solo en una columna ancha quedaba flotando en el blanco. */
@media (min-width: 1000px) {
	.drezz-tarjeta-regional {
		/* La columna del mapa va en píxeles, no en fracciones: su ancho lo manda la
		 * proporción del dibujo (0,457), y en `fr` sobraba aire al costado. A 215px
		 * de alto el mapa mide 98px de ancho. */
		grid-template-columns: minmax(0, 5fr) 100px minmax(0, 17fr);
		gap: var(--wp--preset--spacing--70);
		align-items: start;
	}
}

.drezz-tarjeta-regional__texto p:first-child {
	margin: 0;
}

.drezz-tarjeta-regional__titulo {
	margin: var(--wp--preset--spacing--50) 0 0;
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 400;
	font-size: clamp(1.5rem, 2.2vw, 2rem);
	line-height: 1.1;
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--negro);
	max-width: 14ch;
}

.drezz-tarjeta-regional__bajada {
	margin: var(--wp--preset--spacing--50) 0 var(--wp--preset--spacing--60);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--gris-600);
	max-width: 30ch;
}

.drezz-tarjeta-regional__texto .drezz-boton-negro {
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* --- El mapa dentro de la tarjeta --- */

.drezz-tarjeta-regional__mapa {
	position: relative;
	margin: 0;
}

/* OJO CON ESTAS DOS MEDIDAS, van juntas.
 *
 * El viewBox del mapa es 800 x 1752, o sea una proporción de 0,457: Argentina es
 * angosta y alta de verdad. Con `max-height: 210px` el navegador calculaba el
 * alto desde el ancho, lo recortaba a 210, y el ancho caía a 96px — un mapa
 * diminuto con 87px de aire muerto al lado, dentro de una columna de 183px. Eso
 * es lo que se veía como "el mapa muy chiquito".
 *
 * Ahora la columna se fija a 150px (abajo, en la grilla) y el alto se deja llegar
 * a 330px, que es lo que esa proporción pide. Casi el triple de superficie.
 *
 * PENDIENTE DE DISEÑO: el mapa del mockup es más ancho y rechoncho (proporción
 * ~0,71) que Argentina de verdad. No es este dibujo. Igualarlo al mockup no es
 * cuestión de CSS: hace falta redibujar el SVG. */
.drezz-tarjeta-regional__mapa svg {
	display: block;
	width: 100%;
	max-height: 215px;
	height: auto;
	margin-inline: auto;
}

/* Acá el mapa es más suave que en /regional/: es un mapa de referencia, no el
 * control principal de la página, así que las provincias con prendas van en un
 * gris medio y solo la destacada se pinta oscura. */
.drezz-tarjeta-regional__mapa .drezz-provincia.esta-vacia path {
	fill: #E8E3DC;
}

.drezz-tarjeta-regional__mapa .drezz-provincia.tiene-prendas path {
	fill: #C9C2B8;
}

.drezz-tarjeta-regional__mapa a.drezz-provincia:hover path {
	fill: var(--wp--preset--color--azul);
}

.drezz-tarjeta-regional__mapa .drezz-provincia.esta-seleccionada path {
	fill: var(--wp--preset--color--negro);
}

/* El globo con el nombre y el conteo de la provincia destacada. */
.drezz-tarjeta-regional__globo {
	/* Debajo del mapa, no encima.
	 *
	 * Estaba en `absolute` con `right: 0`, pensado para un mapa ancho. Con la
	 * columna en 100px, un globo de 145 se salía por la derecha y se montaba sobre
	 * la primera prenda. Debajo se lee como epígrafe del mapa y no choca con nada.
	 * Se aparta del mockup, donde el globo va al costado de la provincia — pero
	 * eso necesita un mapa más ancho que el nuestro. */
	margin-top: 0.5rem;
	padding: 0.5rem 0.6rem;
	background: var(--wp--preset--color--blanco);
	border: var(--wp--custom--borde--hairline);
	border-radius: var(--wp--custom--radio--xs);
	box-shadow: 0 2px 6px rgba(10, 10, 11, 0.08);
	font-size: var(--wp--preset--font-size--micro);
	color: var(--wp--preset--color--gris-600);
	line-height: 1.35;
	text-align: left;
}

.drezz-tarjeta-regional__globo strong {
	display: block;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--negro);
}

/* --- Las prendas de la tarjeta --- */

.drezz-tarjeta-regional__cabecera,
.drezz-seccion__cabecera {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--50);
	margin: 0 0 var(--wp--preset--spacing--60);
}

.drezz-tarjeta-regional__cabecera h3,
.drezz-seccion__cabecera h2,
.drezz-tarjeta-regional__cabecera p,
.drezz-seccion__cabecera p {
	margin: 0;
}

.drezz-tarjeta-regional__cabecera a,
.drezz-seccion__cabecera a {
	color: var(--wp--preset--color--negro);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 1px;
}

.drezz-grilla-cinco .wc-block-product-template {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 700px) {
	.drezz-grilla-cinco .wc-block-product-template {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1200px) {
	.drezz-grilla-cinco .wc-block-product-template {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

/* --- Marcas destacadas --- */

.drezz-marcas__fila {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.625rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 700px) {
	.drezz-marcas__fila {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.drezz-marcas__fila a {
	display: grid;
	place-items: center;
	gap: 0.25rem;
	min-height: 76px;
	padding: 0.75rem;
	text-align: center;
	text-decoration: none;
	background: var(--wp--preset--color--blanco);
	border: var(--wp--custom--borde--hairline);
	border-radius: var(--wp--custom--radio--sm);
	transition: border-color var(--drezz-transicion);
}

.drezz-marcas__fila a:hover {
	border-color: var(--wp--preset--color--negro);
}

.drezz-marcas__nombre {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	color: var(--wp--preset--color--negro);
}

.drezz-marcas__total {
	font-size: var(--wp--preset--font-size--micro);
	color: var(--wp--preset--color--gris-600);
}

/* ------------------------------------------------------------------ *
 * 15. Fila compacta de prendas (Recién publicado)
 * ------------------------------------------------------------------ */

/* Seis prendas en una fila, cada una con miniatura al costado. Es una pieza
 * distinta de la tarjeta del catálogo, no la misma encogida: acá el trabajo es
 * cuántas cosas entran de un vistazo, no que cada foto se pueda mirar. */
.drezz-grilla-filas .wc-block-product-template {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--50);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 600px) {
	.drezz-grilla-filas .wc-block-product-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.drezz-grilla-filas .wc-block-product-template {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1200px) {
	.drezz-grilla-filas .wc-block-product-template {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--40);
	}
}

.drezz-fila-prenda {
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr);
	gap: 0.625rem;
	align-items: start;
}

.drezz-fila-prenda .wp-block-woocommerce-product-image,
.drezz-fila-prenda .wc-block-components-product-image {
	margin: 0;
	background: var(--wp--custom--tinte--neutro);
	border-radius: var(--wp--custom--radio--xs);
	overflow: hidden;
}

.drezz-fila-prenda .wp-block-woocommerce-product-image img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}

.drezz-fila-prenda__datos {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

/* Una sola línea con puntos suspensivos: en una fila de seis, un título de dos
 * líneas desalinea las seis filas entre sí. */
.drezz-fila-prenda .wp-block-post-title {
	margin: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 1.3;
}

.drezz-fila-prenda .wp-block-post-title a {
	text-decoration: none;
	color: var(--wp--preset--color--gris-900);
}

.drezz-fila-prenda .wp-block-post-title a:hover {
	text-decoration: underline;
}

.drezz-fila-prenda .drezz-tarjeta__marca {
	margin: 0;
	font-size: var(--wp--preset--font-size--micro);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.drezz-fila-prenda .wp-block-woocommerce-product-price {
	margin: 0;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.drezz-fila-prenda .drezz-tarjeta__fecha {
	font-size: var(--wp--preset--font-size--micro);
	color: var(--wp--custom--gris--500);
}

/* ------------------------------------------------------------------ *
 * 16. Tarjeta de prenda de la fila Regional
 * ------------------------------------------------------------------ */

/* Foto cuadrada y tres líneas de texto, sin nada más. La fila vive DENTRO de una
 * tarjeta, así que cada milímetro que sume la prenda estira la tarjeta entera: con
 * la tarjeta del catálogo puesta acá, la tarjeta Regional medía el triple de alto
 * que en el mockup. */
.drezz-tarjeta-regional-prenda {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.drezz-tarjeta-regional-prenda .wp-block-woocommerce-product-image,
.drezz-tarjeta-regional-prenda .wc-block-components-product-image {
	position: relative;
	margin: 0 0 0.5rem;
	background: var(--wp--custom--tinte--neutro);
	border-radius: var(--wp--custom--radio--xs);
	overflow: hidden;
}

.drezz-tarjeta-regional-prenda .wp-block-woocommerce-product-image img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}

/* Dos líneas, con alto fijo.
 *
 * Antes era una sola línea con `nowrap`, y el motivo era bueno: cinco títulos de
 * alto distinto desalinean los cinco precios entre sí. Pero el precio de eso era
 * "Campera The North Fac" cortado a mitad de palabra, que se lee como un error
 * del sitio. Con dos líneas recortadas y `min-height` de dos, los precios siguen
 * alineados y el nombre se entiende. */
.drezz-tarjeta-regional-prenda .wp-block-post-title {
	margin: 0;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	line-height: 1.3;
	min-height: calc(2 * 1.3em);
}

.drezz-tarjeta-regional-prenda .wp-block-post-title a {
	text-decoration: none;
	color: var(--wp--preset--color--gris-900);
}

.drezz-tarjeta-regional-prenda .wp-block-post-title a:hover {
	text-decoration: underline;
}

.drezz-tarjeta-regional-prenda .drezz-tarjeta__marca {
	margin: 0;
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: 0.04em;
	text-transform: none;
	color: var(--wp--preset--color--gris-600);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.drezz-tarjeta-regional-prenda .wp-block-woocommerce-product-price {
	margin: 0.125rem 0 0;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* El chip con la provincia, al lado del rótulo de la sección. */
.drezz-chip-lugar {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	margin-left: 0.5rem;
	padding: 0.2rem 0.5rem;
	background: var(--wp--preset--color--gris-50);
	border: var(--wp--custom--borde--hairline);
	border-radius: var(--wp--custom--radio--pill);
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: 0.02em;
	text-transform: none;
	color: var(--wp--preset--color--gris-900);
	vertical-align: middle;
}

.drezz-chip-lugar svg {
	width: 12px;
	height: 12px;
}

/* El titular del bloque de texto corta después de la coma, como el mockup. */
.drezz-tarjeta-regional__titulo {
	max-width: 13ch;
}

/* ------------------------------------------------------------------ *
 * 17. El área del vendedor — registro, perfil, publicar y la lista
 *
 * Todo lo de esta sección vive dentro de /mi-cuenta/, así que convive con el
 * CSS de WooCommerce. Por eso los selectores arrancan en una clase nuestra: sin
 * eso, tocarle el padding a un .form-row se lleva puesto el checkout.
 *
 * Se diseñó para el teléfono primero. No por doctrina: publicar una prenda es
 * sacarle fotos con el teléfono y subirlas ahí mismo, y una fila de tres
 * columnas apretadas en 360 px es la diferencia entre publicar y abandonar.
 * ------------------------------------------------------------------ */

/* --- Avisos: el resultado de cada acción --- */

.drezz-aviso {
	margin-block: 0 var(--wp--preset--spacing--50);
	padding: 0.85rem 1rem;
	border: var(--wp--custom--borde--hairline);
	border-radius: var(--wp--custom--radio--sm);
	background: var(--wp--preset--color--gris-50);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.5;
}

.drezz-aviso p:last-child,
.drezz-aviso ul:last-child {
	margin-bottom: 0;
}

.drezz-aviso ul {
	margin: 0.4rem 0 0;
	padding-left: 1.1rem;
}

/* El borde izquierdo grueso es lo que hace que el aviso se lea antes que el
 * formulario. El color solo no alcanza: hay gente que no lo distingue. */
.drezz-aviso--ok {
	border-left: 3px solid var(--wp--preset--color--verde);
	background: color-mix(in srgb, var(--wp--preset--color--verde) 6%, white);
}

.drezz-aviso--error {
	border-left: 3px solid var(--wp--preset--color--rojo);
	background: var(--wp--preset--color--rojo-suave);
}

.drezz-aviso--info {
	border-left: 3px solid var(--wp--preset--color--azul);
	background: var(--wp--preset--color--azul-suave);
}

/* --- La pregunta comprar/vender del registro --- */

.drezz-intencion {
	margin: var(--wp--preset--spacing--50) 0;
	padding: 0;
	border: 0;
}

.drezz-intencion legend {
	padding: 0;
	margin-bottom: 0.6rem;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
}

.drezz-intencion__opcion {
	display: flex;
	gap: 0.65rem;
	align-items: flex-start;
	margin-bottom: 0.5rem;
	padding: 0.75rem 0.9rem;
	border: var(--wp--custom--borde--hairline);
	border-radius: var(--wp--custom--radio--sm);
	cursor: pointer;
	transition: border-color var(--drezz-transicion), background var(--drezz-transicion);
}

.drezz-intencion__opcion:hover {
	background: var(--wp--preset--color--gris-50);
}

/* :has() marca la tarjeta entera, no solo el radio. Donde no esté soportado, el
 * radio sigue mostrando la selección: se degrada, no se rompe. */
.drezz-intencion__opcion:has( input:checked ) {
	border-color: var(--wp--preset--color--negro);
	background: var(--wp--preset--color--gris-50);
}

.drezz-intencion__opcion input {
	margin-top: 0.2rem;
	flex: 0 0 auto;
}

.drezz-intencion__opcion span {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--gris-600);
}

.drezz-intencion__opcion strong {
	color: var(--wp--preset--color--gris-900);
}

.drezz-intencion__ayuda {
	margin: 0.4rem 0 0;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--gris-600);
}

/* --- La invitación a vender, en el tablero de la cuenta --- */

.drezz-invitacion {
	margin-top: var(--wp--preset--spacing--60);
	padding: var(--wp--preset--spacing--60);
	background: var(--wp--custom--tinte--hero);
	border-radius: var(--wp--custom--radio--md);
}

.drezz-invitacion h3 {
	margin: 0 0 0.35rem;
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--lg);
}

.drezz-invitacion p {
	margin: 0 0 var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--gris-600);
	max-width: 46ch;
}

.drezz-invitacion form {
	margin: 0;
}

/* --- Los campos de ubicación en "Detalles de la cuenta" --- */

.drezz-campos-ubicacion {
	margin: var(--wp--preset--spacing--60) 0;
	padding: var(--wp--preset--spacing--50);
	border: var(--wp--custom--borde--hairline);
	border-radius: var(--wp--custom--radio--sm);
}

.drezz-campos-ubicacion legend {
	padding-inline: 0.4rem;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
}

.drezz-campos-ubicacion__ayuda {
	margin: 0 0 var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--gris-600);
}

/* ---------------------------------------------------------------- *
 * El formulario de publicar
 * ---------------------------------------------------------------- */

.drezz-publicar {
	margin: 0;
	max-width: 720px;
}

.drezz-publicar__editando {
	margin: 0 0 var(--wp--preset--spacing--50);
	padding: 0.6rem 0.85rem;
	background: var(--wp--preset--color--azul-suave);
	border-radius: var(--wp--custom--radio--xs);
	font-size: var(--wp--preset--font-size--sm);
}

.drezz-publicar__campo {
	margin-bottom: var(--wp--preset--spacing--50);
}

.drezz-publicar__campo > label {
	display: block;
	margin-bottom: 0.3rem;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
}

.drezz-publicar__req {
	color: var(--wp--preset--color--rojo);
}

.drezz-publicar input[type="text"],
.drezz-publicar input[type="file"],
.drezz-publicar select,
.drezz-publicar textarea {
	width: 100%;
	padding: 0.65rem 0.75rem;
	/* 1rem = 16px, y de acá no se baja: Safari en iOS hace zoom al enfocar un
	 * campo con letra más chica, y el formulario queda descuadrado a mitad de
	 * carga. */
	font-size: 1rem;
	color: var(--wp--preset--color--gris-900);
	background: var(--wp--preset--color--blanco);
	border: var(--wp--custom--borde--hairline);
	border-radius: var(--wp--custom--radio--xs);
}

.drezz-publicar textarea {
	resize: vertical;
	min-height: 7rem;
	line-height: 1.55;
}

.drezz-publicar input:focus-visible,
.drezz-publicar select:focus-visible,
.drezz-publicar textarea:focus-visible {
	outline: 2px solid var(--wp--preset--color--negro);
	outline-offset: 1px;
}

.drezz-publicar__ayuda {
	display: block;
	margin-top: 0.3rem;
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.45;
	color: var(--wp--preset--color--gris-600);
}

.drezz-publicar__contador {
	float: right;
	font-variant-numeric: tabular-nums;
}

/* La fila de campos. minmax(0, 1fr) y no 1fr: sin el minmax, un select con una
 * opción larga (hay categorías de 30 caracteres) estira su columna y desborda
 * la grilla en horizontal. */
.drezz-publicar__fila {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
	gap: var(--wp--preset--spacing--50);
}

.drezz-publicar__precio {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding-left: 0.7rem;
	background: var(--wp--preset--color--blanco);
	border: var(--wp--custom--borde--hairline);
	border-radius: var(--wp--custom--radio--xs);
}

.drezz-publicar__precio span {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--gris-600);
}

.drezz-publicar__precio input[type="text"] {
	border: 0;
	padding-left: 0;
	font-variant-numeric: tabular-nums;
}

.drezz-publicar__precio input:focus-visible {
	outline-offset: -2px;
}

.drezz-publicar__ubicacion {
	margin: 0 0 var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--50);
	border: var(--wp--custom--borde--hairline);
	border-radius: var(--wp--custom--radio--sm);
	background: var(--wp--preset--color--gris-50);
}

.drezz-publicar__ubicacion legend {
	padding-inline: 0.4rem;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
}

.drezz-publicar__ubicacion .drezz-publicar__ayuda {
	margin-bottom: var(--wp--preset--spacing--40);
}

/* --- Fotos --- */

.drezz-publicar__fotos.tiene-error input[type="file"] {
	border-color: var(--wp--preset--color--rojo);
}

.drezz-publicar__actuales,
.drezz-publicar__vistaprevia {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 0.6rem;
	padding: 0;
	list-style: none;
}

.drezz-publicar__actuales li,
.drezz-publicar__miniatura {
	position: relative;
	width: 84px;
}

.drezz-publicar__actuales img,
.drezz-publicar__miniatura img {
	display: block;
	width: 84px;
	height: 84px;
	object-fit: cover;
	border-radius: var(--wp--custom--radio--xs);
	background: var(--wp--preset--color--gris-50);
}

.drezz-publicar__miniatura {
	cursor: grab;
}

.drezz-publicar__miniatura.arrastrando {
	opacity: 0.4;
}

.drezz-publicar__insignia {
	position: absolute;
	inset-block-start: 4px;
	inset-inline-start: 4px;
	padding: 0.1rem 0.35rem;
	background: var(--wp--preset--color--negro);
	color: var(--wp--preset--color--blanco);
	border-radius: var(--wp--custom--radio--xs);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 600;
}

.drezz-publicar__quitar {
	display: block;
	margin-top: 0.25rem;
	font-size: var(--wp--preset--font-size--micro);
	color: var(--wp--preset--color--gris-600);
	cursor: pointer;
}

/* 28px de lado: es el mínimo que se puede tocar sin errarle en un teléfono. */
.drezz-publicar__quitarfoto {
	position: absolute;
	inset-block-start: -6px;
	inset-inline-end: -6px;
	width: 28px;
	height: 28px;
	display: grid;
	place-items: center;
	padding: 0;
	background: var(--wp--preset--color--blanco);
	color: var(--wp--preset--color--gris-900);
	border: var(--wp--custom--borde--hairline);
	border-radius: var(--wp--custom--radio--pill);
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: var(--wp--custom--sombra--sutil);
}

.drezz-publicar__anuncio {
	margin: 0.4rem 0;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--rojo);
}

/* --- Botones del formulario --- */

.drezz-publicar__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: var(--wp--preset--spacing--60);
}

.drezz-publicar__nota {
	margin-top: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--gris-600);
}

/* ---------------------------------------------------------------- *
 * Mis publicaciones
 * ---------------------------------------------------------------- */

.drezz-publicaciones__cabecera {
	margin: 0 0 var(--wp--preset--spacing--50);
}

.drezz-publicaciones {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: var(--wp--custom--borde--hairline);
}

.drezz-publicacion {
	display: flex;
	gap: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--50) 0;
	border-bottom: var(--wp--custom--borde--hairline);
}

.drezz-publicacion__foto {
	flex: 0 0 auto;
	width: 92px;
}

.drezz-publicacion__foto img,
.drezz-publicacion__sinfoto {
	display: block;
	width: 92px;
	height: 116px;
	object-fit: cover;
	border-radius: var(--wp--custom--radio--xs);
	background: var(--wp--preset--color--gris-50);
}

.drezz-publicacion__cuerpo {
	flex: 1 1 auto;
	min-width: 0;
}

.drezz-publicacion__titulo {
	margin: 0 0 0.25rem;
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
	line-height: 1.3;
}

.drezz-publicacion__titulo a {
	color: inherit;
	text-decoration: none;
}

.drezz-publicacion__titulo a:hover {
	text-decoration: underline;
}

.drezz-publicacion__datos {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.75rem;
	margin: 0 0 0.4rem;
	font-size: var(--wp--preset--font-size--sm);
}

.drezz-publicacion__lugar {
	color: var(--wp--preset--color--gris-600);
}

.drezz-publicacion__estado {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.3rem 0.5rem;
	margin: 0 0 0.4rem;
}

.drezz-publicacion__explicacion {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--gris-600);
}

.drezz-publicacion__motivo {
	margin: 0 0 0.5rem;
	padding: 0.5rem 0.7rem;
	background: var(--wp--preset--color--rojo-suave);
	border-radius: var(--wp--custom--radio--xs);
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.5;
}

/* --- Las insignias de estado ---
 *
 * Cada estado dice su nombre en palabras. El color acompaña, no informa: quien
 * no distingue el rojo del verde tiene que poder entender igual por qué su
 * prenda no se ve, y para eso está el texto. */

.drezz-insignia {
	display: inline-block;
	padding: 0.15rem 0.5rem;
	border-radius: var(--wp--custom--radio--pill);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 600;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.drezz-insignia--publicada {
	background: color-mix(in srgb, var(--wp--preset--color--verde) 12%, white);
	color: var(--wp--preset--color--verde);
}

.drezz-insignia--revision {
	background: var(--wp--preset--color--azul-suave);
	color: var(--wp--preset--color--azul);
}

.drezz-insignia--rechazada {
	background: var(--wp--preset--color--rojo-suave);
	color: var(--wp--preset--color--rojo);
}

.drezz-insignia--borrador,
.drezz-insignia--pausada,
.drezz-insignia--otro {
	background: var(--wp--custom--gris--100);
	color: var(--wp--preset--color--gris-600);
}

.drezz-insignia--vendida {
	background: var(--wp--preset--color--gris-900);
	color: var(--wp--preset--color--blanco);
}

/* --- Las acciones de cada fila --- */

.drezz-publicacion__acciones {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.75rem;
}

.drezz-publicacion__forma {
	margin: 0;
	display: inline;
}

/* Un enlace y un button tienen que verse idénticos: la mitad de las acciones
 * son POST con nonce y la otra mitad navegación, y a quien las usa eso no le
 * importa. */
.drezz-publicacion__accion {
	padding: 0;
	background: none;
	border: 0;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	color: var(--wp--preset--color--gris-900);
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

.drezz-publicacion__accion:hover {
	color: var(--wp--preset--color--rojo);
}

.drezz-publicaciones__paginas {
	display: flex;
	gap: 0.5rem;
	margin-top: var(--wp--preset--spacing--60);
	font-size: var(--wp--preset--font-size--sm);
}

/* --- Teléfono --- */

@media (max-width: 600px) {
	.drezz-publicar__fila {
		grid-template-columns: 1fr;
	}

	/* Los botones a lo ancho y el principal arriba: en un teléfono el pulgar
	 * llega al borde inferior, y Publicar no puede quedar detrás de Guardar
	 * borrador. */
	.drezz-publicar__acciones {
		flex-direction: column;
		align-items: stretch;
	}

	.drezz-publicacion {
		gap: var(--wp--preset--spacing--40);
	}

	.drezz-publicacion__foto,
	.drezz-publicacion__foto img,
	.drezz-publicacion__sinfoto {
		width: 72px;
	}

	.drezz-publicacion__foto img,
	.drezz-publicacion__sinfoto {
		height: 90px;
	}
}


/* ------------------------------------------------------------------ *
 * 18. Los popups: ingresar, registrarse y vender (DF-6)
 *
 * Son elementos <dialog> del navegador. Eso decide bastante de este CSS: el
 * fondo se pinta con ::backdrop y no con un div, el diálogo cerrado ya viene
 * con display:none, y el centrado sale de margin:auto.
 *
 * En teléfono no es un cuadro flotante sino una hoja que sube desde abajo y
 * ocupa casi todo: un modal centrado con 40px de aire alrededor en una pantalla
 * de 360px es aire que le falta al formulario.
 * ------------------------------------------------------------------ */

.drezz-modal {
	width: min(100% - 2rem, 1120px);
	max-width: 1120px;
	max-height: min(100% - 2rem, 92dvh);
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--radio--lg);
	background: transparent;
	overflow: visible;
}

.drezz-modal--acceso {
	width: min(100% - 2rem, 480px);
	max-width: 480px;
}

.drezz-modal::backdrop {
	background: rgba(10, 10, 11, 0.55);
	backdrop-filter: blur(2px);
}

.drezz-modal__caja {
	position: relative;
	display: flex;
	flex-direction: column;
	/* Una sola unidad, la misma que usa el <dialog>. Antes acá se mezclaba 100vh
	 * con 92dvh: dos límites distintos en el mismo elemento, y en el teléfono
	 * —donde 100vh no descuenta la barra del navegador— el más chico recortaba el
	 * pie del panel. Eso es el texto cortado de la captura. */
	max-height: 92dvh;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--wp--preset--color--blanco);
	border-radius: var(--wp--custom--radio--lg);
	box-shadow: 0 24px 64px rgba(10, 10, 11, 0.28);
	-webkit-overflow-scrolling: touch;
}

/* 44px de lado: el mínimo cómodo para el pulgar.
 *
 * `sticky` dentro de la caja con scroll, y no `absolute`: el panel de vender
 * es alto, y un botón de cerrar que se va con el scroll obliga a volver
 * arriba para salir. Va al final del flujo flex con `align-self`, sin
 * `float`: un float dentro de un contenedor con scroll y sticky es una
 * combinación que funciona por accidente en un navegador y se rompe en el
 * siguiente. */
.drezz-modal__cerrar {
	position: sticky;
	inset-block-start: 0;
	align-self: flex-end;
	flex: 0 0 auto;
	z-index: 2;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	margin: 0.75rem 0.75rem 0 0.75rem;
	padding: 0;
	background: var(--wp--preset--color--blanco);
	color: var(--wp--preset--color--gris-900);
	border: var(--wp--custom--borde--hairline);
	border-radius: var(--wp--custom--radio--pill);
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: var(--wp--custom--sombra--sutil);
}

.drezz-modal__cerrar:hover {
	background: var(--wp--preset--color--gris-50);
}

/* --- Vender dentro del popup --- */

/* El panel es el mismo que la página /vender/, así que hereda sus estilos. Lo
 * único que hay que sacar es el marco de página: el fondo de banda y el aire
 * vertical de sección, que adentro de un diálogo sobran. */
/* El panel de /vender/ trae su propio ancho máximo (810px), su fondo crema y su
 * radio, porque en la página flota sobre el lienzo. Dentro del diálogo eso daba
 * un marco doble: panel crema centrado dentro de una caja blanca más ancha, con
 * un borde blanco de 150px a cada lado. Acá el panel ES la superficie del
 * diálogo, así que se le sacan las tres cosas y la caja toma el crema. */
.drezz-modal--vender {
	width: min(100% - 2rem, 900px);
	max-width: 900px;
}

.drezz-modal--vender .drezz-modal__caja {
	background: #F4F0EF;
}

.drezz-modal--vender .drezz-vender {
	padding-block: 0;
	background: transparent;
}

.drezz-modal--vender .drezz-vender__panel {
	max-width: none;
	margin: 0;
	/* Arriba no lleva aire propio: el botón de cerrar ya ocupa esa franja. */
	padding-top: 0;
	background: transparent;
	border-radius: 0;
}

/* --- Ingresar y registrarse --- */

.drezz-modal--acceso .drezz-modal__cuerpo {
	padding: 0 var(--wp--preset--spacing--60) var(--wp--preset--spacing--60);
}

.drezz-modal__pestanas {
	flex: 0 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.25rem;
	margin: 0 var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	padding: 0.25rem;
	background: var(--wp--preset--color--gris-50);
	border-radius: var(--wp--custom--radio--pill);
}

.drezz-modal__pestana {
	padding: 0.55rem 0.75rem;
	background: transparent;
	color: var(--wp--preset--color--gris-600);
	border: 0;
	border-radius: var(--wp--custom--radio--pill);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	cursor: pointer;
	transition: background var(--drezz-transicion), color var(--drezz-transicion);
}

.drezz-modal__pestana[aria-pressed="true"] {
	background: var(--wp--preset--color--negro);
	color: var(--wp--preset--color--blanco);
}

/* Con pestañas, el título de cada columna repite lo que dice la pestaña. */
.drezz-modal--acceso.tiene-pestanas .drezz-acceso h2 {
	display: none;
}

/* WooCommerce maqueta el formulario en dos columnas. Adentro del popup va una
 * sola: cuando hay pestañas porque se muestra una a la vez, y cuando no las hay
 * porque se apilan. */
.drezz-acceso #customer_login {
	display: block;
}

.drezz-acceso .u-column1,
.drezz-acceso .u-column2 {
	width: 100%;
	float: none;
	margin: 0;
}

.drezz-acceso .u-column2 {
	margin-top: var(--wp--preset--spacing--60);
}

.drezz-modal--acceso.tiene-pestanas .drezz-acceso .u-column2 {
	margin-top: 0;
}

.drezz-acceso h2 {
	margin: 0 0 var(--wp--preset--spacing--50);
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--xl);
}

.drezz-acceso .form-row,
.drezz-acceso .woocommerce-form-row {
	display: block;
	margin: 0 0 var(--wp--preset--spacing--50);
	padding: 0;
}

.drezz-acceso label {
	display: block;
	margin-bottom: 0.3rem;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
}

.drezz-acceso input[type="text"],
.drezz-acceso input[type="email"],
.drezz-acceso input[type="password"] {
	width: 100%;
	padding: 0.65rem 0.75rem;
	/* 1rem, igual que en publicar: menos de 16px dispara el zoom automático de
	 * Safari en iOS, y en un popup ese zoom deja el formulario fuera de cuadro. */
	font-size: 1rem;
	color: var(--wp--preset--color--gris-900);
	background: var(--wp--preset--color--blanco);
	border: var(--wp--custom--borde--hairline);
	border-radius: var(--wp--custom--radio--xs);
}

.drezz-acceso input:focus-visible {
	outline: 2px solid var(--wp--preset--color--negro);
	outline-offset: 1px;
}

.drezz-acceso .woocommerce-form-login__rememberme {
	display: flex;
	gap: 0.45rem;
	align-items: center;
	margin-bottom: var(--wp--preset--spacing--50);
	font-weight: 400;
}

.drezz-acceso .woocommerce-form-login__rememberme input {
	width: auto;
	margin: 0;
}

.drezz-acceso button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--negro);
	color: var(--wp--preset--color--blanco);
	border: 1px solid var(--wp--preset--color--negro);
	border-radius: var(--wp--custom--radio--boton);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	cursor: pointer;
}

.drezz-acceso button[type="submit"]:hover {
	background: var(--wp--preset--color--gris-900);
}

.drezz-acceso .woocommerce-LostPassword {
	margin: var(--wp--preset--spacing--40) 0 0;
	font-size: var(--wp--preset--font-size--xs);
}

/* La pregunta comprar/vender queda pegada al botón de registrarse, que es donde
 * tiene sentido leerla. */
.drezz-acceso .drezz-intencion {
	margin-top: 0;
}

.drezz-modal__avisos {
	margin-bottom: var(--wp--preset--spacing--50);
}

.drezz-modal__avisos ul,
.drezz-modal__avisos .woocommerce-error,
.drezz-modal__avisos .woocommerce-message,
.drezz-modal__avisos .woocommerce-info {
	margin: 0;
	padding: 0.75rem 0.9rem;
	list-style: none;
	border-radius: var(--wp--custom--radio--sm);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.5;
}

.drezz-modal__avisos .woocommerce-error {
	border-left: 3px solid var(--wp--preset--color--rojo);
	background: var(--wp--preset--color--rojo-suave);
}

.drezz-modal__avisos .woocommerce-message,
.drezz-modal__avisos .woocommerce-info {
	border-left: 3px solid var(--wp--preset--color--azul);
	background: var(--wp--preset--color--azul-suave);
}

/* --- Entrada --- */

.drezz-modal[open] {
	animation: drezz-modal-entra 200ms cubic-bezier(0.2, 0, 0.2, 1);
}

.drezz-modal[open]::backdrop {
	animation: drezz-fondo-entra 200ms ease-out;
}

@keyframes drezz-modal-entra {
	from {
		opacity: 0;
		transform: translateY(12px) scale(0.985);
	}
}

@keyframes drezz-fondo-entra {
	from {
		opacity: 0;
	}
}

/* --- Teléfono: hoja que sube desde abajo --- */

@media (max-width: 640px) {
	.drezz-modal,
	.drezz-modal--acceso {
		width: 100%;
		max-width: none;
		max-height: 94dvh;
		margin: auto 0 0;
		border-radius: var(--wp--custom--radio--lg) var(--wp--custom--radio--lg) 0 0;
	}

	.drezz-modal__caja {
		max-height: 94dvh;
		border-radius: var(--wp--custom--radio--lg) var(--wp--custom--radio--lg) 0 0;
		box-shadow: var(--wp--custom--sombra--sheet);
	}

	.drezz-modal--acceso .drezz-modal__cuerpo {
		padding: 0 var(--wp--preset--spacing--50) var(--wp--preset--spacing--50);
	}

	.drezz-modal__pestanas {
		margin: 0 var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	}

	.drezz-modal[open] {
		animation: drezz-hoja-entra 220ms cubic-bezier(0.2, 0, 0.2, 1);
	}

	@keyframes drezz-hoja-entra {
		from {
			transform: translateY(100%);
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.drezz-modal[open],
	.drezz-modal[open]::backdrop {
		animation: none;
	}
}


/* ------------------------------------------------------------------ *
 * 19. Los bloques que solo se renderizan en PHP, en el editor
 *
 * El marcador que dibuja `plugins/drezz-core/assets/bloques-editor.js` en lugar
 * del contenido real, porque el dato de la prenda no existe hasta que la página
 * se publica.
 *
 * Esta regla no ensucia el sitio publicado aunque viva en la hoja de estilos
 * compartida: la clase `drezz-marcador` la escribe el editor y no aparece nunca
 * en el HTML que ve el visitante.
 *
 * Se dibuja chico y con borde punteado a propósito. Punteado es la convención
 * de "acá va algo que todavía no está", y chico es lo que deja que la tarjeta de
 * prenda conserve sus proporciones mientras se la edita: un marcador del tamaño
 * del contenido real desplaza todo lo de abajo y la plantilla deja de
 * parecerse a la página.
 * ------------------------------------------------------------------ */

.drezz-marcador {
	display: inline-block;
	max-width: 100%;
	padding: 0.15em 0.45em;
	border: 1px dashed #C9C9CF;
	border-radius: 3px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #6B6B73;
	background: #FBFBFC;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: baseline;
	cursor: default;
	user-select: none;
}

/* Seleccionado, se pinta con el mismo azul del editor, para que quede claro que
   es un bloque y no una decoración de la plantilla. */
.wp-block[data-type^="drezz/"].is-selected .drezz-marcador {
	border-color: var(--wp-admin-theme-color, #3858E9);
	color: var(--wp-admin-theme-color, #3858E9);
}