/* Sellgrip — actie SELLGRIP26 (templates/sellgrip26.php).
 * Na tools.css, toolpage.css en globalmarketplace.css (kruimelpad, stappen,
 * hero). Alleen tokens: licht en donker volgen vanzelf. De beelden van
 * Kaufland blijven zoals ze zijn; de logo's staan op een wit vlak, zodat het
 * rood ook in de donkere modus leesbaar blijft zonder het te herkleuren.
 */

.sg26-hero h1 {
	max-width: 18em;
}

/* De code: één kaart, de code groot en selecteerbaar. Zonder gekleurde
 * streep links (founder, 1 okt: oogt als AI-slop). */
/* HET CODEVAK IN HET GEEL (founder, 3 okt): een effen rand van 2px in het
 * geel van de lanceerbalk (#ffd400), verder niets: geen gloed, geen verloop,
 * geen streep aan één kant. De rand groeit naar binnen (box-shadow inset
 * naast de border), zodat het vak niet verspringt ten opzichte van de knop
 * eronder. Na het kopiëren (assets/js: .is-copied) wordt het vak kort zacht
 * geel: de bevestiging zit in het vak zelf, niet in een losse melding. */
.promo-code {
	margin-top: 28px;
	max-width: 34rem;
	padding: 18px 22px 16px;
	border: 1px solid #ffd400;
	box-shadow: inset 0 0 0 1px #ffd400;
	border-radius: var(--radius);
	background: var(--card);
	transition: background-color 0.2s ease;
}

.promo-code.is-copied {
	background: #fff8d1;
}

html[data-theme="dark"] .promo-code.is-copied {
	background: rgba(255, 212, 0, 0.12);
}

.promo-code p {
	margin: 0;
}

.promo-code-label {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--muted);
}

.promo-code-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 20px;
	margin-top: 4px !important;
}

.promo-code-value {
	font-size: clamp(1.75rem, calc(6vw / var(--vz, 1)), 2.25rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: 0.05em;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
	-webkit-user-select: all;
	user-select: all;
	overflow-wrap: anywhere;
}

.promo-copy {
	min-height: 40px; /* tikvlak op mobiel */
	padding: 0.55em 1em;
	font-size: 0.95rem;
}

.promo-code-meta {
	margin-top: 8px !important;
	font-size: 0.9rem;
	color: var(--graphite);
}

.sg26-hero .hero-actions {
	margin-top: 24px;
}

.sg26-hero .gm-independent {
	margin-top: 16px;
}

/* Beelden van Kaufland: onveranderd, alleen afgeronde hoeken van de kaart. */
.sg26-figure {
	margin: 0;
}

.sg26-figure img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-card);
}

.sg26-figure figcaption {
	margin-top: 8px;
	font-size: 0.8rem;
	color: var(--muted);
}

.sg26-visual {
	padding-top: 0;
}

/* Het campagnebeeld, het citaat eronder en het raster daaronder staan op één
 * breedte: die van de pagina (slop-check 1 okt: het waren er drie, 1024, 800
 * en 1216). Het beeld had al sizes voor 1216px. */

.sg26-map img {
	border: 1px solid var(--line);
	background: #fff;
}

/* De tekst van Kaufland is een citaat en ziet er zo uit: bovenaan van wie het
 * is (logo en één regel), dan de tekst met een groot aanhalingsteken ervoor,
 * onderaan de knop. Op de volle breedte van de pagina, de tekst in twee
 * kolommen: de kaart was één kolom van 800px en 1.800px hoog. Geen gekleurde
 * streep links. De tekst zelf is letterlijk die van Kaufland. */
.sg26-kl-head {
	margin-bottom: clamp(20px, calc(3vw / var(--vz, 1)), 32px);
}

.sg26-kl {
	margin: 0;
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
	background: var(--card);
}

.sg26-kl-by {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 24px;
	padding: 18px clamp(20px, calc(4vw / var(--vz, 1)), 40px);
	border-bottom: 1px solid var(--line);
}

.sg26-kl-logo {
	flex: none;
	border-radius: var(--radius);
	background: #fff;
	line-height: 0;
}

/* Donker: het witte vlak wordt zichtbaar en krijgt ruimte om het logo. */
html[data-theme="dark"] .sg26-kl-logo {
	padding: 10px 14px;
}

.sg26-kl-logo img {
	width: auto;
	height: 36px;
}

.sg26-kl-note {
	font-size: 0.95rem;
	color: var(--graphite);
}

.sg26-kl-text {
	position: relative;
	margin: 0;
	padding: clamp(22px, calc(3.4vw / var(--vz, 1)), 34px) clamp(20px, calc(4vw / var(--vz, 1)), 40px) clamp(24px, calc(4vw / var(--vz, 1)), 36px);
	color: var(--graphite);
	quotes: "\201C" "\201D";
	columns: 2 26rem;
	column-gap: clamp(32px, calc(5vw / var(--vz, 1)), 64px);
}

/* Het aanhalingsteken van de taal van de tekst (lang op het blok): „ in het
 * Duits, Pools, Tsjechisch en Slowaaks, « in het Frans, Spaans en Italiaans,
 * anders “. Vast per taal: `quotes: auto` gaf in het Nederlands een enkel,
 * nauwelijks zichtbaar teken. Alleen het openingsteken, groot en zwart. */
.sg26-kl-text:lang(de),
.sg26-kl-text:lang(pl),
.sg26-kl-text:lang(cs),
.sg26-kl-text:lang(sk) {
	quotes: "\201E" "\201C";
}

.sg26-kl-text:lang(fr),
.sg26-kl-text:lang(es),
.sg26-kl-text:lang(it) {
	quotes: "\00AB" "\00BB";
}

/* Een eigen regel boven de kop, over beide kolommen. Het teken staat per taal
 * op een andere hoogte in zijn regel (“ boven, „ onder, « midden); de hoogte
 * en marge hieronder trekken dat recht, zodat de kop er steeds even ver
 * onder begint. */
.sg26-kl-text::before {
	content: open-quote;
	display: block;
	column-span: all;
	height: 0.56em;
	margin-bottom: 10px;
	font-size: 3.75rem;
	font-weight: 800;
	line-height: 1;
	color: var(--ink);
}

.sg26-kl-text:lang(de)::before,
.sg26-kl-text:lang(pl)::before,
.sg26-kl-text:lang(cs)::before,
.sg26-kl-text:lang(sk)::before {
	margin-top: -0.5em;
	height: 1.06em;
}

.sg26-kl-text:lang(fr)::before,
.sg26-kl-text:lang(es)::before,
.sg26-kl-text:lang(it)::before {
	margin-top: -0.2em;
	height: 0.76em;
}

.sg26-kl-text h3 {
	margin: 0 0 18px;
	max-width: 34em;
	font-size: clamp(1.2rem, calc(2.4vw / var(--vz, 1)), 1.5rem);
	line-height: 1.25;
	color: var(--ink);
	column-span: all;
}

.sg26-kl-text p {
	margin: 0;
	break-inside: avoid;
}

.sg26-kl-text p + p,
.sg26-kl-text ul + p,
.sg26-kl-text p + ul {
	margin-top: 14px;
}

.sg26-kl-text strong {
	color: var(--ink);
}

.sg26-kl-text ul {
	margin-bottom: 0;
	padding-left: 1.2em;
}

.sg26-kl-text li {
	break-inside: avoid;
}

.sg26-kl-text li + li {
	margin-top: 10px;
}

.sg26-kl-text li::marker {
	color: var(--muted);
}

.sg26-kl-about {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--line);
	font-size: 0.88rem;
	column-span: all;
	columns: 2 26rem;
	column-gap: clamp(32px, calc(5vw / var(--vz, 1)), 64px);
}

/* De lange alinea over de Schwarz Gruppe mag over de twee kolommen lopen;
 * het kopje erboven blijft bij het begin. */
.sg26-kl-about p {
	break-inside: auto;
}

.sg26-kl-about p:first-child {
	break-after: avoid;
}

.sg26-kl-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 24px;
	padding: 18px clamp(20px, calc(4vw / var(--vz, 1)), 40px);
	border-top: 1px solid var(--line);
}

.sg26-kl-cta {
	margin: 0;
}

/* Negen landen: tekst links, het beeld rechts vanaf desktop. */
.sg26-markets {
	display: grid;
	gap: 28px;
	align-items: center;
}

.sg26-markets h2 {
	margin: 0 0 14px;
}

.sg26-markets .link-arrow {
	display: inline-block;
	margin-top: 8px;
}

.sg26-markets .lead {
	max-width: 36rem;
}

.sg26-map {
	max-width: 560px;
}

@media (min-width: 1001px) {
	.sg26-markets {
		grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
		gap: clamp(40px, calc(6vw / var(--vz, 1)), 88px);
	}
}

/* Onder 520px: de knop over de volle breedte, zodat hij niet half past. */
@media (max-width: 520px) {
	.sg26-hero .hero-actions .btn,
	.sg26-kl-cta .btn {
		width: 100%;
		white-space: normal;
		text-align: center;
	}

	.promo-code {
		padding: 16px 16px 14px;
	}
}

/* Bij de Nederlandse vertaling: wie vertaald heeft. Klein en rustig. */
.sg26-kl-translated {
	margin: 0;
	font-size: 0.85rem;
	color: var(--muted);
}