/**
 * Amiology Core — component styles v2
 *
 * Product cards, section headings, category tiles, promo blocks, and the
 * shortcode components. Every value references a token from
 * amiology-tokens.css with a literal fallback.
 */

[class^="ami-"] *,
[class^="ami-"] *::before,
[class^="ami-"] *::after {
	box-sizing: border-box;
}

.ami-shell {
	max-width: var(--ami-container, 100rem);
	margin-inline: auto;
	padding-inline: var(--ami-gutter, 1rem);
}

.ami-shell--wide {
	max-width: var(--ami-container-wide, 126rem);
}

/* ---------------------------------------------------------------------------
 * Section heading — heavy label under a thick rule.
 * The rule is the logo's block edge, reduced to a line.
 * ------------------------------------------------------------------------- */

.ami-section {
	margin-block: var(--ami-space-section, 3rem);
}

.ami-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--ami-space-md, 1rem);
	padding-block: var(--ami-space-sm, 0.75rem) var(--ami-space-md, 1rem);
	border-block-start: var(--ami-rule-width, 3px) solid var(--ami-ink, #0b0b0c);
}

.ami-section__title {
	margin: 0;
	font-family: var(--ami-font-display, sans-serif);
	font-size: var(--ami-text-2xl, 2rem);
	font-weight: var(--ami-weight-black, 900);
	letter-spacing: var(--ami-tracking-tight, -0.035em);
	line-height: var(--ami-leading-tight, 1.02);
	text-transform: uppercase;
	color: var(--ami-fg-strong, #0b0b0c);
}

.ami-section__link {
	font-size: var(--ami-text-xs, 0.8rem);
	font-weight: var(--ami-weight-bold, 700);
	letter-spacing: var(--ami-tracking-label, 0.14em);
	text-transform: uppercase;
	text-decoration: none;
	color: inherit;
	border-block-end: 2px solid var(--ami-amber, #ffb302);
	padding-block-end: 2px;
	white-space: nowrap;
}

/* [ami_products] renders its own heading. Mapped to the section-head
   treatment so a shortcode-placed grid is indistinguishable from a
   hand-built one — an orphan left behind by the v2 rewrite. */
.ami-products {
	margin-block: var(--ami-space-section, 3rem);
}

.ami-products__heading {
	margin: 0 0 var(--ami-space-md, 1rem);
	padding-block: var(--ami-space-sm, 0.75rem) var(--ami-space-md, 1rem);
	border-block-start: var(--ami-rule-width, 3px) solid var(--ami-ink, #0b0b0c);
	font-family: var(--ami-font-display, sans-serif);
	font-size: var(--ami-text-2xl, 2rem);
	font-weight: var(--ami-weight-black, 900);
	letter-spacing: var(--ami-tracking-tight, -0.035em);
	line-height: var(--ami-leading-tight, 1.02);
	text-transform: uppercase;
	color: var(--ami-fg-strong, #0b0b0c);
}

/* ---------------------------------------------------------------------------
 * Product grid
 *
 * Denser than v1 and reflows to two columns on phones rather than one.
 * A single-column product list on mobile means one product per screen and a
 * lot of scrolling — the opposite of easy browsing.
 * ------------------------------------------------------------------------- */

/* The cards are list items, so the li is the grid item. Nothing else should
   sit between the grid and the card. */
.ami-products__grid > li {
	display: flex;
	min-width: 0;
}

.ami-products__grid {
	display: grid;
	grid-template-columns: repeat(var(--ami-products-columns, 4), minmax(0, 1fr));
	gap: var(--ami-grid-gap, 0.75rem);
	/* Stated, not assumed. This is the default, but a single stray
	   align-items elsewhere silently breaks every card's bottom alignment. */
	align-items: stretch;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 1100px) {
	.ami-products__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
	.ami-products__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------------------
 * Product card
 * ------------------------------------------------------------------------- */

/* Three rules cooperate to keep the buttons on one line across a row:
 *
 *   height: 100% here            the card fills its grid area even if
 *                                something upstream stops the grid stretching
 *   flex: 1 on __link            the link absorbs the leftover space
 *   margin-block-start: auto     on __foot, pinning it to the bottom
 *
 * Any one alone is enough in ideal conditions. All three together survive a
 * stray align-items, a builder default, or a plugin's grid CSS. */
.ami-product-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--ami-bg, #fff);
	border: var(--ami-border-width, 1px) solid var(--ami-line, #e4e4e7);
	transition: border-color var(--ami-duration-fast, 120ms) var(--ami-ease, ease),
	            box-shadow var(--ami-duration-fast, 120ms) var(--ami-ease, ease);
}

.ami-product-card:hover {
	border-color: var(--ami-ink, #0b0b0c);
	box-shadow: 0 0 0 1px var(--ami-ink, #0b0b0c);
}

.ami-product-card__link {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	color: inherit;
	text-decoration: none;
}

.ami-product-card__media {
	position: relative;
	display: block;
	overflow: hidden;
	/* White, not grey. These are white-background catalogue shots, so a tinted
	   well turns object-fit:contain letterboxing into visible grey bands above
	   and below the product. On white the containment is invisible and the
	   image reads full-bleed. */
	background: var(--ami-white, #fff);
	aspect-ratio: var(--ami-card-ratio, 1 / 1);
}

.ami-product-card__image {
	/* Absolute rather than height:100% — a percentage height against an
	   aspect-ratio-derived parent height is unreliable, and when it fails the
	   image sits at natural size with dead space beneath it. */
	position: absolute;
	/* Inset from the top rather than a margin: the image is absolutely
	   positioned, so a margin would do nothing. An absolutely positioned box
	   resolves its offsets against the padding box of its containing block,
	   which is what makes this the right lever. */
	inset: var(--ami-card-image-gap, 10px) 0 0 0;
	display: block;
	width: 100%;
	height: calc(100% - var(--ami-card-image-gap, 10px));
	/* contain, not cover: cropping a catalogue shot can cut off the remote,
	   the plug or the mount — often the thing that makes the listing legible. */
	object-fit: contain;
	transition: transform var(--ami-duration-slow, 460ms) var(--ami-ease, ease);
}

.ami-product-card__link:hover .ami-product-card__image {
	transform: scale(1.04);
}

/* Badges — hard blocks, top-left, one meaning each. */
.ami-product-card__badges {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
}

.ami-badge {
	display: inline-block;
	padding: 0.35em 0.6em;
	font-family: var(--ami-font-display, sans-serif);
	font-size: var(--ami-text-2xs, 0.688rem);
	font-weight: var(--ami-weight-extra, 800);
	letter-spacing: var(--ami-tracking-label, 0.14em);
	text-transform: uppercase;
	line-height: 1.1;
	background: var(--ami-ink, #0b0b0c);
	color: var(--ami-white, #fff);
}

.ami-badge--sale { background: var(--ami-sale, #d62839); color: var(--ami-on-sale, #fff); }
.ami-badge--trust { background: var(--ami-trust, #0e6e5c); color: var(--ami-on-trust, #fff); }
.ami-badge--muted { background: var(--ami-ash, #6b6b72); color: var(--ami-white, #fff); }

.ami-product-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: var(--ami-space-xs, 0.5rem);
	padding: var(--ami-space-sm, 0.75rem);
}

.ami-product-card__title {
	flex: 1;
	font-size: var(--ami-text-sm, 0.875rem);
	font-weight: var(--ami-weight-medium, 500);
	line-height: var(--ami-leading-snug, 1.22);
	color: var(--ami-fg, #2a2a2e);
	/* Clamped to three lines, and reserving three lines whether or not the
	   title uses them. Clamping alone stops long titles overflowing but still
	   lets a two-line title pull its price up while the neighbour's sits
	   lower — prices are the thing shoppers scan across a row, so they need to
	   land on one line. Change the 3 in both places together. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(var(--ami-leading-snug, 1.22) * 3em);
}

/* Foot — price and the add-to-basket control.
   margin-block-start:auto pins it to the bottom so buttons line up across a
   row regardless of how many lines each title runs to. */
.ami-product-card__foot {
	display: flex;
	flex-direction: column;
	gap: var(--ami-space-sm, 0.75rem);
	margin-block-start: auto;
	padding: 0 var(--ami-space-sm, 0.75rem) var(--ami-space-sm, 0.75rem);
}

/* Price — the most-scanned element on the page, so it gets the most weight. */
.ami-product-card__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--ami-space-xs, 0.5rem);
	font-family: var(--ami-font-display, sans-serif) !important;
	font-size: var(--ami-text-price, 1.375rem) !important;
	font-weight: var(--ami-weight-black, 900);
	letter-spacing: var(--ami-tracking-tight, -0.035em);
	line-height: 1;
	color: var(--ami-fg-strong, #0b0b0c);
	font-variant-numeric: tabular-nums;
}

/* WooCommerce wraps a price in its own markup — .woocommerce-Price-amount,
 * <bdi>, and a span for the currency symbol — and sizes some of it. The eBay
 * cards print a plain string, which is why identical CSS produced two
 * different sizes on the two pages: the rule was never losing, the inner spans
 * were simply being sized by something else.
 *
 * inherit rather than a value, so the sale styling below still works: an
 * amount inside <del> inherits del's smaller size, not the container's. */
.ami-product-card__price .woocommerce-Price-amount,
.ami-product-card__price .amount,
.ami-product-card__price .woocommerce-Price-currencySymbol,
.ami-product-card__price bdi {
	font-size: inherit !important;
	font-family: inherit !important;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
}

.ami-product-card__price del {
	font-size: var(--ami-text-sm, 0.875rem) !important;
	font-weight: var(--ami-weight-medium, 500);
	letter-spacing: 0;
	color: var(--ami-fg-muted, #6b6b72);
	text-decoration: line-through;
}

.ami-product-card__price ins {
	text-decoration: none;
	color: var(--ami-sale, #d62839);
}

.ami-product-card__stock {
	font-size: var(--ami-text-2xs, 0.688rem);
	font-weight: var(--ami-weight-bold, 700);
	letter-spacing: var(--ami-tracking-wide, 0.08em);
	text-transform: uppercase;
	color: var(--ami-trust, #0e6e5c);
}

.ami-product-card__stock--out { color: var(--ami-ash, #6b6b72); }

/* ---------------------------------------------------------------------------
 * Buttons
 * ------------------------------------------------------------------------- */

/* !important is load-bearing here, not laziness. Oxygen generates its own
   global button styling into a stylesheet emitted after ours, and the exact
   selector it uses is not predictable from our side — it changes with the
   builder's global settings. Matching specificity is a guessing game we would
   lose on the next settings change. */
.ami-btn,
.ami-product-card__foot a.button,
.ami-product-card__foot button.button,
.ami-product-card .button,
.ami-product-card .added_to_cart {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: var(--ami-tap, 44px);
	padding: var(--ami-space-sm, 0.75rem) var(--ami-space-md, 1rem);
	background: var(--ami-amber, #ffb302) !important;
	color: var(--ami-on-amber, #0b0b0c) !important;
	border: 0;
	border-radius: var(--ami-radius, 0);
	font-family: var(--ami-font-display, sans-serif);
	font-size: var(--ami-text-xs, 0.8rem);
	font-weight: var(--ami-weight-extra, 800);
	letter-spacing: var(--ami-tracking-label, 0.14em);
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	line-height: 1.2;
	cursor: pointer;
	transition: background var(--ami-duration-fast, 120ms) var(--ami-ease, ease);
}

.ami-btn:hover,
.ami-product-card__foot a.button:hover,
.ami-product-card__foot button.button:hover,
.ami-product-card .button:hover {
	background: var(--ami-amber-hover, #e89e00) !important;
	color: var(--ami-on-amber, #0b0b0c) !important;
}

.ami-btn--ink {
	background: var(--ami-ink, #0b0b0c);
	color: var(--ami-white, #fff);
}

.ami-btn--ink:hover {
	background: var(--ami-ink-2, #2a2a2e);
	color: var(--ami-white, #fff);
}

.ami-btn--ghost {
	background: transparent;
	color: var(--ami-fg-strong, #0b0b0c);
	border: 2px solid var(--ami-ink, #0b0b0c);
}

.ami-btn--ghost:hover {
	background: var(--ami-ink, #0b0b0c);
	color: var(--ami-white, #fff);
}

.ami-btn:focus-visible,
.ami-product-card__link:focus-visible,
.ami-panel__summary:focus-visible,
.ami-size-guide__scroll:focus-visible {
	outline: 3px solid var(--ami-ink, #0b0b0c);
	outline-offset: 2px;
}

/* WooCommerce appends this after an AJAX add. Keep it visually secondary —
   the primary action has already happened. */
.ami-product-card .added_to_cart {
	background: var(--ami-trust, #0e6e5c) !important;
	color: var(--ami-white, #fff) !important;
}

.ami-product-card .button.loading {
	opacity: 0.7;
	pointer-events: none;
}

/* ---------------------------------------------------------------------------
 * Category tiles — colour-coded departments
 * ------------------------------------------------------------------------- */

.ami-cats {
	display: grid;
	grid-template-columns: repeat(var(--ami-cats-columns, 6), minmax(0, 1fr));
	gap: var(--ami-grid-gap, 0.75rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Six departments across need roughly 200px each to stay legible. An
   intermediate step at 1300 avoids dropping straight from six to three, which
   leaves the tiles oversized on a laptop. */
@media (max-width: 1300px) {
	.ami-cats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 1000px) {
	.ami-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
	.ami-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ami-cat {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	/* Fluid rather than fixed. At 11rem flat, a tile that is 284px wide on a
	   phone reads as a squat band; this keeps the proportions closer to the
	   desktop tile as the width changes. */
	min-height: clamp(9rem, 6rem + 9vw, 12rem);
	padding: var(--ami-space-md, 1rem);
	overflow: hidden;
	background: var(--ami-cat-color, var(--ami-ink, #0b0b0c));
	color: var(--ami-white, #fff);
	text-decoration: none;
}

/* Image at full strength, legibility handled by the scrim below it.
   The previous version dropped the image to 40% opacity over the department
   colour, which muddied the photography and dulled the colour at the same
   time — the worst of both. */
.ami-cat__image {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--ami-duration-slow, 460ms) var(--ami-ease, ease);
}

.ami-cat:hover .ami-cat__image { transform: scale(1.06); }

/* Scrim: opaque in the department colour at the base where the text sits,
   clearing to nothing at the top so the image reads. Text contrast no longer
   depends on how light the photograph happens to be. */
.ami-cat:has(.ami-cat__image)::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		to top,
		var(--ami-cat-color, var(--ami-ink, #0b0b0c)) 0%,
		color-mix(in srgb, var(--ami-cat-color, #0b0b0c) 82%, transparent) 42%,
		color-mix(in srgb, var(--ami-cat-color, #0b0b0c) 20%, transparent) 100%
	);
}

/* Fallback for engines without color-mix: a flat tint, less refined but
   never illegible. */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
	.ami-cat:has(.ami-cat__image)::after {
		background: linear-gradient(
			to top,
			var(--ami-cat-color, #0b0b0c) 0%,
			rgba(0, 0, 0, 0.55) 100%
		);
	}
}

.ami-cat__name,
.ami-cat__count {
	position: relative;
	z-index: 2;
}

.ami-cat__name {
	color: inherit;
	font-family: var(--ami-font-display, sans-serif);
	font-size: var(--ami-text-lg, 1.125rem);
	font-weight: var(--ami-weight-black, 900);
	letter-spacing: var(--ami-tracking-tight, -0.035em);
	line-height: 1.05;
	text-transform: uppercase;
	/* A shadow only matters where an image sits behind; harmless otherwise. */
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

.ami-cat__count {
	margin-block-start: var(--ami-space-2xs, 0.25rem);
	font-size: var(--ami-text-2xs, 0.688rem);
	font-weight: var(--ami-weight-bold, 700);
	letter-spacing: var(--ami-tracking-wide, 0.08em);
	text-transform: uppercase;
	opacity: 0.85;
}

/* ---------------------------------------------------------------------------
 * Category slider
 *
 * A native scroll container with scroll-snap, not a JavaScript carousel. It
 * works with a trackpad, a touchscreen, arrow keys and a screen reader before
 * any script runs; the arrow buttons only add a convenience for mouse users on
 * a desktop, where a horizontal scroll gesture is awkward.
 * ------------------------------------------------------------------------- */

.ami-cats-slider {
	position: relative;
}

.ami-cats--slider {
	grid-template-columns: none;
	grid-auto-flow: column;
	/* Each tile is one column's worth of the visible width, so the same six
	   tiles fit on screen whether the slider is engaged or not. */
	grid-auto-columns: calc(
		(100% - (var(--ami-grid-gap, 0.75rem) * (var(--ami-cats-columns, 6) - 1)))
		/ var(--ami-cats-columns, 6)
	);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	/* Room for the focus ring, which would otherwise be clipped by the
	   scroll container. */
	padding-block: 3px;
}

.ami-cats--slider::-webkit-scrollbar {
	display: none;
}

.ami-cats--slider > li {
	scroll-snap-align: start;
}

.ami-cats--slider:focus-visible {
	outline: 3px solid var(--ami-ink, #0b0b0c);
	outline-offset: 2px;
}

.ami-cats-slider__nav {
	position: absolute;
	inset-block-start: 50%;
	transform: translateY(-50%);
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--ami-tap, 44px);
	height: var(--ami-tap, 44px);
	padding: 0;
	background: var(--ami-bg, #fff);
	color: var(--ami-fg-strong, #0b0b0c);
	border: 2px solid var(--ami-ink, #0b0b0c);
	border-radius: var(--ami-radius, 0);
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(11, 11, 12, 0.16);
	transition: background var(--ami-duration-fast, 120ms) var(--ami-ease, ease),
	            color var(--ami-duration-fast, 120ms) var(--ami-ease, ease);
}

.ami-cats-slider__nav[hidden] {
	display: none;
}

.ami-cats-slider__nav:hover {
	background: var(--ami-amber, #ffb302);
}

.ami-cats-slider__nav:focus-visible {
	outline: 3px solid var(--ami-amber, #ffb302);
	outline-offset: 2px;
}

/* Disabled rather than removed at the ends of the track: a control that
   disappears shifts the layout and moves the other button under the cursor. */
.ami-cats-slider__nav:disabled {
	opacity: 0.25;
	cursor: default;
	box-shadow: none;
}

.ami-cats-slider__nav svg {
	width: 1.25rem;
	height: 1.25rem;
	fill: currentColor;
}

.ami-cats-slider__nav--prev { inset-inline-start: 0; transform: translate(-50%, -50%); }
.ami-cats-slider__nav--next { inset-inline-end: 0; transform: translate(50%, -50%); }

/* On touch screens the arrows are redundant — swiping is the natural gesture
   and the buttons sit over the tiles. */
@media (hover: none) {
	.ami-cats-slider__nav { display: none !important; }
}

/* Responsive column count.
 *
 * The shortcode writes --ami-cats-columns as an inline style, and inline
 * styles beat a stylesheet, so these need !important. Custom properties accept
 * it; without it the slider would show six tiles across on a phone.
 *
 * The fractional values below are deliberate. Showing 2.2 tiles rather than 2
 * leaves the next one clipped at the edge, which is the clearest possible
 * signal that the row scrolls — clearer than an arrow, and it survives on
 * touch devices where the arrows are hidden. */
@media (max-width: 1300px) {
	.ami-cats--slider { --ami-cats-columns: 4 !important; }
}

@media (max-width: 1000px) {
	.ami-cats--slider { --ami-cats-columns: 3.2 !important; }
}

@media (max-width: 760px) {
	.ami-cats--slider { --ami-cats-columns: 2.2 !important; }
}

@media (max-width: 430px) {
	.ami-cats--slider { --ami-cats-columns: 1.4 !important; }
}



/* ---------------------------------------------------------------------------
 * Promo blocks — hero and secondary tiles
 * ------------------------------------------------------------------------- */

.ami-promo {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: var(--ami-grid-gap, 0.75rem);
	margin-block: var(--ami-space-lg, 1.5rem);
}

/* No small tiles: one full-width band rather than a two-column grid with a
   third of the row empty. */
.ami-promo--solo {
	grid-template-columns: minmax(0, 1fr);
}

/* Running full width gives the lead tile far more horizontal room, so it can
   afford a little more height — a wide, shallow band reads as a strip rather
   than a hero. */
.ami-promo--solo .ami-tile--lead {
	min-height: clamp(16rem, 30vw, 26rem);
}

@media (max-width: 900px) {
	.ami-promo { grid-template-columns: minmax(0, 1fr); }
}

.ami-promo__aside {
	display: grid;
	grid-template-rows: 1fr 1fr;
	gap: var(--ami-grid-gap, 0.75rem);
}

@media (max-width: 900px) {
	.ami-promo__aside { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
}

.ami-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	isolation: isolate;
	padding: clamp(1.25rem, 0.6rem + 2.6vw, 2.5rem);
	background: var(--ami-tile-color, var(--ami-ink, #0b0b0c));
	color: var(--ami-white, #fff);
	text-decoration: none;
	overflow: hidden;
	isolation: isolate;
}

.ami-tile--lead { min-height: clamp(14rem, 26vw, 22rem); }
.ami-tile--sm { min-height: 9rem; justify-content: flex-end; }

.ami-tile__image {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Scrim, same principle as the category tiles: the heading's contrast comes
   from the gradient, not from hoping the photograph is dark enough. */
.ami-tile.has-image::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		to top,
		var(--ami-tile-color, var(--ami-ink, #0b0b0c)) 0%,
		color-mix(in srgb, var(--ami-tile-color, #0b0b0c) 78%, transparent) 55%,
		color-mix(in srgb, var(--ami-tile-color, #0b0b0c) 25%, transparent) 100%
	);
}

@supports not (background: color-mix(in srgb, red 50%, transparent)) {
	.ami-tile.has-image::after {
		background: linear-gradient(
			to top,
			var(--ami-tile-color, #0b0b0c) 0%,
			rgba(0, 0, 0, 0.5) 100%
		);
	}
}

.ami-tile__body {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.ami-tile__eyebrow {
	margin-block-end: var(--ami-space-sm, 0.75rem);
	font-size: var(--ami-text-2xs, 0.688rem);
	font-weight: var(--ami-weight-extra, 800);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ami-amber, #ffb302);
}

.ami-tile__title {
	/* Stated rather than inherited. A tile heading that loses its colour to a
	   generic heading rule becomes black text on a dark tile — invisible, and
	   the kind of failure that only shows up on one template. */
	color: inherit;
	margin: 0;
	font-family: var(--ami-font-display, sans-serif);
	font-weight: var(--ami-weight-black, 900);
	letter-spacing: var(--ami-tracking-tight, -0.035em);
	line-height: var(--ami-leading-tight, 1.02);
	text-transform: uppercase;
}

.ami-tile--lead .ami-tile__title { font-size: var(--ami-text-3xl, 2.5rem); }
.ami-tile--sm .ami-tile__title { font-size: var(--ami-text-xl, 1.375rem); }

.ami-tile__text {
	margin: var(--ami-space-sm, 0.75rem) 0 0;
	max-width: 44ch;
	font-size: var(--ami-text-base, 1rem);
	line-height: var(--ami-leading-normal, 1.55);
	opacity: 0.85;
}

.ami-tile__cta {
	align-self: flex-start;
	width: auto;
	margin-block-start: var(--ami-space-lg, 1.5rem);
	padding-inline: var(--ami-space-xl, 2.5rem);
}

/* ---------------------------------------------------------------------------
 * Marquee
 * ------------------------------------------------------------------------- */

.ami-marquee {
	--ami-marquee-duration: 34s;
	overflow: hidden;
	padding-block: var(--ami-space-sm, 0.75rem);
	background: var(--ami-amber, #ffb302);
	color: var(--ami-on-amber, #0b0b0c);
	font-family: var(--ami-font-display, sans-serif);
	font-size: var(--ami-text-xs, 0.8rem);
	font-weight: var(--ami-weight-extra, 800);
	letter-spacing: var(--ami-tracking-label, 0.14em);
	text-transform: uppercase;
	user-select: none;
}

.ami-marquee--invert {
	background: var(--ami-ink, #0b0b0c);
	color: var(--ami-white, #fff);
}

.ami-marquee--slow { --ami-marquee-duration: 58s; }
.ami-marquee--fast { --ami-marquee-duration: 20s; }

.ami-marquee__track {
	display: flex;
	width: max-content;
	animation: ami-marquee-scroll var(--ami-marquee-duration) linear infinite;
}

.ami-marquee:hover .ami-marquee__track { animation-play-state: paused; }

.ami-marquee__run { display: flex; align-items: center; flex-shrink: 0; }

.ami-marquee__item,
.ami-marquee__sep {
	padding-inline: var(--ami-space-md, 1rem);
	white-space: nowrap;
}

.ami-marquee__sep { opacity: 0.5; }

@keyframes ami-marquee-scroll {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.ami-marquee__track {
		animation: none;
		width: 100%;
		justify-content: center;
		overflow-x: auto;
	}
	.ami-marquee__run:last-child { display: none; }
}

/* ---------------------------------------------------------------------------
 * Promise strip
 * ------------------------------------------------------------------------- */

.ami-promise {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ami-space-sm, 0.75rem) var(--ami-space-xl, 2.5rem);
	margin: 0;
	padding: var(--ami-space-md, 1rem) 0;
	list-style: none;
	font-size: var(--ami-text-xs, 0.8rem);
	font-weight: var(--ami-weight-semi, 600);
	letter-spacing: var(--ami-tracking-wide, 0.08em);
	text-transform: uppercase;
	color: var(--ami-fg, #2a2a2e);
}

.ami-promise--center { justify-content: center; }
.ami-promise--left { justify-content: flex-start; }
.ami-promise--between { justify-content: space-between; }

.ami-promise--bordered {
	border-block: var(--ami-border-width, 1px) solid var(--ami-border, #e4e4e7);
	padding-inline: var(--ami-gutter, 1rem);
}

/* Trust mark.
 *
 * The tick is inline SVG in the markup rather than a CSS background — see the
 * comment in class-amiology-promise.php for why. All this needs to do is size
 * and colour it, and both are things CSS cannot fail at silently: if these
 * rules were dropped entirely the icon would still render, just at its
 * default size in currentColor.
 */
/* Grid with two explicit tracks, not a flex row.
 *
 * A flex row is the obvious choice, and the rule was correct — but the icon
 * still stacked above its text on the live site, so something in the cascade
 * was overriding `display` or forcing a wrap. Two named grid columns cannot
 * stack: the icon is in column one and the text in column two by definition,
 * with no wrapping behaviour to override.
 *
 * !important on display because that is the single declaration everything
 * else here depends on. */
.ami-promise__item {
	display: grid !important;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: var(--ami-space-sm, 0.75rem);
	/* Belt and braces: a stray flex-direction from a parent modifier cannot
	   reach a grid container, but an inherited text-align can still shift
	   things. */
	text-align: start;
}

.ami-promise__icon {
	/* Pinned to the first grid track regardless of source order. */
	grid-column: 1;
	flex: 0 0 auto;
	/* display:block matters. An inline SVG sits on the text baseline, which
	   leaves it riding slightly high against the middle of the line box even
	   inside a centred flex row. */
	display: block;
	width: 1.15em;
	height: 1.15em;
	fill: var(--ami-trust, #0e6e5c);
}

/* The text track. minmax(0, 1fr) above already allows it to shrink; this
   keeps long promises wrapping inside the column rather than widening it. */
.ami-promise__item > span {
	min-width: 0;
	grid-column: 2;
}



/* ---------------------------------------------------------------------------
 * Accordion
 * ------------------------------------------------------------------------- */

.ami-accordion { border-block-start: var(--ami-border-width, 1px) solid var(--ami-border, #e4e4e7); }
.ami-panel { border-block-end: var(--ami-border-width, 1px) solid var(--ami-border, #e4e4e7); }

.ami-panel__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ami-space-md, 1rem);
	min-height: var(--ami-tap, 44px);
	padding-block: var(--ami-space-md, 1rem);
	cursor: pointer;
	list-style: none;
}

.ami-panel__summary::-webkit-details-marker { display: none; }
.ami-panel__summary::marker { content: ""; }

.ami-panel__title {
	font-size: var(--ami-text-sm, 0.875rem);
	font-weight: var(--ami-weight-bold, 700);
	letter-spacing: var(--ami-tracking-wide, 0.08em);
	text-transform: uppercase;
}

.ami-panel__marker {
	position: relative;
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
}

.ami-panel__marker::before,
.ami-panel__marker::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 0;
	width: 100%;
	height: 2px;
	background: currentColor;
	transition: transform var(--ami-duration, 220ms) var(--ami-ease, ease);
}

.ami-panel__marker::after { transform: rotate(90deg); }
.ami-panel[open] .ami-panel__marker::after { transform: rotate(0deg); }

.ami-panel__body {
	padding-block-end: var(--ami-space-lg, 1.5rem);
	max-width: var(--ami-container-narrow, 48rem);
	font-size: var(--ami-text-base, 1rem);
	line-height: var(--ami-leading-normal, 1.55);
	color: var(--ami-fg, #2a2a2e);
}

.ami-panel__body > :first-child { margin-block-start: 0; }
.ami-panel__body > :last-child { margin-block-end: 0; }

/* ---------------------------------------------------------------------------
 * Drop countdown
 * ------------------------------------------------------------------------- */

.ami-drop {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ami-space-xs, 0.5rem);
	text-align: center;
}

.ami-drop__label {
	font-size: var(--ami-text-2xs, 0.688rem);
	font-weight: var(--ami-weight-bold, 700);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ami-fg-muted, #6b6b72);
}

.ami-drop__body {
	font-family: var(--ami-font-display, sans-serif);
	font-size: var(--ami-text-2xl, 2rem);
	font-weight: var(--ami-weight-black, 900);
	letter-spacing: var(--ami-tracking-tight, -0.035em);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.ami-drop__units { display: flex; gap: var(--ami-space-md, 1rem); justify-content: center; }

.ami-drop__unit {
	display: flex;
	flex-direction: column;
	gap: var(--ami-space-2xs, 0.25rem);
	min-width: 2.6ch;
}

.ami-drop__unit-label {
	font-family: var(--ami-font-body, sans-serif);
	font-size: var(--ami-text-2xs, 0.688rem);
	font-weight: var(--ami-weight-regular, 400);
	letter-spacing: var(--ami-tracking-wide, 0.08em);
	text-transform: uppercase;
	color: var(--ami-fg-muted, #6b6b72);
}

/* ---------------------------------------------------------------------------
 * Specs / size guide table
 * ------------------------------------------------------------------------- */

.ami-size-guide__title {
	margin: 0 0 var(--ami-space-sm, 0.75rem);
	font-family: var(--ami-font-display, sans-serif);
	font-size: var(--ami-text-lg, 1.125rem);
	font-weight: var(--ami-weight-black, 900);
	letter-spacing: var(--ami-tracking-tight, -0.035em);
	text-transform: uppercase;
}

.ami-size-guide__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.ami-size-guide__table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--ami-text-sm, 0.875rem);
	font-variant-numeric: tabular-nums;
}

.ami-size-guide__table th,
.ami-size-guide__table td {
	padding: var(--ami-space-sm, 0.75rem) var(--ami-space-md, 1rem);
	text-align: start;
	border-block-end: var(--ami-border-width, 1px) solid var(--ami-border, #e4e4e7);
	white-space: nowrap;
}

.ami-size-guide__table thead th {
	font-weight: var(--ami-weight-extra, 800);
	letter-spacing: var(--ami-tracking-wide, 0.08em);
	text-transform: uppercase;
	font-size: var(--ami-text-2xs, 0.688rem);
	border-block-end: 2px solid var(--ami-ink, #0b0b0c);
}

.ami-size-guide__table tbody th { font-weight: var(--ami-weight-bold, 700); }

.ami-size-guide__caption {
	caption-side: bottom;
	padding-block-start: var(--ami-space-sm, 0.75rem);
	text-align: start;
	font-size: var(--ami-text-xs, 0.8rem);
	color: var(--ami-fg-muted, #6b6b72);
}

/* ---------------------------------------------------------------------------
 * eBay listings
 *
 * The cards reuse .ami-product-card wholesale, so a shopper moving between the
 * WooCommerce grid and the eBay grid does not feel handed to a different site.
 * Only the filter bar needs its own styling.
 * ------------------------------------------------------------------------- */

.ami-ebay__filters {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--ami-space-sm, 0.75rem);
	margin-block-end: var(--ami-space-lg, 1.5rem);
	padding-block-end: var(--ami-space-md, 1rem);
	border-block-end: var(--ami-border-width, 1px) solid var(--ami-line, #e4e4e7);
}

.ami-ebay__field {
	display: flex;
	flex-direction: column;
	gap: var(--ami-space-2xs, 0.25rem);
	flex: 1 1 12rem;
	min-width: 0;
}

.ami-ebay__field--narrow {
	flex: 0 1 7rem;
}

.ami-ebay__label {
	font-size: var(--ami-text-2xs, 0.688rem);
	font-weight: var(--ami-weight-bold, 700);
	letter-spacing: var(--ami-tracking-wide, 0.08em);
	text-transform: uppercase;
	color: var(--ami-fg-muted, #6b6b72);
}

.ami-ebay__input {
	width: 100%;
	min-height: var(--ami-tap, 44px);
	padding: var(--ami-space-xs, 0.5rem) var(--ami-space-sm, 0.75rem);
	border: 2px solid var(--ami-ink, #0b0b0c);
	border-radius: var(--ami-radius, 0);
	background: var(--ami-bg, #fff);
	font: inherit;
	font-size: var(--ami-text-sm, 0.875rem);
	color: var(--ami-fg, #2a2a2e);
}

.ami-ebay__input:focus-visible {
	outline: 3px solid var(--ami-amber, #ffb302);
	outline-offset: 1px;
}

.ami-ebay__submit {
	flex: 0 0 auto;
	width: auto;
	padding-inline: var(--ami-space-xl, 2.5rem);
}

/* Count and reset share the line below the controls, so both read as a
   consequence of the filters rather than as more controls. */
.ami-ebay__meta {
	flex: 1 0 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--ami-space-sm, 0.75rem);
}

.ami-ebay__reset {
	font-size: var(--ami-text-xs, 0.8rem);
	font-weight: var(--ami-weight-bold, 700);
	letter-spacing: var(--ami-tracking-wide, 0.08em);
	text-transform: uppercase;
	color: var(--ami-fg-strong, #0b0b0c);
	text-decoration: none;
	border-block-end: 2px solid var(--ami-amber, #ffb302);
	padding-block-end: 2px;
}

.ami-ebay__reset:hover {
	border-block-end-color: var(--ami-ink, #0b0b0c);
}

.ami-ebay__count {
	margin: 0;
	font-size: var(--ami-text-xs, 0.8rem);
	font-weight: var(--ami-weight-semi, 600);
	letter-spacing: var(--ami-tracking-wide, 0.08em);
	text-transform: uppercase;
	color: var(--ami-fg-muted, #6b6b72);
}

/* eBay images arrive at wildly varying aspect ratios and are not ours to crop,
   so contain rather than cover. */
.ami-ebay .ami-product-card__image {
	object-fit: contain;
}

@media (max-width: 600px) {
	.ami-ebay__field,
	.ami-ebay__field--narrow {
		flex: 1 1 100%;
	}

	.ami-ebay__submit {
		width: 100%;
	}
}

/* Show more */
.ami-ebay__more {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ami-space-sm, 0.75rem);
	margin-block-start: var(--ami-space-xl, 2.5rem);
}

.ami-ebay__more .ami-btn {
	width: auto;
	min-width: 16rem;
	padding-inline: var(--ami-space-xl, 2.5rem);
}

.ami-ebay__more .ami-btn[aria-busy="true"] {
	opacity: 0.6;
	pointer-events: none;
}

.ami-ebay__progress {
	margin: 0;
	font-size: var(--ami-text-xs, 0.8rem);
	font-weight: var(--ami-weight-semi, 600);
	letter-spacing: var(--ami-tracking-wide, 0.08em);
	text-transform: uppercase;
	color: var(--ami-fg-muted, #6b6b72);
}

/*
 * Focus lands on the first newly appended card after "Show more".
 *
 * :focus-visible, not :focus — the same distinction as the skip link. The
 * script moves focus for everyone, but a mouse user has no use for a focus
 * ring and would just see a black outline appear on a random card. The
 * browser's heuristic supplies it when the interaction was a keyboard one.
 */
.ami-ebay .ami-product-card__link:focus-visible {
	outline: 3px solid var(--ami-ink, #0b0b0c);
	outline-offset: 2px;
}

/* Listing count shown when the filter controls are hidden. */
.ami-ebay__count--bare {
	margin-block-end: var(--ami-space-md, 1rem);
	padding-block-end: var(--ami-space-sm, 0.75rem);
	border-block-end: var(--ami-border-width, 1px) solid var(--ami-line, #e4e4e7);
}

/* ---------------------------------------------------------------------------
 * eBay AJAX states
 * ------------------------------------------------------------------------- */

/* A quiet dim while results are fetched. Deliberately subtle and with no
   spinner: the request filters a warm cache and usually returns in a few tens
   of milliseconds, where a spinner would flash and read as jank. */
.ami-ebay[aria-busy="true"] [data-ami-ebay-results] {
	opacity: 0.55;
	transition: opacity var(--ami-duration-fast, 120ms) var(--ami-ease, ease);
}

/* Pointer events stay live so a shopper can keep typing or change another
   filter mid-request — the in-flight request is aborted rather than queued. */
.ami-ebay[aria-busy="true"] [data-ami-ebay-results] {
	pointer-events: none;
}

.ami-ebay__filters [type="search"] {
	/* Keeps the clear affordance in browsers that draw one. */
	appearance: auto;
}

@media (prefers-reduced-motion: reduce) {
	.ami-ebay[aria-busy="true"] [data-ami-ebay-results] {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
 * eBay feedback banner
 * ------------------------------------------------------------------------- */

.ami-reviews {
	background: var(--ami-ink, #0b0b0c);
	color: var(--ami-white, #fff);
	padding-block: var(--ami-space-2xl, 4rem);
}

.ami-reviews__inner {
	max-width: var(--ami-container, 100rem);
	margin-inline: auto;
	padding-inline: var(--ami-gutter, 1rem);
	text-align: center;
}

.ami-reviews__heading {
	margin: 0 0 var(--ami-space-lg, 1.5rem);
	font-family: var(--ami-font-display, sans-serif);
	font-size: var(--ami-text-2xl, 1.875rem);
	font-weight: var(--ami-weight-black, 900);
	letter-spacing: var(--ami-tracking-tight, -0.035em);
	line-height: var(--ami-leading-tight, 1.02);
	text-transform: uppercase;
}

.ami-reviews__stats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--ami-space-2xl, 4rem);
	margin-block-end: var(--ami-space-xl, 2.5rem);
}

.ami-reviews__stat {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--ami-space-2xs, 0.25rem);
}

.ami-reviews__figure {
	font-family: var(--ami-font-display, sans-serif);
	font-size: clamp(2.5rem, 1.5rem + 3.5vw, 4.5rem);
	font-weight: var(--ami-weight-black, 900);
	letter-spacing: var(--ami-tracking-tight, -0.035em);
	line-height: 1;
	color: var(--ami-amber, #ffb302);
	font-variant-numeric: tabular-nums;
}

.ami-reviews__label {
	font-size: var(--ami-text-xs, 0.8rem);
	font-weight: var(--ami-weight-bold, 700);
	letter-spacing: var(--ami-tracking-wide, 0.08em);
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
}

/* Static by default. The scroll is added by script once it has cloned enough
   copies to fill the row — so a script failure leaves a readable grid rather
   than a short strip sweeping across a gap. */
.ami-reviews__viewport {
	overflow: hidden;
}

.ami-reviews__track {
	display: flex;
	justify-content: center;
}

.ami-reviews__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: var(--ami-space-lg, 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: start;
}

.ami-reviews__list[aria-hidden="true"] {
	display: none;
}

/* ---- Scrolling state ---- */

.ami-reviews__viewport.is-scrolling .ami-reviews__track {
	width: max-content;
	justify-content: flex-start;
	animation: ami-reviews-scroll var(--ami-reviews-duration, 60s) linear infinite;
}

.ami-reviews__viewport.is-scrolling .ami-reviews__list {
	display: flex;
	flex-wrap: nowrap;
	padding-inline-end: var(--ami-space-lg, 1.5rem);
}

.ami-reviews__viewport.is-scrolling .ami-reviews__list[aria-hidden="true"] {
	display: flex;
}

.ami-reviews__viewport.is-scrolling .ami-reviews__list > li {
	/* A fixed width, because a flex item sized by its content makes every
	   card a different width and the row reads as ragged. */
	flex: 0 0 min(22rem, 80vw);
}

/* Pause on hover and on keyboard focus. These are sentences — someone part
   way through one needs to be able to stop it. */
.ami-reviews__viewport.is-scrolling:hover .ami-reviews__track,
.ami-reviews__viewport.is-scrolling:focus-within .ami-reviews__track {
	animation-play-state: paused;
}

@keyframes ami-reviews-scroll {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(calc(var(--ami-reviews-shift, 50%) * -1), 0, 0); }
}

/*
 * Reading is harder than glancing, so moving text is a bigger problem here
 * than on the trust bar. Overrides the scrolling state entirely rather than
 * depending on the script to check.
 */
@media (prefers-reduced-motion: reduce) {
	.ami-reviews__viewport.is-scrolling .ami-reviews__track {
		animation: none;
		width: 100%;
		justify-content: center;
	}

	.ami-reviews__viewport.is-scrolling .ami-reviews__list {
		display: grid;
		flex-wrap: wrap;
		padding-inline-end: 0;
	}

	.ami-reviews__viewport.is-scrolling .ami-reviews__list[aria-hidden="true"] {
		display: none;
	}
}

.ami-reviews__quote {
	height: 100%;
	margin: 0;
	padding: var(--ami-space-lg, 1.5rem);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-block-start: var(--ami-rule-width, 3px) solid var(--ami-amber, #ffb302);
}

.ami-reviews__quote p {
	margin: 0;
	font-size: var(--ami-text-base, 1rem);
	line-height: var(--ami-leading-normal, 1.55);
}

.ami-reviews__author {
	display: block;
	margin-block-start: var(--ami-space-sm, 0.75rem);
	font-size: var(--ami-text-xs, 0.8rem);
	font-style: normal;
	font-weight: var(--ami-weight-bold, 700);
	letter-spacing: var(--ami-tracking-wide, 0.08em);
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
}

.ami-reviews__source {
	margin: var(--ami-space-lg, 1.5rem) 0 0;
	font-size: var(--ami-text-2xs, 0.688rem);
	letter-spacing: var(--ami-tracking-wide, 0.08em);
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 600px) {
	.ami-reviews__stats {
		gap: var(--ami-space-lg, 1.5rem);
	}
}

/* ---------------------------------------------------------------------------
 * Product slider
 *
 * Shares the arrow styling with the department row — same control, same
 * behaviour — and only needs the track rules of its own.
 * ------------------------------------------------------------------------- */

.ami-products__viewport {
	position: relative;
}

.ami-products--slider .ami-products__grid {
	grid-template-columns: none;
	grid-auto-flow: column;
	/* Each card is one column's worth of the visible width, so four sit on
	   screen exactly as they would in the static grid. */
	grid-auto-columns: calc(
		(100% - (var(--ami-grid-gap, 0.75rem) * (var(--ami-products-columns, 4) - 1)))
		/ var(--ami-products-columns, 4)
	);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	/* Room for the focus ring, which the scroll container would otherwise
	   clip. */
	padding-block: 3px;
}

.ami-products--slider .ami-products__grid::-webkit-scrollbar {
	display: none;
}

.ami-products--slider .ami-products__grid > li {
	scroll-snap-align: start;
}

/* The duplicated cards a continuous scroll needs must never be snap targets:
   once the animation stops and snapping resumes, snapping to a clone would
   land the row in the copied half with no way back. */
.ami-products--slider .ami-products__grid > li[aria-hidden="true"] {
	scroll-snap-align: none;
}

.ami-products--slider .ami-products__grid:focus-visible {
	outline: 3px solid var(--ami-ink, #0b0b0c);
	outline-offset: 2px;
}

/*
 * Fractional columns below the desktop breakpoints, for the same reason as the
 * department row: a partly visible card at the edge is the clearest signal
 * that the row scrolls, and it works on touch where the arrows are hidden.
 */
@media (max-width: 1100px) {
	.ami-products--slider .ami-products__grid { --ami-products-columns: 3.2; }
}

@media (max-width: 760px) {
	.ami-products--slider .ami-products__grid { --ami-products-columns: 2.2; }
}

@media (max-width: 430px) {
	.ami-products--slider .ami-products__grid { --ami-products-columns: 1.4; }
}

/* Autoplay pause control.
 *
 * Present because WCAG 2.2.2 requires a way to stop anything that moves
 * automatically for more than five seconds. Pause-on-hover is not that
 * mechanism — it does not exist on a touchscreen and cannot be reached by
 * keyboard. */
.ami-products__pause {
	position: absolute;
	inset-block-end: -0.5rem;
	inset-inline-end: 0;
	z-index: 3;
	padding: 0.35rem 0.75rem;
	background: var(--ami-bg, #fff);
	border: 1px solid var(--ami-line, #e4e4e7);
	font-size: var(--ami-text-2xs, 0.688rem);
	font-weight: var(--ami-weight-bold, 700);
	letter-spacing: var(--ami-tracking-wide, 0.08em);
	text-transform: uppercase;
	color: var(--ami-fg-muted, #6b6b72);
	cursor: pointer;
}

.ami-products__pause[hidden] {
	display: none;
}

.ami-products__pause:hover {
	color: var(--ami-fg-strong, #0b0b0c);
	border-color: var(--ami-ink, #0b0b0c);
}

.ami-products__pause:focus-visible {
	outline: 3px solid var(--ami-amber, #ffb302);
	outline-offset: 2px;
}

/* Room beneath the row for the control to sit without overlapping cards. */
.ami-products--slider .ami-products__viewport {
	padding-block-end: 1.25rem;
}