/* ==========================================================================
   Thuso — "feels like the app" mode for phones.
   Loaded by BOTH shells (main site + Fresh store). Desktop (≥768px) untouched.
   ========================================================================== */
.tabbar{display:none}

@media (max-width:767px){
  :root{--tabbar-h:64px}
  html{-webkit-tap-highlight-color:transparent}
  body{padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom));overscroll-behavior-y:none}

  /* ---------- bottom tab bar ---------- */
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:55;
    height:calc(var(--tabbar-h) + env(safe-area-inset-bottom));padding:6px 6px env(safe-area-inset-bottom);
    background:rgba(255,255,255,.94);backdrop-filter:saturate(170%) blur(16px);-webkit-backdrop-filter:saturate(170%) blur(16px);
    border-top:1px solid rgba(18,53,36,.08);box-shadow:0 -10px 30px -18px rgba(18,53,36,.35)}
  .tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:52px;border-radius:16px;color:rgba(27,38,32,.5);font-size:10.5px;font-weight:700;letter-spacing:.01em;transition:color .2s,transform .15s}
  .tab:active{transform:scale(.92)}
  .tab-ic{position:relative;display:flex;align-items:center;justify-content:center;width:52px;height:30px;border-radius:999px;transition:background .25s}
  .tab-ic svg{width:22px;height:22px}
  .tab.is-on{color:var(--forest)}
  .tab.is-on .tab-ic{background:var(--sage)}
  .tab.is-on .tab-ic svg{color:var(--leaf)}
  .tab-badge{position:absolute;top:-3px;right:6px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--clay);color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px #fff}
  .tab-badge.is-empty{display:none}

  /* Fresh basket bar & toast float above the tab bar */
  .mobile-cartbar{bottom:calc(var(--tabbar-h) + 10px + env(safe-area-inset-bottom))!important;height:54px;border-radius:18px}
  .toast{bottom:calc(var(--tabbar-h) + 76px + env(safe-area-inset-bottom))!important}

  /* ---------- compact app top bar ---------- */
  .app-announce{display:none!important}
  #siteHeader{background:rgba(251,247,239,.92)}
  #siteHeader>div:first-child{height:56px!important;gap:.5rem}
  #siteHeader .logo-mark{width:34px;height:34px;border-radius:12px;font-size:17px}
  #siteHeader .font-display.text-\[1\.4rem\],#siteHeader .font-display.text-\[1\.35rem\]{font-size:1.15rem!important}
  #siteHeader .tracking-\[\.22em\]{font-size:8.5px!important;letter-spacing:.18em!important}
  #siteHeader .cart-btn{height:40px;padding:0 .8rem}
  #siteHeader .icon-btn{width:40px;height:40px}
  /* tab bar already covers Home/Account; keep the header lean */
  #siteHeader [data-open-menu]{display:none}
  #siteHeader .search-pill{height:42px}

  /* ---------- big desktop footer → slim app footer ---------- */
  .site-footer{margin-top:3rem!important}
  .site-footer .foot-cols{display:none!important}
  .site-footer .foot-mini{display:flex!important}

  /* ---------- app-like touch ---------- */
  a,button,.opt,.fchip,.qchip,.vpill{touch-action:manipulation}
  .btn-primary,.btn-saffron,.btn-outline,.btn-ghost{min-height:46px}
  .btn-primary:active,.btn-saffron:active,.btn-outline:active,.pcard:active,.thali-card:active,.card:active,
  .cat-tile:active,.qchip:active,.fchip:active,.opt:active,.step-card:active,.plan-card:active{transform:scale(.97)!important;transition:transform .12s}
  .pcard:hover,.thali-card:hover,.step-card:hover,.plan-card:hover,.cat-tile:hover{transform:none}
  .input{min-height:48px;font-size:16px} /* 16px stops iOS zoom-on-focus */
  .sec-title{font-size:clamp(1.75rem,7.4vw,2.3rem)!important;line-height:1.08}
  .eyebrow{font-size:10.5px}
  .card{border-radius:22px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1!important;transform:none!important}
}
@media (max-width:767px){ #siteHeader a.icon-btn[aria-label="Sign in"]{display:none} }

/* off-canvas drawers: no shadow bleed into the viewport while closed */
.menu-drawer:not(.is-open){box-shadow:none}
body:not(.cart-open) .drawer{box-shadow:none}