/* ================================================================
   Heye Pharma — opmaak van het bestelplatform (index.html)
   ----------------------------------------------------------------
   Zelfde uiterlijk als de Heye Store-webshop: zwarte infobalk,
   witte kopbalk met logo en zoekveld, banner, afdelingsknoppen,
   productkaarten en een mandje dat van rechts inschuift.
   De beheerpagina (beheer.html) houdt haar eigen styles.css.

   De kleuren staan bovenaan. Ze heten "huis" (de huiskleur);
   nu is dat donkerrood.
   ================================================================ */
:root{
  --huis:#9b1c1c;          /* knoppen en actieve knopjes */
  --huis-donker:#7a1515;   /* tekst op wit (prijzen, koppen) + hover */
  --huis-licht:#fbefef;    /* zachte achtergrond */
  --accent-zacht:#f2a7a7;  /* vette tekst in de zwarte infobalk */
  --hero-1:#a82020; --hero-2:#951b1b; --hero-3:#7a1515; --hero-tekst:#ffffff;
  --inkt:#1a1a1a;
  --grijs:#6e6a66;
  --lijn:#eae5e0;
  --rand:#d9d3cd;
  --achtergrond:#faf8f6;
  --wit:#ffffff;
  --groen:#1c6b3a; --groen-licht:#e9f6ee;
  --rood:#b3261e;  --rood-licht:#fdecea;
  --geel:#8a5a00;  --geel-licht:#fff4d6;
  --schaduw:0 4px 18px rgba(90,55,20,.10);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Segoe UI",system-ui,-apple-system,Arial,sans-serif;color:var(--inkt);
  background:var(--achtergrond);line-height:1.5}
button,input,select,textarea{font-family:inherit}
a{color:var(--huis-donker)}
.verborgen{display:none !important}
.op-gsm{display:none}
:focus-visible{outline:2px solid var(--huis);outline-offset:2px}

/* ---- Demobalk en infobalk ---- */
.demobalk{background:var(--geel-licht);color:var(--geel);font-size:13px;text-align:center;padding:6px 12px}
.infobalk{background:var(--inkt);color:#fff;font-size:13.5px;text-align:center;padding:9px 16px;letter-spacing:.2px}
.infobalk strong{color:var(--accent-zacht);font-weight:700}
.infobalk .scheiding{opacity:.45;margin:0 10px}

/* ---- Kopbalk ---- */
header{position:sticky;top:0;z-index:20;background:var(--wit);border-bottom:1px solid var(--lijn);box-shadow:var(--schaduw)}
.balk{max-width:1150px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:18px}
.logo{flex-shrink:0;text-decoration:none;color:inherit}
.logo img{display:block;height:50px;width:auto}
.logo span{font-weight:400;color:var(--grijs);font-size:13px;display:block;margin-top:2px;white-space:nowrap}
.zoek{flex:1;min-width:160px}
.zoek input{width:100%;padding:11px 16px;border:1px solid var(--lijn);border-radius:30px;
  font-size:15px;background:var(--achtergrond);outline:none}
.zoek input:focus{border-color:var(--huis)}
/* Accountknop met menu */
.account{position:relative;flex-shrink:0}
.accountknop{display:flex;align-items:center;gap:7px;border:1px solid var(--lijn);background:var(--wit);color:var(--inkt);
  padding:8px 12px;border-radius:30px;font-size:14px;cursor:pointer;max-width:230px}
.accountknop:hover,.accountknop[aria-expanded="true"]{border-color:var(--huis);background:var(--huis-licht)}
.accountknop b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.account-icoon{font-size:15px;line-height:1}
.pijl{font-size:11px;color:var(--grijs)}
.accountmenu{position:absolute;right:0;top:calc(100% + 8px);min-width:240px;background:var(--wit);border:1px solid var(--lijn);
  border-radius:14px;box-shadow:0 12px 32px rgba(0,0,0,.14);padding:6px;z-index:25}
.am-wie{font-size:12.5px;color:var(--grijs);padding:8px 12px 10px;border-bottom:1px solid var(--lijn);margin-bottom:4px;word-break:break-all}
.am-item{display:block;width:100%;text-align:left;border:none;background:none;color:var(--inkt);font-size:14.5px;
  padding:10px 12px;border-radius:9px;cursor:pointer;text-decoration:none}
.am-item:hover,.am-item.actief{background:var(--huis-licht);color:var(--huis-donker)}
.am-uit{border-top:1px solid var(--lijn);border-radius:0 0 9px 9px;margin-top:4px;color:var(--grijs)}
.taalkeuze{flex-shrink:0}
.mand-bedrag{margin-left:8px;padding-left:8px;border-left:1px solid rgba(255,255,255,.4);font-weight:700}
.mandknop{position:relative;border:none;cursor:pointer;background:var(--huis);color:#fff;
  padding:11px 20px;border-radius:30px;font-size:15px;font-weight:600;flex-shrink:0}
.mandknop:hover{background:var(--huis-donker)}
.badge{position:absolute;top:-7px;right:-7px;background:var(--inkt);color:#fff;min-width:22px;height:22px;
  border-radius:11px;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 5px}

/* ---- Banner ---- */
.hero{background:linear-gradient(135deg,var(--hero-1) 0%,var(--hero-2) 55%,var(--hero-3) 100%);border-bottom:1px solid var(--hero-3)}
.hero-inner{max-width:1150px;margin:0 auto;padding:30px 20px 32px;text-align:center}
.hero h1{font-size:28px;color:#fff;margin-bottom:8px;line-height:1.2;text-wrap:balance}
.hero p{max-width:640px;margin:0 auto;color:var(--hero-tekst);opacity:.95;font-size:15.5px;line-height:1.55}

/* ---- Aanmeldscherm: kaart in de banner ---- */
.login-hero .hero-inner{padding:48px 20px 64px}
.loginkaart{max-width:420px;margin:24px auto 0;background:var(--wit);border:1px solid var(--lijn);border-radius:16px;
  padding:22px 22px 18px;box-shadow:0 4px 18px rgba(0,0,0,.06);text-align:left}
.loginkaart h2{font-size:18px;margin-bottom:14px;text-align:center}
.loginkaart .klein{font-size:13px;color:var(--grijs);margin-top:12px;text-align:center;line-height:1.5}
.loginkaart .uitleg{font-size:14px;color:var(--grijs);margin:-4px 0 14px;line-height:1.5;text-align:center}
.vergeten-link{margin-top:10px !important}
.linkknop{border:none;background:none;color:var(--huis-donker);text-decoration:underline;cursor:pointer;font-size:13.5px;padding:2px}
.linkknop:hover{color:var(--huis)}
.ok-melding{background:var(--groen-licht);color:var(--groen);border:1px solid #bfe3cc;border-radius:10px;padding:10px 12px;font-size:14px;margin:8px 0 12px;line-height:1.45}
.wwregels{list-style:none;margin:-2px 0 10px;padding:0;font-size:13px;color:var(--grijs);display:grid;grid-template-columns:1fr 1fr;gap:3px 12px}
.wwregels li::before{content:"○ ";color:var(--rand)}
.wwregels li.ok{color:var(--groen)}
.wwregels li.ok::before{content:"✓ ";color:var(--groen)}
.tonen{display:flex;gap:8px;align-items:center;font-size:13.5px;color:var(--grijs);margin-bottom:10px;cursor:pointer}
.tonen input{accent-color:var(--huis)}
.demo-accounts{margin-top:14px;font-size:13px;color:var(--grijs);border-top:1px dashed var(--rand);padding-top:12px;line-height:1.7}
.demo-accounts code{background:var(--achtergrond);padding:1px 5px;border-radius:4px}
.troeven{max-width:900px;margin:0 auto;padding:28px 20px 50px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.troef{background:var(--wit);border:1px solid var(--lijn);border-radius:14px;padding:16px 18px}
.troef b{display:block;margin-bottom:4px;color:var(--huis-donker)}
.troef span{font-size:14px;color:var(--grijs)}

/* ---- Velden en knoppen ---- */
.veld{margin-bottom:12px}
.veld label,.veldlabel{display:block;font-size:13px;color:var(--grijs);margin-bottom:4px;font-weight:600}
.veld input,.veld textarea{width:100%;padding:10px 12px;border:1px solid var(--lijn);border-radius:9px;font-size:15px;
  background:var(--achtergrond);outline:none}
.veld input:focus,.veld textarea:focus{border-color:var(--huis)}
.hoofdknop{width:100%;background:var(--huis);color:#fff;border:none;padding:13px;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer}
.hoofdknop:hover{background:var(--huis-donker)}
.hoofdknop:disabled{background:var(--lijn);color:var(--grijs);cursor:not-allowed}
.tweedeknop{border:1px solid var(--huis);background:#fff;color:var(--huis-donker);padding:9px 14px;border-radius:10px;
  font-size:14px;font-weight:600;cursor:pointer}
.tweedeknop:hover{background:var(--huis);color:#fff}
.fout{background:var(--rood-licht);color:#8c1d18;border:1px solid #f3c1bd;border-radius:10px;padding:10px 12px;font-size:14px;margin:8px 0 12px}
.hint{font-size:13px;color:var(--grijs)}

/* ---- Afdelingen en categorieën ---- */
main{max-width:1150px;margin:0 auto;padding:26px 20px 60px}
.afdelingen{display:flex;gap:4px;margin-bottom:16px;border-bottom:2px solid var(--lijn);overflow-x:auto;scrollbar-width:none}
.afdelingen button{border:none;border-bottom:3px solid transparent;margin-bottom:-2px;background:none;color:var(--grijs);
  padding:10px 16px 12px;font-size:16px;font-weight:600;cursor:pointer;white-space:nowrap;transition:color .12s,border-color .12s}
.afdelingen button:hover{color:var(--inkt)}
.afdelingen button.actief{color:var(--huis-donker);border-bottom-color:var(--huis)}
.afdelingen .tal{font-size:12px;font-weight:600;color:var(--grijs);margin-left:6px;opacity:.8}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.filters button{border:1px solid var(--lijn);background:var(--wit);color:var(--inkt);padding:8px 16px;border-radius:30px;
  font-size:14px;cursor:pointer;transition:all .12s}
.filters button:hover{border-color:var(--huis)}
.filters button.actief{background:var(--huis);border-color:var(--huis);color:#fff;font-weight:700}
.werkbalk{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.telling{color:var(--grijs);font-size:14px}
.merkkeuze{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--grijs)}
.merkkeuze select{border:1px solid var(--lijn);background:var(--wit);color:var(--inkt);border-radius:9px;padding:7px 10px;font-size:14px;cursor:pointer}
.merkkeuze select:focus{border-color:var(--huis);outline:none}
/* Welkomstrook (in plaats van de grote banner) */
.welkom{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.welkom h1{font-size:22px;line-height:1.25}
.welkom p{font-size:14px;color:var(--grijs)}
.laatste{display:flex;align-items:center;gap:14px;background:var(--wit);border:1px solid var(--lijn);border-radius:12px;padding:10px 12px 10px 16px;font-size:14px}
.laatste small{display:block;font-size:12px;color:var(--grijs)}
.leeg{text-align:center;color:var(--grijs);padding:50px 10px}

/* ---- Productkaarten ---- */
.rooster{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.kaart{background:var(--wit);border:1px solid var(--lijn);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;
  transition:transform .12s, box-shadow .12s}
.kaart:hover{transform:translateY(-3px);box-shadow:var(--schaduw)}
.kaart .foto{aspect-ratio:1/1;background:#fff;display:flex;align-items:center;justify-content:center;padding:14px;position:relative}
.kaart .foto img{max-width:100%;max-height:100%;object-fit:contain}
.kaart.lens .foto{aspect-ratio:16/10;padding:10px 14px}
.kaart .geenfoto{color:var(--grijs);font-size:13px}
.kaart .label{position:absolute;top:10px;left:10px;font-size:11px;font-weight:700;border-radius:6px;padding:2px 8px;
  background:var(--geel-licht);color:var(--geel)}
.kaart .inhoud{padding:12px 14px 16px;display:flex;flex-direction:column;gap:9px;flex:1}
.kaart .naam{font-size:14px;font-weight:600;min-height:38px}
.kaart .codes{font-size:11.5px;color:var(--grijs);display:flex;flex-wrap:wrap;gap:2px 10px;margin-top:-4px}
.kaart .prijs{font-size:19px;font-weight:700;color:var(--huis-donker);line-height:1.2}
.kaart .prijs small{display:block;font-size:12px;font-weight:400;color:var(--grijs)}
.kaart .publiek{font-size:12px;color:var(--grijs);margin-top:-4px}
.kaart .publiek b{color:var(--groen);font-weight:700}
.kaart .prijsvolgt{font-size:14px;color:var(--grijs);font-style:italic}
.kaart .variantregel{display:flex;flex-direction:column;gap:4px}
.kaart .variantregel span{font-size:12px;color:var(--grijs);font-weight:600}
.kaart select{width:100%;padding:8px 10px;border:1px solid var(--rand);border-radius:8px;background:#fff;font-size:14px;color:var(--inkt);cursor:pointer}
.kaart .koop{display:flex;gap:8px;margin-top:auto;align-items:stretch}
.kaart .koop .voegtoe{flex:1;border:1px solid var(--huis);background:#fff;color:var(--huis-donker);padding:9px 6px;border-radius:10px;
  font-size:14px;font-weight:600;cursor:pointer}
.kaart .koop .voegtoe:hover{background:var(--huis);color:#fff}
.kaart .koop .voegtoe.ok{background:var(--groen);border-color:var(--groen);color:#fff}
.kaart .koop .voegtoe:disabled{border-color:var(--lijn);color:var(--grijs);background:var(--achtergrond);cursor:not-allowed}

/* Productfiche */
.kaart .foto[data-fiche]{cursor:zoom-in}
.naamknop{border:none;background:none;padding:0;font:inherit;color:inherit;text-align:left;cursor:pointer}
.naamknop:hover{color:var(--huis-donker);text-decoration:underline}
.infoknop{border:none;background:none;padding:0 2px;font-size:15px;color:var(--huis);cursor:pointer;vertical-align:baseline}
.fichekaart{position:relative;background:var(--wit);border-radius:18px;max-width:860px;width:100%;max-height:90vh;overflow:auto;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:24px;padding:26px;box-shadow:0 20px 60px rgba(0,0,0,.28)}
.fichekaart .sluit{position:absolute;top:10px;right:14px}
.fiche-foto{display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--lijn);border-radius:14px;padding:12px;min-height:240px}
.fiche-foto img{max-width:100%;max-height:420px;object-fit:contain}
.fiche-inhoud h2{font-size:21px;margin:0 30px 6px 0;line-height:1.25}
.fiche-inhoud .codes{font-size:12px;color:var(--grijs);display:flex;flex-wrap:wrap;gap:2px 12px;margin-bottom:10px}
.fiche-inhoud .levlabel{font-size:12px;color:var(--huis-donker);background:var(--huis-licht);border-radius:6px;padding:3px 8px;display:inline-block;margin-bottom:10px}
.fiche-tekst{font-size:14.5px;line-height:1.6;margin-bottom:14px}
.fiche-tekst p{margin-bottom:8px}
.fiche-tekst ul{margin:0 0 10px 20px}
.fiche-tekst li{margin-bottom:3px}
@media (max-width:760px){.fichekaart{grid-template-columns:1fr;padding:18px;gap:14px}.fiche-foto{min-height:0}.fiche-foto img{max-height:240px}}

/* Rechtstreekse levering */
.kaart .levlabel{font-size:12px;color:var(--huis-donker);background:var(--huis-licht);border-radius:6px;padding:3px 8px;align-self:flex-start}
.mandgroep{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--grijs);padding:14px 0 2px}
.splitsing{font-size:13px;background:var(--huis-licht);color:var(--huis-donker);border-radius:8px;padding:8px 10px;margin-top:12px}
.zendingen{font-size:13.5px;background:var(--achtergrond);border-radius:10px;padding:10px 12px;margin:0 0 12px;line-height:1.7}

/* Aantal: − 1 + */
.stapper{display:flex;align-items:center;border:1px solid var(--rand);border-radius:10px;overflow:hidden;background:#fff;flex-shrink:0}
.stapper button{width:30px;border:none;background:none;font-size:17px;cursor:pointer;color:var(--inkt);line-height:1;align-self:stretch}
.stapper button:hover{background:var(--huis-licht)}
.stapper input{width:38px;border:none;text-align:center;font-size:14px;font-weight:600;padding:8px 0;-moz-appearance:textfield;background:none}
.stapper input::-webkit-outer-spin-button,.stapper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.stapper input:focus{outline:none}

/* ---- Mandje (schuift in van rechts) ---- */
.overlay{position:fixed;inset:0;background:rgba(44,36,39,.4);opacity:0;pointer-events:none;transition:opacity .2s;z-index:30}
.overlay.open{opacity:1;pointer-events:auto}
.mandje{position:fixed;top:0;right:0;height:100%;width:420px;max-width:92vw;background:var(--wit);z-index:40;
  transform:translateX(100%);transition:transform .25s;display:flex;flex-direction:column;box-shadow:-6px 0 24px rgba(0,0,0,.12)}
.mandje.open{transform:translateX(0)}
.mandje .kop{padding:16px 20px;border-bottom:1px solid var(--lijn);display:flex;justify-content:space-between;align-items:center}
.mandje .kop h2{font-size:19px}
.sluit{border:none;background:none;font-size:28px;cursor:pointer;color:var(--grijs);line-height:1;padding:0 4px}
.mandje .scroll{flex:1;overflow-y:auto}
.items{padding:4px 20px}
.regel{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--lijn)}
.regel img,.regel .geenfoto{width:56px;height:56px;object-fit:contain;background:#fff;border:1px solid var(--lijn);border-radius:8px;flex-shrink:0}
.regel .r-midden{flex:1;min-width:0}
.regel .r-naam{font-size:13.5px;font-weight:600;line-height:1.35}
.regel .r-sub{font-size:12px;color:var(--grijs)}
.regel .r-onder{display:flex;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap}
.regel .r-bedrag{font-size:14px;font-weight:700;white-space:nowrap}
.regel .weg{border:none;background:none;color:var(--grijs);font-size:12.5px;text-decoration:underline;cursor:pointer;padding:0}
.regel .weg:hover{color:var(--rood)}
.regel .stapper input{width:34px;padding:5px 0}
.bestelvak{padding:16px 20px 4px;border-top:6px solid var(--achtergrond)}
.bestelvak h3{font-size:15px;margin-bottom:10px}
.levering{font-size:14px;background:var(--achtergrond);border-radius:10px;padding:9px 12px;margin-bottom:12px;line-height:1.45}
.keuze{display:flex;flex-direction:column;gap:8px;margin-bottom:6px}
.keuze label{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--lijn);border-radius:10px;padding:10px 12px;cursor:pointer;font-size:14px}
.keuze label:has(input:checked){border-color:var(--huis);background:var(--huis-licht)}
.keuze label.uit{opacity:.55;cursor:not-allowed}
.keuze input{margin-top:3px;accent-color:var(--huis)}
.keuze small{display:block;color:var(--grijs);font-size:12.5px}
.voet{padding:14px 20px 18px;border-top:1px solid var(--lijn);background:var(--wit)}
.regelrij{display:flex;justify-content:space-between;font-size:14px;color:var(--grijs);margin-bottom:3px}
.totaalregel{display:flex;justify-content:space-between;font-size:19px;font-weight:700;margin:6px 0 8px}
.tip{font-size:12.5px;color:var(--huis-donker);background:var(--huis-licht);border-radius:8px;padding:7px 10px;margin:4px 0 10px;text-align:center}
.tip.ok{color:var(--groen);background:var(--groen-licht)}
.tip .vorder{height:5px;background:rgba(255,255,255,.8);border-radius:3px;margin-top:5px;overflow:hidden}
.tip .vorder i{display:block;height:100%;background:var(--huis);border-radius:3px}

/* ---- Mijn bestellingen ---- */
.paneelkop{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.paneelkop h1{font-size:24px}
.bestelling{background:var(--wit);border:1px solid var(--lijn);border-radius:14px;margin-bottom:12px;overflow:hidden}
.bestelling summary{display:flex;gap:14px;flex-wrap:wrap;align-items:center;padding:14px 18px;cursor:pointer;list-style:none}
.bestelling summary::-webkit-details-marker{display:none}
.bestelling summary b{min-width:150px}
.bestelling[open] summary{border-bottom:1px solid var(--lijn)}
.bestelling .detail{padding:14px 18px 18px}
.bestelling .bedrag{margin-left:auto;font-weight:700}
.status{font-size:12px;font-weight:700;border-radius:999px;padding:2px 10px;background:var(--huis-licht);color:var(--huis-donker)}
.status.verzonden{background:var(--groen-licht);color:var(--groen)}
.status.geannuleerd{background:var(--rood-licht);color:var(--rood)}
.status.nieuw{background:var(--geel-licht);color:var(--geel)}
.schuif{overflow-x:auto}
table.tabel{width:100%;border-collapse:collapse;font-size:14px;margin-bottom:10px}
.tabel th,.tabel td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--lijn);vertical-align:top}
.tabel th{font-size:12px;color:var(--grijs);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.tabel td.r,.tabel th.r{text-align:right;white-space:nowrap}
.bestelling .detail .hint{margin-bottom:12px}

/* ---- Bevestiging ---- */
.dialoog{position:fixed;inset:0;background:rgba(44,36,39,.45);display:flex;align-items:center;justify-content:center;z-index:50;padding:16px}
.dialoogkaart{background:var(--wit);border-radius:18px;max-width:420px;width:100%;padding:26px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.28)}
.dialoogkaart h2{font-size:21px;margin-bottom:6px}
.dialoogkaart p{margin-bottom:6px}
.dialoogkaart .hint{margin-bottom:18px;line-height:1.55}
.bedankt{width:64px;height:64px;border-radius:50%;background:var(--huis);color:#fff;font-size:34px;display:flex;align-items:center;justify-content:center;margin:4px auto 14px}

/* ---- Voetbalk ---- */
footer{border-top:1px solid var(--lijn);background:var(--wit)}
footer .voetin{max-width:1150px;margin:0 auto;padding:22px 20px;display:flex;gap:14px;flex-wrap:wrap;justify-content:space-between;font-size:13px;color:var(--grijs)}
footer a{color:var(--grijs)}

/* ---- Melding onderaan ---- */
.melding{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);max-width:calc(100% - 32px);
  background:var(--inkt);color:#fff;padding:10px 16px;border-radius:10px;box-shadow:var(--schaduw);font-size:14px;z-index:60;transition:opacity .2s}
.melding.fout{background:var(--rood)}
.melding.weg-melding{opacity:0;pointer-events:none}

/* ================================================================
   OP EEN GSM (smaller dan 760px)
   ================================================================ */
@media (max-width:860px){
  .accountknop b{display:none}
  .accountknop{padding:8px 10px}
}
@media (max-width:760px){
  .infobalk{font-size:12.5px;padding:8px 12px}
  .infobalk .weg-op-gsm{display:none}
  .balk{padding:10px 14px;gap:10px;flex-wrap:wrap}
  .logo img{height:38px}
  .logo span{display:none}
  .balk{flex-wrap:wrap;row-gap:10px}
  .taalkeuze{margin-left:auto}
  .mand-bedrag{display:none}
  .mandknop{padding:9px 13px;font-size:14px}
  .zoek{order:5;flex-basis:100%}
  .zoek input{padding:10px 14px}
  .hero-inner{padding:18px 16px 20px}
  .hero h1{font-size:21px}
  .hero p{font-size:14px}
  .login-hero .hero-inner{padding:28px 16px 36px}
  .troeven{grid-template-columns:1fr;padding:20px 16px 36px}
  main{padding:16px 14px 44px}
  .afdelingen{margin:0 -14px 14px;padding:0 6px}
  .afdelingen button{padding:9px 10px 11px;font-size:14.5px}
  .welkom{margin-bottom:14px}
  .welkom h1{font-size:19px}
  .laatste{width:100%;justify-content:space-between}
  .filters{flex-wrap:nowrap;overflow-x:auto;margin:0 -14px 16px;padding:0 14px 4px;scrollbar-width:none}
  .filters button{flex-shrink:0}
  .rooster{grid-template-columns:repeat(2,1fr);gap:12px}
  .kaart .foto{padding:10px}
  .kaart .inhoud{padding:10px 11px 13px;gap:8px}
  .kaart .naam{font-size:13px;min-height:36px}
  .kaart .prijs{font-size:17px}
  .kaart .koop{flex-direction:column}
  .stapper{justify-content:space-between}
  .stapper input{flex:1}
  .stapper button{width:38px;padding:6px 0}
  .mandje{width:100%;max-width:100%}
}
@media print{
  header,.infobalk,.demobalk,.mandje,.overlay,footer,.tweedeknop{display:none !important}
  body{background:#fff}
}
@media (prefers-reduced-motion: reduce){*{transition:none !important}}

/* Contactlenzen per patiënt */
.fichekaart.lenskaart{display:block;max-width:640px}
.lens-kop{display:flex;gap:14px;align-items:center;margin:0 30px 14px 0}
.lens-kop img{width:120px;height:auto;border:1px solid var(--lijn);border-radius:10px;background:#fff;flex-shrink:0}
.lens-kop h2{font-size:20px;line-height:1.25;margin-bottom:4px}
.lenskaart .veld small{display:block;margin-top:4px}
.ogen{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:10px}
.oog{border:1px solid var(--rand);border-radius:12px;padding:8px 12px 2px;min-width:0}
.oog legend{padding:0 6px;font-weight:700;font-size:14px}
.oog legend label{display:flex;gap:6px;align-items:center;cursor:pointer}
.oog.uit .oogvelden{opacity:.35;pointer-events:none}
.oog .veld{display:block;margin-bottom:8px}
.oog select,.oog input[type=number]{width:100%;padding:8px 10px;border:1px solid var(--rand);border-radius:8px;background:#fff;font-size:14px;color:var(--inkt)}
.lens-let{margin:6px 0 14px;line-height:1.5}
.lenskaart .hoofdknop{width:100%}
.regel .r-lens{font-size:12px;color:var(--huis-donker);background:var(--huis-licht);border-radius:6px;padding:2px 6px;margin:2px 0;display:inline-block}
@media (max-width:560px){.ogen{grid-template-columns:1fr}.lens-kop img{width:84px}}

/* Taalkeuze NL | FR */
.taalkeuze{display:inline-flex;border:1px solid var(--rand);border-radius:999px;overflow:hidden;flex-shrink:0;background:#fff}
.taalkeuze button{border:none;background:none;padding:6px 10px;font:inherit;font-size:13px;font-weight:600;color:var(--grijs);cursor:pointer}
.taalkeuze button.actief{background:var(--huis);color:#fff}
#scherm-login .balk{justify-content:space-between}

/* Aantal producten op de afdelings-, categorie- en merkknoppen */
.tal{display:inline-block;margin-left:6px;font-size:.78em;font-weight:600;opacity:.6;font-variant-numeric:tabular-nums}
.actief .tal{opacity:.85}

/* Akkoord met de algemene voorwaarden in het mandje */
.akkoord{margin:10px 0 6px;font-size:13.5px}
.akkoord .vinkje{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.akkoord .vinkje input{margin-top:3px;width:16px;height:16px;accent-color:var(--huis);flex:none}
.akkoord a{color:var(--huis)}
.akkoord-ok{color:var(--grijs);margin:0}

/* ---- Catalogus downloaden (prijslijst / catalogus / bestellijst) ---- */
#view-catalogus{max-width:1400px}
.lijst-werk{display:grid;grid-template-columns:290px 1fr;gap:20px;align-items:start}
.lijst-keuzes{position:sticky;top:90px;background:var(--wit);border:1px solid var(--lijn);border-radius:14px;padding:16px}
.lk-blok{padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--lijn)}
.lk-titel{font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--grijs);margin-bottom:8px}
.lk-segment{display:flex;flex-direction:column;gap:6px}
.lk-segment button{text-align:left;border:1px solid var(--rand);background:#fff;border-radius:10px;padding:8px 11px;cursor:pointer;font:inherit;color:var(--inkt)}
.lk-segment button b{display:block;font-size:14px}
.lk-segment button small{display:block;color:var(--grijs);font-size:12px;margin-top:1px}
.lk-segment button:hover{border-color:var(--huis)}
.lk-segment button.actief{border-color:var(--huis);background:var(--huis-licht);box-shadow:inset 0 0 0 1px var(--huis)}
.lk-segment button.actief b{color:var(--huis-donker)}
.lk-vinken{display:flex;flex-direction:column;gap:4px;margin-bottom:8px}
.lk-vinkje{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:14px;padding:2px 0}
.lk-vinkje input{width:16px;height:16px;accent-color:var(--huis)}
.lijst-keuzes .hoofdknop{margin-bottom:8px}
.lijst-voorbeeld{min-width:0;overflow:auto}
@media (max-width:900px){
  .lijst-werk{grid-template-columns:1fr}
  .lijst-keuzes{position:static}
  .lijst-voorbeeld .vel{padding:16px}
}
@media print{
  body.drukt-lijst .lijst-keuzes,body.drukt-lijst #view-catalogus .paneelkop{display:none !important}
  body.drukt-lijst #view-catalogus{max-width:none;padding:0;margin:0}
  body.drukt-lijst .lijst-werk{display:block}
  body.drukt-lijst .lijst-voorbeeld{overflow:visible}
}