/**
 * AlmaCheckout — One-Page Progressive AJAX Checkout
 * CSS3 nativo: Variables, Flexbox y Grid. Sin dependencias.
 */

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

.almacheckout,
.almacheckout-oc {
	--ac-color-bg: #ffffff;
	--ac-color-surface: #f7f8f7;
	--ac-color-border: #e2e6e2;
	--ac-color-border-strong: #c6cdc6;
	--ac-color-text: #1c2320;
	--ac-color-muted: #6b7770;
	--ac-color-accent: #2f6b46;
	--ac-color-accent-dark: #234f34;
	--ac-color-accent-soft: #eaf3ed;
	--ac-color-danger: #c0392b;
	--ac-color-danger-soft: #fdecea;
	--ac-color-success: #1e7a4c;

	--ac-radius-sm: 6px;
	--ac-radius: 10px;
	--ac-radius-lg: 14px;

	--ac-space-1: 4px;
	--ac-space-2: 8px;
	--ac-space-3: 12px;
	--ac-space-4: 16px;
	--ac-space-5: 24px;
	--ac-space-6: 32px;

	--ac-shadow-sm: 0 1px 2px rgba(20, 32, 26, .06);
	--ac-shadow: 0 4px 16px rgba(20, 32, 26, .08);
	--ac-shadow-lg: 0 -4px 20px rgba(20, 32, 26, .12);

	--ac-font: inherit;
	--ac-transition: 180ms cubic-bezier(.4, 0, .2, 1);

	color: var(--ac-color-text);
	font-family: var(--ac-font);
	position: relative;
	box-sizing: border-box;
}

/*
 * Respiro por defecto de las pantallas del plugin.
 * Configurable en Ajustes → AlmaCheckout → Estilos.
 *
 * El espacio superior va sobre el TÍTULO de la página ("Detalles de la
 * Compra"), no sobre el contenedor del checkout: este último empieza por
 * debajo del título, así que aplicarlo ahí abriría un hueco entre ambos en
 * lugar de separar el bloque completo del borde.
 */
.almacheckout-active .entry-title,
.almacheckout-confirmation-active .entry-title {
	padding-top: 32px;
}

.almacheckout,
.almacheckout-oc {
	padding-bottom: 48px;
}

/*
 * En una sola columna el contenido llega hasta el borde de la pantalla.
 * Se aplica en todo el rango del layout móvil/tablet (<1024px), que es donde
 * existe ese problema; en escritorio el grid ya deja aire a los lados.
 */
@media (max-width: 1023px) {
	.almacheckout,
	.almacheckout-oc {
		padding-left: 5px;
		padding-right: 5px;
	}
}

@media (max-width: 599px) {
	.almacheckout-active .entry-title,
	.almacheckout-confirmation-active .entry-title {
		padding-top: 20px;
	}

	.almacheckout,
	.almacheckout-oc {
		padding-bottom: 32px;
	}
}

.almacheckout *,
.almacheckout *::before,
.almacheckout *::after,
.almacheckout-oc *,
.almacheckout-oc *::before,
.almacheckout-oc *::after {
	box-sizing: inherit;
}

/*
 * El atributo [hidden] depende de la regla `[hidden]{display:none}` de la hoja
 * del navegador, y CUALQUIER `display` declarado por el autor la vence, sin
 * importar la especificidad. Como aquí hay elementos con display:flex/grid que
 * se ocultan con `hidden` desde JS (el skeleton de envíos, el formulario tras
 * confirmar el pedido), sin esta regla simplemente no se ocultaban.
 */
.almacheckout [hidden],
.almacheckout-oc [hidden] {
	display: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.almacheckout *,
	.almacheckout *::before,
	.almacheckout *::after,
	.almacheckout-oc *,
	.almacheckout-oc *::before,
	.almacheckout-oc *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Ocultamos residuos del checkout nativo dentro del contenedor. */
.almacheckout-active .woocommerce-notices-wrapper:empty {
	display: none;
}

/* ==========================================================================
   2. Layout
   ========================================================================== */

.almacheckout__grid {
	display: grid;
	grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);
	gap: var(--ac-space-6);
	align-items: start;
}

.almacheckout__main {
	display: flex;
	flex-direction: column;
	gap: var(--ac-space-4);
	min-width: 0;
}

.almacheckout__aside {
	position: sticky;
	top: var(--ac-space-5);
	min-width: 0;
}

@media (max-width: 1023px) {
	.almacheckout__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--ac-space-4);
	}

	.almacheckout__aside {
		position: static;
		order: -1;
		max-height: 0;
		overflow: hidden;
		opacity: 0;
	}

	/*
	 * Desplegable anclado a la barra fija.
	 *
	 * El panel no puede quedarse en el flujo normal: vive al principio de la
	 * página, así que abrirlo tras haber bajado lo desplegaba fuera de la
	 * pantalla y no se veía nada. Se saca del flujo y se ancla justo debajo de
	 * la barra, cuya posición real mide el JS en --ac-summary-top.
	 */
	.almacheckout__aside.is-open {
		position: fixed;
		top: var(--ac-summary-top, 0px);
		left: 0;
		right: 0;
		z-index: 19;
		max-height: calc(100vh - var(--ac-summary-top, 0px));
		max-height: calc(100dvh - var(--ac-summary-top, 0px));
		overflow-y: auto;
		overflow-x: hidden; /* Mismo motivo que en el resumen del checkout. */
		-webkit-overflow-scrolling: touch;
		opacity: 1;
		padding: var(--ac-space-3) var(--ac-space-4) var(--ac-space-4);
		background: var(--ac-color-bg);
		box-shadow: var(--ac-shadow);
		animation: ac-fade-in 180ms ease;
	}
}

.almacheckout-summary-backdrop {
	position: fixed;
	inset: 0;
	z-index: 18;
	border: 0;
	padding: 0;
	background: rgba(20, 32, 26, .45);
	touch-action: none;
	cursor: pointer;
	animation: ac-fade-in 180ms ease;
}

@media (min-width: 1024px) {
	.almacheckout-summary-backdrop {
		display: none;
	}
}

/* ==========================================================================
   3. Pasos (Progressive Disclosure)
   ========================================================================== */

.almacheckout-step {
	background: var(--ac-color-bg);
	border: 1px solid var(--ac-color-border);
	border-radius: var(--ac-radius-lg);
	padding: var(--ac-space-5);
	transition: opacity var(--ac-transition), border-color var(--ac-transition), transform var(--ac-transition);
}

/* Criterio 2.1 — pasos bloqueados */
.almacheckout-step.is-locked {
	opacity: .5;
	pointer-events: none;
	user-select: none;
}

/*
 * Mientras se está creando el pedido no se admite ningún cambio, ni en los
 * pasos ni en el resumen: alterar cantidades o cupones a mitad de la creación
 * dejaría el pedido y lo que ve el cliente en desacuerdo.
 */
.almacheckout__grid.is-submitting .almacheckout-step,
.almacheckout__grid.is-submitting .almacheckout__aside {
	pointer-events: none;
}

/* Pedido confirmado: el resumen queda inerte igual que los pasos. */
.almacheckout__aside.is-locked {
	opacity: .5;
	pointer-events: none;
	user-select: none;
}

.almacheckout-step.is-unlocking {
	animation: ac-unlock 320ms cubic-bezier(.4, 0, .2, 1);
}

@keyframes ac-unlock {
	from { opacity: .5; transform: translateY(6px); }
	to   { opacity: 1;  transform: none; }
}

.almacheckout-step.is-current {
	border-color: var(--ac-color-accent);
	box-shadow: 0 0 0 3px var(--ac-color-accent-soft);
}

.almacheckout .almacheckout-step__header {
	display: flex;
	align-items: center;
	gap: var(--ac-space-3);
	margin: 0 0 var(--ac-space-4);
	padding: 0;
}

.almacheckout .almacheckout-step__badge {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	margin: 0;
	padding: 0;
	border-radius: 50%;
	background: var(--ac-color-accent-soft);
	color: var(--ac-color-accent-dark);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background var(--ac-transition), color var(--ac-transition);
}

.almacheckout-step.is-complete .almacheckout-step__badge {
	background: var(--ac-color-accent);
	color: #fff;
}

/*
 * Los títulos de paso son <h2>. Casi todos los temas les aplican margin,
 * padding y line-height propios con mayor especificidad que la nuestra
 * (p. ej. `.entry-content h2`). Dentro del flex del header, ese margen hace
 * que el texto se centre junto con sus márgenes y quede desalineado respecto
 * al número. Se neutraliza con !important porque son propiedades puramente
 * estructurales: el tamaño y el grosor siguen siendo del tema (o de los
 * ajustes del plugin).
 */
.almacheckout .almacheckout-step__title {
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.25 !important;
	font-size: 1.05rem;
	font-weight: 600;
	flex: 1 1 auto;
	min-width: 0;
}

.almacheckout-step__link {
	font-size: .85rem;
	color: var(--ac-color-accent);
	text-decoration: underline;
}

.almacheckout-step__secure {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: .78rem;
	color: var(--ac-color-muted);
}

.almacheckout-step__body {
	display: flex;
	flex-direction: column;
	gap: var(--ac-space-3);
}

.almacheckout-step__placeholder {
	margin: 0;
	color: var(--ac-color-muted);
	font-size: .9rem;
}

.almacheckout-step__legal {
	margin: var(--ac-space-2) 0 0;
	font-size: .75rem;
	color: var(--ac-color-muted);
	text-align: center;
}

/* ==========================================================================
   4. Campos de formulario
   ========================================================================== */

.almacheckout-field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--ac-space-3);
	/* Cada columna arranca en el borde superior de la fila. Sin esto se
	   estiran a la altura de la más alta —la que lleva texto de ayuda— y
	   cualquier margen del tema desplaza una respecto de la otra. */
	align-items: start;
}

@media (max-width: 599px) {
	.almacheckout-field-row {
		grid-template-columns: 1fr;
	}
}

.almacheckout-field {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

.almacheckout-field--wide {
	grid-column: 1 / -1;
}

/*
 * Las etiquetas y los campos son elementos que los temas suelen estilar con
 * márgenes propios y mayor especificidad que la nuestra. Dentro de una fila de
 * dos columnas, basta con que uno reciba un margen distinto para que los dos
 * campos dejen de alinearse. Se neutralizan aquí: el `!important` se limita a
 * lo estructural (márgenes, relleno e interlineado), el aspecto sigue siendo
 * del tema.
 *
 * El interlineado fijo importa: garantiza que la etiqueta ocupe exactamente la
 * misma altura en ambas columnas aunque los textos tengan tildes o descendentes
 * distintos.
 */
.almacheckout .almacheckout-field > label {
	display: block;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.4 !important;
	min-height: 1.4em;
	font-size: .82rem;
	font-weight: 600;
	color: var(--ac-color-text);
}

.almacheckout .almacheckout-field > input,
.almacheckout .almacheckout-field > select,
.almacheckout .almacheckout-field > textarea {
	margin: 0 !important;
}

.almacheckout .almacheckout-field__hint,
.almacheckout .almacheckout-field__error {
	margin: 0 !important;
	padding: 0 !important;
}

.almacheckout-field label .required {
	color: var(--ac-color-danger);
	text-decoration: none;
	border: 0;
}

.almacheckout-field__optional {
	font-weight: 400;
	color: var(--ac-color-muted);
}

.almacheckout-field input[type="text"],
.almacheckout-field input[type="email"],
.almacheckout-field input[type="tel"],
.almacheckout-field input[type="number"],
.almacheckout-field select,
.almacheckout-field textarea {
	width: 100%;
	padding: 11px 12px;
	border: 1px solid var(--ac-color-border-strong);
	border-radius: var(--ac-radius-sm);
	background: var(--ac-color-bg);
	color: var(--ac-color-text);
	font-size: 15px; /* evita el zoom automático en iOS */
	font-family: inherit;
	line-height: 1.3;
	transition: border-color var(--ac-transition), box-shadow var(--ac-transition);
	appearance: none;
}

.almacheckout-field select {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7770' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 34px;
}

.almacheckout-field select:disabled {
	background-color: var(--ac-color-surface);
	color: var(--ac-color-muted);
	cursor: not-allowed;
}

.almacheckout-field input:focus,
.almacheckout-field select:focus,
.almacheckout-field textarea:focus {
	outline: none;
	border-color: var(--ac-color-accent);
	box-shadow: 0 0 0 3px var(--ac-color-accent-soft);
}

.almacheckout-field.has-error input,
.almacheckout-field.has-error select,
.almacheckout-field.has-error textarea {
	border-color: var(--ac-color-danger);
}

.almacheckout-field__error {
	display: none;
	font-size: .78rem;
	color: var(--ac-color-danger);
}

.almacheckout-field__error.is-visible {
	display: block;
}

.almacheckout-field__hint {
	font-size: .75rem;
	color: var(--ac-color-muted);
}

.almacheckout-checkbox {
	display: flex;
	align-items: flex-start;
	gap: var(--ac-space-2);
	font-size: .85rem;
	cursor: pointer;
}

.almacheckout-checkbox input {
	margin-top: 2px;
	accent-color: var(--ac-color-accent);
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
}

.almacheckout-terms {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-top: var(--ac-space-2);
}

/* ==========================================================================
   5. Tarjetas de envío (radio cards)
   ========================================================================== */

.almacheckout-rates {
	display: flex;
	flex-direction: column;
	gap: var(--ac-space-2);
}

.almacheckout-rate {
	display: flex;
	align-items: center;
	gap: var(--ac-space-3);
	padding: 13px 14px;
	border: 1px solid var(--ac-color-border-strong);
	border-radius: var(--ac-radius);
	cursor: pointer;
	transition: border-color var(--ac-transition), background var(--ac-transition);
}

.almacheckout-rate:hover {
	border-color: var(--ac-color-accent);
}

.almacheckout-rate.is-selected {
	border-color: var(--ac-color-accent);
	background: var(--ac-color-accent-soft);
}

.almacheckout-rate input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.almacheckout-rate__indicator {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border: 2px solid var(--ac-color-border-strong);
	border-radius: 50%;
	position: relative;
	transition: border-color var(--ac-transition);
}

.almacheckout-rate.is-selected .almacheckout-rate__indicator,
.almacheckout-gateway.is-selected .almacheckout-gateway__indicator {
	border-color: var(--ac-color-accent);
}

.almacheckout-rate.is-selected .almacheckout-rate__indicator::after,
.almacheckout-gateway.is-selected .almacheckout-gateway__indicator::after {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: var(--ac-color-accent);
}

.almacheckout-rate input:focus-visible + .almacheckout-rate__indicator,
.almacheckout-gateway input:focus-visible + .almacheckout-gateway__indicator {
	box-shadow: 0 0 0 3px var(--ac-color-accent-soft);
}

.almacheckout-rate__content {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1 1 auto;
	min-width: 0;
}

.almacheckout-rate__title {
	font-size: .92rem;
	font-weight: 600;
}

.almacheckout-rate__desc {
	font-size: .78rem;
	color: var(--ac-color-muted);
}

.almacheckout-rate__desc:empty {
	display: none;
}

.almacheckout-rate__price {
	font-weight: 700;
	font-size: .95rem;
	white-space: nowrap;
}

/* ==========================================================================
   6. Pasarelas de pago
   ========================================================================== */

.almacheckout-gateways {
	display: flex;
	flex-direction: column;
	gap: var(--ac-space-2);
}

.almacheckout-gateway {
	border: 1px solid var(--ac-color-border-strong);
	border-radius: var(--ac-radius);
	overflow: hidden;
	transition: border-color var(--ac-transition);
}

.almacheckout-gateway.is-selected {
	border-color: var(--ac-color-accent);
}

.almacheckout-gateway__head {
	display: flex;
	align-items: center;
	gap: var(--ac-space-3);
	padding: 13px 14px;
	cursor: pointer;
}

.almacheckout-gateway__head input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.almacheckout-gateway__indicator {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border: 2px solid var(--ac-color-border-strong);
	border-radius: 50%;
	position: relative;
	transition: border-color var(--ac-transition);
}

.almacheckout-gateway__title {
	flex: 1 1 auto;
	font-size: .92rem;
	font-weight: 600;
}

.almacheckout-gateway__icon img {
	max-height: 24px;
	width: auto;
	margin-left: 4px;
	vertical-align: middle;
}

.almacheckout-gateway__body {
	padding: 0 14px 14px 46px;
	font-size: .85rem;
	color: var(--ac-color-muted);
	border-top: 1px dashed var(--ac-color-border);
	padding-top: var(--ac-space-3);
	animation: ac-fade-in 200ms ease;
}

.almacheckout-gateway__body p:first-child {
	margin-top: 0;
}

.almacheckout-gateway__body p:last-child {
	margin-bottom: 0;
}

@keyframes ac-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* ==========================================================================
   7. Resumen / Carrito embebido
   ========================================================================== */

.almacheckout-summary {
	background: var(--ac-color-surface);
	border: 1px solid var(--ac-color-border);
	border-radius: var(--ac-radius-lg);
	padding: var(--ac-space-5);
	display: flex;
	flex-direction: column;
	gap: var(--ac-space-4);
}

.almacheckout .almacheckout-summary__title {
	margin: 0 !important;
	padding: 0 !important;
	font-size: 1rem;
	font-weight: 600;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--ac-space-2);
}

.almacheckout-summary__count {
	font-size: .78rem;
	font-weight: 400;
	color: var(--ac-color-muted);
}

.almacheckout-summary__items {
	display: flex;
	flex-direction: column;
	gap: var(--ac-space-3);
	max-height: 380px;
	overflow-y: auto;
	/* Declararlo explícitamente es obligatorio: con overflow-y distinto de
	   visible, el eje x pasa a calcularse como `auto`, así que cualquier
	   elemento que sobresalga un píxel dibujaría una barra horizontal. */
	overflow-x: hidden;
	padding-right: 2px;
}

.almacheckout-summary__empty {
	margin: 0;
	color: var(--ac-color-muted);
	font-size: .88rem;
}

.almacheckout-item {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) auto;
	gap: var(--ac-space-3);
	align-items: start;
	padding-bottom: var(--ac-space-3);
	border-bottom: 1px solid var(--ac-color-border);
	transition: opacity var(--ac-transition), transform var(--ac-transition);
}

.almacheckout-item:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

/* Criterio 1.4 — fade-out al eliminar */
.almacheckout-item.is-removing {
	opacity: 0;
	transform: translateX(12px);
}

.almacheckout-item__media {
	position: relative;
	width: 56px;
	height: 56px;
	border-radius: var(--ac-radius-sm);
	overflow: visible;
	background: var(--ac-color-bg);
	border: 1px solid var(--ac-color-border);
}

.almacheckout-item__media img,
.almacheckout-item__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--ac-radius-sm);
	display: block;
}

.almacheckout-item__badge {
	position: absolute;
	top: -7px;
	right: -7px;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 10px;
	background: var(--ac-color-accent);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.almacheckout-item__info {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

.almacheckout .almacheckout-item__name {
	margin: 0 !important;
	padding: 0 !important;
	font-size: .88rem;
	font-weight: 600;
	line-height: 1.35;
}

.almacheckout-item__name a {
	color: inherit;
	text-decoration: none;
}

.almacheckout-item__name a:hover {
	text-decoration: underline;
}

.almacheckout-item__meta {
	font-size: .74rem;
	color: var(--ac-color-muted);
}

.almacheckout-item__meta p {
	margin: 0;
}

.almacheckout-item__unit {
	margin: 0;
	font-size: .78rem;
	color: var(--ac-color-muted);
}

.almacheckout-item__unit-label {
	opacity: .8;
}

.almacheckout-item__aside {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--ac-space-2);
}

.almacheckout-item__subtotal {
	font-size: .9rem;
	font-weight: 700;
	white-space: nowrap;
}

/*
 * Antes era `line-height: 0` con el SVG en línea: eso lo alinea por la línea
 * base y puede pintarlo desplazado respecto a su caja pulsable, además de
 * dejar el botón en ~20px, muy por debajo del mínimo táctil. Se convierte en
 * un flex con tamaño explícito: el icono queda centrado y el área de pulsación
 * coincide exactamente con lo que se ve.
 */
.almacheckout-item__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex: 0 0 auto;
	/* Sin margen negativo lateral: sacaba el botón fuera del contenedor y, como
	   el listado tiene overflow-y, eso hacía aparecer una barra horizontal. */
	margin: -4px 0 0;
	padding: 0;
	background: none;
	border: 0;
	color: var(--ac-color-muted);
	cursor: pointer;
	border-radius: 50%;
	touch-action: manipulation;
	transition: color var(--ac-transition), background var(--ac-transition);
}

/* El icono no debe capturar el clic: así el objetivo del evento es siempre
   el botón, sin depender de dónde caiga el dedo dentro del trazo del SVG. */
.almacheckout-item__remove svg {
	pointer-events: none;
}

.almacheckout-item__remove:hover,
.almacheckout-item__remove:focus-visible {
	color: var(--ac-color-danger);
	background: var(--ac-color-danger-soft);
}

@media (max-width: 1023px) {
	.almacheckout-item__remove {
		width: 40px;
		height: 40px;
	}

	/* Mismo motivo: 28px es poco para el dedo. */
	.almacheckout-qty__btn {
		width: 36px;
		height: 36px;
	}

	.almacheckout-qty__input {
		height: 36px;
	}
}

/* --- Selector de cantidad --- */

.almacheckout-qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--ac-color-border-strong);
	border-radius: var(--ac-radius-sm);
	overflow: hidden;
	background: var(--ac-color-bg);
	width: fit-content;
}

.almacheckout-qty__btn {
	width: 28px;
	height: 28px;
	border: 0;
	background: transparent;
	color: var(--ac-color-text);
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	touch-action: manipulation;
	transition: background var(--ac-transition);
}

.almacheckout-qty__btn:hover:not(:disabled) {
	background: var(--ac-color-accent-soft);
}

.almacheckout-qty__btn:disabled {
	opacity: .35;
	cursor: not-allowed;
}

.almacheckout-qty__input {
	width: 38px;
	height: 28px;
	border: 0;
	border-left: 1px solid var(--ac-color-border);
	border-right: 1px solid var(--ac-color-border);
	text-align: center;
	font-size: .85rem;
	font-family: inherit;
	background: transparent;
	color: inherit;
	-moz-appearance: textfield;
}

.almacheckout-qty__input::-webkit-outer-spin-button,
.almacheckout-qty__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.almacheckout-qty__input:focus {
	outline: 2px solid var(--ac-color-accent);
	outline-offset: -2px;
}

/* ==========================================================================
   8. Cupón
   ========================================================================== */

.almacheckout-coupon__row {
	display: flex;
	gap: var(--ac-space-2);
}

.almacheckout-coupon__row input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 10px 12px;
	border: 1px solid var(--ac-color-border-strong);
	border-radius: var(--ac-radius-sm);
	background: var(--ac-color-bg);
	font-size: 15px;
	font-family: inherit;
	text-transform: uppercase;
}

.almacheckout-coupon__row input:focus {
	outline: none;
	border-color: var(--ac-color-accent);
	box-shadow: 0 0 0 3px var(--ac-color-accent-soft);
}

.almacheckout-coupon__message {
	margin: var(--ac-space-2) 0 0;
	font-size: .78rem;
}

.almacheckout-coupon__message.is-error {
	color: var(--ac-color-danger);
}

.almacheckout-coupon__message.is-success {
	color: var(--ac-color-success);
}

.almacheckout-tag {
	display: inline-block;
	padding: 2px 7px;
	border-radius: 4px;
	background: var(--ac-color-accent-soft);
	color: var(--ac-color-accent-dark);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .02em;
}

.almacheckout-tag__remove {
	background: none;
	border: 0;
	color: var(--ac-color-muted);
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	padding: 0 2px;
}

.almacheckout-tag__remove:hover {
	color: var(--ac-color-danger);
}

/* ==========================================================================
   9. Totales
   ========================================================================== */

.almacheckout-totals {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--ac-space-2);
	padding-top: var(--ac-space-3);
	border-top: 1px solid var(--ac-color-border);
}

.almacheckout-totals__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ac-space-3);
	font-size: .88rem;
}

.almacheckout-totals__row dt,
.almacheckout-totals__row dd {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 5px;
}

.almacheckout-totals__row dt {
	color: var(--ac-color-muted);
}

.almacheckout-totals__row--discount dd {
	color: var(--ac-color-success);
	font-weight: 600;
}

.almacheckout-totals__row--grand {
	padding-top: var(--ac-space-3);
	margin-top: var(--ac-space-1);
	border-top: 1px solid var(--ac-color-border);
	font-size: 1.1rem;
	font-weight: 700;
}

.almacheckout-totals__row--grand dt {
	color: var(--ac-color-text);
}

.almacheckout-totals__pending {
	font-size: .8rem;
	font-style: italic;
	color: var(--ac-color-muted);
}

/* ==========================================================================
   10. Botones
   ========================================================================== */

.almacheckout-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ac-space-2);
	padding: 12px 20px;
	border: 1px solid transparent;
	border-radius: var(--ac-radius);
	background: var(--ac-color-surface);
	color: var(--ac-color-text);
	font-family: inherit;
	font-size: .92rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--ac-transition), transform var(--ac-transition), opacity var(--ac-transition);
}

.almacheckout-btn:hover {
	transform: translateY(-1px);
}

.almacheckout-btn:active {
	transform: none;
}

.almacheckout-btn--primary {
	background: var(--ac-color-accent);
	color: #fff;
	box-shadow: var(--ac-shadow-sm);
}

.almacheckout-btn--primary:hover {
	background: var(--ac-color-accent-dark);
}

.almacheckout-btn--ghost {
	background: transparent;
	border-color: var(--ac-color-border-strong);
	color: var(--ac-color-text);
}

.almacheckout-btn--ghost:hover {
	border-color: var(--ac-color-accent);
	color: var(--ac-color-accent);
}

.almacheckout-btn--block {
	width: 100%;
}

.almacheckout-btn:disabled,
.almacheckout-btn.is-loading {
	opacity: .65;
	cursor: not-allowed;
	transform: none;
}

.almacheckout-btn__spinner {
	display: none;
	width: 15px;
	height: 15px;
	border: 2px solid rgba(255, 255, 255, .35);
	border-top-color: #fff;
	border-radius: 50%;
	animation: ac-spin 700ms linear infinite;
}

.almacheckout-btn.is-loading .almacheckout-btn__spinner {
	display: inline-block;
}

.almacheckout-btn__amount {
	margin-left: auto;
	font-weight: 700;
}

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

.almacheckout-summary__cta {
	display: none; /* solo desktop */
}

@media (min-width: 1024px) {
	.almacheckout-summary__cta {
		display: inline-flex;
	}
}

/* ==========================================================================
   11. Skeleton loaders (Criterio 1.5)
   ========================================================================== */

.almacheckout-skeleton {
	display: flex;
	flex-direction: column;
	gap: var(--ac-space-2);
}

.almacheckout-skeleton__row {
	height: 52px;
	border-radius: var(--ac-radius);
	background: linear-gradient(90deg, #eceeec 25%, #f6f7f6 37%, #eceeec 63%);
	background-size: 400% 100%;
	animation: ac-shimmer 1.3s ease-in-out infinite;
}

.is-skeleton {
	position: relative;
	color: transparent !important;
	border-radius: 4px;
	background: linear-gradient(90deg, #e4e7e5 25%, #f2f4f2 37%, #e4e7e5 63%);
	background-size: 400% 100%;
	animation: ac-shimmer 1.3s ease-in-out infinite;
	pointer-events: none;
}

.is-skeleton * {
	visibility: hidden;
}

@keyframes ac-shimmer {
	0%   { background-position: 100% 50%; }
	100% { background-position: 0 50%; }
}

.almacheckout-summary.is-busy {
	position: relative;
}

.almacheckout-summary.is-busy::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--ac-radius-lg);
	background: rgba(255, 255, 255, .35);
	pointer-events: none;
}

/* ==========================================================================
   12. Avisos y alertas
   ========================================================================== */

.almacheckout-alert {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--ac-space-3);
	padding: var(--ac-space-3) var(--ac-space-4);
	border: 1px solid #f0c6c0;
	border-radius: var(--ac-radius);
	background: var(--ac-color-danger-soft);
	color: #8d2b20;
	font-size: .88rem;
	animation: ac-fade-in 200ms ease;
}

.almacheckout-alert[hidden] {
	display: none;
}

.almacheckout-alert__body {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--ac-space-3);
}

.almacheckout-alert__retry {
	background: #fff;
	border: 1px solid #d9a49c;
	border-radius: var(--ac-radius-sm);
	padding: 5px 12px;
	font-family: inherit;
	font-size: .8rem;
	font-weight: 600;
	color: #8d2b20;
	cursor: pointer;
}

.almacheckout-alert__retry[hidden] {
	display: none;
}

.almacheckout-alert__close {
	background: none;
	border: 0;
	font-size: 20px;
	line-height: 1;
	color: inherit;
	opacity: .6;
	cursor: pointer;
	padding: 0 2px;
}

.almacheckout-notice {
	margin: 0;
	padding: var(--ac-space-3);
	border-radius: var(--ac-radius-sm);
	font-size: .85rem;
	background: var(--ac-color-surface);
}

.almacheckout-notice--error {
	background: var(--ac-color-danger-soft);
	color: #8d2b20;
}

.almacheckout-notice--info {
	background: var(--ac-color-accent-soft);
	color: var(--ac-color-accent-dark);
}

/* ==========================================================================
   13. Barra móvil de resumen y CTA fijo
   ========================================================================== */

.almacheckout-mobile-summary {
	display: none;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	gap: var(--ac-space-3);
	padding: 13px var(--ac-space-4);
	margin-bottom: var(--ac-space-3);
	border: 1px solid var(--ac-color-border);
	border-radius: var(--ac-radius);
	background: var(--ac-color-surface);
	font-family: inherit;
	font-size: .9rem;
	color: var(--ac-color-accent-dark);
	cursor: pointer;
}

.almacheckout-mobile-summary__label {
	display: inline-flex;
	align-items: center;
	gap: var(--ac-space-2);
	font-weight: 600;
}

.almacheckout-mobile-summary__chevron {
	transition: transform var(--ac-transition);
}

.almacheckout-mobile-summary[aria-expanded="true"] .almacheckout-mobile-summary__chevron {
	transform: rotate(180deg);
}

.almacheckout-mobile-summary__total {
	font-weight: 700;
	color: var(--ac-color-text);
}

@media (max-width: 1023px) {
	/*
	 * La barra vive dentro del contenedor, así que hereda su margen lateral,
	 * mientras que el panel desplegable es `fixed` y ocupa todo el ancho de la
	 * ventana: se veían de anchos distintos. Se saca la barra a sangre para que
	 * ambos coincidan, y se le quitan bordes laterales y esquinas para que la
	 * franja se lea como una sola pieza con el panel.
	 */
	.almacheckout-mobile-summary {
		display: flex;
		position: sticky;
		top: 0;
		z-index: 20;
		width: 100vw;
		max-width: 100vw;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		border-left: 0;
		border-right: 0;
		border-radius: 0;
	}
}

.almacheckout-sticky-cta {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 30;
	padding: var(--ac-space-3) var(--ac-space-4);
	padding-bottom: calc(var(--ac-space-3) + env(safe-area-inset-bottom, 0px));
	background: var(--ac-color-bg);
	border-top: 1px solid var(--ac-color-border);
	box-shadow: var(--ac-shadow-lg);
	animation: ac-slide-up 220ms ease;
}

.almacheckout-sticky-cta[hidden] {
	display: none;
}

/* Con el resumen abierto, el CTA fijo (z-index 30) quedaría por encima del
   fondo oscurecido. Se oculta mientras dure el desplegable. */
.almacheckout.is-summary-open .almacheckout-sticky-cta {
	display: none;
}

@media (min-width: 1024px) {
	.almacheckout-sticky-cta {
		display: none !important;
	}
}

@keyframes ac-slide-up {
	from { transform: translateY(100%); }
	to   { transform: none; }
}

/* ==========================================================================
   14. Confirmación offline (transferencia bancaria) y estado vacío
   ========================================================================== */

.almacheckout-confirmation[hidden] {
	display: none;
}

.almacheckout-empty {
	text-align: center;
	padding: var(--ac-space-6) var(--ac-space-4);
	border: 1px dashed var(--ac-color-border-strong);
	border-radius: var(--ac-radius-lg);
}

.almacheckout-empty h2 {
	margin: 0 0 var(--ac-space-2);
}

.almacheckout-empty p {
	margin: 0 0 var(--ac-space-4);
	color: var(--ac-color-muted);
}

/* ==========================================================================
   15. Trust badges
   ========================================================================== */

.almacheckout-trust {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--ac-space-4);
	font-size: .76rem;
	color: var(--ac-color-muted);
}

.almacheckout-trust li {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

/* ==========================================================================
   16. Confirmación de pedido (estilo Shopify)
   ========================================================================== */

.almacheckout-oc {
	color: var(--ac-color-text);
	font-family: var(--ac-font);
	animation: ac-fade-in 300ms ease;
}

.almacheckout-oc__grid {
	display: grid;
	grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
	gap: var(--ac-space-6);
	align-items: start;
}

.almacheckout-oc__main {
	display: flex;
	flex-direction: column;
	gap: var(--ac-space-4);
	min-width: 0;
}

.almacheckout-oc__aside {
	position: sticky;
	top: var(--ac-space-5);
	min-width: 0;
}

@media (max-width: 1023px) {
	.almacheckout-oc__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--ac-space-4);
	}

	.almacheckout-oc__aside {
		position: static;
		order: -1;
	}
}

/* --- Encabezado --- */

.almacheckout-oc__hero {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ac-space-2);
	padding: var(--ac-space-2) 0 var(--ac-space-3);
}

.almacheckout-oc__check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--ac-color-accent);
	color: #fff;
	margin-bottom: var(--ac-space-2);
	animation: ac-pop 380ms cubic-bezier(.34, 1.56, .64, 1);
}

.almacheckout-oc__check.is-problem {
	background: var(--ac-color-danger);
}

@keyframes ac-pop {
	0%   { transform: scale(.4); opacity: 0; }
	100% { transform: scale(1);  opacity: 1; }
}

.almacheckout-oc__eyebrow {
	margin: 0;
	font-size: .84rem;
	color: var(--ac-color-muted);
	letter-spacing: .01em;
}

.almacheckout-oc .almacheckout-oc__title {
	margin: 0 !important;
	padding: 0 !important;
	font-size: 1.65rem;
	font-weight: 700;
	line-height: 1.25;
}

@media (max-width: 599px) {
	.almacheckout-oc__title {
		font-size: 1.35rem;
	}
}

/* --- Barra de estado --- */

.almacheckout-oc__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: var(--ac-space-2);
}

.almacheckout-oc__step-bar {
	display: block;
	height: 4px;
	border-radius: 2px;
	background: var(--ac-color-border);
	transition: background var(--ac-transition);
}

.almacheckout-oc__step.is-done .almacheckout-oc__step-bar {
	background: var(--ac-color-accent);
}

.almacheckout-oc__step-label {
	display: block;
	margin-top: 6px;
	font-size: .75rem;
	color: var(--ac-color-muted);
}

.almacheckout-oc__step.is-done .almacheckout-oc__step-label {
	color: var(--ac-color-accent-dark);
	font-weight: 600;
}

/* --- Tarjetas --- */

.almacheckout-oc__card {
	background: var(--ac-color-bg);
	border: 1px solid var(--ac-color-border);
	border-radius: var(--ac-radius-lg);
	padding: var(--ac-space-5);
}

.almacheckout-oc__card--instructions {
	background: var(--ac-color-accent-soft);
	border-color: #cfe3d7;
}

.almacheckout-oc .almacheckout-oc__card-title {
	margin: 0 0 var(--ac-space-2) !important;
	padding: 0 !important;
	font-size: 1rem;
	font-weight: 600;
}

.almacheckout-oc__card-text {
	margin: 0;
	font-size: .9rem;
	color: var(--ac-color-muted);
	line-height: 1.55;
}

.almacheckout-oc__instructions {
	font-size: .88rem;
	line-height: 1.6;
}

.almacheckout-oc__instructions h2,
.almacheckout-oc__instructions h3 {
	font-size: .92rem;
	margin: 0 0 var(--ac-space-2);
}

.almacheckout-oc__instructions ul,
.almacheckout-oc__instructions ol {
	list-style: none;
	margin: 0;
	padding: var(--ac-space-3);
	background: var(--ac-color-bg);
	border-radius: var(--ac-radius);
}

.almacheckout-oc__instructions li + li {
	margin-top: 4px;
}

.almacheckout-oc__instructions p:last-child {
	margin-bottom: 0;
}

/* --- Detalles del pedido --- */

.almacheckout-oc__details {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--ac-space-4);
	margin-top: var(--ac-space-3);
}

@media (max-width: 599px) {
	.almacheckout-oc__details {
		grid-template-columns: 1fr;
	}
}

.almacheckout-oc .almacheckout-oc__detail h3 {
	margin: 0 0 5px !important;
	padding: 0 !important;
	font-size: .78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--ac-color-muted);
}

.almacheckout-oc__detail p,
.almacheckout-oc__detail address {
	margin: 0;
	font-size: .88rem;
	font-style: normal;
	line-height: 1.55;
}

/* --- Pie --- */

.almacheckout-oc__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--ac-space-3);
	padding-top: var(--ac-space-4);
	border-top: 1px solid var(--ac-color-border);
}

.almacheckout-oc__help {
	margin: 0;
	font-size: .85rem;
	color: var(--ac-color-muted);
}

.almacheckout-oc__help a {
	color: var(--ac-color-accent);
	text-decoration: underline;
}

.almacheckout-oc__fallback {
	margin: 0;
	padding: var(--ac-space-5);
	text-align: center;
	color: var(--ac-color-muted);
}

/* --- Resumen lateral --- */

.almacheckout-oc__summary {
	background: var(--ac-color-surface);
	border: 1px solid var(--ac-color-border);
	border-radius: var(--ac-radius-lg);
	padding: var(--ac-space-5);
	display: flex;
	flex-direction: column;
	gap: var(--ac-space-4);
}

.almacheckout-oc .almacheckout-oc__summary-title {
	margin: 0 !important;
	padding: 0 !important;
	font-size: 1rem;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ac-space-2);
}

.almacheckout-oc__summary-title span {
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 11px;
	background: var(--ac-color-accent);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.almacheckout-oc__items {
	display: flex;
	flex-direction: column;
	gap: var(--ac-space-3);
	max-height: 420px;
	overflow-y: auto;
	overflow-x: hidden; /* Mismo motivo que en el resumen del checkout. */
}

.almacheckout-oc__item {
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr) auto;
	gap: var(--ac-space-3);
	align-items: center;
}

.almacheckout-oc__item-media {
	position: relative;
	width: 52px;
	height: 52px;
	border: 1px solid var(--ac-color-border);
	border-radius: var(--ac-radius-sm);
	background: var(--ac-color-bg);
}

.almacheckout-oc__item-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--ac-radius-sm);
	display: block;
}

.almacheckout-oc__item-qty {
	position: absolute;
	top: -7px;
	right: -7px;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 10px;
	background: var(--ac-color-muted);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.almacheckout-oc .almacheckout-oc__item-name {
	margin: 0 !important;
	padding: 0 !important;
	font-size: .86rem;
	font-weight: 600;
	line-height: 1.35;
}

.almacheckout-oc__item-meta {
	font-size: .74rem;
	color: var(--ac-color-muted);
}

.almacheckout-oc__item-meta p {
	margin: 0;
}

.almacheckout-oc__item-total {
	font-size: .88rem;
	font-weight: 700;
	white-space: nowrap;
}

.almacheckout-oc__totals {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--ac-space-2);
	padding-top: var(--ac-space-3);
	border-top: 1px solid var(--ac-color-border);
}

.almacheckout-oc__total-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--ac-space-3);
	font-size: .88rem;
}

.almacheckout-oc__total-row dt,
.almacheckout-oc__total-row dd {
	margin: 0;
}

.almacheckout-oc__total-row dt {
	color: var(--ac-color-muted);
}

.almacheckout-oc__total-row--order_total {
	padding-top: var(--ac-space-3);
	margin-top: var(--ac-space-1);
	border-top: 1px solid var(--ac-color-border);
	font-size: 1.1rem;
	font-weight: 700;
}

.almacheckout-oc__total-row--order_total dt {
	color: var(--ac-color-text);
}

/* --- Variante inline (dentro del checkout, tras pagar por transferencia) --- */

.almacheckout-oc--inline {
	padding-top: var(--ac-space-4);
}

/* ==========================================================================
   17. Accesibilidad
   ========================================================================== */

.almacheckout .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}