/* Locations index (3.0). Direction A's chrome and tokens, Option A's shared
   location pieces (l-btn, l-pill, l-h2, l-circle-arrow, --l-wrap, --l-tear)
   from location.css; everything here is lx- prefixed and scoped to
   body.acs-locations. No map in this option. Phones first (built at 360);
   desktop from 1024 (built at 1440). */

body.acs-locations,
body.acs-lx-cards {
	--lx-card-shadow: 0 12px 28px rgba(0, 0, 0, 0.06);
}

body.acs-locations .lx-hero *,
body.acs-locations .lx-finder *,
body.acs-locations .lx-franchise * {
	box-sizing: border-box;
}

/* ---------- 3.0.1 Page header + 3.0.2 search ---------- */

/* A red band tucked under the logo row, torn into the paper top and bottom
   (the client's exported hero edges) */
body.acs-locations .lx-hero {
	position: relative;
	margin-top: -0.5rem;
	padding: 4.5rem var(--acs-gutter) calc(var(--l-tear) + 3rem); /* the title clears the hanging logo */
	background: var(--acs-red);
	color: var(--acs-white);
}

body.acs-locations .lx-hero::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -1px;
	height: var(--l-tear);
	background: url("../directions/a/media/masks/hero-top.png") 0 0 / 100% 100% no-repeat;
	pointer-events: none;
}

body.acs-locations .lx-hero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: var(--l-tear);
	background: url("../directions/a/media/masks/hero-bottom.png") 0 0 / 100% 100% no-repeat;
	pointer-events: none;
}

/* Centred in the band */
body.acs-locations .lx-hero__inner {
	max-width: var(--l-wrap);
	margin-inline: auto;
	text-align: center;
}

body.acs-locations .lx-hero__title {
	margin: 0;
	font-family: var(--acs-font-display);
	text-transform: uppercase;
	font-weight: 400;
	font-size: clamp(2.5rem, 1.05rem + 6.2vw, 4.375rem); /* the home hero headline's size and leading */
	line-height: 1.08;
	color: var(--acs-white);
	text-wrap: balance;
}

body.acs-locations .lx-hero__intro {
	margin: 0.875rem 0 0;
	max-width: 36rem;
	margin-inline: auto;
	font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem);
	line-height: 1.5;
}

body.acs-locations .lx-search {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	max-width: 40rem;
	margin: 0 auto;
	text-align: left;
	padding: 0.25rem;
	border-radius: var(--acs-radius);
	background: var(--acs-white);
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.2);
}

body.acs-locations .lx-search__field {
	display: flex;
	flex: 1;
	align-items: center;
	gap: 0.5rem;
	min-width: 0;
	padding-left: 0.875rem;
	color: var(--acs-red);
}

body.acs-locations .lx-search__field svg {
	flex-shrink: 0;
}

body.acs-locations .lx-search input {
	flex: 1;
	min-width: 0;
	height: 2.375rem;
	border: 0;
	background: none;
	color: var(--acs-ink);
	font: inherit;
	font-size: 1rem;
	outline: none;
}

body.acs-locations .lx-search input::placeholder {
	color: var(--acs-ink-soft);
}

/* The field's focus shows on the whole pill */
body.acs-locations .lx-search:focus-within {
	outline: 3px solid var(--acs-yellow);
	outline-offset: 2px;
}

body.acs-locations .lx-search__submit {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	height: 2.375rem;
	padding: 0 0.75rem;
	border: 0;
	border-radius: calc(var(--acs-radius) - 0.125rem);
	background: var(--acs-yellow);
	color: var(--acs-ink);
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

body.acs-locations .lx-search__submit:hover {
	background: var(--acs-ink);
	color: var(--acs-white);
}

/* Until something is typed the button rests, greyed (locations.js) */
body.acs-locations .lx-search__submit:disabled,
body.acs-locations .lx-search__submit:disabled:hover {
	background: var(--acs-chip-bg);
	color: var(--acs-ink-soft);
	cursor: not-allowed;
}

/* Phones: the button is the arrow alone */
body.acs-locations .lx-search__submit span {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

/* The slot holds the bar's place; once the band scrolls away the bar pins
   under the header as a white strip. */
body.acs-locations .lx-search-slot {
	min-height: 3rem;
	margin-top: 1.5rem;
}

body.acs-locations .lx-search-bar.is-stuck {
	position: fixed;
	top: var(--acs-sticky-h); /* locations.js sets the exact offset */
	left: 0;
	right: 0;
	z-index: 45;
	padding: 0.5rem var(--acs-gutter);
	background: var(--acs-white);
	animation: lx-drop 0.25s ease;
}

body.acs-locations .lx-search-bar.is-stuck .lx-search {
	box-shadow: inset 0 0 0 1px var(--acs-line);
}

@keyframes lx-drop {
	from {
		transform: translateY(-100%);
	}
}

@media (prefers-reduced-motion: reduce) {
	body.acs-locations .lx-search-bar.is-stuck {
		animation: none;
	}
}

body.acs-locations .lx-geo {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 1rem;
	padding: 0.25rem 0;
	border: 0;
	background: none;
	color: var(--acs-white);
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 0.25em;
	cursor: pointer;
}

body.acs-locations .lx-geo[hidden] {
	display: none;
}

body.acs-locations .lx-geo:hover {
	color: var(--acs-yellow);
}

/* ---------- 3.0.4 grid + 3.0.5 coming soon ---------- */

body.acs-locations .lx-finder {
	display: grid;
	gap: 2rem;
	width: min(var(--l-wrap), 100% - 2 * var(--acs-gutter));
	margin: 2.5rem auto 0;
}

body.acs-locations .lx-finder__status {
	margin: 0 0 1.25rem;
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--acs-ink-soft);
}

body.acs-locations .lx-finder__status:empty {
	display: none;
}

body.acs-locations .lx-finder__empty {
	margin: 0 0 2rem;
	padding: 1.5rem;
	border: 1px dashed var(--acs-ctrl-line);
	border-radius: 0.75rem;
	text-align: center;
}

body.acs-locations .lx-group {
	margin-bottom: 3rem;
}

body.acs-locations .lx-group[hidden],
body.acs-lx-cards .lx-card[hidden],
body.acs-locations .lx-finder__empty[hidden] {
	display: none;
}

body.acs-locations .lx-group__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1rem;
	margin: 0 0 1.25rem;
	font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
}

/* State heading as an accordion: the whole row is the button, the chevron
   sits at the right end and turns when the group is open. */
body.acs-locations .lx-group__toggle {
	display: flex;
	flex: 1;
	align-items: center;
	gap: 0.75rem;
	padding: 1.25rem 0; /* 20px above and below the rule */
	border: 0;
	border-bottom: 1px solid var(--acs-line);
	background: none;
	color: var(--acs-ink);
	font: inherit;
	text-transform: uppercase; /* buttons reset case; every display heading is uppercase */
	text-align: left;
	cursor: pointer;
}

body.acs-locations .lx-group__toggle .l-pill {
	font-family: var(--acs-font-body);
}

body.acs-locations .lx-group__chev {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2.5rem;
	height: 2.5rem;
	margin-left: auto;
	border-radius: 50%;
	background: var(--acs-white);
	box-shadow: inset 0 0 0 1px var(--acs-line);
	color: var(--acs-red);
	transition: transform 0.25s ease, background-color 0.15s ease;
}

body.acs-locations .lx-group__toggle:hover .lx-group__chev {
	background: var(--acs-hover);
}

body.acs-locations .lx-group__toggle[aria-expanded="true"] .lx-group__chev {
	transform: rotate(180deg);
}

body.acs-locations .lx-grid[hidden] {
	display: none;
}

/* Folded groups sit closer together, a list of states */
body.acs-locations .lx-group.is-folded {
	margin-bottom: 0;
}

body.acs-locations .lx-group.is-folded .lx-group__head {
	margin-bottom: 0;
}

body.acs-locations .lx-clear {
	margin-left: auto;
	padding: 0;
	border: 0;
	background: none;
	color: var(--acs-ink);
	font: inherit;
	font-size: 0.875rem;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
}

body.acs-locations .lx-grid {
	display: grid;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Card */
body.acs-lx-cards .lx-card {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.25rem 1.25rem 1rem;
	border: 1px solid var(--acs-line);
	border-radius: 0.75rem;
	background: var(--acs-white);
	box-shadow: var(--lx-card-shadow);
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Storefront photo (from the current site) across the top of the card,
   bleeding to its edges; it zooms a touch on hover */
body.acs-lx-cards .lx-card__media {
	display: block;
	margin: -1.25rem -1.25rem 0.5rem;
	overflow: hidden;
	border-radius: calc(0.75rem - 1px) calc(0.75rem - 1px) 0 0;
	aspect-ratio: 16 / 10;
	background: var(--acs-hover);
}

body.acs-lx-cards .lx-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

body.acs-lx-cards .lx-card:hover .lx-card__media img {
	transform: scale(1.04);
}

body.acs-lx-cards .lx-card--soon .lx-card__media {
	margin: calc(-1.25rem - 1px) calc(-1.25rem - 1px) 0.5rem;
}

body.acs-lx-cards .lx-card__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.75rem;
}

body.acs-lx-cards .lx-card__name {
	margin: 0;
	font-family: var(--acs-font-display);
	text-transform: uppercase;
	font-weight: 400;
	font-size: 1.375rem;
	line-height: 1.1;
}

body.acs-lx-cards .lx-card__name a {
	color: var(--acs-ink);
	text-decoration: none;
}

body.acs-lx-cards .lx-card__name a:hover {
	color: var(--acs-red);
}

body.acs-lx-cards .lx-card__status {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.375rem 0.625rem;
	margin: 0;
}

body.acs-lx-cards .lx-status {
	display: inline-block;
	padding: 0.375rem 0.625rem 0.3125rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

body.acs-lx-cards .lx-status--open {
	background: var(--acs-yellow);
	color: var(--acs-ink);
}

body.acs-lx-cards .lx-status--closed {
	background: var(--acs-chip-bg);
	color: var(--acs-ink);
	box-shadow: inset 0 0 0 1px var(--acs-chip-line);
}

body.acs-lx-cards .lx-card__today {
	font-size: 0.875rem;
	color: var(--acs-ink-soft);
}

body.acs-lx-cards .lx-card__addr,
body.acs-lx-cards .lx-card__phone {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.45;
}

body.acs-lx-cards .lx-card__phone a {
	color: var(--acs-ink);
	font-weight: 700;
	text-underline-offset: 0.2em;
}

body.acs-lx-cards .lx-card__dist {
	align-self: flex-start;
	padding: 0.25rem 0.625rem;
	border-radius: 999px;
	box-shadow: inset 0 0 0 1px var(--acs-ink);
	font-size: 0.75rem;
	font-weight: 700;
}

body.acs-lx-cards .lx-card__dist[hidden] {
	display: none;
}

body.acs-lx-cards .lx-card__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-top: auto;
	padding-top: 0.875rem;
	border-top: 1px solid var(--acs-line);
}

body.acs-lx-cards .lx-card__actions .l-btn {
	justify-content: center;
	margin-top: 0;
	padding: 0.75rem 1rem 0.625rem; /* Century Gothic caps sit high in their box */
	font-size: 0.75rem;
	line-height: 1;
}

/* Where supported, trim the box to the caps and centre them exactly */
@supports (text-box: trim-both cap alphabetic) {
	body.acs-lx-cards .lx-card__actions .l-btn {
		padding: 0.6875rem 1rem;
		text-box: trim-both cap alphabetic;
	}
}

body.acs-lx-cards .lx-card__view {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-left: auto;
	color: var(--acs-ink);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
}

/* Lighter than the solid red: a grey ring, white inside, red arrow; it
   fills red with a white arrow on hover */
body.acs-lx-cards .lx-card__view .l-circle-arrow {
	width: 2rem;
	height: 2rem;
	background: var(--acs-white);
	box-shadow: inset 0 0 0 1px var(--acs-ctrl-line);
	color: var(--acs-red);
	transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

body.acs-lx-cards .lx-card__view:hover .l-circle-arrow,
body.acs-lx-cards .lx-card__view:focus-visible .l-circle-arrow {
	background: var(--acs-red);
	box-shadow: inset 0 0 0 1px var(--acs-red);
	color: var(--acs-white);
}

/* 3.0.5 Coming soon: no link, no pin, no actions; dashed on the paper */
body.acs-lx-cards .lx-card--soon {
	border: 2px dashed var(--acs-ctrl-line);
	background: transparent;
	box-shadow: none;
}

body.acs-lx-cards .lx-card--soon .lx-card__name {
	color: var(--acs-ink-soft);
}

/* ---------- 3.0.6 Franchise strip ---------- */

/* A red panel on the grid torn on all four sides: the box's pseudos tear
   top and bottom, the section's left and right. */
/* The torn edges eat about 64% of their depth into the panel, so it is
   widened by that much each side: the red's ragged edge then lines up on
   average with the state rows and cards above. */
body.acs-locations .lx-franchise {
	position: relative;
	width: calc(min(var(--l-wrap), 100% - 2 * var(--acs-gutter)) + 2 * 0.64 * var(--l-tear));
	margin: 1rem auto 0;
}

body.acs-locations .lx-franchise::before,
body.acs-locations .lx-franchise::after,
body.acs-locations .lx-franchise__box::before,
body.acs-locations .lx-franchise__box::after {
	content: "";
	position: absolute;
	z-index: 1;
	pointer-events: none;
}

body.acs-locations .lx-franchise::before,
body.acs-locations .lx-franchise::after {
	top: 0;
	bottom: 0;
	width: var(--l-tear);
	background: 0 0 / 100% 100% no-repeat;
}

body.acs-locations .lx-franchise::before {
	left: -1px;
	background-image: url("../directions/a/media/masks/offer-left.png");
}

/* The right strip ends in transparent columns: drawn past the edge */
body.acs-locations .lx-franchise::after {
	right: -4px;
	background-image: url("../directions/a/media/masks/offer-right.png");
}

body.acs-locations .lx-franchise__box::before,
body.acs-locations .lx-franchise__box::after {
	left: 0;
	right: 0;
	height: var(--l-tear);
	background: 0 0 / 100% 100% no-repeat;
}

body.acs-locations .lx-franchise__box::before {
	top: -3px; /* the strip's outer rows are transparent */
	background-image: url("../directions/a/media/masks/offer-top.png");
}

body.acs-locations .lx-franchise__box::after {
	bottom: -3px;
	background-image: url("../directions/a/media/masks/offer-bottom.png");
}

/* Phones and tablets: centred; desktop sets copy left, button right */
body.acs-locations .lx-franchise__box {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: calc(var(--l-tear) + 2.5rem) calc(var(--l-tear) + 1.25rem);
	background: var(--acs-red);
	color: var(--acs-white);
}

body.acs-locations .lx-franchise .l-h2 {
	color: var(--acs-white);
}

body.acs-locations .lx-franchise__body {
	max-width: 32rem;
	margin: 0.75rem auto 0;
	line-height: 1.6;
}

body.acs-locations .lx-franchise__cta {
	background: var(--acs-yellow);
	color: var(--acs-ink);
}

body.acs-locations .lx-franchise__cta:hover {
	background: var(--acs-white);
	color: var(--acs-ink);
}

/* Tablets and large phones: two across */
@media (min-width: 640px) {
	/* Rows share one height where cards sit side by side, so the
	   coming-soon card lines up with its neighbours */
	body.acs-locations .lx-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: 1fr;
	}
}

/* ================= Desktop (built at 1440) ================= */

@media (min-width: 1024px) {
	body.acs-locations .lx-search-slot {
		min-height: 3.125rem;
		margin-top: 1.75rem;
	}

	body.acs-locations .lx-hero {
		margin-top: 0;
		padding: 4.5rem var(--acs-gutter) calc(var(--l-tear) + 4rem);
	}

	body.acs-locations .lx-search__field {
		padding-left: 1.25rem;
	}

	body.acs-locations .lx-search input {
		height: 2.625rem;
		font-size: 1.0625rem;
	}

	body.acs-locations .lx-search__submit {
		height: 2.625rem;
		padding: 0 1.25rem;
	}

	body.acs-locations .lx-search__submit span {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip-path: none;
	}

	body.acs-locations .lx-finder {
		margin-top: 4rem;
	}

	body.acs-locations .lx-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1.25rem;
	}

	body.acs-locations .lx-franchise {
		margin-top: 2rem;
	}

	body.acs-locations .lx-franchise__box {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 2rem;
		text-align: left;
		padding: calc(var(--l-tear) + 3.5rem) calc(var(--l-tear) + 3rem);
	}

	body.acs-locations .lx-franchise__cta {
		flex-shrink: 0;
		margin-top: 0;
	}

	body.acs-locations .lx-franchise__body {
		margin-left: 0;
	}
}

/* Phones: the one-line address a touch smaller so most fit across the
   card (Mesa, Alma School Rd does at 360); the longest still wrap rather
   than clip */
@media (max-width: 639.98px) {
	body.acs-lx-cards .lx-card__addr {
		font-size: 0.875rem;
	}
}

/* ---------- Buttons: text centred on the container (style guide) ----------
   As every button: line height font size + 8px, text nudged down by the cap
   offset. The card buttons stay 34px (7px padding each side on a 20px line,
   replacing the text-box trim, which does not apply to a flex button); the
   search button keeps its fixed height and its arrow stays centred. */
body.acs-lx-cards .lx-card__actions .l-btn {
	line-height: calc(1em + 8px);
	padding: calc(0.4375rem + 0.125em) 1rem calc(0.4375rem - 0.125em);
	text-box: normal;
}

body.acs-locations .lx-search__submit {
	line-height: calc(1em + 8px);
	padding-top: 0.25em;
	padding-bottom: 0;
}

body.acs-locations .lx-search__submit svg {
	position: relative;
	top: -0.125em;
}

/* ---------- Locations: the style guide applied (2026-09-29) ----------
   Every text role takes the scale in assets/css/tokens.css, fluid from the
   phone value at 375 to the desktop value at 1440, as on the home page.
   Button labels, the search button, View shack, the pills and the open or
   closed badges are UI labels and keep their sizes. The search field stays
   16px at every width so phones do not zoom into it. */
body.acs-locations .lx-hero__title {
	font-size: var(--acs-h1-size);
	line-height: var(--acs-h1-lh);
}

body.acs-locations .lx-hero__intro {
	font-size: var(--acs-text-xl-size);
	line-height: var(--acs-text-xl-lh);
}

/* The page's one section heading */
body.acs-locations .lx-franchise .l-h2 {
	font-size: var(--acs-h2-size);
	line-height: var(--acs-h2-lh);
}

/* The state headings and Nearest to you: headings inside the list (h2 in
   the outline, so no level is skipped; H3 on the scale) */
body.acs-locations .l-h2.lx-group__head,
body.acs-locations .lx-group__head .l-h2 {
	font-size: var(--acs-h3-size);
	line-height: var(--acs-h3-lh);
}

/* Shack card names: H5 (designer, 2026-09-29; was H4) */
body.acs-lx-cards .lx-card__name {
	font-size: var(--acs-h5-size);
	line-height: var(--acs-h5-lh);
}

body.acs-locations .lx-franchise__body {
	font-size: var(--acs-text-lg-size);
	line-height: var(--acs-text-lg-lh);
}

body.acs-lx-cards .lx-card__addr,
body.acs-lx-cards .lx-card__phone,
body.acs-locations .lx-finder__status,
body.acs-locations .lx-finder__empty,
body.acs-locations .lx-geo {
	font-size: var(--acs-text-base-size);
	line-height: var(--acs-text-base-lh);
}

body.acs-lx-cards .lx-card__today,
body.acs-locations .lx-clear {
	font-size: var(--acs-text-sm-size);
	line-height: var(--acs-text-sm-lh);
}

body.acs-locations .lx-search input {
	font-size: 1rem;
}

/* Colours: the photo links' unseen text colour was the browser's link blue */
body.acs-lx-cards .lx-card__media {
	color: var(--acs-ink);
}

/* The list's one column never grows past the container: on phones its
   content's min-width pushed the cards 20px past the right gutter */
body.acs-locations .lx-finder {
	grid-template-columns: minmax(0, 1fr);
}

/* ---------- Hero: content centred in the red the eye sees ----------
   The torn edges cover 0.668 of --l-tear at the top and at the bottom, but
   the padding was 72px over the title and the tear plus 48 / 64px under
   Use my location, so the content sat 15 to 23px high on desktop. The same
   total padding is now split evenly around the content (the band keeps its
   height). The split leans 0.06 of the tear to the bottom and 0.4rem to the
   top, which evens out the title's ink starting under its box and Use my
   location's underline sitting above its box, at every width. */
body.acs-locations .lx-hero {
	padding-top: calc(var(--l-tear) * 0.44 + 3.95rem);
	padding-bottom: calc(var(--l-tear) * 0.56 + 3.55rem);
}

@media (min-width: 1024px) {
	body.acs-locations .lx-hero {
		padding-top: calc(var(--l-tear) * 0.44 + 4.47rem);
		padding-bottom: calc(var(--l-tear) * 0.56 + 4.03rem);
	}
}

/* ---------- Pills: the style guide's pill (l-pill) ----------
   The open / closed badges and the distance tag take l-pill's size,
   padding, tracking and cap centring; closed keeps its grey, the distance
   takes the pill's yellow (the style guide's pill is for distances). */
body.acs-lx-cards .lx-status,
body.acs-lx-cards .lx-card__dist {
	padding: 0.4375rem 0.8125rem 0.3125rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

@supports (text-box: trim-both cap alphabetic) {
	body.acs-lx-cards .lx-status,
	body.acs-lx-cards .lx-card__dist {
		padding: 0.4375rem 0.8125rem;
		text-box: trim-both cap alphabetic;
	}
}

body.acs-lx-cards .lx-card__dist {
	background: var(--acs-yellow);
	color: var(--acs-ink);
	box-shadow: none;
}

/* ---------- Text links beside an icon: text centred on the icon ----------
   As the buttons: the text moves down by Century Gothic's 0.125em cap
   offset and the icon moves back up; heights unchanged. */
body.acs-locations .lx-geo {
	padding-top: calc(0.25rem + 0.125em);
	padding-bottom: calc(0.25rem - 0.125em);
}

/* View shack has no padding to trade: it takes 0.25em on top and gives
   0.125em back above and below, so its box keeps its 32px */
body.acs-lx-cards .lx-card__view {
	padding-top: 0.25em;
	margin-block: -0.125em;
}

body.acs-lx-cards .lx-card__view .l-circle-arrow,
body.acs-locations .lx-geo svg {
	position: relative;
	top: -0.125em;
}