/* ============================================================================
   Catalogus in de Avantis 2.0-taal
   ----------------------------------------------------------------------------
   Dit bestand laadt ná catalogus.css en doet twee dingen:

   1. De tokens omzetten naar het 2.0-systeem. Dat is de kern van de belofte:
      de catalogus is gebouwd op een tokenlaag, dus een nieuw design vervangt
      kleuren en vormen zonder de filterlogica aan te raken.

   2. Het karakter aanzetten waar tokens alleen niet volstaan. 2.0 is een
      datablad: haarlijnen in plaats van schaduwen, monospace voor meetwaarden,
      geen afgeronde hoeken, en een productraster dat als specificatieblad
      leest in plaats van als webshop.
   ========================================================================== */

/* ------------------------------------------------------------- 1. de tokens */
.av-catalogus {
  --av-accent: var(--accent);
  --av-accent-donker: var(--accent-deep);
  --av-accent-zacht: color-mix(in srgb, var(--accent) 9%, transparent);
  --av-tekst: var(--ink);
  --av-tekst-zacht: var(--ink-mute);
  --av-lijn: var(--line);
  --av-vlak: var(--white);
  --av-vlak-zacht: var(--bg);
  --av-schaduw: none;              /* diepte komt hier van lijnen */
  --av-radius: 0;                  /* datablad-strak */
  --av-ruimte: 1.15rem;
  --av-font: var(--font-body);
}

/* ---------------------------------------------------- 2. karakter aanzetten */

/* kop en balk */
.av-cat-titel {
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  margin-bottom: .4rem;
}
.av-cat-intro {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .06em;
  color: var(--metal-dark);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

/* Kolomverdeling: de opmaak van de live site leunt op Bootstrap-gridklassen
   (col-lg-3 enz.) die in het redesign niet bestaan — hier definiëren we de
   twee kolommen zelf: filters links, resultaten rechts. */
.av-cat-layout {
  display: grid;
  grid-template-columns: clamp(230px, 21vw, 300px) minmax(0, 1fr);
  gap: var(--gap);
  align-items: start;
}

/* filterkolom: geen kaart maar een kolom met een haarlijn ernaast */
.av-cat-filters {
  background: transparent;
  border: 0;
  border-right: 1px solid var(--line);
  padding: 0 var(--gap) 0 0;
  position: sticky;
  top: 4.6rem;               /* onder de plakkende navigatie */
  max-height: calc(100vh - 5.6rem);
  overflow-y: auto;
}
.av-cat-filterkop h2 {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: .74rem;
  letter-spacing: .14em;
  color: var(--metal-dark);
}
.av-cat-wis { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em; }

.av-cat-zoek input {
  border-color: var(--line-strong);
  padding: .7rem .8rem;
}

.av-cat-groep > summary {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: .76rem;
  letter-spacing: .08em;
  text-transform: none;
  padding-block: .3rem;
}
.av-cat-optie { font-size: .84rem; }
.av-cat-optie-aantal { font-family: var(--font-mono); font-size: .72rem; }
.av-cat-bereik { font-family: var(--font-mono); font-size: .76rem; }

/* resultatenbalk */
.av-cat-telling { font-family: var(--font-mono); font-size: .76rem; letter-spacing: .05em; }
.av-cat-sorteer { font-family: var(--font-mono); font-size: .76rem; letter-spacing: .05em; }
.av-cat-sorteer select { border-color: var(--line-strong); border-radius: 0; }

/* productraster: hairline-grid in plaats van losse kaarten met schaduw */
.av-cat-grid {
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}

/* Kaartinhoud over de hele rij uitlijnen: beeld, naam, badges, specificaties
   en voet krijgen via subgrid één gedeelde rijhoogte per kaartenrij, zodat
   productnamen en specs op exact dezelfde hoogte beginnen — ongeacht of een
   titel over twee regels loopt of de badge-regel leeg is. Browsers zonder
   subgrid vallen terug op de flex-opbouw uit catalogus.css. */
@supports (grid-template-rows: subgrid) {
  .av-cat-kaart {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 5;                 /* beeld / naam / badges / specs / voet */
  }
  .av-cat-kaart-inhoud {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
    row-gap: .5rem;
    align-items: start;
  }
  .av-cat-kaart-voet { margin-top: 0; align-self: end; }
  /* in subgrid moet de lege badge-regel WEL blijven bestaan: hij bezet zijn
     rijspoor zodat de specs eronder uitgelijnd blijven (basis verbergt hem) */
  .av-cat-badges:empty { display: flex; min-height: 0; }
}
.av-cat-kaart {
  border: 0;
  background: var(--white);
  transition: background .25s var(--ease-out);
}
.av-cat-kaart:hover { box-shadow: none; background: var(--bg); }

/* beeldvak: vaste verhouding die óók standhoudt bij staande productfoto's —
   zonder overflow-guard rekt een portretbeeld het vak op en zakt de kaart uit */
.av-cat-beeld { background: var(--bg); aspect-ratio: 5 / 4; overflow: hidden; }
.av-cat-kaart:hover .av-cat-beeld img { transform: scale(1.03); }
.av-cat-beeld img { width: 100%; height: 100%; object-fit: contain; transition: transform .6s var(--ease-out); }

.av-cat-kaart-titel { font-family: var(--font-display); font-size: 1.05rem; letter-spacing: -.01em; }

/* specificaties als datablad-regels met stippellijn ertussen */
.av-cat-specs {
  font-family: var(--font-mono);
  font-size: .74rem;
  grid-template-columns: 1fr auto;
  gap: 0;
}
.av-cat-specs dt {
  color: var(--ink-mute);
  padding: .3rem 0;
  border-bottom: 1px solid var(--line);
}
.av-cat-specs dd {
  text-align: right;
  padding: .3rem 0;
  border-bottom: 1px solid var(--line);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* keurmerken als omlijnde labels, niet als gekleurde pillen */
.av-cat-badge {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--ink-mute);
  border-radius: 0;
  font-family: var(--font-mono);
  letter-spacing: .05em;
  padding: .16rem .42rem;
}
.av-cat-badge.is-taal { border-style: dashed; }

.av-cat-link {
  font-family: var(--font-body);
  border-bottom: 1px solid var(--ink);
  padding-bottom: .1rem;
  color: var(--ink);
  transition: gap .25s var(--ease-out), color .2s, border-color .2s;
}
.av-cat-link:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; }
.av-cat-vergelijk { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em; }

/* vergelijkbalk en -tabel */
.av-cat-vergelijkbalk { background: var(--graphite); }
.av-cat-vergelijkbalk-inhoud { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .05em; }
.av-cat-vergelijkbalk button { border-radius: 0; font-family: var(--font-body); font-weight: 600; }
.av-cat-vergelijkbalk button[data-actie="toon-vergelijking"] { background: var(--accent); }

.av-cat-modaal { background: color-mix(in srgb, var(--ink) 62%, transparent); z-index: var(--z-modal); }
.av-cat-modaal-venster { border-radius: 0; border: 1px solid var(--line-strong); }
.av-cat-tabel { font-family: var(--font-mono); }
.av-cat-tabel thead th { border-bottom: 1px solid var(--ink); }
.av-cat-tabel td { font-variant-numeric: tabular-nums; }
.av-cat-tabel tr.is-verschil td, .av-cat-tabel tr.is-verschil th {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.av-cat-tabel-verwijder { font-family: var(--font-mono); font-size: .72rem; }

.av-cat-geen { font-family: var(--font-mono); font-size: .82rem; }

@media (max-width: 991.98px) {
  .av-cat-layout { grid-template-columns: 1fr; }
  .av-cat-filters {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 0 0 var(--gap);
    position: static;
    max-height: none;
    overflow: visible;
  }
}