/**
 * 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 {
	flex: 1 1 320px;
	min-width: 240px;
}

/* The form is furniture here, not a section: no margins of its own, and the group lays out as
   the input plus a submit that only appears once something is typed. */
.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;
}

.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;
	}
}

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

.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: 44px;
	padding: 0 12px;
}

/* ---------- 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;
	}
}

.amm-finder-results :focus-visible {
	outline: 2px solid var(--amm-finder-accent);
	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;
}

/* Sized against the card, not the page. The shared button is a 48px pill built for a
   full-width layout; beside a 15px title in a 282px card it reads as the main event rather
   than the way out of it. Scoped here so buttons elsewhere keep their own proportions. */
.amm-finder-grid .amm-blog-card__button {
	align-self: flex-start;
	border-width: 1px;
	font-size: 13px;
	gap: 2px;
	margin-top: 8px;
	padding: 5px 12px;
}

.amm-finder-grid .amm-blog-card__button-icon {
	font-size: 14px;
}

/* ---------- 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;
}

/* ---------- 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: 6px;
	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;
	}
}