/* ===== Stack N Snack — design tokens from the brandbook ===== */
:root {
  --orange: #FD7E3B;
  --burgundy: #4D0711;
  --yellow: #FDCC3B;
  --blue: #8BDFFA;
  --pink: #FAAEDC;
  --green: #C1CC52;
  --red: #BD1F17;
  --cream: #FEFEF6;
  --soft: #F5F1E3;
  --ink: #2A2118;
  --display: "Phudu", "Arial Black", sans-serif;
  --body: "Poppins", "Helvetica Neue", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--body);
  background: var(--cream);
  color: var(--ink);
  overflow-x: hidden;
}
/* height: auto zorgt dat de CSS de hoogte bepaalt en niet het height-attribuut
   in de HTML. Dat attribuut staat er alleen om de plek alvast vrij te houden. */
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

.container { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.center { text-align: center; margin-top: 40px; }

/* ===== Buttons ===== */
.btn {
  display: inline-block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 13px 26px;
  border-radius: 10px;
  transition: transform .15s ease, background .15s ease;
}
.btn:hover { transform: translateY(-2px); }

/* ===== Icons ===== */
.icon {
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  vertical-align: -0.18em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.btn--orange { background: var(--orange); color: #fff; }
.btn--cream { background: var(--cream); color: var(--burgundy); }
.btn--burgundy { background: var(--burgundy); color: #fff; }
.btn--full { width: 100%; text-align: center; }
.btn .arrow { margin-left: 6px; }

/* ===== Header / Hero ===== */
.hero {
  background: var(--burgundy);
  border-radius: 0 0 28px 28px;
  padding-bottom: 56px;
  overflow: hidden;
  position: relative;
}
.nav {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  max-width: 1160px;
  margin: 0 auto;
  padding: 26px 24px;
}
.logolink { grid-column: 1; grid-row: 1; display: block; }
.nav__links { grid-column: 2; grid-row: 1; display: flex; gap: 26px; margin-left: 44px; }
.nav__right { grid-column: 3; grid-row: 1; }
.nav__links a {
  color: #fff;
  font-family: var(--display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .92;
  transition: color .15s;
}
.nav__links a:hover { color: var(--orange); }
.nav__right { display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
.nav .btn--cream { padding: 11px 22px; }

/* Het honingpotveld: onzichtbaar voor mensen, bots vullen het wel in. Niet
   display:none, want sommige bots slaan verborgen velden juist over. */
.honingpot {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}
.formulier__melding {
  margin-top: 10px;
  font-size: 13px;
  color: #6b8f3a;
}
.formulier__melding--fout { color: var(--red); }

/* ===== Voor hoeveel personen kook je =====
   Staat boven de ingredientenlijst. Gevuld en rechthoekig zoals de rest. */
.porties {
  display: inline-flex;
  align-items: center;
  background: var(--soft);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 18px;
}
.porties__knop {
  width: 34px; height: 34px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1;
  color: var(--burgundy);
  transition: background .15s;
}
.porties__knop:hover:not(:disabled) { background: var(--yellow); }
.porties__knop:disabled { opacity: .3; cursor: default; }
.porties__aantal {
  min-width: 92px;
  text-align: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--burgundy);
}

/* ===== Voedingswaarde op de receptpagina =====
   Vier gelijke tegels, twee bij twee. Koolhydraten en vet tellen zo net zo hard
   mee als kcal en eiwit, wat eerlijker is als iemand op zijn macro's let. Het
   eiwitvakje is geel, want daar gaat het de meeste mensen om.
   De kop staat in dezelfde oranje stijl als INGREDIENTEN en BEREIDING. */
.voeding { margin-top: 34px; }
.voeding__tegels { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.voeding__tegels > div {
  background: var(--soft);
  border-radius: 12px;
  padding: 15px 12px 13px;
  text-align: center;
}
.voeding__tegels .voeding--eiwit { background: var(--yellow); }
.voeding__tegels dd {
  font-family: var(--display);
  font-weight: 800;
  font-size: 24px;
  line-height: 1;
  color: var(--burgundy);
  white-space: nowrap;
}
/* let op: dit moet specifieker zijn dan een losse .voeding__eh, anders zou de
   eenheid de blokopmaak van het label overnemen en op een eigen regel springen */
.voeding__tegels > div > dt {
  display: block;
  font-size: 11px;
  color: #8b8577;
  margin-top: 7px;
}
.voeding__tegels .voeding--eiwit > dt { color: #6b4a12; }

/* de eenheid in het gewone lettertype: het displayfont kent alleen
   hoofdletters, en "35,2 G" leest raar */
.voeding__eh {
  display: inline;
  font-family: var(--body);
  font-weight: 500;
  font-size: .5em;
  margin-left: 3px;
  vertical-align: .18em;
}

.voeding__label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.voeding__label b {
  font-family: var(--display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--burgundy);
  background: var(--yellow);
  border-radius: 8px;
  padding: 5px 10px;
}
.voeding__label span { font-size: 12.5px; color: #8b8577; }

/* het eiwitlabel op een receptkaartje */
.product__chips .chip--eiwit { background: var(--yellow); color: var(--burgundy); }

/* Een kop die er alleen staat voor schermlezers en zoekmachines. Geen
   display:none, want dan leest een schermlezer hem ook niet meer voor. */
.alleen-voorlezen {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ===== Losse woorden op de laatste regel =====
   Een kop of zinnetje dat eindigt met een woord alleen op de laatste regel ziet
   er rommelig uit. Twee gereedschappen:
     balance  verdeelt de regels even lang, goed voor korte koppen en zinnen
     pretty   houdt alleen de laatste regel gevuld, goed voor lopende tekst
   Browsers die ze niet kennen breken gewoon zoals eerst, dus dit kan geen kwaad. */
.product h3,
.section__sub,
.feature figcaption,
.cater__head h3,
.deal__info h3,
.step__body h3,
.custom-catering h3,
.reviews-leeg p,
.legal-head p {
  text-wrap: balance;
}

.footer__intro,
.product--recipe p,
.roulette__inner p,
.vnv__tekst,
.rhero__info > :where(p),
.rsteps__txt p,
.rtekst p,
.cat-intro p,
.app__copy > p,
.recept-kop p,
.rform__uitleg,
.cookiebanner p {
  text-wrap: pretty;
}

/* De taalkeuze is een gewone menulink, geen apart knopje. In de footer staat de
   taal waar je nu op staat vol en vet, de andere wat doffer: zo zie je in een
   oogopslag wat je leest en wat je kunt aanklikken. */
.footer a.taalnu { opacity: 1; font-weight: 700; }
.footer a.taalwissel { opacity: .58; }
.footer a.taalwissel:hover { opacity: 1; }

/* Het logo staat in twee vormen klaar: gestapeld voor de footer, liggend voor
   de balk. De hoogte bepaalt hoe groot hij staat, de breedte volgt vanzelf. */
.logo { display: block; width: auto; }
.logo--liggend { height: 38px; }
.logo--gestapeld { height: 62px; }

.nav__burger { display: none; flex-direction: column; gap: 5px; padding: 8px; }
.nav__burger span { width: 22px; height: 2.5px; background: #fff; border-radius: 2px; }
.nav__mobile { display: none; }
.nav__mobile.is-open {
  display: flex; flex-direction: column; gap: 4px;
  padding: 0 24px 18px;
}
.nav__mobile a {
  color: #fff; font-family: var(--display); font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  display: block; padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.hero__content { text-align: center; padding: 48px 24px 44px; position: relative; z-index: 2; }
.hero__pill {
  display: inline-block;
  background: var(--yellow);
  color: var(--burgundy);
  border-radius: 10px;
  font-weight: 600;
  font-size: 12.5px;
  padding: 7px 18px;
  margin-bottom: 26px;
}
.hero__title {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(52px, 8.5vw, 108px);
  line-height: .95;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .005em;
}
.hero__actions { display: flex; gap: 14px; justify-content: center; margin-top: 34px; flex-wrap: wrap; }

/* Category marquee */
.marquee { overflow: hidden; padding: 6px 0 4px; }
.marquee__track {
  display: flex;
  gap: 22px;
  width: max-content;
  animation: scroll 32s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.cat-card {
  width: 236px;
  flex-shrink: 0;
  border-radius: 20px;
  padding: 9px 9px 0;
  transition: transform .35s ease, opacity .35s ease;
}
.cat-card:hover { transform: translateY(-6px) rotate(-1.5deg); }
.marquee--klaar .cat-card { opacity: .35; }
.marquee--klaar .cat-card.is-winner { opacity: 1; }
.cat-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 14px;
}
.cat-card span {
  display: block;
  text-align: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #fff;
  padding: 11px 9px 14px;
  overflow-wrap: anywhere;
}
.cat-card--orange { background: var(--orange); }
.cat-card--blue { background: var(--blue); }
.cat-card--red { background: var(--red); }
.cat-card--yellow { background: var(--yellow); }
.cat-card--pink { background: var(--pink); }
@keyframes scroll {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - 11px)); }
}

/* ===== Sections ===== */
.section { padding: 84px 0; }
.section--white { background: var(--cream); }
.section--cream { background: var(--soft); }

.tag {
  display: table;
  margin: 0 auto 18px;
  background: var(--yellow);
  color: var(--burgundy);
  border-radius: 10px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 7px 18px;
}
.section__title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(34px, 4.6vw, 52px);
  color: var(--burgundy);
  text-transform: uppercase;
  text-align: center;
  line-height: 1.02;
}
.section__title--left { text-align: left; }
.section__title em { font-style: normal; color: var(--orange); }
.section__sub {
  text-align: center;
  color: #8b8577;
  font-size: 15px;
  margin-top: 12px;
}

/* ===== Menu tabs + products ===== */
.tabs { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 36px 0 44px; }
.tab {
  font-family: var(--display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--burgundy);
  background: var(--soft);
  padding: 11px 24px;
  border-radius: 10px;
  transition: background .15s, transform .15s;
}
.tab:hover { transform: translateY(-2px); }
.tab.is-active { background: var(--yellow); }

.products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.product {
  background: var(--soft);
  border-radius: 18px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  animation: pop .35s ease both;
}
.section--cream .product { background: var(--cream); }
.section--cream .product .product__chips span { background: var(--soft); }
@keyframes pop { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.product__img {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  overflow: hidden;
  border-radius: 12px;
}
.product__img img { max-height: 100%; object-fit: contain; transition: transform .25s ease; }
.product--recipe { cursor: pointer; }
.product--recipe .product__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}
.product__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.product__chips span {
  background: var(--cream);
  color: var(--burgundy);
  font-size: 11px;
  font-weight: 500;
  border-radius: 10px;
  padding: 4px 10px;
}
.product--recipe p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product:hover .product__img img { transform: scale(1.06) rotate(-1deg); }
.product h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  text-transform: uppercase;
  color: var(--ink);
}
.product p { color: #8b8577; font-size: 13.5px; margin: 8px 0 18px; flex: 1; }
.product__foot { display: flex; align-items: center; justify-content: space-between; }
.product__price { font-family: var(--display); font-weight: 700; font-size: 26px; color: var(--orange); }
.product__add {
  display: inline-block;
  background: var(--burgundy);
  color: #fff;
  border-radius: 10px;
  padding: 11px 18px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: transform .15s, background .15s;
}
.product:hover .product__add { background: var(--orange); transform: translateY(-2px); }

.carousel-nav { display: flex; gap: 10px; justify-content: center; margin-top: 36px; }
.carousel-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--soft);
  color: var(--burgundy);
  font-size: 16px;
  transition: background .15s, color .15s;
}
.carousel-btn:hover, .carousel-btn--active { background: var(--orange); color: #fff; }

/* ===== Stats + features ===== */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.stat {
  border-radius: 18px;
  text-align: center;
  padding: 34px 16px;
}
.stat strong {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: 38px;
  color: var(--burgundy);
}
.stat span { font-size: 14px; color: var(--burgundy); }
.stat--orange { background: var(--orange); }
.stat--blue { background: var(--blue); }
.stat--yellow { background: var(--yellow); }
.stat--pink { background: var(--pink); }

.features { display: grid; grid-template-columns: 37fr 63fr; gap: 22px; margin-top: 22px; }
.feature {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  height: 300px;
}
.feature img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.feature::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 45%, rgba(15, 6, 4, .78) 100%);
}
.feature figcaption {
  position: absolute;
  left: 22px;
  bottom: 18px;
  z-index: 1;
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.15;
  text-transform: uppercase;
  color: #fff;
}

/* ===== Process steps ===== */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 48px;
}
.step {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: var(--soft);
  transition: transform .2s ease;
}
.step:hover { transform: translateY(-6px); }
.step img {
  width: 100%;
  height: 250px;
  object-fit: cover;
}
.step__badge {
  position: absolute;
  top: 14px; left: 14px;
  background: var(--cream);
  color: var(--burgundy);
  font-family: var(--display);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 10px;
  padding: 5px 13px;
}
.step__body { padding: 20px 22px 22px; }
.step__body h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  text-transform: uppercase;
  color: var(--ink);
}
.step__body p {
  font-size: 13px;
  line-height: 1.55;
  color: #8b8577;
  margin: 7px 0 16px;
}
.step__word {
  display: inline-block;
  font-family: var(--display);
  font-weight: 800;
  font-size: 22px;
  text-transform: uppercase;
  line-height: 1;
  color: var(--burgundy);
  border-radius: 10px;
  padding: 9px 18px 10px;
}
.step__word--yellow { background: var(--yellow); }
.step__word--blue { background: var(--blue); }
.step__word--pink { background: var(--pink); }

/* ===== Combo banner ===== */
.combo-banner { background: var(--soft); padding: 0; }
.combo-banner img { width: 100%; }

/* ===== Deals ===== */
.deals {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  margin-top: 48px;
}
.deal {
  border-radius: 20px;
  padding: 26px;
  display: grid;
  grid-template-columns: 42fr 58fr;
  gap: 22px;
  align-items: stretch;
  transition: transform .18s ease;
}
.deal:hover { transform: translateY(-4px); }
.deal--orange { background: var(--orange); }
.deal--yellow { background: var(--yellow); }
.deal--blue { background: var(--blue); }
.deal--pink { background: var(--pink); }
.deal img {
  width: 100%;
  aspect-ratio: 1 / 1;
  align-self: center;
  object-fit: cover;
  border-radius: 14px;
}
.deal__info { text-align: left; }
.deal__save {
  display: inline-block;
  background: var(--cream);
  color: var(--burgundy);
  font-family: var(--display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 10px;
  padding: 5px 12px;
  margin-bottom: 8px;
}
.deal__info h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 21px;
  text-transform: uppercase;
  color: var(--burgundy);
}
.deal__info ul { margin: 8px 0 10px; }
.deal__info li {
  font-size: 12.5px;
  color: rgba(77, 7, 17, .85);
  padding-left: 12px;
  position: relative;
  line-height: 1.6;
}
.deal__info li::before { content: "•"; position: absolute; left: 0; }
.deal__price {
  font-family: var(--display);
  font-weight: 800;
  font-size: 30px;
  color: #fff;
  margin-bottom: 12px;
}
.deal__price s { font-size: 15px; font-weight: 500; opacity: .6; margin-right: 6px; }

/* ===== Catering ===== */
.catering {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 48px;
}
.cater {
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  transition: transform .18s ease;
}
.cater:hover { transform: translateY(-4px); }
.cater--orange { background: var(--orange); }
.cater--yellow { background: var(--yellow); }
.cater--pink { background: var(--pink); }
.cater img { width: 100%; height: 170px; object-fit: cover; }
.cater__badge {
  position: absolute;
  top: 12px; left: 12px;
  background: var(--pink);
  color: var(--burgundy);
  font-family: var(--display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 10px;
  padding: 5px 14px;
}
.cater__body { padding: 20px; }
.cater__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.cater__head h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  text-transform: uppercase;
  color: var(--burgundy);
}
.cater__head span { font-size: 12.5px; color: rgba(77, 7, 17, .75); }
.cater__head strong {
  font-family: var(--display);
  font-weight: 800;
  font-size: 28px;
  color: #fff;
}
.cater--yellow .cater__head strong, .cater--pink .cater__head strong { color: var(--cream); }
.cater__chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0 18px; }
.cater__chips span {
  background: rgba(254, 254, 246, .55);
  color: var(--burgundy);
  font-size: 11.5px;
  border-radius: 10px;
  padding: 5px 12px;
}

.custom-catering {
  background: var(--cream);
  border-radius: 18px;
  margin-top: 26px;
  padding: 26px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
/* op een lichte sectie juist het donkerdere vlak gebruiken */
.section--white .custom-catering { background: var(--soft); }
.custom-catering h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  text-transform: uppercase;
  color: var(--orange);
}
.custom-catering p { font-size: 13.5px; color: #8b8577; margin-top: 6px; }

/* ===== Reviews ===== */
.reviews {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 48px;
}
.review {
  background: var(--soft);
  border-radius: 18px;
  padding: 28px;
}
.review p {
  font-family: var(--display);
  font-weight: 600;
  font-size: 15.5px;
  text-transform: uppercase;
  line-height: 1.45;
  color: var(--ink);
}
.review__author { display: flex; align-items: center; gap: 10px; margin-top: 20px; font-size: 13.5px; }
.review__avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--burgundy);
  font-family: var(--display);
  font-weight: 700;
}
.review__avatar--orange { background: var(--orange); }
.review__avatar--blue { background: var(--blue); }
.review__avatar--pink { background: var(--pink); }


/* ===== App ===== */
.app { display: grid; grid-template-columns: 38fr 62fr; gap: 60px; align-items: center; }
.app__phone { display: flex; justify-content: center; }
/* HTML-mockup van de app */
.phone {
  width: 288px;
  background: var(--burgundy);
  border-radius: 44px;
  padding: 12px;
  transition: transform .25s ease;
}
.phone:hover { transform: translateY(-8px) rotate(-1deg); }
.phone__screen {
  background: var(--cream);
  border-radius: 34px;
  overflow: hidden;
  padding: 14px 16px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.phone__status {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 600;
  color: var(--burgundy);
}
.phone__signal { letter-spacing: 2px; font-size: 8px; align-self: center; }
.phone__logo { height: 15px; width: auto; margin: 0 auto; }
.phone__greet { font-size: 11.5px; color: #8b8577; text-align: center; margin-top: -6px; }
.phone__card {
  background: var(--soft);
  border-radius: 16px;
  overflow: hidden;
}
.phone__card img { width: 100%; height: 110px; object-fit: cover; }
.phone__card-info { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 3px; }
.phone__badge {
  align-self: flex-start;
  background: var(--yellow);
  color: var(--burgundy);
  font-family: var(--display);
  font-weight: 600;
  font-size: 8.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  border-radius: 6px;
  padding: 3px 8px;
}
.phone__card-info strong {
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  color: var(--ink);
}
.phone__meta { font-size: 10.5px; color: #8b8577; }
.phone__cta {
  background: var(--orange);
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-align: center;
  border-radius: 12px;
  padding: 12px;
}
.phone__row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--soft);
  border-radius: 12px;
  padding: 8px 10px;
}
.phone__row img { width: 42px; height: 42px; object-fit: cover; border-radius: 9px; }
.phone__row strong {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  color: var(--ink);
}
.phone__row span { font-size: 10px; color: #8b8577; }
.phone__nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: var(--burgundy);
  margin: 6px -16px 0;
  padding: 13px 22px;
  color: rgba(254, 254, 246, .55);
}
.phone__nav .icon { width: 19px; height: 19px; }
.phone__nav-active { color: var(--orange); }
.app__copy .tag { margin: 0 0 18px; }
.app__copy > p { color: #8b8577; font-size: 15px; margin-top: 18px; max-width: 480px; }
.app__stores { display: flex; gap: 14px; margin-top: 26px; flex-wrap: wrap; }
.store-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--cream);
  border-radius: 12px;
  padding: 10px 20px;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.15;
  transition: transform .15s;
}
.store-btn:hover { transform: translateY(-2px); }
.store-btn small { font-weight: 400; font-size: 11px; color: #8b8577; }
.store-btn__icon {
  width: 34px; height: 34px;
  background: var(--orange);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 13px;
}
.store-btn__icon .icon { width: 16px; height: 16px; }
.app__meta { display: flex; gap: 22px; margin-top: 26px; font-size: 13px; color: #8b8577; flex-wrap: wrap; }

/* ===== Footer ===== */
.footer {
  background: var(--burgundy);
  border-radius: 28px 28px 0 0;
  color: #fff;
  padding: 56px 0 40px;
  overflow: hidden;
}

.footer .footer__kop {
  font-family: var(--display);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 14px;
}
.footer__cols { display: grid; grid-template-columns: 1.2fr .85fr .85fr .85fr .7fr 1.1fr; gap: 30px; align-items: start; }
.footer__intro {
  font-family: var(--body);
  font-size: 13px;
  line-height: 1.65;
  color: rgba(254, 254, 246, .72);
  margin-top: 14px;
  max-width: 300px;
}
.footer__cols .logo { height: 46px; }
.footer__cols a {
  display: block;
  font-family: var(--display);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  opacity: .9;
  margin-bottom: 10px;
  transition: color .15s;
}
.footer__cols a:hover { color: var(--orange); }
.footer__store { display: flex !important; align-items: center; gap: 10px; text-transform: none !important; letter-spacing: 0 !important; font-family: var(--body) !important; line-height: 1.2; }
.footer__store small { font-size: 10.5px; opacity: .7; }
.footer__store-icon {
  width: 30px; height: 30px;
  background: var(--orange);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.footer__store-icon .icon { width: 13px; height: 13px; }
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-top: 44px;
  font-size: 12.5px;
  color: rgba(254, 254, 246, .55);
}

.legal-head { text-align: center; padding: 40px 0 26px; }
.legal-head h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(32px, 4.5vw, 50px);
  text-transform: uppercase;
  color: #fff;
}
.legal-head p { color: rgba(254, 254, 246, .65); font-size: 13.5px; margin-top: 12px; }
.legal { max-width: 760px; margin: 0 auto; }
.legal h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 21px;
  text-transform: uppercase;
  color: var(--burgundy);
  margin: 34px 0 12px;
}
.legal h2:first-child { margin-top: 0; }
.legal p { font-size: 15px; line-height: 1.75; color: var(--ink); margin-bottom: 14px; }
.legal ul { list-style: none; margin-bottom: 14px; }
.legal li { font-size: 15px; line-height: 1.7; color: var(--ink); padding: 4px 0 4px 24px; position: relative; }
.legal li::before { content: ""; position: absolute; left: 0; top: 12px; width: 11px; height: 11px; border-radius: 4px; background: var(--orange); }

/* Reactieformulier */
.rform { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.rform input, .rform textarea {
  background: var(--soft);
  border: none;
  border-radius: 10px;
  padding: 13px 16px;
  font-family: var(--body);
  font-size: 14px;
  color: var(--ink);
  resize: none;
}
.rform input:focus, .rform textarea:focus { outline: 2px solid var(--orange); }
.rform .btn { align-self: center; margin-top: 4px; }

/* Coming soon-sticker op de app-mockup */
.app__phone { position: relative; }
.app__soon {
  position: absolute;
  top: 8%; right: 8%;
  background: var(--pink);
  color: var(--burgundy);
  font-family: var(--display);
  font-weight: 800;
  font-size: 20px;
  line-height: 1;
  text-transform: uppercase;
  text-align: center;
  border-radius: 50%;
  width: 106px; height: 106px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(10deg);
  animation: wobble 3.2s ease-in-out infinite;
}
@keyframes wobble {
  0%, 100% { transform: rotate(10deg) scale(1); }
  50% { transform: rotate(6deg) scale(1.05); }
}

/* ===== Recept roulette banner ===== */
.roulette {
  background: var(--orange);
  position: relative;
  overflow: hidden;
  padding: 78px 24px;
  text-align: center;
}
.roulette__inner { position: relative; z-index: 1; }

/* Gerechten die vanaf de randen naar binnen kijken */
.roulette__foto {
  position: absolute;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 18px;
  width: 186px;
}
.roulette__foto--l1 { left: -52px; top: 6px; transform: rotate(-9deg); }
.roulette__foto--l2 { left: 98px; bottom: -58px; width: 152px; transform: rotate(7deg); }
.roulette__foto--l3 { left: 146px; top: -56px; width: 128px; transform: rotate(13deg); }
.roulette__foto--l4 { left: -66px; bottom: -48px; width: 124px; transform: rotate(4deg); }
.roulette__foto--r1 { right: -52px; top: -4px; transform: rotate(8deg); }
.roulette__foto--r2 { right: 110px; bottom: -56px; width: 152px; transform: rotate(-7deg); }
.roulette__foto--r3 { right: 154px; top: -52px; width: 128px; transform: rotate(-13deg); }

/* Minder ruimte, minder foto's: eerst de binnenste weg, daarna alle */
@media (max-width: 1240px) {
  .roulette__foto--l3, .roulette__foto--r3, .roulette__foto--l4 { display: none; }
}
@media (max-width: 900px) {
  .roulette { padding: 56px 24px 66px; }
  .roulette__foto { display: none; }
  /* op de telefoon nog twee die vanaf de onderhoeken meekijken */
  .roulette__foto--l1, .roulette__foto--r1 { display: block; width: 118px; top: auto; }
  .roulette__foto--l1 { left: -36px; bottom: -42px; transform: rotate(-8deg); }
  .roulette__foto--r1 { right: -36px; bottom: -42px; transform: rotate(8deg); }
}
.roulette h2 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(30px, 4.5vw, 46px);
  text-transform: uppercase;
  color: var(--burgundy);
}
.roulette p { color: #fff; font-size: 15px; margin: 8px 0 20px; }

/* ===== Deal-lijstjes met links ===== */
.deal__info li a { text-decoration: underline; text-underline-offset: 2px; transition: color .15s; }
.deal__info li a:hover { color: var(--burgundy); }

.store-btn--disabled { opacity: .55; cursor: default; }
.store-btn--disabled:hover { transform: none; }

/* ===== Overlays (randomizer + reactie) ===== */
.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 24px; }
.modal[hidden] { display: none; }
.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(42, 6, 12, .72);
  backdrop-filter: blur(3px);
}
.modal__card {
  position: relative;
  background: var(--cream);
  border-radius: 22px;
  width: min(860px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  animation: modalIn .25s ease;
}
@keyframes modalIn { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }
.modal__close {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 3;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--soft);
  color: var(--burgundy);
  font-size: 15px;
  font-weight: 700;
  transition: transform .15s;
}
.modal__close:hover { transform: scale(1.1); }
.modal__card--spin {
  width: min(430px, 100%);
  text-align: center;
  padding: 34px 30px 30px;
}
.spin__label {
  display: block;
  color: var(--orange);
  font-size: 13.5px;
  font-weight: 500;
  margin-bottom: 16px;
}
.spin__frame {
  width: 240px; height: 240px;
  margin: 0 auto 18px;
  border-radius: 20px;
  overflow: hidden;
  border: 5px solid var(--yellow);
  background: var(--soft);
}
.spin__frame img { width: 100%; height: 100%; object-fit: cover; }
.modal__card--spin h3 {
  font-family: var(--display);
  font-weight: 800;
  font-size: 24px;
  text-transform: uppercase;
  color: var(--burgundy);
  min-height: 30px;
  margin-bottom: 16px;
}

/* ===== Receptpagina ===== */
.rpage-hero { border-radius: 0 0 28px 28px; padding-bottom: 64px; }
.rhero {
  display: grid;
  grid-template-columns: 60fr 40fr;
  gap: 44px;
  align-items: center;
  padding-top: 34px;
}
.rhero__img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 22px;
}
.rhero__cat {
  display: inline-block;
  background: var(--orange);
  color: #fff;
  font-family: var(--display);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 10px;
  padding: 6px 15px;
  margin-bottom: 14px;
}
.rhero__info h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(30px, 4.5vw, 50px);
  text-transform: uppercase;
  line-height: 1.02;
  color: #fff;
}
.rhero__meta { display: flex; flex-wrap: wrap; gap: 9px; margin: 18px 0; }
.rhero__meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--cream);
  color: var(--burgundy);
  font-size: 12.5px;
  border-radius: 10px;
  padding: 6px 14px;
}
/* :where() haalt het gewicht uit deze regel, zodat .rhero__over eronder
   zijn eigen kleur en grootte mag zetten zonder specificiteitsgevecht. */
.rhero__info > :where(p) { color: rgba(255, 255, 255, .82); font-size: 14.5px; line-height: 1.65; }
.rp-cols { }
.modal__cols { display: grid; grid-template-columns: 38fr 62fr; gap: 30px; }
.modal__cols h4 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 12px;
}
.modal__ingredients li {
  font-size: 15.5px;
  color: var(--ink);
  border-bottom: 1px dashed #e8dfcc;
}
.modal__ingredients label {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 12px 0;
  cursor: pointer;
}
.modal__ingredients input {
  appearance: none;
  -webkit-appearance: none;
  width: 24px; height: 24px;
  border: 2px solid var(--orange);
  border-radius: 7px;
  background: var(--cream);
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
  margin-top: 1px;
  transition: background .15s;
}
.modal__ingredients input:checked { background: var(--orange); }
.modal__ingredients input:checked::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}
.modal__ingredients input:checked + span {
  text-decoration: line-through;
  opacity: .5;
}

/* Tipsblok op receptpagina's */
.rtips {
  margin: 44px 0 0;
  background: var(--soft);
  border-radius: 18px;
  padding: 26px 30px 24px;
}
.rtips__badge {
  display: inline-block;
  background: var(--yellow);
  color: var(--burgundy);
  font-family: var(--display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 10px;
  padding: 7px 16px;
  margin-bottom: 14px;
}
.rtips ul { list-style: none; }
.rtips li {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  padding: 5px 0 5px 26px;
  position: relative;
}
.rtips li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 12px;
  height: 12px;
  border-radius: 4px;
  background: var(--orange);
}

/* Bereidingsstappen: grote foto, kleine tekst eronder */
.rp-sticky { position: sticky; top: 24px; align-self: start; }
.rsteps { list-style: none; }
.rsteps li {
  background: var(--soft);
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 24px;
}
.rsteps li:last-child { margin-bottom: 0; }
.rsteps img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.rsteps__txt { display: flex; gap: 12px; align-items: flex-start; padding: 16px 20px 18px; }
.rsteps__num {
  width: 34px; height: 34px;
  background: var(--burgundy);
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.rsteps__txt p { font-size: 15px; line-height: 1.65; color: #6f6a5c; padding-top: 6px; }
@media (max-width: 800px) {
  .rhero { grid-template-columns: 1fr; gap: 26px; }
  .modal__cols { grid-template-columns: 1fr; }
  .rp-sticky { position: static; }
}

/* ===== Cookiemelding ===== */
.cookiebanner-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(42, 6, 12, .6);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.cookiebanner-overlay[hidden] { display: none; }
.cookiebanner {
  background: var(--cream);
  border-radius: 20px;
  padding: 30px 32px;
  max-width: 500px;
  animation: modalIn .25s ease;
}
.cookiebanner__logo { height: 34px; }
.cookiebanner h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  text-transform: uppercase;
  color: var(--burgundy);
  margin: 16px 0 10px;
}
.cookiebanner p { font-size: 13.5px; line-height: 1.7; color: #6f6a5c; margin-bottom: 20px; }
.cookiebanner a { color: var(--orange); text-decoration: underline; text-underline-offset: 2px; }

/* ===== Zwevende receptknop ===== */
.recept-zwevend {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 110;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}
.recept-knop {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  background: var(--orange);
  color: #fff;
  font-family: var(--display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: .03em;
  text-transform: uppercase;
  height: 52px;
  padding: 0 22px;
  border-radius: 12px;
  transition: transform .15s ease;
}
.recept-knop:hover { transform: translateY(-2px); }
.recept-kaart {
  width: min(320px, calc(100vw - 44px));
  background: var(--cream);
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  animation: modalIn .25s ease;
}
.recept-kop {
  background: var(--burgundy);
  color: #fff;
  padding: 20px 40px 18px 22px;
}
.recept-hallo {
  font-family: var(--display);
  font-weight: 800;
  font-size: 19px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.recept-kop p:last-child { font-size: 12.5px; line-height: 1.55; color: rgba(254, 254, 246, .8); }
.recept-sluiten {
  position: absolute;
  top: 10px; right: 12px;
  width: 30px; height: 30px;
  color: var(--cream);
  font-size: 14px;
  font-weight: 700;
}
.recept-form { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.recept-form input, .recept-form textarea {
  background: var(--soft);
  border: none;
  border-radius: 10px;
  padding: 11px 14px;
  font-family: var(--body);
  font-size: 13px;
  color: var(--ink);
  resize: none;
}
.recept-form input:focus, .recept-form textarea:focus { outline: 2px solid var(--orange); }
.recept-form .btn { font-size: 12px; padding: 12px; }
@media (max-width: 700px) {
  .recept-zwevend { right: 14px; bottom: 14px; }
  .recept-knop { height: 46px; font-size: 14px; padding: 0 16px; }
}

/* Zwevend cookieknopje linksonder */
.cookie-knop {
  position: fixed;
  left: 22px;
  bottom: 22px;
  z-index: 105;
  width: 52px; height: 52px;
  background: var(--orange);
  color: #fff;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s ease;
}
.cookie-knop:hover { transform: translateY(-2px); }
.koekje-icoon { width: 28px; height: 28px; display: block; }
@media (max-width: 700px) {
  .cookie-knop { left: 14px; bottom: 14px; width: 46px; height: 46px; }
  .koekje-icoon { width: 25px; height: 25px; }
}

@media (max-width: 1000px) {
  .footer__cols { grid-template-columns: 1fr 1fr 1fr; gap: 30px; }
  .footer__intro { max-width: none; }
}
@media (max-width: 620px) {
  /* Op de telefoon: logo en tekst over de volle breedte, daaronder de
     linkkolommen naast elkaar, en de app-blokjes weer over de volle breedte.
     Zo blijft er geen half lege kolom over. */
  .footer { padding: 44px 0 16px; border-radius: 22px 22px 0 0; }
  /* De drie linkkolommen naast elkaar, logo en app-blok over de volle breedte. */
  .footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 12px; }
  .footer__cols > div:first-child,
  .footer__cols > div:nth-last-child(2),
  .footer__cols > div:last-child { grid-column: 1 / -1; }
  /* de twee talen naast elkaar in plaats van onder elkaar */
  .footer__cols > div:nth-last-child(2) a { display: inline-block; margin-right: 18px; }

  .footer__cols .logo { height: 42px; }
  .footer__intro { font-size: 13px; max-width: 340px; margin-top: 12px; }
  .footer h4 { font-size: 11.5px; letter-spacing: .05em; margin-bottom: 10px; }
  .footer__cols a { font-size: 11.5px; letter-spacing: .03em; margin-bottom: 9px; overflow-wrap: anywhere; }

  /* App-blokjes naast elkaar in plaats van onder elkaar */
  .footer__cols > div:last-child { display: flex; flex-direction: column; }
  .footer__stores { display: flex; gap: 10px; flex-wrap: wrap; }
  .footer__store { flex: 1 1 150px; margin-bottom: 0 !important; }

  /* Het jaartal staat gecentreerd helemaal onderaan, zonder lijn erboven. */
  .footer__bottom {
    margin-top: 30px;
    padding: 0;
    justify-content: center;
    text-align: center;
  }
}

/* ===== Receptenoverzicht (recepten.html) ===== */
.ovz-bar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--cream);
  padding: 18px 0 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
}
.ovz-zoekveld { position: relative; width: min(440px, 100%); }
.ovz-zoekveld input {
  width: 100%;
  background: var(--soft);
  border: none;
  border-radius: 10px;
  padding: 14px 16px 14px 46px;
  font-family: var(--body);
  font-size: 14px;
  color: var(--ink);
}
.ovz-zoekveld input::placeholder { color: #a9a294; }
.ovz-zoekveld input:focus { outline: 2px solid var(--orange); outline-offset: 0; }
.ovz-zoekveld input::-webkit-search-cancel-button { cursor: pointer; }
.ovz-zoekicoon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--burgundy);
  pointer-events: none;
}
.ovz-tabs { margin: 0; }
.ovz-tabs .tab b, .ovz-extra .tab b { font-weight: 700; opacity: .5; margin-left: 4px; }
.ovz-extra { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; align-items: center; }
.ovz-extra .tab { background: var(--soft); }
.ovz-extra .tab.is-active { background: var(--orange); color: #fff; }
.ovz-sorteer {
  appearance: none;
  background: var(--soft);
  border: none;
  border-radius: 10px;
  padding: 11px 34px 11px 18px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--burgundy);
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234D0711' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 13px;
}
.ovz-wis { background: var(--yellow); }
.ovz-telling {
  text-align: center;
  font-family: var(--display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #8b8577;
  margin: 6px 0 26px;
}
.ovz-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.ovz-grid[hidden], .ovz-kaart[hidden] { display: none; }
.ovz-kaart { padding: 16px; animation: none; }
.ovz-kaart h3 { font-size: 16px; line-height: 1.25; min-height: 2.5em; overflow-wrap: anywhere; }
.ovz-kaart .product__img { margin-bottom: 14px; aspect-ratio: 3 / 2; }
.ovz-kaart .product__chips { margin-top: 10px; margin-bottom: 16px; }
.ovz-kaart .product__foot { margin-top: auto; }
.ovz-kaart .product__price { font-size: 20px; }
.ovz-kaart .product__add { padding: 9px 14px; font-size: 11px; }
.ovz-leeg { text-align: center; padding: 40px 0 20px; }
.ovz-leeg h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  text-transform: uppercase;
  color: var(--burgundy);
}
.ovz-leeg p { color: #8b8577; font-size: 14px; margin: 8px 0 20px; }

@media (max-width: 1000px) {
  .ovz-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .ovz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .ovz-bar { padding-top: 12px; gap: 10px; }
  .ovz-kaart { padding: 12px; }
  .ovz-kaart h3 { font-size: 14px; min-height: 2.6em; }
  .ovz-kaart .product__img { margin-bottom: 10px; }
  .ovz-kaart .product__chips { margin: 8px 0 12px; }
  .ovz-kaart .product__chips span { font-size: 10px; padding: 3px 8px; }
  .ovz-kaart .product__price { font-size: 17px; }
  .ovz-kaart .product__add { padding: 8px 11px; font-size: 10px; }
  .ovz-telling { margin: 2px 0 18px; }
  #alles { padding-top: 30px; }

  /* Filters naast elkaar houden en horizontaal laten schuiven, anders
     vult de balk het halve scherm en moet je eerst langs de knoppen. */
  .ovz-tabs, .ovz-extra {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    width: calc(100% + 36px);
    margin-left: -18px;
    padding: 2px 18px;
    gap: 8px;
  }
  .ovz-tabs::-webkit-scrollbar, .ovz-extra::-webkit-scrollbar { display: none; }
  .ovz-tabs .tab, .ovz-extra .tab, .ovz-sorteer { flex-shrink: 0; }
}

/* ===== Navigatie op smalle schermen ===== */
@media (max-width: 860px) {
  .nav { padding: 20px 18px; }
  .nav__links { display: none; }
  .nav__burger { display: flex; }
  .logo--liggend { height: 32px; }
  .nav .btn--cream { padding: 10px 16px; font-size: 12px; }
}
@media (max-width: 430px) {
  .nav { padding: 18px 14px; }
  .logo--liggend { height: 27px; }
  .nav .btn--cream { padding: 9px 12px; font-size: 11px; letter-spacing: .04em; }
  .nav__right { gap: 6px; }
}

/* ===== 404 ===== */
.vnv { text-align: center; padding: 30px 0 26px; }
.vnv__cijfer {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(78px, 15vw, 148px);
  line-height: .9;
  color: #fff;
  letter-spacing: .02em;
}
.vnv h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(26px, 4vw, 40px);
  text-transform: uppercase;
  color: #fff;
  margin-top: 14px;
}
.vnv__tekst {
  color: rgba(254, 254, 246, .78);
  font-size: 15px;
  line-height: 1.7;
  max-width: 520px;
  margin: 14px auto 0;
}
.vnv__knoppen { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
.vnv-tips { margin-top: 36px; }


/* =====================================================================
   TELEFOON EN TABLET
   Alles hierboven is voor een breed scherm gemaakt. Hier zetten we de
   kolommen onder elkaar, maken we de letters kleiner en zorgen we dat
   niets meer buiten het scherm valt.
   ===================================================================== */

/* ---------- Tablet ---------- */
@media (max-width: 1000px) {
  .section { padding: 64px 0; }
  .container { padding: 0 20px; }

  .products:not(.ovz-grid) { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; }
  .catering { grid-template-columns: repeat(2, 1fr); }
  .reviews { grid-template-columns: 1fr; }
  .deals { grid-template-columns: 1fr; }
  .app { grid-template-columns: 1fr; gap: 34px; }
  .app__phone { order: 2; }
}

/* ---------- Telefoon ---------- */
@media (max-width: 700px) {
  .section { padding: 52px 0; }
  .container { padding: 0 18px; }

  .hero { padding-bottom: 40px; }
  .hero__content { padding: 34px 18px 34px; }
  .hero__title { font-size: clamp(40px, 13vw, 62px); }
  .hero__actions { gap: 10px; }
  .hero__actions .btn { flex: 1 1 auto; text-align: center; }

  .section__title { font-size: clamp(27px, 8vw, 38px); }
  .section__sub { font-size: 14px; }

  /* Kaartjes onder elkaar, dan blijft de foto groot genoeg.
     Het receptenoverzicht houdt wel twee kolommen, daar wil je juist overzicht. */
  .products:not(.ovz-grid) { grid-template-columns: 1fr; gap: 16px; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .features { grid-template-columns: 1fr; }
  .catering { grid-template-columns: 1fr; }
  .deal { grid-template-columns: 1fr; }

  .tabs { gap: 8px; margin: 24px 0 30px; }
  .tab { font-size: 12px; padding: 10px 16px; }

  /* De receptenband hoeft op een klein scherm minder breed te zijn */
  .cat-card { width: 168px; }
  /* Dubbele namen mogen op twee regels; alle kaartjes zijn even hoog
     omdat de band ze uitrekt naar de hoogste. */
  .cat-card span { font-size: 19px; padding: 8px 6px 10px; letter-spacing: .01em; }

  /* Zelf niks kunnen kiezen: knop onder de tekst in plaats van ernaast */
  .custom-catering { flex-direction: column; align-items: flex-start; padding: 22px; text-align: left; }
  .custom-catering .btn { width: 100%; text-align: center; }

  /* Zwevende knop kleiner, hij dekt anders halve kaartjes af */
  .recept-knop { height: 42px; font-size: 12.5px; padding: 0 14px; }
}

/* ---------- Receptpagina ---------- */
@media (max-width: 800px) {
  .rpage-hero { padding-bottom: 40px; }
  .rhero { padding-top: 20px; }
  .rhero__info h1 { font-size: clamp(28px, 8vw, 40px); }
  .rp-cols { gap: 22px; }
  .rsteps li { margin-bottom: 16px; }
  .rsteps__txt { padding: 14px 16px 16px; }
  .rsteps__txt p { font-size: 14.5px; }
}

/* ---------- Formulieren en vensters ---------- */
@media (max-width: 620px) {
  .modal { padding: 14px; }
  .cookiebanner-overlay { padding: 16px; }
  .legal-head { padding: 26px 0 20px; }
  .legal h2 { font-size: 19px; }
  .legal p, .legal li { font-size: 14.5px; }
}

/* ===== Kopjes en kruimelpad op de receptpagina ===== */
.rp-kop {
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 12px;
}
.kruimels {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, .6);
  margin-bottom: 14px;
}
.kruimels a { color: rgba(255, 255, 255, .82); transition: color .15s; }
.kruimels a:hover { color: var(--orange); }
.kruimels__hier { color: rgba(255, 255, 255, .55); }

/* ===== Categoriepagina's ===== */
.kruimels--midden { justify-content: center; }
.cat-intro { max-width: 720px; margin: 0 auto 40px; }
.cat-intro p { font-size: 15.5px; line-height: 1.75; color: var(--ink); margin-bottom: 14px; }
.cat-intro p:last-child { margin-bottom: 0; }
.cat-verder { margin-top: 48px; text-align: center; }
.cat-verder h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  text-transform: uppercase;
  color: var(--burgundy);
  margin-bottom: 18px;
}
.cat-verder .tabs { margin: 0; }
@media (max-width: 700px) {
  .cat-intro { margin-bottom: 30px; }
  .cat-intro p { font-size: 14.5px; }
}

/* ===== Uitleg per recept ===== */
.rtekst { max-width: 760px; margin: 0 auto; }
.rtekst h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  text-transform: uppercase;
  color: var(--burgundy);
  margin-bottom: 12px;
}
.rtekst p { font-size: 15.5px; line-height: 1.75; color: var(--ink); }
.rtips + .rtekst { margin-top: 38px; }
@media (max-width: 700px) {
  .rtekst p { font-size: 14.5px; }
}

/* Zwevende knoppen wijken voor de footer. Zodra die in beeld komt hebben ze
   hun werk gedaan en zouden ze alleen nog over het jaartal heen vallen. */
.recept-zwevend, .cookie-knop {
  transition: transform .3s ease, opacity .3s ease;
}
.zwevend-weg .recept-zwevend,
.zwevend-weg .cookie-knop {
  transform: translateY(120%);
  opacity: 0;
  pointer-events: none;
}

/* ===== Cookievoorkeuren: soorten en schuifjes ===== */
.btn--stil { background: var(--soft); color: var(--burgundy); }
.btn--stil:hover { background: var(--yellow); }

.cookiesoorten { margin: 0 0 20px; }
.cookiesoorten[hidden] { display: none; }
.cookiesoort {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: var(--soft);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
}
.cookiesoort:last-child { margin-bottom: 0; }
.cookiesoort b {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--burgundy);
  margin-bottom: 4px;
}
.cookiesoort span { font-size: 12.5px; line-height: 1.55; color: #6f6a5c; }

.cookieschuif {
  flex: 0 0 auto;
  position: relative;
  width: 46px;
  height: 26px;
  background: #ded8c6;
  border-radius: 8px;
  cursor: pointer;
  display: block;
  transition: background .15s ease;
}
.cookieschuif input { position: absolute; opacity: 0; width: 0; height: 0; }
.cookieschuif > span {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 18px;
  height: 18px;
  background: var(--cream);
  border-radius: 6px;
  transition: transform .15s ease;
}
.cookieschuif:has(input:checked) { background: var(--orange); }
.cookieschuif input:checked ~ span { transform: translateX(20px); }
.cookieschuif--vast { background: var(--burgundy); cursor: default; }
.cookieschuif--vast > span { transform: translateX(20px); }
.cookieschuif input:focus-visible ~ span { outline: 2px solid var(--burgundy); outline-offset: 2px; }

.cookieknoppen { display: flex; flex-wrap: wrap; gap: 10px; }
.cookieknoppen[hidden] { display: none; }
.cookieknoppen .btn { flex: 1 1 auto; text-align: center; font-size: 12.5px; padding: 12px 16px; }

@media (max-width: 620px) {
  .cookiebanner { padding: 24px 20px; }
  .cookiesoort { gap: 12px; padding: 13px 14px; }
  .cookiesoort span { font-size: 12px; }
  .cookieknoppen .btn { flex: 1 1 100%; }
}

/* ===== Blokken met altijd precies drie kaarten =====
   Het algemene raster zet op tablet twee kolommen, en dan blijft de derde
   kaart alleen achter in een halve rij. Deze drie horen bij elkaar, dus
   houden we ze naast elkaar tot er echt geen ruimte meer is. */
@media (max-width: 1000px) {
  .products.products--drie,
  .products.vnv-tips { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .catering { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .products.products--drie,
  .products.vnv-tips { grid-template-columns: 1fr; gap: 16px; }
}

/* ===== Reacties: lege staat zolang er nog geen binnen zijn ===== */
.reviews-leeg {
  max-width: 560px;
  margin: 0 auto;
  background: var(--soft);
  border-radius: 18px;
  padding: 26px 28px;
  text-align: center;
}
.reviews-leeg p { font-size: 15px; line-height: 1.7; color: #6f6a5c; }
.rform__uitleg { font-size: 13px; line-height: 1.6; color: #8b8577; margin-bottom: 14px; text-align: left; }