/*
 * Theme "Content" — CSS-only skin (Fase A multi-template, jul 2026).
 *
 * Leesgericht/redactioneel: serif-koppen, rustige lichte paginakop, vlakke
 * kaarten met dunne rand, ruime regelafstand. Bedoeld voor content-sites,
 * maar werkt ook op review-sites.
 *
 * Regels: alles geprefixt met body.theme-content (laadt ná style.css en wint
 * dan altijd); kleuren via de site-CSS-variabelen; geen img-sizing; RTL-neutraal.
 */

/* ---------- Typografie ---------- */
body.theme-content {
	font-family: Georgia, "Times New Roman", "Noto Serif", serif;
	font-size: 17px;
	color: #2d2d2d;
	/* "Modern Classic" (mail tkcheringa 24 aug 2026): een zeer lichte, neutrale
	   grijze paginakleur i.p.v. het warme off-white, zodat de nieuwe witte
	   containers (#sidebar, #description) duidelijk oppoppen. */
	background-color: #f2f3f5;
}
body.theme-content p {
	line-height: 1.8;
}
body.theme-content h2,
body.theme-content h3,
body.theme-content h4 {
	font-family: Georgia, "Times New Roman", "Noto Serif", serif;
	font-weight: 700;
	color: #191919;
}
body.theme-content a { color: var(--main-color); }

/* De hoofdtitel van de offer-pagina (h2.offer_name in modules/details.php) heeft
   in de gedeelde markup `d-none d-lg-block` → zichtbaar op desktop, verborgen op
   tablet/mobiel. Op desktop staat die kop er dus al (naast de hero-H1); klant wil
   'm ook op mobiel zien (mail tkcheringa 24 aug 2026). Markup is gedeeld met de
   andere thema's, dus alleen hier via CSS forceren. !important verslaat Bootstrap's
   `.d-none{display:none!important}`; scoping op h2.offer_name laat de inline
   <span class="offer_name"> in de editor-knop ongemoeid. */
body.theme-content h2.offer_name {
	display: block !important;
}

/* ---------- Header / navigatie ---------- */
body.theme-content #main-nav {
	background-color: #fffdfa;
	border-bottom: 1px solid #e8e4dc;
}
body.theme-content .header-logo a {
	font-family: Georgia, "Times New Roman", serif;
	font-weight: 700;
	letter-spacing: 0.01em;
}
body.theme-content ul#main-menu > li > a {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
}
body.theme-content .sm-mint ul,
body.theme-content .sm-mint a.highlighted { background-color: #fffdfa; }
body.theme-content #top_bar {
	background-color: #f6f2ea;
	font-size: 13px;
}
body.theme-content.container #top_bar {
	border-top: solid 3px var(--main-color);
}

/* Paginakop → gecentreerde "Hero" (mail Rutger 24 aug 2026): kleurverloop op de
   secundaire kleur, afgesloten met een stevige onderrand in de hoofdkleur; ruime
   verticale padding en alle content (breadcrumbs, H1, zoekbalk) gecentreerd.
   Alleen theme content. */
body.theme-content .header_h1 {
	background-color: var(--secondary-color);
	background-image: linear-gradient(135deg,
		var(--secondary-color),
		color-mix(in srgb, var(--secondary-color), #101820 42%));
	border-top: 0;
	border-bottom: 6px solid var(--main-color);
	padding: 72px 0 60px 0;
	text-align: center;
}
/* Algemene serif-kop (buiten de hero) blijft donker. */
body.theme-content h1 {
	font-family: Georgia, "Times New Roman", serif;
	color: #191919;
	font-weight: 700;
	font-size: 34px;
}
/* Hero-H1: groot, vet en licht voor impact + leesbaarheid op het verloop. */
body.theme-content .header_h1 h1 {
	color: #fff;
	font-weight: 800;
	font-size: 52px;
	line-height: 1.15;
	margin: 0;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
}
/* Content + zoekbalk centreren: de rij stapelt en centreert i.p.v. de smalle
   rechter-kolom-layout. */
body.theme-content .header_h1 .row {
	justify-content: center;
}
body.theme-content .header_h1 .row > .col {
	flex: 0 0 100%;
	max-width: 100%;
}
/* Grote, gecentreerde, pill-vormige zoekbalk. */
body.theme-content .header_h1 #search_desktop {
	flex: 0 0 100%;
	max-width: 620px;
	margin: 26px auto 0;
	float: none;
}
body.theme-content .header_h1 #search_desktop .input-group {
	border-radius: 999px;
	overflow: hidden;
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}
body.theme-content .header_h1 #search_desktop .form-control {
	height: 56px;
	padding: 0 26px;
	font-size: 16px;
	border: 0;
	border-radius: 999px 0 0 999px;
}
/* Zoekknop in de hoofdkleur voor hoge zichtbaarheid. */
body.theme-content .header_h1 #search_desktop .btn {
	background-color: var(--main-color) !important;
	border-color: var(--main-color);
	color: #fff;
	padding: 0 28px;
	border-radius: 0 999px 999px 0;
}
/* Breadcrumbs licht tegen het gekleurde verloop (alleen in de hero). */
body.theme-content .header_h1 #breadcrumbs,
body.theme-content .header_h1 #breadcrumbs a {
	color: rgba(255, 255, 255, 0.85);
}
/* Breadcrumbs elders (buiten de hero) ongewijzigd. */
body.theme-content #breadcrumbs,
body.theme-content #breadcrumbs a {
	color: #8a8377;
}

/* ---------- Paginakop-STRIP: dunne horizontale balk buiten de homepage ----------
   Mail tkcheringa 24 aug 2026. De hero hierboven blijft alleen op de homepage
   (daar krijgt #header_h1 GEEN .header-strip; zie header2.php: $content_strip is
   true op alle NIET-home pagina's van het content-thema). Op alle andere pagina's
   wordt de paginakop een compacte strip in de secundaire merkkleur:
   breadcrumbs + titel links op één regel, zoekbalk uiterst rechts, minimale
   verticale ruimte, witte tekst. De extra .header-strip-klasse geeft hogere
   specificiteit dan de hero-regels hierboven, dus deze winnen zonder !important. */

/* Strip-omhulsel: effen secundaire kleur (geen verloop), minimale padding,
   linksuitgelijnd, geen dikke onderrand. */
body.theme-content .header_h1.header-strip {
	background-color: var(--secondary-color);
	background-image: none;
	border-top: 0;
	border-bottom: 0;
	padding: 8px 0;
	text-align: left;
}
/* Container = flex-rij: [breadcrumbs] [ .row met titel links & zoekbalk rechts ].
   nowrap houdt alles op één horizontale lijn. */
body.theme-content .header_h1.header-strip .container {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 16px;
	min-width: 0;
}
/* Breadcrumbs: mogen krimpen (flex 0 1 auto + min-width:0) en horizontaal
   scrollen als ze te lang worden; blijven op één regel (nowrap). */
body.theme-content .header_h1.header-strip #breadcrumbs {
	flex: 0 1 auto;
	min-width: 0;
	margin: 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;      /* Firefox: scrollbar verbergen */
	-ms-overflow-style: none;   /* oude Edge/IE */
}
body.theme-content .header_h1.header-strip #breadcrumbs::-webkit-scrollbar {
	display: none;              /* WebKit/Blink: scrollbar verbergen */
}
/* De eigenlijke lijst (ul.breadcrumb of ol.breadcrumb): één regel, niet wrappen. */
body.theme-content .header_h1.header-strip .breadcrumb {
	display: flex;
	flex-wrap: nowrap;
	white-space: nowrap;
	background: transparent;
	margin: 0;
	padding: 0;
}
/* Losse crumbs niet laten krimpen, anders wordt de tekst afgekapt i.p.v.
   scrollbaar. */
body.theme-content .header_h1.header-strip .breadcrumb > li,
body.theme-content .header_h1.header-strip .breadcrumb .breadcrumb-item {
	flex: 0 0 auto;
}
/* Alle tekst en links wit voor contrast op de secundaire kleur. */
body.theme-content .header_h1.header-strip,
body.theme-content .header_h1.header-strip h1,
body.theme-content .header_h1.header-strip #breadcrumbs,
body.theme-content .header_h1.header-strip #breadcrumbs a,
body.theme-content .header_h1.header-strip .breadcrumb,
body.theme-content .header_h1.header-strip .breadcrumb a,
body.theme-content .header_h1.header-strip .breadcrumb-item.active {
	color: #fff;
}
/* Breadcrumb-scheidingstekens (Bootstrap ::before) net iets gedempt wit. */
body.theme-content .header_h1.header-strip .breadcrumb > li + li::before,
body.theme-content .header_h1.header-strip .breadcrumb-item + .breadcrumb-item::before {
	color: rgba(255, 255, 255, 0.65);
}
/* Titelregel: kleine kop, geen marges, blijft links naast de breadcrumbs. */
body.theme-content .header_h1.header-strip .row {
	flex: 1 1 auto;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-start;
	margin: 0;
	min-width: 0;
}
body.theme-content .header_h1.header-strip .row > .col {
	flex: 0 1 auto;
	min-width: 0;
}
body.theme-content .header_h1.header-strip h1 {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
	text-shadow: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* Zoekbalk uiterst rechts, compact (geen grote hero-pill). */
body.theme-content .header_h1.header-strip #search_desktop {
	flex: 0 0 auto;
	width: auto;
	max-width: 260px;
	margin: 0 0 0 auto;
	padding: 0;
	float: none;
}
body.theme-content .header_h1.header-strip #search_desktop .input-group {
	border-radius: 4px;
	overflow: hidden;
	box-shadow: none;
}
body.theme-content .header_h1.header-strip #search_desktop .form-control {
	height: 34px;
	padding: 0 12px;
	font-size: 14px;
	border: 0;
	border-radius: 4px 0 0 4px;
}
body.theme-content .header_h1.header-strip #search_desktop .btn {
	padding: 0 14px;
	border-radius: 0 4px 4px 0;
}

/* ---------- Offer-layout: "Modern Classic" editorial (mail tkcheringa 24 aug 2026) ----------
   Drie containers op de offer-pagina krijgen een redactionele "documenten"-look.
   Alles geprefixt met body.theme-content zodat classic/modern ongemoeid blijven.
   De afbeeldingen (details/logo) en primaire CTA-knoppen staan in de sidebar en
   losse modules — dus buiten #description — waardoor de layout open/professioneel
   oogt (zoals gevraagd); daar is geen markup-wijziging voor nodig. */

/* #sidebar: schone witte kaart met subtiele lichtgrijze rand en 8px hoeken. */
body.theme-content #sidebar {
	background-color: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	padding: 24px;
}

/* #main_content: transparant en randloos, zodat de afbeeldingen/knoppen erin
   direct op de (grijze) paginakleur zitten. */
body.theme-content #main_content {
	background-color: transparent;
	border: none;
}

/* #description: het "Premium Document" — witte kaart, dezelfde subtiele rand,
   12px hoeken en een comfortabele binnenruimte; verfijnde serif met ruime
   regelafstand. Gescoopt op .wd-tab-section (de offer-beschrijving) zodat de
   gelijknamige #description op de categoriepagina (een alert-box) ongemoeid blijft.
   Binnenruimte teruggebracht van 60px → 32px (mail tkcheringa 24 aug 2026): de
   60px voelde te leeg; 32px houdt de "document"-look maar strakker. */
body.theme-content .wd-tab-section #description {
	background-color: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 12px;
	padding: 32px;
	font-family: Georgia, "Times New Roman", "Noto Serif", serif;
	line-height: 1.8;
}
/* Eerste/laatste blok tegen de binnenrand: geen extra top-/ondermarge, anders
   stapelt die op de container-padding en oogt de ruimte dubbel zo groot. */
body.theme-content .wd-tab-section #description > *:first-child {
	margin-top: 0;
}
body.theme-content .wd-tab-section #description > *:last-child {
	margin-bottom: 0;
}

/* Koppen in de beschrijving voelden onevenredig groot én stonden te ruim: h2/h3
   ingetogener schalen mét kleinere verticale marges, maar met behoud van een
   duidelijke visuele hiërarchie (h2 > h3). Alinea's krijgen een bescheiden,
   consistente ondermarge zodat de tekstblokken niet uit elkaar vallen. */
body.theme-content .wd-tab-section #description h2 {
	font-size: 1.6rem;
	line-height: 1.3;
	margin: 1rem 0 0.5rem;
}
body.theme-content .wd-tab-section #description h3 {
	font-size: 1.3rem;
	line-height: 1.35;
	margin: 0.85rem 0 0.4rem;
}
body.theme-content .wd-tab-section #description p {
	margin: 0 0 0.75rem;
}

/* ---------- Kaarten / listings: vlak, dunne rand ---------- */
body.theme-content .card,
body.theme-content .post-block,
body.theme-content .summary_div {
	border: 1px solid #e8e4dc;
	border-radius: 4px;
	box-shadow: none;
	background-color: #fff;
}
body.theme-content .card-footer {
	background-color: #faf8f3;
	border-top: 1px solid #e8e4dc;
}
body.theme-content .site_title {
	text-transform: none;
	font-family: Georgia, "Times New Roman", serif;
}

/* ---------- Knoppen: ingetogen, rechte hoeken ---------- */
body.theme-content .btn {
	border-radius: 3px;
	font-weight: 600;
	letter-spacing: 0.02em;
	box-shadow: none;
}

/* ---------- Formulieren ---------- */
body.theme-content .form-control {
	border-radius: 3px;
	border-color: #d9d3c7;
	background-color: #fff;
}
body.theme-content .form-control:focus {
	border-color: var(--main-color);
	box-shadow: none;
}

/* ---------- Paginering ---------- */
body.theme-content .pagination > li > a,
body.theme-content .pagination > li > span,
body.theme-content .pagination .page-link {
	border-radius: 0;
	border-color: #e0dacd;
}

/* ---------- Footer ---------- */
body.theme-content footer {
	background-color: #2b2723;
	margin-top: 48px;
}
body.theme-content .footer_ul_amrc li a,
body.theme-content footer p {
	color: #b8b0a3;
}

/* ---------- Artikelen ---------- */
body.theme-content .blog-posts article,
body.theme-content div.post-content {
	font-size: 17px;
}
body.theme-content .post-meta {
	color: #8a8377;
	font-size: 13px;
}

/* ---------- Product cards (review listing) — nieuwe redactionele kaart ----------
   Herbouw van de product-box (src/design.php → show_site, tak rt_theme()==='content').
   Nieuwe markup: .product-box-content > .pbc-top (.pbc-left 65% | .pbc-right 35%)
   > .pbc-divider > .pbc-body > .pbc-action. Doel (mail Rutger 21 aug 2026):
   witte kaart met rand + 8px hoeken, ronde rang-badge naast de titel, gouden
   fade-divider, goud-getinte meta en sterren, Bezoek-knop over de volle breedte
   onderaan. Kaart lijnt exact met de content-breedte (geen negatieve .row-marges). */

/* Kaart-omhulsel. display:flex/column overschrijft Bootstrap's .figure
   (display:inline-block). De margin 0 0 1rem 0 !important dood de negatieve
   marges/verticale ruimte die style.css zou geven en lijnt de kaart met de
   .container-breedte; !important op de border overschrijft de inline
   border-bottom die design.php op de oude markup zette (hier niet meer aanwezig,
   maar defensief bewaard). */
body.theme-content section.product-box-content {
	display: flex;
	flex-direction: column;
	background-color: #fff;
	border: 1px solid #e5e1d8 !important;
	border-radius: 8px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
	padding: 1.5rem;
	margin: 0 0 1rem 0 !important;
}

/* Bovenste sectie: tekstkolom links (65%, bevat nu titel+sterren, divider én
   excerpt), afbeelding rechts (35%). padding:0 zodat de rechterrand van de
   afbeelding exact met de rechterrand van de knop eronder lijnt (mail 24 aug). */
body.theme-content .product-box-content .pbc-top {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1.25rem;
	padding: 0;
}
body.theme-content .product-box-content .pbc-left {
	flex: 0 0 65%;
	max-width: 65%;
	min-width: 0;
}
body.theme-content .product-box-content .pbc-right {
	flex: 0 0 35%;
	max-width: 35%;
	display: flex;
	align-items: flex-start;
	position: relative;
	/* Kolom-padding op 0 (mail tkcheringa 24 aug 2026): de "breathing room" zit nu
	   IN het afbeeldingskader (.pbc-right a) hieronder, niet in de kolom. Zo lijnt
	   de rechterrand van het kader exact met de rechterrand van de Bezoek-knop
	   eronder — beide staan op de kaart-binnenrand (de 1.5rem kaartpadding). */
	padding: 0;
}
/* Afbeeldingskader: het logo krijgt een echte "framed" look — witte achtergrond,
   dezelfde dunne rand + 8px hoeken als de kaart, met gelijke binnenruimte rondom
   (mail tkcheringa 24 aug 2026). width:100% vult de kolom, dus de rechterrand van
   het kader valt samen met de knop eronder én de linkerrand is symmetrisch t.o.v.
   de tekstkolom. box-sizing:border-box houdt rand+padding binnen de 100% zodat er
   niets overloopt. */
body.theme-content .product-box-content .pbc-right a {
	display: block;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	background-color: #fff;
	border: 1px solid #e5e1d8;
	border-radius: 8px;
	padding: 0.75rem;
}
/* Afbeelding gecentreerd en volledig ingesloten in het kader; nooit breder dan
   het kader (geen overflow), onvervormd geschaald. */
body.theme-content .product-box-content .pbc-right img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
	object-fit: contain;
}
/* Hoeklint (label): de gedeelde .ribbon-wrapper-green (85px, top:-8/right:11) is
   te klein en zweeft naast de hoek van de grotere content-afbeelding. Hier
   verankerd op de exacte rechterbovenhoek van de afbeelding en groter geschaald,
   zodat de diagonale band de hoek netjes omwikkelt (mail 24 aug 2026). */
body.theme-content .product-box-content .pbc-right .ribbon-wrapper-green {
	width: 110px;
	height: 110px;
	top: 0;
	right: 0;
}
body.theme-content .product-box-content .pbc-right .ribbon-green {
	width: 155px;
	font-size: 14px;
	padding: 9px 0;
	left: -8px;
	top: 26px;
}

/* Titelregel: ronde rang-badge (links) | titel+meta (midden) | sterren (rechts).
   De h2 is een flex-row met align-items:flex-start; .pbc-titlewrap groeit mee en
   duwt de sterren via margin-left:auto naar uiterst rechts (mail 24 aug 2026). */
body.theme-content .product-box-content h2.site_title {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 0.75rem;
	margin-bottom: 0;
	font-family: Georgia, "Times New Roman", "Noto Serif", serif;
	font-weight: 700;
	line-height: 1.25;
}
/* Rang-badge: perfecte cirkel van 50px, cijfer op 24px. */
body.theme-content .product-box-content h2.site_title .badge.wd-badge {
	flex: 0 0 50px;
	width: 50px;
	height: 50px;
	padding: 0;
	font-size: 24px;
	background-color: transparent !important;
	color: var(--main-color);
	border: 1.5px solid var(--main-color);
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	font-weight: 700;
}
body.theme-content .product-box-content .pbc-titlewrap {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
}
body.theme-content .product-box-content h2.site_title .active-color {
	color: #191919;
}

/* Metaregel (categorie): goud, halfvet, 15px; direct onder de titel. */
body.theme-content .product-box-content .site_meta,
body.theme-content .product-box-content .site_meta a {
	color: rgb(184, 176, 163);
	font-weight: 600;
	font-size: 15px;
}
body.theme-content .product-box-content .site_meta {
	margin-top: 0.15rem;
}

/* Sterren: staan nu in de titelregel, uiterst rechts (margin-left:auto) en iets
   omhoog geschoven zodat ze optisch met de titel uitlijnen. Fel goud met subtiele
   schaduw; de inline color op de <i>-sterren (design.php: color:#f2b01e) vereist
   !important. Sterren op 1.25rem (mail 24 aug 2026). */
body.theme-content .product-box-content h2.site_title .pbc-rating {
	margin-left: auto;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	white-space: nowrap;
	position: relative;
	top: -3px;
}
body.theme-content .product-box-content .rating i.fas,
body.theme-content .product-box-content .rating i.far {
	color: #ffc107 !important;
	font-size: 1.25rem;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
body.theme-content .product-box-content .pbc-edit {
	margin-right: 0.5rem;
}

/* Divider binnen .pbc-left, tussen de titelregel (sterren) en de excerpt-tekst:
   subtiele dunne lichtgrijze lijn met verticale marges (mail 24 aug 2026). */
body.theme-content .product-box-content .pbc-divider {
	height: 1px;
	border: 0;
	margin: 0.9rem 0;
	background: #e2e2e2;
}

/* Body-tekst: hoog contrast, prettige regelafstand. De "Lees verder"-link
   staat in design.php met float-right in de excerpt — hier strikt links. */
body.theme-content .product-box-content .pbc-body {
	color: #444;
	line-height: 1.7;
}
body.theme-content .product-box-content .pbc-body a.float-right {
	float: none !important;
	display: inline-block;
	margin-top: 0.35rem;
}

/* Koppen in de excerpt (.pbc-body.content-excerpt) erfden de globale h2-regel uit
   style.css (font-size:2.2em → 37.4px op de 17px basis), veel te groot voor een
   samenvattingskaart (mail tkcheringa 24 aug 2026). Hier alle niveaus h1–h6
   proportioneel terugschalen tot één typografische familie, met h2 exact op 25.5px
   (1.5em). !important op font-size zodat de globale `h2{font-size:2.2em}` (en
   eventuele andere globale kop-regels) zeker overschreven worden — deze selector
   is al specifieker, het !important is de expliciete garantie. Marges/regelafstand
   ook getemperd zodat de koppen strak in de kaart passen. */
body.theme-content .pbc-body.content-excerpt h1,
body.theme-content .pbc-body.content-excerpt h2,
body.theme-content .pbc-body.content-excerpt h3,
body.theme-content .pbc-body.content-excerpt h4,
body.theme-content .pbc-body.content-excerpt h5,
body.theme-content .pbc-body.content-excerpt h6 {
	line-height: 1.3;
	margin: 0.6rem 0 0.35rem;
	font-weight: 700;
}
body.theme-content .pbc-body.content-excerpt h1 { font-size: 1.8em !important; }  /* 30.6px */
body.theme-content .pbc-body.content-excerpt h2 { font-size: 1.5em !important; }  /* 25.5px */
body.theme-content .pbc-body.content-excerpt h3 { font-size: 1.3em !important; }  /* 22.1px */
body.theme-content .pbc-body.content-excerpt h4 { font-size: 1.15em !important; } /* 19.55px */
body.theme-content .pbc-body.content-excerpt h5 { font-size: 1em !important; }    /* 17px */
body.theme-content .pbc-body.content-excerpt h6 { font-size: 0.9em !important; }  /* 15.3px */

/* Bezoek-knop: over de volle kaartbreedte, onderaan, ingetogen (navy) CTA. */
body.theme-content .product-box-content .pbc-action {
	margin-top: auto;
	padding-top: 1rem;
}
body.theme-content .product-box-content .pbc-action .btn {
	width: 100%;
	margin: 0;
}
body.theme-content .product-box-content .btn-success {
	background-color: #1f2a44;
	border-color: #1f2a44;
	color: #fff;
}
body.theme-content .product-box-content .btn-success:hover,
body.theme-content .product-box-content .btn-success:focus {
	background-color: #161f33;
	border-color: #161f33;
	color: #fff;
}

/* Responsive (<768px): compacte, gecentreerde kaart (mail tkcheringa 24 aug 2026).
   Klant: op mobiel staat er te veel verticale witruimte tussen titel/excerpt/
   afbeelding, moet de afbeelding de volle kaartbreedte vullen zonder kader-padding
   of "descender"-ruimte eronder, en staan alle elementen (tekst, afbeelding, knop)
   gecentreerd. Volgorde blijft: 1) identiteitskop (badge + titel + categorie +
   sterren), 2) afbeelding, 3) divider, 4) excerpt + "Lees verder", tot slot de
   Bezoek-knop. De afbeelding (.pbc-right) moet TUSSEN de kop en de excerpt komen,
   maar die twee zitten samen in .pbc-left terwijl de afbeelding een broer is. Daarom
   lost .pbc-left zich op met display:contents zodat zijn kinderen (h2, divider,
   .pbc-body) directe flex-items van .pbc-top worden, náást .pbc-right — pas dan
   kunnen we ze met `order` door elkaar heen plaatsen. */
@media (max-width: 767px) {
	/* Kaart-binnenruimte terug van 1.5rem → 1rem en alle tekst gecentreerd. */
	body.theme-content section.product-box-content {
		padding: 1rem;
		text-align: center;
	}
	/* Kolomstapeling met kleine, gelijke tussenruimte (was gap 1.25rem) en items
	   horizontaal gecentreerd — minder verticale witruimte tussen de elementen. */
	body.theme-content .product-box-content .pbc-top {
		flex-direction: column;
		gap: 0.5rem;
		align-items: center;
	}
	body.theme-content .product-box-content .pbc-left {
		display: contents;
	}
	body.theme-content .product-box-content h2.site_title { order: 1; }
	body.theme-content .product-box-content .pbc-right    { order: 2; }
	body.theme-content .product-box-content .pbc-divider  { order: 3; }
	body.theme-content .product-box-content .pbc-body     { order: 4; }

	/* Afbeeldingskolom: volle breedte, geen extra bovenmarge (de gap regelt de
	   tussenruimte nu). */
	body.theme-content .product-box-content .pbc-right {
		flex: 0 0 100%;
		max-width: 100%;
		width: 100%;
		margin-top: 0;
		text-align: center;
	}
	/* Afbeeldingskader: kader-padding en rand weg zodat de afbeelding de volledige
	   kaartbreedte vult (geen "extra padding" meer); overflow:hidden houdt de ronde
	   hoeken netjes over de afbeelding heen. */
	body.theme-content .product-box-content .pbc-right a {
		width: 100%;
		padding: 0;
		border: 0;
		border-radius: 6px;
		overflow: hidden;
	}
	/* Afbeelding vult de breedte; display:block haalt de inline "descender"-ruimte
	   eronder weg; object-fit:cover schaalt netjes binnen het kader. */
	body.theme-content .product-box-content .pbc-right img {
		display: block;
		width: 100%;
		height: auto;
		object-fit: cover;
		margin: 0 auto;
	}

	/* Divider strakker: kleinere verticale marge. */
	body.theme-content .product-box-content .pbc-divider {
		margin: 0.5rem 0;
	}
	/* Excerpt gecentreerd; "Lees verder" blijft in de tekststroom (geen float). */
	body.theme-content .product-box-content .pbc-body {
		text-align: center;
	}
	body.theme-content .product-box-content .pbc-body a.float-right {
		float: none !important;
	}

	/* Kop gecentreerd: badge + titel op regel 1 (gecentreerd), de sterren
	   (.pbc-rating) zakken naar een eigen regel eronder en staan óók gecentreerd
	   (margin-left:auto uit de desktopregel hier overschreven). */
	body.theme-content .product-box-content h2.site_title {
		flex-wrap: wrap;
		justify-content: center;
		text-align: center;
	}
	body.theme-content .product-box-content .pbc-titlewrap {
		align-items: center;
	}
	body.theme-content .product-box-content h2.site_title .pbc-rating {
		flex: 0 0 100%;
		margin-left: 0;
		justify-content: center;
		top: 0;
	}

	/* Bezoek-knop: strakker tegen de excerpt. */
	body.theme-content .product-box-content .pbc-action {
		padding-top: 0.5rem;
	}
}

/* ---------- CTA-knoppen (.btn-primary / .btn-success): klassiek/glanzend ----------
   Mail tkcheringa 24 aug 2026. Verticale gradient als transparante overlay
   (eigen kleur boven → iets donkerder onder), zodat het op elke basiskleur werkt:
   btn-primary = var(--main-color), btn-success = groen (of navy in de productkaart).
   background-image krijgt !important omdat style.css met
   `.btn-primary{background:var(--main-color)!important}` anders de overlay wist.
   Staat ná de generieke .btn-regel hierboven, dus wint bij gelijke specificiteit. */
body.theme-content .btn-primary,
body.theme-content .btn-success {
	color: #ffffff !important;
	font-size: 0.9rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 10px 20px;
	border: none;
	border-radius: 4px;
	background-image: linear-gradient(to bottom,
		rgba(255, 255, 255, 0.12) 0%,
		rgba(0, 0, 0, 0.15) 100%) !important;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1),
		inset 0 1px 0 rgba(255, 255, 255, 0.2);
	transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}
/* Hover: knop tilt iets op, wordt lichter en de schaduw wordt dieper ("glow"). */
body.theme-content .btn-primary:hover,
body.theme-content .btn-primary:focus,
body.theme-content .btn-success:hover,
body.theme-content .btn-success:focus {
	color: #ffffff !important;
	transform: translateY(-1px);
	filter: brightness(1.08);
	box-shadow: 0 6px 10px rgba(0, 0, 0, 0.18),
		inset 0 1px 0 rgba(255, 255, 255, 0.25);
}