weer dichtgaat; verbergen doet hetzelfde werk en kan de opmaak niet
stukmaken. Zelfde afweging als op de favorietenpagina en het swipescherm. */
body.gk-omhulsel-pagina #left_container,
body.gk-omhulsel-pagina #categorie_header_text,
body.gk-omhulsel-pagina #pagination_top,
body.gk-omhulsel-pagina .pagination_bottom,
body.gk-omhulsel-pagina #pagination_bottom,
body.gk-omhulsel-pagina #home_speerpunten,
body.gk-omhulsel-pagina #categorie_footer_text,
body.gk-omhulsel-pagina #kaarten_teller,
body.gk-omhulsel-pagina #introText,
body.gk-omhulsel-pagina #seo_text { display: none !important; }
/* De kruimelbalk van de mal ook, want hun eigen pagina brengt er al een mee
("Terug | Home | Je account | Opgeslagen ontwerpen"). Twee kruimelpaden naast
elkaar, met in de onze hun paginatitel uitgeschreven, leest als een fout. */
body.gk-omhulsel-pagina #breadcrumb_bar { display: none !important; }
/* De cookiebanner van de schil is hierboven al uit de pagina gehaald. Wat
overblijft is de link "Cookies" in de voettekst; die zou nu naar een
toestemmingsvenster wijzen dat er niet meer is. De pagina in het kader heeft
zijn eigen banner én zijn eigen link. */
body.gk-omhulsel-pagina #cookie-settings,
body.gk-omhulsel-pagina .stcm-widget,
body.gk-omhulsel-pagina #stcm-widget,
body.gk-omhulsel-pagina [class*="stcm-"] { display: none !important; }
/* Zonder zijbalk mag de rechterkolom de hele breedte hebben. */
body.gk-omhulsel-pagina #right_container {
width: 100% !important;
float: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* De aangeleverde inhoud zelf. Bewust karig: hoe minder wij hier voorschrijven,
hoe minder er botst met de opmaak die de bron zelf meestuurt. Alleen een
leesbare maat, een leesbare breedte en de letters van de site. */
.gk-omhulsel {
/* Geen max-width en geen marges: het accountgedeelte krijgt de volle breedte
van de pagina (Ries, 25-08-2026). De leesbare breedte zit waar hij hoort —
op de tekstblokken zelf, niet op de bak eromheen. */
margin: 0 0 48px;
padding: 0;
color: var(--gk-inkt, #1c1c1c);
font-size: 15px;
line-height: 1.6;
}
/* De voorbeeldinhoud — die staat er alleen als GK_ACCOUNT_BRON leeg is — zou
zonder dit tegen de schermrand plakken. Een echte accountpagina brengt zijn
eigen marges mee en heeft dit niet nodig. */
.gk-omhulsel > h2,
.gk-omhulsel > h3,
.gk-omhulsel > p,
.gk-omhulsel > form,
.gk-omhulsel > label { padding-inline: 16px; }
.gk-omhulsel h2 { font-size: 20px; margin: 26px 0 10px; }
/* h3 volgt het origineel: 24px, geen margin, line-height 24px. Onze eerdere
override (17px + margin) maakte het rechtermenu op de accountpagina's anders dan
bij hen (Robbert, 28-08). `#show_totaal_veld` krijgt dezelfde regelhoogte. */
.gk-omhulsel h3 { font-size: 24px; margin: 0; line-height: 24px; }
.gk-omhulsel #show_totaal_veld { line-height: 24px; }
.gk-omhulsel p { margin: 0 0 14px; }
/* Onze accentkleur op links in de schil — maar NIET op knoppen. Een
`
` is een knop met een eigen tekstkleur (hun account-CSS
zet die op wit voor de groene knoppen). Onze `.gk-omhulsel a` was specifieker
dan hun `.button`, dus onze accentkleur won en de knopteksten werden blauw op
groen — slecht leesbaar (Ries, 27-08-2026: *"op het origineel zijn de teksten
in de buttons wit"*). Met `:not(.button)` blijven knoppen van hén, links van
ons. */
.gk-omhulsel a:not(.button) { color: var(--gk-accent, #4e7ca5); }
/* Géén eigen opmaak op formulieren, knoppen of velden.
Dat stond hier eerst wel — 44 px hoge invoervelden en een blauwe knop — en
dat was goed zolang er kale HTML binnenkwam. Sinds tools/accountproxy.py hun
echte pagina's ophaalt brengen die hun eigen stylesheets mee, en dan vechten
de twee: hun veld kreeg een rand van hen én een breedte van ons, met een
dubbel kader om het e-mailveld tot gevolg. Wie zijn opmaak meebrengt, houdt
hem. Alleen wat de schil zelf nodig heeft staat hieronder. */
/* Een tabel uit een vreemde pagina is zelden smal genoeg voor een telefoon.
Laat hem op een telefoon schuiven in plaats van de pagina breed te maken.
LET OP: `display: block` op de tabel breekt de tabel-layout — `thead`/`tbody`
verliezen dan hun tabel-context en rekken niet mee tot 100% (Robbert zag dat op
#shopcarttable, 28-08). Daarom houden we de tabel op een gewoon scherm een échte
tabel, en laten we hem alléén op smal scherm schuiven, waar het echt nodig is. */
.gk-omhulsel table { width: 100%; border-collapse: collapse; }
@media (max-width: 640px) {
.gk-omhulsel table { display: block; overflow-x: auto; }
}
.gk-omhulsel th, .gk-omhulsel td { padding: 8px 10px; border-bottom: 1px solid #eceff1; text-align: left; }
/* Hun eigen tabellen brengen hun opmaak mee; onze generieke th-opmaak (padding +
onderrand) botst daarmee. Bij de winkelwagen-tabel horen de koppen geen padding
en geen onderrand te hebben (Robbert, 28-08). */
.gk-omhulsel #shopcarttable th { padding: 0; border-bottom: none; }
/* De prijskolom uitlijnen: de kop "Prijs", de bedragen en het totaal moeten
dezelfde rechterrand delen (Ries, 28-08: *"lijn deze even, prijs padding right
30px ofzo"*). Kop stond op padding 0 (flush rechts), de bedragen op 10px — die
liepen dus niet gelijk. Nu allebei 30px rechts, rechts uitgelijnd. */
.gk-omhulsel #shopcarttable th:last-child,
.gk-omhulsel #shopcarttable td:last-child { text-align: right; padding-right: 30px; }
.gk-omhulsel #show_totaal_veld { text-align: right; padding-right: 30px; }
/* Beeld uit de bron mag nooit breder zijn dan de kolom. */
.gk-omhulsel img { max-width: 100%; height: auto; }
/* Het kader waarin het accountgedeelte draait. Hun pagina blijft van hen; wij
zetten er alleen onze kopbalk en voettekst omheen.
De uitleg eronder is geen versiering maar een vangnet: kan de browser het
kader niet laden (omdat frame-ancestors ons niet toestaat), dan blijft het
kader doorzichtig en lees je wat eraan schort. Laadt het wel, dan ligt het
kader er ondoorzichtig overheen en zie je die tekst nooit. */
.gk-kader {
position: relative;
margin: 0;
padding: 0;
min-height: 86vh;
}
/* Zodra de andere kant zijn hoogte doorgeeft telt alleen die nog. */
.gk-kader iframe.gk-op-maat { min-height: 0; }
.gk-kader iframe {
position: relative;
z-index: 2;
width: 100%;
/* Zolang de andere kant zijn hoogte niet doorgeeft vult het kader het scherm.
Dat is beter dan een vast getal: geen half afgesneden pagina, en geen groot
leeg vlak onder een korte pagina. Geeft hij hem wél door (zie het script in
tools/omhulsel.py), dan zet dat script de echte hoogte en groeit het kader
mee met de inhoud — dan is er binnenin niets meer te scrollen. */
min-height: 86vh;
border: 0;
/* Doorzichtig, zodat de uitleg eronder te lezen is zolang de browser het
kader weigert. Laadt hun pagina wel, dan schildert die zijn eigen
achtergrond en zie je die uitleg nooit. */
background: transparent;
display: block;
}
/* De uitleg is tekst en houdt daarom wél een leesbare regellengte. */
.gk-kader-uitleg {
max-width: 760px;
margin: 0 auto 48px;
padding: 4px 16px 24px;
color: var(--gk-zacht, #6b7378);
font-size: 15px;
line-height: 1.6;
}
.gk-kader-uitleg h2 { margin: 0 0 12px; font-size: 19px; color: var(--gk-inkt, #1c1c1c); }
.gk-kader-uitleg ul { margin: 0 0 14px; padding-left: 20px; }
.gk-kader-uitleg li { margin: 0 0 8px; }
.gk-kader-uitleg code {
background: var(--gk-accent-vlak, #f0f6fb);
padding: 2px 6px;
border-radius: 4px;
font-size: 13px;
word-break: break-all;
}
/* Het balletje met het aantal favorieten, naast "Favorieten" in hun accountmenu.
Zelfde kleur en zelfde opveren als het balletje in de kopbalk (hartje.css),
maar niet over een icoon heen: hier staat het gewoon achter de tekst. */
.gk-menu-teller {
display: inline-block;
min-width: 16px;
height: 16px;
margin-left: 8px;
padding: 0 5px;
border-radius: 999px;
background: var(--gk-hart, #eb5e5e);
color: #fff;
font-size: 10px;
font-weight: 700;
line-height: 16px;
text-align: center;
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
vertical-align: middle;
/* Bij nul is hij er niet: scale(0) in plaats van display:none, zodat hij
vanuit het niets opveert zodra je je eerste kaartje bewaart. */
transform: scale(0);
transition: transform .22s cubic-bezier(.34, 1.56, .64, 1);
}
.gk-menu-teller.gk-erop { transform: scale(1); }
.gk-menu-teller.gk-tel-op { animation: gk-menu-tel .4s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes gk-menu-tel {
0% { transform: scale(1); }
45% { transform: scale(1.45); }
100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.gk-menu-teller { transition: none; }
.gk-menu-teller.gk-tel-op { animation: none; }
}