/**
 * Product Finder results — shared, faceted results system.
 */

.amm-finder-results {
	--amm-finder-ink: var(--amm-palette-text-primary, #18181b);
	--amm-finder-muted: var(--amm-palette-text-secondary, #52525b);
	--amm-finder-rule: var(--amm-palette-text-tertiary, #d4d4d8);
	--amm-finder-accent: var(--amm-palette-primary-1, #0e5c7a);
	--amm-finder-surface: var(--amm-palette-background, #ffffff);
	--amm-finder-sunk: var(--amm-palette-background-secondary, #f4f6f7);

	color: var(--amm-finder-ink);
	width: 100%;
}

.amm-finder-results[data-loading="1"] .amm-finder-results__body {
	opacity: 0.55;
	pointer-events: none;
}

/* ---------- head ---------- */

.amm-finder-results__head {
	align-items: center;
	border-bottom: 1px solid var(--amm-finder-rule);
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	justify-content: space-between;
	padding-bottom: 16px;
}

/* The search sits between the count and the sort and takes the room they do not. Its basis is
   large enough that it drops to its own line before it gets too narrow to type in, rather than
   squeezing the count. */
.amm-finder-results__search {
	/* One height for everything on the header row — the box, its button and the sort beside
	   them — rather than a 40px pair next to a 48px select. */
	--amm-dff-min-height: 48px;
	flex: 1 1 320px;
	min-width: 240px;
}

.amm-finder-results__search .amm-dynamic-form-submit__button {
	min-height: var(--amm-dff-min-height, 40px);
}

/* The form is furniture here, not a section: no margins of its own, and the group lays out as
   the input beside a submit that is always present — it is the only visible cue that this is a
   search box, and it sizes to its own label so the input keeps the row. */
.amm-finder-results__search .amm-dynamic-form,
.amm-finder-results__search .amm-dynamic-form__inner,
.amm-finder-results__search .amm-dynamic-form-group,
.amm-finder-results__search .amm-dynamic-form-group__inner {
	margin: 0;
	padding: 0;
	width: 100%;
}

.amm-finder-results__search .amm-dynamic-form-group__inner {
	align-items: center;
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
}

/* Input and button are one control, not two things that happen to sit near each other: no gap,
   the seam flattened on the sides that meet, and both stretched to the same height so the join
   has no step in it. Logical radii rather than left/right, so the pair reads the same under RTL
   where the button lands on the other side.
   From 768px only: below that the group lays itself out as a column (blocks/dynamic-form-group),
   and a join drawn for a row leaves two half-rounded boxes sitting one above the other. */
@media (min-width: 768px) {
	.amm-finder-results__search .amm-dynamic-form-group__inner {
		align-items: stretch;
		gap: 0;
	}

	.amm-finder-results__search .amm-dynamic-form-field__control {
		border-end-end-radius: 0;
		border-start-end-radius: 0;
	}

	.amm-finder-results__search .amm-dynamic-form-submit__button {
		border-end-start-radius: 0;
		border-start-start-radius: 0;
		height: 100%;
	}
}

.amm-finder-results__search .amm-dynamic-form-field {
	flex: 1 1 auto;
	min-width: 0;
}

.amm-finder-results__search .amm-dynamic-form-submit {
	flex: 0 0 auto;
}

@media (max-width: 782px) {
	.amm-finder-results__search {
		flex-basis: 100%;
		order: 3;
	}
}

/* Phones: the box and its button stack, each full width, rather than the button dropping below
   at its label's width and centring itself. */
@media (max-width: 767px) {
	.amm-finder-results__search .amm-dynamic-form-group__inner {
		align-items: stretch;
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 8px;
	}

	.amm-finder-results__search .amm-dynamic-form-field,
	.amm-finder-results__search .amm-dynamic-form-submit {
		width: 100%;
	}
}

.amm-finder-results__count {
	font-size: clamp(20px, 2.4vw, 26px);
	font-weight: 600;
	margin: 0;
}

/* Held off its neighbours rather than left to sit against the search button it is not part of:
   the row's own gap is the minimum between two unrelated controls, and this is the one control
   in the header that changes the order rather than the set. */
.amm-finder-results__sort {
	display: inline-flex;
	margin-inline-start: 12px;
	padding-block: 4px;
}

.amm-finder-results__sort select {
	background: var(--amm-finder-surface);
	border: 1px solid var(--amm-finder-rule);
	border-radius: 4px;
	color: inherit;
	font: inherit;
	font-size: 15px;
	min-height: 48px;
	/* Room for the native select arrow, which UAs mirror under RTL — logical properties keep
	   the reserve on the arrow's side either way. */
	padding-block: 12px;
	padding-inline: 20px 48px;
}

/* ---------- starting state ----------
   The results page before anything has been asked: the finder's entry component, then a quiet
   way into the full list for a visitor who came to browse rather than to search. */

.amm-finder-start {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding-block: 8px 24px;
}

.amm-finder-start .amm-dynamic-form {
	margin-inline: auto;
	width: 100%;
}

/* The starting state's status heading is a focus target for the in-place refresh and a cue for
   screen readers, never a visible heading. Hidden here rather than with screen-reader-text,
   which WordPress reveals as a grey skip-link box the moment it takes focus — and the refresh
   always focuses it. */
.amm-finder-start .amm-finder-start__status,
.amm-finder-start .amm-finder-start__status:focus {
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.amm-finder-start__all {
	margin: 0;
	text-align: center;
}

.amm-finder-start__all-link {
	color: var(--amm-finder-accent);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.amm-finder-start__all-link:hover {
	color: var(--amm-finder-ink);
}

/* ---------- chips ---------- */

.amm-finder-chips {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 16px 0 0;
}

.amm-finder-chip {
	align-items: center;
	background: var(--amm-finder-sunk);
	border: 1px solid var(--amm-finder-accent);
	border-radius: 999px;
	color: var(--amm-finder-accent);
	display: inline-flex;
	font-size: 14px;
	gap: 8px;
	line-height: 1;
	min-height: 36px;
	padding: 0 14px;
	text-decoration: none;
}

.amm-finder-chip:hover,
.amm-finder-chip:focus-visible {
	background: var(--amm-finder-accent);
	color: var(--amm-finder-surface);
}

.amm-finder-chip__x {
	font-size: 16px;
}

.amm-finder-chips__clear {
	color: var(--amm-finder-muted);
	font-size: 14px;
	margin-left: 4px;
	text-decoration: underline;
}

/* ---------- layout ---------- */

.amm-finder-layout {
	display: grid;
	gap: 32px;
	grid-template-columns: 232px minmax(0, 1fr);
	padding-top: 28px;
}

/* No facets to offer means no sidebar, so the results take the full width rather than sitting
   beside a reserved empty column. */
.amm-finder-layout--full {
	grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 1023px) {
	.amm-finder-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}
}

/* ---------- filters ---------- */

.amm-finder-filters__toggle {
	background: var(--amm-finder-surface);
	border: 1px solid var(--amm-finder-rule);
	border-radius: 4px;
	color: inherit;
	cursor: pointer;
	display: none;
	font: inherit;
	font-size: 15px;
	min-height: 46px;
	padding: 0 18px;
	width: 100%;
}

.amm-finder-filters__panel {
	display: flex;
	flex-direction: column;
	gap: 26px;
}

.amm-finder-facet__title {
	color: var(--amm-finder-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	margin: 0 0 10px;
	text-transform: uppercase;
}

.amm-finder-facet__list {
	display: flex;
	flex-direction: column;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Collapsed by marked row rather than by height, so the cut always lands between options and
   never mid-label. The renderer marks the overflow, since it owns the cap. */
.amm-finder-facet__list.is-collapsed > li.is-overflow {
	display: none;
}

.amm-finder-facet__more {
	background: none;
	border: 0;
	color: var(--amm-finder-accent);
	cursor: pointer;
	font-size: 13px;
	margin: 4px 0 0;
	padding: 4px 8px 4px 8px;
	text-align: left;
}

.amm-finder-facet__more:hover,
.amm-finder-facet__more:focus-visible {
	text-decoration: underline;
}

.amm-finder-pagination__gap {
	color: var(--amm-finder-muted);
	padding: 0 4px;
}

.amm-finder-facet__option {
	align-items: baseline;
	border-radius: 3px;
	color: inherit;
	display: flex;
	font-size: 15px;
	gap: 12px;
	justify-content: space-between;
	min-height: 36px;
	padding: 7px 10px 7px 8px;
	text-decoration: none;
}

.amm-finder-facet__option:hover,
.amm-finder-facet__option:focus-visible {
	background: var(--amm-finder-sunk);
}

/* Selected rows copy the theme's own list-row idiom — .products-nav-row.is-active and
   .submenu-nav-row.is-active take the background tint plus the primary colour and nothing
   else. Hover shares that tint, so the underline carries the persistent "this one is on",
   the marker the theme already uses on .products-nav-row--title.is-active. The label alone
   takes it: underlining the count too reads as one struck-through run. */
.amm-finder-facet__option.is-active {
	background: var(--amm-finder-sunk);
	color: var(--amm-finder-accent);
}

.amm-finder-facet__option.is-active .amm-finder-facet__label {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Unavailable options keep their row and say so in words: an option that vanishes as you
   use the filters is harder to reason about than one that explains itself. */
.amm-finder-facet__option--off {
	color: var(--amm-finder-muted);
	cursor: not-allowed;
	opacity: 0.65;
}

.amm-finder-facet__count {
	color: var(--amm-finder-muted);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}

/* ---------- results ---------- */

.amm-finder-note {
	background: var(--amm-finder-sunk);
	border-left: 2px solid var(--amm-finder-accent);
	color: var(--amm-finder-muted);
	font-size: 14.5px;
	margin: 0 0 20px;
	padding: 12px 16px;
}

.amm-finder-grid {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

/* The wrapper exists only to carry the product ID for click tracking; it takes itself out of
   the layout so the card remains the grid item. */
.amm-finder-grid__item {
	display: contents;
}

.amm-finder-empty {
	border: 1px solid var(--amm-finder-rule);
	border-radius: 6px;
	padding: 32px;
}

.amm-finder-empty h3 {
	font-size: 20px;
	margin: 0 0 8px;
}

.amm-finder-empty p {
	color: var(--amm-finder-muted);
	margin: 0;
	max-width: 52ch;
}

.amm-finder-empty__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	padding-top: 20px;
}

.amm-finder-empty__action {
	border: 1px solid var(--amm-finder-accent);
	border-radius: 4px;
	color: var(--amm-finder-accent);
	display: inline-flex;
	align-items: center;
	font-size: 15px;
	min-height: 46px;
	padding: 0 18px;
	text-decoration: none;
}

.amm-finder-empty__action:hover,
.amm-finder-empty__action:focus-visible {
	background: var(--amm-finder-accent);
	color: var(--amm-finder-surface);
}

/* ---------- pagination ---------- */

.amm-finder-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding-top: 32px;
}

.amm-finder-pagination__link {
	align-items: center;
	border: 1px solid var(--amm-finder-rule);
	border-radius: 3px;
	color: inherit;
	display: inline-flex;
	font-size: 15px;
	font-variant-numeric: tabular-nums;
	justify-content: center;
	min-height: 44px;
	min-width: 44px;
	padding: 0 12px;
	text-decoration: none;
}

.amm-finder-pagination__link:hover,
.amm-finder-pagination__link:focus-visible {
	border-color: var(--amm-finder-accent);
	color: var(--amm-finder-accent);
}

.amm-finder-pagination__link.is-current {
	background: var(--amm-finder-accent);
	border-color: var(--amm-finder-accent);
	color: var(--amm-finder-surface);
	font-weight: 600;
}

/* ---------- mobile: filters become a bottom sheet ---------- */

@media (max-width: 1023px) {
	.amm-finder-filters__toggle {
		display: block;
	}

	.amm-finder-filters__panel {
		background: var(--amm-finder-surface);
		border-radius: 12px 12px 0 0;
		bottom: 0;
		box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.22);
		display: none;
		left: 0;
		max-height: 85vh;
		overflow-y: auto;
		padding: 24px 20px calc(24px + env(safe-area-inset-bottom));
		position: fixed;
		right: 0;
		z-index: 60;
	}

	.amm-finder-filters__panel.is-open {
		display: flex;
	}

	.amm-finder-facet__option {
		min-height: 48px;
	}
}

.amm-finder-scrim {
	background: rgba(0, 0, 0, 0.45);
	inset: 0;
	position: fixed;
	z-index: 59;
}

@media (min-width: 1024px) {
	.amm-finder-scrim {
		display: none;
	}
}

/* Ink, not the brand accent: on this catalogue the accent is a strong red, and a red ring drawn
   around the search box while its suggestions hang below reads as an error on the belts being
   suggested rather than as "this field has focus". The ring itself stays — it is the only thing
   telling a keyboard visitor where they are. */
.amm-finder-results :focus-visible,
.amm-finder-panel--search :focus-visible {
	outline: 2px solid var(--amm-finder-ink, var(--amm-palette-text-primary, #18181b));
	outline-offset: 2px;
}

/* ---------- result cards ---------- */

/*
 * The shared blog card is built as a wide row: text beside a 320px-minimum media column.
 * In a result grid cell that layout collapses, so it is restacked here rather than
 * duplicated — one card component, two arrangements.
 */
/* Compact arrangement, matching the suggestion panel: a small square thumbnail beside the
   name and its two lines of category, rather than a tall image-on-top card. A result set is
   read by scanning down the names, and the previous 4/3 image pushed the next row off the
   fold for no gain. */
.amm-finder-grid .amm-blog-card {
	align-items: center;
	background: var(--amm-finder-surface);
	border: 1px solid var(--amm-finder-rule);
	column-gap: 14px;
	grid-template-columns: 84px minmax(0, 1fr);
	height: 100%;
	overflow: hidden;
	padding: 14px;
	row-gap: 0;
}

.amm-finder-grid .amm-blog-card-wrap {
	height: 100%;
}

.amm-finder-grid .amm-blog-card__media {
	align-self: start;
	aspect-ratio: 1;
	border-radius: 4px;
	grid-column: 1;
	grid-row: 1;
	min-height: 0;
}

.amm-finder-grid .amm-blog-card__media img {
	height: 100%;
	object-fit: contain;
	width: 100%;
}

.amm-finder-grid .amm-blog-card__content {
	align-items: flex-start;
	gap: 2px;
	grid-column: 2;
	grid-row: 1;
	padding: 0;
	/* Beside a thumbnail the text reads as a column against the image edge; centred, it
	   drifts away from the picture it belongs to and the rows stop lining up. */
	text-align: left;
}

/* The card sits under a "Products" heading already; repeating the word on every row is noise
   the compact layout cannot afford. */
.amm-finder-grid .amm-blog-card__tag {
	display: none;
}

/* The shared card renders meta in the Material Icons face for its icon usage; here the meta
   is a product category name, so it needs a readable face. */
.amm-finder-grid .amm-blog-card__meta {
	color: var(--amm-finder-muted);
	font-family: inherit;
	font-size: 14px;
	line-height: 1.4;
}

.amm-finder-grid .amm-blog-card__title {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	/* The renderer now emits the title first for the compact variant, so no visual reorder is
	   needed and the reading order matches what is on screen. */
	text-align: left;
}

.amm-finder-grid .amm-blog-card__meta,
.amm-finder-grid .amm-blog-card__intro {
	text-align: left;
}

/* Clamped rather than dropped: two lines of excerpt is context, more is a paragraph the card
   has no room for. */
.amm-finder-grid .amm-blog-card__intro {
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	color: var(--amm-finder-muted);
	display: -webkit-box;
	font-size: 13px;
	line-height: 1.4;
	margin-top: 2px;
	overflow: hidden;
}

/* The button keeps the site's own button styling — size, outline, colour and hover all come
   from the shared card button and the global button tokens, so "View Product" here matches
   every other button on the site. Only its place in the restacked card is set here: held to
   its own width rather than stretched across the column, with a little air above it. */
.amm-finder-grid .amm-blog-card__button {
	align-self: flex-start;
	margin-top: 8px;
}

/* ---------- recommendation ----------
   Only rendered when the click data actually supports one, so it is styled as a distinct,
   earned suggestion rather than another row of results. */

.amm-finder-recommended {
	background: var(--amm-finder-sunk);
	border-left: 2px solid var(--amm-finder-accent);
	margin-bottom: 24px;
	padding: 18px 18px 20px;
}

.amm-finder-recommended__title {
	color: var(--amm-finder-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	margin: 0 0 14px;
	text-transform: uppercase;
}

.amm-finder-recommended .amm-finder-grid {
	grid-template-columns: minmax(0, 320px);
}


/* ---------- Find Your Belt: the finder's two tiers ----------
   The finder is one form group presented as two boxes: an accent panel that carries the
   search, and a white card that carries the two browse routes and the submit. Both are
   amm/dynamic-form-panel blocks, so everything here is presentation — the group is still one
   submit scope, one param collection and one count.

   Every colour derives from the theme palette. This file ships to every ammweb instance, so
   a literal brand colour here would paint one brand's red onto all of them. */

.amm-finder-panel--search,
.amm-finder-panel--actions {
	--amm-finder-panel-accent: var(--amm-palette-primary-1, #0e5c7a);
	--amm-finder-panel-ink: var(--amm-palette-text-primary, #18181b);
	--amm-finder-panel-rule: var(--amm-palette-text-tertiary, #d4d4d8);
}

/* ---------- search tier ---------- */

.amm-finder-panel--search {
	/* Taller than the standard control: this is the finder's primary action, and the browse
	   routes below sit in their own tier, so nothing has to match this height. */
	--amm-dff-min-height: 56px;
}

.amm-finder-panel--search .amm-dynamic-form-field__control {
	border-color: transparent;
	font-size: 1rem;
}

/* The magnifier is a mask, not a background image, so it takes its colour from the field's
   own text colour instead of baking a hex into the SVG — the chevron on select controls has
   to carry a literal for exactly the reason this one must not. */
.amm-finder-panel--search .amm-dynamic-form-field__autocomplete::before {
	background: currentColor;
	color: var(--amm-dff-text-color, var(--amm-finder-panel-ink));
	content: "";
	height: 20px;
	left: 16px;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='11' cy='11' r='6.25' stroke='%23000' stroke-width='1.75'/%3E%3Cpath d='M15.6 15.6L20 20' stroke='%23000' stroke-width='1.75' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='11' cy='11' r='6.25' stroke='%23000' stroke-width='1.75'/%3E%3Cpath d='M15.6 15.6L20 20' stroke='%23000' stroke-width='1.75' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
	opacity: 0.5;
	pointer-events: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	z-index: 1;
}

.amm-finder-panel--search .amm-dynamic-form-field__autocomplete-input {
	padding-left: 48px;
	/* On a phone the placeholder outruns the box. Ending it with an ellipsis reads as "there is
	   more", where a hard cut mid-word ("belt ty") reads as broken. */
	text-overflow: ellipsis;
}

/* The Search button beside the box. The box takes the row and the button sizes to its label;
   both read the panel's control height, so the pair is one height before the join below. The
   submit block's own tablet rule pushes it to the end of its row (align-self, margin), which is
   right in the browse card and wrong here, where it has to meet the box. */
.amm-finder-panel--search .amm-dynamic-form-field {
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
}

.amm-finder-panel--search .amm-dynamic-form-submit {
	align-self: stretch;
	flex: 0 0 auto;
	margin-left: 0;
}

.amm-finder-panel--search .amm-dynamic-form-submit__button {
	min-height: var(--amm-dff-min-height, 40px);
}

/* One control from 768px, the same join as the results header: no gap, the seam flattened on
   the sides that meet (logical radii, so the pair mirrors under RTL) and the button stretched to
   the box's height. Below 768px they stack, each full width, so the tap target stays wide. */
@media (min-width: 768px) {
	.amm-finder-panel--search .amm-dynamic-form-panel__inner {
		align-items: stretch;
		flex-wrap: nowrap;
		gap: 0;
	}

	.amm-finder-panel--search .amm-dynamic-form-field__control {
		border-end-end-radius: 0;
		border-start-end-radius: 0;
	}

	.amm-finder-panel--search .amm-dynamic-form-submit__button {
		border-end-start-radius: 0;
		border-start-start-radius: 0;
		height: 100%;
	}
}

@media (max-width: 767px) {
	.amm-finder-panel--search .amm-dynamic-form-panel__inner {
		align-items: stretch;
		flex-direction: column;
	}

	.amm-finder-panel--search .amm-dynamic-form-field {
		width: 100%;
	}
}

/* ---------- browse tier ---------- */

/* The routes are this card's content, so they carry a touch target at every width rather
   than the compact height a field in a row of fields gets. One variable, inherited by both the
   button and the field it opens, so the pair can never disagree about the slot's height. */
.amm-finder-panel--actions {
	--amm-dff-min-height: 48px;
}

.amm-finder-panel--actions__prompt {
	color: var(--amm-finder-panel-ink);
	flex: 0 0 auto;
	font-size: 1rem;
	font-weight: 400;
	margin: 0;
}

/* The submit sits at the far end of the row, so the two browse routes stay grouped with the
   prompt that introduces them rather than drifting apart across the card. Once it appears it
   wraps onto a line of its own at the right, which is where the spec's wireframe puts it. */
.amm-finder-panel--actions .amm-dynamic-form-submit {
	margin-left: auto;
}

/* Same height as the routes beside it, from the same variable — a fixed height, not a floor:
   the button's own content box comes out taller than the slot (54px against 48px), and left as
   a minimum it made the card grow by 6px the moment the CTA appeared. */
.amm-finder-panel--actions .amm-dynamic-form-submit__button {
	height: var(--amm-dff-min-height, 40px);
	min-height: var(--amm-dff-min-height, 40px);
}

/* Opt-in on the field, so no other form's disclosure changes: here the two routes are the
   card's content and read as buttons, not as text links inside a row of fields. */
.amm-dynamic-form-field__disclosure--button {
	/* Neutral, not tinted: these two sit inside a white card as its content, and a brand-tinted
	   fill would read as a second accent competing with the search panel above. The hairline is
	   an alpha of black rather than a palette entry, because text-tertiary is a text colour and
	   on some instances it is too light to draw a border at all. */
	background: var(--amm-palette-background, #f7f9fc);
	border-color: rgba(0, 0, 0, 0.1);
	border-radius: 4px;
	color: var(--amm-palette-text-primary, #18181b);
	font-size: 0.9375rem;
	font-weight: 700;
	/* No label of its own to reserve room for: in this card the button is the content, and the
	   field it opens carries its own label inside the same slot. */
	margin-top: 0;
}

/* A revealed route takes the button's slot, so it has to read as the same size of control:
   the palette's text-tertiary is a text colour and on some instances too light to draw a
   border at all, which would leave the open field looking like plain text on the card. */
.amm-finder-panel--actions .amm-dynamic-form-field__control {
	border-color: rgba(0, 0, 0, 0.1);
}

/* The labels are hidden in this card (the placeholders carry them), so the Clear control has
   no label line to sit on and would otherwise overlap the top of the control it belongs to.
   Moved inside the control's right edge instead, with the select's chevron stepped left of it
   and the text padded so neither can collide with a long option name. */
.amm-finder-panel--actions .amm-dynamic-form-field__disclosure-clear {
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
}

.amm-finder-panel--actions .amm-dynamic-form-field__control {
	padding-right: 60px;
}

.amm-finder-panel--actions select.amm-dynamic-form-field__control {
	background-position: right 56px center;
	padding-right: 80px;
}

.amm-dynamic-form-field__disclosure--button:hover {
	border-color: var(--amm-palette-primary-1, #0e5c7a);
	color: var(--amm-palette-primary-1, #0e5c7a);
}

/* One row from 1024 up: the prompt, both routes and the CTA that appears beside them. The
   slots are sized to fit the row rather than left to wrap, and nowrap keeps the CTA on the
   line with them instead of dropping it underneath the moment it appears. */
@media (min-width: 1024px) {
	.amm-finder-panel--actions .amm-dynamic-form-panel__inner {
		flex-wrap: nowrap;
	}
}

/* Between 768 and 1023 the prompt and two 48% routes cannot share a line, and the routes
   would drop one under the other. The prompt takes its own line instead, so the two routes
   stay side by side as a pair. */
@media (min-width: 768px) and (max-width: 1023px) {
	.amm-finder-panel--actions__prompt {
		flex: 0 0 100%;
	}
}

@media (max-width: 767px) {
	/* Stacked rather than left to wrap: the prompt gets its own line and each route a full
	   width row, in the order they are read. */
	.amm-finder-panel--actions .amm-dynamic-form-panel__inner {
		align-items: stretch;
		flex-direction: column;
	}

	.amm-finder-panel--actions .amm-dynamic-form-submit {
		margin-left: 0;
	}
}