/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V4
 * Hallmark · verbo: redesign · alcance: /cart/ + /checkout/ (los dos estados:
 *   compra puntual "horas" y suscripción)
 * genre: modern-minimal · dirección: cálido de marca (elegida por el cliente)
 * theme: custom (marca Trámite Legal) · paper: light · display: geometric-sans
 * accent: warm · enrichment: none
 * ========================================================================
 * POR QUÉ ESTE FICHERO EXISTE
 * El carrito y el checkout son DOS sistemas distintos y no se parecían:
 *   · /cart/     → bloque de WooCommerce (React, clases .wc-block-*)
 *   · /checkout/ → checkout clásico [woocommerce_checkout] (plantillas PHP)
 * No se unifican a propósito: pasar el checkout al bloque dejaría fuera a
 * PayComet (no tiene integración con Store API) y al consentimiento de
 * privacidad, que cuelga de un hook clásico. Se quedan como están y aquí se
 * les da un mismo idioma visual.
 *
 * REPARTO CON EL MU-PLUGIN (tlc-asesor-packs.php · checkout_css)
 * Allí vive solo la fontanería del checkout: campos ocultos y el <select> de
 * país. TODO lo visual de carrito y checkout vive aquí. Esta hoja se encola
 * después, así que gana en los empates.
 *
 * IDIOMA: arena = lo recurrente · tinta = los totales · naranja = la acción.
 * ==================================================================== */

/* 1 · TOKENS ————————————————————————————————————————————————————————————
 * Mismos valores que la portada (home-2026.css). Se declaran otra vez porque
 * aquella hoja solo se encola en la plantilla de la portada. */
body.woocommerce-cart,
body.woocommerce-checkout{
	--tlc-ink:oklch(27.2% 0.050 253.1);
	--tlc-ink-soft:oklch(39.0% 0.044 250.2);
	--tlc-muted:oklch(54.7% 0.021 250.7);
	--tlc-accent:oklch(73.2% 0.161 57.2);
	--tlc-accent-deep:oklch(66.7% 0.159 53.9);
	--tlc-accent-icon:oklch(52.0% 0.150 48);
	--tlc-paper:oklch(100% 0 90);
	--tlc-paper-2:oklch(97.6% 0.005 95.1);
	--tlc-paper-3:oklch(94.9% 0.007 88.6);
	--tlc-wash:oklch(96.8% 0.020 70);
	--tlc-wash-edge:oklch(89.0% 0.045 68);
	--tlc-border:oklch(91.3% 0.011 89.7);
	--tlc-border-strong:oklch(86.2% 0.015 84.6);
	--tlc-focus:oklch(27.2% 0.050 253.1);
	--tlc-ok:oklch(52.0% 0.130 152);
	--tlc-err:oklch(51.0% 0.170 27);

	--tlc-font:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
	--tlc-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

	--tlc-xs:0.25rem; --tlc-sm:0.5rem;  --tlc-md:0.75rem;
	--tlc-lg:1rem;    --tlc-xl:1.5rem;  --tlc-2xl:2rem;  --tlc-3xl:3rem;

	--tlc-r-sm:8px;
	--tlc-r-lg:14px;
	--tlc-pill:999px;
	--tlc-ease:cubic-bezier(.33,0,.2,1);
	--tlc-dur:200ms;
}

/* 2 · PASOS · .mfn-checkout-steps (de Betheme) ————————————————————————— */
body.woocommerce-cart .mfn-checkout-steps,
body.woocommerce-checkout .mfn-checkout-steps{
	display:flex;
	align-items:center;
	justify-content:center;
	flex-wrap:wrap;
	gap:var(--tlc-md);
	margin:0 0 var(--tlc-2xl);
	padding:0;
	list-style:none;
}
body.woocommerce-cart .mfn-checkout-steps li,
body.woocommerce-checkout .mfn-checkout-steps li{
	display:inline-flex;
	align-items:center;
	gap:var(--tlc-sm);
	margin:0;
	padding:0;
	list-style:none;
	font-family:var(--tlc-font);
	font-size:0.875rem;
	font-weight:500;
	color:var(--tlc-muted);
	white-space:nowrap;
}
body.woocommerce-cart .mfn-checkout-steps li.active,
body.woocommerce-checkout .mfn-checkout-steps li.active{
	color:var(--tlc-ink);
	font-weight:600;
}
body.woocommerce-cart .mfn-checkout-steps .mfn-step-number,
body.woocommerce-checkout .mfn-checkout-steps .mfn-step-number{
	display:grid;
	place-items:center;
	width:26px;height:26px;
	border-radius:var(--tlc-pill);
	background:var(--tlc-paper-3);
	color:var(--tlc-muted);
	font-size:0.75rem;
	font-weight:700;
	font-variant-numeric:tabular-nums;
}
body.woocommerce-cart .mfn-checkout-steps li.active .mfn-step-number,
body.woocommerce-checkout .mfn-checkout-steps li.active .mfn-step-number{
	background:var(--tlc-accent);
	color:#fff;
}

/* 3 · PANEL — la forma compartida por las dos páginas ——————————————————— */
/* El panel va en el CONTENEDOR (.wc-block-cart__main), nunca en la <table> de
 * las líneas: una tabla no baja de su ancho mínimo, así que el padding se le
 * sumaba por fuera y a 320 px se salía 27 px del viewport. */
body.woocommerce-cart .tlc-panel,
body.woocommerce-checkout .tlc-panel,
body.woocommerce-cart .wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-block,
body.woocommerce-cart .wc-block-cart__main,
body.woocommerce-checkout .woocommerce-billing-fields,
body.woocommerce-checkout .woocommerce-additional-fields{
	background:var(--tlc-paper);
	border:1px solid var(--tlc-border);
	border-radius:var(--tlc-r-lg);
	padding:var(--tlc-xl);
	box-sizing:border-box;
}

/* Rótulo de sección: versalitas pequeñas, nunca un titular más */
body.woocommerce-cart .wc-block-cart-items__header,
body.woocommerce-checkout .woocommerce-checkout-review-order-table thead th{
	font-family:var(--tlc-font);
	font-size:0.6875rem;
	font-weight:600;
	letter-spacing:.12em;
	text-transform:uppercase;
	color:var(--tlc-muted);
}

/* 4 · CARRITO · bloque de WooCommerce —————————————————————————————————— */
body.woocommerce-cart .wc-block-cart{
	font-family:var(--tlc-font);
	color:var(--tlc-ink);
}
body.woocommerce-cart .wc-block-cart-items{
	width:100%;
	margin:0;
	border-collapse:separate;
	border-spacing:0;
	min-width:0;
}
body.woocommerce-cart .wc-block-cart-items__header{
	border-bottom:1px solid var(--tlc-border);
}
body.woocommerce-cart .wc-block-cart-items__header th{
	padding-bottom:var(--tlc-md);
	border:0;
}
body.woocommerce-cart .wc-block-cart-items__row{
	border-bottom:1px solid var(--tlc-border);
}
body.woocommerce-cart .wc-block-cart-items__row:last-child{border-bottom:0;}
body.woocommerce-cart .wc-block-cart-item__wrap,
body.woocommerce-cart .wc-block-cart-items__row td{border:0;}

body.woocommerce-cart .wc-block-cart-item__image img{
	width:64px;height:64px;
	object-fit:cover;
	border-radius:var(--tlc-r-sm);
	background:var(--tlc-wash);
	border:1px solid var(--tlc-border);
}
/* Los dos productos de suscripción (2835 · 2837) NO tienen imagen destacada,
 * así que WooCommerce cuela su marcador gris de 1200 px y el carrito parecía
 * roto. Aquí se sustituye por una baldosa de arena: no inventa una foto de
 * producto que no existe, y el hueco parece una decisión.
 * Esto es un parche visual — la solución de fondo es darles imagen desde la
 * ficha, y entonces esta regla deja de aplicar sola. */
body.woocommerce-cart .wc-block-cart-item__image img[src*="woocommerce-placeholder"]{
	content:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'><rect width='64' height='64' rx='8' fill='%23fdf3e9'/><g transform='translate(20 20)' fill='none' stroke='%23c8935a' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z'/><path d='M12 22V12'/><polyline points='3.29 7 12 12 20.71 7'/><path d='m7.5 4.27 9 5.15'/></g></svg>");
	border-color:var(--tlc-wash-edge);
	background:var(--tlc-wash);
}
body.woocommerce-cart .wc-block-components-product-name{
	font-size:1rem;
	font-weight:600;
	color:var(--tlc-ink);
	text-decoration:none;
}
body.woocommerce-cart .wc-block-components-product-name:hover{color:var(--tlc-accent-deep);}
body.woocommerce-cart .wc-block-cart-item__prices,
body.woocommerce-cart .wc-block-components-product-price{
	font-family:var(--tlc-mono);
	font-variant-numeric:tabular-nums;
	color:var(--tlc-ink);
}
body.woocommerce-cart .wc-block-components-product-metadata{
	color:var(--tlc-muted);
	font-size:0.8125rem;
	line-height:1.5;
}
/* "/ mes" · "/ año" — la cadencia no debe partirse ni pesar como el importe */
body.woocommerce-cart .wps_sfw_interval,
body.woocommerce-checkout .wps_sfw_interval{
	white-space:nowrap;
	font-family:var(--tlc-font);
	font-weight:400;
	color:var(--tlc-muted);
}

/* Selector de cantidad */
body.woocommerce-cart .wc-block-components-quantity-selector{
	border:1px solid var(--tlc-border-strong);
	border-radius:var(--tlc-pill);
	background:var(--tlc-paper);
	overflow:hidden;
}
body.woocommerce-cart .wc-block-components-quantity-selector__input{
	font-family:var(--tlc-mono);
	font-variant-numeric:tabular-nums;
	color:var(--tlc-ink);
	background:transparent;
}
body.woocommerce-cart .wc-block-components-quantity-selector__button{
	color:var(--tlc-ink-soft);
	transition:background var(--tlc-dur) var(--tlc-ease),color var(--tlc-dur) var(--tlc-ease);
}
body.woocommerce-cart .wc-block-components-quantity-selector__button:hover:not(:disabled){
	background:var(--tlc-paper-3);
	color:var(--tlc-ink);
}
body.woocommerce-cart .wc-block-components-quantity-selector__button:disabled{opacity:.4;cursor:not-allowed;}
body.woocommerce-cart .wc-block-cart-item__remove-link{
	color:var(--tlc-muted);
	text-underline-offset:2px;
	transition:color var(--tlc-dur) var(--tlc-ease);
}
body.woocommerce-cart .wc-block-cart-item__remove-link:hover{color:var(--tlc-err);}

/* Resumen (columna derecha) */
body.woocommerce-cart .wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-block{
	position:sticky;
	top:var(--tlc-xl);
}
body.woocommerce-cart .wc-block-cart__totals-title{
	font-family:var(--tlc-font);
	font-size:0.6875rem !important;
	font-weight:600;
	letter-spacing:.12em;
	text-transform:uppercase;
	color:var(--tlc-muted);
	text-align:left;
	margin:0 0 var(--tlc-lg);
}
body.woocommerce-cart .wc-block-components-totals-item{
	font-family:var(--tlc-font);
	color:var(--tlc-ink-soft);
	padding:var(--tlc-sm) 0;
}
body.woocommerce-cart .wc-block-components-totals-item__value{
	font-family:var(--tlc-mono);
	font-variant-numeric:tabular-nums;
	color:var(--tlc-ink);
}
/* El total: la cifra que manda en la página */
body.woocommerce-cart .wc-block-components-totals-footer-item{
	border-top:1px solid var(--tlc-border);
	padding-top:var(--tlc-lg);
	margin-top:var(--tlc-sm);
}
body.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label{
	font-size:0.9375rem;
	font-weight:600;
	color:var(--tlc-ink);
}
body.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
	font-size:1.5rem;
	font-weight:700;
	letter-spacing:-.02em;
	color:var(--tlc-ink);
}

/* Cupón: un desplegable discreto, no un formulario a media página */
body.woocommerce-cart .wc-block-components-panel__button{
	font-family:var(--tlc-font);
	font-size:0.875rem;
	font-weight:500;
	color:var(--tlc-ink-soft);
}
body.woocommerce-cart .wc-block-components-panel__button:hover{color:var(--tlc-accent-deep);}

/* Botón de finalizar */
body.woocommerce-cart .wc-block-cart__submit-container{padding:0;}
body.woocommerce-cart .wc-block-cart__submit-button,
body.woocommerce-cart .wp-block-woocommerce-proceed-to-checkout-block .wc-block-cart__submit-button{
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	min-height:52px;
	margin-top:var(--tlc-lg);
	padding:0 var(--tlc-xl);
	border:1px solid var(--tlc-accent);
	border-radius:var(--tlc-pill);
	background:var(--tlc-accent);
	color:#fff;
	font-family:var(--tlc-font);
	font-size:1rem;
	font-weight:600;
	letter-spacing:.01em;
	text-transform:none;
	text-decoration:none;
	box-shadow:none;
	transition:background var(--tlc-dur) var(--tlc-ease),border-color var(--tlc-dur) var(--tlc-ease);
}
body.woocommerce-cart .wc-block-cart__submit-button:hover{
	background:var(--tlc-accent-deep);
	border-color:var(--tlc-accent-deep);
	color:#fff;
}
body.woocommerce-cart .wc-block-cart__submit-button:focus-visible{
	outline:2px solid var(--tlc-focus);
	outline-offset:3px;
}

/* 5 · CHECKOUT clásico ————————————————————————————————————————————————— */
body.woocommerce-checkout .woocommerce{font-family:var(--tlc-font);color:var(--tlc-ink);}

/* Avisos de login y cupón: dos barras iguales, discretas */
body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info,
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info{
	display:block;
	margin:0 0 var(--tlc-md);
	padding:var(--tlc-md) var(--tlc-lg);
	background:var(--tlc-paper-2);
	border:1px solid var(--tlc-border);
	border-left:3px solid var(--tlc-accent);
	border-radius:var(--tlc-r-sm);
	color:var(--tlc-ink-soft);
	font-size:0.875rem;
	text-align:left;
}
body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info::before,
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before{content:none;}
body.woocommerce-checkout .woocommerce-form-login-toggle a,
body.woocommerce-checkout .woocommerce-form-coupon-toggle a{
	color:var(--tlc-accent-icon);
	font-weight:600;
	text-underline-offset:2px;
}

/* Títulos de sección del formulario.
 * "Tu pedido" necesita los dos IDs: Betheme lo centra con
 * `#order_review #order_review_heading` (0,2,0) y le gana a un solo ID. */
body.woocommerce-checkout .woocommerce-billing-fields > h3,
body.woocommerce-checkout .woocommerce-additional-fields > h3,
body.woocommerce-checkout #order_review #order_review_heading,
body.woocommerce-checkout #order_review_heading{
	font-family:var(--tlc-font);
	font-size:1.25rem;
	font-weight:700;
	letter-spacing:-.02em;
	line-height:1.25;
	color:var(--tlc-ink);
	text-align:left;
	margin:0 0 var(--tlc-lg);
}
body.woocommerce-checkout .woocommerce-billing-fields,
body.woocommerce-checkout .woocommerce-additional-fields{margin-bottom:var(--tlc-xl);}

/* 6 · RESUMEN "Tu pedido" ———————————————————————————————————————————————
 * La tabla pasa a bloques con filas flex. Motivo: el bloque de renovación es
 * un <tr> que hay que sacar de la rejilla para tratarlo como panel, y un <tr>
 * en display:block dentro de una tabla real resuelve su ancho contra la
 * primera columna (390 px en una tabla de 526). Con todo en flex cada fila
 * ocupa el ancho completo. Ojo: con filas flex los filetes van en el <tr>,
 * nunca en th/td, o solo cubren el ancho del texto. */
body.woocommerce-checkout .woocommerce-checkout-review-order-table{
	display:block;
	width:100%;
	margin:0;
	border:1px solid var(--tlc-border);
	border-radius:var(--tlc-r-lg);
	background:var(--tlc-paper);
	padding:var(--tlc-sm) var(--tlc-xl) var(--tlc-xl);
	box-sizing:border-box;
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table thead,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tbody,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot{display:block;}
body.woocommerce-checkout .woocommerce-checkout-review-order-table tr{
	display:flex;
	align-items:baseline;
	justify-content:space-between;
	gap:var(--tlc-md);
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table td{
	border:0;
	padding:var(--tlc-md) 0;
	width:auto;
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table thead tr{
	border-bottom:1px solid var(--tlc-border);
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table thead th{padding-bottom:var(--tlc-md);}
body.woocommerce-checkout .woocommerce-checkout-review-order-table thead th.product-total,
body.woocommerce-checkout .woocommerce-checkout-review-order-table td.product-total,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td{text-align:right;}
body.woocommerce-checkout .woocommerce-checkout-review-order-table tr.cart_item{
	border-bottom:1px solid var(--tlc-paper-3);
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table .cart_item td{
	font-size:0.9375rem;
	color:var(--tlc-ink);
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table td.product-name{font-weight:600;}
body.woocommerce-checkout .woocommerce-checkout-review-order-table .product-quantity{
	display:inline-block;
	margin-left:var(--tlc-xs);
	padding:2px 8px;
	border-radius:var(--tlc-pill);
	background:var(--tlc-paper-3);
	color:var(--tlc-muted);
	font-size:0.75rem;
	font-weight:600;
	vertical-align:middle;
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th{
	font-weight:500;
	font-size:0.875rem;
	color:var(--tlc-muted);
	text-align:left;
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td{
	font-family:var(--tlc-mono);
	font-variant-numeric:tabular-nums;
	color:var(--tlc-ink);
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total{
	border-top:1px solid var(--tlc-border);
	padding-top:2px;
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .order-total th{
	font-size:0.9375rem;font-weight:600;color:var(--tlc-ink);
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .order-total td strong{
	font-family:var(--tlc-mono);
	font-size:1.375rem;font-weight:700;letter-spacing:-.02em;color:var(--tlc-ink);
}
/* WooCommerce cierra el tfoot con un <tr> vacío que dejaba un escalón */
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr:empty{display:none;}
/* El importe llega como `39,99&nbsp;<span>€</span>`: ese espacio duro, a cuerpo
 * de titular, abría un hueco de ~23 px antes del símbolo. */
body.woocommerce-checkout .order-total td strong bdi{word-spacing:-.36em;}
body.woocommerce-checkout .order-total td strong .woocommerce-Price-currencySymbol{
	font-size:1rem;font-weight:700;letter-spacing:-.04em;word-spacing:normal;
}

/* 7 · NOTA DE RENOVACIÓN · .tlc-renewal —————————————————————————————————
 * Marcado propio: lo pinta render_recurring_note() en tlc-woo-checkout.php,
 * que descarta con un búfer el bloque de subscriptions-for-woocommerce. Aquel
 * repetía el Subtotal y el Total del pedido dentro de la propia tabla y, con
 * un carrito de una línea (siempre: las suscripciones van solas), mostraba dos
 * veces la misma cifra. Aquí se dice lo único que hace falta: cuánto y cada
 * cuánto se cobrará DESPUÉS. */
body.woocommerce-checkout tr.tlc-renewal{
	display:block;
	margin-top:var(--tlc-lg);
	padding:var(--tlc-md) var(--tlc-lg);
	background:var(--tlc-wash);
	border:1px solid var(--tlc-wash-edge);
	border-radius:var(--tlc-r-sm);
}
/* El text-align:right de las celdas del tfoot se hereda: hay que anularlo en
 * la celda y en el párrafo, o la nota sale alineada a la derecha. */
body.woocommerce-checkout tr.tlc-renewal td,
body.woocommerce-checkout td.tlc-renewal__cell{
	display:block;width:auto;padding:0;border:0;text-align:left !important;
}
body.woocommerce-checkout .tlc-renewal__text{
	position:relative;
	margin:0;
	padding-left:24px;
	font-family:var(--tlc-font);
	font-size:0.8125rem;
	line-height:1.55;
	text-align:left;
	color:var(--tlc-ink-soft);
}
body.woocommerce-checkout .tlc-renewal__text::before{
	content:"";
	position:absolute;
	left:0;top:2px;
	width:16px;height:16px;
	background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3660f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m17 2 4 4-4 4'/><path d='M3 11v-1a4 4 0 0 1 4-4h14'/><path d='m7 22-4-4 4-4'/><path d='M21 13v1a4 4 0 0 1-4 4H3'/></svg>") no-repeat center/16px 16px;
}
body.woocommerce-checkout .tlc-renewal__amount{
	font-family:var(--tlc-mono);
	font-variant-numeric:tabular-nums;
	font-weight:700;
	color:var(--tlc-ink);
	white-space:nowrap;
}
body.woocommerce-checkout .tlc-renewal__amount .wps_sfw_interval{
	font-family:var(--tlc-font);
	font-weight:500;
	color:var(--tlc-ink-soft);
}

/* 7b · RESPALDO · .wps_recurring_bifurcation_wrapper ————————————————————
 * El bloque original del plugin ya no se pinta (lo descarta el búfer). Estas
 * reglas se quedan como red: si en una actualización cambia el nombre del hook
 * y el búfer deja de capturarlo, el bloque volvería a salir — y al menos
 * saldría presentable en vez de con el <h4> a cuerpo de titular. */
body.woocommerce-checkout tr.wps_recurring_bifurcation_wrapper{
	display:block;
	margin-top:var(--tlc-lg);
	padding:var(--tlc-lg);
	background:var(--tlc-wash);
	border:1px solid var(--tlc-wash-edge);
	border-radius:var(--tlc-r-sm);
}
body.woocommerce-checkout tr.wps_recurring_bifurcation_wrapper th,
body.woocommerce-checkout tr.wps_recurring_bifurcation_wrapper td{
	display:block;
	width:auto;
	padding:0;
	border:0;
	text-align:left;
}
/* Nada de flex en el h4: "Renovación de" y el enlace son dos nodos sueltos y
 * el gap de flex los separaba con un hueco de más. El icono va absoluto. */
body.woocommerce-checkout tr.wps_recurring_bifurcation_wrapper h4{
	display:block;
	position:relative;
	margin:0 0 var(--tlc-md);
	padding-left:24px;
	font-family:var(--tlc-font);
	font-size:0.8125rem;
	font-weight:600;
	line-height:1.4;
	letter-spacing:0;
	text-transform:none;
	color:var(--tlc-ink);
}
body.woocommerce-checkout tr.wps_recurring_bifurcation_wrapper h4::before{
	content:"";
	position:absolute;
	left:0;top:1px;
	width:16px;height:16px;
	background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3660f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m17 2 4 4-4 4'/><path d='M3 11v-1a4 4 0 0 1 4-4h14'/><path d='m7 22-4-4 4-4'/><path d='M21 13v1a4 4 0 0 1-4 4H3'/></svg>") no-repeat center/16px 16px;
}
body.woocommerce-checkout tr.wps_recurring_bifurcation_wrapper h4 br{display:none;}
body.woocommerce-checkout tr.wps_recurring_bifurcation_wrapper h4 a{
	color:var(--tlc-ink);
	text-decoration:underline;
	text-underline-offset:2px;
}
body.woocommerce-checkout tr.wps_recurring_bifurcation_wrapper ul{list-style:none;margin:0;padding:0;}
body.woocommerce-checkout tr.wps_recurring_bifurcation_wrapper ul li{
	display:flex;
	align-items:baseline;
	justify-content:space-between;
	gap:var(--tlc-md);
	margin:0;
	padding:3px 0;
	font-size:0.8125rem;
	color:var(--tlc-ink);
	list-style:none;
}
body.woocommerce-checkout tr.wps_recurring_bifurcation_wrapper ul li label{
	margin:0;
	font-size:0.8125rem;
	font-weight:400;
	color:var(--tlc-muted);
}
body.woocommerce-checkout tr.wps_recurring_bifurcation_wrapper ul li > span{
	font-family:var(--tlc-mono);
	font-variant-numeric:tabular-nums;
	font-weight:600;
	text-align:right;
	white-space:nowrap;
}

/* 8 · PAGO ————————————————————————————————————————————————————————————— */
body.woocommerce-checkout #payment,
body.woocommerce-checkout .woocommerce-checkout-payment{
	background:transparent !important;
	border-radius:var(--tlc-r-lg);
	margin-top:var(--tlc-lg);
}
body.woocommerce-checkout #payment ul.payment_methods{
	padding:0;
	margin:0 0 var(--tlc-lg);
	border:0;
	list-style:none;
}
/* Betheme (css/woocommerce.css) YA envuelve cada método en una tarjeta: le pone
 * borde, radio y un check en la esquina (.mfn-payment-check), y hace el <li>
 * flex. Dibujar otra tarjeta sobre la etiqueta daba caja doble, y como el <li>
 * es flex la etiqueta se encogía a su texto en vez de ocupar la fila. Así que
 * la tarjeta sigue siendo la suya; aquí solo se le cambia la paleta. */
body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method{
	display:block;
	margin:0 0 var(--tlc-sm);
	padding:0;
	list-style:none;
	background:var(--tlc-paper);
	border:1px solid var(--tlc-border);
	border-radius:var(--tlc-r-sm);
	overflow:hidden;
	transition:border-color var(--tlc-dur) var(--tlc-ease);
}
body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:hover{
	border-color:var(--tlc-border-strong);
}
/* Elegido: borde naranja (Betheme usa .active-payment, no :checked — su JS lo
 * pone en el <li>; el radio está oculto y no serviría de ancla). */
body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method.active-payment{
	border-color:var(--tlc-accent);
}
body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > label{
	display:flex;
	align-items:center;
	gap:var(--tlc-sm);
	width:100%;
	margin:0;
	padding:var(--tlc-md) var(--tlc-lg);
	border:0;
	background:transparent;
	font-size:0.9375rem;
	font-weight:500;
	color:var(--tlc-ink);
	cursor:pointer;
	transition:background var(--tlc-dur) var(--tlc-ease);
}
body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method.active-payment > label{
	background:var(--tlc-wash);
}
body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > input:focus-visible + label{
	outline:2px solid var(--tlc-focus);
	outline-offset:-2px;
}
/* El check de Betheme colgaba fuera de la tarjeta (top/right:-10px) y con
 * overflow:hidden se habría cortado: se mete dentro, centrado en la fila. */
body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method .mfn-payment-check{
	right:var(--tlc-lg);
	top:22px;
	background:var(--tlc-accent);
	color:#fff;
	border-color:var(--tlc-accent);
}
/* La caja del método va DENTRO de la tarjeta: se separa con un filete, no con
 * un segundo borde. */
body.woocommerce-checkout #payment div.payment_box{
	margin:0;
	padding:var(--tlc-lg);
	background:var(--tlc-paper);
	border:0;
	border-top:1px solid var(--tlc-border);
	border-radius:0;
	color:var(--tlc-ink-soft);
	font-size:0.875rem;
}
/* Woo dibuja un pico con ::before sobre un fondo que ya no existe */
body.woocommerce-checkout #payment div.payment_box::before{display:none;}

body.woocommerce-checkout .woocommerce-privacy-policy-text,
body.woocommerce-checkout .tlc-privacy-consent{
	font-size:0.8125rem;
	line-height:1.6;
	color:var(--tlc-muted);
}
body.woocommerce-checkout .tlc-privacy-consent label{
	display:flex;
	align-items:flex-start;
	gap:var(--tlc-sm);
	font-size:0.875rem;
	color:var(--tlc-ink-soft);
}

body.woocommerce-checkout #place_order,
body.woocommerce-checkout button#place_order{
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	min-height:54px;
	margin-top:var(--tlc-lg);
	padding:0 var(--tlc-xl);
	border:1px solid var(--tlc-accent);
	border-radius:var(--tlc-pill);
	background:var(--tlc-accent);
	color:#fff;
	font-family:var(--tlc-font);
	font-size:1rem;
	font-weight:600;
	letter-spacing:.01em;
	text-transform:none;
	box-shadow:none;
	cursor:pointer;
	transition:background var(--tlc-dur) var(--tlc-ease),border-color var(--tlc-dur) var(--tlc-ease);
}
body.woocommerce-checkout #place_order:hover{
	background:var(--tlc-accent-deep);
	border-color:var(--tlc-accent-deep);
}
body.woocommerce-checkout #place_order:focus-visible{
	outline:2px solid var(--tlc-focus);
	outline-offset:3px;
}
body.woocommerce-checkout #place_order:disabled{opacity:.6;cursor:progress;}

/* 9 · AVISOS ——————————————————————————————————————————————————————————— */
body.woocommerce-cart .woocommerce-message,
body.woocommerce-checkout .woocommerce-message,
body.woocommerce-cart .woocommerce-error,
body.woocommerce-checkout .woocommerce-error{
	border-radius:var(--tlc-r-sm);
	font-size:0.875rem;
}
body.woocommerce-cart .woocommerce-error,
body.woocommerce-checkout .woocommerce-error{border-top-color:var(--tlc-err);}

/* 10 · RESPONSIVE ——————————————————————————————————————————————————————
 * El bloque del carrito ya apila su rejilla por debajo de 768; aquí solo se
 * ajustan holguras y se evita que el resumen se quede pegado arriba. */
@media (max-width:768px){
	body.woocommerce-cart .wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-block{
		position:static;
		margin-top:var(--tlc-lg);
	}
	body.woocommerce-cart .wc-block-cart__main,
	body.woocommerce-cart .wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-block,
	body.woocommerce-checkout .woocommerce-checkout-review-order-table,
	body.woocommerce-checkout .woocommerce-billing-fields,
	body.woocommerce-checkout .woocommerce-additional-fields{
		padding:var(--tlc-lg);
	}
	/* La foto a 48 px: a 320 el bloque apila la fila y 64 px empujaban el texto */
	body.woocommerce-cart .wc-block-cart-item__image img{width:48px;height:48px;}
	body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .order-total td strong{font-size:1.25rem;}
	body.woocommerce-cart .mfn-checkout-steps,
	body.woocommerce-checkout .mfn-checkout-steps{gap:var(--tlc-sm);}
	body.woocommerce-cart .mfn-checkout-steps li,
	body.woocommerce-checkout .mfn-checkout-steps li{font-size:0.8125rem;}
}

@media (max-width:400px){
	body.woocommerce-cart .wc-block-cart__main,
	body.woocommerce-cart .wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-block,
	body.woocommerce-checkout .woocommerce-checkout-review-order-table,
	body.woocommerce-checkout .woocommerce-billing-fields,
	body.woocommerce-checkout .woocommerce-additional-fields{
		padding:var(--tlc-md);
	}
	body.woocommerce-cart .wc-block-cart-item__image img{width:40px;height:40px;}
}

/* Móviles diminutos (≤360). La <table> de las líneas no baja de su ancho
 * mínimo, y ese mínimo lo subían dos cosas MÍAS: la mono de los precios (más
 * ancha que Poppins) y el padding del panel, que además la empujaba a la
 * derecha. Resultado: el importe se cortaba 6 px. Sin shop.css la tabla medía
 * 284 y cabía, así que el destrozo era nuestro y se arregla aquí.
 * A este ancho las filas van a sangre y el precio suelta la mono: a 320 px la
 * legibilidad vale más que el adorno. De 375 en adelante vuelven las dos. */
@media (max-width:360px){
	body.woocommerce-cart .wc-block-cart__main{
		padding-left:0;
		padding-right:0;
		border:0;
		background:transparent;
		border-radius:0;
	}
	body.woocommerce-cart .wc-block-cart-item__prices,
	body.woocommerce-cart .wc-block-components-product-price{
		font-family:var(--tlc-font);
	}
}

/* 11 · MOVIMIENTO REDUCIDO ————————————————————————————————————————————— */
@media (prefers-reduced-motion:reduce){
	body.woocommerce-cart *,
	body.woocommerce-checkout *{
		transition-duration:.01ms !important;
		animation-duration:.01ms !important;
	}
}