/* =============================================================================
   El Gauchito — Tienda
   -----------------------------------------------------------------------------
   La marca sobre las superficies de WooCommerce: listado, ficha de producto,
   carrito y checkout. Se encola solo en esas páginas.

   POR QUÉ NO REEMPLAZA EL LAYOUT
   Estas páginas las dibuja Porto con sus propias plantillas. Acá no se toca la
   estructura —eso rompería el carrito y el checkout, que son lo último que uno
   quiere romper— sino la piel: colores, tipografías, contornos y botones.

   SOBRE LA ESPECIFICIDAD
   Porto trae reglas propias con especificidad alta sobre estos mismos
   elementos. Por eso casi todo cuelga de `body.woocommerce` o de `#main`: una
   clase sola pierde. Si algo no toma, el problema suele ser ese y no el valor.

   SOBRE LA TIPOGRAFÍA
   Wosker —la display de la marca— **solo se usa en el título del producto**.
   Por debajo de unos 20px se empasta: los trazos son tan gruesos que las
   contraformas se cierran y "Agregar al carrito" a 15px o "Detalles" a 13px
   dejan de leerse. Comparado en pantalla contra dos alternativas: subirle el
   peso lo empeora todavía más; Sonny 700 se lee limpio en todos los tamaños.

   Así que precios, botones, totales, cantidad y paginación van en Sonny 700.
   Es la misma familia del cuerpo, con peso: sigue siendo la marca y se lee.

   Depende de eg-tokens.css y eg-base.css.
   ========================================================================== */

/* ---------- Fondo y tipografía ---------------------------------------------
   La tienda comparte el fondo del sitio. No se usa `body.eg-layout` acá: en
   estas páginas manda el layout de Porto y esa clase no está puesta.
   ------------------------------------------------------------------------- */

body.woocommerce-page,
body.woocommerce-page .page-wrapper,
body.woocommerce-page #main {
	background: var(--eg-cream);
}

body.woocommerce-page #main {
	font-family: var(--eg-font-body);
	color: var(--eg-ink);
}

/* ---------- Títulos --------------------------------------------------------
   El título del producto y los del listado, con la tipografía de titulares y
   el contorno de marca. El texto va en tinta y no en rojo: un nombre largo con
   -webkit-text-stroke en rojo se vuelve difícil de leer a tamaño chico.
   ------------------------------------------------------------------------- */

body.woocommerce-page #main .product_title {
	font-family: var(--eg-font-display);
	text-transform: uppercase;
	line-height: .95;
	letter-spacing: -.005em;
	color: var(--eg-ink);
}

/*
 * En teléfono el nombre del producto entra en dos líneas, y ahí el 0.95 de
 * interlineado —que en una línea sola da el aire justo de un titular— deja las
 * dos pegadas: 28,5px de interlineado para una tipografía de 30. Con 1.06 la
 * segunda línea respira y NO se agrega una tercera.
 *
 * El tracking negativo se mantiene: sacarlo o hacerlo positivo empuja
 * "Platea Preferencial El Gauchito 2026" a tres líneas. Medido.
 */
@media (max-width: 600px) {
	body.woocommerce-page #main .product_title { line-height: 1.06; }

	/*
	 * Las flechas de producto anterior/siguiente van en `position:absolute`
	 * arriba a la derecha, y en teléfono el título les pasa por debajo: se
	 * solapan 23px y "PREFERENCIAL" queda tapado por el círculo.
	 *
	 * Se ocultan en vez de correr el título: darle `padding-right` al <h1> no
	 * arregla el solape —la caja sigue pasando por abajo— y encima lo estira de
	 * dos líneas a cuatro. Medido. En una tienda de dos productos, esas flechas
	 * tampoco aportan gran cosa.
	 */
	body.woocommerce-page #main .product-nav { display: none; }
}

/* ---------- Tarjeta del listado --------------------------------------------
   Arriba del nombre, Porto imprime la categoría del producto. Son dos textos
   pegados uno arriba del otro, así que la jerarquía la tiene que dar el estilo:
   el rótulo chico, espaciado y apagado; el nombre grande y en tinta plena.
   Antes iban los dos en versalitas y en un peso parecido, y competían.
   ------------------------------------------------------------------------- */

/*
 * El rótulo va en la familia del cuerpo y NO en la de etiquetas (Boldonse),
 * aunque sea justo el lugar donde uno la pondría.
 *
 * Boldonse dibuja los acentos altísimos. Medido a 100px: la "O" de caja alta
 * sube 120px sobre la línea de base y la "Ó", 156 —o sea que la tilde queda a
 * 1,56 em, muy por encima de cualquier interlineado razonable—. En Sonny la
 * misma tilde llega a 0,93 em, adentro del renglón.
 *
 * En el rótulo, a 10px, esa tilde suelta cae ARRIBA de la caja del texto, es
 * decir encima de la foto del producto: gris sobre una imagen cargada, no se
 * ve. "Tómbola" se leía "TOMBOLA". Y este texto no lo escribimos nosotros —es
 * el nombre de la categoría, que carga cualquiera desde el admin—, así que no
 * alcanza con elegir palabras sin tilde: en castellano van a aparecer.
 *
 * Sonny 700 en versalitas y con mucho espaciado conserva el aire de etiqueta y
 * dibuja los acentos donde corresponde.
 */
body.woocommerce-page #main .category-list {
	display: block;
	font-family: var(--eg-font-body);
	font-weight: 700;
	font-size: 10px;
	line-height: 1.4;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--eg-text-faint);

	/*
	 * El espacio del rótulo se reserva aunque no haya categoría: un producto
	 * sin categorizar no imprime nada (ver inc/eg-tienda.php) y, sin esta
	 * altura, su tarjeta subiría una línea y quedaría desalineada con la de al
	 * lado —nombre, precio y botón corridos respecto de los de la vecina—.
	 */
	min-height: 14px;
	margin: 0 0 6px;
}

body.woocommerce-page #main .category-list a { color: inherit; }
body.woocommerce-page #main .category-list a:hover { color: var(--eg-red); }

/*
 * El nombre del producto NO va en la display de la marca ni en versalitas.
 *
 * Medido en la tienda, sobre una tarjeta de 386px de ancho útil: "Platea
 * Preferencial El Gauchito 2026" en Boldonse a 14,7px en mayúsculas ocupa
 * 376px, o sea el 97% de la línea — el nombre llega pegado a los dos bordes y
 * el renglón se lee de corrido con el de al lado. En Sonny 700 a 16px en caja
 * mixta ocupa 299px (77%): entra con aire, y encima en un cuerpo más grande.
 *
 * El ancho lo estaban comiendo las versalitas más que la familia: la misma
 * frase en Sonny 700 pero en mayúsculas mide 375px, prácticamente lo mismo que
 * en Boldonse. Por eso el cambio es de caja, no solo de tipografía.
 *
 * Las mayúsculas siguen donde funcionan: el rótulo de categoría (dos palabras)
 * y los botones. El nombre del producto es texto que se lee, no un cartel.
 */
body.woocommerce-page #main .product-loop-title,
body.woocommerce-page #main .woocommerce-loop-product__title {
	font-family: var(--eg-font-body);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.3;
	letter-spacing: .01em;
	text-transform: none;
	color: var(--eg-ink);

	/*
	 * Porto trae `ul.products .woocommerce-loop-product__title { white-space:
	 * nowrap; overflow: hidden; text-overflow: ellipsis }`: el nombre que no
	 * entra en UNA línea no baja de renglón, se corta con puntos suspensivos.
	 * En la tienda ancha "Platea Preferencial El Gauchito 2026" entraba raspando
	 * —375px de 386 disponibles—, así que el recorte no se veía; con la grilla
	 * un poco más angosta el producto pasa a anunciarse como "Platea
	 * Preferencial El Gau…". Un nombre de producto cortado no es un detalle de
	 * estilo: es la góndola mintiendo sobre lo que vende.
	 *
	 * Acá el nombre baja de renglón y se le reservan dos líneas, con lo cual
	 * además el precio y el botón de todas las tarjetas de la fila quedan a la
	 * misma altura sin importar cuánto mida cada nombre. El clamp deja el corte
	 * como último recurso, recién en la tercera línea.
	 */
	white-space: normal;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	min-height: 2.6em;
}

body.woocommerce-page #main .product-loop-title:hover .woocommerce-loop-product__title {
	color: var(--eg-red);
}

/*
 * En teléfono, una tarjeta por fila.
 *
 * Porto pone dos, y a 390px de pantalla cada tarjeta queda con 149px útiles.
 * Ahí no entra nada: el nombre del producto necesita cuatro renglones (o sea
 * que se corta igual), "Agregar al carrito" se parte en tres líneas dentro de
 * la píldora, y la imagen —que en esta tienda ES el producto: el cartón y el
 * banner del sorteo— se ve del tamaño de una estampilla. Con una sola columna
 * hay 333px útiles: el nombre entra, el botón entra y el cartón se ve.
 *
 * El costo es scrollear más, y con dos productos en la tienda eso no es costo.
 *
 * Se cambia la variable `--porto-cw`, que es de donde Porto saca el ancho de
 * cada celda, en lugar de pisar `width` con !important: así sigue siendo su
 * grilla la que calcula márgenes y separaciones, y no hay dos fuentes de
 * verdad para el mismo número.
 */
@media (max-width: 575px) {
	body.woocommerce-page #main ul.products.ccols-2 > .product-col {
		--porto-cw: 100%;
	}
}

/* ---------- Precios --------------------------------------------------------
   El precio es la información que más se busca en una ficha: va en rojo de
   marca y en negrita.
   ------------------------------------------------------------------------- */

body.woocommerce-page #main .price,
body.woocommerce-page #main .price .woocommerce-Price-amount {
	font-family: var(--eg-font-body);
	font-weight: 700;
	color: var(--eg-red);
	letter-spacing: .01em;
}

body.woocommerce-page #main .price del {
	color: var(--eg-text-faint);
	font-weight: 400;
}

body.woocommerce-page #main .price ins {
	text-decoration: none;
	color: var(--eg-red);
}

body.woocommerce-page #main .woocommerce-Price-currencySymbol {
	font-size: .78em;
	vertical-align: .08em;
	margin-right: .1em;
}

/* ---------- Botones --------------------------------------------------------
   Todos los botones de la tienda con el tratamiento sticker: contorno negro y
   sombra dura, que se hunde al apretar. Es el mismo gesto que en la home, así
   que un botón se reconoce igual en las dos mitades del sitio.

   Se listan explícitamente en vez de usar `.button` a secas para no pintar los
   botones del admin bar ni los de plugins que aparezcan en estas páginas.
   ------------------------------------------------------------------------- */

body.woocommerce-page #main .single_add_to_cart_button,
body.woocommerce-page #main .add_to_cart_button,
body.woocommerce-page #main .checkout-button,
body.woocommerce-page #main .wc-forward,
body.woocommerce-page #main .wc-block-components-button,
body.woocommerce-page #main button.button,
body.woocommerce-page #main input.button,
body.woocommerce-page #main a.button {
	font-family: var(--eg-font-body);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .02em;
	background: var(--eg-red);
	color: #fff;
	border: 3px solid var(--eg-ink);
	border-radius: var(--eg-r-pill);
	box-shadow: 0 6px 0 var(--eg-ink);
	transition: transform .12s ease, box-shadow .12s ease, background .12s ease;

	/* Porto le pone al botón de comprar `height` fijo y `line-height: 48px`
	   junto con `overflow: hidden`. Sumándole nuestro padding, la línea de
	   texto caía fuera de la caja visible y el rótulo salía cortado por la
	   mitad. Con la altura automática y el interlineado normal, la caja la
	   define el contenido. */
	height: auto;
	line-height: 1.15;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

body.woocommerce-page #main .single_add_to_cart_button:hover,
body.woocommerce-page #main .add_to_cart_button:hover,
body.woocommerce-page #main .checkout-button:hover,
body.woocommerce-page #main .wc-forward:hover,
body.woocommerce-page #main .wc-block-components-button:hover,
body.woocommerce-page #main button.button:hover,
body.woocommerce-page #main input.button:hover,
body.woocommerce-page #main a.button:hover {
	background: var(--eg-red-deep);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 8px 0 var(--eg-ink);
}

body.woocommerce-page #main .single_add_to_cart_button:active,
body.woocommerce-page #main .add_to_cart_button:active,
body.woocommerce-page #main .checkout-button:active,
body.woocommerce-page #main button.button:active,
body.woocommerce-page #main input.button:active,
body.woocommerce-page #main a.button:active {
	transform: translateY(3px);
	box-shadow: 0 3px 0 var(--eg-ink);
}

/* El foco visible no viene de Porto y sin él no se puede comprar con teclado. */
body.woocommerce-page #main .single_add_to_cart_button:focus-visible,
body.woocommerce-page #main .add_to_cart_button:focus-visible,
body.woocommerce-page #main .checkout-button:focus-visible,
body.woocommerce-page #main button.button:focus-visible,
body.woocommerce-page #main input.button:focus-visible,
body.woocommerce-page #main a.button:focus-visible {
	outline: 3px solid var(--eg-purple);
	outline-offset: 3px;
}

/* El de comprar es el botón principal de la ficha: más grande que el resto. */
body.woocommerce-page #main .single_add_to_cart_button {
	font-size: 18px;
	padding: 15px 28px;
}

/* En el listado, Porto le da al botón un tamaño pensado para su tipografía.
   La nuestra es de titulares, en versalitas y con letter-spacing: al mismo
   tamaño el rótulo quedaba en 10 px y no se leía. */
body.woocommerce-page #main .products .add_to_cart_button,
body.woocommerce-page #main .products .product_type_variable,
body.woocommerce-page #main .products .button {
	font-size: 15px;
	padding: 12px 20px;
	letter-spacing: .04em;
	max-width: 100%;
}

/*
 * En teléfono la grilla pasa a dos columnas y la tarjeta queda en 154px: el
 * botón, con el tamaño de arriba, medía 226px y se salía 93px por el costado.
 * Acá el rótulo también puede partirse en dos líneas antes que desbordar.
 */
@media (max-width: 600px) {
	body.woocommerce-page #main .products .add_to_cart_button,
	body.woocommerce-page #main .products .product_type_variable,
	body.woocommerce-page #main .products .button {
		font-size: 11.5px;
		padding: 10px 12px;
		letter-spacing: .02em;
		white-space: normal;
		line-height: 1.2;
	}
}

/* ---------- Cantidad -------------------------------------------------------
   El selector de cantidad va al lado del botón de comprar: si no comparte el
   contorno queda como un control de otro sitio pegado al nuestro.
   ------------------------------------------------------------------------- */

body.woocommerce-page #main .quantity {
	border: 2.5px solid var(--eg-ink);
	border-radius: var(--eg-r-pill);
	overflow: hidden;
	background: var(--eg-paper);
	box-shadow: 0 4px 0 var(--eg-ink);
}

body.woocommerce-page #main .quantity input.qty {
	font-family: var(--eg-font-body);
	font-weight: 700;
	color: var(--eg-ink);
	background: transparent;
	border: 0;
}

body.woocommerce-page #main .quantity .minus,
body.woocommerce-page #main .quantity .plus {
	color: var(--eg-ink);
	background: transparent;
	border: 0;
}

body.woocommerce-page #main .quantity .minus:hover,
body.woocommerce-page #main .quantity .plus:hover {
	background: var(--eg-yellow);
}

/* ---------- Tarjetas del listado ------------------------------------------- */

body.woocommerce-page #main .products .product-inner {
	border: 3px solid var(--eg-ink);
	border-radius: var(--eg-r-card);
	background: var(--eg-paper);
	box-shadow: 0 10px 0 var(--eg-ink), 0 18px 36px rgba(15, 15, 18, .18);
	overflow: hidden;
	transition: transform .25s cubic-bezier(.2, .9, .3, 1.05), box-shadow .25s ease;
}

body.woocommerce-page #main .products .product-inner:hover {
	transform: translateY(-6px) rotate(-.4deg);
	box-shadow: 0 18px 0 var(--eg-ink), 0 28px 50px rgba(15, 15, 18, .28);
}

body.woocommerce-page #main .products .product-content {
	padding: 16px 18px 20px;
}

/*
 * Caja de proporción fija para la imagen del listado, con `contain`.
 *
 * Los productos no comparten proporción —el cartón es vertical (900×1273) y el
 * banner de plateas es cuadrado (1024×1024)—. Sin una caja común las tarjetas
 * quedan de alturas distintas y la grilla se ve despareja. Con `contain` la
 * imagen entra completa: se le pone fondo en vez de recortarla, que es justo lo
 * que veníamos de arreglar en el tamaño de miniatura.
 */
body.woocommerce-page #main .products .product-image img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: contain;
	background: var(--eg-cream-2);
}

/* ---------- Imagen de la ficha --------------------------------------------- */

body.woocommerce-page #main .product-images,
body.woocommerce-page #main .woocommerce-product-gallery__wrapper {
	border-radius: var(--eg-r-card);
	overflow: hidden;
}

body.woocommerce-page #main .woocommerce-product-gallery {
	border: 3px solid var(--eg-ink);
	border-radius: var(--eg-r-card);
	box-shadow: 0 10px 0 var(--eg-ink);
	overflow: hidden;
	background: var(--eg-cream-2);
}

/*
 * NO ponerle `max-width` a la galería.
 *
 * Cuando el producto tiene más de una imagen, Porto la convierte en un slider
 * que calcula el ancho de cada slide en JavaScript, al cargar. Achicarla por
 * CSS después deja la pista posicionada para el ancho viejo: el slide visible
 * queda fuera del recorte y la galería se ve BLANCA. Con la platea —que tiene
 * el banner y el plano de zonas— pasaba exactamente eso; con el Gauchito no se
 * notaba porque tiene una sola imagen y no arma slider.
 *
 * Si en algún momento hay que achicar la imagen del producto, el camino es la
 * grilla de Porto (el ancho de la columna), no un max-width acá.
 */

/* ---------- Stock y metadatos ---------------------------------------------- */

body.woocommerce-page #main .stock.in-stock,
body.woocommerce-page #main .product-stock .in-stock {
	color: var(--eg-green-deep);
	font-weight: 700;
}

body.woocommerce-page #main .stock.out-of-stock {
	color: var(--eg-red-deep);
	font-weight: 700;
}

body.woocommerce-page #main .product_meta {
	font-family: var(--eg-font-tech);
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--eg-text-soft);
}

/* ---------- Avisos ---------------------------------------------------------
   Los mensajes de "agregado al carrito", errores de stock y validaciones del
   checkout. Son de los pocos textos que el comprador DEBE leer.
   ------------------------------------------------------------------------- */

body.woocommerce-page #main .woocommerce-message,
body.woocommerce-page #main .woocommerce-info,
body.woocommerce-page #main .woocommerce-error {
	border: 2.5px solid var(--eg-ink);
	border-radius: var(--eg-r-tile);
	box-shadow: 0 4px 0 var(--eg-ink);
	font-family: var(--eg-font-body);
	color: var(--eg-ink);
}

body.woocommerce-page #main .woocommerce-message { background: var(--eg-yellow); }
body.woocommerce-page #main .woocommerce-info    { background: var(--eg-cream-2); }

body.woocommerce-page #main .woocommerce-error {
	background: var(--eg-red);
	color: #fff;
}

body.woocommerce-page #main .woocommerce-error a { color: #fff; text-decoration: underline; }

/* ---------- Carrito y checkout ---------------------------------------------
   Las dos pantallas NO usan el mismo markup, cosa que conviene saber antes de
   tocarlas:

     · El CARRITO usa los bloques de WooCommerce y se hidrata con JavaScript.
       El HTML que sirve el servidor es un esqueleto vacío; las clases reales
       —`wc-block-cart-item__*`, `wc-block-components-*`— recién existen en el
       navegador. Por eso no se las encuentra mirando el código fuente.
     · El CHECKOUT es el shortcode clásico: `shop_table`, `cart_item`,
       `order-total`, `place-order`.

   Se les toca lo mínimo: totales, encabezados y campos. Nada de layout — un
   checkout roto no se nota hasta que alguien no puede pagar.
   ------------------------------------------------------------------------- */

/* Los importes del carrito por bloques van envueltos en un
   `.wc-block-formatted-money-amount` que trae su propio color —un celeste
   #0088cc, heredado del default de WordPress—. Pintar solo el contenedor
   `__value` no alcanza: el celeste lo pone el hijo. */
body.woocommerce-page #main .wc-block-formatted-money-amount,
body.woocommerce-page #main .wc-block-components-formatted-money-amount {
	color: inherit;
}

body.woocommerce-page #main .order-total .amount,
body.woocommerce-page #main .cart-subtotal .amount,
body.woocommerce-page #main .wc-block-components-totals-item__value {
	font-family: var(--eg-font-body);
	font-weight: 700;
	color: var(--eg-red);
}

/* El total del carrito es el número que la gente busca. */
body.woocommerce-page #main .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	font-family: var(--eg-font-body);
	font-weight: 700;
	text-transform: uppercase;
	color: var(--eg-ink);
}

/* ---------- Carrito por bloques: controles --------------------------------- */

/* Encabezados de la tabla de productos. */
body.woocommerce-page #main .wc-block-cart-items__header {
	font-family: var(--eg-font-tech);
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--eg-text-soft);
	border-bottom: 2px dashed var(--eg-line);
}

/* El selector de cantidad del bloque NO es `.quantity` como en las plantillas
   clásicas: tiene su propio markup y por eso necesita su propia regla. */
body.woocommerce-page #main .wc-block-components-quantity-selector {
	border: 2.5px solid var(--eg-ink);
	border-radius: var(--eg-r-pill);
	background: var(--eg-paper);
	box-shadow: 0 3px 0 var(--eg-ink);
	overflow: hidden;
}

body.woocommerce-page #main .wc-block-components-quantity-selector::after {
	display: none; /* el borde propio del bloque, que se superponía al nuestro */
}

body.woocommerce-page #main .wc-block-components-quantity-selector__input {
	font-family: var(--eg-font-body);
	font-weight: 700;
	color: var(--eg-ink);
	background: transparent;
}

body.woocommerce-page #main .wc-block-components-quantity-selector__button {
	color: var(--eg-ink);
	background: transparent;
	border: 0;
}

body.woocommerce-page #main .wc-block-components-quantity-selector__button:hover {
	background: var(--eg-yellow);
}

/* El botón de pagar heredaba 14px del bloque: en versalitas y con la
   tipografía de titulares, ilegible en un botón de 600 px de ancho. */
body.woocommerce-page #main .wc-block-cart__submit-button,
body.woocommerce-page #main .wc-block-components-checkout-place-order-button {
	font-size: 18px;
	padding: 16px 24px;
}

body.woocommerce-page #main .shop_table th,
body.woocommerce-page #main .woocommerce-checkout-review-order-table th,
body.woocommerce-page #main .wc-block-components-order-summary__title {
	font-family: var(--eg-font-tech);
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--eg-ink);
}

body.woocommerce-page #main .form-row .input-text,
body.woocommerce-page #main .form-row select,
body.woocommerce-page #main .woocommerce-input-wrapper .input-text,
body.woocommerce-page #main .wc-block-components-text-input input {
	border: 2px solid var(--eg-ink);
	border-radius: var(--eg-r-tile);
	background: var(--eg-paper);
	font-family: var(--eg-font-body);
	color: var(--eg-ink);
}

body.woocommerce-page #main .form-row .input-text:focus,
body.woocommerce-page #main .woocommerce-input-wrapper .input-text:focus,
body.woocommerce-page #main .wc-block-components-text-input input:focus {
	outline: 3px solid var(--eg-purple);
	outline-offset: 1px;
}

/* ---------- El desplegable de provincia ------------------------------------
   WooCommerce le monta encima selectWoo —su fork de select2—: esconde el
   `<select>` real y dibuja un widget propio hecho de `<span>`. Las reglas de
   arriba apuntan al `<select>`, así que no lo alcanzaban, y el campo quedaba
   con la pinta de fábrica al lado de los demás: borde de 1px en negro al 8%
   contra nuestros 2px en tinta, esquinas de 4px contra 18px, y —lo peor— el
   valor elegido en gris #444, que en un formulario se lee como "acá no
   cargaste nada".

   Se lo repinta en vez de sacarlo. Sacarlo no es dequeue: `wc-country-select`
   declara a selectWoo como dependencia, así que WordPress lo imprime igual, y
   quitando solo su CSS se pierde `.select2-hidden-accessible` —la clase que
   esconde el select original— y quedan DOS controles, uno arriba del otro.
   Probado. Habría que editarle las dependencias a WooCommerce en el checkout,
   que es la última página del sitio donde uno quiere improvisar.

   El alto no se toca: el widget ya mide los mismos 50px que los campos de
   texto. Lo único que estaba mal era la piel.
   ------------------------------------------------------------------------- */

body.woocommerce-page #main .select2-container--default .select2-selection--single {
	border: 2px solid var(--eg-ink);
	border-radius: var(--eg-r-tile);
	background: var(--eg-paper);
}

/* El valor elegido va en tinta plena; el gris queda SOLO para el placeholder,
   que es lo que de verdad significa "falta completar". */
body.woocommerce-page #main .select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--eg-ink);
	font-family: var(--eg-font-body);
}

body.woocommerce-page #main .select2-container--default .select2-selection--single .select2-selection__placeholder {
	color: var(--eg-text-faint);
}

body.woocommerce-page #main .select2-container--default .select2-selection--single .select2-selection__arrow b {
	border-top-color: var(--eg-ink);
}

body.woocommerce-page #main .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
	border-bottom-color: var(--eg-ink);
}

/* Abierto: el mismo foco violeta que los campos de texto, y el control se une
   al panel —select2 le achata las esquinas de ese lado y acá se acompaña—. */
body.woocommerce-page #main .select2-container--default.select2-container--open .select2-selection--single {
	outline: 3px solid var(--eg-purple);
	outline-offset: 1px;
}

body.woocommerce-page .select2-dropdown {
	border: 2px solid var(--eg-ink);
	border-radius: var(--eg-r-tile);
	background: var(--eg-paper);
	overflow: hidden;
}

body.woocommerce-page .select2-container--open .select2-dropdown--below {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

body.woocommerce-page .select2-container--open .select2-dropdown--above {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

body.woocommerce-page .select2-results__option {
	font-family: var(--eg-font-body);
	color: var(--eg-ink);
}

/* La provincia ya elegida, marcada en cream. */
body.woocommerce-page .select2-container--default .select2-results__option[aria-selected="true"],
body.woocommerce-page .select2-container--default .select2-results__option[data-selected="true"] {
	background: var(--eg-cream-2);
	color: var(--eg-ink);
}

/*
 * Y la que está bajo el cursor —o bajo el teclado— en rojo. Venía en el celeste
 * del panel de WordPress (`--wp-admin-theme-color`), que no es de ninguna marca
 * de este sitio.
 *
 * Va DESPUÉS de la regla de la elegida a propósito: las dos pesan lo mismo en
 * especificidad, así que gana la última. Al revés, recorrer la lista con las
 * flechas dejaba de marcar nada al pasar por la provincia ya elegida.
 */
body.woocommerce-page .select2-container--default .select2-results__option--highlighted[aria-selected],
body.woocommerce-page .select2-container--default .select2-results__option--highlighted[data-selected] {
	background: var(--eg-red);
	color: #fff;
}

body.woocommerce-page .select2-container--default .select2-search--dropdown .select2-search__field {
	border: 2px solid var(--eg-ink);
	border-radius: var(--eg-r-tile);
	background: var(--eg-paper);
	font-family: var(--eg-font-body);
	color: var(--eg-ink);
	padding: 6px 10px;
}

/*
 * El campo DNI quedaba 11px más bajo que el resto de la fila.
 *
 * Es un `input[type="number"]`, y Porto le da `line-height: 30px` a sus
 * selectores de campo sin incluir ese tipo: el DNI caía en el 19,4px que pone
 * el navegador por defecto, y con el mismo padding y borde daba 39px contra los
 * 50px de Nombre y Teléfono. Medido.
 *
 * Se usa un múltiplo del cuerpo de la fuente (2.2 × 13,6px = 29,9) en vez de
 * copiar el 30px de Porto: si mañana cambian el tamaño de texto de los campos,
 * el alto sigue acompañando solo.
 */
body.woocommerce-page #main .form-row input[type="number"] {
	line-height: 2.2;
}

/*
 * Y sin las flechitas de incremento. Un número de documento no es una cantidad:
 * no tiene sentido subirlo de a uno, y con el cursor encima la rueda del mouse
 * lo cambia sin que nadie se dé cuenta —justo en el dato con el que se emite la
 * entrada—.
 */
body.woocommerce-page #main .form-row input[type="number"] {
	-moz-appearance: textfield;
	appearance: textfield;
}

body.woocommerce-page #main .form-row input[type="number"]::-webkit-outer-spin-button,
body.woocommerce-page #main .form-row input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* El botón de pagar: el más importante del sitio. Va a lo ancho de su columna
   para que no haya que buscarlo. */
body.woocommerce-page #main #place_order,
body.woocommerce-page #main .place-order button {
	width: 100%;
	font-size: 18px;
	padding: 16px 24px;
}

/* El cupón entra por acá, y en esta tienda se usa: hay cupones por URL. */
body.woocommerce-page #main .checkout_coupon,
body.woocommerce-page #main .woocommerce-form-coupon {
	border: 2.5px solid var(--eg-ink);
	border-radius: var(--eg-r-tile);
	background: var(--eg-cream-2);
	box-shadow: 0 4px 0 var(--eg-ink);
}

/* ---------- Breadcrumb ------------------------------------------------------
   La banda de "Home › Tienda › Producto" que Porto dibuja arriba del contenido.
   Venía con sus colores de fábrica: fondo verde pálido (rgb 218,233,199),
   enlaces en celeste #0088cc —el mismo celeste que aparecía en los totales del
   carrito— y todo en Nunito. Nada de eso es de la marca.
   ------------------------------------------------------------------------- */

body.woocommerce-page .page-top {
	background: var(--eg-cream-2);
	border-bottom: 2px dashed var(--eg-line);
	padding: 18px 0;
}

body.woocommerce-page .page-top .breadcrumb {
	margin: 0;
	padding: 0;
	background: transparent;
	font-family: var(--eg-font-tech);
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
}

body.woocommerce-page .page-top .breadcrumb a { color: var(--eg-red); }
body.woocommerce-page .page-top .breadcrumb a:hover { text-decoration: underline; }

/* El último ítem es la página en la que ya estás: no es un destino, va apagado. */
body.woocommerce-page .page-top .breadcrumb li:last-child,
body.woocommerce-page .page-top .breadcrumb li span { color: var(--eg-text-soft); }

body.woocommerce-page .page-top .breadcrumb .delimiter { color: var(--eg-text-faint); }

/*
 * El título de la banda.
 *
 * Se apunta a `.page-title`, que es la clase real que usa Porto, y no a `h1` a
 * secas: sus reglas son `.page-top .page-title` y
 * `.page-top .page-title:not(.b-none)::after` —tres clases— y le ganaban por
 * especificidad a un selector con `h1`. El resultado era un título que tomaba
 * la tipografía nueva pero conservaba el subrayado celeste y el tracking de
 * Porto.
 *
 * Ese tracking es `letter-spacing: -.05em`, pensado para su tipografía: sobre
 * Wosker —que ya es condensada y pesada— hacía que las letras de "TIENDA" se
 * encimaran. Se lleva a cero.
 */
body.woocommerce-page .page-top .page-title {
	font-family: var(--eg-font-display);
	text-transform: uppercase;
	color: var(--eg-ink);
	line-height: 1.05;
	letter-spacing: 0;
}

/* El subrayado de 5px que Porto le cuelga, en el amarillo de la marca. */
body.woocommerce-page .page-top .page-title:not(.b-none)::after {
	border-bottom-color: var(--eg-yellow);
}

/*
 * En la ficha de producto el título de la banda dice exactamente lo mismo que
 * el <h1> del producto, unos centímetros más abajo. Se oculta el de la banda
 * —que es el decorativo— y queda el de la ficha, que es el que acompaña al
 * precio y al botón de comprar. El breadcrumb se conserva: ese sí orienta.
 */
body.single-product .page-top .page-title {
	display: none;
}

/* ---------- Pasos del circuito de compra ------------------------------------
   Carrito → Datos y pago → Listo. Arriba del contenido en las tres pantallas.
   ------------------------------------------------------------------------- */

/*
 * Porto trae SU PROPIO indicador de pasos —"Carrito de compras › Finalizar la
 * compra › Completar Orden"— en el `woo-page-header`, y con el nuestro puesto
 * quedaban los dos, uno encima del otro.
 *
 * No se veía en local porque los breadcrumbs de Porto están activados en
 * producción y apagados acá: sus ajustes viven en la base de datos y el deploy
 * sincroniza archivos. Por eso el indicador de producción no aparecía en el
 * entorno de desarrollo.
 *
 * Se esconde el de Porto y queda el nuestro, que muestra el estado de cada
 * paso —cumplido, en curso, pendiente— y respeta la marca.
 *
 * La regla cuelga de `body.eg-con-pasos`, que solo está cuando el nuestro se
 * dibuja: con `add_filter( 'eg_mostrar_pasos', '__return_false' )` vuelve el de
 * Porto, sin tocar esta hoja.
 *
 * Se acota a las páginas del circuito: en la tienda y en la ficha, ese mismo
 * `woo-page-header` muestra el breadcrumb de verdad (Inicio › Tienda › …), que
 * sí sirve y no se toca.
 */
body.eg-con-pasos .woo-page-header { display: none; }

body.woocommerce-page #main .eg-pasos {
	margin: 0 0 28px;
	padding-bottom: 22px;
	border-bottom: 2px dashed var(--eg-line);
}

body.woocommerce-page #main .eg-pasos__lista {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

body.woocommerce-page #main .eg-pasos__paso {
	position: relative;
	flex: 1 1 0;
	margin: 0;
	text-align: center;
	min-width: 0;
}

/* La línea que une un paso con el siguiente. Va detrás de los círculos y no se
   dibuja después del último. */
body.woocommerce-page #main .eg-pasos__paso::before {
	content: "";
	position: absolute;
	top: 21px;
	left: calc(50% + 26px);
	right: calc(-50% + 26px);
	height: 3px;
	background: var(--eg-line);
}

body.woocommerce-page #main .eg-pasos__paso:last-child::before { display: none; }
body.woocommerce-page #main .eg-pasos__paso.is-hecho::before { background: var(--eg-green); }

body.woocommerce-page #main .eg-pasos__cuerpo {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	color: var(--eg-text-faint);
}

body.woocommerce-page #main a.eg-pasos__cuerpo:hover { color: var(--eg-ink); }

body.woocommerce-page #main .eg-pasos__num {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--eg-paper);
	border: 3px solid var(--eg-ink);
	box-shadow: 0 4px 0 var(--eg-ink);
	font-family: var(--eg-font-body);
	font-weight: 700;
	font-size: 19px;
	line-height: 1;
	color: var(--eg-ink);
}

body.woocommerce-page #main .eg-pasos__titulo {
	font-family: var(--eg-font-tech);
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	line-height: 1.3;
}

/* El paso en curso: amarillo, que es el color de "acá estás" en todo el sitio. */
body.woocommerce-page #main .is-actual .eg-pasos__num { background: var(--eg-yellow); }
body.woocommerce-page #main .is-actual .eg-pasos__titulo { color: var(--eg-ink); }

/* Los ya cumplidos: verde con tilde. */
body.woocommerce-page #main .is-hecho .eg-pasos__num {
	background: var(--eg-green);
	color: #fff;
}

body.woocommerce-page #main .is-hecho .eg-pasos__titulo { color: var(--eg-green-deep); }

body.woocommerce-page #main a.eg-pasos__cuerpo:focus-visible {
	outline: 3px solid var(--eg-purple);
	outline-offset: 4px;
	border-radius: var(--eg-r-tile);
}

@media (max-width: 600px) {
	body.woocommerce-page #main .eg-pasos { margin-bottom: 20px; padding-bottom: 16px; }
	body.woocommerce-page #main .eg-pasos__num { width: 36px; height: 36px; font-size: 16px; border-width: 2.5px; }
	body.woocommerce-page #main .eg-pasos__titulo { font-size: 9.5px; letter-spacing: .06em; }
	body.woocommerce-page #main .eg-pasos__paso::before { top: 17px; left: calc(50% + 22px); right: calc(-50% + 22px); }
}

/* ---------- Ordenamiento y paginación del listado -------------------------- */

body.woocommerce-page #main .woocommerce-ordering select,
body.woocommerce-page #main .woocommerce-viewing {
	font-family: var(--eg-font-tech);
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--eg-text-soft);
}

body.woocommerce-page #main .woocommerce-pagination a,
body.woocommerce-page #main .woocommerce-pagination span.current {
	font-family: var(--eg-font-body);
	font-weight: 700;
	border: 2px solid var(--eg-ink);
	border-radius: 50%;
	color: var(--eg-ink);
}

body.woocommerce-page #main .woocommerce-pagination span.current {
	background: var(--eg-yellow);
	box-shadow: 0 3px 0 var(--eg-ink);
}