/*
 * Homepage: één rustige visuele laag boven op de herbruikbare componenten.
 * Alleen hier, zodat product-, service- en kassapagina's voorspelbaar blijven.
 */

body.home { background: var(--bsv-surface); }

.home .site-main { padding-top: var(--bsv-space-3); }
.home .block { margin-bottom: var(--bsv-space-6); }

.home .block-head {
  align-items: flex-start;
  margin-bottom: 16px;
}

.home .block-head h2 {
  max-width: 24ch;
  font-size: 24px;
  line-height: 1.12;
  letter-spacing: -0.03em;
}

.home .block-head p {
  margin-top: 7px;
  font-size: var(--bsv-fs-copy);
  line-height: var(--bsv-lh-copy);
}

/* De streep onder de tekst en niet onder het vlak: zo kan het klikvlak de
   44 px uit CLAUDE.md halen zonder dat de streep 12 px onder de tekst hangt. */
.home .show-all {
  min-height: var(--bsv-touch);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 13px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.home .show-all:hover { text-decoration: none; }

.home .promo {
  grid-template-columns: 1fr;
  gap: 0;
  margin-bottom: var(--bsv-space-6);
}

.home .promo__card-icon {
  display: block;
  width: 24px;
  height: 24px;
  margin-bottom: 10px;
  color: var(--bsv-ink);
}

/* Intro en beloften staan als één rustige strook bovenaan, niet als zes
   losse kaartjes en niet als banner. */
.home-proof {
  margin-bottom: var(--bsv-space-6);
  padding: 4px 0 14px;
  border-bottom: 1px solid var(--bsv-line);
}

.home-proof > .block { margin-bottom: var(--bsv-space-6); }

.home .usp-bar {
  border: 0;
  border-radius: 0;
  background: transparent;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Op een telefoon twee naast elkaar: vier onder elkaar duwden de eerste
   categorierij 250 px naar beneden, en de beloften zijn niet waar iemand voor
   komt. */
.home .usp:nth-child(odd) { border-right: 1px solid var(--bsv-line-soft); }
.home .usp__body { align-items: flex-start; padding: 10px 12px 10px 0; }
.home .usp:nth-child(even) .usp__body { padding-left: 12px; }
.home .usp:nth-child(-n+2) { border-bottom: 1px solid var(--bsv-line-soft); }
.home .usp:nth-child(n+3) { border-bottom: 0; }

.home .usp__icon {
  flex-basis: 24px;
  width: 24px;
  height: 24px;
  border-radius: 0;
  background: transparent;
  color: var(--bsv-ink);
}

.home .usp b { font-size: 12.5px; }
.home .usp small { display: block; margin-top: 2px; font-size: 11.5px; }

.home .scene-grid { gap: 16px; }

/* De productkaart is dezelfde als in het overzicht: een wit blok met rand en
   schaduw bij aanwijzen. Op de homepage stond alleen een rand om het beeld, en
   dan las een rij als losse plaatjes in plaats van als producten. */
.home .lane {
  grid-auto-columns: minmax(190px, 72vw);
  gap: 20px;
  padding-bottom: 12px;
}

/* De chips op de homepage waren hier teruggebracht tot onderstreepte tekst.
   Dat werkte zolang er een gekleurd bolletje voorstond; zonder dat bolletje
   bleef er een rij kale links over. Ze dragen nu de pilvorm uit
   components.css, met een lijnicoon ervoor. */

/* Beoordelingen: links de score, daarnaast de nieuwste beoordelingen zelf.
   Eén omlijning om het geheel, met scheidingslijnen ertussen in plaats van
   losse kaartjes; anders komt het cijfer los van de teksten te staan en lijkt
   het twee blokken over hetzelfde onderwerp.

   Zonder citaten blijft het bij de score, en dan is de balk één rij: cijfer,
   sterren en aantal naast elkaar. De extra klasse zet dat om zodra er wel
   citaten zijn, want het aantal kolommen hangt af van hoeveel beoordelingen
   we konden ophalen en dat weet CSS zelf niet. */
.home .review-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border: 1px solid var(--bsv-line);
  border-radius: var(--bsv-radius);
}

.home .review-score {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 20px;
  padding: 16px;
}

.home .review-bar--quotes {
  display: grid;
  grid-auto-flow: row;
  grid-auto-columns: minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}

.home .review-bar--quotes .review-score {
  grid-column: 1 / -1;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
}

.home .review-bar--quotes > * + * {
  border-top: 1px solid var(--bsv-line-soft);
  border-left: 0;
}

.home .review-quote {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 20px;
}

/* De sterrenrij is precies zo breed als de svg erin. In een kolom rekt hij
   anders mee tot de volle breedte, en dan knipt de volle laag niets meer af:
   een negen zag er zo hetzelfde uit als een tien. */
.home .review-quote .review-score__stars { align-self: flex-start; }

.home .review-quote__text { margin: 0; }

.home .review-quote__text p {
  margin: 0;
  color: var(--bsv-body);
  font-size: 14px;
}

.home .review-quote__who {
  margin-top: auto;
  padding-top: 4px;
  color: var(--bsv-muted);
  font-size: 12px;
}

.home .review-quote__who b {
  display: block;
  color: var(--bsv-ink);
  font-size: 13px;
}

.home .review-score__number {
  color: var(--bsv-ink);
  font-size: 28px;
  line-height: 1;
}

.home .review-score__stars {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 2px;
  color: var(--bsv-line);
  line-height: 0;
}

.home .review-score__star { display: inline-block; flex: 0 0 auto; }
.home .review-score__star-stop--filled { stop-color: var(--bsv-star); }
.home .review-score__star-stop--empty { stop-color: var(--bsv-line); }

.home .review-score__count { color: var(--bsv-muted); font-size: 13px; }

/* Nieuwsbrief: donker vlak, zelfde behandeling als de hero. */
.home .newsletter {
  display: flex;
  flex-flow: column wrap;
  justify-content: space-between;
  gap: 20px 32px;
  align-items: stretch;
  padding: 20px;
  border-radius: var(--bsv-radius-sm);
  background: var(--bsv-ink);
}

.home .newsletter__intro { max-width: 46ch; }
.home .newsletter__intro h2 { color: #fff; font-size: 22px; letter-spacing: -0.02em; }

.home .newsletter__intro p {
  margin: 8px 0 0;
  color: rgb(255 255 255 / 78%);
  font-size: var(--bsv-fs-copy);
  line-height: var(--bsv-lh-copy);
}

.home .newsletter__form { flex: 1 1 auto; min-width: 0; }
.home .newsletter__form .bsv-form { margin-bottom: 0; }

.home .newsletter__row { display: flex; flex-direction: column; gap: 10px; }
.home .newsletter__row input[type="email"] { flex: 1; min-width: 0; }

.home .newsletter__note { margin: 10px 0 0; color: rgb(255 255 255 / 60%); font-size: 12px; }
.home .newsletter__note a { color: #fff; text-decoration: underline; }

.home .newsletter__message {
  margin: 0;
  padding: 8px 14px;
  border-radius: var(--bsv-radius-sm);
  background: var(--bsv-success-soft);
  color: var(--bsv-success-strong);
  font-weight: 600;
}

/* Op een donkere achtergrond blijft de foutmelding een lichte chip: dezelfde
   tekstkleur als op wit, maar dan wél leesbaar. */
.home .newsletter .bsv-form__error {
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: var(--bsv-radius-sm);
  background: var(--bsv-error-soft);
}

.home .promo__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
}

/* --- Hero ------------------------------------------------------------------
   Compact en donker, naar xxlnutrition.nl: de belofte, de knop naar de
   bestsellers en drie echte producten als witte kaartjes. 300 px op een breed
   scherm, zodat de categorierij eronder boven de vouw begint. */
.home .hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  margin-bottom: var(--bsv-space-5);
  padding: 26px 20px 22px;
  overflow: hidden;
  border-radius: var(--bsv-radius-lg);
  color: #fff;
  background: var(--bsv-black);
}

.home .hero__text { min-width: 0; overflow-wrap: anywhere; }

.home .hero__eyebrow {
  margin: 0 0 10px;
  padding-left: 11px;
  border-left: 3px solid var(--bsv-yellow);
  color: var(--bsv-yellow);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home .hero__title {
  max-width: 16ch;
  margin: 0;
  color: #fff;
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.home .hero__lead {
  max-width: 44ch;
  margin: 12px 0 18px;
  color: rgb(255 255 255 / 80%);
  font-size: var(--bsv-fs-copy);
  line-height: var(--bsv-lh-copy);
}

.home .hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: center;
}

.home .hero__alt {
  display: inline-flex;
  align-items: center;
  min-height: var(--bsv-touch);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--bsv-yellow);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.home .hero__alt:hover { color: var(--bsv-yellow); }

/* Drie rechte productkaartjes, naast elkaar op alle schermformaten. */
.home .hero__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  gap: var(--bsv-space-3);
}

.home .hero__card a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  padding: 8px 8px 10px;
  border-radius: var(--bsv-radius);
  background: var(--bsv-surface);
  color: var(--bsv-ink);
  transition: transform 160ms ease;
  box-shadow: none;
}

.home .hero__card a:hover { text-decoration: none; transform: translateY(-3px); }

.home .hero__card-img {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--bsv-radius-sm);
  background: var(--bsv-surface);
}

.home .hero__card-img img { width: 100%; height: 100%; object-fit: contain; }

.home .hero__card-name {
  display: block;
  overflow-wrap: anywhere;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.25;
}

.home .hero__card-price { font-size: 13px; font-weight: 700; }
.home .hero__card-price del { margin-right: 4px; color: var(--bsv-muted); font-weight: 400; }
.home .hero__card-price ins { text-decoration: none; }

/* --- Shop per categorie -----------------------------------------------------
   Naar ah.nl: lichte tegels met het product erop en de naam eronder, in een
   rij die in zijn eigen kader zijwaarts schuift. De pakshots staan op wit;
   met mix-blend-mode gaat dat wit op in het grijs van de tegel. */
.home .cat-rail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 2px 2px 10px;
}

.home .cat-rail__tile:nth-child(n + 9) { display: none; }

/* De pijltjes van de rij (components.css) staan hier op het midden van het
   beeld, niet op het midden van de tegel: anders zitten ze over de naam. */
.home .cat-rail ~ .rail__arrow { top: 55px; }

.home .cat-rail__tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  color: var(--bsv-ink);
  scroll-snap-align: start;
}

.home .cat-rail__tile:hover { text-decoration: none; }
.home .cat-rail__tile:hover b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

.home .cat-rail__img {
  display: grid;
  place-items: center;
  aspect-ratio: 5 / 4;
  margin-bottom: 8px;
  overflow: hidden;
  border-radius: var(--bsv-radius);
  background: var(--bsv-bg);
  transition: background 160ms ease;
}

.home .cat-rail__tile:hover .cat-rail__img { background: var(--bsv-line-soft); }

.home .cat-rail__img img {
  width: 100%;
  height: 100%;
  padding: 12px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.home .cat-rail__tile b { overflow-wrap: anywhere; font-size: 13.5px; line-height: 1.25; }
.home .cat-rail__tile small { overflow-wrap: anywhere; color: var(--bsv-muted); font-size: 12px; }

/* --- Wat ga je doen? --------------------------------------------------------
   Een rustige keuzeroute: representatief beeld, korte uitleg en een expliciete
   bestemming. Tekst staat niet op fotografie, zodat elke kaart snel scanbaar
   blijft en ook lichte of drukke beelden de leesbaarheid niet bepalen. */
.home .situaties {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.home .situatie {
  display: flex;
  flex-direction: row;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--bsv-line);
  background: var(--bsv-surface);
  color: var(--bsv-ink);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
  border-radius: var(--bsv-radius-sm);
}

.home .situatie:hover {
  border-color: var(--bsv-line-hover);
  box-shadow: var(--bsv-shadow-hover);
  text-decoration: none;
  transform: translateY(-2px);
}

.home .situatie__media {
  display: block;
  flex: 0 0 112px;
  overflow: hidden;
  background: var(--bsv-bg);
}

.home .situatie__media img {
  position: static;
  z-index: auto;
  width: 100%;
  height: 100%;
  transition: transform 220ms ease;
  object-fit: cover;
}

.home .situatie:hover .situatie__media img { transform: scale(1.025); }

.home .situatie__body {
  min-width: 0;
  overflow-wrap: anywhere;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
}

.home .situatie__body b {
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.home .situatie__nut {
  color: var(--bsv-body);
  line-height: var(--bsv-lh-copy);
  font-size: var(--bsv-fs-base);
}

.home .situatie__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 24px;
  margin-top: auto;
  padding-top: 8px;
  color: var(--bsv-forest);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.35;
}

.home .situatie__link svg {
  flex: 0 0 auto;
  transition: transform 160ms ease;
}

.home .situatie:hover .situatie__link { text-decoration: underline; text-underline-offset: 3px; }
.home .situatie:hover .situatie__link svg { transform: translateX(3px); }

/* Themablok: één categorie als winkel-in-de-winkel. Links een sfeervlak
   (dat mag in een promotievlak, §2 van docs/design-reference.md), rechts de
   gewone productkaarten, met een kleinere h3 in plaats van nog een
   block-head. */
.home .thema__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.home .thema__intro {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 200px;
  padding: 18px;
  border-radius: var(--bsv-radius-sm);
  background: var(--bsv-ink);
  overflow: hidden;
  isolation: isolate;
}

.home .thema__intro:hover { text-decoration: none; }
.home .thema__intro > .promo__bg { object-position: center; }

.home .thema__intro-body { display: block; color: #fff; }
.home .thema__intro-body b { display: block; font-size: 19px; }
.home .thema__intro-body small { display: block; margin-top: 2px; color: rgb(255 255 255 / 85%); font-size: 12.5px; }

.home .thema__intro-text {
  display: block;
  max-width: 34ch;
  margin-top: 10px;
  color: rgb(255 255 255 / 92%);
  font-size: var(--bsv-fs-copy);
  line-height: var(--bsv-lh-copy);
}

.home .thema__lane { min-width: 0; }

.home .thema__lane-title {
  margin: 0 0 10px;
  color: var(--bsv-ink);
  font-size: 15px;
  font-weight: 700;
}

@media (width >= 761px) {
  .home .site-main { padding-top: var(--bsv-space-5); }

  .home .hero {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 32px;
    align-items: center;
    min-height: 300px;
    padding: 36px 40px;
  }

  .home .hero__title { font-size: 38px; }

  /* De kaarten krimpen mee met hun kolom. Met een vaste 3 x 150 px stak de rij
     tussen 780 en 1000 px naar links uit over de kop en de intro. */
  .home .hero__cards {
    grid-template-columns: repeat(3, minmax(0, 150px));
    gap: var(--bsv-space-3);
    justify-content: end;
    padding: 12px 0;
  }


  .home .cat-rail {
    grid-auto-flow: column;
    grid-auto-columns: 148px;
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .home .cat-rail::-webkit-scrollbar { display: none; }
  .home .cat-rail__tile:nth-child(n + 9) { display: flex; }
  .home .situaties { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home .situatie { flex-direction: column; }
  .home .situatie__media { flex: none; aspect-ratio: 4 / 3; }
  .home .situatie__body { padding: 18px; }
  .home .block-head { align-items: flex-end; margin-bottom: 20px; }
  .home .block-head h2 { font-size: 28px; }
  .home-proof { padding: 8px 0 14px; }
  .home-proof > .block { margin-bottom: 0; }
  .home .usp:nth-child(odd) { border-right: 1px solid var(--bsv-line-soft); }
  .home .usp__body { align-items: center; padding: 14px 20px; }
  .home .usp:nth-child(even) .usp__body { padding-left: 20px; }
  .home .lane { grid-auto-columns: minmax(210px, 260px); }
  .home .thema__grid { grid-template-columns: 280px minmax(0, 1fr); gap: 20px; }
  .home .thema__intro { min-height: 100%; padding: 20px; }
    .home .review-score { padding: 20px 24px; }
  .home .review-score__number { font-size: 34px; }

  /* Drie citaten naast een vaste kolom worden hier te smal om te lezen. De
     score gaat over de volle breedte, de citaten staan er met z'n tweeën
     onder en de derde vult de rij uit. */
  .home .review-bar--quotes {
    grid-auto-flow: row;
    grid-auto-columns: minmax(0, 1fr);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home .review-bar--quotes .review-score { grid-column: 1 / -1; }

  .home .review-bar--quotes > * + * { border-left: 0; }
  .home .review-bar--quotes > :nth-child(n+2) { border-top: 1px solid var(--bsv-line-soft); }
  .home .review-bar--quotes > :nth-child(even) { border-right: 1px solid var(--bsv-line-soft); }

  .home .newsletter {
    flex-direction: row;
    align-items: center;
    padding: 32px;
  }

  .home .newsletter__form { flex: 0 1 380px; min-width: 260px; }
  .home .newsletter__row { flex-direction: row; }
}

@media (width >= 1101px) {
  .home .promo__main { min-height: 400px; padding: 48px 56px; }
  .home .usp-bar { grid-template-columns: repeat(4, 1fr); }

  .home .hero { padding: 40px 48px; }
  .home .hero__cards { grid-template-columns: repeat(3, minmax(0, 168px)); }

  /* Eén rij: acht tegels vullen het raster precies, de rest staat erachter
     in de schuifrij. De belangrijkste staan vooraan, zie category-rail.php. */
  .home .cat-rail { grid-auto-columns: calc((100% - 7 * 12px) / 8); }
  .home .situaties { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
  .home .usp__body { padding: 0 20px; }
  .home .usp:first-child .usp__body { padding-left: 0; }
  .home .usp:nth-child(n) { border-right: 1px solid var(--bsv-line-soft); border-bottom: 0; }
  .home .usp:last-child { border-right: 0; }
  .home .usp:last-child .usp__body { padding-right: 0; }

  .home .review-bar--quotes {
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    grid-template-columns: 220px;
  }

  .home .review-bar--quotes .review-score { grid-column: auto; }
  .home .review-bar--quotes > * + * { border-top: 0; border-left: 1px solid var(--bsv-line-soft); }
  .home .review-bar--quotes > :nth-child(n+2) { border-top: 0; }
  .home .review-bar--quotes > :nth-child(even) { border-right: 0; }
}

/* Dezelfde dichtheid blijft bij tekstvergroting binnen de beschikbare kolom. */
.home .usp,
.home .usp__body,
.home .usp__text { min-width: 0; overflow-wrap: anywhere; }

/* Ook met vergrote tekst en extra letterafstand past de primaire actie. */
.home .hero__actions .btn { min-width: 0; max-width: 100%; overflow-wrap: anywhere; white-space: normal; text-align: center; }