/* App shell on phones (docs/20, stage 2): bottom tab bar, bottom sheets, toasts.
   Uses only tokens.css. Loaded last on customer pages so it can adjust older styles. */
.tabbar,.toast{display:none}

@media(max-width:700px){
  /* Bottom tab bar */
  body.has-tabbar{padding-bottom:calc(var(--cbz-tabbar-height) + env(safe-area-inset-bottom))}
  .tabbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:repeat(5,1fr);
    height:calc(var(--cbz-tabbar-height) + env(safe-area-inset-bottom));padding:0 var(--cbz-space-1) env(safe-area-inset-bottom);
    background:rgba(255,250,244,.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--cbz-line);box-shadow:0 -6px 20px rgba(41,29,34,.06)}
  .tabbar a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;
    color:var(--cbz-muted);font-family:var(--cbz-font-body);font-size:11px;font-weight:600;letter-spacing:.01em;text-decoration:none;-webkit-tap-highlight-color:transparent}
  .tabbar a span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tabbar .icon{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--cbz-duration-fast) var(--cbz-ease)}
  .tabbar a[aria-current=page]{color:var(--cbz-coral)}
  .tabbar a[aria-current=page] .icon{stroke-width:2.3}
  .tabbar a[aria-current=page]::before{content:'';position:absolute;top:0;left:30%;right:30%;height:3px;border-radius:0 0 3px 3px;background:var(--cbz-coral)}
  .tabbar a:active .icon{transform:scale(.88)}
  .tabbar a:focus-visible{outline:3px solid var(--cbz-ink);outline-offset:-3px;border-radius:var(--cbz-radius-md)}
  .tabbar-badge{position:absolute;top:7px;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;border-radius:var(--cbz-radius-pill);
    background:var(--cbz-coral);color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center;box-shadow:0 0 0 2px var(--cbz-surface)}

  /* The tab bar carries account and cart: the top bar keeps the logo (and the delivery address). */
  body.has-tabbar .site-header .header-actions{display:none}

  /* Floating bars and the cookie notice sit above the tab bar. */
  body.has-tabbar .mobile-cart-bar{bottom:calc(var(--cbz-tabbar-height) + var(--cbz-space-3) + env(safe-area-inset-bottom))}
  body.has-tabbar .basket-mobile-bar{bottom:calc(var(--cbz-tabbar-height) + var(--cbz-space-3) + env(safe-area-inset-bottom))}
  body.has-tabbar .basket-main{padding-bottom:calc(var(--cbz-tabbar-height) + 96px)}
  body.has-tabbar.has-mobile-cart{padding-bottom:calc(var(--cbz-tabbar-height) + 92px + env(safe-area-inset-bottom))}
  body.has-tabbar .consent-banner{bottom:calc(var(--cbz-tabbar-height) + var(--cbz-space-3) + env(safe-area-inset-bottom))}

  /* Every dialog becomes a bottom sheet, as in food apps. */
  dialog.modal{position:fixed;inset:auto 0 0 0;margin:0;transform:none;width:100%;max-width:100%;max-height:92dvh;border:0;border-radius:var(--cbz-radius-xl) var(--cbz-radius-xl) 0 0;
    padding:var(--cbz-space-8) var(--cbz-space-5) calc(var(--cbz-space-6) + env(safe-area-inset-bottom));box-shadow:var(--cbz-shadow-lg)}
  dialog.modal[open]{animation:cbzSheetUp var(--cbz-duration-slow) var(--cbz-ease)}
  dialog.modal::before{content:'';position:absolute;top:10px;left:50%;width:40px;height:5px;margin-left:-20px;border-radius:var(--cbz-radius-pill);background:var(--cbz-line-strong)}
  dialog.modal::backdrop{background:rgba(41,29,34,.45);backdrop-filter:blur(2px)}
  dialog.modal .close-button{top:var(--cbz-space-3);right:var(--cbz-space-3)}
  dialog.cart-modal{width:100%;border-radius:var(--cbz-radius-xl) var(--cbz-radius-xl) 0 0}

  /* Toast */
  .toast{position:fixed;left:var(--cbz-space-4);right:var(--cbz-space-4);z-index:70;display:flex;align-items:center;gap:var(--cbz-space-3);
    bottom:calc(var(--cbz-tabbar-height) + var(--cbz-space-3) + env(safe-area-inset-bottom));padding:var(--cbz-space-3) var(--cbz-space-4);
    border-radius:var(--cbz-radius-lg);background:var(--cbz-ink);color:var(--cbz-cream);font:600 var(--cbz-text-sm)/1.4 var(--cbz-font-body);box-shadow:var(--cbz-shadow-lg);
    opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity var(--cbz-duration) var(--cbz-ease),transform var(--cbz-duration) var(--cbz-ease)}
  body.has-mobile-cart .toast{bottom:calc(var(--cbz-tabbar-height) + 84px + env(safe-area-inset-bottom))}
  .toast.visible{opacity:1;transform:none;pointer-events:auto}
  .toast span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .toast a{flex:none;display:inline-flex;align-items:center;min-height:36px;padding:0 var(--cbz-space-3);border-radius:var(--cbz-radius-pill);background:var(--cbz-coral);color:#fff;text-decoration:none}
}
@keyframes cbzSheetUp{from{transform:translateY(100%)}to{transform:none}}
@media(prefers-reduced-motion:reduce){dialog.modal[open]{animation:none}.toast{transition:none}}
.offline-page{min-height:100dvh;display:grid;place-items:center;padding:24px}.offline-main{max-width:420px;text-align:center;display:grid;gap:16px;justify-items:center}.offline-main .brand-mark{width:200px;height:60px}.offline-main h1{margin:0;font:900 48px/1 var(--cbz-font-display)}.offline-main p{margin:0;line-height:1.55}