/* ============================================================
   kalksteen.css — de nieuwe vormgeving van Kelderflessen.

   Dit bestand ligt óver de bestaande opmaak heen. Het verandert
   kleuren, letters en vormen; het raakt geen enkele functie aan.
   Terugdraaien = de <link> naar dit bestand weghalen.

   Uitgangspunt: kalksteen (de kelderwand), inkt en flessengroen.
   Bewust geen crème met terracotta — daar belandt elke wijnsite.
   ============================================================ */

/* ---------- 1. Het palet ---------- */
:root{
  /* Wijnrood blijft bestaan als datakleur, maar is niet langer de huisstijl. */
  --wine:#2E5C4E;               /* was bordeauxrood: nu flessengroen */
  --wine-dark:#24493E;
  --wine-soft:#5C8A79;
  --wine-light:rgba(46,92,78,.09);

  --bg:#F4F4F1;                 /* kalksteen */
  --bg-soft:#FAFAF8;
  --panel:#FFFFFF;
  --panel-strong:#FFFFFF;
  --tile:#FFFFFF;

  --border:rgba(28,34,41,.10);
  --border-strong:rgba(28,34,41,.16);

  --text:#1C2229;               /* inkt */
  --muted:#5A6672;

  --shadow:0 12px 30px -18px rgba(28,34,41,.35);
  --shadow-soft:0 8px 20px -16px rgba(28,34,41,.3);

  /* Strakkere hoeken: minder speelgoed, meer kelderboek. */
  --radius-xl:18px;
  --radius-lg:16px;
  --radius-md:12px;
  --radius-sm:8px;

  /* Wijnkleuren voor stippen, randjes en het rek. */
  --t-rood:#7A2B3C;
  --t-wit:#9A7C1F;
  --t-rose:#B96A76;
  --t-bubbels:#5F7F6C;

  --serif:"Zodiak","Iowan Old Style",Palatino,Georgia,serif;
  --sans:"Switzer",-apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,sans-serif;
  --mono:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ---------- 2. De ondergrond ---------- */
html{ color-scheme:light; background:var(--bg); }

body{
  font-family:var(--sans);
  /* de drie radiale verlopen eruit: die maakten het wazig */
  background:var(--bg) !important;
  letter-spacing:-0.005em;
  font-size:15px;
  line-height:1.5;
}

/* ---------- 3. Typografie ---------- */
h1,h2,h3,.wine-name,.card-title{
  font-family:var(--serif);
  font-weight:500;
  letter-spacing:-0.02em;
}
h1{ line-height:1.06 }
h2,h3{ line-height:1.18 }

/* Alles wat een getal is, in cijferletters. Dat leest als een kelderboek
   en houdt kolommen recht. */
.count, .year, .price, .stat-value, .badge-count,
.venster-chip, .rank-stat, .telling{
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
  font-weight:400;
  letter-spacing:.01em;
}

/* Kleine kapitalen als opschrift boven een blok. */
.section-sub, .eyebrow, .label-kop{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}

/* ---------- 4. Vlakken ---------- */
.card, .panel, .wine-card, .section, .modal, .modal-box, .sheet-blad{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* ---------- 5. Knoppen ---------- */
button, .btn{
  font-family:var(--sans);
  font-weight:600;
  border-radius:var(--radius-md);
  min-height:44px;
  transition:background .16s, border-color .16s, color .16s;
}
button:focus-visible, .btn:focus-visible, a:focus-visible{
  outline:2px solid var(--wine);
  outline-offset:2px;
}

/* De hoofdactie is groen en vol; de rest is wit met een dunne rand.
   Zo is er per scherm één knop die om aandacht vraagt. */
.primary, button.primary, .btn.primary{
  background:var(--wine) !important;
  color:#FFFFFF !important;
  border:1px solid var(--wine) !important;
  box-shadow:none !important;
}
.primary:hover, button.primary:hover{ background:var(--wine-dark) !important; }

.secondary, button.secondary, .btn.secondary{
  background:#FFFFFF !important;
  color:var(--text) !important;
  border:1px solid var(--border-strong) !important;
  box-shadow:none !important;
}
.secondary:hover, button.secondary:hover{
  background:#F4F4F1 !important;
  border-color:rgba(28,34,41,.24) !important;
}

/* Verwijderen is rode tekst op wit, geen rode knop: het is zelden
   wat je wil en het hoort niet te lokken. */
.danger, button.danger, .btn.danger{
  background:#FFFFFF !important;
  color:#A5333F !important;
  border:1px solid rgba(165,51,63,.28) !important;
  box-shadow:none !important;
}
.danger:hover, button.danger:hover{ background:rgba(165,51,63,.06) !important; }

/* ---------- 6. Invoervelden ---------- */
/* Let op: vinkjes, keuzerondjes en bestandskiezers hier NIET in meenemen.
   Een selectievakje van 44 bij 44 met binnenmarge is onbruikbaar. */
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]),
select, textarea{
  font-family:var(--sans);
  border-radius:var(--radius-md);
  border:1px solid var(--border-strong);
  background:#FFFFFF;
  color:var(--text);
  min-height:44px;
  padding:10px 12px;
}
input:not([type=checkbox]):not([type=radio]):focus, select:focus, textarea:focus{
  outline:none;
  border-color:var(--wine-soft);
  box-shadow:0 0 0 3px var(--wine-light);
}
input::placeholder, textarea::placeholder{ color:#9AA3AD; }

input[type=checkbox], input[type=radio]{
  width:18px; height:18px; min-height:0 !important; padding:0 !important;
  accent-color:var(--wine); cursor:pointer; flex:0 0 auto;
}
.primeur-toggle-wrap{
  background:var(--wine-light) !important;
  border:1px solid rgba(46,92,78,.18) !important;
  border-radius:var(--radius-lg) !important;
}
.primeur-toggle-wrap label{ color:var(--wine) !important; }

/* ---------- 7. Sterren en accenten ---------- */
.star, .stars, .rating{ color:#B8862B; }
::selection{ background:#CFE0D5; color:var(--text); }

/* ---------- 8. Onderbalk ---------- */
.bottom-nav{
  background:rgba(255,255,255,.96) !important;
  border-top:1px solid var(--border);
  backdrop-filter:blur(12px);
}
.bottom-nav-btn{
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
}
.bottom-nav-btn.active{ color:var(--wine); }

/* ---------- 9. Rustiger bewegen ---------- */
@media(prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
}

/* ============================================================
   10. De kelderkaarten
   ============================================================ */

.wine{
  background:#FFFFFF !important;
  border:1px solid var(--border) !important;
  border-radius:var(--radius-lg) !important;
  padding:0 !important;                 /* de foto loopt tot de rand */
  overflow:hidden;
  box-shadow:var(--shadow-soft) !important;
  transition:box-shadow .2s, border-color .2s, transform .2s;
}
.wine:hover{
  box-shadow:0 14px 28px -20px rgba(28,34,41,.4) !important;
  border-color:var(--border-strong) !important;
}

/* De etiketfoto vult de kop van de kaart in plaats van te zweven. */
.wine-media{
  /* Let op: dit was een flexbox. In combinatie met een vaste verhouding én een
     afbeelding op 100% hoogte kromp de foto naar nul. Vandaar 'block'. */
  display:block !important;
  position:relative !important;
  height:auto !important;
  aspect-ratio:16/10;
  margin:0 !important;
  border-radius:0 !important;
  background:#EFEFEA !important;
  overflow:hidden;
}
.wine-media img{
  position:absolute !important; inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  border-radius:0 !important;
  border:0 !important;
  padding:0 !important;
  max-width:none !important; max-height:none !important;
}
/* Zolang er nog geen foto geladen is, een rustig vlak in plaats van een gat. */
.wine-media::before{
  content:"🍷"; position:absolute; inset:0; display:grid; place-items:center;
  font-size:1.6rem; opacity:.16; pointer-events:none; z-index:0;
}
.wine-media img{ z-index:1; }        /* de foto ligt over het glaasje heen */
.wine-media .rotate-btn, .wine-media .wine-type-badge, .wine-media .primeur-badge{ z-index:2; }

/* Primeur: die foto's zijn vaak losse flessen op wit, dus niet bijsnijden.
   Let op de !important: in de pagina staat nog een oudere, specifiekere regel
   (.wine.primeur .wine-media{aspect-ratio:auto;height:124px}) die het vlak
   anders tot niets laat krimpen. */
.wine.primeur .wine-media{
  display:block !important;
  position:relative !important;
  aspect-ratio:16/10 !important;
  height:auto !important;
  background:#F7F7F4 !important;
}
.wine.primeur .wine-media img{ object-fit:contain !important; padding:10px !important; }

/* Het soortlabel als klein plaatje linksonder op de foto. */
.wine-type-badge{
  position:absolute; left:10px; bottom:10px; margin:0 !important;
  padding:4px 9px !important;
  border-radius:6px !important;
  font-family:var(--sans);
  font-size:.68rem !important;
  font-weight:650 !important;
  letter-spacing:.01em;
  background:rgba(255,255,255,.94) !important;
  border:1px solid rgba(28,34,41,.12) !important;
  box-shadow:0 1px 4px rgba(28,34,41,.14);
}
.wine-type-badge.type-rood{ color:var(--t-rood) !important; }
.wine-type-badge.type-wit{ color:var(--t-wit) !important; }
.wine-type-badge.type-rose{ color:var(--t-rose) !important; }
.wine-type-badge.type-mousserend{ color:var(--t-bubbels) !important; }

.primeur-badge{
  border-radius:6px !important;
  font-family:var(--mono);
  font-size:.62rem !important;
  letter-spacing:.1em;
  text-transform:uppercase;
  background:rgba(255,255,255,.94) !important;
  color:var(--wine) !important;
  border:1px solid rgba(46,92,78,.22) !important;
}

/* De tekst eronder krijgt lucht en hiërarchie. */
.wine-body{ padding:13px 14px 0 !important; }
.wine-body h3{
  font-family:var(--serif) !important;
  font-size:1.06rem !important;
  font-weight:500 !important;
  line-height:1.16 !important;
  letter-spacing:-.02em;
  color:var(--text) !important;
}
.wine-dom{
  margin-top:3px !important;
  color:var(--muted) !important;
  font-size:.82rem !important;
}
.fact-line{
  color:var(--muted) !important;
  font-size:.79rem !important;
  line-height:1.45 !important;
}
.fact-line .sep{ opacity:.4; padding:0 5px; }
.fact-line .abv{ font-family:var(--mono); font-size:.74rem; }
.fact-line.grape{ color:#4A5763 !important; }

.wine-note-preview{
  margin-top:8px;
  padding:8px 10px;
  border-radius:var(--radius-sm);
  background:#F7F7F4;
  border:1px solid var(--border);
  font-size:.78rem;
  color:var(--muted);
}

/* Voorraad: het getal is het onderwerp, dus in cijferletters en groot. */
.stock{
  margin:12px 14px !important;
  padding-top:11px !important;
  border-top:1px solid var(--border) !important;
}
.stock b{
  font-family:var(--mono) !important;
  font-size:1.22rem !important;
  font-weight:500 !important;
  color:var(--text) !important;
  font-variant-numeric:tabular-nums;
}
.stock em{
  font-style:normal !important;
  font-size:.68rem !important;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted) !important;
}
.stock.empty b{ color:#A5333F !important; }

.stock-btn{
  min-height:34px !important;
  width:34px;
  border-radius:8px !important;
  background:#FFFFFF !important;
  color:var(--text) !important;
  border:1px solid var(--border-strong) !important;
  box-shadow:none !important;
  font-size:1rem !important;
}
.stock-btn:hover{ background:#F4F4F1 !important; }

/* Knoppen onder de kaart: alles neutraal, verwijderen als rode tekst. */
.controls{ margin:0 14px 14px !important; }
.controls button{
  min-height:40px !important;
  font-size:.82rem !important;
  border-radius:var(--radius-sm) !important;
}

/* Het drinkvenster-chipje in de nieuwe kleuren. */
.venster-chip{
  font-family:var(--mono);
  border-radius:6px !important;
  font-weight:500 !important;
}

/* De ster-score onder de kaart. */
.wine-score{ font-family:var(--mono); font-size:.76rem; color:var(--muted); }
.wine-score-empty{ opacity:.75; }
.small{ font-size:.76rem; color:var(--muted); }

/* Het raster zelf: meer lucht tussen de kaarten. */
#wineList{ gap:14px !important; }

/* ============================================================
   11. Het rek — je kelder als flessenbodems
   ============================================================ */

.kelder-werkbalk{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin:0 0 14px;
}
.weergave-wissel{
  display:flex; background:#FFFFFF; border:1px solid var(--border-strong);
  border-radius:var(--radius-md); padding:3px; gap:2px; flex:0 0 auto;
}
.weergave-wissel button{
  min-height:36px !important; padding:0 14px; border:0; border-radius:8px;
  background:none; cursor:pointer; color:var(--muted);
  font-size:.8rem; font-weight:600; box-shadow:none !important;
}
.weergave-wissel button:hover{ color:var(--text); background:#F4F4F1; }
.weergave-wissel button[aria-pressed="true"]{
  background:var(--wine); color:#FFFFFF;
}

.rek-legenda{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  font-family:var(--mono); font-size:.68rem; color:var(--muted); letter-spacing:.04em;
}
.rek-legenda i{
  width:12px; height:12px; border-radius:999px; display:inline-block;
  margin-left:6px; border:1px solid rgba(28,34,41,.16);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.55);
}
.rek-legenda i:first-child{ margin-left:0 }
.rek-uitleg{ opacity:.8 }

/* De glaskleur per wijnsoort — ook gebruikt door de legenda. */
.g-rood   { background:linear-gradient(160deg,#A2596A,#4C1C28) }
.g-wit    { background:linear-gradient(160deg,#F2E7BE,#BCA35D) }
.g-rose   { background:linear-gradient(160deg,#F9D8DA,#D08891) }
.g-mousserend{ background:linear-gradient(160deg,#DEE8D8,#8AA489) }
.g-onbekend{ background:linear-gradient(160deg,#E4E4DE,#A9AFA8) }

.rek-groep{ margin-bottom:22px }
.rek-groep-kop{ display:flex; align-items:center; gap:10px; margin-bottom:10px }
.rek-groep-kop h3{
  font-family:var(--sans) !important; font-size:.92rem !important;
  font-weight:600 !important; letter-spacing:-.005em; color:var(--text);
}
.rek-merkje{ width:7px; height:7px; border-radius:999px; flex:0 0 auto }
.rek-merkje.s-laat  { background:#B4626F }
.rek-merkje.s-bijna { background:#C98A5B }
.rek-merkje.s-nu    { background:#5F9A75 }
.rek-merkje.s-liggen{ background:#6E8FB5 }
.rek-merkje.s-geen  { background:#A9AFA8 }
.rek-lijn{ flex:1; height:1px; background:linear-gradient(90deg,var(--border-strong),transparent) }
.rek-telling{ font-family:var(--mono); font-size:.72rem; color:var(--muted) }

.rek{
  /* Vangnet: wat er ondanks het rekenwerk toch buiten valt, valt niet buiten
     de kaart. */
  overflow:hidden;
  padding:16px 12px 12px; border-radius:var(--radius-lg);
  background:linear-gradient(180deg,#FFFFFF,#F8F8F5);
  border:1px solid var(--border);
  box-shadow:0 1px 0 #FFF inset, 0 10px 24px -20px rgba(28,34,41,.3);
}
/* Een rij is een raster van gelijke kolommen. Daardoor past hij altijd
   binnen de kaart, ook als een meting ernaast zit. */
.rek-rij{
  position:relative; display:grid; box-sizing:border-box;
  grid-template-columns:repeat(var(--per,4), minmax(0,1fr));
  gap:6px; align-items:flex-start; padding-bottom:22px;
}
.rek-rij::before{
  content:""; position:absolute; left:6px; right:6px;
  top:40px; height:1px;
  background:linear-gradient(90deg,transparent,var(--border-strong) 12%,var(--border-strong) 88%,transparent);
}
.rek-rij:last-child{ padding-bottom:4px }
/* De verspringende laag heeft één fles minder en staat een halve plek naar
   binnen — aan beide kanten evenveel. Daardoor valt er nooit iets buiten de
   kaart, en liggen de flessen precies in de gaten van de laag eronder. */
.rek-rij.verspringt{
  grid-template-columns:repeat(calc(var(--per,4) - 1), minmax(0,1fr));
  padding-left:calc((100% + 6px) / var(--per,4) / 2);
  padding-right:calc((100% + 6px) / var(--per,4) / 2);
}

.plek{
  position:relative; z-index:1; width:100%; min-width:0;
  display:flex; flex-direction:column; align-items:center; gap:5px;
  background:none !important; border:0 !important; padding:0 !important;
  min-height:0 !important; box-shadow:none !important; cursor:pointer;
}
.fles{
  position:relative; width:min(68px, 100%); aspect-ratio:1; border-radius:999px;
  display:grid; place-items:center;
  border:1px solid rgba(28,34,41,.14);
  box-shadow:inset 0 2px 6px rgba(28,34,41,.24), 0 5px 9px -6px rgba(28,34,41,.4);
  transition:transform .22s cubic-bezier(.2,.8,.25,1), box-shadow .22s;
}
/* het glansrandje en de deuk in de bodem */
.fles::after{
  content:""; position:absolute; inset:4px; border-radius:999px;
  border:1px solid rgba(255,255,255,.45);
}
.fles::before{
  content:""; position:absolute; inset:34%; border-radius:999px;
  background:radial-gradient(circle at 42% 36%, rgba(255,255,255,.3), rgba(28,34,41,.22));
}
.fles b{
  position:relative; z-index:2; font-family:var(--mono); font-weight:400;
  font-size:.72rem; font-variant-numeric:tabular-nums;
  color:#1E2A24; text-shadow:0 1px 0 rgba(255,255,255,.5);
}
.fles.g-rood b{ color:#FBEEF0; text-shadow:0 1px 2px rgba(40,12,20,.5) }

.fles-aantal{
  position:absolute; top:-2px; right:-2px; min-width:18px; height:18px;
  border-radius:999px; background:#FFFFFF; color:var(--wine);
  font-family:var(--mono); font-size:.62rem; display:grid; place-items:center;
  padding:0 4px; z-index:3; border:1px solid var(--border-strong);
}
.fles-op{
  position:absolute; inset:0; border-radius:999px; z-index:3;
  display:grid; place-items:center;
  background:rgba(244,244,241,.72); color:#A5333F;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase;
}
.plek-naam{
  font-size:.7rem; line-height:1.3; color:var(--text); text-align:center;
  max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.plek-huis{
  font-family:var(--mono); font-size:.6rem; color:var(--muted); text-align:center;
  max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.plek:active .fles{ transform:translateY(-7px) }
.plek:focus-visible{ outline:none }
.plek:focus-visible .fles{ box-shadow:0 0 0 3px var(--wine-light), inset 0 2px 6px rgba(28,34,41,.24) }
@media(hover:hover){
  .plek:hover .fles{ transform:translateY(-7px); box-shadow:inset 0 2px 6px rgba(28,34,41,.24), 0 14px 20px -12px rgba(28,34,41,.4) }
  .plek:hover .plek-naam{ color:var(--wine) }
}

/* De kaart waar je vanuit het rek naartoe springt, licht even op. */
.wine.net-gekozen{
  box-shadow:0 0 0 2px var(--wine-soft), var(--shadow-soft) !important;
  transition:box-shadow .3s;
}

/* ============================================================
   12. De rest van de pagina in dezelfde taal
   ============================================================ */

/* --- Kop en zijbalk --- */
.content-header, header, .sidebar{
  background:#FFFFFF !important;
  border-color:var(--border) !important;
  backdrop-filter:none !important;
}
.sidebar-section{ border-color:var(--border) !important; }
.title, .header-title{ font-family:var(--serif); font-weight:500; letter-spacing:-.02em; }
.header-title h1, .header-title h2{ font-family:var(--serif); font-weight:500; letter-spacing:-.025em; }

/* --- Vensters --- */
.modal-backdrop{
  background:rgba(28,34,41,.32) !important;
  backdrop-filter:blur(2px);
}
.modal, .modal-box{
  background:#FFFFFF !important;
  border:1px solid var(--border) !important;
  border-radius:var(--radius-xl) !important;
  box-shadow:0 24px 60px -30px rgba(28,34,41,.5) !important;
}
.modal h2, .modal h3{ font-family:var(--serif); font-weight:500; letter-spacing:-.02em; }
.close-btn{
  background:#FFFFFF !important;
  color:var(--muted) !important;
  border:1px solid var(--border-strong) !important;
  border-radius:999px !important;
  min-height:34px !important; width:34px;
  box-shadow:none !important;
}
.close-btn:hover{ background:#F4F4F1 !important; color:var(--text) !important; }

/* --- Kleine knoppen --- */
.mini, button.mini{
  min-height:34px !important;
  padding:0 11px !important;
  font-size:.78rem !important;
  border-radius:var(--radius-sm) !important;
  background:#FFFFFF !important;
  color:var(--text) !important;
  border:1px solid var(--border-strong) !important;
  box-shadow:none !important;
}
.mini:hover{ background:#F4F4F1 !important; }

/* "muted" was grijs voor verwijderen; dat hoort rode tekst te zijn. */
.muted, button.muted{
  background:#FFFFFF !important;
  color:#A5333F !important;
  border:1px solid rgba(165,51,63,.26) !important;
  box-shadow:none !important;
}
.muted:hover, button.muted:hover{ background:rgba(165,51,63,.06) !important; }

/* --- Proefnotitie (WSET) --- */
.wset-section{
  background:#FFFFFF !important;
  border:1px solid var(--border) !important;
  border-radius:var(--radius-lg) !important;
}
.wset-field label{ font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.stepper button{
  background:#FFFFFF !important;
  border:1px solid var(--border-strong) !important;
  color:var(--text) !important;
  box-shadow:none !important;
}
.stepper .on, .stepper button.on{
  background:var(--wine) !important; color:#FFFFFF !important; border-color:var(--wine) !important;
}

/* --- Uitleg bij het eerste bezoek --- */
.onboarding-box, #onboardingModal .onboarding-box, #whatsNewModal .onboarding-box{
  background:#FFFFFF !important;
  border:1px solid var(--border) !important;
  border-radius:var(--radius-xl) !important;
}
.onboarding-title{ font-family:var(--serif) !important; font-weight:500 !important; letter-spacing:-.02em; }
.onboarding-text{ color:var(--muted) !important; }
.onboarding-dot{ background:var(--border-strong) !important; }
.onboarding-dot.active{ background:var(--wine) !important; }
.onboarding-btn.primary{ background:var(--wine) !important; color:#FFF !important; border-color:var(--wine) !important; }
.onboarding-btn.skip{ color:var(--muted) !important; background:none !important; border:0 !important; }

/* --- Verhalen --- */
.stories-card{
  background:#FFFFFF !important;
  border:1px solid var(--border) !important;
  border-radius:var(--radius-lg) !important;
}
.stories-head{ font-family:var(--mono); color:var(--wine) !important; }
.story-ring{ background:linear-gradient(135deg,#5C8A79,#2E5C4E 60%,#B8862B) !important; }
.story-ring.seen{ background:var(--border-strong) !important; }
.story-ring.add{ background:var(--wine-light) !important; }
.story-name{ color:var(--muted) !important; }

/* --- Filters --- */
#filterPanel{
  background:#FFFFFF !important;
  border:1px solid var(--border) !important;
  border-radius:var(--radius-xl) !important;
}
#filterPanel select, #filterPanel input{ border-radius:var(--radius-md) !important; }
#filterOverlay{ background:rgba(28,34,41,.32) !important; }

/* --- Zoekveld --- */
#searchInput{
  background:#FFFFFF !important;
  border:1px solid var(--border-strong) !important;
  border-radius:var(--radius-md) !important;
}

/* --- Losse tekstjes --- */
.meta{ color:var(--muted) !important; font-size:.78rem; }
.sep{ opacity:.4 }
.star{ color:#B8862B !important; }

/* --- Lege staat --- */
.empty-state-card{
  background:#FFFFFF !important;
  border:1px dashed var(--border-strong) !important;
  border-radius:var(--radius-lg) !important;
  color:var(--muted) !important;
}

/* ============================================================
   13. De kelderkaart: één fles in detail
   ============================================================ */

.fles-venster{ position:fixed; inset:0; z-index:5000; display:none; }
.fles-venster.open{ display:block; }
.fv-achter{ position:absolute; inset:0; background:rgba(28,34,41,.34); backdrop-filter:blur(2px); }

.fv-blad{
  position:absolute; left:0; right:0; bottom:0;
  max-height:90vh; overflow-y:auto;
  background:#FFFFFF;
  border-top:1px solid var(--border);
  border-radius:22px 22px 0 0;
  padding:10px 18px calc(22px + env(safe-area-inset-bottom));
  box-shadow:0 -20px 50px -30px rgba(28,34,41,.6);
  animation:fvOmhoog .28s cubic-bezier(.2,.8,.25,1);
}
@keyframes fvOmhoog{ from{ transform:translateY(18px); opacity:.6 } to{ transform:none; opacity:1 } }
.fv-greep{ width:36px; height:4px; border-radius:999px; background:var(--border-strong); margin:0 auto 14px; }

@media(min-width:760px){
  .fv-blad{
    left:50%; right:auto; bottom:auto; top:50%; transform:translate(-50%,-50%);
    width:min(540px,92vw); border-radius:var(--radius-xl);
    border:1px solid var(--border); animation:none;
  }
  .fv-greep{ display:none }
  .fv-top{ margin-bottom:6px }
}

/* De foto, of een getekend etiket als die er niet is. */
.fv-foto{
  position:relative; width:100%; aspect-ratio:3/2; overflow:hidden;
  border-radius:var(--radius-md); margin-bottom:16px;
  background:linear-gradient(180deg,#EFEFEA,#E5E5DE);
  border:1px solid var(--border);
  display:grid; place-items:center;
}
/* De foto zelf blijft heel; de wazige kopie erachter vult het vlak op. */
.fv-foto img.fv-heel{
  position:relative; z-index:1;
  width:100%; height:100%; object-fit:contain; display:block;
  padding:8px; filter:drop-shadow(0 8px 18px rgba(28,34,41,.28));
}
.fv-waas{
  position:absolute; inset:-8%; z-index:0;
  background-size:cover; background-position:center;
  filter:blur(18px) saturate(.85) brightness(1.06);
  opacity:.55;
}
.fv-foto::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.5),transparent 44%);
}
.fv-etiket{
  width:31%; min-width:96px; aspect-ratio:3/4; background:#F1EEE7; color:#1A1E24;
  border-radius:2px; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:4px; padding:10px 8px; text-align:center;
  font-family:var(--serif); box-shadow:0 12px 26px rgba(28,34,41,.2);
}
.fv-etiket .e-huis{ font-family:var(--mono); font-size:.5rem; letter-spacing:.14em; text-transform:uppercase; opacity:.6; line-height:1.3 }
.fv-etiket .e-naam{ font-size:.82rem; font-weight:500; line-height:1.15 }
.fv-etiket .e-lijn{ width:20px; height:1px; background:currentColor; opacity:.35 }
.fv-etiket .e-jaar{ font-family:var(--mono); font-size:.66rem; letter-spacing:.1em }

.fv-status{ font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.fv-blad h2{
  font-family:var(--serif); font-weight:500; font-size:1.7rem; line-height:1.1;
  letter-spacing:-.025em; margin:5px 0 3px; color:var(--text);
}
.fv-onder{ color:var(--muted); font-size:.88rem; }

/* Gegevens als kelderkaart: label links, waarde rechts. */
.fv-regels{ margin:18px 0 0; border-top:1px solid var(--border); }
.fv-regel{
  display:flex; justify-content:space-between; gap:14px;
  padding:9px 0; border-bottom:1px solid var(--border); font-size:.88rem;
}
.fv-regel dt{ font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.fv-regel dd{ text-align:right; color:var(--text); }

.fv-venster{ margin:18px 0 4px; }
.fv-balk-kop{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:.72rem; color:var(--muted); }
.fv-balk{ position:relative; height:6px; border-radius:999px; background:#E7E7E1; margin-top:9px; }
.fv-balk-vul{ position:absolute; inset:0; border-radius:999px; background:linear-gradient(90deg,#C4DACB,var(--wine)); }
.fv-balk-nu{ position:absolute; top:-6px; width:2px; height:18px; background:var(--text); border-radius:2px; box-shadow:0 0 0 2px rgba(255,255,255,.85); }
.fv-balk-uitleg{ margin-top:11px; font-size:.85rem; color:var(--muted); line-height:1.5; }
.fv-geen-venster{ font-size:.85rem; color:var(--muted); }

.fv-knoppen{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:20px; }
.fv-knoppen .primary{ grid-column:1 / -1; }

/* --- Sluiten en hoogte op een telefoon --- */
/* Bovenin één regel: het sleepstreepje in het midden, het kruisje rechts.
   Geen absolute plaatsing meer — dat schoof in sommige gevallen weg. */
.fv-top{
  position:relative; display:flex; align-items:center; justify-content:flex-end;
  min-height:34px; margin-bottom:10px;
}
.fv-sluit{
  position:relative; z-index:3; flex:0 0 auto;
  width:34px; height:34px; min-height:34px !important; padding:0 !important;
  border-radius:999px !important;
  background:#FFFFFF !important;
  color:var(--text) !important;
  border:1px solid var(--border-strong) !important;
  box-shadow:none !important;
  font-size:.9rem; line-height:1; cursor:pointer;
  display:grid; place-items:center;
}
.fv-sluit:hover{ background:#F4F4F1 !important; }

/* Het streepje staat gecentreerd in diezelfde regel. */
.fv-greep{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:56px; height:22px; display:grid; place-items:center;
  cursor:grab; touch-action:none; background:none; margin:0;
}
.fv-greep::after{
  content:""; display:block; width:36px; height:4px; border-radius:999px;
  background:var(--border-strong);
}
.fv-blad{ transition:transform .2s ease; }

/* Op een telefoon blijft het venster laag genoeg om de achtergrond te zien. */
@media(max-width:760px){
  .fv-blad{ max-height:82vh; padding-left:16px; padding-right:16px; }
  .fv-foto{ aspect-ratio:auto; height:28vh; max-height:230px; margin-bottom:14px; }
  .fv-blad h2{ font-size:1.45rem; }
  .fv-regel{ padding:8px 0; font-size:.85rem; }
  .fv-knoppen{ margin-top:16px; }
  .fv-knoppen button{ min-height:46px !important; }
}

/* --- Vensters die langer zijn dan het scherm --- */
.modal-backdrop{
  /* Bovenaan uitlijnen en zelf kunnen scrollen: anders steekt een lang venster
     boven én onder het scherm uit en is er niets meer om naast te tikken. */
  align-items:flex-start !important;
  padding:18px 12px calc(18px + env(safe-area-inset-bottom)) !important;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch;
}
.modal{
  max-height:none !important;
  margin:auto !important;
  padding:20px 18px !important;
  width:100% !important;
}
/* Het kruisje blijft in beeld terwijl je door de inhoud scrolt. */
.close-btn{
  position:sticky !important;
  top:0; float:right; z-index:3;
  margin:-6px -4px 0 8px;
  display:grid; place-items:center;
}
.modal h3{ padding-right:44px; }

@media(max-width:760px){
  .modal-backdrop{ padding:10px 10px calc(14px + env(safe-area-inset-bottom)) !important; }
  .modal{ border-radius:var(--radius-lg) !important; }
}

/* --- Primeur in het rek: nog onderweg, dus nog geen volle fles --- */
.rek-merkje.s-primeur{ background:#8A7BB5 }
.fles.is-primeur{
  opacity:.55;
  border-style:dashed !important;
  border-color:rgba(28,34,41,.28) !important;
}
.fles.is-primeur::before{ opacity:.5 }
.fles.is-primeur b{ opacity:.85 }
/* een klein streepje rechtsonder als teken dat hij nog moet komen */
.fles.is-primeur::after{
  border-color:rgba(255,255,255,.3) !important;
}
.plek:has(.is-primeur) .plek-naam{ font-style:italic }

/* ============================================================
   14. De keuze tussen camera en galerij
   Die maakt zijn eigen opmaak aan bij het laden en hangt die achter
   dit bestand. Vandaar de extra 'html' ervoor: anders wint hij.
   ============================================================ */

html #imgSourceSheet .iss-backdrop{
  background:rgba(28,34,41,.34) !important;
}
html #imgSourceSheet .iss-card{
  background:#FFFFFF !important;
  border:1px solid var(--border) !important;
  border-bottom:0 !important;
  border-radius:22px 22px 0 0 !important;
  box-shadow:0 -20px 50px -30px rgba(28,34,41,.6) !important;
  padding:16px 16px calc(18px + env(safe-area-inset-bottom)) !important;
}
html #imgSourceSheet .iss-card::before{
  content:""; display:block; width:36px; height:4px; border-radius:999px;
  background:var(--border-strong); margin:0 auto 14px;
}
html #imgSourceSheet .iss-title{
  font-family:var(--mono) !important;
  font-size:.7rem !important;
  font-weight:400 !important;
  letter-spacing:.16em !important;
  text-transform:uppercase;
  color:var(--muted) !important;
  margin:0 0 14px !important;
}
html #imgSourceSheet .iss-btn{
  font-family:var(--sans) !important;
  border-radius:var(--radius-md) !important;
  min-height:50px !important;
  font-size:.92rem !important;
  font-weight:600 !important;
  background:#FFFFFF !important;
  color:var(--text) !important;
  border:1px solid var(--border-strong) !important;
  box-shadow:none !important;
  justify-content:flex-start !important;
  padding:0 16px !important;
  gap:12px !important;
}
html #imgSourceSheet .iss-btn:hover{ background:#F4F4F1 !important; }
/* De camera is wat je meestal wil: die krijgt het accent. */
html #imgSourceSheet .iss-btn[data-src="camera"]{
  background:var(--wine) !important;
  color:#FFFFFF !important;
  border-color:var(--wine) !important;
}
html #imgSourceSheet .iss-btn[data-src="camera"]:hover{ background:var(--wine-dark) !important; }
html #imgSourceSheet .iss-btn.iss-cancel{
  background:transparent !important;
  color:var(--muted) !important;
  border:0 !important;
  justify-content:center !important;
  min-height:44px !important;
  margin-top:4px !important;
}
html #imgSourceSheet .iss-btn.iss-cancel:hover{ color:var(--text) !important; background:transparent !important; }

/* --- Velden in het detailvenster zijn aanpasbaar --- */
.fv-regel{ position:relative; flex-wrap:wrap; }
.fv-regel dd{ display:flex; align-items:center; gap:4px; justify-content:flex-end; }
.fv-invoer{
  min-width:40px; padding:3px 8px; border-radius:6px;
  border:1px solid transparent; background:transparent;
  color:var(--text); font:inherit; font-size:.88rem; text-align:right;
  outline:none; cursor:text; transition:background .15s, border-color .15s;
}
.fv-invoer:hover{ background:#F4F4F1; border-color:var(--border); }
.fv-invoer:focus{
  background:#FFFFFF; border-color:var(--wine-soft);
  box-shadow:0 0 0 3px var(--wine-light); text-align:right;
}
.fv-invoer:empty::before{
  content:attr(data-leeg); color:#A6AEB7; font-style:italic;
}
select.fv-invoer{
  cursor:pointer; text-align:right; min-height:32px !important;
  border:1px solid var(--border) !important; background:#FFFFFF !important;
  padding:3px 8px !important;
}
.fv-regel dd i{ font-style:normal; color:var(--muted); font-size:.82rem; }
.fv-vast{ color:var(--muted); }

.fv-melding{
  flex-basis:100%; text-align:right; font-size:.72rem; color:#A5333F; margin-top:2px;
}
.fv-melding.goed{ color:var(--wine); }

/* --- Bronvermelding onder het wijnhuis ---
   Let op: in de pagina krijgt élke <a> de vorm van een knop (witte pil met
   rand en binnenmarge). Daarom hier met html body en !important terug naar
   een klein regeltje op een eigen regel. */
html body .advies-bron{
  display:block !important;
  width:auto !important; max-width:100%;
  margin:10px 0 0 !important;
  padding:0 !important;
  background:none !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  text-align:left !important;
  font-family:var(--mono) !important;
  font-size:.66rem !important;
  font-weight:400 !important;
  letter-spacing:.06em;
  color:var(--muted) !important;
  text-decoration:none;
}
html body .advies-bron::before{ content:"bron: "; opacity:.75; }
html body .advies-bron:hover{ color:var(--wine) !important; text-decoration:underline; }

/* --- Knopje om de streek op te zoeken --- */
.fv-zoek{
  min-height:26px !important; padding:0 9px !important; margin-right:6px;
  border-radius:6px !important; cursor:pointer;
  font-family:var(--mono) !important; font-size:.66rem !important; font-weight:400 !important;
  letter-spacing:.06em; text-transform:lowercase;
  background:var(--wine-light) !important; color:var(--wine) !important;
  border:1px solid rgba(46,92,78,.24) !important; box-shadow:none !important;
}
.fv-zoek:hover{ background:rgba(46,92,78,.16) !important; }
.fv-zoek[disabled]{ opacity:.6; }

/* ============================================================
   15. Wishlist: de lege plekken die nog gevuld moeten worden
   ============================================================ */

.wl-werkbalk{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 14px;
}
.wl-sorteer{
  min-height:40px !important; padding:0 12px !important; border-radius:var(--radius-md) !important;
  border:1px solid var(--border-strong) !important; background:#FFFFFF !important;
  font:inherit; font-size:.84rem; color:var(--text); cursor:pointer;
}
.wl-cijfers{
  margin-left:auto; font-family:var(--mono); font-size:.74rem; color:var(--muted);
}
.wl-cijfers b{ color:var(--text); font-weight:500; font-variant-numeric:tabular-nums; }

/* Een wens is een lege plek: omtrek in plaats van glas. */
.leegte{
  position:relative; width:min(68px, 100%); aspect-ratio:1; border-radius:999px;
  display:grid; place-items:center; overflow:hidden;
  background:#FBFBF9;
  border:2px dashed var(--vkleur, var(--border-strong));
  transition:transform .22s cubic-bezier(.2,.8,.25,1), background .22s, border-style .22s;
}
.leegte::after{
  content:""; position:absolute; inset:22%; border-radius:999px;
  border:1px dashed color-mix(in srgb, var(--vkleur, var(--border-strong)) 55%, transparent);
}
.leegte b{
  position:relative; z-index:2; font-family:var(--mono); font-size:.72rem;
  color:var(--vkleur, var(--muted));
}
/* Met foto: die vult de plek, en het plusje wijkt naar de hoek. */
.leegte .foto{
  position:absolute; inset:0; border-radius:999px;
  background-size:cover; background-position:center;
  filter:saturate(.55) contrast(.95); opacity:.62;
  transition:filter .22s, opacity .22s;
}
.leegte.met-foto::after{ display:none; }
.leegte.met-foto b{
  position:absolute; right:-1px; bottom:-1px; z-index:3;
  width:18px; height:18px; border-radius:999px; display:grid; place-items:center;
  font-size:.64rem; background:#FFFFFF; color:var(--vkleur, var(--wine));
  border:1px solid var(--border-strong);
}
.plek:active .leegte{ transform:translateY(-7px); }
@media(hover:hover){
  .plek:hover .leegte{ transform:translateY(-7px); background:#FFFFFF; border-style:solid; }
  .plek:hover .leegte .foto{ filter:none; opacity:1; }
}

/* De bestellijst met totaal per groep. */
.bestel{ border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; background:#FFFFFF; }
.bestel .regel{
  display:flex; width:100%; gap:12px; align-items:center; text-align:left;
  padding:13px 15px; background:none; border:0; border-top:1px solid var(--border);
  color:inherit; font:inherit; cursor:pointer; min-height:0 !important; border-radius:0 !important;
}
.bestel .regel:first-child{ border-top:0; }
.bestel .regel:hover{ background:#F7F7F4; }
.bestel .punt{ width:8px; height:8px; border-radius:999px; flex:0 0 auto; }
.bestel .mid{ flex:1; min-width:0; }
.bestel .r1{ display:flex; align-items:baseline; gap:8px; }
.bestel .r1 strong{ font-family:var(--serif); font-weight:500; font-size:1.02rem; letter-spacing:-.01em; }
.bestel .r1 .jaar{ font-family:var(--mono); font-size:.76rem; color:var(--muted); }
.bestel .r2{ font-size:.79rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bestel .prijs{ font-family:var(--mono); font-size:.86rem; font-variant-numeric:tabular-nums; flex:0 0 auto; }
.bestel .prijs.onbekend{ color:#9AA3AD; font-size:.76rem; }
.totaal{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:14px 15px; background:#F7F7F4; border-top:1px solid var(--border-strong);
}
.totaal dt{ font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.totaal dd{ font-family:var(--mono); font-size:1.12rem; font-variant-numeric:tabular-nums; }
.totaal small{ display:block; font-family:var(--sans); font-size:.7rem; color:#9AA3AD; text-align:right; margin-top:2px; }

/* Waarom staat dit op je lijst? */
.wlv-waarom{
  margin-top:16px; padding:11px 13px; border-radius:var(--radius-md);
  background:var(--wine-light); border:1px solid rgba(46,92,78,.16);
  font-size:.85rem; color:#2A4A40;
}

/* Het rek mag nooit breder worden dan zijn kolom. */
#rekWeergave, #wishlistRek{ min-width:0; max-width:100%; overflow:hidden; }
.rek-groep{ min-width:0; max-width:100%; }
.rek{ max-width:100%; }

/* Notitie in het wishlistvenster */
.wlv-notitie{ display:block; margin-top:16px; }
.wlv-notitie span{
  display:block; font-family:var(--mono); font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); margin-bottom:6px;
}
.wlv-notitie textarea{
  width:100%; min-height:64px; resize:vertical;
  font-size:.88rem; line-height:1.5;
}
.wlv-notitie textarea.bewaard{
  border-color:var(--wine-soft) !important;
  box-shadow:0 0 0 3px var(--wine-light);
}

/* --- De legenda: gewoon een stipje met een woordje, maar aanklikbaar.
   Geen knopvorm eromheen; alleen de nadruk verschuift. --- */
.soort-knop{
  display:inline-flex; align-items:center; gap:6px;
  min-height:0 !important; padding:2px 0 !important; margin-right:10px;
  border:0 !important; background:none !important; box-shadow:none !important;
  border-radius:0 !important; cursor:pointer;
  font-family:var(--mono); font-size:.68rem !important; font-weight:400 !important;
  letter-spacing:.04em; color:var(--muted) !important;
  transition:opacity .15s, color .15s;
}
.soort-knop i{
  width:12px; height:12px; border-radius:999px; display:block; flex:0 0 auto;
  border:1px solid rgba(28,34,41,.16); box-shadow:inset 0 1px 1px rgba(255,255,255,.55);
  transition:box-shadow .15s;
}
.soort-knop:hover{ color:var(--text) !important; }
/* Aan: het woord wordt donker en het stipje krijgt een ring. */
.soort-knop.aan{ color:var(--text) !important; }
.soort-knop.aan i{ box-shadow:0 0 0 2px #FFF, 0 0 0 3.5px var(--wine); }
.soort-knop.uit{ opacity:.4; }
.soort-alles{ font-style:italic; color:var(--wine) !important; }

/* De legenda op de wishlist staat onder de werkbalk */
#wlLegenda{ display:flex; flex-wrap:wrap; align-items:center; margin:0 0 14px; }

/* ============================================================
   16. Uitzonderingen op oude regels in de pagina's zelf
   In wishlist.html staat nog:
     button:not(.rotate-btn), .btn, #accountLink{ width:100% !important;
       min-height:52px; display:flex; justify-content:space-between; ... }
   Die zet élke knop op volle breedte. Daarom hier specifieker terug.
   ============================================================ */

html body .soort-knop,
html body .weergave-wissel button,
html body .fv-sluit,
html body .fv-zoek,
html body .stock-btn,
html body .bestel .regel,
html body .plek,
html body .mini{
  width:auto !important;
  min-height:0 !important;
  justify-content:center !important;
}

html body .soort-knop{
  display:inline-flex !important;
  min-height:26px !important;
  padding:2px 0 !important;
  margin-right:12px !important;
  border-radius:0 !important;
  gap:6px !important;
}
html body .weergave-wissel button{
  min-height:36px !important;
  padding:0 13px !important;
  border-radius:8px !important;
}
html body .fv-sluit{
  width:34px !important; height:34px !important; min-height:34px !important;
  padding:0 !important; border-radius:999px !important;
}
html body .plek{
  width:100% !important;
  display:flex !important; flex-direction:column !important;
  padding:0 !important; border-radius:0 !important; gap:5px !important;
}
html body .bestel .regel{
  width:100% !important; justify-content:flex-start !important;
  border-radius:0 !important; padding:13px 15px !important;
}
html body .stock-btn{
  width:34px !important; height:34px !important; min-height:34px !important;
  padding:0 !important; border-radius:8px !important;
}
html body .mini{ min-height:34px !important; padding:0 11px !important; }

/* De legenda zelf blijft één regel met wat ruimte tussen de soorten. */
html body #wlLegenda, html body #rekLegenda{
  display:flex !important; flex-wrap:wrap !important;
  align-items:center !important; gap:2px 0 !important;
}

/* Aanpasbare velden in het wishlistvenster */
html body #wlvRegels .fv-invoer{ width:auto !important; min-height:0 !important; }
html body #wlvRegels select.fv-invoer{
  min-height:32px !important; padding:3px 8px !important; border-radius:6px !important;
  justify-content:flex-end !important;
}
.fv-invoer.bewaard{
  border-color:var(--wine-soft) !important;
  box-shadow:0 0 0 3px var(--wine-light) !important;
}

/* ============================================================
   17. Wishlistkaarten: dezelfde vorm als in de kelder
   In de pagina staat nog een opzet die de wishlist als één lijst
   opmaakte (#wishlistGrid{display:block} met rijen erin). Hier
   specifieker terug naar een raster van kaarten.
   ============================================================ */

html body #wishlistGrid{
  display:grid !important;
  grid-template-columns:repeat(auto-fill, minmax(248px, 1fr)) !important;
  gap:14px !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
}

html body #wishlistGrid .wine{
  display:block !important;
  background:#FFFFFF !important;
  border:1px solid var(--border) !important;
  border-top:1px solid var(--border) !important;
  border-radius:var(--radius-lg) !important;
  padding:0 !important;
  overflow:hidden !important;
  box-shadow:var(--shadow-soft) !important;
  cursor:pointer;
}
html body #wishlistGrid .wine:hover{
  background:#FFFFFF !important;
  box-shadow:0 14px 28px -20px rgba(28,34,41,.4) !important;
  border-color:var(--border-strong) !important;
}

/* De richtprijs staat waar in de kelder de voorraad staat. */
html body #wishlistGrid .stock b{
  font-family:var(--mono) !important;
  font-size:1.05rem !important;
  font-weight:500 !important;
  color:var(--text) !important;
}
html body #wishlistGrid .stock em{
  font-style:normal !important; font-size:.66rem !important;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted) !important;
}

@media(max-width:520px){
  html body #wishlistGrid{ grid-template-columns:1fr !important; }
}

/* --- Foodpairing vanuit het ondermenu --- */
.eten-modal{ max-width:440px; }
.eten-uitleg{ color:var(--muted); font-size:.86rem; margin:-4px 0 14px; }
#etenInput{ width:100%; font-size:1rem; }
.eten-suggesties{ display:flex; flex-wrap:wrap; gap:6px; margin:12px 0 4px; }
.eten-chip{
  min-height:32px !important; padding:0 11px !important; width:auto !important;
  border-radius:999px !important; cursor:pointer;
  font:inherit; font-size:.8rem !important; font-weight:500 !important;
  background:#F7F7F4 !important; color:var(--text) !important;
  border:1px solid var(--border) !important; box-shadow:none !important;
}
.eten-chip:hover{ background:var(--wine-light) !important; border-color:rgba(46,92,78,.24) !important; color:var(--wine) !important; }
.eten-knoppen{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:16px; }

/* ============================================================
   18. Het ondermenu telt nu vijf knoppen
   In de pagina staat grid-template-columns:repeat(4,1fr), waardoor
   de vijfde naar een tweede regel viel.
   ============================================================ */

/* Evenveel kolommen als knoppen, ongeacht het aantal: de kelder heeft er
   vijf, de wishlist drie. */
html body .bottom-nav-inner{
  grid-template-columns:none !important;
  grid-auto-flow:column !important;
  grid-auto-columns:1fr !important;
  gap:0 !important;
}
html body .bottom-nav-btn{
  min-width:0 !important;
  padding:6px 2px !important;
  font-size:.6rem !important;
  letter-spacing:.04em !important;
  gap:4px !important;
}
html body .bottom-nav-btn > span:last-child{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
html body .bottom-nav-btn .nav-icon{ font-size:1.18rem !important; }

/* Op een smalle telefoon nog een tandje kleiner. */
@media(max-width:380px){
  html body .bottom-nav-btn{ font-size:.55rem !important; padding:6px 1px !important; }
  html body .bottom-nav-btn .nav-icon{ font-size:1.08rem !important; }
}
/* De stip bij een melding volgt de smallere knop. */
html body .bottom-nav-btn .nav-dot{ right:calc(50% - 14px) !important; }

/* ============================================================
   19. Keuzeblad — dezelfde vorm als de bronkeuze bij het scannen
   ============================================================ */

html body .keuzeblad{ position:fixed; inset:0; z-index:99998; display:none; }
html body .keuzeblad.open{ display:block; }
html body .keuzeblad .kb-achter{
  position:absolute; inset:0; background:rgba(28,34,41,.34);
}
html body .keuzeblad .kb-card{
  position:absolute; left:0; right:0; bottom:0; margin:0 auto;
  max-width:520px; background:#FFFFFF;
  border:1px solid var(--border); border-bottom:0;
  border-radius:22px 22px 0 0;
  padding:16px 16px calc(18px + env(safe-area-inset-bottom));
  box-shadow:0 -20px 50px -30px rgba(28,34,41,.6);
  animation:kbOmhoog .26s cubic-bezier(.2,.8,.25,1);
}
@keyframes kbOmhoog{ from{ transform:translateY(14px); opacity:.6 } to{ transform:none; opacity:1 } }
html body .keuzeblad .kb-card::before{
  content:""; display:block; width:36px; height:4px; border-radius:999px;
  background:var(--border-strong); margin:0 auto 14px;
}
html body .keuzeblad .kb-title{
  font-family:var(--mono); font-size:.7rem; font-weight:400;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin:0 0 14px; text-align:center;
}
html body .keuzeblad .kb-btn{
  display:flex !important; align-items:center; justify-content:flex-start !important;
  gap:12px; width:100% !important; min-height:50px !important;
  padding:0 16px !important; margin-bottom:10px;
  border-radius:var(--radius-md) !important;
  font:inherit; font-size:.92rem !important; font-weight:600 !important;
  background:#FFFFFF !important; color:var(--text) !important;
  border:1px solid var(--border-strong) !important; box-shadow:none !important;
  cursor:pointer;
}
html body .keuzeblad .kb-btn:hover{ background:#F4F4F1 !important; }
/* De eerste keuze is wat je meestal wil. */
html body .keuzeblad .kb-btn:first-of-type{
  background:var(--wine) !important; color:#FFFFFF !important; border-color:var(--wine) !important;
}
html body .keuzeblad .kb-btn:first-of-type:hover{ background:var(--wine-dark) !important; }
html body .keuzeblad .kb-annuleer{
  background:transparent !important; color:var(--muted) !important;
  border:0 !important; justify-content:center !important;
  min-height:44px !important; margin-bottom:0 !important;
}
html body .keuzeblad .kb-annuleer:hover{ background:transparent !important; color:var(--text) !important; }

/* De oude opmaak van het proeverij-blokje overschrijven: dat was een klein
   zwevend kaartje boven het menu, met eigen positie en achtergrond. */
html body #proeverijPopup{
  position:fixed !important; inset:0 !important;
  bottom:0 !important; left:0 !important; right:0 !important; top:0 !important;
  transform:none !important;
  background:none !important;
  border:0 !important; border-radius:0 !important;
  box-shadow:none !important; padding:0 !important;
  min-width:0 !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  display:none !important;
}
html body #proeverijPopup.open{ display:block !important; }

/* De nieuwe tussenstand: drinkbaar, maar nog niet op zijn best. */
.rek-merkje.s-open{ background:#7FA98C }
.vc-open{ background:rgba(127,169,140,.14); color:#4B7359; border:1px solid rgba(127,169,140,.34); }
.venster-open{ background:rgba(127,169,140,.10); border-color:rgba(127,169,140,.28); }

/* ============================================================
   20. Terugkoppeling: melden wat er misgaat
   ============================================================ */

html body #feedbackKnop{
  position:fixed; right:14px; z-index:1200;
  bottom:calc(var(--nav, 62px) + env(safe-area-inset-bottom) + 14px);
  width:38px !important; height:38px !important; min-height:38px !important;
  padding:0 !important; border-radius:999px !important;
  background:#FFFFFF !important; color:var(--muted) !important;
  border:1px solid var(--border-strong) !important;
  box-shadow:0 6px 16px -8px rgba(28,34,41,.4) !important;
  font-family:var(--mono); font-size:.95rem !important; font-weight:500 !important;
  display:grid !important; place-items:center; cursor:pointer;
}
html body #feedbackKnop:hover{ color:var(--wine) !important; border-color:var(--wine-soft) !important; }
@media(min-width:820px){
  html body #feedbackKnop{ bottom:18px; }
}

.fb-modal{ max-width:460px; }
.fb-uitleg{ color:var(--muted); font-size:.86rem; margin:-4px 0 14px; }
.fb-soorten{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
html body .fb-soort{
  width:auto !important; min-height:34px !important; padding:0 12px !important;
  border-radius:999px !important; cursor:pointer;
  font:inherit; font-size:.8rem !important; font-weight:500 !important;
  background:#FFFFFF !important; color:var(--muted) !important;
  border:1px solid var(--border) !important; box-shadow:none !important;
  justify-content:center !important;
}
html body .fb-soort.aan{
  background:var(--wine-light) !important; color:var(--wine) !important;
  border-color:rgba(46,92,78,.3) !important;
}
#feedbackTekst{ width:100%; resize:vertical; font-size:.92rem; line-height:1.5; }
.fb-knoppen{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:14px; }
.fb-status{ margin-top:10px; font-size:.82rem; color:var(--wine); min-height:1.2em; text-align:center; }

/* Voetnoot met de privacyverklaring */
.voetnoot{
  text-align:center; margin:26px 0 18px;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.06em;
}
.voetnoot a{ color:var(--muted); text-decoration:none; border-bottom:1px solid var(--border-strong); }
.voetnoot a:hover{ color:var(--wine); }

/* ============================================================
   21. De accountpagina
   ============================================================ */

html body .card, html body .section{
  background:#FFFFFF !important;
  border:1px solid var(--border) !important;
  border-radius:var(--radius-lg) !important;
  box-shadow:var(--shadow-soft) !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}

/* Kopjes boven een blok: klein kapitaal, zoals overal. */
html body .section-title, html body .settings-title{
  font-family:var(--serif) !important;
  font-weight:500 !important;
  letter-spacing:-.02em;
  color:var(--text) !important;
}
html body .eyebrow{
  font-family:var(--mono) !important; font-size:.68rem !important;
  letter-spacing:.16em !important; text-transform:uppercase;
  color:var(--muted) !important;
}

/* De cijfers bovenaan: in cijferletters, zoals het rek. */
html body .hero-stat b, html body .hero-stat strong,
html body .metric b, html body .metric strong, html body .metric-value{
  font-family:var(--mono) !important;
  font-variant-numeric:tabular-nums;
  font-weight:500 !important;
  color:var(--text) !important;
}
html body .hero-stat span:last-child, html body .metric span:last-child{
  font-family:var(--mono) !important; font-size:.66rem !important;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted) !important;
}

/* Tabbladen */
html body .tab{
  width:auto !important; min-height:38px !important;
  border-radius:999px !important; padding:0 14px !important;
  background:#FFFFFF !important; color:var(--muted) !important;
  border:1px solid var(--border) !important; box-shadow:none !important;
  font-size:.82rem !important; font-weight:600 !important;
  justify-content:center !important;
}
html body .tab.active{
  background:var(--wine) !important; color:#FFFFFF !important; border-color:var(--wine) !important;
}

/* Chips en kleine knopjes */
html body .chip{
  border-radius:999px !important;
  background:#F7F7F4 !important; color:var(--text) !important;
  border:1px solid var(--border) !important;
  font-family:var(--mono); font-size:.7rem !important;
}
html body .mini-btn{
  width:auto !important; min-height:32px !important; padding:0 11px !important;
  border-radius:var(--radius-sm) !important;
  background:#FFFFFF !important; color:var(--text) !important;
  border:1px solid var(--border-strong) !important; box-shadow:none !important;
  font-size:.78rem !important; justify-content:center !important;
}
html body .mini-btn:hover{ background:#F4F4F1 !important; }

/* Rijen in de instellingen */
html body .setting-item, html body .settings-row{
  background:#FFFFFF !important;
  border:1px solid var(--border) !important;
  border-radius:var(--radius-md) !important;
}
html body .setting-item:hover, html body .settings-row:hover{ background:#FAFAF8 !important; }
html body .setting-icon, html body .settings-row-icon{
  background:var(--wine-light) !important;
  border-radius:var(--radius-sm) !important;
}
html body .settings-row-title{ font-weight:600 !important; color:var(--text) !important; }
html body .settings-row-copy{ color:var(--muted) !important; font-size:.82rem !important; }

/* Inzichten en lege staten */
html body .insight{
  background:var(--wine-light) !important;
  border:1px solid rgba(46,92,78,.16) !important;
  border-radius:var(--radius-md) !important;
  color:#2A4A40 !important;
}
html body .empty{ color:var(--muted) !important; }

/* Vrienden */
html body .friends-panel{
  background:#FFFFFF !important;
  border:1px solid var(--border) !important;
  border-radius:var(--radius-lg) !important;
}
html body .av-btn{
  width:auto !important; min-height:34px !important; padding:0 12px !important;
  border-radius:var(--radius-sm) !important; justify-content:center !important;
  background:#FFFFFF !important; border:1px solid var(--border-strong) !important;
  box-shadow:none !important; font-size:.8rem !important;
}

/* Verwijderen is rode tekst op wit, geen rode knop. */
html body .danger, html body .btn.danger{
  background:#FFFFFF !important; color:#A5333F !important;
  border:1px solid rgba(165,51,63,.28) !important; box-shadow:none !important;
}

/* De historielijst: dezelfde vorm als de kelderkaarten. */
html body .list .wine{
  background:#FFFFFF !important;
  border:1px solid var(--border) !important;
  border-radius:var(--radius-md) !important;
  box-shadow:none !important;
}

/* Verwijzing naar de privacyverklaring bij het inloggen */
.auth-privacy{
  margin-top:12px; text-align:center;
  font-size:.76rem; line-height:1.5; color:var(--muted);
}
.auth-privacy a{ color:var(--wine); }

/* --- Zoekveld bovenaan de kelder en wishlist --- */
html body .zoekveld{
  /* Vult de ruimte rechts van de knoppen: dezelfde verhouding als in het
     ontwerp, maar gespiegeld. */
  flex:1 1 auto; width:auto; min-width:140px;
  display:flex; align-items:center; gap:8px;
  min-height:40px; padding:0 12px;
  background:#FFFFFF; border:1px solid var(--border-strong);
  border-radius:var(--radius-md);
  transition:border-color .16s, box-shadow .16s;
}
html body .zoekveld:focus-within{
  border-color:var(--wine-soft);
  box-shadow:0 0 0 3px var(--wine-light);
}
html body .zoekveld > span{ color:var(--muted); font-size:.95rem; }
html body .zoekveld input{
  flex:1; min-width:0; width:auto !important;
  min-height:0 !important; padding:0 !important;
  border:0 !important; background:none !important; outline:none;
  box-shadow:none !important;
  font:inherit; font-size:.9rem; color:var(--text);
}
html body .zoekveld input::-webkit-search-cancel-button{ display:none; }
html body .zoek-wis{
  width:22px !important; height:22px !important; min-height:22px !important;
  padding:0 !important; border-radius:999px !important;
  background:#F4F4F1 !important; color:var(--muted) !important;
  border:0 !important; box-shadow:none !important;
  font-size:.7rem !important; display:grid !important; place-items:center;
  cursor:pointer; flex:0 0 auto;
}
html body .zoek-wis:hover{ background:#EAEAE4 !important; color:var(--text) !important; }



/* --- Menupictogrammen als lijntekening --- */
html body .bottom-nav-btn .nav-icon{
  display:grid; place-items:center;
  width:22px; height:22px; font-size:0 !important;
  color:inherit;
}
html body .bottom-nav-btn .nav-icon svg{
  width:21px; height:21px; display:block;
  opacity:.9; transition:opacity .16s, transform .16s;
}
html body .bottom-nav-btn:hover .nav-icon svg{ opacity:1; }
html body .bottom-nav-btn.active .nav-icon svg,
html body .bottom-nav-btn[aria-current] .nav-icon svg{ opacity:1; }
html body .bottom-nav-btn:active .nav-icon svg{ transform:translateY(1px); }

/* Een telling in het keuzeblad, bijvoorbeeld openstaande uitnodigingen. */
html body .keuzeblad .kb-badge{
  margin-left:auto; min-width:22px; height:22px; border-radius:999px;
  display:inline-grid; place-items:center; padding:0 7px;
  background:var(--wine); color:#FFFFFF;
  font-family:var(--mono); font-size:.68rem;
}
html body .keuzeblad .kb-btn:first-of-type .kb-badge{ background:#FFFFFF; color:var(--wine); }

/* De schakelaar houdt zijn eigen maat; het zoekveld vult de rest. */
html body .weergave-wissel{ flex:0 0 auto; }

/* ============================================================
   22. De werkbalk: schakelaar en zoekveld altijd op één regel
   De legenda en de teller staan in dezelfde balk en duwden het
   zoekveld naar beneden. Die krijgen nu hun eigen regel.
   ============================================================ */

html body .kelder-werkbalk,
html body .wl-werkbalk{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:8px !important;
}

/* Regel één: knoppen links, zoekveld ernaast. */
html body .kelder-werkbalk > .weergave-wissel,
html body .wl-werkbalk > .weergave-wissel{ flex:0 0 auto !important; order:1; }

html body .kelder-werkbalk > .zoekveld,
html body .wl-werkbalk > .zoekveld{
  flex:1 1 0 !important; min-width:120px !important; width:auto !important; order:2;
}

/* Alles wat daarna komt, begint op een nieuwe regel. */
html body .kelder-werkbalk > .rek-legenda,
html body .wl-werkbalk > .wl-cijfers,
html body .wl-werkbalk > .rek-legenda{
  order:3; flex:1 0 100% !important; margin-left:0 !important;
}
html body .wl-werkbalk > .wl-cijfers{ text-align:right; }

/* Op een telefoon iets krapper, zodat beide er zeker naast passen. */
@media(max-width:430px){
  html body .weergave-wissel button{ padding:0 10px !important; font-size:.76rem !important; }
  html body .zoekveld{ padding:0 10px !important; }
  html body .zoekveld input{ font-size:.85rem !important; }
  html body .zoekveld input::placeholder{ font-size:.82rem; }
}

/* Op een telefoon en tablet is het zijmenu overbodig: alles staat onderin,
   en uitloggen zit achter je profielfoto. */
@media(max-width:1200px){
  html body #menuToggle{ display:none !important; }
}

/* --- Notificaties binnen het keuzeblad --- */
html body .keuzeblad .kb-notif{
  max-height:38vh; overflow-y:auto;
  margin:0 0 10px; padding:4px;
  background:#F7F7F4; border:1px solid var(--border); border-radius:var(--radius-md);
}
html body .keuzeblad .kb-notif:empty{ display:none; }
html body .keuzeblad .kb-notif-leeg{
  padding:14px 12px; text-align:center; color:var(--muted); font-size:.84rem;
}
html body .keuzeblad .kb-notif .notif-item,
html body .keuzeblad .kb-notif > div{
  border-radius:var(--radius-sm);
}
/* De telling naast "Wijnverhalen" alleen tonen als er iets staat. */
html body .keuzeblad .kb-badge:empty{ display:none; }

/* De profielfoto moet zijn eigen rondje zijn, anders rekt de foto zich uit
   over de hele kop — dat was het verschil tussen de twee pagina's. */
html body .account-avatar{
  position:relative !important;
  width:42px !important; height:42px !important;
  min-width:42px !important; min-height:42px !important;
  padding:0 !important; border-radius:999px !important;
  overflow:hidden;
  flex:0 0 auto;
}

/* De eigen opmaak van het notificatiemenu overschrijven. Een selector met een
   id (#notifPopup{display:none}) wint van een klasse, dus hier expliciet. */
html body #notifPopup{
  position:fixed !important; inset:0 !important;
  top:0 !important; right:0 !important; bottom:0 !important; left:0 !important;
  z-index:99998 !important;
  background:none !important;
  border:0 !important; border-radius:0 !important;
  box-shadow:none !important; padding:0 !important;
  min-width:0 !important; max-width:none !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  animation:none !important;
  display:none !important;
}
html body #notifPopup.open{ display:block !important; }

/* ============================================================
   23. Het sommelieradvies — op elke pagina hetzelfde
   Deze opmaak stond alleen in index.html; hier gedeeld, zodat het
   advies op de wishlist er precies zo uitziet.
   ============================================================ */

html body .advies-blok{
  background:#F7F7F4 !important;
  border:1px solid var(--border) !important;
  border-radius:var(--radius-md) !important;
  padding:12px 14px !important;
  margin:12px 0 !important;
  font-size:.88rem !important;
  line-height:1.6 !important;
  color:var(--text) !important;
}
html body .advies-blok.leeg{
  background:#FAFAF8 !important;
  color:var(--muted) !important;
  font-style:italic;
  border-style:dashed !important;
}
html body .advies-kop{
  font-family:var(--sans) !important;
  font-weight:650 !important;
  font-size:.9rem !important;
  color:var(--text) !important;
  margin-bottom:5px !important;
}

/* Het drinkvenster, met de kleur van de stand. */
html body .venster{
  border-radius:var(--radius-md) !important;
  padding:12px 14px !important;
  margin:14px 0 !important;
  border:1px solid var(--border-strong) !important;
}
html body .venster-kop{
  font-weight:650 !important; color:var(--text) !important;
  display:flex; align-items:baseline; gap:8px;
}
html body .venster-kop span{ font-family:var(--mono); font-size:.82rem; font-variant-numeric:tabular-nums; }
html body .venster-status{
  font-family:var(--mono) !important; font-size:.72rem !important;
  letter-spacing:.04em; color:var(--muted) !important; margin-top:4px !important;
}
html body .venster-uitleg{ font-size:.85rem !important; color:var(--text) !important; margin-top:8px !important; line-height:1.55 !important; }
html body .venster-onbekend{ font-size:.86rem !important; color:var(--muted) !important; }

html body .venster-jong { background:rgba(110,143,181,.10) !important; border-color:rgba(110,143,181,.28) !important; }
html body .venster-open { background:rgba(127,169,140,.10) !important; border-color:rgba(127,169,140,.30) !important; }
html body .venster-goed { background:rgba(46,92,78,.09)   !important; border-color:rgba(46,92,78,.26)   !important; }
html body .venster-bijna{ background:rgba(201,138,91,.12) !important; border-color:rgba(201,138,91,.30) !important; }
html body .venster-laat { background:rgba(165,51,63,.09)  !important; border-color:rgba(165,51,63,.26)  !important; }

/* Wat het advies speciaal voor jou zegt. */
html body .advies-persoonlijk{
  background:var(--wine-light) !important;
  border:1px solid rgba(46,92,78,.18) !important;
  border-radius:var(--radius-md) !important;
  padding:10px 13px !important; margin-bottom:12px !important;
  color:#2A4A40 !important; font-size:.88rem !important;
}

/* De voet met "zojuist opgehaald" en de knop Opnieuw. */
html body .advies-voet{
  margin-top:14px !important; padding-top:11px !important;
  border-top:1px solid var(--border) !important;
  display:flex; align-items:center; gap:10px;
  font-family:var(--mono) !important; font-size:.72rem !important;
  color:var(--muted) !important;
}
html body .advies-ververs{
  margin-left:auto; width:auto !important;
  min-height:32px !important; padding:0 12px !important;
  border-radius:var(--radius-sm) !important;
  font:inherit; font-size:.76rem !important; font-weight:600 !important;
  background:#FFFFFF !important; color:var(--text) !important;
  border:1px solid var(--border-strong) !important; box-shadow:none !important;
  justify-content:center !important;
}
html body .advies-ververs:hover{ background:#F4F4F1 !important; }

/* De lijst met gerechten netjes uitgelijnd. */
html body #adviceText ul, html body #wishlistAdviceText ul{
  margin:6px 0 0 18px; line-height:1.6;
}
html body #adviceText p, html body #wishlistAdviceText p{ margin:8px 0; line-height:1.6; }
html body #adviceText, html body #wishlistAdviceText{ text-align:left; font-size:.92rem; }

/* --- Foodpairing: dezelfde blokken als het sommelieradvies --- */
html body .fp-blok{ margin:10px 0 !important; }
html body .fp-klikbaar{ cursor:pointer; transition:background .15s, border-color .15s; }
html body .fp-klikbaar:hover{
  background:#FFFFFF !important;
  border-color:var(--border-strong) !important;
}
html body .fp-blok .advies-kop{ display:flex; align-items:center; gap:8px; }
html body .fp-nr{
  width:20px; height:20px; border-radius:999px; flex:0 0 auto;
  display:grid; place-items:center;
  background:var(--wine); color:#FFFFFF;
  font-family:var(--mono); font-size:.66rem; font-weight:500;
}
html body .fp-onder{
  font-family:var(--mono); font-size:.7rem; color:var(--muted); margin:2px 0 6px;
}
html body .fp-waarom{ font-size:.88rem; line-height:1.6; }
html body .fp-tip{
  margin-top:7px; padding-top:7px; border-top:1px solid var(--border);
  font-size:.82rem; color:var(--muted);
}

/* Verbergen moet blijven werken: een regel met !important wint van een
   inline display:none, waardoor de kaarten onder het rek bleven staan. */
html body #wishlistGrid[style*="display:none"],
html body #wishlistGrid[style*="display: none"],
html body #wishlistRek[style*="display:none"],
html body #wishlistRek[style*="display: none"],
html body #rekWeergave[style*="display:none"],
html body #rekWeergave[style*="display: none"],
html body #wineList[style*="display:none"],
html body #wineList[style*="display: none"]{
  display:none !important;
}

/* ============================================================
   24. Twee kaarten naast elkaar op een telefoon
   De kaarten eisten minimaal 220px, waardoor er op een telefoon
   maar één per rij paste.
   ============================================================ */

@media(max-width:560px){
  html body #wineList,
  html body #wishlistGrid{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    gap:10px !important;
  }

  /* De kaart is nu ~170px breed; alles een maatje kleiner. */
  html body #wineList .wine-body,
  html body #wishlistGrid .wine-body{ padding:10px 11px 0 !important; }
  html body #wineList .wine-body h3,
  html body #wishlistGrid .wine-body h3{ font-size:.94rem !important; line-height:1.2 !important; }
  html body .wine-dom{ font-size:.74rem !important; }
  html body .fact-line{ font-size:.72rem !important; line-height:1.4 !important; }
  html body .wine-score{ font-size:.68rem !important; }

  html body .stock{ margin:9px 11px !important; padding-top:9px !important; }
  html body .stock b{ font-size:1.05rem !important; }
  html body .stock em{ font-size:.6rem !important; }
  html body .stock-btn{ width:30px !important; min-height:30px !important; }

  html body .controls{ margin:0 11px 11px !important; }
  html body .controls button{
    min-height:34px !important; font-size:.72rem !important;
    padding:0 6px !important;
  }

  /* Het soortlabel op de foto wordt anders te log. */
  html body .wine-type-badge{
    left:7px !important; bottom:7px !important;
    padding:3px 7px !important; font-size:.62rem !important;
  }
  html body .primeur-badge{ font-size:.56rem !important; padding:3px 7px !important; }
}

/* Op een heel kleine telefoon toch weer één per rij: bij minder dan
   150px per kaart wordt de naam onleesbaar. */
@media(max-width:330px){
  html body #wineList,
  html body #wishlistGrid{ grid-template-columns:1fr !important; }
}

/* --- De paginakop past op één regel --- */
html body .content-header{
  padding:16px 18px !important;
  border-radius:var(--radius-xl) !important;
  margin-bottom:16px !important;
  gap:12px;
}
/* Geen nowrap met overflow:hidden — in een flexrij kan de kop dan tot niets
   krimpen en verdwijnt hij. Alleen de lettergrootte begrenzen is genoeg. */
html body .header-title h2{
  font-size:clamp(1.3rem, 5.2vw, 1.9rem) !important;
  line-height:1.12 !important;
  overflow:visible !important;
  white-space:normal !important;
}
html body .header-title{ flex:1 1 auto; min-width:0; }
html body .header-actions{ flex:0 0 auto; }

@media(max-width:430px){
  html body .content-header{ padding:13px 15px !important; }
  html body .header-title h2{ font-size:1.32rem !important; }
}

/* ============================================================
   25. Drink met — een vriend uitnodigen voor een fles
   ============================================================ */

html body #drinkMetBlad .kb-card{ max-width:460px; }

html body .dm-wijn{
  font-family:var(--serif); font-size:1.06rem; font-weight:500;
  letter-spacing:-.015em; color:var(--text);
  padding:10px 13px; margin-bottom:12px;
  background:#F7F7F4; border:1px solid var(--border); border-radius:var(--radius-md);
}

html body .dm-vrienden{
  max-height:34vh; overflow-y:auto;
  margin-bottom:12px; padding:4px;
  background:#F7F7F4; border:1px solid var(--border); border-radius:var(--radius-md);
}
html body .dm-laden, html body .dm-leeg{
  padding:14px 12px; text-align:center; color:var(--muted); font-size:.84rem;
}
html body .dm-leeg a{
  display:inline !important; padding:0 !important; margin-left:4px;
  background:none !important; border:0 !important; box-shadow:none !important;
  color:var(--wine) !important; font-size:.84rem !important;
}

html body .dm-vriend{
  display:flex !important; align-items:center; gap:10px;
  width:100% !important; min-height:46px !important;
  padding:0 11px !important; margin-bottom:3px;
  border-radius:var(--radius-sm) !important;
  background:transparent !important; border:1px solid transparent !important;
  box-shadow:none !important; cursor:pointer;
  color:var(--text) !important; font-size:.9rem !important; font-weight:600 !important;
  justify-content:flex-start !important; text-align:left;
}
html body .dm-vriend:hover{ background:#FFFFFF !important; }
html body .dm-vriend.gekozen{
  background:#FFFFFF !important;
  border-color:var(--wine-soft) !important;
  box-shadow:0 0 0 2px var(--wine-light) !important;
}
html body .dm-initiaal{
  width:30px; height:30px; border-radius:999px; flex:0 0 auto;
  display:grid; place-items:center;
  background:var(--wine-light); color:var(--wine);
  font-family:var(--mono); font-size:.78rem;
}
html body .dm-naam{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html body .dm-vink{ color:var(--wine); opacity:0; flex:0 0 auto; font-size:.9rem; }
html body .dm-vriend.gekozen .dm-vink{ opacity:1; }

html body #dmWanneer, html body #dmBericht{
  width:100% !important; margin-bottom:8px; font-size:.9rem;
}
html body #dmBericht{ resize:vertical; min-height:52px; }

/* De hoofdactie in een keuzeblad. */
html body .keuzeblad .kb-btn.kb-hoofd{
  background:var(--wine) !important; color:#FFFFFF !important;
  border-color:var(--wine) !important;
}
html body .keuzeblad .kb-btn.kb-hoofd:hover{ background:var(--wine-dark) !important; }
html body .keuzeblad .kb-btn.kb-hoofd[disabled]{ opacity:.6; }

html body .dm-status{
  margin-top:8px; text-align:center; font-size:.82rem;
  color:var(--wine); min-height:1.2em;
}

/* --- Label op de kaart: met wie je deze fles gaat drinken --- */
html body .drink-label{
  position:absolute; left:8px; top:8px; z-index:3;
  display:inline-flex; align-items:baseline; gap:5px;
  max-width:calc(100% - 16px);
  padding:4px 9px; border-radius:999px;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(28,34,41,.12);
  box-shadow:0 1px 4px rgba(28,34,41,.14);
  font-size:.66rem; line-height:1.2;
  pointer-events:none;                    /* de kaart eronder blijft klikbaar */
}
html body .drink-label .dl-kop{
  font-family:var(--mono); font-size:.58rem; letter-spacing:.06em;
  text-transform:lowercase; color:var(--muted); flex:0 0 auto;
}
html body .drink-label .dl-naam{
  font-weight:650; color:var(--text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* Aangenomen: het groene accent erbij. */
html body .drink-label.is-ja{
  background:rgba(46,92,78,.94);
  border-color:rgba(46,92,78,.5);
}
html body .drink-label.is-ja .dl-kop{ color:rgba(255,255,255,.75); }
html body .drink-label.is-ja .dl-naam{ color:#FFFFFF; }

@media(max-width:560px){
  html body .drink-label{ left:6px; top:6px; padding:3px 7px; font-size:.6rem; }
  html body .drink-label .dl-kop{ display:none; }   /* te smal: alleen de naam */
}

/* --- Het kaartje aan de hals in het detailvenster --- */
html body .hangkaartje{
  position:absolute; left:14px; top:0; z-index:4;
  display:flex; flex-direction:column; align-items:center;
  max-width:60%;
  pointer-events:none;
}
/* Het touwtje waar het kaartje aan hangt. */
html body .hangkaartje .hk-touw{
  width:1px; height:18px;
  background:linear-gradient(180deg, rgba(28,34,41,.05), rgba(28,34,41,.42));
}
html body .hangkaartje .hk-kaart{
  position:relative;
  display:flex; flex-direction:column; gap:1px;
  padding:7px 12px 7px 15px;
  background:#F6F2E8;
  border:1px solid rgba(28,34,41,.16);
  border-radius:3px 8px 8px 3px;      /* links recht, rechts rond: als een kaartje */
  box-shadow:0 4px 10px -4px rgba(28,34,41,.45);
  transform:rotate(-1.4deg);
  max-width:100%;
}
/* Het gaatje waar het touwtje doorheen gaat. */
html body .hangkaartje .hk-kaart::before{
  content:""; position:absolute; left:5px; top:50%; transform:translateY(-50%);
  width:5px; height:5px; border-radius:999px;
  background:#E8E2D2; box-shadow:inset 0 0 0 1px rgba(28,34,41,.3);
}
html body .hangkaartje .hk-kop{
  font-family:var(--mono); font-size:.56rem; letter-spacing:.1em;
  text-transform:uppercase; color:#8A7F63; line-height:1.2;
}
html body .hangkaartje .hk-naam{
  font-family:var(--serif); font-size:.86rem; font-weight:500;
  color:#3A3323; line-height:1.2;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* Aangenomen: een kaartje met een groen randje. */
html body .hangkaartje.is-ja .hk-kaart{
  background:#EFF4F0; border-color:rgba(46,92,78,.35);
}
html body .hangkaartje.is-ja .hk-kaart::before{ background:#DCE7E0; box-shadow:inset 0 0 0 1px rgba(46,92,78,.4); }
html body .hangkaartje.is-ja .hk-kop{ color:#5C8A79; }
html body .hangkaartje.is-ja .hk-naam{ color:#24493E; }

@media(max-width:560px){
  html body .hangkaartje{ left:10px; max-width:68%; }
  html body .hangkaartje .hk-touw{ height:13px; }
  html body .hangkaartje .hk-kaart{ padding:5px 10px 5px 13px; }
  html body .hangkaartje .hk-naam{ font-size:.8rem; }
}

/* Pictogrammen in de keuzebladen: lijntekening in plaats van emoji. */
html body .keuzeblad .kb-icoon{
  width:20px; height:20px; flex:0 0 auto; opacity:.85;
}
html body .keuzeblad .kb-btn:first-of-type .kb-icoon{ opacity:1; }

/* --- Account verwijderen --- */
html body .gevaar-rij{ border-color:rgba(165,51,63,.22) !important; }
html body .gevaar-rij .settings-row-icon{ background:rgba(165,51,63,.09) !important; }
html body .av-uitleg{
  color:var(--muted); font-size:.86rem; line-height:1.6; margin:0 0 10px; text-align:left;
}
html body .av-uitleg strong{ color:var(--text); }
html body #verwijderBevestiging{
  width:100% !important; margin-bottom:10px;
  font-family:var(--mono); letter-spacing:.1em; text-transform:uppercase;
}
html body .av-knop{
  background:#A5333F !important; color:#FFFFFF !important;
  border-color:#A5333F !important; justify-content:center !important;
}
html body .av-knop:hover{ background:#8E2B36 !important; }
html body .av-knop[disabled]{ opacity:.6; }
html body .av-status{
  margin-top:8px; text-align:center; font-size:.82rem; color:#A5333F; min-height:1.2em;
}

/* --- Uitnodiging om samen te drinken, bovenaan je kelder --- */
html body #uitnodigingen:empty{ display:none; }
html body .uitn-kaart{
  background:#FFFFFF; border:1px solid rgba(46,92,78,.28);
  border-left:3px solid var(--wine);
  border-radius:var(--radius-lg);
  padding:14px 16px; margin-bottom:12px;
  box-shadow:var(--shadow-soft);
}
html body .uitn-kop{
  display:flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--wine);
}
html body .uitn-merk{
  width:7px; height:7px; border-radius:999px; background:var(--wine); flex:0 0 auto;
}
html body .uitn-wijn{
  font-family:var(--serif); font-size:1.16rem; font-weight:500;
  letter-spacing:-.02em; color:var(--text); margin-top:5px;
}
html body .uitn-wanneer{ font-family:var(--mono); font-size:.74rem; color:var(--muted); margin-top:3px; }
html body .uitn-bericht{ font-size:.86rem; color:var(--muted); font-style:italic; margin-top:7px; line-height:1.5; }
html body .uitn-knoppen{ display:flex; gap:8px; margin-top:12px; }
html body .uitn-knoppen button{
  flex:1; min-height:40px !important; font-size:.85rem !important;
  border-radius:var(--radius-md) !important; justify-content:center !important;
}

/* Kort berichtje op de accountpagina */
html body .account-melding{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(var(--nav, 62px) + env(safe-area-inset-bottom) + 16px);
  z-index:9000; max-width:min(340px, calc(100vw - 32px));
  padding:11px 16px; border-radius:999px;
  background:var(--wine); color:#FFFFFF;
  font-size:.86rem; font-weight:600; text-align:center;
  box-shadow:0 10px 24px -12px rgba(28,34,41,.5);
}
html body .account-melding.is-fout{ background:#A5333F; }

/* Een aangenomen afspraak: rustiger, want er hoeft niets meer beslist te worden. */
html body .uitn-kaart.is-afgesproken{
  background:var(--wine-light);
  border-color:rgba(46,92,78,.22);
}
html body .uitn-wacht{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:11px; padding-top:10px; border-top:1px solid rgba(46,92,78,.18);
  font-size:.8rem; color:var(--muted);
}
html body .uitn-terug{
  margin-left:auto; width:auto !important;
  min-height:30px !important; padding:0 11px !important;
  border-radius:var(--radius-sm) !important; justify-content:center !important;
  background:#FFFFFF !important; color:var(--muted) !important;
  border:1px solid var(--border-strong) !important; box-shadow:none !important;
  font-size:.76rem !important;
}
html body .uitn-terug:hover{ color:#A5333F !important; border-color:rgba(165,51,63,.3) !important; }