/* Advertentiegrens (ad limit), the feature page (scripts/ad-limit-page.py, 9 Nov 2026).
 * The hero's figure is the screen in short: a table of five demo products with profit per unit,
 * break-even ACoS and target ACoS with its group, in the frame of every feature page's screen
 * (.fa-shot-frame, feature-art.css). Under the steps the campaigns per group with their buttons.
 * Colours from the site's tokens, so light and dark follow sellgrip.css. */
.al-box {
	padding: 4px 0 6px;
	font-variant-numeric: tabular-nums;
}
.al-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 16px;
	margin: 0;
	padding: 14px 18px 12px;
	border-bottom: 1px solid var(--line);
}
.al-head strong {
	font-size: 1rem;
	color: var(--ink);
}
.al-head span {
	font-size: 0.8125rem;
	color: var(--muted);
}
.al-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.875rem;
	line-height: 1.35;
}
.al-table th,
.al-table td {
	padding: 10px 18px;
	text-align: left;
	vertical-align: middle;
	border-bottom: 1px solid var(--line);
}
.al-table tbody tr:last-child th,
.al-table tbody tr:last-child td {
	border-bottom: 0;
}
.al-table thead th {
	padding-top: 10px;
	padding-bottom: 8px;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--muted);
	white-space: nowrap;
}
.al-table tbody th {
	font-weight: 600;
	color: var(--ink);
}
.al-table tbody th small {
	display: block;
	margin-top: 1px;
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--muted);
}
.al-table .al-num {
	text-align: right;
	white-space: nowrap;
	color: var(--graphite);
}
.al-target strong {
	display: block;
	font-size: 1rem;
	color: var(--ink);
}
.al-group {
	display: inline-block;
	margin-top: 2px;
	padding: 1px 7px;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: 0.75rem;
	color: var(--muted);
}
.al-table .al-flag {
	text-align: right;
	font-size: 0.8125rem;
	color: var(--muted);
}
.al-flag span {
	display: inline-block;
	padding: 2px 8px;
	border: 1px dashed var(--line);
	border-radius: 6px;
}
.al-noad .al-flag span {
	border-style: solid;
	color: var(--red-text);
}

/* The campaigns per group: one row per Kaufland range. */
.al-groups {
	max-width: 760px;
	margin: 32px 0 0;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--card);
	font-variant-numeric: tabular-nums;
}
.al-groups-h {
	margin: 0;
	padding: 12px 18px;
	border-bottom: 1px solid var(--line);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--ink);
}
.al-groups ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.al-groups li {
	display: grid;
	grid-template-columns: 5.5rem 1fr auto auto;
	align-items: center;
	gap: 8px 16px;
	padding: 10px 18px;
	border-bottom: 1px solid var(--line);
	font-size: 0.875rem;
}
.al-groups li:last-child {
	border-bottom: 0;
}
.al-range {
	font-weight: 650;
	color: var(--ink);
}
.al-n,
.al-t {
	color: var(--muted);
}
.al-t strong {
	color: var(--ink);
}
.al-btns {
	display: flex;
	gap: 6px;
}
.al-btn {
	padding: 3px 10px;
	border: 1px solid var(--line);
	border-radius: 6px;
	font-size: 0.8125rem;
	color: var(--ink);
	white-space: nowrap;
}
.al-groups figcaption {
	padding: 0 18px 12px;
	font-size: 0.8125rem;
	color: var(--muted);
}

/* The VAT footnote under the facts. */
.al-note {
	max-width: 760px;
	margin: 20px 0 6px;
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--graphite);
}

@media (max-width: 699px) {
	.al-table .al-profit {
		display: none;
	}
	.al-table th,
	.al-table td {
		padding: 9px 12px;
	}
	.al-head {
		padding: 12px;
	}
	.al-groups li {
		grid-template-columns: 1fr auto;
		padding: 10px 12px;
	}
	.al-btns {
		grid-column: 1 / -1;
	}
	.al-groups-h,
	.al-groups figcaption {
		padding-left: 12px;
		padding-right: 12px;
	}
}