/**
 * Fanor Checkout. Handle 'fanor-checkout' (depende de 'fanor-premium-tokens').
 *
 * NO depende de 'fanor-header-base': ese archivo neutraliza los `<button>` nativos con
 * `.fanor-hd button, .fanor-portal button { padding: 0; border: 0 }` y mete un
 * `text-decoration: none !important` que aquí estorba. Este widget no es de header y se
 * viste solo.
 *
 * Todo el color entra por variables locales `--fanor-ck-*` que por defecto valen el token del
 * sistema. Los controles de Elementor reescriben ESAS VARIABLES sobre `.fanor-ck`, nunca la
 * propiedad: un `selectors` se emite con 0,4,0 y le ganaría a los estados y al móvil
 * (INSTRUCCIONES.md §3.3).
 *
 * Todos los `:hover` van prefijados por `.fanor-ck` —que con la pseudoclase suma 0,3,0— y
 * declaran FONDO Y COLOR, aunque solo cambie uno: el que se deje sin declarar es
 * exactamente el que rellena el Global Kit de Elementor (§3.1).
 */

.fanor-ck {
	/* 80rem es el ancho del header y del pie. El margen lateral va POR FUERA de esa
	   medida —ver `max-width` más abajo—, así que el contenido cae exactamente sobre la
	   misma columna que el logo y el menú en vez de quedar metido hacia dentro. */
	--fanor-ck-max: 80rem;
	--fanor-ck-pad: 24px;
	/* Aire vertical propio. El widget ocupa la página entera entre el header y el pie, y sin
	   esto quedaba a 10px de cada uno —los del contenedor de Elementor—, pegado a los dos.
	   Es padding y no margin para que no colapse con los márgenes de lo que tenga al lado. */
	--fanor-ck-pad-y: 48px;
	--fanor-ck-lado: 360px;
	--fanor-ck-gap: 32px;

	--fanor-ck-tinta: var(--fnp-tinta, #1A1A1A);
	--fanor-ck-tinta-h: var(--fnp-tinta-hover, #333333);
	--fanor-ck-oro: var(--fnp-oro, #CC0000);
	--fanor-ck-oro-clr: var(--fnp-oro-clr, #E01B1B);
	--fanor-ck-oro-pale: var(--fnp-oro-pale, #FDECEC);
	--fanor-ck-linea: var(--fnp-linea, #E5E5E5);
	--fanor-ck-hueso: var(--fnp-hueso, #F7F7F7);
	--fanor-ck-verde: var(--fnp-verde, #2E7D32);
	--fanor-ck-gris: var(--fnp-txt-3, #666666);

	/*
	 * Piezas que los controles del widget pueden reescribir.
	 *
	 * Son VARIABLES y no propiedades por lo que dice la cabecera: un `selectors` de Elementor
	 * se emite con 0,4,0 y le ganaría al `:hover`, al `:focus` y al corte de móvil, que están
	 * escritos con dos o tres clases. Escribiendo la variable, el estado sigue mandando sobre
	 * su propio valor y el control solo cambia el punto de partida.
	 *
	 * El valor por defecto de cada una es el que tenía la regla antes de existir el control, así
	 * que el widget se ve igual mientras nadie los toque.
	 */
	--fanor-ck-panel-bg: #FFFFFF;
	--fanor-ck-panel-radio: var(--fnp-r-2xl, 16px);
	--fanor-ck-panel-pad: 28px;

	--fanor-ck-input-bg: #FFFFFF;
	--fanor-ck-input-borde: var(--fanor-ck-linea);
	--fanor-ck-input-radio: var(--fnp-r-md, 8px);
	--fanor-ck-input-pad: 13px 16px;

	--fanor-ck-op-bg: #FFFFFF;
	--fanor-ck-op-radio: var(--fnp-r-md, 8px);
	--fanor-ck-op-pad: 16px 18px;

	--fanor-ck-cta-bg: var(--fanor-ck-oro);
	--fanor-ck-cta-bg-h: var(--fnp-oro-osc, #A80000);
	--fanor-ck-cta-txt: #FFFFFF;
	--fanor-ck-cta-radio: var(--fnp-r-md, 4px);
	--fanor-ck-btn-alto: 56px;

	--fanor-ck-bola-tam: 32px;
	--fanor-ck-ficha-alto: clamp(420px, 72vh, 700px);

	box-sizing: border-box;
	/*
	 * El ancho MÁXIMO es la columna + sus dos márgenes, no la columna a secas.
	 *
	 * Con `max-width: var(--max)` a secas el padding se comía 2×24px de los 80rem y el
	 * contenido quedaba 24px por dentro del header a cada lado: se notaba, porque el
	 * logo y la primera línea del carrito no arrancaban en la misma vertical. Sumando el
	 * margen al tope, la caja de contenido mide justo `--fanor-ck-max` en pantallas
	 * anchas y el margen solo entra a trabajar cuando la ventana se estrecha, que es
	 * cuando de verdad hace falta.
	 */
	max-width: calc(var(--fanor-ck-max) + var(--fanor-ck-pad) * 2);
	margin-inline: auto;
	padding-block: var(--fanor-ck-pad-y);
	padding-inline: var(--fanor-ck-pad);
	color: var(--fanor-ck-tinta);
	font-family: var(--fnp-font-body, 'Roboto', system-ui, sans-serif);
}

.fanor-ck *,
.fanor-ck *::before,
.fanor-ck *::after {
	box-sizing: border-box;
}

/*
 * `hidden` tiene que ganarle a cualquier `display` del widget.
 *
 * El atributo solo aporta un `display: none` de la hoja del navegador, así que una regla
 * nuestra tan corriente como `.fanor-ck__campos { display: grid }` lo anula sin querer y el
 * bloque se sigue viendo. Pasó en dos sitios a la vez: los campos de la factura aparecían
 * abiertos sin marcar la casilla, y los de dirección seguían ahí al elegir recogida en tienda.
 *
 * Se arregla aquí, en una regla general, y no bloque a bloque: el que venga después heredará
 * el comportamiento correcto en vez de repetir el mismo fallo. (0,2,0) le basta para ganar a
 * las clases sueltas del propio archivo, así que no hace falta `!important`.
 */
.fanor-ck [hidden] {
	display: none;
}

/* ── Indicador de pasos ───────────────────────────────────────────────────── */

.fanor-ck__pasos {
	display: flex;
	align-items: center;
	gap: 0;
	margin: 0 0 40px;
	padding: 0;
	list-style: none;
}

.fanor-ck__paso {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 0 0 auto;
}

/* La línea que une los círculos. Es un pseudo-elemento del propio paso y no un nodo
   aparte: así el markup queda limpio y la línea se estira con `flex: 1`. */
.fanor-ck__paso:not(:last-child)::after {
	content: '';
	flex: 1 1 auto;
	height: 1px;
	min-width: 24px;
	background: var(--fanor-ck-linea);
	margin: 0 16px;
}

.fanor-ck__paso:not(:last-child) {
	flex: 1 1 auto;
}

.fanor-ck__bola {
	--fanor-ck-bola-bg: #fff;
	--fanor-ck-bola-tinta: var(--fanor-ck-gris);
	position: relative;
	display: grid;
	place-items: center;
	width: var(--fanor-ck-bola-tam);
	height: var(--fanor-ck-bola-tam);
	flex: 0 0 var(--fanor-ck-bola-tam);
	border-radius: var(--fnp-r-pill, 999px);
	background: var(--fanor-ck-bola-bg);
	border: 1.5px solid var(--fanor-ck-linea);
	color: var(--fanor-ck-bola-tinta);
	font-family: var(--fnp-font-ui, 'Roboto Condensed', sans-serif);
	font-weight: 700;
	font-size: 0.75rem;
	transition: background .25s var(--fnp-e-soft, ease), border-color .25s var(--fnp-e-soft, ease), color .25s var(--fnp-e-soft, ease);
}

.fanor-ck__bola-ok {
	display: none;
	width: 14px;
	height: 14px;
}

.fanor-ck__bola-ok svg {
	width: 100%;
	height: 100%;
	display: block;
}

.fanor-ck__paso.is-activo .fanor-ck__bola {
	--fanor-ck-bola-bg: var(--fanor-ck-tinta);
	--fanor-ck-bola-tinta: #fff;
	background: var(--fanor-ck-bola-bg);
	border: 2px solid var(--fanor-ck-tinta);
	color: var(--fanor-ck-bola-tinta);
}

.fanor-ck__paso.is-hecho .fanor-ck__bola {
	--fanor-ck-bola-bg: var(--fanor-ck-oro-pale);
	--fanor-ck-bola-tinta: var(--fanor-ck-oro);
	background: var(--fanor-ck-bola-bg);
	border-color: var(--fanor-ck-oro);
	color: var(--fanor-ck-bola-tinta);
}

.fanor-ck__paso.is-hecho .fanor-ck__bola-n {
	display: none;
}

.fanor-ck__paso.is-hecho .fanor-ck__bola-ok {
	display: block;
}

.fanor-ck__paso-txt {
	font-family: var(--fnp-font-ui, 'Roboto Condensed', sans-serif);
	font-weight: 700;
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--fanor-ck-gris);
	white-space: nowrap;
}

.fanor-ck__paso.is-activo .fanor-ck__paso-txt {
	color: var(--fanor-ck-tinta);
}

.fanor-ck__paso.is-hecho .fanor-ck__paso-txt {
	color: var(--fanor-ck-oro);
}

/* La bola es un <button>: hay que deshacer el aspecto nativo, porque este archivo no
   depende de header-base y nadie más lo neutraliza (ver la cabecera). Se queda como
   botón porque volver a un paso ya hecho tiene que poder pulsarse; las bolas de pasos
   futuros llegan `disabled` desde el servidor. */
.fanor-ck button.fanor-ck__bola {
	padding: 0;
	font-family: var(--fnp-font-ui, 'Roboto Condensed', sans-serif);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.fanor-ck button.fanor-ck__bola:disabled,
.fanor-ck button.fanor-ck__bola[aria-disabled="true"] {
	cursor: default;
}

.fanor-ck button.fanor-ck__bola:hover,
.fanor-ck button.fanor-ck__bola:focus,
.fanor-ck button.fanor-ck__bola:focus-visible {
	background: var(--fanor-ck-bola-bg);
	color: var(--fanor-ck-bola-tinta);
}

.fanor-ck button.fanor-ck__bola:focus-visible {
	outline: 2px solid var(--fanor-ck-oro);
	outline-offset: 2px;
}

/* El texto del paso se pinta al lado en `.fanor-ck__paso-txt`, que está `aria-hidden`
   para no leerlo dos veces. Este es el que oye un lector de pantalla, y por eso no puede
   ser `display: none`: se saca de la vista sin sacarlo del árbol de accesibilidad. */
.fanor-ck__bola-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ── Bloque medio (form + resumen) ─────────────────────────────────────────────
   Se esconde por ESTADO del DOM, nunca por número de paso. El CSS que ocultaba
   `[data-paso="6"]` rompió el pago cuando PHP renumeró: el 6 pasó a ser cobro y el
   acuse el 7. `.fanor-ck__medio:not(:has(.is-visible))` cubre carrito y gracias.
   El paso de pago usa `.fanor-ck__vista--medible`: grid 0fr + visibility, no
   `display:none` ni `hidden`, para que el SDK de la pasarela pueda medir campos. */
.fanor-ck .fanor-ck__medio:not(:has(.fanor-ck__vista.is-visible)),
.fanor-ck .fanor-ck__vista--medible:not(.is-visible) {
	display: grid;
	grid-template-rows: minmax(0, 0fr);
	grid-auto-rows: 0;
	overflow: hidden;
	visibility: hidden;
	margin: 0;
}

.fanor-ck .fanor-ck__vista--medible:not(.is-visible) > * {
	min-height: 0;
	overflow: hidden;
}

/* ── Vistas ───────────────────────────────────────────────────────────────── */

.fanor-ck__vista {
	outline: none;
}

/* La animación va en la vista visible, no en un `.is-entrando` con temporizador: el
   navegador la dispara al dejar de estar `hidden` y no hay estado que limpiar si el
   usuario cambia de paso a media animación. */
.fanor-ck__vista.is-visible {
	animation: fanorCkEntra .3s var(--fnp-e-out, cubic-bezier(.22, 1, .36, 1)) both;
}

@keyframes fanorCkEntra {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: none; }
}

.fanor-ck__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--fanor-ck-lado);
	gap: var(--fanor-ck-gap);
	align-items: start;
}

.fanor-ck__principal {
	min-width: 0;
}

.fanor-ck__sticky {
	position: sticky;
	top: 24px;
}

/* ── Cabeceras ────────────────────────────────────────────────────────────── */

.fanor-ck__cab {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 24px;
}

.fanor-ck__cab--col {
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.fanor-ck__h2 {
	margin: 0;
	font-family: var(--fnp-font-display, 'Roboto Condensed', sans-serif);
	font-weight: 900;
	font-size: 1.875rem;
	line-height: 1.05;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--fanor-ck-tinta);
}

.fanor-ck__sub {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--fanor-ck-gris);
}

.fanor-ck__mas {
	font-family: var(--fnp-font-ui, 'Roboto Condensed', sans-serif);
	font-weight: 600;
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--fanor-ck-oro);
	text-decoration: none;
	border-bottom: 1px solid var(--fanor-ck-linea);
	padding-bottom: 3px;
	transition: color .2s var(--fnp-e-soft, ease), border-color .2s var(--fnp-e-soft, ease);
}

/* 0,3,0 y declara fondo Y color: ver la cabecera del archivo. */
.fanor-ck .fanor-ck__mas:hover,
.fanor-ck .fanor-ck__mas:focus-visible {
	background: transparent;
	color: var(--fanor-ck-tinta);
	border-color: var(--fanor-ck-oro);
}

/* ── Paso 1: líneas ───────────────────────────────────────────────────────── */

.fanor-ck__lineas {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.fanor-ck__linea {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	padding: 20px;
	background: #fff;
	border: 1px solid var(--fanor-ck-linea);
	border-radius: var(--fnp-r-xl, 14px);
	transition: opacity .2s var(--fnp-e-soft, ease);
}

.fanor-ck__linea.is-cargando {
	opacity: .5;
	pointer-events: none;
}

.fanor-ck__foto {
	flex: 0 0 90px;
	width: 90px;
	height: 90px;
	border-radius: var(--fnp-r-md, 8px);
	overflow: hidden;
	background: var(--fanor-ck-hueso);
	display: block;
}

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

.fanor-ck__datos {
	flex: 1 1 auto;
	min-width: 0;
}

.fanor-ck__cat {
	margin: 0 0 6px;
	font-family: var(--fnp-font-ui, 'Roboto Condensed', sans-serif);
	font-weight: 600;
	font-size: 0.5625rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fanor-ck-gris);
}

.fanor-ck__nombre {
	margin: 0 0 10px;
	font-family: var(--fnp-font-ui, 'Roboto Condensed', sans-serif);
	font-weight: 700;
	font-size: 0.9375rem;
	line-height: 1.3;
}

.fanor-ck__nombre a {
	color: var(--fanor-ck-tinta);
	text-decoration: none;
}

.fanor-ck .fanor-ck__nombre a:hover,
.fanor-ck .fanor-ck__nombre a:focus-visible {
	background: transparent;
	color: var(--fanor-ck-oro);
}

.fanor-ck__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fanor-ck__chip {
	font-size: 0.75rem;
	color: #555;
	background: var(--fanor-ck-hueso);
	border-radius: var(--fnp-r-sm, 6px);
	padding: 4px 10px;
}

.fanor-ck__acciones {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
}

/* El importe de la línea va en la familia del CUERPO, no en la condensada: es un dato que
   se lee cifra a cifra, y la condensada —que aquí construye títulos y botones— junta
   demasiado los números para eso. Es la misma decisión que ya toman las tarjetas del
   catálogo, donde el precio también va en la familia del cuerpo. */
.fanor-ck__precio {
	margin: 0;
	font-family: var(--fnp-font-body, 'Roboto', system-ui, sans-serif);
	font-weight: 700;
	font-size: 1.25rem;
	line-height: 1.1;
	color: var(--fanor-ck-tinta);
	white-space: nowrap;
}

/* Stepper de cantidad */
.fanor-ck__stepper {
	display: flex;
	align-items: center;
	border: 1px solid var(--fanor-ck-linea);
	border-radius: var(--fnp-r-md, 8px);
	overflow: hidden;
	background: #fff;
}

/* 0,2,1: los resets de `button` de otras hojas son 0,1,1 y ganarían a una clase suelta
   (INSTRUCCIONES.md §3.2). Mínimo táctil de 40px en el botón. */
.fanor-ck button.fanor-ck__paso-btn {
	display: grid;
	place-items: center;
	width: 36px;
	height: 40px;
	padding: 0;
	border: 0;
	background: #fff;
	color: var(--fanor-ck-tinta);
	cursor: pointer;
	transition: background .15s var(--fnp-e-soft, ease), color .15s var(--fnp-e-soft, ease);
}

.fanor-ck button.fanor-ck__paso-btn svg {
	width: 14px;
	height: 14px;
	display: block;
}

.fanor-ck button.fanor-ck__paso-btn:hover,
.fanor-ck button.fanor-ck__paso-btn:focus-visible {
	background: var(--fanor-ck-hueso);
	color: var(--fanor-ck-oro);
}

/* 0,2,1, por la MISMA razón que los botones de aquí arriba y con la misma trampa detrás. El
   reset del tema trae `input[type="number"] { border: 1px solid #666; width: 100%; border-radius:
   3px }`, que es (0,1,1): empata en clases con `.fanor-ck__qty` (0,1,0) y desempata por el elemento.
   Perdiendo se perdía TODO lo de esta regla a la vez —borde, ancho y apariencia—, así que el
   contador salía como una caja gris de 98,8px con su propio recuadro y esquinas de 3px dentro del
   stepper, en vez de los 44px sin borde con solo las dos líneas laterales. Medido en pantalla. */

.fanor-ck input.fanor-ck__qty {
	width: 44px;
	height: 40px;
	border: 0;
	border-inline: 1px solid var(--fanor-ck-linea);
	/* Explícito aunque el valor sea el neutro: el reset del tema pone `border-radius: 3px` y
	   aquí no había NADA que lo pisara, así que se colaba. Se veía poco —sin borde arriba ni
	   abajo, lo único que curvaba eran los extremos de las dos líneas laterales—, pero deja el
	   aspecto del contador a merced de una hoja ajena. La esquina la decide esta regla. */
	border-radius: 0;
	/* Y el relleno, por lo mismo y con peor consecuencia. De fuera venía `padding: 8px 16px`,
	   que con esta caja de 44px deja 10px para el número: un «14» mide 17px y se cortaba. No se
	   notaba mientras el campo heredaba los 98,8px del tema —ahí sobraba sitio—, así que el
	   síntoma apareció justo al devolverle su ancho de diseño. Sin relleno caben cuatro cifras
	   (40px de texto en 42px de hueco) y el `text-align: center` de abajo hace el resto. */
	padding: 0;
	text-align: center;
	font-family: var(--fnp-font-ui, 'Roboto Condensed', sans-serif);
	font-weight: 600;
	font-size: 0.875rem;
	color: var(--fanor-ck-tinta);
	background: #fff;
	-moz-appearance: textfield;
	appearance: textfield;
}

.fanor-ck input.fanor-ck__qty::-webkit-outer-spin-button,
.fanor-ck input.fanor-ck__qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.fanor-ck button.fanor-ck__quitar {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 32px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--fanor-ck-gris);
	font-family: var(--fnp-font-ui, 'Roboto Condensed', sans-serif);
	font-weight: 500;
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: color .15s var(--fnp-e-soft, ease);
}

.fanor-ck button.fanor-ck__quitar svg {
	width: 11px;
	height: 11px;
	display: block;
}

.fanor-ck button.fanor-ck__quitar:hover,
.fanor-ck button.fanor-ck__quitar:focus-visible {
	background: transparent;
	color: var(--fnp-rojo, #B23B32);
}

.fanor-ck__vacio {
	margin: 0;
	padding: 40px 20px;
	text-align: center;
	color: var(--fanor-ck-gris);
	background: #fff;
	border: 1px solid var(--fanor-ck-linea);
	border-radius: var(--fnp-r-xl, 14px);
}

/* ── Paso 1: cupón ────────────────────────────────────────────────────────── */

.fanor-ck__cupon {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 16px;
	padding: 18px 20px;
	background: #fff;
	border: 1px dashed var(--fanor-ck-linea);
	border-radius: var(--fnp-r-xl, 14px);
	transition: opacity .2s var(--fnp-e-soft, ease);
}

.fanor-ck__cupon.is-cargando {
	opacity: .5;
	pointer-events: none;
}

.fanor-ck__cupon-lbl {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
	font-size: 0.875rem;
	color: var(--fanor-ck-gris);
	cursor: pointer;
}

.fanor-ck__cupon-ico svg {
	width: 16px;
	height: 16px;
	display: block;
	color: var(--fanor-ck-oro-clr);
}

/* 0,2,1: mismo reset del tema, aquí con `input[type="text"]`. Sin esto el campo del cupón salía
   con el borde gris de 1px y esquinas de 3px en vez de los 1.5px de la línea de la casa. */

.fanor-ck input.fanor-ck__cupon-input {
	flex: 1 1 140px;
	min-width: 0;
	height: 40px;
	padding: 0 14px;
	border: 1.5px solid var(--fanor-ck-linea);
	border-radius: var(--fnp-r-md, 8px);
	font-family: inherit;
	font-size: 0.875rem;
	color: var(--fanor-ck-tinta);
	background: #fff;
	transition: border-color .18s var(--fnp-e-soft, ease);
}

.fanor-ck input.fanor-ck__cupon-input:focus {
	outline: none;
	border-color: var(--fanor-ck-oro);
}

.fanor-ck button.fanor-ck__cupon-btn {
	flex: 0 0 auto;
	min-height: 40px;
	padding: 0 22px;
	border: 1px solid var(--fanor-ck-oro);
	border-radius: var(--fnp-r-md, 8px);
	background: #fff;
	color: var(--fanor-ck-oro);
	font-family: var(--fnp-font-ui, 'Roboto Condensed', sans-serif);
	font-weight: 700;
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .18s var(--fnp-e-soft, ease), color .18s var(--fnp-e-soft, ease);
}

.fanor-ck button.fanor-ck__cupon-btn:hover,
.fanor-ck button.fanor-ck__cupon-btn:focus-visible {
	background: var(--fanor-ck-oro-pale);
	color: var(--fanor-ck-oro);
}

/* ── Paso 1: resumen ──────────────────────────────────────────────────────── */

.fanor-ck__resumen {
	background: var(--fanor-ck-panel-bg);
	border: 1px solid var(--fanor-ck-linea);
	border-radius: var(--fanor-ck-panel-radio);
	padding: var(--fanor-ck-panel-pad);
}

.fanor-ck__resumen-h {
	margin: 0 0 20px;
	font-family: var(--fnp-font-display, 'Roboto Condensed', sans-serif);
	font-weight: 700;
	font-size: 1.125rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.fanor-ck__filas {
	margin: 0 0 20px;
	padding: 0 0 20px;
	border-bottom: 1px solid var(--fanor-ck-linea);
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.fanor-ck__fila {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.fanor-ck__fila dt {
	margin: 0;
	font-size: 0.875rem;
	color: #555;
}

.fanor-ck__fila dd {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--fanor-ck-tinta);
	white-space: nowrap;
}

.fanor-ck__free {
	color: var(--fanor-ck-verde);
}

/* El aviso de envío gratis. Es una frase suelta bajo la lista de importes, no una fila de la
   lista: ver el comentario de CheckoutRenderer, donde se explica por qué dejó de serlo. */

.fanor-ck__envio-ok {
	margin: 8px 0 0;
	font-size: 0.875rem;
	color: var(--fanor-ck-verde);
}

.fanor-ck__calc {
	color: var(--fanor-ck-verde);
	font-weight: 600;
}

.fanor-ck__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 20px;
}

.fanor-ck__total-lbl {
	font-family: var(--fnp-font-ui, 'Roboto Condensed', sans-serif);
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* 1.875rem (30px) y no 2.25 (36px), que es lo que había. Medido en la tarjeta del resumen: a 36px
   el total salía MÁS GRANDE que el «Tu Carrito» de la propia página (32px) y era metro y medio el
   precio de cada línea (24px). No era falta de sitio —le sobraban 68px de los 304 de la tarjeta—,
   era jerarquía: el importe pesaba más que el título y la pantalla se leía desequilibrada.

   A 30px queda justo por debajo del título y bien por encima del precio de línea, así que sigue
   siendo sin discusión el número que manda en la tarjeta. El corte de móvil lo baja a 1.75rem
   aparte, por sitio y no por peso. */

/* El total final va en ROJO y en el peso más alto de la condensada. Es el número que
   decide la compra, y es además la firma visual de la tienda: el carrito que Fanor ya
   tenía hecho a mano lo pintaba exactamente así. Es el único importe de la pantalla que
   no es tinta, y por eso destaca sin necesidad de agrandarlo más. */
.fanor-ck__total-n {
	font-family: var(--fnp-font-display, 'Roboto Condensed', sans-serif);
	font-weight: 900;
	font-size: 1.875rem;
	line-height: 1;
	letter-spacing: 0.01em;
	color: var(--fanor-ck-oro);
}

/* CTA principal. 0,2,1 por el mismo motivo que el stepper. */
.fanor-ck button.fanor-ck__cta,
.fanor-ck a.fanor-ck__cta--a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-height: var(--fanor-ck-btn-alto);
	padding: 0 24px;
	border: 0;
	border-radius: var(--fanor-ck-cta-radio);
	/*
	 * ROJO, no negro.
	 *
	 * En Fanor el rojo no es decoración: es lo que hay que pulsar. El botón de las
	 * tarjetas del catálogo, el «Pagar» del cajón y el del carrito que la tienda tenía
	 * hecho a mano son todos este mismo rojo, así que un checkout con la acción en negro
	 * habría sido la única pantalla del sitio donde el color deja de significar eso.
	 * El negro se queda para el botón secundario, que es donde hace de contrapeso.
	 */
	background: var(--fanor-ck-cta-bg);
	color: var(--fanor-ck-cta-txt);
	font-family: var(--fnp-font-ui, 'Roboto Condensed', sans-serif);
	font-weight: 700;
	font-size: 0.9375rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background .2s var(--fnp-e-soft, ease);
}

.fanor-ck button.fanor-ck__cta svg {
	width: 18px;
	height: 18px;
	display: block;
}

.fanor-ck button.fanor-ck__cta:hover,
.fanor-ck button.fanor-ck__cta:focus,
.fanor-ck button.fanor-ck__cta:focus-visible,
.fanor-ck a.fanor-ck__cta--a:hover,
.fanor-ck a.fanor-ck__cta--a:focus,
.fanor-ck a.fanor-ck__cta--a:focus-visible {
	background: var(--fanor-ck-cta-bg-h);
	color: var(--fanor-ck-cta-txt);
}

.fanor-ck button.fanor-ck__cta[disabled] {
	opacity: .45;
	cursor: not-allowed;
}

.fanor-ck button.fanor-ck__cta.is-cargando {
	opacity: .6;
	cursor: progress;
}

.fanor-ck__nota {
	margin: 12px 0 0;
	text-align: center;
	font-size: 0.75rem;
	color: var(--fanor-ck-gris);
}

.fanor-ck__seguir {
	display: block;
	margin-top: 20px;
	text-align: center;
	font-family: var(--fnp-font-ui, 'Roboto Condensed', sans-serif);
	font-weight: 600;
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--fanor-ck-gris);
	text-decoration: none;
	transition: color .2s var(--fnp-e-soft, ease);
}

.fanor-ck .fanor-ck__seguir:hover,
.fanor-ck .fanor-ck__seguir:focus-visible {
	background: transparent;
	color: var(--fanor-ck-tinta);
}

/* ── Paso 2: formulario ───────────────────────────────────────────────────── */

.fanor-ck__form {
	background: #fff;
	border: 1px solid var(--fanor-ck-linea);
	border-radius: var(--fnp-r-2xl, 16px);
	padding: 32px;
}

.fanor-ck__campos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 20px;
}

.fanor-ck__campo--ancho {
	grid-column: 1 / -1;
}

.fanor-ck__campo[hidden] {
	display: none;
}

/* HIJO DIRECTO del formulario, no `.fanor-ck__campo--ancho` a secas: esa clase la llevan también
   campos de DENTRO de la rejilla `.fanor-ck__campos` —la dirección, sin ir más lejos—, que ya se
   separan con el `gap`. Un margen puesto en la clase les sumaría un hueco de más.

   El único campo que cuelga del formulario es «Notas adicionales», y venía sin margen ninguno
   detrás de un <fieldset> que tampoco lo lleva por abajo: la etiqueta quedaba pegada al borde
   de la tarjeta de «Efectivo», sin aire. Se le da el MISMO 24px que ya usan `.fanor-ck__grupo` y
   `.fanor-ck__botones`, que es el ritmo vertical de este formulario. */

.fanor-ck__form > .fanor-ck__campo {
	margin-top: 24px;
}

/* Bloque de campos que sigue a un grupo de opciones (la dirección tras el tipo de entrega).
   Sin esto la etiqueta «DIRECCIÓN COMPLETA» nacía pegada a las tarjetas: `.fanor-ck__grupo`
   solo trae margen ARRIBA, así que entre él y lo que viene después no quedaba aire. Mismo
   24px que el resto del ritmo vertical de este formulario. */
.fanor-ck__campos--tras-grupo,
.fanor-ck__campos--sep {
	margin-top: 24px;
}

.fanor-ck__lbl {
	display: block;
	margin-bottom: 8px;
	padding: 0;
	font-family: var(--fnp-font-ui, 'Roboto Condensed', sans-serif);
	font-weight: 600;
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #555;
}

.fanor-ck__req {
	color: var(--fanor-ck-oro);
}

/* 0,2,0 y SIN calificar por etiqueta: esta clase la llevan el <input>, el <select> y el
   <textarea>, así que un `input.fanor-ck__input` dejaría fuera a los otros dos. Dos clases bastan —el
   reset del tema es (0,1,1) y el recuento de clases se compara antes que el de elementos—, y así
   los tres campos siguen compartiendo una sola regla, que es lo que los mantiene idénticos. */

.fanor-ck .fanor-ck__input {
	display: block;
	width: 100%;
	padding: var(--fanor-ck-input-pad);
	border: 1.5px solid var(--fanor-ck-input-borde);
	border-radius: var(--fanor-ck-input-radio);
	background: var(--fanor-ck-input-bg);
	font-family: inherit;
	font-size: 0.9375rem;
	color: var(--fanor-ck-tinta);
	transition: border-color .18s var(--fnp-e-soft, ease);
}

.fanor-ck .fanor-ck__input::placeholder {
	color: var(--fnp-txt-4, #9A9A9A);
}

.fanor-ck .fanor-ck__input:focus {
	outline: none;
	border-color: var(--fanor-ck-oro);
}

.fanor-ck .fanor-ck__input[aria-invalid="true"],
.fanor-ck .fanor-ck__input.is-invalido {
	border-color: var(--fnp-rojo, #B23B32);
}

.fanor-ck .fanor-ck__input[aria-invalid="true"]:focus,
.fanor-ck .fanor-ck__input.is-invalido:focus {
	border-color: var(--fnp-rojo, #B23B32);
	box-shadow: 0 0 0 1px var(--fnp-rojo, #B23B32);
}

/* La flecha del select se dibuja aquí porque `appearance: none` quita la nativa; va como
   data-URI para no pedir un archivo (y porque el CSP del sitio bloquea externos). */
/* También a (0,2,0), y no por el reset del tema sino por la regla de arriba: `.fanor-ck .fanor-ck__input`
   fija `padding: 13px 16px`, y con una clase suelta aquí ese atajo le ganaría al `padding-right`
   que reserva el hueco de la flecha. La flecha acabaría encima del texto del estado. */

.fanor-ck .fanor-ck__select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%230A0A0A' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 12px 8px;
	cursor: pointer;
}

/*
 * Selector propio (estado, régimen, CFDI). El `<select>` nativo sigue en el formulario
 * —required, POST, autocomplete— pero no se ve: su lista del SO es lo que se veía mal.
 * El botón y la lista son de Fanor; en táctil la lista baja como hoja para el pulgar.
 */
.fanor-ck__elige {
	position: relative;
}

.fanor-ck__elige .fanor-ck__select {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
	pointer-events: none;
}

.fanor-ck__elige-btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	margin: 0;
	padding: var(--fanor-ck-input-pad, 13px 16px);
	padding-right: 40px;
	box-sizing: border-box;
	border: 1.5px solid var(--fanor-ck-input-borde, #E5E7EB);
	border-radius: var(--fanor-ck-input-radio, 8px);
	background-color: var(--fanor-ck-input-bg, #fff);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%230A0A0A' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 12px 8px;
	font-family: inherit;
	font-size: 0.9375rem;
	line-height: 1.3;
	color: var(--fanor-ck-tinta, inherit);
	text-align: left;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.fanor-ck__elige-btn:focus {
	outline: none;
	border-color: var(--fanor-ck-oro);
}

.fanor-ck__elige:has([aria-invalid="true"]) .fanor-ck__elige-btn,
.fanor-ck__elige-btn[aria-invalid="true"] {
	border-color: var(--fnp-rojo, #B23B32);
}

.fanor-ck__elige:has([aria-invalid="true"]) .fanor-ck__elige-btn:focus,
.fanor-ck__elige-btn[aria-invalid="true"]:focus {
	border-color: var(--fnp-rojo, #B23B32);
	box-shadow: 0 0 0 1px var(--fnp-rojo, #B23B32);
}

.fanor-ck__elige-txt {
	min-width: 0;
	flex: 1 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fanor-ck__elige-txt.is-placeholder {
	color: var(--fanor-ck-gris, #888);
}

.fanor-ck__elige-lista {
	position: absolute;
	z-index: 40;
	left: 0;
	right: 0;
	top: calc(100% + 4px);
	margin: 0;
	padding: 6px 0;
	list-style: none;
	max-height: 280px;
	overflow: auto;
	background: #fff;
	border: 1px solid var(--fanor-ck-linea, #E5E7EB);
	border-radius: var(--fnp-r-md, 8px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.fanor-ck__elige-lista[hidden] {
	display: none;
}

.fanor-ck__elige-op {
	margin: 0;
	padding: 10px 16px;
	cursor: pointer;
	font-size: inherit;
	line-height: 1.35;
}

.fanor-ck__elige-op:hover,
.fanor-ck__elige-op.is-activa {
	background: var(--fanor-ck-hueso, #F5F5F5);
}

.fanor-ck__elige-op.is-elegida {
	font-weight: 600;
	color: var(--fanor-ck-rojo, #CC0000);
}

.fanor-ck__elige-velo {
	display: none;
}

/* Idem: modifica a `.fanor-ck .fanor-ck__input`, así que tiene que pesar al menos lo mismo. */

.fanor-ck .fanor-ck__area {
	resize: vertical;
	min-height: 96px;
	line-height: 1.6;
}

.fanor-ck__grupo {
	margin: 24px 0 0;
	padding: 0;
	border: 0;
}

.fanor-ck__grupo .fanor-ck__lbl {
	margin-bottom: 10px;
}

/* Caja de opciones (tarifas Woo y pasarelas). Ya no es la rejilla de tarjetas del
   tipo de entrega: ese pasó a `.fanor-ck__seg`. Un `display: grid` + gap aquí
   rompería el filete entre filas. */
.fanor-ck__opciones {
	border: 1.5px solid var(--fanor-ck-linea);
	border-radius: var(--fanor-ck-op-radio, var(--fnp-r-md, 8px));
	background: #fff;
	overflow: hidden;
}

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

/* Radio-card. El <input> real se mantiene en el DOM y solo se oculta visualmente: así la
   semántica de teclado (flechas entre opciones del grupo) sale gratis y correcta, que es
   lo que pide INSTRUCCIONES.md §6. Nada de `display: none`, que lo sacaría del foco. */
.fanor-ck__op {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: var(--fanor-ck-op-pad);
	/* El grosor NO cambia al elegir: antes pasaba de 1.5px a 2px y la tarjeta crecía un
	   píxel, con el texto dando un salto visible justo donde el ojo estaba mirando. Lo que
	   cambia es el COLOR del borde, que no mueve nada de sitio. */
	border: 1.5px solid var(--fanor-ck-linea);
	border-radius: var(--fanor-ck-op-radio);
	background: var(--fanor-ck-op-bg);
	cursor: pointer;
	transition: border-color .18s var(--fnp-e-soft, ease), box-shadow .18s var(--fnp-e-soft, ease);
}

/* Caja del ícono. Solo se imprime si la opción declara uno (ver CheckoutService::entregas()),
   así que las tarjetas sin ícono no arrastran un hueco vacío a la izquierda. */
.fanor-ck__op-ico {
	flex: 0 0 40px;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: var(--fnp-r-md, 6px);
	background: var(--fanor-ck-hueso);
	color: var(--fanor-ck-gris);
	transition: background .18s var(--fnp-e-soft, ease), color .18s var(--fnp-e-soft, ease);
}

.fanor-ck__op-ico svg {
	display: block;
	width: 22px;
	height: 22px;
}

.fanor-ck__radio {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	margin: 0;
	pointer-events: none;
}

/* Marca de elegido: un CHECK a la derecha, y solo en la tarjeta elegida.
   Antes era un círculo de radio a la izquierda, presente en todas: tres círculos vacíos
   compitiendo con el que importa. `margin-left: auto` lo empuja al extremo sin necesidad de
   un envoltorio extra; ocupa su sitio siempre (`visibility`, no `display`) para que el
   texto no se recoloque al cambiar de opción. */
.fanor-ck__marca {
	flex: 0 0 22px;
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	margin-left: auto;
	border-radius: var(--fnp-r-pill, 999px);
	background: var(--fanor-ck-oro);
	color: #fff;
	visibility: hidden;
	opacity: 0;
	transform: scale(.6);
	transition: opacity .18s var(--fnp-e-soft, ease), transform .18s var(--fnp-e-out, ease);
}

.fanor-ck__marca svg {
	display: block;
	width: 12px;
	height: 12px;
}

.fanor-ck__op-txt {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.fanor-ck__op-txt strong {
	font-family: var(--fnp-font-ui, 'Roboto Condensed', sans-serif);
	font-weight: 700;
	font-size: 0.8125rem;
	color: var(--fanor-ck-tinta);
}

.fanor-ck__op-txt em {
	font-style: normal;
	font-size: 0.75rem;
	color: var(--fanor-ck-gris);
}

/* Elegida: borde rojo y nada más. Sin fondo rosa —era lo que hacía chillar el bloque— y sin
   cambio de grosor. El peso visual lo lleva el check, que es lo único que aparece. */
.fanor-ck__op:has(.fanor-ck__radio:checked) {
	border-color: var(--fanor-ck-oro);
}

.fanor-ck__op:has(.fanor-ck__radio:checked) .fanor-ck__op-ico {
	background: var(--fanor-ck-oro-pale);
	color: var(--fanor-ck-oro);
}

.fanor-ck__op:has(.fanor-ck__radio:checked) .fanor-ck__marca {
	visibility: visible;
	opacity: 1;
	transform: scale(1);
}

/* Anillo de foco visible sobre la tarjeta entera: el input está oculto, así que sin esto
   quien navega con teclado no ve dónde está. */
.fanor-ck__op:has(.fanor-ck__radio:focus-visible) {
	outline: 2px solid var(--fanor-ck-oro);
	outline-offset: 2px;
}

/* Hover: NO puede parecerse a «elegida».
   Antes pintaba el mismo rosa y el mismo borde rojo que la opción marcada, así que al pasar
   el ratón por encima las dos opciones se veían seleccionadas a la vez y no había forma de
   saber cuál estaba activa. Ahora el ratón solo oscurece el borde gris y levanta una sombra
   muy leve; el rojo queda reservado para lo que de verdad está elegido. */
.fanor-ck .fanor-ck__op:hover {
	border-color: #C9C9C9;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}

.fanor-ck .fanor-ck__op:has(.fanor-ck__radio:checked):hover {
	border-color: var(--fanor-ck-oro);
}

.fanor-ck__error {
	margin: 20px 0 0;
	padding: 12px 16px;
	border-radius: var(--fnp-r-md, 8px);
	background: var(--fnp-rojo-bg, #FBEFEE);
	color: var(--fnp-rojo, #B23B32);
	font-size: 0.875rem;
}

.fanor-ck__error[hidden] {
	display: none;
}

/* Botonera de un paso: los dos botones se dimensionan por su contenido y se separan a los
   extremos. Antes el «Continuar» se llevaba `1fr` —todo el ancho sobrante— y salía cuatro
   veces más grande que el «Regresar», desequilibrando el pie de cada paso. El del paso 1 no
   pasa por aquí: ese vive en la tarjeta del resumen y sí ocupa su ancho completo, que es lo
   que se quiere en una columna estrecha. */
.fanor-ck__botones {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 32px;
}

/* El selector lleva `.fanor-ck` y `button` a propósito: la regla base es
   `.fanor-ck button.fanor-ck__cta { width: 100% }` (0,2,1), así que un `.fanor-ck__botones
   .fanor-ck__cta` (0,2,0) pierde y el botón seguía ocupando el ancho entero — empujando al
   «Regresar» a su propia línea en pleno escritorio. */
.fanor-ck .fanor-ck__botones button.fanor-ck__cta {
	width: auto;
	min-width: 220px;
}

.fanor-ck button.fanor-ck__volver,
.fanor-ck a.fanor-ck__volver--a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	padding: 0 32px;
	border: 1px solid var(--fanor-ck-linea);
	border-radius: var(--fnp-r-md, 8px);
	background: #fff;
	color: var(--fanor-ck-gris);
	font-family: var(--fnp-font-ui, 'Roboto Condensed', sans-serif);
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background .2s var(--fnp-e-soft, ease), color .2s var(--fnp-e-soft, ease), border-color .2s var(--fnp-e-soft, ease);
}

.fanor-ck button.fanor-ck__volver:hover,
.fanor-ck button.fanor-ck__volver:focus,
.fanor-ck button.fanor-ck__volver:focus-visible,
.fanor-ck a.fanor-ck__volver--a:hover,
.fanor-ck a.fanor-ck__volver--a:focus,
.fanor-ck a.fanor-ck__volver--a:focus-visible {
	background: var(--fanor-ck-hueso);
	color: var(--fanor-ck-tinta);
	border-color: var(--fanor-ck-tinta);
}

/* ── Paso 2: mini resumen ─────────────────────────────────────────────────── */

.fanor-ck__mini {
	background: var(--fanor-ck-panel-bg);
	border: 1px solid var(--fanor-ck-linea);
	border-radius: var(--fanor-ck-panel-radio);
	padding: var(--fanor-ck-panel-pad);
}

.fanor-ck__mini-h {
	margin: 0 0 18px;
	font-family: var(--fnp-font-ui, 'Roboto Condensed', sans-serif);
	font-weight: 700;
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fanor-ck-oro);
}

.fanor-ck__mini-lista {
	margin: 0 0 20px;
	padding: 0 0 20px;
	border-bottom: 1px solid var(--fanor-ck-linea);
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* `align-items: flex-start` y no `baseline`: con la miniatura dentro, alinear por la línea
   base del texto dejaba la foto colgando por debajo de su fila. */
.fanor-ck__mini-fila {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	font-size: 0.875rem;
}

/* Miniatura del resumen lateral. `flex: 0 0` para que no se encoja cuando el nombre del
   producto es largo, que en un catálogo de refacciones es la norma. */
.fanor-ck__mini-foto {
	flex: 0 0 48px;
	display: block;
	width: 48px;
	height: 48px;
	overflow: hidden;
	border: 1px solid var(--fanor-ck-linea);
	border-radius: var(--fnp-r-md, 4px);
	background: #fff;
}

.fanor-ck__mini-foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.fanor-ck__mini-nom {
	color: #555;
	min-width: 0;
	flex: 1 1 auto;
}

.fanor-ck__mini-x {
	color: var(--fanor-ck-gris);
	white-space: nowrap;
}

.fanor-ck__mini-p {
	font-weight: 600;
	white-space: nowrap;
}

.fanor-ck__total--mini {
	margin-bottom: 0;
}

.fanor-ck__total--mini .fanor-ck__total-n {
	font-size: 1.75rem;
}

/* ── Paso 3: gracias ──────────────────────────────────────────────────────── */

.fanor-ck__gracias {
	max-width: 720px;
	margin-inline: auto;
	text-align: center;
}

.fanor-ck__check {
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	margin: 0 auto 24px;
	border-radius: var(--fnp-r-pill, 999px);
	background: #E7F3E9;
	color: var(--fanor-ck-verde);
}

.fanor-ck__check svg {
	width: 32px;
	height: 32px;
	display: block;
}

.fanor-ck__h1 {
	margin: 0 0 14px;
	font-family: var(--fnp-font-display, 'Roboto Condensed', sans-serif);
	font-weight: 900;
	font-size: 2.125rem;
	line-height: 1.05;
	text-transform: uppercase;
	letter-spacing: 0.01em;
}

.fanor-ck__lead {
	margin: 0 auto 36px;
	max-width: 46ch;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--fanor-ck-gris);
}

.fanor-ck__meta {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	text-align: left;
	padding: 22px 26px;
	background: #fff;
	border: 1px solid var(--fanor-ck-linea);
	border-radius: var(--fnp-r-xl, 14px);
	margin-bottom: 16px;
}

.fanor-ck__meta-c {
	min-width: 0;
}

.fanor-ck__meta-k {
	display: block;
	margin-bottom: 6px;
	font-family: var(--fnp-font-ui, 'Roboto Condensed', sans-serif);
	font-weight: 600;
	font-size: 0.5625rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fanor-ck-gris);
}

.fanor-ck__meta-v {
	display: block;
	font-family: var(--fnp-font-ui, 'Roboto Condensed', sans-serif);
	font-weight: 700;
	font-size: 0.875rem;
	color: var(--fanor-ck-tinta);
	word-break: break-word;
}

.fanor-ck__detalle {
	text-align: left;
	padding: 26px;
	background: #fff;
	border: 1px solid var(--fanor-ck-linea);
	border-radius: var(--fnp-r-xl, 14px);
	margin-bottom: 16px;
}

.fanor-ck__detalle-h {
	margin: 0 0 18px;
	font-family: var(--fnp-font-ui, 'Roboto Condensed', sans-serif);
	font-weight: 700;
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.fanor-ck__detalle-lista {
	margin: 0 0 18px;
	padding: 0 0 18px;
	border-bottom: 1px solid var(--fanor-ck-linea);
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.fanor-ck__detalle-fila {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	font-size: 0.9375rem;
	color: #333;
}

.fanor-ck__detalle-p {
	font-weight: 600;
	white-space: nowrap;
	color: var(--fanor-ck-tinta);
}

.fanor-ck__filas--fin {
	border-bottom: 0;
	margin-bottom: 12px;
	padding-bottom: 0;
}

.fanor-ck__fila--envio.is-gratis dt,
.fanor-ck__fila--envio.is-gratis dd {
	color: var(--fanor-ck-verde);
}

.fanor-ck__fila--envio[hidden] {
	display: none;
}

.fanor-ck__total--fin {
	margin-bottom: 0;
	padding-top: 14px;
	border-top: 1px solid var(--fanor-ck-linea);
}

.fanor-ck__entrega {
	text-align: left;
	padding: 24px 26px;
	background: var(--fanor-ck-hueso);
	border-radius: var(--fnp-r-xl, 14px);
	margin-bottom: 28px;
}

.fanor-ck__entrega[hidden] {
	display: none;
}

.fanor-ck__entrega-h {
	margin: 0 0 14px;
	font-family: var(--fnp-font-ui, 'Roboto Condensed', sans-serif);
	font-weight: 700;
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fanor-ck-oro);
}

.fanor-ck__entrega-l {
	margin: 0 0 6px;
	font-size: 0.9375rem;
	color: #333;
}

.fanor-ck__entrega-k {
	display: inline-block;
	min-width: 8.5rem;
	margin-right: 8px;
	font-weight: 600;
	color: #555;
}

.fanor-ck__entrega-k::after {
	content: ':';
}

.fanor-ck__entrega-l:empty {
	display: none;
}

/* En el acuse los dos botones son hermanos («Ver mis pedidos» y «Seguir comprando»): ahí sí
   reparten el ancho a partes iguales, en vez de irse a los extremos como en los pasos. */
.fanor-ck__botones--fin {
	margin-top: 0;
}

.fanor-ck__botones--fin > * {
	flex: 1 1 200px;
	min-width: 0;
}

.fanor-ck__botones--fin [hidden] {
	display: none;
}

/* Región de estado para lectores de pantalla. Fuera de la vista pero NO `display: none`,
   que la haría muda. */
.fanor-ck__aria {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ── Móvil ────────────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {

	.fanor-ck__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* El resumen pasa DEBAJO de la lista y deja de ser pegajoso: en una sola columna,
	   `sticky` lo dejaría flotando sobre el contenido que le sigue. */
	.fanor-ck__sticky {
		position: static;
	}

	.fanor-ck__lado {
		order: 2;
	}

	/* 16px CLAVADOS en todo lo que se pueda enfocar, y no por gusto tipográfico: Safari en iOS
	   hace zoom automático sobre cualquier campo cuya letra baje de 16px, y NO deshace el zoom al
	   salir. El cliente se queda con la página ampliada y el resto del checkout fuera de pantalla,
	   teniendo que apartar con dos dedos en mitad de la compra. Medido: los siete campos salían a
	   15px y el contador a 14px, así que picaban todos.

	   Va en el corte de 1024 y no en el de 767 porque el iPad hace exactamente lo mismo y cae por
	   encima del corte de móvil. En escritorio la tipografía fina se queda como está. */

	.fanor-ck .fanor-ck__input,
	.fanor-ck input.fanor-ck__cupon-input,
	.fanor-ck input.fanor-ck__qty,
	.fanor-ck .fanor-ck__elige-btn,
	.fanor-ck .fanor-ck__elige-op {
		font-size: 1rem;
	}

	/* Cinco etiquetas en mayúsculas con `letter-spacing` no caben en un iPad en vertical:
	   la fila se parte y el indicador ocupa tres líneas. Se quedan las bolas, que ya
	   numeran el paso, y el nombre sigue en el DOM para el lector de pantalla. Antes eran
	   tres pasos y sí cabían; el corte se movió al añadir entrega y pago. */
	.fanor-ck__paso-txt {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.fanor-ck__paso {
		gap: 0;
	}
}

@media (max-width: 767px) {

	/* OJO con `--fanor-ck-pad` aquí: esta regla es solo un respaldo y NO manda.
	   El control «Margen lateral» del widget escribe la misma variable con el selector que
	   emite Elementor —`.elementor-N .elementor-element-X .fanor-ck`, que es (0,3,0)— y le gana a
	   este `.fanor-ck` (0,1,0) sin despeinarse. Estuvo escrito aquí desde el principio y no llegó a
	   aplicarse nunca: medido en la tienda, el móvil calculaba 32px, no estos 16.

	   El truco de escribir variables en vez de propiedades (ver la cabecera de CheckoutWidget)
	   salva a las PROPIEDADES que las consumen, no a la variable misma. Así que el valor por
	   breakpoint tiene que salir del propio control, y por eso `padding_lat` lleva ahora
	   `tablet_default` y `mobile_default`. Esto se queda por si el widget se pinta sin el CSS
	   de Elementor delante. */

	.fanor-ck {
		--fanor-ck-pad: 16px;
		--fanor-ck-gap: 20px;
	}

	/* Las etiquetas ya se esconden en el corte de 1024. Aquí se aprieta lo que queda: cinco
	   bolas de 32px con sus cuatro líneas se salen de una pantalla de 320px, así que la bola
	   baja a 28px y las líneas se quedan con lo mínimo para seguir leyéndose como unión. */
	.fanor-ck {
		--fanor-ck-bola-tam: 28px;
	}

	.fanor-ck__elige-velo {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 39;
		background: rgba(10, 10, 10, 0.35);
	}

	.fanor-ck__elige-velo[hidden] {
		display: none;
	}

	.fanor-ck__elige.is-abierto .fanor-ck__elige-lista {
		position: fixed;
		left: 12px;
		right: 12px;
		top: auto;
		bottom: 12px;
		z-index: 40;
		max-height: min(70vh, 420px);
		border-radius: 14px;
		padding: 8px 0 16px;
	}

	.fanor-ck__elige-op {
		padding: 14px 18px;
	}

	.fanor-ck__paso:not(:last-child)::after {
		min-width: 8px;
		margin: 0 6px;
	}

	.fanor-ck__pasos {
		margin-bottom: 28px;
	}

	/* La cabecera del carrito se parte en dos filas. En 390px no hay forma de que «Tu Carrito (2)»
	   y «+ Agregar más» quepan en la misma línea sin dejar el título en letra de nota al pie, y lo
	   que pasaba sin esto era lo peor de ambos mundos: los DOS se partían por la mitad, con un
	   «(2)» y un «MÁS» sueltos en su propia línea. Ahora el título ocupa su fila entera y el enlace
	   baja debajo, pegado a la derecha, que es donde el ojo ya lo busca. */

	.fanor-ck__cab {
		flex-wrap: wrap;
		gap: 8px 12px;
	}

	.fanor-ck__cab .fanor-ck__h2 {
		flex: 1 1 100%;
	}

	.fanor-ck__cab .fanor-ck__mas {
		margin-left: auto;
		white-space: nowrap;
	}

	.fanor-ck__h2 {
		font-size: 1.5rem;
	}

	.fanor-ck__h1 {
		font-size: 1.625rem;
	}

	/* El total también envuelve. Medido en 320px: «TOTAL» (52px) más «$13,553.00» a 1.75rem
	   (~190px) más el hueco de 12 pedían 254px para 248 de tarjeta, y el importe se salía 18px.
	   Bajarle más el cuerpo sería castigar la cifra que más mira el cliente por un caso de
	   pantalla estrecha, así que se deja envolver: la etiqueta arriba y el número entero debajo.
	   Y se arregla solo para totales largos, que es cuando de verdad hace falta. */

	.fanor-ck__total {
		flex-wrap: wrap;
	}

	.fanor-ck__total-n {
		font-size: 1.75rem;
		min-width: 0;
	}

	/* La línea del carrito pasa a dos filas: foto + datos arriba, precio y controles abajo.
	   Con 90px de foto y el stepper en la misma fila no quedaban ni 120px para el nombre. */
	.fanor-ck__linea {
		flex-wrap: wrap;
		gap: 14px;
		padding: 16px;
	}

	.fanor-ck__foto {
		flex-basis: 72px;
		width: 72px;
		height: 72px;
	}

	/* `wrap` y no una segunda fila fija: en 390px esta fila pedía 304px (precio 90 + stepper 118
	   + «Eliminar» 72, más dos huecos de 12) para 259px de hueco real, y como ninguna de las tres
	   piezas encoge, «Eliminar» se salía 45px de la tarjeta y se veía cortado. Medido en pantalla.

	   Envolviendo, «Eliminar» baja solo cuando no cabe y el `margin-left: auto` de más abajo lo
	   pega a la derecha. La ventaja de dejarlo al flexbox y no partir la fila a mano es que se
	   arregla también con precios más largos: si un día precio + stepper tampoco caben, el
	   stepper baja por su cuenta en vez de desbordar otra vez. */

	.fanor-ck__acciones {
		flex: 1 1 100%;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding-top: 12px;
		border-top: 1px solid var(--fanor-ck-linea);
	}

	.fanor-ck__precio {
		font-size: 1.25rem;
		order: 1;
	}

	.fanor-ck__stepper {
		order: 2;
	}

	/* `margin-left: auto` porque al bajar de fila se queda solo, y el `space-between` del padre
	   no separa nada cuando hay un único elemento: sin esto quedaría pegado a la izquierda,
	   justo debajo del precio, como si fuera parte de él. */

	.fanor-ck button.fanor-ck__quitar {
		order: 3;
		margin-left: auto;
	}

	.fanor-ck__form {
		padding: 20px;
	}

	.fanor-ck__campos,
	.fanor-ck__opciones--2 {
		grid-template-columns: minmax(0, 1fr);
	}

	.fanor-ck__resumen,
	.fanor-ck__mini {
		padding: 20px;
	}

	.fanor-ck__meta {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		padding: 18px 20px;
	}

	/* En móvil los dos botones se apilan a ancho completo. Ya son flex, así que basta con
	   obligarlos a ocupar la fila: el `min-width` del CTA de escritorio se anula aquí para
	   que no fuerce desbordamiento en pantallas de 320px. */
	.fanor-ck .fanor-ck__botones button.fanor-ck__cta,
	.fanor-ck .fanor-ck__botones button.fanor-ck__volver {
		flex: 1 1 100%;
		min-width: 0;
		width: 100%;
	}

	.fanor-ck__cupon {
		padding: 16px;
	}

	.fanor-ck__cupon-lbl {
		flex: 1 1 100%;
	}
}

/* ── Paso de facturación ───────────────────────────────────────────────────────
   La casilla que abre el bloque. El <input> real se esconde pero sigue en el DOM y en el
   orden de tabulación: la caja que se ve es un <span>, y sin el input no habría ni teclado
   ni lector de pantalla. */

.fanor-ck__casilla {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 4px;
	cursor: pointer;
}

.fanor-ck__casilla-input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	margin: 0;
	pointer-events: none;
}

.fanor-ck__casilla-marca {
	flex: 0 0 20px;
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	border: 1.5px solid var(--fanor-ck-linea);
	border-radius: var(--fnp-r-md, 4px);
	background: #fff;
	color: #fff;
	transition: background .18s var(--fnp-e-soft, ease), border-color .18s var(--fnp-e-soft, ease);
}

.fanor-ck__casilla-marca svg {
	display: block;
	width: 12px;
	height: 12px;
	opacity: 0;
	transform: scale(.6);
	transition: opacity .18s var(--fnp-e-soft, ease), transform .18s var(--fnp-e-out, ease);
}

.fanor-ck__casilla:has(.fanor-ck__casilla-input:checked) .fanor-ck__casilla-marca {
	background: var(--fanor-ck-oro);
	border-color: var(--fanor-ck-oro);
}

.fanor-ck__casilla:has(.fanor-ck__casilla-input:checked) .fanor-ck__casilla-marca svg {
	opacity: 1;
	transform: scale(1);
}

.fanor-ck__casilla:has(.fanor-ck__casilla-input:focus-visible) .fanor-ck__casilla-marca {
	outline: 2px solid var(--fanor-ck-oro);
	outline-offset: 2px;
}

.fanor-ck__casilla-txt {
	font-family: var(--fnp-font-ui, 'Roboto Condensed', sans-serif);
	font-weight: 700;
	font-size: 0.875rem;
	color: var(--fanor-ck-tinta);
}

/* El RFC en mayúsculas y con la letra un poco separada: son 13 caracteres sin significado
   que hay que poder repasar de un vistazo. */
.fanor-ck .fanor-ck__input--rfc {
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* «Saltar» y «Continuar» van juntos a la derecha, con el «Regresar» al otro extremo. */
.fanor-ck__botones-der {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.fanor-ck button.fanor-ck__saltar {
	padding: 0 20px;
	min-height: 56px;
	border: 0;
	background: none;
	color: var(--fanor-ck-gris);
	font-family: var(--fnp-font-ui, 'Roboto Condensed', sans-serif);
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	transition: color .2s var(--fnp-e-soft, ease);
}

.fanor-ck button.fanor-ck__saltar:hover,
.fanor-ck button.fanor-ck__saltar:focus,
.fanor-ck button.fanor-ck__saltar:focus-visible {
	background: none;
	color: var(--fanor-ck-tinta);
}

/* ── Paso 6: repaso antes de confirmar ─────────────────────────────────────────
   Tres tarjetas —datos, entrega y pago— con su enlace de corregir. Es la pantalla que
   antes no existía: se creaba el pedido desde el mismo formulario donde se escribía, sin
   que el cliente llegara a ver junto lo que estaba a punto de confirmar. */

.fanor-ck__rev {
	display: grid;
	gap: 12px;
	margin-bottom: 24px;
}

.fanor-ck__rev-b {
	padding: 16px 20px;
	background: var(--fanor-ck-hueso);
	border: 1px solid var(--fanor-ck-linea);
	border-radius: var(--fnp-r-md, 6px);
}

.fanor-ck__rev-cab {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 8px;
}

.fanor-ck__rev-h,
.fanor-ck__rev-tit {
	margin: 0;
	font-family: var(--fnp-font-ui, 'Roboto Condensed', sans-serif);
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--fanor-ck-gris);
}

/* «Cambiar» es un botón porque no navega a ninguna parte: mueve el paso, que es estado de
   esta misma página. Se pinta como enlace porque es lo que el cliente espera ver ahí. */
.fanor-ck button.fanor-ck__rev-btn,
.fanor-ck button.fanor-ck__cambiar {
	padding: 0;
	border: 0;
	background: none;
	color: var(--fanor-ck-oro);
	font-family: var(--fnp-font-ui, 'Roboto Condensed', sans-serif);
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

.fanor-ck button.fanor-ck__rev-btn:hover,
.fanor-ck button.fanor-ck__rev-btn:focus,
.fanor-ck button.fanor-ck__rev-btn:focus-visible,
.fanor-ck button.fanor-ck__cambiar:hover,
.fanor-ck button.fanor-ck__cambiar:focus,
.fanor-ck button.fanor-ck__cambiar:focus-visible {
	background: none;
	color: var(--fanor-ck-oro-clr);
}

.fanor-ck button.fanor-ck__rev-btn:focus-visible,
.fanor-ck button.fanor-ck__cambiar:focus-visible {
	outline: 2px solid var(--fanor-ck-oro);
	outline-offset: 2px;
}

/* Línea de dato. Va oculta cuando el JS no le puso texto —recogida en tienda no tiene
   dirección—: un `<p>` vacío deja un renglón en blanco que parece un fallo de maqueta. */
.fanor-ck__rev-l {
	margin: 0 0 2px;
	font-size: 0.9375rem;
	line-height: 1.45;
}

.fanor-ck__rev-l:last-child {
	margin-bottom: 0;
}

.fanor-ck__rev-l[hidden] {
	display: none;
}

.fanor-ck__h3 {
	margin: 0 0 8px;
	font-family: var(--fnp-font-ui, 'Roboto Condensed', sans-serif);
	font-weight: 700;
	font-size: 1.125rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--fanor-ck-tinta);
}

.fanor-ck .fanor-ck__grupo.is-invalido .fanor-ck__opciones,
.fanor-ck .fanor-ck__grupo.is-invalido .fanor-ck__seg {
	border-color: var(--fnp-rojo, #B23B32);
}

.fanor-ck .fanor-ck-frg-envio.is-invalido .fanor-ck__pista {
	color: var(--fnp-rojo, #B23B32);
}

/* ── Tipo de entrega: segmentado ──────────────────────────────────────────── */

.fanor-ck__seg {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	border: 1.5px solid var(--fanor-ck-linea);
	border-radius: var(--fanor-ck-op-radio, var(--fnp-r-md, 8px));
	background: #fff;
	overflow: hidden;
}

.fanor-ck__seg-op {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 16px;
	cursor: pointer;
	transition: background .18s var(--fnp-e-soft, ease), color .18s var(--fnp-e-soft, ease);
}

.fanor-ck__seg-op + .fanor-ck__seg-op {
	border-left: 1px solid var(--fanor-ck-linea);
}

.fanor-ck__seg-ico {
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-right: 7px;
	vertical-align: -3px;
}

.fanor-ck__seg-ico svg {
	width: 100%;
	height: 100%;
	display: block;
}

.fanor-ck__seg-txt strong {
	display: block;
	font-family: var(--fnp-font-ui, 'Roboto Condensed', sans-serif);
	font-weight: 700;
	font-size: 0.875rem;
}

.fanor-ck__seg-txt em {
	font-style: normal;
	font-size: 0.75rem;
	color: var(--fanor-ck-gris);
}

.fanor-ck__seg-op:has(.fanor-ck__radio:checked) {
	background: var(--fanor-ck-tinta);
	color: #fff;
}

.fanor-ck__seg-op:has(.fanor-ck__radio:checked) .fanor-ck__seg-txt em {
	color: rgba(255, 255, 255, .68);
}

.fanor-ck__seg-op:has(.fanor-ck__radio:focus-visible) {
	box-shadow: inset 0 0 0 2px var(--fanor-ck-oro);
}

.fanor-ck .fanor-ck__seg-op:hover,
.fanor-ck .fanor-ck__seg-op:focus {
	background: var(--fanor-ck-hueso);
	color: var(--fanor-ck-tinta);
}

.fanor-ck .fanor-ck__seg-op:has(.fanor-ck__radio:checked):hover,
.fanor-ck .fanor-ck__seg-op:has(.fanor-ck__radio:checked):focus {
	background: var(--fanor-ck-tinta);
	color: #fff;
}

/* ── Recogida en tienda ───────────────────────────────────────────────────── */

.fanor-ck__tienda {
	margin-top: 22px;
	padding: 20px;
	border: 1px solid var(--fanor-ck-oro);
	border-radius: var(--fnp-r-md, 8px);
	background: #fff;
}

.fanor-ck__tienda[hidden] {
	display: none;
}

.fanor-ck__tienda-h {
	margin-bottom: 12px;
}

.fanor-ck__tienda-nombre {
	margin: 0 0 8px;
	font-family: var(--fnp-font-ui, 'Roboto Condensed', sans-serif);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.35;
	color: var(--fanor-ck-tinta);
}

.fanor-ck__tienda-dir {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.5;
	color: #555;
}

.fanor-ck__tienda-pin {
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	margin-top: 2px;
	color: var(--fanor-ck-oro);
}

.fanor-ck__tienda-pin svg {
	width: 100%;
	height: 100%;
	display: block;
}

.fanor-ck-frg-envio[hidden] {
	display: none;
}

.fanor-ck-frg-envio.is-cargando {
	opacity: .5;
	pointer-events: none;
	transition: opacity .18s var(--fnp-e-soft, ease);
}

.fanor-ck__envio {
	margin-top: 22px;
}

.fanor-ck__pista {
	margin: 14px 0 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: #555;
}

.fanor-ck__aviso {
	margin: 0;
	padding: 14px 16px;
	border: 1.5px solid var(--fanor-ck-linea);
	border-radius: var(--fnp-r-md, 8px);
	background: var(--fanor-ck-hueso);
	color: #555;
	font-size: 0.875rem;
	line-height: 1.5;
}

/* ── Filas de tarifa / pasarela ───────────────────────────────────────────── */

.fanor-ck__fila-op {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	cursor: pointer;
}

.fanor-ck__fila-op + .fanor-ck__fila-op {
	border-top: 1px solid var(--fanor-ck-linea);
}

.fanor-ck__fila-tit {
	font-family: var(--fnp-font-ui, 'Roboto Condensed', sans-serif);
	font-weight: 600;
	font-size: 0.875rem;
	color: var(--fanor-ck-tinta);
}

.fanor-ck__fila-nota {
	margin-left: auto;
	font-style: normal;
	font-size: 0.8125rem;
	color: var(--fanor-ck-gris);
	text-align: right;
}

.fanor-ck__fila-op:has(.fanor-ck__radio:checked) {
	background: var(--fanor-ck-oro-pale);
}

.fanor-ck__fila-op:has(.fanor-ck__radio:focus-visible) .fanor-ck__marca {
	box-shadow: 0 0 0 3px rgba(204, 0, 0, .2);
}

.fanor-ck .fanor-ck__fila-op:hover,
.fanor-ck .fanor-ck__fila-op:focus {
	background: var(--fanor-ck-hueso);
	color: var(--fanor-ck-tinta);
}

.fanor-ck .fanor-ck__fila-op:has(.fanor-ck__radio:checked):hover,
.fanor-ck .fanor-ck__fila-op:has(.fanor-ck__radio:checked):focus {
	background: var(--fanor-ck-oro-pale);
	color: var(--fanor-ck-tinta);
}

/* Radio-dot en filas: no es el check de las tarjetas `.fanor-ck__op`. */
.fanor-ck__fila-op .fanor-ck__marca {
	visibility: visible;
	opacity: 1;
	transform: none;
	margin-left: 0;
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	background: #fff;
	color: inherit;
	border: 1.5px solid var(--fanor-ck-linea);
	display: grid;
	place-items: center;
	transition: border-color .18s var(--fnp-e-soft, ease);
}

.fanor-ck__fila-op .fanor-ck__marca::after {
	content: '';
	width: 9px;
	height: 9px;
	border-radius: var(--fnp-r-pill, 999px);
	background: var(--fanor-ck-oro);
	transform: scale(0);
	transition: transform .18s var(--fnp-e-out, ease);
}

.fanor-ck__fila-op:has(.fanor-ck__radio:checked) .fanor-ck__marca {
	border-color: var(--fanor-ck-oro);
}

.fanor-ck__fila-op:has(.fanor-ck__radio:checked) .fanor-ck__marca::after {
	transform: scale(1);
}

.fanor-ck__pasarela:not(.is-fuera) ~ .fanor-ck__pasarela:not(.is-fuera) {
	border-top: 1px solid var(--fanor-ck-linea);
}

.fanor-ck .fanor-ck__pasarela.is-fuera {
	height: 0;
	overflow: hidden;
	visibility: hidden;
}

.fanor-ck__fila-ico {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: 10px;
}

.fanor-ck__fila-ico img {
	display: block;
	max-height: 22px;
	width: auto;
	max-width: 60px;
}

.fanor-ck__pasarela-campos {
	display: grid;
	grid-template-rows: minmax(0, 0fr);
	visibility: hidden;
	transition:
		grid-template-rows .17s var(--fnp-e-soft, ease),
		visibility 0s linear .17s;
}

.fanor-ck__pasarela.is-elegida .fanor-ck__pasarela-campos {
	grid-template-rows: minmax(0, 1fr);
	visibility: visible;
	transition: grid-template-rows .22s var(--fnp-e-soft, ease);
}

.fanor-ck__pasarela-campos > * {
	overflow: hidden;
	min-height: 0;
	padding: 0 16px 16px;
	font-size: 0.875rem;
	line-height: 1.55;
	color: #555;
}

.fanor-ck .fanor-ck__pasarela-campos input[type="text"],
.fanor-ck .fanor-ck__pasarela-campos input[type="tel"],
.fanor-ck .fanor-ck__pasarela-campos input[type="email"],
.fanor-ck .fanor-ck__pasarela-campos input[type="number"],
.fanor-ck .fanor-ck__pasarela-campos select {
	width: 100%;
	padding: 11px 13px;
	border: 1.5px solid var(--fanor-ck-linea);
	border-radius: var(--fnp-r-md, 8px);
	background: #fff;
	font-family: inherit;
	font-size: 0.9375rem;
	color: var(--fanor-ck-tinta);
}

.fanor-ck__pasarela-salida:empty {
	display: none;
}

.fanor-ck__pasarela-salida:not(:empty) {
	margin: 16px 0;
}

/* ── Ficha de la pasarela en el acuse ─────────────────────────────────────── */

.fanor-ck__ficha {
	text-align: left;
	padding: 26px;
	background: #fff;
	border: 1px solid var(--fanor-ck-linea);
	border-top: 3px solid var(--fanor-ck-oro);
	border-radius: var(--fnp-r-md, 8px);
	margin-bottom: 16px;
}

.fanor-ck__ficha-h {
	margin: 0 0 10px;
	font-family: var(--fnp-font-ui, 'Roboto Condensed', sans-serif);
	font-weight: 700;
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fanor-ck-oro);
}

.fanor-ck__ficha-lead {
	margin: 0 0 18px;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--fanor-ck-tinta);
}

.fanor-ck__ficha-acciones {
	margin: 18px 0 0;
}

.fanor-ck__ficha-cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 22px;
	border: 0;
	border-radius: var(--fnp-r-md, 8px);
	background: var(--fanor-ck-tinta);
	color: #fff;
	font-family: var(--fnp-font-ui, 'Roboto Condensed', sans-serif);
	font-weight: 700;
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background .2s var(--fnp-e-soft, ease);
}

.fanor-ck__ficha-ext {
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
}

.fanor-ck .fanor-ck__ficha-cta:hover,
.fanor-ck .fanor-ck__ficha-cta:focus,
.fanor-ck .fanor-ck__ficha-cta:focus-visible {
	background: var(--fanor-ck-tinta-h);
	color: #fff;
}

.fanor-ck__ficha-pasarela {
	display: grid;
	gap: 14px;
}

.fanor-ck__ficha-pasarela p {
	margin: 0;
}

.fanor-ck__ficha-pasarela p:empty {
	display: none;
}

.fanor-ck .fanor-ck__ficha-pasarela iframe {
	display: block;
	width: 100%;
	height: var(--fanor-ck-ficha-alto) !important;
	border: 1px solid var(--fanor-ck-linea);
	border-radius: var(--fnp-r-md, 8px);
	background: #fff;
}

@media (max-width: 767px) {
	.fanor-ck__seg {
		grid-template-columns: minmax(0, 1fr);
	}

	.fanor-ck__seg-op + .fanor-ck__seg-op {
		border-left: 0;
		border-top: 1px solid var(--fanor-ck-linea);
	}

	.fanor-ck__fila-op {
		flex-wrap: wrap;
	}
}

/* ── Movimiento reducido ──────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {

	/* La entrada del paso se ANULA, no se acelera: un bloque entero deslizándose es justo
	   lo que molesta a quien pide menos movimiento. Las transiciones de color sí se
	   conservan acortadas, que no marean y ayudan a ver qué cambió. */
	.fanor-ck__vista.is-visible {
		animation: none;
	}

	.fanor-ck__linea,
	.fanor-ck__op,
	.fanor-ck__marca,
	.fanor-ck__marca::after,
	/* Estos dos suben con sus reglas base: si se quedaran en una clase suelta, el
	   `transition` de aquellas les ganaría y quien pide menos movimiento seguiría viéndolo. */
	.fanor-ck .fanor-ck__input,
	.fanor-ck input.fanor-ck__cupon-input,
	.fanor-ck__bola,
	.fanor-ck button.fanor-ck__cta,
	.fanor-ck button.fanor-ck__volver,
	.fanor-ck button.fanor-ck__cupon-btn,
	.fanor-ck button.fanor-ck__paso-btn {
		transition-duration: .01ms;
	}
}