/*
 * Pago (CheckoutWC, plantilla «futurist») con el sistema de Cuadros Sils.
 * Colores, fuentes y logo van por el filtro de inc/pago.php; aquí, la forma:
 * - Pasos como pestañas con línea inferior.
 * - Campos como el formulario de Contacto (gris, sin borde).
 * - Botones como el «Añadir» de la ficha y el «Finalizar compra» del carrito lateral:
 *   negros, radio suave (4 px), 44 px de alto.
 * - El resumen del carrito (el de escritorio y el de móvil), igual que el carrito lateral
 *   (sus reglas están en bricks-child/assets/sils-bricks.css y sils-addons/.../carrito.css;
 *   las de los datos de cada obra y las composiciones, compartidas en carrito.css).
 * - Pedido recibido (página de gracias de CheckoutWC, ver inc/gracias.php): el mismo
 *   resumen con fotos y las composiciones como un bloque, como en el carrito.
 * El carrito lateral NO se toca desde aquí: vive en sils-bricks.css.
 *
 * OJO: en el pago CheckoutWC quita las hojas de Bricks. Allí 1rem son 16 px (no 10 px como
 * en el resto de la web) y la fuente no llega: se declara aquí. Por eso las medidas de este
 * archivo van en em sobre 16 px (1em = 16 px), salvo las del botón (px).
 * Tiene que vivir en una carpeta «checkout-wc» para que CheckoutWC no la quite.
 */

@font-face {
	font-family: "Thoren Sans";
	font-weight: 300;
	font-display: swap;
	src: url("../../../uploads/2026/09/thorensans_light-webfont.woff2") format("woff2");
}

@font-face {
	font-family: "Thoren Sans";
	font-weight: 500;
	font-display: swap;
	src: url("../../../uploads/2026/09/thorensans_medium-webfont.woff2") format("woff2");
}

@font-face {
	font-family: "Crista";
	font-weight: 400;
	font-display: swap;
	src: url("../../../uploads/2026/09/CristaRegular.woff2") format("woff2");
}

/* ── General ──────────────────────────────────────────────────────────────── */

body.checkout-wc {
	font-weight: 300;
	letter-spacing: 0.075em;
}

/* CheckoutWC fija .3px en todo el formulario (main.checkoutwc) y el texto se veía apretado:
   el espaciado del sistema (1,2 px, el de --sils-ls-texto en la web). */
body.checkout-wc main.checkoutwc {
	letter-spacing: 0.075em;
}

body.checkout-wc strong,
body.checkout-wc b {
	font-weight: 500;
}

/* Cabecera: la misma altura que la de la web (70 px) y su logo. */
body.checkout-wc #cfw-header {
	padding: 0;
}

/* Su fila trae márgenes negativos y en móvil ensanchaba la página 5 px. */
body.checkout-wc #cfw-header .row {
	margin-right: 0;
	margin-left: 0;
}

body.checkout-wc #cfw-logo-container .cfw-logo .logo {
	height: 1.75em;
	margin: 1.3em auto;
	background-repeat: no-repeat;
	background-size: contain;
}

/* Títulos: Thoren normal, en mayúsculas, como los de la web. */
body.checkout-wc h1,
body.checkout-wc h2,
body.checkout-wc h3,
body.checkout-wc .cfw-panel-heading {
	color: var(--sils-principal);
	font-weight: 400;
	letter-spacing: 0.03em;
}

body.futurist.checkout-wc h3 {
	margin-bottom: 1.25em;
	font-size: 1.25em;
	font-weight: 400;
}

/* ── Pasos: pestañas con línea inferior ───────────────────────────────────── */
/* Como las pestañas de la web (portada: Vanguard · Obra Gráfica · Obra Original): texto
   normal, sin mayúsculas; la activa en negro con su raya y las demás en gris (21-oct). */

body.futurist.checkout-wc #cfw-breadcrumb {
	justify-content: flex-start;
	gap: 1.75em;
	max-width: none;
	margin: 0 0 2.5em;
	border-bottom: 1px solid var(--sils-linea);
	counter-reset: sils-paso;
}

body.futurist.checkout-wc #cfw-breadcrumb::after,
body.futurist.checkout-wc #cfw-breadcrumb li::before,
body.futurist.checkout-wc #cfw-breadcrumb li:not(:last-child)::after {
	display: none;
}

body.futurist.checkout-wc #cfw-breadcrumb li {
	flex: none;
	width: auto;
	margin: 0;
	background: none;
	font-size: 1em;
	counter-increment: sils-paso;
}

body.futurist.checkout-wc #cfw-breadcrumb li > a {
	position: relative;
	padding: 1em 0 0.9em;
	color: var(--sils-secundario);
	font-size: 1em;
	font-weight: 400;
	letter-spacing: 0.075em;
	text-align: left;
	text-transform: none;
	transition: color 0.2s ease;
}

body.futurist.checkout-wc #cfw-breadcrumb li > a:hover {
	color: var(--sils-principal);
}

body.futurist.checkout-wc #cfw-breadcrumb li > a::before {
	content: counter(sils-paso) ". ";
}

/* La raya de la pestaña activa, sobre la línea de abajo. */
body.futurist.checkout-wc #cfw-breadcrumb li > a::after {
	top: auto;
	bottom: -1px;
	height: 2px;
	background: transparent;
	transition: background-color 0.2s ease;
}

body.futurist.checkout-wc #cfw-breadcrumb li.tab.active > a {
	color: var(--sils-principal);
}

body.futurist.checkout-wc #cfw-breadcrumb li.tab.active > a::after {
	background: var(--sils-principal);
}

@media (max-width: 767.98px) {
	/* En móvil el contenedor deja 5 px y las columnas 20: las pestañas, a 20 como lo demás. */
	body.futurist.checkout-wc #cfw-breadcrumb {
		justify-content: space-between;
		gap: 1em;
		width: auto;
		margin-right: 15px;
		margin-left: 15px;
	}
}

/* ── Campos: gris, sin borde, radio pequeño (como Contacto) ───────────────── */

body.checkout-wc .checkoutwc .form-row input[type="email"],
body.checkout-wc .checkoutwc .form-row input[type="number"],
body.checkout-wc .checkoutwc .form-row input[type="password"],
body.checkout-wc .checkoutwc .form-row input[type="tel"],
body.checkout-wc .checkoutwc .form-row input[type="text"],
body.checkout-wc .checkoutwc .form-row select,
body.checkout-wc .checkoutwc .form-row textarea,
body.checkout-wc #cfw-cart-summary input[type="text"] {
	border: 1px solid var(--sils-fondo-imagenes) !important;
	border-radius: 0.3125em !important;
	background: var(--sils-fondo-imagenes);
	color: var(--sils-texto);
	font-family: "Thoren Sans", sans-serif;
	font-weight: 300;
	letter-spacing: 0.06em;
}

/* Sin las casillas ni los radios: su «marcado» de CheckoutWC es una sombra interior, y al
   quitarla con el foco, la casilla de los términos se quedaba en blanco tras pulsarla. */
body.checkout-wc .checkoutwc .form-row input:not([type="checkbox"]):not([type="radio"]):focus,
body.checkout-wc .checkoutwc .form-row select:focus,
body.checkout-wc .checkoutwc .form-row textarea:focus,
body.checkout-wc #cfw-cart-summary input[type="text"]:focus {
	border-color: var(--sils-principal) !important;
	box-shadow: none !important;
}

body.checkout-wc .checkoutwc .form-row input::placeholder,
body.checkout-wc .checkoutwc .form-row textarea::placeholder {
	color: var(--sils-secundario);
}

body.checkout-wc .checkoutwc .form-row label.cfw-floatable-label {
	color: var(--sils-secundario);
}

body.checkout-wc .select2-container--default .select2-selection--single {
	border: 1px solid var(--sils-fondo-imagenes) !important;
	border-radius: 0.3125em !important;
	background: var(--sils-fondo-imagenes);
}

/* ── Casillas y radios: como los de la web (acceso, Mi cuenta) ────────────── */
/* 16 px, borde gris; marcados, en negro (la casilla, cuadrada y con su marca blanca; el
   radio, con el punto blanco). CheckoutWC los pinta a 18 px, con borde casi blanco y la
   casilla redondeada; su tamaño va con !important. */

body.checkout-wc main.checkoutwc input[type="checkbox"],
body.checkout-wc main.checkoutwc input[type="radio"] {
	width: 16px !important;
	height: 16px !important;
	min-width: 16px !important;
	margin-inline-end: 8px !important;
	border: 1px solid var(--sils-secundario);
	vertical-align: -3px;
}

body.checkout-wc main.checkoutwc input[type="checkbox"] {
	border-radius: 0;
}

body.checkout-wc main.checkoutwc input[type="checkbox"]:checked,
body.checkout-wc main.checkoutwc input[type="radio"]:checked {
	border: 0;
	box-shadow: inset 0 0 0 10px var(--sils-principal);
}

body.checkout-wc main.checkoutwc input[type="checkbox"]:focus-visible,
body.checkout-wc main.checkoutwc input[type="radio"]:focus-visible {
	outline: 1px solid var(--sils-principal);
	outline-offset: 2px;
}

/* ── Botones: como el «Añadir» de la ficha ────────────────────────────────── */

body.checkout-wc .cfw-primary-btn,
body.checkout-wc #place_order {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px; /* Medidas del botón en px: su letra es de 14 px y en em saldrían torcidas. */
	padding: 0 32px;
	border: 0;
	border-radius: 4px;
	background: var(--sils-principal);
	color: var(--sils-blanco);
	font-family: "Thoren Sans", sans-serif;
	font-size: 0.875em;
	font-weight: 500;
	letter-spacing: 0.035em;
	text-transform: uppercase;
	box-shadow: none;
	transition: background-color 0.2s ease;
}

body.checkout-wc .cfw-primary-btn:hover,
body.checkout-wc #place_order:hover {
	border: 0;
	background: color-mix(in srgb, var(--sils-principal) 86%, var(--sils-blanco));
	color: var(--sils-blanco);
}

/* «Finalizar compra» salía de 58 px y letra de 16: CheckoutWC le pone relleno y tamaño con
   un selector más fuerte (#cfw-place-order button…). El mismo botón que los demás. */
body.checkout-wc #cfw-place-order #place_order {
	min-height: 44px;
	padding: 0 32px;
	border: 0;
	border-radius: 4px;
	font-size: 0.875em;
	font-weight: 500;
	letter-spacing: 0.035em;
}

/* Botón del primer paso: como el paso «Envío» está oculto, CheckoutWC lo enseña con
   display:block !important (.cfw-hide-shipping …) y el texto se quedaba arriba. */
body.checkout-wc.cfw-hide-shipping #cfw-customer-info .cfw-continue-to-payment-btn {
	display: inline-flex !important;
}

body.checkout-wc .cfw-primary-btn:focus-visible,
body.checkout-wc #place_order:focus-visible {
	box-shadow: 0 0 0 2px var(--sils-blanco), 0 0 0 3px var(--sils-principal);
}

body.checkout-wc .cfw-secondary-btn {
	border: 1px solid var(--sils-principal);
	border-radius: 4px;
	font-weight: 500;
	letter-spacing: 0.035em;
	text-transform: uppercase;
}

/* ── Avisos: línea a la izquierda, sin cajas de color ─────────────────────── */

body.checkout-wc .cfw-alert {
	border: 0;
	border-left: 2px solid var(--sils-principal);
	border-radius: 0;
	background: var(--sils-gris-claro);
	color: var(--sils-texto);
}

body.checkout-wc .cfw-alert-error {
	border-left-color: var(--bricks-text-danger, #b3261e);
}

/* ── Pasos: filas cortadas, no cajas ──────────────────────────────────────── */
/* El resumen de datos (Contacto · Enviar a · Método), los métodos de envío y de pago y la
   dirección de facturación iban en cajas con borde y esquinas redondeadas: ahora, filas
   separadas por la línea fina de la web, a sangre y sin radio (21-oct). */

body.checkout-wc .cfw-review-pane,
body.checkout-wc ul.cfw-shipping-methods-list,
body.checkout-wc .cfw-accordion .cfw-radio-reveal-group {
	border: 0;
	border-top: 1px solid var(--sils-linea);
	border-bottom: 1px solid var(--sils-linea);
	border-radius: 0;
}

body.checkout-wc .cfw-review-pane li:not(:first-child) > div,
body.checkout-wc ul.cfw-shipping-methods-list li,
body.checkout-wc .cfw-accordion .cfw-radio-reveal-li,
body.checkout-wc .cfw-accordion .cfw-radio-reveal-content {
	border-color: var(--sils-linea);
}

body.checkout-wc .cfw-review-pane li {
	padding: 0;
}

body.checkout-wc .cfw-review-pane li .cfw-review-pane-label {
	color: var(--sils-secundario);
	font-weight: 300;
}

body.checkout-wc .cfw-review-pane li .cfw-review-pane-content {
	color: var(--sils-texto);
}

body.checkout-wc .cfw-review-pane li .cfw-review-pane-link a {
	color: var(--sils-secundario);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 0.2s ease;
}

body.checkout-wc .cfw-review-pane li .cfw-review-pane-link a:hover {
	color: var(--sils-principal);
}

body.checkout-wc ul.cfw-shipping-methods-list li {
	padding: 1em 0;
	border-radius: 0;
}

body.checkout-wc .cfw-accordion .cfw-radio-reveal-li,
body.checkout-wc .cfw-accordion .cfw-radio-reveal-title-wrap,
body.checkout-wc .cfw-accordion .cfw-radio-reveal-content {
	border-radius: 0 !important;
}

body.checkout-wc .cfw-accordion .cfw-radio-reveal-title-wrap {
	padding: 1em 0;
	background: transparent;
}

/* Lo que se abre bajo la opción (el texto del pago, el formulario de facturación): sin el
   panel gris con borde, debajo de su fila. */
body.checkout-wc .cfw-accordion .cfw-radio-reveal-content {
	padding: 0 0 1em;
	border-top: 0;
	background: transparent;
}

body.checkout-wc .cfw-accordion .cfw-radio-reveal-content p,
body.checkout-wc .cfw-accordion .cfw-radio-reveal-content label {
	color: var(--sils-texto);
	font-weight: 300;
	line-height: 1.5;
}

body.checkout-wc .cfw-accordion .cfw-radio-reveal-content p {
	font-size: 0.875em;
}

/* ── Pasos: textos pequeños ───────────────────────────────────────────────── */

/* «Todas las transacciones son seguras…» y «Seleccione la dirección…»: ayudas en gris, no
   rótulos en mayúsculas. */
body.checkout-wc .secure-notice,
body.checkout-wc .cfw-billing-address-description {
	color: var(--sils-secundario);
	text-transform: none;
}

/* Privacidad y términos: «Texto pequeño», como las casillas del resto de la web (iban a
   16 px y los términos, más gruesos). Los enlaces, subrayados. */
body.checkout-wc .woocommerce-privacy-policy-text p,
body.checkout-wc .woocommerce-terms-and-conditions-checkbox-text {
	font-size: 0.875em;
	font-weight: 300;
	line-height: 1.5;
}

body.checkout-wc :is(.woocommerce-privacy-policy-text, .woocommerce-terms-and-conditions-checkbox-text) a {
	font-weight: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* La casilla, arriba a la izquierda aunque el texto ocupe dos líneas (móvil). */
body.checkout-wc .woocommerce-terms-and-conditions-wrapper .woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: flex-start;
}

body.checkout-wc .woocommerce-terms-and-conditions-wrapper .woocommerce-form__label-for-checkbox input {
	flex: none;
	margin-top: 2px;
	vertical-align: 0;
}

/* «« Volver a…»: enlace de texto pequeño subrayado, como los secundarios de la web. */
body.checkout-wc .cfw-bottom-controls .previous-button a {
	color: var(--sils-texto);
	font-size: 0.875em;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ── Resumen del carrito: igual que el carrito lateral ────────────────────── */

body.futurist.checkout-wc #cfw-cart-summary #cfw-cart-summary-content > h3 {
	margin-bottom: 0;
	padding-bottom: 1em;
	border-bottom: 0;
}

/* Cada obra: 16 px de aire, línea gris encima (la de las filas del lateral). */
body.checkout-wc :is(#cfw-cart-summary, #cfw-mobile-cart-summary) .cfw-cart-table .cart-item-row {
	letter-spacing: 0.075em;
}

body.checkout-wc :is(#cfw-cart-summary, #cfw-mobile-cart-summary) .cfw-cart-table .cart-item-row > td,
body.checkout-wc :is(#cfw-cart-summary, #cfw-mobile-cart-summary) .cfw-cart-table .cart-item-row > th {
	padding-top: 1em;
	padding-bottom: 1em;
	border-top: 1px solid #d3d4d5;
	background: transparent;
}

body.checkout-wc :is(#cfw-cart-summary, #cfw-mobile-cart-summary) .cfw-cart-table .cart-item-row .cfw-cart-item-image img {
	width: 4em !important;
	border: 0;
	object-fit: fill;
}

/* En el pago, cada obra en flex como en el lateral (foto | texto | precio), no en tabla: la
   columna del precio quitaba ancho también a las obras de una composición, que no tienen
   precio, y sus datos se partían en cuatro o cinco líneas (21-oct). La línea y el aire pasan
   de las celdas a la fila. La fila va sin «body.checkout-wc» a propósito: las reglas de la
   composición (sils-addons, carrito.css) tienen que poder ganarle. La página de gracias
   sigue en tabla (ver «Pedido recibido»). */
#cfw.context-checkout .cfw-cart-table .cart-item-row {
	display: flex;
	align-items: center;
	padding: 1em 0;
	border-top: 1px solid #d3d4d5;
}

body.checkout-wc #cfw.context-checkout .cfw-cart-table .cart-item-row > td,
body.checkout-wc #cfw.context-checkout .cfw-cart-table .cart-item-row > th {
	padding-top: 0;
	padding-bottom: 0;
	border-top: 0;
}

body.checkout-wc #cfw.context-checkout .cfw-cart-table .cart-item-row .cfw-cart-item-image {
	flex: none;
	width: 4em;
}

body.checkout-wc #cfw.context-checkout .cfw-cart-table .cart-item-row .cfw-cart-item-description {
	flex: 1 1 0;
	min-width: 0;
}

body.checkout-wc #cfw.context-checkout .cfw-cart-table .cart-item-row .cfw-cart-item-subtotal {
	flex: none;
	padding-left: 1em;
	text-align: right;
}

body.checkout-wc #cfw.context-checkout .cfw-cart-table .cart-item-row .cfw-cart-item-subtotal:empty {
	padding-left: 0;
}

/* En escritorio, el resumen cabe en la pantalla, como el carrito lateral: «Tu carrito» arriba,
   los totales abajo y SOLO la lista de obras se desplaza (21-oct). Con muchas obras, la
   columna crecía hasta 2.000 px y había que bajar mucho junto a un formulario vacío.
   - Alto máximo: la ventana menos lo que queda encima de la caja al cargar (cabecera y pasos,
     182 px) y un poco de aire (13em = 208 px); así se ve entera sin bajar. Nunca menos de
     25em. Si el formulario es más alto (paso de pago), la caja se queda fija al bajar
     (CheckoutWC ya la marca como «sticky»).
   - CheckoutWC fuerza la caja como bloque con !important (para su desplegable de móvil): en
     escritorio hay que ganarle igual para ponerla en columna.
   - La lista es la referencia de las celdas ocultas de CheckoutWC (la cantidad, solo para
     lectores de pantalla): si no, se colocaban respecto a la columna, se salían del recorte
     y alargaban la página por debajo del pie.
   - La línea bajo «Tu carrito» pasa de la primera obra al título, para que no se vaya al
     desplazar la lista; y los totales llevan una línea encima, como el pie del lateral. */
@media (min-width: 992px) {
	body.checkout-wc #cfw.context-checkout #cfw-cart-summary-content {
		display: flex !important;
		flex-direction: column;
		top: 1.5em;
		max-height: max(calc(100dvh - 13em), 25em);
	}

	body.checkout-wc #cfw.context-checkout #cfw-cart-summary-content > * {
		flex: none;
	}

	body.checkout-wc #cfw.context-checkout #cfw-cart {
		position: relative;
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	body.futurist.checkout-wc #cfw.context-checkout #cfw-cart-summary #cfw-cart-summary-content > h3 {
		border-bottom: 1px solid #d3d4d5;
	}

	#cfw.context-checkout #cfw-cart .cfw-cart-table .cart-item-row:first-child {
		border-top: 0;
	}

	body.checkout-wc #cfw.context-checkout #cfw-cart .cfw-cart-table {
		margin-bottom: 0;
	}

	body.checkout-wc #cfw.context-checkout #cfw-cart-summary-totals {
		border-top: 1px solid var(--sils-linea);
	}
}

body.checkout-wc :is(#cfw-cart-summary, #cfw-mobile-cart-summary) .cfw-cart-item-title {
	font-weight: 400;
}

body.checkout-wc :is(#cfw-cart-summary, #cfw-mobile-cart-summary) .cfw-cart-table .cart-item-row .cfw-cart-item-description .cfw-cart-item-data,
body.checkout-wc :is(#cfw-cart-summary, #cfw-mobile-cart-summary) .cfw-cart-table .cart-item-row .cfw-cart-item-image .cfw-cart-item-quantity-bubble {
	font-size: 0.8em;
}

body.checkout-wc :is(#cfw-cart-summary, #cfw-mobile-cart-summary) .cfw-cart-item-subtotal .amount {
	font-weight: 500;
	white-space: nowrap;
}

/* El contador de cantidad, bajo como en el lateral. */
body.checkout-wc :is(#cfw-cart-summary, #cfw-mobile-cart-summary) .cfw-quantity-stepper {
	height: auto;
}

body.checkout-wc :is(#cfw-cart-summary, #cfw-mobile-cart-summary) .cfw-quantity-stepper .cfw-quantity-stepper-btn-minus,
body.checkout-wc :is(#cfw-cart-summary, #cfw-mobile-cart-summary) .cfw-quantity-stepper .cfw-quantity-stepper-btn-plus {
	min-height: 20px;
	height: 20px;
	background: transparent;
}

body.checkout-wc :is(#cfw-cart-summary, #cfw-mobile-cart-summary) .cfw-quantity-stepper .cfw-quantity-stepper-btn-minus {
	border-right: none;
}

body.checkout-wc :is(#cfw-cart-summary, #cfw-mobile-cart-summary) .cfw-quantity-stepper .cfw-quantity-stepper-btn-plus {
	border-left: none;
}

/* Totales: etiqueta pequeña en mayúsculas y gris, importe a la derecha; el total, un
   paso mayor con una línea fina encima (no la raya negra de 2 px de CheckoutWC). */
body.checkout-wc :is(#cfw-cart-summary, #cfw-mobile-cart-summary) .cfw-totals-list table tr {
	border: 0;
	color: var(--sils-secundario);
}

body.checkout-wc :is(#cfw-cart-summary, #cfw-mobile-cart-summary) .cfw-totals-list table th,
body.checkout-wc :is(#cfw-cart-summary, #cfw-mobile-cart-summary) .cfw-totals-list table td {
	padding: 0.25em 0;
	vertical-align: baseline;
}

body.checkout-wc :is(#cfw-cart-summary, #cfw-mobile-cart-summary) .cfw-totals-list table th {
	font-size: 0.75em;
	font-weight: 300;
	letter-spacing: 0.15em;
	text-align: left;
	text-transform: uppercase;
}

body.checkout-wc :is(#cfw-cart-summary, #cfw-mobile-cart-summary) .cfw-totals-list table td,
body.checkout-wc :is(#cfw-cart-summary, #cfw-mobile-cart-summary) .cfw-totals-list table td .amount {
	color: var(--sils-texto);
	font-size: 0.875em;
	font-weight: 500;
	letter-spacing: 0.035em;
	text-align: right;
	white-space: nowrap;
}

body.checkout-wc :is(#cfw-cart-summary, #cfw-mobile-cart-summary) .cfw-totals-list table td .amount {
	font-size: 1em;
}

body.checkout-wc :is(#cfw-cart-summary, #cfw-mobile-cart-summary) .cfw-totals-list table tr.order-total {
	padding: 0;
	border-top: 1px solid var(--sils-linea);
	color: var(--sils-texto);
}

body.checkout-wc :is(#cfw-cart-summary, #cfw-mobile-cart-summary) .cfw-totals-list table tr.order-total th,
body.checkout-wc :is(#cfw-cart-summary, #cfw-mobile-cart-summary) .cfw-totals-list table tr.order-total td,
body.checkout-wc :is(#cfw-cart-summary, #cfw-mobile-cart-summary) .cfw-totals-list table tr.order-total td .amount {
	padding-top: 0.75em;
	color: var(--sils-texto);
	font-size: 1.1875em;
	font-weight: 500;
	letter-spacing: 0.03em;
	text-transform: none;
}

body.checkout-wc :is(#cfw-cart-summary, #cfw-mobile-cart-summary) .cfw-totals-list table tr.order-total td .amount {
	padding-top: 0;
	font-size: 1em;
}

body.checkout-wc :is(#cfw-cart-summary, #cfw-mobile-cart-summary) .cfw-totals-list table tr.order-total strong {
	font-weight: 500;
}

/* Tablas del resumen y totales: Woo y el kit les ponen otra fuente. El resumen de móvil
   va dentro de un envoltorio de CheckoutWC (.cfw-tw) que pone la fuente del sistema. */
body.checkout-wc #cfw-mobile-cart-summary,
body.checkout-wc :is(#cfw-cart-summary, #cfw-mobile-cart-summary) table,
body.checkout-wc :is(#cfw-cart-summary, #cfw-mobile-cart-summary) th,
body.checkout-wc :is(#cfw-cart-summary, #cfw-mobile-cart-summary) td,
body.checkout-wc #cfw-mobile-cart-header {
	font-family: "Thoren Sans", sans-serif;
}

body.checkout-wc #cfw-mobile-cart-header .cfw-arrow {
	fill: var(--sils-principal);
}

/* ── Pedido recibido ──────────────────────────────────────────────────────── */
/* Página de gracias de CheckoutWC. Nada de cajas: secciones separadas por una línea fina,
   como las páginas «Editorial» de la web. */

body.checkout-wc #cfw.context-thank-you #order_review {
	padding-top: 2.5em;
}

/* El resumen puede ser muy largo (una composición son muchas obras): en escritorio, la
   columna del agradecimiento se queda a la vista al bajar. */
@media (min-width: 992px) {
	body.checkout-wc #cfw.context-thank-you #order_review {
		position: sticky;
		top: 0;
		align-self: flex-start;
	}
}

/* Número de pedido como etiqueta y el agradecimiento como título de página (Crista). */
body.checkout-wc #cfw.context-thank-you #order_review > .title {
	display: flex;
	flex-direction: column-reverse;
	align-items: flex-start;
	gap: 0.75em;
	margin-bottom: 2.5em;
	padding: 0;
}

body.checkout-wc #cfw.context-thank-you #order_review > .title .cfw-checkmark {
	display: none;
}

body.checkout-wc #cfw.context-thank-you #order_review > .title h4 {
	margin: 0;
	color: var(--sils-principal);
	font-family: "Crista", serif;
	font-size: 2.5em;
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: 0;
	text-transform: uppercase;
	text-wrap: balance;
}

body.checkout-wc #cfw.context-thank-you #order_review > .title h5 {
	margin: 0;
	color: var(--sils-secundario);
	font-size: 0.75em;
	font-weight: 300;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

/* Secciones: línea fina arriba, sin marco. */
body.checkout-wc #cfw.context-thank-you #order_review > section {
	margin-top: 0;
	margin-bottom: 0;
	padding: 1.75em 0;
	border: 0;
	border-top: 1px solid var(--sils-linea);
	border-radius: 0;
	background: transparent;
}

body.checkout-wc #cfw.context-thank-you #order_review > section .inner {
	padding: 0;
	border: 0;
}

body.checkout-wc #cfw.context-thank-you #order_review > section:first-of-type {
	border-top-color: var(--sils-principal);
}

body.checkout-wc #cfw.context-thank-you #order_review section h3 {
	margin: 0 0 1em;
	font-size: 1em;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

body.checkout-wc #cfw.context-thank-you #order_review section h6 {
	margin: 0 0 0.5em;
	color: var(--sils-secundario);
	font-size: 0.75em;
	font-weight: 300;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

body.checkout-wc #cfw.context-thank-you #order_review section p,
body.checkout-wc #cfw.context-thank-you #order_review section address {
	margin: 0 0 1.5em;
	color: var(--sils-texto);
	font-size: 0.875em;
	font-style: normal;
	line-height: 1.6;
}

body.checkout-wc #cfw.context-thank-you #order_review section .row:last-of-type p,
body.checkout-wc #cfw.context-thank-you .cfw-order-updates p {
	margin-bottom: 0;
}

/* Estado del pedido: una línea con un punto por paso; el actual, negro. */
body.checkout-wc #cfw.context-thank-you .status-row {
	padding: 0;
}

body.checkout-wc #cfw.context-thank-you .status-steps {
	display: grid;
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.checkout-wc #cfw.context-thank-you .status-steps .status-step {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.25em;
	align-items: flex-start;
	justify-content: flex-start;
	max-width: none;
	margin: 0;
	padding: 1.5em 1em 0 0;
	color: var(--sils-secundario);
	text-align: left;
}

body.checkout-wc #cfw.context-thank-you .status-steps .status-step::before,
body.checkout-wc #cfw.context-thank-you .status-steps .status-step::after {
	content: "";
	position: absolute;
	top: 0.3125em;
	left: 0;
	right: 0;
	width: auto;
	height: 1px;
	margin: 0;
	border: 0;
	background: var(--sils-linea);
}

body.checkout-wc #cfw.context-thank-you .status-steps .status-step::after {
	top: 0;
	right: auto;
	width: 0.6875em;
	height: 0.6875em;
	border: 1px solid var(--sils-linea);
	border-radius: 50%;
	background: var(--sils-blanco);
}

body.checkout-wc #cfw.context-thank-you .status-steps .status-step i {
	display: none;
}

body.checkout-wc #cfw.context-thank-you .status-steps .status-step .title {
	margin: 0;
	color: inherit;
	font-size: 0.8125em;
	line-height: 1.4;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

body.checkout-wc #cfw.context-thank-you .status-steps .status-step .date {
	padding: 0;
	color: var(--sils-secundario);
	font-size: 0.8125em;
}

body.checkout-wc #cfw.context-thank-you .status-steps .status-step-selected {
	color: var(--sils-principal);
}

body.checkout-wc #cfw.context-thank-you .status-steps .status-step-selected::after {
	border-color: var(--sils-principal);
	background: var(--sils-principal);
}

body.checkout-wc #cfw.context-thank-you .status-steps .status-step-selected .title {
	font-weight: 500;
}

/* Botones: «Ver mis pedidos» (línea) y «Seguir comprando» (negro), a la derecha. */
body.checkout-wc #cfw.context-thank-you .sils-gracias-botones {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 12px;
	margin-top: 0;
	margin-bottom: 0;
	padding: 1.75em 0 2.5em;
	border-top: 1px solid var(--sils-linea);
}

body.checkout-wc #cfw.context-thank-you .sils-gracias-botones a {
	flex: 0 0 auto;
	width: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	margin: 0;
	padding: 0 32px;
	border-radius: 4px;
	font-size: 0.875em;
	font-weight: 500;
	letter-spacing: 0.035em;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease;
}

body.checkout-wc #cfw.context-thank-you .sils-gracias-botones .cfw-secondary-btn {
	border: 1px solid var(--sils-principal);
	background: var(--sils-blanco);
	color: var(--sils-principal);
}

body.checkout-wc #cfw.context-thank-you .sils-gracias-botones .cfw-secondary-btn:hover {
	background: var(--sils-principal);
	color: var(--sils-blanco);
}

/* Móvil y tableta: el resumen, desplegado y justo después del estado (las obras son lo
   importante); después, el seguimiento, los datos y los botones, a lo ancho. */
@media (max-width: 991.98px) {
	body.checkout-wc #cfw.context-thank-you > .row {
		flex-direction: column;
	}

	body.checkout-wc #cfw.context-thank-you #order_review {
		display: contents;
	}

	body.checkout-wc #cfw.context-thank-you #order_review > * {
		order: 5;
		margin-right: 20px;
		margin-left: 20px;
	}

	body.checkout-wc #cfw.context-thank-you #order_review > .title {
		order: 1;
		margin-top: 2em;
	}

	body.checkout-wc #cfw.context-thank-you #order_review > .cfw-order-status {
		order: 2;
	}

	body.checkout-wc #cfw.context-thank-you #cfw-cart-summary {
		order: 3;
		margin: 0 0 1em;
		padding: 0;
	}

	body.checkout-wc #cfw.context-thank-you #cfw-mobile-cart-header {
		display: none !important;
	}

	body.checkout-wc #cfw.context-thank-you #cfw-cart-summary #cfw-cart-summary-content {
		display: block !important;
		padding: 1.5em 20px;
		background: var(--sils-gris-claro);
	}

	body.checkout-wc #cfw.context-thank-you #order_review > .cfw-order-updates {
		order: 4;
	}

	body.checkout-wc #cfw.context-thank-you #order_review > .sils-gracias-botones {
		order: 6;
		flex-direction: column;
		align-items: stretch;
	}

	body.checkout-wc #cfw.context-thank-you .sils-gracias-botones a {
		width: 100%;
	}
}

@media (max-width: 767.98px) {
	body.checkout-wc #cfw.context-thank-you #order_review > .title h4 {
		font-size: 1.875em;
	}
}

/* Resumen del pedido: los datos de cada obra en una línea (etiqueta en gris). */
body.checkout-wc #cfw.context-thank-you #cfw-cart-summary .wc-item-meta {
	margin: 0.25em 0 0;
	padding: 0;
	list-style: none;
	line-height: 1.5;
}

body.checkout-wc #cfw.context-thank-you #cfw-cart-summary .wc-item-meta li {
	display: inline;
	margin: 0;
	padding: 0;
}

body.checkout-wc #cfw.context-thank-you #cfw-cart-summary .wc-item-meta li + li::before {
	content: " · ";
	color: var(--sils-secundario);
}

/* «Obra adaptada: Ver imagen» (Sils Addons), en su propia línea: la etiqueta con su enlace. */
body.checkout-wc #cfw.context-thank-you #cfw-cart-summary .wc-item-meta li:has(.sils-vista-enlace) {
	display: block;
	margin-top: 0.25em;
}

body.checkout-wc #cfw.context-thank-you #cfw-cart-summary .wc-item-meta li:has(.sils-vista-enlace)::before {
	content: none;
}

body.checkout-wc #cfw.context-thank-you #cfw-cart-summary .wc-item-meta .wc-item-meta-label {
	color: var(--sils-secundario);
	font-weight: 300;
}

body.checkout-wc #cfw.context-thank-you #cfw-cart-summary .wc-item-meta p {
	display: inline;
	margin: 0;
	font-weight: 400;
}

/* Composición: su línea arriba y sus obras debajo, sangradas, con la foto pequeña, sin
   cantidad ni precio (lo lleva la composición) y sin línea entre ellas. */
body.checkout-wc #cfw.context-thank-you #cfw-cart-summary .cart-item-row.sils-compo-hijo > td,
body.checkout-wc #cfw.context-thank-you #cfw-cart-summary .cart-item-row.sils-compo-hijo > th {
	padding-top: 0.375em;
	padding-bottom: 0.375em;
	border-top: 0;
}

body.checkout-wc #cfw.context-thank-you #cfw-cart-summary .cart-item-row.sils-compo-hijo:not(:has(+ .sils-compo-hijo)) > * {
	padding-bottom: 1em;
}

body.checkout-wc #cfw.context-thank-you #cfw-cart-summary .cart-item-row.sils-compo-hijo .cfw-cart-item-image {
	text-align: right;
}

body.checkout-wc #cfw.context-thank-you #cfw-cart-summary .cart-item-row.sils-compo-hijo .cfw-cart-item-image img {
	width: 2em !important;
	max-width: 2em !important;
	height: auto !important;
}

body.checkout-wc #cfw.context-thank-you #cfw-cart-summary .cart-item-row.sils-compo-hijo .cfw-cart-item-quantity-bubble,
body.checkout-wc #cfw.context-thank-you #cfw-cart-summary .cart-item-row.sils-compo-hijo .cfw-cart-item-subtotal > * {
	display: none;
}

body.checkout-wc #cfw.context-thank-you #cfw-cart-summary .cart-item-row.sils-compo-hijo .cfw-cart-item-description {
	position: relative;
	padding-left: 1.75em;
}

/* La guía vertical que une las obras con su composición. */
body.checkout-wc #cfw.context-thank-you #cfw-cart-summary .cart-item-row.sils-compo-hijo .cfw-cart-item-description::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0.75em;
	width: 1px;
	background: var(--sils-linea);
}

body.checkout-wc #cfw.context-thank-you #cfw-cart-summary .cart-item-row.sils-compo-hijo .cfw-cart-item-title {
	font-size: 0.875em;
}

/* La pared de «Crea tu pared»: su foto, del ancho de las demás. */
body.checkout-wc #cfw.context-thank-you #cfw-cart-summary .sils-conjunto__foto {
	width: 4em !important;
	height: auto;
	border: 1px solid var(--sils-linea);
}

/* ── Pie ──────────────────────────────────────────────────────────────────── */

body.checkout-wc #cfw-footer {
	font-size: 0.75em;
	letter-spacing: 0.08em;
}

body.checkout-wc #cfw-footer a {
	color: var(--sils-blanco);
	opacity: 0.7;
}

body.checkout-wc #cfw-footer a:hover {
	opacity: 1;
}