/**
 * WIST Address Book. Estructura y estados.
 *
 * Todo va namespaced bajo .wist-ab- para no chocar con clases de Bricks o del
 * tema.
 *
 * La hoja describe la estructura de un markup propio y consume el resto por
 * variable. Espacio, radio y elevación salen de los tokens del sitio con el
 * valor de la especificación como respaldo. Color y tipografía pasan por una
 * capa propia, --wist-ab-*, porque son configurables desde
 * WooCommerce -> WIST Address Book -> Ajustes; esa capa apunta a su vez a los
 * tokens del sitio.
 *
 * Sin bordes de un solo lado. Los contornos se dibujan con box-shadow interior
 * de cuatro lados, que además no altera la geometría de la caja.
 */

/* ------------------------------------------------------------------ */
/* Capa configurable: color y tipografía                               */
/* -------------------------------------------------------------------
 * Cada defecto apunta al token del sistema de diseño WIST y deja el valor
 * neutro anterior como respaldo dentro del propio var(). Así el plugin adopta
 * la paleta del sitio, incluido el modo oscuro, sin que nadie tenga que llenar
 * veinte campos a mano; y en una instalación sin esos tokens el respaldo entra
 * solo y el plugin se ve correcto igual.
 *
 * Los tokens WIST los imprime Bricks desde el Color Manager, con un bloque
 * :root para claro y otro con [data-brx-theme="dark"] para oscuro. Como el
 * plugin los consume por referencia y no copia ningún valor, el cambio de modo
 * lo resuelve el sitio.
 *
 * Estos mismos defectos viven también en WIST_AB_Settings::COLOR_DEFAULTS, que
 * se imprime inline y pisa a este bloque. Las dos listas tienen que decir lo
 * mismo.
 * ------------------------------------------------------------------ */

:root {
	--wist-ab-color-primary: var(--wist-blue-base, #1a1a1a);
	--wist-ab-color-on-primary: var(--wist-blue-on, #fff);
	--wist-ab-color-secondary-bg: transparent;
	--wist-ab-color-secondary-text: var(--wist-ink-primary, #333);
	--wist-ab-color-surface: var(--wist-surface, #fff);
	--wist-ab-color-surface-hover: var(--wist-surface-nested, #fafafa);
	--wist-ab-color-border: var(--wist-border-decorative, #ddd);
	--wist-ab-color-border-hover: var(--wist-border-interactive, #999);
	--wist-ab-color-text: var(--wist-ink-primary, #222);
	--wist-ab-color-text-muted: var(--wist-ink-secondary, #666);
	--wist-ab-color-text-subtle: var(--wist-ink-secondary, #777);
	--wist-ab-color-danger: var(--wist-danger-base, #b3261e);
	--wist-ab-color-danger-alt: var(--wist-danger-base, #e2401c);
	--wist-ab-color-success: var(--wist-success-base, #0a7d28);
	--wist-ab-color-label: var(--wist-ink-primary, inherit);
	--wist-ab-color-icon: var(--wist-ink-secondary, inherit);
	/* El campo nunca comparte color con la superficie que lo contiene: es la
	   regla que motivó la escala de superficies del sistema. Por eso el fondo
	   de control apunta a --wist-field y no a --wist-surface. */
	--wist-ab-color-input-bg: var(--wist-field, #fff);
	--wist-ab-color-input-text: var(--wist-ink-primary, #222);
	--wist-ab-color-focus: var(--wist-blue-base, #1a1a1a);
	/* El velo tiene token propio en la paleta, con el mismo valor en los dos
	   modos porque lo que oscurece es la página entera. El respaldo lo
	   reproduce literal. */
	--wist-ab-color-veil: var(--wist-overlay, rgba(31, 31, 65, .45));

	/* Familia de contenido. Se hereda de la página, que en el sitio es
	   Outfit. */
	--wist-ab-font-family: inherit;
	/**
	 * Familia de interfaz.
	 *
	 * El sistema asigna Outfit al contenido e Inter a la interfaz: botones,
	 * campos, tablas y cifras. Las familias se registran en Custom Fonts de
	 * Bricks y se sirven self-hosted, así que no existe un token de fuente que
	 * referenciar. Se deja el gancho --wist-font-ui por si el sitio declara
	 * uno, y por debajo el nombre de la familia registrada.
	 */
	--wist-ab-font-family-ui: var(--wist-font-ui, "Inter", var(--wist-ab-font-family, sans-serif));

	--wist-ab-font-size-lg: 1.125rem;
	/* 1 rem es el mínimo del campo: por debajo de 16 px iOS hace zoom
	   automático al enfocarlo y descoloca el viewport. Es la causa más
	   frecuente de desplazamiento durante el checkout en móvil. */
	--wist-ab-font-size-md: 1rem;
	--wist-ab-font-size-sm: 0.875rem;
	--wist-ab-font-size-xs: 0.8125rem;
	--wist-ab-font-weight-heading: 600;
	--wist-ab-font-weight-bold: 500;
	--wist-ab-font-weight-normal: 400;
}

/* ------------------------------------------------------------------ */
/* Forma, espacio y elevación                                          */
/* -------------------------------------------------------------------
 * No son configurables desde Ajustes: son estructura. Se consumen del sitio
 * con el valor de la especificación como respaldo.
 * ------------------------------------------------------------------ */

:root {
	/**
	 * Escala de radio cerrada, cinco pasos de 10 a 28 px. Sin contorno
	 * completo: un radio de 999px o del 50 % convierte cualquier caja pequeña
	 * en una píldora o un círculo y rompe el parentesco con el resto de los
	 * componentes. El paso menor del sistema se llama xs.
	 */
	--wist-ab-radius-sm: var(--wist-radius-xs, 0.625rem);
	--wist-ab-radius-md: var(--wist-radius-md, 0.875rem);
	--wist-ab-radius-lg: var(--wist-radius-lg, 1.125rem);
	--wist-ab-radius-xl: var(--wist-radius-xl, 1.375rem);
	--wist-ab-radius-2xl: var(--wist-radius-2xl, 1.75rem);

	/* Alto mínimo de control y área táctil mínima. Es el botón M y el campo de
	   la especificación, que coinciden en 44 px a propósito. */
	--wist-ab-control-height: 2.75rem;

	/**
	 * Elevación. Nivel 1 para tarjetas y paneles, nivel 4 para diálogos.
	 * El respaldo reproduce el valor de modo claro de la especificación, para
	 * que el componente no quede plano donde el token no exista. Donde sí
	 * existe, el token trae también su valor de modo oscuro.
	 */
	--wist-ab-shadow-1: var(--wist-shadow-1, 0 1px 1px rgba(31, 31, 65, .03), 0 4px 10px -4px rgba(31, 31, 65, .05));
	--wist-ab-shadow-4: var(--wist-shadow-4, 0 8px 16px rgba(31, 31, 65, .08), 0 32px 64px -12px rgba(31, 31, 65, .18));
}

/**
 * El markup del plugin no depende del reset del tema. Sin esto, un relleno se
 * suma al ancho del 100 % y el elemento desborda a su contenedor.
 */
.wist-ab-wrapper,
.wist-ab-wrapper *,
.wist-ab-modal-dialog,
.wist-ab-modal-dialog *,
.wist-ab-modal,
.wist-ab-modal *,
.wist-ab-checkout-selector,
.wist-ab-checkout-selector *,
.wist-ab-save-toggle,
.wist-ab-save-toggle * {
	box-sizing: border-box;
}

/* ------------------------------------------------------------------ */
/* Mi cuenta: estructura                                               */
/* ------------------------------------------------------------------ */

.wist-ab-wrapper {
	margin: var(--wist-space-300, 1.5rem) 0;
	font-family: var(--wist-ab-font-family, inherit);
}

/* Grupo de contenido a grupo de contenido. */
.wist-ab-section + .wist-ab-section {
	margin-top: var(--wist-space-600, 3rem);
}

.wist-ab-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: var(--wist-space-200, 1rem);
	margin-bottom: var(--wist-space-300, 1.5rem);
}

.wist-ab-section-title {
	margin: 0;
	font-size: var(--wist-ab-font-size-lg, 1.125rem);
	font-weight: var(--wist-ab-font-weight-heading, 600);
	line-height: 1.3;
	color: var(--wist-ab-color-text, inherit);
}

/* Título a bajada: forman una unidad. */
.wist-ab-subtitle {
	max-width: var(--wist-measure-lede, 60ch);
	margin: var(--wist-space-100, 0.5rem) 0 0;
	color: var(--wist-ab-color-text-muted, #666);
	font-size: var(--wist-ab-font-size-sm, 0.875rem);
	font-weight: var(--wist-ab-font-weight-normal, 400);
	line-height: 1.6;
}

/* ------------------------------------------------------------------ */
/* Botones                                                             */
/* -------------------------------------------------------------------
 * Un solo tamaño, el M de la especificación: alto 44 px, relleno 10 / 20 px,
 * cuerpo de 1 rem, caja de texto de 24 px y radio de 1.125 rem.
 *
 * La caja de texto se declara en px y no como múltiplo sin unidad: un
 * line-height sin unidad se multiplica por el font-size y produce cajas
 * distintas en cuanto alguien cambia el tamaño desde Ajustes, lo que
 * desajustaría el alto.
 * ------------------------------------------------------------------ */

.wist-ab-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Icono a texto. */
	gap: var(--wist-space-050, 0.25rem);
	min-height: var(--wist-ab-control-height, 2.75rem);
	padding: 10px 20px;
	border: none;
	border-radius: var(--wist-ab-radius-lg, 1.125rem);
	font-family: var(--wist-ab-font-family-ui, inherit);
	font-size: var(--wist-ab-font-size-md, 1rem);
	font-weight: var(--wist-ab-font-weight-bold, 500);
	line-height: 24px;
	cursor: pointer;
	transition: background-color .15s ease, box-shadow .15s ease, transform .1s ease;
}

.wist-ab-btn:active {
	transform: scale(.97);
}

.wist-ab-btn:disabled {
	opacity: .6;
	cursor: not-allowed;
	transform: none;
}

.wist-ab-btn-primary {
	background: var(--wist-ab-color-primary, #1a1a1a);
	color: var(--wist-ab-color-on-primary, #fff);
}

/**
 * El hover del primario cambia de color, no de opacidad. Bajar la opacidad
 * deja ver el fondo a través del botón y en modo oscuro lo apaga en vez de
 * destacarlo. La cadena cae al color base donde el sitio no declare el estado,
 * así que no inventa ningún valor.
 */
.wist-ab-btn-primary:hover {
	background: var(--wist-blue-base-hover, var(--wist-ab-color-primary, #1a1a1a));
}

.wist-ab-btn-primary:active {
	background: var(--wist-blue-base-active, var(--wist-ab-color-primary, #1a1a1a));
}

/**
 * Secundario: fondo transparente y contorno.
 *
 * El contorno va con box-shadow interior de cuatro lados y no con border: con
 * box-sizing border-box un borde de 1 px suma 2 px al alto y deja el botón 2 px
 * más alto que el primario. El box-shadow se dibuja dentro de la caja y no
 * altera la geometría, así que los dos miden lo mismo.
 */
.wist-ab-btn-secondary {
	background: var(--wist-ab-color-secondary-bg, transparent);
	box-shadow: inset 0 0 0 1px var(--wist-ab-color-border, #ddd);
	color: var(--wist-ab-color-secondary-text, #333);
}

.wist-ab-btn-secondary:hover {
	background: var(--wist-ab-color-surface-hover, #fafafa);
	box-shadow: inset 0 0 0 1px var(--wist-ab-color-border-hover, #999);
}

/* ------------------------------------------------------------------ */
/* Tarjetas                                                            */
/* ------------------------------------------------------------------ */

.wist-ab-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(16.25rem, 1fr));
	gap: var(--wist-space-400, 2rem);
}

.wist-ab-empty {
	grid-column: 1 / -1;
	margin: 0;
	padding: var(--wist-space-300, 1.5rem);
	border-radius: var(--wist-ab-radius-xl, 1.375rem);
	background: var(--wist-ab-color-surface-hover, #fafafa);
	color: var(--wist-ab-color-text-subtle, #777);
	font-size: var(--wist-ab-font-size-sm, 0.875rem);
	line-height: 1.6;
}

/**
 * Relleno de 24 px con separación de 32 px entre tarjetas: el espacio externo
 * queda por encima del interno, que es lo que agrupa la información de forma
 * correcta.
 *
 * La tarjeta se separa del lienzo con sombra de nivel 1 y no con contorno. La
 * especificación admite los dos recursos y pide elegir uno: sobre el lienzo de
 * la cuenta la sombra da la separación sin sumar una línea más a una pantalla
 * que ya tiene muchas.
 */
.wist-ab-card {
	position: relative;
	padding: var(--wist-space-300, 1.5rem);
	border-radius: var(--wist-ab-radius-xl, 1.375rem);
	background: var(--wist-ab-color-surface, #fff);
	box-shadow: var(--wist-ab-shadow-1);
}

.wist-ab-card.is-default {
	box-shadow: inset 0 0 0 2px var(--wist-ab-color-primary, #1a1a1a), var(--wist-ab-shadow-1);
}

/**
 * El distintivo se apoya en la esquina, dentro del relleno de la tarjeta.
 * Radio de chip, un paso por debajo del de la tarjeta: un radio interno mayor
 * que el externo desalinea la esquina.
 */
.wist-ab-badge {
	position: absolute;
	top: var(--wist-space-150, 0.75rem);
	right: var(--wist-space-150, 0.75rem);
	padding: var(--wist-space-050, 0.25rem) var(--wist-space-100, 0.5rem);
	border-radius: var(--wist-ab-radius-sm, 0.625rem);
	background: var(--wist-ab-color-primary, #1a1a1a);
	color: var(--wist-ab-color-on-primary, #fff);
	font-family: var(--wist-ab-font-family-ui, inherit);
	font-size: var(--wist-ab-font-size-xs, 0.8125rem);
	font-weight: var(--wist-ab-font-weight-bold, 500);
	line-height: 1.4;
}

.wist-ab-card-label {
	display: flex;
	align-items: center;
	gap: var(--wist-space-100, 0.5rem);
	/* El distintivo ocupa la esquina derecha. */
	padding-right: var(--wist-space-600, 3rem);
	margin-bottom: var(--wist-space-150, 0.75rem);
	font-size: var(--wist-ab-font-size-md, 1rem);
	font-weight: var(--wist-ab-font-weight-bold, 500);
	line-height: 1.4;
	color: var(--wist-ab-color-label, inherit);
}

/**
 * Los datos de la tarjeta van en la familia de interfaz: son cifras y datos de
 * formulario, no texto de lectura, y necesitan cifras de ancho uniforme para
 * que una cédula o un teléfono no bailen entre tarjetas.
 */
.wist-ab-card-name,
.wist-ab-card-address,
.wist-ab-card-phone {
	margin: var(--wist-space-050, 0.25rem) 0 0;
	font-family: var(--wist-ab-font-family-ui, inherit);
	font-size: var(--wist-ab-font-size-sm, 0.875rem);
	font-weight: var(--wist-ab-font-weight-normal, 400);
	line-height: 1.6;
	color: var(--wist-ab-color-text-subtle, #777);
	font-variant-numeric: tabular-nums;
}

/* Separación de acción destructiva respecto del resto del grupo. */
.wist-ab-card-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wist-space-200, 1rem);
	margin-top: var(--wist-space-300, 1.5rem);
}

/* ------------------------------------------------------------------ */
/* Enlaces de acción                                                   */
/* ------------------------------------------------------------------ */

.wist-ab-link {
	position: relative;
	background: none;
	border: none;
	padding: 0;
	font-family: var(--wist-ab-font-family-ui, inherit);
	font-size: var(--wist-ab-font-size-xs, 0.8125rem);
	font-weight: var(--wist-ab-font-weight-bold, 500);
	line-height: 1.5;
	color: var(--wist-ab-color-primary, #1a1a1a);
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

.wist-ab-link:hover {
	text-decoration-thickness: 2px;
}

/**
 * Área táctil de 44 px sin alterar el tamaño visual.
 *
 * El texto de estos enlaces mide bastante menos que el mínimo táctil. En vez
 * de agrandarlos, se extiende su zona clickeable con un pseudo-elemento
 * transparente. El tamaño visual y el área táctil se especifican por separado.
 */
.wist-ab-link::after,
.wist-ab-picker-back::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	min-width: var(--wist-ab-control-height, 2.75rem);
	height: var(--wist-ab-control-height, 2.75rem);
	transform: translate(-50%, -50%);
}

.wist-ab-delete {
	color: var(--wist-ab-color-danger, #b3261e);
}

/* ------------------------------------------------------------------ */
/* Diálogos                                                            */
/* -------------------------------------------------------------------
 * Elemento <dialog> nativo, abierto con showModal().
 *
 * Se pinta en la capa superior del navegador, así que escapa del recorte, del
 * apilado y del transform de sus ancestros. Un contenedor con transform
 * convierte a position:fixed en relativo a él, y ese es justamente el caso de
 * un header sticky: antes había que mover el nodo a <body> a mano para
 * esquivarlo.
 *
 * De regalo trae trampa de foco y cierre con Escape nativos, y el velo pasa a
 * ::backdrop.
 * ------------------------------------------------------------------ */

.wist-ab-modal-dialog {
	width: 100%;
	max-width: min(30rem, calc(100vw - var(--wist-space-400, 2rem)));
	max-height: calc(100vh - var(--wist-space-400, 2rem));
	padding: 0;
	border: 0;
	border-radius: var(--wist-ab-radius-2xl, 1.75rem);
	background: transparent;
	overflow: visible;
	font-family: var(--wist-ab-font-family, inherit);
	color: var(--wist-ab-color-text, inherit);

	/**
	 * El velo se declara aquí y no en ::backdrop para que la variable se
	 * herede: el pseudo-elemento hereda del elemento que lo origina.
	 *
	 * Mismo tratamiento que el diálogo del buscador. El velo sale del token
	 * --wist-overlay de la paleta, que es el valor que la especificación fija
	 * para el overlay de modal. El desenfoque se declara en el elemento que
	 * flota y no en un ancestro: backdrop-filter en un contenedor crea un
	 * bloque contenedor nuevo e invalida el position:sticky de sus
	 * descendientes.
	 */
	--wist-ab-scrim: var(--wist-ab-color-veil, rgba(31, 31, 65, .45));
	--wist-ab-blur: var(--wist-blur-overlay, 8px);
	--wist-ab-saturate: var(--wist-saturate-glass, 180%);
}

.wist-ab-modal-dialog::backdrop {
	background: var(--wist-ab-scrim, rgba(31, 31, 65, .45));
	-webkit-backdrop-filter: blur(var(--wist-ab-blur)) saturate(var(--wist-ab-saturate));
	backdrop-filter: blur(var(--wist-ab-blur)) saturate(var(--wist-ab-saturate));
}

.wist-ab-modal {
	position: relative;
	width: 100%;
	max-height: calc(100vh - var(--wist-space-400, 2rem));
	padding: var(--wist-space-300, 1.5rem);
	border-radius: var(--wist-ab-radius-2xl, 1.75rem);
	background: var(--wist-ab-color-surface, #fff);
	box-shadow: var(--wist-ab-shadow-4);
	overflow-y: auto;
	overscroll-behavior: contain;
}

/**
 * El cierre mantiene un target de 44 px aunque el icono mida 18. Se separa del
 * borde lo mismo que el distintivo de la tarjeta, de modo que el icono queda
 * ópticamente alineado con el relleno del diálogo.
 */
.wist-ab-modal-close {
	position: absolute;
	top: var(--wist-space-150, 0.75rem);
	right: var(--wist-space-150, 0.75rem);
	display: grid;
	place-items: center;
	width: var(--wist-ab-control-height, 2.75rem);
	height: var(--wist-ab-control-height, 2.75rem);
	padding: 0;
	background: none;
	border: none;
	border-radius: var(--wist-ab-radius-md, 0.875rem);
	line-height: 1;
	cursor: pointer;
	color: var(--wist-ab-color-text-subtle, #777);
	transition: background-color .15s ease, color .15s ease;
}

.wist-ab-modal-close:hover {
	background: var(--wist-ab-color-surface-hover, #fafafa);
	color: var(--wist-ab-color-text, #222);
}

.wist-ab-modal h3 {
	margin: 0 0 var(--wist-space-300, 1.5rem);
	/* El cierre ocupa la esquina derecha. */
	padding-right: var(--wist-ab-control-height, 2.75rem);
	font-family: var(--wist-ab-font-family, inherit);
	font-size: var(--wist-ab-font-size-lg, 1.125rem);
	font-weight: var(--wist-ab-font-weight-heading, 600);
	line-height: 1.3;
	color: var(--wist-ab-color-text, inherit);
}

/* ------------------------------------------------------------------ */
/* Campos                                                              */
/* -------------------------------------------------------------------
 * Etiqueta a campo 8 px, campo a campo 24 px. El espacio interno por debajo
 * del externo es lo que hace que cada etiqueta se lea junto a su campo y no
 * junto al campo anterior.
 *
 * La etiqueta se mantiene visible en posición superior. El placeholder no la
 * sustituye: desaparece al escribir y el lector de pantalla no lo anuncia como
 * nombre del campo.
 * ------------------------------------------------------------------ */

.wist-ab-modal label {
	display: block;
	margin: var(--wist-space-300, 1.5rem) 0 var(--wist-space-100, 0.5rem);
	font-family: var(--wist-ab-font-family-ui, inherit);
	font-size: var(--wist-ab-font-size-sm, 0.875rem);
	font-weight: var(--wist-ab-font-weight-bold, 500);
	line-height: 1.5;
	color: var(--wist-ab-color-text, inherit);
}

/* Dentro de una fila de dos, el par ya lo separa el gap del grid. */
.wist-ab-row label {
	margin-top: 0;
}

.wist-ab-modal input,
.wist-ab-modal select {
	width: 100%;
	min-height: var(--wist-ab-control-height, 2.75rem);
	padding: 10px 14px;
	border: none;
	/* Mismo criterio que el botón secundario: el contorno no ocupa espacio. */
	box-shadow: inset 0 0 0 1px var(--wist-ab-color-border, #ddd);
	border-radius: var(--wist-ab-radius-lg, 1.125rem);
	font-family: var(--wist-ab-font-family-ui, inherit);
	font-size: var(--wist-ab-font-size-md, 1rem);
	font-weight: var(--wist-ab-font-weight-normal, 400);
	line-height: 24px;
	background-color: var(--wist-ab-color-input-bg, #fff);
	color: var(--wist-ab-color-input-text, #222);
	font-variant-numeric: tabular-nums;
	transition: box-shadow .15s ease;
	/* Safari pinta los campos con apariencia nativa y descarta el radio. */
	appearance: none;
	-webkit-appearance: none;
}

.wist-ab-modal input::placeholder {
	color: var(--wist-ab-color-text-subtle, #777);
	opacity: 1;
}

.wist-ab-modal input:hover,
.wist-ab-modal select:hover {
	box-shadow: inset 0 0 0 1px var(--wist-ab-color-border-hover, #999);
}

.wist-ab-modal input:disabled,
.wist-ab-modal select:disabled {
	opacity: .6;
	cursor: not-allowed;
}

/**
 * Un campo por fila, salvo los pares que se leen como una unidad: nombre y
 * apellido, ciudad y provincia. El resto apilado, porque los formularios
 * multicolumna incrementan la tasa de error de llenado.
 */
.wist-ab-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wist-space-200, 1rem);
	margin-top: var(--wist-space-300, 1.5rem);
}

/* Último campo a botón de envío. */
.wist-ab-form-actions {
	display: flex;
	justify-content: flex-end;
	gap: var(--wist-space-100, 0.5rem);
	margin-top: var(--wist-space-400, 2rem);
}

.wist-ab-form-error {
	margin: var(--wist-space-100, 0.5rem) 0 0;
	font-family: var(--wist-ab-font-family-ui, inherit);
	font-size: var(--wist-ab-font-size-xs, 0.8125rem);
	line-height: 1.5;
	color: var(--wist-ab-color-danger, #b3261e);
}

/* Texto de ayuda y de error, a 8 px por debajo del campo. */
.wist-ab-field-msg {
	display: block;
	margin-top: var(--wist-space-100, 0.5rem);
	font-family: var(--wist-ab-font-family-ui, inherit);
	font-size: var(--wist-ab-font-size-xs, 0.8125rem);
	line-height: 1.5;
}

.wist-ab-field-msg-ok {
	color: var(--wist-ab-color-success, #0a7d28);
}

.wist-ab-field-msg-error {
	color: var(--wist-ab-color-danger-alt, #e2401c);
}

/* ------------------------------------------------------------------ */
/* Selector de direcciones guardadas en el checkout                    */
/* ------------------------------------------------------------------ */

.wist-ab-checkout-selector {
	margin: 0 0 var(--wist-space-300, 1.5rem);
	font-family: var(--wist-ab-font-family, inherit);
}

.wist-ab-checkout-label {
	margin: 0 0 var(--wist-space-100, 0.5rem);
	font-family: var(--wist-ab-font-family-ui, inherit);
	font-size: var(--wist-ab-font-size-sm, 0.875rem);
	font-weight: var(--wist-ab-font-weight-bold, 500);
	line-height: 1.5;
	color: var(--wist-ab-color-text, inherit);
}

/**
 * Botón resumen. Comparte alto, relleno, radio y fondo con el campo, porque
 * ocupa el lugar de uno dentro del formulario y pertenece a la misma familia
 * de componentes.
 */
.wist-ab-checkout-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wist-space-150, 0.75rem);
	width: 100%;
	min-height: var(--wist-ab-control-height, 2.75rem);
	padding: 10px 14px;
	border: none;
	box-shadow: inset 0 0 0 1px var(--wist-ab-color-border, #ddd);
	border-radius: var(--wist-ab-radius-lg, 1.125rem);
	background: var(--wist-ab-color-input-bg, #fff);
	cursor: pointer;
	font-family: var(--wist-ab-font-family-ui, inherit);
	font-size: var(--wist-ab-font-size-md, 1rem);
	font-weight: var(--wist-ab-font-weight-normal, 400);
	line-height: 24px;
	text-align: left;
	color: var(--wist-ab-color-text, #222);
	transition: box-shadow .15s ease;
}

.wist-ab-checkout-summary:hover {
	box-shadow: inset 0 0 0 1px var(--wist-ab-color-border-hover, #999);
}

.wist-ab-checkout-summary-change {
	flex-shrink: 0;
	font-size: var(--wist-ab-font-size-xs, 0.8125rem);
	font-weight: var(--wist-ab-font-weight-bold, 500);
	color: var(--wist-ab-color-primary, #1a1a1a);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Casilla a su etiqueta, 8 px. Casilla a casilla, 12 px. */
.wist-ab-save-toggle {
	display: flex;
	align-items: center;
	gap: var(--wist-space-100, 0.5rem);
	min-height: var(--wist-ab-control-height, 2.75rem);
	margin-top: var(--wist-space-150, 0.75rem);
	font-family: var(--wist-ab-font-family-ui, inherit);
	font-size: var(--wist-ab-font-size-sm, 0.875rem);
	font-weight: var(--wist-ab-font-weight-normal, 400);
	line-height: 1.5;
	color: var(--wist-ab-color-text-subtle, #777);
	cursor: pointer;
	user-select: none;
}

.wist-ab-save-toggle input[type="checkbox"] {
	flex-shrink: 0;
	width: auto;
	margin: 0;
	cursor: pointer;
	accent-color: var(--wist-ab-color-primary, #1a1a1a);
}

/* Lista del diálogo: vertical, con scroll propio y cómoda en móvil. */

.wist-ab-picker-modal {
	max-width: min(26rem, 100%);
}

.wist-ab-picker-list {
	display: flex;
	flex-direction: column;
	gap: var(--wist-space-100, 0.5rem);
	max-height: min(60vh, 28rem);
	overflow-y: auto;
	overscroll-behavior: contain;
	/* La barra se estandariza también aquí: scrollbar-width no se hereda del
	   :root del sitio y cada contenedor con scroll propio la declara. */
	scrollbar-width: thin;
	scrollbar-color: var(--wist-ab-color-border-hover, #999) transparent;
}

/**
 * Cada opción es una card horizontal: radio un paso por debajo del diálogo y
 * contorno en vez de sombra, porque ya está dentro de una superficie elevada y
 * una sombra sobre otra no comunica nada.
 */
.wist-ab-picker-item {
	display: flex;
	align-items: center;
	gap: var(--wist-space-150, 0.75rem);
	width: 100%;
	min-height: var(--wist-ab-control-height, 2.75rem);
	padding: var(--wist-space-150, 0.75rem);
	border: none;
	box-shadow: inset 0 0 0 1px var(--wist-ab-color-border, #ddd);
	border-radius: var(--wist-ab-radius-md, 0.875rem);
	background: var(--wist-ab-color-surface, #fff);
	text-align: left;
	cursor: pointer;
	font-family: var(--wist-ab-font-family, inherit);
	transition: box-shadow .15s ease, background-color .15s ease;
}

.wist-ab-picker-item:hover {
	box-shadow: inset 0 0 0 1px var(--wist-ab-color-border-hover, #999);
	background: var(--wist-ab-color-surface-hover, #fafafa);
}

/* La opción predeterminada se marca con el mismo contorno de dos trazos que la
   tarjeta predeterminada de Mi cuenta. */
.wist-ab-picker-item.is-default {
	box-shadow: inset 0 0 0 2px var(--wist-ab-color-primary, #1a1a1a);
}

.wist-ab-picker-item-text {
	display: flex;
	flex-direction: column;
	gap: var(--wist-space-050, 0.25rem);
	min-width: 0;
}

.wist-ab-picker-item-text strong {
	font-size: var(--wist-ab-font-size-md, 1rem);
	font-weight: var(--wist-ab-font-weight-bold, 500);
	line-height: 1.4;
	color: var(--wist-ab-color-label, inherit);
}

.wist-ab-picker-item-text span {
	font-family: var(--wist-ab-font-family-ui, inherit);
	font-size: var(--wist-ab-font-size-xs, 0.8125rem);
	font-weight: var(--wist-ab-font-weight-normal, 400);
	line-height: 1.5;
	color: var(--wist-ab-color-text-subtle, #777);
	font-variant-numeric: tabular-nums;
}

/**
 * "Agregar nuevo": contorno discontinuo.
 *
 * Va con border y no con box-shadow porque el patrón discontinuo es lo que
 * distingue esta fila del resto, y box-shadow no admite estilo de trazo. El
 * relleno se compensa para que mida igual que las demás.
 */
.wist-ab-picker-new {
	border: 1px dashed var(--wist-ab-color-border, #ddd);
	box-shadow: none;
	padding: calc(var(--wist-space-150, 0.75rem) - 1px);
	background: transparent;
	color: var(--wist-ab-color-text-subtle, #777);
}

.wist-ab-picker-new:hover {
	border-color: var(--wist-ab-color-border-hover, #999);
	box-shadow: none;
}

.wist-ab-picker-back {
	position: relative;
	background: none;
	border: none;
	padding: 0;
	margin-bottom: var(--wist-space-150, 0.75rem);
	font-family: var(--wist-ab-font-family-ui, inherit);
	font-size: var(--wist-ab-font-size-sm, 0.875rem);
	font-weight: var(--wist-ab-font-weight-normal, 400);
	line-height: 1.5;
	color: var(--wist-ab-color-text-subtle, #777);
	cursor: pointer;
}

.wist-ab-picker-back:hover {
	color: var(--wist-ab-color-primary, #1a1a1a);
}

/* ------------------------------------------------------------------ */
/* Iconos                                                              */
/* ------------------------------------------------------------------ */

.wist-ab-icon {
	display: block;
	flex-shrink: 0;
	color: var(--wist-ab-color-icon, inherit);
}

/* El icono de la fila se centra en su propia caja para que no arrastre el
   alto de la línea de texto que lleva al lado. */
.wist-ab-pin {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.wist-ab-btn .wist-ab-icon {
	color: currentColor;
}

.wist-ab-modal-close .wist-ab-icon {
	width: 18px;
	height: 18px;
	color: currentColor;
}

/* ------------------------------------------------------------------ */
/* Foco                                                                */
/* -------------------------------------------------------------------
 * Todo elemento interactivo declara foco visible, con 2 px de trazo y 3 px de
 * separación. Sin esto, quien navega con teclado no sabe dónde está parado, y
 * en un formulario de checkout eso deja la compra sin terminar.
 * ------------------------------------------------------------------ */

.wist-ab-btn:focus-visible,
.wist-ab-link:focus-visible,
.wist-ab-modal-close:focus-visible,
.wist-ab-checkout-summary:focus-visible,
.wist-ab-picker-item:focus-visible,
.wist-ab-picker-back:focus-visible,
.wist-ab-save-toggle input:focus-visible,
.wist-ab-modal input:focus-visible,
.wist-ab-modal select:focus-visible {
	outline: 2px solid var(--wist-ab-color-focus, #1a1a1a);
	outline-offset: 3px;
}

/* ------------------------------------------------------------------ */
/* Móvil: 767 px o inferior                                            */
/* -------------------------------------------------------------------
 * El umbral es 767 y no 480. Los breakpoints de Bricks son desktop-first y
 * mobile_portrait cubre solo hasta 478 px, de modo que un ajuste declarado ahí
 * deja sin tocar todo el rango de 479 a 767, que es donde vive buena parte de
 * los teléfonos en horizontal y los plegables. La especificación llama móvil a
 * 767 px o inferior.
 * ------------------------------------------------------------------ */

@media (max-width: 767px) {

	/* Un campo por fila: en este ancho ni el par nombre y apellido entra sin
	   quedar estrecho. */
	.wist-ab-row {
		grid-template-columns: 1fr;
		gap: var(--wist-space-300, 1.5rem);
	}

	/* Las acciones se apilan a ancho completo y la primaria queda arriba. */
	.wist-ab-form-actions {
		flex-direction: column-reverse;
		gap: var(--wist-space-150, 0.75rem);
	}

	.wist-ab-form-actions .wist-ab-btn {
		width: 100%;
	}

	/**
	 * El diálogo pasa a hoja anclada al borde inferior, con 90 % de alto
	 * máximo y radio solo en los ángulos superiores: un elemento pegado a un
	 * borde del viewport deja de leerse como un objeto separado del fondo, y
	 * el radio en la parte de abajo solo dejaría ver una franja de página.
	 *
	 * El <dialog> se centra con margin:auto, así que basta con fijar el margen
	 * inferior en cero para llevarlo abajo.
	 */
	.wist-ab-modal-dialog,
	.wist-ab-picker-modal {
		max-width: 100%;
	}

	.wist-ab-modal-dialog {
		width: 100%;
		max-height: 90vh;
		margin: auto auto 0;
		border-radius: var(--wist-ab-radius-2xl, 1.75rem) var(--wist-ab-radius-2xl, 1.75rem) 0 0;
	}

	.wist-ab-modal {
		max-height: 90vh;
		padding: var(--wist-space-200, 1rem);
		border-radius: var(--wist-ab-radius-2xl, 1.75rem) var(--wist-ab-radius-2xl, 1.75rem) 0 0;
		/* La franja del gesto de inicio y la muesca inferior. */
		padding-bottom: calc(var(--wist-space-200, 1rem) + env(safe-area-inset-bottom, 0px));
	}

	.wist-ab-modal h3 {
		margin-bottom: var(--wist-space-200, 1rem);
	}

	.wist-ab-picker-list {
		max-height: 60vh;
	}

	/* Tarjetas a una columna, con la separación de móvil. */
	.wist-ab-grid {
		grid-template-columns: 1fr;
		gap: var(--wist-space-300, 1.5rem);
	}
}

/* ------------------------------------------------------------------ */
/* Móvil estrecho: 478 px o inferior                                   */
/* ------------------------------------------------------------------ */

@media (max-width: 478px) {

	/* La acción de la cabecera pasa a ancho completo: al lado del título
	   quedaba partida en dos líneas dentro de su propia caja. */
	.wist-ab-header {
		align-items: stretch;
	}

	.wist-ab-header .wist-ab-btn {
		width: 100%;
	}

	.wist-ab-card {
		padding: var(--wist-space-200, 1rem);
	}

	/* El relleno de la tarjeta baja a 16 px, así que el radio de los elementos
	   internos baja con él: radio interno igual al externo menos la distancia
	   al borde. */
	.wist-ab-badge {
		top: var(--wist-space-100, 0.5rem);
		right: var(--wist-space-100, 0.5rem);
	}
}

/* ------------------------------------------------------------------ */
/* Movimiento reducido                                                 */
/* ------------------------------------------------------------------ */

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

	.wist-ab-btn,
	.wist-ab-checkout-summary,
	.wist-ab-picker-item,
	.wist-ab-modal-close,
	.wist-ab-modal input,
	.wist-ab-modal select {
		transition: none;
	}

	.wist-ab-btn:active {
		transform: none;
	}
}

/* La regla que oculta los campos nativos de checkout (#billing_*_field)
   ya NO vive acá de forma fija - se agrega como CSS inline, condicional
   al ajuste "Ocultar campos nativos" en WooCommerce → WIST Address Book.
   Ver WIST_AB_Assets::enqueue_checkout_assets(). Esto es justamente lo
   que permite prender/apagarlo sin tocar código. */