/*
 * The service catalogue at /shop - styles.
 *
 * Lifted out of woocommerce/archive-product.php on 8 Aug 2026, then rewritten
 * the same day against design-system/DESIGN-LANGUAGE.md rather than against
 * what the old template happened to look like. The first pass used tokens but
 * not the system: grey hairlines instead of the teal card border, a 700-weight
 * H1 at the wrong step of the scale, every block wrapped in its own rounded
 * white panel, and twenty-four identical card-grid rows with nothing else on
 * the page.
 *
 * What the system actually says, and what this file does about it:
 *
 *   §6 Cards      cards rest on a teal hairline and hover by intensifying it.
 *                 No lift, no shadow, no scale. Title goes teal on hover.
 *   §7 Backgrounds flat #ffffff / #f8fafb alternation "is the whole system".
 *                 So the sections alternate, and nothing is a card unless it
 *                 is one - SEC-14's one-box rule: the product tile is the box,
 *                 the theme never draws a second around it.
 *   §3 Type       H1 hero is clamp(2rem,5vw,3.5rem) / 800 / -0.03em, with the
 *                 operative phrase of the page in --action. Card titles are
 *                 1.05-1.25rem / 700.
 *   §6 Anti-fatigue  max two consecutive card-grid sections, and at least one
 *                 non-grid pattern per page - the filter band is that pattern.
 *                 It used to carry the total as a display moment (§3); the
 *                 number came out on 9 Aug by decision - how many services the
 *                 workshop lists is not a customer's business - so the page
 *                 now has the non-grid band without the display moment.
 *   §1 Forbidden  no icon fonts. The service icons are the project's own SVG,
 *                 drawn large and unboxed in --accent, which is the token for
 *                 icon fills. (--accent-art is PCB line-work only; the first
 *                 pass had it wrong.)
 *
 * Two rules govern the file itself: no literal colour, radius, shadow or
 * spacing value - everything comes from tokens.css - and no !important. The
 * 182 of them in the old inline block existed to out-shout Avada, which is
 * gone.
 *
 * @package Fixfactor
 */

/* ==========================================================================
   Shell and bands
   ========================================================================== */

.ffx-shop {
	/* The reading measure of the list view - see the list-view block below. */
	--ffx-list-measure: 58rem;

	font-family: var(--font-stack);
	color: var(--content-body);
	background: var(--surface);
}

.ffx-shop *,
.ffx-shop *::before,
.ffx-shop *::after {
	box-sizing: border-box;
}

/*
 * Links here are controls - chips, view toggles, page numbers, whole tiles.
 * The underline the site gives body links is wrong on all of them, so it goes
 * once and comes back by name on the two places that are prose.
 */
.ffx-shop a {
	text-decoration: none;
}

/* A full-width band. Section colour is the only separator the system allows. */
.ffx-shop__band {
	padding-block: var(--space-8);
}

.ffx-shop__band--alt {
	background: var(--surface-alt);
}

.ffx-shop__band--tight {
	padding-block: var(--space-5);
}

.ffx-shop__inner {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--space-4);
}

/* ==========================================================================
   Hero
   ========================================================================== */

.ffx-shop__head {
	max-width: 46rem;      /* the canonical section-header measure */
	margin-inline: auto;
	text-align: center;
}

.ffx-shop__title {
	font-size: var(--text-h1);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.08;
	color: var(--content);
	margin: 0 0 var(--space-4);
}

/* The operative phrase: the page's subject, one span, solid --action. */
.ffx-shop__title em {
	font-style: normal;
	color: var(--action);
}

.ffx-shop__lede {
	font-size: var(--text-lg);
	line-height: 1.6;
	color: var(--content-body);
	margin: 0;
}

.ffx-shop__lede a {
	color: var(--action);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ffx-shop__lede a:hover {
	color: var(--action-hover);
}

/* ==========================================================================
   Controls
   ========================================================================== */

.ffx-shop__controls {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.ffx-shop__controls-row {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

/* --- Search --------------------------------------------------------------- */

.ffx-shop__search {
	display: flex;
	position: relative;
	flex: 1 1 auto;
}

/* Form spec: 48px tall, radius 10, neutral border, teal on hover and focus. */
.ffx-shop__search-input {
	flex: 1 1 auto;
	min-width: 0;
	height: 3rem;
	font: inherit;
	font-size: var(--text-base);
	color: var(--content-body);
	background: var(--surface);
	border: 1px solid var(--border-neutral);
	border-right: 0;
	border-radius: var(--radius-input) 0 0 var(--radius-input);
	padding-inline: var(--space-4);
}

.ffx-shop__search-input::placeholder {
	color: var(--content-secondary);
}

.ffx-shop__search-input:hover {
	border-color: var(--border-active);
}

.ffx-shop__search-input:focus-visible {
	outline: none;
	border-color: var(--action);
	box-shadow: var(--focus-ring);
}

.ffx-shop__search:has(.ffx-shop__search-clear) .ffx-shop__search-input {
	padding-right: var(--space-12);
}

.ffx-shop__search-clear {
	position: absolute;
	right: 3.5rem;
	top: 50%;
	translate: 0 -50%;
	display: grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	color: var(--content-secondary);
	cursor: pointer;
}

.ffx-shop__search-clear svg {
	width: 1.125rem;
	height: 1.125rem;
}

.ffx-shop__search-clear:hover {
	color: var(--action);
}

.ffx-shop__search-submit {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 3rem;
	height: 3rem;
	border: 1px solid var(--action);
	border-radius: 0 var(--radius-input) var(--radius-input) 0;
	background: var(--action);
	color: var(--gray-0);
	cursor: pointer;
	transition: var(--transition);
}

.ffx-shop__search-submit svg {
	width: 1.25rem;
	height: 1.25rem;
}

/* Buttons deepen in colour on hover. Nothing lifts, nothing casts a shadow. */
.ffx-shop__search-submit:hover {
	background: var(--action-hover);
	border-color: var(--action-hover);
}

.ffx-shop__search-submit:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

/* --- Sort + view ---------------------------------------------------------- */

.ffx-shop__tools {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

/*
 * The border, the height and the radius belong to the field, not to the
 * select, so the control matches the search box and the view buttons to the
 * pixel - one 48px rhythm across the whole row. The select inside is stripped
 * of its own chrome and sits on nothing.
 */
.ffx-shop__sort-field {
	display: flex;
	align-items: center;
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	height: 3rem;
	background: var(--surface);
	border: 1px solid var(--border-neutral);
	border-radius: var(--radius-input);
	padding-inline: var(--space-4) var(--space-8);
	transition: var(--transition-border);
}

.ffx-shop__sort-field:hover {
	border-color: var(--border-active);
}

/* The ring belongs to the field, because the select no longer has a box. */
.ffx-shop__sort-field:focus-within {
	border-color: var(--action);
	box-shadow: var(--focus-ring);
}

.ffx-shop__sort {
	appearance: none;
	-webkit-appearance: none;
	height: 100%;
	font: inherit;
	font-size: var(--text-sm);
	font-weight: 600;
	line-height: 1.2;
	color: var(--content-body);
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	flex: 1 1 auto;
	min-width: 0;
	cursor: pointer;
}

.ffx-shop__sort:focus-visible {
	outline: none;
}

/*
 * Our own chevron rather than the browser's, drawn in currentColor so it stays
 * a token and never a hex. Inert to the pointer, so the whole field opens the
 * menu.
 */
.ffx-shop__sort-chevron {
	position: absolute;
	right: var(--space-3);
	top: 50%;
	translate: 0 -50%;
	display: grid;
	place-items: center;
	color: var(--content-secondary);
	pointer-events: none;
}

.ffx-shop__sort-chevron svg {
	width: 1.125rem;
	height: 1.125rem;
	display: block;
}

.ffx-shop__sort-field:hover .ffx-shop__sort-chevron {
	color: var(--action);
}

.ffx-shop__views {
	display: flex;
	flex: 0 0 auto;
	gap: var(--space-1);
}

.ffx-shop__view {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border: 1px solid var(--border-neutral);
	border-radius: var(--radius-input);
	background: var(--surface);
	color: var(--content-secondary);
	transition: var(--transition-border);
}

.ffx-shop__view svg {
	width: 1.25rem;
	height: 1.25rem;
}

.ffx-shop__view:hover {
	border-color: var(--border-active);
	color: var(--action);
}

.ffx-shop__view[aria-pressed="true"] {
	border-color: var(--border-active);
	background: var(--teal-tint-faint);
	color: var(--action);
}

.ffx-shop__view:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

/* --- Device tabs ---------------------------------------------------------- */

/*
 * The device family is the axis that splits the catalogue, so it is drawn as a
 * tab strip: a rule the whole width of the band, and the current family sitting
 * on a teal segment of it. Eleven identical pills above two more identical
 * pills said nothing about which control did what.
 */
.ffx-shop__tabs {
	display: flex;
	gap: var(--space-1);
	border-bottom: 1px solid var(--border-neutral);
	overflow-x: auto;
	scrollbar-width: none;
}

.ffx-shop__tabs::-webkit-scrollbar {
	display: none;
}

.ffx-shop__tab {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: baseline;
	gap: var(--space-2);
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--content-secondary);
	padding: var(--space-3) var(--space-4);
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	white-space: nowrap;
	transition: var(--transition);
}

.ffx-shop__tab:hover {
	color: var(--action);
	border-bottom-color: var(--border-interactive);
}

.ffx-shop__tab[aria-current="page"] {
	color: var(--action);
	border-bottom-color: var(--action);
}

.ffx-shop__tab:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
	border-radius: var(--radius-tag) var(--radius-tag) 0 0;
}

/* --- Chips (empty-state jump links) --------------------------------------- */

.ffx-shop__chip {
	display: inline-flex;
	align-items: baseline;
	gap: var(--space-1);
	font-size: var(--text-sm);
	font-weight: 600;
	line-height: 1;
	color: var(--content-body);
	background: var(--surface);
	border: 1px solid var(--border-interactive);
	border-radius: var(--radius-tag);
	padding: var(--space-2) var(--space-3);
	transition: var(--transition-border);
}

.ffx-shop__chip:hover {
	border-color: var(--border-active);
	color: var(--action);
}

.ffx-shop__chip:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

/* ==========================================================================
   Filter band

   Held the total count until 9 Aug and a price segment until 13 Aug. Both came
   out; what is there now is the list of filters that are actually on, and the
   band renders only when that list is not empty.
   ========================================================================== */

.ffx-shop__reset {
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--action);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ffx-shop__reset:hover {
	color: var(--action-hover);
}

/* ==========================================================================
   Grid
   ========================================================================== */

.ffx-shop__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-4);
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

/*
 * The tile is the only box on this band. It rests on a teal hairline and, on
 * hover, the border intensifies and the title turns teal - the whole of the
 * card interaction in the system. No translate, no shadow, no scale.
 */
.ffx-shop__card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-3);
	background: var(--surface);
	border: 1px solid var(--border-interactive);
	border-radius: var(--radius);
	padding: var(--space-5);
	transition: var(--transition-border);
}

.ffx-shop__card:hover {
	border-color: var(--border-active);
}

.ffx-shop__card:focus-within {
	border-color: var(--action);
	box-shadow: var(--focus-ring);
}

/*
 * The service icon, drawn large and unboxed. These are the project's own
 * vectors - detailed line drawings that turn to mush at 24px inside a tinted
 * chip, which is what the first pass did to them.
 */
/*
 * The icon sits in a fixed square. Not for decoration - the drawings come from
 * twenty different source viewBoxes and render a few pixels apart, so without a
 * declared box the titles beside them in list view started at seven different
 * x positions down the page.
 */
.ffx-shop__card-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-3);
	width: 100%;
}

/*
 * The family, as a small warm chip.
 *
 * Sentence case, not caps: at this size an all-caps run is harder to read than
 * the words it sets. The colour lives in the fill rather than the ink - a pale
 * amber wash - so the chip is warm without the text being dark. No border: the
 * wash already separates it from the card, and a hairline on a chip this small
 * is a third weight competing with the icon and the price.
 *
 * Ink is --content-secondary, measured at 7.5:1 on that wash. The obvious
 * choice, --accent-warm-text, lands at 4.2:1 there and fails AA - the amber
 * that passes on white does not pass on amber.
 *
 * The tint is mixed from --accent-warm rather than written as a hex, because
 * tokens.css has no warm surface and this file may not invent one. The plain
 * --surface-fill declaration in front of it is what engines without
 * color-mix() keep: a neutral chip, never a broken one.
 */
.ffx-shop__card-family {
	font-size: var(--text-2xs);
	font-weight: 600;
	line-height: 1.4;
	color: var(--content-secondary);
	background: var(--surface-fill);
	background: color-mix(in srgb, var(--accent-warm) 20%, var(--surface));
	border-radius: var(--radius-tag);
	padding-inline: var(--space-2);
	text-align: right;
	white-space: nowrap;
}

.ffx-shop__card-icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 3rem;
	height: 3rem;
	color: var(--accent);
}

.ffx-shop__card-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.ffx-shop__card:hover .ffx-shop__card-icon {
	color: var(--action);
}

.ffx-shop__card-name {
	font-size: var(--text-lg);
	font-weight: 700;
	line-height: 1.3;
	color: var(--content);
	margin: 0;
	flex: 1 1 auto;
}

.ffx-shop__card-link {
	color: inherit;
}

.ffx-shop__card-link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.ffx-shop__card:hover .ffx-shop__card-name {
	color: var(--accent);
}

/*
 * The price, in the three registers fixfactor_search_price_markup() splits it
 * into - the same three the live-search dropdown already tells apart:
 *
 *   £199        a number you can act on
 *   From £200   a number with a condition attached
 *   Get a Quote not a number; the answer depends on the device
 */
.ffx-shop__card-price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--space-1);
	margin: 0;
	line-height: 1.2;
}

/*
 * The amount. One step down from --text-xl on 13 Aug: at 20px it was the
 * largest thing on a tile whose subject is the repair, not the money, and next
 * to a 12px "From" the pair read as two unrelated sizes rather than one price.
 */
.ffx-shop__card-price .ff-price {
	font-size: var(--text-lg);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--action);
}

/*
 * The words around the number - "From" in front of it, a suffix like "labour"
 * behind it. Set as captions, not as smaller price: two thirds the size, in
 * secondary ink, on the amount's baseline, which the flex parent provides. The
 * eye then reads one price with conditions attached rather than a sentence in
 * three type sizes.
 *
 * Sentence case, not caps - the same decision as the family tag on the tile
 * above. At 11px an all-caps run is harder to read than the word it sets, and
 * two caps runs bracketing a number would be the loudest thing on the card.
 */
.ffx-shop__card-price .ff-price-qual {
	font-size: var(--text-2xs);
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--content-secondary);
}

/* A quote is an invitation, not a hole where a number should be. Ink is
   --action, not --accent: on the teal tint --accent measures 2.56:1 and fails
   AA, --action measures 4.60:1 and passes. Same tag, legible. */
.ffx-shop__card-price .ff-price-quote {
	font-size: var(--text-2xs);
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--action);
	background: var(--teal-tint-fill);
	border-radius: var(--radius-tag);
	padding: var(--space-1) var(--space-2);
}

/* --- List view ------------------------------------------------------------ */

/*
 * The list is set to its own measure, not the container's.
 *
 * At 1320px a row put the service name hard left and its price hard right with
 * a metre of nothing between them, so reading one row meant tracking across the
 * whole screen and reading the next meant coming back. 58rem is about ninety
 * characters of title plus the price - one saccade wide - and it is why anyone
 * picks the list view in the first place.
 */
.ffx-shop__grid.is-list {
	grid-template-columns: 1fr;
	gap: var(--space-2);
	max-width: var(--ffx-list-measure);
	margin-inline: auto;
}

.ffx-shop__grid.is-list .ffx-shop__card {
	flex-direction: row;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-3) var(--space-5);
}

.ffx-shop__grid.is-list .ffx-shop__card-top {
	flex: 0 0 auto;
	width: auto;
	align-items: center;
}

.ffx-shop__grid.is-list .ffx-shop__card-icon {
	width: 2.5rem;
	height: 2.5rem;
}

/* On one line the family would crowd the name; the icon carries the row. */
.ffx-shop__grid.is-list .ffx-shop__card-family {
	display: none;
}

.ffx-shop__grid.is-list .ffx-shop__card-name {
	font-size: var(--text-base);
}

.ffx-shop__grid.is-list .ffx-shop__card-price {
	flex: 0 0 auto;
	justify-content: flex-end;
}

/* The <symbol> definitions the tiles point at - never drawn itself. */
.ffx-shop__sprite {
	display: none;
}

/* ==========================================================================
   Pagination
   ========================================================================== */

.ffx-shop__pagination {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-4);
}

.ffx-shop__pagination-info {
	font-size: var(--text-sm);
	color: var(--content-secondary);
	margin: 0;
}

.ffx-shop__pagination-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-2);
}

.ffx-shop__pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 2.75rem;
	height: 2.75rem;
	padding-inline: var(--space-3);
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--content-body);
	background: var(--surface);
	border: 1px solid var(--border-interactive);
	border-radius: var(--radius-tag);
	transition: var(--transition-border);
}

.ffx-shop__pagination a.page-numbers:hover {
	border-color: var(--border-active);
	color: var(--action);
}

.ffx-shop__pagination a.page-numbers:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

.ffx-shop__pagination .page-numbers.current {
	background: var(--action);
	border-color: var(--action);
	color: var(--gray-0);
}

.ffx-shop__pagination .page-numbers.dots {
	border-color: transparent;
	background: none;
	color: var(--content-secondary);
}

.ffx-shop__pagination .page-numbers svg {
	width: 1.125rem;
	height: 1.125rem;
}

/* ==========================================================================
   Empty state - an invitation to act, per the v4 empty-state spec
   ========================================================================== */

.ffx-shop__empty {
	max-width: 46rem;
	margin-inline: auto;
	text-align: center;
}

.ffx-shop__empty-icon {
	display: block;
	color: var(--accent);
	margin: 0 auto var(--space-5);
}

.ffx-shop__empty-icon svg {
	width: 3rem;
	height: 3rem;
}

.ffx-shop__empty-title {
	font-size: var(--text-h2);
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--content);
	margin: 0 0 var(--space-4);
}

.ffx-shop__empty-text {
	font-size: var(--text-base);
	line-height: 1.6;
	color: var(--content-body);
	margin: 0 auto var(--space-8);
}

.ffx-shop__applied {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	margin-bottom: var(--space-5);
}

.ffx-shop__applied--bar {
	justify-content: flex-start;
	margin-bottom: 0;
}

.ffx-shop__applied-label {
	font-size: var(--text-2xs);
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--content-secondary);
}

.ffx-shop__applied-item {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-xs);
	font-weight: 600;
	color: var(--content-body);
	background: var(--surface);
	border: 1px solid var(--border-neutral);
	border-radius: var(--radius-pill);
	padding: var(--space-1) var(--space-2) var(--space-1) var(--space-3);
	transition: var(--transition-border);
}

.ffx-shop__applied-item:hover {
	border-color: var(--status-error);
	color: var(--status-error);
}

.ffx-shop__applied-x svg {
	width: 0.875rem;
	height: 0.875rem;
	display: block;
}

.ffx-shop__jump {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-2);
	margin-bottom: var(--space-8);
}

.ffx-shop__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-3);
}

.ffx-shop__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: var(--text-base);
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1;
	padding: var(--space-4) var(--space-8);
	border-radius: var(--radius);
	border: 2px solid var(--action);
	background: var(--action);
	color: var(--gray-0);
	transition: var(--transition);
}

.ffx-shop__button:hover {
	background: var(--action-hover);
	border-color: var(--action-hover);
	color: var(--gray-0);
}

.ffx-shop__button--ghost {
	background: var(--surface);
	color: var(--action);
}

.ffx-shop__button--ghost:hover {
	background: var(--surface);
	color: var(--action-hover);
	border-color: var(--action-hover);
}

.ffx-shop__button:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

/* ==========================================================================
   Breakpoints - the system's own: 768, 576, 480
   ========================================================================== */

@media (min-width: 768px) {
	.ffx-shop__band {
		padding-block: var(--space-16);
	}

	.ffx-shop__band--tight {
		padding-block: var(--space-8);
	}

	.ffx-shop__inner {
		padding-inline: var(--space-5);
	}

	.ffx-shop__controls-row {
		flex-direction: row;
		align-items: center;
		gap: var(--space-4);
	}

	.ffx-shop__search {
		max-width: 26rem;
	}

	.ffx-shop__tools {
		margin-left: auto;
	}

	.ffx-shop__sort-field {
		flex: 0 0 auto;
	}

	.ffx-shop__pagination {
		flex-direction: row;
		justify-content: space-between;
	}
}

@media (max-width: 575.98px) {
	.ffx-shop__lede {
		font-size: var(--text-base);
	}

	/*
	 * The tab strip runs to the edges of the band so the cut-off tab on the
	 * right reads as "there is more this way" rather than as a mistake.
	 */
	.ffx-shop__tabs {
		margin-inline: calc(var(--space-4) * -1);
		padding-inline: var(--space-4);
		scroll-padding-inline: var(--space-4);
		scroll-snap-type: x proximity;
	}

	.ffx-shop__tab {
		scroll-snap-align: start;
		padding-inline: var(--space-3);
	}

	/*
	 * Two columns hold to the smallest phone: the tile is an icon, two lines
	 * of name and a price, and one column of that down a 965-item catalogue is
	 * a very long scroll for very little on screen.
	 */
	.ffx-shop__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-3);
	}

	.ffx-shop__card {
		padding: var(--space-4);
		gap: var(--space-2);
	}

	.ffx-shop__card-icon {
		width: 2.5rem;
		height: 2.5rem;
	}

	.ffx-shop__card-name {
		font-size: var(--text-sm);
	}

	.ffx-shop__card-price .ff-price {
		font-size: var(--text-base);
	}

	.ffx-shop__grid.is-list {
		grid-template-columns: 1fr;
	}

	.ffx-shop__grid.is-list .ffx-shop__card {
		padding: var(--space-3) var(--space-4);
	}

	.ffx-shop__grid.is-list .ffx-shop__card-name {
		font-size: var(--text-sm);
	}

	.ffx-shop__button {
		flex: 1 1 auto;
		padding-inline: var(--space-4);
	}
}

@media (max-width: 479.98px) {
	.ffx-shop__lede {
		font-size: var(--text-base);
	}

	.ffx-shop__chip,
	.ffx-shop__tab {
		font-size: var(--text-xs);
	}

	.ffx-shop__button {
		font-size: var(--text-sm);
		padding-inline: var(--space-3);
	}

	.ffx-shop__pagination .page-numbers {
		min-width: 2.5rem;
		height: 2.5rem;
		padding-inline: var(--space-2);
	}
}

/* ==========================================================================
   Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.ffx-shop *,
	.ffx-shop *::before,
	.ffx-shop *::after {
		transition-duration: 0.01ms;
	}
}