/*!
 * Affiliate Box for Amazon
 * Public stylesheet
 * License: GPLv2 or later (https://www.gnu.org/licenses/gpl-2.0.html)
 */

.abfa-outer {
	margin: 1.5em 0;
	display: flex;
	justify-content: center;
}

.abfa-box {
	display: flex;
	align-items: center;
	gap: 1.5em;
	max-width: 640px;
	width: 100%;
	padding: 18px 20px;
	/* Dieselbe Linie und derselbe Radius wie Raster und Vergleichstabelle -
	   drei Grautoene fuer denselben Rahmen lesen sich als drei Bauteile. */
	border: 1px solid var(--abfa-line, #e3e6ea);
	border-radius: var(--abfa-radius, 12px);
	box-shadow: 0 1px 2px rgba(20, 24, 36, .05), 0 6px 20px rgba(20, 24, 36, .05);
	box-sizing: border-box;
	/*
	 * Font family inherited, not imposed. The box sits in the middle of an
	 * article; forcing the system stack made it read as a widget pasted into
	 * the prose while the grid and the comparison table, which inherit, read
	 * as part of it. Size, weight and tracking are still set here — only the
	 * family is left to the theme.
	 */
	color: var(--abfa-ink, #1a1d21);
}

@media (prefers-reduced-motion: no-preference) {
	.abfa-box {
		transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
	}
	.abfa-box:hover {
		box-shadow: 0 8px 22px rgba(20, 24, 36, 0.09);
		border-color: #d4d7db;
		transform: translateY(-1px);
	}
}

.abfa-box .abfa-image {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

.abfa-box .abfa-image img {
	max-width: 100%;
	height: auto;
	display: block;
	border-radius: 6px;
}

/* Image sizes cap against both a px ceiling and the viewport width so they
 * never dominate a narrow screen. min() keeps the smaller of the two. */
.abfa-img-small .abfa-image img  { max-width: min(90px, 30vw); }
.abfa-img-medium .abfa-image img { max-width: min(140px, 35vw); }
.abfa-img-large .abfa-image img  { max-width: min(200px, 40vw); }

.abfa-box .abfa-content {
	flex: 1 1 auto;
	min-width: 0;
}

/*
 * Slightly smaller and tighter than it was. At 1.1em of an 18px theme the
 * title ran to 20px bold over three lines and outweighed everything under it —
 * including the price, which is what the reader came for. It is still the
 * largest thing in the box, just no longer the loudest.
 */
.abfa-box .abfa-title {
	margin: 0 0 .35em 0;
	font-size: 1.02em;
	line-height: 1.3;
	font-weight: 600;
	letter-spacing: -0.005em;
	/* Break very long unbreakable tokens (model numbers, URLs) so the
	 * title can never overflow a narrow container. */
	overflow-wrap: anywhere;
	word-break: break-word;
	/* Cap at 3 lines so very long Amazon titles don't push the CTA off
	 * the viewport on narrow screens. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.abfa-box .abfa-title a {
	color: inherit;
	text-decoration: none;
}

.abfa-box .abfa-title a:hover {
	text-decoration: underline;
}

/* --- Rating ------------------------------------------------------------ */

.abfa-box .abfa-rating {
	display: flex;
	align-items: center;
	gap: .4em;
	margin-bottom: .5em;
	line-height: 1;
}

.abfa-box .abfa-stars {
	color: #FFA41C;
	font-size: 1.05em;
	letter-spacing: .04em;
}

/* The half star is a full glyph clipped to its left half, so it lines up
   with the full stars instead of relying on a separate half-star glyph
   that many system fonts do not carry. */
.abfa-box .abfa-star-half {
	display: inline-block;
	width: .5em;
	overflow: hidden;
	vertical-align: top;
}

.abfa-box .abfa-rating-value {
	font-size: .85em;
	opacity: .75;
}

/* How many reviews the average stands on. Quieter than the average itself —
   it qualifies the number rather than competing with it. */
.abfa-box .abfa-rating-count {
	font-size: .8em;
	opacity: .6;
	font-variant-numeric: tabular-nums;
}

.abfa-box .abfa-price {
	font-size: 1.15em;
	font-weight: 800;
	color: var(--abfa-price, #b12704);
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
	margin-bottom: .85em;
}

/* --- Product Box Pro additions ----------------------------------------- */
/*
 * Brand line, crossed-out price and savings badge exist only in Product Box
 * Pro; the plain box has no fields for them. Until 2.1.18 all three were
 * styled with hardcoded inline CSS, which no stylesheet could reach — so they
 * kept their old grey and crimson while everything around them was redesigned,
 * and a dark box background left the grey brand line barely readable.
 *
 * currentColor for the brand and the old price means both follow the box's own
 * text colour, whatever it is set to, instead of assuming the box is white.
 */
.abfa-box .abfa-pbp-brand {
	margin-bottom: .2em;
	font-size: .72em;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: currentColor;
	opacity: .6;
}

.abfa-box .abfa-pbp-price-wrap {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 8px;
}

.abfa-box .abfa-pbp-price-old {
	font-size: .72em;
	font-weight: 400;
	color: currentColor;
	opacity: .6;
	text-decoration: line-through;
	font-variant-numeric: tabular-nums;
}

.abfa-box .abfa-pbp-save-badge {
	padding: 2px 6px;
	border-radius: 4px;
	background: var(--abfa-price, #b12704);
	color: #ffffff;
	font-size: .62em;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .01em;
	white-space: nowrap;
}

.abfa-box .abfa-button-wrap {
	margin-top: .5em;
}

/*
 * The last element still wearing the old style. The grid and the comparison
 * table were flattened in 2.1.16–2.1.19 — no gradient, no bevel, an 8px corner
 * and dark ink — while this one kept a pill with a border and a shadow. Three
 * treatments of the same button across one plugin read as three plugins.
 *
 * Dark ink, not the near-black #111 it had: on #ff9900 this reaches 7.4:1,
 * and white would have been 2.1:1 — below AA — which is why it was never white.
 */
.abfa-box .abfa-button {
	display: inline-flex;
	align-items: center;
	gap: .45em;
	padding: .68em 1.15em;
	border-radius: 8px;
	color: #1a1d21;
	background-color: #ff9900;
	text-decoration: none;
	font-weight: 700;
	font-size: .92em;
	line-height: 1.2;
	letter-spacing: .1px;
	border: 0;
	box-shadow: 0 1px 2px rgba(20, 24, 36, 0.10);
}

.abfa-box .abfa-button:hover {
	background-color: #f08804;
	color: #1a1d21;
	text-decoration: none;
	box-shadow: 0 2px 8px rgba(240, 136, 4, .30);
}

/* Accessible keyboard focus ring (independent of theme defaults). */
.abfa-box .abfa-button:focus-visible {
	outline: 2px solid #005fcc;
	outline-offset: 2px;
	background-color: #f08804;
	text-decoration: none;
}

/* Only animate for users who have not asked for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
	/* filter and transform are gone from the button, so animating them was
	   animating nothing. It changes colour now, like the other two. */
	.abfa-box .abfa-button {
		transition: background-color .15s ease-in-out, box-shadow .15s ease-in-out;
	}
}

.abfa-box .abfa-button-icon {
	flex: 0 0 auto;
}

/*
 * Gedeckelt, nicht bloss relativ.
 *
 * ".74em" klingt klein, ist aber .74 von dem, was das Theme gerade fuer gross
 * haelt: In einem Block-Theme mit 21px Grundschrift wurden daraus 15.9px, und
 * damit war die Pflichtzeile der schwerste graue Block der Karte - fast so
 * gross wie der Fliesstext daneben, obwohl sie eine Fussnote ist.
 *
 * Der Deckel liegt bei 13px und nicht tiefer: Amazon verlangt die Offenlegung
 * "clear and conspicuous". Sie soll leiser sein als der Kasten, aber nicht
 * verstecken, wofuer sie da ist. Der Boden bei 10px haelt sie in einem Theme
 * mit winziger Grundschrift lesbar - ohne "px" waere beides nicht zu haben,
 * denn em skaliert genau das mit, wovor gedeckelt werden soll.
 */
.abfa-box .abfa-disclosure {
	margin: .8em 0 0 0;
	font-size: clamp(10px, .74em, 13px);
	color: var(--abfa-muted, #6b7280);
	line-height: 1.45;
}

/* Sidebar / vertical layout */
.abfa-layout-sidebar {
	flex-direction: column;
	text-align: center;
	/*
	 * 400px, nicht 320px. Gemessen an sieben Spaltenbreiten: ab 340px wuchs
	 * die Box nicht mehr mit, und in einer 420er Seitenleiste blieben 100px
	 * ungenutzt - die Box stand mit Luft links und rechts neben Widgets des
	 * Themes, die die Spalte fuellen. Eine Deckelung braucht es trotzdem,
	 * sonst wird die Box in einer breiten Fussspalte zur Saeule.
	 */
	max-width: 400px;
}

.abfa-layout-sidebar .abfa-content {
	width: 100%;
}

.abfa-layout-sidebar .abfa-button-wrap {
	display: flex;
	justify-content: center;
}

/* Product Box Pro: price-wrap is rendered as a flex row of (price, old
 * price, savings badge). Centre it when stacked in a sidebar so it sits
 * under the centred title rather than left-aligning. */
.abfa-layout-sidebar .abfa-pbp-price-wrap {
	justify-content: center;
}

/* ---------------------------------------------------------------------------
 * Compact: eine Zeile
 *
 * Fuer ein Produkt, das im Text genannt wird, ohne den Absatz mit einer Karte
 * zu zerschneiden. Ein Artikel, der acht Produkte nennt, kann keine acht Karten
 * tragen.
 *
 * Der Titel bricht nicht um, sondern wird abgeschnitten - eine Zeile, die
 * manchmal zwei wird, waere keine Zeile. Sterne und Marke fallen weg: Sie
 * passen nicht, und der Preis ist das, was hier zaehlt. Die Offenlegung bleibt
 * und rutscht darunter; sie ist Pflicht und wird nicht weggekuerzt.
 * ------------------------------------------------------------------------- */
.abfa-layout-compact {
	max-width: 640px;
	gap: .9em;
	padding: 10px 14px;
	align-items: center;
}

.abfa-layout-compact .abfa-image {
	flex: 0 0 auto;
}

/*
 * Breite UND Hoehe, und die Hoehe ist der Punkt.
 *
 * Gedeckelt war zuerst nur die Breite, und damit hielt "eine Zeile" nur fuer
 * quadratische Bilder. Gemessen mit einem hochkanten Produktfoto (1:2) wurde
 * die Zeile 134px hoch, bei 1:4 sogar 246px - die Beschriftung "640 x 78 px"
 * war damit eine Behauptung. Amazons Standardbild ist quadratisch, aber Buecher
 * und Poster sind es nicht, und ein Layout, dessen Zusage von der Warenart
 * abhaengt, ist keine Zusage.
 *
 * `height: auto` steht in der Grundregel, also bleibt das Verhaeltnis erhalten:
 * Das Bild passt sich in das Quadrat ein, statt gequetscht zu werden.
 */
.abfa-layout-compact.abfa-img-small .abfa-image img  { max-width: 40px; max-height: 40px; }
.abfa-layout-compact.abfa-img-medium .abfa-image img { max-width: 56px; max-height: 56px; }
.abfa-layout-compact.abfa-img-large .abfa-image img  { max-width: 72px; max-height: 72px; }

.abfa-layout-compact .abfa-content {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .3em .9em;
	min-width: 0;
	flex: 1 1 auto;
}

.abfa-layout-compact .abfa-title {
	flex: 1 1 8em;
	min-width: 0;
	margin: 0;
	font-size: 1em;
	line-height: 1.35;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.abfa-layout-compact .abfa-price {
	flex: 0 0 auto;
	margin: 0;
	font-size: 1.05em;
}

.abfa-layout-compact .abfa-button-wrap {
	flex: 0 0 auto;
	margin: 0;
}

.abfa-layout-compact .abfa-button {
	padding: .5em 1em;
	font-size: .9em;
}

/*
 * Was in einer Zeile nicht unterzubringen ist.
 *
 * `.abfa-box` steht mit davor, damit diese Regel staerker ist als die
 * Zeilenregel der Vorzeile weiter unten. Ohne das taucht sie in Compact wieder
 * auf - gleiche Staerke, und die spaetere gewinnt.
 */
.abfa-box.abfa-layout-compact .abfa-rating,
.abfa-box.abfa-layout-compact .abfa-pbp-brand,
.abfa-box.abfa-layout-compact .abfa-eyebrow,
.abfa-box.abfa-layout-compact .abfa-pbp-price-old {
	display: none;
}

/* Die Offenlegung nimmt die volle Breite und steht damit unter der Zeile. */
.abfa-layout-compact .abfa-disclosure {
	flex: 1 0 100%;
	margin: 0;
}

/* ---------------------------------------------------------------------------
 * Hero: der Kasten oben im Testbericht
 *
 * Breiter, groesseres Bild, groesserer Titel - und die Zeile ueber dem Namen,
 * die aus einer grossen Box erst eine Empfehlung macht ("Unsere Wahl"). Ohne
 * sie waere Hero nur eine breite Box.
 *
 * Gedeckelt bei 960px: In einem Block-Theme ohne Inhaltsbreite waere die Box
 * sonst so breit wie der Bildschirm, mit einem 300px-Bild links und viel Nichts
 * daneben.
 * ------------------------------------------------------------------------- */
.abfa-layout-hero {
	max-width: 960px;
	gap: 2em;
	padding: 28px 32px;
}

/*
 * Auch hier beides. Ein Hero ist breit mit grossem Bild - nicht so hoch wie das
 * Bild. Gemessen mit einem 1:4-Foto wurde die Box 1018px hoch, und der Knopf
 * stand weit unter der Falz.
 */
.abfa-layout-hero.abfa-img-small .abfa-image img  { max-width: min(180px, 35vw); max-height: 180px; }
.abfa-layout-hero.abfa-img-medium .abfa-image img { max-width: min(240px, 40vw); max-height: 240px; }
.abfa-layout-hero.abfa-img-large .abfa-image img  { max-width: min(300px, 45vw); max-height: 300px; }

.abfa-layout-hero .abfa-title {
	font-size: 1.5em;
	line-height: 1.25;
}

.abfa-layout-hero .abfa-price {
	font-size: 1.35em;
}

.abfa-layout-hero .abfa-button {
	padding: .85em 1.6em;
	font-size: 1.05em;
}

/* ---------------------------------------------------------------------------
 * Die Zeile ueber dem Namen
 *
 * Erbt ihre Farbe vom Kasten und wird nicht abgedunkelt. Ein eigener Ton oder
 * eine verringerte Deckkraft waere eine weitere Gelegenheit, unter 4,5:1 zu
 * rutschen - und genau diese Fehlerfamilie hat dieses Plugin schon dreimal
 * getroffen. Gross-, Fett- und Sperrschrift reichen, um sie als Vorzeile zu
 * lesen.
 * ------------------------------------------------------------------------- */
.abfa-box .abfa-eyebrow {
	margin: 0 0 .35em;
	font-size: .72em;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	line-height: 1.2;
}

/*
 * Vorzeile und Markenzeile teilen sich eine Zeile, wenn beide dastehen.
 *
 * Gemessen sind sie fast dasselbe: beide .72em, beide Grossbuchstaben, beide
 * gesperrt - sie unterscheiden sich in Strichstaerke und Deckkraft und sonst in
 * nichts. Untereinander lasen sie sich deshalb nicht als zwei Angaben, sondern
 * als Gedraenge ueber dem Titel, und in der Hero-Box, fuer die die Vorzeile
 * gebaut ist, standen ausgerechnet zwei Kleinzeilen vor der grossen.
 *
 * Nebeneinander mit einem Punkt dazwischen sind es eine Meta-Zeile und eine
 * Zeile weniger Moebel. Der Unterschied in der Deckkraft liest sich dann als
 * Rangfolge - erst die Aussage, dann die Marke.
 *
 * inline-block statt inline, weil ein inline-Element keinen unteren Abstand
 * kennt und die Ueberschrift sonst direkt anschliesst.
 *
 * Die Layouts stehen AUFGEZAEHLT da, nicht als `:not()`-Ausnahme, und das ist
 * eine Lehre aus drei Anlaeufen.
 *
 * Erst musste Compact ausgenommen werden - gleiche Staerke, spaetere Regel
 * gewinnt, und die Markenzeile stand dort wieder. Nicht sofort aufgefallen,
 * weil `.abfa-content` in Compact ein Flex-Container ist und ein
 * inline-block-Kind darin zu `block` wird: Es sah nach dem Normalzustand aus.
 * Dann kam in 2.26.0 das Nur-Knopf-Layout, und ueber einem blossen Knopf stand
 * "OUR PICK - NORDIC HOME".
 *
 * Eine Ausnahmeliste muss jeder pflegen, der ein Layout hinzufuegt, und
 * vergessen wird sie lautlos. Aufgezaehlt muss sich ein neues Layout anmelden -
 * und wer das vergisst, sieht es sofort: Die Zeile fehlt, statt an der falschen
 * Stelle zu stehen.
 *
 * Ein `!important` waere der kuerzere Weg und der falsche. Genau daran ist in
 * 2.20.1 der Tabellenknopf gescheitert: Die Basisregel hatte eines, die neue
 * nicht, und die Schrift blieb in Ruhe bei 3,1:1.
 */
.abfa-layout-post .abfa-eyebrow,
.abfa-layout-sidebar .abfa-eyebrow,
.abfa-layout-hero .abfa-eyebrow {
	display: inline-block;
}

.abfa-layout-post .abfa-eyebrow + .abfa-pbp-brand,
.abfa-layout-sidebar .abfa-eyebrow + .abfa-pbp-brand,
.abfa-layout-hero .abfa-eyebrow + .abfa-pbp-brand {
	display: inline-block;
	margin-bottom: .35em;
}

.abfa-layout-post .abfa-eyebrow + .abfa-pbp-brand::before,
.abfa-layout-sidebar .abfa-eyebrow + .abfa-pbp-brand::before,
.abfa-layout-hero .abfa-eyebrow + .abfa-pbp-brand::before {
	content: "\00B7";
	margin: 0 .5em;
	opacity: .7;
}

/* ---------------------------------------------------------------------------
 * Button only: kein Kasten, nur der Aufruf
 *
 * Fuer den Absatz, der das Produkt schon genannt hat. Kein Bild, kein Titel,
 * kein Preis - die stehen im Text darueber, und ein zweites Mal daneben waere
 * Wiederholung statt Aufforderung.
 *
 * Der Rahmen faellt mit weg. Ein Knopf in einem Kasten ist kein Knopf, sondern
 * eine Karte mit einem Knopf darin.
 * ------------------------------------------------------------------------- */
.abfa-layout-button {
	display: block;
	max-width: 640px;
	padding: 0;
	gap: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.abfa-layout-button .abfa-image,
.abfa-layout-button .abfa-eyebrow,
.abfa-layout-button .abfa-pbp-brand,
.abfa-layout-button .abfa-title,
.abfa-layout-button .abfa-rating,
.abfa-layout-button .abfa-price {
	display: none;
}

.abfa-layout-button .abfa-button-wrap {
	margin: 0;
}

.abfa-layout-button .abfa-disclosure {
	margin: .5em 0 0;
}

/* ---------------------------------------------------------------------------
 * Bild rechts
 *
 * Ein Haekchen an der Box, kein eigenes Layout: Es ist dieselbe Anordnung,
 * gespiegelt. Gedacht fuer mehrere Boxen untereinander - abwechselnd links und
 * rechts liest sich als redaktionelle Strecke, dreimal dasselbe als Katalog.
 *
 * Der Name faengt bewusst NICHT mit `abfa-img-` an: Die Live-Vorschau auf dem
 * General-Reiter raeumt dieses Praefix ab, um die Bildgroesse zu tauschen.
 *
 * `sidebar` und `button` stehen nicht in der Liste - dort gibt es nichts zu
 * spiegeln, die eine stapelt und die andere hat kein Bild.
 * ------------------------------------------------------------------------- */
.abfa-layout-post.abfa-flip,
.abfa-layout-hero.abfa-flip,
.abfa-layout-compact.abfa-flip {
	flex-direction: row-reverse;
}

/* Tablets in portrait: stack the post layout so the text column never gets
 * squeezed by a large product image. Bumped from 600px so 7" tablets
 * also get the stacked layout instead of a cramped horizontal row. */
@media (max-width: 720px) {
	.abfa-layout-post,
	.abfa-layout-hero,
	.abfa-layout-post.abfa-flip,
	.abfa-layout-hero.abfa-flip {
		flex-direction: column;
		text-align: center;
	}
	.abfa-layout-post .abfa-button-wrap,
	.abfa-layout-hero .abfa-button-wrap {
		display: flex;
		justify-content: center;
	}
	/*
	 * Hero wird auf dem Telefon zu einer normalen Box: Die grosse Schrift und
	 * das grosse Bild sind fuer Breite gemacht, und untereinander gestapelt
	 * schoeben sie den Knopf unter die Falz.
	 */
	.abfa-layout-hero {
		padding: 18px 20px;
		gap: 1.5em;
	}
	.abfa-layout-hero .abfa-title {
		font-size: 1.2em;
	}
	/*
	 * Compact bleibt eine Zeile, solange der Titel Platz hat, und bricht sonst
	 * von selbst um - .abfa-content traegt flex-wrap. Nur der Titel darf dann
	 * nicht mehr abgeschnitten werden, sonst steht in einer zweizeiligen Karte
	 * ein halbes Wort.
	 */
	.abfa-layout-compact .abfa-title {
		flex-basis: 100%;
		white-space: normal;
	}
	/* When the post layout auto-stacks at narrow width, also centre the
	 * Product Box Pro price-wrap (it's a flex row and `text-align` only
	 * affects inline children, not flex items). */
	.abfa-layout-post .abfa-pbp-price-wrap {
		justify-content: center;
	}
}

/* Small phones: tighten outer padding/gap so the card doesn't look
 * cramped at the edges, and let the image use more of the row width. */
@media (max-width: 480px) {
	.abfa-box {
		padding: 14px 16px;
		gap: 1em;
		border-radius: 10px;
	}
	.abfa-box .abfa-button {
		padding: .65em 1.15em;
	}
	.abfa-img-small .abfa-image img  { max-width: min(120px, 45vw); }
	.abfa-img-medium .abfa-image img { max-width: min(180px, 60vw); }
	.abfa-img-large .abfa-image img  { max-width: min(240px, 75vw); }

	/*
	 * Compact behaelt sein Miniaturbild. Die Regeln darueber machen Bilder auf
	 * dem Telefon groesser, damit eine gestapelte Karte nicht mickrig wirkt -
	 * fuer eine Zeile waere genau das falsch.
	 */
	.abfa-layout-compact.abfa-img-small .abfa-image img  { max-width: 40px; max-height: 40px; }
	.abfa-layout-compact.abfa-img-medium .abfa-image img { max-width: 56px; max-height: 56px; }
	.abfa-layout-compact.abfa-img-large .abfa-image img  { max-width: 72px; max-height: 72px; }
}