:root{
  /* Backgrounds — light and clear, with just a hint of warmth.
     Aim: editorial / publication, not aged-paper. */
  --cream:#fbf8ee;       /* page background — off-white with subtle warmth */
  --paper:#ffffff;       /* card / surface — pure white for clear contrast */
  --line:#e7dfcc;        /* hairline */
  --line-soft:#efe9d8;

  /* Type — deeper ink for stronger contrast */
  --ink:#15110d;
  --ink-soft:#4f4236;
  --muted:#8a786a;

  /* Accent — deep terracotta. Less playful than amber-orange, reads as editorial.
     This is now used sparingly: only emphasis, links, single highlight bar. */
  --toast:#923516;
  --toast-dark:#6e2810;

  /* Semantic — quieter, used rarely */
  --butter:#d5a342;
  --crust:#bd7d2e;
  --cheese:#f0e3b9;

  --ok:#33683c;--ok-bg:#e6efdf;
  --warn:#9f6210;--warn-bg:#f3e6cb;
  --old:#7c2e2e;--old-bg:#ecd3cf;
  --reg:#3f4a64;--reg-bg:#e1e5ed;
  --lux:#923516;--lux-bg:#f0d8c4;
}

*{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth;scrollbar-gutter:stable;overflow-y:scroll}

body{font-family:'Inter',system-ui,sans-serif;background:var(--cream);color:var(--ink);line-height:1.55;

  background-image:radial-gradient(ellipse at 12% 0%,rgba(244,200,105,.22) 0%,transparent 52%);

  background-attachment:fixed;-webkit-font-smoothing:antialiased}

.wrap{max-width:1180px;margin:0 auto;padding:0 28px}

@media(max-width:600px){.wrap{padding:0 16px}}

/* Masthead */

.masthead{display:flex;align-items:center;justify-content:space-between;gap:16px;

  padding:22px 0 18px;border-bottom:2.5px solid var(--ink);flex-wrap:wrap}

.brand{font-family:'Fraunces',Georgia,serif;font-weight:800;font-size:1.25rem;

  letter-spacing:-.025em;font-style:italic;color:var(--ink)}

.mast-right{font-size:.73rem;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}

.mast-right b{color:var(--toast)}

/* Hero */

.hero{display:grid;grid-template-columns:1fr auto;gap:52px;padding:54px 0 58px;

  border-bottom:1px solid var(--line);align-items:center}

@media(max-width:840px){.hero{grid-template-columns:1fr;gap:30px;padding:38px 0 44px}}

.hero-kicker{font-size:.7rem;text-transform:uppercase;letter-spacing:.22em;color:var(--toast);

  font-weight:700;margin-bottom:16px}

.hero h1{font-family:'Fraunces',Georgia,serif;font-size:clamp(2.8rem,6vw,4.8rem);

  font-weight:800;line-height:.97;letter-spacing:-.04em;margin-bottom:20px;color:var(--ink)}

.hero h1 em{font-style:italic;font-weight:500;color:var(--toast)}

.hero-lede{font-size:1.05rem;color:var(--ink-soft);line-height:1.62;margin-bottom:28px;max-width:47ch}

.pills{display:flex;gap:10px;flex-wrap:wrap}

.pill{background:transparent;border:0;border-right:1px solid var(--line);border-radius:0;
  padding:2px 14px 2px 0;font-size:.78rem;color:var(--muted);font-weight:500;white-space:nowrap;
  letter-spacing:.01em}
.pill:last-child{border-right:0}
.pill b{color:var(--ink);font-weight:600}

.price-hero{background:var(--paper);border:1px solid var(--ink);border-radius:6px;
  padding:32px 36px;text-align:center;position:relative;min-width:230px;
  box-shadow:0 1px 24px -8px rgba(28,20,16,.18)}

.price-hero::before{content:"GEMIDDELD";position:absolute;top:-14px;left:50%;

  transform:translateX(-50%);background:var(--ink);color:var(--cream);

  font-size:.62rem;letter-spacing:.24em;padding:4px 14px;border-radius:3px;

  font-weight:700;font-family:'Inter',sans-serif;white-space:nowrap}

.price-num{font-family:'Fraunces',Georgia,serif;font-size:clamp(3.8rem,9vw,6.2rem);

  font-weight:800;line-height:.9;color:var(--ink);letter-spacing:-.04em}

.price-cur{font-size:.52em;vertical-align:top;color:var(--toast);

  font-style:italic;font-weight:500;margin-right:.04em}

.price-split{display:flex;justify-content:center;gap:26px;margin-top:22px;

  padding-top:18px;border-top:1px dashed var(--line)}

.price-split .sitem{font-size:.68rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}

.price-split .sitem b{display:block;font-family:'Fraunces',serif;font-size:1.25rem;

  font-weight:700;color:var(--ink);margin-top:3px;letter-spacing:-.01em}

/* Fun band */
.funband{background:var(--ink);margin:0 -28px;padding:28px;
  display:grid;grid-template-columns:repeat(4,1fr)}
.fact{padding:6px 28px 6px 0;border-right:1px solid rgba(255,255,255,.1)}
.fact:last-child{border-right:none;padding-right:0}
.fact-label{font-size:.62rem;text-transform:uppercase;letter-spacing:.2em;
  color:var(--butter);font-family:"Inter",sans-serif;font-weight:700;margin-bottom:7px}
.fact-text{font-family:"Fraunces",Georgia,serif;font-style:italic;font-size:.96rem;
  color:#f0e4d0;line-height:1.38}
.fact-text b{font-weight:700;font-style:normal;color:var(--butter)}
.fact-text a{color:var(--butter)}
@media(max-width:860px){
  .funband{grid-template-columns:repeat(2,1fr);padding:24px 28px}
  .fact{padding:14px 20px 14px 0;border-right:none;border-bottom:1px solid rgba(255,255,255,.08)}
  .fact:nth-child(odd){border-right:1px solid rgba(255,255,255,.1)}
  .fact:nth-last-child(-n+2){border-bottom:none;padding-bottom:6px}
}
@media(max-width:600px){
  .funband{grid-template-columns:1fr;margin:0 -16px;padding:20px 16px}
  .fact{padding:14px 0;border-right:none!important;border-bottom:1px solid rgba(255,255,255,.08)}
  .fact:last-child{border-bottom:none}
}

/* Sections */

.section{padding:48px 0}

.section-hd{margin-bottom:24px}

.section-hd h2{font-family:'Fraunces',Georgia,serif;font-size:2rem;font-weight:700;

  letter-spacing:-.03em;color:var(--ink)}

.section-hd h2 em{font-style:italic;color:var(--toast);font-weight:500}

.section-hd .sub{font-size:.84rem;color:var(--muted);margin-top:5px;font-style:italic}

hr.divider{border:none;border-top:1px solid var(--line)}

/* Cards + charts */

.charts{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:20px}

@media(max-width:960px){.charts{grid-template-columns:1fr 1fr}}

@media(max-width:600px){.charts{grid-template-columns:1fr}}

.card{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:22px 24px;
  box-shadow:none}

.card h3{font-family:'Fraunces',serif;font-size:1.05rem;font-weight:700;color:var(--ink);

  margin-bottom:16px;letter-spacing:-.01em}

.card h3 .dim{font-family:'Inter',sans-serif;font-weight:400;color:var(--muted);font-size:.78rem;font-style:italic}

.card canvas{height:260px !important;width:100% !important;max-width:100%}

/* Map */

#map{height:520px;border-radius:6px;border:1px solid var(--line);margin-top:10px}

.map-wrap{position:relative}

.map-reset{position:absolute;top:12px;right:12px;z-index:1000;

  background:var(--paper);border:1.5px solid var(--line);border-radius:8px;

  padding:7px 13px;font-size:.78rem;font-weight:700;font-family:'Inter',sans-serif;

  color:var(--ink);cursor:pointer;box-shadow:0 2px 8px rgba(42,31,23,.12);

  transition:background .15s,border-color .15s}

.map-reset:hover{background:var(--cream);border-color:var(--toast);color:var(--toast)}

.legend{background:rgba(255,255,255,.96);backdrop-filter:blur(6px);
  padding:10px 14px;border-radius:4px;font-family:'Inter',sans-serif;
  border:1px solid var(--line);box-shadow:0 2px 12px -6px rgba(21,17,13,.15);
  min-width:170px}
.legend .lg-title{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);font-weight:600;margin-bottom:8px}
.legend .lg-row{display:flex;align-items:center;gap:10px;margin-top:6px}
.legend .lg-cat{font-size:.74rem;color:var(--ink);font-weight:600;width:58px;flex:0 0 58px}
.legend .lg-bar{flex:1;height:8px;border-radius:2px;border:1px solid rgba(21,17,13,.12)}
.legend .lg-scale{display:flex;justify-content:space-between;font-size:.66rem;
  color:var(--muted);padding:2px 0 4px 68px;letter-spacing:.01em}

/* Table */

.table-wrap{border-radius:6px;border:1px solid var(--line);overflow:hidden;
  box-shadow:none}

.table-body-wrap{max-height:676px;overflow-y:auto;overflow-x:auto;transition:max-height .4s ease}

.table-body-wrap.expanded{max-height:none}

.show-more-btn{display:block;width:100%;padding:12px;text-align:center;

  background:var(--cream);border:none;border-top:1px solid var(--line);

  color:var(--toast);font-weight:700;font-size:.85rem;cursor:pointer;

  letter-spacing:.04em;transition:background .15s}

.show-more-btn:hover{background:var(--line)}

.show-more-btn.hidden{display:none}

.table-scroll{overflow-x:auto}

table{width:100%;border-collapse:collapse;font-size:.88rem;background:var(--paper)}

th{text-align:left;color:var(--ink-soft);font-weight:700;font-size:.67rem;

  text-transform:uppercase;letter-spacing:.1em;border-bottom:2px solid var(--ink);

  padding:14px 16px;background:var(--cream);position:sticky;top:0;z-index:2}

td{padding:12px 16px;border-bottom:1px solid var(--line-soft);vertical-align:middle}

tbody tr:not(.chain-hdr):hover td{background:#fffbf0}

tr:last-child td{border-bottom:none}

a{color:var(--toast);text-decoration:none}

a:hover{text-decoration:underline}

td.name-cell a.name-link{font-weight:600;color:var(--ink)}

td.name-cell a.name-link:hover{color:var(--toast);text-decoration:none}

td.tosti-desc{font-size:.77rem;color:var(--muted);max-width:210px;font-style:italic}

td.price{font-family:'Fraunces',serif;font-weight:700;font-size:1.05rem;

  color:var(--ink);letter-spacing:-.01em;white-space:nowrap}

td.city{color:var(--ink-soft);font-size:.85rem}

td.pc{color:var(--muted);font-size:.82rem}

/* Chains */

.chain-hdr{background:var(--line-soft);cursor:pointer;user-select:none;border-top:1px solid var(--line)}

.chain-hdr:hover{background:var(--line)}

.chain-hdr td{border-bottom:1px solid var(--line);padding:14px 16px}

.chain-name{font-family:'Fraunces',serif;font-weight:700;font-size:.98rem;color:var(--ink)}

.chain-badge{display:inline-block;background:var(--line-soft);color:var(--ink-soft);
  font-size:.62rem;font-weight:600;padding:2px 7px;border-radius:3px;
  margin-left:8px;letter-spacing:.06em;text-transform:uppercase;vertical-align:middle}

.chain-domain{color:var(--muted);font-size:.78rem;font-style:italic}

.chain-price{font-family:'Fraunces',serif;font-weight:700;font-size:1rem;color:var(--ink)}

.price-range{color:var(--muted);font-size:.75rem;margin-left:6px;font-style:italic}

.toggle-icon{float:right;color:var(--toast);font-weight:700;font-size:.72rem}

.chain-row{display:none}

.chain-row td{background:var(--paper);padding:11px 16px}
.chain-row td.name-cell{padding-left:38px;position:relative}
.chain-row td.name-cell::before{content:"↳";position:absolute;left:18px;color:var(--toast);font-weight:700;opacity:.7}

/* Badges */

.badge{display:inline-block;padding:2px 8px;border-radius:3px;font-size:.66rem;

  font-weight:700;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}

/* Type badges — only Luxe gets an accent, Regulier is neutral */
.badge-lux{background:transparent;color:var(--toast);border:1px solid var(--toast);padding:1px 6px}
.badge-reg{background:transparent;color:var(--ink-soft);border:1px solid var(--line);padding:1px 6px}

/* Date badges — all neutral gray, just informational */
.badge-fresh,
.badge-ok,
.badge-warn,
.badge-old,
.badge-neutral{background:transparent;color:var(--muted);border:0;padding:1px 0;
  text-transform:none;letter-spacing:.01em;font-weight:500;font-size:.72rem}

/* Price-change indicators retain a subtle accent */
.badge-price-up{background:transparent;color:#a83a2a;border:0;padding:1px 0;font-weight:600}
.badge-price-dn{background:transparent;color:#1f6a30;border:0;padding:1px 0;font-weight:600}

.badges{display:flex;gap:6px;align-items:center;flex-wrap:wrap}

/* Filters */

.filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap;

  padding:14px 18px;background:var(--paper);border:1px solid var(--line);border-radius:6px;

  margin-bottom:16px;box-shadow:0 2px 8px -4px rgba(42,31,23,.05)}

.filters-label{font-family:'Fraunces',serif;font-style:italic;font-size:.88rem;

  color:var(--muted);margin-right:2px;white-space:nowrap}

.cat-btn,.type-btn{border:1px solid var(--line);background:transparent;padding:6px 11px;
  border-radius:4px;font-size:.78rem;cursor:pointer;color:var(--ink-soft);
  font-family:'Inter',sans-serif;font-weight:500;transition:all .15s;white-space:nowrap}

.cat-btn:hover,.type-btn:hover{background:var(--line-soft);border-color:var(--crust)}

.cat-btn.active,.type-btn.active{background:var(--ink);color:var(--cream);border-color:var(--ink)}

.filter-sep{flex:0 0 1px;width:1px;height:18px;background:var(--line);margin:0 2px;align-self:center}

.prov-select{padding:6px 32px 6px 14px;border:1px solid var(--line);border-radius:4px;

  font-size:.8rem;font-family:'Inter',sans-serif;background:var(--cream);

  color:var(--ink-soft);cursor:pointer;appearance:none;font-weight:600;

  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23b8691d' d='M6 8L0 0h12z'/%3E%3C/svg%3E");

  background-repeat:no-repeat;background-position:right 12px center}

.prov-select:focus{outline:none;border-color:var(--toast)}

.search-input{padding:6px 14px;border:1px solid var(--line);border-radius:4px;

  font-size:.8rem;font-family:'Inter',sans-serif;background:var(--cream);

  color:var(--ink);font-weight:500;min-width:160px}

.search-input:focus{outline:none;border-color:var(--toast)}

.dl-group{display:flex;gap:6px;margin-left:auto}

.dl-btn{padding:6px 10px;border:1px solid var(--line);border-radius:4px;

  font-size:.78rem;font-family:'Inter',sans-serif;background:var(--cream);

  color:var(--ink-soft);font-weight:600;cursor:pointer;transition:all .15s}

.dl-btn:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}

.filter-count{font-family:'Fraunces',serif;font-style:italic;font-size:.85rem;

  color:var(--toast);margin-left:auto}

tr.hidden-by-filter,
tr.hidden-by-page{display:none!important}

/* Pagination controls */
.pagination{display:flex;justify-content:center;align-items:center;gap:4px;margin-top:24px;flex-wrap:wrap}
.pagination button{
  padding:7px 13px;border:1px solid var(--line);background:var(--paper);
  color:var(--ink-soft);border-radius:4px;cursor:pointer;font-family:'Inter',sans-serif;
  font-size:.82rem;font-weight:500;transition:all .15s;min-width:38px;
}
.pagination button:hover:not(:disabled){background:var(--cream);border-color:var(--toast);color:var(--toast)}
.pagination button.active{background:var(--ink);color:var(--paper);border-color:var(--ink);font-weight:600}
.pagination button:disabled{opacity:.4;cursor:not-allowed}
.pagination .pg-arrow{padding:7px 14px}
.pagination .pg-ellipsis{color:var(--muted);padding:0 4px;font-size:.85rem;user-select:none}
.pagination .pg-info{margin-left:12px;color:var(--muted);font-size:.78rem;font-style:italic;font-family:'Fraunces',serif}
@media(max-width:480px){
  .pagination .pg-info{flex-basis:100%;text-align:center;margin:6px 0 0}
}

/* Dispute btn */

.dispute-btn{border:1px solid transparent;background:none;cursor:pointer;font-size:.88rem;

  padding:4px 8px;border-radius:8px;opacity:.28;transition:all .15s}

.dispute-btn:hover{opacity:1;background:var(--lux-bg);border-color:var(--crust)}

/* Modal */

.modal-overlay{display:none;position:fixed;inset:0;background:rgba(42,31,23,.55);

  z-index:1000;align-items:center;justify-content:center;backdrop-filter:blur(4px)}

.modal-overlay.open{display:flex}

.modal-box{background:var(--paper);border-radius:8px;padding:34px 38px;width:100%;

  max-width:460px;margin:20px;box-shadow:0 24px 60px rgba(42,31,23,.28);

  border:2px solid var(--ink)}

.modal-box h3{font-family:'Fraunces',serif;font-size:1.5rem;font-weight:700;

  margin-bottom:4px;letter-spacing:-.02em}

.modal-sub{font-size:.85rem;color:var(--muted);margin-bottom:18px;font-style:italic}

.modal-rest{font-family:'Fraunces',serif;font-weight:700;color:var(--toast);font-size:1rem;

  margin-bottom:18px;padding:12px 16px;background:var(--cheese);

  border-radius:10px;border:1px dashed var(--crust)}

.modal-box label{display:block;font-size:.7rem;color:var(--ink-soft);margin:12px 0 5px;

  text-transform:uppercase;letter-spacing:.09em;font-weight:700}

.modal-box input{width:100%;padding:11px 14px;border:1.5px solid var(--line);

  border-radius:10px;font-size:.92rem;font-family:inherit;background:var(--cream);color:var(--ink)}

.modal-box input:focus{outline:none;border-color:var(--toast)}

.price-display{font-family:'Fraunces',serif;font-size:1.6rem;font-weight:700;

  color:var(--ink);padding:4px 0;letter-spacing:-.02em}

.radio-group{display:flex;flex-direction:column;gap:7px;margin:8px 0 16px}

.radio-opt{display:flex;align-items:center;gap:10px;font-size:.88rem;color:var(--ink);

  cursor:pointer;font-weight:500;text-transform:none;letter-spacing:0;margin:0;

  padding:11px 14px;border-radius:10px;border:1.5px solid var(--line);

  background:var(--cream);transition:border-color .15s,background .15s}

.radio-opt:has(input:checked){border-color:var(--toast);background:var(--cheese)}

.radio-opt:hover{border-color:var(--crust)}

.radio-opt input{width:auto;padding:0;border:none;accent-color:var(--toast);flex-shrink:0}

.dispute-subsection{background:var(--cream);border:1.5px solid var(--line);

  border-radius:12px;padding:14px 16px;margin-top:4px}

.modal-actions{display:flex;gap:10px;margin-top:22px}

.modal-actions button{flex:1;padding:13px;border-radius:10px;font-size:.88rem;

  font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;border:none;transition:all .15s}

.btn-submit{background:var(--ink);color:var(--cream)}

.btn-submit:hover{background:var(--toast)}

.btn-cancel{background:var(--line-soft);color:var(--ink-soft)}

.btn-cancel:hover{background:var(--line)}

.form-ok{display:none;color:var(--ok);font-size:.85rem;margin-top:10px;font-weight:600}

.form-err{display:none;color:var(--old);font-size:.85rem;margin-top:10px;font-weight:600}

/* Suggest section */

.suggest-section{background:var(--ink);border-radius:8px;padding:44px 44px;

  display:grid;grid-template-columns:1fr 1.25fr;gap:48px;align-items:start;

  background-image:radial-gradient(ellipse at 90% -5%,rgba(244,200,105,.13),transparent 55%)}

@media(max-width:780px){.suggest-section{grid-template-columns:1fr;padding:30px 26px;gap:28px}}

.suggest-intro h3{font-family:'Fraunces',serif;font-size:2rem;font-weight:700;

  line-height:1.05;letter-spacing:-.03em;margin-bottom:12px;color:var(--cream)}

.suggest-intro h3 em{color:var(--butter);font-style:italic;font-weight:500}

.suggest-intro p{font-size:.95rem;color:#c5b09a;line-height:1.6}

.suggest-form label{display:block;font-size:.7rem;color:var(--butter);margin:12px 0 5px;

  text-transform:uppercase;letter-spacing:.1em;font-weight:700}

.suggest-form input{width:100%;padding:11px 15px;border:1.5px solid #4a3826;

  border-radius:10px;font-size:.9rem;font-family:inherit;background:#3a2c20;color:var(--cream)}

.suggest-form input::placeholder{color:#7a6450}

.suggest-form input:focus{outline:none;border-color:var(--butter)}

.suggest-form button{margin-top:18px;background:var(--butter);color:var(--ink);border:none;

  padding:12px 26px;border-radius:10px;font-size:.9rem;cursor:pointer;font-weight:700;

  font-family:'Inter',sans-serif;transition:all .15s}

.suggest-form button:hover{background:var(--cream)}

.suggest-form .form-ok,.suggest-form .form-err{color:var(--butter)}

.suggest-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* Footer */

footer{margin-top:56px;padding:28px 0 40px;border-top:1px solid var(--line);
  text-align:center;font-family:'Fraunces',serif;font-style:italic;
  font-size:.82rem;color:var(--muted);line-height:1.7}
footer a{color:var(--toast)}
footer .footer-line{color:var(--ink-soft)}
footer .footer-meta{font-family:'Inter',sans-serif;font-style:normal;
  font-size:.72rem;letter-spacing:.06em;color:var(--muted);margin-top:6px}

/* ═══════════════════════════════════════════════════════════════
   Breadcrumb — used on slice / over-ons / insights pages
   ═══════════════════════════════════════════════════════════════ */
.breadcrumb{font-size:.78rem;color:var(--muted);padding:18px 0 4px;letter-spacing:.04em}
.breadcrumb a{color:var(--ink-soft);text-decoration:none}
.breadcrumb a:hover{color:var(--toast);text-decoration:underline}
.breadcrumb .sep{margin:0 8px;color:var(--line)}

/* ═══════════════════════════════════════════════════════════════
   Slim stats strip — replaces the funband on the homepage
   ═══════════════════════════════════════════════════════════════ */
.stats-strip{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:22px 0;
  margin:8px 0 36px;
}
.ss-item{
  padding:0 26px;
  border-right:1px solid var(--line);
  display:block;text-decoration:none;color:inherit;
  transition:opacity .15s;
}
.ss-item:last-child{border-right:0}
a.ss-item:hover{opacity:.65}
.ss-label{
  font-size:.64rem;text-transform:uppercase;letter-spacing:.18em;
  color:var(--muted);font-weight:600;margin-bottom:8px;
}
.ss-value{
  font-family:'Fraunces',serif;font-size:1.15rem;font-weight:700;
  color:var(--ink);letter-spacing:-.01em;line-height:1.2;
}
.ss-value em{font-style:italic;color:var(--toast);font-weight:500;margin-left:6px}
@media(max-width:760px){
  .stats-strip{grid-template-columns:repeat(2,1fr);padding:18px 0;margin:4px 0 28px}
  .ss-item{padding:14px 18px;border-right:0;border-bottom:1px solid var(--line)}
  .ss-item:nth-child(odd){border-right:1px solid var(--line)}
  .ss-item:nth-last-child(-n+2){border-bottom:0}
  .ss-value{font-size:1rem}
}
@media(max-width:480px){
  .stats-strip{grid-template-columns:1fr}
  .ss-item{padding:14px 0;border-right:0 !important}
  .ss-item:last-child{border-bottom:0}
}

/* ═══════════════════════════════════════════════════════════════
   REDESIGN v1 — sticky header, mobile nav, mobile cards
   ═══════════════════════════════════════════════════════════════ */

/* Sticky masthead with subtle blur on scroll */
.masthead{
  position:sticky;top:0;z-index:50;
  background:rgba(251,248,238,.92);
  backdrop-filter:saturate(180%) blur(10px);
  -webkit-backdrop-filter:saturate(180%) blur(10px);
  margin:0 -28px;padding:18px 28px 14px;
  border-bottom:1.5px solid var(--ink);
}
@media(max-width:600px){.masthead{margin:0 -16px;padding:14px 16px 12px}}

/* Mobile nav: tighter, wrap allowed, hide the "Bijgewerkt op..." chip */
@media(max-width:760px){
  .masthead > div:nth-child(2){gap:14px !important;flex-wrap:wrap;justify-content:flex-end}
  .masthead .mast-right{display:none}
  .masthead > div:nth-child(2) a{font-size:.68rem !important;letter-spacing:.06em !important}
  .brand{font-size:1.05rem}
}
@media(max-width:420px){
  .masthead > div:nth-child(2){gap:10px !important}
  .masthead > div:nth-child(2) a{font-size:.62rem !important}
}

/* Table-to-cards on mobile (the big one — prices were hidden behind h-scroll) */
@media(max-width:760px){
  /* Allow the table-wrap to overflow visually without h-scroll */
  .table-wrap{border:none;box-shadow:none;background:transparent;border-radius:0}
  .table-body-wrap{max-height:none;overflow:visible}
  .table-scroll{overflow:visible}

  /* Hide table chrome */
  table{background:transparent}
  table thead{display:none}
  table tr{
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-areas:
      "name  price"
      "meta  meta"
      "desc  desc"
      "badge dispute";
    gap:6px 12px;
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:6px;
    padding:14px 16px;
    margin-bottom:10px;
    box-shadow:0 2px 10px -6px rgba(42,31,23,.08);
    align-items:center;
  }
  table td{display:block;padding:0;border:none}
  td.name-cell{grid-area:name;font-size:.98rem;font-weight:600}
  td.name-cell a.name-link{color:var(--ink);font-weight:600}
  td.price{
    grid-area:price;
    font-family:'Fraunces',serif;font-size:1.35rem;font-weight:700;
    text-align:right;color:var(--ink);letter-spacing:-.02em;
    white-space:nowrap;
  }
  td.city{grid-area:meta;font-size:.78rem;color:var(--ink-soft);margin-top:2px}
  td.city::after{content:attr(data-pc-hint)}
  td.pc{display:none}  /* fold postcode into city */
  td.tosti-desc{grid-area:desc;font-size:.78rem;color:var(--muted);font-style:italic;max-width:none}
  td.tosti-desc:empty{display:none}
  table tr td:nth-child(6){grid-area:badge}
  table tr td:nth-child(7){grid-area:dispute;text-align:right}

  /* Chain header row gets its own card style.
     Note: 6 <td>s in this row: 1=name, 2=domain, 3=empty, 4=price, 5=badges, 6=empty.
     CSS grid ignores colspan, so all six occupy slots and we assign areas explicitly. */
  tr.chain-hdr{
    background:var(--paper);
    border-color:var(--line);
    grid-template-areas:
      "name   price"
      "domain price"
      "badge  badge";
    align-items:start;
  }
  tr.chain-hdr td{border:none !important;padding:0 !important}  /* match regular-row cells: no border, no extra padding */
  tr.chain-hdr td:nth-child(1){grid-area:name}
  /* LOCATIES badge always on its own line below the chain name — consistent across chains */
  tr.chain-hdr .chain-name{display:block}
  tr.chain-hdr .chain-badge{display:inline-block;margin:4px 0 0 0 !important}
  tr.chain-hdr td.chain-domain{grid-area:domain;font-size:.74rem;color:var(--muted);font-style:italic;padding:6px 0 0 !important}
  tr.chain-hdr td:nth-child(3),
  tr.chain-hdr td:nth-child(6){display:none}
  tr.chain-hdr td.chain-price{
    grid-area:price;text-align:right;
    font-family:'Fraunces',serif;font-size:1.25rem;font-weight:700;color:var(--ink);
    white-space:nowrap;align-self:start;
  }
  tr.chain-hdr td.chain-price .price-range{display:block;font-size:.7rem;margin:2px 0 0;color:var(--muted)}
  tr.chain-hdr td:nth-child(5){grid-area:badge}
  tr.chain-hdr td:nth-child(5) .badges{justify-content:flex-start}
  tr.chain-hdr td:nth-child(5) .toggle-icon{margin-left:auto;float:none}

  /* Sub-rows inside an expanded chain: white card with terracotta left edge */
  tr.chain-row{background:var(--paper);border-left:3px solid var(--toast)}
  tr.chain-row td{background:transparent !important;border:none}
  tr.chain-row td.name-cell{padding-left:0}
  tr.chain-row td.name-cell::before{display:none}

  /* Filter bar: 3 clean rows on mobile.
     Row 1: Alles | Regulier | Luxe | Provincie (4 chips fit in one line)
     Row 2: Search input — full width
     Row 3: CSV / Excel — right-aligned */
  .filters{flex-wrap:wrap;gap:6px 6px;padding:12px 14px;align-items:center}
  .filters-label{display:none}
  .filters .cat-btn,.filters .type-btn{order:1;flex:0 1 auto;padding:6px 10px;font-size:.74rem}
  .filters .filter-sep{display:none}
  .filters .prov-select{order:2;flex:1 1 0;min-width:0;padding:6px 26px 6px 10px;font-size:.74rem;background-position:right 8px center}
  .filters .search-input{order:3;flex:1 1 100%;padding:9px 14px;font-size:.86rem;margin-top:2px}
  .filters .filter-count{order:4;flex:1 1 auto;margin-left:0;text-align:left;font-size:.78rem}
  .filters .dl-group{order:5;margin-left:auto;gap:6px}
  .filters .dl-btn{padding:6px 10px;font-size:.72rem}

  /* Show all rows by default on mobile (no "show more" needed since they're cards) */
  .show-more-btn{display:none !important}
}

/* On the slice page, the city/postcode columns are redundant in a single-slice view —
   collapse city cell into smaller text on desktop and hide entirely on mobile in /stad/ */

/* Postcode search bar placeholder — actual implementation lives in templates */
.pc-search-wrap{
  display:flex;gap:10px;align-items:center;margin:18px 0 4px;
  max-width:480px;width:100%;
}
.pc-search-wrap input{
  flex:1;min-width:0;padding:12px 16px;border:1px solid var(--line);border-radius:4px;
  font-size:.95rem;font-family:'Inter',sans-serif;background:var(--paper);
  color:var(--ink);transition:border-color .15s,box-shadow .15s;
}
@media(max-width:480px){
  .pc-search-wrap{flex-direction:column;align-items:stretch}
  .pc-search-wrap button{width:100%}
}
.pc-result-card{box-sizing:border-box;max-width:100%}
.pc-search-wrap input:focus{outline:none;border-color:var(--toast);box-shadow:0 0 0 4px rgba(184,105,29,.12)}
.pc-search-wrap button{
  padding:12px 20px;border:1px solid var(--ink);border-radius:4px;
  background:var(--ink);color:var(--cream);font-weight:600;
  font-family:'Inter',sans-serif;font-size:.86rem;cursor:pointer;
  transition:background .15s,border-color .15s;white-space:nowrap;
  letter-spacing:.01em;
}
.pc-search-wrap button:hover{background:var(--toast)}
.pc-geo-btn{
  padding:12px 14px !important;flex:0 0 auto;
  background:var(--paper) !important;color:var(--ink) !important;
  border:1px solid var(--line) !important;font-size:1.05rem !important;
  line-height:1;
}
.pc-geo-btn:hover{background:var(--line-soft) !important;border-color:var(--toast) !important}
@media(max-width:480px){
  /* On mobile, put input on its own row and put both buttons side-by-side */
  .pc-search-wrap{flex-direction:row !important;flex-wrap:wrap;align-items:stretch}
  .pc-search-wrap input{flex:1 1 100% !important;margin-bottom:8px}
  .pc-search-wrap button[type="submit"]{flex:1 1 auto;width:auto !important}
  .pc-geo-btn{width:auto !important}
}
.pc-results{margin-top:14px;display:none}
.pc-results.show{display:block}
.pc-result-card{
  background:var(--paper);border:1px solid var(--line);border-radius:12px;
  padding:14px 18px;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center;gap:14px;
  text-decoration:none;color:inherit;transition:all .15s;
}
.pc-result-card:hover{border-color:var(--toast);background:var(--cheese)}
.pc-result-card .l{flex:1;min-width:0}
.pc-result-card .nm{font-family:'Fraunces',serif;font-weight:700;font-size:1rem;color:var(--ink);letter-spacing:-.01em}
.pc-result-card .meta{font-size:.78rem;color:var(--muted);margin-top:2px}
.pc-result-card .pr{font-family:'Fraunces',serif;font-weight:700;font-size:1.2rem;color:var(--toast);letter-spacing:-.02em;white-space:nowrap}
.pc-result-card .dist{font-size:.72rem;color:var(--muted);display:block;text-align:right;margin-top:2px;font-weight:500}
.pc-empty{font-size:.85rem;color:var(--muted);font-style:italic;padding:14px 18px}