:root {
	--bg:#efefef;
	--text:#222;
	--muted:#666;
	--sidebar:#f6a623;
	--sidebar-text:#fff;
	--panel:#ffffff;
	--border:#e0e0e0;
	--blue:#1976d2;
	--chip-bg:#1976d2;
	--chip-text:#fff;
	--radius:12px;
	--gap:14px;
	--shadow:0 6px 18px rgba(0,0,0,.08);
	--maxw:1400px;
}
* {
	box-sizing:border-box
}
html,body {
	height:100%
}
body {
	margin:0;
	font-family:Arial,Helvetica,sans-serif;
	background:var(--bg);
	color: var(--text);
}
/* ===== Layout & Sidebar ===== */
.layout {
	display:flex;
	min-height:100vh;
	max-width:var(--maxw);
	margin: 0 auto;
}
.sidebar {
	width:260px;
	background:var(--sidebar);
	color:var(--sidebar-text);
	padding:16px 14px;
	position:sticky;
	top:0;
	height:100vh;
	overflow-y:auto;
	/* eigen scrollbar bij lange menu's */
	overflow-x:hidden;
	overscroll-behavior:contain;
	-webkit-overflow-scrolling:touch;
	scrollbar-gutter:stable;
}
/* Scrollbar (WebKit) */
.sidebar::-webkit-scrollbar {
	width:10px;
}
.sidebar::-webkit-scrollbar-thumb {
	background:rgba(0,0,0,.15);
	border-radius:8px;
}
.sidebar::-webkit-scrollbar-thumb:hover {
	background:rgba(0,0,0,.25);
}
.logo {
	display:flex;
	align-items:center;
	justify-content:center;
	margin:6px 0 16px 0;
}
.logo img {
	max-width:200px;
	height:auto;
	display: block;
}
/* ===== Side navigation ===== */
.side-nav ul {
	list-style:none;
	margin:0;
	padding:0;
}
.side-nav>ul>li {
	margin:8px 0;
}
.side-nav a {
	color:var(--sidebar-text);
	text-decoration:none;
	font-weight:bold;
	display:block;
	padding:8px 10px;
	border-radius:8px;
}
.side-nav a:hover {
	background-color: rgba(255,255,255,0.15);
}
/* Actieve hoofdmenu-item en subitem */
.side-nav li.active>a,.side-nav a.active {
	background-color:rgba(255,255,255,0.25);
	color:#f5f5f5;
	font-weight: 700;
}
/* Submenu-toggle (chevron) */
.side-nav li.has-sub>a {
	display:flex;
	justify-content:space-between;
	align-items:center;
}
.side-nav .chev {
	font-size:12px;
	opacity:.85;
	transition:transform .2s ease;
}
.side-nav li.open>a .chev {
	transform: rotate(90deg);
}
/* Submenu */
.submenu {
	list-style:none;
	margin:6px 0 0 0;
	padding-left:14px;
	max-height:0;
	overflow:hidden;
	transition: max-height .25s ease;
}
.side-nav li.open .submenu {
	max-height:none;
	/* geen limiet → kan scrollen via sidebar */
	overflow:visible;
}
/* Submenu-items:inspringen+pijltje+active/hover */
.submenu li {
	margin: 4px 0 0 8px;
}
.submenu a {
	font-weight:normal;
	background:rgba(255,255,255,.12);
	padding:6px 10px 6px 24px;
	/* inspringen */
	border-radius:8px;
	display:block;
	position:relative;
}
.submenu a::before {
	content:'↳';
	position:absolute;
	left:8px;
	top:50%;
	transform:translateY(-50%);
	opacity:.7;
	font-size:12px;
}
.submenu a:hover {
	background:rgba(255,255,255,.15);
}
.submenu li.active>a {
	background:rgba(255,255,255,.28);
	color:#ececec;
	border:1px solid rgba(255,255,255,.35);
	font-weight: 700;
}


/* Stats blokje in sidebar */
.sidebar .stats {
	margin:10px 0 18px 0;
	font-size:.9rem;
	line-height: 1.35;
}
/* ===== Content & Cards ===== */
.content {
	flex:1;
	padding:18px;
}
.card {
	background:var(--panel);
	border:1px solid var(--border);
	border-radius:var(--radius);
	padding:16px;
	box-shadow:var(--shadow);
}
h2 {
	margin:0 0 12px 0;
	font-size:1.1rem;
	color:var(--text);
}
.controls {
	display:flex;
	gap:12px;
	flex-wrap:wrap;
	align-items:center;
}
.form-row {
	display:flex;
	align-items:center;
	gap:8px;
}
label {
	color:var(--muted);
	font-weight:bold;
}
select {
	background:#fff;
	color:var(--text);
	border:1px solid #cfd8dc;
	border-radius:8px;
	padding: 8px 10px;
}
/* Grid & Cap cards */
.grid {
	display:grid;
	grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
	gap:var(--gap);
}
.cap-card {
	background:#fff;
	border:1px solid var(--border);
	border-radius:10px;
	overflow:hidden;
	box-shadow:var(--shadow);
}
.cap-row {
	display:flex;
	gap:12px;
	align-items:center;
	padding:12px;
}
.cap-thumb {
	flex:0 0 auto;
	width:105px;
	height:105px;
	background:#fafafa;
	border:1px solid var(--border);
	border-radius:10px;
	display:flex;
	align-items:center;
	justify-content:center;
}
.cap-thumb img {
	width:105px;
	height:105px;
	object-fit:contain;
	display:block;
	border-radius:10px;
}
.cap-meta {
	padding:0 12px 12px 12px;
}
/* .cap-title{margin:0 0 6px;font-size: 1rem;}*/
/* Dopnummer / titel iets subtieler maken */
.cap-title {
	color:#777;
	/* zacht grijs i.p.v. zwart */
	font-weight:500;
	/* iets lichter dan bold (700) */
	font-size:0.85rem;
	/* iets kleiner */
}
.meta-row {
	display:flex;
	gap:8px;
	flex-wrap:wrap;
}
.kv {
	font-size:.82rem;
	background:var(--blue);
	color:#fff;
	border-radius:999px;
	padding: 4px 8px;
}
.kv.muted{opacity:.65;}

/* Paginatie */
.pagination {
	display:flex;
	align-items:center;
	gap:12px;
	justify-content:center;
	margin:16px 0;
}
button {
	background:var(--blue);
	color:white;
	border:none;
	border-radius:8px;
	padding:8px 12px;
	cursor:pointer;
}
button:disabled {
	opacity:.6;
	cursor: not-allowed;
}

/* Infinite scroll loader */
.infinite-loading {
	text-align:center;
	margin: 10px 0 18px;
	font-size: 0.95rem;
	opacity: 0.8;
}
/* ===== Unknown modal (Onbekende doppen) ===== */
#u-modal {
	position:fixed;
	inset:0;
	background:rgba(0,0,0,.65);
	display:none;
	align-items:center;
	justify-content:center;
	z-index:60;
}
#u-modal.active {
	display:flex;
}
.u-card {
	background:#fff;
	border:1px solid var(--border);
	border-radius:12px;
	box-shadow:0 6px 18px rgba(0,0,0,.18);
	padding:16px;
	max-width:760px;
	width:92vw;
	display:grid;
	grid-template-columns:1fr 220px;
	gap:16px;
}
#u-modal img {
	width:210px;
	height:210px;
	object-fit:contain;
	border-radius:12px;
	border:1px solid var(--border);
	background:#fafafa;
}
.u-input,.u-text {
	width:100%;
	background:#fff;
	border:1px solid #cfd8dc;
	border-radius:10px;
	color:#222;
	padding:10px;
}
textarea.u-text {
	min-height:120px;
}
.u-actions {
	display:flex;
	justify-content:flex-end;
	gap:12px;
	margin-top:8px;
}
.hp {
	position:absolute;
	left:-5000px;
	opacity:0;
	height:0;
	width:0;
	overflow: hidden;
}
/* ===== Zonder merknaam – chips boven grid ===== */
#zm-crumb {
	min-height:32px;
	margin:0 0 10px 0;
	color:#666;
}
.chips {
	display:flex;
	gap:8px;
	flex-wrap:wrap;
}
.chip {
	display:inline-flex;
	align-items:center;
	gap:8px;
	background:#e0e7ff;
	color:#1e3a8a;
	border-radius:999px;
	padding:6px 10px;
	font-weight:600;
	line-height:1;
}

.chip .x {
	margin-left:4px;
	opacity:.9;
	cursor:pointer;
}
.chip-img {
	width:22px;
	height:22px;
	object-fit:cover;
	border-radius:6px;
	border:1px solid var(--border);
	background: #fff;
}
/* ===== Lightbox (klik) ===== */
#lightbox {
	position:fixed;
	inset:0;
	display:none;
	align-items:center;
	justify-content:center;
	background:rgba(0,0,0,.65);
	z-index:50;
}
#lightbox.active {
	display:flex;
}
.lb-frame {
	background:#fff;
	border:1px solid var(--border);
	border-radius:16px;
	box-shadow:var(--shadow);
	padding:10px;
	position:relative;
}
.lb-frame img {
	width:630px;
	height:630px;
	object-fit:contain;
	display:block;
	border-radius:10px;
}
.lb-close {
	position:absolute;
	top:6px;
	right:10px;
	color:#333;
	cursor:pointer;
	font-size:20px;
}
@media (max-width:700px) {
	.lb-frame img {
		width:90vw;
		height:90vw;
	}
}
.link-list {
	list-style:none;
	padding:0;
	margin:0;
}
.link-list li {
	margin:10px 0;
	font-size:1rem;
}
.link-list a {
	color:var(--blue);
	font-weight:bold;
	text-decoration:none;
}
.link-list a:hover {
	text-decoration:underline;
}
.link-grid {
	display:grid;
	grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
	gap:20px;
	margin-top:20px;
}
.link-card {
	display:flex;
	flex-direction:column;
	background:#fff;
	border:1px solid var(--border);
	border-radius:12px;
	box-shadow:var(--shadow);
	overflow:hidden;
	text-decoration:none;
	color:var(--text);
	transition:transform 0.2s ease,box-shadow 0.2s ease;
}
.link-card:hover {
	transform:translateY(-4px);
	box-shadow:0 6px 20px rgba(0,0,0,.15);
}
.link-card img {
	width:100%;
	height:200px;
	object-fit:cover;
	display:block;
}
.link-body {
	padding:14px;
}
.link-body h3 {
	margin:0 0 6px 0;
	font-size:1.05rem;
	color:var(--blue);
}
.link-body p {
	margin:0;
	color:var(--muted);
	font-size:0.9rem;
}
.contact-form {
	display:flex;
	flex-direction:column;
	gap:12px;
	max-width:600px;
}
.contact-form .form-row {
	display:flex;
	flex-direction:column;
}
.contact-form label {
	font-weight:bold;
	margin-bottom:4px;
	color:var(--muted);
}
.contact-form input,.contact-form textarea {
	border:1px solid #cfd8dc;
	border-radius:8px;
	padding:8px 10px;
	font-size:1rem;
	width:100%;
}
.contact-form button {
	align-self:flex-start;
	background:var(--blue);
	color:white;
	border:none;
	border-radius:8px;
	padding:10px 16px;
	cursor:pointer;
	font-weight:bold;
}
.contact-form button:hover {
	background:#125a9d;
}
.success {
	color:green;
	font-weight:bold;
	margin-top:16px;
}
.error {
	color:red;
	font-weight:bold;
	margin-top:16px;
}
.cap-row {
	display:flex;
	align-items:center;
	gap:16px;
	padding:12px;
}
.cap-thumb {
	width:105px;
	height:auto;
	padding:6px 6px 0;
	background:#fafafa;
	border:1px solid var(--border);
	border-radius:10px;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:flex-start;
}
.cap-thumb img {
	width:95px;
	height:95px;
	object-fit:contain;
	border-radius:8px;
	margin-bottom:4px;
}
.cap-thumb .cap-title {
	font-size:.85rem;
	font-weight:500;
	color:#777;
	margin:0;
	text-align:center;
}
.cap-meta {
	flex:1;
	display:flex;
	flex-direction:column;
	justify-content:center;
}
.cap-meta .meta-row {
	display:flex;
	flex-direction:column;
	gap:6px;
	align-items: flex-start;
}
.kv {
	display:inline-block;
	background:#ffe0b3;
	/* licht oranje */
	color:#333;
	/* donkergrijs */
	border-radius:999px;
	padding:4px 8px;
	font-size:.85rem;
}
/* Zorgt dat land/merk/type onder elkaar staan,links plaatje met dopnummer */
.cap-meta .meta-row {
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	gap:6px;
}
.cap-thumb {
	padding: 6px 6px 0;
}
/* ruimte onderin voor dopnummer */
.cap-title {
	margin:6px 0 8px 0;
	color:#777;
	font-weight:600;
	font-size: .85rem;
}
/* Toast (melding bovenaan in het groen) */
.toast {
	position:fixed;
	top:20px;
	left:50%;
	transform:translate(-50%,-20px);
	background:#4caf50;
	/* groen:succes */
	color:#fff;
	padding:10px 18px;
	border-radius:8px;
	box-shadow:0 3px 10px rgba(0,0,0,.2);
	opacity:0;
	pointer-events:none;
	transition:opacity .35s ease,transform .35s ease;
	z-index:4000;
	/* boven header/modals */
	font-size:0.9rem;
}
.toast.show {
	opacity:1;
	transform: translate(-50%,0);
}
/* kaarten voor (sub)categorieën in “Dop zonder merknaam” */
.zm-card {
	display:flex;
	align-items:center;
	gap:16px;
	padding:10px;
	background:#fff;
	border:1px solid var(--border);
	border-radius:10px;
	box-shadow:0 2px 4px rgba(0,0,0,.08);
	cursor:pointer;
	transition:transform .1s ease,box-shadow .1s ease;
}
.zm-card:hover {
	transform:translateY(-2px);
	box-shadow:0 4px 8px rgba(0,0,0,.12);
}
.zm-card .cap-thumb {
	width:100px;
	height:100px;
	display:flex;
	align-items:center;
	justify-content:center;
	background:#fafafa;
	border:1px solid var(--border);
	border-radius:10px;
}
.zm-card .cap-thumb img {
	max-width:90px;
	max-height:90px;
	object-fit: contain;
}
/* oranje chip naast het plaatje */
.zm-chip {
	background:#ffd699;
	color:#333;
	font-weight:600;
	border-radius:999px;
	padding:6px 12px;
	font-size:.9rem;
	border:1px solid #e0a240;
	box-shadow: 0 2px 4px rgba(0,0,0,.08);
}
/* breadcrumb chips (zelfde oranje stijl en sluitkruisje) */
#zm-crumb .chip {
	background:#ffd699;
	color:#333;
	font-weight:600;
	border-radius:999px;
	padding:6px 12px;
	border:1px solid #e0a240;
	display:inline-flex;
	align-items:center;
	gap:6px;
}
#zm-crumb .chip .x {
	cursor:pointer;
	font-weight:700;
	opacity:.8;
}
#zm-crumb .chip .x:hover {
	opacity:1;
}
#zm-crumb .chips {
	display:flex;
	gap:8px;
	flex-wrap:wrap;
	margin-top: 6px;
}
/* Dopnummer onder de afbeelding */
.cap-thumb {
	padding:6px 6px 0;
	/* ruimte onderin voor het dopnummer */
}
.cap-thumb img {
	width:95px;
	height:95px;
	object-fit:contain;
	display:block;
	border-radius:10px;
	margin: 0 auto;
}
.cap-title {
	margin:6px 0 0;
	/* ruimte boven dopnummer */
	font-size:0.85rem;
	color:#777;
	font-weight:600;
	text-align:center;
}
/* Chips rechts (lichtoranje+donkergrijze tekst) */
.meta-col {
	display:flex;
	gap:8px;
	flex-wrap:wrap;
}
.kv.kv--soft {
	background:#ffd699;
	color:#333;
	border-radius:999px;
	padding:4px 8px;
	border:1px solid #e0a240;
	font-size: .85rem;
}
/* Dopweergave in Dop zonder merknaam */
.zm-dop {
	display:flex;
	align-items:flex-start;
	gap:14px;
	padding:10px;
	background:#fff;
	border:1px solid var(--border);
	border-radius:10px;
	box-shadow:0 2px 5px rgba(0,0,0,.08);
}
.zm-dop .cap-thumb {
	flex:0 0 110px;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:flex-start;
	background:#fafafa;
	border:1px solid var(--border);
	border-radius:10px;
	padding:8px;
}
.zm-dop .cap-thumb img {
	width:95px;
	height:95px;
	object-fit:contain;
	display:block;
}
.zm-dop .cap-num {
	margin-top:6px;
	font-size:0.85rem;
	font-weight:600;
	color:#777;
	text-align:center;
}
.zm-dop .cap-info {
	display:flex;
	flex-direction:column;
	gap:6px;
	justify-content:center;
}
.zm-dop .kv-row {
	display:flex;
	flex-wrap:wrap;
	gap:6px;
}
.kv.kv--soft {
	background:#ffd699;
	color:#333;
	border-radius:999px;
	padding:4px 8px;
	border:1px solid #e0a240;
	font-size: .85rem;
}

/* ===== Pagina header boven doppen ===== */
.page-header {
  background: #f6a623;       /* zelfde oranje als sidebar */
  color: #fff;
  padding: 10px 18px;
  border-radius: 10px;
  margin-bottom: 16px;
  box-shadow: 0 3px 8px rgba(0,0,0,.1);
}

/* specifiek: wit lettertype voor tekst in page-header */
.page-header h2 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #fff !important;    /* <-- overschrijft var(--text) */
}

/* ------------------------------------------------------ */
/* Compacte weergave voor Verzameling / Ruildoppen        */
/* ------------------------------------------------------ */

/* meer kolommen / kleinere minimum-kaart */
.grid {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

/* compacte kaart: alles onder elkaar, gecentreerd */
.cap-card.compact .cap-row { 
  flex-direction: column; 
  align-items: center; 
  gap: 8px; 
  padding: 10px; 
}

/* kleine thumb */
.cap-card.compact .cap-thumb {
  width: 120px;
  height: 120px;
  padding: 6px 6px 0;
}

/* forceer de image-maat (gaat boven eerdere 105/95px regels) */
.cap-card.compact .cap-thumb img {
  width: 110px !important;
  height: 110px !important;
  object-fit: contain;
  display: block;
  border-radius: 8px;
  margin: 0 auto;
}

/* dopnummer net onder het plaatje */
.cap-card.compact .cap-num {
  margin-top: 6px;
  font-size: .85rem;
  color: #777;
  font-weight: 600;
  text-align: center;
}

/* stack met “tags” onder het plaatje */
.cap-card.compact .mini-meta {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}

/* licht-oranje pillen, zoals de site */
.cap-card.compact .mini-meta .kv {
  background: #ffd699;
  color: #333;
  border: 1px solid #e0a240;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: .82rem;
  line-height: 1;
}

/* Lightbox: info-tekst onder grote afbeelding */
.lb-meta {
  margin-top: 10px;
  font-size: .95rem;
  color: #333;
}
.lb-meta .line { margin: 3px 0; }
.lb-meta .label { color: #666; margin-right: 6px; }

/* compacter raster */
.grid {
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); /* was 150px */
  gap: 10px; /* was groter */
}

/* kaartje nog net iets compacter */
.cap-card.compact .cap-row { 
  flex-direction: column;
  align-items: center;
  gap: 6px;            /* was 8px */
  padding: 8px;        /* was 10px */
}

.cap-card.compact .cap-thumb {
  width: 110px;        /* was 115px */
  height: 110px;       /* was 115px */
  padding: 6px 6px 0;
}

.cap-card.compact .cap-thumb img {
  width: 100px !important;  /* was 105px */
  height: 100px !important; /* was 105px */
  object-fit: contain;
  display: block;
  border-radius: 8px;
  margin: 0 auto;
}

.cap-card.compact .mini-meta{
  font-size: .83rem;   /* tikje compacter */
  gap: 2px;
}

/* Lightbox 25% kleiner */
.lb-frame img{
  width: 472px;
  height: 472px;
  object-fit: contain;
}

/* mobiel blijft gewoon 90vw */
@media (max-width:700px){
  .lb-frame img{ width:90vw; height:90vw; }
}

/* compacte meta onder het plaatje (zonder chips) */
.mini-meta { display:flex; flex-direction:column; gap:4px; }
.mini-line .lbl { color:#777; font-weight:600; margin-right:6px; }

/* Compact raster: één dop extra per rij */
.grid {
  grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); /* was groter */
  gap: 8px; /* iets minder ruimte tussen kaarten */
}

/* Kaartje strakker */
.cap-card.compact .cap-row {
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 6px; /* minder padding rondom */
}

/* Thumbnail kleiner + minder padding links/rechts */
.cap-card.compact .cap-thumb {
  width: 108px;
  height: 108px;
  padding: 4px; /* smaller, dus minder witruimte aan zijkant */
}

/* Afbeelding iets kleiner zodat alles netjes past */
.cap-card.compact .cap-thumb img {
  width: 100px !important;
  height: 100px !important;
  object-fit: contain;
  display: block;
  border-radius: 8px;
  margin: 0 auto;
}

/* (We tonen geen mini-meta meer onder de afbeelding) */
.cap-card.compact .mini-meta { display: none !important; }

/* ===== Weergaveverschil tussen Index en andere pagina's ===== */

/* Standaard (Verzameling, Ruildoppen) -> verberg tekst onder dop */
.cap-card.compact .mini-meta {
  display: none !important;
}

/* Alleen op indexpagina (Laatst toegevoegd) -> laat mini-meta zien */
body.index-page .cap-card.compact .mini-meta {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 0.82rem;
}

body.index-page .mini-line .lbl {
  color: #777;
  font-weight: 600;
  margin-right: 4px;
}

/* Home (Laatst toegevoegd): geen Land/Merk/Type onder dop */
body.index-page .cap-card.compact .mini-meta {
  display: none !important;
}

/* Compactere weergave: meer doppen per rij */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(125px, 1fr)); /* was 240px → nu compacter */
  gap: 8px; /* minder ruimte tussen doppen */
}

/* Kaartjes strakker maken */
.cap-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow);
  padding: 6px; /* minder witruimte */
}

/* Thumbnail iets kleiner en dichter bij elkaar */
.cap-thumb {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  background: #fafafa;
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cap-thumb img {
  width: 94px;
  height: 94px;
  object-fit: contain;
  border-radius: 8px;
  display: block;
}

/* ==== HERSTEL 'Dop zonder merknaam' layout ====
   - Ruimere grid voor hoofd- en subcategorieën
   - Kaart met dopje links en oranje chip rechts
   - Losgekoppeld van compacte tegels van Verzameling/Ruildoppen
*/

/* 1) Grotere tegel-grid voor categorie- en subcategorie-overzichten */
#zm-main.grid,
#zm-subs.grid{
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
}

/* 2) Kaartstijl zoals voorheen: dop links, chip rechts */
.zm-card{
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0,0,0,.08);
  cursor: pointer;
  transition: transform .1s ease, box-shadow .1s ease;
}
.zm-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,.12);
}

/* 3) Thumb in de kaart (vast formaat, netjes gecentreerd) */
.zm-card .cap-thumb{
  width: 100px;
  height: 100px;
  background: #fafafa;
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.zm-card .cap-thumb img{
  max-width: 90px;
  max-height: 90px;
  object-fit: contain;
  display: block;
}

/* 4) Oranje chip rechts van het plaatje (zoals Dopkenmerken) */
.zm-chip{
  background: #ffd699;
  color: #333;
  font-weight: 600;
  border-radius: 999px;
  padding: 6px 12px;
  border: 1px solid #e0a240;
  box-shadow: 0 2px 4px rgba(0,0,0,.08);
  white-space: nowrap;
}

/* 5) Laat de compacte tegel-styling van andere pagina's
      NIET doorwerken in de lijstweergave of kaarten hier */
#zm-list .cap-card .cap-thumb img{
  width: 95px;
  height: 95px;
  object-fit: contain;
}

/* (optioneel) iets meer lucht onder de breadcrumb-chips */
#zm-crumb .chips{ margin-top: 6px; }

/* Verberg dopnummers alleen op de pagina 'Dop zonder merknaam' */
#zm-main .cap-thumb .cap-title,
#zm-subs .cap-thumb .cap-title,
#zm-list .cap-thumb .cap-title,
#zm-list .cap-num {
  display: none !important;
}
/* ===== Uitlijning doppen links in Dop zonder merknaam ===== */
.zm-card {
  justify-content: flex-start;   /* alles links in de kaart */
}

.zm-card .cap-thumb {
  margin-left: 6px;              /* klein beetje lucht links */
  justify-content: flex-start;   /* dopje zelf ook links */
}
/* ===== Uitlijning doppen links in Dop zonder merknaam ===== */
.zm-card {
  justify-content: flex-start;   /* alles links in de kaart */
}

.zm-card .cap-thumb {
  margin-left: 6px;              /* klein beetje lucht links */
  justify-content: flex-start;   /* dopje zelf ook links */
}

/* ===== Onbekende doppen: ruimer grid ===== */
.unknown-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
}

/* ===== Onbekende doppen: juiste kaartstructuur ===== */
#u-results .cap-card{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 14px;
  min-height: 220px;
}

#u-results .cap-thumb{
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
}

#u-results .unknown-info{
  width: 100%;
  padding: 4px 8px 6px;
  font-size: 0.85rem;
  line-height: 1.4;
  text-align: left;
}

/* ===== Onbekende doppen: oude layout-onderdelen uitschakelen ===== */
#u-results .cap-meta,
#u-results .cap-title,
#u-results .meta-row {
  display: none !important;
}

/* Taalkeuze chips */
.sidebar .lang-chips .chip {
  background: transparent;
  color: #fff; /* of #333 als sidebar licht is */
  border: 1px solid rgba(255,255,255,.6);
  font-weight: 600;
}

/* Actieve taal */
.sidebar .lang-chips .chip.active {
  background: #e0e7ff;
  color: #1e3a8a;
  border-color: #a5b4fc;
  font-weight: 700;
}

/* Hover */
.sidebar .lang-chips .chip:not(.active):hover {
  background: rgba(255,255,255,.15);
}

/* Intro op indexpagina */
.index-intro {
  text-align: center;
  margin: 10px 0 44px 0;
}

.index-intro .intro-line {
  font-family: 'Pacifico', cursive;
  font-size: 2.2rem;
  color: #374151;           /* rustig donkergrijs */
  line-height: 1.25;
}

.index-intro .intro-line.small {
  font-size: 1.6rem;
  margin-top: 6px;
}

.index-intro strong {
  font-weight: 700;
}

@media (min-width: 900px) {
  .index-intro .intro-line {
    font-size: 2.7rem;
  }
}