/* Mijn account - aanvullingen op master.css (#login, #accountoverzicht, .accountmenu).
   master.css zelf blijft ongewijzigd. master.css begint zijn regels met #site;
   de regels hieronder doen dat ook, zodat ze voorgaan waar dat nodig is. */
.ka-melding{max-width:1110px;margin:0 auto 20px;padding:12px 16px;border-radius:3px;font-size:1.5rem;line-height:1.45}
.ka-ok{background:#e5f4e4;border:1px solid #7eb733;color:#1e4620}
.ka-fout{background:#fbebeb;border:1px solid #c5243a;color:#7a1020}
.ka-knop{display:inline-block;margin-top:4px;padding:11px 20px;background:#b99954;color:#fff;font-size:1.4rem;text-decoration:none;border:0}
.ka-knop:hover,.ka-knop:focus{background:#20373b;color:#fff;text-decoration:none}
/* Verborgen veld tegen robots (registreren): buiten beeld, niet weg, anders vullen robots het niet in. */
.ka-hp{position:absolute !important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
/* Inlogpagina's (#login.ka-login). master.css maakt elke link in #login goud met een streep eronder. */
#site #login.ka-login .inner .ka-melding{max-width:none;margin:0 0 20px}
#site #login.ka-login .row .col-12 .inner .ka-melding a{display:inline;margin:0;color:inherit;font-family:inherit;font-size:inherit;border-bottom:1px solid currentColor}
#site #login.ka-login .row .col-12 .inner p{margin:0 0 16px;font-size:1.6rem;line-height:1.5}
#site #login.ka-login .row .col-12~.col-12 .inner p{color:#fff}
#site #login.ka-login .row .col-12 .inner a.ka-knop{margin-top:4px;padding:0 24px;height:44px;line-height:4.4rem;color:#fff;font-family:Museo900;font-size:1.6rem;text-transform:uppercase;text-decoration:none;border:0;background:#b99954}
#site #login.ka-login .row .col-12 .inner a.ka-knop:hover,#site #login.ka-login .row .col-12 .inner a.ka-knop:focus{background:#20373b}
/* Overzicht (#accountoverzicht) */
/* master.css zet de kop per ongeluk op font-family:bold (valt terug op een standaardletter). */
#site #accountoverzicht h1{font-family:"cinzel"}
#site #accountoverzicht .ka-melding{max-width:none;margin:0 0 20px}
/* master.css rekent met een kop van 53px; die is 56px, waardoor de onderrand wegvalt.
   Met flex vult de inhoud precies de rest van het blok. */
#site #accountoverzicht .gegevensblokken .blok{display:flex;flex-direction:column}
#site #accountoverzicht .gegevensblokken .blok .blokcontent{flex:1 1 auto;height:auto}
/* Lange e-mailadressen breken af binnen het blok in plaats van eruit te lopen. */
#site #accountoverzicht .gegevensblokken .blok .blokcontent dl dd{overflow-wrap:anywhere}
.ka-welkom{font-size:1.7rem;margin:0 0 20px}
.ka-banner{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;background:#f6f3ec;border-left:4px solid #b99954;padding:14px 18px;margin:0 0 28px}
.ka-banner p{margin:0;font-size:1.5rem;line-height:1.45;flex:1 1 320px}
.ka-banner form{margin:0}
.ka-banner button{padding:10px 18px;background:#b99954;color:#fff;border:0;font-size:1.4rem;cursor:pointer}
.ka-banner button:hover,.ka-banner button:focus{background:#20373b}
/* Accountmenu: de uitlogknop in de stijl van de menulinks.
   De streep bij hover staat op de tekst (span), niet op de knop: een rand op de knop
   maakt hem 2px hoger en dan verspringt de grijze balk. */
#site .accountmenu .ka-uitloggen{display:inline;margin:0}
#site .accountmenu .ka-uitloggen button{background:none;border:0;padding:0;color:#000;font-family:inherit;font-size:1.8rem;line-height:inherit;cursor:pointer}
#site .accountmenu .ka-uitloggen button:hover span,#site .accountmenu .ka-uitloggen button:focus span{border-bottom:2px solid #20373b}
/* Fase 2 */
#site #accountoverzicht .ka-melding,#site #besteldetail .ka-melding{max-width:none;margin:0 0 20px}
#site #accountoverzicht p.ka-leeg{margin:0;padding:16px 29px;font-family:museo300;font-size:1.6rem;line-height:1.5}
#site #accountoverzicht > p.ka-leeg{padding:0 0 20px}
#site #accountoverzicht p.ka-uitleg{margin:8px 0 28px;color:#4a5355;font-family:museo300;font-size:1.5rem;line-height:1.5}
#site #accountoverzicht p.ka-uitleg a{color:#20373b;text-decoration:underline}
/* Uw gegevens: een formulier per blok. */
#site #accountoverzicht .gegevensblokken .row~.row{margin-top:30px}
#site #accountoverzicht .gegevensblokken .blok > form{display:flex;flex-direction:column;flex:1 1 auto}
#site #accountoverzicht .gegevensblokken .blok .blokcontent p.ka-uitleg{margin:4px 0 12px;color:#4a5355;font-size:1.5rem;line-height:1.5}
#site #accountoverzicht .gegevensblokken .blok .blokcontent dl dd.ka-nr{display:flex;gap:8px}
#site #accountoverzicht .gegevensblokken .blok .blokcontent dl dd.ka-nr input{flex:1 1 0;min-width:0}
#site #accountoverzicht .gegevensblokken .blok .blokcontent dl dd.ka-nr input+input{flex:0 0 90px}
#site #accountoverzicht .gegevensblokken .blok .blokcontent input[type=checkbox]{width:auto;height:auto;margin:0 8px 0 0;vertical-align:middle}
#site #accountoverzicht .gegevensblokken .blok .blokcontent p.ka-keuze{margin:6px 0 4px}
#site #accountoverzicht .gegevensblokken .blok .blokcontent p.ka-keuze label{cursor:pointer}
#ka-bezorgvelden[hidden]{display:none}
.ka-acties{margin:10px 0 16px}
.ka-opslaan{padding:10px 20px;background:#b99954;color:#fff;border:0;font-family:Museo900;font-size:1.4rem;text-transform:uppercase;cursor:pointer}
.ka-opslaan:hover,.ka-opslaan:focus{background:#20373b}
/* Bestellingen */
.ka-label{display:inline-block;margin-left:6px;padding:0 7px;border:1px solid #b99954;border-radius:3px;color:#7a5f22;font-size:1.2rem;line-height:1.9rem;vertical-align:middle}
@media(min-width: 768px){.ka-label-kort{display:none}}
/* "Bekijk" zo breed als het woord: master.css geeft de link vanaf 768px 26,7% breedte (hoogstens 117px), met de onderrand over die hele breedte. */
#site #accountoverzicht .bestellingen .bestelcontent .td a{width:auto}
#site #besteldetail .besteltop dl{margin-bottom:0}
#site #besteldetail .overzicht .product .ka-geenfoto{display:block;width:100%;padding-top:100%;background:#e8ebeb}
#site #besteldetail .overzicht .product .omschrijving p.ka-retourregel{margin-top:8px;color:#7a5f22;font-size:1.5rem}
#site #besteldetail .ka-adressen{display:flex;flex-wrap:wrap;gap:20px;margin-top:24px}
#site #besteldetail .ka-adres{flex:1 1 260px;padding:20px 24px;background:#f4f5f5}
#site #besteldetail .ka-adres h2{margin-bottom:8px;color:#20373b;font-family:museo700;font-size:1.8rem}
#site #besteldetail .ka-adres p{color:#20373b;font-family:museo300;font-size:1.6rem;line-height:1.6}
/* Overzicht: laatste bestellingen */
#site #accountoverzicht .gegevensblokken .blok .blokcontent ul.ka-laatste{margin:4px 0 8px;padding:0;list-style:none}
/* Elke regel hetzelfde raster, zodat de kolommen recht onder elkaar staan. Smal: nummer en bedrag
   bovenaan, datum en status eronder. Is het blok breed genoeg, dan alles op een regel.
   De kolombreedtes passen bij 8 cijfers en dd-mm-jjjj in museo (gemeten: 87 en 102 px bij 17,6 px). */
#site #accountoverzicht .gegevensblokken .blok .blokcontent.ka-bestelblok{container-type:inline-size}
#site #accountoverzicht .gegevensblokken .blok .blokcontent ul.ka-laatste li{display:grid;grid-template-columns:6.25em 1fr;grid-template-areas:"nr bedrag" "datum status";gap:2px 14px;padding:8px 0;border-bottom:1px solid #e3e6e6;font-family:museo300;font-size:1.6rem;line-height:2.2rem}
#site #accountoverzicht .gegevensblokken .blok .blokcontent ul.ka-laatste li a{grid-area:nr;justify-self:start;color:#20373b;font-family:museo700;text-decoration:underline}
#site #accountoverzicht .gegevensblokken .blok .blokcontent ul.ka-laatste li .ka-datum{grid-area:datum}
#site #accountoverzicht .gegevensblokken .blok .blokcontent ul.ka-laatste li .ka-betaalstatus{grid-area:status}
#site #accountoverzicht .gegevensblokken .blok .blokcontent ul.ka-laatste li .ka-bedrag{grid-area:bedrag;justify-self:end;text-align:right;white-space:nowrap}
@container (min-width: 530px){#site #accountoverzicht .gegevensblokken .blok .blokcontent ul.ka-laatste li{grid-template-columns:5.25em 6.25em 1fr auto;grid-template-areas:"nr datum status bedrag"}}
#site #accountoverzicht .gegevensblokken .blok .blokcontent a.ka-meer{color:#20373b;text-decoration:underline}
/* Retouren */
.ka-retouren{margin-bottom:10px}
.ka-retour{margin-bottom:24px;border:1px solid #c7cdce}
.ka-retour-kop{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 16px;padding:12px 29px;background:#f4f5f5;border-bottom:1px solid #c7cdce}
#site #accountoverzicht .ka-retour-kop h2{margin:0;color:#20373b;font-family:museo500;font-size:1.8rem;line-height:2.6rem}
#site #accountoverzicht .ka-retour-kop h2 span{margin-left:8px;font-family:museo300}
.ka-status{color:#20373b;font-family:museo700;font-size:1.5rem}
.ka-retour-inhoud{padding:12px 29px 14px}
#site #accountoverzicht .ka-retour-inhoud p{margin:0 0 8px;color:#000;font-family:museo300;font-size:1.6rem;line-height:1.5}
#site #accountoverzicht .ka-retour-inhoud p a{color:#20373b;text-decoration:underline}
#site #accountoverzicht .ka-retour-inhoud ul.ka-artikelen{margin:0 0 10px;padding-left:18px;font-family:museo300;font-size:1.6rem;line-height:1.6}
/* Retour aanmelden (2026-10-30) */
#site #accountoverzicht p.ka-uitleg + .ka-melding{margin-top:-12px}
#site #accountoverzicht .ka-retour-inhoud ol.ka-artikelen{margin:0 0 10px;padding-left:20px;font-family:museo300;font-size:1.6rem;line-height:1.6}
#site #accountoverzicht .ka-retour-inhoud p.ka-retourinstructie{padding:10px 14px;background:#f6f3ec;border-left:4px solid #b99954}
#site #accountoverzicht .ka-retourform .ka-retour-kop h2{font-family:museo700}
.ka-retourkeuze{margin:0;padding:0;list-style:none}
.ka-retourkeuze li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 20px;padding:12px 0;border-bottom:1px solid #e3e6e6}
.ka-retourkeuze li:last-child{border-bottom:0}
.ka-retourkeuze li.ka-niet{opacity:.55}
.ka-retourkeuze label{flex:1 1 260px;margin:0;font-family:museo300;font-size:1.6rem;line-height:1.45;color:#000}
.ka-retourkeuze label strong{display:block;color:#20373b;font-family:museo700;font-weight:normal}
.ka-retourkeuze label span{color:#4a5355;font-size:1.5rem}
.ka-retourform select,.ka-retourform textarea{max-width:100%;padding:8px 10px;border:1px solid #c7cdce;background:#fff;color:#000;font-family:museo300;font-size:1.6rem}
.ka-retourform select{min-width:200px;height:42px}
.ka-retourform textarea{width:560px;min-height:100px;resize:vertical}
#site #accountoverzicht .ka-retourform .ka-retour-inhoud label{font-family:museo700;font-size:1.5rem;color:#20373b}
.ka-optioneel{font-family:museo300;color:#4a5355}
.ka-opslaan[disabled]{opacity:.6;cursor:default}
#site #besteldetail .ka-retourblok{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px;margin-top:24px;padding:16px 24px;background:#f6f3ec;border-left:4px solid #b99954}
#site #besteldetail .ka-retourblok p{margin:0;color:#20373b;font-family:museo300;font-size:1.6rem;line-height:1.5}
#site #besteldetail .ka-retourblok a.ka-knop{margin-top:0;color:#fff}
/* Totalen bij een bestelling: de kolom past zich aan de langste omschrijving aan (master.css: 96px). */
#site #besteldetail .totaal dl{display:grid;grid-template-columns:auto auto;column-gap:40px;row-gap:15px}
#site #besteldetail .totaal dl dt,#site #besteldetail .totaal dl dd{float:none;width:auto;margin:0;padding:0}
#site #besteldetail .totaal dl dt~dt,#site #besteldetail .totaal dl dd~dd{margin-top:0}
#site #besteldetail .totaal dl dd{min-width:136px;text-align:right}
/* Knop onderaan een korte pagina niet tegen de footer. */
#site #accountoverzicht p.ka-onderaan{margin-bottom:50px}
/* E-mailadres: alleen ter inzage. */
#site #accountoverzicht .gegevensblokken .blok .blokcontent dl dd input[readonly]{background:#f4f5f5;color:#4a5355;border:1px solid #d8dcdd;cursor:default}
/* Maten een stap kleiner (feedback 27-10-2026). De mock-up in master.css zet bijna alles op 1,8rem;
   de rest van de site gebruikt 1,6rem voor gewone tekst. Kopjes, menu en regelafstand zijn kleiner,
   gewone tekst staat op 1,6rem (leesbaar, ook in museo300). Terugdraaien: dit blok weghalen. */
#site .accountmenu ul li a,#site .accountmenu .ka-uitloggen button{font-size:1.5rem}
#site #accountoverzicht h1{font-size:2.4rem}
@media(min-width: 768px){#site #accountoverzicht h1{font-size:2.8rem}}
.ka-welkom{font-size:1.6rem}
.ka-melding{font-size:1.5rem}
.ka-banner p{font-size:1.5rem}
.ka-banner button,.ka-knop,.ka-opslaan{font-size:1.4rem}
#site #accountoverzicht .gegevensblokken .blok .head h2,#site #accountoverzicht .bestellingen .head h2{font-size:1.6rem}
#site #accountoverzicht .gegevensblokken .blok .head a,#site #accountoverzicht .gegevensblokken .blok .head input[type=submit]{font-size:1.5rem}
#site #accountoverzicht .gegevensblokken .blok .blokcontent h4,#site #accountoverzicht .gegevensblokken .blok .blokcontent p{font-size:1.6rem;line-height:2.6rem}
#site #accountoverzicht .gegevensblokken .blok .blokcontent dl dt,#site #accountoverzicht .gegevensblokken .blok .blokcontent dl dd{font-size:1.6rem;line-height:3.8rem}
#site #accountoverzicht .gegevensblokken .blok .blokcontent dl dd input,#site #accountoverzicht .gegevensblokken .blok .blokcontent dl dd select{height:34px;font-size:1.6rem;color:#20373b}
#site #accountoverzicht p.ka-leeg{font-size:1.5rem}
#site #accountoverzicht p.ka-uitleg,#site #accountoverzicht .gegevensblokken .blok .blokcontent p.ka-uitleg{font-size:1.4rem}
#site #accountoverzicht .bestellingen .bestelcontent .th h3,#site #accountoverzicht .bestellingen .bestelcontent .td p,#site #accountoverzicht .bestellingen .bestelcontent .td a{font-size:1.5rem}
#site #accountoverzicht .gegevensblokken .blok .blokcontent ul.ka-laatste li{font-size:1.5rem}
@container (min-width: 500px){#site #accountoverzicht .gegevensblokken .blok .blokcontent ul.ka-laatste li{grid-template-columns:5.25em 6.25em 1fr auto;grid-template-areas:"nr datum status bedrag"}}
#site #accountoverzicht .ka-retour-kop h2{font-size:1.6rem;line-height:2.2rem}
.ka-status{font-size:1.4rem}
#site #accountoverzicht .ka-retour-inhoud p,#site #accountoverzicht .ka-retour-inhoud ul.ka-artikelen,#site #accountoverzicht .ka-retour-inhoud ol.ka-artikelen,.ka-retourkeuze label,#site #besteldetail .ka-retourblok p{font-size:1.5rem}
#site #besteldetail .besteltop dl dt,#site #besteldetail .besteltop dl dd{font-size:1.6rem}
#site #besteldetail .overzicht .product .omschrijving h3,#site #besteldetail .overzicht .product .omschrijving p,#site #besteldetail .overzicht .product .prijs span{font-size:1.6rem;line-height:2.2rem}
#site #besteldetail .overzicht .product .omschrijving p.ka-retourregel{font-size:1.4rem}
#site #besteldetail .totaal dl{font-size:1.6rem}
#site #besteldetail .ka-adres h2{font-size:1.6rem}
#site #besteldetail .ka-adres p{font-size:1.5rem}
#site #login.ka-login{margin-bottom:80px}
#site #login .row .col-12 .inner h2{font-size:3.6rem}
/* Ingevulde tekst donker; master.css maakt die even lichtgrijs als de placeholder. */
#site #login .row .col-12 .inner form input[type=text],#site #login .row .col-12 .inner form input[type=email],#site #login .row .col-12 .inner form input[type=password]{height:40px;margin-bottom:16px;padding:0 18px;color:#20373b;font-size:1.6rem;line-height:3.6rem}
#site #login .row .col-12 .inner form input[type=submit]{height:40px;font-size:1.4rem;line-height:3.6rem}
#site #login .row .col-12 .inner form p.err{font-size:1.5rem}
#site #login .row .col-12 .inner a{font-size:1.4rem}
#site #login.ka-login .row .col-12 .inner p{font-size:1.5rem}
#site #login.ka-login .row .col-12 .inner a.ka-knop{height:40px;line-height:3.6rem;font-size:1.4rem}
/* Productfoto bij een bestelling smaller en producten dichter op elkaar (Jasper, 27-10-2026): 130px in
   plaats van 170px, inclusief de 36px ruimte tot de tekst; de omschrijving schuift mee. */
#site #besteldetail .overzicht .product .img{width:130px;padding:0 36px 15px 0}
#site #besteldetail .overzicht .product~.product{padding-top:15px}
@media(min-width: 768px){#site #besteldetail .overzicht .product .omschrijving{width:calc(100% - 266px)}}
/* Verlanglijst (2026-11-03). Het blok (.wishlist .head/.wishcontent) staat al in master.css (mock-up).
   Hier is de kaart een div met een link erin (de verwijderknop is een eigen formulier, dat mag niet in een link). */
#site #accountoverzicht .wishlist .head h2{float:left}
#site #accountoverzicht .wishlist .wishcontent p.ka-leeg{padding:8px 0}
#site #accountoverzicht .wishlist .wishcontent .product{position:relative}
#site #accountoverzicht .wishlist .wishcontent .product > a,#site #accountoverzicht .wishlist .wishcontent .product > .ka-vl-inhoud{display:flex;flex-direction:column;flex:1 1 auto;color:inherit;text-align:center;text-decoration:none}
#site #accountoverzicht .wishlist .wishcontent .product picture img{display:block;width:100%;max-width:100%;margin-bottom:5px}
#site #accountoverzicht .wishlist .wishcontent .product .ka-geenfoto{display:block;width:100%;padding-top:100%;margin-bottom:5px;background:#e8ebeb}
#site #accountoverzicht .wishlist .wishcontent .product .knopje{margin-top:auto}
#site #accountoverzicht .wishlist .wishcontent .product .prijsvan + .prijsvoor,#site #accountoverzicht .wishlist .wishcontent .product h2 + .prijsvoor{margin-bottom:20px}
#site #accountoverzicht .wishlist .wishcontent form.ka-vl-verwijder{margin:0}
#site #accountoverzicht .wishlist .wishcontent button.delete{position:absolute;top:20px;left:20px;z-index:2;display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;background:rgba(255,255,255,.9);border:1px solid #c7cdce;border-radius:50%;cursor:pointer}
#site #accountoverzicht .wishlist .wishcontent button.delete img{width:16px;height:auto}
#site #accountoverzicht .wishlist .wishcontent button.delete:hover,#site #accountoverzicht .wishlist .wishcontent button.delete:focus{border-color:#20373b}
#site #accountoverzicht .wishlist .wishcontent .ka-vl-weg picture,#site #accountoverzicht .wishlist .wishcontent .ka-vl-weg h2{opacity:.55}
#site #accountoverzicht .wishlist .wishcontent .ka-vl-status{display:block;margin-top:8px;color:#7a5f22;font-family:museo300;font-size:1.5rem}