/* Affiliate Boxes – front end. Colours come from Settings as CSS variables. */
:root {
	--afb-accent: #1f6feb;
	--afb-btn: #f59e0b;
	--afb-btn-text: #111827;
}

.afb-box,
.afb-compare,
.afb-disclosure,
.afb-notice {
	--afb-border: color-mix(in srgb, currentColor 14%, transparent);
	--afb-muted: color-mix(in srgb, currentColor 62%, transparent);
	--afb-soft: color-mix(in srgb, currentColor 4%, transparent);
	--afb-radius: 10px;
	--afb-good: #15803d;
	--afb-bad: #b91c1c;
	box-sizing: border-box;
}
.afb-box *,
.afb-compare * { box-sizing: border-box; }

/* ---------- Disclosure / notices ---------- */
.afb-disclosure {
	font-size: 0.8125em;
	color: var(--afb-muted);
	margin: 0 0 1em;
}
.afb-notice {
	border: 1px dashed var(--afb-bad);
	color: var(--afb-bad);
	padding: 0.5em 0.75em;
	font-size: 0.875em;
	border-radius: 6px;
}

/* ---------- Button ---------- */
.afb-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 0.7em 1.15em;
	background: var(--afb-btn);
	color: var(--afb-btn-text) !important;
	border-radius: 8px;
	font-weight: 600;
	font-size: 0.9375em;
	line-height: 1.2;
	text-decoration: none !important;
	text-align: center;
	white-space: nowrap;
	transition: filter 0.15s ease, transform 0.15s ease;
}
.afb-button:hover,
.afb-button:focus-visible { filter: brightness(0.93); }
.afb-button:active { transform: translateY(1px); }
.afb-button:focus-visible { outline: 2px solid var(--afb-accent); outline-offset: 2px; }
.afb-button-arrow { transition: transform 0.15s ease; }
.afb-button:hover .afb-button-arrow { transform: translateX(2px); }
.afb-inline-button { display: inline-block; margin: 0.25em 0; }

/* ---------- Badge ---------- */
.afb-badge {
	display: inline-block;
	background: var(--afb-accent);
	color: #fff;
	font-size: 0.75em;
	font-weight: 700;
	letter-spacing: 0.02em;
	padding: 0.3em 0.7em;
	border-radius: 999px;
	line-height: 1.3;
}

/* ---------- Rating ---------- */
.afb-rating {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.4em;
	font-size: 0.875em;
}
.afb-rating-label { color: var(--afb-muted); }
.afb-rating-num { font-weight: 600; }
.afb-stars {
	position: relative;
	display: inline-block;
	width: 5.5em;
	height: 1.1em;
	background: 0 0 / 1.1em 1.1em repeat-x
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23d1d5db' d='M12 2.5l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 17.3l-5.9 3.3 1.3-6.6-4.9-4.6 6.6-.8z'/%3E%3C/svg%3E");
}
.afb-stars-fill {
	position: absolute;
	inset: 0 auto 0 0;
	background: 0 0 / 1.1em 1.1em repeat-x
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f59e0b' d='M12 2.5l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 17.3l-5.9 3.3 1.3-6.6-4.9-4.6 6.6-.8z'/%3E%3C/svg%3E");
}

/* ---------- Images ---------- */
.afb-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	margin: 0 auto;
}
.afb-image-link { display: block; height: 100%; }
.afb-image-placeholder {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	background: var(--afb-soft);
	border-radius: 6px;
}

/* ---------- Product box ---------- */
.afb-box-wrap { container-type: inline-size; margin: 0 0 1.5em; }
.afb-box {
	position: relative;
	display: grid;
	grid-template-columns: 180px 1fr;
	grid-template-areas: "media body" "media cta";
	gap: 0.5em 1.5em;
	border: 1px solid var(--afb-border);
	border-radius: var(--afb-radius);
	padding: 1.5em;
	margin: 0;
	line-height: 1.5;
}
.afb-box.afb-has-badge { padding-top: 2.25em; }
.afb-box > .afb-badge {
	position: absolute;
	top: -0.75em;
	left: 1.25em;
}
.afb-box-media {
	grid-area: media;
	height: 180px;
	align-self: start;
}
.afb-box-body { grid-area: body; min-width: 0; }
.afb-box-cta { grid-area: cta; align-self: end; }
.afb-box-title {
	font-size: 1.125em;
	font-weight: 700;
	line-height: 1.35;
	margin: 0 0 0.35em;
}
.afb-box-title a { color: inherit; text-decoration: none; }
.afb-box-title a:hover { color: var(--afb-accent); text-decoration: underline; }

.afb-bullets {
	margin: 0.75em 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.9375em;
}
.afb-bullets li {
	position: relative;
	padding-left: 1.1em;
	margin: 0 0 0.3em;
}
.afb-bullets li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 0.4em;
	height: 0.4em;
	border-radius: 50%;
	background: var(--afb-accent);
}

.afb-keyspecs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 0.5em;
	margin: 0.9em 0 0;
	padding: 0;
	font-size: 0.875em;
}
.afb-keyspecs > div {
	background: var(--afb-soft);
	border-radius: 6px;
	padding: 0.45em 0.65em;
	min-width: 0;
}
.afb-keyspecs dt {
	font-size: 0.8em;
	color: var(--afb-muted);
	margin: 0;
	font-weight: 500;
}
.afb-keyspecs dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

.afb-proscons {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1em;
	margin: 1em 0 0;
	font-size: 0.9375em;
}
.afb-proscons-title {
	font-weight: 700;
	font-size: 0.875em;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: 0 0 0.3em;
}
.afb-pros-wrap .afb-proscons-title { color: var(--afb-good); }
.afb-cons-wrap .afb-proscons-title { color: var(--afb-bad); }
.afb-pros,
.afb-cons { list-style: none; margin: 0; padding: 0; }
.afb-pros li,
.afb-cons li { position: relative; padding-left: 1.3em; margin: 0 0 0.3em; }
.afb-pros li::before,
.afb-cons li::before {
	position: absolute;
	left: 0;
	top: 0;
	font-weight: 700;
}
.afb-pros li::before { content: "+"; color: var(--afb-good); }
.afb-cons li::before { content: "−"; color: var(--afb-bad); }

.afb-box-cta { margin-top: 1em; }

/* Compact box */
.afb-box--compact {
	grid-template-columns: 96px 1fr auto;
	grid-template-areas: "media body cta";
	align-items: center;
	padding: 1em 1.25em;
}
.afb-box--compact.afb-has-badge { padding-top: 1.5em; }
.afb-box--compact .afb-box-media { height: 96px; align-self: center; }
.afb-box--compact .afb-box-cta { margin: 0; align-self: center; }
.afb-box--compact .afb-box-title { font-size: 1em; }

@container (max-width: 720px) {
	.afb-box--compact {
		grid-template-columns: 96px 1fr;
		grid-template-areas: "media body" "media cta";
	}
	.afb-box--compact .afb-box-cta { margin-top: 0.5em; align-self: start; }
}
@container (max-width: 560px) {
	.afb-box,
	.afb-box--compact {
		grid-template-columns: 1fr;
		grid-template-areas: "media" "body" "cta";
		padding: 1.25em;
	}
	.afb-box.afb-has-badge { padding-top: 2em; }
	.afb-box-media,
	.afb-box--compact .afb-box-media { height: 200px; }
	.afb-box-cta .afb-button { width: 100%; }
	.afb-proscons { grid-template-columns: 1fr; }
}
/* Fallback for browsers without container queries. */
@supports not (container-type: inline-size) {
	@media (max-width: 600px) {
		.afb-box,
		.afb-box--compact { grid-template-columns: 1fr; grid-template-areas: "media" "body" "cta"; }
		.afb-box-cta .afb-button { width: 100%; }
		.afb-proscons { grid-template-columns: 1fr; }
	}
}

/* ---------- Grid: cards side by side ---------- */
.afb-grid {
	--afb-gap: 1.25em;
	display: grid;
	/* Never more than --afb-cols columns; cards wrap when narrower than 180px. */
	grid-template-columns: repeat(auto-fit, minmax(max(180px, calc((100% - (var(--afb-cols, 3) - 1) * var(--afb-gap)) / var(--afb-cols, 3))), 1fr));
	gap: var(--afb-gap);
	margin: 0 0 1.5em;
	padding-top: 0.75em;
}
.afb-grid > .afb-box-wrap { margin: 0; display: flex; }
.afb-box.afb-box--grid {
	flex: 1;
	grid-template-columns: 1fr;
	grid-template-rows: auto 1fr auto;
	grid-template-areas: "media" "body" "cta";
	gap: 0.75em;
	padding: 1.1em 1em;
	font-size: 0.9375em;
}
.afb-box--grid.afb-has-badge { padding-top: 1.75em; }
.afb-box--grid .afb-button-arrow { display: none; }
.afb-box--grid > .afb-badge { left: 50%; transform: translateX(-50%); white-space: nowrap; }
.afb-box--grid .afb-box-media { height: 150px; }
.afb-box--grid .afb-box-title { font-size: 1.0625em; text-align: center; }
.afb-box--grid .afb-rating { display: flex; justify-content: center; row-gap: 0.15em; }
.afb-box--grid .afb-rating-label { flex-basis: 100%; text-align: center; font-size: 0.875em; }
.afb-box--grid .afb-keyspecs { grid-template-columns: 1fr; gap: 0; background: var(--afb-soft); border-radius: 6px; padding: 0.25em 0.75em; }
.afb-box--grid .afb-keyspecs > div {
	display: block;
	background: none;
	padding: 0.4em 0;
	border-bottom: 1px solid var(--afb-border);
	border-radius: 0;
}
.afb-box--grid .afb-keyspecs > div:last-child { border-bottom: 0; }
.afb-box--grid .afb-keyspecs dt { font-size: 0.8em; }
.afb-box--grid .afb-box-cta { margin: 0; }
.afb-box--grid .afb-button { width: 100%; white-space: normal; padding: 0.65em 0.6em; font-size: 0.9em; }

/* ---------- List: numbered ranking ---------- */
.afb-list { list-style: none; margin: 0 0 1.5em; padding: 0 !important; }
.afb-list > .afb-box-wrap { margin: 0 0 1em; padding: 0; }
.afb-list > .afb-box-wrap::before,
.afb-list > .afb-box-wrap::marker { content: none; }
.afb-box.afb-box--list {
	grid-template-columns: 2.25em 120px 1fr auto;
	grid-template-areas: "rank media body cta";
	align-items: center;
	gap: 0.5em 1.25em;
	padding: 1.25em;
}
.afb-box--list.afb-has-badge { padding-top: 1.75em; }
.afb-rank {
	grid-area: rank;
	align-self: center;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25em;
	height: 2.25em;
	border-radius: 50%;
	background: var(--afb-accent);
	color: #fff;
	font-weight: 700;
	font-size: 1em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.afb-box--list .afb-box-media { height: 100px; align-self: center; }
.afb-box--list .afb-box-title { font-size: 1.0625em; }
.afb-box--list .afb-bullets { margin-top: 0.4em; }
.afb-box--list .afb-box-cta { margin: 0; align-self: center; }

@container (max-width: 720px) {
	.afb-box.afb-box--list {
		grid-template-columns: 2.25em 100px 1fr;
		grid-template-areas: "rank media body" "rank media cta";
	}
	.afb-box--list .afb-box-cta { align-self: start; }
}
@container (max-width: 560px) {
	.afb-box.afb-box--list {
		grid-template-columns: 84px 1fr;
		grid-template-areas: "media body" "cta cta";
		padding: 1.25em 1em 1em;
		gap: 0.75em 1em;
	}
	.afb-box--list .afb-box-media { height: 84px; }
	.afb-box--list .afb-rank {
		position: absolute;
		top: -0.6em;
		right: 0.75em;
		width: 1.9em;
		height: 1.9em;
		font-size: 0.9em;
	}
	.afb-box--list .afb-bullets { display: none; }
	.afb-box--list .afb-box-cta .afb-button { width: 100%; }
	.afb-box.afb-box--grid { padding: 1.25em; }
	.afb-box--grid .afb-box-media { height: 170px; }
}

/* ---------- Comparison table ---------- */
.afb-compare {
	container-type: inline-size;
	margin: 0 0 1.5em;
	line-height: 1.45;
}
.afb-table-scroll {
	overflow-x: auto;
	border: 1px solid var(--afb-border);
	border-radius: var(--afb-radius);
}
.afb-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	margin: 0 !important;
	border: 0 !important;
	font-size: 0.9375em;
	table-layout: fixed;
}
.afb-table th,
.afb-table td {
	border: 0 !important;
	border-top: 1px solid var(--afb-border) !important;
	padding: 0.75em 0.6em;
	text-align: center;
	vertical-align: middle;
	background: transparent;
}
.afb-table thead th,
.afb-table thead td { border-top: 0 !important; vertical-align: top; padding-top: 1.75em; }
.afb-table tbody th {
	text-align: left;
	font-weight: 600;
	color: var(--afb-muted);
	font-size: 0.875em;
	width: 8em;
	padding-left: 1em;
}
.afb-table .afb-th-blank { width: 8em; }
.afb-table tbody tr:nth-child(even) > * { background: var(--afb-soft); }
.afb-col-head { position: relative; font-weight: 400; }
.afb-col-head .afb-badge {
	position: absolute;
	top: 0.5em;
	left: 50%;
	transform: translateX(-50%);
	width: max-content;
	max-width: calc(100% - 0.75em);
	white-space: normal;
}
.afb-table-image { height: 130px; margin: 0.5em auto 0.75em; max-width: 170px; }
.afb-table-title { display: block; font-weight: 700; line-height: 1.3; }
.afb-title-link { color: inherit; text-decoration: none; }
.afb-title-link:hover { color: var(--afb-accent); text-decoration: underline; }
.afb-table .afb-rating { justify-content: center; }
.afb-row-cta td { padding-top: 1em; padding-bottom: 1.25em; }
.afb-table .afb-button { white-space: normal; width: 100%; max-width: 15em; padding: 0.6em 0.5em; font-size: 0.875em; }
.afb-table .afb-button-arrow { display: none; }

/* Highlighted column */
.afb-table .afb-hl {
	background: color-mix(in srgb, var(--afb-accent) 7%, transparent) !important;
	box-shadow: inset 2px 0 0 var(--afb-accent), inset -2px 0 0 var(--afb-accent);
}
.afb-table thead .afb-hl { box-shadow: inset 2px 0 0 var(--afb-accent), inset -2px 0 0 var(--afb-accent), inset 0 2px 0 var(--afb-accent); }
.afb-table .afb-row-cta .afb-hl { box-shadow: inset 2px 0 0 var(--afb-accent), inset -2px 0 0 var(--afb-accent), inset 0 -2px 0 var(--afb-accent); }

/* Mobile cards */
.afb-cards { display: none; }
.afb-card {
	position: relative;
	border: 1px solid var(--afb-border);
	border-radius: var(--afb-radius);
	padding: 1.25em;
	margin: 0 0 1em;
}
.afb-card.afb-hl { border: 2px solid var(--afb-accent); }
.afb-card > .afb-badge { position: absolute; top: -0.75em; left: 1em; }
.afb-card-head { display: flex; gap: 1em; align-items: center; }
.afb-card-image { flex: 0 0 84px; height: 84px; }
.afb-card-title { font-weight: 700; margin: 0 0 0.25em; line-height: 1.3; }
.afb-card .afb-keyspecs { grid-template-columns: 1fr 1fr; }
.afb-card .afb-button { width: 100%; margin-top: 1em; white-space: normal; }

@container (max-width: 600px) {
	.afb-table-scroll { display: none; }
	.afb-cards { display: block; }
}
@supports not (container-type: inline-size) {
	@media (max-width: 640px) {
		.afb-table-scroll { display: none; }
		.afb-cards { display: block; }
	}
}

@media (prefers-reduced-motion: reduce) {
	.afb-button,
	.afb-button-arrow { transition: none; }
}

/* ---------- Live price (API mode) ---------- */
.afb-price { margin: 0 0 0.75em; line-height: 1.3; }
.afb-price-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2em 0.5em; }
.afb-price-now { font-size: 1.375em; font-weight: 700; font-variant-numeric: tabular-nums; }
.afb-price-was { color: var(--afb-muted); font-size: 0.9375em; font-variant-numeric: tabular-nums; }
.afb-save {
	font-size: 0.8125em;
	font-weight: 700;
	color: var(--afb-bad);
	background: color-mix(in srgb, var(--afb-bad) 10%, transparent);
	border-radius: 4px;
	padding: 0.1em 0.4em;
}
.afb-deal {
	flex-basis: 100%;
	font-size: 0.75em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--afb-bad);
}
.afb-price-unavailable,
.afb-price-map { font-weight: 600; color: var(--afb-muted); }
.afb-price-note { display: block; margin-top: 0.25em; font-size: 0.75em; color: var(--afb-muted); }
.afb-price-note a { color: inherit; }
.afb-price--compact .afb-price-now { font-size: 1.125em; }
.afb-price--cell { margin: 0; }
.afb-price--cell .afb-price-row { justify-content: center; }
.afb-price--cell .afb-price-now { font-size: 1.0625em; }
.afb-table .afb-price-note { font-size: 0.7em; }
.afb-box--grid .afb-price,
.afb-card .afb-price { text-align: center; }
.afb-box--grid .afb-price-row,
.afb-card .afb-price-row { justify-content: center; }
.afb-card .afb-price { margin-top: 1em; margin-bottom: 0; }
.afb-inline-price .afb-price { display: inline-block; margin: 0; }
.afb-box--compact .afb-box-cta,
.afb-box--list .afb-box-cta { text-align: right; }
.afb-box--compact .afb-price-row,
.afb-box--list .afb-price-row { justify-content: flex-end; }
@container (max-width: 560px) {
	.afb-box--compact .afb-box-cta,
	.afb-box--list .afb-box-cta { text-align: left; }
	.afb-box--compact .afb-price-row,
	.afb-box--list .afb-price-row { justify-content: flex-start; }
}

.afb-amazon-notice {
	--afb-muted: color-mix(in srgb, currentColor 62%, transparent);
	margin: 2em 0 1em;
	padding-top: 1em;
	border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent);
	font-size: 0.75em;
	color: var(--afb-muted);
}
.afb-amazon-notice p { margin: 0 0 0.5em; }
.afb-amazon-notice:target { outline: 2px solid var(--afb-accent); outline-offset: 6px; border-radius: 4px; }