/* Zondag — Eten-sectie: geanimeerde scène "ik vertel wat we lekker vinden → recepten → week → boodschappen".
   Bovenop style.css. Alles in de telefoon schaalt mee met --w (breedte van het toestel). */

.eten{padding:16vh var(--gut);background:var(--bg2);overflow:hidden}
.ez-wrap{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);grid-template-areas:"head stage" "steps stage";
  column-gap:clamp(32px,6vw,96px);align-items:center;max-width:1180px;margin:0 auto}
.ez-head{grid-area:head;align-self:end}
.ez-head h2{font-size:clamp(36px,4.6vw,64px)}
.ez-stage{grid-area:stage}
.ez-steps{grid-area:steps;align-self:start}

/* stappen naast de telefoon */
.ez-steps{list-style:none;margin:5vh 0 0;padding:0;display:flex;flex-direction:column;gap:4px;max-width:34em}
.ez-steps li{position:relative;display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-items:start;
  padding:16px 18px 16px 16px;border-radius:20px;transition:background .45s ease,box-shadow .45s ease}
.ez-steps .ic{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:#fff;color:var(--mute2);
  box-shadow:inset 0 0 0 .5px var(--line);transition:background .45s ease,color .45s ease}
.ez-steps .ic svg{width:19px;height:19px}
.ez-steps b{display:block;font-size:clamp(18px,1.5vw,20px);font-weight:600;letter-spacing:-.022em;line-height:1.25;color:var(--mute2);transition:color .45s ease}
.ez-steps span{display:block;margin-top:3px;font-size:15px;line-height:1.45;color:var(--mute2);transition:color .45s ease}
.ez-steps li.on{background:#fff;box-shadow:0 14px 34px -22px rgba(20,30,80,.28),0 0 0 .5px var(--line)}
.ez-steps li.on .ic{background:var(--blue);color:#fff;box-shadow:none}
.ez-steps li.on b{color:var(--ink)}
.ez-steps li.on span{color:var(--mute)}
.ez-static .ez-steps b{color:var(--ink)}
.ez-static .ez-steps span{color:var(--mute)}
.ez-static .ez-steps .ic{color:var(--blue)}

/* telefoon */
.ez-stage{display:flex;flex-direction:column;align-items:center;gap:18px}
.ez-device{--w:min(340px,30vw)}
.ez-toggle{display:inline-flex;align-items:center;gap:7px;border:0;background:rgba(118,118,128,.12);color:var(--mute);
  font:500 13px var(--font);padding:7px 13px 7px 11px;border-radius:980px;cursor:pointer;transition:background .2s,color .2s}
.ez-toggle:hover{color:var(--ink);background:rgba(118,118,128,.18)}
.ez-toggle:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.ez-toggle svg{width:12px;height:12px}
.ez-toggle .play{display:none}
.ez-toggle[aria-pressed="true"] .play{display:block}
.ez-toggle[aria-pressed="true"] .pause{display:none}

.ez-screen{--ink:#000;--mute:#8a8a8e;--sep:rgba(60,60,67,.14);--orange:#FF9500;--L:#007AFF;--B:#AF52DE;
  position:relative;width:100%;aspect-ratio:1206/2622;border-radius:calc(var(--w)*.135);overflow:hidden;background:#F2F2F7;
  font-size:calc(var(--w)*.0415);line-height:1.25;letter-spacing:-.01em;color:var(--ink);isolation:isolate;
  -webkit-user-select:none;user-select:none;contain:layout paint}
.ez-screen *{box-sizing:border-box}
.ez-screen svg{display:block}
.ez-screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;display:block;transition:opacity .45s ease}
.ez-screen video.dim{opacity:0}

.ez-status{position:absolute;inset:0 0 auto 0;height:3.7em;display:flex;align-items:center;justify-content:space-between;
  padding:0 2.1em 0 2.5em;font-weight:600;font-size:1em;z-index:5;pointer-events:none}
.ez-status{background:linear-gradient(#F2F2F7 78%,rgba(242,242,247,0))}
.ez-island{position:absolute;left:50%;top:.85em;width:7.6em;height:2.2em;margin-left:-3.8em;border-radius:2em;background:#000}
.ez-sig{display:flex;gap:.3em;align-items:center}
.ez-sig svg{height:.85em;width:auto}

/* eten-scherm (scrollt met transform) */
.ez-view{position:absolute;inset:0;padding:4.2em .95em 2em;transition:transform .7s cubic-bezier(.2,.75,.2,1),opacity .4s ease}
.ez-top{display:flex;justify-content:flex-end;color:var(--L);font-size:.95em;height:1.4em}
.ez-title{font-size:2.35em;font-weight:700;letter-spacing:-.035em;line-height:1.05;margin:.05em 0 .3em}
.ez-seg{display:grid;grid-template-columns:1fr 1fr 1fr;background:rgba(118,118,128,.12);border-radius:.7em;padding:.16em;font-size:.86em;font-weight:500;position:relative}
.ez-seg span{text-align:center;padding:.38em 0;position:relative;z-index:1;white-space:nowrap}
.ez-seg span.on{font-weight:600}
.ez-seg::before{content:"";position:absolute;top:.16em;bottom:.16em;left:.16em;width:calc((100% - .32em)/3);border-radius:.55em;background:#fff;
  box-shadow:0 .2em .5em rgba(0,0,0,.1),0 0 0 .04em rgba(0,0,0,.04)}
.ez-seg em{font-style:normal;font-variant-numeric:tabular-nums}

.ez-fill{margin-top:.75em;display:flex;align-items:center;gap:.7em;background:#fff;border-radius:.85em;padding:.65em .7em .65em .8em}
.ez-fill .gl{width:2.2em;height:2.2em;border-radius:.6em;background:rgba(0,122,255,.1);color:var(--L);display:grid;place-items:center;flex:none}
.ez-fill .gl svg{width:1.25em;height:1.25em}
.ez-fill div{flex:1;min-width:0}
.ez-fill b{display:block;font-size:.98em;font-weight:600}
.ez-fill small{display:block;color:var(--mute);font-size:.76em;margin-top:.1em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ez-btn{flex:none;background:var(--L);color:#fff;font-weight:600;font-size:.8em;padding:.45em .85em;border-radius:2em;transition:transform .15s ease,filter .15s}
.ez-btn.press{transform:scale(.92);filter:brightness(.9)}

.ez-group{font-size:.72em;color:var(--mute);text-transform:uppercase;letter-spacing:.02em;margin:1.15em 0 .45em .9em;font-weight:500}
.ez-days,.ez-list{list-style:none;margin:0;padding:0;background:#fff;border-radius:.85em;overflow:hidden}
.ez-day{display:flex;align-items:center;gap:.65em;padding:0 .8em;height:3.05em;position:relative}
.ez-day+.ez-day::before,.ez-item+.ez-item::before{content:"";position:absolute;top:0;right:0;left:3.3em;height:.5px;background:var(--sep)}
.ez-av{width:1.75em;height:1.75em;border-radius:50%;display:grid;place-items:center;flex:none;color:#fff;font-size:.78em;font-weight:600}
.ez-av.L{background:var(--L)}.ez-av.B{background:var(--B)}
.ez-day .tx{flex:1;min-width:0;position:relative;height:2.4em}
.ez-day .tx>div{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;transition:opacity .35s ease,transform .45s cubic-bezier(.2,.75,.2,1)}
.ez-day b{font-size:.92em;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ez-day small{font-size:.74em;color:var(--mute);margin-top:.12em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ez-day .open b{color:var(--orange)}
.ez-day .meal{opacity:0;transform:translateY(.5em)}
.ez-day.got .open{opacity:0;transform:translateY(-.5em);transition-duration:.15s,.3s}
.ez-day.got .meal{transition-delay:.08s}
.ez-day.got .meal{opacity:1;transform:none}
.ez-day::after{content:"";position:absolute;inset:0;background:rgba(0,122,255,.10);opacity:0;pointer-events:none}
.ez-day.land::after{animation:ezLand .9s ease-out}
@keyframes ezLand{0%{opacity:1}100%{opacity:0}}

.ez-item{display:flex;align-items:center;gap:.7em;padding:0 .8em;height:2.85em;position:relative;opacity:0;transform:translateX(1.2em);
  transition:opacity .4s ease,transform .5s cubic-bezier(.2,.75,.2,1)}
.ez-item.in{opacity:1;transform:none}
.ez-item i{width:1.35em;height:1.35em;border-radius:50%;border:.09em solid #c7c7cc;flex:none;margin:0 .2em}
.ez-item div{flex:1;min-width:0;display:flex;flex-direction:column}
.ez-item b{font-size:.9em;font-weight:500}
.ez-item small{font-size:.72em;color:var(--mute);margin-top:.1em}
.ez-item em{font-style:normal;font-size:.78em;color:var(--mute);font-variant-numeric:tabular-nums;flex:none}

/* smaakgesprek (overlay) */
.ez-talk{position:absolute;inset:0;z-index:3;background:#fff;padding:4.4em 1.25em 1.4em;display:flex;flex-direction:column;
  transition:transform .65s cubic-bezier(.3,.7,.2,1),opacity .4s ease}
.ez-talk.away{transform:translateY(104%)}
.ez-talk-top{display:flex;align-items:center;gap:.6em;font-size:.85em;color:var(--mute);font-weight:500}
.ez-talk-top i{width:1.9em;height:1.9em;border-radius:50%;background:#F2F2F7;display:grid;place-items:center;color:#3c3c43}
.ez-talk-top i svg{width:.75em;height:.75em}
.ez-talk h5{margin:.7em 0 0;font-size:1.7em;font-weight:700;letter-spacing:-.03em;line-height:1.1}
.ez-q{margin:1.15em 0 0;align-self:flex-start;background:#F2F2F7;border-radius:1.1em 1.1em 1.1em .35em;padding:.6em .85em;font-size:.95em;font-weight:500}
.ez-tr{margin:.85em 0 0;min-height:6.6em;font-size:1.12em;line-height:1.38;font-weight:500;letter-spacing:-.015em;color:var(--ink)}
.ez-tr .w{opacity:0;transition:opacity .25s ease}
.ez-tr .w.on{opacity:1}
.ez-tr .w.hl{color:var(--L)}
.ez-know{margin-top:.3em;opacity:0;transform:translateY(.6em);transition:opacity .4s ease,transform .5s cubic-bezier(.2,.75,.2,1)}
.ez-know.in{opacity:1;transform:none}
.ez-know small{display:block;font-size:.72em;color:var(--mute);text-transform:uppercase;letter-spacing:.02em;font-weight:500}
.ez-chips{display:flex;flex-wrap:wrap;gap:.4em;margin-top:.5em}
.ez-chips span{display:inline-flex;align-items:center;gap:.35em;font-size:.82em;font-weight:500;padding:.38em .7em .38em .55em;border-radius:2em;
  background:rgba(52,199,89,.12);color:#1f7a37;opacity:0;transform:scale(.85);transition:opacity .3s ease,transform .45s cubic-bezier(.3,1.5,.5,1)}
.ez-chips span svg{width:.85em;height:.85em}
.ez-chips span.in{opacity:1;transform:none}
.ez-mic{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:.9em}
.ez-wave{display:flex;align-items:center;justify-content:center;gap:.22em;height:3.2em;width:100%}
.ez-wave i{width:.26em;height:100%;border-radius:.2em;background:var(--L);opacity:.85;transform:scaleY(.08);transform-origin:50% 50%;transition:transform .3s ease}
.ez-wave.on i{animation:ezWave 1.1s ease-in-out infinite alternate;animation-delay:var(--d)}
@keyframes ezWave{0%{transform:scaleY(.12)}35%{transform:scaleY(var(--h))}70%{transform:scaleY(calc(var(--h)*.45))}100%{transform:scaleY(calc(var(--h)*.9))}}
.ez-microw{display:flex;align-items:center;gap:.5em;font-size:.8em;color:var(--mute);font-weight:500}
.ez-microw .dot{width:.55em;height:.55em;border-radius:50%;background:#FF3B30}
.ez-wave.on~.ez-microw .dot{animation:ezBlink 1.2s ease-in-out infinite}
@keyframes ezBlink{50%{opacity:.25}}
.ez-micbtn{width:3.6em;height:3.6em;border-radius:50%;background:#FF3B30;display:grid;place-items:center;color:#fff;
  box-shadow:0 0 0 .5em rgba(255,59,48,.14)}
.ez-micbtn svg{width:1.45em;height:1.45em}

/* voorstellen (sheet) */
.ez-sheet{position:absolute;left:0;right:0;bottom:0;z-index:4;background:#fff;border-radius:1.3em 1.3em 0 0;padding:.55em .95em 1.6em;
  box-shadow:0 -.6em 2.2em rgba(0,0,0,.14);transform:translateY(104%);transition:transform .6s cubic-bezier(.3,.75,.2,1),background .4s ease,box-shadow .4s ease}
.ez-sheet.up{transform:none}
.ez-sheet.clear{background:transparent;box-shadow:none}
.ez-sheet.clear .ez-sh-h,.ez-sheet.clear .grab{opacity:0}
.ez-sheet .grab{width:2.6em;height:.3em;border-radius:1em;background:#d1d1d6;margin:0 auto .7em;transition:opacity .3s}
.ez-sh-h{transition:opacity .3s}
.ez-sh-h b{display:block;font-size:1.18em;font-weight:700;letter-spacing:-.025em}
.ez-sh-h small{display:block;color:var(--mute);font-size:.78em;margin-top:.15em}
.ez-sugs{margin-top:.7em;display:flex;flex-direction:column;gap:.38em}
.ez-sug{display:flex;align-items:center;gap:.6em;background:#F2F2F7;border-radius:.75em;padding:.42em .5em .42em .55em;
  opacity:0;transform:translateY(.8em);transition:opacity .35s ease,transform .45s cubic-bezier(.2,.75,.2,1)}
.ez-sug.in{opacity:1;transform:none}
.ez-sug.gone{opacity:0;transition:opacity .15s ease}
.ez-sug .d{width:2.05em;height:2.05em;border-radius:.55em;background:#fff;display:grid;place-items:center;font-size:.74em;font-weight:600;color:var(--mute);flex:none;text-transform:lowercase}
.ez-sug div{flex:1;min-width:0;display:flex;flex-direction:column}
.ez-sug b{font-size:.86em;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ez-sug small{font-size:.7em;color:var(--mute);margin-top:.08em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ez-kies{flex:none;font-size:.74em;font-weight:600;color:var(--L);background:#fff;border-radius:2em;padding:.38em .75em;display:inline-flex;align-items:center;gap:.3em;
  transition:background .2s ease,color .2s ease,transform .15s ease}
.ez-kies svg{width:.9em;height:.9em;display:none}
.ez-sug.picked .ez-kies{background:#34C759;color:#fff}
.ez-sug.picked .ez-kies svg{display:block}
.ez-sug.picked .ez-kies span{display:none}
.ez-sug.tap .ez-kies{transform:scale(.88)}

/* vliegend kaartje + tik-indicator */
.ez-fly{position:absolute;z-index:6;pointer-events:none;background:#fff;border-radius:.75em;box-shadow:0 .8em 1.8em -.6em rgba(0,0,0,.28);
  display:flex;align-items:center;gap:.55em;padding:0 .6em;font-size:1em;transform-origin:0 0;will-change:transform,opacity}
.ez-fly b{font-size:.86em;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ez-fly .d{font-size:.74em;font-weight:600;color:var(--L);text-transform:lowercase}
.ez-touch{position:absolute;z-index:7;width:2.6em;height:2.6em;margin:-1.3em 0 0 -1.3em;border-radius:50%;pointer-events:none;
  background:rgba(0,0,0,.16);box-shadow:0 0 0 .12em rgba(255,255,255,.7);opacity:0;transform:scale(.6)}
.ez-touch.go{animation:ezTouch .5s ease-out}
@keyframes ezTouch{0%{opacity:0;transform:scale(1.25)}30%{opacity:1;transform:scale(.8)}100%{opacity:0;transform:scale(1)}}

.ez-screen.fade .ez-view,.ez-screen.fade .ez-talk{opacity:0}

/* korte bijschrift onder de telefoon (alleen smalle schermen, waar de stappenlijst niet naast de telefoon staat) */
.ez-cap{display:none;margin:0;height:24px;align-items:center;gap:9px;font-size:16px;font-weight:600;letter-spacing:-.02em;opacity:0;transition:opacity .35s ease}
.ez-cap.on{opacity:1}
.ez-cap .n{width:22px;height:22px;border-radius:50%;background:var(--blue);color:#fff;font-size:12px;display:grid;place-items:center}

/* drie extra's onder de scène */
.ez-more{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1180px;margin:10vh auto 0}
.ez-more div{background:#fff;border-radius:24px;padding:clamp(22px,2.2vw,30px)}
.ez-more h3{font-size:clamp(19px,1.6vw,22px);letter-spacing:-.025em;line-height:1.2}
.ez-more p{margin:8px 0 0;color:var(--mute);font-size:16px;line-height:1.45}
.eten .ov-privacy{background:#fff}

@media (max-width:1080px){
  .ez-wrap{grid-template-columns:1fr;grid-template-areas:"head" "stage" "steps";row-gap:6vh}
  .ez-head{text-align:center}
  .ez-head .lead{margin-left:auto;margin-right:auto}
  .ez-steps{margin:0 auto;width:100%}
  .ez-cap{display:flex}
  .ez-stage{gap:14px}
  .ez-device{--w:min(320px,44vw)}
  .ez-more{grid-template-columns:1fr;max-width:640px}
}
@media (max-width:760px){
  .eten{padding:12vh 20px}
  .ez-wrap{row-gap:5vh}
  .ez-head{text-align:left}
  .ez-device{--w:min(300px,76vw)}
  .ez-steps li{padding:13px 14px 13px 12px;column-gap:13px}
  .ez-steps span{font-size:14.5px}
  .ez-more{margin-top:7vh;gap:12px}
  .ez-more div{border-radius:22px}
}
@media (prefers-reduced-motion:reduce){
  .ez-screen *,.ez-steps li,.ez-steps *{transition:none!important;animation:none!important}
  .ez-toggle{display:none}
}