/**
 * Checkout: una sola hoja, cargada solo en la página de pago.
 *
 * Al estilo de un checkout de Shopify (el mismo reparto que el de Barique):
 * página de 1120 px, datos y pago a la izquierda, resumen de 400 px a la
 * derecha; campos de dos en dos con etiqueta flotante (el orden lo pone
 * CM_Checkout::pares()), cupón como una línea de texto y los medios de pago
 * en una sola caja con separadores.
 */

:root {
	--cm-co-tinta: #1d1d1f;
	--cm-co-gris: #6e6e73;
	--cm-co-borde: #d2d2d7;
	--cm-co-azul: #0048e6;
	--cm-co-azul-suave: #f2f6ff;
	--cm-co-fondo: #f5f5f7;
	--cm-co-radio: 10px;
}

/* ------------------------------------------------------------------ */
/* Lienzo                                                              */
/* ------------------------------------------------------------------ */

body.woocommerce-checkout,
body.woocommerce-checkout .wd-page-content.main-page-wrapper {
	background: #fff !important;
}

/* Página de 1120 px de contenido (más los 15 px de margen del tema), y la
   cabecera alineada con ella: a pantalla completa el formulario quedaba
   lejos del resumen y el logo pegado al borde. */
body.woocommerce-checkout .wd-content-layout.container,
body.woocommerce-checkout .whb-header .container {
	max-width: 1150px;
}

/* El logo y el carrito, en el mismo borde que el contenido: las columnas
   de la cabecera llevan -10 px de margen y se salían de la línea. */
body.woocommerce-checkout .whb-header .container {
	padding-left: 25px;
	padding-right: 25px;
}

/* Sin avisos de compras ajenas mientras alguien está pagando. */
body.woocommerce-checkout .notificationx-frontend,
body.woocommerce-checkout .nx-notification,
body.woocommerce-checkout [class*="notificationx-"] {
	display: none !important;
}

/* ------------------------------------------------------------------ */
/* Títulos de sección                                                  */
/* ------------------------------------------------------------------ */

body.woocommerce-checkout .woocommerce-billing-fields > h3,
body.woocommerce-checkout .woocommerce-shipping-fields > h3:not(#ship-to-different-address),
body.woocommerce-checkout .woocommerce-additional-fields > h3,
body.woocommerce-checkout .elementor-widget-wd_title .woodmart-title-container {
	font-size: 21px !important;
	font-weight: 600 !important;
	line-height: 1.15 !important;
	letter-spacing: -.01em;
	text-transform: none !important;
	color: var(--cm-co-tinta);
	margin: 0 0 14px !important;
}

body.woocommerce-checkout .elementor-widget-wd_title .title-wrapper {
	margin-bottom: 0 !important;
}

/* ------------------------------------------------------------------ */
/* Campos con etiqueta flotante                                        */
/* ------------------------------------------------------------------ */

body.woocommerce-checkout .form-row {
	position: relative;
	margin-bottom: 12px !important;
	padding: 0;
}

body.woocommerce-checkout .form-row .woocommerce-input-wrapper {
	display: block;
}

body.woocommerce-checkout .form-row .input-text,
body.woocommerce-checkout .form-row select,
body.woocommerce-checkout .form-row .select2-container .select2-selection--single {
	width: 100%;
	height: 56px !important;
	padding: 22px 14px 6px !important;
	border: 1px solid var(--cm-co-borde) !important;
	border-radius: var(--cm-co-radio) !important;
	background: #fff !important;
	color: var(--cm-co-tinta);
	/* 16 px: con menos, el iPhone hace zoom al tocar el campo. */
	font-size: 16px !important;
	line-height: 1.3;
	box-shadow: none !important;
	transition: border-color .15s ease, box-shadow .15s ease;
}

body.woocommerce-checkout .form-row textarea.input-text {
	height: auto !important;
	min-height: 110px;
	padding-top: 26px !important;
	resize: vertical;
}

body.woocommerce-checkout .form-row .input-text:focus,
body.woocommerce-checkout .form-row select:focus,
body.woocommerce-checkout .form-row .select2-container--open .select2-selection--single,
body.woocommerce-checkout .form-row .select2-container--focus .select2-selection--single {
	border-color: var(--cm-co-azul) !important;
	box-shadow: 0 0 0 3px rgba(0, 72, 230, .12) !important;
	outline: none;
}

/* La etiqueta vive dentro del campo y se encoge arriba cuando hay texto. */
body.woocommerce-checkout .form-row > label {
	position: absolute;
	left: 15px;
	top: 18px;
	margin: 0;
	z-index: 2;
	pointer-events: none;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.3;
	color: var(--cm-co-gris);
	transition: top .15s ease, font-size .15s ease;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: calc(100% - 30px);
}

body.woocommerce-checkout .form-row > label .required {
	color: var(--cm-co-gris);
	text-decoration: none;
}

body.woocommerce-checkout .form-row > label .optional {
	font-size: .85em;
}

body.woocommerce-checkout .form-row:has(.input-text:focus) > label,
body.woocommerce-checkout .form-row:has(.input-text:not(:placeholder-shown)) > label,
body.woocommerce-checkout .form-row:has(select) > label,
body.woocommerce-checkout .form-row:has(textarea) > label {
	top: 8px;
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .01em;
}

/* Sin :has() (navegadores viejos) la etiqueta vuelve a ir encima del campo. */
@supports not selector(:has(a)) {
	body.woocommerce-checkout .form-row > label {
		position: static;
		display: block;
		margin-bottom: 6px;
	}
	body.woocommerce-checkout .form-row .input-text,
	body.woocommerce-checkout .form-row select,
	body.woocommerce-checkout .form-row .select2-container .select2-selection--single {
		padding: 13px 14px !important;
	}
}

/* Casillas: la etiqueta va al lado, como siempre. */
body.woocommerce-checkout .form-row:has(input[type="checkbox"]) > label,
body.woocommerce-checkout #ship-to-different-address label {
	position: static;
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: var(--cm-co-tinta);
	pointer-events: auto;
	white-space: normal;
	max-width: none;
	margin: 0;
}

body.woocommerce-checkout .form-row:has(input[type="checkbox"]) > label span::before,
body.woocommerce-checkout #ship-to-different-address label span::before {
	display: none;
}

body.woocommerce-checkout input[type="checkbox"].input-checkbox,
body.woocommerce-checkout input[type="radio"].input-radio,
body.woocommerce-checkout input[type="radio"].shipping_method {
	appearance: auto;
	-webkit-appearance: auto;
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--cm-co-azul);
	flex: none;
	position: static;
	opacity: 1;
}

/* "¿Crear una cuenta?" y "¿Enviar a otra dirección?": dos líneas seguidas,
   sin el hueco que dejaban los bloques de Elementor entre una y otra. */
body.woocommerce-checkout .form-row.create-account,
body.woocommerce-checkout #ship-to-different-address {
	margin: 2px 0 12px !important;
	font-size: 14px;
	font-weight: 500;
}

body.woocommerce-checkout .woocommerce-account-fields,
body.woocommerce-checkout .woocommerce-shipping-fields {
	margin: 0 !important;
}

body.woocommerce-checkout .elementor-widget-wd_checkout_billing_details_form .woocommerce-billing-fields {
	margin-bottom: 0 !important;
}

/* WoodMart reparte los campos en una rejilla de dos columnas; solo se
   ajusta el hueco para que coincida con el de las filas. */
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
	column-gap: 12px;
	row-gap: 0;
}

/* Desplegables nativos, sin el buscador de Select2 (lo quita checkout.js).
   Mientras el script llega, el desplegable nativo ya se ve y la caja de
   Select2 no: así no hay parpadeo. */
body.woocommerce-checkout :is(.woocommerce-billing-fields, .woocommerce-shipping-fields, .woocommerce-additional-fields) .form-row .select2-container {
	display: none !important;
}

body.woocommerce-checkout :is(.woocommerce-billing-fields, .woocommerce-shipping-fields, .woocommerce-additional-fields) .form-row select.select2-hidden-accessible {
	position: static !important;
	width: 100% !important;
	margin: 0 !important;
	overflow: visible !important;
	clip: auto !important;
	white-space: normal !important;
}

body.woocommerce-checkout .form-row select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
	padding-right: 36px !important;
}

/* Errores de validación. */
body.woocommerce-checkout .form-row.woocommerce-invalid .input-text,
body.woocommerce-checkout .form-row.woocommerce-invalid .select2-selection--single {
	border-color: #d0021b !important;
}

body.woocommerce-checkout .form-row.woocommerce-validated .input-text {
	border-color: var(--cm-co-borde) !important;
}

/* Bloques de facturación / envío / notas: sin tarjetas, solo aire. Las
   tarjetas blancas sobre gris venían del diseño anterior en Elementor. */
body.woocommerce-checkout .elementor-widget-wd_checkout_billing_details_form > .elementor-widget-container,
body.woocommerce-checkout .elementor-widget-wd_checkout_shipping_details_from > .elementor-widget-container,
body.woocommerce-checkout .elementor-widget-wd_checkout_payment_methods > .elementor-widget-container,
body.woocommerce-checkout .elementor-widget-wd_checkout_coupon_form > .elementor-widget-container,
body.woocommerce-checkout .woocommerce-billing-fields,
body.woocommerce-checkout .woocommerce-shipping-fields,
body.woocommerce-checkout .woocommerce-additional-fields {
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	border-radius: 0 !important;
}

/* Los bloques del formulario van seguidos: el aire entre ellos lo ponen
   los propios campos (12 px), no los márgenes de Elementor. El widget HTML
   vacío (lleva un script) tampoco suma su margen. */
body.woocommerce-checkout .sticky-scope .elementor-column:first-child .elementor-widget {
	margin-bottom: 0 !important;
}

/* "Medio de Pago" se separa de las notas como una sección nueva. */
body.woocommerce-checkout .sticky-scope .elementor-widget-wd_title {
	margin-top: 28px !important;
}

/* Elementor deja 30 px de relleno a cada columna y 10 a la del cupón: el
   formulario quedaba 20 px más adentro que la línea del cupón. Con 10 en
   todas, todo arranca en el mismo borde. */
body.woocommerce-checkout .sticky-scope > .elementor-container > .elementor-column > .elementor-widget-wrap {
	padding: 10px !important;
}

/* Las secciones de la página tampoco llevan fondo: todo sobre blanco. */
body.woocommerce-checkout .elementor-section,
body.woocommerce-checkout .elementor-section > .elementor-container > .elementor-column > .elementor-widget-wrap {
	background-color: transparent !important;
}

/* Dos columnas: el formulario ocupa lo que sobra y el resumen 400 px, con
   56 px entre ambos (lo de un checkout de Shopify). */
body.woocommerce-checkout .sticky-scope > .elementor-container {
	gap: 56px;
}

body.woocommerce-checkout .sticky-scope > .elementor-container > .elementor-column:first-child {
	flex: 1 1 auto;
	width: auto !important;
	min-width: 0;
}

body.woocommerce-checkout .sticky-scope > .elementor-container > .elementor-column.sticky-checkout {
	flex: 0 0 400px;
	width: 400px !important;
}

@media (max-width: 1024px) {
	body.woocommerce-checkout .sticky-scope > .elementor-container {
		gap: 0;
	}

	body.woocommerce-checkout .sticky-scope > .elementor-container > .elementor-column:first-child,
	body.woocommerce-checkout .sticky-scope > .elementor-container > .elementor-column.sticky-checkout {
		flex: 1 1 100%;
		width: 100% !important;
	}

	/* En pantallas estrechas el resumen va primero: se ve qué se compra y
	   se elige la entrega antes de rellenar nada. */
	body.woocommerce-checkout .sticky-scope > .elementor-container {
		flex-wrap: wrap;
	}

	body.woocommerce-checkout .sticky-scope > .elementor-container > .elementor-column.sticky-checkout {
		order: -1;
		margin-bottom: 24px;
	}
}

/* Fila de facturación → "Facturación" en lugar de mayúsculas. */
body.woocommerce-checkout .woocommerce-billing-fields > h3 {
	margin-top: 4px !important;
}

/* ------------------------------------------------------------------ */
/* Cupón                                                               */
/* ------------------------------------------------------------------ */

/* Una línea de texto, sin caja: el cupón es para quien lo tiene. */
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
	margin: 0 0 16px;
	font-size: 14px;
	color: var(--cm-co-gris);
}

body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before {
	display: none;
}

body.woocommerce-checkout .woocommerce-form-coupon-toggle .showcoupon {
	color: var(--cm-co-tinta);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

body.woocommerce-checkout form.checkout_coupon {
	display: flex;
	gap: 8px;
	border: 0 !important;
	max-width: 480px;
	padding: 0 !important;
	margin: 0 0 20px !important;
}

body.woocommerce-checkout form.checkout_coupon .form-row {
	margin: 0 !important;
	width: auto !important;
	float: none;
}

body.woocommerce-checkout form.checkout_coupon .form-row-first {
	flex: 1;
}

body.woocommerce-checkout form.checkout_coupon .input-text {
	padding: 13px 14px !important;
	height: 48px !important;
}

body.woocommerce-checkout form.checkout_coupon .button {
	height: 48px;
	border-radius: var(--cm-co-radio);
	padding: 0 22px;
	background: var(--cm-co-tinta);
	color: #fff;
	border: 0;
	font-weight: 600;
	text-transform: none;
}

/* ------------------------------------------------------------------ */
/* Confianza y bancos                                                  */
/* ------------------------------------------------------------------ */

.cm-co-seguro {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: -6px 0 16px !important;
	font-size: 13px;
	color: var(--cm-co-gris);
}

.cm-co-seguro svg {
	color: #1a9e5c;
	flex: none;
}

/* Sin caja: una línea de texto y los logos en gris, como en la ficha. */
.cm-co-bancos {
	margin: 0 0 16px;
}

.cm-co-bancos__titulo {
	display: block;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--cm-co-gris);
	margin-bottom: 8px;
}

.cm-co-bancos ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 20px;
}

.cm-co-bancos li {
	margin: 0;
	display: flex;
	align-items: center;
}

.cm-co-bancos img {
	height: 16px;
	width: auto;
	max-width: 80px;
	object-fit: contain;
	filter: grayscale(1);
	opacity: .65;
}

/* ------------------------------------------------------------------ */
/* Métodos de pago                                                     */
/* ------------------------------------------------------------------ */

body.woocommerce-checkout #payment {
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
}

/* Una sola caja con una fila por medio de pago; el elegido se marca con
   un borde azul y su formulario se abre debajo, sobre gris claro. */
body.woocommerce-checkout #payment ul.wc_payment_methods {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 0 !important;
	margin: 0 0 20px !important;
	border: 1px solid var(--cm-co-borde) !important;
	border-radius: 12px;
	overflow: hidden;
	list-style: none;
}

body.woocommerce-checkout #payment li.wc_payment_method {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0;
	background: #fff;
	transition: box-shadow .15s ease, background .15s ease;
}

body.woocommerce-checkout #payment li.wc_payment_method + li.wc_payment_method {
	border-top: 1px solid var(--cm-co-borde) !important;
}

body.woocommerce-checkout #payment li.wc_payment_method:has(input:checked) {
	background: var(--cm-co-azul-suave);
	box-shadow: inset 0 0 0 1px var(--cm-co-azul);
}

body.woocommerce-checkout #payment li.wc_payment_method:first-child:has(input:checked) {
	border-radius: 11px 11px 0 0;
}

body.woocommerce-checkout #payment li.wc_payment_method:last-child:has(input:checked) {
	border-radius: 0 0 11px 11px;
}

body.woocommerce-checkout #payment li.wc_payment_method:only-child:has(input:checked) {
	border-radius: 11px;
}

body.woocommerce-checkout #payment li.wc_payment_method > input.input-radio {
	position: absolute;
	left: 16px;
	top: 19px;
	margin: 0;
}

body.woocommerce-checkout #payment li.wc_payment_method {
	position: relative;
}

body.woocommerce-checkout #payment li.wc_payment_method > label {
	display: flex !important;
	align-items: center;
	gap: 12px;
	min-height: 56px;
	padding: 14px 16px 14px 46px !important;
	margin: 0 !important;
	font-size: 15px;
	font-weight: 600;
	color: var(--cm-co-tinta);
	cursor: pointer;
	line-height: 1.3;
}

body.woocommerce-checkout #payment li.wc_payment_method > label::before,
body.woocommerce-checkout #payment li.wc_payment_method > label::after {
	display: none !important;
}

/* Logos: siempre a la derecha, a una misma altura. */
body.woocommerce-checkout #payment li.wc_payment_method > label img,
body.woocommerce-checkout #payment li.wc_payment_method > label .mpp-badges {
	margin-left: auto !important;
	float: none !important;
}

body.woocommerce-checkout #payment li.wc_payment_method > label img {
	height: 22px !important;
	max-height: 22px !important;
	width: auto !important;
	max-width: 150px !important;
	object-fit: contain;
}

body.woocommerce-checkout #payment li.wc_payment_method > label .mpp-badges img {
	height: 22px !important;
}

body.woocommerce-checkout #payment li.wc_payment_method > label .mpp-badges ~ img {
	display: none !important;
}

/* El de Cuotéalo viene con dos logos (Cuotéalo + BCP) en una sola imagen apaisada. */
body.woocommerce-checkout #payment li.payment_method_bcp_cuotealo > label img {
	max-width: 110px !important;
}

/* Mercado Pago repite las banderas de tarjeta dentro del formulario; ya van en la etiqueta. */
body.woocommerce-checkout #payment div.payment_box .mp-checkout-custom-card-flags {
	display: none !important;
}

/* Razón social y RUC solo cuando el comprobante es factura (lo hace el JS). */
body.woocommerce-checkout .form-row.cm-co-oculto {
	display: none !important;
}

/* Formulario dentro del método (tarjeta de Mercado Pago). */
body.woocommerce-checkout #payment div.payment_box {
	background: var(--cm-co-fondo) !important;
	border-top: 1px solid var(--cm-co-borde);
	border-radius: 0 !important;
	margin: 0 1px 1px !important;
	padding: 18px 16px !important;
	font-size: 14px;
	color: var(--cm-co-gris);
}

body.woocommerce-checkout #payment div.payment_box::before {
	display: none !important;
}

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

/* Campos del formulario de tarjeta de Mercado Pago. */
body.woocommerce-checkout #payment div.payment_box .mp-checkout-custom-container input,
body.woocommerce-checkout #payment div.payment_box .mp-checkout-custom-container select,
body.woocommerce-checkout #payment div.payment_box input.input-text {
	border: 1px solid var(--cm-co-borde);
	border-radius: 8px;
	height: 48px;
	padding: 0 14px;
	font-size: 15px;
}

/* ------------------------------------------------------------------ */
/* Privacidad, términos y botón                                        */
/* ------------------------------------------------------------------ */

/* Bajo los medios de pago, sin líneas: el aviso, los términos y el botón
   seguidos (antes se juntaban tres bordes en una doble raya). */
body.woocommerce-checkout .woocommerce-privacy-policy-text {
	border: 0 !important;
	padding: 0 !important;
}

body.woocommerce-checkout .woocommerce-privacy-policy-text p {
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--cm-co-gris);
	margin: 0 0 12px;
}

body.woocommerce-checkout .woocommerce-privacy-policy-text a {
	color: var(--cm-co-tinta);
	font-weight: 600;
}

body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .form-row.validate-required {
	margin: 0 0 16px !important;
}

body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .woocommerce-terms-and-conditions-link {
	color: var(--cm-co-azul);
	font-weight: 600;
}

body.woocommerce-checkout .form-row.place-order {
	margin: 0 !important;
	padding-top: 0;
	border-top: 0 !important;
}

body.woocommerce-checkout .form-row.place-order .woocommerce-terms-and-conditions-wrapper {
	padding-top: 0;
	border-top: 0 !important;
}

body.woocommerce-checkout #place_order {
	width: 100%;
	height: 56px;
	border-radius: var(--cm-co-radio) !important;
	background: var(--cm-co-azul) !important;
	color: #fff !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	letter-spacing: .01em;
	text-transform: none !important;
	box-shadow: none !important;
	transition: background .15s ease, transform .1s ease;
}

body.woocommerce-checkout #place_order:hover {
	background: #003bc0 !important;
}

body.woocommerce-checkout #place_order:active {
	transform: translateY(1px);
}

/* ------------------------------------------------------------------ */
/* Resumen del pedido (columna derecha)                                */
/* ------------------------------------------------------------------ */

body.woocommerce-checkout .sticky-checkout .elementor-widget-wd_checkout_order_review .elementor-widget-container,
body.woocommerce-checkout .elementor-widget-wd_checkout_order_review .woocommerce-checkout-review-order {
	background: var(--cm-co-fondo) !important;
	border: 0 !important;
	border-radius: 14px !important;
	padding: 22px !important;
	box-shadow: none !important;
}

/* La caja de dentro no repite el relleno de la de fuera. */
body.woocommerce-checkout .sticky-checkout .elementor-widget-wd_checkout_order_review .elementor-widget-container .woocommerce-checkout-review-order {
	padding: 0 !important;
	border-radius: 0 !important;
}

/* Título de la tarjeta, como en Barique. */
body.woocommerce-checkout .elementor-widget-wd_checkout_order_review .elementor-widget-container::before {
	content: "Resumen del pedido";
	display: block;
	margin: 0 0 14px;
	color: var(--cm-co-tinta);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -.01em;
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table {
	margin: 0 !important;
	border: 0 !important;
	background: none !important;
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table th,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table td {
	border: 0 !important;
	background: none !important;
	padding: 10px 0 !important;
	font-size: 14px;
	color: var(--cm-co-tinta);
	vertical-align: middle;
}

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

body.woocommerce-checkout table.woocommerce-checkout-review-order-table tbody tr td.wd-checkout-prod {
	padding: 0 0 16px !important;
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table tbody {
	border-bottom: 1px solid var(--cm-co-borde);
}

body.woocommerce-checkout .wd-checkout-prod-img {
	width: 64px;
	height: 64px;
	flex: none;
	background: #fff;
	border: 1px solid var(--cm-co-borde);
	border-radius: 10px;
	overflow: hidden;
	margin-right: 14px;
}

body.woocommerce-checkout .wd-checkout-prod-img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 4px;
}

body.woocommerce-checkout .wd-checkout-prod-title {
	font-weight: 500;
	font-size: 14px;
	line-height: 1.35;
	color: var(--cm-co-tinta);
}

body.woocommerce-checkout .wd-checkout-prod-title .product-quantity {
	display: block;
	color: var(--cm-co-gris);
	font-weight: 400;
	font-size: 13px;
	margin-top: 2px;
}

body.woocommerce-checkout .wd-checkout-prod-total {
	font-weight: 600;
	white-space: nowrap;
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot th {
	font-weight: 400;
	color: var(--cm-co-gris);
	text-transform: none !important;
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot td {
	text-align: right;
	font-weight: 500;
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table .woocommerce-Price-amount {
	color: var(--cm-co-tinta) !important;
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.order-total th,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.order-total td {
	border-top: 1px solid var(--cm-co-borde) !important;
	padding-top: 16px !important;
	font-size: 17px;
	font-weight: 700;
	color: var(--cm-co-tinta);
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.order-total td .woocommerce-Price-amount {
	font-size: 20px;
}

/* Métodos de envío: el título arriba y las opciones debajo, a todo el ancho. */
body.woocommerce-checkout tr.woocommerce-shipping-totals {
	display: flex;
	flex-direction: column;
}

body.woocommerce-checkout tr.woocommerce-shipping-totals th,
body.woocommerce-checkout tr.woocommerce-shipping-totals td {
	display: block;
	width: 100%;
	text-align: left !important;
}

body.woocommerce-checkout tr.woocommerce-shipping-totals th {
	padding: 14px 0 8px !important;
	font-weight: 600 !important;
	color: var(--cm-co-tinta) !important;
}

body.woocommerce-checkout tr.woocommerce-shipping-totals td {
	padding: 0 0 14px !important;
}

body.woocommerce-checkout ul#shipping_method {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

body.woocommerce-checkout ul#shipping_method li {
	margin: 0;
	padding: 0;
	width: 100%;
	display: flex;
	align-items: center;
	gap: 10px;
	background: #fff;
	border: 1px solid var(--cm-co-borde);
	border-radius: 8px;
	padding: 10px 12px;
	transition: border-color .15s ease;
}

body.woocommerce-checkout ul#shipping_method li:has(input:checked) {
	border-color: var(--cm-co-azul);
	box-shadow: 0 0 0 1px var(--cm-co-azul);
}

body.woocommerce-checkout ul#shipping_method li label {
	margin: 0;
	padding: 0;
	font-size: 14px;
	font-weight: 500;
	color: var(--cm-co-tinta);
	cursor: pointer;
	flex: 1;
	display: flex;
	justify-content: space-between;
	gap: 10px;
}

body.woocommerce-checkout ul#shipping_method li label::before,
body.woocommerce-checkout ul#shipping_method li label::after {
	display: none !important;
}

body.woocommerce-checkout ul#shipping_method li label .woocommerce-Price-amount {
	font-weight: 600;
}

/* Un solo método: WooCommerce lo pinta como texto, no como radio. */
body.woocommerce-checkout ul#shipping_method li:has(input[type="hidden"]) {
	background: none;
	border: 0;
	padding: 0;
}

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

/* En el teléfono solo nombres y apellidos siguen de dos en dos: el correo,
   la provincia o el distrito no caben en media pantalla. */
@media (max-width: 599px) {
	body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > :is(.form-row-first, .form-row-last):not(#billing_first_name_field, #billing_last_name_field),
	body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > :is(.form-row-first, .form-row-last):not(#shipping_first_name_field, #shipping_last_name_field) {
		grid-column: 1 / -1;
	}

	/* El tema pone todos a lo ancho en el teléfono; nombres y apellidos
	   caben de a dos. */
	body.woocommerce-checkout :is(#billing_first_name_field, #billing_last_name_field, #shipping_first_name_field, #shipping_last_name_field) {
		grid-column: auto / span 2;
	}
}

@media (max-width: 767px) {

	body.woocommerce-checkout .elementor-widget-wd_checkout_order_review .woocommerce-checkout-review-order,
	body.woocommerce-checkout .sticky-checkout .elementor-widget-wd_checkout_order_review .elementor-widget-container {
		padding: 18px !important;
		border-radius: 12px !important;
	}

	.cm-co-bancos ul {
		gap: 8px 16px;
	}

	.cm-co-bancos img {
		height: 18px;
	}

	body.woocommerce-checkout #payment li.wc_payment_method > label {
		font-size: 14px;
		padding-right: 12px !important;
	}

	body.woocommerce-checkout #payment li.wc_payment_method > label img {
		max-width: 96px !important;
	}
}