/**
 * COD Suite — estilos del checkout.
 *
 * IMPORTANTE — POR QUÉ CASI TODO VA BAJO `.cod-checkout`
 * Gravity Forms 2.9 trae un reset (`gravity-forms-theme-reset.css`) con un
 * selector `:where(…)` gigante bajo `.gform-theme--framework` que pone
 * `display: revert` (y más) a casi cualquier elemento dentro del formulario.
 * Su especificidad es (0,1,0) y su hoja carga DESPUÉS de la nuestra, así que
 * empata y gana con cualquier regla nuestra de una sola clase.
 *
 * Acotando bajo `.cod-checkout` subimos a (0,2,0) y ganamos siempre.
 * Si añades un componente nuevo, acótalo igual o Gravity Forms te lo pisará.
 *
 * Todo cuelga de variables CSS que inyecta PHP desde el diseño del checkout
 * (--cod-primary, --cod-ink, --cod-radius, --cod-width). Cambiar el color de
 * marca es cambiar una variable, no buscar y reemplazar hex por el archivo.
 *
 * Convención de clases: .cod-<bloque>__<elemento> y estados con is-*.
 */

.cod-checkout {
	--cod-primary: #16a34a;
	--cod-ink: #16264a;
	--cod-radius: 16px;
	/* Medidas tomadas del checkout real de bodywiselatam.com, que es el que
	   lleva años convirtiendo. No son gustos: son las que ya funcionan. */
	--cod-width: 720px;
	--cod-line: #dde6f1;
	--cod-muted: #7c8aa0;
	--cod-bg-soft: #f7f9fc;
	--cod-font: inherit;

	max-width: var(--cod-width);
	margin: 0 auto;
	font-family: var(--cod-font);
	color: #1b2330;
}

/* El propio contenedor va incluido: si se queda en content-box, su padding
   se suma al ancho y el bloque acaba sobresaliendo por la derecha. */
.cod-checkout,
.cod-checkout *,
.cod-checkout *::before,
.cod-checkout *::after { box-sizing: border-box; }

/* Los campos "backend" de Gravity Forms: existen, funcionan, no se ven. */
.cod-checkout .cod-hidden,
.cod-checkout .gfield.cod-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ─────────────────────────────── hero ─────────────────────────────── */

.cod-checkout .cod-hero { text-align: center; margin: 0 0 22px; }
.cod-checkout .cod-hero__logo img { max-height: var(--cod-logo-h, 46px); width: auto; margin: 0 auto 14px; display: block; }
.cod-checkout .cod-hero__title { font-size: 24px; line-height: 1.25; font-weight: 800; margin: 0 0 8px; letter-spacing: -0.3px; }
.cod-checkout .cod-hero__sub { font-size: 15px; line-height: 1.5; color: var(--cod-muted); margin: 0; }

.cod-checkout .cod-notice {
	margin: 14px 0 0;
	background: #fff8ef;
	border: 1px solid #fbe2bf;
	color: #9a4a16;
	font-size: 13.5px;
	line-height: 1.5;
	border-radius: 12px;
	padding: 11px 14px;
	text-align: left;
}

/* ───────────────────────────── bundles ────────────────────────────── */

/* La separación la manda el branding (--cod-gap). Aquí NO se pone un valor
   fijo: al hacerlo se quedaba clavada en 18 px y el ajuste "Separación entre
   tarjetas" del panel dejaba de servir para nada.
   El hueco que necesitan las etiquetas se resuelve abajo, con margen propio
   de la tarjeta que lleva etiqueta. */
.cod-checkout .cod-bundles {
	display: flex;
	flex-direction: column;
	margin: 14px 0 8px;
}

.cod-checkout .cod-bundle {
	position: relative;
	display: flex;
	align-items: center;
	/* Separación entre imagen, texto y precio. Cada píxel que se quita aquí
	   se lo lleva el título, que es lo que se parte en varias líneas y alarga
	   la página. */
	gap: var(--cod-card-gap, 8px);
	/* El aire interior lo decide el branding: en móvil una tarjeta con poco
	   padding se ve apretada y con mucho no cabe la oferta en pantalla. */
	padding: var(--cod-card-pad, 14px);
	border: 2px solid var(--cod-line);
	border-radius: var(--cod-radius);
	background: #fff;
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.cod-checkout .cod-bundle:hover { border-color: color-mix(in srgb, var(--cod-primary) 45%, #fff); }
.cod-checkout .cod-bundle:active { transform: translateY(1px); }

/* Al pulsar con el dedo o el ratón NO se dibuja contorno.
 *
 * Las tarjetas son divs con tabindex (para poder elegirlas con el teclado),
 * y el navegador les pinta su contorno negro al recibir el foco. Quedaba un
 * marco negro feo justo encima del borde verde de "seleccionada".
 *
 * Con el teclado sí se dibuja, y en el color de la marca: quien navega con
 * tabulador necesita ver dónde está. */
.cod-checkout .cod-bundle:focus,
.cod-checkout .cod-ship:focus,
.cod-checkout .cod-pay:focus,
.cod-checkout .cod-bump:focus { outline: none; }

.cod-checkout .cod-bundle:focus-visible,
.cod-checkout .cod-ship:focus-visible,
.cod-checkout .cod-pay:focus-visible,
.cod-checkout .cod-bump:focus-visible {
	outline: 2px solid var(--cod-primary);
	outline-offset: 2px;
}

/* Al elegir, sólo cambia el borde y el fondo.
 *
 * Antes llevaba además un anillo exterior de 3 px (box-shadow) que, sumado
 * al borde de 2 px, se veía como un marco doble muy duro — y encima no
 * coincidía con cómo se marcan los envíos ni el método de pago. Ahora los
 * tres se seleccionan igual. */
.cod-checkout .cod-bundle.is-selected {
	border-color: var(--cod-primary);
	background: color-mix(in srgb, var(--cod-primary) 5%, #fff);
}

/* Con etiqueta hace falta hueco arriba: si no, "MÁS POPULAR" cae justo
   encima del título de la oferta y se ve todo apelotonado.
   El margen es lo que separa la etiqueta de lo que tenga encima, sea la
   tarjeta anterior o el título de sección — y así no depende de --cod-gap,
   que es tuyo. */
.cod-checkout .cod-bundle.has-badge { padding-top: 22px; margin-top: 8px; }

.cod-checkout .cod-bundle__badge {
	position: absolute;
	top: -10px;
	left: 14px;
	background: var(--cod-primary);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .3px;
	text-transform: uppercase;
	padding: 4px 9px;
	border-radius: 999px;
}

/* El tamaño lo manda el branding (--cod-img). Antes había un 68px fijo
   aquí que se comía el ancho del título y no había forma de bajarlo. */
.cod-checkout .cod-bundle__img { flex: 0 0 var(--cod-img, 44px); }
.cod-checkout .cod-bundle__img img {
	width: var(--cod-img, 44px);
	height: var(--cod-img, 44px);
	object-fit: contain;
	display: block;
}

.cod-checkout .cod-bundle__text { flex: 1 1 auto; min-width: 0; }
.cod-checkout .cod-bundle__title {
	font-size: var(--cod-bundle-title, 15.5px);
	font-weight: 700;
	line-height: 1.25;
	margin-bottom: 3px;
	/* Reparte las palabras para que no quede una sola colgando en la última
	   línea ("Bodywise" a solas). Donde no esté soportado, no pasa nada. */
	text-wrap: balance;
	hyphens: none;
}
.cod-checkout .cod-bundle__meta {
	display: flex; flex-direction: column; gap: 2px;
	font-size: var(--cod-bundle-meta, 12.5px);
	color: var(--cod-muted);
}
.cod-checkout .cod-bundle__free { color: var(--cod-primary); font-weight: 600; }

/* La columna del precio ocupa lo justo. El tachado va más pequeño que el
   precio real: además de ser lo correcto visualmente, deja de ser él quien
   marca el ancho de la columna. */
.cod-checkout .cod-bundle__price {
	flex: 0 0 auto;
	text-align: right;
	display: flex;
	flex-direction: column;
	gap: 1px;
	white-space: nowrap;
}
.cod-checkout .cod-bundle__was {
	font-size: calc(var(--cod-bundle-meta, 12.5px) - 0.5px);
	color: var(--cod-muted);
	text-decoration: line-through;
}
.cod-checkout .cod-bundle__now { font-size: var(--cod-bundle-price, 18px); font-weight: 800; }

/* ────────────────────────────── envío ─────────────────────────────── */

/* Aviso discreto encima de las opciones de envío: se lee, pero no compite. */
.cod-checkout .cod-ship-notice {
	margin: 0 0 10px;
	padding: 9px 0 9px 12px;
	border-left: 3px solid var(--cod-line, #e8ecf2);
	font-size: 13px;
	line-height: 1.55;
	color: var(--cod-muted, #7c8aa0);
}

.cod-checkout .cod-ships { display: flex; flex-direction: column; gap: 10px; }

.cod-checkout .cod-ship {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 14px;
	border: 2px solid var(--cod-line);
	border-radius: var(--cod-radius);
	background: #fff;
	cursor: pointer;
	transition: border-color .15s ease;
}
.cod-checkout .cod-ship.is-selected { border-color: var(--cod-primary); background: color-mix(in srgb, var(--cod-primary) 4%, #fff); }
.cod-checkout .cod-ship:focus-visible { outline: 2px solid var(--cod-primary); outline-offset: 2px; }
.cod-checkout .cod-ships.is-free .cod-ship { cursor: default; }

.cod-checkout .cod-ship__dot {
	flex: 0 0 18px; width: 18px; height: 18px;
	border: 2px solid var(--cod-line); border-radius: 50%;
	position: relative; transition: border-color .15s ease;
}
.cod-checkout .cod-ship.is-selected .cod-ship__dot { border-color: var(--cod-primary); }
.cod-checkout .cod-ship.is-selected .cod-ship__dot::after {
	content: ''; position: absolute; inset: 3px;
	background: var(--cod-primary); border-radius: 50%;
}

.cod-checkout .cod-ship__text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; font-size: 14.5px; }
.cod-checkout .cod-ship__text small { font-size: 12.5px; color: var(--cod-muted); }
.cod-checkout .cod-ship__price { font-weight: 700; font-size: 14.5px; }
.cod-checkout .cod-ship__price.is-free { color: var(--cod-primary); }

/* ──────────────────────────── order bumps ─────────────────────────── */

/* Un order bump no es una casilla de "acepto los términos": es una oferta.
   Por eso va como tarjeta, con su interruptor a la derecha, su precio bien
   visible y un borde que cambia de verdad al activarlo. */

.cod-checkout .cod-bumps { display: flex; flex-direction: column; gap: var(--cod-gap, 12px); }

.cod-checkout .cod-bump {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: var(--cod-bump-pad, 14px) calc(var(--cod-bump-pad, 14px) + 2px);
	border: 1.5px solid var(--cod-line);
	border-radius: var(--cod-radius);
	background: var(--cod-surface);
	cursor: pointer;
	transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
	-webkit-tap-highlight-color: transparent;
}
.cod-checkout .cod-bump:hover { border-color: color-mix(in srgb, var(--cod-primary) 40%, var(--cod-line)); }

.cod-checkout .cod-bump.is-on {
	border-color: var(--cod-primary);
	background: color-mix(in srgb, var(--cod-primary) 5%, var(--cod-bg));
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--cod-primary) 12%, transparent);
}

/* La casilla real: existe para el teclado y los lectores de pantalla, pero
   no se ve — lo que se ve es el interruptor.

   Va con !important a propósito: Gravity Forms estiliza las casillas con
   `.gform-theme--framework input[type=checkbox]`, que tiene especificidad
   (0,2,1) y le gana a nuestro (0,2,0). Sin esto asoma un cuadradito blanco
   encima del texto del order bump. */
.cod-checkout .cod-bump__check,
.cod-checkout input.cod-bump__check[type="checkbox"] {
	position: absolute !important;
	opacity: 0 !important;
	width: 1px !important;
	height: 1px !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	pointer-events: none;
	appearance: none !important;
	-webkit-appearance: none !important;
}
.cod-checkout .cod-bump__check:focus-visible ~ .cod-bump__box { outline: 2px solid var(--cod-primary); outline-offset: 3px; }

/* Interruptor, no casilla: se entiende mejor que es opcional y se activa. */
.cod-checkout .cod-bump__box {
	order: 3;
	flex: 0 0 44px;
	width: 44px; height: 26px;
	border-radius: 999px;
	background: #cbd5e1;
	position: relative;
	transition: background .2s ease;
}
.cod-checkout .cod-bump__box::after {
	content: '';
	position: absolute; top: 3px; left: 3px;
	width: 20px; height: 20px;
	background: #fff; border-radius: 50%;
	box-shadow: 0 1px 3px rgba(0,0,0,.25);
	transition: transform .2s cubic-bezier(.2,.8,.2,1);
}
.cod-checkout .cod-bump.is-on .cod-bump__box { background: var(--cod-primary); }
.cod-checkout .cod-bump.is-on .cod-bump__box::after { transform: translateX(18px); }

.cod-checkout .cod-bump__img { order: 1; flex: 0 0 auto; }
.cod-checkout .cod-bump__img img {
	width: var(--cod-bump-img, 46px); height: var(--cod-bump-img, 46px);
	object-fit: contain; display: block;
	border-radius: 10px; background: var(--cod-bg);
}

.cod-checkout .cod-bump__text {
	order: 2;
	flex: 1 1 auto; min-width: 0;
	display: flex; flex-direction: column; gap: 3px;
	font-size: var(--cod-bump-title, 14.5px); line-height: 1.35;
}
.cod-checkout .cod-bump__text strong { font-weight: 700; }
.cod-checkout .cod-bump__text small { font-size: var(--cod-bump-desc, 12.5px); color: var(--cod-muted); line-height: 1.45; }

.cod-checkout .cod-bump__price {
	order: 2;
	flex: 0 0 auto;
	font-weight: 800; font-size: var(--cod-bump-price, 15px); white-space: nowrap;
	color: var(--cod-primary);
	margin-left: auto; padding-left: 4px;
}

@media (max-width: 480px) {
	.cod-checkout .cod-bump { flex-wrap: wrap; gap: 10px 12px; }
	.cod-checkout .cod-bump__text { flex: 1 1 100%; order: 2; }
	.cod-checkout .cod-bump__img { order: 1; }
	.cod-checkout .cod-bump__price { order: 3; margin-left: 0; }
	.cod-checkout .cod-bump__box { order: 4; margin-left: auto; }
}

/* ──────────────────────────── resumen ─────────────────────────────── */

.cod-checkout .cod-summary {
	margin: 18px 0;
	padding: 16px;
	border: 1px solid var(--cod-line);
	border-radius: var(--cod-radius);
	background: var(--cod-bg-soft);
}
.cod-checkout .cod-summary__line {
	display: flex; justify-content: space-between; gap: 12px;
	padding: 7px 0; font-size: 14.5px; color: #475569;
}
.cod-checkout .cod-summary__total {
	display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
	margin-top: 8px; padding-top: 12px;
	border-top: 1px solid var(--cod-line);
	font-size: 15px; font-weight: 600;
}
.cod-checkout .cod-summary__total strong { font-size: 22px; font-weight: 800; }
.cod-checkout .cod-summary__note { margin-top: 6px; font-size: 12.5px; color: var(--cod-muted); }
.cod-checkout .cod-free { color: var(--cod-primary); font-weight: 700; }

/* ── Descuento por pagar con tarjeta ──────────────────────────────────
   Usa las variables del branding —el color principal y el radio— para
   que no parezca pegado de otra web. Verde no: el color de «esto es una
   ventaja» ya lo pone el checkout, y meter otro rompe la paleta que
   cada tienda haya elegido. */
.cod-checkout .cod-summary__line--off span:last-child,
.cod-checkout .cod-summary__off { color: var(--cod-primary); font-weight: 700; }

.cod-checkout .cod-pay__off {
	margin-left: auto;
	align-self: flex-start;
	background: var(--cod-primary);
	color: var(--cod-primary-text, #fff);
	border-radius: 999px;
	padding: 3px 9px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .2px;
	white-space: nowrap;
}
.cod-checkout .cod-pay__offtxt {
	display: block;
	margin-top: 3px;
	color: var(--cod-primary);
	font-weight: 600;
}

/* ────────────────────────── método de pago ────────────────────────── */

.cod-checkout .cod-pays { display: flex; flex-direction: column; gap: 10px; }

.cod-checkout .cod-pay {
	display: flex; align-items: center; gap: 13px;
	padding: 15px 16px;
	border: 2px solid var(--cod-line);
	border-radius: var(--cod-radius);
	background: #fff; cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease;
}
.cod-checkout .cod-pay.is-selected { border-color: var(--cod-primary); background: color-mix(in srgb, var(--cod-primary) 6%, #fff); }
.cod-checkout .cod-pay:focus-visible { outline: 2px solid var(--cod-primary); outline-offset: 2px; }

/* Sólo en ratón: en móvil el :hover se queda pegado tras tocar. */
@media (hover: hover) {
	.cod-checkout .cod-pay:not(.is-selected):hover {
		border-color: color-mix(in srgb, var(--cod-primary) 35%, var(--cod-line));
	}
}

.cod-checkout .cod-pay__dot {
	flex: 0 0 18px; width: 18px; height: 18px;
	border: 2px solid var(--cod-line); border-radius: 50%; position: relative;
}
.cod-checkout .cod-pay.is-selected .cod-pay__dot { border-color: var(--cod-primary); }
.cod-checkout .cod-pay.is-selected .cod-pay__dot::after {
	content: ''; position: absolute; inset: 3px; background: var(--cod-primary); border-radius: 50%;
}
.cod-checkout .cod-pay__text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; font-size: 14.5px; }
.cod-checkout .cod-pay__text small { font-size: 12.5px; color: var(--cod-muted); line-height: 1.45; }

.cod-checkout .cod-pay__icons { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.cod-checkout .cod-pay__icons svg { display: block; }

/* La camioneta del contraentrega hereda el color del checkout: gris
   cuando no está elegido, del color de la marca cuando sí. */
.cod-checkout .cod-pay__truck { color: var(--cod-muted); transition: color .15s ease; }
.cod-checkout .cod-pay.is-selected .cod-pay__truck { color: var(--cod-primary); }

/* En pantallas estrechas, tres logos + el texto no caben. Se encogen
   antes que empujar el precio fuera de la caja. */
@media (max-width: 400px) {
	.cod-checkout .cod-pay { gap: 10px; padding: 14px 12px; }
	.cod-checkout .cod-pay__icons { gap: 4px; }
	.cod-checkout .cod-pay__icons svg { width: 32px; height: 22px; }
	.cod-checkout .cod-pay__truck { width: 26px; height: 20px; }
}

/* El aviso de «sólo tarjeta» va igual que el de envío, pero pegado al
   bloque de pago. */
.cod-checkout .cod-pay-notice { margin-bottom: 12px; }

/* ───────────────────────── trust + faq ────────────────────────────── */

.cod-checkout .cod-trust { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 16px 0 0; }
.cod-checkout .cod-trust__item {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 13px; color: var(--cod-muted);
}
.cod-checkout .cod-trust__item svg { color: var(--cod-primary); flex: 0 0 auto; }

.cod-checkout .cod-faq { margin: 18px 0 0; }
.cod-checkout .cod-faq__item { border-bottom: 1px solid var(--cod-line); }
.cod-checkout .cod-faq__item summary {
	cursor: pointer; list-style: none;
	padding: 12px 0; font-size: 14.5px; font-weight: 600;
}
.cod-checkout .cod-faq__item summary::-webkit-details-marker { display: none; }
.cod-checkout .cod-faq__item summary::after { content: '+'; float: right; color: var(--cod-muted); font-weight: 400; }
.cod-checkout .cod-faq__item[open] summary::after { content: '–'; }
.cod-checkout .cod-faq__a { padding: 0 0 14px; font-size: 13.5px; line-height: 1.6; color: var(--cod-muted); }

/* ───────────────── integración con Gravity Forms ──────────────────── */

/* Gravity Forms trae su propia rejilla y sus propios márgenes, y cada tema
   le mete los suyos encima. Aquí se normaliza todo para que el checkout
   respire igual en cualquier tema. Todo el espaciado sale de variables. */

.cod-checkout .gform_wrapper { margin: 0 !important; padding: 0 !important; }
.cod-checkout .gform_wrapper form,
.cod-checkout .gform_body,
.cod-checkout .gform_wrapper .gform_body { margin: 0 !important; padding: 0 !important; width: 100%; }

.cod-checkout .gform_fields {
	display: grid !important;
	grid-template-columns: 1fr !important;
	row-gap: var(--cod-field-gap, 16px) !important;
	column-gap: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
.cod-checkout .gfield {
	margin: 0 !important;
	padding: 0 !important;
	max-width: 100%;
	grid-column: 1 / -1 !important;
}
.cod-checkout .ginput_container { margin: 0 !important; }
.cod-checkout .gfield_description { margin: 4px 0 0 !important; padding: 0 !important; font-size: 12.5px; }.cod-checkout .gsection,
.cod-checkout .cod-section {
	border-bottom: 1px solid var(--cod-line);
	margin: 24px 0 4px !important;
	padding: 0 0 10px !important;
}.cod-checkout .gsection_title,
.cod-checkout .cod-section__title {
	font-size: 18px;
	font-weight: 700;
	color: #0f2f63;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.3;
}
@media (max-width: 640px) {
	.cod-checkout .gsection_title,
	.cod-checkout .cod-section__title { font-size: 17px; }
}
.cod-checkout .gfield_label { font-size: 13.5px; font-weight: 600; margin: 0 0 5px !important; display: block; }
.cod-checkout .gform_footer { margin: 22px 0 0 !important; padding: 0 !important; }
.cod-checkout .gform_footer::after { content: ''; display: block; clear: both; }

/* Todos los controles miden lo mismo.
 *
 * Antes los `input` salían de 38 px y los `select` de 49 (el arreglo del
 * texto cortado les puso min-height y a los inputs no). Apilados uno
 * debajo de otro se veía descuadrado, y en móvil 38 px es poco para el
 * dedo: la recomendación de accesibilidad son 44 px de zona táctil. */
.cod-checkout input[type=text],
.cod-checkout input[type=email],
.cod-checkout input[type=tel],
.cod-checkout input[type=number],
.cod-checkout select {
	width: 100%;
	min-height: 48px !important;
	padding: 12px 13px !important;
	border: 1px solid var(--cod-line) !important;
	border-radius: 11px !important;
	font-size: 15px !important;
	line-height: 1.3 !important;
	background: #fff;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.cod-checkout input[type=text]:focus,
.cod-checkout input[type=email]:focus,
.cod-checkout input[type=tel]:focus,
.cod-checkout select:focus {
	border-color: var(--cod-primary) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--cod-primary) 15%, transparent);
	outline: none;
}

.cod-checkout .gform_footer input[type=submit],
.cod-checkout .cod-cta {
	/* !important porque el tema de Gravity Forms fija el ancho del botón
	   con más especificidad que nosotros y lo dejaba en 158 px: un botón
	   de comprar a medio ancho en un móvil se pierde. */
	width: 100% !important;
	display: block;
	background: var(--cod-primary) !important;
	/* El color del texto también es tuyo: con un botón claro, letra blanca
	   no se lee. Lo pone Branding → "Texto sobre el color de marca". */
	color: var(--cod-primary-ink, #fff) !important;
	border: none !important;
	font-size: 16.5px;
	font-weight: 700;
	padding: 17px 20px !important;
	border-radius: 14px !important;
	cursor: pointer;
	box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--cod-primary) 70%, transparent);
	transition: transform .1s ease, filter .15s ease;
}
.cod-checkout .gform_footer input[type=submit]:hover,
.cod-checkout .cod-cta:hover { filter: brightness(1.05); }
.cod-checkout .gform_footer input[type=submit]:active { transform: translateY(1px); }
.cod-checkout .cod-cta[disabled] { opacity: .55; cursor: not-allowed; box-shadow: none; }

/* ── ciudad: desplegable en vez de campo libre ────────────────────── */

/* El input original sigue en el DOM (es el que envía Gravity Forms) pero
   no se ve: quien escribe es el desplegable.

   Todo con !important porque Gravity Forms le pone `width:100%` a los
   `input.large`, y como aquí el input es `position:absolute`, ese 100% se
   mide contra el primer ancestro posicionado —el bloque del tema, de 435
   px— y no contra el formulario. Resultado: un input invisible de 435 px
   que empujaba la página y sacaba scroll horizontal en el móvil. */
.cod-checkout .cod-city-input {
	position: absolute !important;
	width: 1px !important; height: 1px !important;
	min-width: 0 !important; max-width: 1px !important;
	padding: 0 !important; margin: -1px !important;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0 !important;
}

/* ── DESPLEGABLES ──────────────────────────────────────────────────
   Aquí había un bug feo: el texto salía cortado por abajo. La causa era
   que el tema imponía su `line-height` (22, 4 px) y su `height`, y con el
   padding de arriba y abajo el texto no cabía en la caja.
   Solución: altura automática, interlineado propio y padding simétrico.
   ────────────────────────────────────────────────────────────────── */

.cod-checkout select,
.cod-checkout .cod-city-select {
	width: 100%;
	height: auto !important;
	min-height: 48px;
	line-height: 1.3 !important;
	padding: 13px 38px 13px 14px !important;
	border: 1px solid var(--cod-line) !important;
	border-radius: 11px !important;
	font-size: 16px !important;      /* 16px evita el zoom automático de iOS */
	font-family: inherit;
	background-color: var(--cod-bg);
	color: var(--cod-ink);
	appearance: none; -webkit-appearance: none; -moz-appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237c8aa0' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 12px 8px;
	text-overflow: ellipsis;
}
.cod-checkout select:focus,
.cod-checkout .cod-city-select:focus {
	border-color: var(--cod-primary) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--cod-primary) 15%, transparent);
	outline: none;
}
.cod-checkout .cod-city-select.is-empty,
.cod-checkout select:invalid { color: var(--cod-muted); }
.cod-checkout .cod-city-select:disabled {
	background-color: var(--cod-surface);
	color: var(--cod-muted);
	cursor: not-allowed;
}
/* Las opciones heredan el color del tema en algunos navegadores. */
.cod-checkout select option { color: var(--cod-ink); background: var(--cod-bg); }

/* ── TELÉFONO CON PREFIJO ─────────────────────────────────────────── */

.cod-checkout .cod-phone { position: relative; display: flex; gap: 8px; align-items: stretch; }

/* El selector de prefijo es un <button> dentro del formulario, así que
   Gravity Forms lo pintaba como un botón suyo: azul oscuro y de 38 px de
   alto, al lado de un campo blanco de 48. Aquí se le devuelve el aspecto
   de campo. Va con !important porque el tema de GF gana por especificidad. */
.cod-checkout .cod-phone__flag {
	flex: 0 0 auto;
	display: flex !important;
	align-items: center;
	gap: 6px;
	width: auto !important;
	padding: 0 12px !important;
	min-height: 48px !important;
	border: 1px solid var(--cod-line) !important;
	border-radius: 11px !important;
	background: #fff !important;
	color: var(--cod-ink) !important;
	font-family: inherit;
	font-size: 15px !important;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	box-shadow: none !important;
	transition: border-color .15s ease;
}
.cod-checkout .cod-phone__flag:hover { border-color: color-mix(in srgb, var(--cod-primary) 45%, var(--cod-line)); }
.cod-checkout .cod-phone.is-open .cod-phone__flag { border-color: var(--cod-primary); }
.cod-checkout .cod-phone__emoji { font-size: 19px; line-height: 1; }
.cod-checkout .cod-phone__caret {
	width: 0; height: 0; margin-left: 2px;
	border-left: 4px solid transparent; border-right: 4px solid transparent;
	border-top: 5px solid var(--cod-muted);
}
.cod-checkout .cod-phone__input { flex: 1 1 auto; min-width: 0; }

.cod-checkout .cod-phone__panel {
	position: absolute; z-index: 40; top: calc(100% + 6px); left: 0;
	width: 100%; max-width: 340px;
	background: var(--cod-bg);
	border: 1px solid var(--cod-line);
	border-radius: 14px;
	box-shadow: 0 16px 40px -12px rgba(15, 23, 42, .28);
	overflow: hidden;
}
.cod-checkout .cod-phone__search {
	width: 100%;
	border: none !important;
	border-bottom: 1px solid var(--cod-line) !important;
	border-radius: 0 !important;
	padding: 13px 14px !important;
	font-size: 16px !important;
	background: var(--cod-surface);
}
.cod-checkout .cod-phone__search:focus { outline: none; box-shadow: none !important; }

.cod-checkout .cod-phone__list { max-height: 260px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.cod-checkout .cod-phone__opt {
	display: flex; align-items: center; gap: 10px;
	width: 100%; min-height: 46px;
	padding: 10px 14px;
	border: none; background: transparent; cursor: pointer;
	font-family: inherit; font-size: 14.5px; color: var(--cod-ink);
	text-align: left;
}
.cod-checkout .cod-phone__opt:hover { background: var(--cod-surface); }
.cod-checkout .cod-phone__opt.is-on { background: color-mix(in srgb, var(--cod-primary) 8%, transparent); font-weight: 600; }
.cod-checkout .cod-phone__name { flex: 1 1 auto; }
.cod-checkout .cod-phone__opt .cod-phone__dial { color: var(--cod-muted); font-size: 13.5px; }
.cod-checkout .cod-phone__empty { padding: 16px 14px; margin: 0; color: var(--cod-muted); font-size: 13.5px; text-align: center; }

/* ── INDICADOR DE OBLIGATORIO ─────────────────────────────────────
   Gravity Forms escribe "(Required)" en inglés. En un checkout en
   español eso canta muchísimo, así que se sustituye por un asterisco. */
.cod-checkout .gfield_required_text { display: none !important; }
.cod-checkout .gfield_required::after {
	content: '*';
	color: #dc2626;
	margin-left: 3px;
	font-weight: 700;
}

.cod-checkout .gfield_error input,
.cod-checkout .gfield_error select { border-color: #dc2626 !important; }
.cod-checkout .validation_message { font-size: 12.5px; color: #dc2626; margin-top: 4px; }

.cod-error {
	padding: 14px 16px; border-radius: 12px;
	background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c;
	font-size: 14px;
}

/* ─────────────────── previsualización del panel ───────────────────── */

.cod-preview {
	background: var(--cod-bg, #fff);
	padding: var(--cod-pad, 22px);
	border-radius: 18px;
	border: 1px solid var(--cod-line);
	color: var(--cod-ink);
	font-size: var(--cod-fs, 16px);
}
.cod-preview__section {
	font-size: 16px; font-weight: var(--cod-hw, 700);
	margin: calc(var(--cod-field-gap, 16px) + 10px) 0 12px;
	padding-bottom: 8px; border-bottom: 1px solid var(--cod-line);
}
.cod-preview__section:first-of-type { margin-top: 6px; }
.cod-preview .cod-summary { margin: var(--cod-field-gap, 16px) 0; }
.cod-preview .cod-cta { margin-top: 18px; }

/* La previsualización imita los campos que pinta Gravity Forms, para que
   lo que ves en el panel se parezca de verdad a lo que verá el cliente. */
.cod-preview__fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cod-field-gap, 16px); }
.cod-preview__fields .cod-preview__f--wide { grid-column: 1 / -1; }
.cod-preview__f label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 5px; }
.cod-preview__f i {
	display: block; height: 44px; border: 1px solid var(--cod-line);
	border-radius: 11px; background: #fff;
}

/* ─────────────────────────── responsive ───────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════
   MÓVIL Y GAMA BAJA
   El 99% del tráfico entra desde el móvil, .cod-checkout muchas veces desde un Android
   barato con conexión regular. Estas reglas van a eso.
   ═══════════════════════════════════════════════════════════════════ */

/* Objetivos táctiles: 48px es lo que recomienda Google y lo que evita que
   un dedo gordo marque la oferta de al lado. */
.cod-checkout .cod-bundle,
.cod-checkout .cod-ship,
.cod-checkout .cod-pay,
.cod-checkout .cod-bump { min-height: 48px; }
.cod-checkout input,
.cod-checkout select,
.cod-checkout textarea { min-height: 46px; }

/* iOS hace zoom automático en cualquier campo con letra menor de 16px.
   Ese zoom descoloca el checkout entero y asusta. */
@media (max-width: 780px) {
	.cod-checkout input[type=text],
.cod-checkout input[type=email],
.cod-checkout input[type=tel],
.cod-checkout select,
.cod-checkout textarea { font-size: 16px !important; }
}

/* Nada de rebotes ni animaciones para quien las tenga desactivadas
   (y de paso, menos trabajo para la GPU en móviles lentos). */
@media (prefers-reduced-motion: reduce) {
	.cod-checkout *,
.cod-funnel * {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}

/* Las preguntas frecuentes están abajo del todo: el navegador se ahorra
   maquetarlas hasta que hacen falta. */
.cod-checkout .cod-faq { content-visibility: auto; contain-intrinsic-size: 300px; }

/* Reservar el hueco de la imagen evita el salto de maquetación cuando
   carga (eso es lo que penaliza el CLS y lo que marea al usuario). */
.cod-checkout .cod-bundle__img { aspect-ratio: 1 / 1; }
.cod-checkout .cod-img-free .cod-bundle__img { aspect-ratio: auto; }

.cod-checkout { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* AJUSTES DE MÓVIL
 *
 * OJO: aquí NO se ponen valores fijos de nada que el usuario pueda
 * configurar en Branding (aire, separación, tamaño de imagen, tamaño del
 * título, del precio…). Este bloque los tenía clavados a fuego y, como el
 * 99% del tráfico es móvil, el resultado era que los ajustes del panel
 * "no hacían nada" en la web mientras sí se veían en la vista previa.
 *
 * Sólo va aquí lo que NO tiene control propio en el panel. */
@media (max-width: 560px) {
	.cod-checkout .cod-hero__title { font-size: 21px; }
	.cod-checkout .cod-summary__total strong { font-size: 20px; }
}

/* Navegadores sin color-mix: degradación limpia, sin romper nada. */
@supports not (color: color-mix(in srgb,
red 50%,
blue)) {
	.cod-checkout .cod-bundle.is-selected,
.cod-checkout .cod-ship.is-selected,
.cod-checkout .cod-pay.is-selected,
.cod-checkout .cod-bump.is-on { background: #fff; }
}

/* ═══════════════════════════════════════════════════════════════════
   VARIANTES DE BRANDING
   Las pone Cod_Suite_Theme::classes() en el contenedor. Añadir una
   variante nueva = una clase aquí y una opción en la clase Theme.
   ═══════════════════════════════════════════════════════════════════ */

.cod-checkout { background: var(--cod-bg); color: var(--cod-ink); font-size: var(--cod-fs); }
.cod-checkout .cod-bundles,
.cod-checkout .cod-ships,
.cod-checkout .cod-bumps { gap: var(--cod-gap); }

/* ── LO PRIMERO DE TODO ────────────────────────────────────────────
   Los envíos de las ofertas que no están seleccionadas se ocultan con
   el atributo `hidden`. Como .cod-ship es `display:flex`, ese display
   GANABA al `display:none` que el navegador aplica a [hidden] y salían
   todos a la vez. Esta regla es la que hace que cada oferta enseñe
   sólo SUS envíos. No la quites.
   ────────────────────────────────────────────────────────────────── */
.cod-checkout [hidden],
.cod-preview [hidden],
.cod-funnel [hidden] { display: none !important; }

/* ── control de selección de la oferta (punto tipo radio) ─────────── */

.cod-checkout .cod-bundle__dot {
	flex: 0 0 20px; width: 20px; height: 20px;
	border: 2px solid var(--cod-line); border-radius: 50%;
	position: relative; transition: border-color .15s ease;
}
.cod-checkout .cod-bundle.is-selected .cod-bundle__dot { border-color: var(--cod-primary); }
.cod-checkout .cod-bundle.is-selected .cod-bundle__dot::after {
	content: ''; position: absolute; inset: 3px;
	background: var(--cod-primary); border-radius: 50%;
}

/* ── imagen de la oferta: forma y encaje configurables ────────────── */

.cod-checkout .cod-bundle__img { flex: 0 0 var(--cod-img, 68px); }
.cod-checkout .cod-bundle__img img {
	width: var(--cod-img, 68px);
	height: var(--cod-img, 68px);
	object-fit: var(--cod-img-fit, contain);
	border-radius: var(--cod-img-radius, 0);
	display: block;
	background: transparent;
}
/* "libre": la imagen manda, no se recorta ni se cuadra */
.cod-checkout .cod-img-free .cod-bundle__img { flex: 0 0 auto; }
.cod-checkout .cod-img-free .cod-bundle__img img { width: auto; height: var(--cod-img, 68px); }

.cod-checkout .cod-ctrl-none .cod-bundle__img,
.cod-checkout .cod-ctrl-radio .cod-bundle__img { display: none; }
.cod-checkout .cod-ctrl-image .cod-bundle__dot,
.cod-checkout .cod-ctrl-none .cod-bundle__dot { display: none; }

/* ── composición de las ofertas ───────────────────────────────────── */

.cod-checkout .cod-layout-rows .cod-bundle { padding: 11px 13px; }
.cod-checkout .cod-layout-rows .cod-bundle__img { flex-basis: 44px; }
.cod-checkout .cod-layout-rows .cod-bundle__img img { width: 44px; height: 44px; }
.cod-checkout .cod-layout-rows .cod-bundle__now { font-size: 16px; }

.cod-checkout .cod-layout-grid .cod-bundles { display: grid; grid-template-columns: repeat(3, 1fr); }
.cod-checkout .cod-layout-grid .cod-bundle { flex-direction: column; text-align: center; gap: 8px; padding: 18px 12px; }
.cod-checkout .cod-layout-grid .cod-bundle__price { text-align: center; }
.cod-checkout .cod-layout-grid .cod-bundle__meta { align-items: center; }
@media (max-width: 620px) {
	.cod-checkout .cod-layout-grid .cod-bundles { grid-template-columns: 1fr; }
	.cod-checkout .cod-layout-grid .cod-bundle { flex-direction: row; text-align: left; }
}

.cod-checkout .cod-layout-compact .cod-bundle { padding: 9px 12px; border-width: 1px; }
.cod-checkout .cod-layout-compact .cod-bundle__img { display: none; }
.cod-checkout .cod-layout-compact .cod-bundle__meta { font-size: 11.5px; }
.cod-checkout .cod-layout-compact .cod-bundle__now { font-size: 15.5px; }

/* ── botones ──────────────────────────────────────────────────────── */

.cod-btn-gradient .gform_footer input[type=submit],
.cod-checkout .cod-btn-gradient .cod-cta {
	background: linear-gradient(135deg, var(--cod-primary) 0%,
		color-mix(in srgb, var(--cod-primary) 65%, var(--cod-accent)) 100%) !important;
}
.cod-btn-outline .gform_footer input[type=submit],
.cod-checkout .cod-btn-outline .cod-cta {
	background: transparent !important;
	color: var(--cod-primary) !important;
	border: 2px solid var(--cod-primary) !important;
	box-shadow: none;
}
.cod-btn-pill .gform_footer input[type=submit],
.cod-checkout .cod-btn-pill .cod-cta { border-radius: 999px !important; }

.cod-checkout .gform_footer input[type=submit],
.cod-checkout .cod-cta { color: var(--cod-primary-ink) !important; }

/* ── sombras ──────────────────────────────────────────────────────── */

.cod-checkout .cod-shadow-none .cod-bundle,
.cod-checkout .cod-shadow-none .cod-ship,
.cod-checkout .cod-shadow-none .cod-pay { box-shadow: none !important; }

.cod-checkout .cod-shadow-strong .cod-bundle { box-shadow: 0 6px 18px -8px rgba(15, 23, 42, .28); }
.cod-checkout .cod-shadow-strong .cod-bundle.is-selected { box-shadow: 0 12px 30px -12px var(--cod-primary); }

/* ── insignias ────────────────────────────────────────────────────── */

.cod-checkout .cod-badge-ribbon .cod-bundle__badge {
	top: 10px; left: auto; right: -6px; border-radius: 4px 0 0 4px;
	background: var(--cod-accent); transform: none;
}
.cod-checkout .cod-badge-corner .cod-bundle__badge {
	top: 0; left: 0; border-radius: var(--cod-radius) 0 12px 0; padding: 5px 12px;
}/* ── secciones ────────────────────────────────────────────────────── */

.cod-sect-plain .gsection,
/* ── secciones ────────────────────────────────────────────────────── */

.cod-sect-plain .cod-section { border-bottom: none; }.cod-sect-bar .gsection,
.cod-sect-bar .cod-section {
	border-bottom: none; background: var(--cod-surface);
	padding: 10px 14px !important; border-radius: var(--cod-radius-sm);
	border-left: 4px solid var(--cod-primary);
}
.cod-sect-number { counter-reset: codsec; }.cod-sect-number .gsection,
.cod-sect-number .cod-section { counter-increment: codsec; }.cod-sect-number .gsection_title::before,
.cod-sect-number .cod-section__title::before {
	content: counter(codsec);
	display: inline-flex; align-items: center; justify-content: center;
	width: 24px; height: 24px; margin-right: 9px;
	background: var(--cod-primary); color: var(--cod-primary-ink);
	border-radius: 50%; font-size: 13px; font-weight: 700;
}

/* ── alineación y fondo ───────────────────────────────────────────── */

.cod-checkout .cod-align-center .cod-hero,
.cod-checkout .cod-align-center .cod-summary__note { text-align: center; }

.cod-checkout .cod-hero__banner img { width: 100%; border-radius: var(--cod-radius); display: block; margin-bottom: 14px; }
.cod-checkout .cod-hero__logo img { max-height: var(--cod-logo-h); }.cod-checkout .gsection_title,
.cod-checkout .cod-section__title,
.cod-checkout .cod-hero__title { font-weight: var(--cod-hw); }

/* ═══════════════════════════════════════════════════════════════════
   PANTALLA DE CARGA
   El checkout se monta en el navegador (tarjetas, envíos, teléfono). Sin
   esto, el cliente ve medio segundo de campos sueltos de Gravity Forms y
   luego un salto. Con esto ve el nombre de la tienda y aparece ya montado.
   ═══════════════════════════════════════════════════════════════════ */

.cod-checkout .cod-boot {
	display: none;
	flex-direction: column; align-items: center; justify-content: center;
	gap: 10px;
	min-height: 280px;
	padding: 40px 20px;
	text-align: center;
}
.cod-checkout.is-booting .cod-boot { display: flex; }
.cod-checkout.is-booting .cod-checkout__body { visibility: hidden; height: 0; overflow: hidden; }

.cod-checkout .cod-boot__logo { max-height: 40px; width: auto; opacity: .9; margin-bottom: 4px; }
.cod-checkout .cod-boot__spin {
	width: 30px; height: 30px;
	border: 3px solid color-mix(in srgb, var(--cod-primary) 22%, transparent);
	border-top-color: var(--cod-primary);
	border-radius: 50%;
	animation: cod-spin .7s linear infinite;
}
.cod-checkout .cod-boot__name { font-size: 15.5px; font-weight: 700; color: var(--cod-ink); }
.cod-checkout .cod-boot__sub { font-size: 13px; color: var(--cod-muted); }

@keyframes cod-spin { to  { transform: rotate(360deg); } }

/* Red de seguridad: si el JavaScript no llega a ejecutarse, a los 4
   segundos se destapa igual. Un checkout escondido es un pedido perdido.
   Se hace con una animación de CSS porque no depende de JS por definición. */
.cod-checkout.is-booting .cod-checkout__body {
	animation: cod-failsafe 0s 4s forwards;
}
@keyframes cod-failsafe {
	to  { visibility: visible; height: auto; overflow: visible; }
}
.cod-checkout.is-booting .cod-boot {
	animation: cod-failsafe-hide 0s 4s forwards;
}
@keyframes cod-failsafe-hide { to  { display: none; } }

@media (prefers-reduced-motion: reduce) {
	.cod-checkout .cod-boot__spin { animation-duration: 2s; }
}

/* ═══════════════════════════════════════════════════════════════════
   ANCHO DEL CONTENEDOR
   Casi todos los temas limitan el contenido a 600-700 px. En un checkout
   eso deja márgenes enormes en escritorio y aprieta el móvil. Cuando la
   página es un checkout, se le devuelve el ancho.
   ═══════════════════════════════════════════════════════════════════ */

.cod-checkout-page .entry-content,
.cod-checkout-page .wp-block-post-content,
.cod-checkout-page .site-main,
.cod-checkout-page main .alignwide,
.cod-checkout-page .is-layout-constrained > .cod-checkout {
	max-width: none !important;
}
.cod-checkout-page .cod-checkout {
	width: 100%;
	max-width: var(--cod-width);
	margin-left: auto; margin-right: auto;
	padding-left: 16px; padding-right: 16px;
}

/* El sangrado del tema se SUMA al nuestro.
 *
 * Twenty Twenty-Five mete 30 px por lado; encima van nuestros 16 y el
 * formulario se queda en 283 px de los 375 de la pantalla: el 75 %. Se
 * nota muchísimo — campos estrechos, precios apretados, todo pequeño.
 *
 * La solución es quitarle el sangrado al contenedor del tema y quedarnos
 * nosotros con el control del margen. Se hace sólo en páginas marcadas
 * como checkout (la clase la pone Cod_Suite_Render), así que no toca
 * ninguna otra página de la web.
 *
 * Se evita a propósito el truco de `width:100vw` con márgenes negativos:
 * depende de que vw coincida con el ancho real del contenedor, y con
 * barras de scroll clásicas o zoom del navegador no coincide. */
.cod-checkout-page .wp-block-post-content,
.cod-checkout-page .entry-content,
.cod-checkout-page .site-main > .entry-content {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* OJO: aquí sólo se toca el contenedor del contenido, NUNCA `main` ni
   `.wp-site-blocks`. Los temas de bloques compensan el sangrado global de
   esos contenedores con `margin: 0 -30px` en los bloques "a todo el ancho"
   (la cabecera, el pie). Si les quitas el padding, esos márgenes negativos
   se quedan sin nada que compensar, la cabecera se sale 30 px por cada
   lado y aparece scroll horizontal en toda la página.

   Y por el mismo motivo tampoco se tocan los márgenes del contenedor del
   contenido: son los que lo sacan del sangrado del padre. */

/* Nada de scroll lateral, pase lo que pase. */
body.cod-checkout-page { overflow-x: hidden; }

@media (max-width: 699px) {
	.cod-checkout-page .cod-checkout { padding-left: 14px; padding-right: 14px; }
}

/* ═══════════════════════════════════════════════════════════════════
   MOTOR NATIVO
   El formulario propio, sin Gravity Forms. Aquí no hace falta pelearse
   con el CSS de nadie: las clases son nuestras y no hay reset ajeno que
   las pise. Por eso este bloque no lleva ni un solo !important.
   ═══════════════════════════════════════════════════════════════════ */

.cod-checkout .cod-form { margin: 0; }

/* La trampa antibots. Fuera de la pantalla, pero no display:none —
   algunos bots detectan display:none y se saltan el campo. */
.cod-checkout .cod-hp {
	position: absolute;
	left: -9999px;
	width: 1px; height: 1px;
	overflow: hidden;
}

.cod-checkout .cod-field { margin: 0 0 14px; }

/* En el original la etiqueta va oculta y trabaja el placeholder: menos
   ruido y el formulario entra de una pantalla. Se mantiene en el DOM para
   los lectores de pantalla. */
.cod-labels-ocultas .cod-label {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.cod-checkout .cod-label {
	display: block;
	margin: 0 0 7px;
	font-size: var(--cod-label-fs, 13.5px);
	font-weight: 600;
	line-height: 1.35;
	color: var(--cod-ink);
}

/* Con las etiquetas visibles el campo necesita respirar más: si no, la
   etiqueta del siguiente campo queda pegada al anterior y no se sabe a
   cuál pertenece. */
.cod-labels-visibles .cod-field { margin-bottom: var(--cod-field-gap, 18px); }

.cod-checkout .cod-req { color: #dc2626; margin-left: 4px; }

.cod-checkout .cod-input {
	width: 100%;
	height: 48px;
	min-height: 48px;
	padding: 12px 14px;
	border: 1px solid var(--cod-line);
	border-radius: 8px;
	font-family: inherit;
	/* 16px no es capricho: por debajo de eso Safari en iPhone hace zoom al
	   enfocar el campo y descoloca el checkout entero. */
	font-size: 16px;
	line-height: 1.3;
	color: #1b2330;
	background: #fff;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.cod-checkout select.cod-input { height: 48px; }
.cod-checkout .cod-input::placeholder { color: #707070; opacity: 1; }

.cod-checkout .cod-input:focus {
	border-color: var(--cod-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--cod-primary) 15%, transparent);
	outline: none;
}

.cod-checkout .cod-input::placeholder { color: var(--cod-muted); opacity: .8; }

.cod-checkout select.cod-input {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 38px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c8aa0' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 13px center;
	background-size: 18px;
	text-overflow: ellipsis;
}

.cod-checkout select.cod-input:disabled {
	background-color: var(--cod-surface);
	color: var(--cod-muted);
	cursor: not-allowed;
}

/* Errores de validación */
.cod-checkout .cod-field.has-error .cod-input { border-color: #dc2626; }
.cod-checkout .cod-field__error {
	margin: 6px 0 0;
	font-size: 13px;
	color: #dc2626;
}
.cod-checkout .cod-form__error {
	margin: 0 0 16px;
	padding: 12px 14px;
	border-radius: 11px;
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #991b1b;
	font-size: 14px;
}

.cod-checkout .cod-form__footer { margin: 22px 0 0; }

/* Subtítulo bajo el botón de comprar: quita el miedo justo cuando el
   cliente tiene el dedo encima. Discreto, nunca compite con el botón. */
.cod-checkout .cod-cta__sub {
	margin: 10px 0 0;
	text-align: center;
	font-size: 13px;
	line-height: 1.5;
	color: var(--cod-muted);
}

/* Botón enviando: el cliente tiene que ver que pasó algo, o vuelve a
   pulsar y se lleva un susto. */
.cod-checkout .cod-submit { position: relative; }
.cod-checkout .cod-submit__spin { display: none; }
.cod-checkout .cod-submit.is-sending { pointer-events: none; opacity: .8; }
.cod-checkout .cod-submit.is-sending .cod-submit__spin {
	display: inline-block;
	width: 16px; height: 16px;
	margin-left: 10px;
	vertical-align: -3px;
	border: 2px solid rgba(255,255,255,.45);
	border-top-color: #fff;
	border-radius: 50%;
	animation: cod-spin .7s linear infinite;
}

/* El título de la página que pone el tema sobra en un checkout: repite lo
   que ya dice el encabezado y empuja la oferta fuera de la primera pantalla,
   que es justo donde se decide la venta. */
.cod-checkout-page .wp-block-post-title,
.cod-checkout-page .entry-title,
.cod-checkout-page .page-title { display: none; }


/* ═══════════════════════════════════════════════════════════════════
   MODAL DE CONFIRMACIÓN DE DIRECCIÓN

   Vive DENTRO de .cod-checkout a propósito: así hereda las variables del
   branding (color, redondeo, tipografía) sin configurar nada, y un
   checkout azul tiene el modal azul.
   ═══════════════════════════════════════════════════════════════════ */

.cod-checkout .cod-modal {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(15, 23, 42, .5);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}
.cod-checkout .cod-modal.is-open { display: flex; }

/* Con el modal abierto la página de detrás no se mueve. */
html.cod-modal-abierto, html.cod-modal-abierto body { overflow: hidden; }

.cod-checkout .cod-modal__card {
	width: 100%;
	max-width: 420px;
	/* dvh y no vh: en móvil la barra del navegador se come parte de vh y
	   el modal se corta por abajo justo donde están los botones. */
	max-height: calc(100dvh - 32px);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	background: #fff;
	border-radius: calc(var(--cod-radius) + 8px);
	padding: 26px 22px;
	box-shadow: 0 20px 60px rgba(15, 23, 42, .25);
	animation: cod-modal-sube .24s cubic-bezier(.2, .8, .2, 1);
}
@supports not (height: 100dvh) {
	.cod-checkout .cod-modal__card { max-height: calc(100vh - 32px); }
}
@keyframes cod-modal-sube {
	from { transform: translateY(14px) scale(.985); opacity: 0; }
	to   { transform: none; opacity: 1; }
}

.cod-checkout .cod-modal__title {
	margin: 0 0 9px;
	font-size: 20px;
	line-height: 1.3;
	font-weight: 800;
	color: var(--cod-ink);
	text-align: center;
	letter-spacing: -.2px;
}
.cod-checkout .cod-modal__sub {
	margin: 0 0 22px;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--cod-muted);
	text-align: center;
}

.cod-checkout .cod-modal__warn { margin: 0 0 20px; }
.cod-checkout .cod-modal__w {
	background: #fff8ef;
	border: 1px solid #fbe2bf;
	color: #9a4a16;
	font-size: 13px;
	line-height: 1.5;
	border-radius: 14px;
	padding: 12px 14px;
}
.cod-checkout .cod-modal__w + .cod-modal__w { margin-top: 8px; }

.cod-checkout .cod-modal__rows { margin: 0 0 22px; }
.cod-checkout .cod-modal__row {
	padding: 12px 2px;
	border-bottom: 1px solid var(--cod-line);
}
.cod-checkout .cod-modal__row:first-child { padding-top: 2px; }
.cod-checkout .cod-modal__row:last-child { border-bottom: none; padding-bottom: 0; }

.cod-checkout .cod-modal__k {
	display: block;
	margin-bottom: 3px;
	font-size: 13px;
	font-weight: 400;
	color: var(--cod-muted);
}
.cod-checkout .cod-modal__v {
	display: block;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--cod-ink);
	word-break: break-word;
	overflow-wrap: anywhere;
}

.cod-checkout .cod-modal__btns { display: flex; flex-direction: column; gap: 4px; }

.cod-checkout .cod-modal__ok {
	width: 100%;
	padding: 16px;
	border: none;
	border-radius: var(--cod-radius);
	background: var(--cod-primary);
	color: var(--cod-primary-ink, #fff);
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	box-shadow: 0 8px 18px -6px color-mix(in srgb, var(--cod-primary) 55%, transparent);
}
.cod-checkout .cod-modal__ok:active { transform: translateY(1px); }

/* Sin contorno del navegador.
 *
 * Al abrir el modal se le da el foco al botón (para que se pueda confirmar
 * con Enter y para los lectores de pantalla), y el navegador le dibujaba su
 * anillo claro alrededor: sobre el azul se veía como un borde blanco
 * pegado al botón. Se quita el del sistema y se pone uno propio, del color
 * de la marca y separado, que sólo aparece si navegas con el teclado. */
.cod-checkout .cod-modal__ok:focus,
.cod-checkout .cod-modal__no:focus { outline: none; }

.cod-checkout .cod-modal__ok:focus-visible,
.cod-checkout .cod-modal__no:focus-visible {
	outline: 2px solid var(--cod-ink);
	outline-offset: 3px;
}

.cod-checkout .cod-modal__no {
	width: 100%;
	padding: 13px;
	border: none;
	border-radius: var(--cod-radius);
	background: transparent;
	color: var(--cod-muted);
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 600;
	cursor: pointer;
}
.cod-checkout .cod-modal__no:active { color: var(--cod-ink); }

/* Pantallas pequeñas de verdad (iPhone SE y Androids de gama baja). */
@media (max-width: 380px) {
	.cod-checkout .cod-modal__card { padding: 22px 16px; border-radius: 18px; }
	.cod-checkout .cod-modal__title { font-size: 18px; }
	.cod-checkout .cod-modal__v { font-size: 15px; }
}

/* «Impuestos incluidos», colgando del importe.
   La columna de la derecha del total: primero la cifra, y debajo la nota
   legal, pequeña y gris. Cuando era una fila suelta se quedaba sola a la
   derecha con la nota de pago a la izquierda, y el recuadro parecía
   partido por la mitad. */
.cod-checkout .cod-summary__val {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
}
.cod-checkout .cod-summary__tax {
	font-family: var(--cod-font);
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--cod-muted);
}

/* ── Formulario de tarjeta (Stripe) ───────────────────────────────────
   Son tres campos sueltos de Stripe, cada uno en su hueco. La caja de
   fuera —borde, radio, alto, padding— es NUESTRA y usa las mismas
   variables que los demás campos del checkout; dentro de ella Stripe
   sólo pinta el texto que teclea el cliente, con la letra y el color que
   le pasamos en Cod_Suite_Render::stripe_style().

   Así no hay forma de que el bloque de la tarjeta se vea «de otra web»,
   que es de las cosas que más abandono provocan. */
/* EL BLOQUE ENTERO, CON CUERPO PROPIO.
   Antes era una línea de separación y tres cajas blancas sobre fondo
   blanco: se leía como «más campos del formulario». Con su fondo, su
   borde y su candado se lee como «aquí se paga», que es lo que hay que
   distinguir de un vistazo. Los campos siguen blancos, así que resaltan
   sobre él en vez de fundirse. */
.cod-card {
	margin-top: var(--cod-field-gap, 16px);
	padding: 16px;
	border: 1px solid var(--cod-line, #dde6f1);
	border-radius: var(--cod-radius, 16px);
	background: var(--cod-surface, #f7f9fc);
}
.cod-card[hidden] { display: none; }

.cod-card__error {
	margin: 10px 0 0;
	padding: 9px 12px;
	border-radius: calc(var(--cod-radius, 16px) / 2);
	background: #fdeceb;
	color: #8a1f1f;
	font-size: 13.5px;
	line-height: 1.45;
}
.cod-card__error[hidden] { display: none; }

/* LA CABECERA: el candado. Los logos de las marcas no van aquí — están
   en la fila del método de pago, cuatro dedos más arriba. */
.cod-checkout .cod-card__head {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin: 0 0 14px;
}
.cod-checkout .cod-card__secure {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--cod-font);
	font-size: 12.5px;
	line-height: 1.35;
	color: var(--cod-muted);
}
.cod-checkout .cod-card__secure svg { flex: none; color: #16a34a; }
.cod-checkout .cod-card__brands { display: flex; align-items: center; gap: 6px; }
.cod-checkout .cod-card__brands svg { display: block; }

@media (max-width: 400px) {
	.cod-checkout .cod-card__brands svg { width: 32px; height: 22px; }
}

/* LAS BILLETERAS, ENCIMA DE LOS CAMPOS.
   Nace oculto: sólo se destapa si Stripe confirma que hay algún botón
   que pintar. Un separador con un hueco vacío debajo se ve como algo
   roto, y en la mitad de los móviles no hay ninguna billetera. */
.cod-checkout .cod-card__express { margin: 0 0 18px; }
.cod-checkout .cod-card__express[hidden] { display: none; }

/* El «o paga con tarjeta», con su línea a cada lado. */
.cod-checkout .cod-card__o {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 16px 0 0;
	font-family: var(--cod-font);
	font-size: 12.5px;
	color: var(--cod-muted);
}
.cod-checkout .cod-card__o::before,
.cod-checkout .cod-card__o::after {
	content: '';
	flex: 1 1 auto;
	height: 1px;
	background: var(--cod-line);
}

/* Los tres campos: el número ocupa la fila entera, y vencimiento y CVC
   van al lado el uno del otro. El nombre del titular es un input normal
   nuestro y hereda .cod-input sin tocar nada. */
.cod-checkout .cod-card__fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 12px;
	row-gap: var(--cod-field-gap, 16px);
}
.cod-checkout .cod-card__f--wide { grid-column: 1 / -1; }

.cod-checkout .cod-card__lb {
	display: block;
	margin: 0 0 7px;
	font-family: var(--cod-font);
	font-size: var(--cod-label-fs, 13.5px);
	font-weight: 600;
	line-height: 1.35;
	color: var(--cod-ink);
}

.cod-checkout .cod-card__box {
	display: flex;
	align-items: center;
	min-height: 48px;
	padding: 0 14px;
	border: 1px solid var(--cod-line);
	border-radius: 8px;
	background: #fff;
	transition: border-color .15s ease, box-shadow .15s ease;
}
/* El iframe de Stripe se mete dentro con su propio nombre de clase; que
   ocupe todo el ancho del hueco. */
.cod-checkout .cod-card__box > * { width: 100%; }

.cod-checkout .cod-card__box.is-focus {
	border-color: var(--cod-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--cod-primary) 15%, transparent);
}
.cod-checkout .cod-card__box.is-invalid { border-color: #dc2626; }

.cod-checkout .cod-card__name { margin: 0; }

/* MIENTRAS CARGAN LOS CAMPOS DE TARJETA.
   Un hueco vacío hace pensar que algo se ha roto; con esto se ve que
   está trabajando, y la caja ya ocupa su sitio, así que la página no
   pega ningún salto cuando aparece el texto. */
.cod-checkout .cod-card__fields[data-cargando] .cod-card__box {
	background:
		linear-gradient(90deg, transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%),
		var(--cod-surface, #f7f9fc);
	background-size: 200% 100%, auto;
	animation: cod-cargando 1.1s ease-in-out infinite;
}
@keyframes cod-cargando { from { background-position: -100% 0, 0 0; } to { background-position: 200% 0, 0 0; } }

@media (prefers-reduced-motion: reduce) {
	.cod-checkout .cod-card__fields[data-cargando] .cod-card__box { animation: none; }
}

.cod-checkout .cod-card__extra[hidden] { display: none; }

/* La casilla de «la facturación es la misma que el envío».
   Hereda la tipografía, el color y el tamaño de las etiquetas del
   checkout: antes iba con valores propios y se veía de otra web. */
.cod-checkout .cod-card__same {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: start;
	column-gap: 9px;
	margin: 14px 0 0;
	cursor: pointer;
	font-family: var(--cod-font);
}
.cod-checkout .cod-card__cb {
	width: 17px;
	height: 17px;
	min-height: 0;
	margin: 0;
	padding: 0;
	flex: none;
	accent-color: var(--cod-primary);
	/* Alineado con la primera línea del texto, no con la caja entera:
	   con dos líneas, «align-items:center» lo dejaba a media altura. */
	transform: translateY(1px);
}
.cod-checkout .cod-card__same-txt {
	font-family: var(--cod-font);
	font-size: var(--cod-label-fs, 13.5px);
	line-height: 1.35;
	color: var(--cod-ink);
	font-weight: 500;
}
/* La dirección de facturación reutiliza la rejilla de los campos de
   tarjeta —misma etiqueta, mismo alto, mismos huecos—, así que al
   desplegarse no parece que venga de otro sitio. */
.cod-checkout .cod-card__billing { margin-top: 16px; }
.cod-checkout .cod-card__billing[hidden] { display: none; }
.cod-checkout .cod-card__billing select.cod-input { padding-right: 38px; }