/*
 * Shipping destination selector (tangens-components.md; the Country panel of
 * design/artboards/mobile-menu-390.html). Rows as the artboard draws them: 17px above and below,
 * body size (16 at 390), Graphite, a Line hairline beneath; the current one Ink at 500; the currency
 * at meta size (14). Hint meta in Graphite, 18 beneath. The rows add a 16 × 12 flag, and the right
 * side carries currency and VAT treatment. The same form sits in the mobile menu's Country panel
 * below 1280 and in the header's 440 panel from 1280 (assets/js/destination.js).
 */

.destination {
	margin: 0;
}

.destination__hint {
	margin: 0;
	padding-block-end: 1.125rem;
	color: var(--graphite);
	font-size: var(--fs-meta);
	line-height: 1.5;
}

/* The search field, as the checkout's fields: 48 tall, Stone hairline, the radius, 16px text. */
.destination__search {
	display: block;
	width: 100%;
	height: 3rem;
	padding-inline: 0.875rem;
	border: var(--hairline) solid var(--stone);
	border-radius: var(--radius);
	background: var(--canvas);
	color: var(--ink);
	font-size: 1rem;
	appearance: none;
}

.destination__search::placeholder {
	color: var(--stone);
	opacity: 1;
}

.destination__search:focus-visible {
	border-color: var(--ink);
	outline: 2px solid var(--ink);
	outline-offset: 0;
}

.destination__search[hidden] {
	display: none;
}

/* Group labels: the back row's eyebrow (13, 500, label tracking, Graphite). */
.destination__label {
	margin: 0;
	padding-block: 1.5rem 0.25rem;
	color: var(--graphite);
	font-size: var(--fs-eyebrow);
	font-weight: 500;
	letter-spacing: var(--tracking-label);
	line-height: normal;
	text-transform: uppercase;
}

.destination__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.destination__row {
	display: flex;
	gap: var(--space-1);
	align-items: center;
	width: 100%;
	padding: 1.0625rem 0;
	border: 0;
	border-bottom: var(--hairline) solid var(--line);
	background: none;
	color: var(--graphite);
	font-size: var(--fs-body);
	line-height: normal;
	text-align: start;
	cursor: pointer;
}

.destination__row:hover {
	color: var(--ink);
}

.destination__row.is-current {
	color: var(--ink);
	font-weight: 500;
}

.destination__flag {
	flex: 0 0 auto;
	width: 1rem;
	height: 0.75rem;
	border-radius: calc(var(--radius) / 3);
	outline: var(--hairline) solid var(--line);
	outline-offset: calc(var(--hairline) * -1);
}

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

.destination__meta {
	flex: 0 0 auto;
	font-size: var(--fs-meta);
	white-space: nowrap;
}

.destination__empty {
	margin: 0;
	padding-block: 1.0625rem;
	color: var(--graphite);
	font-size: var(--fs-meta);
}

.destination[aria-busy="true"] {
	opacity: 0.5;
	pointer-events: none;
}

/* The header's panel (from 1280): 440 wide under the trigger, aligned to the padded edge,
   a contained Canvas surface with a Line hairline and the radius; the list scrolls inside it. */
.site-header__destination {
	position: absolute;
	top: 100%;
	right: var(--container-pad);
	z-index: 1;
	width: 27.5rem;
	/* The panel ends a gutter above the viewport's bottom edge, measured from where it starts (under
	   the announcement bar and admin bar at the top of the page): destination.js sets the variable;
	   the calc is the fallback. */
	max-height: var(--destination-max, calc(100dvh - var(--header-h) - var(--space-3)));
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--space-3) 2rem 1rem;
	border: var(--hairline) solid var(--line);
	border-radius: var(--radius);
	background: var(--canvas);
	color: var(--ink);
}

.site-header__destination[hidden] {
	display: none;
}

/* The search stays at the top while the list scrolls beneath it; the Canvas ring hides the rows
   passing behind it. */
.site-header__destination .destination__search {
	position: sticky;
	/* Sticky offsets count from inside the panel's top padding: this stops the field 16 below the edge. */
	top: calc(1rem - var(--space-3));
	z-index: 1;
	box-shadow: 0 0 0 1rem var(--canvas);
}