/*
Theme Name: Discos de Oro — Sistema C
Theme URI: https://discosdeoro.com
Description: Tema hijo de Astra para Discos de Oro. Implementa el Sistema C (mockup Netlify): fundamentos, cabecera, navegacion, cajon mobile y pie.
Author: Discos de Oro
Version: 0.64.0
Template: astra
Text Domain: ddo-sistema-c
*/

/* ============================================================
   AJUSTES FINOS
   ------------------------------------------------------------
   Los fundamentos y todo el sistema visual viven en sistema-c.css,
   portados literalmente desde el mockup. Ese archivo NO se edita:
   si cambia el mockup, se vuelve a extraer.

   Este archivo es para los retoques que aparecen al montar el
   sistema sobre WordPress, que en el mockup no existen.
   Se carga ultimo, asi que pisa a todo lo demas.
   ============================================================ */

/* Buscador: en el mockup es decorativo, aca es un formulario real. */
.buscar input[type="search"] {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	padding: 0;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--tinta);
	outline: none;
}

.buscar input[type="search"]::placeholder {
	color: var(--gris2);
	text-transform: uppercase;
}

.buscar input[type="search"]::-webkit-search-cancel-button {
	display: none;
}

/* Texto solo para lectores de pantalla. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* El globo del carrito se oculta cuando esta vacio. */
.utils .cont:empty {
	display: none;
}

/* ============================================================
   PUENTES CON WOOCOMMERCE
   ------------------------------------------------------------
   En el mockup varias piezas son decorativas. Aca son elementos
   reales de WooCommerce (formularios, enlaces, listas) y hay que
   devolverles el aspecto exacto que tienen en el sistema.
   ============================================================ */

/* La tarjeta ahora es un enlace real, no un div. */
.disco a.tapa,
.disco a.disco-txt {
	color: inherit;
	text-decoration: none;
}

/* Boton de agregar al carrito: es el formulario de Woo. */
.acciones form.cart {
	display: flex;
	gap: 8px;
	align-items: stretch;
	margin: 0;
	flex-wrap: wrap;
}

.acciones form.cart button[type="submit"],
.acciones .single_add_to_cart_button {
	border: 1px solid var(--oro-vivo);
	background: var(--oro-vivo);
	color: var(--tinta);
	padding: 12px 20px;
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	line-height: 1;
	cursor: pointer;
}

.acciones form.cart button[type="submit"]:hover,
.acciones .single_add_to_cart_button:hover {
	background: #E5B41F;
	border-color: #E5B41F;
}

/* Cantidad: en discos usados casi siempre hay una sola copia. */
.acciones .quantity {
	display: inline-flex;
	border: 1px solid var(--linea);
}

.acciones .quantity input {
	width: 54px;
	border: 0;
	background: var(--papel);
	text-align: center;
	font-family: var(--mono);
	font-size: 13px;
}

/* Cuando hay una sola copia —que en discos usados es casi siempre—
   WooCommerce igual imprime el cajon de cantidad, con el campo
   escondido adentro. Queda una rayita de 2px pegada al boton: son
   los dos bordes del cajon vacio.

   Si adentro no hay un campo de verdad, no se dibuja. */
.acciones .quantity:not(:has(input[type="number"])) {
	display: none;
}

/* Filtros: cada opcion es un enlace. */
.filtros a.fop {
	text-decoration: none;
}

/* Selector de orden: menu al pasar el mouse. */
.orden .sel {
	position: relative;
}

.ddo-orden-menu {
	display: none;
	position: absolute;
	right: 0;
	top: 100%;
	z-index: 60;
	min-width: 210px;
	background: var(--papel);
	border: 1px solid var(--tinta);
	padding: 5px 0;
}

.orden .sel:hover .ddo-orden-menu {
	display: block;
}

.ddo-orden-menu a {
	display: block;
	padding: 8px 14px;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--gris);
	white-space: nowrap;
}

.ddo-orden-menu a:hover {
	background: var(--tinta);
	color: var(--papel);
}

/* Migas: las intermedias son enlaces. */
.migas a {
	color: var(--gris2);
}

.migas a:hover {
	color: var(--tinta);
}

/* Precio de Woo: viene envuelto en spans propios. */
.precio .woocommerce-Price-amount,
.precio-xl .woocommerce-Price-amount {
	font-family: var(--mono);
}

.precio del,
.precio ins {
	text-decoration: none;
	background: transparent;
}

.precio .antes .woocommerce-Price-amount {
	font-size: 11px;
	color: var(--gris2);
	text-decoration: line-through;
}

/* ============================================================
   MANDA EL SISTEMA
   ------------------------------------------------------------
   Astra imprime el CSS de su personalizador despues del nuestro,
   asi que sus tamanos de titulo, sus colores y su fondo le ganan
   al sistema. Aca se los devolvemos al lugar que les corresponde.
   ============================================================ */

.wrap h1,
.ficha-info h1,
.entry-title,
h1.product_title {
	font-family: var(--sans);
	font-size: 21px;
	line-height: 1.35;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--tinta);
	margin: 0;
}

.wrap h2,
.sec-cab h2,
.panel h2 {
	font-family: var(--sans);
	font-size: 14px;
	line-height: 1.4;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .08em;
}

.precio-xl,
.precio-xl .woocommerce-Price-amount {
	font-family: var(--mono);
	font-size: 26px;
	font-weight: 500;
	letter-spacing: -.02em;
	line-height: 1.2;
	color: var(--tinta);
}

.precio-xl .cuotas,
.precio-xl .cuotas .woocommerce-Price-amount {
	font-size: 10.5px;
	letter-spacing: .1em;
	color: var(--gris);
	text-transform: uppercase;
	font-weight: 400;
}

/* La tarjeta manda sobre cualquier tipografia heredada. */
.disco .art {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--gris2);
}

.disco .tit {
	font-family: var(--sans);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.35;
	text-transform: none;
	letter-spacing: normal;
	color: var(--tinta);
}

.disco .meta {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--gris2);
}

.disco .precio,
.disco .precio .woocommerce-Price-amount {
	font-family: var(--mono);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: -.02em;
	color: var(--tinta);
}

.disco .precio small,
.disco .precio small .woocommerce-Price-amount {
	font-size: 9.5px;
	letter-spacing: .1em;
	color: var(--verde);
	font-weight: 400;
}

/* Botones de la ficha: en linea, mismo alto. */
.acciones {
	display: flex;
	gap: 8px;
	align-items: stretch;
	flex-wrap: wrap;
}

.acciones .ddo-guardar {
	display: inline-flex;
	align-items: center;
}

/* Woo mete su tabla de disponibilidad y sus etiquetas: fuera. */
.ficha-info p.stock,
.ficha-info .availability,
.ficha-info .product_meta {
	display: none;
}

/* ============================================================
   EL FONDO ES DEL SISTEMA
   Astra lo pinta desde el personalizador y eso se imprime
   despues que nuestro CSS. Sin !important no hay caso.
   ============================================================ */
html,
body,
body.woocommerce,
body.woocommerce-page,
#page,
.site,
.site-content,
.ast-container {
	background-color: var(--fondo) !important;
}

.cab,
.nav,
.pie,
.panel,
.disco,
.filtros {
	background-color: var(--papel) !important;
}

/* ============================================================
   PESO DEL ARTISTA
   ------------------------------------------------------------
   Ajuste posterior al mockup, pedido por Santiago: el artista
   quedaba muy por detras del titulo del disco.

   Se equipara sin salirse del sistema. No se toca la fuente, ni
   el tamano, ni el interletrado, que son los que dan el aire de
   ficha tecnica. Solo sube el peso a 500 (el mismo que ya usan
   las etiquetas) y el color pasa de --gris2 a --gris, que es el
   tono de texto secundario del sistema. Mismo lenguaje, mas
   presencia.

   Es la unica diferencia deliberada respecto del mockup.
   ============================================================ */
.disco .art {
	font-weight: 500;
	color: var(--gris);
}

.linea-carro .art {
	font-weight: 500;
	color: var(--gris);
}

/* ============================================================
   CARRITO Y CHECKOUT
   ------------------------------------------------------------
   El marcado es nuestro, pero adentro viven piezas de WooCommerce
   (tabla de totales, metodos de envio, pasarelas de pago) que hay
   que traducir al lenguaje del sistema sin tocarles la mecanica.
   ============================================================ */

/* Las reglas del contador y de la cruz del carrito estaban aca Y otra
   vez mas abajo, escritas dos veces. Las de abajo ganaban siempre, asi
   que estas no hacian nada: se fueron. Estan todas juntas en el bloque
   "CONTADOR Y CRUZ DEL CARRITO", mas adelante en este archivo. */

.ddo-actualizar {
	margin-top: 14px;
	text-align: right;
}

/* --- Barra de progreso hacia el envio gratis --- */
.progreso .barra i {
	transition: width .3s;
}

/* --- Totales del checkout: tabla de Woo con cara de sistema --- */
.woocommerce-checkout-review-order-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 4px;
}

.woocommerce-checkout-review-order-table thead {
	display: none;
}

.woocommerce-checkout-review-order-table td,
.woocommerce-checkout-review-order-table th {
	padding: 9px 0;
	border-bottom: 1px solid var(--linea);
	font-size: 12.5px;
	text-align: left;
	font-weight: 400;
}

.woocommerce-checkout-review-order-table .product-total,
.woocommerce-checkout-review-order-table td:last-child,
.woocommerce-checkout-review-order-table th:last-child {
	text-align: right;
	font-family: var(--mono);
	white-space: nowrap;
}

.woocommerce-checkout-review-order-table .product-quantity {
	font-family: var(--mono);
	color: var(--gris2);
}

.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td {
	border-top: 1px solid var(--tinta);
	border-bottom: 0;
	padding-top: 14px;
}

.woocommerce-checkout-review-order-table .order-total th {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.woocommerce-checkout-review-order-table .order-total td {
	font-family: var(--mono);
	font-size: 20px;
	font-weight: 500;
	letter-spacing: -.02em;
}

/* --- Metodos de envio: la lista que arma Wanderlust --- */
#shipping_method {
	margin: 0;
	padding: 0;
	list-style: none;
}

#shipping_method li {
	position: relative;
	border: 1px solid var(--linea);
	padding: 13px 15px 13px 42px;
	margin-bottom: 8px;
	background: var(--papel);
	list-style: none;
}

#shipping_method li:hover {
	border-color: var(--gris2);
}

#shipping_method li input[type="radio"] {
	position: absolute;
	left: 15px;
	top: 15px;
	margin: 0;
	accent-color: var(--tinta);
}

#shipping_method li label {
	display: block;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	cursor: pointer;
}

#shipping_method li label .woocommerce-Price-amount {
	font-family: var(--mono);
	font-weight: 400;
	color: var(--gris);
}

/* --- Pasarelas de pago --- */
.wc_payment_methods {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wc_payment_methods li {
	position: relative;
	border: 1px solid var(--linea);
	padding: 13px 15px 13px 42px;
	margin-bottom: 8px;
	background: var(--papel);
	list-style: none;
}

.wc_payment_methods li input[type="radio"] {
	position: absolute;
	left: 15px;
	top: 16px;
	margin: 0;
	accent-color: var(--tinta);
}

.wc_payment_methods li label {
	display: block;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
}

.wc_payment_methods .payment_box {
	margin-top: 8px;
	padding: 11px 12px;
	background: var(--sutil);
	border: 1px solid var(--linea);
	font-size: 11.5px;
	line-height: 1.5;
	color: var(--gris);
}

.wc_payment_methods .payment_box p:last-child {
	margin-bottom: 0;
}

/* --- Boton de confirmar --- */
#place_order {
	display: block;
	width: 100%;
	margin-top: 18px;
	border: 1px solid var(--oro-vivo);
	background: var(--oro-vivo);
	color: var(--tinta);
	padding: 15px;
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	line-height: 1;
	cursor: pointer;
}

#place_order:hover {
	background: #E5B41F;
	border-color: #E5B41F;
}

/* --- Campos del checkout --- */
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3 {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gris2);
	font-weight: 500;
	margin: 18px 0 10px;
}

/* Las sesiones que todavia no se cargaron. El boton las va
   destapando de a seis. Ver js/cajon.js. */
.sesion.ddo-oculta {
	display: none;
}

/* Los botones que en el mockup son un <span> aca son <button>,
   porque tienen que poder tocarse con el teclado. Se les saca la
   pinta de boton del navegador para que queden igual.

   OJO: aca decia ademas `font: inherit`, y esa linea hacia mas daño
   que bien. `font` es una propiedad atajo: al ponerle `inherit` no
   solo le sacaba la tipografia del navegador, tambien pisaba el
   tamaño, la familia y el peso que `.btn` deja puestos. El boton
   "Guardar" de la ficha terminaba con la letra del cuerpo del sitio
   —mas grande— al lado de "Agregar al carrito", que es un <button>
   de WooCommerce con estilos propios y no pasa por esta regla.

   No hace falta: `.btn` ya define familia, tamaño, peso,
   interletrado y altura de linea, y le gana a la hoja del navegador
   sin ayuda de nadie.

   Lo mismo el `background: none` que habia: `.btn.linea` ya lo deja
   transparente. Estaba de mas, y encima pesaba mas que las reglas de
   favoritos, asi que el boton guardado no se dejaba pintar.

   Queda una sola cosa, la unica que el navegador no da: el dedito. */
button.btn {
	cursor: pointer;
}

/* ============================================================
   LA FICHA: EL AIRE DEL SISTEMA
   ------------------------------------------------------------
   El sistema le da 15px de aire a cada elemento de la ficha con
   una sola regla, `.ficha-info > * + *`.

   Nuestro bloque "MANDA EL SISTEMA", mas arriba, le puso
   `margin: 0` a los h1 para matar los margenes que mete Astra.
   Le gano a Astra y de paso le gano al sistema: el titulo del
   disco quedaba pegado al nombre del artista, sin sus 15px.

   Se los devolvemos. Medido contra el mockup: el titulo tiene
   que arrancar 15px debajo de la etiqueta del artista.
   ============================================================ */
.ficha-info h1 {
	margin-top: 15px;
}

/* Lo mismo con el precio. El mockup no le pone line-height: hereda
   el 1.6 del sitio. Nosotros le habiamos puesto 1.2 y el bloque
   quedaba 14px mas chato, con las cuotas pegadas al numero.
   Medido: 48px nuestro contra 62px del mockup. */
.precio-xl,
.precio-xl .woocommerce-Price-amount,
.precio-xl .cuotas {
	line-height: inherit;
}

/* ============================================================
   LA LISTA DE TEMAS
   ------------------------------------------------------------
   Cada tema es un enlace a buscarlo en YouTube. Discogs a veces
   trae dos o tres videos del disco pero sin decir a que tema
   corresponde cada uno, asi que emparejarlos seria adivinar: la
   busqueda cae bien y funciona para todos los discos por igual.

   Se abre en una pestana nueva a proposito. Es una tienda: no
   hay que sacar a nadie de la ficha del disco que esta mirando.
   ============================================================ */
.temas .cara {
	display: block;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gris2);
	margin: 14px 0 5px;
}

.temas .cara:first-child {
	margin-top: 0;
}

.temas ol {
	list-style: none;
	margin: 0;
	padding: 0;
	columns: 2;
	column-gap: 26px;
}

.temas li {
	break-inside: avoid;
	padding: 2px 0;
}

.temas li a {
	display: flex;
	gap: 8px;
	align-items: baseline;
	font-family: var(--mono);
	font-size: 11.5px;
	line-height: 1.45;
	color: var(--tinta);
	text-decoration: none;
}

.temas li a:hover span {
	color: var(--oro);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.temas li b {
	flex: none;
	min-width: 22px;
	font-weight: 400;
	color: var(--gris2);
}

/* En el telefono no entran dos columnas de temas. */
@media (max-width: 640px) {

	.temas ol {
		columns: 1;
	}

	/* ------------------------------------------------------------
	   LOS BOTONES DE LA FICHA, EN EL TELEFONO

	   El mockup los apila y los estira a todo el ancho:
	     .acciones{flex-direction:column} .acciones .btn{text-align:center}

	   Aca no alcanzaba con eso. En el mockup los dos botones son
	   hermanos; en WooCommerce el de "agregar al carrito" viene
	   envuelto en un <form>. El form se estira, pero el boton de
	   adentro se queda del ancho de su texto, y quedaba uno corto
	   arriba y otro largo abajo.
	   ------------------------------------------------------------ */
	.acciones form.cart {
		width: 100%;
	}

	.acciones form.cart button[type="submit"],
	.acciones .single_add_to_cart_button {
		flex: 1;
		text-align: center;
	}

	.acciones .ddo-guardar {
		justify-content: center;
	}
}

/* ============================================================
   SESIONES DE ORO
   ============================================================ */

/* --- La miniatura, hasta que se hace clic ---
   Va limpia: la foto sola, sin cartel ni velo encima. En el mockup
   hay un "▶ Sesión 18" en el centro, pero ahi el recuadro es negro
   y no hay foto: ese texto es lo unico que se ve. Con una imagen
   de verdad abajo, el cartel solo tapaba.

   Que es un video se entiende por el cursor y porque la foto se
   oscurece al pasar por encima. */
.sesion .video {
	position: relative;
	cursor: pointer;
}

.sesion .video::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(20, 20, 20, 0);
	transition: background .15s;
}

.sesion:hover .video::after {
	background: rgba(20, 20, 20, .28);
}

/* --- Un renglon para cada dato ---
   ESTO SE APARTA DEL MOCKUP A PROPOSITO.

   Alla los tres datos son `span` sueltos sin `display`, o sea que
   quedan en linea: numero, artista y descripcion salen todos
   pegados en el mismo renglon y cortan donde llegan. En el mockup
   casi no se nota porque los textos son cortos ("Barbi Recanati",
   "14 min · 3 temas"), pero con los titulos reales —"Mauricio
   Figueroa", "Deep House Music Session"— queda un choclo.

   Van uno abajo del otro: sesion, DJ, nombre del set. Igual en
   escritorio y en celular. */
.sesion .n,
.sesion .t,
.sesion .d {
	display: block;
}

.sesion .video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	z-index: 3;
}

/* ============================================================
   PAGINA NOSOTROS
   Las cajas del mosaico en el mockup son placeholders grises.
   Aca llevan fotos reales, asi que hay que recortarlas al alto
   de la caja sin deformarlas.
   ============================================================ */
.mosaico .foto {
	overflow: hidden;
	padding: 0;
}

/* La fila de dirección / horario / contacto es lo último del mockup,
   asi que alla no necesitaba aire abajo. Aca abajo va la seccion de
   recomendados y quedaban pegadas. Se le da el mismo respiro que usan
   las secciones entre si. */
.datos-local {
	margin-bottom: 44px;
}

/* --- El mosaico de Nosotros ---
   La primera foto va grande a la izquierda y las demas apiladas a la
   derecha, sean tres, cuatro o cinco: `grid-row: 1 / -1` hace que la
   grande ocupe todas las filas que haya, sin contarlas.

   El mockup lo resuelve con alturas escritas a mano y le sobra un
   hueco abajo a la derecha. Con fotos verticales, que es lo que hay,
   asi queda parejo y sin agujeros.

   Va solo de 981px para arriba. De ahi para abajo mandan las reglas
   del sistema, que apilan todo en una o dos columnas. Por eso esto
   esta adentro de un `@media` y no suelto: si estuviera suelto le
   ganaria a las del celular y romperia el mosaico en el telefono. */
@media (min-width: 981px) {

	.ddo-mosaico {
		grid-auto-rows: 1fr;
		height: 520px;
	}

	.ddo-mosaico .foto:first-child {
		grid-row: 1 / -1;
	}
}

/* En pantallas chicas cada foto necesita una altura minima propia:
   la imagen va a `height:100%` y sin esto la caja quedaria en cero. */
@media (max-width: 980px) {

	.ddo-mosaico .foto {
		min-height: 200px;
	}
}

.mosaico .foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.texto-largo p:first-of-type::first-letter {
	font-family: var(--mono);
	font-size: 44px;
	font-weight: 500;
	float: left;
	line-height: .85;
	margin: 4px 10px 0 0;
	color: var(--oro);
}

.texto-largo b,
.texto-largo strong {
	font-weight: 600;
}

.texto-largo a {
	color: var(--oro);
	border-bottom: 1px solid var(--oro);
}

/* ============================================================
   ENVIO EN EL CARRITO
   ------------------------------------------------------------
   La calculadora de envio de WooCommerce es un formulario suelto
   con selects de pais y provincia. Se lo viste con el lenguaje del
   sistema para que parezca parte del panel y no un injerto.
   ============================================================ */
.ddo-metodos {
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
}

.ddo-metodos li {
	position: relative;
	border: 1px solid var(--linea);
	background: var(--papel);
	padding: 10px 12px 10px 34px;
	margin-bottom: 6px;
	list-style: none;
}

.ddo-metodos li:hover {
	border-color: var(--gris2);
}

.ddo-metodos input[type="radio"] {
	position: absolute;
	left: 12px;
	top: 13px;
	margin: 0;
	accent-color: var(--tinta);
}

.ddo-metodos label {
	display: block;
	font-size: 12.5px;
	line-height: 1.35;
	cursor: pointer;
}

.ddo-metodos label .woocommerce-Price-amount {
	font-family: var(--mono);
	display: block;
	margin-top: 2px;
	color: var(--tinta);
}

.ddo-detalle-paquete {
	margin: 4px 0 0;
}

.ddo-calculadora {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--linea);
}

.ddo-calculadora .shipping-calculator-button {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--oro);
	border-bottom: 1px solid var(--oro);
	cursor: pointer;
}

.ddo-calculadora .shipping-calculator-form {
	margin-top: 12px;
}

.ddo-calculadora .form-row {
	margin-bottom: 8px;
}

.ddo-calculadora input,
.ddo-calculadora select,
.ddo-calculadora .select2-container .select2-selection--single {
	width: 100%;
	border: 1px solid var(--linea);
	background: var(--papel);
	padding: 9px 11px;
	font-family: var(--sans);
	font-size: 13px;
	height: auto;
	min-height: 38px;
	border-radius: 0;
}

.ddo-calculadora button {
	width: 100%;
	border: 1px solid var(--tinta);
	background: var(--tinta);
	color: var(--papel);
	padding: 12px;
	font-family: var(--mono);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	cursor: pointer;
}

.ddo-calculadora button:hover {
	background: #000;
}

.fila.ddo-envio .num {
	text-align: right;
}

.fila.ddo-envio .num .woocommerce-Price-amount {
	font-family: var(--mono);
}

/* ============================================================
   OPCIONES DE ENVIO
   ------------------------------------------------------------
   Son las `.opcion` del mockup: cuadradito de seleccion a la
   izquierda, titulo, aclaracion en gris, precio a la derecha.

   El radio nativo se esconde pero NO se elimina: sigue recibiendo
   foco de teclado y sigue siendo el que dispara el recalculo de
   WooCommerce. El cuadradito es puro CSS.
   ============================================================ */
.ddo-metodos {
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

.ddo-metodos li.opcion {
	position: relative;
	border: 1px solid var(--linea);
	background: var(--papel);
	padding: 0;
	margin-bottom: 8px;
	list-style: none;
}

.ddo-metodos li.opcion:hover {
	border-color: var(--gris2);
}

.ddo-metodos label {
	display: block;
	position: relative;
	padding: 13px 15px 13px 42px;
	cursor: pointer;
	margin: 0;
}

.ddo-metodos input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	pointer-events: none;
}

.ddo-metodos .bol {
	position: absolute;
	left: 15px;
	top: 15px;
	width: 14px;
	height: 14px;
	border: 1px solid var(--gris2);
	background: var(--papel);
}

.ddo-metodos input:checked ~ .bol {
	border-color: var(--tinta);
}

.ddo-metodos input:checked ~ .bol::after {
	content: "";
	position: absolute;
	left: 3px;
	top: 3px;
	width: 6px;
	height: 6px;
	background: var(--tinta);
}

.ddo-metodos input:focus-visible ~ .bol {
	outline: 2px solid var(--oro);
	outline-offset: 2px;
}

.ddo-metodos li.opcion:has(input:checked) {
	border-color: var(--tinta);
	background: var(--sutil);
}

.ddo-metodos .t {
	display: block;
	font-family: var(--sans);
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--tinta);
	text-transform: none;
	letter-spacing: normal;
	padding-right: 76px;
}

.ddo-metodos .s {
	display: block;
	margin-top: 3px;
	font-size: 11.5px;
	line-height: 1.45;
	color: var(--gris);
	padding-right: 76px;
}

.ddo-metodos .p {
	position: absolute;
	right: 15px;
	top: 13px;
	font-family: var(--mono);
	font-size: 13px;
	color: var(--tinta);
	white-space: nowrap;
}

.ddo-metodos .p .woocommerce-Price-amount {
	font-family: var(--mono);
}

.ddo-metodos .p.libre {
	font-size: 10px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--gris2);
	top: 15px;
}

.ddo-metodos .p.gratis,
.ddo-gratis {
	color: var(--verde);
}

/* En el panel angosto, el precio baja a su propia linea. */
@media (max-width: 1100px) {
	.ddo-metodos .t,
	.ddo-metodos .s {
		padding-right: 0;
	}

	.ddo-metodos .p {
		position: static;
		display: block;
		margin-top: 6px;
	}
}

/* ============================================================
   CHECKOUT: LAS DOS COLUMNAS
   ------------------------------------------------------------
   La tabla del pedido vive dentro del panel derecho, que mide
   390px. Sin control de ancho, las etiquetas largas de Correo
   ("Domicilio - PAQ.AR Clásico") parten la tabla en columnas de
   dos centimetros y el texto sale letra por letra.
   ============================================================ */
.dos > .panel,
.dos > aside.panel {
	min-width: 0;
}

.woocommerce-checkout-review-order-table {
	table-layout: fixed;
	width: 100%;
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
	word-break: normal;
	overflow-wrap: anywhere;
	vertical-align: top;
}

.woocommerce-checkout-review-order-table .shipping th {
	width: 78px;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--gris2);
	font-weight: 500;
	padding-top: 13px;
}

.woocommerce-checkout-review-order-table .shipping td {
	padding-left: 10px;
}

/* Dentro del checkout las opciones ocupan todo el ancho de la celda. */
.woocommerce-checkout-review-order-table .ddo-metodos {
	margin: 0;
}

.woocommerce-checkout-review-order-table .ddo-metodos .t,
.woocommerce-checkout-review-order-table .ddo-metodos .s {
	padding-right: 0;
}

.woocommerce-checkout-review-order-table .ddo-metodos .p {
	position: static;
	display: block;
	margin-top: 6px;
	font-size: 13px;
}

/* Nombre del producto y cantidad en la tabla del pedido. */
.woocommerce-checkout-review-order-table .product-name {
	font-size: 12.5px;
	line-height: 1.4;
	padding-right: 10px;
}

.woocommerce-checkout-review-order-table .product-name .product-quantity {
	font-family: var(--mono);
	color: var(--gris2);
	white-space: nowrap;
}

/* ============================================================
   CAMPOS DE WOOCOMMERCE
   Los inputs con la caja del sistema.
   ------------------------------------------------------------
   Esto era solo del checkout. Desde que existen las pantallas de
   la cuenta —entrar, datos personales, direcciones— vale para las
   dos: son los mismos campos de WooCommerce y tienen que verse
   igual en los dos lados. Se agrego el prefijo de la cuenta en
   vez de copiar el bloque entero.
   ============================================================ */
.woocommerce-account .form-row,
.woocommerce-checkout .form-row {
	padding: 0;
	margin: 0 0 9px;
}

.woocommerce-account .form-row label,
.woocommerce-checkout .form-row label {
	display: block;
	font-family: var(--mono);
	font-size: 9.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gris2);
	margin-bottom: 3px;
}

.woocommerce-account .form-row .required,
.woocommerce-checkout .form-row .required {
	color: var(--rojo);
	text-decoration: none;
}

.woocommerce-account .form-row input.input-text,
.woocommerce-account .form-row textarea,
.woocommerce-account .form-row select,
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .select2-container .select2-selection--single {
	width: 100%;
	border: 1px solid var(--linea);
	background: var(--papel);
	padding: 10px 12px;
	font-family: var(--sans);
	font-size: 14px;
	color: var(--tinta);
	border-radius: 0;
	min-height: 42px;
}

.woocommerce-account .form-row input.input-text:focus,
.woocommerce-account .form-row textarea:focus,
.woocommerce-account .form-row select:focus,
.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-checkout .form-row select:focus {
	outline: 0;
	border-color: var(--tinta);
}

/* Dos columnas para nombre y apellido, como en el mockup. */
.woocommerce-account .form-row-first,
.woocommerce-account .form-row-last,
.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last {
	width: calc(50% - 4.5px);
	display: inline-block;
	vertical-align: top;
}

.woocommerce-account .form-row-first,
.woocommerce-checkout .form-row-first {
	margin-right: 9px;
}

@media (max-width: 640px) {
	.woocommerce-account .form-row-first,
	.woocommerce-account .form-row-last,
	.woocommerce-checkout .form-row-first,
	.woocommerce-checkout .form-row-last {
		width: 100%;
		margin-right: 0;
	}
}

.woocommerce-checkout #ship-to-different-address {
	margin: 20px 0 12px;
}

.woocommerce-checkout #ship-to-different-address label {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--tinta);
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
	display: block;
}

/* ============================================================
   REPARACION v11 — ESPECIFICIDAD Y SINCRONIA
   ------------------------------------------------------------
   Dos problemas distintos que se veian como uno.

   1) La lista de envios lleva id="shipping_method", que WooCommerce
      y Astra estilan POR ID. Un selector por id le gana siempre a uno
      por clase, sin importar el orden. Por eso las opciones salian con
      el padding de fabrica, la etiqueta en linea y el precio escapado
      fuera de la caja. Se repiten las reglas con el id adelante.

   2) Estos bloques ya estaban aplicados en vivo pero NO en mi copia,
      asi que al subir el zip se perdieron. Vuelven aca, que es donde
      tienen que vivir.
   ============================================================ */

/* --- 1. Opciones de envio, ahora ganando por id --- */
ul#shipping_method,
#shipping_method.ddo-metodos {
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

#shipping_method li,
#shipping_method li.opcion {
	position: relative;
	border: 1px solid var(--linea);
	background: var(--papel);
	padding: 0;
	margin: 0 0 8px;
	list-style: none;
	text-indent: 0;
}

#shipping_method li:hover {
	border-color: var(--gris2);
}

#shipping_method label {
	display: block;
	position: relative;
	padding: 13px 15px 13px 42px;
	margin: 0;
	cursor: pointer;
	font-weight: 400;
}

#shipping_method input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	pointer-events: none;
}

#shipping_method .bol {
	position: absolute;
	left: 15px;
	top: 15px;
	width: 14px;
	height: 14px;
	border: 1px solid var(--gris2);
	background: var(--papel);
}

#shipping_method input:checked ~ .bol {
	border-color: var(--tinta);
}

#shipping_method input:checked ~ .bol::after {
	content: "";
	position: absolute;
	left: 3px;
	top: 3px;
	width: 6px;
	height: 6px;
	background: var(--tinta);
}

#shipping_method li:has(input:checked) {
	border-color: var(--tinta);
	background: var(--sutil);
}

#shipping_method .t {
	display: block;
	font-family: var(--sans);
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--tinta);
	text-transform: none;
	letter-spacing: normal;
	padding-right: 84px;
}

#shipping_method .s {
	display: block;
	margin-top: 3px;
	font-size: 11.5px;
	line-height: 1.45;
	color: var(--gris);
	padding-right: 84px;
}

#shipping_method .p {
	position: absolute;
	right: 15px;
	top: 13px;
	font-family: var(--mono);
	font-size: 13px;
	color: var(--tinta);
	white-space: nowrap;
}

#shipping_method .p.libre {
	font-size: 10px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--gris2);
	top: 15px;
}

#shipping_method .p.gratis {
	color: var(--verde);
}

/* En columnas angostas el precio baja a su propia linea. */
@media (max-width: 1100px) {
	#shipping_method .t,
	#shipping_method .s {
		padding-right: 0;
	}

	#shipping_method .p {
		position: static;
		display: block;
		margin-top: 6px;
	}
}

/* ============================================================
   CONTADOR Y CRUZ DEL CARRITO
   ------------------------------------------------------------
   EL RECUADRO LO DIBUJA UNO SOLO
   El sistema dibuja la cajita del contador con `.cant`: un unico
   recuadro de 1px con tres celdas adentro (menos / numero / mas).

   WooCommerce y Astra traen su propio widget, `.quantity`, que ya
   viene con recuadro propio. Al meterlo adentro de `.cant`
   quedaban DOS recuadros, uno dentro del otro, y entre los dos
   asomaban tres pixeles del fondo de la pagina. Eso era el
   "fondito gris" atras del mas y del menos: no era un fondo, era
   el hueco entre dos marcos.

   La caja la dibuja `.cant`, que es la del mockup. El widget de
   adentro va sin marco y sin fondo, ocupando todo el ancho.

   LA CRUZ
   La cruz de quitar del carrito se arregla en PHP, no aca: Astra
   la reemplazaba por un icono suyo que en este sitio viene vacio.
   Ver `ddo_sc_cruz_de_verdad()` en inc/woo.php. Lo de aca abajo es
   solo darle la pinta del sistema.
   ============================================================ */
.linea-carro .cant .quantity {
	display: flex !important;
	flex: 1;
	align-items: stretch;
	border: 0 !important;
	background: none !important;
	border-radius: 0 !important;
	overflow: hidden;
	width: auto;
	margin: 0;
	padding: 0 !important;
	min-height: 0;
}

.linea-carro .cant .quantity input.qty,
.linea-carro .cant .quantity .minus,
.linea-carro .cant .quantity .plus,
.linea-carro .cant .quantity input[type="button"] {
	height: auto;
	align-self: stretch;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	/* Transparentes, como en el mockup. Si se pintan de blanco, el
	   sobrante de la celda (la columna mide 106px y las tres piezas
	   suman 98) queda como una franja gris al lado del "+". Con todo
	   transparente el recuadro se ve parejo. */
	background: transparent !important;
	color: var(--tinta) !important;
	font-family: var(--mono) !important;
	font-size: 12px !important;
	box-shadow: none !important;
	padding: 0 !important;
	line-height: 30px !important;
	min-height: 0 !important;
}

.linea-carro .cant .quantity .minus,
.linea-carro .cant .quantity .plus,
.linea-carro .cant .quantity input[type="button"] {
	width: 30px;
	cursor: pointer;
	flex: none;
}

.linea-carro .cant .quantity .minus:hover,
.linea-carro .cant .quantity .plus:hover {
	background: var(--sutil) !important;
}

/* El numero se estira para tapar el sobrante de la celda: si no,
   entre el "+" y el borde quedaba una franja de fondo a la vista. */
.linea-carro .cant .quantity input.qty {
	flex: 1;
	width: auto;
	min-width: 38px;
	text-align: center;
	border-left: 1px solid var(--linea) !important;
	border-right: 1px solid var(--linea) !important;
	-moz-appearance: textfield;
}

.linea-carro .cant .quantity input.qty::-webkit-outer-spin-button,
.linea-carro .cant .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.linea-carro .x a.remove,
.linea-carro .x .remove {
	display: inline-block !important;
	width: auto !important;
	height: auto !important;
	line-height: 1 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: var(--gris2) !important;
	font-family: var(--mono) !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	text-decoration: none !important;
}

/* EL AROLITO OVALADO ALREDEDOR DE LA CRUZ
   Astra dibuja un aro con un pseudo-elemento:

     .woocommerce-js a.remove::before {
         content:""; position:absolute; inset:0;
         border:1px solid ...; border-radius:100%;
     }

   Como toma el alto del renglon y el ancho de la "×", no sale un
   circulo sino un ovalito vertical, y encima tapa la cruz. Esto es
   lo que no se podia arreglar peleandole al enlace: el aro NO esta
   en el enlace, esta en su pseudo-elemento. Se apaga y listo. */
.linea-carro .x a.remove::before,
.linea-carro .x .remove::before {
	content: none !important;
}

.linea-carro .x a.remove:hover {
	color: var(--rojo) !important;
	background: transparent !important;
}

/* --- 2b. El titulo de Astra (se habia perdido) --- */
.ast-single-entry-banner,
.ast-archive-entry-banner,
.ast-page-title,
.ast-archive-title,
.entry-header .entry-title,
.woocommerce-products-header,
.page .entry-header,
.woocommerce-page .entry-header,
body.woocommerce-cart .entry-header,
body.woocommerce-checkout .entry-header,
body.woocommerce-account .entry-header {
	display: none !important;
}

/* --- 3. La tabla del pedido en el checkout --- */
.woocommerce-checkout-review-order-table {
	table-layout: auto;
}

.woocommerce-checkout-review-order-table .product-name {
	width: auto;
	min-width: 0;
	word-break: normal;
	overflow-wrap: anywhere;
	hyphens: none;
}

.woocommerce-checkout-review-order-table .product-total,
.woocommerce-checkout-review-order-table .cart-subtotal td,
.woocommerce-checkout-review-order-table .order-total td {
	width: 1%;
	white-space: nowrap;
	padding-left: 12px;
}

.woocommerce-checkout-review-order-table .shipping td {
	width: auto;
	white-space: normal;
}

/* El hero con cinco filas: la quinta es el contador de sesiones. */
.hero-datos div:last-child {
	border-bottom: 0;
}

/* ============================================================
   REPARACION v12 — WOOCOMMERCE SE IMPONE
   ------------------------------------------------------------
   Dos bugs distintos, misma raiz: hojas de WooCommerce que cargan
   despues de la nuestra y ganan por orden o por id.

   1) CHECKOUT PARTIDO EN VERTICAL
      woocommerce-layout.css arma el checkout en dos columnas con
      `#customer_details{float:left;width:48%}` y lo mismo para
      `#order_review`. Nosotros ya hacemos las dos columnas con la
      grilla `.dos`, asi que ese 48% se aplica DENTRO de nuestro panel
      de 390px y deja la tabla en 170px. De ahi que "Raydio - Two
      Places..." saliera una letra por renglon.

   2) PRECIO DEL ENVIO FUERA DE LA CAJA
      La etiqueta de cada opcion quedaba en `display:inline`. Un
      elemento en linea que ocupa varios renglones no forma una caja
      de referencia util: el precio, posicionado con `right`, se iba
      al borde izquierdo del renglon. Por eso aparecia afuera del
      panel. La etiqueta tiene que ser un bloque, si o si.
   ============================================================ */

/* --- 1. El checkout lo maqueta el Sistema C, no WooCommerce --- */
.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review,
.woocommerce-checkout .col2-set,
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
	max-width: none !important;
}

.woocommerce-checkout .col2-set::after,
.woocommerce-checkout #customer_details::after {
	content: none;
}

/* --- 2. La etiqueta del envio es un bloque, sin excepcion --- */
#shipping_method label,
.woocommerce ul#shipping_method label,
.woocommerce-checkout ul#shipping_method label {
	display: block !important;
	position: relative !important;
	padding: 13px 15px 13px 42px !important;
	margin: 0 !important;
	cursor: pointer;
	font-weight: 400;
	line-height: 1.3;
}

#shipping_method,
.woocommerce ul#shipping_method {
	margin: 8px 0 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

#shipping_method li,
.woocommerce ul#shipping_method li {
	position: relative !important;
	border: 1px solid var(--linea);
	background: var(--papel);
	padding: 0 !important;
	margin: 0 0 8px !important;
	list-style: none !important;
	text-indent: 0 !important;
	display: block !important;
}

#shipping_method input[type="radio"],
.woocommerce ul#shipping_method input[type="radio"] {
	position: absolute !important;
	opacity: 0 !important;
	width: 1px !important;
	height: 1px !important;
	margin: 0 !important;
	pointer-events: none;
}

#shipping_method .bol {
	position: absolute !important;
	left: 15px;
	top: 15px;
	width: 14px;
	height: 14px;
	border: 1px solid var(--gris2);
	background: var(--papel);
}

/* ------------------------------------------------------------
   ACA HABIA UNA COPIA DE `#shipping_method .p` CON `!important`,
   Y ERA LA QUE ROMPIA EL CELULAR.

   Repetia palabra por palabra la regla que ya existe mas arriba
   —absoluto, arriba a la derecha— y le agregaba `!important`.

   El problema es lo que ese `!important` pisaba. El tema tiene
   TRES reglas escritas a proposito para que el precio **baje a su
   propia linea cuando no hay ancho**:

     - una para pantallas de hasta 1100px, por clase;
     - otra igual, por id;
     - y una tercera para la tabla del pedido del checkout, donde
       la columna es angosta siempre.

   Las tres decian `position: static`. Las tres perdian contra este
   `!important`. O sea que la respuesta al celular estaba escrita
   por triplicado y no se ejecutaba nunca.

   Se veia asi, medido a 390px: "A coordinar" mide 79px y el titulo
   solo reserva 76px, con lo cual el precio se montaba encima de
   "Acordar envio por Whatsapp".

   No hacia falta: la regla de mas arriba ya deja el precio
   absoluto en pantallas anchas. Sacando esta copia, el escritorio
   queda igual y el celular hace por fin lo que estaba escrito.
   ------------------------------------------------------------ */

/* --- 3. La tabla del pedido, con anchos sanos --- */
.woocommerce-checkout-review-order-table {
	width: 100% !important;
	max-width: none !important;
	table-layout: auto !important;
	display: table !important;
}

.woocommerce-checkout-review-order-table tbody,
.woocommerce-checkout-review-order-table tr {
	display: table-row-group;
}

.woocommerce-checkout-review-order-table tr {
	display: table-row;
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
	display: table-cell !important;
	word-break: normal !important;
	overflow-wrap: break-word;
	hyphens: none;
}

.woocommerce-checkout-review-order-table .product-name {
	width: 99%;
	min-width: 120px;
}

.woocommerce-checkout-review-order-table .product-total,
.woocommerce-checkout-review-order-table .cart-subtotal td,
.woocommerce-checkout-review-order-table .order-total td {
	width: 1%;
	white-space: nowrap;
	text-align: right;
}

/* ============================================================
   REPARACION v13 — LA TABLA QUE NO ENTRABA
   ------------------------------------------------------------
   El panel del pedido mide 390px y por dentro le quedaban 340
   utiles. La tabla media 346 y desbordaba: por eso los precios
   aparecian cortados contra el borde derecho.

   Eran tres cosas sumadas: el padding propio de #order_review,
   el border-spacing de la tabla, y un min-width de 120px que yo
   mismo le habia puesto a la columna del nombre. Nada de eso
   dejaba a la tabla achicarse por debajo de su ancho minimo.

   Medido en vivo antes de escribirlo: 346 -> 340, sin desborde.
   ============================================================ */
.woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-checkout-review-order {
	padding: 0 !important;
	border: 0 !important;
	margin: 0 !important;
	background: transparent !important;
}

.woocommerce-checkout-review-order-table {
	width: 100% !important;
	box-sizing: border-box;
	margin: 0;
	border-collapse: collapse !important;
	border-spacing: 0 !important;
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
	padding-left: 0;
	padding-right: 0;
}

.woocommerce-checkout-review-order-table .product-name {
	min-width: 0 !important;
	width: auto !important;
	padding-right: 8px;
}

.woocommerce-checkout-review-order-table .product-total {
	padding-left: 6px !important;
	width: 1% !important;
}

/* La alineacion a la derecha es solo para los importes.
   Antes la heredaba tambien la celda de envio y empujaba las
   opciones contra el borde. */
.woocommerce-checkout-review-order-table td:last-child,
.woocommerce-checkout-review-order-table th:last-child {
	text-align: inherit;
}

.woocommerce-checkout-review-order-table .product-total,
.woocommerce-checkout-review-order-table .cart-subtotal td,
.woocommerce-checkout-review-order-table .order-total td {
	text-align: right !important;
	white-space: nowrap;
}

.woocommerce-checkout-review-order-table .shipping th {
	width: 70px;
	vertical-align: top;
	padding-right: 8px;
}

.woocommerce-checkout-review-order-table .shipping td {
	text-align: left !important;
	white-space: normal !important;
	padding-left: 0;
}

/* ============================================================
   REPARACION v14 — EL ENVIO A DOS COLUMNAS
   ------------------------------------------------------------
   En el carrito las opciones ocupan todo el ancho del panel y
   quedan perfectas. En el checkout compartian renglon con la
   etiqueta de la tabla, asi que arrancaban a mitad de camino y
   entraban tres palabras por linea.

   Ahora la fila de envio ocupa las dos columnas de la tabla y
   adentro va el mismo bloque que en el carrito. Mismo codigo,
   mismo resultado en las dos pantallas.
   ============================================================ */
.woocommerce-checkout-review-order-table .ddo-fila-envio > td {
	padding: 12px 0 4px !important;
	text-align: left !important;
	white-space: normal !important;
	width: auto !important;
}

.woocommerce-checkout-review-order-table .ddo-fila-envio .fila {
	padding: 0 0 4px;
}

.woocommerce-checkout-review-order-table .ddo-fila-envio #shipping_method {
	width: 100%;
}

/* ============================================================
   v15 — EL TITULO DEL PANEL DEL PEDIDO
   ------------------------------------------------------------
   "TU PEDIDO" tiene que verse igual que "RESUMEN" del carrito:
   alineado a la izquierda, sin caja, con la linea fina debajo.
   WooCommerce y Astra le meten borde, centrado y margenes propios.
   ============================================================ */
.woocommerce-checkout #order_review_heading,
.dos > aside.panel > h2 {
	display: block !important;
	width: 100% !important;
	margin: 0 0 15px !important;
	padding: 0 0 9px !important;
	border: 0 !important;
	border-bottom: 1px solid var(--linea) !important;
	background: none !important;
	text-align: left !important;
	font-family: var(--sans) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	text-transform: uppercase !important;
	letter-spacing: .08em !important;
	color: var(--tinta) !important;
	float: none !important;
}

/* La linea de "Envío" del checkout, con el mismo aire que en el carrito. */
.woocommerce-checkout-review-order-table .ddo-fila-envio .fila span:first-child {
	font-size: 12.5px;
	color: var(--gris);
}

/* ============================================================
   v16 — AVISOS Y CARTEL DE AGREGADO
   ------------------------------------------------------------
   Los avisos de WooCommerce salian con el celeste de Astra, borde
   redondeado y el link en azul de sistema. Nada de eso es del
   Sistema C. Y al agregar un disco no habia ninguna senal visible.
   ============================================================ */

/* --- Avisos de WooCommerce --- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
.wc-block-components-notice-banner {
	border: 1px solid var(--linea) !important;
	border-radius: 0 !important;
	background: var(--sutil) !important;
	color: var(--gris) !important;
	font-family: var(--sans) !important;
	font-size: 12.5px !important;
	line-height: 1.5;
	padding: 14px 16px !important;
	margin: 0 0 18px !important;
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	box-shadow: none !important;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	position: static !important;
	margin: 0 !important;
	color: var(--oro) !important;
	font-size: 14px;
	line-height: 1;
}

.woocommerce-message {
	border-color: var(--oro) !important;
	background: var(--oro-suave) !important;
	color: var(--tinta) !important;
}

.woocommerce-error {
	border-color: var(--rojo) !important;
	background: #fff8f8 !important;
	color: var(--tinta) !important;
}

.woocommerce-error::before {
	color: var(--rojo) !important;
}

/* El boton del aviso, con el lenguaje del sistema y no en azul. */
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
	margin-left: auto;
	border: 1px solid var(--tinta) !important;
	background: var(--tinta) !important;
	color: var(--papel) !important;
	border-radius: 0 !important;
	padding: 10px 16px !important;
	font-family: var(--mono) !important;
	font-size: 10px !important;
	font-weight: 500 !important;
	letter-spacing: .12em !important;
	text-transform: uppercase !important;
	line-height: 1 !important;
	text-decoration: none !important;
}

.woocommerce-message .button:hover,
.woocommerce-info .button:hover,
.woocommerce-error .button:hover {
	background: #000 !important;
	border-color: #000 !important;
}

.woocommerce-error li {
	list-style: none;
	margin: 0;
}

/* --- Cartel flotante al agregar --- */
.ddo-cartel {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 130;
	display: flex;
	align-items: center;
	gap: 16px;
	max-width: min(420px, calc(100vw - 36px));
	padding: 14px 16px;
	background: var(--tinta);
	color: var(--papel);
	border-left: 3px solid var(--oro-vivo);
	box-shadow: 0 8px 30px rgba(0, 0, 0, .22);
	opacity: 0;
	transform: translateY(12px);
	transition: opacity .22s, transform .22s;
}

.ddo-cartel.on {
	opacity: 1;
	transform: none;
}

/* ------------------------------------------------------------
   ESTE CARTEL SE ESCONDE CON EL ATRIBUTO `hidden`, Y EL `display`
   DE ARRIBA SE LO COMIA.

   El guion lo prende y lo apaga con `c.hidden = true/false`, que
   es lo correcto. Pero `hidden` no es una clase: es un atributo
   que el NAVEGADOR traduce a `display: none` desde su propia hoja
   de estilos. Y esa hoja pierde contra cualquier `display` que
   escribamos nosotros. Con `display: flex` ahi arriba, `hidden` no
   hacia absolutamente nada.

   LO QUE PASABA, MEDIDO EN STAGING

   El cartel quedaba plantado PARA SIEMPRE abajo a la derecha:
   invisible por `opacity: 0`, pero entero, fijo y con z-index 130.
   O sea, tragandose los clics de todo lo que cayera debajo.

   En escritorio son unos 130x45px en la esquina. Ahi caian
   **YouTube y WhatsApp** del pie, y por eso no abrian. Instagram
   quedaba unos pixeles mas a la izquierda y zafaba — que es
   exactamente lo que se veia y no se entendia.

   En el celular es peor. La consulta de abajo lo estira de lado a
   lado, asi que era una **franja invisible cruzando todo el ancho
   de la pantalla**, pegada al borde inferior, en todas las
   paginas. Por eso en el celular no andaba ninguno de los tres, y
   por eso hay que revisar cualquier otro boton que caiga cerca del
   borde de abajo.

   La leccion, para el resto del tema: si un elemento se esconde
   con `hidden`, hay que escribir la regla. El navegador solo no
   alcanza.
   ------------------------------------------------------------ */
.ddo-cartel[hidden] {
	display: none;
}

/* Y durante los 260ms que tarda en desvanecerse sigue ahi, con
   `hidden` todavia sin poner. En esa ventana tampoco tiene que
   interceptar nada. */
.ddo-cartel:not(.on) {
	pointer-events: none;
}

.ddo-cartel-txt {
	font-size: 12.5px;
	line-height: 1.4;
	flex: 1;
	min-width: 0;
}

.ddo-cartel-link {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--oro-vivo);
	white-space: nowrap;
	border-bottom: 1px solid var(--oro-vivo);
	padding-bottom: 1px;
}

.ddo-cartel-link:hover {
	color: var(--papel);
	border-bottom-color: var(--papel);
}

.ddo-cartel-x {
	background: none;
	border: 0;
	color: #8a8a8a;
	font-family: var(--mono);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	padding: 0 2px;
}

.ddo-cartel-x:hover {
	color: var(--papel);
}

@media (max-width: 640px) {
	.ddo-cartel {
		right: 12px;
		left: 12px;
		bottom: 12px;
		max-width: none;
	}
}

/* El boton mientras agrega. */
.single_add_to_cart_button.loading,
.add_to_cart_button.loading {
	opacity: .6;
	pointer-events: none;
}

/* ============================================================
   v16 — PAGINA DE AYUDA
   Indice pegajoso a la izquierda, texto a la derecha.
   Reusa la grilla del catalogo, que ya resuelve el mobile.
   ============================================================ */
.ddo-indice .fop {
	padding: 6px 0;
	font-size: 12.5px;
}

.ddo-indice .fop:hover {
	color: var(--tinta);
}

.ddo-ayuda h2 {
	font-family: var(--sans);
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .08em;
	padding-bottom: 9px;
	margin: 38px 0 16px;
	border-bottom: 1px solid var(--tinta);
	scroll-margin-top: 110px;
}

.ddo-ayuda h2:first-child {
	margin-top: 0;
}

.ddo-ayuda h3 {
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .08em;
	margin: 22px 0 8px;
}

.ddo-ayuda p {
	font-size: 14px;
	line-height: 1.7;
	margin-bottom: 14px;
}

.ddo-ayuda ul,
.ddo-ayuda ol {
	margin: 0 0 16px 18px;
	padding: 0;
}

.ddo-ayuda li {
	font-size: 14px;
	line-height: 1.7;
	margin-bottom: 6px;
}

.ddo-ayuda a {
	color: var(--oro);
	border-bottom: 1px solid var(--oro);
}

/* La capitular dorada es solo de Nosotros, no de Ayuda. */
.ddo-ayuda p:first-of-type::first-letter {
	font-family: inherit;
	font-size: inherit;
	float: none;
	margin: 0;
	line-height: inherit;
	color: inherit;
	font-weight: inherit;
}

/* ============================================================
   v17 — BOTON DE ARREPENTIMIENTO
   Va en el pie de todas las pantallas. Se distingue del resto de
   los enlaces con el borde dorado: tiene que poder encontrarse
   sin buscarlo, que es el punto de que exista.
   ============================================================ */
.ddo-arrepentimiento {
	display: inline-block;
	border: 1px solid var(--oro);
	color: var(--oro) !important;
	padding: 5px 11px;
	font-family: var(--mono);
	font-size: 9.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	line-height: 1.2;
}

.ddo-arrepentimiento:hover {
	background: var(--oro);
	color: var(--papel) !important;
}

/* ============================================================
   v18 — EL HERO, OTRA VEZ (y esta vez en el zip)
   ------------------------------------------------------------
   Este arreglo ya lo habia hecho una vez, pero solo en vivo, y al
   subir el zip siguiente se perdio. Va aca, que es donde vive lo
   que sobrevive.

   El bloque que fuerza todos los titulos a 21px para ganarle a
   Astra tambien alcanza al del hero, que en el mockup es mas
   grande y tiene sus propios margenes. Como los dos selectores
   tienen la misma especificidad, gana el que va ultimo.
   ============================================================ */
.hero h1,
.hero-txt h1 {
	font-size: 27px !important;
	letter-spacing: .06em !important;
	line-height: 1.35 !important;
	margin: 12px 0 !important;
}

.hero .apoyo {
	max-width: 50ch;
	margin-bottom: 20px;
}

.hero .etq {
	margin-bottom: 0;
}

@media (max-width: 640px) {
	.hero h1,
	.hero-txt h1 {
		font-size: 21px !important;
	}
}

/* ============================================================
   v22 — SE FUE EL PARCHE, QUEDO LA CAUSA RESUELTA
   ------------------------------------------------------------
   Aca vivia un bloque de reglas con !important que le forzaba el
   ancho completo a los contenedores de Astra en carrito y checkout.
   Era un parche: tapaba el sintoma peleando especificidad.

   La causa estaba en `page.php`. El carrito, el checkout y la cuenta
   no son plantillas de WooCommerce: son PAGINAS comunes con un
   shortcode adentro, asi que pasan por page.php. Y page.php las
   envolvia en `.texto-largo`, el ancho comodo de lectura para prosa
   —64 caracteres, unos 565px—. El carrito entraba a la fuerza ahi
   adentro, con el titulo del disco saliendo una letra por renglon.

   Ahora page.php les da el ancho completo y no las adorna: cada una
   trae su propia maquetacion. Sin envoltorio ajeno, no hay nada que
   forzar.

   OJO: en el v21 se intento resolver esto agregando un
   `woocommerce.php` al tema. Salio peor: WooCommerce usa ese archivo
   en lugar de `archive-product.php` y `single-product.php`, asi que
   rompio el catalogo y la ficha. No volver a agregarlo.

   Quedan solo dos reglas, y no son parches: son la defensa normal
   de cualquier grilla para que sus columnas puedan achicarse.
   ============================================================ */
.carro,
.dos {
	min-width: 0;
}

.carro > div,
.dos > div,
.dos > aside {
	min-width: 0;
}

/* ============================================================
   v22 — NOTA SOBRE EL ANCHO DE PROSA
   ------------------------------------------------------------
   `.texto-largo` limita el ancho a 64 caracteres. Eso es correcto
   y deliberado: es el ancho de lectura comodo para prosa, y por eso
   lo usan Nosotros y Ayuda.

   El problema nunca fue esta regla, sino que la plantilla general de
   paginas se la aplicaba TAMBIEN al carrito y al checkout, que son
   paginas de WooCommerce con shortcode adentro. Eso ya esta resuelto
   en page.php, donde esas pantallas se imprimen sin envoltorio.

   Se deja escrito para que nadie "arregle" el 64ch y rompa la
   legibilidad de las paginas de texto.
   ============================================================ */

/* ============================================================
   v23 — MEDIOS DE PAGO PROLIJOS
   ------------------------------------------------------------
   Las pasarelas traen su propio material: logos grandes, paneles
   promocionales, textos largos. Todo eso es de ellas y no se toca
   por dentro, pero si se le pone marco para que no desborde ni
   estire el checkout.
   ============================================================ */
.wc_payment_methods {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wc_payment_methods > li {
	position: relative;
	border: 1px solid var(--linea);
	background: var(--papel);
	padding: 13px 15px 13px 42px;
	margin: 0 0 8px;
	list-style: none;
}

.wc_payment_methods > li:hover {
	border-color: var(--gris2);
}

.wc_payment_methods > li:has(input:checked) {
	border-color: var(--tinta);
	background: var(--sutil);
}

.wc_payment_methods > li > input[type="radio"] {
	position: absolute;
	left: 15px;
	top: 16px;
	margin: 0;
	accent-color: var(--tinta);
}

.wc_payment_methods > li > label {
	display: block;
	font-family: var(--sans);
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--tinta);
	cursor: pointer;
	margin: 0;
}

/* Los logos de las pasarelas, a un tamano razonable. */
.wc_payment_methods label img,
.wc_payment_methods .payment_box img {
	display: inline-block;
	max-height: 22px;
	width: auto;
	margin: 0 0 0 8px;
	vertical-align: middle;
}

/* El panel que se abre al elegir: contenido de la pasarela, con marco. */
.wc_payment_methods .payment_box {
	margin: 10px 0 0;
	padding: 12px 14px;
	background: var(--sutil);
	border: 1px solid var(--linea);
	font-size: 12px;
	line-height: 1.5;
	color: var(--gris);
	max-height: 280px;
	overflow-y: auto;
}

.wc_payment_methods .payment_box::before {
	display: none;
}

.wc_payment_methods .payment_box p {
	margin: 0 0 8px;
}

.wc_payment_methods .payment_box p:last-child {
	margin-bottom: 0;
}

/* El material promocional de Mercado Pago, contenido dentro del panel. */
.wc_payment_methods .payment_box img {
	max-width: 100%;
	max-height: 34px;
}

.wc_payment_methods .payment_box > div,
.wc_payment_methods .payment_box iframe {
	max-width: 100% !important;
}

/* ============================================================
   FAVORITOS
   ------------------------------------------------------------
   El estado —que disco esta guardado y cual no— no lo pone una
   clase de JavaScript sino una hoja de estilo que el nucleo
   escribe en la cabecera, con una regla por disco guardado.

   Suena rebuscado y tiene un motivo concreto: las paginas se
   sirven desde dos caches, asi que el HTML que llega es igual
   para todos. Si el estado lo pusiera un guion despues de que
   la pagina se dibuja, en cada carga se veria un corazon vacio
   llenandose, o un cartel de "no guardaste nada" que aparece y
   desaparece. Escribiendo CSS antes del primer dibujado no hay
   parpadeo, y ademas alcanza a las tarjetas que todavia no se
   dibujaron.

   Lo que hay aca abajo es el estado APAGADO. El encendido lo
   escribe el nucleo. Ver inc/favoritos.php.
   ============================================================ */

/* Sin JavaScript no hay favoritos. Antes que un boton que no
   hace nada, ningun boton. */
html:not(.con-js) .ddo-guardar,
html:not(.con-js) .ddo-cor,
html:not(.con-js) .favs-grilla {
	display: none;
}

/* Los dos estados de la pagina de favoritos viven los dos en el
   HTML y se muestra uno solo. */
.favs-grilla,
html.con-favoritos .favs-vacio,
html.con-favoritos .favs-sugeridos {
	display: none;
}

html.con-favoritos .favs-grilla {
	display: grid;
}

.favs-cargando {
	grid-column: 1 / -1;
	margin: 0;
}

/* El texto del cuadro de vacio sale del contenido de la pagina,
   asi se puede editar desde WordPress. Viene envuelto en <p>. */
.favs-vacio .apoyo p {
	margin: 0;
}

/* ------------------------------------------------------------
   EL BOTON DE LA FICHA

   Las dos etiquetas estan las dos en el HTML, una encima de la
   otra en la misma celda de una grilla. Se esconde una con
   `visibility`, no con `display`, y por eso las dos siguen
   ocupando su lugar: el boton mide siempre lo que mide la mas
   larga —"Guardado"— y no se encoge ni se agranda al tocarlo.
   ------------------------------------------------------------ */
.ddo-guardar .cor {
	font-style: normal;
	margin-right: 7px;
}

.ddo-guardar .cor::before {
	content: "\2661"; /* ♡ */
}

.ddo-guardar .ets {
	display: grid;
	align-items: center;
	justify-items: center;
}

.ddo-guardar .ets > span {
	grid-area: 1 / 1;
}

.ddo-guardar .et-on {
	visibility: hidden;
}

/* El foco del teclado, en los colores del sistema y no en el azul
   del navegador. Se ve al llegar con Tab, no al hacer clic. */
.ddo-guardar:focus-visible,
.ddo-cor:focus-visible {
	outline: 2px solid var(--oro);
	outline-offset: 2px;
}

/* ------------------------------------------------------------
   EL CORAZON DE LA TARJETA
   Arriba a la izquierda: a la derecha esta la cinta de NUEVO o
   VENDIDO. Aparece al pasar por encima para no ensuciar la
   grilla, que es lo que mas se mira del sitio.
   ------------------------------------------------------------ */
.disco .ddo-cor {
	position: absolute;
	top: 7px;
	left: 7px;
	z-index: 3;
	width: 29px;
	height: 29px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	cursor: pointer;
	background: rgba(255, 255, 255, .92);
	border: 1px solid var(--linea);
	color: var(--gris2);
	opacity: 0;
	transition: opacity .12s, color .12s, border-color .12s;
}

.disco:hover .ddo-cor,
.disco .ddo-cor:focus-visible {
	opacity: 1;
}

.disco .ddo-cor:hover {
	color: var(--oro);
	border-color: var(--tinta);
}

.disco .ddo-cor svg {
	width: 15px;
	height: 15px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.5;
}

/* En el telefono no existe el "pasar por encima": si estuviera
   escondido no habria forma de guardar un disco desde la
   grilla. Se deja visible, apagado. */
@media (hover: none) {

	.disco .ddo-cor {
		opacity: .8;
	}
}

/* ============================================================
   LA CUENTA Y LA CONFIRMACIÓN DE COMPRA
   ------------------------------------------------------------
   Casi todo el diseño de estas dos pantallas ya estaba portado
   del mockup en sistema-c.css: `.cuenta`, `.menu-cuenta`,
   `.tabla`, `.gracias`, `.resumen-pedido`. Lo que falta acá son
   las piezas que el mockup no tiene porque no tenía WooCommerce
   adentro: el formulario de entrar, los formularios de datos y
   direcciones, y los datos para transferir.
   ============================================================ */

/* Un pedido cancelado, fallido o devuelto no puede verse igual
   que uno entregado. El mockup tiene dos pastillas; ésta es la
   tercera, para lo que salió mal. */
.tabla .est.mal {
	border-color: var(--rojo);
	color: var(--rojo);
}

/* ------------------------------------------------------------
   ENTRAR A LA CUENTA
   Dos columnas sólo si el registro está habilitado. Si no, el
   formulario solo, sin ocupar media pantalla al pedo.
   ------------------------------------------------------------ */
.ddo-entrar {
	max-width: 460px;
}

.ddo-entrar.con-registro {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px;
	align-items: start;
	max-width: 860px;
}

.ddo-entrar-pie {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 4px;
}

.ddo-entrar-pie label {
	display: flex !important;
	align-items: center;
	gap: 7px;
	margin: 0 !important;
	text-transform: none !important;
	font-family: var(--sans) !important;
	font-size: 12.5px !important;
	letter-spacing: 0 !important;
	color: var(--gris) !important;
}

.ddo-entrar-pie input[type="checkbox"] {
	width: 15px;
	height: 15px;
	accent-color: var(--tinta);
}

.woocommerce-LostPassword {
	margin: 12px 0 0;
}

@media (max-width: 640px) {

	.ddo-entrar.con-registro {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------
   LO DE ADENTRO DE LA CUENTA
   Datos personales y direcciones son formularios de WooCommerce.
   Los campos ya toman la caja del sistema; falta el resto.
   ------------------------------------------------------------ */
.woocommerce-MyAccount-content > h2,
.woocommerce-MyAccount-content > h3 {
	margin-bottom: 12px;
}

.woocommerce-MyAccount-content fieldset {
	border: 1px solid var(--linea);
	padding: 16px 18px;
	margin: 20px 0 0;
}

.woocommerce-MyAccount-content fieldset legend {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gris2);
	padding: 0 7px;
}

.woocommerce-MyAccount-content .button,
.woocommerce-MyAccount-content button[type="submit"] {
	display: inline-block;
	border: 1px solid var(--tinta);
	background: var(--tinta);
	color: var(--papel);
	padding: 12px 20px;
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	line-height: 1;
	cursor: pointer;
	border-radius: 0;
}

.woocommerce-MyAccount-content .button:hover,
.woocommerce-MyAccount-content button[type="submit"]:hover {
	background: #000;
	border-color: #000;
}

/* Las dos direcciones, una al lado de la otra y del mismo alto.
   El sistema de columnas flotadas de WooCommerce que las repartia
   por porcentaje se apaga en astra-neutro.css: acá sólo se dice
   cómo tienen que verse. */
.woocommerce-Addresses {
	display: grid;
	/* `minmax(0, 1fr)` y no `1fr` a secas: con `1fr` una columna
	   puede pasarse de su mitad si su contenido no entra, y las dos
	   tarjetas quedan de distinto ancho apenas la pantalla se
	   angosta. Con el minmax nunca se pasan. */
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px;
	/* `stretch` y no `start`: las dos tarjetas miden lo mismo aunque
	   una direccion tenga un renglon mas que la otra. Con `start`
	   quedaban de 240 y 207 y se notaba. */
	align-items: stretch;
}

.woocommerce-Address {
	border: 1px solid var(--linea);
	background: var(--papel);
	padding: 18px 20px;
}

/* LA CABECERA DE CADA DIRECCIÓN: dos renglones fijos.

   Antes esto era una fila flexible —título a la izquierda, "Editar"
   a la derecha, en la misma línea—. Se veía bien con "envío" y se
   rompía con "facturación": el texto es más largo, no entraba, y al
   envolverse las dos tarjetas quedaban distintas entre sí. El
   título de una terminaba corrido y la línea separadora a distinta
   altura que la de al lado.

   Ahora son dos renglones siempre: el título arriba, el enlace
   debajo alineado a la derecha, y la línea al final. Las dos
   tarjetas quedan idénticas sin importar el largo del texto, que es
   lo único que hace que dos cosas puestas una al lado de la otra se
   vean parejas.

   El `float: none` tampoco es capricho: WooCommerce le pone
   `float: right` al enlace, y ahí la altura de la cabecera pasaba a
   depender de cómo cierra un flotado. Se alinea a mano y se acabó.

   El selector es largo por la misma razón que en el neutralizador:
   la regla que le saca a WooCommerce su recuadro pesa tres clases, y
   ésta tiene que ganarle sin depender del orden de las hojas. */
body.woocommerce-account .woocommerce-Addresses .woocommerce-Address .woocommerce-Address-title {
	display: block;
	margin: 0 0 14px;
	padding: 0 0 11px;
	border-bottom: 1px solid var(--linea);
}

body.woocommerce-account .woocommerce-Addresses .woocommerce-Address .woocommerce-Address-title h2,
body.woocommerce-account .woocommerce-Addresses .woocommerce-Address .woocommerce-Address-title h3 {
	margin: 0 0 7px;
}

body.woocommerce-account .woocommerce-Addresses .woocommerce-Address .edit {
	display: block;
	float: none;
	text-align: right;
}

body.woocommerce-account .woocommerce-Addresses .woocommerce-Address address {
	font-style: normal;
	font-size: 13.5px;
	line-height: 1.7;
}

.woocommerce-Address .edit {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--oro);
}

.woocommerce-Address .edit:hover {
	color: var(--tinta);
}

@media (max-width: 640px) {

	.woocommerce-Addresses {
		grid-template-columns: 1fr;
	}
}

.ddo-paginas-cuenta {
	display: flex;
	gap: 9px;
	margin-top: 16px;
}

/* ------------------------------------------------------------
   DESPUÉS DEL RESUMEN DE COMPRA
   Acá aterrizan los datos para transferir, que los imprime la
   pasarela de pago y no nosotros.

   LO QUE FALTABA: esto estaba escrito pensando en la tabla de
   cuentas de WooCommerce —el `<ul>` de más abajo—, y esa tabla
   tiene columnas de banco europeo que acá no usamos. Los datos
   van en el campo de instrucciones, que sale en párrafos, y a los
   párrafos no les había dado ningún estilo. Resultado: el alias
   quedaba en texto pelado, fuera del recuadro, como si se hubiera
   caído de la página.

   Y no es un dato más: para el que eligió transferencia, ESTA es
   la parte accionable de la pantalla. Lleva el recuadro en oro
   suave, que es como el sistema marca lo que hay que hacer.
   ------------------------------------------------------------ */
.ddo-tras-pedido {
	text-align: left;
	margin-top: 22px;
	padding: 20px 22px;
	border: 1px solid var(--oro);
	background: var(--oro-suave);
}

.ddo-tras-pedido .etq {
	margin-bottom: 12px;
}

.ddo-tras-pedido p {
	margin: 0 0 10px;
	font-size: 13px;
	line-height: 1.65;
	color: var(--tinta);
}

.ddo-tras-pedido p:last-child {
	margin-bottom: 0;
}

/* El alias y el titular vienen separados por un salto simple, así que
   caen en el mismo párrafo con un <br> en el medio. Ese renglón es un
   dato para copiar: va en mono, como todos los datos del sistema. */
.ddo-tras-pedido p:first-of-type {
	font-family: var(--mono);
	font-size: 13.5px;
	line-height: 2;
}

.ddo-tras-pedido h2,
.ddo-tras-pedido h3 {
	margin: 0 0 10px;
	font-family: var(--mono);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--oro);
}

.ddo-tras-pedido ul,
.ddo-tras-pedido .wc-bacs-bank-details {
	list-style: none;
	margin: 0;
	padding: 16px 18px;
	border: 1px solid var(--linea);
	background: var(--sutil);
	font-family: var(--mono);
	font-size: 12px;
	line-height: 1.9;
}

.ddo-tras-pedido li strong {
	color: var(--tinta);
}

/* La confirmación no lleva migas ni título de página: el ✓ y el
   "Gracias" del mockup ya dicen dónde estás. */
.woocommerce-order .woocommerce-notice--success {
	display: none;
}

/* ============================================================
   EL OJO DE LAS CONTRASEÑAS
   ------------------------------------------------------------
   WooCommerce envuelve cada campo de contraseña en un
   `<span class="password-input">` y le mete adentro un
   `<button class="show-password-input">` que muestra y esconde
   lo escrito. El botón se posiciona solo... si el envoltorio
   está posicionado, y no lo estaba.

   Sin eso, el botón caía FUERA del campo, y como Astra le da a
   todo `<button>` su borde azul, aparecían esos rectángulos
   celestes vacíos debajo de cada contraseña. No eran un error
   nuestro ni un elemento de más: era el ojo, tirado en el piso.

   Acá se le devuelve su lugar: adentro del campo, a la derecha,
   sin borde ni fondo, del gris de las etiquetas. Y al campo se
   le hace lugar para que el texto no pase por abajo.

   Vale para toda la tienda —no sólo la cuenta— porque el mismo
   campo aparece en el checkout cuando alguien se crea una
   cuenta al comprar.
   ============================================================ */
.woocommerce form .password-input {
	display: block;
	position: relative;
	width: 100%;
}

.woocommerce form .password-input input.input-text {
	padding-right: 44px;
}

.woocommerce form .show-password-input {
	position: absolute;
	top: 0;
	right: 0;
	width: 42px;
	height: 100%;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	color: var(--gris2);
	cursor: pointer;
}

.woocommerce form .show-password-input:hover,
.woocommerce form .show-password-input.display-password {
	color: var(--tinta);
}

/* ============================================================
   LA BARRA DE ABAJO DEL PIE
   ------------------------------------------------------------
   El pie tiene dos zonas con tipografías distintas: las columnas
   —enlaces de 12,5px— y la barra de abajo, que es la línea del
   copyright, los medios de pago y las redes, toda en mono de
   10px.

   Hasta ahora en esa barra no había ni un enlace, así que nadie
   se había dado cuenta de que `.pie a { font-size: 12.5px }`
   —la regla de las columnas— también la alcanza. Al convertir
   las redes en enlaces, salieron 2,5px más grandes que el resto
   de la barra, desbalanceando la fila entera.

   La regla no se toca: los enlaces de las columnas tienen que
   seguir midiendo 12,5px. Lo que se dice es que **en la barra de
   abajo los enlaces usan la tipografía de la barra**, que es lo
   que uno esperaría de entrada.

   Vale para cualquier enlace que vaya ahí, no sólo para las
   redes: el botón de arrepentimiento vive en esa misma barra y
   tenía el mismo problema esperando, sin que se notara todavía
   porque la página aún no existe.
   ============================================================ */
.pie .pie-bajo-in a {
	font-size: inherit;
	letter-spacing: inherit;
	color: var(--gris2);
	text-decoration: none;
}

.pie .pie-bajo-in a:hover {
	color: var(--tinta);
}

/* Las redes, separadas por el mismo punto medio que las separaba
   cuando eran texto suelto, para que el pie se siga viendo igual. */
.redes {
	display: flex;
	align-items: center;
	gap: 9px;
}

/* El separador va entre enlaces, nunca al final. */
.redes a + a::before {
	content: "·";
	margin-right: 9px;
	color: var(--linea);
}

/* El aviso de que la dirección es la que hace aparecer los envíos.
   Va pegado al título del paso, antes del formulario, porque su
   trabajo es que la persona sepa PARA QUE completa lo que sigue.

   EL ESPACIO DE ABAJO NO ES SUYO. Quedaba un hueco grande entre este
   renglón y "DETALLES DE FACTURACIÓN", y la tentación era achicarle el
   margen a este párrafo. No servía: el hueco lo hace el margen de
   arriba de ESE título, que es de WooCommerce y mide 18px.

   Así que el párrafo cierra en cero y el espacio lo decide el título,
   una sola vez. Si se tocaran los dos, cualquier ajuste futuro habría
   que hacerlo en dos lados y el hueco volvería a descuadrarse. */
.ddo-aviso-direccion {
	margin: -6px 0 0;
	max-width: 62ch;
}

.ddo-aviso-direccion + .woocommerce-billing-fields h3 {
	margin-top: 14px;
}

/* ------------------------------------------------------------
   LA NOTA DEL CARRITO

   Subió de abajo de los botones a arriba del botón. Abajo la
   leía sólo quien ya había decidido, y su trabajo es el
   contrario: que nadie se vaya creyendo que no mandamos
   encomienda.

   El margen de abajo lo pone el bloque del botón, que ya trae
   el suyo; acá sólo se corrige el de arriba para que respire
   después del total.
   ------------------------------------------------------------ */
.ddo-nota-envio {
	margin-top: 16px;
}

/* Nombra un botón que está más arriba. Si se escribe igual que el
   resto del texto, mandamos a la persona a buscar algo que no puede
   distinguir del párrafo. */
.ddo-resalte {
	color: var(--oro);
	font-weight: 500;
	white-space: nowrap;
}