/*
 * Envíos de Glee (glee-envios): el selector de la cabecera, la ventana de ubicación y el
 * bloque de envío de la ficha y la barra de envío gratis del carrito y del minicarrito. Es el diseño
 * `Envios-cabecera`, `Envios-modal` y `Envios-ficha`
 * de gleepet-production/docs/prototipos/single-producto.
 *
 * Los tokens están copiados de glee-brand/assets/tokens.css, porque ese archivo no se carga en
 * el sitio. Si un token cambia en glee-brand, cambiarlo acá. Radio 0 y sin sombras, como pide la marca.
 *
 * Woodmart (el tema, sin tema hijo) estiliza `button`, `input`, `select`, `p` y `a` con más
 * especificidad que una clase suelta. Por eso cada regla cuelga de `.glee-envios` y lleva al menos
 * dos clases, y cada botón pisa lo que el tema le pone (mayúsculas, alto, borde, sombra). Sin
 * !important: la regla de `[hidden]` va al final para ganar por orden.
 *
 * Celular primero. El corte de escritorio es 1025px, el mismo en que Woodmart cambia de la
 * cabecera de celular a la de escritorio (`whb-hidden-lg` / `whb-visible-lg`); una variable no
 * sirve dentro de @media.
 */

.glee-envios {
	--glee-primary: #392869;
	--glee-primary-soft: #efedf4;
	--glee-accent: #e1ae3b;
	--glee-space-1: 4px;
	--glee-border-width-strong: 2px;
	--glee-ink: #161616;
	--glee-ink-muted: #5b5663;
	--glee-background: #ffffff;
	--glee-surface: #f4f4f4;
	--glee-line: #dddddd;
	--glee-on-primary: #ffffff;
	--glee-success: #459647;
	--glee-warning: #e0b252;
	--glee-info: #4d93d1;
	--glee-error: #e01020;
	--glee-font-display: "Montserrat", Arial, Helvetica, sans-serif;
	--glee-font-body: "Lato", Arial, Helvetica, sans-serif;
	--glee-focus-ring: 2px solid var(--glee-primary);
	--glee-focus-offset: 2px;
	--glee-control-height: 48px;
	--glee-touch-target: 44px;
	--glee-weight-subtitle: 600;
	/* La etiqueta de debajo del pin en la barra de celular: el mayor tamaño que entre, con un piso de 10 px (menos no se lee). */
	--glee-envios-pin-label-min-size: 10px;
	--glee-envios-pin-label-max-size: 12px;
	--glee-envios-pin-label-size: clamp(var(--glee-envios-pin-label-min-size), 2.7vw, var(--glee-envios-pin-label-max-size));
	--glee-envios-pin-label-max-width: 5em; /* «Dirección» entera; un barrio más largo se corta con elipsis */
	--glee-envios-pin-icon-size: 20px;
	/* Estados del botón sobre la barra: la capa translúcida del toque y del estado abierto (blanco al 14 % sobre el violeta) y cuánto se atenúa el contenido al apretar. */
	--glee-envios-pressed-mix: 14%;
	--glee-envios-pressed-layer: color-mix(in srgb, var(--glee-on-primary) var(--glee-envios-pressed-mix), transparent);
	--glee-envios-pressed-content-opacity: 0.8;
	--glee-envios-state-transition: 0.12s;
	--glee-header-text-breakpoint: 600px; /* informativo: las @media no leen variables; es el ancho desde el que el texto del selector cabe en la barra */

	color: var(--glee-ink);
	font-family: var(--glee-font-body);
	font-size: 16px;
	font-weight: 400; /* el tema pone 600 en el cuerpo y el diseño parte de 400 */
	line-height: 1.6;
	text-align: left;
}

.glee-envios *,
.glee-envios *::before,
.glee-envios *::after {
	box-sizing: border-box;
}

.glee-envios svg {
	display: block;
	flex: none;
}

.glee-envios p {
	margin: 0;
}

/* Foco visible en todo lo que se puede tocar. */
.glee-envios button:focus-visible,
.glee-envios a:focus-visible,
.glee-envios select:focus-visible,
.glee-envios .glee-envios-input:focus-visible {
	outline: var(--glee-focus-ring);
	outline-offset: var(--glee-focus-offset);
}

/* ---------- Reinicio de los botones: el tema les pone mayúsculas, alto, borde y sombra ---------- */

.glee-envios .glee-envios-selector__button,
.glee-envios .glee-envios-product__link,
.glee-envios .glee-envios-freebar__link,
.glee-envios .glee-envios-modal__close,
.glee-envios .glee-envios-button,
.glee-envios .glee-envios-field--button,
.glee-envios .glee-envios-link {
	margin: 0;
	border-radius: 0;
	box-shadow: none;
	font-family: var(--glee-font-body);
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	cursor: pointer;
}

/* El aviso debajo de la tarifa «Envío a cotizar» (carrito y checkout): lo imprime WooCommerce dentro de la fila de envío. */
.glee-envios.glee-envios-quote-notice {
	display: block;
	margin-top: 8px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--glee-ink);
}

/* El aviso de la página de gracias de un pedido con «Envío a cotizar»: el estado va en el borde y el texto es de color de tinta (glee-brand). */
.glee-envios.glee-envios-quote-thank-you {
	margin: 16px 0;
	padding: 12px 16px;
	border: 1px solid var(--glee-line);
	border-left: 4px solid var(--glee-info);
	border-radius: 0;
	background: var(--glee-surface);
	font-family: var(--glee-font-body);
	color: var(--glee-ink);
}

.glee-envios.glee-envios-quote-thank-you p {
	margin: 0;
	line-height: 1.5;
}

/* ---------- Enlaces ---------- */

.glee-envios .glee-envios-link,
.glee-envios a.glee-envios-link {
	color: var(--glee-primary);
	font-weight: 700;
	text-decoration: underline;
}

.glee-envios button.glee-envios-link {
	padding: 12px 8px;
	background: transparent;
	border: 0;
	font-size: 14px;
	line-height: 1.4;
}

/* ---------- Selector de la cabecera: una sola fila de la barra, en celular y en escritorio ---------- */

.glee-envios-selector {
	display: block;
	min-width: 0;
	max-width: 100%;

	/* Woodmart fija el contorno del foco de todo botón con !important: con sus propias variables sale el anillo de la marca. */
	--wd-otl-width: 2px;
	--wd-otl-style: solid;
	--wd-otl-color: var(--glee-on-primary); /* sobre el violeta de la barra el anillo violeta no se vería: va blanco */
}

/* Se aprieta dentro de la columna de la barra en vez de desbordarla: sin `min-width: 0` una fila flex no baja del ancho de su contenido (ni la columna, ni el bloque, ni el selector). */
.whb-column:has(.glee-envios-selector),
.wd-header-html:has(> .glee-envios-selector),
.wd-header-text:has(> .glee-envios-selector) {
	min-width: 0;
}

.glee-envios .glee-envios-selector__button {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	width: auto;
	max-width: 100%;
	height: var(--glee-control-height);
	min-height: var(--glee-control-height);
	padding: 0 8px;
	background: transparent;
	border: 0;
	color: var(--glee-on-primary);
	font-size: 16px;
	line-height: 1.6;
	text-align: left;
}

.glee-envios .glee-envios-selector__icon,
.glee-envios .glee-envios-selector__chevron {
	display: inline-flex;
	color: inherit;
}

/* Cada texto en una línea con elipsis: el contenido se recorta, nunca se parte ni sale de la fila. */
.glee-envios .glee-envios-selector__text {
	display: block;
	flex: 0 1 auto;
	min-width: 0;
}

.glee-envios .glee-envios-selector__title,
.glee-envios .glee-envios-selector__lead {
	display: block;
	max-width: 260px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.glee-envios .glee-envios-selector__title {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
}

.glee-envios .glee-envios-selector__lead {
	font-size: 12px;
	font-weight: 400;
	line-height: 1.2;
}

/* Sin lugar, en celular el título corto; en escritorio el largo. */
.glee-envios .glee-envios-selector__title-short {
	display: inline;
}

.glee-envios .glee-envios-selector__title-long {
	display: none;
}

/* El detalle y la acción de texto no se ven (el costo del envío se explica en la ventana), pero los lee un lector de pantalla. */
.glee-envios .glee-envios-selector__detail,
.glee-envios .glee-envios-selector__action {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* La flecha solo se dibuja en escritorio: en celular la fila no tiene lugar y el pin ya dice que se toca. */
.glee-envios .glee-envios-selector__chevron {
	display: none;
}

/* La etiqueta de debajo del pin solo existe en la barra de celular (más abajo); en cualquier otro lugar el texto ya está en el título. */
.glee-envios .glee-envios-selector__pin-label {
	display: none;
}

/* Escritorio: el título largo sin lugar, y la flecha. */
@media (min-width: 1025px) {
	.glee-envios .glee-envios-selector__title-short {
		display: none;
	}

	.glee-envios .glee-envios-selector__title-long {
		display: inline;
	}

	.glee-envios .glee-envios-selector__chevron {
		display: inline-flex;
	}
}

/*
 * Celular (menos de 600 px), solo dentro de la cabecera del tema (`.whb-header`; en otro contenedor el selector se ve entero, con su elipsis): la barra
 * ya lleva el menú, el logo y los íconos de la derecha (unos 320 px), y no queda lugar para las dos líneas. El selector es el pin con una etiqueta
 * corta debajo, apilados y centrados, sobre el violeta y sin caja; el detalle, «Cambiar» y el costo se ven en la ventana al tocarlo y los
 * lee el `aria-label`. El botón mide 44 px de ancho como mínimo y 48 de alto, igual que la barra: no la agranda. El logo y el tema no se tocan:
 * lo que falta lo cede el borde del botón con el menú, dentro del selector.
 */
@media (max-width: 599px) {
	/* La columna toma el ancho de su contenido (el menú y el selector) y el reparto del resto lo hacen el logo y los íconos. */
	.whb-general-header .whb-column:has(.glee-envios-selector) {
		flex: 0 0 auto; /* Woodmart le da `flex: 1 1 0%` a la columna con `.whb-general-header :is(...)`: la clase extra gana la especificidad */
	}

	.whb-column .wd-header-text:has(> .glee-envios-selector),
	.whb-column .wd-header-html:has(> .glee-envios-selector) {
		padding-inline: 0;
	}

	.whb-header .glee-envios .glee-envios-selector__button {
		flex-direction: column;
		justify-content: center;
		gap: 2px;
		width: auto;
		min-width: var(--glee-touch-target);
		padding: 0;
	}

	.whb-header .glee-envios .glee-envios-selector__icon svg {
		width: var(--glee-envios-pin-icon-size);
		height: var(--glee-envios-pin-icon-size);
	}

	.whb-header .glee-envios .glee-envios-selector__pin-label {
		display: block;
		max-width: var(--glee-envios-pin-label-max-width);
		overflow: hidden;
		font-size: var(--glee-envios-pin-label-size);
		font-weight: var(--glee-weight-subtitle);
		line-height: 1.1;
		text-align: center;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.whb-header .glee-envios .glee-envios-selector__text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}

	.whb-column:has(.glee-envios-selector) ~ .whb-mobile-center {
		min-width: 0;
	}

	/* El logo se achica sin deformarse (en vez de pisar al menú o a los íconos) cuando el selector le quita lugar a la fila. */
	.whb-column:has(.glee-envios-selector) ~ .whb-mobile-center :is(.site-logo, .wd-logo) {
		min-width: 0;
		max-width: 100%;
	}

	.whb-column:has(.glee-envios-selector) ~ .whb-mobile-center img {
		max-width: 100% !important; /* el tema fija `max-width: 179px` en el atributo `style` del logo (el ancho que se elige en su constructor); solo !important le gana */
		height: auto;
		object-fit: contain;
	}
}

/*
 * Estados del botón (solo dentro de la cabecera del tema). El tema pinta sus botones al pasar, tocar y enfocar: acá cada estado se fija a mano.
 * - Reposo y foco con el dedo: transparente, sin anillo. En un celular no hay `:hover` real (queda «pegado» después de tocar), así que solo rige
 *   con mouse (`hover: hover` y `pointer: fine`).
 * - Tocando (`:active`): capa translúcida y el contenido apenas atenuado; breve, y sin animación si la persona pidió menos movimiento.
 * - Con teclado o lector (`:focus-visible`): el anillo de la marca, blanco sobre el violeta (12,5 a 1) y violeta sobre una fila clara.
 * - Ventana abierta (`aria-expanded="true"`): la misma capa y una raya mostaza fina bajo el botón, hasta que se cierre.
 */
.glee-envios .glee-envios-selector__button {
	-webkit-tap-highlight-color: transparent; /* iOS dibuja un destello gris: lo reemplaza `:active` */
}

.glee-envios .glee-envios-selector__button:hover,
.glee-envios .glee-envios-selector__button:active,
.glee-envios .glee-envios-selector__button:focus {
	background: transparent;
	color: var(--glee-on-primary);
}

.glee-envios .glee-envios-selector__button:focus:not(:focus-visible) {
	outline: none;
	box-shadow: none;
}

.glee-envios .glee-envios-selector__button:focus-visible {
	outline: var(--glee-focus-ring);
	outline-color: var(--glee-on-primary);
	outline-offset: var(--glee-focus-offset);
	box-shadow: none;
}

/* La raya del estado abierto ocupa su lugar siempre (transparente), para que el botón no cambie de alto ni de posición. */
.whb-header .glee-envios .glee-envios-selector__button {
	padding-top: var(--glee-border-width-strong);
	border-bottom: var(--glee-border-width-strong) solid transparent;
}

.whb-header .glee-envios .glee-envios-selector__button:active,
.whb-header .glee-envios .glee-envios-selector__button[aria-expanded="true"] {
	background: var(--glee-envios-pressed-layer);
}

.whb-header .glee-envios .glee-envios-selector__button[aria-expanded="true"] {
	border-bottom-color: var(--glee-accent);
}

.whb-header .glee-envios .glee-envios-selector__button:active .glee-envios-selector__icon,
.whb-header .glee-envios .glee-envios-selector__button:active .glee-envios-selector__pin-label,
.whb-header .glee-envios .glee-envios-selector__button:active .glee-envios-selector__text {
	opacity: var(--glee-envios-pressed-content-opacity);
}

@media (hover: hover) and (pointer: fine) {
	.whb-header .glee-envios .glee-envios-selector__button:hover {
		background: var(--glee-envios-pressed-layer);
	}

	.glee-envios .glee-envios-selector__button:hover .glee-envios-selector__title {
		text-decoration: underline;
	}
}

/*
 * Tono claro (`tone="on-light"`): para una fila de fondo claro, como la del buscador. Sin fondo propio, con el texto en
 * `--glee-ink` (18:1 sobre blanco), la línea chica en `--glee-ink-muted` (7,1:1 sobre blanco), el pin y la flecha en
 * `--glee-primary` y el foco con el anillo violeta de la marca. La estructura y el JS son los mismos que en el tono oscuro:
 * solo cambian los colores. Va después para ganar por orden.
 */
.glee-envios-selector.glee-envios-selector--on-light {
	--wd-otl-color: var(--glee-primary);
}

.glee-envios.glee-envios-selector--on-light .glee-envios-selector__button {
	color: var(--glee-ink);
}

.glee-envios.glee-envios-selector--on-light .glee-envios-selector__button:focus-visible {
	outline-color: var(--glee-primary);
}

/* Sobre una fila clara la capa es el violeta suave de la marca y la raya del estado abierto es violeta (la mostaza no se ve sobre blanco). */
.whb-header .glee-envios.glee-envios-selector--on-light .glee-envios-selector__button:active,
.whb-header .glee-envios.glee-envios-selector--on-light .glee-envios-selector__button[aria-expanded="true"] {
	background: var(--glee-primary-soft);
}

.whb-header .glee-envios.glee-envios-selector--on-light .glee-envios-selector__button[aria-expanded="true"] {
	border-bottom-color: var(--glee-primary);
}

@media (hover: hover) and (pointer: fine) {
	.whb-header .glee-envios.glee-envios-selector--on-light .glee-envios-selector__button:hover {
		background: var(--glee-primary-soft);
	}
}

.glee-envios.glee-envios-selector--on-light .glee-envios-selector__icon,
.glee-envios.glee-envios-selector--on-light .glee-envios-selector__chevron {
	color: var(--glee-primary);
}

.glee-envios.glee-envios-selector--on-light .glee-envios-selector__lead {
	color: var(--glee-ink-muted);
}

/* ---------- Bloque de envío de la ficha ---------- */

.glee-envios-product {
	display: block;
}

.glee-envios .glee-envios-product__row {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 64px;
	padding: 8px 0;
	border-top: 1px solid var(--glee-line);
	border-bottom: 1px solid var(--glee-line);
}

.glee-envios .glee-envios-product__icon {
	display: inline-flex;
}

.glee-envios .glee-envios-product__icon--muted {
	color: var(--glee-ink-muted);
}

.glee-envios .glee-envios-product__icon--primary {
	color: var(--glee-primary);
}

.glee-envios .glee-envios-product__icon--success {
	color: var(--glee-success);
}

.glee-envios .glee-envios-product__body {
	flex: 1;
	min-width: 0;
}

.glee-envios .glee-envios-product__title {
	font-weight: 700;
	line-height: 1.4;
}

.glee-envios .glee-envios-product__text {
	font-size: 14px;
	line-height: 1.4;
	color: var(--glee-ink-muted);
}

/* El botón mide 44 px de alto para el dedo, pero ocupa en la fila lo mismo que el enlace del diseño. */
.glee-envios button.glee-envios-product__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin: -11px 0;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--glee-primary);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.6;
	text-decoration: underline;
	text-align: left;
}

/* ---------- Barra de envío gratis (carrito y minicarrito) ---------- */

/* El contenedor queda vacío cuando no hay nada que decir: el aire va en la caja, no en él. */
.glee-envios-freebar {
	display: block;
}

.glee-envios .glee-envios-freebar__box {
	margin: 0 0 16px;
}

.glee-envios .glee-envios-freebar__title {
	margin: 0 0 8px;
	font-weight: 700;
	line-height: 1.4;
}

.glee-envios .glee-envios-freebar__title--reached {
	display: flex;
	align-items: center;
	gap: 8px;
}

.glee-envios .glee-envios-freebar__check {
	display: inline-flex;
	color: var(--glee-success);
}

.glee-envios .glee-envios-freebar__track {
	height: 12px;
	background: var(--glee-surface);
	border: 1px solid var(--glee-line);
}

.glee-envios .glee-envios-freebar__fill {
	height: 100%;
	background: var(--glee-primary);
}

.glee-envios .glee-envios-freebar__fill--reached {
	background: var(--glee-success);
}

.glee-envios .glee-envios-freebar__note {
	margin: 8px 0 0;
	font-size: 14px;
	line-height: 1.4;
	color: var(--glee-ink-muted);
}

.glee-envios .glee-envios-freebar__invitation {
	font-size: 14px;
	line-height: 1.4;
}

/* Es un enlace dentro de una oración: el botón se comporta como texto en línea. */
.glee-envios button.glee-envios-freebar__link {
	display: inline;
	min-height: 0;
	height: auto;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--glee-primary);
	font-size: inherit;
	font-weight: 700;
	line-height: inherit;
	text-decoration: underline;
	text-align: left;
}

/* En el minicarrito la caja queda a 12 px de los botones. */
.glee-envios.glee-envios-freebar--minicart .glee-envios-freebar__box {
	margin-bottom: 12px;
}

/* ---------- Ventana de ubicación ---------- */

.glee-envios.glee-envios-modal {
	width: calc(100% - 32px);
	max-width: 400px;
	max-height: calc(100% - 32px);
	margin: auto;
	padding: 0;
	background: var(--glee-background);
	border: 1px solid var(--glee-line);
	border-radius: 0;
	box-shadow: none;
	overflow: auto;
	color: var(--glee-ink);
}

/* El velo se arma con la tinta de la marca; ::backdrop no hereda las variables en todos los navegadores. */
.glee-envios.glee-envios-modal::backdrop {
	background: rgba(22, 22, 22, 0.6);
}

html.glee-envios-is-locked {
	overflow: hidden;
}

.glee-envios .glee-envios-modal__card {
	padding: 8px 24px 24px;
}

.glee-envios .glee-envios-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 56px;
}

.glee-envios .glee-envios-modal__title {
	margin: 0;
	padding: 0;
	font-family: var(--glee-font-display);
	font-weight: 600;
	font-size: 20px;
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
	color: var(--glee-primary);
}

.glee-envios .glee-envios-modal__title:focus {
	outline: none;
}

.glee-envios .glee-envios-modal__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	min-height: 0;
	margin-right: -12px;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--glee-ink);
}

.glee-envios .glee-envios-modal__intro {
	margin-bottom: 16px;
	font-size: 15px;
	line-height: 1.5;
}

.glee-envios .glee-envios-modal__field {
	margin-bottom: 16px;
}

.glee-envios .glee-envios-modal__label {
	display: block;
	margin-bottom: 6px;
	font-weight: 700;
	font-size: 14px;
	line-height: 1.6;
	color: var(--glee-ink);
}

.glee-envios .glee-envios-modal__hint,
.glee-envios .glee-envios-modal__status {
	margin-top: 6px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--glee-ink-muted);
}

.glee-envios .glee-envios-modal__status--error {
	color: var(--glee-ink);
	font-weight: 700;
}

.glee-envios .glee-envios-modal__aside {
	margin-top: 12px;
	text-align: center;
}

/* El enlace de WhatsApp de la ventana mide 14 px y tiene 12 px de relleno para el dedo, como en el diseño. */
.glee-envios .glee-envios-modal__aside .glee-envios-link {
	display: inline-block;
	padding: 12px 8px;
	font-size: 14px;
}

/* Campo con ícono: el borde pasa a 2 px violeta con foco (el relleno baja 1 px para que no salte). */
.glee-envios .glee-envios-field {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	height: var(--glee-control-height);
	padding: 0 12px;
	background: var(--glee-background);
	border: 1px solid var(--glee-ink-muted);
	border-radius: 0;
	box-shadow: none;
	color: var(--glee-ink);
	font-size: 16px;
	text-align: left;
}

.glee-envios .glee-envios-field:focus-within {
	padding: 0 11px;
	border-width: 2px;
	border-color: var(--glee-primary);
}

.glee-envios .glee-envios-field__icon {
	display: inline-flex;
	color: var(--glee-ink-muted);
}

.glee-envios .glee-envios-field__input {
	flex: 1;
	min-width: 0;
	height: 100%;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	outline: none;
	color: var(--glee-ink);
	font-family: var(--glee-font-body);
	font-size: 16px;
}

.glee-envios .glee-envios-field__input::placeholder {
	color: var(--glee-ink-muted);
	opacity: 1;
}

.glee-envios .glee-envios-field__value {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.glee-envios .glee-envios-field--button {
	cursor: pointer;
}

/* Selector y campo de texto sueltos (respaldo manual). */
.glee-envios .glee-envios-select,
.glee-envios .glee-envios-input {
	display: block;
	width: 100%;
	height: var(--glee-control-height);
	margin: 0;
	padding: 0 12px;
	background-color: var(--glee-background);
	border: 1px solid var(--glee-ink-muted);
	border-radius: 0;
	box-shadow: none;
	color: var(--glee-ink);
	font-family: var(--glee-font-body);
	font-size: 16px;
}

.glee-envios .glee-envios-select:disabled {
	background-color: var(--glee-surface);
	color: var(--glee-ink-muted);
}

.glee-envios .glee-envios-input[aria-invalid="true"] {
	border-color: var(--glee-error);
	border-width: 2px;
	padding: 0 11px;
}

/* Sugerencias de Google. */
.glee-envios .glee-envios-suggestions {
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
	background: var(--glee-background);
	border: 1px solid var(--glee-ink-muted);
}

.glee-envios .glee-envios-suggestions li {
	margin: 0;
}

.glee-envios .glee-envios-suggestion {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 56px;
	padding: 6px 12px;
	border-top: 1px solid var(--glee-line);
	cursor: pointer;
}

.glee-envios .glee-envios-suggestion[aria-selected="true"],
.glee-envios .glee-envios-suggestion:hover {
	background: var(--glee-primary-soft);
}

.glee-envios .glee-envios-suggestion__icon {
	display: inline-flex;
	color: var(--glee-primary);
}

.glee-envios .glee-envios-suggestion__main {
	display: block;
	font-weight: 700;
	line-height: 1.3;
}

.glee-envios .glee-envios-suggestion__secondary {
	display: block;
	font-size: 13px;
	line-height: 1.3;
	color: var(--glee-ink-muted);
}

.glee-envios .glee-envios-suggestions__attribution {
	padding: 6px 12px;
	border-top: 1px solid var(--glee-line);
	font-size: 12px;
	line-height: 1.4;
	color: var(--glee-ink-muted);
	text-align: right;
}

/* Sucursales de retiro (lista dentro de la misma ventana). */
.glee-envios .glee-envios-branches {
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
	border: 1px solid var(--glee-ink-muted);
}

.glee-envios .glee-envios-branch {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 12px;
	border-top: 1px solid var(--glee-line);
}

.glee-envios .glee-envios-branch:first-child {
	border-top: 0;
}

.glee-envios .glee-envios-branch__name {
	font-weight: 700;
	line-height: 1.3;
}

.glee-envios .glee-envios-branch__detail {
	font-size: 14px;
	line-height: 1.4;
	color: var(--glee-ink-muted);
}

/* Alertas: borde de 2 px e ícono en el color del estado; el texto, en la tinta. */
.glee-envios .glee-envios-alert {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 16px;
	padding: 12px 16px;
	border: 2px solid var(--glee-info);
}

.glee-envios .glee-envios-alert__icon {
	display: inline-flex;
	padding-top: 2px;
}

.glee-envios .glee-envios-alert--success {
	border-color: var(--glee-success);
}

.glee-envios .glee-envios-alert--success .glee-envios-alert__icon {
	color: var(--glee-success);
}

.glee-envios .glee-envios-alert--warning {
	border-color: var(--glee-warning);
}

.glee-envios .glee-envios-alert--warning .glee-envios-alert__icon {
	color: var(--glee-warning);
}

.glee-envios .glee-envios-alert--info .glee-envios-alert__icon {
	color: var(--glee-info);
}

.glee-envios .glee-envios-alert__title {
	font-weight: 700;
	line-height: 1.4;
	color: var(--glee-ink);
}

.glee-envios .glee-envios-alert__text {
	font-size: 14px;
	line-height: 1.4;
	color: var(--glee-ink);
}

/* Botones: 48 px, uno solo primario por vista. */
.glee-envios .glee-envios-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: var(--glee-control-height);
	min-height: 0;
	padding: 0 16px;
	border: 1px solid transparent;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
}

.glee-envios .glee-envios-button--primary {
	background: var(--glee-primary);
	border-color: var(--glee-primary);
	color: var(--glee-on-primary);
}

.glee-envios .glee-envios-button--secondary {
	margin-top: 12px;
	background: var(--glee-background);
	border-color: var(--glee-primary);
	color: var(--glee-primary);
}

.glee-envios .glee-envios-button:disabled {
	background: var(--glee-surface);
	border-color: var(--glee-line);
	color: var(--glee-ink-muted);
	cursor: not-allowed;
}

/* Un botón violeta con foco necesita el anillo separado para verse sobre el violeta. */
.glee-envios .glee-envios-button--primary:focus-visible {
	outline-offset: 3px;
}

.glee-envios .glee-envios-result > .glee-envios-button + .glee-envios-button {
	margin-top: 12px;
}

/* Debe ir al final: gana por orden contra los `display` de arriba, que tienen la misma especificidad. */
.glee-envios [hidden] {
	display: none;
}

@media (prefers-reduced-motion: no-preference) {
	.glee-envios .glee-envios-selector__button,
	.glee-envios .glee-envios-suggestion {
		transition: background-color var(--glee-envios-state-transition) ease;
	}

	.glee-envios .glee-envios-selector__icon,
	.glee-envios .glee-envios-selector__pin-label,
	.glee-envios .glee-envios-selector__text {
		transition: opacity var(--glee-envios-state-transition) ease;
	}
}