/*
 * Braced — what the shared data blocks (afp-core, afp-directory) look like on Braced, beyond the
 * shared components. Owned by the foundation. Carried over from the field-guide look
 * (theme/assets/css/look-field-guide.css, 2026-11-10) where it still fits, retuned to the Braced
 * tokens. Page-specific restyles belong in assets/css/pages/{type}.css, not here.
 */

/* ---------- Short labels, chips and switches: text, not pills ---------- */
.afp-specchips li {
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--contrast-2);
	font-weight: 500;
}
.afp-views__switch,
.afp-grid__sortlinks {
	gap: 20px;
	padding: 0;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	border-radius: 0;
	background: transparent;
}
.afp-views__opt,
.afp-grid__sortlink {
	min-height: 44px;
	padding: 0;
	border-radius: 0;
	background: transparent !important;
	color: var(--wp--preset--color--contrast-2);
	box-shadow: none;
}
.afp-views__input--cards:checked ~ .afp-views__opt--cards,
.afp-views__input--table:checked ~ .afp-views__opt--table,
.afp-grid__sortlink[aria-current="true"] {
	color: var(--wp--preset--color--contrast);
	box-shadow: inset 0 -2px 0 var(--wp--preset--color--accent);
}
:is(.afp-grid .afp-chip, .afp-related__cat, .afpd-filter__chip, .afp-owners__chip, .afpd-start__soon) {
	border-radius: var(--wp--custom--radius--button);
}

/* ---------- Category tiles ("Choose a type"): a figure beside the name ---------- */
.afp-tiles__list {
	grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
	gap: 16px;
}
.afp-tiles__tile:not(.is-photo) {
	flex-direction: row;
	align-items: center;
	gap: 16px;
	padding: 12px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--base-2);
	box-shadow: none;
}
.afp-tiles__tile:not(.is-photo):hover {
	border-color: var(--wp--preset--color--accent);
}
.afp-tiles__tile:not(.is-photo) .afp-tiles__media {
	flex: none;
	width: 88px;
}
.afp-tiles__tile:not(.is-photo) .afp-tiles__text {
	padding: 0;
	gap: 2px;
}
.afp-tiles__tile:not(.is-photo) .afp-tiles__name {
	font-size: var(--wp--preset--font-size--large);
}
/* Rule 9: names are never cut with an ellipsis. */
.afp-tiles__name {
	display: block !important;
	overflow: visible !important;
	-webkit-line-clamp: unset !important;
	line-clamp: none !important;
	text-overflow: clip !important;
	white-space: normal !important;
}
.afp-tiles__tile:not(.is-photo) .afp-tiles__desc {
	display: none;
}

/* ---------- Short answer (guides) ---------- */
.afp-short-answer {
	border: 0;
	border-inline-start: 4px solid var(--wp--preset--color--accent);
	border-radius: 0 var(--wp--custom--radius--card) var(--wp--custom--radius--card) 0;
	background: var(--wp--preset--color--base-3);
	box-shadow: none;
}

/* No uppercase eyebrows (rule 9): small labels the shared blocks print stay in sentence case. */
:is(.afp-short-answer__label, .afp-kicker, .afpd-promo__kicker, .afp-cardrow__kicker, .afp-related__kicker) {
	letter-spacing: 0.01em !important;
	text-transform: none !important;
}

/* ---------- Disclosure line ---------- */
.afp-disclosure {
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--x-small);
}

/* ---------- Directory: listings as a printed directory ---------- */
.afpd-card--compact,
.afpd-card--row {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--line);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}
.afpd-card__name {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
}
.afpd-badge {
	padding: 0;
	border: 0;
	background: transparent;
	font-weight: 650;
}
.afpd-badge--checked {
	color: var(--wp--preset--color--positive);
}
.afpd-card__pos {
	width: auto;
	height: auto;
	border-radius: 0;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 800;
}
.afpd-start__job {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--base-2);
	box-shadow: none;
}
.afpd-coverage__list {
	gap: 0 var(--wp--preset--spacing--40);
}
.afpd-coverage__list li {
	padding: 10px 0;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	border-radius: 0;
	background: transparent;
}

/* ---------- Legacy presentational blocks in page content ---------- */
/* afp/trust-strip and afp/how-we-choose keep their own layout; Braced only quiets them. */
.wp-block-afp-trust-strip,
.wp-block-afp-how-we-choose {
	border-radius: var(--wp--custom--radius--card);
}

/* ============ Product surfaces ============
 * Owner: the product page agent (plugin/inc/pages/product.php prints the extra markup). How a
 * product card, pick row, top pick, inline product, related card, comparison table and price
 * block look and read wherever they appear. Outer sizing (grid columns, widths) stays with the
 * page that places them; these rules set the inside of the card.
 */

/* A buy area that shows another region's retailers (the visitor's region has none): one quiet
   tag, never "No Canada price yet". */
.braced-elsewhere {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	padding: 1px 7px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--badge);
	background: var(--wp--preset--color--base-3);
	color: var(--wp--preset--color--contrast-2);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.01em;
	white-space: nowrap;
}
span.braced-region-fill > .braced-elsewhere {
	margin-inline-end: 6px;
	vertical-align: 0.1em;
}
div.braced-region-fill > .braced-elsewhere {
	display: flex;
	margin-block-end: 8px;
}
.afp-region-none {
	display: none; /* afp-core's empty state: the fill above replaces it; alone it says nothing useful. */
}

/* ---------- The price block (product page summary, and "Where to buy" in guides) ---------- */
.braced-buy__tag {
	margin: 0 0 12px;
}
.braced-buy__lead {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0 0 16px;
}
.braced-buy__price,
.braced-buy__price.is-stale {
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 750;
	letter-spacing: -0.02em;
	line-height: 1.05;
	font-variant-numeric: tabular-nums;
}
.braced-buy__seller {
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 750;
	letter-spacing: -0.01em;
	line-height: 1.2;
}
.braced-buy__at {
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--small);
}
.braced-buy__stock {
	margin: 0 0 8px;
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}
.braced-buy .braced-buy__cta {
	width: 100%;
	min-height: 52px;
	text-align: center;
	white-space: normal;
}
.braced-buy__also {
	margin: 20px 0 2px;
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
}
.braced-buy__list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.braced-buy__list > li {
	margin: 0;
}
.braced-buy__row {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 48px;
	padding-block: 6px;
	border-bottom: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.braced-buy__list > li:first-child .braced-buy__row {
	border-top: 1px solid var(--wp--preset--color--line);
}
.braced-buy__shop {
	flex: 1;
	min-width: 0;
	font-weight: 600;
}
.braced-buy__what {
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 650;
	white-space: nowrap;
}
.braced-buy__what.afp-price {
	color: var(--wp--preset--color--contrast);
	font-variant-numeric: tabular-nums;
}
.braced-buy__go {
	flex: none;
	color: var(--wp--preset--color--accent);
}
.braced-buy__row:hover .braced-buy__shop {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.braced-buy__note {
	margin: 14px 0 0;
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.5;
}
/* In a guide: the same block, as an outlined card at reading width. */
.braced-buy--inline {
	box-sizing: border-box;
	max-width: 560px;
	padding: 20px 24px 22px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--base-2);
	box-shadow: var(--wp--preset--shadow--card);
}
.braced-buy--inline .braced-buy__title {
	margin: 0 0 14px;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 750;
}

/* ---------- The one product card (plugin/inc/pages/product.php, braced_product_card()) ----------
 * One object everywhere: home picks, hub picks, gear grids (all gear, brands, search, get-ready
 * "More gear"), related products, the get-ready pick. Anatomy, top to bottom: the tile (4:3,
 * matte, the drawing with the brand and model set in type), a label (blue, small, bold), the
 * name (display face, 18px, 700), the score line, the reason (small, ink 2), spec chips (x-small,
 * ink 2), then at the foot the price (display, 22px, 750, tabular), where it is from and one
 * standard button. Standard form: tile on top. Compact form: tile beside the name, the buy area
 * under both. The outer grid (columns, widths) stays with the page that places the cards.
 */
.braced-card {
	position: relative;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--base-2);
	box-shadow: var(--wp--preset--shadow--card);
	transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.braced-card:hover {
	border-color: color-mix(in srgb, var(--wp--preset--color--line) 50%, var(--wp--preset--color--contrast-2));
	box-shadow: var(--wp--preset--shadow--lift);
	transform: translateY(-2px);
}
/* A list item that holds a card is only its slot: the card is the box. */
:is(.afp-cardrow--cards .afp-pick.has-card, .afp-grid__item, .afp-related__product, .braced-home-pick) {
	display: flex;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	transform: none;
}
:is(.afp-cardrow--cards .afp-pick.has-card, .braced-home-pick):hover {
	border: 0;
	box-shadow: none;
	transform: none;
}

/* The tile. */
.braced-card__media {
	margin: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.braced-tile__link {
	display: block;
	color: inherit;
}
.braced-tile {
	position: relative;
	display: block;
}
.braced-tile .afp-img {
	aspect-ratio: 4 / 3;
	padding: 14% 24% 20%;
	border-radius: 0;
	background: var(--wp--custom--image--matte);
}
.braced-tile.has-mark .afp-img {
	padding-block-end: 26%;
}
.braced-tile__mark {
	position: absolute;
	inset: auto 14px 12px 14px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	color: var(--wp--preset--color--contrast-2);
	line-height: 1.25;
	pointer-events: none;
}
.braced-tile__brand {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
}
.braced-tile__model {
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 750;
	letter-spacing: -0.005em;
}

/* The words. */
.braced-card__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 16px 20px 0;
}
.braced-card__body > * {
	margin: 0;
}
.braced-card__label {
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.01em;
}
.braced-card .braced-card__name {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.125rem !important;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.25;
}
.braced-card__name a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.braced-card__name a:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
/* The whole card opens the product; the buy area sits above that link. */
.braced-card__name a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
}
.braced-card__score {
	display: flex;
	align-items: baseline;
	gap: 4px;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
}
.braced-card__score .afp-score {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 750;
	font-variant-numeric: tabular-nums;
}
.braced-card__why {
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}
.braced-card__specs {
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.55;
}
.braced-score-label {
	margin-inline-end: 2px;
	color: var(--wp--preset--color--contrast-2);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
}

/* The buy area: at the foot, so a row's buttons line up. */
.braced-card__buy {
	position: relative;
	z-index: 1;
	margin-top: auto;
	padding: 16px 20px 20px;
}
.braced-card__buy .afp-buy {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
	margin: 0;
}
.braced-card__buy .afp-buy__price {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.braced-card__buy .afp-price,
.braced-card__buy .afp-price.is-stale {
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.375rem;
	font-weight: 750;
	letter-spacing: -0.01em;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}
.braced-card__buy .afp-checked {
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--x-small);
}
.braced-card__buy .afp-btn {
	width: 100%;
	padding-inline: 12px;
	white-space: normal;
}
.braced-card__buy .afp-region[hidden] {
	display: none;
}
/* The empty "More retailers" slot keeps its height, so every card's button sits at one line. */
.braced-card__buy .afp-buy__more.is-empty {
	display: block;
	min-height: 44px;
}

/* Compact form: the tile beside the name, the buy area under both (get-ready pick, phones). */
.braced-card--compact {
	display: grid;
	grid-template-columns: 7.5rem minmax(0, 1fr);
	grid-template-rows: auto 1fr auto;
	grid-template-areas: "media body" ". body" "buy buy";
	column-gap: 16px;
	padding: 20px 20px 0;
}
.braced-card--compact .braced-card__media {
	grid-area: media;
	overflow: hidden;
	border: 0;
	border-radius: var(--wp--custom--radius--photo);
}
.braced-card--compact .braced-tile .afp-img {
	aspect-ratio: 1 / 1;
	padding: 14% 18% 34%;
}
.braced-card--compact .braced-tile__mark {
	inset: auto 6px 6px 6px;
}
/* On a small square tile the model alone tells products apart. */
.braced-card--compact .braced-tile__brand {
	display: none;
}
.braced-card--compact .braced-tile__model {
	font-size: var(--wp--preset--font-size--x-small);
	overflow-wrap: anywhere;
}
.braced-card--compact .braced-card__body {
	grid-area: body;
	padding: 0;
}
.braced-card--compact .braced-card__buy {
	grid-area: buy;
	margin-top: 16px;
	padding: 16px 0 20px;
	border-top: 1px solid var(--wp--preset--color--line);
}

/* The standard form becomes the compact one on a phone, so a list of cards stays short. */
@media (max-width: 640px) {
	.braced-card:not(.braced-card--compact) {
		display: grid;
		grid-template-columns: 6.5rem minmax(0, 1fr);
		grid-template-rows: auto auto;
		grid-template-areas: "media body" "buy buy";
		column-gap: 14px;
		padding: 16px 16px 0;
	}
	.braced-card:not(.braced-card--compact) .braced-card__media {
		grid-area: media;
		align-self: start;
		overflow: hidden;
		border: 0;
		border-radius: var(--wp--custom--radius--photo);
	}
	.braced-card:not(.braced-card--compact) .braced-tile .afp-img {
		aspect-ratio: 1 / 1;
		padding: 16% 16% 30%;
	}
	.braced-card:not(.braced-card--compact) .braced-tile__mark {
		inset: auto 6px 5px 6px;
	}
	.braced-card .braced-tile__brand {
		display: none; /* At 104px the model alone tells products apart. */
	}
	/* 11px here, so a long model code ("TRD40615E-6A") stays on one line in the 104px tile. */
	.braced-card .braced-tile__model {
		font-size: 0.6875rem;
		letter-spacing: -0.01em;
		overflow-wrap: anywhere;
	}
	.braced-card:not(.braced-card--compact) .braced-tile .afp-img {
		padding-block-end: 34%;
	}
	.braced-card:not(.braced-card--compact) .braced-card__body {
		grid-area: body;
		padding: 0;
	}
	.braced-card:not(.braced-card--compact) .braced-card__buy {
		grid-area: buy;
		padding: 14px 0 16px;
	}
	/* Cards stack on a phone, so there is no row of buttons to line up: no empty slot. */
	.braced-card__buy .afp-buy__more.is-empty {
		display: none;
	}
}
@media (prefers-reduced-motion: reduce) {
	.braced-card,
	.braced-card:hover {
		transition: none;
		transform: none;
	}
}

/* Related products: the row of cards (columns only; the card is the one above). */
.braced-pcards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--50);
	margin: 0;
	padding: 0;
	list-style: none;
}
.braced-pcards:has(> :last-child:nth-child(3)) {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.braced-pcards:has(> :last-child:nth-child(2)) {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* Two cards never sit in a half-empty row of four: they take the compact form, side by side. */
@media (min-width: 641px) {
	.braced-pcards:has(> :last-child:nth-child(2)) .braced-card {
		display: grid;
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
		grid-template-rows: auto 1fr;
		grid-template-areas: "media body" "media buy";
	}
	.braced-pcards:has(> :last-child:nth-child(2)) .braced-card__media {
		grid-area: media;
		display: flex;
		align-items: center;
		border-bottom: 0;
		border-inline-end: 1px solid var(--wp--preset--color--line);
		background: var(--wp--custom--image--matte);
	}
	.braced-pcards:has(> :last-child:nth-child(2)) .braced-tile__link {
		width: 100%;
	}
	.braced-pcards:has(> :last-child:nth-child(2)) .braced-card__body {
		grid-area: body;
	}
	.braced-pcards:has(> :last-child:nth-child(2)) .braced-card__buy {
		grid-area: buy;
	}
}
@media (max-width: 1000px) {
	.braced-pcards,
	.braced-pcards:has(> :last-child:nth-child(3)) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 640px) {
	.braced-pcards,
	.braced-pcards:has(> :last-child:nth-child(3)),
	.braced-pcards:has(> :last-child:nth-child(2)) {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Buttons on product surfaces: the standard button (48px, 16px, 650); the product page's price
   block keeps its larger hero action. */
.afp-btn {
	min-height: 48px;
	padding: 0.75rem 1.375rem;
	font-size: 1rem;
	font-weight: 650;
}
/* Quiet links under a button get a 44px target without looking heavier (rule 10). */
.afp-buy__more,
.afp-retail__compare {
	display: inline-flex;
	align-items: center;
	align-self: center;
	min-height: 44px;
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
}
.afp-inline__name {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}
/* Spec chips: a separator is never the first thing on a line. */
.afp-specchips {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 0;
}
.afp-specchips li + li::before {
	content: none;
}
.afp-specchips li:not(:last-child)::after {
	content: "\00a0·\00a0";
	color: var(--wp--preset--color--contrast-2);
}

/* Pros and cons: one look everywhere (product pages, guides): two cards titled "Pros" and
   "Cons" in the display face, never small capitals. */
.afp-pc .afp-pc__cols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40);
}
/* On white the cards are tinted (theme.json clears this block's hairlines); on a tint band the
   product page sets them white. */
.afp-pc .afp-pc__col {
	margin: 0;
	padding: var(--wp--preset--spacing--50);
	border: 0;
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--base-3);
}
:is(.afp-pc__title, .afp-pc__eyebrow) {
	margin: 0 0 var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 750;
	letter-spacing: -0.01em;
	text-transform: none;
}
.afp-pc .afp-pc__list {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
}
@media (max-width: 640px) {
	.afp-pc .afp-pc__cols {
		grid-template-columns: minmax(0, 1fr);
	}
	.afp-pc .afp-pc__col {
		padding: var(--wp--preset--spacing--40);
	}
}

/* Comparison tables: no legend; no thumbnails (with no photos they were five identical
   drawings); the heads share one baseline. */
.afp-cmp__corner .afp-cmp__legend,
.afp-cmp__thumb {
	display: none;
}
.afp-cmp__table thead th.afp-cmp__head {
	vertical-align: top;
}
/* In a table cell the tag sits under the button, so the row's buttons line up. */
.afp-cmp__buy td {
	vertical-align: top;
}
.afp-cmp__buy div.braced-region-fill:not([hidden]) {
	display: flex;
	flex-direction: column-reverse;
	align-items: stretch;
	gap: 6px;
}
.afp-cmp__buy div.braced-region-fill > .braced-elsewhere {
	align-self: flex-start;
}
.afp-cmp__buy div.braced-region-fill > .braced-elsewhere {
	margin: 0;
}

/* Top pick and inline mention: tabular prices. */
:is(.afp-toppick, .afp-inline) .afp-price {
	font-variant-numeric: tabular-nums;
}

/* Ranked pick rows (afp/card-row, list layout, in guides): a ranked list, not a row of cards,
   but each part reads as the card does: label, name, reason, chips, price and button. */
.afp-cardrow--list .afp-pick .afp-badge {
	font-size: var(--wp--preset--font-size--x-small);
}
.afp-cardrow--list .afp-pick__name {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.125rem !important;
	font-weight: 700;
	line-height: 1.25;
}
.afp-cardrow--list .afp-pick__name a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.afp-cardrow--list .afp-pick__verdict {
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}
.afp-cardrow--list .afp-specline,
.afp-cardrow--list .afp-specchips {
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--x-small);
}
.afp-cardrow--list .afp-pick__buy .afp-price {
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.375rem;
	font-weight: 750;
	font-variant-numeric: tabular-nums;
}
.afp-cardrow--list .afp-pick .afp-img {
	background: var(--wp--custom--image--matte);
}

/* The ranked list's button column is 236px: the card's side padding keeps the label on one line. */
.afp-cardrow--list .afp-pick__buy .afp-btn {
	padding-inline: 12px;
}

/* Two hub picks take the compact form (tile beside the name, buy area under both), so the
   picture tile does not grow with the wider column. */
@container (min-width: 721px) {
	.afp-cardrow__items:has(> .has-card:last-child:nth-child(2)) .braced-card {
		display: grid;
		grid-template-columns: 7.5rem minmax(0, 1fr);
		grid-template-rows: auto 1fr auto;
		grid-template-areas: "media body" ". body" "buy buy";
		column-gap: 16px;
		padding: 20px 20px 0;
	}
	.afp-cardrow__items:has(> .has-card:last-child:nth-child(2)) .braced-card__media {
		grid-area: media;
		overflow: hidden;
		border: 0;
		border-radius: var(--wp--custom--radius--photo);
	}
	.afp-cardrow__items:has(> .has-card:last-child:nth-child(2)) .braced-tile .afp-img {
		aspect-ratio: 1 / 1;
		padding: 14% 18% 34%;
	}
	.afp-cardrow__items:has(> .has-card:last-child:nth-child(2)) .braced-tile__mark {
		inset: auto 6px 6px 6px;
	}
	.afp-cardrow__items:has(> .has-card:last-child:nth-child(2)) .braced-tile__brand {
		display: none;
	}
	.afp-cardrow__items:has(> .has-card:last-child:nth-child(2)) .braced-tile__model {
		font-size: var(--wp--preset--font-size--x-small);
		overflow-wrap: anywhere;
	}
	.afp-cardrow__items:has(> .has-card:last-child:nth-child(2)) .braced-card__body {
		grid-area: body;
		padding: 0;
	}
	/* No hairline over the buy area here: two cards' buy areas differ in height (one has a
	   price, one has not), and two hairlines at different heights read as a mistake. */
	.afp-cardrow__items:has(> .has-card:last-child:nth-child(2)) .braced-card__buy {
		grid-area: buy;
		margin-top: 16px;
		padding: 0 0 20px;
	}
}

/* Hub picks in a narrow container: afp-core folds its own cards into one boxed list; the one
   card is already a box, so the row becomes a plain column of cards. */
@container (max-width: 720px) {
	.afp-cardrow--cards .afp-cardrow__items:has(> .has-card) {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--40);
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
		box-shadow: none;
	}
	.afp-cardrow .afp-pick.has-card {
		display: flex;
		padding: 0;
		border: 0;
		overflow: visible;
	}
}

/* Two-product comparison (afp/versus, on two-pick gear types): a row where both are the same says
   so by its equal values, so the "Tie" label goes (kept for screen readers); only a real
   difference carries the check. */
.afp-vs__tie {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}