:root{
  --navy:#0a2540;
  --navy-2:#0e2f52;
  --blue:#1f6feb;
  --blue-deep:#0b3d91;
  --sea:#1ca7a0;
  --sand:#f4c95d;
  --ink:#10243a;
  --slate:#5b6b7d;
  --line:#e3e9f0;
  --bg:#f5f7fb;
  --card:#ffffff;
  --ok:#1f9d57;
  --okbg:#e7f6ee;
  --err:#c8392b;
  --errbg:#fdecea;
  --low:#c8392b;
  --radius:14px;
  --shadow:0 1px 2px rgba(10,37,64,.05), 0 8px 24px rgba(10,37,64,.06);
  --font:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --display:"Outfit",var(--font);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);
  line-height:1.5;-webkit-font-smoothing:antialiased;
}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2{font-family:var(--display);margin:0;line-height:1.15}

/* ---------- Topbar ---------- */
.topbar{
  background:linear-gradient(135deg,var(--navy),var(--navy-2));
  color:#fff;position:sticky;top:0;z-index:20;
  box-shadow:0 2px 10px rgba(10,37,64,.15);
}
.topbar-inner{
  max-width:1080px;margin:0 auto;padding:.7rem 1rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.brand{display:flex;align-items:center;gap:.55rem;color:#fff}
.brand:hover{text-decoration:none}
.brand-text{font-family:var(--display);font-weight:600;font-size:1.15rem;letter-spacing:-.01em}
.brand-text strong{font-weight:800;color:var(--sand)}
.brand-wave{
  width:26px;height:26px;border-radius:50%;flex:none;
  background:
    radial-gradient(circle at 50% 130%, var(--sea) 0 38%, transparent 39%),
    radial-gradient(circle at 50% 130%, var(--blue) 0 60%, transparent 61%),
    var(--sand);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.25);
}
.brand-wave.big{width:40px;height:40px}
.topbar-right{display:flex;align-items:center;gap:.9rem;font-size:.9rem}
.whoami{display:flex;align-items:center;gap:.45rem;color:#dbe6f3}
.role-pill{
  font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  padding:.12rem .45rem;border-radius:999px;background:rgba(255,255,255,.16);color:#fff;
}
.role-pill.admin{background:var(--sand);color:var(--navy)}
.logout{color:#cdd9e8;font-size:.85rem}
.logout:hover{color:#fff}

/* ---------- Nav ---------- */
.mainnav{background:rgba(255,255,255,.06);border-top:1px solid rgba(255,255,255,.08)}
.mainnav-inner{
  max-width:1080px;margin:0 auto;padding:0 .5rem;
  display:flex;gap:.1rem;overflow-x:auto;scrollbar-width:none;
}
.mainnav-inner::-webkit-scrollbar{display:none}
.nav-link{
  color:#c6d4e6;font-size:.92rem;font-weight:500;white-space:nowrap;
  padding:.7rem .85rem;border-bottom:2.5px solid transparent;
}
.nav-link:hover{color:#fff;text-decoration:none}
.nav-link.active{color:#fff;border-color:var(--sand)}

/* ---------- Layout ---------- */
.wrap{max-width:1080px;margin:0 auto;padding:1.1rem 1rem 3rem}
.page-head{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin:.3rem 0 1.1rem;flex-wrap:wrap;
}
.page-head h1{font-size:1.55rem;font-weight:700}
.cols{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:820px){.cols{grid-template-columns:1.4fr 1fr}}

/* ---------- Cards ---------- */
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:1.1rem;margin-bottom:1rem;
}
.card-title{font-size:1.05rem;font-weight:600;margin-bottom:.8rem}

/* ---------- Stats ---------- */
.stat-grid{
  display:grid;gap:.7rem;grid-template-columns:repeat(2,1fr);margin-bottom:1rem;
}
@media(min-width:720px){.stat-grid{grid-template-columns:repeat(4,1fr)}}
.stat{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:.9rem 1rem;box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:.3rem;
}
.stat-label{font-size:.78rem;color:var(--slate);font-weight:500}
.stat-value{font-family:var(--display);font-size:1.5rem;font-weight:700;color:var(--navy);letter-spacing:-.01em}

/* ---------- Tables ---------- */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table{width:100%;border-collapse:collapse;font-size:.9rem}
.table th,.table td{padding:.6rem .65rem;text-align:left;border-bottom:1px solid var(--line)}
.table th{
  font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;
  color:var(--slate);font-weight:600;white-space:nowrap;
}
.table tbody tr:last-child td{border-bottom:none}
.table .num{text-align:right;font-variant-numeric:tabular-nums}
.table .strong{font-weight:700}
.table .nowrap{white-space:nowrap}
.table tr.dim{opacity:.5}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85rem}
.stock-table .model-cell{font-weight:600;white-space:nowrap}
.stock-table .zero{color:#aab6c4}
.stock-table .low{color:var(--low);font-weight:700}

/* ---------- Tags ---------- */
.tag{
  display:inline-block;font-size:.74rem;font-weight:600;padding:.16rem .5rem;
  border-radius:999px;background:#eef2f7;color:var(--slate);
}
.tag-ok{background:var(--okbg);color:var(--ok)}
.tag-cash{background:#e7f6ee;color:#1f9d57}
.tag-swipe{background:#e8f0fe;color:var(--blue)}
.tag-bank{background:#fdf3e1;color:#b9821f}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  font-family:var(--display);font-weight:600;font-size:.95rem;
  padding:.6rem 1.05rem;border-radius:10px;border:1px solid transparent;
  cursor:pointer;transition:transform .04s ease, background .15s ease;
}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-deep)}
.btn-ghost{background:#fff;border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{background:#f3f6fa}
.btn.block{width:100%}
.btn.lg{padding:.85rem 1.1rem;font-size:1.05rem}
.btn.sm{padding:.38rem .7rem;font-size:.82rem}

/* ---------- Forms ---------- */
.field{display:flex;flex-direction:column;gap:.35rem;font-size:.85rem;font-weight:500;color:var(--ink)}
input,select{
  font-family:var(--font);font-size:1rem;color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:10px;padding:.6rem .7rem;width:100%;
}
input:focus,select:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
.form-card .sale-form{display:grid;gap:1rem;max-width:480px}
.hint{font-size:.78rem;color:var(--slate);min-height:1em}
.hint.ok{color:var(--ok)}
.hint.warn{color:var(--err)}

fieldset.seg-field{border:none;padding:0;margin:0}
fieldset.seg-field legend{font-size:.85rem;font-weight:500;margin-bottom:.35rem;padding:0}
.seg{display:flex;gap:.4rem;flex-wrap:wrap}
.seg-opt{position:relative;flex:1;min-width:84px}
.seg-opt input{position:absolute;opacity:0;inset:0;cursor:pointer}
.seg-opt span{
  display:block;text-align:center;padding:.6rem .5rem;border:1px solid var(--line);
  border-radius:10px;font-weight:600;font-size:.92rem;background:#fff;color:var(--slate);
  transition:.12s;
}
.seg-opt input:checked + span{background:var(--navy);color:#fff;border-color:var(--navy)}
.seg-opt input:focus-visible + span{outline:2px solid var(--blue);outline-offset:1px}

.inline-form{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.inline-form input[type=text]{flex:1;min-width:200px;width:auto}
.stock-form{display:grid;gap:.8rem;grid-template-columns:1fr;align-items:end}
@media(min-width:720px){.stock-form{grid-template-columns:repeat(5,1fr) auto}}
.seller-add{display:grid;gap:.8rem;grid-template-columns:1fr;align-items:end}
@media(min-width:720px){.seller-add{grid-template-columns:repeat(3,1fr) auto}}
.row-actions{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}
.reset-form{display:flex;gap:.3rem;align-items:center}
.mini-input{width:120px}
.ghost-form{display:inline}

.filterbar{margin-bottom:1rem}
.filterbar label{display:inline-flex;flex-direction:column;gap:.3rem;font-size:.82rem;color:var(--slate)}
.filterbar select{width:auto;min-width:180px}

.summary-row{
  display:flex;gap:1.2rem;flex-wrap:wrap;align-items:baseline;
  padding:.7rem 1rem;background:var(--navy);color:#fff;border-radius:var(--radius);
  margin-bottom:1rem;font-size:.95rem;
}
.summary-row strong{font-family:var(--display);font-size:1.15rem}
.summary-row .muted{color:#b9c8da}

/* ---------- Meter ---------- */
.meter-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem}
.meter-top{display:flex;justify-content:space-between;font-size:.85rem;font-weight:600;margin-bottom:.25rem}
.meter{height:9px;background:#eef2f7;border-radius:999px;overflow:hidden}
.meter-fill{height:100%;background:linear-gradient(90deg,var(--sea),var(--blue));border-radius:999px}

/* ---------- Flash ---------- */
.flash{padding:.7rem .9rem;border-radius:10px;margin-bottom:1rem;font-size:.92rem;font-weight:500}
.flash-ok{background:var(--okbg);color:#15643a;border:1px solid #b8e3c9}
.flash-err{background:var(--errbg);color:#922;border:1px solid #f3c2bd}

/* ---------- Helpers ---------- */
.muted{color:var(--slate)}
.small{font-size:.82rem}
.center{text-align:center}

/* ---------- Footer ---------- */
.foot{
  max-width:1080px;margin:0 auto;padding:2rem 1rem;color:#9aa8b6;font-size:.82rem;text-align:center;
}

/* ---------- Auth ---------- */
.auth-body{
  min-height:100dvh;margin:0;display:flex;align-items:center;justify-content:center;padding:1.2rem;
  background:linear-gradient(135deg,var(--navy) 0%,var(--blue-deep) 60%,var(--sea) 140%);
}
.auth-card{
  width:100%;max-width:380px;background:#fff;border-radius:18px;padding:1.8rem 1.5rem;
  box-shadow:0 20px 60px rgba(8,25,46,.35);
}
.auth-brand{display:flex;flex-direction:column;align-items:center;gap:.6rem;margin-bottom:1.4rem}
.auth-brand .brand-text{font-size:1.5rem;color:var(--navy)}
.auth-title{font-size:1.4rem;text-align:center;margin-bottom:1rem;color:var(--navy)}
.auth-title span{font-weight:500;color:var(--slate);font-size:1rem}
.auth-form{display:flex;flex-direction:column;gap:.9rem}
.auth-form label{display:flex;flex-direction:column;gap:.35rem;font-size:.85rem;font-weight:500}

/* ===== v2: nieuwe onderdelen ===== */
.section-head{font-family:var(--display);font-weight:700;font-size:1.2rem;margin:1.4rem 0 .8rem;color:var(--navy)}

/* tags extra */
.tag-warn{background:#fdf3e1;color:#b9821f}
.tag-danger{background:var(--errbg);color:var(--err)}

/* trend in KPI */
.trend{font-size:.9rem;font-weight:700;margin-left:.25rem}
.trend.up{color:var(--ok)} .trend.down{color:var(--err)}

/* checkbox veld */
.check-field{display:flex;align-items:center;gap:.5rem;font-size:.9rem;font-weight:500;cursor:pointer}
.check-field input{width:auto}

/* product/seller/invite/loc formulieren */
.product-add,.loc-add,.invite-add{display:grid;gap:.8rem;grid-template-columns:1fr;align-items:end}
@media(min-width:720px){
  .product-add{grid-template-columns:2fr 1fr auto auto}
  .invite-add{grid-template-columns:2fr 1fr auto}
  .loc-add{grid-template-columns:2fr 2fr auto}
}

/* bulk voorraad */
.bulk-top{display:grid;gap:.8rem;grid-template-columns:1fr;margin-bottom:1rem}
@media(min-width:720px){.bulk-top{grid-template-columns:1fr 2fr 1fr}}
.size-inputs{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;margin-bottom:.8rem}
@media(min-width:720px){.size-inputs{grid-template-columns:repeat(8,1fr)}}
.size-cell{display:flex;flex-direction:column;gap:.25rem;font-size:.78rem;font-weight:600;color:var(--slate);text-align:center}
.size-cell.wide{grid-column:span 2;text-align:left}
.size-cell input{text-align:center}

/* consignatie */
.loc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap}
.loc-sold{display:flex;gap:.4rem;flex-wrap:wrap}
.pill-sold{background:#eef4ff;color:var(--blue-deep);font-size:.78rem;font-weight:600;padding:.25rem .6rem;border-radius:999px}
.cons-seller{font-weight:700;color:var(--navy);margin:.8rem 0 .3rem;font-size:.9rem}

/* klantgegevens uitklap */
.customer-details{border:1px dashed var(--line);border-radius:10px;padding:.5rem .8rem}
.customer-details summary{cursor:pointer;font-size:.9rem;font-weight:600;color:var(--slate);padding:.2rem 0}
.customer-details[open]{padding-bottom:.9rem}
.customer-details .field{margin-top:.7rem}

/* uitnodigingen */
.invite-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  padding:.8rem 0;border-bottom:1px solid var(--line)}
.invite-row:last-child{border-bottom:none}
.invite-row.done{opacity:.55} .invite-row.expired{opacity:.7}
.invite-main{flex:1;min-width:240px}
.invite-email{font-weight:600;display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
.invite-link{margin-top:.4rem;width:100%;font-size:.8rem;font-family:ui-monospace,monospace;
  background:#f5f7fb;border:1px solid var(--line);border-radius:8px;padding:.4rem .6rem}
.invite-actions{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}

/* charts netjes binnen card */
canvas{max-width:100%}

/* prijs + bewerk-banner (v2.1) */
.editing-banner{background:#eef4ff;border:1px solid #cfe0ff;color:var(--blue-deep);
  border-radius:10px;padding:.55rem .8rem;font-size:.9rem;margin-bottom:.9rem}
.price-form{display:flex;gap:.3rem;align-items:center}
.price-input{width:78px;text-align:right;padding:.4rem .5rem}
.price-cur{width:auto;padding:.4rem .4rem}

/* ===== v2.2: iconen, foto's, productkaarten ===== */
.ic{width:1.05em;height:1.05em;vertical-align:-0.18em;flex:none}
.btn .ic{margin-right:.1rem}
.nav-ic{width:1em;height:1em;vertical-align:-0.12em;opacity:.85;margin-right:.15rem}
.card-title .ic{vertical-align:-0.15em;margin-right:.3rem;color:var(--blue)}

/* icoon-knoppen (foto) */
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--slate);cursor:pointer;transition:.12s}
.icon-btn:hover{background:#f3f6fa;color:var(--blue)}
.icon-btn.danger:hover{color:var(--err);border-color:#f3c2bd}

/* producten-tabel inline edit */
.saveall-top,.saveall-bottom{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.6rem;flex-wrap:wrap}
.saveall-bottom{justify-content:flex-end;margin-top:.8rem;margin-bottom:0}
.products-table td{vertical-align:middle}
.cell-input{padding:.4rem .55rem;width:100%;min-width:120px}
.cell-input.narrow{min-width:90px}
.cell-input.price-input{min-width:80px;text-align:right}
.photo-cell{white-space:nowrap}
.thumb{width:52px;height:52px;border-radius:9px;overflow:hidden;background:#eef2f7;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb-empty{color:#aab6c4}.thumb-empty .ic{width:22px;height:22px}
.photo-actions{display:inline-flex;gap:.25rem;margin-left:.4rem;vertical-align:middle}
.photo-up{display:inline}

/* correctie-kaart */
.correct-form{display:grid;gap:.8rem;grid-template-columns:1fr;align-items:end}
@media(min-width:720px){.correct-form{grid-template-columns:repeat(5,1fr) auto}}

/* productkaarten (visuele verkoop) */
.product-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.7rem}
.pcard{display:flex;flex-direction:column;align-items:stretch;text-align:left;gap:.4rem;
  border:2px solid var(--line);border-radius:14px;background:#fff;padding:.5rem;cursor:pointer;transition:.12s}
.pcard:hover{border-color:var(--blue);transform:translateY(-1px);box-shadow:var(--shadow)}
.pcard.active{border-color:var(--blue);background:#f3f8ff;box-shadow:0 0 0 3px rgba(31,111,235,.15)}
.pcard-img{aspect-ratio:1/1;width:100%;border-radius:10px;overflow:hidden;background:#eef2f7;display:flex;align-items:center;justify-content:center}
.pcard-img img{width:100%;height:100%;object-fit:cover}
.pcard-noimg{color:#aab6c4}.pcard-noimg .ic{width:30px;height:30px}
.pcard-name{font-weight:700;font-size:.92rem;color:var(--navy);line-height:1.2}
.pcard-price{font-size:.82rem;color:var(--blue);font-weight:600;min-height:1em}

/* ===== v2.3: groter, 2-per-rij, sorteren ===== */
/* Alles iets groter/leesbaarder */
html{font-size:17px}
.nav-link{font-size:1rem}
.table{font-size:.95rem}
.field{font-size:.92rem}
.stat-value{font-size:1.7rem}
h1{font-size:1.7rem}

/* Productkaarten: 2 groot per rij op telefoon */
.product-picker{grid-template-columns:repeat(2,1fr);gap:1rem}
@media(min-width:680px){.product-picker{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.product-picker{grid-template-columns:repeat(4,1fr)}}
.pcard{position:relative;padding:.7rem;gap:.55rem}
.pcard-name{font-size:1.08rem}
.pcard-price{font-size:.98rem}
.pcard .grip{display:none}

.picker-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.9rem;flex-wrap:wrap}
.picker-head .card-title{margin-bottom:0}
.sort-actions{margin-top:1rem;display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}

/* Sorteer-modus: kaarten worden een sleeplijst */
.product-picker.sorting{grid-template-columns:1fr;gap:.5rem}
.product-picker.sorting .pcard{flex-direction:row;align-items:center;cursor:default;
  border-style:dashed;padding:.5rem .7rem}
.product-picker.sorting .pcard:hover{transform:none;box-shadow:none;border-color:var(--blue)}
.product-picker.sorting .pcard.active{box-shadow:none;background:#fff}
.product-picker.sorting .pcard .grip{display:flex;cursor:grab;touch-action:none}
.product-picker.sorting .pcard-img{width:54px;flex:none;aspect-ratio:1/1}
.product-picker.sorting .pcard-name{flex:1;font-size:1rem}
.product-picker.sorting .pcard-price{margin-left:auto}
.pcard.dragging{opacity:.6;border-color:var(--sea)!important}

/* greep */
.grip{display:flex;align-items:center;color:#aab6c4}
.grip svg{width:20px;height:20px}
.grip-inline{color:#aab6c4;font-size:1.1rem;vertical-align:-.1em}

/* sleeplijst op Producten-pagina */
.sortlist{list-style:none;margin:0 0 1rem;padding:0;display:flex;flex-direction:column;gap:.4rem}
.sortitem{display:flex;align-items:center;gap:.7rem;padding:.5rem .7rem;border:1px solid var(--line);
  border-radius:11px;background:#fff}
.sortitem.dragging{opacity:.6;border-color:var(--sea)}
.sortitem .grip{cursor:grab;touch-action:none}
.sort-thumb{width:46px;height:46px;border-radius:8px;overflow:hidden;background:#eef2f7;flex:none;display:flex;align-items:center;justify-content:center}
.sort-thumb img{width:100%;height:100%;object-fit:cover}
.sort-name{font-weight:600;font-size:1rem}

/* ===== teams + bulk consignatie/verdelen ===== */
.bulk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.55rem;margin:.2rem 0 1rem}
@media(min-width:720px){.bulk-grid{grid-template-columns:repeat(8,1fr)}}
.bulk-cell{display:flex;flex-direction:column;gap:.25rem;font-size:.82rem;font-weight:700;color:var(--slate);text-align:center}
.bulk-cell input{text-align:center;width:100%}
.card-subtitle{font-size:1rem;font-weight:700;color:var(--navy);margin:.4rem 0 .6rem}
hr.soft{border:none;border-top:1px solid var(--line);margin:1.2rem 0}

/* ============================================================
   APPLE VISION — BOLD EDITION  (alleen CSS, groot & leesbaar)
   ============================================================ */
:root{
  --radius:22px;
  --shadow:0 2px 8px rgba(10,37,64,.06), 0 18px 50px rgba(10,37,64,.10);
  --font:"Inter",system-ui,-apple-system,"SF Pro Text","Segoe UI",sans-serif;
  --display:"Outfit",system-ui,-apple-system,"SF Pro Display",sans-serif;
}
html{font-size:17.5px}
body{
  font-weight:450;
  background:
    radial-gradient(1100px 560px at 100% -8%, #e9f1ff 0, transparent 60%),
    radial-gradient(820px 480px at -8% 8%, #e8fbf6 0, transparent 55%),
    var(--bg);
}
h1{font-family:var(--display);font-weight:900;letter-spacing:-.02em;font-size:clamp(1.7rem,6vw,2.15rem)}
h2,.card-title{font-weight:800;letter-spacing:-.015em}

/* Glasachtige kaarten met veel ruimte */
.card{
  border-radius:26px;
  background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  backdrop-filter:blur(20px) saturate(140%);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:var(--shadow);
  padding:1.4rem;
}

/* Pill-knoppen, vet en groot */
.btn{border-radius:999px;font-weight:700;letter-spacing:-.01em}
.btn-primary{box-shadow:0 8px 20px rgba(31,111,235,.28)}
.nav-link{font-weight:700;letter-spacing:-.01em}

/* Statistieken groot & vet */
.stat{border-radius:22px}
.stat-value{font-family:var(--display);font-weight:900;letter-spacing:-.02em;font-size:clamp(1.7rem,6vw,2.2rem)}

/* ---- Koop-kaarten: grote vette shirt-namen ---- */
.product-picker{gap:1.1rem}
.pcard{
  border-radius:24px;padding:.9rem .9rem 1rem;
  background:rgba(255,255,255,.88);
  border:1.5px solid rgba(16,36,58,.08);
  box-shadow:0 2px 6px rgba(10,37,64,.05), 0 14px 34px rgba(10,37,64,.09);
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.pcard:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(10,37,64,.12), 0 22px 50px rgba(10,37,64,.14)}
.pcard.active{border-color:var(--blue);box-shadow:0 0 0 4px rgba(31,111,235,.18), 0 16px 40px rgba(31,111,235,.20)}
.pcard-img{border-radius:18px;overflow:hidden}
.pcard-name{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.15rem,4.6vw,1.6rem);
  line-height:1.05;letter-spacing:-.02em;
  color:var(--ink);text-align:center;
}
.pcard-price{
  align-self:center;font-weight:800;font-size:1.02rem;letter-spacing:-.01em;
  color:var(--blue-deep);background:rgba(31,111,235,.10);
  padding:.22rem .75rem;border-radius:999px;
}

/* Grote, leesbare formulieren */
.field{font-weight:600}
.field input,.field select{border-radius:14px;font-size:1.04rem;padding:.7rem .8rem}
.tag{border-radius:999px;font-weight:700}

/* In sorteer-modus de naam iets rustiger zodat de lijst compact blijft */
.product-picker.sorting .pcard-name{font-size:1.05rem;text-align:left}

/* ============================================================
   FLINK GROTER + MENU DAT NOOIT WEGVALT
   ============================================================ */
html{font-size:19px}

/* Menu mag doorlopen naar een tweede regel i.p.v. wegvallen */
.mainnav-inner{flex-wrap:wrap;overflow-x:visible;row-gap:.2rem;padding-top:.25rem;padding-bottom:.25rem}
.nav-link{font-size:1.02rem;font-weight:700;padding:.7rem .8rem}

/* Bovenbalk groter */
.brand-text{font-size:1.4rem;font-weight:800}
.topbar-right{font-size:1.05rem;gap:1rem}
.role-pill{font-size:.78rem;padding:.2rem .6rem}
.logout{font-size:1rem}

/* Kaarten / koppen groter */
.card-title{font-size:1.4rem;font-weight:800;margin-bottom:1rem}
.page-head h1{font-size:clamp(1.8rem,6vw,2.2rem)}

/* Tabellen flink leesbaarder */
.table{font-size:1.04rem}
.table th{font-size:.86rem}
.table td,.table th{padding:.8rem .8rem}

/* Formulieren / labels / tips groter */
.field{font-size:1.05rem;font-weight:600}
.field input,.field select{font-size:1.08rem;padding:.75rem .85rem}
.hint{font-size:.95rem}
.small{font-size:1rem}
.muted{font-size:1rem}
fieldset.seg-field legend{font-size:1.05rem;font-weight:600}
.seg{font-size:1.02rem}

/* Stat-blokken */
.stat-label{font-size:.98rem;font-weight:600}

/* Meldingen, tags, knoppen */
.flash{font-size:1.05rem}
.tag{font-size:.92rem}
.btn{font-size:1.05rem}
.btn.sm{font-size:.95rem;padding:.5rem .85rem}
.btn.lg{font-size:1.15rem}
.mono{font-size:.98rem}
.filterbar label{font-size:.95rem}
.summary-row{font-size:1.05rem}

/* Koop-kaarten: naam nog een tikje groter en luchtiger */
.pcard-name{font-size:clamp(1.25rem,4.8vw,1.7rem)}
.pcard-price{font-size:1.08rem}

/* ===== Voorraad: bewerkbare cellen + overdragen ===== */
.cell-input{
  width:100%;min-width:54px;max-width:78px;text-align:right;
  font-variant-numeric:tabular-nums;font-size:1rem;font-weight:600;
  padding:.4rem .45rem;border:1.5px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);
}
.cell-input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(31,111,235,.16)}
.stock-table td .cell-input{margin:0}
.edit-hint-card{padding:.9rem 1.1rem!important}
.save-bar{
  position:sticky;bottom:0;z-index:5;
  display:flex;justify-content:flex-end;
  padding:.9rem 0;margin-top:.5rem;
}
.save-bar .btn{box-shadow:0 10px 26px rgba(31,111,235,.32)}
.avail{color:var(--slate);font-weight:600;font-size:.82rem}

/* ===== Alles overdragen blok ===== */
.transfer-all{margin-top:1.3rem;padding-top:1.1rem;border-top:1px dashed var(--line)}
.sub-title{font-family:var(--display);font-weight:800;font-size:1.1rem;margin:0 0 .7rem;color:var(--ink)}

/* ===== Voiden + wissen + geannuleerde rijen ===== */
.btn-danger{background:#dc2626;color:#fff;border-color:#dc2626}
.btn-danger:hover{background:#b91c1c;border-color:#b91c1c}
.btn.xs{font-size:.85rem;padding:.35rem .7rem;border-radius:999px}
.inline-void{display:inline}
.danger-card{border:1.5px solid #f3c0c0;background:rgba(255,245,245,.85)}
.wipe-form{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.confirm-input{border:1.5px solid var(--line);border-radius:12px;padding:.6rem .8rem;font-size:1rem;font-weight:700;letter-spacing:.05em;max-width:180px}
.confirm-input:focus{outline:none;border-color:#dc2626;box-shadow:0 0 0 3px rgba(220,38,38,.15)}
.row-voided{opacity:.55}
.row-voided td:not(:last-child){text-decoration:line-through}
.tag-void{background:#fde2e2;color:#b91c1c}

/* ===== Verkopen-tabel netter op mobiel (verspringt niet meer) ===== */
.table-scroll{-webkit-overflow-scrolling:touch;overflow-x:auto;border-radius:14px}
.table{width:100%;border-collapse:collapse}
.table .nowrap{white-space:nowrap}
@media(max-width:680px){
  .table{font-size:.95rem}
  .table td,.table th{padding:.6rem .55rem}
  .summary-row{flex-wrap:wrap;gap:.5rem .9rem}
  .filterbar{flex-wrap:wrap}
}

/* ============================================================
   VERKOOP-WIZARD (Apple Vision)
   ============================================================ */
.wizard{max-width:680px;margin:0 auto}
.wcard{padding:1.5rem}

/* stappenbalk */
.wiz-progress{list-style:none;display:flex;gap:.3rem;justify-content:space-between;margin:0 0 1.2rem;padding:0}
.wiz-progress li{flex:1;display:flex;flex-direction:column;align-items:center;gap:.35rem;font-size:.8rem;font-weight:700;
  color:var(--slate);position:relative;cursor:default}
.wiz-progress li.reachable{cursor:pointer}
.wiz-progress li span{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:#e9eef5;color:var(--slate);font-weight:800;font-size:1rem;transition:.15s}
.wiz-progress li.current span{background:var(--blue);color:#fff;box-shadow:0 6px 16px rgba(31,111,235,.35)}
.wiz-progress li.done span{background:var(--sea);color:#fff}
.wiz-progress li.current{color:var(--ink)}

/* stappen */
.wstep{display:none}
.wstep.is-active{display:block;animation:wstep-in .28s ease}
@keyframes wstep-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.wlabel{font-weight:700;font-size:1.05rem;margin:1rem 0 .5rem;color:var(--ink)}
.wiz-nav{display:flex;justify-content:space-between;gap:1rem;margin-top:1.5rem}
.wiz-nav .btn{min-width:120px}

/* keuze-tegels (betaling, valuta) */
.tile-group{display:flex;gap:.6rem;flex-wrap:wrap}
.tile{flex:1 1 90px;padding:1rem .8rem;border-radius:16px;border:1.6px solid var(--line);background:#fff;
  font-weight:800;font-size:1.05rem;color:var(--ink);cursor:pointer;transition:.15s;text-align:center}
.tile:hover{border-color:var(--blue)}
.tile.on{border-color:var(--blue);background:rgba(31,111,235,.10);box-shadow:0 0 0 3px rgba(31,111,235,.16)}
.tile.off,.tile:disabled{opacity:.38;cursor:not-allowed}
.tile.off:hover{border-color:var(--line)}

/* maat-tegels */
.size-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem}
.size-tile{display:flex;flex-direction:column;align-items:center;gap:.1rem;padding:.8rem .3rem}
.size-tile small{font-weight:600;font-size:.78rem;color:var(--slate)}
@media(min-width:560px){.size-tiles{grid-template-columns:repeat(8,1fr)}}

/* aantal-stepper */
.stepper{display:flex;align-items:center;justify-content:center;gap:1.2rem;margin:1.5rem 0}
.step-btn{width:60px;height:60px;border-radius:50%;border:none;background:var(--blue);color:#fff;font-size:2rem;
  font-weight:800;line-height:1;cursor:pointer;box-shadow:0 8px 20px rgba(31,111,235,.3);display:flex;align-items:center;justify-content:center}
.step-btn:active{transform:scale(.94)}
#qtyInput{width:110px;text-align:center;font-size:2.4rem;font-weight:900;font-family:var(--display);
  border:none;border-bottom:3px solid var(--line);background:transparent;color:var(--ink);padding:.2rem}
#qtyInput:focus{outline:none;border-color:var(--blue)}

/* overzicht (stap 5) */
.review{display:flex;flex-direction:column;gap:.1rem;margin:.5rem 0}
.review-row{display:flex;justify-content:space-between;align-items:center;padding:.85rem .2rem;border-bottom:1px solid var(--line);font-size:1.08rem}
.review-row:last-child{border-bottom:none}
.review-row span{color:var(--slate)}
.review-row strong{font-weight:800;color:var(--ink);font-family:var(--display)}

/* ===== Taal-schakelaar ===== */
.lang-switch{display:inline-flex;gap:.2rem;background:rgba(255,255,255,.12);padding:.2rem;border-radius:999px}
.lang-switch.center{display:flex;justify-content:center;margin:0 auto .9rem;background:rgba(10,37,64,.06)}
.lang-opt{font-size:.8rem;font-weight:800;letter-spacing:.03em;color:#cdd9e6;padding:.28rem .55rem;border-radius:999px;text-decoration:none;line-height:1}
.lang-opt:hover{color:#fff}
.lang-opt.on{background:#fff;color:var(--blue-deep)}
.lang-switch.center .lang-opt{color:var(--slate)}
.lang-switch.center .lang-opt.on{background:var(--blue);color:#fff}

/* ============================================================
   FIX — wizard echt centreren + alle shirt-kaarten gelijk/vierkant
   (productkaarten kregen min-width:auto → grote posterfoto's lieten
    de grid overlopen waardoor de wizard scheef en ongelijk werd)
   ============================================================ */
.wizard{max-width:760px;margin-inline:auto;width:100%}
.wizard .product-picker{grid-template-columns:repeat(2,1fr);gap:1rem}
@media(min-width:620px){.wizard .product-picker{grid-template-columns:repeat(3,1fr)}}
.wizard .pcard{min-width:0}
.wizard .pcard-img{min-width:0;aspect-ratio:1/1;width:100%;overflow:hidden}
.wizard .pcard-img img{width:100%;height:100%;object-fit:cover;display:block}
.wizard .pcard-name,.wizard .pcard-price{min-width:0;overflow-wrap:anywhere}

/* commissie-instelling in teamtabel */
.commission-form{display:flex;align-items:center;gap:.35rem;flex-wrap:nowrap}
.commission-form select{padding:.35rem .4rem;font-size:.85rem}
.commission-form input{width:64px;padding:.35rem .4rem;font-size:.9rem;text-align:right}
.commission-form .btn.sm{padding:.4rem .55rem}
.table tfoot th{padding:.7rem .6rem;border-top:2px solid var(--line);font-family:var(--display)}

/* ============================================================
   MOBIEL-FIX — bovenbalk liep buiten beeld (alles schoof naar links,
   witte strook rechts, tabel-kolommen zoals commissie onzichtbaar)
   ============================================================ */
html,body{max-width:100%;overflow-x:hidden}
.topbar-inner{flex-wrap:wrap;row-gap:.45rem}
.topbar-right{flex-wrap:wrap;justify-content:flex-end;gap:.6rem}
.whoami{gap:.35rem;min-width:0}
.whoami .role-pill{flex:none}

@media(max-width:600px){
  html{font-size:17px}
  .topbar-inner{padding:.6rem .8rem;gap:.5rem}
  .brand-text{font-size:1.15rem}
  /* rechtercluster op een eigen regel, netjes verdeeld */
  .topbar-right{width:100%;justify-content:space-between;font-size:.82rem;gap:.4rem}
  .lang-switch{order:-1}
  .lang-opt{padding:.26rem .5rem;font-size:.78rem}
  .role-pill{font-size:.6rem;padding:.1rem .4rem}
  .logout{font-size:.82rem}
  .nav-link{font-size:.92rem;padding:.55rem .6rem}
  .wrap{padding:1rem .8rem 3rem}
  .page-head h1{font-size:clamp(1.5rem,6vw,1.9rem)}
  .card{padding:1rem}
  /* brede tabellen blijven binnen het scherm en scrollen zelf */
  .table-scroll{max-width:100%}
}

/* commissie-banner bovenaan Mijn team */
.commission-banner{background:linear-gradient(135deg,#eaf2ff,#f4f8ff);border:1.5px solid #d4e4ff}
.commission-banner .cb-label{display:block;font-weight:700;color:var(--slate);font-size:.95rem}
.commission-banner .cb-amount{display:block;font-family:var(--display);font-weight:900;font-size:2rem;color:var(--blue-deep);line-height:1.1;margin-top:.2rem}
.commission-banner .cb-usd{font-size:1.1rem;font-weight:700;color:var(--slate)}

/* aanvragen / lage voorraad */
.nav-badge{display:inline-block;min-width:18px;height:18px;line-height:18px;text-align:center;
  background:#e5484d;color:#fff;border-radius:999px;font-size:.72rem;font-weight:800;padding:0 .35rem;vertical-align:middle}
.tag-warn{background:#fff3cd;color:#8a6d00}
.low-card{border:1.5px solid #ffe0a3;background:linear-gradient(135deg,#fff8e9,#fffdf7)}
.low-list{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.4rem}
.low-item{background:#fff;border:1px solid #ffd98a;border-radius:999px;padding:.35rem .7rem;font-weight:600;font-size:.9rem}
.low-item strong{color:#b4690e}
.inline-act{display:flex;gap:.35rem;flex-wrap:wrap}
.btn.xs{padding:.35rem .6rem;font-size:.82rem}

.lowbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}

/* ============================================================
   OPENBARE WINKEL (shop.php) + BESTELLINGEN (orders.php)
   ============================================================ */
.shop-body{background:var(--bg)}
.shop-topbar{background:linear-gradient(135deg,var(--navy),var(--navy-2));color:#fff;position:sticky;top:0;z-index:20}
.shop-topbar-inner{max-width:1080px;margin:0 auto;padding:.8rem 1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.shop-cart-link{display:inline-flex;align-items:center;gap:.4rem;color:#fff;background:rgba(255,255,255,.14);padding:.45rem .9rem;border-radius:999px;font-weight:700;font-size:.95rem}
.shop-cart-link:hover{background:rgba(255,255,255,.24);text-decoration:none}
.shop-wrap{max-width:1080px}
.shop-hero{text-align:center;margin:1.2rem 0 1.6rem}
.shop-hero h1{font-size:clamp(1.8rem,6vw,2.4rem);font-weight:900;font-family:var(--display)}
.shop-foot{padding:2rem 1rem}

.shop-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-bottom:2rem}
@media(min-width:680px){.shop-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.shop-grid{grid-template-columns:repeat(4,1fr)}}
.shop-card{background:#fff;border-radius:20px;padding:.9rem;box-shadow:0 6px 20px rgba(10,37,64,.08);display:flex;flex-direction:column;gap:.55rem;min-width:0}
.shop-img{aspect-ratio:1/1;border-radius:14px;overflow:hidden;background:#eef2f7;display:flex;align-items:center;justify-content:center;min-width:0}
.shop-img img{width:100%;height:100%;object-fit:cover;display:block}
.shop-name{font-family:var(--display);font-weight:800;font-size:1.15rem;line-height:1.1;overflow-wrap:anywhere}
.shop-price{font-weight:800;color:var(--blue);font-size:1rem}
.shop-controls{display:flex;gap:.4rem}
.shop-controls select,.shop-controls input{flex:1;min-width:0;padding:.5rem}
.shop-controls input{max-width:72px}

.shop-order{margin-top:1rem}
.cart-list{display:flex;flex-direction:column;gap:.2rem;margin-bottom:1rem}
.cart-row{display:grid;grid-template-columns:1fr auto auto auto;align-items:center;gap:.7rem;padding:.7rem .2rem;border-bottom:1px solid var(--line)}
.cart-name{font-weight:600}
.cart-qty{color:var(--slate);font-weight:700}
.cart-price{font-weight:800;font-family:var(--display)}
.checkout-grid{display:grid;grid-template-columns:1fr;gap:.8rem}
@media(min-width:640px){.checkout-grid{grid-template-columns:1fr 1fr}}
.btn.block.lg{width:100%;font-size:1.05rem;padding:.9rem}

/* bestellingen beheer */
.order-list{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:760px){.order-list{grid-template-columns:1fr 1fr}}
.order-card{border-left:4px solid var(--line)}
.order-card.status-new{border-left-color:#e5a000}
.order-card.status-assigned{border-left-color:var(--blue)}
.order-card.status-done{border-left-color:var(--sea)}
.order-card.status-cancelled{opacity:.6}
.order-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.6rem}
.order-ref{font-family:var(--display);font-weight:900;font-size:1.05rem;margin-right:.5rem}
.order-body{display:grid;grid-template-columns:1fr;gap:.7rem;margin-bottom:.8rem}
@media(min-width:520px){.order-body{grid-template-columns:1.2fr 1fr}}
.order-item{padding:.15rem 0}
.order-total{margin-top:.4rem;font-weight:800;font-family:var(--display)}
.order-customer{background:var(--bg);border-radius:12px;padding:.7rem}
.order-actions{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.assign-form{display:flex;gap:.35rem}
.tag-info{background:#e3eeff;color:var(--blue-deep)}