/**
 * Winkel (cadeaus) — moderniseringslaag boven de lab-stijl.
 *
 * style.css is verbatim uit het design lab gegenereerd en mag niet met de hand.
 * Deze laag staat daar netjes buiten en wordt alleen op de winkel en de
 * moment-categorieen ingeladen (zie inc/shop.php), na style.css, zodat de
 * overrides winnen zonder.
 *
 * Doel: een kortere, rustigere, modernere cadeaus-pagina.
 */

/* 1. Voorbeeldkaart als slanke strip, niet meer een halflege band ---------- */
.preview.preview--winkel {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px 24px;
  max-width: none;
  border-radius: var(--r-vlak);
}
.preview--winkel .preview-art {
  flex: 0 0 auto;
  width: 168px;
  height: auto;
  min-height: 132px;
  padding: 16px 12px;
  border-radius: var(--r-vlak);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  overflow: visible;
}
/* Kleiner en met genoeg regels, zodat de zin niet meer wordt afgeknipt. */
.preview--winkel .preview-art .q { font-size:var(--fs-label); line-height: 1.24; }

/* Ligt het beeld van het ontwerp al klaar, dan staat dat in het duimpje in
   plaats van de tekst. Het vult de binnenmaat precies, dus de omlijsting van
   .preview-art blijft de rand en de tekening brengt er geen tweede bij.
   De opmaak hoort hier en niet in style.css: dit bestand laadt later en zou
   elke regel daar toch overschrijven. */
.preview--winkel .preview-art--beeld img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--r-vlak);
}
.preview--winkel .preview-side { flex: 1; min-width: 0; }
@media (max-width: 640px) {
  .preview.preview--winkel { gap: 16px; }
  .preview--winkel .preview-art { width: 132px; min-height: 118px; }
}
/* Onder 460px past de strip niet meer naast elkaar. Hij stond hier op
   display:none, waardoor de kop "Jouw voorbeeld, dit komt erop te staan" boven
   niets stond: precies de zin die de bezoeker wil zien viel weg. Nu stapelt de
   strip, en staat het voorbeeld op volle breedte boven de tekst. */
@media (max-width: 460px) {
  .preview.preview--winkel { flex-direction: column; align-items: stretch; }
  .preview--winkel .preview-art { width: auto; min-height: 96px; padding: 16px; }
}

/* 2. Momentfilter op een strakke, zijwaarts scrollbare regel --------------- */
.cmpl-momentfilter { flex-direction: row; align-items: center; gap: 12px; }
.cmpl-momentfilter__label { flex: 0 0 auto; }
.cmpl-momentfilter__chips {
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 8px;
  padding-bottom: 4px;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, var(--kleur-ink) 94%, transparent);
          mask-image: linear-gradient(90deg, var(--kleur-ink) 94%, transparent);
}
.cmpl-momentfilter__chips::-webkit-scrollbar { display: none; }
.cmpl-momentfilter .chip { flex: 0 0 auto; padding: 8px 16px; font-size:var(--fs-label); }
@media (max-width: 640px) {
  .cmpl-momentfilter { flex-direction: column; align-items: stretch; gap: 8px; }
  .cmpl-momentfilter__chips { -webkit-mask-image: none; mask-image: none; }
}

/* 3. Lichtere, beeld-voorop kaarten: hele kaart klikbaar, geen knop -------- */
.products {
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}
@media (max-width: 900px) { .products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .products { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

.pcard--plat { position: relative; }
.pcard--plat .body { padding: 12px 16px 16px; gap: 4px; }
.pcard--plat h3 { font-size:var(--fs-body); line-height: 1.18; }
.pcard--plat h3 a { color: inherit; text-decoration: none; }
.pcard--plat .price { margin-top: 4px; font-size:var(--fs-body); }
/* Stretched link: de hele kaart is klikbaar met precies een toegankelijke link. */
.pcard--plat .pcard__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
@media (hover: hover) and (pointer: fine){.pcard--plat:hover h3 a { color: var(--terra); }}
@media (max-width: 520px) {
  .pcard--plat h3 { font-size:var(--fs-body); }
  .pcard--plat .body { padding: 12px 12px 12px; }
}

/* 4. Soort-eerst: kies waar je je compliment op wil ---------------------- */
.cmpl-soortkop {
  margin: 32px 0 12px;
  font-size:var(--fs-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.cmpl-soorten {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.cmpl-soort {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border:var(--lijn-dikte) solid var(--line);
  border-radius: var(--r-vlak);
  background: var(--white);
  color: inherit;
  text-decoration: none;
  transition: transform .18s ease;
}
@media (hover: hover) and (pointer: fine){.cmpl-soort:hover {
  transform: translateY(-4px);
  box-shadow:none;
}}
.cmpl-soort__beeld {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--soft);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cmpl-soort__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* De kaartbody: naam en maat boven, prijs in een eigen strook onderaan.
   De strook staat met margin-top:auto tegen de onderrand, zodat in een rij
   alle prijzen op dezelfde hoogte staan, ongeacht de lengte van de naam. */
.cmpl-soort__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 16px;
  flex: 1 1 auto;
}
.cmpl-soort__naam {
  font-family:var(--cmpl-sans);
  font-weight: 600;
  font-size: var(--fs-lead);
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.cmpl-soort__formaat {
  color: var(--muted);
  font-size: var(--fs-label);
  line-height: 1.35;
}
.cmpl-soort__voet {
  margin-top: auto;
  padding-top: 12px;
  width: 100%;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
/* Nadruk op de site is gewicht, niet kleur: rood betekent hier dat je iets kunt doen. */
.cmpl-soort__prijs {
  font-weight: 600;
  font-size: var(--fs-body);
  color: var(--ink);
}
.cmpl-soort__varianten {
  color: var(--muted);
  font-size: var(--fs-label);
}
/* Ruimte boven de terug-link zodat hij niet tegen de voorbeeldkaart plakt,
   met een haarlijn als rustige scheiding tussen "kiezen" en "de opties". */
.cmpl-soort-terug {
  margin: 32px 0 24px;
  padding-top: 24px;
  border-top:var(--lijn-dikte) solid var(--line);
}
.cmpl-terug-link {
  display: inline-block;
  margin-bottom: 4px;
  color: var(--terra);
  font-weight: 600;
  font-size:var(--fs-body);
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine){.cmpl-terug-link:hover { color: var(--knop-vol-hover); }}
@media (max-width: 900px) { .cmpl-soorten { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .cmpl-soorten { grid-template-columns: 1fr; } }

/* 5. Filterblok: Moment + Prijs als nette uitklappers (soort-kaarten blijven) - */
.cmpl-filters {
  margin: 16px 0 8px;
  padding: 16px 24px 24px;
  border:var(--lijn-dikte) solid var(--line);
  border-radius: var(--r-vlak);
  background: var(--white);
  box-shadow:none;
}
.cmpl-filters__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.cmpl-filters__head h2 {
  margin: 0;  font-weight: 500;
  font-size:var(--fs-lead); color: var(--ink);
}
.cmpl-fclear { color: var(--terra); font-size:var(--fs-label); font-weight: 600; text-decoration: none; }
@media (hover: hover) and (pointer: fine){.cmpl-fclear:hover { text-decoration: underline; }}
.cmpl-filters__row {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px; margin-top: 16px;
}
.cmpl-fselect { position: relative; }
.cmpl-fselect summary {
  list-style: none; cursor: pointer; min-height: 52px;
  display: flex; align-items: center; gap: 12px; padding: 0 16px;
  border:var(--lijn-dikte) solid var(--line); border-radius: var(--r-vlak); background: var(--soft);
  color: var(--ink);
}
.cmpl-fselect summary::-webkit-details-marker { display: none; }
.cmpl-fselect summary::after { content: "⌄"; margin-left: auto; color: var(--terra); font-size:var(--fs-lead); line-height: 1; }
.cmpl-fselect[open] summary::after { transform: rotate(180deg); }
.cmpl-fselect summary span {
  font-weight: 650; font-size:var(--fs-label); letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
.cmpl-fselect summary b {
  font-weight: 500; color: var(--ink);
  font-family: 'Newsreader', Georgia, serif; font-size:var(--fs-body);
}
.cmpl-fmenu {
  position: absolute; inset: calc(100% + 8px) 0 auto 0; z-index: 5;
  display: flex; flex-direction: column; gap: 4px; min-width: 220px; padding: 8px;
  border:var(--lijn-dikte) solid var(--line); border-radius: var(--r-vlak); background: var(--white);
  box-shadow:none;
}
.cmpl-fmenu .chip {
  display: flex; align-items: center; gap: 12px; width: 100%;
  border: 0; background: transparent; border-radius: var(--r-vlak);
  padding: 8px 12px; font-size:var(--fs-body); font-weight: 500; color: var(--ink);
  text-align: left; text-decoration: none; box-shadow:none; min-height: 0;
}
@media (hover: hover) and (pointer: fine){.cmpl-fmenu .chip:hover { background: var(--soft); color: var(--terra); }}
.cmpl-fmenu .chip.is-active { background: rgba(224, 85, 95, .10); color: var(--terra); font-weight: 650; }
.cmpl-filters__foot {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-top: 12px; padding-top: 12px; border-top:var(--lijn-dikte) solid var(--line);
  font-size:var(--fs-label); color: var(--muted);
}
.cmpl-active-label { font-weight: 600; }
.cmpl-filters__foot .chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: var(--r-rond); min-height: 0;
  background: rgba(224, 85, 95, .08); color: var(--terra); border:var(--lijn-dikte) solid rgba(224, 85, 95, .22);
  font-size:var(--fs-label); text-decoration: none; box-shadow:none;
}
@media (max-width: 640px) {
  .cmpl-filters__row { grid-template-columns: 1fr; }
  .cmpl-fmenu { position: static; inset: auto; margin-top: 8px; box-shadow:none; }
}

/* 5b. Binnen een soort: aantal, prijsfilter en sortering in hetzelfde kader.
   Buiten een soort blijft de losse werkbalk staan.                          */
.cmpl-filters__telling {
  display: inline-flex; align-items: center; gap: 12px;
  font-size:var(--fs-label); color: var(--muted);
}
.cmpl-active-leeg { font-style: italic; color: var(--muted); }
.cmpl-filters__sort { margin-left: auto; }
.cmpl-filters__sort form { display: flex; align-items: center; gap: 8px; margin: 0; }
@media (max-width: 640px) {
  .cmpl-filters__sort { margin-left: 0; width: 100%; }
  .cmpl-filters__sort .sel { width: 100%; }
}

/* 6. Het uitlegblok onder het raster ------------------------------------- *
 * Stond in `.wrap art-body`, en `art-body{max-width:70ch}` overschreef daar
 * de wrap van 1120: een kolom van 474 px met 395 px leegte aan weerszijden,
 * die niet meer op de linkerlijn van het raster erboven begon. Nu een gewone
 * wrap met twee kolommen; de leesbreedte zit op de kolominhoud, waar hij
 * hoort. De lijn boven de sectie komt uit `.section + .section`.            */
.cmpl-uitleg__kolommen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
}
.cmpl-uitleg__kolommen--een { grid-template-columns: minmax(0, 1fr); }
.cmpl-uitleg__kolom > * { max-width: 58ch; }
.cmpl-uitleg__kolom h2 {
  margin: 0 0 12px;
  font-size: var(--fs-kop);
  color: var(--ink);
}
.cmpl-uitleg__kolom p {
  margin: 0 0 12px;
  color: var(--ink);
  font-size: var(--fs-body);
}
.cmpl-uitleg__kolom p:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
  .cmpl-uitleg__kolommen { grid-template-columns: 1fr; gap: 32px; }
}