/* ============================================================================
   DE SMULSTRAAT - Mobiele versie
   ----------------------------------------------------------------------------
   Aparte, app-achtige inrichting voor telefoons (tot 760px breed).
   Zelfde data en logica als desktop, maar een eigen indeling:
   - compacte header, tabbalk onderin (Home, Zoeken, Punten, Account, Mandje)
   - zoeken als uitklapbare balk onder de header
   - menukaart in lijstweergave: tekst links, foto rechts, plusknop op de foto
   - mandje en modals als bottom-sheets van onderaf
   - verticale besteltracker en compacte hero
   Dit bestand wordt als laatste geladen en overschrijft alleen op mobiel.
   ========================================================================== */

@media (max-width: 760px) {

  /* ------------------------------ basis --------------------------------- */
  :root { --header-h: 58px; }
  html { -webkit-text-size-adjust: 100%; }
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  body.dash { padding-bottom: 0; }
  .container { padding-left: 18px; padding-right: 18px; }
  input.input, select.select, textarea.input, .header-search input { font-size: 16px; } /* voorkomt inzoomen op iOS */
  .btn { min-height: 44px; }
  .btn.sm { min-height: 36px; }

  /* ------------------------------ header -------------------------------- */
  .site-header { height: var(--header-h); }
  .site-header .container { gap: 10px; }
  .site-header .brand-logo { font-size: 18px; gap: 9px; }
  .site-header .brand-mark { width: 40px; height: 40px; }
  .site-footer .brand-mark { width: 46px; height: 46px; }
  .site-footer .brand-logo { font-size: 20px; }
  .loc-pill { display: none; }
  .header-actions { gap: 6px; }
  .header-actions #accountBtn { display: none; }           /* account zit in de tabbalk */
  .header-actions #cartBtn { display: grid; }              /* mandje rechtsboven */
  .header-actions .m-search-btn { display: grid; }         /* zoeken rechtsboven, klapt de zoekbalk uit */
  .points-pill { display: none; }                          /* punten zitten in de tabbalk */

  /* zoekbalk: uitklapbaar paneel onder de header (zelfde input, dus
     de bestaande zoeklogica blijft gewoon werken) */
  .header-search { display: none; }
  body.msearch-open .header-search {
    display: block; position: fixed; left: 0; right: 0; top: var(--header-h);
    max-width: none; z-index: 490; padding: 10px 14px 12px;
    background: var(--surface); border-bottom: 1px solid var(--line);
    box-shadow: 0 14px 30px rgba(42, 24, 48, .10);
    animation: rise-fade .22s ease both;
  }
  body.msearch-open .header-search .si { left: 29px; }

  /* ------------------------------ tabbalk ------------------------------- */
  .m-tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 950;
    background: var(--surface); border-top: 1px solid var(--line);
    padding: 6px 6px calc(8px + env(safe-area-inset-bottom));
    box-shadow: 0 -8px 26px rgba(42, 24, 48, .08);
    /* De balk staat LEEG in index.html en wordt door initMobileTabs() gevuld.
       Zonder deze regel groeit hij daarbij van 14px naar 63,5px, en dat is
       een layout shift van de balk zelf - gemeten op desmulstraat.nl op 27
       augustus 2026: 0,00813, oftewel de VOLLEDIGE CLS van de homepage. De
       0,008 uit CLAUDE.md was dus deze balk en niets anders.

       64px en niet 63,5: naar boven afgerond, zodat de gevulde balk de
       gereserveerde hoogte nooit overschrijdt en er in beide standen exact
       even veel ruimte staat. Met border-box telt de padding hierin mee, dus
       de veilige zone moet er ook bij - anders vecht deze regel met de
       padding-bottom hierboven. Gemeten, niet geschat (CLAUDE.md, Skeletons
       regel 2): 6 boven + 48,5 knop + 8 onder + 1 rand = 63,5. */
    min-height: calc(64px + env(safe-area-inset-bottom));
  }
  .m-tabbar button {
    flex: 1; border: 0; background: none; font: inherit; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    font-size: 10.5px; font-weight: 700; color: var(--ink-3);
    padding: 6px 2px 4px; border-radius: 12px; position: relative;
  }
  .m-tabbar button.active { color: var(--brand-600); background: var(--brand-grad-soft); }
  .m-tabbar .mt-badge {
    position: absolute; top: 0; left: 50%; margin-left: 7px;
    min-width: 17px; height: 17px; padding: 0 4px; border-radius: 99px;
    background: var(--brand); color: #fff; font-size: 10.5px; font-weight: 800;
    display: grid; place-items: center;
  }
  .m-tabbar .mt-badge[hidden] { display: none; }

  /* mandje-balk en toasts boven de tabbalk; demo-klok uit beeld op mobiel */
  .cart-bar { bottom: calc(70px + env(safe-area-inset-bottom)); width: calc(100vw - 20px); }
  .cart-bar-btn { padding: 11px 14px; border-radius: 16px; gap: 11px; }
  .consent-banner { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
  .consent-banner .cb-actions { width: 100%; }
  .consent-banner .cb-actions .btn { flex: 1; }
  #toast-wrap { bottom: calc(86px + env(safe-area-inset-bottom)); width: calc(100vw - 28px); }
  .toast { font-size: 13.5px; padding: 12px 16px; text-align: left; }
  .demo-clock { display: none; }

  /* ------------------------------ homepage ------------------------------ */
  .hero { padding: 30px 0 86px; }
  .hero h1 { font-size: clamp(28px, 8.4vw, 36px); }
  .hero .lead { font-size: 15px; margin-top: 12px; }
  .hero .eyebrow { font-size: 11px; }
  .hero-cta { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 18px; }
  .hero-cta .btn { width: 100%; }
  .hero-trust { gap: 14px; margin-top: 20px; flex-wrap: wrap; }
  .hero-trust .t b { font-size: 14px; }
  .hero-trust .t span { font-size: 11.5px; }
  .overlap { margin-top: -58px; }

  /* stappen als swipebare kaartjes in plaats van een lange stapel */
  .how-strip { display: flex; grid-template-columns: none; overflow-x: auto; gap: 10px; padding-bottom: 6px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .how-strip::-webkit-scrollbar { display: none; }
  .how-card { flex: 0 0 82%; scroll-snap-align: start; padding: 16px; }
  /* Beide tags gedekt, zie de toelichting bij .how-card h4 in app.css. */
  .how-card h4, .how-card h2 { font-size: 15px; }
  .how-card p { font-size: 12.5px; }

  .section { padding: 26px 0; }
  /* .section en .container komen op sommige elementen samen voor (bv. de
     keukens-sectie, favorieten, "nieuw op de straat"). De .section-shorthand
     hierboven zet padding-left/right impliciet terug naar 0, wat de
     zij-marge van .container tenietdoet: alles plakte dan tegen de
     schermrand aan. Deze regel (hogere specificiteit, 2 classes) herstelt
     de veilige marge op zulke gecombineerde elementen. */
  .section.container { padding-left: 18px; padding-right: 18px; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .section-head h2 { font-size: 23px !important; }
  .filter-bar { margin: 12px -16px 14px; padding: 2px 16px 6px; }

  .kitchen-grid { gap: 14px; }
  .kcard .banner { height: 130px; }
  .kcard .body { padding: 14px; }
  .kcard .body h3 { font-size: 17px; }
  .kcard .go { margin-top: 10px; padding: 11px; }
  .kcard .klogo { width: 48px; height: 48px; bottom: -20px; }

  .loyalty-cta { padding: 22px 18px; }
  .loyalty-cta h2 { font-size: 22px; }
  .reward-rail { gap: 10px; }

  .site-footer .cols { grid-template-columns: 1fr; gap: 22px; }
  .site-footer { padding-bottom: 30px; }

  /* --------------------------- keukenpagina ----------------------------- */
  .back-btn { display: none !important; }                 /* Home zit in de tabbalk */
  .kswitch { top: var(--header-h); }
  .kswitch-inner { padding-top: 8px; padding-bottom: 8px; }
  .kswitch-item { padding: 7px 12px 7px 6px; font-size: 12.5px; }

  .kitchen-hero { height: 190px; border-radius: 0; }
  .kitchen-hero .kh-inner { bottom: 14px; }
  .kh-logo { width: 56px; height: 56px; border-radius: 16px; }
  .kh-logo .k-mono { font-size: 19px; }
  .kitchen-hero h1 { font-size: 24px; }
  .kh-inner .row-top { gap: 12px; align-items: center; }
  .kh-inner .row-top > div:last-child { display: none; }  /* status staat al in de meta-regel via de switcher */
  .kh-tags .t { font-size: 10.5px; padding: 3px 9px; }
  .kh-meta { gap: 10px 14px; font-size: 12px; flex-wrap: wrap; }

  .combi-note { flex-direction: column; align-items: flex-start; gap: 8px; font-size: 12.5px; padding: 12px 14px; }
  .combi-note .btn { width: 100%; }
  .menu-closed-note { font-size: 13px; }

  /* categorie-navigatie: plakkerige chip-balk onder de switcher */
  .menu-layout { padding-top: 10px; gap: 0; }
  .cat-nav {
    position: sticky; top: calc(var(--header-h) + 66px); z-index: 340;
    background: var(--bg); margin: 0 -16px 6px; padding: 8px 16px;
    border-bottom: 1px solid var(--line);
  }
  .cat-nav a { flex: none; padding: 8px 14px; border-radius: 99px; font-size: 13px; border: 1.5px solid var(--line-2); background: var(--surface); white-space: nowrap; }
  .cat-nav a .c { display: none; }
  .cat-nav a.active { border-color: var(--ink); }
  .menu-section { scroll-margin-top: calc(var(--header-h) + 124px); margin-bottom: 26px; }
  .menu-section h2 { font-size: 19px; }
  .menu-section .sub { font-size: 12px; }

  /* menukaart-regel: tekst links, foto rechts, plusknop op de foto */
  .menu-list { gap: 10px; }
  .mitem { flex-direction: row-reverse; padding: 13px 13px 13px 15px; gap: 12px; }
  .mitem:hover { transform: none; }
  .mitem .thumb { width: 88px; height: 88px; border-radius: 14px; }
  .mitem .info h4 { font-size: 15px; line-height: 1.3; }
  .mitem .info p {
    font-size: 12.5px; line-height: 1.45; margin-top: 3px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .mitem .price { font-size: 15px; margin-top: 6px; }
  .mitem .add {
    position: absolute; right: 9px; bottom: 9px; width: 32px; height: 32px;
    border-radius: 50%; background: var(--surface); color: var(--brand-600);
    border: 1.5px solid var(--line-2); box-shadow: var(--sh-sm); font-size: 20px; line-height: 1;
  }
  .mitem .badge { font-size: 10px; padding: 2px 7px; }

  /* ----------------------- mandje als bottom-sheet ----------------------- */
  .drawer {
    top: auto; bottom: 0; left: 0; right: 0; width: 100%; max-width: none;
    height: 92dvh; border-radius: 22px 22px 0 0;
    transform: translateY(105%); transition: transform .34s cubic-bezier(.22, 1, .36, 1);
  }
  .drawer.open { transform: translateY(0); }
  .drawer-head { padding: 15px 18px 11px; border-radius: 22px 22px 0 0; position: relative; }
  .drawer-head::before {
    content: ""; position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
    width: 42px; height: 4px; border-radius: 99px; background: var(--line-2);
  }
  .drawer-head h3 { font-size: 18px; }
  .drawer-body { padding: 14px 16px 8px; }
  /* compactere footer zodat het gerechtenlijstje meer ruimte krijgt */
  .drawer-foot { padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); }
  .drawer-foot .totals { font-size: 13px; }
  .drawer-foot .totals .tr { padding: 2.5px 0; }
  .drawer-foot .totals .tr.grand { font-size: 17px; padding-top: 9px; margin-top: 6px; }
  /* punten- en upsell-blok compacter op mobiel */
  .free-bar { padding: 11px 14px; margin-bottom: 12px; }
  .loy-box { padding: 12px 14px; margin: 6px 0 12px; }
  .upsell { margin: 4px 0 12px; }
  .cart-combi { padding: 10px 12px; margin-bottom: 12px; font-size: 12.5px; }
  .cart-line { padding: 10px 0; }
  .upsell-row { gap: 10px; }

  /* ------------------------ modals als bottom-sheet ---------------------- */
  #modalMount .modal {
    left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important;
    width: 100% !important; max-width: none !important; max-height: 92dvh !important;
    transform: none !important; border-radius: 22px 22px 0 0 !important;
    padding-bottom: calc(18px + env(safe-area-inset-bottom)) !important;
    animation: sheet-up .3s cubic-bezier(.22, 1, .36, 1) both !important;
  }

  /* ------------------------------ afrekenen ------------------------------ */
  .checkout-wrap { gap: 0; }
  .co-card { padding: 18px 16px; margin-bottom: 14px; border-radius: var(--r); }
  .co-card h3 { font-size: 16px; }
  .co-summary { position: relative; top: 0; }
  .slot-grid, .pay-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .pick { padding: 12px 8px; font-size: 12.5px; }
  .form-grid { grid-template-columns: 1fr; gap: 11px; }
  .form-grid .field:not(.full) { grid-column: auto; }
  #placeOrder { position: sticky; bottom: calc(78px + env(safe-area-inset-bottom)); z-index: 10; box-shadow: 0 14px 34px rgba(234, 59, 44, .38); }

  /* --------------------- bevestiging: verticale tracker ------------------ */
  .confirm { padding: 18px 0; text-align: left; }
  .confirm h1 { font-size: 25px; }
  .confirm > .big-ic, .confirm .big-ic { margin-left: 0; }
  .confirm p.muted { font-size: 14.5px !important; }
  .tracker { flex-direction: column; align-items: stretch; gap: 0; margin: 22px 0; max-width: none; }
  .tracker .step { display: flex; align-items: center; gap: 14px; text-align: left; padding: 7px 0; min-height: 54px; }
  .tracker .step .ic { width: 42px; height: 42px; margin: 0; flex: none; }
  .tracker .step .lab { font-size: 14px; }
  .tracker .bar { left: 20px; top: 46px; width: 3px; height: 22px; transform: none; }
  .earned-pts { justify-content: flex-start; }
  .confirm .btn.lg { width: 100%; }
  .confirm div[style*="justify-content:center"] { justify-content: stretch !important; }

  /* ------------------------------ account ------------------------------- */
  .loyalty-cta h2 { font-size: 30px !important; }

  /* ------------------------- dashboards op mobiel ------------------------ */
  .dash .topbar { padding: 10px 14px; gap: 10px; flex-wrap: wrap; }
  .dash .topbar h1 { font-size: 19px; }
  .side { position: sticky; top: 0; z-index: 400; padding: 10px 12px; gap: 8px; }
  .side .brand { font-size: 15px; }
  .side nav { gap: 4px; padding-bottom: 2px; scrollbar-width: none; }
  .side nav::-webkit-scrollbar { display: none; }
  .side nav a { white-space: nowrap; padding: 9px 13px; font-size: 13px; }
  .dash-content { padding: 14px 12px; }
  .kpi-grid { gap: 10px; }
  .kpi { padding: 14px; }
  .kpi .val { font-size: 21px; }
  .panel-body { overflow-x: auto; }
  .tbl { min-width: 640px; }
  .toolbar { flex-wrap: wrap; gap: 10px; }
  .seg-tabs { overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  .prod-row { flex-wrap: wrap; row-gap: 8px; }
  .prod-row .pinfo { min-width: 55%; }
  .disp-map { min-height: 300px; }
  .disp-select { width: 100%; }
  .disp-acties { flex-wrap: wrap; }
  .note-banner { font-size: 12.5px; padding: 11px 13px; }

  /* --------------------------- bezorger-app ------------------------------ */
  .bz-next { flex-wrap: wrap; }
  .bz-next .n-nav { flex: 1 1 100%; text-align: center; justify-content: center; display: inline-flex; }
  .g-step { flex-wrap: wrap; }
  .g-step .btn { flex: 1 1 100%; }
  #bzMap { height: 230px; }

  /* --------------------------- footer-nieuwsbrief ------------------------- */
  .footer-nl { flex-direction: column; align-items: stretch; text-align: center; }
  .footer-nl-form { flex-direction: column; }
  .footer-nl-form input { min-width: 0; }

  /* ------------------------------ nieuwsbrief ----------------------------- */
  .nl-editbody { grid-template-columns: 1fr; }
  .nl-editright { position: static; order: -1; }
  .nl-previewframe { height: 360px; }
  .nl-2col { grid-template-columns: 1fr; }
  .nl-hubbar-acties { width: 100%; }
  .nl-hubbar-acties .btn { flex: 1 1 auto; }
  .nl-stats { grid-template-columns: repeat(2, 1fr); }
  .nl-tpl-grid { grid-template-columns: repeat(2, 1fr); }
  .nl-repheader { flex-wrap: wrap; }
  .nl-repheader-acties { width: 100%; }
}

/* opkomend bottom-sheet */
@keyframes sheet-up {
  from { transform: translateY(60px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* Kleine telefoons: nog iets compacter */
@media (max-width: 380px) {
  .mitem .thumb { width: 76px; height: 76px; }
  .m-tabbar button { font-size: 10px; }
  .points-pill { padding: 6px 10px; }
}

/* De tabbalk bestaat alleen op mobiel; daarbuiten altijd weg */
@media (min-width: 761px) {
  .m-tabbar { display: none !important; }
  body.msearch-open .header-search { display: block; }
}