/* ============================================================
   Foto de Vakman — shop.css
   Paginaspecifieke aanvullingen op assets/css/main.css voor de
   shop-, categorie- en zoekpagina. Geen nieuwe fdv-klassen: dit
   bestand verfijnt uitsluitend bestaande bouwstenen.
============================================================ */

/* ── Kop: kruimelpad, titel, chips ───────────────────────── */
.fdv-main .fdv-breadcrumb { margin-bottom: 18px; }
.fdv-main .fdv-stack + .fdv-scroller,
.fdv-main .fdv-stack + nav .fdv-scroller,
.fdv-main .fdv-stack + .fdv-grid { margin-top: 28px; }

/* De scroller is in de kern op productkaarten afgestemd; hier draagt
   hij chips, die alleen hun eigen breedte nodig hebben. */
.fdv-scroller > li { flex: 0 0 auto; max-width: none; }
.fdv-scroller .fdv-chip .fdv-small { color: inherit; opacity: 0.65; }
.fdv-chip.is-active .fdv-small { color: inherit; opacity: 0.8; }

/* ── Zoeksuggesties: kaart als rij ───────────────────────── */
.fdv-card--hover.fdv-row { padding: 18px 20px; gap: 16px; align-items: center; }
.fdv-card--hover.fdv-row > .fdv-media,
.fdv-card--hover.fdv-row > .fdv-brandtile {
  width: 52px; height: 52px; min-height: 0; flex: 0 0 auto;
  border-radius: var(--fdv-r-md); font-size: 13px;
}
.fdv-card--hover .fdv-h5 { font-family: var(--fdv-font-display); font-weight: 600; color: var(--fdv-ink); line-height: 1.3; }

/* ── Filters ─────────────────────────────────────────────── */
.fdv-filters--desktop { position: sticky; top: 88px; max-height: calc(100vh - 110px); overflow-y: auto; scrollbar-width: none; }
.fdv-filters--desktop::-webkit-scrollbar { width: 0; height: 0; }
.fdv-filters fieldset,
.fdv-drawer__body fieldset { border: 0; margin: 0; padding: 0; }
.fdv-filters .fdv-btn { margin-top: 8px; }

/* Prijsvelden binnen een facet: twee gelijke kolommen, compacter dan
   de standaardvelden in een formulier. */
.fdv-facet__body .fdv-row { align-items: flex-end; gap: 10px; padding-top: 4px; }
.fdv-facet__body .fdv-field { flex: 1 1 0; min-width: 0; }
.fdv-facet__body .fdv-input { min-height: 42px; padding-inline: 12px; font-size: 15px; }
.fdv-facet__body .fdv-hint { margin-top: 10px; }
.fdv-facet__body .fdv-btn { margin-top: 12px; align-self: flex-start; }

/* ── Werkbalk ────────────────────────────────────────────── */
.fdv-toolbar { margin-bottom: 4px; }
.fdv-toolbar__left .fdv-body { font-size: 15px; font-weight: 500; color: var(--fdv-ink); }
.fdv-toolbar__right form { display: flex; align-items: center; gap: 10px; }
.fdv-toolbar__right .fdv-select { width: auto; min-height: 36px; font-size: 14px; padding: 0 38px 0 14px; }
.fdv-toolbar__right .fdv-small { white-space: nowrap; }
.fdv-toolbar__clear { border: 0; background: none; cursor: pointer; }

/* Rasterschakelaar zonder JavaScript: radio's sturen de weergave, de
   labels dragen de knopvorm uit main.css. Browsers zonder :has()
   houden simpelweg het raster aan. */
.fdv-viewtoggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.fdv-viewtoggle label {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  background: var(--fdv-surface); color: var(--fdv-muted); cursor: pointer;
}
.fdv-viewtoggle input:checked + label { background: var(--fdv-ink); color: #fff; }
.fdv-viewtoggle input:focus-visible + label { outline: 2px solid var(--fdv-accent); outline-offset: -2px; }

.fdv-listing:has(.fdv-viewtoggle input[value="lijst"]:checked) .fdv-grid--4 { grid-template-columns: minmax(0, 1fr); }
.fdv-listing:has(.fdv-viewtoggle input[value="lijst"]:checked) .fdv-product { flex-direction: row; gap: 20px; }
.fdv-listing:has(.fdv-viewtoggle input[value="lijst"]:checked) .fdv-product__media { width: 180px; flex: 0 0 auto; }
.fdv-listing:has(.fdv-viewtoggle input[value="lijst"]:checked) .fdv-product__body { padding-top: 0; }

/* ── Productkaart ────────────────────────────────────────── */
/* De kern zet .fdv-media > img absoluut; hier zit de afbeelding in een
   link, dus die link neemt de plaats van het beeldvak in. Productshots
   staan altijd volledig in beeld (contain), niet bijgesneden. */
.fdv-product__media > a { position: absolute; inset: 0; display: block; }
.fdv-product__media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  padding: 8%; object-fit: contain;
  transition: transform var(--fdv-t);
}
.fdv-product:hover .fdv-product__media img { transform: scale(1.03); }
.fdv-product__fav { position: absolute; top: 10px; right: 10px; z-index: 2; }
.fdv-product .fdv-price { flex-wrap: wrap; }
.fdv-product .fdv-price .fdv-xsmall { align-self: baseline; }
.fdv-product__foot form { display: flex; }

@media (max-width: 640px) {
  .fdv-product__foot .fdv-btn { width: 100%; }
}

/* ── Lege staat en pager ─────────────────────────────────── */
.fdv-card--pad .fdv-row { gap: 10px; }
.fdv-section-head + .fdv-grid { margin-top: 4px; }
.fdv-note + .fdv-grid { margin-top: 20px; }
.fdv-toolbar + .fdv-grid,
.fdv-toolbar + .fdv-card { margin-top: 24px; }

/* ── Lades zonder JavaScript ─────────────────────────────── */
/* Met JS openen de knoppen de lade via data-fdv-open; zonder JS zijn
   het gewone ankers en opent :target dezelfde lade. */
.fdv-drawer:target { display: block; }
.fdv-drawer__foot .fdv-btn--ghost { flex: 0 0 auto; }
.fdv-drawer .fdv-filters .fdv-check { min-height: 44px; }