/**
 * Location Strip — frontend styles.
 *
 * Sits inside the header's own dark utility row (`.wb-nav-header__utility`,
 * navigation-for-woocommerce), so this stylesheet only styles what belongs
 * to the strip itself, not the row it lives in.
 */

.wb-locations-strip {
	--wb-loc-brand: #1a5fe0;
	--wb-loc-border: #e4e7ec;
	--wb-loc-muted: #6b7280;
	--wb-loc-faint: #8a909b;

	position: relative;
	display: inline-flex;
	min-width: 0;
	align-items: center;
	gap: 13px;
	color: #fff;
}

/*
 * One rule for every element this block hides with the `hidden` attribute.
 *
 * A class setting `display` ties with the user-agent `[hidden]` rule on
 * specificity, and an author rule wins that tie regardless of origin — so
 * anything given a `display` here stays visible under `hidden` without an
 * explicit override. Two classes beat every single-class rule in this file,
 * which is what lets one rule replace the nine near-identical ones that had
 * accumulated, each restating the same reasoning.
 */
.wb-locations-strip [hidden],
.wb-locations-strip[hidden] {
	display: none;
}

.wb-locations-strip strong {
	font-weight: 700;
	color: #fff;
}

/* ------------------------------------------------------ Order type */

/*
 * A 999px capsule holding two radio options. 30px tall on desktop: 3px of
 * capsule padding around a 24px option (3px 11px around an 11.5px label).
 * The selected option is pure white — it must read as selected on a phone
 * in daylight — and the idle one is #b0b7bf on the strip's own ground.
 */
.wb-locations-strip__toggle {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	padding: 3px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.06);
}

.wb-locations-strip__option {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 11px;
	border-radius: 999px;
	color: #b0b7bf;
	font-size: 11.5px;
	font-weight: 600;
	line-height: 16px;
	white-space: nowrap;
	cursor: pointer;
	transition:
		background-color 120ms ease,
		color 120ms ease;
}

.wb-locations-strip__option:hover {
	color: #fff;
}

/*
 * The input stays in the document — it is what carries the radio
 * semantics and the focus — but takes up no room. Clipped, not
 * display:none, because a hidden radio is not focusable.
 */
.wb-locations-strip__option-input {
	position: absolute;
	overflow: hidden;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	border: 0;
	clip-path: inset(50%);
	white-space: nowrap;
	opacity: 0;
}

.wb-locations-strip__option:has(.wb-locations-strip__option-input:checked) {
	background: #fff;
	color: #16181d;
	font-weight: 700;
}

.wb-locations-strip__option:has(.wb-locations-strip__option-input:disabled) {
	opacity: 0.4;
	cursor: not-allowed;
}

.wb-locations-strip__option:has(
		.wb-locations-strip__option-input:focus-visible
	) {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.wb-locations-strip__option-icon {
	display: flex;
	flex: 0 0 auto;
}

.wb-locations-strip__option-icon svg {
	width: 12px;
	height: 12px;
}

/* --------------------------------------------------------- Readout */

/*
 * The consequence of the choice, in plain words. The live region is a
 * flex row of its own so the clusters inside it line up with the toggle;
 * `min-width: 0` is what lets the readout truncate at phone width instead
 * of pushing the contact controls off the bar.
 */
.wb-locations-strip__readout-region {
	display: inline-flex;
	min-width: 0;
	align-items: center;
	gap: 7px;
}

.wb-locations-strip__cluster {
	display: inline-flex;
	min-width: 0;
	align-items: center;
	gap: 7px;
}

/*
 * The value is a button because tapping it opens the panel, but it is
 * drawn as text: the Change pill beside it is the visible control.
 */
.wb-locations-strip__readout {
	display: inline-flex;
	min-width: 0;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: #fff;
	font: inherit;
	font-size: 12px;
	font-weight: 400;
	line-height: 16px;
	text-align: left;
	white-space: nowrap;
	cursor: pointer;
}

.wb-locations-strip__readout strong {
	font-weight: 700;
}

/* The preposition stays muted so the eye lands on the number. */
.wb-locations-strip__lead {
	color: #b0b7bf;
}

.wb-locations-strip__distance {
	color: #b0b7bf;
}

/*
 * Amber, never red: nothing has gone wrong. #fbcfa0 on #16181d is 9.1:1.
 * The value keeps its white so it still reads first.
 */
.wb-locations-strip__readout--notice,
.wb-locations-strip__readout--notice .wb-locations-strip__lead {
	color: #fbcfa0;
}

.wb-locations-strip__readout--notice strong {
	color: #fff;
}

.wb-locations-strip__notice-icon {
	display: flex;
	flex: 0 0 auto;
	margin-right: 2px;
}

.wb-locations-strip__notice-icon svg {
	width: 12px;
	height: 12px;
}

/*
 * A translucent fill, not white: the selected order-type option is the
 * only pure-white thing on the strip, and a second white pill beside it
 * would compete with the one control the whole row is built around.
 */
.wb-locations-strip__chip {
	margin-left: 2px;
	padding: 3px 10px;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	font: inherit;
	font-size: 11px;
	font-weight: 700;
	line-height: 16px;
	white-space: nowrap;
	cursor: pointer;
}

.wb-locations-strip__chip:hover {
	background: rgba(255, 255, 255, 0.2);
}

/* ---------------------------------------------------------- Prompt */

/*
 * Nothing set: the one filled pill in the strip, because it is the one
 * thing we want tapped. Same size as the Change chip so the row's height
 * never changes between states.
 */
.wb-locations-strip__pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 12px 3px 10px;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.28);
	color: #fff;
	font: inherit;
	font-size: 11.5px;
	font-weight: 700;
	line-height: 16px;
	white-space: nowrap;
	cursor: pointer;
}

.wb-locations-strip__pill:hover {
	background: rgba(255, 255, 255, 0.38);
}

.wb-locations-strip__pill-icon {
	display: flex;
	color: #fff;
}

.wb-locations-strip__pill-icon svg {
	width: 12px;
	height: 12px;
}

.wb-locations-strip__reason {
	color: #b0b7bf;
	font-size: 12px;
	white-space: nowrap;
}

/* -------------------------------------------------------- Skeleton */

/*
 * Bars at the final widths of a readout and a Change pill, so the row is
 * the same size resolving as it is resolved.
 */
.wb-locations-strip__skeleton {
	display: inline-flex;
	align-items: center;
	gap: 9px;
}

.wb-locations-strip__skeleton-bar {
	display: inline-block;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.16);
	animation: wb-locations-strip-pulse 1.2s ease-in-out infinite;
}

.wb-locations-strip__skeleton-bar--readout {
	width: 104px;
	height: 12px;
}

.wb-locations-strip__skeleton-bar--chip {
	width: 62px;
	height: 22px;
}

@keyframes wb-locations-strip-pulse {
	50% {
		opacity: 0.55;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wb-locations-strip__skeleton-bar {
		animation: none;
	}
}

/*
 * The full copy is what desktop and tablet read; only a phone takes the
 * short form. Its own breakpoint, below the 900px layout switch, because
 * a tablet has room for the words even once the bar has gone compact.
 */
.wb-locations-strip__short {
	display: none;
}

@media (max-width: 600px) {
	.wb-locations-strip__long,
	.wb-locations-strip__reason {
		display: none;
	}

	.wb-locations-strip__short {
		display: inline;
	}

	/*
	 * Kept in the document for the keyboard — it is still the tab stop
	 * that opens the panel — but off the bar, where there is no room. A
	 * phone only: a tablet has room for it, and the Change control is the
	 * one thing the design says is always there once a value is set.
	 */
	.wb-locations-strip__chip {
		position: absolute;
		overflow: hidden;
		width: 1px;
		height: 1px;
		margin: 0;
		padding: 0;
		clip-path: inset(50%);
	}

	.wb-locations-strip__skeleton-bar--chip {
		display: none;
	}
}

/* ------------------------------------------------------------ Panel */

.wb-locations-strip__visually-hidden {
	position: absolute;
	overflow: hidden;
	width: 1px;
	height: 1px;
	padding: 0;
	border: 0;
	clip-path: inset(50%);
	white-space: nowrap;
}

/*
 * Dims the page and catches an outside click; the strip itself never dims
 * (it is what opened the panel), so this sits behind the panel but above
 * everything else on the page.
 */
.wb-locations-strip__scrim {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba(22, 24, 29, 0.4);
}

/*
 * Anchored under the strip, never a full-screen modal on desktop (contract
 * §3). Below the drawer's own 900px breakpoint this still anchors under
 * whichever copy of the strip opened it — the mobile bottom sheet is #3033.
 */
.wb-locations-strip__panel {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 100001;
	width: 560px;

	/* 560 including the border, not 562. */
	box-sizing: border-box;

	/* Never wider than the viewport it is anchored inside. */
	max-width: calc(100vw - 32px);
	margin-top: 18px;
	overflow: hidden;
	background: #fff;
	border: 1px solid #ecedf1;
	border-radius: 16px;
	box-shadow: 0 26px 60px -22px rgba(20, 30, 50, 0.45);
	color: var(--wb-loc-muted);
	font-size: 14px;
	line-height: 1.5;
}

.wb-locations-strip__panel input[type="radio"],
.wb-locations-strip__panel input[type="checkbox"] {
	accent-color: var(--wb-loc-brand);
}

.wb-locations-strip__panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 22px 20px 0 26px;
}

.wb-locations-strip__panel-title-group {
	display: flex;
	align-items: center;
	gap: 8px;
}

.wb-locations-strip__panel-title {
	color: #16181d;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.wb-locations-strip__back-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wb-loc-faint);
	cursor: pointer;
}

.wb-locations-strip__back-icon:hover {
	color: #16181d;
}

.wb-locations-strip__panel-header-right {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 12px;
}

.wb-locations-strip__step-indicator {
	color: var(--wb-loc-faint);
	font-size: 14px;
}

.wb-locations-strip__panel-intro {
	padding: 10px 26px 0;
}

.wb-locations-strip__panel-body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px 26px 22px;
}

.wb-locations-strip__field-label {
	font-weight: 700;
	font-size: 11.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wb-loc-muted);
}

/*
 * Form fields carry a sentence-case label, not the uppercase letterspaced
 * treatment the section headings use — the design reserves that for
 * headings like "Saved addresses", and a six-field form set in it reads as
 * six competing headings rather than one form.
 */
.wb-locations-strip__form-label {
	color: #3f4551;
	font-size: 13.5px;
	font-weight: 500;
}

.wb-locations-strip__field-hint {
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	color: var(--wb-loc-faint);
}

.wb-locations-strip__field-row {
	display: flex;
	gap: 14px;
}

.wb-locations-strip__field {
	position: relative;
	display: flex;
	flex: 1;
	min-width: 0;
}

/*
 * A label stacked over its own input, for the manual-entry form's
 * multi-column rows — `.wb-locations-strip__field` is a horizontal pairing
 * (an input with a clear button beside it) and would lay a label and input
 * out side by side instead of stacked.
 */
.wb-locations-strip__field-group {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 5px;
	min-width: 0;
}

/*
 * Unitless grow factors over a zero basis, so each row divides in the
 * design's proportions rather than into equal columns. See the note in
 * render.php for why they are uneven.
 */
.wb-locations-strip__field-group--unit {
	flex: 40 1 0;
}

.wb-locations-strip__field-group--street-number {
	flex: 57 1 0;
}

.wb-locations-strip__field-group--suburb {
	flex: 46 1 0;
}

.wb-locations-strip__field-group--state {
	flex: 23 1 0;
}

.wb-locations-strip__field-group--postcode {
	flex: 26 1 0;
}

.wb-locations-strip__input {
	width: 100%;
	height: 50px;
	padding: 0 42px 0 15px;
	border: 1.5px solid var(--wb-loc-border);
	border-radius: 10px;
	color: #16181d;
	font: inherit;
	font-size: 15px;
	box-sizing: border-box;
}

.wb-locations-strip__input:focus {
	border-color: var(--wb-loc-brand);
	outline: none;
	box-shadow: 0 0 0 3px rgba(26, 95, 224, 0.14);
}

.wb-locations-strip__clear {
	position: absolute;
	top: 50%;
	right: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #eef2f7;
	color: var(--wb-loc-muted);
	transform: translateY(-50%);
	cursor: pointer;
}

.wb-locations-strip__clear:hover {
	background: #e4e9f0;
}

.wb-locations-strip__use-location {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 8px;
	height: 50px;
	padding: 0 18px;
	border: 1.5px solid var(--wb-loc-border);
	border-radius: 10px;
	background: #fff;
	color: #16181d;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
}

.wb-locations-strip__use-location:hover {
	border-color: #c7cdd6;
}

.wb-locations-strip__use-location[disabled] {
	opacity: 0.7;
	cursor: default;
}

.wb-locations-strip__use-location-icon {
	display: flex;
	color: var(--wb-loc-brand);
}

.wb-locations-strip__error {
	margin: 0;
	color: #c0362c;
	font-size: 12.5px;
}

/*
 * What committing this address would change, sitting with the commit
 * buttons rather than up with the fields — it is a consequence of the
 * action, not a property of any one field.
 */
.wb-locations-strip__consequence {
	margin: 0;
	color: var(--wb-loc-muted);
	font-size: 13.5px;
	line-height: 1.5;
}

/* The fact that actually moves, per the design. */
.wb-locations-strip__consequence strong {
	color: #16181d;
	font-weight: 700;
}

.wb-locations-strip__confirmation {
	margin: 0;
	padding: 8px 10px;
	background: #edf6ee;
	border-radius: 8px;
	color: #1a7f3c;
	font-size: 12.5px;
	font-weight: 600;
}

.wb-locations-strip__section {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-top: 12px;
	border-top: 1px solid #eef0f3;
}

.wb-locations-strip__section-title {
	font-weight: 800;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wb-loc-muted);
}

.wb-locations-strip__section-heading {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
}

.wb-locations-strip__stores-count {
	color: var(--wb-loc-faint);
	font-size: 11.5px;
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
}

.wb-locations-strip__section-body {
	margin: 0;
	color: #16181d;
	font-size: 15px;
	font-weight: 600;
}

.wb-locations-strip__section-body--muted {
	color: var(--wb-loc-faint);
	font-size: 14px;
	font-weight: 400;
}

.wb-locations-strip__stores {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.wb-locations-strip__store {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border: 1px solid var(--wb-loc-border);
	border-radius: 9px;
	cursor: pointer;
}

/*
 * The address step reuses the same radio-row look for its saved list, but
 * those rows sit on the tinted tray, so they carry their own white ground
 * and a little more room than the store list's single-line rows need.
 */
.wb-locations-strip__saved-item .wb-locations-strip__store {
	flex: 1;
	padding: 13px 15px;
	border-radius: 12px;
	background: #fff;
}

.wb-locations-strip__store:has(input:checked) {
	border-color: var(--wb-loc-brand);
	box-shadow: inset 0 0 0 0.5px var(--wb-loc-brand);
}

.wb-locations-strip__store-name {
	flex: 1;
	color: #16181d;
	font-size: 13px;
	font-weight: 600;
}

.wb-locations-strip__store-distance {
	color: var(--wb-loc-faint);
	font-size: 11.5px;
	font-weight: 400;
}

.wb-locations-strip__save {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	margin-top: 4px;
	padding: 0 26px;
	border: 0;
	border-radius: 10px;
	background: var(--wb-loc-brand);
	color: #fff;
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}

.wb-locations-strip__save:hover {
	background: #1550c9;
}

.wb-locations-strip__save[disabled] {
	opacity: 0.7;
	cursor: default;
}

/* ------------------------------------------------------------ Steps */

/*
 * The postcode, change-address and manual-entry steps share one panel body;
 * each is its own flex column so its internal spacing doesn't depend on the
 * body's own gap being right for all three at once.
 */
.wb-locations-strip__step {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.wb-locations-strip__link {
	align-self: flex-start;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wb-loc-brand);
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
}

.wb-locations-strip__link:hover {
	text-decoration: underline;
}

.wb-locations-strip__section-action {
	padding: 0;
	border: 0;
	background: none;
	color: var(--wb-loc-brand);
	font: inherit;
	font-size: 11.5px;
	font-weight: 700;
	cursor: pointer;
}

.wb-locations-strip__section-action:hover {
	text-decoration: underline;
}

/*
 * The tinted half of a step, bled out past the body's padding to the
 * card's own edges. Both steps end on one: the address step's saved list,
 * the manual step's save-and-commit block.
 */
.wb-locations-strip__tray {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 6px -26px -22px;
	padding: 18px 26px 20px;
	border-top: 1px solid #ecedf1;
	background: #f8f9fb;
}

/* A link and a button pinned to opposite ends of the tray's last row. */
.wb-locations-strip__step-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 2px;
}

.wb-locations-strip__save--auto {
	flex: 0 0 auto;
	width: auto;
}

.wb-locations-strip__suggestions {
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-height: 220px;
	overflow-y: auto;
}

.wb-locations-strip__suggestion {
	display: flex;
	align-items: flex-start;
	width: 100%;
	gap: 12px;
	padding: 13px 15px;
	border: 1.5px solid transparent;
	border-radius: 12px;
	cursor: pointer;
	box-sizing: border-box;
}

.wb-locations-strip__suggestion:hover {
	background: #f4f5f7;
}

/*
 * A tinted ground as well as a brand border — the picked suggestion is the
 * thing the primary button will act on, so it reads as filled rather than
 * merely outlined.
 */
.wb-locations-strip__suggestion:has(input:checked) {
	border-color: var(--wb-loc-brand);
	background: #f4f7ff;
}

.wb-locations-strip__suggestion-icon {
	display: flex;
	flex: 0 0 auto;
	margin-top: 2px;
	color: var(--wb-loc-faint);
}

.wb-locations-strip__suggestion-body {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.wb-locations-strip__suggestion-label {
	color: #16181d;
	font-size: 15px;
	font-weight: 600;
}

.wb-locations-strip__suggestion-consequence {
	color: var(--wb-loc-faint);
	font-size: 13px;
}

.wb-locations-strip__cant-find {
	display: flex;
	align-self: flex-start;
	align-items: center;
	gap: 6px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wb-loc-muted);
	font: inherit;
	font-size: 14px;
	cursor: pointer;
}

.wb-locations-strip__cant-find .wb-locations-strip__link-text {
	color: var(--wb-loc-brand);
	font-weight: 700;
}

.wb-locations-strip__cant-find:hover .wb-locations-strip__link-text {
	text-decoration: underline;
}

.wb-locations-strip__saved {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.wb-locations-strip__saved-item {
	display: flex;
	align-items: center;
	gap: 8px;
}

.wb-locations-strip__saved-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.wb-locations-strip__saved-heading {
	display: flex;
	align-items: center;
	gap: 8px;
}

.wb-locations-strip__saved-tag {
	color: #16181d;
	font-size: 15px;
	font-weight: 600;
}

.wb-locations-strip__saved-line {
	color: var(--wb-loc-faint);
	font-size: 13px;
}

.wb-locations-strip__badge {
	padding: 2px 8px;
	border-radius: 999px;
	background: #eef1f5;
	color: var(--wb-loc-muted);
	font-size: 12px;
	font-weight: 600;
}

.wb-locations-strip__saved-remove {
	flex: 0 0 auto;
	padding: 6px 10px;
	border: 0;
	border-radius: 7px;
	background: #fdecea;
	color: #c0362c;
	font: inherit;
	font-size: 11.5px;
	font-weight: 600;
	cursor: pointer;
}

.wb-locations-strip__saved-remove:hover {
	background: #fadcd9;
}

.wb-locations-strip__textarea {
	width: 100%;
	min-height: 76px;
	padding: 12px 15px;
	border: 1.5px solid var(--wb-loc-border);
	border-radius: 10px;
	color: #16181d;
	font: inherit;
	font-size: 15px;
	resize: vertical;
	box-sizing: border-box;
}

.wb-locations-strip__textarea:focus {
	border-color: var(--wb-loc-brand);
	outline: none;
	box-shadow: 0 0 0 3px rgba(26, 95, 224, 0.14);
}

.wb-locations-strip__checkbox-row {
	display: flex;
	align-items: center;
	gap: 10px;
	color: #3f4551;
	font-size: 14px;
}

/*
 * Cancel/Use-this-address sit in a row together on the manual step, unlike
 * every other use of .wb-locations-strip__save, which is a lone child of a
 * column flex container and gets its full width from that container's
 * default cross-axis stretch. In a row the main axis is horizontal, so
 * without this the button would size to its own label instead of sharing
 * the row with Cancel.
 */
.wb-locations-strip__field-row > .wb-locations-strip__save {
	flex: 1;
}

/*
 * Below the drawer's own breakpoint the panel switches from anchored to
 * fixed. Two reasons: the drawer this strip's pinned copy lives in clips
 * an absolutely-positioned child with its own `overflow: hidden`, and an
 * anchored popover under a strip this narrow would mostly hang off the
 * screen anyway. A centred fixed sheet is an interim stand-in for the
 * contract's proper mobile bottom sheet (#3033).
 */
@media (max-width: 900px) {
	/*
	 * Same anatomy, same order, on a 40px band: a 26px capsule (2px of
	 * padding and a 1px border around a 20px option), labels kept —
	 * icon-only is not legible enough for the most consequential control
	 * on the page — and the readout the only thing that truncates. The
	 * Change pill goes;
	 * tapping the readout opens the panel instead.
	 */
	.wb-locations-strip {
		gap: 9px;
	}

	/*
	 * The row is 362px of usable width at 390 and the toggle is the
	 * largest thing on it, so the option padding is where the space for
	 * the readout comes from. The backstop below keeps the readout
	 * clipping rather than pushing the contact controls off the bar if a
	 * future label runs longer than these.
	 */
	.wb-locations-strip__readout-region {
		min-width: 0;
		overflow: hidden;
	}

	.wb-locations-strip__toggle {
		flex: 0 0 auto;
		padding: 2px;
	}

	.wb-locations-strip__option {
		gap: 4px;
		padding: 3px 6px;
		font-size: 10.5px;
		line-height: 14px;
	}

	/*
	 * A 44px hit area, padded beyond the visual capsule without moving
	 * it: the label is the target, so it grows through a pseudo-element
	 * rather than through padding the capsule would have to show.
	 */
	.wb-locations-strip__option::before {
		position: absolute;
		inset: -12px 0;
		content: "";
	}

	.wb-locations-strip__option-icon svg {
		width: 11px;
		height: 11px;
	}

	.wb-locations-strip__readout {
		display: block;
		overflow: hidden;
		font-size: 11px;
		text-overflow: ellipsis;
	}

	.wb-locations-strip__readout--notice {
		display: block;
	}

	.wb-locations-strip__notice-icon {
		display: inline-flex;
		vertical-align: -2px;
	}

	.wb-locations-strip__notice-icon svg {
		width: 11px;
		height: 11px;
	}

	.wb-locations-strip__pill {
		padding: 2px 8px;
		font-size: 10.5px;
		line-height: 14px;
	}

	.wb-locations-strip__pill-icon {
		display: none;
	}

	.wb-locations-strip__skeleton-bar--readout {
		width: 88px;
	}

	.wb-locations-strip__panel {
		position: fixed;
		top: auto;
		right: 16px;
		bottom: 16px;
		left: 16px;
		width: auto;
		max-height: 80vh;
		margin-top: 0;
		overflow-y: auto;
	}
}

/* ------------------------------------------------------ Focus rings */

/*
 * A white ring, because the strip sits on a near-black background where the
 * brand blue does not carry enough contrast — same treatment as the rest of
 * the header's utility row.
 */
.wb-locations-strip__pill:focus-visible,
.wb-locations-strip__chip:focus-visible,
.wb-locations-strip__readout:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.wb-locations-strip__clear:focus-visible,
.wb-locations-strip__save:focus-visible {
	outline: 2px solid var(--wb-loc-brand);
	outline-offset: 2px;
}