/* =====================================================================
   Lekker Bitter — de weekkaart van het huis.
   Wit papier, flessengroene inkt, één rood etiket (Campari), en een gele
   markeerstift voor wat in de aanbieding is — zoals je in de folder omcirkelt.
   Letters: Big Shoulders (smal, uithangbord/toko-gevel) voor namen en dagen,
   Schibsted Grotesk (krantenletter) voor al het andere. Beide SIL OFL 1.1.
   ===================================================================== */
@font-face { font-family: 'Big Shoulders'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/fonts/bigshoulders.woff2) format('woff2'); }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-display: swap; font-weight: 400 900; src: url(/fonts/schibsted.woff2) format('woff2'); }

:root {
  --paper: #FFFEFB;
  --paper-2: #F3F2EC;
  --ink: #173327;          /* flessengroen */
  --ink-2: #48594F;
  --muted: #7B877F;
  --rule: #E1E3DC;
  --campari: #D7192A;      /* het etiket */
  --campari-dk: #A90F1D;
  --mark: #FFD54A;         /* markeerstift */
  --pandan: #2E7A51;       /* voetbal, afgevinkt */
  --ah: #0089C8;
  --plus: #4C8A2A;
  --dirk: #C4121A;

  --display: 'Big Shoulders', 'Arial Narrow', sans-serif;
  --text: 'Schibsted Grotesk', ui-sans-serif, system-ui, sans-serif;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --tab-h: 58px;
  --gut: 18px;
  color-scheme: light;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; background: var(--campari); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.5 var(--text); min-height: 100vh; overscroll-behavior-y: none; font-feature-settings: 'ss01'; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; text-align: inherit; }
a { color: var(--campari); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--campari); outline-offset: 2px; border-radius: 4px; }
svg.i { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.num { font-variant-numeric: tabular-nums; }

#app { max-width: 720px; margin: 0 auto; min-height: 100vh; background: var(--paper); }

/* ---------- Het etiket (kop) ---------- */
.mast { background: var(--campari); color: var(--paper); padding: calc(10px + var(--safe-t)) var(--gut) 18px; position: relative; }
.mast-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.mast h1 { margin: 0; font: 900 clamp(64px, 21vw, 112px)/.8 var(--display); letter-spacing: -.01em; padding-top: 10px; }
.mast h1.sub { font-size: clamp(46px, 13vw, 72px); line-height: .9; padding-top: 14px; }
.mast .gear { width: 44px; height: 44px; display: grid; place-items: center; margin-right: -10px; color: var(--paper); border-radius: 50%; }
.mast .gear:active { background: rgba(255,255,255,.15); }
.mast-sub { margin-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 15px; font-weight: 500; }
.mast-sub .wk { opacity: .92; }
.wknav { display: flex; gap: 6px; }
.wknav button { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.55); display: grid; place-items: center; color: var(--paper); }
.wknav button:active { background: rgba(255,255,255,.18); }

main { padding-bottom: calc(var(--tab-h) + var(--safe-b) + 32px); }

/* Korte zin onder de kop: wat er deze week bijzonder is */
.lede { margin: 0; padding: 16px var(--gut) 4px; font-size: 15px; line-height: 1.5; color: var(--ink-2); max-width: 62ch; }
.lede button { color: var(--campari); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Markeerstift: aanbiedingen, zoals je ze in de folder aanstreept */
mark { background: linear-gradient(transparent 12%, var(--mark) 12%, var(--mark) 88%, transparent 88%); color: var(--ink); padding: 0 3px; margin: 0 -1px; border-radius: 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.store { font-weight: 700; font-size: .86em; letter-spacing: .01em; }
.store.ah { color: var(--ah); } .store.plus { color: var(--plus); } .store.dirk { color: var(--dirk); } .store.eigen { color: var(--ink-2); }

/* ---------- De week ---------- */
.days { list-style: none; margin: 8px 0 0; padding: 0; }
.day { display: grid; grid-template-columns: 58px 1fr; gap: 0 14px; padding: 20px var(--gut) 16px; border-bottom: 1px solid var(--rule); }
.day.past { opacity: .5; }
.dcol { padding-top: 2px; }
.dname { display: block; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.dnum { display: block; font: 800 46px/.85 var(--display); color: var(--ink); margin-top: 4px; }
.day.today .dname, .day.today .dnum { color: var(--campari); }
.dish { display: block; width: 100%; }
.dish h3 { margin: 0; font: 800 28px/1 var(--display); letter-spacing: .002em; color: var(--ink); text-wrap: balance; }
.dish .line { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 7px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.meta { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 7px; font-size: 13px; color: var(--muted); }
.meta .fav { color: var(--campari); font-weight: 700; }
.dealline { margin-top: 8px; font-size: 14px; line-height: 1.5; }
.ball { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.ball svg { color: var(--pandan); margin-top: 1px; }
.ball b { color: var(--pandan); font-weight: 700; }
.nofoot { margin-top: 8px; font-size: 13.5px; color: var(--muted); }
.dact { grid-column: 2; display: flex; gap: 22px; margin-top: 12px; }
.dact button { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--ink-2); padding: 6px 0; }
.dact button.on { color: var(--campari); }
.dact svg.i { width: 17px; height: 17px; }

.ctas { display: flex; flex-wrap: wrap; gap: 10px; padding: 22px var(--gut) 6px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px; border-radius: 12px; font-weight: 650; font-size: 15.5px; border: 1.5px solid var(--ink); color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn.solid { background: var(--ink); color: var(--paper); }
.btn.red { background: var(--campari); border-color: var(--campari); color: var(--paper); }
.btn.quiet { border-color: transparent; padding: 0 8px; color: var(--ink-2); }
.btn.sm { min-height: 40px; font-size: 14.5px; padding: 0 14px; border-radius: 10px; }
.btn.wide { flex: 1; }
.fine { padding: 4px var(--gut); font-size: 13px; color: var(--muted); }

/* ---------- Boodschappen ---------- */
.aisle { display: flex; align-items: baseline; justify-content: space-between; padding: 26px var(--gut) 6px; }
.aisle h3 { margin: 0; font: 800 26px/1 var(--display); }
.aisle span { font-size: 13.5px; color: var(--muted); }
.items { list-style: none; margin: 0; padding: 0 var(--gut); }
.item { display: grid; grid-template-columns: 24px 1fr auto; gap: 0 12px; align-items: start; padding: 11px 0; border-top: 1px solid var(--rule); cursor: pointer; }
.items .item:first-child { border-top: 0; }
.box { width: 22px; height: 22px; border: 2px solid var(--ink); border-radius: 5px; margin-top: 1px; display: grid; place-items: center; color: var(--paper); }
.item.done .box { background: var(--pandan); border-color: var(--pandan); }
.item .nm { font-weight: 500; }
.item .qty { font-size: 14.5px; color: var(--ink-2); white-space: nowrap; padding-top: 1px; }
.item .sub { grid-column: 2 / 4; font-size: 13px; color: var(--muted); margin-top: 2px; }
.item.done .nm, .item.done .qty { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.item.done mark { background: none; }
details.kast > summary { list-style: none; cursor: pointer; }
details.kast > summary::-webkit-details-marker { display: none; }
details.kast > summary h3::after { content: ' +'; color: var(--muted); }
details.kast[open] > summary h3::after { content: ' −'; }

/* ---------- Receptenboek ---------- */
.find { padding: 18px var(--gut) 0; }
.find input { width: 100%; border: 0; border-bottom: 2px solid var(--ink); background: transparent; padding: 8px 0 10px; font-size: 18px; outline: none; border-radius: 0; }
.find input::placeholder { color: var(--muted); }
.filters { display: flex; gap: 18px; overflow-x: auto; padding: 14px var(--gut) 4px; scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
.filters button { white-space: nowrap; font-size: 14.5px; font-weight: 600; color: var(--muted); padding: 4px 0; border-bottom: 2.5px solid transparent; }
.filters button.on { color: var(--ink); border-bottom-color: var(--campari); }
.chapter { display: flex; align-items: baseline; justify-content: space-between; padding: 30px var(--gut) 4px; border-bottom: 2px solid var(--ink); margin: 0 var(--gut); padding-left: 0; padding-right: 0; }
.chapter h2 { margin: 0; font: 900 40px/.9 var(--display); }
.chapter span { font-size: 13.5px; color: var(--muted); }
.rlist { list-style: none; margin: 0; padding: 0 var(--gut); }
.rrow { display: block; width: 100%; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.rrow h4 { margin: 0; font: 750 23px/1.02 var(--display); text-wrap: balance; }
.rrow .line { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 5px 0 0; font-size: 14px; color: var(--ink-2); }
.rrow.blocked { opacity: .45; }
.empty { padding: 28px var(--gut); color: var(--ink-2); }

/* ---------- Aanbiedingen ---------- */
.stores { display: grid; grid-template-columns: repeat(3, 1fr); padding: 18px var(--gut) 0; gap: 12px; }
.st { display: flex; flex-direction: column; justify-content: flex-start; text-align: left; padding: 6px 0 10px; border-top: 4px solid currentColor; }
.st.ah { color: var(--ah); } .st.plus { color: var(--plus); } .st.dirk { color: var(--dirk); }
.st .n { display: block; font: 900 48px/.95 var(--display); margin-top: 6px; }
.st .l { display: block; font-weight: 700; color: var(--ink); font-size: 15px; }
.st .s { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.3; margin-top: 2px; }
.st.off { opacity: .35; }
.addeal { display: flex; gap: 8px; padding: 6px var(--gut) 0; }
.addeal select, .addeal input { border: 1.5px solid var(--rule); border-radius: 10px; background: var(--paper); padding: 0 10px; height: 44px; font-size: 15.5px; }
.addeal input { flex: 1; min-width: 0; }
.deal { display: grid; grid-template-columns: 44px 1fr auto; gap: 0 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--rule); }
.deal img, .deal .ph { width: 44px; height: 44px; object-fit: contain; border-radius: 6px; background: #fff; }
.deal .ph { background: var(--paper-2); }
.deal .t, .deal .d { display: block; }
.deal .t { font-weight: 500; font-size: 15px; line-height: 1.3; }
.deal .d { font-size: 13.5px; color: var(--muted); margin-top: 2px; }
.deal .mech { color: var(--campari); font-weight: 700; }
.ingh { padding: 18px var(--gut) 4px; font-weight: 700; }
.ingh span { font-weight: 400; color: var(--muted); font-size: 14px; }
.warn { margin: 14px var(--gut) 0; padding: 12px 14px; border-left: 3px solid var(--campari); background: var(--paper-2); font-size: 14.5px; color: var(--ink-2); border-radius: 0 8px 8px 0; }

/* ---------- Tabbalk ---------- */
.tabs { position: fixed; z-index: 20; bottom: 0; left: 0; right: 0; background: var(--paper); border-top: 1px solid var(--rule); padding-bottom: var(--safe-b); }
.tabs-in { display: flex; max-width: 720px; margin: 0 auto; }
.tab { flex: 1 1 0; min-width: 0; height: var(--tab-h); display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 14px; white-space: nowrap; font-weight: 650; color: var(--muted); position: relative; }
.tab.on { color: var(--ink); }
.tab.on::before { content: ''; position: absolute; top: -1px; left: 22%; right: 22%; height: 3px; background: var(--campari); border-radius: 0 0 3px 3px; }
.tab .cnt { color: var(--campari); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- Receptpagina (schermvullend) ---------- */
.page { position: fixed; inset: 0; z-index: 40; background: var(--paper); overflow-y: auto; -webkit-overflow-scrolling: touch; animation: rise .3s cubic-bezier(.2,.8,.2,1); }
.page-in { max-width: 720px; margin: 0 auto; padding-bottom: calc(40px + var(--safe-b)); }
.phead { background: var(--campari); color: var(--paper); padding: calc(8px + var(--safe-t)) var(--gut) 22px; }
.phead .bar { display: flex; justify-content: space-between; align-items: center; min-height: 44px; }
.phead .back { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin-left: -8px; padding-right: 10px; color: var(--paper); font-size: 15px; font-weight: 650; }
.phead .x { width: 44px; height: 44px; display: grid; place-items: center; margin-right: -10px; border-radius: 50%; color: var(--paper); }
.phead h2 { margin: 6px 0 0; font: 900 clamp(42px, 12vw, 64px)/.9 var(--display); text-wrap: balance; }
.phead .meta { color: rgba(255,255,255,.88); font-size: 14px; margin-top: 14px; gap: 2px 16px; }
.intro { margin: 0; padding: 20px var(--gut) 0; font-size: 19px; line-height: 1.5; max-width: 40ch; }
.sec { padding: 26px var(--gut) 0; }
.sec-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 2px solid var(--ink); padding-bottom: 6px; }
.sec-h h3 { margin: 0; font: 800 28px/1 var(--display); }
.persons { display: inline-flex; align-items: center; gap: 4px; font-weight: 650; font-size: 14.5px; }
.persons button { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--ink); font-size: 18px; line-height: 1; display: grid; place-items: center; }
.persons span { min-width: 64px; text-align: center; }
.ings { list-style: none; margin: 0; padding: 0; }
.ings li { display: grid; grid-template-columns: 96px 1fr; gap: 0 12px; padding: 9px 0; border-bottom: 1px solid var(--rule); font-size: 16px; }
.ings .q { font-weight: 650; font-variant-numeric: tabular-nums; }
.ings .nt { display: block; font-size: 13.5px; color: var(--muted); }
.ings li.kast { color: var(--ink-2); }
.ings li.kast .q { font-weight: 500; }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 38px 1fr; gap: 0 10px; padding: 14px 0 0; font-size: 16.5px; line-height: 1.55; max-width: 62ch; }
.steps li::before { content: counter(s); font: 800 34px/.9 var(--display); color: var(--campari); }
.trick { margin: 28px var(--gut) 0; background: var(--ink); color: var(--paper); border-radius: 14px; padding: 18px 18px 20px; }
.trick h3 { margin: 0 0 6px; font: 800 26px/1 var(--display); color: var(--mark); }
.trick p { margin: 0; font-size: 17px; line-height: 1.5; }
.plain { margin: 10px 0 0; font-size: 16px; line-height: 1.55; color: var(--ink-2); max-width: 62ch; }
.voetbalnote { margin: 18px var(--gut) 0; display: flex; gap: 10px; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.voetbalnote svg { color: var(--pandan); margin-top: 2px; }
.voetbalnote b { color: var(--pandan); }
.pact { display: flex; flex-wrap: wrap; gap: 10px; padding: 26px var(--gut) 0; }
.daypick { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 12px; }
.daypick button { height: 52px; border: 1.5px solid var(--rule); border-radius: 10px; font-weight: 650; font-size: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.daypick button small { font-size: 10.5px; color: var(--pandan); font-weight: 700; }
.daypick button.cur { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.daypick button.cur small { color: var(--mark); }
@keyframes rise { from { transform: translateY(40px); opacity: 0; } }

/* ---------- Onderblad (wissel, instellingen) ---------- */
.veil { position: fixed; inset: 0; z-index: 50; background: rgba(23, 51, 39, .45); animation: fade .2s; }
.sheet { position: fixed; z-index: 51; left: 0; right: 0; bottom: 0; max-width: 720px; margin: 0 auto; max-height: 90vh; display: flex; flex-direction: column; background: var(--paper); border-radius: 20px 20px 0 0; animation: rise .26s cubic-bezier(.2,.8,.2,1); }
.sheet-h { display: flex; align-items: center; justify-content: space-between; padding: 18px var(--gut) 8px; }
.sheet-h h2 { margin: 0; font: 900 34px/.95 var(--display); }
.sheet-h .x { width: 44px; height: 44px; display: grid; place-items: center; margin-right: -10px; border-radius: 50%; }
.sheet-b { overflow-y: auto; padding: 0 var(--gut) calc(24px + var(--safe-b)); }
.sheet-b .hint { margin: 0 0 6px; font-size: 14.5px; color: var(--pandan); font-weight: 600; }
.alt { display: block; width: 100%; padding: 13px 0; border-top: 1px solid var(--rule); }
.alt h4 { margin: 0; font: 750 22px/1.05 var(--display); }
.alt .why { display: block; margin-top: 5px; font-size: 13.5px; color: var(--ink-2); }
@keyframes fade { from { opacity: 0; } }

.fld { padding: 16px 0; border-top: 1px solid var(--rule); }
.fld:first-child { border-top: 0; }
.fld .lbl { display: block; font-weight: 650; }
.fld .help { display: block; font-size: 14px; color: var(--muted); margin-top: 2px; }
.fld .ctl { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; align-items: center; }
.fld.row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.seg { height: 38px; padding: 0 13px; border: 1.5px solid var(--rule); border-radius: 9px; font-weight: 600; font-size: 14.5px; color: var(--ink-2); }
.seg.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.switch { width: 50px; height: 30px; border-radius: 99px; background: var(--rule); position: relative; flex: none; transition: background .2s; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: left .2s; }
.switch.on { background: var(--pandan); }
.switch.on::after { left: 23px; }
.input { height: 44px; border: 1.5px solid var(--rule); border-radius: 10px; background: var(--paper); padding: 0 12px; font-size: 16px; }
.sheet-b h3.grp + .fld { border-top: 0; }
.sheet-b h3.grp { margin: 28px 0 0; font: 800 24px/1 var(--display); }

/* ---------- Melding ---------- */
#toast { position: fixed; z-index: 60; left: 50%; bottom: calc(var(--tab-h) + var(--safe-b) + 14px); transform: translate(-50%, 16px); max-width: calc(100% - 32px); display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 10px; background: var(--ink); color: var(--paper); font-size: 14.5px; font-weight: 500; opacity: 0; pointer-events: none; transition: .22s; }
#toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
#toast button { color: var(--mark); font-weight: 700; }

.spin { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--rule); border-top-color: var(--campari); border-radius: 50%; animation: spin .8s linear infinite; vertical-align: -2px; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (min-width: 760px) {
  :root { --gut: 32px; }
  .day { grid-template-columns: 76px 1fr; }
  .dnum { font-size: 58px; }
  .dish h3 { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- Foto's ---------- */
.dish.has-pic, .rrow.has-pic, .alt.has-pic { display: grid; grid-template-columns: minmax(0, 1fr) 84px; gap: 0 14px; align-items: start; }
.dtext { display: block; min-width: 0; }
.dtext .dealline, .dtext .why { display: block; }
.dtext .line { display: -webkit-box; }
.dtext .meta { display: flex; }
.thumb { width: 84px; height: 84px; object-fit: cover; border-radius: 6px; background: var(--paper-2); margin-top: 3px; }
.rrow .thumb, .alt .thumb { width: 76px; height: 76px; }
.rrow.has-pic, .alt.has-pic { grid-template-columns: minmax(0, 1fr) 76px; }
.hero-pic { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 8px; margin: 2px 0 14px; background: var(--paper-2); }
.photo { margin: 0; background: var(--ink); }
.photo img { display: block; width: 100%; aspect-ratio: 4 / 3; max-height: 58vh; object-fit: cover; }
.photo figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding: 9px var(--gut) 10px; font-size: 12.5px; color: rgba(255,255,255,.72); }
.photo figcaption a { color: inherit; }
.photo.none { background: var(--paper-2); }
.photo.none figcaption { color: var(--ink-2); font-size: 14px; padding: 14px var(--gut); }
.photo-act { display: flex; gap: 16px; }
.photo-act button, .photo-act label { color: var(--paper); font-weight: 650; font-size: 13.5px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.photo.none .photo-act button, .photo.none .photo-act label { color: var(--campari); }
@media (min-width: 760px) {
  .dish.has-pic { grid-template-columns: minmax(0, 1fr) 132px; }
  .dish .thumb { width: 132px; height: 100px; }
  .hero-pic { max-height: 360px; }
}

/* ---------- Receptpagina: afvinken, aantekeningen, startknop ---------- */
.hint-sm { margin: 8px 0 0; font-size: 13.5px; color: var(--muted); }
.ings li { cursor: pointer; }
.ings li.have .q, .ings li.have > span:last-child { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.ings li.have mark { background: none; }
.notes { width: 100%; margin-top: 12px; border: 1.5px solid var(--rule); border-radius: 10px; padding: 12px; font: 400 16px/1.5 var(--text); background: var(--paper); color: var(--ink); resize: vertical; }
.page-in { padding-bottom: calc(110px + var(--safe-b)); }
.startbar { position: sticky; bottom: 0; padding: 12px var(--gut) calc(12px + var(--safe-b)); background: linear-gradient(transparent, var(--paper) 30%); max-width: 720px; margin: -96px auto 0; }
.cookbtn { width: 100%; min-height: 58px; font-size: 18px; border-radius: 14px; box-shadow: 0 6px 18px rgba(169, 15, 29, .28); }
.item .del { display: grid; place-items: center; width: 36px; height: 36px; margin: -6px -8px -6px 0; color: var(--muted); }

/* ---------- Kookmodus ---------- */
.cook {
  --ck-bg: #10261C; --ck-ink: #FFFEFB; --ck-mut: rgba(255, 254, 251, .66); --ck-line: rgba(255, 254, 251, .14);
  --ck-step: clamp(24px, 6.6vw, 34px);
  position: fixed; inset: 0; z-index: 45; background: var(--ck-bg); color: var(--ck-ink);
  display: flex; flex-direction: column; overflow: hidden;
}
.cook.size-0 { --ck-step: clamp(21px, 5.6vw, 28px); }
.cook.size-2 { --ck-step: clamp(28px, 8vw, 42px); }
.ck-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: calc(6px + var(--safe-t)) 10px 6px; }
.ck-count { font: 800 22px/1 var(--display); letter-spacing: .01em; }
.ck-tools { display: flex; gap: 2px; }
.ck-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; color: var(--ck-ink); }
.ck-icon:active { background: rgba(255,255,255,.1); }
.ck-icon.on { color: var(--mark); }
.ck-bar { height: 4px; background: var(--ck-line); margin: 0 var(--gut); border-radius: 4px; overflow: hidden; }
.ck-bar i { display: block; height: 100%; background: var(--mark); transition: width .3s; }
.ck-body { flex: 1; overflow-y: auto; padding: 26px var(--gut) 24px; -webkit-overflow-scrolling: touch; max-width: 760px; width: 100%; margin: 0 auto; }
.ck-body.in-r { animation: ckin-r .26s ease-out; }
.ck-body.in-l { animation: ckin-l .26s ease-out; }
@keyframes ckin-r { from { transform: translateX(24px); opacity: .2; } }
@keyframes ckin-l { from { transform: translateX(-24px); opacity: .2; } }
.ck-kicker { margin: 0 0 10px; font-size: 14.5px; font-weight: 600; color: var(--ck-mut); }
.ck-step { margin: 0; font: 500 var(--ck-step)/1.34 var(--text); letter-spacing: -.005em; text-wrap: pretty; }
.ck-done { margin: 0; font: 900 clamp(56px, 18vw, 96px)/.9 var(--display); color: var(--mark); }
.ck-sub { margin: 14px 0 0; font-size: 18px; line-height: 1.5; color: var(--ck-mut); }
.tchip { display: inline-flex; align-items: center; gap: 5px; vertical-align: baseline; margin: 0 2px; padding: 1px 10px 2px 8px; border-radius: 8px; border: 1.5px solid var(--mark); color: var(--mark); font: inherit; font-weight: 650; line-height: 1.25; }
.tchip svg.i { width: .8em; height: .8em; }
.ck-need { margin-top: 28px; border-top: 1px solid var(--ck-line); padding-top: 14px; }
.ck-need h3, .ck-drawer-h h3 { margin: 0 0 4px; font: 800 22px/1 var(--display); color: var(--ck-mut); }
.ck-ings { list-style: none; margin: 10px 0 0; padding: 0; }
.ck-ings li { display: grid; grid-template-columns: 104px 1fr; gap: 0 12px; padding: 12px 0; border-bottom: 1px solid var(--ck-line); font-size: 19px; line-height: 1.35; cursor: pointer; min-height: 48px; }
.ck-ings .q { font-weight: 700; }
.ck-ings .nt { display: block; font-size: 14.5px; color: var(--ck-mut); }
.ck-ings li.have { color: var(--ck-mut); }
.ck-ings li.have .q, .ck-ings li.have > span:last-child { text-decoration: line-through; }
.ck-timer { margin-top: 26px; min-height: 60px; width: 100%; font-size: 19px; border-color: var(--mark); color: var(--mark); border-radius: 14px; }
.ck-drawer-btn { margin: 0 auto 6px; min-height: 44px; padding: 0 18px; color: var(--ck-mut); font-weight: 650; font-size: 15px; text-decoration: underline; text-underline-offset: 3px; }
.ck-nav { display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; padding: 10px var(--gut) calc(12px + var(--safe-b)); max-width: 760px; width: 100%; margin: 0 auto; }
.ck-nav .btn { min-height: 64px; border-radius: 16px; font-size: 18px; }
.ck-nav .btn:only-child { grid-column: 1 / -1; }
.btn.mark { background: var(--mark); border-color: var(--mark); color: var(--ink); }
.btn.ghostlight { border-color: var(--ck-line); color: var(--ck-ink); }
.btn[disabled] { opacity: .3; }
.ck-end { display: grid; gap: 14px; margin-top: 28px; }
.ck-end .btn { min-height: 58px; font-size: 17px; }
.ck-notelbl { font-weight: 650; color: var(--ck-mut); margin-top: 8px; }
.notes.dark { background: rgba(255,255,255,.06); border-color: var(--ck-line); color: var(--ck-ink); margin-top: 0; }
.ck-drawer { position: absolute; left: 0; right: 0; bottom: 0; max-height: 78%; overflow-y: auto; background: #173327; border-radius: 20px 20px 0 0; padding: 16px var(--gut) calc(20px + var(--safe-b)); box-shadow: 0 -12px 40px rgba(0,0,0,.35); animation: rise .25s cubic-bezier(.2,.8,.2,1); }
.ck-drawer-h { display: flex; align-items: center; justify-content: space-between; }

/* ---------- Timers (zweven onderin, overal zichtbaar) ---------- */
#timers { position: fixed; z-index: 55; left: 0; right: 0; bottom: calc(var(--tab-h) + var(--safe-b) + 10px); display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; padding: 0 var(--gut); }
body.cooking #timers { bottom: calc(96px + var(--safe-b)); }
body.cooking.has-timers .ck-body { padding-bottom: 90px; }
body.has-timers main { padding-bottom: calc(var(--tab-h) + var(--safe-b) + 96px); }
.tm { pointer-events: auto; display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 16px; border-radius: 999px; background: var(--ink); color: var(--paper); box-shadow: 0 6px 20px rgba(0,0,0,.25); min-width: 220px; max-width: 100%; }
.cooking .tm { background: var(--paper); color: var(--ink); }
.tm-l { font-size: 14px; font-weight: 600; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-t { font: 800 24px/1 var(--display); font-variant-numeric: tabular-nums; min-width: 64px; text-align: right; }
.tm button { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: inherit; }
.tm.soon { animation: pulse 1s ease-in-out infinite; }
.tm.done { background: var(--campari); color: var(--paper); animation: pulse .8s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.04); } }

body.cooking #toast { bottom: auto; top: calc(64px + var(--safe-t)); transform: translate(-50%, -12px); }
body.cooking #toast.show { transform: translate(-50%, 0); }