/* Family Food V20 — unified responsive header, working desktop drawer and isolated product QR.
   This file intentionally wins over the legacy v15/v16/v17/v18/v19 selectors. */
:root{--ff-v20-header:70px;--ff-v20-drawer:340px}
html{scroll-padding-top:calc(var(--ff-v20-header) + 12px)}
body{padding-top:0!important}
.topbar{
  position:sticky!important;top:0!important;left:0;right:0;width:100%;
  z-index:2147480000!important;isolation:auto!important;
  overflow:visible!important;background:var(--ff-paper,#fff)!important;
  border-bottom:1px solid var(--ff-border,#ece2da)!important;
  box-shadow:0 3px 18px rgba(35,20,12,.06)!important
}
.topbar .topbar-inner{
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  flex-wrap:nowrap!important;box-sizing:border-box!important;
  min-height:var(--ff-v20-header)!important;height:auto!important;
  max-width:1480px!important;min-width:0!important;
  padding:8px clamp(10px,2vw,22px)!important;gap:clamp(8px,1.2vw,16px)!important;
  overflow:visible!important
}
.topbar .header-left{flex:0 0 auto!important;display:flex!important;align-items:center!important;gap:8px!important;min-width:0!important}
.topbar .ff-global-menu{display:inline-flex!important;align-items:center!important;justify-content:center!important;flex:none!important;width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;padding:0!important;cursor:pointer!important}
.topbar .brand{display:flex!important;align-items:center!important;min-width:0!important;flex:0 0 auto!important}
.topbar .brand img{display:block!important;object-fit:contain!important;object-position:left center!important;width:118px!important;max-width:118px!important;height:49px!important}
.topbar .nav-links{display:flex!important;align-items:center!important;flex:0 1 auto!important;gap:2px!important;min-width:0!important;overflow:visible!important;white-space:nowrap}
.topbar .nav-links a{padding:9px!important;font-size:13px!important;min-height:42px;display:inline-flex!important;align-items:center;gap:7px}
.topbar .header-search{display:flex!important;flex:1 1 230px!important;max-width:340px!important;min-width:135px!important;width:auto!important;box-sizing:border-box!important;overflow:hidden!important}
.topbar .header-search input{min-width:0!important;flex:1 1 auto!important}
.topbar .nav-actions{display:flex!important;align-items:center!important;justify-content:flex-end!important;flex:0 0 auto!important;flex-wrap:nowrap!important;gap:6px!important;min-width:0!important;width:auto!important;max-width:100%!important;margin-left:0!important;overflow:visible!important}
.topbar .nav-actions .header-action,.topbar .nav-actions .profile-link{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  flex:0 0 42px!important;width:42px!important;min-width:42px!important;
  height:42px!important;min-height:42px!important;padding:0!important;
  max-width:42px!important;box-sizing:border-box!important;overflow:visible!important
}
.topbar .nav-actions .header-action span,.topbar .nav-actions .profile-link .profile-name,.topbar .nav-actions .profile-link small{display:none!important}
.topbar .nav-actions .profile-avatar{display:flex!important;align-items:center!important;justify-content:center!important;width:30px!important;height:30px!important;flex:none!important;overflow:hidden!important;border-radius:50%!important}
.topbar .nav-actions .profile-avatar img{width:100%!important;height:100%!important;object-fit:cover!important}
.topbar .nav-actions .utility-action,.topbar .nav-actions .logout-link,.topbar .nav-actions .ff-action-wheel,.topbar .nav-actions .ff-action-signup{display:none!important}
.topbar .nav-actions .header-action b{z-index:2!important;position:absolute!important;top:-5px!important;right:-5px!important;margin:0!important}

/* The drawer is outside <header>, so no header stacking/overflow can conceal it.
   It MUST remain display:block at desktop widths; hidden state is visibility+transform. */
#ff-menu-backdrop{
  display:block!important;position:fixed!important;inset:0!important;
  z-index:2147482600!important;background:rgba(19,15,12,.56)!important;
  visibility:hidden!important;opacity:0!important;pointer-events:none!important;
  transition:opacity .20s ease,visibility 0s linear .20s!important
}
#mobile-menu{
  display:block!important;position:fixed!important;top:0!important;left:0!important;bottom:0!important;
  height:100vh!important;height:100dvh!important;
  width:min(88vw,var(--ff-v20-drawer))!important;max-width:var(--ff-v20-drawer)!important;
  padding:14px 14px calc(20px + env(safe-area-inset-bottom,0px))!important;
  margin:0!important;box-sizing:border-box!important;
  background:var(--ff-paper,#fff)!important;border-right:1px solid var(--ff-border,#ddd)!important;
  border-radius:0 18px 18px 0!important;box-shadow:14px 0 55px rgba(0,0,0,.24)!important;
  z-index:2147482800!important;
  visibility:hidden!important;opacity:1!important;pointer-events:none!important;
  transform:translate3d(-105%,0,0)!important;
  overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain!important;
  transition:transform .24s ease,visibility 0s linear .24s!important
}
body.menu-open #ff-menu-backdrop{visibility:visible!important;opacity:1!important;pointer-events:auto!important;transition-delay:0s!important}
body.menu-open #mobile-menu{visibility:visible!important;pointer-events:auto!important;transform:translate3d(0,0,0)!important;transition-delay:0s!important}
body.menu-open{overflow:hidden!important}
#mobile-menu .mobile-menu-head{position:sticky!important;top:-14px!important;z-index:2!important;background:var(--ff-paper,#fff)!important}
#mobile-menu .mobile-menu-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
#mobile-menu .mobile-menu-grid a{min-width:0!important;overflow-wrap:anywhere!important;min-height:72px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:7px!important;text-align:center!important}
#mobile-menu .mobile-menu-actions{display:grid!important;gap:7px!important}
#mobile-menu .mobile-menu-actions a,#mobile-menu .mobile-menu-actions button{max-width:100%!important;min-width:0!important}
#mobile-menu .mobile-menu-head .icon-btn{min-width:42px;min-height:42px}

/* QR component is no longer .qr-product; the old CSS cannot alter this layout. */
.ff-product-qr-card{
  width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important;
  display:grid!important;grid-template-columns:minmax(0,1fr) minmax(104px,132px)!important;
  align-items:center!important;gap:clamp(8px,3vw,18px)!important;
  margin-top:18px!important;padding:clamp(12px,3vw,18px)!important;
  border:1px solid var(--ff-border,#eddfd4)!important;border-radius:20px!important;
  background:var(--ff-paper,#fff)!important;overflow:visible!important
}
.ff-product-qr-copy{min-width:0!important;overflow-wrap:break-word!important}
.ff-product-qr-copy strong{display:flex;align-items:center;gap:7px;font-size:14px;line-height:1.3}
.ff-product-qr-copy strong i{color:var(--ff-orange,#ed671d)}
.ff-product-qr-copy p{margin:6px 0 0;color:var(--ff-muted,#826d60);font-size:13px;line-height:1.4;overflow-wrap:anywhere}
.ff-product-qr-card #qr.ff-product-qr-mark{
  position:relative!important;display:grid!important;place-items:center!important;
  width:100%!important;max-width:132px!important;min-width:0!important;height:auto!important;
  aspect-ratio:1 / 1!important;justify-self:end!important;
  margin:0!important;padding:5px!important;box-sizing:border-box!important;
  background:#fff!important;border:1px solid #e8ded6!important;border-radius:16px!important;
  overflow:hidden!important;isolation:isolate!important
}
.ff-product-qr-card #qr .ff-qr-code{width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;display:grid!important;place-items:center!important;padding:2px!important;background:#fff!important;box-sizing:border-box!important;overflow:hidden!important}
.ff-product-qr-card #qr .ff-qr-code canvas,.ff-product-qr-card #qr .ff-qr-code img:not(.ff-qr-logo){width:100%!important;height:auto!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;aspect-ratio:1/1!important}
.ff-product-qr-card #qr img.ff-qr-logo{position:absolute!important;width:15%!important;height:15%!important;max-width:22px!important;max-height:22px!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;object-fit:contain!important;padding:1px!important;background:white!important;border-radius:4px!important}

@media(max-width:1280px){
 .topbar .nav-links{display:none!important}
 .topbar .header-search{max-width:none!important}
}
@media(max-width:1024px){
 .topbar .nav-actions .ff-action-loyalty{display:none!important}
 .topbar .nav-actions .ff-action-alerts{display:none!important}
}
@media(max-width:760px){
 :root{--ff-v20-header:64px}
 .topbar .topbar-inner{min-height:64px!important;padding:6px 10px!important;gap:5px!important}
 .topbar .header-left{gap:6px!important}
 .topbar .brand img{width:100px!important;max-width:100px!important;height:46px!important}
 .topbar .ff-global-menu{width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important}
 .topbar .nav-links,.topbar .header-search{display:none!important}
 .topbar .nav-actions{flex:0 0 auto!important;margin-left:auto!important;justify-content:flex-end!important;gap:6px!important;overflow:visible!important}
 .topbar .nav-actions>.header-action,.topbar .nav-actions>.profile-link{display:none!important}
 .topbar .nav-actions .ff-action-cart,.topbar .nav-actions .ff-action-profile,.topbar .nav-actions .ff-action-login{display:inline-flex!important}
 .topbar .nav-actions .ff-action-cart,.topbar .nav-actions .ff-action-profile,.topbar .nav-actions .ff-action-login{flex:0 0 40px!important;width:40px!important;min-width:40px!important;height:40px!important;min-height:40px!important}
 .topbar .nav-actions .ff-action-loyalty,.topbar .nav-actions .ff-action-signup,.topbar .nav-actions .ff-action-alerts,.topbar .nav-actions .utility-action,.topbar .nav-actions .logout-link{display:none!important}
 .app-main{padding-bottom:calc(var(--ff-v19-navbar,76px) + env(safe-area-inset-bottom,0px) + 48px)!important}
 .ff-product-qr-card{grid-template-columns:minmax(0,1fr) minmax(102px,130px)!important;gap:10px!important}
}
@media(max-width:350px){
 .topbar .brand img{width:86px!important;max-width:86px!important}
 .topbar .nav-actions{gap:4px!important}
 .topbar .nav-actions .ff-action-cart,.topbar .nav-actions .ff-action-profile,.topbar .nav-actions .ff-action-login{flex-basis:36px!important;width:36px!important;min-width:36px!important;height:36px!important;min-height:36px!important}
 .ff-product-qr-card{grid-template-columns:minmax(0,1fr) 100px!important;gap:7px!important;padding:10px!important}
 .ff-product-qr-copy strong{font-size:13px}.ff-product-qr-copy p{font-size:12px}
}
@media(prefers-reduced-motion:reduce){#mobile-menu,#ff-menu-backdrop{transition:none!important}}
:root[data-theme='dark'] #mobile-menu,:root[data-theme='dark'] .ff-product-qr-card{background:#080808!important;border-color:#242424!important}
:root[data-theme='dark'] .topbar{background:#050505!important}
:root[data-theme='dark'] .ff-product-qr-card #qr{background:white!important}