/* AluShip materialen-kiezer styling (scoped onder .mk).
 * Past zich aan aan host-pagina (font + kleuren erven), behalve waar nodig.
 */
.mk { font-family: inherit; color: inherit; }
.mk-header { display:flex; gap:10px; align-items:center; justify-content:space-between; margin-bottom:8px; }
.mk-titel { font-weight:600; font-size:14px; }
.mk-zoek { flex:0 0 220px; padding:6px 10px; border:1px solid #c7d0db; border-radius:6px; font-size:13px; }
.mk-zoek:focus { outline:none; border-color:#173a6b; box-shadow:0 0 0 2px rgba(23,58,107,0.15); }

.mk-row { display:flex; flex-wrap:wrap; gap:6px; margin:6px 0; }
.mk-leveranciers { border-bottom:1px solid #eef1f6; padding-bottom:6px; }

.mk-chip {
  background:#f3f5f9; border:1px solid #d6dde7; border-radius:999px;
  padding:5px 12px; font-size:12px; color:#334; cursor:pointer;
}
.mk-chip:hover { background:#e6ebf4; }
.mk-chip.active { background:#173a6b; color:#fff; border-color:#173a6b; }

.mk-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(110px, 1fr));
  gap:8px; margin-top:8px; max-height:380px; overflow-y:auto;
  padding:4px; background:#fbfcfe; border:1px solid #eef1f6; border-radius:6px;
}

.mk-tile {
  background:#fff; border:2px solid transparent; border-radius:6px;
  padding:4px; cursor:pointer; text-align:left; transition:border-color .12s, transform .12s;
}
.mk-tile:hover { border-color:#9ab2d5; transform:translateY(-1px); }
.mk-tile.active { border-color:#173a6b; background:#eaf0fa; }

.mk-thumb {
  width:100%; aspect-ratio:1/1; border-radius:4px; object-fit:cover;
  background:#e9edf3; display:block;
}
.mk-thumb-leeg {
  display:flex; align-items:center; justify-content:center;
  font-size:28px; color:#9aa3b2; background:#eef1f6;
}

.mk-naam { font-size:12px; font-weight:500; margin-top:4px; line-height:1.2; }
.mk-code { font-size:10px; color:#6b7280; font-family:ui-monospace, "SF Mono", Consolas, monospace; margin-top:1px; }

.mk-info { margin-top:8px; font-size:12px; color:#334; min-height:18px; }
.mk-info b { color:#173a6b; }
.mk-info .mk-wis {
  margin-left:8px; background:transparent; border:1px solid #c7d0db;
  border-radius:4px; padding:2px 8px; cursor:pointer; font-size:11px; color:#6b7280;
}
.mk-info .mk-wis:hover { background:#f3f5f9; }

.mk-laden, .mk-fout, .mk-leeg {
  padding:14px; text-align:center; color:#6b7280; font-size:13px;
}
.mk-fout { color:#b91c1c; }

.mk-anders-wrap { margin-top:8px; }
.mk-anders-chip {
  background:#fff; border:1px dashed #1d5b3f; color:#1d5b3f;
  padding:5px 12px; border-radius:14px; font-size:12px; cursor:pointer;
}
.mk-anders-chip:hover { background:#eef7f0; }
.mk-anders-form {
  display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; padding:8px;
  background:#f7faf8; border:1px solid #d6e2da; border-radius:6px;
}
.mk-anders-form input {
  flex:1 1 140px; padding:6px 10px; border:1px solid #c7d0db; border-radius:6px; font-size:13px;
}
.mk-and-ok {
  background:#1d5b3f; color:#fff; border:none; padding:6px 14px;
  border-radius:6px; cursor:pointer; font-size:13px;
}
.mk-and-ok:hover { background:#164b33; }