/* ============================================================================
   Joenit public site — suggested retail prices ("Adviesprijzen") page.
   Layered on top of styles.css (shares the :root palette + top chrome). Owns
   the price intro, the filter bar, and the per-brand price grids.
   ========================================================================== */

/* page intro band */
.pricing__head{
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(1.6rem,4vw,2.8rem) clamp(1rem,4vw,2.5rem) .6rem;
}
.pricing__head h1{font-family:var(--font-display); font-size:clamp(1.7rem,3.4vw,2.5rem)}
.pricing__head p{color:var(--text-soft); max-width:64ch; margin-top:.5rem}
.pricing__vat{
  display:flex; flex-wrap:wrap; gap:.4rem 1rem; align-items:baseline;
  font-size:.82rem; color:var(--grey-500); margin-top:.7rem;
}
.pricing__updated{font-weight:600}

/* "this is placeholder data" ribbon — shown only while prices.json is sample */
.sampleribbon{
  max-width:var(--maxw); margin:.8rem auto 0;
  padding:.55rem .9rem; border-radius:var(--radius-sm);
  background:#fff6e5; border:1px solid #f1d59a; color:#8a5a00;
  font-size:.86rem; font-weight:600;
}
.sampleribbon[hidden]{display:none}

/* ============================== filter bar =============================== */
.pricing__filters{
  max-width:var(--maxw); margin:1rem auto 0; padding:0 clamp(1rem,4vw,2.5rem);
  display:flex; flex-wrap:wrap; gap:.7rem 1rem; align-items:center;
}
.search{
  flex:1 1 260px; max-width:360px; padding:.6rem .75rem; font:inherit;
  border:1px solid var(--grey-300); border-radius:var(--radius-sm);
  background:var(--grey-50); color:var(--text);
}
.search:focus{outline:2px solid var(--accent-hi); outline-offset:1px; background:#fff}

.chips{display:flex; flex-wrap:wrap; gap:.4rem}
.chip{
  --c:var(--steel);
  border:1px solid var(--grey-300); background:#fff; color:var(--grey-700);
  font:inherit; font-weight:600; font-size:.82rem; cursor:pointer;
  padding:.34rem .7rem; border-radius:999px; transition:.15s;
  display:inline-flex; align-items:center; gap:.4rem;
}
.chip::before{content:""; width:.6rem; height:.6rem; border-radius:50%; background:var(--c)}
.chip:hover{border-color:var(--c)}
.chip.on{background:var(--c); color:#fff; border-color:var(--c)}
.chip.on::before{background:#fff}

.listhead{
  max-width:var(--maxw); margin:.9rem auto 0; padding:0 clamp(1rem,4vw,2.5rem);
  font-size:.78rem; font-weight:700; color:var(--text-soft);
}

/* ============================== brand grids ============================= */
.brands{
  max-width:var(--maxw); margin:.6rem auto clamp(2rem,6vw,4rem);
  padding:0 clamp(1rem,4vw,2.5rem);
  display:flex; flex-direction:column; gap:1.1rem;
}

.brandcard{
  --c:var(--steel);
  background:var(--panel); border:1px solid var(--panel-edge);
  border-radius:var(--radius); box-shadow:var(--shadow-sm); overflow:hidden;
}
.brandcard__head{
  display:flex; align-items:center; gap:.7rem; cursor:pointer;
  padding:.85rem 1.1rem; border-bottom:1px solid var(--panel-edge);
  background:linear-gradient(0deg, var(--grey-50), #fff);
}
.brandcard__dot{width:.85rem; height:.85rem; border-radius:50%; background:var(--c); flex:none}
.brandcard__name{font-family:var(--font-display); font-size:1.15rem; margin:0; color:var(--ink)}
.brandcard__count{
  margin-left:auto; font-size:.78rem; font-weight:700; color:var(--grey-700);
  background:var(--grey-100); border-radius:999px; padding:.15rem .6rem;
}
.brandcard.collapsed .brandcard__table{display:none}
.brandcard.collapsed .brandcard__head{border-bottom:0}

.brandcard__table{overflow-x:auto}
.brandcard__table table{width:100%; border-collapse:collapse; font-size:.9rem}
.brandcard__table thead th{
  text-align:left; font-size:.72rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--grey-500);
  padding:.55rem 1.1rem; border-bottom:1px solid var(--panel-edge);
  background:var(--grey-50); position:sticky; top:0;
}
.brandcard__table tbody td{padding:.5rem 1.1rem; border-bottom:1px solid var(--grey-100)}
.brandcard__table tbody tr:last-child td{border-bottom:0}
.brandcard__table tbody tr:hover{background:var(--grey-50)}

.c-code{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:.82rem; color:var(--grey-700); white-space:nowrap;
}
.c-name{color:var(--ink)}
.c-price{text-align:right; white-space:nowrap; font-weight:700; color:var(--ink)}
th.c-price{text-align:right}
.noprice{font-weight:600; color:var(--grey-500); font-style:italic}

.empty{padding:1.4rem 1.1rem; color:var(--text-soft); font-size:.9rem}

@media (max-width:560px){
  .brandcard__table tbody td.c-code, .brandcard__table thead th.c-code{display:none}
}