/* Bestellen vanuit de menukaart */
.has-order .sticky-cta{display:none!important}
.has-order{padding-bottom:96px}
.row-price{display:flex;align-items:center;gap:12px}
.row-add{width:34px;height:34px;border-radius:50%;border:0;background:var(--moss);color:var(--white);cursor:pointer;position:relative;flex:0 0 auto;box-shadow:0 1px 0 rgba(0,0,0,.05),0 6px 14px -8px rgba(90,92,42,.7);transition:transform .16s var(--ease),background-color .16s var(--ease),box-shadow .16s var(--ease);-webkit-tap-highlight-color:transparent}
.row-add span::before,.row-add span::after{content:"";position:absolute;left:50%;top:50%;background:currentColor;border-radius:2px;transform:translate(-50%,-50%)}
.row-add span::before{width:14px;height:2px}.row-add span::after{width:2px;height:14px}
.row-add:hover{background:#767929;transform:translateY(-1px)}
.row-add:active{transform:scale(.92)}
.row.soldout .row-add{display:none}

.ob-bar{position:fixed;left:0;right:0;bottom:0;z-index:48;padding:10px 14px calc(12px + env(safe-area-inset-bottom));pointer-events:none;transform:translateY(120%);transition:transform .35s var(--ease)}
.ob-bar.show{transform:none}
.ob-bar-in{max-width:560px;margin:0 auto;pointer-events:auto;background:var(--ink);color:var(--white);border-radius:16px;padding:8px 8px 8px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;box-shadow:0 18px 40px -14px rgba(0,0,0,.55)}
.ob-bar-mode{font-family:var(--sans);font-size:12.5px;letter-spacing:.02em;color:rgba(255,255,255,.72);line-height:1.3}
.ob-bar-mode b{color:var(--white);font-weight:700}
.ob-bar-btn{display:flex;align-items:center;gap:10px;border:0;border-radius:11px;background:var(--moss);color:var(--white);font-family:var(--sans);font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:lowercase;padding:0 14px 0 8px;min-height:44px;cursor:pointer;transition:transform .16s var(--ease),background-color .16s var(--ease);white-space:nowrap}
.ob-bar-btn:hover{background:#767929}.ob-bar-btn:active{transform:scale(.97)}
.ob-bar-btn.is-empty{background:rgba(255,255,255,.12)}
.ob-count{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;border-radius:8px;background:rgba(255,255,255,.18);font-variant-numeric:tabular-nums}
.ob-total{font-variant-numeric:tabular-nums;letter-spacing:.02em;text-transform:none;font-size:13px}
.ob-bar.pulse .ob-bar-in{animation:obpulse .45s var(--ease)}
@keyframes obpulse{0%{transform:scale(1)}35%{transform:scale(1.03)}100%{transform:scale(1)}}
@media (max-width:480px){.ob-bar-mode{display:none}.ob-bar-in{padding-left:8px}.ob-bar-btn{flex:1;justify-content:space-between}}
/* buiten de openingsuren: bestellen niet mogelijk, alleen een nette melding */
.ob-bar.is-closed .ob-bar-in{background:var(--paper,#EEF3E5);color:var(--ink);justify-content:center;text-align:center;border:1px solid rgba(133,136,56,.28);box-shadow:0 14px 34px -18px rgba(0,0,0,.4)}
.ob-bar-closed{font-family:var(--sans);font-size:12.5px;letter-spacing:.01em;line-height:1.4;padding:11px 14px;color:var(--ink)}

.ob-sheet{position:fixed;inset:0;z-index:80;pointer-events:none}
.ob-sheet-bg{position:absolute;inset:0;background:rgba(43,43,34,.45);opacity:0;transition:opacity .3s var(--ease)}
.ob-sheet-box{text-align:left;position:absolute;left:0;right:0;bottom:0;max-height:88vh;overflow:auto;background:var(--paper);color:var(--ink);border-radius:20px 20px 0 0;padding:18px 20px calc(24px + env(safe-area-inset-bottom));transform:translateY(100%);transition:transform .38s var(--ease);box-shadow:0 -20px 60px -20px rgba(0,0,0,.4);-webkit-overflow-scrolling:touch}
@media (min-width:700px){.ob-sheet-box{left:50%;right:auto;width:520px;transform:translate(-50%,calc(100% + 60px));bottom:24px;border-radius:20px;max-height:86vh}.ob-sheet.open .ob-sheet-box{transform:translate(-50%,0)}}
.ob-sheet.open{pointer-events:auto}.ob-sheet.open .ob-sheet-bg{opacity:1}.ob-sheet.open .ob-sheet-box{transform:none}
.ob-lock{overflow:hidden}
.sh-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.sh-title{font-family:var(--sans);font-weight:700;font-size:19px;letter-spacing:-.01em}
.sh-desc{font-size:15px;color:var(--ink-3);margin-top:3px;line-height:1.4}
.sh-x{width:44px;height:44px;border-radius:50%;border:0;background:var(--cream);cursor:pointer;position:relative;flex:0 0 auto}
.sh-x::before,.sh-x::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;background:var(--ink);border-radius:2px;transform:translate(-50%,-50%) rotate(45deg)}
.sh-x::after{transform:translate(-50%,-50%) rotate(-45deg)}
.opt-group{border:0;padding:14px 0 4px;margin:0}
.opt-group legend{font-family:var(--sans);font-weight:700;font-size:11.5px;letter-spacing:.12em;text-transform:lowercase;color:var(--olive-deep);padding:0;margin-bottom:6px}
.opt-group legend small{font-weight:500;letter-spacing:.04em;text-transform:none;color:var(--mute);margin-left:6px;font-size:11.5px}
.opt{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line-soft);cursor:pointer}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt-mark{width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line);background:var(--white);position:relative;transition:box-shadow .15s var(--ease)}
.opt input[type=checkbox]+.opt-mark{border-radius:6px}
.opt input:checked+.opt-mark{box-shadow:inset 0 0 0 6px var(--moss)}
.opt input[type=checkbox]:checked+.opt-mark{box-shadow:inset 0 0 0 10px var(--moss)}
.opt input[type=checkbox]:checked+.opt-mark::after{content:"";position:absolute;left:7px;top:3px;width:5px;height:10px;border:solid var(--white);border-width:0 2px 2px 0;transform:rotate(45deg)}
.opt-name{font-family:var(--sans);font-size:15px;font-weight:500}
.opt-name small{display:block;font-weight:400;font-size:13px;color:var(--ink-3);line-height:1.35;margin-top:2px}
.opt-price{font-family:var(--sans);font-size:13.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.sh-foot{position:sticky;bottom:-24px;padding:14px 0 0;background:linear-gradient(180deg,rgba(238,243,229,0),var(--paper) 40%)}
.sh-add{width:100%}
.shake{animation:obshake .4s}
@keyframes obshake{20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}

.ob-list{padding:4px 0}
.ob-empty{color:var(--mute);font-size:16px;padding:18px 0}
.ob-item{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line-soft)}
.ob-item-name{font-family:var(--sans);font-weight:600;font-size:15.5px}
.ob-item-adds{font-size:14px;color:var(--ink-3);line-height:1.35}
.ob-item-price{font-family:var(--sans);font-size:15px;font-variant-numeric:tabular-nums;min-width:64px;text-align:right}
.ob-qty{display:inline-flex;align-items:center;gap:2px;background:var(--white);border-radius:10px;box-shadow:inset 0 0 0 1px var(--line-soft)}
.ob-qty button{width:40px;height:40px;border:0;background:transparent;font-size:18px;cursor:pointer;color:var(--ink);border-radius:9px}
.ob-qty button:hover{background:var(--cream)}
.ob-qty span{min-width:20px;text-align:center;font-family:var(--sans);font-weight:600;font-size:14px}
.ob-fields{display:grid;gap:10px;padding-top:14px}
.fld{display:grid;gap:5px}
.fld>span{font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:lowercase;color:var(--olive-deep)}
.fld input,.fld select,.fld textarea{width:100%;box-sizing:border-box;border:0;border-radius:10px;background:var(--white);box-shadow:inset 0 0 0 1px var(--line);padding:12px 14px;font:inherit;font-family:var(--sans);font-size:15px;color:var(--ink);outline:0}
.fld input:focus,.fld select:focus,.fld textarea:focus{box-shadow:inset 0 0 0 2px var(--moss)}
.fld.bad input,.fld.bad select{box-shadow:inset 0 0 0 2px #B04A3A}
.fld textarea{resize:vertical}
.when{display:grid;grid-template-columns:1fr 110px;gap:8px}
.ob-total{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--sans);padding:16px 0 6px;font-size:14px;letter-spacing:.06em;text-transform:lowercase}
.ob-total b{font-size:20px;letter-spacing:0;text-transform:none;font-variant-numeric:tabular-nums}
.ob-paywith{display:block;font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:lowercase;color:var(--olive-deep);margin:8px 0 8px}
.ob-methods{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.ob-method{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 14px;border:0;border-radius:11px;background:var(--white);box-shadow:inset 0 0 0 1px var(--line);font-family:var(--sans);font-weight:600;font-size:14px;color:var(--ink);cursor:pointer;transition:transform .16s var(--ease),box-shadow .16s var(--ease)}
.ob-method:hover{box-shadow:inset 0 0 0 2px var(--moss);transform:translateY(-1px)}
.ob-method:active{transform:scale(.98)}
.ob-safe{font-size:13px;color:var(--mute);font-family:var(--sans);margin:12px 0 0;line-height:1.45}
.ob-form.is-empty .ob-fields,.ob-form.is-empty .ob-pay,.ob-form.is-empty .ob-total{display:none}
/* btw-ticket (12/10): hetzelfde vinkje als bij de keuzes, als veld tussen de andere velden */
/* Het mandje heeft de klasse 'open', die --line wit maakt (site.css): hier een eigen lijnkleur, en het lege vakje een olijfrand,
   anders is het vinkje onzichtbaar zolang het niet aangevinkt is (eindronde 12/10). */
.ob-vat{--line:#C6D3B0;grid-template-columns:auto 1fr;min-height:48px;box-sizing:border-box;padding:12px 14px;border-bottom:0;border-radius:10px;background:var(--white);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .15s var(--ease);-webkit-tap-highlight-color:transparent}
.ob-vat:has(input:checked){box-shadow:inset 0 0 0 2px var(--moss)}
.ob-vat .opt-mark{box-shadow:inset 0 0 0 1.5px var(--moss);transition:box-shadow .15s var(--ease),transform .12s var(--ease)}
.ob-vat:active .opt-mark{transform:scale(.9)}
.ob-vat input:focus-visible+.opt-mark{outline:2px solid var(--moss);outline-offset:2px}
/* busy mode bovenaan het mandje: dezelfde kaart als in de hero (site.css, .druk-card), volle breedte, hoeken zoals de velden */
.druk-card.ob-druk{max-width:none;margin:16px 0 6px;border-radius:12px}
.ob-form.busy .ob-fields,.ob-form.busy .ob-pay{opacity:.35;pointer-events:none}
.ob-status{display:flex;align-items:center;gap:12px;padding:16px 0 4px;font-family:var(--sans);font-size:14.5px}
.ob-spin{width:22px;height:22px;border-radius:50%;border:2.5px solid var(--line);border-top-color:var(--moss);animation:obspin .8s linear infinite;flex:0 0 auto}
@keyframes obspin{to{transform:rotate(360deg)}}
.ob-err{font-family:var(--sans);font-size:14px;color:#B04A3A;margin:12px 0 0;line-height:1.45}

.ob-status[hidden],.ob-err[hidden]{display:none}

.table-known{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--white);border-radius:10px;box-shadow:inset 0 0 0 1px var(--line);padding:4px 10px 4px 14px;font-family:var(--sans);font-size:15px}
.table-known b{font-weight:700}
.table-change{display:inline-flex;align-items:center;min-height:40px;border:0;background:transparent;font-family:var(--sans);font-size:12.5px;color:var(--olive-deep);text-decoration:underline;cursor:pointer;padding:0 4px}
.table-known[hidden]{display:none}
/* ---- Fooi (12/10, opmerking Yindra: 'Afronden' leek op 'bestelling afronden') ----
   Eigen blok onder een haarlijn: kop + 'vrijblijvend', keuzes als rustige tegels in een raster (zelfde witte tegel als
   de betaalknoppen), het bedrag erbij in een zachtere toon. 'Geen fooi' staat vooraan en is standaard gekozen. */
.ob-tip{margin-top:22px;padding-top:18px;border-top:1px solid var(--line-soft)}
.ob-tip-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 10px;margin:0 0 12px}
.ob-tip-kop{font-family:var(--sans);font-size:15.5px;font-weight:700;letter-spacing:-.005em;line-height:1.3;color:var(--ink)}
.ob-tip-opt{font-family:var(--sans);font-size:13px;font-weight:500;color:var(--ink-3)}
.ob-tips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ob-tips .c-tip:last-child:nth-child(odd){grid-column:1 / -1}
@media (min-width:520px){
  .ob-tips{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ob-tips .c-tip:last-child:nth-child(odd){grid-column:auto}
  .ob-tips .c-tip:last-child:nth-child(3n+2){grid-column:span 2}
}
.c-tip{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0 4px;min-height:44px;padding:6px 10px;border:0;border-radius:11px;background:var(--white);box-shadow:inset 0 0 0 1px var(--line);font-family:var(--sans);font-size:14px;line-height:1.25;color:var(--ink);text-align:center;cursor:pointer;font-variant-numeric:tabular-nums;transition:box-shadow .15s var(--ease),color .15s var(--ease),transform .12s var(--ease);-webkit-tap-highlight-color:transparent}
.c-tip-l{font-weight:600;white-space:nowrap}
.c-tip-a{font-weight:500;color:var(--ink-3);white-space:nowrap;transition:color .15s var(--ease)}
.c-tip:hover{box-shadow:inset 0 0 0 1px var(--olive-soft)}
.c-tip:active{transform:scale(.98)}
.c-tip:focus-visible{outline:2px solid var(--moss);outline-offset:2px}
.c-tip.on{box-shadow:inset 0 0 0 2px var(--moss);color:var(--olive-deep)}
.c-tip.on .c-tip-l{font-weight:700}
.c-tip.on .c-tip-a{color:var(--olive-deep)}
@media (max-width:359px){ .c-tip{padding:6px;font-size:13px} } /* heel smalle toestellen: 'Round up · + € 0,30' op één regel */
.ob-form.is-empty .ob-tip{display:none}
.ob-form.busy .ob-tip{opacity:.35;pointer-events:none}
/* ---- einde fooi ---- */
.ob-total{display:block;padding:16px 0 6px;font-family:var(--sans)}
.ob-total>div{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;letter-spacing:.06em;text-transform:lowercase;padding:3px 0}
.ob-sub,.ob-tipline{color:var(--ink-3);font-size:12.5px}
.ob-grand{border-top:1px solid var(--line-soft);margin-top:6px;padding-top:10px}
.ob-tipline[hidden]{display:none}

/* cadeaubon bij het afrekenen */
.ob-giftline[hidden],.ob-dueline[hidden]{display:none}
.ob-giftline{color:var(--moss)}
.ob-giftline .ob-gift-v{font-weight:700;text-transform:none;letter-spacing:0}
.ob-dueline{border-top:1px solid var(--line-soft);margin-top:6px;padding-top:10px}
.ob-dueline b{font-size:20px;letter-spacing:0;text-transform:none;font-variant-numeric:tabular-nums}
.ob-gift{padding-top:12px}
.ob-gift-toggle{display:inline-flex;align-items:center;min-height:40px;border:0;background:transparent;padding:0;font-family:var(--sans);font-size:13px;font-weight:600;color:var(--olive-deep);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.ob-gift-box{margin-top:10px}
.ob-gift-box[hidden]{display:none}
.ob-gift-row{display:grid;grid-template-columns:1fr auto;gap:8px}
.ob-gift-row input{width:100%;box-sizing:border-box;border:0;border-radius:10px;background:var(--white);box-shadow:inset 0 0 0 1px var(--line);padding:12px 14px;font:inherit;font-family:var(--sans);font-size:16px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);outline:0}
.ob-gift-row input::placeholder{letter-spacing:.02em;text-transform:none;color:var(--mute)}
.ob-gift-row input:focus{box-shadow:inset 0 0 0 2px var(--moss)}
.ob-gift-check{border:0;border-radius:10px;background:var(--white);box-shadow:inset 0 0 0 1px var(--moss);padding:0 16px;font-family:var(--sans);font-weight:600;font-size:13px;color:var(--olive-deep);cursor:pointer;white-space:nowrap;transition:background-color .15s var(--ease)}
.ob-gift-check:hover{background:var(--cream)}
.ob-gift-check:active{transform:scale(.98)}
.ob-gift-check:disabled{opacity:.5;cursor:default}
.ob-gift-msg{margin:9px 0 0;font-family:var(--sans);font-size:13.5px;line-height:1.45}
.ob-gift-msg[hidden]{display:none}
.ob-gift-msg.ok{color:var(--moss)}
/* site.css verbergt elke .ok (formulierbevestiging); deze melding moet wél zichtbaar zijn */
.ob-gift-msg.ok:not([hidden]){display:block}
.ob-gift-msg.bad{color:#B04A3A}
.ob-gift-msg.checking{color:var(--mute)}
.ob-gift-remove{border:0;background:transparent;padding:0 0 0 8px;font-family:var(--sans);font-size:12.5px;color:var(--olive-deep);text-decoration:underline;cursor:pointer}
.ob-method-full{grid-column:1 / -1;background:var(--moss);color:var(--white);box-shadow:none}
.ob-method-full:hover{box-shadow:none;transform:translateY(-1px);filter:brightness(1.04)}
.ob-method[hidden]{display:none}
.ob-method-full[hidden]{display:none}
.ob-done{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:26px 8px 10px}
.ob-done-check{width:58px;height:58px;border-radius:50%;background:var(--matcha,#D7E6C2);position:relative;flex:0 0 auto}
.ob-done-check::after{content:"";position:absolute;left:21px;top:15px;width:12px;height:23px;border:solid var(--moss);border-width:0 3px 3px 0;transform:rotate(45deg)}
.ob-done .sh-title{font-size:22px}
.ob-done-code{display:flex;flex-direction:column;gap:3px;background:var(--white);border-radius:12px;box-shadow:inset 0 0 0 1px var(--line);padding:12px 24px}
.ob-done-code span{font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:lowercase;color:var(--olive-deep)}
.ob-done-code b{font-family:var(--sans);font-size:30px;letter-spacing:.08em;color:var(--ink)}
.ob-done-sub{font-family:var(--sans);font-size:14px;color:var(--ink-3);margin:0;line-height:1.45}
.ob-done-x{margin-top:6px;min-width:150px}

/* Combo-deal (Yindra 15/10, enkel za 17 en zo 18 oktober): rustige band boven de kaart, regel in de totalen */
.combo-band{display:grid;gap:4px;margin:0 0 clamp(18px,3vw,28px);padding:14px 18px;border:1px solid var(--hair);border-radius:12px;background:var(--surface,#fff)}
.combo-band b{font-family:var(--head);font-stretch:125%;font-weight:500;font-size:17px;letter-spacing:-.01em;color:var(--ink)}
.combo-band span{font-size:14.5px;line-height:1.45;color:var(--ink-2,#4A4A3C)}
.combo-band strong{font-weight:700;color:var(--ink)}
.ob-comboline{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:var(--olive-dark)}
.ob-comboline[hidden]{display:none}
.ob-comboline>span:first-child{flex:none;white-space:nowrap}
.ob-combo-v{text-align:right}