/*
Theme Name: 42K Customizador
Theme URI: https://customizador.42krunning.com/
Author: 42K Running
Description: Tema hijo de Twenty Twenty-Five para el customizador de equipaciones de 42K. Reproduce el lenguaje visual de 42krunning.com y adapta la ficha de prenda al flujo del customizador: elegir prenda → diseñar en 3D → presupuesto.
Template: twentytwentyfive
Version: 1.2.2
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.2
License: GPL-2.0-or-later
Text Domain: 42k-customizador
*/

/* -------------------------------------------------------------------------
 * Los tokens viven en theme.json. Aquí va lo que theme.json no expresa:
 * estados, composición y los componentes que inyecta el plugin.
 *
 * Todo medido sobre 42krunning.com en producción, no deducido de su hoja de
 * estilos: había varias reglas h1 y la que gana no es la que parecía.
 *
 *   h1              Dosis 45px  peso 500  itálica  mayúsculas  interlineado 1
 *   h2 / h3         Dosis       peso 300  mayúsculas
 *   navegación      Dosis 21px  peso 500  mayúsculas
 *   botón           Dosis 18px  peso 400  mayúsculas  radio 5px  7px/15px
 *   título tarjeta  Dosis 16.5px peso 300 mayúsculas
 *   precio          Helvetica 18px peso 500  sin mayúsculas
 *   cuerpo          Helvetica 15px  color #222
 *
 * Dos reglas que definen su estética y conviene no romper:
 *
 *   1. letter-spacing SIEMPRE normal. No hay una sola mayúscula espaciada en
 *      todo el sitio. Espaciar mayúsculas es lo que más delata una plantilla.
 *   2. Las tarjetas de producto son planas: sin borde, sin radio, sin sombra.
 *      El radio de 5px es solo para botones.
 * ---------------------------------------------------------------------- */

:root {
	--principal: #e84924;
	--principal-oscuro: #a62000;
	--rojo: #a62a05;
	--negro: #000;
	--oscuro: #222;
	--menos-oscuro: #5d5d5d;
	--claro: #999;
	--mas-claro: #f3f3f3;
	--blanco: #fff;

	--radius-boton: 5px;
	--linea: #e6e6e6;

	--transicion: 0.2s ease;

	--titulo: "Dosis", Helvetica, Arial, sans-serif;
	--texto: Helvetica, Tahoma, Arial, sans-serif;
}

body {
	font-family: var(--texto);
	color: var(--oscuro);
}

/* ---------- Titulares ----------
   El H1 en itálica es la firma de la marca. No es decoración: es lo que hace
   que un titular suyo se reconozca a distancia.                            */

h1,
h2,
h3,
.wp-block-post-title {
	font-family: var(--titulo);
	text-transform: uppercase;
	letter-spacing: normal;
	line-height: 1;
}

h1,
.wp-block-post-title {
	font-weight: 500;
	font-style: italic;
	color: var(--oscuro);
}

h2,
h3 {
	font-weight: 300;
	color: var(--oscuro);
}

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

.c42k-site-header {
	border-bottom: 1px solid var(--linea);
}

.c42k-site-header a {
	text-decoration: none;
}

/* Logo de 42K en vectorial (assets/images/logo-42k.svg), en negro. */
.c42k-logo {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	color: var(--oscuro);
}

/* Rótulo junto al logo: "CUSTOMIZADOR" y debajo, en naranja, "DE 42K RUNNING".
   Una raya lo separa del logo para que se lea como una sola marca. */
.c42k-logo__rotulo {
	display: flex;
	flex-direction: column;
	padding-left: 0.75rem;
	border-left: 1px solid var(--linea);
	font-family: var(--titulo);
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.1;
	text-transform: uppercase;
	letter-spacing: normal;
	white-space: nowrap;
}

.c42k-logo__rotulo span {
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--principal-oscuro);
}

.c42k-logo img {
	display: block;
	width: 96px;
	height: auto;
}

/* ---------- Bloque de marca CUSTOM LINE ----------
   Copiado de 42krunning.com, donde presentan la línea. No usa Dosis: es
   Helvetica 700 en itálica, muy grande y con el interlineado más pequeño que
   el propio cuerpo, de modo que las dos palabras se montan. La segunda va
   mucho más pequeña y en naranja. Es su recurso más reconocible y el
   customizador forma parte de esa línea, así que lo lleva.                 */

.c42k-custom-line {
	font-family: var(--texto);
	font-weight: 700;
	font-style: italic;
	text-transform: uppercase;
	letter-spacing: normal;
	font-size: clamp(2.75rem, 7vw, 4.6875rem);

	/* Con unidad, no sin ella: un 0.4 pelado se recalcularía sobre el tamaño
	   de cada hijo y aplastaría la segunda palabra. En em se resuelve una vez
	   aquí y se hereda como longitud fija, que es lo que hacen ellos. */
	line-height: 0.4em;
	color: var(--blanco);
	margin: 0 0 1.75rem;

	/* Ancho justo el de "CUSTOM": "LINE" va pegado a su borde derecho. */
	width: fit-content;
}

.c42k-custom-line span {
	display: block;
	font-size: 0.38em;
	color: var(--principal);
	padding-top: 0.15em;
	text-align: right;
}

/* Sobre fondo oscuro, como en su web */
.has-oscuro-background-color .c42k-custom-line,
.has-negro-background-color .c42k-custom-line {
	color: var(--blanco);
}

.c42k-site-header .wp-block-navigation {
	font-family: var(--titulo);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: normal;
	font-size: 1.3125rem;
}

.c42k-site-header .wp-block-navigation a {
	color: var(--oscuro);
}

.c42k-site-header .wp-block-navigation a:hover {
	color: var(--principal-oscuro);
}

/* Idioma, cuenta y presupuesto en una bandeja gris, como el control
   segmentado del editor (3D / Impresión): idioma y cuenta son botones
   discretos y el presupuesto es la opción "activa", en negro. Va junta porque
   suelta en un space-between el presupuesto se iría al extremo contrario.
   Sin sombra: la cabecera no flota sobre nada. */
.c42k-site-header__acciones {
	display: flex;
	align-items: center;
	gap: 2px;
	flex-wrap: nowrap;
	padding: 4px;
	background: var(--mas-claro);
}

.c42k-site-header__acciones > *,
.c42k-site-header__acciones .wp-block-woocommerce-customer-account,
.c42k-site-header__acciones .wp-block-woocommerce-mini-cart {
	margin: 0;
}

.c42k-site-header__acciones .wc-block-customer-account__link,
.c42k-site-header__acciones .wc-block-mini-cart__button,
.c42k-idioma summary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 40px;
	padding: 0 0.6rem;
	border-radius: var(--radius-boton);
	color: var(--oscuro);
	transition: background-color var(--transicion), color var(--transicion);
}

.c42k-site-header__acciones .wc-block-customer-account__link {
	padding: 0;
}

.c42k-site-header__acciones .wc-block-customer-account__link:hover,
.c42k-idioma summary:hover,
.c42k-idioma[open] summary {
	background: var(--blanco);
}

.c42k-site-header__acciones a:focus-visible,
.c42k-site-header__acciones button:focus-visible,
.c42k-idioma summary:focus-visible {
	outline: 2px solid var(--principal-oscuro);
	outline-offset: 2px;
}

.c42k-site-header__acciones svg {
	display: block;
}

/* Presupuesto: icono, la palabra y el número de prendas, como un solo botón
   negro. No naranja: el naranja es el siguiente paso de cada pantalla (en el
   editor, "Añadir al presupuesto") y no puede haber dos. */
.c42k-site-header__acciones .wc-block-mini-cart__button {
	gap: 0.4rem;
	padding: 0 0.75rem 0 0.6rem;
	background: var(--oscuro);
	color: var(--blanco);
}

.c42k-site-header__acciones .wc-block-mini-cart__button:hover {
	background: var(--negro);
}

.c42k-site-header__acciones .wc-block-mini-cart__icon {
	width: 24px;
	height: 24px;
}

.c42k-presupuesto-etiqueta {
	font-family: "Dosis", "Helvetica Neue", Arial, sans-serif;
	font-weight: 600;
	font-size: 0.9375rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

/* El número de prendas detrás de la palabra, no encima del icono. */
.c42k-site-header__acciones .wc-block-mini-cart__quantity-badge {
	display: contents;
}

.c42k-site-header__acciones .wc-block-mini-cart__badge {
	position: static;
	order: 2;
	margin: 0;
	transform: none;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border: 0;
	border-radius: 999px;
	background: var(--blanco);
	color: var(--oscuro);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 20px;
	box-sizing: border-box;
}

/* En el móvil no cabe la palabra: queda el botón negro con el icono y su número. */
@media (max-width: 600px) {
	.c42k-presupuesto-etiqueta {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
}

/* El icono de la cuenta con el estilo "line" no trae tamaño propio y se queda
   en 0 px: el mismo que el del carrito. */
.c42k-site-header__acciones .wp-block-woocommerce-customer-account svg {
	width: 22px;
	height: 22px;
}

.c42k-site-header__nav {
	flex: 0 1 auto;
	min-width: 0;
}

/* Logo, menú y acciones necesitan unos 1.180 px en una línea: por debajo, el
   menú se aprieta, y si aun así no cabe (tableta) baja a su propia fila,
   centrado, con el logo y las acciones arriba. Sin eso la bandeja saltaba
   sola a una segunda línea pegada a la izquierda. */
@media (max-width: 1230px) {
	.c42k-site-header .wp-block-navigation {
		--wp--style--block-gap: 1rem;
		font-size: 0.9rem;
	}
}

@media (min-width: 782px) and (max-width: 1100px) {
	.c42k-site-header > .alignwide {
		row-gap: 0.75rem;
	}

	.c42k-site-header__acciones {
		order: 2;
	}

	.c42k-site-header__nav {
		order: 3;
		flex-basis: 100%;
		justify-content: center;
	}
}

/* Desplegables de "Prendas": submenús legibles y con aire. */
.c42k-site-header .wp-block-navigation .wp-block-navigation__submenu-container {
	min-width: 15rem;
	padding: 0.4rem 0;
	border: 0 !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.c42k-site-header .wp-block-navigation .wp-block-navigation__submenu-container a {
	padding: 0.45rem 1rem;
	text-transform: none;
}

.c42k-site-header .wp-block-navigation .wp-block-navigation__submenu-container a:hover {
	color: var(--principal-oscuro);
}

/* ---------- Pasos del proceso ----------
   Solo en la ficha de prenda: responde a "¿es complicado?" justo antes de
   pulsar "Crear diseño". En el catálogo sobra: ahí ya se viene decidido.

   Sin caja ni bordes redondeados. La numeración grande en Dosis ligera es
   suficiente estructura, y encaja con cómo titulan ellos.                  */

.c42k-pasos {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2.5rem;
	margin-block: 3.5rem;
	padding-top: 2rem;
	border-top: 2px solid var(--oscuro);
}

.c42k-paso__num {
	display: block;
	font-family: var(--titulo);
	font-size: 3rem;
	font-weight: 300;
	font-style: italic;
	line-height: 1;
	color: var(--principal);
	margin-bottom: 0.5rem;
}

.c42k-paso__titulo {
	font-family: var(--titulo);
	text-transform: uppercase;
	font-weight: 500;
	font-size: 1.125rem;
	letter-spacing: normal;
	margin: 0 0 0.35rem;
	color: var(--oscuro);
}

.c42k-paso__texto {
	font-size: 0.9375rem;
	color: var(--menos-oscuro);
	line-height: 1.55;
	margin: 0;
}

@media (max-width: 781px) {
	.c42k-pasos {
		grid-template-columns: 1fr;
		gap: 1.75rem;
	}
}

/* ---------- Catálogo de prendas ----------
   Planas, como en 42krunning.com: la prenda es lo único que se mira. Al pasar
   por encima la imagen se acerca un poco, que es toda la interacción que
   tiene su tienda.                                                          */

.wp-block-woocommerce-product-template,
ul.products {
	gap: 2rem;
}

.c42k-catalogo li.product,
.c42k-catalogo .wc-block-grid__product {
	border: 0;
	border-radius: 0;
	background: none;
	padding: 0;
	box-shadow: none;
}

.c42k-catalogo li.product a img,
.c42k-catalogo .wc-block-grid__product img {
	border-radius: 0;
	transition: transform var(--transicion);
}

@media (pointer: fine) {
	.c42k-catalogo li.product:hover a img {
		transform: scale(1.03);
	}
}

.c42k-catalogo .woocommerce-loop-product__title {
	font-family: var(--titulo);
	font-size: 1.03125rem;
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: normal;
	color: var(--oscuro);
	padding: 0.6rem 0 0.2rem;
	margin: 0;
}

/* Los precios del catálogo no significan nada: el precio sale del diseño. */
.c42k-catalogo .price,
.single-product .wp-block-woocommerce-product-price {
	display: none;
}

/* ---------- Ficha de prenda ---------- */

.c42k-ficha__titulo {
	margin: 0 0 0.6rem;
}

.c42k-ficha__intro {
	color: var(--menos-oscuro);
	font-size: 1.0625rem;
	line-height: 1.55;
	max-width: 46ch;
}

/* ---------- Botón "Crear diseño" (lo pone el plugin) ---------- */

.c42k-design-button {
	--c42k-orange: var(--principal);
	--c42k-orange-dark: var(--principal-oscuro);

	font-family: var(--titulo);
	font-size: 1.125rem;
	font-weight: 400;
	letter-spacing: normal;
	border-radius: var(--radius-boton);
	padding: 7px 15px;
	transition: background var(--transicion);
}

.c42k-design-button--single {
	font-size: 1.3125rem;
	padding: 12px 28px;
}

.c42k-design-button-wrap {
	margin-block: 1.5rem;
}

/* Qué pasa después de pulsarlo: es la objeción que de verdad frena.
   El texto lo pone el plugin en data-c42k-nota, ya traducido. */
.c42k-design-button-wrap[data-c42k-nota]::after {
	content: attr(data-c42k-nota);
	display: block;
	margin-top: 0.6rem;
	font-size: 0.875rem;
	color: var(--menos-oscuro);
}

/* ---------- "Tus diseños de esta prenda" (lo pone el plugin) ---------- */

.c42k-my-designs {
	--c42k-orange: var(--principal);
	--c42k-line: var(--linea);
	--c42k-muted: var(--menos-oscuro);

	border-top: 2px solid var(--oscuro);
	padding-top: 1.75rem;
}

.c42k-my-designs__title {
	font-family: var(--titulo);
	font-weight: 300;
	font-size: 1.6875rem;
	text-transform: uppercase;
	letter-spacing: normal;
	color: var(--oscuro);
}

.c42k-design-card {
	border: 0;
	border-radius: 0;
	border-bottom: 1px solid var(--linea);
	padding: 1rem 0;
}

.c42k-design-card__name {
	font-family: var(--titulo);
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: normal;
}

.c42k-design-card__link {
	font-weight: 400;
}

/* ---------- Estado del presupuesto ---------- */

.woocommerce-order .order-status,
.order-status {
	font-family: var(--titulo);
	text-transform: uppercase;
	font-weight: 500;
	letter-spacing: normal;
}

/* ---------- Pie ----------
   El de 42krunning.com: fondo #222 con el 42K enorme en marca de agua abajo a
   la derecha, texto gris de 15 px, títulos en Dosis blanco, redes en naranja
   y una franja negra con los derechos. */

/* Pegado al contenido, sin el hueco blanco del espaciado entre bloques. */
footer:has(> .c42k-pie) {
	margin-block-start: 0;
}

.c42k-pie {
	background: var(--oscuro);
	color: var(--claro);
	font-family: var(--texto);
	font-size: 15px;
	font-weight: 300;
	line-height: 1.4;
}

.c42k-pie__cuerpo {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2.5rem;
	max-width: 1600px;
	margin: 0 auto;
	padding: 40px;
	background: url("assets/images/logo-42k-marca.svg") no-repeat 100% 100% / 70% auto;
}

.c42k-pie ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.c42k-pie a {
	color: inherit;
	text-decoration: none;
	transition: color var(--transicion);
}

.c42k-pie a:hover,
.c42k-pie a:focus-visible {
	color: var(--blanco);
}

.c42k-pie__logo img {
	display: block;
	width: 85px;
	height: auto;
}

.c42k-pie__direccion {
	margin: 1.75rem 0 1.25rem;
	font-size: 13px;
}

.c42k-pie__telefonos li {
	display: flex;
	align-items: flex-start;
	gap: 0.4rem;
	margin-bottom: 0.15rem;
}

.c42k-pie__telefonos svg {
	flex: none;
	margin-top: 0.15em;
}

.c42k-pie__telefonos strong {
	font-weight: 600;
}

.c42k-pie__redes {
	display: flex;
	gap: 1rem;
	margin-top: 1.25rem !important;
}

.c42k-pie__redes a {
	display: block;
	color: var(--principal);
}

.c42k-pie__redes a:hover,
.c42k-pie__redes a:focus-visible {
	color: var(--blanco);
}

.c42k-pie__redes svg {
	display: block;
}

.c42k-pie__titulo {
	margin: 0.5rem 0 1.25rem;
	font-family: var(--titulo);
	font-size: 18px;
	font-weight: 500;
	line-height: 1;
	text-transform: uppercase;
	color: var(--blanco);
}

.c42k-pie__enlaces li {
	line-height: 21px;
}

.c42k-pie__franja {
	background: var(--negro);
	padding: 10px 40px 20px;
	text-align: center;
}

.c42k-pie__franja p {
	margin: 0;
}

@media (max-width: 900px) {
	.c42k-pie__cuerpo {
		grid-template-columns: 1fr 1fr;
	}

	.c42k-pie__cuerpo > :first-child {
		grid-column: 1 / -1;
	}
}

@media (max-width: 600px) {
	.c42k-pie__cuerpo {
		grid-template-columns: 1fr;
		gap: 2rem;
		padding: 32px 16px;
		background-size: 120% auto;
	}

	.c42k-pie__franja {
		padding-inline: 16px;
	}
}

/* ---------- Móvil ---------- */

@media (max-width: 600px) {
	.c42k-design-button--single {
		width: 100%;
		font-size: 1.125rem;
	}

	.c42k-my-designs__list {
		grid-template-columns: 1fr;
	}
}

/* Selector de idioma (cabecera). */
.c42k-idioma {
	position: relative;
}

/* Tamaño, color y fondo: con los demás botones de la bandeja de acciones. */
.c42k-idioma summary {
	gap: 0.3rem;
	list-style: none;
	cursor: pointer;
	font-family: "Dosis", sans-serif;
	font-size: 0.9rem;
	font-weight: 600;
}

.c42k-idioma summary::-webkit-details-marker {
	display: none;
}

/* La flecha de "Prendas": apunta abajo y gira al abrirse. */
.c42k-idioma__flecha {
	width: 10px;
	height: 10px;
	margin-left: 0.1rem;
	transition: transform var(--transicion);
}

.c42k-idioma[open] .c42k-idioma__flecha {
	transform: rotate(180deg);
}

/* Con ratón, sin anillo de foco: solo con teclado (lo pone la bandeja). */
.c42k-idioma summary:focus:not(:focus-visible) {
	outline: none;
}

/* El desplegable, como los de "Prendas": blanco, Dosis y la misma sombra.
   Sale por debajo de la bandeja, alineado con su borde izquierdo. */
.c42k-idioma ul {
	position: absolute;
	left: -4px;
	top: calc(100% + 10px);
	z-index: 100;
	min-width: 11rem;
	margin: 0;
	padding: 0.4rem 0;
	list-style: none;
	background: var(--blanco);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.c42k-idioma[open] ul {
	animation: c42k-idioma-abrir 0.18s ease-out;
}

@keyframes c42k-idioma-abrir {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
}

.c42k-idioma a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 40px;
	padding: 0 1rem;
	font-family: var(--titulo);
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--oscuro);
	text-decoration: none;
}

.c42k-idioma a:hover,
.c42k-idioma a:focus-visible {
	background: var(--mas-claro);
	color: var(--principal-oscuro);
	outline: none;
}

/* El idioma que se está viendo, marcado con un check. */
.c42k-idioma a[aria-current] {
	font-weight: 700;
	color: var(--principal-oscuro);
}

.c42k-idioma a[aria-current]::after {
	content: "";
	width: 12px;
	height: 7px;
	border-left: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(-45deg);
}

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

	.c42k-idioma[open] ul {
		animation: none;
	}
}

/* Ficha de prenda en móvil: primero decidir (título y formas de empezar), luego
   las fotos. Una sola foto deslizable, sin miniaturas, y migas en una línea. */
@media (max-width: 781px) {
	.single-product .c42k-ficha__resumen {
		order: -1;
	}

	.single-product .woocommerce-product-gallery .flex-control-thumbs {
		display: none;
	}

	.single-product .woocommerce-breadcrumb {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.c42k-site-header .wp-block-navigation__responsive-container-open,
	.c42k-site-header .wp-block-navigation__responsive-container-close {
		min-width: 44px;
		min-height: 44px;
		justify-content: center;
		align-items: center;
	}

	.c42k-site-header .wp-block-navigation__submenu-icon {
		min-width: 44px;
		min-height: 44px;
	}
}

/* ---------- Móvil: cabecera, menú y editor ----------
   Una sola fila: logo a la izquierda; idioma, cuenta, presupuesto y menú a
   la derecha. El menú desplegado es una lista plana a la izquierda, con los
   grupos de "Prendas" como subtítulos, sin las cajas flotantes del escritorio. */

@media (max-width: 781px) {
	.c42k-site-header {
		padding-block: 0.6rem !important;
	}

	.c42k-site-header > .alignwide {
		flex-wrap: nowrap;
		gap: 0.25rem;
	}

	.c42k-site-header__marca {
		flex: 0 1 auto;
		min-width: 0;
		margin-right: auto;
	}

	.c42k-logo {
		gap: 0.6rem;
	}

	.c42k-logo img {
		width: 68px;
	}

	.c42k-logo__rotulo {
		padding-left: 0.6rem;
		font-size: 0.875rem;
	}

	.c42k-logo__rotulo span {
		font-size: 0.6875rem;
	}

	.c42k-site-header__acciones {
		order: 2;
		padding: 2px;
	}

	.c42k-site-header__nav {
		order: 3;
		flex: none;
	}

	.c42k-site-header__acciones .wc-block-customer-account__link,
	.c42k-site-header__acciones .wc-block-mini-cart__button,
	.c42k-idioma summary {
		min-width: 44px;
		min-height: 44px;
		padding: 0 0.4rem;
	}

	.c42k-site-header__acciones .wc-block-customer-account__link {
		padding: 0;
	}

	.c42k-site-header__acciones .wc-block-mini-cart__button {
		gap: 0.25rem;
	}

	/* Menú desplegado. */
	.c42k-site-header .wp-block-navigation__responsive-container.is-menu-open {
		padding: 1rem 16px 2rem;
	}

	.c42k-site-header .is-menu-open .wp-block-navigation__responsive-container-content {
		align-items: stretch !important;
		padding-top: 2.5rem;
	}

	.c42k-site-header .is-menu-open .wp-block-navigation__container {
		align-items: stretch !important;
		gap: 0 !important;
		width: 100%;
	}

	.c42k-site-header .is-menu-open .wp-block-navigation-item {
		align-items: stretch !important;
		width: 100%;
		border-bottom: 1px solid var(--linea);
	}

	.c42k-site-header .is-menu-open .wp-block-navigation-item__content {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		min-height: 52px;
		padding: 0 !important;
		font-size: 1.25rem;
		text-align: left;
	}

	.c42k-site-header .is-menu-open .wp-block-navigation__submenu-container {
		position: static !important;
		min-width: 0 !important;
		width: 100% !important;
		padding: 0 0 0.75rem !important;
		box-shadow: none !important;
		background: transparent !important;
		gap: 0 !important;
	}

	.c42k-site-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
		border: 0;
	}

	/* Dentro de "Prendas": cada grupo (Partes de arriba…) como subtítulo
	   gris y sus prendas debajo, sangradas. */
	.c42k-site-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		min-height: 40px;
		font-family: var(--texto);
		font-size: 1rem;
		font-weight: 400;
		text-transform: none;
	}

	.c42k-site-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
		padding: 0 0 0.5rem 1rem !important;
	}

	.c42k-site-header .is-menu-open .wp-block-navigation__submenu-container .has-child > .wp-block-navigation-item__content {
		min-height: 32px;
		margin-top: 0.4rem;
		font-family: var(--titulo);
		font-size: 0.8125rem;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		color: var(--menos-oscuro);
	}

	/* El editor ocupa todo el ancho: sin el margen lateral de la página. */
	main.has-global-padding:has(> .editor42k) {
		margin-block-start: 0;
		padding-inline: 0;
	}
}

/* Entre 600 y 781 px el menú de WordPress todavía no se pliega en el botón
   (lo hace por debajo de 600): logo, bandeja y menú no cabían en una fila y
   el logo se encogía hasta desaparecer. Como en tableta: el menú, en su
   propia fila y centrado. */
@media (min-width: 600px) and (max-width: 781px) {
	.c42k-site-header > .alignwide {
		flex-wrap: wrap;
		row-gap: 0.5rem;
	}

	.c42k-site-header__nav {
		order: 3;
		flex: 1 1 100%;
		justify-content: center;
	}
}

/* Con el dedo, todo lo que se pulsa a 44 px como mínimo (DESIGN.md): los
   botones de los bloques y de WooCommerce se quedaban en 30-37 px y el
   selector de orden del catálogo en 20. */
@media (pointer: coarse) {
	.wp-block-button__link,
	.c42k-boton,
	.c42k-design-button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		box-sizing: border-box;
	}

	.woocommerce-ordering select.orderby {
		min-height: 44px;
	}
}

/* El presupuesto vacío (editor42k_presupuesto_vacio, en el plugin). */
.c42k-presupuesto-vacio {
	display: grid;
	gap: 1rem;
	justify-items: center;
	padding-block: 2.5rem 4rem;
	text-align: center;
}

.c42k-presupuesto-vacio h2,
.c42k-presupuesto-vacio p {
	margin: 0;
}

.c42k-presupuesto-vacio p {
	color: var(--menos-oscuro);
}

/* Páginas: 64 px de margen más 64 de relleno antes del título es demasiado
   en una pantalla de móvil. */
@media (max-width: 781px) {
	.wp-site-blocks > main.wp-block-group {
		margin-block-start: 1.5rem;
	}

	.wp-site-blocks > main > .alignfull.has-global-padding:first-child {
		padding-top: 0 !important;
	}
}

/* En los móviles estrechos no cabe el rótulo junto a los iconos. */
@media (max-width: 420px) {
	.c42k-logo__rotulo {
		display: none;
	}
}

/* ---------- Cabecera en el presupuesto y el checkout ----------
   Ahí WooCommerce esconde el botón "Presupuesto" con visibility:hidden (y
   aria-hidden), que sigue ocupando su sitio: la bandeja gris quedaba con un
   hueco vacío a la derecha. Fuera del todo. */

.c42k-site-header__acciones .wp-block-woocommerce-mini-cart[aria-hidden="true"],
.c42k-site-header__acciones .wp-block-woocommerce-mini-cart[style*="visibility:hidden"],
.c42k-site-header__acciones .wp-block-woocommerce-mini-cart[style*="visibility: hidden"] {
	display: none;
}

/* =========================================================================
 * Mi cuenta y acceso
 *
 * El mismo lenguaje que la cabecera: el menú es una bandeja gris con la
 * opción activa en negro; el naranja solo para el siguiente paso (diseñar
 * otra prenda, acceder). Campos a escuadra: el radio es de los botones.
 * El marcado propio (resumen, aviso junto al acceso) lo pone el plugin
 * (includes/cuenta.php).
 * ========================================================================= */

.woocommerce-account main .wp-block-post-title {
	margin-bottom: 2rem;
}

/* ---------- Campos ---------- */

.woocommerce-account .woocommerce form .form-row {
	margin: 0 0 1.1rem;
	padding: 0;
}

.woocommerce-account .woocommerce form label {
	display: block;
	margin-bottom: 0.35rem;
	font-family: var(--titulo);
	font-size: 0.9375rem;
	font-weight: 500;
	text-transform: uppercase;
	color: var(--oscuro);
	line-height: 1.2;
}

.woocommerce-account .woocommerce form label.woocommerce-form__label-for-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	font-family: var(--texto);
	font-size: 0.9375rem;
	font-weight: 400;
	text-transform: none;
	cursor: pointer;
}

.woocommerce-account .woocommerce .required {
	color: var(--principal-oscuro);
	text-decoration: none;
}

.woocommerce-account .woocommerce input.input-text,
.woocommerce-account .woocommerce select,
.woocommerce-account .woocommerce textarea,
.woocommerce-account .woocommerce .select2-container .select2-selection--single {
	width: 100%;
	min-height: 48px;
	padding: 0 0.9rem;
	border: 1px solid #cfcfcf;
	border-radius: 0;
	background: var(--blanco);
	font-family: var(--texto);
	font-size: 1rem;
	color: var(--oscuro);
	box-shadow: none;
	box-sizing: border-box;
	transition: border-color var(--transicion);
}

.woocommerce-account .woocommerce .select2-container .select2-selection--single .select2-selection__rendered {
	line-height: 46px;
	padding: 0;
}

.woocommerce-account .woocommerce .select2-container .select2-selection--single .select2-selection__arrow {
	height: 46px;
}

.woocommerce-account .woocommerce textarea {
	padding-block: 0.7rem;
}

.woocommerce-account .woocommerce input.input-text:hover,
.woocommerce-account .woocommerce select:hover {
	border-color: var(--menos-oscuro);
}

.woocommerce-account .woocommerce input.input-text:focus,
.woocommerce-account .woocommerce select:focus,
.woocommerce-account .woocommerce textarea:focus {
	border-color: var(--oscuro);
	outline: 2px solid var(--principal-oscuro);
	outline-offset: 1px;
}

.woocommerce-account .woocommerce input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--oscuro);
}

/* El ojo de "ver contraseña" centrado en el campo alto. */
.woocommerce-account .woocommerce .password-input {
	display: block;
	position: relative;
}

.woocommerce-account .woocommerce .show-password-input {
	top: 50%;
	right: 0.6rem;
	transform: translateY(-50%);
}

.woocommerce-account .woocommerce form .form-row-first,
.woocommerce-account .woocommerce form .form-row-last {
	width: calc(50% - 0.5rem);
}

.woocommerce-account .woocommerce form em,
.woocommerce-account .woocommerce form .description {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.8125rem;
	font-style: normal;
	color: var(--menos-oscuro);
}

.woocommerce-account .woocommerce fieldset {
	margin: 2rem 0 1rem;
	padding: 1.5rem 0 0;
	border: 0;
	border-top: 1px solid var(--linea);
}

.woocommerce-account .woocommerce legend {
	padding: 0 0.75rem 0 0;
	font-family: var(--titulo);
	font-size: 1.25rem;
	font-weight: 300;
	text-transform: uppercase;
}

/* ---------- Botones ----------
   El de enviar un formulario es el paso siguiente: naranja. Los de las
   tablas ("Ver") son secundarios: blanco con borde de tinta. */

.woocommerce-account .woocommerce button.button,
.woocommerce-account .woocommerce .woocommerce-Button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 1.75rem;
	border: 0;
	border-radius: var(--radius-boton);
	background: var(--principal);
	color: var(--blanco);
	font-family: var(--titulo);
	font-size: 1.125rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: normal;
	cursor: pointer;
	transition: background-color var(--transicion);
}

.woocommerce-account .woocommerce button.button:hover,
.woocommerce-account .woocommerce .woocommerce-Button:hover {
	background: var(--principal-oscuro);
	color: var(--blanco);
}

.woocommerce-account .woocommerce table a.button {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0 1rem;
	border: 1px solid var(--oscuro);
	border-radius: var(--radius-boton);
	background: var(--blanco);
	color: var(--oscuro);
	font-family: var(--titulo);
	font-size: 0.9375rem;
	font-weight: 600;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color var(--transicion), color var(--transicion);
}

.woocommerce-account .woocommerce table a.button:hover {
	background: var(--oscuro);
	color: var(--blanco);
}

/* ---------- Acceso (sin sesión) ----------
   Formulario a la izquierda y, a la derecha, en oscuro como el pie, que no
   hace falta registrarse. */

.woocommerce-account .woocommerce:has(> .woocommerce-form-login) {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	grid-template-areas:
		"avisos avisos"
		"titulo aside"
		"form   aside";
	grid-template-rows: auto auto 1fr;
	column-gap: clamp(2rem, 5vw, 4.5rem);
	max-width: 1040px;
}

.woocommerce-account .woocommerce:has(> .woocommerce-form-login) > .woocommerce-notices-wrapper {
	grid-area: avisos;
}

.woocommerce-account .woocommerce:has(> .woocommerce-form-login) > h2 {
	grid-area: titulo;
	margin: 0 0 1.25rem;
	font-size: 1.6875rem;
}

.woocommerce-account .woocommerce form.woocommerce-form-login.login {
	grid-area: form;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
}

/* "Recuérdame" encima y el botón a lo ancho del formulario. */
.woocommerce-form-login .form-row:has(.woocommerce-form-login__submit) {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 1rem;
}

.woocommerce-form-login .woocommerce-form-login__submit {
	width: 100%;
	margin: 0 !important;
}

.woocommerce-account .woocommerce-LostPassword {
	margin: 1rem 0 0;
}

.woocommerce-account .woocommerce-LostPassword a,
.woocommerce-account .woocommerce-MyAccount-content p a:not(.button):not([class*="c42k-"]) {
	color: var(--principal-oscuro);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.c42k-acceso {
	grid-area: aside;
	align-self: start;
	padding: 2.25rem 2.25rem 2.5rem;
	background: var(--oscuro) url("assets/images/logo-42k-marca.svg") no-repeat 115% 120% / 75% auto;
	color: var(--claro);
	font-size: 0.9375rem;
	line-height: 1.55;
}

.c42k-acceso .c42k-acceso__titulo {
	margin: 0 0 1rem;
	font-size: 1.6875rem;
	color: var(--blanco);
}

.c42k-acceso p {
	margin: 0 0 1.25rem;
}

.c42k-acceso__lista {
	margin: 0 0 2rem;
	padding: 0;
	list-style: none;
}

.c42k-acceso__lista li {
	position: relative;
	padding: 0.45rem 0 0.45rem 1.6rem;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	color: var(--blanco);
}

.c42k-acceso__lista li::before {
	content: "";
	position: absolute;
	left: 0.15rem;
	top: 0.95rem;
	width: 10px;
	height: 5px;
	border-left: 2px solid var(--principal);
	border-bottom: 2px solid var(--principal);
	transform: rotate(-45deg);
}

/* Secundario sobre oscuro: el naranja ya es "Acceder". */
.c42k-acceso__boton {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 1.25rem;
	border: 1px solid var(--blanco);
	border-radius: var(--radius-boton);
	color: var(--blanco);
	font-family: var(--titulo);
	font-size: 1rem;
	font-weight: 600;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color var(--transicion), color var(--transicion);
}

.c42k-acceso__boton:hover,
.c42k-acceso__boton:focus-visible {
	background: var(--blanco);
	color: var(--oscuro);
}

/* "¿Olvidaste la contraseña?" y "Nueva contraseña": formulario solo, estrecho. */
.woocommerce-account .woocommerce-ResetPassword {
	max-width: 480px;
}

/* ---------- Mi cuenta (con sesión) ---------- */

.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: start;
}

.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	width: auto;
}

/* El clearfix de WooCommerce (::before/::after) sería una celda más de la rejilla. */
.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation)::before,
.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation)::after,
.woocommerce-account .woocommerce:has(> .woocommerce-form-login)::before,
.woocommerce-account .woocommerce:has(> .woocommerce-form-login)::after {
	display: none;
}

/* El menú: bandeja gris con la opción activa en negro, como la cabecera. */
.woocommerce-MyAccount-navigation {
	position: sticky;
	top: 1.5rem;
	padding: 4px;
	background: var(--mas-claro);
}

.woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* woocommerce-blocktheme.css separa cada opción con relleno y línea, deja
   margen bajo la lista y subraya la activa. */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	margin: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li {
	margin: 0;
	padding: 0;
	border: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a,
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
	text-decoration: none;
}

.woocommerce-MyAccount-navigation a {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0 0.9rem;
	border-radius: var(--radius-boton);
	font-family: var(--titulo);
	font-size: 1rem;
	font-weight: 500;
	text-transform: uppercase;
	color: var(--oscuro);
	text-decoration: none;
	transition: background-color var(--transicion), color var(--transicion);
}

.woocommerce-MyAccount-navigation a:hover {
	background: var(--blanco);
}

.woocommerce-MyAccount-navigation .is-active a {
	background: var(--oscuro);
	color: var(--blanco);
}

.woocommerce-MyAccount-navigation a:focus-visible {
	outline: 2px solid var(--principal-oscuro);
	outline-offset: 2px;
}

/* Salir, separado y discreto. */
.woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: 0.5rem;
	padding-top: 0.5rem;
	border-top: 1px solid var(--linea);
}

.woocommerce-MyAccount-navigation-link--customer-logout a {
	color: var(--menos-oscuro);
	font-weight: 400;
}

.woocommerce-MyAccount-content {
	font-size: 0.9375rem;
	line-height: 1.55;
}

.woocommerce-MyAccount-content > :first-child,
.woocommerce-MyAccount-content > .woocommerce-notices-wrapper + * {
	margin-top: 0;
}

.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
	font-size: 1.5rem;
	margin: 2rem 0 1rem;
}

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

/* El saludo de WooCommerce ("Hola admin (¿no eres…?)") lo sustituye el plugin. */
.woocommerce-MyAccount-content:has(.c42k-cuenta) > p {
	display: none;
}

.c42k-cuenta__cabeza {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 0.5rem;
	padding-bottom: 1.25rem;
	border-bottom: 2px solid var(--oscuro);
}

.woocommerce-MyAccount-content .c42k-cuenta__saludo {
	margin: 0;
	font-size: clamp(1.75rem, 3vw, 2.25rem);
}

.c42k-cuenta__siguiente {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 0 1.5rem;
	border-radius: var(--radius-boton);
	background: var(--principal);
	color: var(--blanco);
	font-family: var(--titulo);
	font-size: 1.125rem;
	font-weight: 500;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color var(--transicion);
}

.c42k-cuenta__siguiente:hover,
.c42k-cuenta__siguiente:focus-visible {
	background: var(--principal-oscuro);
	color: var(--blanco);
}

/* Tarjetas planas, separadas por líneas, como el resto del sitio. */
.c42k-cuenta__tarjetas {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 2.5rem;
}

.c42k-cuenta__tarjeta {
	display: flex;
	flex-direction: column;
	padding: 1.25rem 0 1.5rem;
	border-bottom: 1px solid var(--linea);
}

.woocommerce-MyAccount-content .c42k-cuenta__tarjeta-titulo {
	margin: 0 0 0.6rem;
	font-family: var(--titulo);
	font-size: 0.875rem;
	font-weight: 600;
	font-style: normal;
	color: var(--menos-oscuro);
}

.c42k-cuenta__tarjeta-cuerpo {
	flex: 1;
	color: var(--menos-oscuro);
}

.c42k-cuenta__tarjeta-cuerpo p {
	margin: 0 0 0.35rem;
}

.c42k-cuenta__tarjeta-cuerpo .c42k-cuenta__dato {
	font-family: var(--titulo);
	font-size: 1.5rem;
	font-weight: 300;
	text-transform: uppercase;
	line-height: 1.15;
	color: var(--oscuro);
}

.c42k-cuenta__tarjeta-enlace {
	align-self: flex-start;
	margin-top: 0.9rem;
	font-family: var(--titulo);
	font-size: 0.9375rem;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--oscuro);
	text-decoration: none;
	border-bottom: 2px solid var(--principal);
	transition: color var(--transicion);
}

.c42k-cuenta__tarjeta-enlace::after {
	content: " →";
}

.c42k-cuenta__tarjeta-enlace:hover,
.c42k-cuenta__tarjeta-enlace:focus-visible {
	color: var(--principal-oscuro);
}

/* ---------- Tablas (presupuestos, detalle de un presupuesto) ---------- */

.woocommerce-account .woocommerce table.shop_table {
	width: 100%;
	margin: 0 0 2rem;
	border: 0;
	border-collapse: collapse;
	border-radius: 0;
}

.woocommerce-account .woocommerce table.shop_table th,
.woocommerce-account .woocommerce table.shop_table td {
	padding: 0.9rem 0.75rem;
	border: 0;
	border-bottom: 1px solid var(--linea);
	text-align: left;
	vertical-align: middle;
}

.woocommerce-account .woocommerce table.shop_table th:first-child,
.woocommerce-account .woocommerce table.shop_table td:first-child {
	padding-left: 0;
}

.woocommerce-account .woocommerce table.shop_table thead th {
	padding-top: 0;
	border-bottom: 2px solid var(--oscuro);
	font-family: var(--titulo);
	font-size: 0.875rem;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--menos-oscuro);
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-number a {
	font-family: var(--titulo);
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--oscuro);
	text-decoration: none;
}

.woocommerce-account .woocommerce table.shop_table .woocommerce-orders-table__cell-order-actions {
	text-align: right;
}

.woocommerce-orders-table__cell-order-date {
	white-space: nowrap;
}

.woocommerce-orders-table__cell-order-status {
	font-family: var(--titulo);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 0.875rem;
}

/* Detalle de un presupuesto: sin importes (el precio sale del presupuesto
   que preparamos) y los datos del diseño de cada línea sin sangría. */
.woocommerce-account .woocommerce-table--order-details .product-total,
.woocommerce-account .woocommerce-table--order-details tfoot {
	display: none;
}

.woocommerce-account .woocommerce-table--order-details .product-name {
	width: 100%;
}

.woocommerce-account .woocommerce-table--order-details .product-name > a {
	font-family: var(--titulo);
	font-size: 1.125rem;
	font-weight: 500;
	text-transform: uppercase;
	color: var(--oscuro);
	text-decoration: none;
}

.woocommerce-account ul.wc-item-meta {
	margin: 0.5rem 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.875rem;
	color: var(--menos-oscuro);
}

.woocommerce-account ul.wc-item-meta li {
	margin: 0 0 0.2rem;
}

.woocommerce-account ul.wc-item-meta li p {
	display: inline;
	margin: 0;
}

.woocommerce-account ul.wc-item-meta .wc-item-meta-label {
	font-weight: 700;
	color: var(--oscuro);
}

/* Avisos (sin presupuestos, datos guardados): planos, con su botón. */
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-message {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 0 0 1.5rem;
	padding: 1rem 1.25rem;
	border: 0;
	border-left: 3px solid var(--principal);
	border-radius: 0;
	background: var(--mas-claro);
	color: var(--oscuro);
}

.woocommerce-account .woocommerce-info::before,
.woocommerce-account .woocommerce-message::before {
	display: none;
}

/* Direcciones: tarjetas planas con su enlace de editar. */
.woocommerce-account .woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 2rem;
}

.woocommerce-account .woocommerce-Addresses::before,
.woocommerce-account .woocommerce-Addresses::after {
	display: none;
}

/* Con una sola dirección (sin envíos) WooCommerce no pone el contenedor. */
.woocommerce-account .woocommerce-Address {
	float: none;
	width: auto;
	max-width: 520px;
	margin-top: 1.5rem;
	padding-top: 1rem;
	border-top: 2px solid var(--oscuro);
}

/* "Editar datos de contacto": como los enlaces de las tarjetas del resumen. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title a.edit {
	flex: none;
	font-family: var(--titulo);
	font-size: 0.9375rem;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--oscuro);
	text-decoration: none;
	border-bottom: 2px solid var(--principal);
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title a.edit:hover {
	color: var(--principal-oscuro);
}

.woocommerce-account .woocommerce-Address-title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
}

.woocommerce-account .woocommerce-Address-title::before,
.woocommerce-account .woocommerce-Address-title::after {
	display: none;
}

.woocommerce-account .woocommerce-Address-title h2 {
	margin: 0 0 0.75rem;
	font-size: 1.25rem;
}

.woocommerce-account .woocommerce-Address address {
	font-style: normal;
	line-height: 1.6;
}

/* ---------- Móvil ---------- */

@media (max-width: 781px) {
	.woocommerce-account .woocommerce:has(> .woocommerce-form-login) {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"avisos"
			"titulo"
			"form"
			"aside";
		grid-template-rows: none;
	}

	.c42k-acceso {
		margin-top: 2.5rem;
		padding: 1.75rem 1.25rem 2rem;
	}

	.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.5rem;
	}

	/* El menú, una fila deslizable. */
	.woocommerce-MyAccount-navigation {
		position: static;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.woocommerce-MyAccount-navigation ul {
		flex-direction: row;
		width: max-content;
	}

	.woocommerce-MyAccount-navigation a {
		white-space: nowrap;
		font-size: 0.9375rem;
	}

	.woocommerce-MyAccount-navigation-link--customer-logout {
		margin: 0 0 0 0.25rem;
		padding: 0 0 0 0.25rem;
		border-top: 0;
		border-left: 1px solid var(--linea);
	}

	.c42k-cuenta__tarjetas {
		grid-template-columns: minmax(0, 1fr);
	}

	.c42k-cuenta__siguiente {
		width: 100%;
		justify-content: center;
	}

	.woocommerce-account .woocommerce form .form-row-first,
	.woocommerce-account .woocommerce form .form-row-last {
		width: 100%;
	}

	.woocommerce-account .woocommerce table.shop_table_responsive tr td {
		padding-left: 0;
		padding-right: 0;
		background: transparent;
	}

	/* WooCommerce esconde en el móvil las cabeceras de fila: ahí va el número
	   del presupuesto, que es lo que lo identifica. */
	.woocommerce-account .woocommerce table.shop_table_responsive tbody th.woocommerce-orders-table__cell-order-number {
		display: block;
		padding: 1.25rem 0 0.25rem;
		border: 0;
	}

	.woocommerce-account .woocommerce table.shop_table_responsive tr td::before {
		font-family: var(--texto);
		font-size: 0.9375rem;
		font-weight: 700;
		text-transform: none;
	}
}