/* De nieuwe homepage. Een eigen bestand: het laadt alleen als het nieuwe
   ontwerp aan staat (live, of in de voorvertoning), zodat bezoekers van de
   huidige homepage er niets van binnenkrijgen. Alleen de tokens uit
   axyvera.css; een losse kleur hier zou de enige op de site zijn.

   Gaat het nieuwe ontwerp voorgoed live, dan hoort dit in axyvera.css. */

/* -- de balken bovenaan ------------------------------------------------ */

.voorvertoningbalk { background: var(--let-op); color: #fff; font-size: 13.5px; font-weight: 600; }
.voorvertoningbalk .omhulsel {
  min-height: 38px; display: flex; align-items: center; justify-content: center;
  gap: var(--r4); padding-block: var(--r2); text-align: center;
}
.voorvertoningbalk a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.voorvertoningbalk .omhulsel { flex-wrap: wrap; }
.voorvertoningbalk__stijlen { display: inline-flex; gap: 2px; background: rgba(0, 0, 0, .18); border-radius: 999px; padding: 2px; }
.voorvertoningbalk__stijlen a { text-decoration: none; padding: 3px 12px; border-radius: 999px; }
.voorvertoningbalk__stijlen a[aria-current] { background: #fff; color: var(--let-op); }
.voorvertoningbalk form { margin: 0; }
.voorvertoningbalk button {
  font: inherit; font-weight: 700; color: var(--let-op); background: #fff;
  border: 0; border-radius: 999px; padding: 4px 14px; cursor: pointer;
}

.aankondiging { background: var(--accent); color: var(--accent-op); font-size: 14px; font-weight: 600; }
.aankondiging .omhulsel {
  min-height: 38px; display: flex; align-items: center; justify-content: center;
  padding-block: var(--r2); text-align: center;
}
.aankondiging a { color: var(--accent-op); text-decoration: underline; text-underline-offset: 3px; }

/* -- banner: reviewscore en klikbare flacons ------------------------------ */

.bannerscore {
  display: inline-flex; align-items: center; gap: var(--r2); flex-wrap: wrap;
  margin-top: var(--r5); font-size: 14px; color: var(--inkt-zacht); text-decoration: none;
}
.bannerscore:hover { color: var(--inkt); text-decoration: none; }
.bannerscore strong { font-family: var(--display); font-size: 16px; color: var(--inkt); }
.bannerscore span:last-child { text-decoration: underline; text-underline-offset: 3px; }

a.banner__vial { transition: transform var(--overgang); }
a.banner__vial:hover { transform: translateY(-4px); }

/* -- betaalmethodes ------------------------------------------------------ */

.betaalstrook { background: var(--vlak); border-bottom: var(--lijn); }
.betaalstrook__binnen {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: var(--r3); padding-block: var(--r3); font-size: 13.5px; color: var(--inkt-stil);
}
.betaalstrook img { height: 28px; width: auto; display: block; }
.betaalstrook strong { color: var(--inkt); }

/* -- rubriektegels ------------------------------------------------------- */

.rubriektegels { padding-bottom: 0; }
/* Breed genoeg voor een lange rubrieknaam naast de foto: bij 220 pixels
   paste "Onderzoeksbenodigdheden" niet, en liep hij de tegel uit. Is het
   scherm te smal voor drie van 330, dan worden het er vanzelf twee. */
.rubriektegels__rij {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: var(--r4);
}
.rubriektegel {
  display: flex; align-items: center; gap: var(--r4);
  padding: var(--r3) var(--r5) var(--r3) var(--r3);
  background: var(--vlak); border: var(--lijn); border-radius: var(--radius);
  color: var(--inkt); text-decoration: none;
  transition: border-color var(--overgang);
}
.rubriektegel:hover { border-color: var(--accent); text-decoration: none; }
.rubriektegel__beeld {
  flex: 0 0 auto; width: 88px; height: 66px; overflow: hidden;
  border-radius: var(--radius-s); background: var(--vlak-dof);
}
.rubriektegel__beeld img, .rubriektegel__beeld svg { width: 100%; height: 100%; object-fit: cover; display: block; }
/* De tekst mag smaller worden dan zijn langste woord (`min-width: 0`; een
   flexkind doet dat anders niet), en een woord dat dan nog niet past, wordt
   afgebroken -- met een streepje waar de browser de taal kent. Zo blijft
   een lange naam uit het beheer altijd binnen de tegel. */
.rubriektegel > span:last-child { min-width: 0; }
.rubriektegel strong {
  display: block; font-family: var(--display); font-size: 17px; line-height: 1.25;
  overflow-wrap: anywhere; hyphens: auto;
}
.rubriektegel__aantal { font-size: 13px; color: var(--inkt-stil); }
/* Twee tegels naast elkaar op een tablet (rond 768 pixels): een kleinere
   foto, anders past "Onderzoeksbenodigdheden" er niet naast. */
@media (min-width: 561px) and (max-width: 900px) {
  .rubriektegel { gap: var(--r3); }
  .rubriektegel__beeld { width: 60px; height: 46px; }
}

/* -- snel in de wagen op de kaart ---------------------------------------- */

.kaart__snel { display: flex; flex-direction: column; gap: var(--r2); width: 100%; }
.kaart__snel select {
  min-height: 40px; padding: 0 var(--r3); width: 100%;
  font-family: var(--tekst); font-size: 14px; color: var(--inkt);
  background: var(--grond); border: var(--lijn-sterk); border-radius: var(--radius);
}
.kaart__snel select:focus { border-color: var(--accent); outline: none; }

/* -- bundelkorting ------------------------------------------------------- */

.bundelstrook {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: var(--r3) var(--r5); margin-top: var(--r6); padding: var(--r4) var(--r5);
  background: var(--vlak); border: 1px dashed var(--accent-rand); border-radius: var(--radius);
}
.bundelstrook strong { font-family: var(--display); font-size: 16px; }
.bundelstrook__treden { display: flex; flex-wrap: wrap; gap: var(--r2); }
.bundelstrook__treden span {
  font-family: var(--mono); font-size: 13px; padding: 6px 10px; border-radius: 999px;
  background: var(--accent-vlak); color: var(--accent); border: 1px solid var(--accent-rand);
}
.bundelstrook__uitleg { font-size: 13px; color: var(--inkt-stil); }

/* -- labresultaten -------------------------------------------------------- */

.labblok {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: var(--r5) var(--r8); padding: var(--r7);
  background: var(--vlak); border: var(--lijn); border-radius: var(--radius-l);
}
.labblok > div { flex: 1 1 28rem; }
.labblok h2 { margin: var(--r2) 0 var(--r3); }
.labblok p { margin: 0; color: var(--inkt-zacht); line-height: 1.65; max-width: 60ch; }

/* -- vragen --------------------------------------------------------------- */

.homevragen {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: var(--r7); align-items: start;
}
.homevragen h2 { margin: var(--r2) 0 var(--r3); }
.homevragen > div > p { color: var(--inkt-zacht); margin: 0 0 var(--r4); }
.homevragen__lijst details { border-bottom: var(--lijn); padding: var(--r4) 0; }
.homevragen__lijst details:first-child { border-top: var(--lijn); }
.homevragen__lijst summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between;
  gap: var(--r4); font-weight: 600; font-size: 16px; color: var(--inkt);
}
.homevragen__lijst summary::-webkit-details-marker { display: none; }
.homevragen__lijst summary::after { content: "+"; color: var(--accent); font-size: 20px; line-height: 1; }
.homevragen__lijst details[open] summary::after { content: "–"; }
.homevragen__lijst p { margin: var(--r2) 0 0; color: var(--inkt-zacht); line-height: 1.6; }

/* -- calculator ----------------------------------------------------------- */

.calcblok {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: var(--r5); padding: var(--r6) var(--r7);
  background: var(--donker); color: var(--donker-inkt); border-radius: var(--radius-l);
}
.calcblok h2 { margin: 0 0 var(--r2); color: var(--donker-inkt); font-size: 22px; }
.calcblok p { margin: 0; color: var(--donker-zacht); max-width: 52ch; }

/* -- telefoon ------------------------------------------------------------- */

/* Op een telefoon staan de producten hoog: de vier beloftes twee bij twee
   en alleen met hun kop, en de rubrieken als een rij om opzij te vegen. */
@media (max-width: 560px) {
  .kenmerken__rij { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kenmerk { padding: var(--r3) var(--r2) var(--r3) 0; }
  .kenmerk:nth-child(2n) { padding-left: var(--r3); border-left: var(--lijn); }
  .kenmerk + .kenmerk { border-top: 0; }
  .kenmerk:nth-child(n + 3) { border-top: var(--lijn); }
  .kenmerk__bij { display: none; }
  .kenmerk__kop { font-size: 14px; }

  .rubriektegels__rij { display: flex; overflow-x: auto; gap: var(--r2); padding-bottom: var(--r1); }
  .rubriektegel { flex: 0 0 auto; padding: 6px var(--r4) 6px 6px; gap: var(--r2); }
  .rubriektegel__beeld { width: 44px; height: 34px; }
  .rubriektegel strong { font-size: 15px; }
  .rubriektegel__aantal { display: none; }

  .bundelstrook { justify-content: flex-start; }
  .homevragen { grid-template-columns: 1fr; gap: var(--r4); }
  .labblok, .calcblok { padding: var(--r5); }
}