/* Carmo footer trustbar — verzend- en betaalmethode-logo's (2026-09-06) */
.carmo-trustbar-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.carmo-trustbar-chip {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #ffffff;
	border-radius: 8px;
	padding: 6px 10px;
	height: 40px;
	box-sizing: border-box;
	box-shadow: 0 1px 3px rgba(0,0,0,0.25);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.carmo-trustbar-chip:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0,0,0,0.35);
}
.carmo-trustbar-chip img {
	/* Vaste hoogte i.p.v. max-height: een SVG zonder width/height-attributen
	   (alleen viewBox, bv. paypal.svg) valt anders terug op een 0x0-rendering
	   in een flex-child met alleen max-width/max-height + auto. Zie
	   docs/claude/gotchas-extended.md (footer-trustbar-svg-sizing). */
	height: 28px;
	width: auto;
	max-width: 80px;
	display: block;
}
/* Bronbestanden verschillen sterk in ingebouwde witruimte: DHL/FedEx zijn
   edge-to-edge cirkels (vullen 100% van het canvas), UPS heeft juist veel
   lucht rondom (vult maar ~54%). Zonder correctie oogt de rij ongelijk qua
   grootte ondanks identieke box-hoogte. Gemeten met canvas alpha-scan. */
.carmo-trustbar-img-fullbleed {
	height: 21px !important;
	/* dhl-logo.png heeft (als enige) GEEN transparante achtergrond maar een
	   lichtgrijs vignet in de hoeken (rgba 235,235,235 i.p.v. transparant) —
	   dat toonde als een vaag grijs kader tegen het witte kaartje. De hele
	   afbeelding is al een cirkel die de rand raakt, dus rond uitknippen
	   verwijdert precies die hoeken zonder het logo zelf te raken. */
	border-radius: 50%;
	clip-path: circle(50%);
}
.carmo-trustbar-img-ups {
	height: 34px !important;
}
/* Betaalrij + Comodo-seal op één regel i.p.v. de seal op een aparte regel
   eronder: de wrapper wordt zelf een flex-rij met de linkomhulde iconenlijst
   en de losse seal-lijst als twee naast elkaar staande items. */
.carmo-trustbar-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}
.carmo-trustbar-row > a {
	display: block;
}
.carmo-trustbar-list-secure {
	margin: 0;
}
.carmo-trustbar-chip-seal {
	height: auto;
	padding: 8px 14px;
}
.carmo-trustbar-chip-seal a {
	display: flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
}
.carmo-trustbar-chip-seal a:hover .carmo-trustbar-seal-label {
	text-decoration: underline;
}
.carmo-trustbar-chip-seal img {
	/* Portret-icoon (hangslot met "SSL" erin gebakken) — onder ~40px hoogte
	   wordt die tekst een groene vlek, dus dit icoon krijgt bewust een grotere
	   weergave dan de rest van de rij. Vaste hoogte i.p.v. max-height, zelfde
	   reden als hierboven bij .carmo-trustbar-chip img. */
	height: 44px;
	width: auto;
	max-width: none;
}
.carmo-trustbar-seal-label {
	font-size: 13px;
	font-weight: 700;
	color: #FF6600;
	white-space: nowrap;
}
@media (max-width: 767px) {
	.carmo-trustbar-list {
		justify-content: flex-start;
	}
}
/* De "Verzend informatie" en "Betaal mogelijkheden" kolommen staan op smallere
   breedtes onder elkaar (Bootstrap-kolommen krijgen daarbij geen verticale
   marge) — zonder deze regel plakt de "BETAAL MOGELIJKHEDEN"-kop bijna tegen
   de verzendlogo's erboven. */
.shippingFooter {
	margin-bottom: 24px;
}
/* De kolom-div rond ".payment" had een inline style="width:auto" (stock ZC) die
   de normale col-lg-4-breedte overschreef en de kolom liet meegroeien met haar
   inhoud. Vóór de trustbar-uitbreiding was die inhoud smal genoeg om altijd te
   passen; met 6 betaal-iconen + SSL-logo werd de kolom te breed, paste niet
   meer naast "Volg ons"/"Verzend informatie" en vouwde om (landde daarbij door
   CSS-float-gedrag onder de EERSTE kolom, niet ernaast). Een max-width-hack
   hierop bleek viewport-afhankelijk onbetrouwbaar. Structurele fix: de inline
   `width:auto` is uit de markup gehaald (tpl_footer.php) zodat de kolom nu een
   normale col-lg-4-breedte krijgt, exact zoals haar buurkolommen. Deze
   max-width is alleen nog een veiligheidsgrens, geen actieve breedtesturing
   meer. */
.payment {
	max-width: 100%;
}
/* Extra ruimte tussen de kop ("VERZEND INFORMATIE"/"BETAAL MOGELIJKHEDEN", stock
   margin-bottom is maar 10px) en de icoonrij eronder — vooral op mobiel voelde
   dit te krap aan. */
.shippingFooter h2,
.payment h2 {
	margin-bottom: 16px;
}
/* SSL-logo bewust rechts van de betaal-iconen i.p.v. incidenteel naar een
   nieuwe regel te wrappen — een UX-review (Gemini 2.5 Flash via OpenRouter,
   06-09-2026) noemde de wrap-positie een "afterthought". Op desktop (genoeg
   breedte) duwt margin-left:auto het naar de rechterkant van de rij, met een
   scheidingslijntje zodat het als apart, herkenbaar vertrouwenselement oogt
   i.p.v. als zomaar nóg een betaalicoon. Past de rij niet (mobiel/smal), dan
   wrapt het gewoon netjes naar een eigen regel zoals daarvoor. */
.carmo-trustbar-list-secure {
	margin-left: auto;
	padding-left: 16px;
	border-left: 1px solid rgba(255,255,255,0.15);
}
@media (max-width: 767px) {
	.carmo-trustbar-list-secure {
		margin-left: 0;
		padding-left: 0;
		border-left: none;
		margin-top: 8px;
	}
	.carmo-trustbar-list {
		gap: 10px;
	}
	.shippingFooter h2,
	.payment h2 {
		margin-bottom: 18px;
	}
}