:root{
  --ice:#e7eef1; --frost:#fff; --deep:#12262e; --steel:#6c8792;
  --hairline:#c9d8dd; --sodium:#f2691e;
  --fresh:#1f9e7a; --aging:#c98a2b; --stale:#94a4ac;
  --shadow:0 1px 0 rgba(18,38,46,.06), 0 6px 18px -12px rgba(18,38,46,.4);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:'Archivo',system-ui,sans-serif;background:var(--ice);color:var(--deep);
     display:flex;flex-direction:column;-webkit-font-smoothing:antialiased}
:focus-visible{outline:2px solid var(--sodium);outline-offset:2px}

.masthead{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
          padding:14px 20px 12px;background:var(--deep);color:var(--frost)}
.wordmark{font-weight:800;font-size:20px;letter-spacing:-.02em;line-height:1;text-transform:uppercase}
.wordmark span{color:var(--sodium)}
.tagline{font-family:'DM Mono',monospace;font-size:11.5px;color:#9db3bb}
.disclaimer{margin-left:auto;font-family:'DM Mono',monospace;font-size:10.5px;color:#7d949c;
            max-width:280px;line-height:1.4;text-align:right}

.toolbar{background:var(--frost);border-bottom:1px solid var(--hairline);padding:10px 20px;
         display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.search{flex:1 1 220px;min-width:180px;position:relative}
.search input{width:100%;font-family:'DM Mono',monospace;font-size:13px;
              padding:9px 12px 9px 32px;border:1px solid var(--hairline);border-radius:3px;
              background:var(--ice);color:var(--deep)}
.search::before{content:"⌕";position:absolute;left:11px;top:7px;font-size:16px;color:var(--steel)}
.chips{display:flex;gap:6px;overflow-x:auto;flex:2 1 340px;padding-bottom:2px;scrollbar-width:thin}
.chip{flex:0 0 auto;font-size:12px;font-weight:600;padding:7px 11px;border:1px solid var(--hairline);
      background:var(--frost);border-radius:100px;cursor:pointer;color:var(--deep);white-space:nowrap}
.chip[aria-pressed="true"]{background:var(--deep);color:var(--frost);border-color:var(--deep)}
.chip em{font-style:normal;font-family:'DM Mono',monospace;font-size:10.5px;color:var(--steel);
         margin-left:5px}
.chip[aria-pressed="true"] em{color:#9db3bb}
.btn-add{flex:0 0 auto;font-weight:700;font-size:13px;background:var(--sodium);color:#fff;
         border:0;border-radius:3px;padding:10px 14px;cursor:pointer;font-family:'Archivo'}
.btn-add:hover{filter:brightness(1.06)}

.split{flex:1;display:grid;grid-template-columns:380px 1fr;min-height:0}
.feed{overflow-y:auto;padding:14px;border-right:1px solid var(--hairline);background:var(--ice)}
.feed-head{font-family:'DM Mono',monospace;font-size:11px;text-transform:uppercase;
           letter-spacing:.09em;color:var(--steel);margin:2px 4px 10px;
           display:flex;justify-content:space-between}
#map{height:100%;width:100%;background:var(--ice)}
/* Google's eigen infovenster nooit nodig — we hebben de lijst */
.gm-style-iw,.gm-style-iw-tc{display:none!important}

.tag{background:var(--frost);border:1px solid var(--hairline);border-left:5px solid var(--stale);
     border-radius:3px;padding:11px 12px 9px;margin-bottom:9px;cursor:pointer;
     box-shadow:var(--shadow);transition:transform .12s ease,border-color .12s ease}
.tag:hover,.tag.is-active{transform:translateX(2px);border-color:var(--deep)}
.tag.f-fresh{border-left-color:var(--fresh)}
.tag.f-aging{border-left-color:var(--aging)}
.tag.f-stale{border-left-color:var(--stale)}
.tag-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.variant{font-weight:800;font-size:15px;line-height:1.15;letter-spacing:-.015em;text-transform:uppercase}
.price{font-family:'DM Mono',monospace;font-size:13px;white-space:nowrap}
.store{font-size:13.5px;font-weight:600;margin-top:5px}
.addr{font-family:'DM Mono',monospace;font-size:11.5px;color:var(--steel);margin-top:2px}
.meter{display:flex;align-items:center;gap:8px;margin-top:9px}
.bar{flex:1;height:4px;background:var(--ice);border-radius:2px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--stale)}
.f-fresh .bar i{background:var(--fresh)}
.f-aging .bar i{background:var(--aging)}
.ago{font-family:'DM Mono',monospace;font-size:11px;color:var(--steel);white-space:nowrap}
.actions{display:flex;gap:6px;margin-top:9px}
.mini{font-family:'DM Mono',monospace;font-size:11px;padding:5px 9px;cursor:pointer;
      border:1px solid var(--hairline);background:var(--frost);border-radius:3px;color:var(--deep)}
.mini:hover{border-color:var(--deep)}
.mini.gone:hover{border-color:var(--sodium);color:var(--sodium)}
.empty{font-family:'DM Mono',monospace;font-size:12.5px;color:var(--steel);line-height:1.6;padding:18px 6px}

.pin{font-family:'DM Mono',monospace;font-size:10px;background:var(--frost);
     border:1.5px solid var(--stale);color:var(--deep);padding:3px 6px;border-radius:3px;
     white-space:nowrap;box-shadow:0 2px 6px -2px rgba(18,38,46,.5);
     transform:translateY(-50%);cursor:pointer;user-select:none}
.pin.f-fresh{border-color:var(--fresh)}
.pin.f-aging{border-color:var(--aging)}
.pin.is-active{background:var(--deep);color:var(--frost);border-color:var(--deep)}

.sheet{position:fixed;inset:0;background:rgba(18,38,46,.45);display:none;
       align-items:center;justify-content:center;padding:20px;z-index:2000}
.sheet.open{display:flex}
.card{background:var(--frost);border-radius:4px;width:100%;max-width:430px;padding:20px;
      max-height:90vh;overflow-y:auto;box-shadow:0 24px 60px -20px rgba(18,38,46,.6)}
.card h2{margin:0 0 4px;font-size:18px;font-weight:800;letter-spacing:-.02em}
.card p.hint{font-family:'DM Mono',monospace;font-size:11.5px;color:var(--steel);
             margin:0 0 16px;line-height:1.5}
label{display:block;font-size:11px;font-family:'DM Mono',monospace;text-transform:uppercase;
      letter-spacing:.07em;color:var(--steel);margin:11px 0 4px}
input[type=text],select{width:100%;font-family:'Archivo';font-size:14px;padding:9px 10px;
      border:1px solid var(--hairline);border-radius:3px;background:var(--frost);color:var(--deep)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pinstate{font-family:'DM Mono',monospace;font-size:11.5px;padding:8px 10px;border-radius:3px;
          background:var(--ice);color:var(--steel);margin-top:12px}
.pinstate.set{background:#e4f4ee;color:#146b53}
.nearby{margin-top:10px;border:1px solid var(--hairline);border-radius:3px;overflow:hidden}
.nearby button{display:block;width:100%;text-align:left;padding:8px 10px;background:var(--frost);
               border:0;border-bottom:1px solid #eef3f5;cursor:pointer;font-size:13px;
               font-family:'Archivo';color:var(--deep)}
.nearby button:last-child{border-bottom:0}
.nearby button:hover{background:var(--ice)}
.nearby button.on{background:var(--deep);color:var(--frost)}
.nearby small{font-family:'DM Mono',monospace;color:var(--steel);display:block;font-size:11px}
.nearby button.on small{color:#9db3bb}
.hp{position:absolute;left:-9999px}
.card-actions{display:flex;gap:8px;margin-top:18px}
.btn-primary{flex:1;background:var(--deep);color:var(--frost);border:0;border-radius:3px;
             padding:11px;font-weight:700;font-size:13.5px;cursor:pointer;font-family:'Archivo'}
.btn-ghost{background:none;border:1px solid var(--hairline);border-radius:3px;padding:11px 14px;
           font-size:13.5px;cursor:pointer;color:var(--steel);font-family:'Archivo'}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);
       background:var(--deep);color:var(--frost);font-family:'DM Mono',monospace;font-size:12px;
       padding:10px 16px;border-radius:3px;opacity:0;pointer-events:none;transition:.25s;z-index:3000}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media (max-width:820px){
  .split{grid-template-columns:1fr;grid-template-rows:46vh 1fr}
  .feed{border-right:0;border-top:1px solid var(--hairline);order:2}
  .mapwrap{order:1}
  .disclaimer{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ===============================================================
   Locatie: knoppen, speld, nauwkeurigheid
   =============================================================== */

.btn-locate{
  flex:0 0 auto;font-family:'Archivo';font-weight:700;font-size:13px;
  background:var(--deep);color:var(--frost);border:0;border-radius:3px;
  padding:10px 14px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
}
.btn-locate::before{content:"◉";font-size:13px;color:var(--sodium)}
.btn-locate:hover{filter:brightness(1.15)}
.btn-locate:disabled{opacity:.6;cursor:progress}
.btn-locate.busy::before{animation:ping 1s ease-in-out infinite}
@keyframes ping{0%,100%{opacity:1}50%{opacity:.25}}

/* Zwevende knop op de kaart — op gsm de belangrijkste actie van de site */
.fab{
  position:absolute;right:14px;bottom:22px;z-index:600;
  font-family:'Archivo';font-weight:800;font-size:14px;
  background:var(--sodium);color:#fff;border:0;border-radius:100px;
  padding:14px 20px;cursor:pointer;display:none;align-items:center;gap:8px;
  box-shadow:0 6px 20px -6px rgba(18,38,46,.65);
}
.fab::before{content:"◉";font-size:14px}
.fab.busy::before{animation:ping 1s ease-in-out infinite}
.mapwrap{position:relative}

.pin-draft{border-color:var(--sodium)!important;color:var(--sodium);font-weight:500}

.pinstate.warn{background:#fdeee5;color:#a8480f}

/* Winkelsuggesties */
.nearby{margin-top:10px;border:1px solid var(--hairline);border-radius:3px;overflow:hidden}
.nearby:empty{border:0;margin-top:0}
.nearby-head,.nearby-busy{
  font-family:'DM Mono',monospace;font-size:11px;text-transform:uppercase;
  letter-spacing:.07em;color:var(--steel);padding:8px 10px;background:var(--ice);
}
.nearby button.other{font-family:'DM Mono',monospace;font-size:12px;color:var(--steel)}
.nearby button.on::after{content:"✓";float:right;font-weight:700}

@media (max-width:820px){
  .fab{display:inline-flex}
  .toolbar .btn-locate{display:none}

  /* Bottom sheet: op een gsm hoort een formulier onderaan, binnen duimbereik */
  .sheet{align-items:flex-end;padding:0}
  .sheet .card{
    max-width:none;border-radius:14px 14px 0 0;max-height:88vh;
    padding:18px 18px calc(18px + env(safe-area-inset-bottom));
  }
  .card::before{
    content:"";display:block;width:36px;height:4px;border-radius:2px;
    background:var(--hairline);margin:-6px auto 14px;
  }
  .card-actions{position:sticky;bottom:0;background:var(--frost);
                padding-top:12px;margin-top:14px}
  .btn-primary{padding:14px;font-size:15px}
  /* 16px voorkomt dat iOS bij focus inzoomt op het formulier */
  input[type=text],select{font-size:16px}
  body.sheet-open{overflow:hidden}
}

.locate-row{display:flex;gap:8px;margin:14px 0 0}
.locate-row .btn-locate{flex:1;justify-content:center}
.locate-row .btn-ghost{flex:0 0 auto}
#newStoreFields[hidden]{display:none}

/* ===============================================================
   Smaakveld met suggesties
   =============================================================== */
.fx{position:relative}
.fx input{width:100%;font-family:'Archivo';font-size:14px;padding:9px 10px;
          border:1px solid var(--hairline);border-radius:3px;background:var(--frost)}
.fx-list{display:none;position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:50;
         background:var(--frost);border:1px solid var(--deep);border-radius:3px;
         overflow:hidden;box-shadow:0 12px 28px -14px rgba(18,38,46,.6)}
.fx-list.open{display:block}
.fx-item{display:block;width:100%;text-align:left;padding:9px 10px;background:var(--frost);
         border:0;border-bottom:1px solid #eef3f5;cursor:pointer;font-size:14px;
         font-family:'Archivo';color:var(--deep)}
.fx-item:last-of-type{border-bottom:0}
.fx-item:hover,.fx-item.on{background:var(--deep);color:var(--frost)}
.fx-item small{display:block;font-family:'DM Mono',monospace;font-size:11px;color:var(--steel)}
.fx-item:hover small,.fx-item.on small{color:#9db3bb}
.fx-new{padding:9px 10px;background:var(--ice);font-family:'DM Mono',monospace;
        font-size:11.5px;color:var(--steel);line-height:1.45;border-top:1px solid var(--hairline)}
.fx-new strong{color:var(--sodium);font-weight:500}
.fieldnote{font-family:'DM Mono',monospace;font-size:11px;color:var(--steel);
           margin:6px 0 0;line-height:1.45}
.chip.pending{border-style:dashed}
.chip.pending[aria-pressed="true"]{border-style:solid}

/* Groepskoppen in de filterbalk — reeksen scheiden zonder extra rij */
.chip-group{
  flex:0 0 auto;align-self:center;font-family:'DM Mono',monospace;font-size:10px;
  text-transform:uppercase;letter-spacing:.1em;color:var(--steel);
  padding:0 4px 0 10px;border-left:1px solid var(--hairline);margin-left:4px;
}
.chips > .chip-group:first-child{border-left:0;margin-left:0;padding-left:0}
.chip-clear{border-color:var(--sodium);color:var(--sodium);font-weight:700}
.chip-clear:hover{background:var(--sodium);color:#fff}

/* Waarschuwing wanneer het ingetypte adres niet bij de speld past */
.mismatch{
  margin-top:10px;padding:10px 11px;border-radius:3px;
  background:#fdeee5;border:1px solid #f2c3a4;color:#8a3d0c;
  font-size:12.5px;line-height:1.5;
}
.mismatch[hidden]{display:none}
.mismatch strong{display:block;font-size:13px;margin-bottom:2px}
.mismatch-actions{display:flex;gap:6px;margin-top:9px}
.mismatch-actions .mini{background:#fff;border-color:#e2b092}
.mismatch-actions .mini:hover{border-color:#8a3d0c}


/* ===============================================================
   Winkelveld met Places-suggesties
   =============================================================== */
.sx{position:relative}
.sx input{width:100%;font-family:'Archivo';font-size:14px;padding:9px 10px;
          border:1px solid var(--hairline);border-radius:3px;background:var(--frost)}
.sx-list{display:none;position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:60;
         background:var(--frost);border:1px solid var(--deep);border-radius:3px;
         overflow:hidden;box-shadow:0 12px 28px -14px rgba(18,38,46,.6)}
.sx-list.open{display:block}
.sx-item{display:block;width:100%;text-align:left;padding:9px 10px;background:var(--frost);
         border:0;border-bottom:1px solid #eef3f5;cursor:pointer;font-size:14px;
         font-family:'Archivo';color:var(--deep)}
.sx-item:last-of-type{border-bottom:0}
.sx-item:hover,.sx-item.on{background:var(--deep);color:var(--frost)}
.sx-item small{display:block;font-family:'DM Mono',monospace;font-size:11px;color:var(--steel)}
.sx-item:hover small,.sx-item.on small{color:#9db3bb}
.sx-new{padding:9px 10px;background:var(--ice);font-family:'DM Mono',monospace;
        font-size:11.5px;color:var(--steel);line-height:1.45;border-top:1px solid var(--hairline)}
.sx-new strong{color:var(--sodium);font-weight:500}

/* Wisknop in het zoekveld */
.search input{padding-right:30px}
.search input::-webkit-search-cancel-button{display:none}
.q-clear{
  position:absolute;right:6px;top:6px;width:22px;height:22px;line-height:1;
  border:0;background:none;color:var(--steel);font-size:18px;cursor:pointer;border-radius:3px;
}
.q-clear:hover{color:var(--deep);background:var(--hairline)}
.empty .mini{margin-top:10px}

/* ===============================================================
   Uitlegpagina en introvenster
   =============================================================== */

.masthead a.wordmark{color:var(--frost);text-decoration:none}
.masthead a.wordmark span{color:var(--sodium)}
.back-link{margin-left:auto;color:#9db3bb;text-decoration:none;
           font-family:'DM Mono',monospace;font-size:11.5px}
.back-link:hover{color:var(--frost)}

.page-body{background:var(--ice);display:block}
.page{
  max-width:660px;margin:0 auto;padding:34px 22px 70px;
  font-size:15.5px;line-height:1.65;
}
.page h1{font-size:30px;font-weight:800;letter-spacing:-.03em;margin:0 0 6px}
.page h2{font-size:19px;font-weight:800;letter-spacing:-.02em;margin:34px 0 8px}
.page p{margin:0 0 14px}
.page .lead{font-size:17px;color:#37525c;margin-bottom:6px}
.page a{color:var(--deep);text-underline-offset:3px}

.steps{counter-reset:step;list-style:none;padding:0;margin:16px 0}
.steps li{
  counter-increment:step;position:relative;padding:14px 16px 14px 52px;
  background:var(--frost);border:1px solid var(--hairline);border-radius:3px;
  margin-bottom:9px;box-shadow:var(--shadow);
}
.steps li::before{
  content:counter(step);position:absolute;left:15px;top:14px;
  width:23px;height:23px;border-radius:50%;background:var(--deep);color:var(--frost);
  font-family:'DM Mono',monospace;font-size:12px;display:grid;place-items:center;
}

.callout{
  background:#e4f4ee;border-left:4px solid var(--fresh);
  padding:12px 14px;border-radius:0 3px 3px 0;color:#0f5943;
}
.disclaimer-box{
  background:var(--frost);border:1px solid var(--hairline);border-radius:3px;
  padding:13px 15px;font-size:13px;color:var(--steel);line-height:1.6;
}
.cta-row{margin-top:32px}
.btn-primary-link{
  display:inline-block;background:var(--sodium);color:#fff!important;
  text-decoration:none;font-weight:700;padding:12px 20px;border-radius:3px;
}
.btn-primary-link:hover{filter:brightness(1.07)}

/* Hulpknop in de werkbalk */
.btn-help{
  flex:0 0 auto;width:32px;height:32px;border-radius:50%;cursor:pointer;
  border:1px solid var(--hairline);background:var(--frost);color:var(--steel);
  font-family:'Archivo';font-weight:700;font-size:14px;line-height:1;
}
.btn-help:hover{border-color:var(--deep);color:var(--deep)}

/* Voettekst onder de meldingenlijst */
.feed-foot{
  margin:18px 4px 6px;font-family:'DM Mono',monospace;font-size:11px;
  color:var(--steel);letter-spacing:.03em;
}
.feed-foot a{color:var(--steel)}
.feed-foot a:hover{color:var(--deep)}

/* Introvenster */
.intro-card h2{font-size:20px}
.intro-steps{counter-reset:istep;list-style:none;padding:0;margin:16px 0 4px}
.intro-steps li{
  counter-increment:istep;position:relative;padding:0 0 13px 34px;
  font-size:14px;line-height:1.5;
}
.intro-steps li::before{
  content:counter(istep);position:absolute;left:0;top:1px;
  width:21px;height:21px;border-radius:50%;background:var(--ice);color:var(--deep);
  font-family:'DM Mono',monospace;font-size:11px;display:grid;place-items:center;
}
.intro-card .btn-ghost{text-decoration:none;display:grid;place-items:center}

@media (max-width:820px){
  .page{padding:24px 18px 60px}
  .page h1{font-size:25px}
  .back-link{font-size:11px}
}

/* ===============================================================
   Smaakpagina's
   =============================================================== */
.page-wide{max-width:820px}

.crumbs{
  font-family:'DM Mono',monospace;font-size:11.5px;color:var(--steel);
  margin-bottom:14px;letter-spacing:.02em;
}
.crumbs a{color:var(--steel)}
.crumbs a:hover{color:var(--deep)}

.city-list{list-style:none;padding:0;margin:12px 0 6px;display:flex;flex-wrap:wrap;gap:7px}
.city-list li{
  display:flex;align-items:center;gap:7px;background:var(--frost);
  border:1px solid var(--hairline);border-radius:100px;padding:5px 12px;font-size:13px;
}
.city-list em{font-style:normal;font-family:'DM Mono',monospace;font-size:11px;color:var(--steel)}

.shop-list{list-style:none;padding:0;margin:14px 0}
.shop{
  background:var(--frost);border:1px solid var(--hairline);border-left:5px solid var(--stale);
  border-radius:3px;padding:13px 15px;margin-bottom:9px;box-shadow:var(--shadow);
}
.shop.f-fresh{border-left-color:var(--fresh)}
.shop.f-aging{border-left-color:var(--aging)}
.shop-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.shop-top strong{font-size:15.5px;letter-spacing:-.01em}
.shop-top .price{font-family:'DM Mono',monospace;font-size:13.5px;white-space:nowrap}
.shop-addr{font-family:'DM Mono',monospace;font-size:12px;color:var(--steel);margin-top:3px}
.shop-meta{font-size:12.5px;color:var(--steel);margin-top:7px;display:flex;
           align-items:center;gap:5px;flex-wrap:wrap}
.shop-meta .dot{width:7px;height:7px;border-radius:50%;background:var(--stale);flex:0 0 auto}
.f-fresh .shop-meta .dot{background:var(--fresh)}
.f-aging .shop-meta .dot{background:var(--aging)}

.note-small{font-size:12.5px;color:var(--steel);line-height:1.6;margin-top:14px}

.rel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
          gap:8px;margin:12px 0 6px}
.rel{
  display:block;background:var(--frost);border:1px solid var(--hairline);border-radius:3px;
  padding:11px 13px;text-decoration:none;color:var(--deep);font-size:14px;font-weight:600;
}
.rel:hover{border-color:var(--deep)}
.rel em{display:block;font-style:normal;font-family:'DM Mono',monospace;
        font-size:11px;color:var(--steel);font-weight:400;margin-top:3px}
.rel.empty{opacity:.62}
.rel.has em{color:var(--fresh)}

.updated{font-family:'DM Mono',monospace;font-size:11px;color:var(--steel);margin-top:28px}
.foot-links{font-family:'DM Mono',monospace;font-size:11.5px;color:var(--steel);margin-top:20px}
.foot-links a{color:var(--steel)}
.foot-links a:hover{color:var(--deep)}

/* ===============================================================
   Cijferpagina
   =============================================================== */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
          gap:9px;margin:18px 0 6px}
.kpi-grid.three{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.kpi{background:var(--frost);border:1px solid var(--hairline);border-radius:3px;
     padding:15px 16px;box-shadow:var(--shadow)}
.kpi b{display:block;font-size:27px;font-weight:800;letter-spacing:-.03em;line-height:1.05}
.kpi b i{font-style:normal;font-size:15px;color:var(--steel);font-weight:400}
.kpi span{display:block;font-family:'DM Mono',monospace;font-size:11px;
          color:var(--steel);margin-top:5px;letter-spacing:.02em}

/* Versheidsbalk */
.fresh-bar{display:flex;height:30px;border-radius:3px;overflow:hidden;margin:14px 0 9px;
           border:1px solid var(--hairline);background:var(--frost)}
.fresh-bar .seg{display:grid;place-items:center;font-family:'DM Mono',monospace;
                font-size:11px;color:#fff;min-width:2px}
.fresh-bar .seg.f-fresh{background:var(--fresh)}
.fresh-bar .seg.f-aging{background:var(--aging)}
.fresh-bar .seg.f-stale{background:var(--stale)}
.fresh-legend{display:flex;flex-wrap:wrap;gap:16px;font-family:'DM Mono',monospace;
              font-size:11.5px;color:var(--steel);margin-bottom:4px}
.fresh-legend span{display:flex;align-items:center;gap:6px}
.fresh-legend .d{width:9px;height:9px;border-radius:2px;display:inline-block}
.fresh-legend .d.f-fresh{background:var(--fresh)}
.fresh-legend .d.f-aging{background:var(--aging)}
.fresh-legend .d.f-stale{background:var(--stale)}
.fresh-legend .d.s-rep{background:var(--deep)}
.fresh-legend .d.s-conf{background:var(--fresh)}

/* Staafjes */
.bars{list-style:none;padding:0;margin:14px 0}
.bars li{display:grid;grid-template-columns:150px 1fr 74px;align-items:center;
         gap:11px;padding:5px 0;font-size:14px}
.bars.compact li{grid-template-columns:100px 1fr 50px}
.bars li > span:first-child,.bars li > a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-track{background:var(--frost);border:1px solid var(--hairline);
           border-radius:100px;height:14px;overflow:hidden}
.bar-fill{display:block;height:100%;background:var(--deep);border-radius:100px}
.bar-fill.alt{background:var(--sodium)}
.bars b{font-family:'DM Mono',monospace;font-size:13px;text-align:right}
.bars b i{display:block;font-style:normal;font-size:10px;color:var(--steel)}

/* Jachtlijst */
.hunt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));
           gap:8px;margin:12px 0}
.hunt{display:block;background:var(--frost);border:1px dashed var(--hairline);
      border-radius:3px;padding:10px 12px;text-decoration:none;color:var(--deep);
      font-size:13.5px;font-weight:600}
.hunt:hover{border-style:solid;border-color:var(--sodium)}
.hunt em{display:block;font-style:normal;font-family:'DM Mono',monospace;
         font-size:10.5px;color:var(--steel);font-weight:400;margin-top:3px}

.plain-list{list-style:none;padding:0;margin:12px 0}
.plain-list li{padding:6px 0;border-bottom:1px solid var(--hairline);font-size:14px}
.plain-list li:last-child{border-bottom:0}
.plain-list .price{font-family:'DM Mono',monospace;margin-right:8px}
.muted{color:var(--steel)}
.muted-p{color:var(--steel);font-size:14px}

.rank{list-style:none;counter-reset:r;padding:0;margin:12px 0}
.rank li{counter-increment:r;display:flex;align-items:baseline;gap:9px;
         padding:9px 0 9px 32px;position:relative;border-bottom:1px solid var(--hairline);
         font-size:14px}
.rank li:last-child{border-bottom:0}
.rank li::before{content:counter(r);position:absolute;left:0;top:8px;
  width:21px;height:21px;border-radius:50%;background:var(--ice);color:var(--steel);
  font-family:'DM Mono',monospace;font-size:11px;display:grid;place-items:center}
.rank em{margin-left:auto;font-style:normal;font-family:'DM Mono',monospace;
         font-size:11.5px;color:var(--steel);white-space:nowrap}

/* Weekgrafiek */
.weekchart{display:flex;align-items:flex-end;gap:6px;height:150px;margin:16px 0 8px;
           padding:0 2px}
.weekchart .wk{flex:1;display:flex;flex-direction:column;align-items:center;height:100%}
.weekchart .stack{flex:1;width:100%;display:flex;flex-direction:column;
                  justify-content:flex-end;gap:2px}
.weekchart .s-rep{background:var(--deep);border-radius:2px 2px 0 0;min-height:2px}
.weekchart .s-conf{background:var(--fresh);border-radius:2px 2px 0 0}
.weekchart em{font-style:normal;font-family:'DM Mono',monospace;font-size:9.5px;
              color:var(--steel);margin-top:6px}

@media (max-width:600px){
  .bars li{grid-template-columns:110px 1fr 54px;font-size:13px}
  .kpi b{font-size:22px}
  .weekchart{height:120px;gap:3px}
}

/* Landcode bij buitenlandse winkels — enkel getoond als het niet BE is */
.cc{
  display:inline-block;font-family:'DM Mono',monospace;font-size:9.5px;
  background:var(--deep);color:var(--frost);padding:1px 5px;border-radius:2px;
  letter-spacing:.06em;vertical-align:1px;font-style:normal;font-weight:500;
}
.city-list .cc{margin-left:4px}

/* Label bij adressuggesties, zodat een adres niet voor een winkel doorgaat */
.sx-item .tagje{
  float:right;font-family:'DM Mono',monospace;font-size:9.5px;font-weight:500;
  background:var(--ice);color:var(--steel);padding:1px 6px;border-radius:2px;
  letter-spacing:.05em;
}
.sx-item.is-addr:hover .tagje,.sx-item.is-addr.on .tagje{background:#2f4a54;color:#cfe0e5}