/*
 * Adapter: Affiliate Toolkit.
 *
 * GEMESSEN am 2026-09-01 gegen Affiliate Toolkit Starter 3.9.0, WordPress 6.9,
 * Instanz `hardware-bros` (Port 8080), Seite `/messprodukt/`.
 *
 * ANKERKLASSEN (fuer bin/check-adapters.php): atkp-container, atkp-box, atkp-price
 *
 * KEIN Farbwert, keine Schriftgroesse — nur Struktur und Verweise auf Token.
 * Die Marke steht im Child.
 *
 * Zwei Dinge stehen hier, und die Trennung gehoert erklaert:
 *
 * 1 · Der **Kauf-Check** (`g-buycheck`). Das ist eigenes Markup aus
 *     `atkp-templates/kaufcheck.blade.php`, kein Plugin-Markup. Es kann aber
 *     ohne das Plugin gar nicht entstehen — deshalb haengt es an derselben
 *     Bedingung und liegt in derselben Datei, statt `layout.css` um Regeln zu
 *     erweitern, die in Projekten ohne das Plugin tot waeren.
 *
 * 2 · Die **Werksklassen** (`atkp-`). Sie erscheinen weiterhin ueberall dort,
 *     wo jemand `box`, `wide` oder eine Liste einsetzt.
 *
 * WARUM DIE PLUGIN-STYLES NICHT EINFACH ABGESCHALTET WERDEN
 *
 * Das Plugin hat dafuer Schalter (`ATKP_disablestyles`, `ATKP_disable_js`),
 * aber beide sind **global**. Dasselbe Muster wie beim Content-Vertrag gilt:
 * erst traegt der Adapter jede benutzte Klasse, **dann** darf abgeschaltet
 * werden. Vorher ueberschreiben statt abschalten — sonst steht Markup ohne
 * jede Regel da.
 */

/* -------------------------------------------------------------------------
 * Der Kauf-Check
 * ---------------------------------------------------------------------- */

.g-buycheck {
	container-type: inline-size;
	margin-block: var(--wp--preset--spacing--50, 2rem);
}

.g-buycheck__grid {
	display: grid;
	gap: var(--wp--preset--spacing--30, 1rem);
	grid-template-columns: 1fr;
	list-style: none;
	margin: 0;
	padding: 0;
}

.g-buycheck__card {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0;
	padding: var(--wp--preset--spacing--30, 1rem);
}

/*
 * Mobil steht die Empfehlung ZUERST.
 *
 * Gestapelte Karten werden selten zu Ende gescrollt; die wichtigste gehoert
 * deshalb nach oben. Das Markup liefert sie ohnehin an erster Stelle — diese
 * Regel haelt es auch dann, wenn jemand die Reihenfolge der IDs im Shortcode
 * anders schreibt.
 */
.g-buycheck__card--role1 { order: -1; }

/*
 * Ab dem einen Breakpoint des Systems: drei Spalten, Empfehlung in der MITTE.
 *
 * Der Preis liegt dann zwischen den beiden anderen und laesst sich vergleichen,
 * statt am Rand zu stehen. Die Reihenfolge kommt aus der Rolle, nicht aus der
 * Position im Markup — deshalb traegt der Kasten die Rollenklasse und nicht,
 * wie beim Plugin, nur sein Label.
 */
@media (min-width: 992px) {
	/*
	 * KEIN `align-items: start`. Die Karten muessen sich auf gleiche Hoehe
	 * strecken, sonst hat das `margin-block-start: auto` des Knopfes nichts,
	 * wogegen es druecken kann — gemessen im Browser: drei Knoepfe auf drei
	 * verschiedenen Hoehen (2797, 2812, 2886). Am Markup war nichts zu sehen.
	 */
	.g-buycheck__grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.g-buycheck__card--role2 { order: 1; }
	.g-buycheck__card--role1 { order: 2; }
	.g-buycheck__card--role3 { order: 3; }
}

.g-buycheck__role {
	align-self: flex-start;
	margin: 0;
}

.g-buycheck__media {
	margin: 0;
}

.g-buycheck__image {
	display: block;
	height: auto;
	max-width: 100%;
}

.g-buycheck__body {
	flex: 1 1 auto;
}

.g-buycheck__title {
	display: block;
	overflow-wrap: anywhere;
	text-decoration: none;
}

.g-buycheck__prices {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 0.5rem;
}

.g-buycheck__price {
	margin: 0;
	width: 100%;
}

/*
 * Der Knopf sitzt am unteren Rand jeder Karte, damit die drei Knoepfe auf einer
 * Linie liegen, auch wenn die Titel unterschiedlich lang sind. `margin-block-
 * start: auto` braucht dafuer die Flex-Spalte oben.
 */
.g-buycheck__cta {
	display: block;
	margin-block-start: auto;
	min-height: 52px;
	align-content: center;
	text-align: center;
	text-decoration: none;
}

.g-buycheck__proof,
.g-buycheck__note,
.g-buycheck__shop {
	margin-block: 0;
}

/* -------------------------------------------------------------------------
 * Die Werksklassen
 * ---------------------------------------------------------------------- */

/*
 * Ein leerer Praedikat-Kasten wird IMMER ausgegeben, auch ohne Rolle — dann als
 * `atkp-predicate-highlight` ohne Ziffer mit leerem `<span>`. Ohne diese Regel
 * entsteht an jedem rollenlosen Produkt eine leere Flaeche.
 *
 * Die Auswahl trifft absichtlich nur die ziffernlose Klasse: `[class$=...]`
 * waere kuerzer, wuerde aber auch `-highlight1` treffen.
 */
.atkp-predicateheadline.atkp-predicate-highlight:not([class*="highlight1"]):not([class*="highlight2"]):not([class*="highlight3"]) {
	display: none;
}

/* Bilder des Plugins brechen sonst aus schmalen Traegern aus. */
.atkp-container img {
	height: auto;
	max-width: 100%;
}

/*
 * Der Grundpreis traegt `atkp_price` mit UNTERSTRICH — ein Tippfehler des
 * Plugins. Wer `.atkp-price` selektiert, erwischt ihn nicht. Beide Schreibungen
 * stehen hier, damit die Zeile nicht unformatiert danebensteht.
 */
.atkp-price,
.atkp_price {
	display: inline-block;
}

/*
 * Die Vergleichstabelle des Plugins laeuft ueber. Dasselbe Muster wie bei
 * `gw-table-scroll`: Der Traeger scrollt, die Seite nicht.
 */
.atkp-container table {
	display: block;
	overflow-x: auto;
	max-width: 100%;
}