/* ==========================================================================
   Wizard Trees · WooCommerce
   --------------------------------------------------------------------------
   Capa que reviste el marcado que genera WooCommerce con los tokens del
   sistema. Se carga solo en paginas de tienda (ver inc/enqueue.php).

   Se estilan las clases de Woo directamente en lugar de sobrescribir sus
   plantillas: asi una actualizacion del plugin no deja plantillas obsoletas.
   ========================================================================== */

/* --- Envoltorio de tienda --------------------------------------------------- */

.wt-shop {
	padding-block: var(--wt-space-8) var(--wt-space-12);
}

/*
 * En el listado el aire de arriba ya lo pone la cabecera a sangre, que termina
 * justo encima. El nodo deja 16 hasta la barra de filtros y 72 por debajo de la
 * paginacion.
 */
.wt-shop--archive {
	padding-block: 16px 72px;
}

.wt-shop__layout {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: var(--wt-space-6);
	align-items: start;
}

.wt-shop__layout--full { grid-template-columns: minmax(0, 1fr); }

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

.wt-shop__head {
	margin-bottom: var(--wt-space-6);
}

.wt-shop__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wt-space-2);
	padding-block: var(--wt-space-2);
	border-block: 1px solid var(--wt-border);
	margin-bottom: var(--wt-space-5);
}

.woocommerce-result-count {
	margin: 0;
	color: var(--wt-text-3);
	font-size: var(--wt-size-caption);
}

.woocommerce-ordering select { width: auto; min-width: 220px; }

/* --- Rejilla de catalogo ------------------------------------------------------ */

.woocommerce ul.products,
ul.products {
	display: grid;
	/*
	 * 280 da exactamente las cuatro columnas del nodo sobre el contenedor de
	 * 1280: con 24 de medianil, cinco no caben (5x280 + 4x24 = 1496) y cuatro
	 * salen a 302, que es el ancho de la tarjeta en Figma. Y al no ser un
	 * numero fijo de columnas, se adapta solo si algun dia hay barra lateral.
	 */
	grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
	gap: var(--wt-gutter);
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }

/*
 * El <li> es solo el hueco: la tarjeta la pinta el theme entera (ver
 * wt_wc_render_card() en inc/woocommerce.php) y sus estilos estan en
 * components.css con el prefijo .wt-pcard.
 *
 * Aqui habia un marco, un fondo y un radio, de cuando el catalogo usaba el
 * marcado de WooCommerce con una imagen en 4:5. Si se dejaran, se verian dos
 * tarjetas, una dentro de otra.
 */
/*
 * El selector lleva .woocommerce delante por una razon concreta:
 * woocommerce-layout.css trae `.woocommerce ul.products li.product { width:
 * 22.05%; float: left }`, que pesa (0,3,2). Escrito como `ul.products
 * li.product` esto pesa (0,2,2) y PIERDE: cada tarjeta se quedaba en el 22 %
 * de su columna, o sea 67px de ancho dentro de un hueco de 303. Con el mismo
 * peso decide el orden, y nuestra hoja se encola despues de la del plugin.
 */
.woocommerce ul.products li.product,
ul.products li.product {
	position: relative;
	display: flex;
	margin: 0;
	width: auto;
	float: none;
	background: none;
	border: 0;
	padding: 0;
}

/* Distintivo de oferta */
span.onsale {
	position: absolute;
	top: var(--wt-space-2);
	left: var(--wt-space-2);
	z-index: 2;
	min-height: 0;
	min-width: 0;
	margin: 0;
	padding: 6px 11px;
	border: 1px solid rgba(177, 106, 255, .40);
	border-radius: var(--wt-radius-pill);
	background: rgba(177, 106, 255, .14);
	color: var(--wt-purple);
	font-family: var(--wt-font-mono);
	font-size: var(--wt-size-micro);
	font-weight: var(--wt-weight-bold);
	letter-spacing: var(--wt-track-chip);
	line-height: 1.5;
	text-transform: uppercase;
}

/* --- Ficha de producto ---------------------------------------------------------- */

.wt-shop--single {
	padding-block: 40px 0;
}

.wt-pdp__crumbs {
	margin-bottom: 14px;
}

/*
 * Dos columnas del nodo 24:57: galeria 620, hueco 56, resumen 604 sobre el
 * contenedor de 1280. En fracciones para que aguante cualquier ancho.
 *
 * La rejilla va en .wt-pdp__top y NO en div.product: dentro de div.product
 * tambien caen la ficha tecnica, las tiendas y los relacionados, que son bandas
 * a lo ancho y se meterian en la rejilla como si fueran columnas.
 */
.wt-pdp__top {
	display: grid;
	grid-template-columns: minmax(0, 620fr) minmax(0, 604fr);
	gap: 56px;
	align-items: start;
	padding-bottom: 72px;
}

@media (max-width: 900px) {
	.wt-pdp__top { grid-template-columns: minmax(0, 1fr); gap: var(--wt-space-5); padding-bottom: 48px; }
}

.single-product div.product .woocommerce-product-gallery {
	width: 100% !important;
	float: none !important;
	margin: 0;
}

.single-product div.product .woocommerce-product-gallery__image img {
	border-radius: var(--wt-radius-card);
}

.single-product div.product .summary {
	width: 100% !important;
	float: none !important;
	margin: 0;
}

/* --- Columna derecha, por encima de la caja de compra · nodo 24:80 ---------- */

.wt-pdp__family {
	margin: 0 0 14px;
	color: var(--wt-purple);
	font-family: var(--wt-font-mono);
	font-size: 12px;
	font-weight: var(--wt-weight-bold);
	letter-spacing: 2.4px;
	line-height: 1.5;
	text-transform: uppercase;
}

.wt-pdp__title {
	margin: 0;
	font-size: clamp(2rem, 3.4vw, 3rem);
	font-weight: var(--wt-weight-bold);
	line-height: 1.14;
	text-wrap: initial;
}

.wt-pdp__lineage {
	margin: 10px 0 0;
	color: var(--wt-text-2);
	font-family: var(--wt-font-mono);
	font-size: 16px;
	line-height: 1.5;
}

/* --- Fila de etiquetas arrastrable · nodo 24:80 ------------------------------
   Las etiquetas salen de los atributos del producto, y de esos hay los que
   haya: con cuatro ya se partia en dos lineas y empujaba la caja de compra
   hacia abajo. En una sola linea que se arrastra, la ficha no crece por muchos
   atributos que tenga el producto.

   .wt-drag es generico a proposito. Hoy solo lo usa esto; si aparece un segundo
   sitio, se muda a components.css tal cual.
   -------------------------------------------------------------------------- */

.wt-drag {
	--wt-fade-l: 0px;
	--wt-fade-r: 0px;

	flex-wrap: nowrap;
	overflow-x: auto;
	/* Que el gesto no acabe pasando a la pagina al llegar al final. */
	overscroll-behavior-x: contain;
	/* La barra se esconde: el aviso de que hay mas es el degradado del borde. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.wt-drag::-webkit-scrollbar { display: none; }

/* Sin esto los chips se encogen para caber en lugar de desbordar. */
.wt-drag > * { flex: 0 0 auto; }

/*
 * El degradado solo aparece por el lado donde queda contenido, y lo decide el
 * JS con is-more-start / is-more-end. Con la variable a 0 el corte es seco y no
 * se ve nada, asi que la misma regla vale para los cuatro estados.
 */
.wt-drag.is-scrollable {
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--wt-fade-l), #000 calc(100% - var(--wt-fade-r)), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 var(--wt-fade-l), #000 calc(100% - var(--wt-fade-r)), transparent 100%);
}

.wt-drag.is-more-start { --wt-fade-l: 36px; }
.wt-drag.is-more-end { --wt-fade-r: 36px; }

/* El cursor solo cambia si de verdad hay algo que arrastrar. */
.wt-drag.is-scrollable { cursor: grab; }
.wt-drag.is-dragging { cursor: grabbing; }

/* Al arrastrar, que no se seleccione el texto de las etiquetas. */
.wt-drag.is-dragging { user-select: none; }

.wt-drag:focus-visible {
	outline: var(--wt-focus-width) solid var(--wt-focus-color);
	outline-offset: var(--wt-focus-offset);
}

.wt-pdp__attrs {
	margin-top: 20px;
	gap: 8px;
	/* Sin esto, una fila larga estira la columna del resumen en lugar de
	   desbordar dentro de si misma. */
	min-width: 0;
}

.wt-pdp__rating {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 22px;
}

.wt-pdp__rating-text {
	color: var(--wt-text-3);
	font-family: var(--wt-font-mono);
	font-size: 13px;
	line-height: 1.5;
}

.wt-pdp__rating-text a { color: var(--wt-text-2); }

/* --- Caja de compra · nodo 24:106 ------------------------------------------- */

.wt-buybox {
	margin-top: 26px;
	padding: 24px;
	border: 1px solid var(--wt-border);
	border-radius: 20px;
	background: var(--wt-surface);
}

.wt-buybox__price {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--wt-space-2);
}

.wt-buybox__amount {
	margin: 0;
	color: var(--wt-text);
	font-family: var(--wt-font-display);
	font-size: 32px;
	font-weight: var(--wt-weight-bold);
	line-height: 1.15;
}

/* WooCommerce envuelve el importe y, en ofertas, mete <del> e <ins>. */
.wt-buybox__amount .woocommerce-Price-amount { font: inherit; }
.wt-buybox__amount del { margin-inline-end: 8px; color: var(--wt-text-3); font-size: 20px; font-weight: var(--wt-weight-reg); }
.wt-buybox__amount ins { color: var(--wt-purple); text-decoration: none; }

.wt-buybox__note {
	margin: 4px 0 0;
	color: var(--wt-text-3);
	font-family: var(--wt-font-mono);
	font-size: 13px;
	line-height: 1.5;
}

.wt-buybox__locator {
	margin-top: 12px;
}

.wt-buybox__trust {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

/* El punto morado del nodo 24:128, dibujado y no como archivo. */
.wt-buybox__trust-item {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding-left: 22px;
}

.wt-buybox__trust-item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 7px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wt-purple);
}

.wt-buybox__trust-title {
	color: var(--wt-text);
	font-family: var(--wt-font-display);
	font-size: 15px;
	font-weight: var(--wt-weight-reg);
	line-height: 1.4;
}

.wt-buybox__trust-note {
	color: var(--wt-text-3);
	font-family: var(--wt-font-mono);
	font-size: 12.5px;
	line-height: 1.4;
}

/* --- Modo de compra · nodo 36:2 ---------------------------------------------
   Hoy no se pinta (solo hay una opcion), pero los estilos se dejan puestos:
   el dia que se instale el plugin de suscripciones aparece ya con su forma. */

.wt-buymode {
	margin: 20px 0 0;
	padding: 0;
	border: 0;
}

.wt-buymode__option {
	border: 1px solid var(--wt-border);
	border-radius: 14px;
	background: var(--wt-bg);
}

.wt-buymode__option + .wt-buymode__option {
	margin-top: 10px;
}

.wt-buymode__option:has(.wt-buymode__input:checked) {
	border-color: var(--wt-purple);
	background: rgba(177, 106, 255, .08);
}

.wt-buymode__input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

.wt-buymode__label {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px;
	cursor: pointer;
}

/* El circulo del radio se dibuja en el ::before de la etiqueta porque el nativo
   no se puede pintar; el input real sigue ahi, invisible pero enfocable. */
.wt-buymode__label::before {
	content: "";
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	border: 1.5px solid var(--wt-border-contrast);
	border-radius: 50%;
}

.wt-buymode__input:checked + .wt-buymode__label::before {
	border-color: var(--wt-purple);
	border-width: 6px;
}

.wt-buymode__input:focus-visible + .wt-buymode__label::before {
	outline: 2px solid var(--wt-purple);
	outline-offset: 2px;
}

.wt-buymode__text {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

.wt-buymode__title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	color: var(--wt-text);
	font-family: var(--wt-font-display);
	font-size: 17px;
	font-weight: var(--wt-weight-bold);
	line-height: 1.3;
}

.wt-buymode__note {
	color: var(--wt-text-3);
	font-family: var(--wt-font-mono);
	font-size: 12.5px;
	line-height: 1.4;
}

.wt-buymode__price {
	flex: 0 0 auto;
	color: var(--wt-text);
	font-family: var(--wt-font-display);
	font-size: 17px;
	font-weight: var(--wt-weight-bold);
}

.wt-buymode__benefits {
	margin: 0;
	padding: 0 16px 16px 48px;
	list-style: none;
	color: var(--wt-text-2);
	font-family: var(--wt-font-mono);
	font-size: 13px;
	line-height: 1.5;
}

.wt-buymode__benefits li {
	position: relative;
	padding-left: 15px;
}

.wt-buymode__benefits li + li { margin-top: 8px; }

.wt-buymode__benefits li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 7px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wt-purple);
}

/* --- Barra de envio gratis · nodo 36:47 ------------------------------------- */

.wt-shipbar__box {
	margin-top: 20px;
	padding: 13px 15px;
	border: 1px solid var(--wt-border);
	border-radius: 14px;
	background: var(--wt-bg);
}

.wt-shipbar__box.is-reached {
	border-color: rgba(74, 222, 128, .4);
	background: rgba(74, 222, 128, .08);
}

.wt-shipbar__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wt-space-2);
	margin: 0 0 10px;
}

.wt-shipbar__label {
	color: var(--wt-text);
	font-family: var(--wt-font-mono);
	font-size: 13.5px;
	line-height: 1.5;
}

.wt-shipbar__box.is-reached .wt-shipbar__label { color: var(--wt-stock-in); }

.wt-shipbar__count {
	flex: 0 0 auto;
	color: var(--wt-text-3);
	font-family: var(--wt-font-mono);
	font-size: 12.5px;
	line-height: 1.5;
}

.wt-shipbar__track {
	height: 8px;
	border-radius: var(--wt-radius-pill);
	background: var(--wt-fill-subtle);
	overflow: hidden;
}

.wt-shipbar__fill {
	display: block;
	height: 100%;
	border-radius: var(--wt-radius-pill);
	background-image: var(--wt-grad-primary);
	transition: width 400ms var(--wt-ease);
}

.wt-shipbar__box.is-reached .wt-shipbar__fill {
	background-image: none;
	background-color: var(--wt-stock-in);
}

/* --- Descripcion bajo la caja · nodo 24:148 --------------------------------- */

.wt-pdp__desc {
	margin-top: 24px;
	color: var(--wt-text-2);
	font-family: var(--wt-font-mono);
	font-size: 14.5px;
	line-height: 1.75;
}

.wt-pdp__desc p { margin: 0 0 14px; }
.wt-pdp__desc p:last-child { margin-bottom: 0; }

/* Cantidad + anadir al carrito · nodo 24:115 */
.woocommerce div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 20px 0 0;
}

/*
 * WooCommerce le pone al formulario un clearfix con ::before y ::after.
 *
 * En un contenedor flexible esos dos pseudos NO son invisibles: son dos
 * elementos flexibles mas, de ancho cero, y cada uno se lleva su hueco de 12px.
 * El resultado eran 24px de menos repartidos a los lados, y la fila de cantidad
 * y boton salia mas estrecha que el boton de debajo y que el precio de arriba.
 *
 * El clearfix es de cuando esto era un diseno con floats. Aqui no limpia nada.
 */
.woocommerce div.product form.cart::before,
.woocommerce div.product form.cart::after {
	content: none;
}

/* El boton ocupa lo que sobre: en el nodo son 414 de 556 junto a una caja de
   cantidad de 130. */
.woocommerce div.product form.cart .single_add_to_cart_button {
	flex: 1 1 240px;
}

.wt-qty {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	height: 52px;
	border: 1px solid var(--wt-border);
	border-radius: var(--wt-radius-pill);
	background: var(--wt-raised);
	overflow: hidden;
}

.wt-qty__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	align-self: stretch;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wt-text-2);
	font-family: var(--wt-font-mono);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: color var(--wt-dur) var(--wt-ease);
}

.wt-qty__btn:hover { color: var(--wt-text); }

.wt-qty__btn:focus-visible {
	outline: 2px solid var(--wt-purple);
	outline-offset: -2px;
}

/* El contenedor .quantity lo pinta WooCommerce alrededor del campo; aqui es
   solo el hueco del numero. */
.wt-qty .quantity {
	display: inline-flex;
	align-items: center;
	margin: 0;
	border: 0;
	background: none;
}

.quantity input.qty {
	width: 46px;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--wt-text);
	font-family: var(--wt-font-display);
	font-size: 16px;
	text-align: center;
	/* Las flechitas del navegador sobran: ya hay dos botones. */
	appearance: textfield;
	-moz-appearance: textfield;
}

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

/* Variaciones */
.woocommerce div.product form.cart .variations {
	width: 100%;
	border: 0;
}

.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th {
	border: 0;
	padding: var(--wt-space-1) 0;
}

.woocommerce div.product form.cart .variations label {
	color: var(--wt-text-2);
	font-size: var(--wt-size-caption);
	text-transform: uppercase;
	letter-spacing: var(--wt-track-chip);
}

.reset_variations {
	font-size: var(--wt-size-caption);
}

/* Pestanas */
.woocommerce-tabs {
	grid-column: 1 / -1;
	margin-top: var(--wt-space-10);
	border-top: 1px solid var(--wt-border);
	padding-top: var(--wt-space-6);
}

.woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wt-space-1);
	margin: 0 0 var(--wt-space-5);
	padding: 0;
	list-style: none;
}

.woocommerce-tabs ul.tabs::before { content: none; }

.woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}

.woocommerce-tabs ul.tabs li a {
	display: inline-flex;
	align-items: center;
	min-height: var(--wt-tap-min);
	padding: 0 var(--wt-space-3);
	border: 1px solid var(--wt-border);
	border-radius: var(--wt-radius-pill);
	color: var(--wt-text-2);
	font-family: var(--wt-font-mono);
	font-size: var(--wt-size-caption);
	font-weight: var(--wt-weight-bold);
	letter-spacing: var(--wt-track-chip);
	text-decoration: none;
	text-transform: uppercase;
}

.woocommerce-tabs ul.tabs li.active a {
	border-color: transparent;
	background-image: var(--wt-grad-primary);
	color: var(--wt-text);
}

/* Productos relacionados / venta cruzada */
.related > h2,
.upsells > h2,
.cross-sells > h2 {
	grid-column: 1 / -1;
	margin-bottom: var(--wt-space-5);
}

.related,
.upsells {
	grid-column: 1 / -1;
	margin-top: var(--wt-space-10);
}

/* =============================================================================
   CARRITO · nodo 37:2
   =============================================================================

   Dos columnas de 832 + 420 con 28 de separacion, que es el contenedor de 1280.

   OJO CON LA HOJA DEL PLUGIN. En esta pagina se cargan tambien woocommerce.css
   y woocommerce-layout.css de WooCommerce, y traen dos cosas que hay que
   desactivar a mano:

     .cart-collaterals .cart_totals   flota a la derecha con width: 48%
     a.remove                         es un aspa roja circular de 1em

   Lo primero se gana por orden de cascada (esta hoja carga despues, con la
   misma especificidad). Lo segundo NO, porque el color lo pone con !important;
   ahi hace falta responder con otro, y es el unico de todo este archivo.
   ============================================================================= */

/* --- Cabecera de la pagina · nodo 37:58 ------------------------------------- */

.wt-cart-head {
	padding-block: 44px 26px;
}

.wt-cart-head__row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--wt-space-3);
	flex-wrap: wrap;
}

.wt-cart-head__title {
	margin: 0;
	font-size: 44px;
	font-weight: var(--wt-weight-bold);
	line-height: 1.1;
	letter-spacing: -1.2px;
}

.wt-cart-head__lead {
	margin: 10px 0 0;
	color: var(--wt-text-2);
	font-family: var(--wt-font-mono);
	font-size: 14px;
	line-height: 1.5;
}

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

.wt-cart {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 420px;
	align-items: start;
	gap: 28px;
	padding-block: 10px 72px;
	margin: 0;
}

.wt-cart__main,
.wt-cart__side {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

.wt-cart__lines {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* La hoja del plugin flota los totales y les da el 48% del ancho. */
.wt-cart .cart-collaterals,
.wt-cart .cart-collaterals .cart_totals,
.wt-cart .cart-collaterals .cross-sells {
	float: none;
	width: 100%;
	margin: 0;
}

.wt-cart .cart-collaterals::before,
.wt-cart .cart-collaterals::after { content: none; }

/* --- Barra de envio gratis · nodo 37:67 ------------------------------------- */

/* Es la MISMA pieza que la de la ficha (template-parts/product/shipping-bar.php).
   Aqui solo cambia de talla: en el carrito es una caja ancha y verde desde el
   primer euro, no un apunte bajo el boton de comprar.

   Sin metodo de envio gratuito configurado, la pieza se pinta vacia; con :has()
   se retira tambien el hueco que dejaria en la rejilla. */
.wt-cart__ship:not(:has(.wt-shipbar__box)) { display: none; }

.wt-cart__ship .wt-shipbar__box {
	margin-top: 0;
	padding: 20px 22px;
	border-color: rgba(74, 222, 128, .32);
	border-radius: 16px;
	background: rgba(74, 222, 128, .08);
}

.wt-cart__ship .wt-shipbar__head { margin-bottom: 12px; }

.wt-cart__ship .wt-shipbar__label {
	color: var(--wt-text);
	font-family: var(--wt-font-display);
	font-size: 16px;
	font-weight: var(--wt-weight-semi);
}

.wt-cart__ship .wt-shipbar__count {
	color: var(--wt-text-2);
	font-size: 13px;
}

.wt-cart__ship .wt-shipbar__track {
	height: 10px;
	background: rgba(255, 255, 255, .1);
}

.wt-cart__ship .wt-shipbar__fill {
	background-image: linear-gradient(90deg, var(--wt-stock-in) 0%, var(--wt-purple) 100%);
}

/* --- Linea · nodo 37:76 ----------------------------------------------------- */

.wt-cline {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	padding: 20px 22px 20px 20px;
	border: 1px solid var(--wt-border);
	border-radius: 16px;
	background: var(--wt-surface);
}

.wt-cline__media {
	flex: 0 0 110px;
	width: 110px;
	height: 110px;
	border-radius: 12px;
	background: var(--wt-bg);
	overflow: hidden;
}

.wt-cline__media a { display: block; height: 100%; }

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

.wt-cline__info {
	flex: 1 1 auto;
	min-width: 0;
}

.wt-cline__title {
	margin: 0;
	font-size: 18px;
	font-weight: var(--wt-weight-bold);
	line-height: 1.2;
}

.wt-cline__title a {
	color: inherit;
	text-decoration: none;
}

.wt-cline__title a:hover,
.wt-cline__title a:focus-visible { color: var(--wt-purple); }

.wt-cline__meta {
	margin: 5px 0 0;
	color: var(--wt-text-3);
	font-family: var(--wt-font-mono);
	font-size: 12.5px;
	line-height: 1.5;
}

/* Variaciones y metadatos que pinta wc_get_formatted_cart_item_data(). */
.wt-cline .variation {
	margin: 6px 0 0;
	color: var(--wt-text-3);
	font-family: var(--wt-font-mono);
	font-size: 12.5px;
}

.wt-cline .variation dt,
.wt-cline .variation dd { display: inline; margin: 0; }
.wt-cline .variation dd { margin-right: 10px; }

.wt-cline .backorder_notification {
	margin: 6px 0 0;
	color: var(--wt-stock-low);
	font-family: var(--wt-font-mono);
	font-size: 12px;
}

.wt-cline__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
	margin-top: 16px;
}

.wt-cline__link {
	color: var(--wt-text-3);
	font-family: var(--wt-font-mono);
	font-size: 12px;
	line-height: 1.5;
	text-decoration: none;
	transition: color var(--wt-dur) var(--wt-ease);
}

.wt-cline__link:hover,
.wt-cline__link:focus-visible { color: var(--wt-text); }

/* El aspa roja del plugin. Ver el aviso de la cabecera de esta seccion: el
   color viene con !important y no hay otra forma de ganarlo. */
.wt-cline .product-remove { display: inline-flex; }

.wt-cline .product-remove a.remove {
	display: inline;
	width: auto;
	height: auto;
	border-radius: 0;
	background: none;
	font-size: 12px;
	font-weight: var(--wt-weight-reg);
	line-height: 1.5;
	color: var(--wt-text-3) !important;
}

.wt-cline .product-remove a.remove:hover {
	background: none;
	color: var(--wt-text) !important;
}

/* Selector de cantidad pequeño: 112x44 en el nodo, frente a los 52 de alto de
   la ficha. La pieza base esta mas arriba, en la seccion de la ficha. */
.wt-qty--sm { height: 44px; }
.wt-qty--sm .wt-qty__btn { width: 34px; font-size: 17px; }

/* Tres clases y un tipo, no dos: la hoja del plugin trae
   `.woocommerce .quantity .qty { width: 3.631em }`, que gana a la regla general
   del theme y deja la caja en 121 en lugar de los 112 del nodo. */
.wt-qty--sm .quantity input.qty { width: 42px; font-size: 14px; }

.wt-cline__price {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
	text-align: right;
}

.wt-cline__amount {
	color: var(--wt-text);
	font-family: var(--wt-font-display);
	font-size: 22px;
	font-weight: var(--wt-weight-bold);
	line-height: 1.1;
}

.wt-cline__unit {
	color: var(--wt-text-3);
	font-family: var(--wt-font-mono);
	font-size: 11px;
	line-height: 1.5;
}

/* --- Boton de actualizar ---------------------------------------------------- */

.wt-cart__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* Con JavaScript, theme.js lo pulsa solo al cambiar una cantidad. Sin el, el
   boton se queda a la vista porque si no no habria forma de guardar el cambio. */
.wt-cart-page.is-live .wt-cart__update { display: none; }

/* --- Sugerencias · nodo 37:162 ---------------------------------------------- */

.wt-csuggest {
	padding: 22px;
	border: 1px solid var(--wt-border);
	border-radius: 16px;
	background: var(--wt-raised);
}

.wt-csuggest__title {
	margin: 0;
	font-size: 18px;
	font-weight: var(--wt-weight-bold);
	line-height: 1.2;
}

.wt-csuggest__note {
	margin: 4px 0 0;
	color: var(--wt-text-3);
	font-family: var(--wt-font-mono);
	font-size: 12.5px;
	line-height: 1.5;
}

.wt-csuggest__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

.wt-csug {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px 12px 12px;
	border: 1px solid var(--wt-border);
	border-radius: 14px;
	background: var(--wt-bg);
}

.wt-csug__media {
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	border-radius: 10px;
	overflow: hidden;
}

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

.wt-csug__body {
	flex: 1 1 auto;
	min-width: 0;
}

.wt-csug__title {
	margin: 0;
	font-size: 14px;
	font-weight: var(--wt-weight-bold);
	line-height: 1.2;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wt-csug__title a { color: inherit; text-decoration: none; }
.wt-csug__title a:hover { color: var(--wt-purple); }

.wt-csug__meta {
	margin: 3px 0 0;
	color: var(--wt-text-3);
	font-family: var(--wt-font-mono);
	font-size: 11px;
	line-height: 1.5;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wt-csug__price {
	margin: 3px 0 0;
	color: var(--wt-text);
	font-family: var(--wt-font-mono);
	font-size: 12.5px;
	font-weight: var(--wt-weight-med);
	line-height: 1.5;
}

.wt-csug__price .amount { color: inherit; }

.wt-csug__add {
	flex: 0 0 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--wt-radius-pill);
	background-image: var(--wt-grad-primary);
	color: var(--wt-text);
	font-family: var(--wt-font-display);
	font-size: 20px;
	font-weight: var(--wt-weight-bold);
	line-height: 1;
	text-decoration: none;
	transition: filter var(--wt-dur) var(--wt-ease);
}

.wt-csug__add:hover,
.wt-csug__add:focus-visible { filter: brightness(1.12); color: var(--wt-text); }

/* --- Guardados para despues ------------------------------------------------- */

/* No esta en el nodo: ver template-parts/cart/saved.php. */
.wt-csaved {
	padding: 22px;
	border: 1px solid var(--wt-border);
	border-radius: 16px;
	background: var(--wt-surface);
}

.wt-csaved__title {
	margin: 0 0 14px;
	font-size: 16px;
	font-weight: var(--wt-weight-bold);
	line-height: 1.2;
}

.wt-csaved__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wt-csaved__item {
	display: flex;
	align-items: center;
	gap: 14px;
}

.wt-csaved__media {
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	border-radius: 10px;
	background: var(--wt-bg);
	overflow: hidden;
}

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

.wt-csaved__body { flex: 1 1 auto; min-width: 0; }

.wt-csaved__name {
	margin: 0;
	font-family: var(--wt-font-display);
	font-size: 14px;
	font-weight: var(--wt-weight-bold);
	line-height: 1.2;
}

.wt-csaved__name a { color: inherit; text-decoration: none; }
.wt-csaved__name a:hover { color: var(--wt-purple); }

.wt-csaved__price {
	margin: 3px 0 0;
	color: var(--wt-text-3);
	font-family: var(--wt-font-mono);
	font-size: 12px;
}

.wt-csaved__actions {
	flex: 0 0 auto;
	display: flex;
	gap: 14px;
	margin: 0;
}

/* --- Resumen del pedido · nodo 37:197 --------------------------------------- */

.wt-sum {
	padding: 24px;
	border: 1px solid var(--wt-border);
	border-radius: 18px;
	background: var(--wt-surface);
}

.wt-sum__title {
	margin: 0 0 20px;
	font-size: 20px;
	font-weight: var(--wt-weight-bold);
	line-height: 1.2;
	letter-spacing: -.3px;
}

.wt-sum__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wt-space-2);
	padding-block: 7px;
	font-family: var(--wt-font-mono);
	font-size: 13.5px;
	line-height: 1.5;
}

.wt-sum__row--stack {
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

.wt-sum__label { color: var(--wt-text-2); }

.wt-sum__value {
	color: var(--wt-text);
	font-weight: var(--wt-weight-med);
	text-align: right;
}

.wt-sum__row--stack .wt-sum__value { text-align: left; width: 100%; }

.wt-sum__value .amount,
.wt-sum__value bdi { color: inherit; }

/* Descuentos en verde, como el ahorro del nodo. */
.wt-sum__row--save .wt-sum__label,
.wt-sum__row--save .wt-sum__value,
.wt-sum__row--save .amount { color: var(--wt-stock-in); }

.wt-sum .woocommerce-remove-coupon {
	margin-left: 8px;
	color: var(--wt-text-3);
	font-size: 11px;
}

/* Metodos de envio dentro del resumen. */
.wt-sum .woocommerce-shipping-methods {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 100%;
}

.wt-sum .woocommerce-shipping-methods li {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-block: 3px;
}

.wt-sum .woocommerce-shipping-methods label {
	color: var(--wt-text);
	font-family: var(--wt-font-mono);
	font-size: 13px;
	font-weight: var(--wt-weight-med);
}

.wt-sum .woocommerce-shipping-destination,
.wt-sum .woocommerce-shipping-contents {
	margin: 6px 0 0;
	color: var(--wt-text-3);
	font-size: 11.5px;
	line-height: 1.5;
}

.wt-sum .shipping-calculator-button {
	color: var(--wt-purple);
	font-size: 11.5px;
}

.wt-sum__total {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wt-space-2);
	margin-top: 10px;
	padding-top: 14px;
	border-top: 1px solid var(--wt-border);
}

.wt-sum__total-label strong {
	display: block;
	font-family: var(--wt-font-display);
	font-size: 18px;
	font-weight: var(--wt-weight-bold);
	line-height: 1.5;
}

.wt-sum__total-label small {
	display: block;
	margin-top: 3px;
	color: var(--wt-text-3);
	font-family: var(--wt-font-mono);
	font-size: 11px;
	line-height: 1.5;
}

.wt-sum__total-value {
	color: var(--wt-text);
	font-family: var(--wt-font-display);
	font-size: 30px;
	font-weight: var(--wt-weight-bold);
	line-height: 1.05;
	letter-spacing: -.6px;
	text-align: right;
}

.wt-sum__total-value .amount,
.wt-sum__total-value bdi,
.wt-sum__total-value strong { color: inherit; font-weight: inherit; }

.wt-sum .wc-proceed-to-checkout { margin-top: 20px; padding: 0; }

.woocommerce .wt-sum .checkout-button {
	display: flex;
	width: 100%;
	padding: 18px 34px;
	font-size: 15px;
}

/* Sellos de pasarela. No son los logos del nodo: son las pasarelas activas.
   Ver wt_get_cart_payment_badges(). */
.wt-sum__pay {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.wt-sum__pay li {
	padding: 7px 10px;
	border-radius: 7px;
	background: rgba(255, 255, 255, .07);
	color: var(--wt-text-2);
	font-family: var(--wt-font-mono);
	font-size: 10.5px;
	font-weight: var(--wt-weight-med);
	line-height: 1.5;
}

.wt-sum__coupon {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 16px;
}

.woocommerce .wt-sum__code,
.wt-sum__code {
	flex: 1 1 auto;
	min-width: 0;
	padding: 13px 16px;
	border: 1px solid var(--wt-border);
	border-radius: var(--wt-radius-pill);
	background: var(--wt-fill-subtle);
	color: var(--wt-text);
	font-family: var(--wt-font-mono);
	font-size: 12.5px;
	line-height: 1.5;
}

.wt-sum__code::placeholder { color: var(--wt-text-3); }

.wt-sum__code:focus-visible {
	outline: var(--wt-focus-width) solid var(--wt-focus-color);
	outline-offset: 1px;
}

/* --- Caja de confianza · nodo 37:241 ---------------------------------------- */

.wt-ctrust {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 20px 22px;
	border: 1px solid var(--wt-border);
	border-radius: 16px;
	background: var(--wt-raised);
	list-style: none;
}

.wt-ctrust__item {
	position: relative;
	padding-left: 16px;
}

.wt-ctrust__item::before {
	content: "";
	position: absolute;
	top: 7px;
	left: 0;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wt-purple);
}

.wt-ctrust__title {
	display: block;
	color: var(--wt-text);
	font-family: var(--wt-font-mono);
	font-size: 13px;
	font-weight: var(--wt-weight-med);
	line-height: 1.5;
}

.wt-ctrust__note {
	display: block;
	margin-top: 2px;
	color: var(--wt-text-3);
	font-family: var(--wt-font-mono);
	font-size: 11.5px;
	line-height: 1.5;
}

/* --- Caja del Club · nodo 37:262 -------------------------------------------- */

/* Apagada hasta que haya suscripciones. Ver wt_get_cart_club(). */
.wt-cclub {
	padding: 20px 22px;
	border: 1px solid rgba(95, 37, 159, .5);
	border-radius: 16px;
	background: rgba(95, 37, 159, .16);
}

.wt-cclub__title {
	margin: 0;
	font-family: var(--wt-font-display);
	font-size: 16px;
	font-weight: var(--wt-weight-semi);
	line-height: 1.5;
}

.wt-cclub__text {
	margin: 10px 0 0;
	color: var(--wt-text-2);
	font-family: var(--wt-font-mono);
	font-size: 12.5px;
	line-height: 1.6;
}

.wt-cclub .wt-btn { margin-top: 10px; }

/* --- Carrito vacio ---------------------------------------------------------- */

.wt-cart-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wt-space-2);
	padding-block: var(--wt-space-12);
	text-align: center;
}

.wt-cart-empty__title {
	margin: 0;
	font-family: var(--wt-font-display);
	font-size: 24px;
	font-weight: var(--wt-weight-bold);
}

.wt-cart-empty__text {
	margin: 0;
	color: var(--wt-text-3);
	font-family: var(--wt-font-mono);
	font-size: 14px;
}

.wt-cart-empty .return-to-shop { margin: var(--wt-space-2) 0 0; }

.wt-cart--empty { display: block; padding-block: 0 72px; }

/* --- Tablas sueltas de la tienda -------------------------------------------- */

/* Las sigue usando el resumen del pedido de la caja y las de Mi cuenta. */
.woocommerce table.shop_table {
	border: 1px solid var(--wt-border);
	border-radius: var(--wt-radius-card);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	border-color: var(--wt-border);
	padding: var(--wt-space-2);
}

.woocommerce-checkout-review-order {
	padding: var(--wt-space-4);
	background: var(--wt-surface);
	border: 1px solid var(--wt-border);
	border-radius: var(--wt-radius-card);
}

/* --- Finalizar compra --------------------------------------------------------------- */

/*
 * Aqui vivia esto, de cuando el checkout todavia era el de bloques:
 *
 *   .woocommerce-checkout .col2-set { display: grid;
 *     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
 *     gap: var(--wt-space-6); }
 *
 * Retirado el 2026-09-17. Lo cubre entero el bloque del final del archivo,
 * donde `.wt-co .col2-set.wt-co__fields` apila los datos de facturacion y
 * envio en una sola columna.
 *
 * No era inofensivo: convertia .col2-set en rejilla, y los dos pseudos del
 * clearfix que WooCommerce le pone (`content: " "`) pasaban a ser ITEMS de esa
 * rejilla. El ::before ocupaba la primera celda y empujaba la facturacion a la
 * segunda columna. Los 48px de hueco que se veian entre medias eran este
 * `--wt-space-6`.
 */

.woocommerce form .form-row {
	display: flex;
	flex-direction: column;
	gap: var(--wt-space-1);
	margin-bottom: var(--wt-space-3);
	padding: 0;
}

.woocommerce form .form-row label { font-size: var(--wt-size-caption); }

.woocommerce .select2-container--default .select2-selection--single {
	min-height: var(--wt-control-min);
	background: var(--wt-raised);
	border: 1px solid var(--wt-border);
	border-radius: var(--wt-radius-card);
	display: flex;
	align-items: center;
}

.woocommerce .select2-container--default .select2-selection--single
	.select2-selection__rendered { color: var(--wt-text); line-height: 1.5; }

#payment {
	background: var(--wt-surface);
	border: 1px solid var(--wt-border);
	border-radius: var(--wt-radius-card);
	padding: var(--wt-space-3);
}

#payment ul.payment_methods {
	margin: 0 0 var(--wt-space-3);
	padding: 0;
	border-bottom: 1px solid var(--wt-border);
	list-style: none;
}

#payment div.payment_box {
	background: var(--wt-raised);
	border-radius: var(--wt-radius-card);
	color: var(--wt-text-2);
	font-size: var(--wt-size-caption);
}

#payment div.payment_box::before { content: none; }

/* --- Mi cuenta ------------------------------------------------------------------------
 *
 * Tampoco tiene nodo en Figma. Mismo criterio que el checkout: la cabecera es
 * la banda del carrito, los campos son los MISMOS que los del checkout (ver el
 * bloque compartido `:is(.wt-co, .wt-acc)` mas abajo) y las cajas son las del
 * sistema. Lo unico propio de esta pagina es la rejilla con el menu lateral.
 *
 * A diferencia del carrito y del checkout, aqui NO hay ninguna sobrescritura de
 * plantilla: todo sale con CSS y con el hook `woocommerce_account_dashboard`.
 * Las plantillas de myaccount son de las que mas toca WooCommerce —form-login
 * va por la 9.9.0— y no compensa congelarlas para poner un borde.
 * ------------------------------------------------------------------------------------- */

.wt-account-page { padding-bottom: 96px; }

/* La rejilla tiene que ir sobre el <div class="woocommerce"> que envuelve el
   shortcode. Ese div lo pinta el plugin y no admite clases del theme, asi que
   se le llega desde .wt-acc, que si es nuestra.

   Se filtra con :has() porque esa MISMA envoltura sirve tambien la pantalla de
   acceso, que no tiene menu: sin el filtro, el formulario de login se quedaria
   metido en una columna de 250px. */
.wt-acc .woocommerce:has(.woocommerce-MyAccount-navigation) {
	display: grid;
	grid-template-columns: 250px minmax(0, 1fr);
	align-items: start;
	gap: 32px;
	padding-block: 10px 0;
}

.wt-acc .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }

/* --- Menu lateral ----------------------------------------------------------- */

/* El plugin lo saca con `float: left; width: 30%`. En una rejilla el float no
   pinta nada, pero el 30% si: dejaria el menu a 75px. */
.woocommerce-account .wt-acc .woocommerce-MyAccount-navigation {
	float: none;
	width: auto;
	padding: 10px;
	border: 1px solid var(--wt-border);
	border-radius: 18px;
	background: var(--wt-surface);
}

.woocommerce-account .wt-acc .woocommerce-MyAccount-content {
	float: none;
	width: auto;
	min-width: 0;
}

.wt-acc .woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wt-acc .woocommerce-MyAccount-navigation li + li { margin-top: 2px; }

.wt-acc .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 11px 14px;
	border-radius: 12px;
	color: var(--wt-text-2);
	font-family: var(--wt-font-mono);
	font-size: 12.5px;
	line-height: 1.4;
	letter-spacing: var(--wt-track-chip);
	text-transform: uppercase;
	text-decoration: none;
	transition: background var(--wt-dur) var(--wt-ease), color var(--wt-dur) var(--wt-ease);
}

.wt-acc .woocommerce-MyAccount-navigation li a:hover,
.wt-acc .woocommerce-MyAccount-navigation li a:focus-visible {
	background: var(--wt-fill-subtle);
	color: var(--wt-text);
}

.wt-acc .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--wt-purple);
	color: #fff;
}

/* Cerrar sesion se separa con una regla: no es una seccion mas del panel, es
   una salida, y conviene que no se pulse por inercia al bajar la lista. */
.wt-acc .woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--wt-border);
}

.wt-acc .woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--wt-text-3); }

/* --- Contenido -------------------------------------------------------------- */

.wt-acc .woocommerce-MyAccount-content > p {
	margin: 0 0 14px;
	color: var(--wt-text-2);
	line-height: var(--wt-lh-prose);
}

.wt-acc .woocommerce-MyAccount-content > p a { color: var(--wt-purple); }

.wt-acc .woocommerce-MyAccount-content h2,
.wt-acc .woocommerce-MyAccount-content h3 {
	margin: 0 0 16px;
	font-family: var(--wt-font-display);
	font-size: 20px;
	font-weight: var(--wt-weight-bold);
	line-height: 1.2;
	letter-spacing: -.3px;
}

/* Atajos del panel · los pinta wt_account_dashboard_cards() */

.wt-acccards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 14px;
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
}

.wt-acccard {
	display: flex;
	flex-direction: column;
	gap: 6px;
	height: 100%;
	padding: 18px 20px;
	border: 1px solid var(--wt-border);
	border-radius: 16px;
	background: var(--wt-surface);
	text-decoration: none;
	transition: border-color var(--wt-dur) var(--wt-ease), background var(--wt-dur) var(--wt-ease);
}

.wt-acccard:hover,
.wt-acccard:focus-visible {
	border-color: var(--wt-purple);
	background: var(--wt-raised);
}

.wt-acccard__title {
	color: var(--wt-text);
	font-size: 15px;
	font-weight: var(--wt-weight-med);
	line-height: 1.3;
}

.wt-acccard__note {
	color: var(--wt-text-3);
	font-family: var(--wt-font-mono);
	font-size: 11.5px;
	line-height: 1.5;
}

/* --- Tablas de pedidos y descargas ------------------------------------------ */

.wt-acc table.shop_table {
	width: 100%;
	margin: 0;
	border: 1px solid var(--wt-border);
	border-radius: 18px;
	background: var(--wt-surface);
}

.wt-acc table.shop_table th,
.wt-acc table.shop_table td {
	padding: 14px 18px;
	border: 0;
	border-bottom: 1px solid var(--wt-border);
	font-family: var(--wt-font-mono);
	font-size: 13px;
	line-height: 1.5;
	text-align: left;
	vertical-align: middle;
}

.wt-acc table.shop_table thead th {
	color: var(--wt-text-3);
	font-size: 11px;
	font-weight: var(--wt-weight-med);
	letter-spacing: var(--wt-track-chip);
	text-transform: uppercase;
}

.wt-acc table.shop_table tbody tr:last-child td { border-bottom: 0; }

.wt-acc table.shop_table tfoot tr:last-child th,
.wt-acc table.shop_table tfoot tr:last-child td {
	border-bottom: 0;
	font-size: 15px;
	font-weight: var(--wt-weight-bold);
}

.wt-acc table.shop_table .woocommerce-orders-table__cell-order-actions,
.wt-acc table.shop_table td:last-child { text-align: right; }

.wt-acc table.shop_table .button {
	min-height: 0;
	padding: 8px 16px;
	font-size: 11.5px;
}

/* --- Direcciones ------------------------------------------------------------ */

/* .woocommerce-Addresses lleva tambien .col2-set, con sus dos pseudos de
   clearfix y sus columnas flotadas al 48%. Los pseudos se apagan ANTES de
   convertirlo en rejilla, por lo mismo que en el checkout. */
.wt-acc .woocommerce-Addresses::before,
.wt-acc .woocommerce-Addresses::after { content: none; }

.wt-acc .woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 18px;
}

.wt-acc .woocommerce-Addresses .col-1,
.wt-acc .woocommerce-Addresses .col-2 {
	float: none;
	width: auto;
}

.wt-acc .woocommerce-Address {
	padding: 22px;
	border: 1px solid var(--wt-border);
	border-radius: 18px;
	background: var(--wt-surface);
}

.wt-acc .woocommerce-Address-title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}

.wt-acc .woocommerce-Address-title h2 {
	margin: 0;
	font-size: 17px;
}

.wt-acc .woocommerce-Address-title .edit {
	flex: 0 0 auto;
	color: var(--wt-purple);
	font-family: var(--wt-font-mono);
	font-size: 11.5px;
	letter-spacing: var(--wt-track-chip);
	text-transform: uppercase;
}

.wt-acc .woocommerce-Address address {
	margin: 0;
	color: var(--wt-text-2);
	font-family: var(--wt-font-mono);
	font-size: 13px;
	font-style: normal;
	line-height: 1.7;
}

/* --- Editar direccion y editar cuenta --------------------------------------- */

.wt-acc .woocommerce-address-fields__field-wrapper,
.wt-acc form.woocommerce-EditAccountForm {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 16px;
}

.wt-acc form.woocommerce-EditAccountForm fieldset {
	grid-column: 1 / -1;
	margin: 8px 0 18px;
	padding: 22px;
	border: 1px solid var(--wt-border);
	border-radius: 18px;
	background: var(--wt-surface);
}

.wt-acc form.woocommerce-EditAccountForm legend {
	margin-bottom: 16px;
	padding: 0;
	font-family: var(--wt-font-display);
	font-size: 17px;
	font-weight: var(--wt-weight-bold);
	letter-spacing: -.2px;
}

.wt-acc form.woocommerce-EditAccountForm fieldset .form-row:last-child { margin-bottom: 0; }

.wt-acc #account_display_name_description em,
.wt-acc .woocommerce-address-fields p em {
	color: var(--wt-text-3);
	font-family: var(--wt-font-mono);
	font-size: 11.5px;
	font-style: normal;
	line-height: 1.5;
}

/* --- Pantalla de acceso ----------------------------------------------------- */

/* Sin menu, asi que no es la rejilla de dos columnas: es una tarjeta centrada.
   El :not() es el reverso exacto del :has() de la rejilla, para que las dos
   caras de la pagina no se pisen. Centrada y no a la izquierda por el mismo
   criterio que el carrito vacio: poco contenido en una pagina ancha se centra.

   LA TARJETA ES EL ENVOLTORIO, no el formulario. WooCommerce pinta el titular
   «Login» y los avisos FUERA del <form>, asi que si la caja fuera el formulario
   el titulo quedaria flotando encima y un error de contrasena saldria suelto
   sobre el fondo. Poniendo el borde en el envoltorio, titulo, avisos y campos
   caen dentro de la misma caja sin tener que sobrescribir form-login.php. */
.wt-acc .woocommerce:not(:has(.woocommerce-MyAccount-navigation)) {
	max-width: 440px;
	margin: 12px auto 0;
	padding: 32px;
	border: 1px solid var(--wt-border);
	border-radius: 20px;
	background: var(--wt-surface);
}

.wt-acc .woocommerce:not(:has(.woocommerce-MyAccount-navigation)) > h2 {
	margin: 0 0 22px;
	font-family: var(--wt-font-display);
	font-size: 24px;
	font-weight: var(--wt-weight-bold);
	line-height: 1.2;
	letter-spacing: -.4px;
}

/*
 * El formulario va desnudo: la caja ya la pone el envoltorio.
 *
 * Hace falta `.wt-acc .woocommerce form.login` —tres clases y un elemento—
 * porque WooCommerce le pone marco, 20px de relleno, 5px de radio y 2em de
 * margen a estos formularios con:
 *
 *   .woocommerce form.checkout_coupon,
 *   .woocommerce form.login,
 *   .woocommerce form.register { border: 1px solid ...; padding: 20px; ... }
 *
 * que pesa (0,2,1). Con un selector de clase suelta no se le gana, y el
 * resultado era una caja dentro de otra caja.
 */
.wt-acc .woocommerce form.login,
.wt-acc .woocommerce form.register,
.wt-acc .woocommerce form.lost_reset_password {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

/*
 * El mismo bloque del plugin alcanza al cupon del checkout, que es
 * `form.checkout_coupon`. Ahi tambien sobra el marco gris, y sobre todo los
 * 2em de margen arriba y abajo, que separaban el desplegable del boton que
 * acababa de abrirlo.
 */
.wt-checkout-page .woocommerce form.checkout_coupon {
	margin: 0 0 20px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

/* El texto de instrucciones de «he perdido la contrasena». */
.wt-acc .woocommerce-ResetPassword > p:first-child {
	margin: 0 0 20px;
	color: var(--wt-text-2);
	font-family: var(--wt-font-mono);
	font-size: 13px;
	line-height: 1.6;
}

/* Los avisos viven dentro de la tarjeta y no deben abrir hueco cuando no hay
   ninguno: el envoltorio de WooCommerce se pinta siempre, vacio o no. */
.wt-acc .woocommerce-notices-wrapper:empty { display: none; }

.wt-acc .woocommerce-notices-wrapper > * { margin-bottom: 18px; }

/* `label.` y no `label` a secas: el bloque compartido de campos define
   `:is(.wt-co, .wt-acc) .form-row label` en MAYUSCULAS de mono, vive mas abajo
   en este mismo archivo y con la misma especificidad ganaria por orden. Esto no
   es una etiqueta de campo, es el texto de una casilla, y va en redonda. */
.wt-acc .form-row label.woocommerce-form-login__rememberme {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 6px;
	color: var(--wt-text-2);
	font-family: inherit;
	font-size: 13px;
	letter-spacing: 0;
	text-transform: none;
}

/* `.wt-acc .woocommerce` y no al reves: ver la nota del bloque compartido de
   campos. Aqui el gancho del theme envuelve al div del plugin. */
.wt-acc .woocommerce button.woocommerce-form-login__submit,
.wt-acc .woocommerce button.woocommerce-form-register__submit {
	display: flex;
	width: 100%;
	margin: 8px 0 0;
	padding: 16px 30px;
	float: none;
}

.wt-acc .woocommerce-LostPassword {
	margin: 16px 0 0;
	font-family: var(--wt-font-mono);
	font-size: 12px;
	text-align: center;
}

.wt-acc .woocommerce-LostPassword a { color: var(--wt-text-3); }

/* Si se activa el registro, form-login.php envuelve las dos mitades en un
   .col2-set con sus floats. Misma receta: apagar los pseudos y repartir. */
.wt-acc #customer_login.col2-set::before,
.wt-acc #customer_login.col2-set::after { content: none; }

.wt-acc #customer_login.col2-set {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 24px;
}

.wt-acc #customer_login.col2-set .col-1,
.wt-acc #customer_login.col2-set .col-2 {
	float: none;
	width: auto;
}

/* Con el registro activo hay DOS formularios, y entonces la tarjeta deja de ser
   el envoltorio y pasa a ser cada columna: una caja con las dos dentro seria
   una caja con dos titulares. El envoltorio solo ensancha y se queda liso. */
.wt-acc .woocommerce:not(:has(.woocommerce-MyAccount-navigation)):has(#customer_login) {
	max-width: 900px;
	padding: 0;
	border: 0;
	background: none;
}

.wt-acc #customer_login.col2-set > div {
	padding: 32px;
	border: 1px solid var(--wt-border);
	border-radius: 20px;
	background: var(--wt-surface);
}

.wt-acc #customer_login.col2-set > div > h2 {
	margin: 0 0 22px;
	font-family: var(--wt-font-display);
	font-size: 24px;
	font-weight: var(--wt-weight-bold);
	line-height: 1.2;
	letter-spacing: -.4px;
}

/* --- Mi cuenta en pantallas estrechas --------------------------------------- */

@media (max-width: 860px) {
	.wt-acc .woocommerce:has(.woocommerce-MyAccount-navigation) {
		grid-template-columns: minmax(0, 1fr);
		gap: 22px;
	}

	.wt-account-page { padding-bottom: 64px; }

	/* El menu pasa a fila desplazable: apilado se comia la primera pantalla
	   entera antes de llegar al contenido. Reutiliza el componente de arrastre
	   de las etiquetas de la ficha. */
	.wt-acc .woocommerce-MyAccount-navigation ul {
		display: flex;
		flex-wrap: nowrap;
		gap: 6px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
	}

	.wt-acc .woocommerce-MyAccount-navigation ul::-webkit-scrollbar { display: none; }

	.wt-acc .woocommerce-MyAccount-navigation li { flex: 0 0 auto; }

	.wt-acc .woocommerce-MyAccount-navigation li + li { margin-top: 0; }

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

	/* 32px de relleno dentro de una tarjeta de 335 dejaban los campos en 269.
	   En movil el marco pesa menos y el campo, mas. */
	.wt-acc .woocommerce:not(:has(.woocommerce-MyAccount-navigation)) { padding: 22px; }

	.wt-acc #customer_login.col2-set > div { padding: 22px; }
}

/* --- Avisos de Woo --------------------------------------------------------------------- */

/*
 * Un marco entero y del mismo grosor, sin canto de color.
 *
 * Antes el borde izquierdo iba a 3px y cambiaba de color segun el tipo: verde
 * el de «anadido al carrito», morado el informativo, rojo el de error. Sobre el
 * marco morado del sistema, ese canto verde se leia como un fallo de maqueta y
 * no como una senal. Se quita.
 *
 * El error si se distingue, porque ahi la senal importa: es el unico caso en el
 * que alguien tiene que hacer algo.
 */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	padding: var(--wt-space-2) var(--wt-space-3);
	background: var(--wt-raised);
	border: 1px solid var(--wt-border);
	border-radius: var(--wt-radius-card);
	color: var(--wt-text);
	font-size: var(--wt-size-caption);
	list-style: none;
}

.woocommerce-error {
	border-color: rgba(244, 91, 91, .45);
	background: rgba(244, 91, 91, .10);
}

/*
 * Los avisos se alinean con el resto de la pagina.
 *
 * En el catalogo y en el carrito ya caen dentro de .wt-container. En la ficha
 * no: ahi el contenedor se quito a proposito para que las bandas de abajo vayan
 * a sangre (ver woocommerce.php), y el aviso de «anadido al carrito» se pintaba
 * de borde a borde de la pantalla.
 */
.wt-shop--single .woocommerce-notices-wrapper {
	width: 100%;
	max-width: var(--wt-container);
	margin-inline: auto;
	padding-inline: var(--wt-margin);
}

.wt-shop--single .woocommerce-notices-wrapper:not(:empty) {
	margin-bottom: 24px;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { content: none; }

/* --- Estado de existencias en la ficha ---------------------------------------------------- */

.woocommerce div.product .stock { color: var(--wt-stock-in); font-size: var(--wt-size-caption); }
.woocommerce div.product .out-of-stock { color: var(--wt-stock-out); }

/* --- Migas de pan -------------------------------------------------------------------------- */

.woocommerce-breadcrumb {
	margin-bottom: var(--wt-space-4);
	color: var(--wt-text-3);
	font-family: var(--wt-font-mono);
	font-size: 13px;
	line-height: 1.4;
}

.woocommerce-breadcrumb a { color: var(--wt-text-2); text-decoration: none; }

/* --- Botones de Woo ------------------------------------------------------------------------
   Woo pinta .button en muchos sitios. Se le da la forma del primario del sistema
   sin tener que anadir clases en cada plantilla. */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--wt-control-min);
	padding: 12.5px 24.5px;
	border: 1.5px solid transparent;
	border-radius: var(--wt-radius-pill);
	background: var(--wt-fill-subtle);
	color: var(--wt-text);
	font-family: var(--wt-font-display);
	font-size: 13px;
	font-weight: var(--wt-weight-semi);
	line-height: 1.5;
	letter-spacing: var(--wt-track-btn);
	text-transform: uppercase;
	text-decoration: none;
	transition: filter var(--wt-dur) var(--wt-ease),
	            background-color var(--wt-dur) var(--wt-ease);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover { background: rgba(255, 255, 255, .12); color: var(--wt-text); }

/* .alt es la accion principal de cada pantalla: anadir al carrito, finalizar
   compra, hacer el pedido. Se lleva el degradado primario. */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce .single_add_to_cart_button,
.woocommerce #place_order,
.woocommerce .checkout-button {
	padding: 16.5px 32.5px;
	background-color: transparent;
	background-image: var(--wt-grad-primary);
	font-size: 15px;
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce #place_order:hover,
.woocommerce .checkout-button:hover { filter: brightness(1.12); background-image: var(--wt-grad-primary); }

.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce input.button:disabled {
	opacity: var(--wt-disabled-opacity);
}


/* ==========================================================================
   CATALOGO · nodo 23:2
   --------------------------------------------------------------------------
   Cabecera a sangre, barra de filtros, rejilla de cuatro y un bloque de texto
   con preguntas frecuentes al final.

   La tarjeta de producto NO esta aqui: es un componente compartido con la
   portada y vive en components.css como .wt-pcard.
   ========================================================================== */

/* --- El hueco de la tarjeta ---------------------------------------------------
   Vale para las dos rejillas: la que pinta WooCommerce con <li class="product">
   y la de la portada, que usa <li> a secas. El <li> estira con la fila y la
   tarjeta lo llena, para que todos los botones de una fila queden alineados
   aunque los nombres ocupen distinto. */

.woocommerce ul.products li.product,
ul.products li.product,
.wt-drops__grid > li {
	display: flex;
}

li > .wt-pcard,
li > .wt-rcard {
	flex: 1 1 auto;
	width: 100%;
}


/* --- Cabecera de pagina · nodo 23:57 ------------------------------------------
   Banda a sangre: 44 de aire arriba, 32 abajo. El titular y la entradilla a la
   izquierda y la caja de envio pegada abajo a la derecha, alineada con la base
   del bloque de texto. */

.wt-shop-head {
	background: var(--wt-bg);
	padding-block: 44px 32px;
}

.wt-shop-head .woocommerce-breadcrumb {
	margin: 0 0 18px;
}

.wt-shop-head__row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--wt-space-4);
}

.wt-shop-head__text {
	flex: 1 1 520px;
	min-width: 0;
}

.wt-shop-head__title {
	margin: 0;
	font-size: clamp(1.875rem, 3vw, 2.5rem);
	font-weight: var(--wt-weight-bold);
	line-height: 1.14;
	text-wrap: initial;
}

.wt-shop-head__lead {
	max-width: 620px;
	margin: 12px 0 0;
	color: var(--wt-text-2);
	font-family: var(--wt-font-mono);
	font-size: 15.5px;
	line-height: 1.6;
}

/* La caja solo existe si hay tarifas configuradas en WooCommerce: los precios
   se leen de las zonas reales. Ver wt_get_shop_shipping(). */
.wt-shop-head__ship {
	flex: 0 1 333px;
	max-width: 333px;
	padding: 13px 17px;
	border: 1px solid var(--wt-border);
	border-radius: 14px;
	background: var(--wt-raised);
}

.wt-shop-head__ship-line {
	margin: 0;
	color: var(--wt-text);
	font-family: var(--wt-font-display);
	font-size: 15px;
	font-weight: var(--wt-weight-reg);
	line-height: 1.4;
}

.wt-shop-head__ship-note {
	margin: 4px 0 0;
	color: var(--wt-text-3);
	font-family: var(--wt-font-mono);
	font-size: 12.5px;
	line-height: 1.4;
}


/* --- Barra de filtros · nodo 23:74 -------------------------------------------- */

/*
 * Dos columnas, no una fila que se parte.
 * -----------------------------------------------------------------------------
 * Con `flex-wrap: wrap` en el formulario, al grupo de la izquierda le bastaba
 * pasar de una fila de pildoras para ocupar todo el ancho y empujar el recuento
 * y el orden a una linea nueva, pegados a la izquierda. Con once filtros eso
 * pasa siempre.
 *
 * Ahora son dos columnas de verdad: la izquierda se queda el ancho que sobra y
 * parte sus pildoras DENTRO, y la derecha mide lo que necesita y no se mueve.
 * `align-items: flex-start` deja el orden a la altura de la PRIMERA fila de
 * filtros, que es donde lo busca el ojo.
 */
.wt-shop-filters {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--wt-space-4);
	/* El margen de abajo lo lleva la banda, no el formulario. */
	padding-block: 16px;
}

.wt-shop-filters__group {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

/*
 * La barra es una BANDA con fondo y filetes, no unas pildoras flotando sobre el
 * fondo de la pagina. Eso era la diferencia mas visible con el nodo.
 *
 * Se emite dentro de .wt-container, asi que para llegar a los bordes hay que
 * sacarla. --wt-sbw es el ancho de la barra de desplazamiento, que lo mide
 * initScrollbarVar() en assets/js/theme.js: sin descontarla, 100vw se pasa unos
 * 15px y la banda sale descentrada. Ver el comentario de esa funcion.
 */
.wt-shop-filters-band {
	width: calc(100vw - var(--wt-sbw, 0px));
	margin-inline: calc(50% - 50vw + (var(--wt-sbw, 0px) / 2));
	margin-bottom: 56px;
	border-top: 1px solid var(--wt-border);
	border-bottom: 1px solid var(--wt-border);
	background: var(--wt-surface);
}

/* La columna de la derecha mide lo que necesita y se pega a su borde. */
.wt-shop-filters__group--end {
	flex: 0 0 auto;
	flex-wrap: nowrap;
	justify-content: flex-end;
	gap: 14px;
}

/* En estrecho las dos columnas se apilan: con el recuento y el orden colgando
   a la derecha de una sola fila de filtros, no cabe nada. */
@media (max-width: 860px) {
	.wt-shop-filters {
		flex-wrap: wrap;
		gap: var(--wt-space-2);
	}

	.wt-shop-filters__group--end {
		flex: 1 1 100%;
		justify-content: flex-start;
	}
}

.wt-shop-filters__count {
	margin: 0;
	color: var(--wt-text-3);
	font-family: var(--wt-font-mono);
	font-size: 13.5px;
	line-height: 1.5;
}

/* Chip de filtro activo: es un enlace que lo quita. */
.wt-shop-filters__active {
	text-decoration: none;
	transition: border-color var(--wt-dur) var(--wt-ease);
}

.wt-shop-filters__active:hover,
.wt-shop-filters__active:focus-visible {
	border-color: var(--wt-text);
}


/* --- Desplegable del sistema ---------------------------------------------------
   Un <select> nativo con la caja del diseno. Nativo y no una lista a medida
   porque en movil abre el selector del sistema operativo, que es mejor que
   cualquier cosa que se pueda escribir aqui, y trae teclado y lector de
   pantalla de serie.

   appearance:none quita la flecha del navegador; la del diseno la dibuja el
   ::after del envoltorio con un borde, sin pedir ningun archivo. */

/* -----------------------------------------------------------------------------
   POR QUE LA PILDORA NO ES EL <select>
   -----------------------------------------------------------------------------
   Un <select> nativo se dimensiona por su opcion MAS LARGA, aunque cerrado solo
   enseñe la corta. Con los atributos reales del cliente eso rompia la barra:
   «Colour» arrastraba «Purple and green · Heavy frost · Orange hairs» —45
   caracteres— y su pildora salia al doble de ancha que «Trim». Tres filas, cada
   una de un ancho. No se parecia al nodo 23:74, donde cada pildora mide lo que
   mide SU NOMBRE.

   No hay forma en CSS de decirle a un select que se mida por el texto visible.
   Asi que la pildora la pinta un <span> —que sí mide lo que enseña— y el select
   va encima a opacidad cero, ocupando el mismo hueco.

   Lo importante: el control SIGUE SIENDO un select nativo. Se abre con teclado,
   en movil sale el selector del sistema y el lector de pantalla lo anuncia como
   lo que es. No se ha reimplementado nada, solo se ha dejado de pintar.

   El texto del span lo escribe PHP con la opcion elegida, asi que tampoco hace
   falta JavaScript para mantenerlo al dia: al cambiar, el formulario se envia y
   la pagina vuelve con el valor nuevo ya pintado.
   -------------------------------------------------------------------------- */

.wt-select {
	position: relative;
	display: inline-flex;
	align-items: center;
	max-width: 260px;
}

.wt-select__face {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	/* 11 + 1 de borde por lado = los 41 de alto del nodo. */
	padding: 11px 14px 11px 16px;
	border: 1px solid var(--wt-border);
	border-radius: var(--wt-radius-pill);
	background: var(--wt-fill-subtle);
	color: var(--wt-text-2);
	font-family: var(--wt-font-mono);
	font-size: 12.5px;
	line-height: 1.5;
	white-space: nowrap;
	transition:
		border-color var(--wt-dur) var(--wt-ease),
		background-color var(--wt-dur) var(--wt-ease);
}

/* Una eleccion larga no puede volver a estirar la barra. */
.wt-select__label {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Cuantas opciones tiene el filtro, como el «3» del nodo. */
.wt-select__count {
	flex: 0 0 auto;
	color: var(--wt-text-3);
	font-size: 11px;
}

/* La flecha del nodo: 8x5. Antes la dibujaba el ::after del envoltorio en
   posicion absoluta; ahora es parte de la fila y no hay que reservarle hueco
   con relleno. */
.wt-select__face::after {
	content: "";
	flex: 0 0 auto;
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid var(--wt-text-3);
}

/* Filtro con algo elegido: se tiñe, para que se vea cual esta actuando sin
   tener que leer los chips de debajo. */
.wt-select.is-on .wt-select__face {
	border-color: rgba(177, 106, 255, .38);
	background: rgba(177, 106, 255, .13);
	color: var(--wt-purple);
}

.wt-select.is-on .wt-select__face::after { border-top-color: var(--wt-purple); }

/*
 * El select de verdad: invisible, encima, y con todo su comportamiento.
 *
 * font-size 16 a proposito aunque no se vea: por debajo de 16, Safari en iOS
 * hace zoom a la pagina al enfocar un campo.
 */
.wt-select select {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	font-size: 16px;
	cursor: pointer;
}

.wt-select:hover .wt-select__face {
	border-color: var(--wt-border-contrast);
}

/* El foco lo recibe el select, pero lo tiene que enseñar la pildora. */
.wt-select:focus-within .wt-select__face {
	outline: var(--wt-focus-width) solid var(--wt-focus-color);
	outline-offset: var(--wt-focus-offset);
}

/* El foco no se pinta aqui: el select es invisible. Lo enseña la pildora, con
   .wt-select:focus-within mas arriba. */
.wt-select select:focus-visible { outline: none; }

/* El desplegable abierto lo pinta el sistema operativo y no hereda el fondo del
   theme: sin esto, en Windows las opciones salen en blanco sobre blanco. */
.wt-select select option {
	background: var(--wt-surface);
	color: var(--wt-text);
}


/* --- Paginacion · nodo 23:385 -------------------------------------------------- */

.woocommerce nav.woocommerce-pagination {
	margin-top: 48px;
	text-align: center;
}

.woocommerce nav.woocommerce-pagination ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

.woocommerce nav.woocommerce-pagination ul li {
	margin: 0;
	border: 0;
	overflow: visible;
}

/* Hijos DIRECTOS: dentro del enlace de «siguiente» hay un <span> con la flecha,
   y con el selector descendente se llevaba tambien la caja de 48 y el borde. */
.woocommerce nav.woocommerce-pagination ul > li > a,
.woocommerce nav.woocommerce-pagination ul > li > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	min-height: 48px;
	padding: 0 16px;
	border: 1px solid var(--wt-border);
	border-radius: var(--wt-radius-pill);
	background: none;
	color: var(--wt-text-2);
	font-family: var(--wt-font-mono);
	font-size: 15px;
	line-height: 1;
	text-decoration: none;
	transition:
		border-color var(--wt-dur) var(--wt-ease),
		color        var(--wt-dur) var(--wt-ease);
}

.woocommerce nav.woocommerce-pagination ul > li > a:hover,
.woocommerce nav.woocommerce-pagination ul > li > a:focus-visible {
	border-color: var(--wt-text);
	color: var(--wt-text);
	background: none;
}

.woocommerce nav.woocommerce-pagination ul > li > span.current {
	border-color: transparent;
	background-image: var(--wt-grad-primary);
	color: var(--wt-text);
}

/* Anterior y siguiente llevan texto, asi que son mas anchos y en versalitas. */
.woocommerce nav.woocommerce-pagination ul > li > a.prev,
.woocommerce nav.woocommerce-pagination ul > li > a.next {
	gap: 8px;
	padding: 0 22px;
	font-size: 12.5px;
	letter-spacing: var(--wt-track-btn);
	text-transform: uppercase;
}


/* --- Texto y preguntas frecuentes · nodo 23:397 -------------------------------
   Va al final a proposito: quien entra viene a ver producto. El texto sigue
   estando para los buscadores, pero debajo del catalogo. */

.wt-shop-seo {
	border-top: 1px solid var(--wt-border);
	background: var(--wt-surface);
	padding-block: 72px 88px;
}

.wt-shop-seo__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 56px;
}

.wt-shop-seo__text {
	flex: 1 1 520px;
	max-width: 744px;
	min-width: 0;
}

.wt-shop-seo__title {
	margin: 0;
	font-size: 26px;
	font-weight: var(--wt-weight-bold);
	line-height: var(--wt-lh-tight);
}

.wt-shop-seo__body {
	margin: 16px 0 0;
	color: var(--wt-text-2);
	font-family: var(--wt-font-mono);
	font-size: 14.5px;
	line-height: 1.75;
}

.wt-faq {
	flex: 1 1 420px;
	max-width: 480px;
	min-width: 0;
}

.wt-faq__title {
	margin: 0 0 12px;
	color: var(--wt-purple);
	font-family: var(--wt-font-mono);
	font-size: 12px;
	font-weight: var(--wt-weight-bold);
	letter-spacing: 2.4px;
	line-height: 1.5;
	text-transform: uppercase;
}

.wt-faq__item {
	border: 1px solid var(--wt-border);
	border-radius: 12px;
	background: var(--wt-bg);
}

.wt-faq__item + .wt-faq__item {
	margin-top: 12px;
}

.wt-faq__item[open] {
	border-color: var(--wt-purple-deep);
}

.wt-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wt-space-2);
	min-height: 54px;
	padding: 16px 18px;
	color: var(--wt-text);
	font-family: var(--wt-font-display);
	font-size: 15px;
	font-weight: var(--wt-weight-reg);
	line-height: 1.4;
	cursor: pointer;
	list-style: none;
}

/* Safari pinta su propio triangulo en el <summary> y hay que quitarlo aparte. */
.wt-faq__q::-webkit-details-marker {
	display: none;
}

.wt-faq__q:focus-visible {
	outline: 2px solid var(--wt-purple);
	outline-offset: -2px;
	border-radius: 12px;
}

/* El «+» del nodo, que gira a «x» al abrir. Se dibuja con dos barras en lugar
   de escribir un caracter: asi se puede animar y no depende de la fuente. */
.wt-faq__q::after {
	content: "";
	position: relative;
	flex: 0 0 auto;
	width: 11px;
	height: 11px;
	background:
		linear-gradient(var(--wt-text-2) 0 0) center / 11px 1.5px no-repeat,
		linear-gradient(var(--wt-text-2) 0 0) center / 1.5px 11px no-repeat;
	transition: rotate var(--wt-dur) var(--wt-ease);
}

.wt-faq__item[open] .wt-faq__q::after {
	rotate: 45deg;
}

.wt-faq__a {
	padding: 0 18px 18px;
	color: var(--wt-text-2);
	font-family: var(--wt-font-mono);
	font-size: 13.5px;
	line-height: 1.7;
}


/* --- Adaptacion ---------------------------------------------------------------- */

@media (max-width: 900px) {
	.wt-shop-head {
		padding-block: 32px 24px;
	}

	.wt-shop-head__ship {
		flex-basis: 100%;
		max-width: none;
	}

	.wt-shop-filters {
		margin-bottom: 32px;
	}

	.wt-shop-filters__group--end {
		width: 100%;
		justify-content: space-between;
	}

	.wt-shop-seo {
		padding-block: 48px 56px;
	}

	.wt-shop-seo__inner {
		gap: var(--wt-space-5);
	}
}


/* ==========================================================================
   FICHA DE PRODUCTO · resto de secciones · nodo 24:2
   ========================================================================== */

/* --- Galeria · nodo 24:58 ------------------------------------------------------
   Se usa la galeria de WooCommerce con su zoom, su lightbox y su carrusel de
   miniaturas, en lugar de rehacerla. Trae teclado y gestos tactiles resueltos,
   y reescribirla seria cambiar codigo probado por codigo nuevo para que se vea
   igual. Aqui solo se le da la forma del nodo. */

/*
 * OJO CON LOS SELECTORES DE AQUI ABAJO.
 *
 * WooCommerce estila la galeria con reglas largas del tipo
 * `.woocommerce div.product div.images .flex-control-thumbs li img`, que pesan
 * (0,4,4). Escritas como `.single-product div.product .flex-control-thumbs img`
 * —que es como estaban al principio— pesan (0,3,2) y PIERDEN: las miniaturas
 * salian con el tamano y la opacidad del plugin y el boton de ampliar seguia
 * siendo el circulo blanco con la lupa.
 *
 * Asi que se copia su mismo prefijo. Con el mismo peso decide el orden, y
 * nuestra hoja va detras de la del plugin.
 */

.woocommerce div.product div.images {
	position: relative;
	margin: 0;
}

.woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
	margin: 0;
}

.woocommerce div.product div.images .woocommerce-product-gallery__image {
	border-radius: 20px;
	overflow: hidden;
	background: var(--wt-surface);
}

/*
 * height auto y NO aspect-ratio, a proposito.
 *
 * Flexslider flota las diapositivas y mide su ancho al arrancar. Una caja
 * flotante se ajusta a su contenido, y si la imagen todavia no tiene tamano
 * propio y ademas le hemos impuesto una relacion de aspecto, la medida sale
 * cero: flexslider guarda ese cero en linea y la galeria se queda plana para
 * siempre. Pasó, y solo se arreglaba redimensionando la ventana.
 *
 * Con height auto manda el tamano real de la imagen. Las de esta tienda son
 * cuadradas, asi que la caja sale cuadrada igual.
 */
.woocommerce div.product div.images .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 20px;
}

/* Miniaturas: cuatro en fila bajo la imagen grande · nodo 24:71. */
.woocommerce div.product div.images .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	margin: 14px 0 0;
	padding: 0;
	overflow: visible;
	list-style: none;
}

.woocommerce div.product div.images .flex-control-thumbs li {
	margin: 0;
	width: auto;
	float: none;
	list-style: none;
}

.woocommerce div.product div.images .flex-control-thumbs li img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	margin: 0;
	border: 1px solid var(--wt-border);
	border-radius: 14px;
	opacity: .6;
	cursor: pointer;
	transition:
		opacity      var(--wt-dur) var(--wt-ease),
		border-color var(--wt-dur) var(--wt-ease);
}

.woocommerce div.product div.images .flex-control-thumbs li img:hover,
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active {
	opacity: 1;
	border-color: var(--wt-purple);
}

/*
 * El boton de ampliar · nodo 24:69.
 *
 * WooCommerce lo emite como un enlace a la imagen grande con una lupa dentro.
 * Se le da forma de pastilla y se sustituye el emoji por texto con ::after: el
 * enlace sigue siendo el mismo, asi que sin JavaScript abre la imagen a tamano
 * completo, que es el comportamiento correcto.
 *
 * Contrapartida conocida: el texto del ::after no pasa por el traductor. Es una
 * palabra, y la alternativa —reemplazarlo con JavaScript— lo dejaria vacio para
 * quien no tenga JavaScript.
 */
.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 3;
	/*
	 * Un bloque con relleno y nada mas, no un contenedor flexible.
	 *
	 * Con inline-flex el texto del ::after se convertia en un elemento flexible
	 * que se encogia a cero dentro de una caja posicionada en absoluto, y salia
	 * la pastilla vacia. Un bloque absoluto se ajusta a su contenido sin
	 * ayuda.
	 */
	display: block;
	/*
	 * Ancho fijo, y no auto.
	 *
	 * Es una caja posicionada en absoluto, y aqui el ajuste al contenido se
	 * resuelve en cero: se probo con auto, con max-content y con el pseudo en
	 * linea, y las tres veces salio una pastilla de 30px con el texto fuera. Con
	 * una palabra de cuatro letras, un ancho fijo es la respuesta corta.
	 *
	 * Contrapartida: si algun dia esto se traduce a una palabra mas larga, hay
	 * que subir el numero. Esta anotado tambien en el README.
	 */
	width: 74px;
	height: 36px;
	padding: 9px 0;
	box-sizing: border-box;
	text-align: center;
	border: 1px solid var(--wt-border-contrast);
	border-radius: var(--wt-radius-pill);
	background: rgba(15, 15, 15, .72);
	backdrop-filter: blur(6px);
	box-shadow: none;
	color: var(--wt-text);
	font-family: var(--wt-font-mono);
	font-size: 12.5px;
	line-height: 1;
	text-decoration: none;
	/* WooCommerce lo esconde con text-indent: -9999px. Aqui se quiere leer. */
	text-indent: 0;
}

/*
 * Dentro del enlace WordPress ha convertido la lupa en una imagen de emoji.
 * font-size: 0 no la encoge, hay que esconderla.
 */
.woocommerce div.product div.images .woocommerce-product-gallery__trigger img,
.woocommerce div.product div.images .woocommerce-product-gallery__trigger > span {
	display: none;
}

.woocommerce div.product div.images .woocommerce-product-gallery__trigger::after {
	content: "Zoom";
	/*
	 * inline y no block. Algo de la cascada del plugin deja este pseudo en
	 * block, y un bloque dentro de una caja que se ajusta a su contenido pide
	 * el 100% de un ancho que todavia no existe: el resultado era una pastilla
	 * de 30px con el texto fuera. En linea, el ancho sale del propio texto.
	 */
	display: inline;
	white-space: nowrap;
	letter-spacing: .4px;
}

.woocommerce div.product div.images .woocommerce-product-gallery__trigger:hover {
	border-color: var(--wt-text);
}


/* --- Ficha tecnica · nodo 24:149 ----------------------------------------------- */

.wt-specs {
	border-top: 1px solid var(--wt-border);
	background: var(--wt-surface);
	padding-block: 64px;
}

.wt-specs__title {
	margin: 0;
	font-size: 28px;
	font-weight: var(--wt-weight-bold);
	line-height: var(--wt-lh-tight);
}

.wt-specs__lead {
	margin: 8px 0 0;
	color: var(--wt-text-2);
	font-family: var(--wt-font-mono);
	font-size: 14px;
	line-height: 1.5;
}

/*
 * Tres columnas que se llenan por columnas y no por filas: asi el orden de
 * lectura de arriba abajo es el mismo que el del nodo. column-count lo hace sin
 * tener que repartir las filas a mano en PHP, que ademas seria imposible porque
 * el numero de atributos lo decide el cliente.
 */
.wt-specs__list {
	margin: 28px 0 0;
	column-count: 3;
	column-gap: var(--wt-gutter);
}

.wt-specs__row {
	display: flex;
	align-items: baseline;
	gap: 16px;
	min-height: 48px;
	padding-block: 14px;
	border-top: 1px solid var(--wt-border);
	/* Sin esto una fila puede partirse entre dos columnas. */
	break-inside: avoid;
}

.wt-specs__label {
	flex: 0 0 150px;
	margin: 0;
	color: var(--wt-text-3);
	font-family: var(--wt-font-mono);
	font-size: 13px;
	line-height: 1.5;
}

.wt-specs__value {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	color: var(--wt-text);
	font-family: var(--wt-font-display);
	font-size: 15px;
	font-weight: var(--wt-weight-reg);
	line-height: 1.4;
}


/* --- Donde encontrarlo · nodo 24:194 -------------------------------------------- */

.wt-pdp-stores {
	background: var(--wt-bg);
	padding-block: 72px;
}

.wt-pdp-stores__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
}

.wt-store-card {
	display: flex;
	flex-direction: column;
	padding: 22px;
	border: 1px solid var(--wt-border);
	border-radius: 18px;
	background: var(--wt-surface);
}

.wt-store-card__name {
	margin: 0;
	font-size: 17px;
	font-weight: var(--wt-weight-bold);
	line-height: 1.3;
}

.wt-store-card__city {
	margin: 10px 0 0;
	color: var(--wt-text-2);
	font-family: var(--wt-font-mono);
	font-size: 14px;
	line-height: 1.4;
}

.wt-store-card__meta {
	margin: 8px 0 0;
	color: var(--wt-text-3);
	font-family: var(--wt-font-mono);
	font-size: 12.5px;
	line-height: 1.4;
}

.wt-store-card__formats {
	margin-top: 14px;
	gap: 7px;
}

.wt-store-card__cta {
	margin-top: auto;
	padding-top: 24px;
}


/* --- De la misma familia · nodo 24:240 ------------------------------------------ */

.related.products,
.up-sells.products {
	background: var(--wt-bg);
	padding-block: 64px 80px;
}

/*
 * El contenedor no se puede meter en el marcado: lo emite related.php, del
 * plugin, y no se sobrescriben plantillas. Se le da a los hijos directos, que
 * son el titular y la rejilla. El fondo de la banda se queda a sangre.
 */
.related.products > *,
.up-sells.products > *,
.woocommerce .related.products > ul.products,
.woocommerce .up-sells.products > ul.products {
	width: 100%;
	max-width: var(--wt-container);
	margin-inline: auto;
	/* La regla de la rejilla de mas arriba pone padding: 0 con mas peso, de ahi
	   el selector largo de las dos ultimas lineas. */
	padding-inline: var(--wt-margin);
}

.related.products > h2,
.up-sells.products > h2 {
	margin: 0 auto 24px;
	font-size: 28px;
	font-weight: var(--wt-weight-bold);
	line-height: var(--wt-lh-tight);
}

.wt-rcard {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var(--wt-border);
	border-radius: 18px;
	background: var(--wt-surface);
	overflow: hidden;
	transition: border-color var(--wt-dur) var(--wt-ease);
}

.wt-rcard:hover,
.wt-rcard:focus-within {
	border-color: var(--wt-purple-deep);
}

.wt-rcard__media {
	/* 300x220 en el nodo. */
	aspect-ratio: 300 / 220;
	overflow: hidden;
	background: radial-gradient(
		ellipse 55.56% 55.56% at 50% 61.11%,
		rgba(122, 63, 191, .35)     0%,
		rgba( 73, 43, 109, .675)   50%,
		rgba( 48, 33,  67, .8375)  75%,
		rgba( 35, 28,  47, .91875) 87.5%,
		var(--wt-surface)         100%
	);
}

.wt-rcard__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.wt-rcard__body {
	padding: 16px 18px 20px;
}

.wt-rcard__title {
	margin: 0;
	font-size: 17px;
	font-weight: var(--wt-weight-bold);
	line-height: 1.3;
}

.wt-rcard__title a {
	color: inherit;
	text-decoration: none;
}

/*
 * Toda la tarjeta lleva a la ficha, no solo el nombre.
 *
 * Es el mismo recurso que usan las tarjetas de categoria y las del catalogo: un
 * ::after del enlace del titulo estirado sobre la tarjeta entera. Y se hace asi,
 * y no envolviendo la tarjeta en un <a>, por dos motivos: en el marcado sigue
 * habiendo UN solo enlace —el del nombre— asi que el lector de pantalla no
 * anuncia el mismo destino tres veces, y el texto de dentro se sigue pudiendo
 * seleccionar con el raton.
 */
.wt-rcard__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.wt-rcard__lineage {
	margin: 6px 0 0;
	color: var(--wt-text-3);
	font-family: var(--wt-font-mono);
	font-size: 12.5px;
	line-height: 1.4;
}

.wt-rcard__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px;
	margin: 14px 0 0;
	color: var(--wt-text);
	font-family: var(--wt-font-mono);
	font-size: 13.5px;
	line-height: 1.5;
}

.wt-rcard__meta .woocommerce-Price-amount { font: inherit; }
.wt-rcard__sep,
.wt-rcard__stock { color: var(--wt-text-3); }


/* --- Resenas · sin sitio en el nodo, al final ------------------------------------
   El diseno no les da hueco, pero quitar las pestanas se llevaba por delante el
   formulario de resenas y eso es funcionalidad que hoy existe. Se deja al
   final, discreta, en lugar de borrarla sin avisar. */

.wt-pdp-reviews {
	border-top: 1px solid var(--wt-border);
	background: var(--wt-surface);
	padding-block: 64px;
}

.wt-pdp-reviews #reviews h2,
.wt-pdp-reviews #reply-title {
	font-size: 22px;
	font-weight: var(--wt-weight-bold);
}

.wt-pdp-reviews .comment-form {
	max-width: 720px;
}


/* --- Adaptacion ------------------------------------------------------------------ */

@media (max-width: 900px) {
	.wt-specs__list { column-count: 2; }
	.wt-pdp-stores__grid { grid-template-columns: repeat(2, 1fr); }
	.wt-buybox { padding: 20px; }
}

@media (max-width: 600px) {
	.wt-specs { padding-block: 48px; }
	.wt-specs__list { column-count: 1; }
	.wt-pdp-stores { padding-block: 48px; }
	.wt-pdp-stores__grid { grid-template-columns: 1fr; }
	.related.products,
	.up-sells.products { padding-block: 48px 56px; }

	.woocommerce div.product form.cart .single_add_to_cart_button { flex-basis: 100%; }
}


/* --- Adaptacion del carrito -------------------------------------------------- */

/* El resumen deja de caber en su columna de 420 antes que el resto: a partir de
   aqui pasa debajo de las lineas, que es donde tiene que estar en un movil —lo
   ultimo que se lee antes de pagar. */
@media (max-width: 1100px) {
	.wt-cart {
		grid-template-columns: 1fr;
		padding-bottom: 56px;
	}

	.wt-csuggest__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
	.wt-cart-head { padding-block: 32px 20px; }
	.wt-cart-head__title { font-size: 32px; letter-spacing: -.6px; }

	/* La linea se parte en dos: imagen e informacion arriba, precio debajo del
	   nombre. Con 110px de imagen y el precio a la derecha no queda ancho para
	   el selector de cantidad y las dos acciones. */
	.wt-cline {
		flex-wrap: wrap;
		padding: 16px;
		gap: 14px;
	}

	.wt-cline__media {
		flex-basis: 80px;
		width: 80px;
		height: 80px;
	}

	.wt-cline__info { flex: 1 1 200px; }

	.wt-cline__price {
		flex: 1 1 100%;
		align-items: flex-start;
		text-align: left;
	}

	.wt-cline__actions { gap: 14px; }

	.wt-csuggest__grid { grid-template-columns: 1fr; }

	.wt-sum { padding: 20px; }
	.wt-sum__total-value { font-size: 26px; }

	.wt-csaved__item { flex-wrap: wrap; }
	.wt-csaved__actions { flex-basis: 100%; }

	/* A 16px de display, «You are €125,00 away from free shipping» ocupa tres
	   lineas y el importe de al lado lo estrecha todavia mas. Se baja de talla
	   y se apila. */
	.wt-cart__ship .wt-shipbar__box { padding: 16px; }

	.wt-cart__ship .wt-shipbar__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}

	.wt-cart__ship .wt-shipbar__label { font-size: 14px; }
}


/* =============================================================================
 * FINALIZAR COMPRA
 *
 * Esta pagina no tiene nodo en Figma. Se construye con las piezas que ya
 * existen —.wt-sum para el resumen, .wt-ctrust para la confianza, .wt-btn para
 * los botones, los campos de components.css— y aqui solo se anade lo que de
 * verdad no existia: la rejilla, la banda de pasos y el revestimiento de lo que
 * pinta WooCommerce por su cuenta (select2, metodos de pago, recibo).
 *
 * Ojo con la especificidad: woocommerce-layout.css y el woocommerce.css del
 * plugin cargan ANTES que este archivo, pero usan selectores largos del tipo
 * `.woocommerce-checkout #payment ul.payment_methods`. Donde se vea un selector
 * innecesariamente largo aqui abajo, es para empatar con el del plugin.
 * ========================================================================== */

/* --- Los tres pasos --------------------------------------------------------- */

.wt-co-head { padding-block: 44px 0; }

.wt-costeps { padding-block: 18px 0; }

.wt-costeps__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 18px;
	margin: 0;
	padding: 16px 0 26px;
	border-top: 1px solid var(--wt-border);
	list-style: none;
}

.wt-costeps__item {
	display: flex;
	align-items: center;
	gap: 9px;
	color: var(--wt-text-3);
	font-family: var(--wt-font-mono);
	font-size: 12px;
	line-height: 1.4;
	letter-spacing: var(--wt-track-chip);
	text-transform: uppercase;
}

/* La raya separadora es decorativa y por eso va en un pseudo: no debe leerse. */
.wt-costeps__item:not(:last-child)::after {
	content: "";
	width: 28px;
	height: 1px;
	margin-left: 9px;
	background: var(--wt-border);
}

.wt-costeps__num {
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	flex: 0 0 auto;
	border: 1px solid var(--wt-border);
	border-radius: 50%;
	font-size: 11px;
	font-weight: var(--wt-weight-med);
	line-height: 1;
}

.wt-costeps__label { color: inherit; }

a.wt-costeps__label:hover,
a.wt-costeps__label:focus-visible { color: var(--wt-text); }

/* Hecho: el numero se sustituye por una marca de verificacion. Es un pseudo y
   no un caracter en el HTML porque no aporta nada a quien escucha la pagina:
   el estado ya lo dice aria-current en el paso actual. */
.wt-costeps__item.is-done { color: var(--wt-text-2); }

.wt-costeps__item.is-done .wt-costeps__num {
	border-color: transparent;
	background: rgba(74, 222, 128, .16);
	color: var(--wt-stock-in);
	font-size: 0;
}

.wt-costeps__item.is-done .wt-costeps__num::after {
	content: "\2713";
	font-size: 12px;
}

.wt-costeps__item.is-current {
	color: var(--wt-text);
	font-weight: var(--wt-weight-med);
}

.wt-costeps__item.is-current .wt-costeps__num {
	border-color: transparent;
	background: var(--wt-purple);
	color: #fff;
}

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

.wt-checkout-page { padding-bottom: 96px; }

.wt-co {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 420px;
	align-items: start;
	gap: 28px;
	padding-block: 10px 0;
	margin: 0;
}

/* Un carrito solo de productos virtuales no pide direccion y el checkout se
   queda sin columna izquierda. Sin esto, el resumen se iria a la derecha
   dejando medio folio en blanco a su lado. */
.wt-co:not(:has(.wt-co__main)) {
	grid-template-columns: minmax(0, 1fr);
	max-width: 560px;
	margin-inline: auto;
}

.wt-co__main { min-width: 0; }

.wt-co__aside {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

/* WooCommerce parte #customer_details en dos columnas del 47%. Dentro de una
   columna de 600px eso deja las direcciones en tiras de 280px. Aqui se apilan:
   facturacion, luego envio, luego las notas del pedido. */
.wt-co .col2-set,
.wt-co .col2-set .col-1,
.wt-co .col2-set .col-2 {
	float: none;
	width: auto;
}

/* WooCommerce le cuelga a .col2-set los dos pseudos del clearfix de la epoca de
   los floats (`content: " "; display: table`). Eso es inofensivo mientras el
   contenedor sea un bloque, pero en cuanto se convierte en rejilla cada pseudo
   pasa a ser un ITEM: el ::before ocupa la primera celda y empuja el contenido
   real a la siguiente columna. Mismo tropiezo que hubo en el carrito con los
   pseudos de form.cart. */
.wt-co .col2-set::before,
.wt-co .col2-set::after { content: none; }

/* Tres clases para ganarle a `.woocommerce .col2-set .col-1`, que reparte las
   columnas al 48% flotadas. */
.wt-co .col2-set.wt-co__fields {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 34px;
}

/* --- Titulares de los bloques de campos ------------------------------------- */

.wt-co h3,
.wt-co .woocommerce-billing-fields > h3,
.wt-co .woocommerce-shipping-fields > h3,
.wt-co .woocommerce-additional-fields > h3 {
	margin: 0 0 18px;
	font-family: var(--wt-font-display);
	font-size: 20px;
	font-weight: var(--wt-weight-bold);
	line-height: 1.2;
	letter-spacing: -.3px;
}

/* «Ship to a different address?» es un <h3> con la casilla dentro. Deja de ser
   un titular suelto y pasa a leerse como lo que es: una opcion. */
.wt-co .woocommerce-shipping-fields > h3#ship-to-different-address {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 15px;
	letter-spacing: 0;
}

.wt-co #ship-to-different-address label {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	cursor: pointer;
	font-weight: var(--wt-weight-med);
}

.wt-co .shipping_address { padding-top: 22px; }

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

.wt-co .woocommerce-billing-fields__field-wrapper,
.wt-co .woocommerce-shipping-fields__field-wrapper,
.wt-co .woocommerce-additional-fields__field-wrapper {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 16px;
}

/* -----------------------------------------------------------------------------
 * De aqui hasta el final de los campos, todo lo comparten el checkout (.wt-co)
 * y Mi cuenta (.wt-acc)
 * -----------------------------------------------------------------------------
 * Son los mismos formularios de WooCommerce: la direccion de facturacion del
 * checkout y la de `/my-account/edit-address/` salen de la misma funcion, con
 * las mismas clases. Duplicar el revestimiento en dos bloques garantizaba que
 * dentro de un mes no se parecieran.
 *
 * OJO CON EL ORDEN DE LOS ANCESTROS. El gancho del checkout y el de Mi cuenta
 * NO estan en el mismo sitio respecto al <div class="woocommerce"> del plugin:
 *
 *   checkout    .wt-checkout-page > div.woocommerce > form.checkout.wt-co
 *   mi cuenta   div.wt-acc        > div.woocommerce > form...
 *
 * En el checkout .wt-co va DENTRO de .woocommerce; en Mi cuenta .wt-acc va
 * FUERA. Por eso el prefijo es `:is(.woocommerce .wt-co, .wt-acc .woocommerce)`
 * y no `.woocommerce :is(.wt-co, .wt-acc)`, que solo acertaba en el checkout y
 * dejaba los campos de Mi cuenta con el blanco del plugin.
 *
 * `:is()` toma la especificidad de su argumento MAS especifico, y aqui los dos
 * son una clase, asi que `:is(.wt-co, .wt-acc) .form-row` pesa exactamente lo
 * mismo que pesaba `.wt-co .form-row`. Los calculos de abajo siguen valiendo.
 */

/* La colocacion en la rejilla va aparte, y con selectores cortos a proposito:
   `.form-row-first` tiene que poder ganarle a `.form-row`, y solo lo consigue
   si empatan en especificidad y va despues. */
:is(.wt-co, .wt-acc) .form-row { grid-column: 1 / -1; }

:is(.wt-co, .wt-acc) .form-row-first { grid-column: 1 / 2; }
:is(.wt-co, .wt-acc) .form-row-last { grid-column: 2 / 3; }

/* Los <div class="clear"> que WooCommerce intercala entre campos son restos del
   reparto con floats. En una rejilla son celdas vacias que abren un hueco. */
:is(.wt-co, .wt-acc) form > .clear,
:is(.wt-co, .wt-acc) .woocommerce-address-fields__field-wrapper > .clear { display: none; }

/* El resto de la caja del campo si necesita la clase de mas: WooCommerce le
   pone `width: 47%` a .form-row-first y .form-row-last —reparto de la epoca de
   los floats— y aqui el reparto ya lo hace la rejilla. Con el 47% encima, los
   campos salian a 188px dentro de una columna de 400. */
:is(.woocommerce .wt-co, .wt-acc .woocommerce) .form-row {
	display: flex;
	flex-direction: column;
	gap: 7px;
	width: auto;
	margin: 0 0 18px;
	padding: 0;

	/*
	 * El `float: left` va con el `width: 47%`. En el checkout y en editar
	 * direccion no se nota, porque ahi las filas son items de una rejilla y la
	 * rejilla ignora los floats. Pero «he perdido la contrasena» es un
	 * formulario suelto: alli el campo se iba a la izquierda y el boton se le
	 * ponia al lado, estrecho y con el texto partido en dos lineas.
	 */
	float: none;
}

:is(.wt-co, .wt-acc) .form-row label {
	margin: 0;
	color: var(--wt-text-2);
	font-family: var(--wt-font-mono);
	font-size: 11px;
	font-weight: var(--wt-weight-med);
	line-height: 1.4;
	letter-spacing: var(--wt-track-chip);
	text-transform: uppercase;
}

:is(.wt-co, .wt-acc) .form-row label .required {
	border: 0;
	color: var(--wt-purple);
	text-decoration: none;
}

:is(.wt-co, .wt-acc) .form-row .optional {
	color: var(--wt-text-3);
	text-transform: none;
	letter-spacing: 0;
}

/* WooCommerce 11 reviste los campos del checkout clasico por su cuenta: fondo
   blanco, esquinas de 4px y un borde `rgba(32,7,7,.8)`. Lo hace con
   `.woocommerce form .form-row input.input-text`, cuatro piezas, que le gana al
   `input[type="text"]` de components.css: de ahi que la tipografia si saliera
   bien y el fondo no. Estas reglas son largas solo para empatarle. */
:is(.woocommerce .wt-co, .wt-acc .woocommerce) .form-row input.input-text,
:is(.woocommerce .wt-co, .wt-acc .woocommerce) .form-row textarea,
:is(.woocommerce .wt-co, .wt-acc .woocommerce) .form-row select {
	width: 100%;
	min-height: var(--wt-control-min);
	margin: 0;
	padding: var(--wt-space-1) var(--wt-space-2);
	border: 1px solid var(--wt-border);
	border-radius: var(--wt-radius-card);
	background: var(--wt-raised);
	color: var(--wt-text);
	font-family: var(--wt-font-mono);
	font-size: var(--wt-size-body);
	line-height: 1.4;
}

:is(.woocommerce .wt-co, .wt-acc .woocommerce) .form-row input.input-text:focus,
:is(.woocommerce .wt-co, .wt-acc .woocommerce) .form-row textarea:focus,
:is(.woocommerce .wt-co, .wt-acc .woocommerce) .form-row select:focus { border-color: var(--wt-purple); }

:is(.woocommerce .wt-co, .wt-acc .woocommerce) .form-row input.input-text::placeholder,
:is(.woocommerce .wt-co, .wt-acc .woocommerce) .form-row textarea::placeholder { color: var(--wt-text-3); }

:is(.woocommerce .wt-co, .wt-acc .woocommerce) .form-row textarea { min-height: 104px; }

/* La casilla de crear cuenta y la de «enviar a otra direccion» son filas con
   una casilla, no campos con etiqueta encima. */
.wt-co .form-row.create-account,
.wt-co .woocommerce-account-fields .form-row {
	flex-direction: row;
	align-items: center;
	gap: 10px;
}

.wt-co .woocommerce-account-fields .form-row label,
.wt-co .form-row.create-account label {
	margin: 0;
	color: var(--wt-text);
	font-family: inherit;
	font-size: var(--wt-size-body);
	letter-spacing: 0;
	text-transform: none;
}

.wt-co .create-account,
.wt-co .woocommerce-account-fields > p:first-child { margin-bottom: 14px; }

/* Estados que cuelga el checkout.js del campo al validar. */
:is(.wt-co, .wt-acc) .woocommerce-invalid .input-text,
:is(.wt-co, .wt-acc) .woocommerce-invalid select { border-color: var(--wt-stock-out); }

:is(.wt-co, .wt-acc) .woocommerce-validated .input-text,
:is(.wt-co, .wt-acc) .woocommerce-validated select { border-color: rgba(74, 222, 128, .5); }

/* --- selectWoo (el select2 de WooCommerce) ---------------------------------- */

/* El plugin trae su propio select2.css con fondos blancos y bordes grises.
   Aqui solo se le cambia la piel: ni una regla de posicionamiento, que es
   donde select2 se rompe. */
:is(.wt-co, .wt-acc) .select2-container--default .select2-selection--single {
	height: auto;
	padding: 13px 16px;
	border: 1px solid var(--wt-border);
	border-radius: var(--wt-radius-pill);
	background: var(--wt-raised);
}

:is(.wt-co, .wt-acc) .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0;
	color: var(--wt-text);
	font-size: var(--wt-size-body);
	line-height: 1.4;
}

:is(.wt-co, .wt-acc) .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--wt-text-3); }

:is(.wt-co, .wt-acc) .select2-container--default .select2-selection--single .select2-selection__arrow {
	top: 50%;
	right: 12px;
	height: 20px;
	transform: translateY(-50%);
}

:is(.wt-co, .wt-acc) .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--wt-purple); }

/* El desplegable se monta al final del <body>, FUERA de .wt-co: si estas reglas
   se anidaran bajo .wt-co no se aplicarian nunca. */
.select2-container--default .select2-dropdown {
	border: 1px solid var(--wt-border);
	border-radius: 14px;
	background: var(--wt-surface);
	overflow: hidden;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
	padding: 10px 12px;
	border: 1px solid var(--wt-border);
	border-radius: 10px;
	background: var(--wt-raised);
	color: var(--wt-text);
}

.select2-container--default .select2-results__option {
	padding: 9px 14px;
	color: var(--wt-text-2);
	font-size: 14px;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
	background: var(--wt-purple);
	color: #fff;
}

/* --- Cupon ------------------------------------------------------------------ */

.wt-cocoupon {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin: 0 0 14px;
	padding: 14px 20px;
	border: 1px solid var(--wt-border);
	border-radius: 14px;
	background: var(--wt-surface);
	font-family: var(--wt-font-mono);
	font-size: 13px;
	line-height: 1.5;
}

.wt-cocoupon__ask { color: var(--wt-text-2); }

.wt-cocoupon__link {
	color: var(--wt-purple);
	font-weight: var(--wt-weight-med);
}

.wt-cocoupon__form {
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: 460px;
	margin: 0 0 20px;
}

/* --- Aviso de inicio de sesion ---------------------------------------------- */

.wt-checkout-page .woocommerce-form-login-toggle { margin-bottom: 10px; }

.wt-checkout-page .woocommerce-form-login {
	max-width: 460px;
	margin: 0 0 22px;
	padding: 22px;
	border: 1px solid var(--wt-border);
	border-radius: 16px;
	background: var(--wt-surface);
}

/* --- Resumen del pedido ----------------------------------------------------- */

/* .wt-sum ya trae la caja, el titulo, las filas y el total. Aqui solo va lo que
   el carrito no tiene: la lista de articulos con miniatura. */

.wt-cosum__items {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0 0 18px;
	padding: 0 0 18px;
	border-bottom: 1px solid var(--wt-border);
	list-style: none;
}

.wt-coitem {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.wt-coitem__media {
	position: relative;
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border: 1px solid var(--wt-border);
	border-radius: 12px;
	background: var(--wt-raised);
	overflow: hidden;
}

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

/* La cantidad va sobre la esquina de la foto, como en la mayoria de carritos:
   ahorra una linea de texto por articulo. */
.wt-coitem__qty {
	position: absolute;
	top: -1px;
	right: -1px;
	min-width: 20px;
	padding: 2px 5px;
	border-bottom-left-radius: 9px;
	background: var(--wt-purple);
	color: #fff;
	font-family: var(--wt-font-mono);
	font-size: 10.5px;
	font-weight: var(--wt-weight-med);
	line-height: 1.4;
	text-align: center;
}

.wt-coitem__text {
	flex: 1 1 auto;
	min-width: 0;
}

.wt-coitem__name {
	display: block;
	color: var(--wt-text);
	font-size: 14px;
	font-weight: var(--wt-weight-med);
	line-height: 1.35;
}

.wt-coitem__meta,
.wt-coitem__meta p {
	margin: 4px 0 0;
	color: var(--wt-text-3);
	font-family: var(--wt-font-mono);
	font-size: 11.5px;
	line-height: 1.5;
}

.wt-coitem__price {
	flex: 0 0 auto;
	padding-top: 1px;
	color: var(--wt-text);
	font-family: var(--wt-font-mono);
	font-size: 13.5px;
	font-weight: var(--wt-weight-med);
	text-align: right;
}

.wt-coitem__price .amount,
.wt-coitem__price bdi { color: inherit; }

.wt-cosum__edit {
	margin: -8px 0 16px;
	font-family: var(--wt-font-mono);
	font-size: 12px;
}

.wt-cosum__edit a { color: var(--wt-text-3); }

.wt-cosum__edit a:hover,
.wt-cosum__edit a:focus-visible { color: var(--wt-purple); }

/* Mientras WooCommerce recalcula, el plugin le pone .processing al bloque. */
.wt-cosum.processing { opacity: .5; }

/* --- Metodos de pago -------------------------------------------------------- */

.woocommerce-checkout #payment {
	margin-top: 22px;
	padding: 20px 0 0;
	border-top: 1px solid var(--wt-border);
	border-radius: 0;
	background: transparent;
}

.woocommerce-checkout #payment ul.payment_methods {
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

.woocommerce-checkout #payment ul.payment_methods li {
	margin: 0 0 8px;
	padding: 0;
	list-style: none;
}

.woocommerce-checkout #payment ul.payment_methods li > label {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 13px 16px;
	border: 1px solid var(--wt-border);
	border-radius: 14px;
	background: var(--wt-raised);
	color: var(--wt-text);
	font-size: 14px;
	font-weight: var(--wt-weight-med);
	line-height: 1.4;
	cursor: pointer;
}

.woocommerce-checkout #payment ul.payment_methods li input[type="radio"] { margin: 0; }

.woocommerce-checkout #payment ul.payment_methods li img {
	max-height: 22px;
	width: auto;
	margin-left: auto;
}

.woocommerce-checkout #payment div.payment_box {
	margin: 6px 0 12px;
	padding: 14px 16px;
	border-radius: 12px;
	background: rgba(255, 255, 255, .05);
	color: var(--wt-text-2);
	font-size: 13px;
	line-height: 1.55;
}

/* El original dibuja un triangulito blanco apuntando al metodo elegido. */
.woocommerce-checkout #payment div.payment_box::before { content: none; }

.woocommerce-checkout #payment div.payment_box p:last-child { margin-bottom: 0; }

.woocommerce-checkout #payment .woocommerce-notices-wrapper,
.woocommerce-checkout #payment .woocommerce-info { margin: 0; }

/* --- Condiciones y boton de realizar el pedido ------------------------------ */

.woocommerce-checkout #payment .form-row.place-order {
	margin: 0;
	padding: 0;
}

.wt-co .woocommerce-terms-and-conditions-wrapper { margin-bottom: 14px; }

.wt-co .woocommerce-privacy-policy-text p,
.wt-co .woocommerce-terms-and-conditions-wrapper p {
	margin: 0 0 10px;
	color: var(--wt-text-3);
	font-size: 12px;
	line-height: 1.55;
}

.wt-co .validate-required.terms {
	flex-direction: row;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
}

.wt-co .woocommerce-terms-and-conditions-checkbox-text {
	color: var(--wt-text-2);
	font-family: inherit;
	font-size: 13px;
	letter-spacing: 0;
	text-transform: none;
}

/* Dos identificadores, y no por gusto: WooCommerce lo saca a la derecha con
   `#payment #place_order`, que son dos. Con uno solo, el boton se quedaba
   flotando a la derecha y encogido al ancho de su texto. */
.wt-co #payment #place_order {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-top: 4px;
	padding: 18px 34px;
	font-size: 15px;
	float: none;
}

/* --- Recibo (order-received) ------------------------------------------------ */

.wt-checkout-page.is-done { max-width: 780px; }

.wt-checkout-page .woocommerce-thankyou-order-received {
	margin: 0 0 22px;
	font-size: 18px;
	line-height: 1.5;
}

.wt-checkout-page ul.woocommerce-thankyou-order-details,
.wt-checkout-page ul.order_details {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 0;
	margin: 0 0 32px;
	padding: 0;
	border: 1px solid var(--wt-border);
	border-radius: 18px;
	background: var(--wt-surface);
	list-style: none;
	overflow: hidden;
}

.wt-checkout-page ul.order_details li {
	margin: 0;
	padding: 18px 20px;
	border: 0;
	border-right: 1px solid var(--wt-border);
	color: var(--wt-text-3);
	font-family: var(--wt-font-mono);
	font-size: 11px;
	line-height: 1.4;
	letter-spacing: var(--wt-track-chip);
	text-transform: uppercase;
}

.wt-checkout-page ul.order_details li:last-child { border-right: 0; }

.wt-checkout-page ul.order_details li strong {
	display: block;
	margin-top: 7px;
	color: var(--wt-text);
	font-family: var(--wt-font-display);
	font-size: 17px;
	font-weight: var(--wt-weight-bold);
	letter-spacing: -.2px;
	text-transform: none;
}

:is(.wt-checkout-page, .wt-acc) .woocommerce-order-details,
:is(.wt-checkout-page, .wt-acc) .woocommerce-customer-details { margin-bottom: 36px; }

/* Compartido con /my-account/view-order/, que pinta estas mismas piezas. */
:is(.wt-checkout-page, .wt-acc) .woocommerce-column__title,
:is(.wt-checkout-page, .wt-acc) .woocommerce-order-details__title {
	margin: 0 0 16px;
	font-family: var(--wt-font-display);
	font-size: 20px;
	font-weight: var(--wt-weight-bold);
	letter-spacing: -.3px;
}

.wt-checkout-page .woocommerce-table--order-details {
	width: 100%;
	border: 1px solid var(--wt-border);
	border-radius: 18px;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--wt-surface);
	overflow: hidden;
}

.wt-checkout-page .woocommerce-table--order-details th,
.wt-checkout-page .woocommerce-table--order-details td {
	padding: 14px 20px;
	border: 0;
	border-bottom: 1px solid var(--wt-border);
	font-family: var(--wt-font-mono);
	font-size: 13.5px;
	line-height: 1.5;
	text-align: left;
}

.wt-checkout-page .woocommerce-table--order-details td:last-child,
.wt-checkout-page .woocommerce-table--order-details th:last-child { text-align: right; }

.wt-checkout-page .woocommerce-table--order-details tfoot tr:last-child th,
.wt-checkout-page .woocommerce-table--order-details tfoot tr:last-child td {
	border-bottom: 0;
	font-size: 16px;
	font-weight: var(--wt-weight-bold);
}

:is(.wt-checkout-page, .wt-acc) .woocommerce-customer-details address {
	padding: 18px 20px;
	border: 1px solid var(--wt-border);
	border-radius: 16px;
	background: var(--wt-surface);
	font-style: normal;
	line-height: 1.7;
}

/* --- Pantallas estrechas ---------------------------------------------------- */

@media (max-width: 1024px) {
	.wt-co {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	/* Aqui estuvo `.wt-co__aside { order: -1 }`, para que en movil el resumen
	   se viera antes que el formulario. Era un error: la columna derecha no es
	   solo el resumen, tambien lleva los metodos de pago y el boton de realizar
	   el pedido. Subirla dejaba el boton de pagar 400px POR ENCIMA de los
	   campos que envia. El orden natural —primero los datos, luego lo que se
	   paga y el boton— es el del HTML, asi que no hay que tocar nada. */
}

@media (max-width: 640px) {
	.wt-co-head { padding-block: 30px 0; }

	.wt-costeps__list { padding: 14px 0 20px; }

	.wt-costeps__item { font-size: 11px; }

	.wt-costeps__item:not(:last-child)::after { width: 14px; }

	.wt-co .woocommerce-billing-fields__field-wrapper,
	.wt-co .woocommerce-shipping-fields__field-wrapper,
	.wt-co .woocommerce-additional-fields__field-wrapper,
	.wt-acc .woocommerce-address-fields__field-wrapper,
	.wt-acc form.woocommerce-EditAccountForm {
		grid-template-columns: minmax(0, 1fr);
	}

	:is(.wt-co, .wt-acc) .form-row-first,
	:is(.wt-co, .wt-acc) .form-row-last { grid-column: 1 / -1; }

	.wt-checkout-page { padding-bottom: 64px; }

	.wt-cosum__items { gap: 12px; }

	.wt-coitem__media { width: 48px; height: 48px; }
}


/* =============================================================================
 * EL CLEARFIX DE WOOCOMMERCE, NEUTRALIZADO EN TODO LO QUE ESTE THEME CONVIERTE
 * EN REJILLA O EN FLEX
 *
 * Este bloque va EL ULTIMO del archivo a proposito: varias de estas reglas
 * empatan en especificidad con las del plugin y ganan por orden.
 * -----------------------------------------------------------------------------
 * WooCommerce arrastra un clearfix de la epoca de los floats. Se lo cuelga a una
 * treintena de elementos con la forma:
 *
 *     .loquesea::before, .loquesea::after { content: " "; display: table }
 *
 * Mientras el contenedor sea un bloque normal eso es invisible y no molesta. En
 * cuanto se le pone `display: grid` o `display: flex`, los dos pseudos dejan de
 * ser decoracion y pasan a ser ITEMS de pleno derecho:
 *
 * - En una rejilla ocupan celda. El ::before se queda la primera y empuja el
 *   contenido real a la siguiente columna o a la fila de abajo.
 * - En un contenedor flexible son dos hijos de ancho cero, y cada uno se cobra
 *   su `gap`.
 *
 * El sintoma no se parece a la causa —una columna cambiada de sitio, unos
 * pixeles de mas— y por eso cuesta encontrarlo. La regla practica es: SIEMPRE
 * que en este theme se le ponga grid o flex a un elemento que venga de
 * WooCommerce, mirar antes si el plugin le cuelga el clearfix, y apagarlo aqui.
 * Se encuentran buscando `content:" "` en los CSS del plugin.
 *
 * Los casos ya resueltos en su propia seccion siguen alli y no se repiten:
 * form.cart de la ficha, .cart-collaterals del carrito, ul.products del
 * catalogo, ul.tabs, .col2-set del checkout, .woocommerce-Addresses y
 * #customer_login de Mi cuenta.
 * ========================================================================== */

/* 1 · La envoltura de Mi cuenta.
      El plugin trae `.woocommerce-account .woocommerce::before`, que pesa
      (0,2,0) y solo existe en esta pagina. Al convertir esa envoltura en la
      rejilla de dos columnas, el ::before se quedaba la celda del menu: el menu
      se iba a la columna ancha de la derecha y el contenido caia debajo, en la
      columna de 250px. */
.woocommerce-account .wt-acc .woocommerce::before,
.woocommerce-account .wt-acc .woocommerce::after { content: none; }

/* 2 · Las filas de campo del checkout y de Mi cuenta.
      `.woocommerce form .form-row::before` pesa (0,2,1). Aqui .form-row es una
      columna flexible con `gap: 7px`, asi que los dos pseudos anadian 14px a
      cada campo del formulario. */
:is(.woocommerce .wt-co, .wt-acc .woocommerce) .form-row::before,
:is(.woocommerce .wt-co, .wt-acc .woocommerce) .form-row::after { content: none; }

/* 3 · La cabecera de cada tarjeta de direccion, que lleva la clase `title` y
      por eso hereda `.woocommerce-account .addresses .title::before`, de
      (0,3,0). Es una fila flexible con el nombre a un lado y «Edit» al otro. */
.woocommerce-account .wt-acc .addresses .title::before,
.woocommerce-account .wt-acc .addresses .title::after { content: none; }

/* 4 · La paginacion, que es flex en el catalogo y en el historial de pedidos. */
.woocommerce nav.woocommerce-pagination ul.page-numbers::before,
.woocommerce nav.woocommerce-pagination ul.page-numbers::after { content: none; }

/* 5 · La ficha de datos del pedido del recibo, que es una rejilla de columnas
      automaticas. Empata con `.woocommerce ul.order_details::before` y gana
      porque este bloque va el ultimo. */
:is(.wt-checkout-page, .wt-acc) ul.order_details::before,
:is(.wt-checkout-page, .wt-acc) ul.order_details::after { content: none; }