/* ============================================================================
   DE SMULSTRAAT - Klant-bestelsite
   ========================================================================== */

/* ------------------------------- Header ----------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 500; height: var(--header-h);
  background: rgba(251, 245, 239, .82); backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--line); display: flex; align-items: center;
}
.site-header .container { display: flex; align-items: center; gap: 18px; }
.brand-logo { display: flex; align-items: center; gap: 13px; font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: -.02em; }
.brand-mark { width: 46px; height: 46px; flex: none; }
.loc-pill { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); font-size: 13.5px; font-weight: 600; box-shadow: var(--sh-sm); }
.header-search { flex: 1; max-width: 360px; position: relative; }
.header-search input { width: 100%; padding: 11px 16px 11px 42px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--surface); font: inherit; }
.header-search input:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(234, 59, 44, .12); }
.header-search .si { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); opacity: .5; }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }

.points-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--r-pill); background: linear-gradient(135deg, #fff3e6, #ffe9d4); border: 1px solid #ffd9b0; font-weight: 800; font-size: 13.5px; color: #b25a00; transition: transform .18s; }
.points-pill:hover { transform: translateY(-2px) scale(1.03); }
.points-pill .coin { font-size: 16px; animation: none; }

.cart-btn { position: relative; }
.m-search-btn { display: none; }
.cart-count { position: absolute; top: -6px; right: -6px; min-width: 21px; height: 21px; padding: 0 5px; border-radius: 99px; background: var(--brand); color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(234, 59, 44, .5); border: 2px solid var(--bg); }

/* ------------------------------- Hero ------------------------------------- */
.hero { position: relative; overflow: hidden; background: radial-gradient(120% 120% at 80% -10%, #46264f 0%, #2a1830 45%, #1a0f20 100%); color: #fff; padding: 64px 0 120px; }
.hero::before, .hero::after { content: ""; position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; }
.hero::before { width: 420px; height: 420px; background: radial-gradient(circle, #ea3b2c, transparent 70%); top: -120px; right: -60px; }
.hero::after { width: 380px; height: 380px; background: radial-gradient(circle, #ff9e2c, transparent 70%); bottom: -160px; left: -80px; opacity: .4; }
.hero .container { position: relative; z-index: 2; }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; }
.hero h1 { font-size: clamp(36px, 5.2vw, 62px); line-height: 1.02; }
.hero h1 .accent { background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lead { font-size: 18px; color: #e8dced; margin-top: 18px; max-width: 30em; }
.hero-cta { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.hero-trust { display: flex; gap: 26px; margin-top: 34px; flex-wrap: wrap; }
.hero-trust .t { display: flex; flex-direction: column; }
.hero-trust .t b { font-family: var(--display); font-size: 22px; }
.hero-trust .t span { font-size: 12.5px; color: #c9bcd0; }
.hero-stars { color: #ffc83d; letter-spacing: 2px; }

/* Hero collage (stapel keuken-tegels) */
.hero-collage { position: relative; height: 400px; }
.hero-collage .tile { position: absolute; border-radius: var(--r-lg); box-shadow: var(--sh-lg); overflow: hidden; border: 4px solid rgba(255, 255, 255, .9); }
.hero-collage .tile .em { width: 100%; height: 100%; display: grid; place-items: center; font-size: 64px; }
.hc1 { width: 186px; height: 210px; top: 6px; left: 10px; transform: rotate(-7deg); z-index: 5; animation: floaty 6s ease-in-out infinite; }
.hc2 { width: 150px; height: 150px; top: -10px; right: 14px; transform: rotate(8deg); z-index: 3; animation: floaty 7s ease-in-out infinite .6s; }
.hc3 { width: 158px; height: 184px; bottom: 64px; right: -14px; transform: rotate(-6deg); z-index: 4; animation: floaty 6.5s ease-in-out infinite .3s; }
.hc4 { width: 140px; height: 140px; bottom: 0; left: -8px; transform: rotate(6deg); z-index: 2; animation: floaty 8s ease-in-out infinite .2s; }
.hc5 { width: 132px; height: 132px; top: 150px; left: 150px; transform: rotate(-10deg); z-index: 6; animation: floaty 7.5s ease-in-out infinite .45s; }
.hc6 { width: 118px; height: 150px; bottom: -16px; right: 150px; transform: rotate(10deg); z-index: 1; animation: floaty 6.8s ease-in-out infinite .1s; }
@keyframes floaty { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
.hero-badge { position: absolute; z-index: 6; background: #fff; color: var(--ink); border-radius: var(--r-pill); padding: 9px 15px; font-weight: 800; font-size: 13px; box-shadow: var(--sh-lg); display: flex; align-items: center; gap: 8px; }
.hb-top { top: 50%; left: -14px; }
.hb-bottom { bottom: -10px; right: 0; }

/* Wave/overlap die secties laat overlappen */
.overlap { margin-top: -78px; position: relative; z-index: 3; }

/* --------------------- "Zo werkt het" strook ------------------------------ */
.how-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.how-card { background: var(--surface); border-radius: var(--r-lg); padding: 22px; box-shadow: var(--sh); border: 1px solid var(--line); display: flex; gap: 14px; align-items: flex-start; }
.how-card .n { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 18px; background: var(--brand-grad-soft); color: var(--brand-600); }
/* h4 en h2 allebei gedekt: app.js zet deze kop om naar h2 zodat de
   koppenvolgorde op de homepagina niet van h1 naar h4 springt (WCAG). Door beide
   selectors te noemen maakt de volgorde van landen niet uit. Visueel identiek:
   base.css pakt h1 t/m h4 met dezelfde reset en de font-size staat hier
   expliciet. Ruim de h4-helft op zodra de JS-wijziging geland is. */
.how-card h4, .how-card h2 { font-size: 16px; margin-bottom: 3px; }
.how-card p { font-size: 13.5px; color: var(--ink-2); }

/* ----------------------- Keuken-overzicht --------------------------------- */
.filter-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 22px; }
.sort-sel { margin-left: auto; height: 40px; width: auto; padding: 0 36px 0 15px; border-radius: 999px; border: 1px solid var(--line); background-color: var(--surface); color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; transition: border-color .2s; }
.sort-sel:hover { border-color: var(--brand); }
.sort-sel:focus { outline: none; border-color: var(--brand); }
@media (max-width: 640px) { .sort-sel { margin-left: 0; width: 100%; } }
.mode-band { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 0 0 20px; }
.mode-band .seg { flex: 0 0 auto; }
.mode-cost { font-size: 13.5px; color: var(--ink-2); }
.mode-cost .smul-ic { vertical-align: -0.2em; margin-right: 3px; color: var(--brand-600); }
.seg button .smul-ic { vertical-align: -0.2em; margin-right: 3px; }
.cart-mode { margin-bottom: 14px; }
.cart-mode .seg { display: flex; width: 100%; }
.cart-mode .seg button { flex: 1; }
.cart-pickup { background: var(--bg-2); border-radius: 14px; padding: 13px 15px; font-size: 13.5px; color: var(--ink-2); margin-bottom: 14px; line-height: 1.5; }
.cart-pickup .smul-ic { vertical-align: -0.2em; margin-right: 5px; color: var(--brand-600); }
/* ------------------------------- Reviews ---------------------------------- */
.stars { display: inline-flex; gap: 1px; }
.stars .st { color: var(--line); font-size: 15px; line-height: 1; }
.stars .st.on { color: #f5a623; }
.reviews-wrap { margin-top: 40px; }
.reviews-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.reviews-head h2 { font-size: 24px; }
#revSummary { display: inline-flex; align-items: center; gap: 7px; }
.review-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin-bottom: 12px; }
.rc-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.rc-author { font-weight: 700; }
.rc-badge { display: inline-flex; align-items: center; gap: 4px; background: #eaf7ee; color: #1a7a3a; border-radius: 999px; padding: 2px 9px; font-size: 11.5px; font-weight: 700; }
.rc-badge .smul-ic { vertical-align: -0.1em; }
.rc-date { color: var(--ink-3); margin-left: auto; }
.rc-comment { margin-top: 8px; font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.rc-reply { margin-top: 10px; padding: 10px 12px; background: var(--bg-2); border-radius: 10px; border-left: 3px solid var(--brand); }
.rc-reply b { font-size: 12px; color: var(--brand-600); }
.rc-reply p { margin-top: 3px; font-size: 13.5px; color: var(--ink-2); }
.review-invite { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 20px; margin: 24px auto 0; max-width: 560px; text-align: left; box-shadow: var(--sh-sm); }
.review-invite.done { text-align: center; color: #1a7a3a; font-weight: 600; }
.review-invite h3 { font-size: 19px; }
.review-invite h3 .smul-ic { color: #f5a623; vertical-align: -0.2em; margin-right: 4px; }
.review-invite > p { margin-top: 4px; }
.review-form { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 14px; }
.review-form:first-of-type { border-top: 0; }
.rf-kitchen { font-weight: 700; margin-bottom: 6px; }
.star-pick { display: inline-flex; gap: 2px; margin-bottom: 8px; }
.star-pick .sp { border: 0; background: none; cursor: pointer; font-size: 28px; line-height: 1; color: var(--line); padding: 0 2px; transition: color .12s; }
.star-pick .sp.on { color: #f5a623; }
.rf-comment { width: 100%; resize: vertical; }
.rf-bottom { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.rf-msg { font-size: 13px; }
.rf-msg.bad { color: #c0271f; }
.rf-thanks { display: flex; align-items: center; gap: 6px; color: #1a7a3a; font-weight: 600; }
.rf-thanks .smul-ic { color: #1a7a3a; }
/* bezorgbewijs op de trackingpagina */
.delivery-proof { max-width: 560px; margin: 22px auto 0; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; text-align: left; }
.delivery-proof h3 { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.delivery-proof .dp-note { color: #0f7a37; font-size: 14px; margin: 8px 0; display: flex; align-items: center; gap: 6px; }
.delivery-proof img { max-width: 100%; border-radius: 14px; border: 1px solid var(--line); margin-top: 8px; display: block; }
.kitchen-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.kcard { position: relative; background: var(--surface); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-sm); border: 1px solid var(--line); cursor: pointer; transition: transform .26s cubic-bezier(.22, 1, .36, 1), box-shadow .26s; display: flex; flex-direction: column; }
.kcard:hover { transform: translateY(-8px); box-shadow: var(--sh-lg); }
.kcard .banner { position: relative; height: 150px; overflow: hidden; }
.kcard .banner .img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
.kcard:hover .banner .img { transform: scale(1.08); }
.kcard .banner .grad-em { position: absolute; inset: 0; display: grid; place-items: center; font-size: 74px; }
.kcard .banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, .35)); }
.kcard .klogo { position: absolute; bottom: -26px; left: 18px; width: 56px; height: 56px; border-radius: 16px; background: #fff; box-shadow: var(--sh); display: grid; place-items: center; font-size: 28px; overflow: hidden; z-index: 3; border: 2px solid #fff; }
.kcard .klogo img { width: 100%; height: 100%; object-fit: cover; }
.kcard .status-float { position: absolute; top: 12px; left: 12px; z-index: 3; box-shadow: var(--sh-sm); background: rgba(255, 255, 255, .94); }
.kcard .fav { position: absolute; top: 12px; right: 12px; z-index: 3; width: 36px; height: 36px; font-size: 16px; }
.kcard .body { padding: 34px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.kcard h3 { font-size: 20px; }
.kcard .cuisine { font-size: 13px; color: var(--ink-3); }
.kcard .meta { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--ink-2); margin-top: auto; }
.kcard .meta .rt { font-weight: 800; color: var(--ink); }
.kcard .go { margin-top: 12px; opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s; }
.kcard:hover .go, .kcard:focus-within .go { opacity: 1; transform: translateY(0); }

/* Gesloten / binnenkort varianten */
.kcard.is-closed .banner .img, .kcard.is-closed .banner .grad-em { filter: grayscale(.85) brightness(.9); }
.kcard.is-closed .body { opacity: .92; }
.kcard.is-soon { cursor: default; }
.kcard.is-soon .lock { position: absolute; inset: 0; z-index: 4; background: rgba(26, 15, 32, .42); backdrop-filter: blur(2px); display: grid; place-items: center; }
.kcard.is-soon .lock .lab { background: #fff; color: var(--ink); padding: 10px 18px; border-radius: var(--r-pill); font-weight: 800; box-shadow: var(--sh); }

/* ------------------------- Loyalty teaser --------------------------------- */
.loyalty-cta { position: relative; overflow: hidden; border-radius: var(--r-xl); padding: 40px; color: #fff; background: radial-gradient(120% 140% at 0% 0%, #ff7a3c, #ea3b2c 50%, #e0451f 100%); box-shadow: var(--sh-lg); display: grid; grid-template-columns: 1.3fr 1fr; gap: 26px; align-items: center; }
.loyalty-cta::after { content: ""; position: absolute; width: 220px; height: 220px; right: -30px; bottom: -70px; opacity: .14; transform: rotate(-12deg); background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 12 20 22 4 22 4 12'/><rect x='2' y='7' width='20' height='5' rx='1'/><line x1='12' y1='22' x2='12' y2='7'/><path d='M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z'/><path d='M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z'/></svg>"); background-size: contain; background-repeat: no-repeat; }
.loyalty-cta h2 { font-size: 34px; }
.loyalty-cta p { margin-top: 10px; color: #fff3ec; max-width: 30em; }
.reward-rail { display: flex; gap: 12px; flex-wrap: wrap; }
.reward-coin { background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .3); border-radius: var(--r); padding: 14px; text-align: center; min-width: 96px; backdrop-filter: blur(4px); transition: transform .2s; }
.reward-coin:hover { transform: translateY(-4px); }
.reward-coin .e { font-size: 30px; }
.reward-coin .p { font-weight: 800; font-size: 13px; margin-top: 4px; }
.reward-coin .t { font-size: 11.5px; color: #ffe6d8; }

/* =================== Keuken-menu pagina =================================== */
.kitchen-hero { position: relative; height: 280px; overflow: hidden; border-radius: 0 0 var(--r-xl) var(--r-xl); }
.kitchen-hero .img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.kitchen-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26, 15, 32, .15), rgba(26, 15, 32, .78)); }
.kitchen-hero .kh-inner { position: absolute; z-index: 2; left: 0; right: 0; bottom: 22px; color: #fff; }
.kh-inner .row-top { display: flex; align-items: flex-end; gap: 16px; }
.kh-logo { width: 84px; height: 84px; border-radius: 22px; background: #fff; box-shadow: var(--sh-lg); display: grid; place-items: center; font-size: 42px; overflow: hidden; flex: none; }
.kh-logo img { width: 100%; height: 100%; object-fit: cover; }
.kitchen-hero h1 { font-size: clamp(30px, 4vw, 46px); }
.kh-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.kh-tags .t { background: rgba(255, 255, 255, .2); border: 1px solid rgba(255, 255, 255, .25); padding: 4px 11px; border-radius: 99px; font-size: 12px; font-weight: 600; }
.kh-meta { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 14px; font-size: 14px; align-items: center; }
.kh-meta b { font-weight: 800; }
.kh-meta .kh-hours-btn { display: inline-flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .3); color: #fff; padding: 6px 13px; border-radius: 99px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: background .15s; }
.kh-meta .kh-hours-btn:hover { background: rgba(255, 255, 255, .28); }
.back-btn { position: absolute; top: 18px; left: 0; z-index: 3; }

/* Openingstijden-modal */
.kh-logo-sm { width: 44px; height: 44px; border-radius: 12px; flex: none; overflow: hidden; display: grid; place-items: center; }
.kh-logo-sm img { width: 100%; height: 100%; object-fit: cover; }
.hours-list { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.hours-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; font-size: 14px; border-top: 1px solid var(--line); }
.hours-list .hours-row:first-child { border-top: 0; }
.hours-row.today { background: var(--brand-grad-soft); font-weight: 700; }
.hours-row.closed span:last-child { color: var(--ink-3); }
.hours-badge { display: inline-block; background: var(--brand); color: #fff; font-size: 10.5px; font-weight: 800; padding: 1px 7px; border-radius: 99px; vertical-align: middle; margin-left: 6px; text-transform: uppercase; letter-spacing: .03em; }
.hours-special { margin-top: 16px; }
.hours-special > b { display: flex; align-items: center; gap: 6px; font-size: 13px; margin-bottom: 6px; }
.hours-special .hours-row { border-top: 0; padding: 6px 2px; }

.menu-layout { display: grid; grid-template-columns: 230px 1fr; gap: 32px; align-items: start; padding-top: 28px; }
.cat-nav { position: sticky; top: calc(var(--header-h) + 16px); }
.cat-nav .ttl { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); margin-bottom: 10px; }
.cat-nav a { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-radius: var(--r-sm); font-weight: 600; font-size: 14.5px; color: var(--ink-2); transition: background .15s, color .15s; }
.cat-nav a:hover { background: var(--surface); color: var(--ink); }
.cat-nav a.active { background: var(--ink); color: #fff; }
.cat-nav a .c { font-size: 12px; opacity: .6; }

.menu-section { margin-bottom: 38px; scroll-margin-top: calc(var(--header-h) + 16px); }
.menu-section > h2 { font-size: 24px; margin-bottom: 4px; }
.menu-section > .sub { color: var(--ink-3); font-size: 13.5px; margin-bottom: 16px; }
.menu-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.mitem { position: relative; display: flex; gap: 14px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); cursor: pointer; transition: transform .2s cubic-bezier(.22, 1, .36, 1), box-shadow .2s, border-color .2s; }
.mitem:hover { transform: translateY(-4px); box-shadow: var(--sh); border-color: var(--line-2); }
.mitem .thumb { width: 70px; height: 70px; border-radius: 14px; flex: none; display: grid; place-items: center; font-size: 34px; background: var(--brand-grad-soft); }
.mitem .info { flex: 1; min-width: 0; }
.mitem .info h4 { font-family: var(--font); font-weight: 800; font-size: 15.5px; letter-spacing: 0; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.mitem .info p { font-size: 13px; color: var(--ink-2); margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mitem .price { font-weight: 800; margin-top: 8px; font-size: 15px; }
.mitem .price .from { font-size: 11.5px; color: var(--ink-3); font-weight: 600; }
.mitem .scarcity { font-size: 12px; color: var(--brand-600); font-weight: 700; margin-top: 6px; }
.mitem .allerg { font-size: 11.5px; color: var(--ink-3); margin-top: 5px; display: flex; align-items: center; gap: 4px; }
.mitem .allerg .smul-ic { flex: none; opacity: .8; }
.allerg-note { margin: 22px 0 4px; font-size: 12.5px; color: var(--ink-3); display: flex; align-items: flex-start; gap: 6px; max-width: 54em; line-height: 1.5; }
.allerg-note .smul-ic { flex: none; margin-top: 2px; }
.nutri-box { margin-top: 14px; background: var(--surface-2, #f6f1ea); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 11px 14px; }
.nutri-box b { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); margin-bottom: 3px; }
.nutri-box span { font-size: 13.5px; color: var(--ink); line-height: 1.5; }
.mitem .add { position: absolute; bottom: 14px; right: 14px; width: 38px; height: 38px; border-radius: 12px; border: 0; background: var(--brand-grad); color: #fff; font-size: 22px; line-height: 1; display: grid; place-items: center; box-shadow: var(--sh-brand); transition: transform .18s cubic-bezier(.34, 1.56, .64, 1); }
.mitem .add:hover { transform: scale(1.12) rotate(90deg); }
.mitem .add:active { transform: scale(.9); }
.mitem.unavailable { opacity: .55; pointer-events: none; }
/* gerecht zonder eigen foto: geen placeholder, compacte rij met de plus-knop rechts */
.mitem.no-thumb { align-items: center; }
.mitem.no-thumb .mfav { display: none; }
.mitem.no-thumb .info { padding-right: 50px; }
.mitem.no-thumb .add { top: 50%; bottom: auto; transform: translateY(-50%); }
.mitem.no-thumb .add:hover { transform: translateY(-50%) scale(1.12) rotate(90deg); }
.mitem.no-thumb .add:active { transform: translateY(-50%) scale(.9); }

/* Sticky "naar winkelwagen" balk onderaan keuken-pagina (mobiel-gevoel) */
.menu-closed-note { background: #fff6e6; border: 1px solid #ffe0a8; color: #8a5b00; border-radius: var(--r); padding: 14px 18px; margin: 18px 0; display: flex; align-items: center; gap: 12px; font-weight: 600; }

/* =================== Winkelwagen drawer =================================== */
.drawer { position: fixed; top: 0; right: 0; height: 100%; width: 420px; max-width: 92vw; background: var(--bg); z-index: 1100; box-shadow: var(--sh-lg); transform: translateX(105%); transition: transform .36s cubic-bezier(.22, 1, .36, 1); display: flex; flex-direction: column; }
.drawer.open { transform: translateX(0); }
.drawer-head { padding: 20px 22px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; background: var(--surface); }
.drawer-head h3 { font-size: 21px; }
.drawer-body { flex: 1; overflow-y: auto; padding: 18px 18px 8px; }
.drawer-foot { border-top: 1px solid var(--line); background: var(--surface); padding: 18px 20px 22px; }

.free-bar { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; margin-bottom: 16px; }
.free-bar .lab { font-size: 13px; font-weight: 700; margin-bottom: 9px; display: flex; align-items: center; gap: 7px; }
.free-bar .track { height: 9px; background: var(--bg-2); border-radius: 99px; overflow: hidden; }
.free-bar .fill { height: 100%; background: var(--brand-grad); border-radius: 99px; width: 0; transition: width .6s cubic-bezier(.22, 1, .36, 1); }
.free-bar.done .fill { background: linear-gradient(90deg, #16a34a, #0f8a3e); }

.cart-kitchen { margin-bottom: 16px; }
.cart-kitchen .ckh { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 14px; margin-bottom: 8px; }
.cart-kitchen .ckh .e { font-size: 18px; }
.cart-line { display: flex; gap: 12px; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); margin-bottom: 9px; animation: rise-fade .35s ease both; }
.cart-line .cl-emo { width: 44px; height: 44px; border-radius: 11px; flex: none; display: grid; place-items: center; font-size: 23px; background: var(--brand-grad-soft); }
.cart-line .cl-info { flex: 1; min-width: 0; }
.cart-line .cl-info b { font-size: 14.5px; display: block; }
.cart-line .cl-opts { font-size: 12px; color: var(--ink-3); }
/* De opmerking van de klant is GEEN gekozen optie: een instructie voor de kok
   mag er niet uitzien als een vinkje uit een lijstje. Vandaar een eigen kleur
   en een aanhalingsteken ervoor. */
.cl-note { font-size: 12px; color: var(--brand-600); font-style: italic; }
.cl-note::before { content: "„ "; font-style: normal; }
.cart-line .cl-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.cart-line .cl-price { font-weight: 800; }

.empty-cart { text-align: center; padding: 48px 20px; color: var(--ink-3); }
.empty-cart .e { font-size: 64px; }

/* Loyalty in cart */
.loy-box { background: linear-gradient(135deg, #fff3e6, #ffe9d4); border: 1px solid #ffd9b0; border-radius: var(--r); padding: 14px 16px; margin: 8px 0 16px; }
.loy-box .top { display: flex; align-items: center; justify-content: space-between; font-weight: 800; font-size: 14px; color: #9a4e00; }
.loy-box .track { height: 8px; background: #ffffff8c; border-radius: 99px; overflow: hidden; margin: 9px 0 6px; }
.loy-box .fill { height: 100%; background: linear-gradient(90deg, #ff9e2c, #ea3b2c); width: 0; transition: width .6s; }
.loy-box .hint { font-size: 12px; color: #b25a00; }
.redeem-row { display: flex; gap: 9px; align-items: center; padding: 10px; border-radius: 12px; background: rgba(255,255,255,.55); margin-top: 8px; }
.redeem-row.locked { opacity: .55; }
.redeem-row .e { font-size: 22px; }
.redeem-row .info { flex: 1; }
.redeem-row .info b { font-size: 13.5px; }
.redeem-row .info span { display: block; font-size: 11.5px; color: #9a4e00; }

.totals { font-size: 14px; }
.totals .tr { display: flex; justify-content: space-between; padding: 4px 0; color: var(--ink-2); }
.totals .tr.grand { font-size: 20px; font-weight: 800; color: var(--ink); border-top: 1px dashed var(--line-2); margin-top: 8px; padding-top: 12px; }
.totals .tr.discount { color: #15a34a; font-weight: 700; }

/* Upsell in cart */
.upsell { margin: 6px 0 16px; }
.upsell .ut { font-size: 13px; font-weight: 800; margin-bottom: 8px; }
.upsell-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.upsell-card { flex: none; width: 130px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px; cursor: pointer; transition: transform .18s, box-shadow .2s; }
.upsell-card:hover { transform: translateY(-3px); box-shadow: var(--sh-sm); }
.upsell-card .e { font-size: 26px; }
.upsell-card b { font-size: 12.5px; display: block; margin-top: 4px; line-height: 1.2; }
.upsell-card .p { font-size: 12px; color: var(--ink-2); margin-top: 2px; }

/* =================== Checkout / bevestiging ============================== */
.checkout-wrap { display: grid; grid-template-columns: 1.4fr .9fr; gap: 28px; align-items: start; }
.co-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; margin-bottom: 18px; box-shadow: var(--sh-sm); }
.co-card h3 { font-size: 18px; margin-bottom: 14px; display: flex; align-items: center; gap: 9px; }
.seg { display: inline-flex; background: var(--bg-2); border-radius: var(--r-pill); padding: 4px; gap: 4px; }
.seg button { border: 0; background: transparent; padding: 9px 18px; border-radius: var(--r-pill); font-weight: 700; font-size: 14px; color: var(--ink-2); transition: all .2s; }
.seg button.active { background: var(--surface); color: var(--ink); box-shadow: var(--sh-sm); }
.slot-note { display: flex; align-items: center; gap: 8px; background: #fff6e6; border: 1px solid #ffe0a8; color: #8a5b00; border-radius: var(--r-sm); padding: 10px 13px; margin: 0 0 12px; font-size: 13px; font-weight: 600; }
.slot-note .smul-ic { flex: none; }
.slot-note.warn { background: #ffeaea; border-color: #ffcfcf; color: #b02a1f; }
.menu-closed-note.preorder { background: #eef6ff; border-color: #d5e6fb; color: #22518a; }
.slot-grid, .pay-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pick { border: 1.5px solid var(--line-2); border-radius: var(--r-sm); padding: 12px; text-align: center; cursor: pointer; font-weight: 600; font-size: 14px; transition: all .18s; background: var(--surface); }
.pick:hover { border-color: var(--brand); }
.pick.active { border-color: var(--brand); background: rgba(234, 59, 44, .07); box-shadow: 0 0 0 3px rgba(234, 59, 44, .12); }
.pick .e { font-size: 22px; display: block; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid .full { grid-column: 1 / -1; }

.co-summary { position: sticky; top: calc(var(--header-h) + 16px); }

/* Kortingscode in de samenvatting */
.voucher-row { display: flex; gap: 8px; align-items: stretch; }
.voucher-row .input { flex: 1; min-width: 0; text-transform: uppercase; }
.voucher-row .input::placeholder { text-transform: none; }
.voucher-row .btn { flex: none; }
.voucher-ok { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; background: #e7f7ed; border: 1px solid #bfe8cd; color: #0f7a37; border-radius: var(--r-sm); padding: 10px 13px; font-size: 13.5px; }
.voucher-ok .smul-ic { flex: none; }
.voucher-ok .linklike { margin-left: auto; color: #0f7a37; font-weight: 700; text-decoration: underline; background: none; border: 0; cursor: pointer; font: inherit; font-size: 12.5px; }
.voucher-warn { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; background: #fff4e0; border: 1px solid #fbdba0; color: #a05f00; border-radius: var(--r-sm); padding: 10px 13px; font-size: 13.5px; }
.voucher-warn .smul-ic { flex: none; }
.voucher-warn .linklike { margin-left: auto; color: #a05f00; font-weight: 700; text-decoration: underline; background: none; border: 0; cursor: pointer; font: inherit; font-size: 12.5px; }

/* Bevestiging / tracker */
.confirm { text-align: center; padding: 30px 0; }
.confirm .big-emo { font-size: 80px; animation: pop-in .6s cubic-bezier(.34, 1.56, .64, 1) both; }
.confirm h1 { font-size: 38px; margin: 10px 0; }
.tracker { display: flex; align-items: center; justify-content: center; gap: 0; margin: 30px auto; max-width: 560px; }
.tracker .step { flex: 1; text-align: center; position: relative; }
.tracker .step .ic { width: 48px; height: 48px; border-radius: 50%; background: var(--bg-2); display: grid; place-items: center; margin: 0 auto 8px; font-size: 22px; position: relative; z-index: 2; transition: all .3s; }
.tracker .step.done .ic { background: var(--brand-grad); color: #fff; box-shadow: var(--sh-brand); }
.tracker .step.active .ic { background: var(--brand-grad); color: #fff; box-shadow: var(--sh-brand); animation: pulse-dot 1.6s infinite; }
.tracker .step .lab { font-size: 12.5px; font-weight: 700; }
.tracker .bar { position: absolute; top: 24px; left: 50%; width: 100%; height: 3px; background: var(--bg-2); z-index: 1; }
.tracker .step.done .bar { background: var(--brand); }

/* De stap die er ZOJUIST bij is gekomen licht één keer op. Dit is het enige dat
   er op dit scherm gebeurt terwijl je zit te wachten: de pagina wordt bij een
   statuswissel opnieuw opgebouwd, en zonder dit zie je alleen dat er iets
   veranderd is zonder te merken WAT.

   Op transform en opacity, niet op box-shadow of width - zie punt 7 in CLAUDE.md.
   De ring is een ::after die naar buiten schaalt en vervaagt; dat draait op de
   GPU en raakt de layout niet, dus hij kan niets verschuiven. */
.tracker .step.zojuist .ic { animation: stap-erbij .62s cubic-bezier(.34, 1.56, .64, 1); }
.tracker .step.zojuist .ic::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 3px solid var(--brand);
  animation: stap-ring .8s ease-out forwards;
}
@keyframes stap-erbij { 0% { transform: scale(.72); } 60% { transform: scale(1.14); } 100% { transform: scale(1); } }
@keyframes stap-ring { 0% { transform: scale(1); opacity: .85; } 100% { transform: scale(2.1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .tracker .step.zojuist .ic { animation: none; }
  .tracker .step.zojuist .ic::after { display: none; }
}
.track-handover { display: inline-flex; align-items: center; gap: 8px; margin: 16px auto 0; padding: 10px 16px; background: var(--brand-grad-soft); border: 1px solid #ffd9b0; border-radius: var(--r-pill); font-size: 14px; color: var(--ink-2); }
.track-handover b { color: var(--brand-600); }

/* Kaart uitgeschakeld (geen toestemming voor OpenStreetMap) */
.track-map-off { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; margin: 22px auto 0; padding: 22px 20px; max-width: 560px; background: var(--surface-2); border: 1px dashed var(--line-2); border-radius: 18px; color: var(--ink-3); font-size: 13.5px; }
.track-map-off .smul-ic { color: var(--ink-3); }

/* Cookiemelding */
.consent-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; padding: 14px; }
.consent-banner .cb-inner { max-width: 760px; margin: 0 auto; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-lg); padding: 16px 20px; }
.consent-banner .cb-text { flex: 1 1 320px; font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.consent-banner .cb-text a { color: var(--brand-600); font-weight: 700; text-decoration: underline; }
.consent-banner .cb-actions { display: flex; gap: 8px; flex: none; }
.consent-banner .cb-actions { flex-wrap: wrap; }

/* Privacykeuzes-venster. Toestaan en weigeren dragen dezelfde `.btn secondary`
   en zijn dus visueel gelijk: een gekleurde ja naast een grijze nee is precies
   het duwtje dat toestemming ongeldig maakt. */
.consent-modal { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 520px; max-width: 94vw; max-height: 88vh; overflow: auto; padding: 24px; }
.cs-rij { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); }
.cs-rij:first-of-type { margin-top: 8px; }
.cs-kop { font-weight: 700; font-size: 14.5px; color: var(--ink); }
.cs-uit { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.cs-vast { flex: none; font-size: 12px; font-weight: 700; color: var(--ink-3); background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: 5px 11px; white-space: nowrap; }
.cs-schake { flex: none; position: relative; width: 46px; height: 27px; }
.cs-schake input { position: absolute; inset: 0; opacity: 0; margin: 0; width: 100%; height: 100%; cursor: pointer; }
.cs-schake span { position: absolute; inset: 0; border-radius: var(--r-pill); background: var(--line-2); transition: background .18s ease; pointer-events: none; }
.cs-schake span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%; background: #fff; box-shadow: var(--sh-sm); transition: transform .18s ease; }
.cs-schake input:checked + span { background: var(--brand); }
.cs-schake input:checked + span::after { transform: translateX(19px); }
.cs-schake input:focus-visible + span { outline: 2px solid var(--brand-2); outline-offset: 2px; }
.cs-knoppen { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }

/* De standen op de privacypagina. */
.cs-standen { display: grid; gap: 8px; }
.cs-stand { display: flex; align-items: center; justify-content: space-between; gap: 14px; font-size: 13.5px; background: var(--surface-2); border-radius: var(--r-sm); padding: 9px 12px; }
.cs-stand b.ja { color: #1c7a4a; }
.cs-stand b.nee { color: var(--ink-3); }
.earned-pts { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; background: linear-gradient(135deg, #fff3e6, #ffe9d4); border: 1px solid #ffd9b0; border-radius: var(--r-lg); padding: 18px 30px; margin: 14px 0; }
.earned-pts .v { font-family: var(--display); font-size: 36px; font-weight: 800; color: #b25a00; }

/* ------------------------------- Footer ----------------------------------- */
.site-footer { background: var(--ink); color: #cfc6d4; margin-top: 70px; padding: 50px 0 30px; }
.site-footer .cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 28px; }
.site-footer .brand-mark { width: 56px; height: 56px; }
.site-footer .brand-logo { font-size: 24px; margin-bottom: 14px; }
.site-footer h5 { color: #fff; font-family: var(--display); font-size: 15px; margin-bottom: 12px; }
/* h3 in plaats van h5: de koppenvolgorde mag geen niveau overslaan (WCAG).
   De opmaak is bewust gelijkgehouden aan de oude h5, inclusief de browsermarge
   die h1-h4 via de reset in base.css juist wel wegnemen - anders schuiven de
   footerkolommen zichtbaar op. Ruim de h5-regel hierboven op zodra alle
   footerkoppen daadwerkelijk h3 zijn. */
.site-footer h3 { color: #fff; font-family: var(--display); font-size: 15px; font-weight: 700; line-height: 1.55; letter-spacing: normal; margin: 1.67em 0 12px; }
.site-footer a { display: block; padding: 4px 0; font-size: 14px; color: #b6acbe; transition: color .15s; }
.site-footer a:hover { color: #fff; }
.site-footer .fbottom { border-top: 1px solid rgba(255, 255, 255, .12); margin-top: 30px; padding-top: 18px; font-size: 13px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
/* Een KNOP en geen link: dit navigeert niet, het opent het keuzevenster. Ziet
   eruit als de links ernaast zodat de voettekst een geheel blijft. */
.site-footer .flink { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.site-footer .flink:hover { color: #fff; }
.footer-nl { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--r); padding: 20px 24px; margin-bottom: 40px; }
.footer-nl-form { display: flex; gap: 10px; flex: none; }
.footer-nl-form input { min-width: 220px; border-radius: var(--r-pill); border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .08); color: #fff; padding: 11px 16px; font: inherit; font-size: 14px; }
.footer-nl-form input::placeholder { color: #a89fb0; }
.footer-nl-form input:focus { outline: 2px solid var(--brand-2); outline-offset: 1px; }
.footer-nl-form .btn { white-space: nowrap; }

/* --------------------------- Demo-klok ------------------------------------ */
.demo-clock { position: fixed; left: 18px; bottom: 18px; z-index: 900; background: var(--ink); color: #fff; border-radius: var(--r); box-shadow: var(--sh-lg); padding: 10px 12px; display: flex; align-items: center; gap: 8px; font-size: 13px; }
.demo-clock select { background: #322240; color: #fff; border: 1px solid rgba(255,255,255,.18); border-radius: 8px; padding: 6px 8px; font: inherit; font-size: 13px; }
.demo-clock .lbl { opacity: .7; display: flex; align-items: center; gap: 6px; }

/* --------------------------- Responsief ----------------------------------- */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-collage { display: none; }
  .how-strip { grid-template-columns: 1fr; }
  .kitchen-grid { grid-template-columns: repeat(2, 1fr); }
  .menu-layout { grid-template-columns: 1fr; }
  .cat-nav { position: relative; top: 0; display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; }
  .cat-nav .ttl { display: none; }
  .menu-list { grid-template-columns: 1fr; }
  .checkout-wrap { grid-template-columns: 1fr; }
  .loyalty-cta { grid-template-columns: 1fr; }
  .site-footer .cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .kitchen-grid { grid-template-columns: 1fr; }
  .header-search { display: none; }
  .form-grid, .slot-grid, .pay-grid { grid-template-columns: 1fr 1fr; }
}

/* --------------------- "Nieuw op de straat" strook ------------------------ */
.fresh-row { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 6px; }
.fresh-card { flex: none; width: 168px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 14px; cursor: pointer; transition: transform .2s, box-shadow .2s; }
.fresh-card:hover { transform: translateY(-4px); box-shadow: var(--sh); }
.fresh-card .e { font-size: 34px; }
.fresh-card b { display: block; font-size: 14px; margin-top: 8px; line-height: 1.25; }
.fresh-card .s { font-size: 12px; color: var(--ink-3); margin-top: 4px; }

/* Het grote avatar-bolletje op het accountscherm (renderAccountBody in
   app.js). De merkschaduw hoort HIER en niet in het style-attribuut van dat
   element: SMUL.vulAvatarGerecht (utils.js) zet de niveau-rand als inline
   box-shadow en wist die met el.style.boxShadow = "" zodra er geen niveau is -
   dat wist dezelfde property, dus een inline merkschaduw zou daarbij
   verdwijnen en nooit terugkomen. Vanuit een stylesheet komt hij wél terug
   zodra de inline waarde weg is - precies waarom #accountBtn in de topbar dit
   probleem niet heeft: die haalt zijn schaduw uit .icon-btn in base.css.
   Vormgeving in CSS, instelbare kleur inline - dezelfde scheiding als daar. */
#accGrootAvatar { box-shadow: var(--sh-brand); }

/* Mini statuslabels (accountpagina) */
.tag-mini { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 700; vertical-align: 1px; }
.tag-mini.green { background: #e7f7ed; color: #0f7a37; }
.tag-mini.gray { background: #eef0f2; color: #6b7280; }
.tag-mini.amber { background: #fff4e0; color: #a05f00; }
.tag-mini.blue { background: #eaf4ff; color: #0b6fd0; }
.tag-mini.red { background: #ffeaea; color: #d6342c; }

/* ==========================================================================
   VOLWASSEN UI: iconen, foto's, keuken-switcher, mandje-balk
   ========================================================================== */

/* Inline SVG-iconen netjes uitlijnen in lopende tekst en knoppen */
.smul-ic { vertical-align: -0.18em; flex: none; }
.btn .smul-ic, .badge .smul-ic, .eyebrow .smul-ic, .chip .smul-ic { vertical-align: -0.2em; }
.toast .emo { display: inline-flex; align-items: center; }
.toast.error { background: linear-gradient(135deg, #c0271f, #9c1e17); }

/* Status-stippen (vervangen de emoji-stippen) */
.dot.is-open, .dot.is-busy, .dot.is-off { display: inline-block; width: 9px; height: 9px; border-radius: 50%; vertical-align: baseline; }
.dot.is-open { background: #16a34a; box-shadow: 0 0 0 3px rgba(22, 163, 74, .16); }
.dot.is-busy { background: #e08a00; box-shadow: 0 0 0 3px rgba(224, 138, 0, .16); }
.dot.is-off { background: #b7bcc5; box-shadow: 0 0 0 3px rgba(120, 120, 130, .12); }

/* Monogram-fallback voor keukens zonder logo */
.k-mono { width: 100%; height: 100%; display: grid; place-items: center; color: #fff; font-family: var(--display); font-weight: 800; font-size: 0.42em; letter-spacing: .5px; border-radius: inherit; }
.kcard .klogo .k-mono { font-size: 19px; }
.kh-logo .k-mono { font-size: 27px; }

/* Grote icoon-cirkel (bevestiging, lege staten) */
.big-ic { width: 84px; height: 84px; margin: 0 auto 6px; border-radius: 50%; background: var(--brand-grad-soft); color: var(--brand-600); display: grid; place-items: center; animation: pop-in .6s cubic-bezier(.34, 1.56, .64, 1) both; }
.big-ic.is-bad { background: rgba(229, 72, 77, .12); color: #c0271f; }

/* Gerecht-miniaturen: echte foto of nette placeholder met initialen */
.mitem .thumb.has-img, .mitem .thumb.is-ph { overflow: hidden; font-size: 19px; font-family: var(--display); font-weight: 800; }
.mitem .thumb.has-img img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.cl-thumb { width: 44px; height: 44px; border-radius: 11px; flex: none; display: grid; place-items: center; overflow: hidden; font-size: 13px; font-family: var(--display); font-weight: 800; background: var(--brand-grad-soft); }
.cl-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fresh-thumb { width: 54px; height: 54px; border-radius: 14px; margin: 0 auto 8px; display: grid; place-items: center; overflow: hidden; font-size: 15px; font-family: var(--display); font-weight: 800; background: var(--brand-grad-soft); }
.fresh-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.up-thumb { width: 46px; height: 46px; border-radius: 12px; margin: 0 auto 6px; display: grid; place-items: center; overflow: hidden; font-size: 13px; font-family: var(--display); font-weight: 800; background: var(--brand-grad-soft); }
.up-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ck-logo { width: 26px; height: 26px; border-radius: 8px; overflow: hidden; display: grid; place-items: center; flex: none; }
.ck-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ck-logo .k-mono { font-size: 10px; }

/* Favoriet-hartje */
.fav .smul-ic { fill: none; transition: fill .2s, color .2s; }
.fav.is-fav { color: var(--brand); }
.fav.is-fav .smul-ic { fill: var(--brand); }
.mfav .smul-ic { fill: none; transition: fill .2s, color .2s; }
.mfav:hover { color: var(--brand); }
.mfav.is-fav { color: var(--brand); }
.mfav.is-fav .smul-ic { fill: var(--brand); }

/* Sticky keuken-switcher bovenaan de menupagina */
.kswitch { position: sticky; top: 64px; z-index: 350; background: rgba(251, 245, 239, .94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.kswitch-inner { display: flex; align-items: center; gap: 16px; padding-top: 9px; padding-bottom: 9px; }
.kswitch-lab { display: none; flex-direction: column; font-size: 12px; font-weight: 700; color: var(--ink-2); line-height: 1.3; flex: none; }
.kswitch-lab b { color: var(--ink-3); font-weight: 600; font-size: 11px; }
.kswitch-lab .smul-ic { display: none; }
.kswitch-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.kswitch-row::-webkit-scrollbar { display: none; }
.kswitch-item { display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid var(--line-2); background: var(--surface); border-radius: var(--r-pill); padding: 6px 13px 6px 7px; font: inherit; font-size: 13px; font-weight: 700; color: var(--ink-2); cursor: pointer; white-space: nowrap; transition: border-color .15s, box-shadow .15s, transform .15s; }
.kswitch-item:hover { border-color: var(--brand); transform: translateY(-1px); }
.kswitch-item.active { border-color: var(--brand); background: rgba(234, 59, 44, .07); color: var(--ink); box-shadow: 0 4px 14px rgba(234, 59, 44, .14); }
.kswitch-logo { width: 26px; height: 26px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; flex: none; }
.kswitch-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kswitch-logo .k-mono { font-size: 10px; border-radius: 50%; }
@media (min-width: 860px) { .kswitch-lab { display: flex; } }

/* Uitnodiging om te combineren op de menupagina en in het mandje */
.combi-note { display: flex; align-items: center; gap: 12px; background: #eef6ff; border: 1px solid #d5e6fb; color: #22518a; border-radius: var(--r); padding: 13px 16px; margin: 18px 0 4px; font-size: 13.5px; }
.combi-note .smul-ic { flex: none; }
.combi-note > div { flex: 1; }
.combi-note .btn { flex: none; }
.cart-combi { display: flex; align-items: center; gap: 9px; background: #eef6ff; border: 1px solid #d5e6fb; color: #22518a; border-radius: var(--r); padding: 11px 14px; margin-bottom: 14px; font-size: 13px; flex-wrap: wrap; }
.cart-combi.soft { background: var(--surface-2); border-color: var(--line); color: var(--ink-2); }
.linklike { border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 800; color: var(--brand-600); cursor: pointer; padding: 0; text-decoration: underline; }

/* Persistente mandje-balk onderin */
.cart-bar { position: fixed; left: 0; right: 0; bottom: 18px; margin: 0 auto; z-index: 600; width: min(680px, calc(100vw - 24px)); animation: rise-fade .35s ease both; }
.cart-bar[hidden] { display: none; }
.cart-bar-btn { display: flex; align-items: center; gap: 14px; width: 100%; border: 0; cursor: pointer; font: inherit; text-align: left; background: var(--ink); color: #fff; border-radius: 18px; padding: 13px 18px; box-shadow: 0 18px 44px rgba(42, 24, 48, .35); transition: transform .15s; }
.cart-bar-btn:hover { transform: translateY(-2px); }
.cart-bar .cb-ic { position: relative; flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--brand-grad); }
.cart-bar .cb-n { position: absolute; top: -6px; right: -6px; background: #fff; color: var(--brand-600); font-size: 11px; font-weight: 800; min-width: 18px; height: 18px; border-radius: 99px; display: grid; place-items: center; padding: 0 4px; }
.cart-bar .cb-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.cart-bar .cb-txt b { font-size: 14.5px; }
.cart-bar .cb-sub { font-size: 12px; color: #cdbfd6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cart-bar .cb-amt { font-weight: 800; font-size: 16px; flex: none; }
.cart-bar .cb-go { flex: none; display: inline-flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, .14); border-radius: 99px; padding: 8px 14px; font-size: 12.5px; font-weight: 800; }
@media (max-width: 560px) { .cart-bar .cb-go { display: none; } .cart-bar .cb-amt { font-size: 15px; } }

/* Demo-klok iets naar boven als de mandje-balk zichtbaar is */
.cart-bar:not([hidden]) ~ .demo-clock { bottom: 92px; }

/* --------------------------- Groepsbestellingen --------------------------- */
.group-cta { display: flex; align-items: center; gap: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px; margin: 10px 0 4px; box-shadow: var(--sh-sm); }
.group-cta > .smul-ic { color: var(--brand-600); flex: 0 0 auto; }
.group-cta .gc-txt { flex: 1; display: flex; flex-direction: column; }
.group-cta .gc-txt span { font-size: 13px; color: var(--ink-2); }
.group-cta .gc-btns { display: flex; gap: 8px; flex: 0 0 auto; }
.group-cta .btn { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 560px) { .group-cta { flex-wrap: wrap; } .group-cta .gc-btns { width: 100%; flex-direction: column; } .group-cta .btn { width: 100%; } }
#groupBar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 120; background: var(--ink); color: #fff; }
#groupBar .gb-in { max-width: 760px; margin: 0 auto; display: flex; align-items: center; gap: 10px; padding: 11px 18px; font-size: 13.5px; }
#groupBar .gb-in > .smul-ic { color: var(--brand-2); flex: 0 0 auto; }
#groupBar .gb-btn { margin-left: auto; background: #fff; color: var(--ink); border: 0; border-radius: 999px; padding: 7px 14px; font-weight: 700; font-size: 13px; cursor: pointer; white-space: nowrap; }
body.has-groupbar { padding-bottom: 52px; }
.grp-share { display: flex; align-items: center; gap: 12px; background: var(--bg-2); border-radius: 14px; padding: 12px 14px; margin-bottom: 0; }
.grp-link { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grp-qr { margin: 10px 0; text-align: center; }
.grp-qr svg { width: 160px; height: 160px; }
.grp-pin { display: flex; align-items: center; justify-content: space-between; margin: 10px 0 16px; padding: 10px 14px; background: var(--surface); border-radius: 10px; border: 1px solid var(--line); }
.grp-pin-num { font-size: 22px; font-weight: 700; letter-spacing: 4px; }
.gp-block { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; }
.gp-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.gp-avatar { width: 28px; height: 28px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; background: var(--bg-2); flex-shrink: 0; margin-right: 8px; }
.gp-avatar.niveau-brons, .gp-avatar.niveau-zilver, .gp-avatar.niveau-goud { box-shadow: 0 0 0 2px currentColor; }
.gp-avatar.niveau-brons { color: #cd7f32; }
.gp-avatar.niveau-zilver { color: #b7b7b7; }
.gp-avatar.niveau-goud { color: #d4af37; }
.gl-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.gl-row .gl-info { flex: 1; min-width: 0; }
.gl-row .gl-amt { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 60px; text-align: right; }

/* ------------------------- Inloggen met Google ---------------------------- */
/* Rustige witte knop met het Google-logo, duidelijk anders dan de rode
   hoofdknop eronder: de keuze tussen Google en e-mailadres moet in één
   oogopslag te zien zijn. */
.google-btn, .social-btn { gap: 10px; font-size: 15px; padding: 13px 18px; }
.google-btn svg, .social-btn svg { display: block; }
/* Twee sociale knoppen onder elkaar houden een beetje lucht nodig. */
.social-btn + .social-btn { margin-top: 8px; }
/* Apple schrijft voor dat het logo niet ingekleurd of vervormd wordt; het volgt
   daarom de tekstkleur via currentColor in de SVG zelf. Geen eigen achtergrond:
   de knop houdt dezelfde secundaire stijl als de Google-knop, zodat de twee
   naast elkaar niet als "de ene is belangrijker" lezen. */
.apple-btn svg { color: var(--ink); }
/* Uitleg onder de Apple-knop over het verbergen van je e-mailadres. Klein en
   rustig: het is een waarschuwing, geen verkooppraatje. */
.auth-hint { margin: 8px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--ink-2); }
/* Scheiding tussen de sociale knoppen en de gewone velden. Het streepje loopt
   door achter het woordje "of" heen. */
.auth-of { display: flex; align-items: center; gap: 10px; margin: 14px 0; color: var(--ink-2); font-size: 12.5px; }
.auth-of::before, .auth-of::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ------------------- Het moment dat het gelukt is --------------------------
   Korte bevestiging over de statuspagina heen, na een geslaagde bestelling of
   betaling. Betalen loopt via de betaalpagina van de provider - wij zien nooit
   een kaartnummer - dus dit is het enige stuk van dat moment dat wij in de hand
   hebben. Tot nu toe verscheen hier gewoon een pagina.

   Hij ligt eróver en vervangt niets: als hij wegtrekt staat de statuspagina er
   al, dus er valt niets te laden en niets te verspringen. Alles op transform en
   opacity, zoals punt 7 in CLAUDE.md voorschrijft. */
.geslaagd {
  position: fixed; inset: 0; z-index: 9500; display: grid; place-items: center;
  background: linear-gradient(150deg, #ea3b2c, #ff9e2c);
  animation: geslaagd-in .32s cubic-bezier(.22, 1, .36, 1) both;
  cursor: pointer;
}
.geslaagd.gaat-weg { animation: geslaagd-uit .3s ease-in forwards; }
@keyframes geslaagd-in { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: scale(1); } }
@keyframes geslaagd-uit { to { opacity: 0; transform: scale(1.03); } }

.geslaagd-kaart { text-align: center; color: #fff; padding: 24px; }
.geslaagd-kaart h2 { font-size: 30px; margin: 18px 0 2px; color: #fff; }
.geslaagd-bedrag { font-family: var(--display); font-size: 44px; font-weight: 800; line-height: 1.05; }
.geslaagd-sub { font-size: 14.5px; opacity: .82; margin-top: 8px; }

/* Het vinkje tekent zichzelf: eerst de cirkel, dan de haak. Dat leest als
   "er wordt iets afgerond" in plaats van als een plaatje dat er ineens staat. */
.geslaagd-vink { width: 92px; height: 92px; stroke: #fff; }
.geslaagd-vink circle {
  stroke-dasharray: 145; stroke-dashoffset: 145;
  animation: vink-cirkel .5s cubic-bezier(.65, 0, .45, 1) forwards;
}
.geslaagd-vink path {
  stroke-dasharray: 40; stroke-dashoffset: 40;
  animation: vink-haak .32s cubic-bezier(.65, 0, .45, 1) .42s forwards;
}
@keyframes vink-cirkel { to { stroke-dashoffset: 0; } }
@keyframes vink-haak { to { stroke-dashoffset: 0; } }

/* Wie beweging heeft uitgezet krijgt de mededeling zonder de show: het vinkje
   staat er meteen, de overlay verschijnt zonder schaal. */
@media (prefers-reduced-motion: reduce) {
  .geslaagd, .geslaagd.gaat-weg { animation: none; }
  .geslaagd-vink circle, .geslaagd-vink path { animation: none; stroke-dashoffset: 0; }
}