/* Family Food V18: responsive wheel, cart, navbar and consistent images. */
:root{--ff-nav-height:76px;--ff-safe-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:90px;overflow-x:clip}
body{min-width:0;overflow-x:clip}
.topbar{position:sticky!important;top:0!important;z-index:2147480000!important;background:var(--ff-paper)!important;box-shadow:0 1px 12px rgba(20,15,10,.08)!important}
.topbar-inner{max-width:100%!important;min-width:0;box-sizing:border-box}
.topbar .header-left,.topbar .nav-links,.topbar .nav-actions{min-width:0!important}
.topbar .nav-links{flex:0 1 auto!important}
.topbar .nav-links a{white-space:nowrap!important;font-size:12px!important}
.topbar .header-search{flex:1 1 175px!important;min-width:125px!important}
.topbar .nav-actions{flex-shrink:0!important}
.topbar .nav-actions .header-action span{display:none!important}
.topbar .nav-actions .profile-name,.topbar .nav-actions .profile-link small{display:none!important}
.topbar .nav-actions .profile-link{max-width:44px!important;overflow:hidden}
/* Never let product imagery distort; require the assigned image rather than another product's generic logo. */
.exp-product-photo,.product-cover,.ff-cart-thumbnail{min-width:0;background:var(--ff-surface-2)!important}
.exp-product-photo img{object-fit:contain!important;object-position:center!important}
.exp-product-photo img.ff-img-missing{object-fit:contain!important;padding:14px!important}
.exp-product .exp-product-chip:not(.promo){display:none!important}
/* Wheel: every visual uses the same square measurement; pointer is centered above it. */
.wheel-page,.wheel-layout,.wheel-layout>.panel,.wheel-stage,.wheel-visual{box-sizing:border-box;min-width:0!important;max-width:100%!important}
.wheel-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;align-items:start!important}
.wheel-stage{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:12px!important;min-height:0!important;overflow:hidden!important;isolation:isolate;padding:22px 12px 18px!important;background:var(--ff-paper)!important}
.wheel-visual{width:min(100%,420px)!important;max-width:420px!important;flex:none!important;aspect-ratio:1!important;display:block!important;margin:0 auto!important;order:1!important;overflow:hidden!important}
.wheel-svg{display:block!important;width:100%!important;height:100%!important;max-width:100%!important;overflow:visible!important;transform-origin:50% 50%!important}
.wheel-pointer{position:relative!important;inset:auto!important;top:auto!important;left:auto!important;transform:none!important;order:0!important;flex:none!important;width:0!important;height:0!important;margin:0 auto -20px!important;border-left:17px solid transparent!important;border-right:17px solid transparent!important;border-top:33px solid #ed5916!important;filter:drop-shadow(0 3px 5px rgba(0,0,0,.16));z-index:4!important}
.wheel-spin{position:relative!important;inset:auto!important;top:auto!important;left:auto!important;transform:none!important;order:2!important;display:inline-flex!important;justify-content:center!important;align-items:center!important;min-width:0!important;width:min(100%,350px)!important;min-height:52px!important;max-width:100%;margin:0!important;border-radius:14px!important;box-shadow:none!important;white-space:normal!important;z-index:2!important}
.wheel-spin:hover{transform:none!important}
.wheel-points{position:relative!important;inset:auto!important;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;order:3!important;width:min(100%,350px)!important;margin:0!important;white-space:normal!important}
.wheel-rewards{grid-template-columns:repeat(2,minmax(0,1fr));display:grid!important;max-height:none!important}
.wheel-reward-item{min-width:0!important;overflow-wrap:anywhere!important}
.wheel-result[hidden]{display:none!important}
/* Cart controls retain a touch target and don't clip behind the fixed bottom bar. */
.ff-cart-line{min-width:0!important;align-items:center!important;gap:8px!important}
.ff-cart-line a,.ff-cart-line a span{min-width:0!important}
.ff-cart-line .qty{flex-shrink:0;display:flex;align-items:center}
.ff-cart-line .qty button,.ff-line-end button{min-width:42px!important;min-height:42px!important;touch-action:manipulation}
.ff-cart-line button:disabled{opacity:.5;cursor:wait}
.ff-cart-line img{object-fit:contain!important}
@media(max-width:1199px){.topbar .nav-links{display:none!important}.topbar .header-search{max-width:none!important}}
@media(max-width:900px){
 :root{--ff-nav-height:76px}
 .topbar .topbar-inner{grid-template-columns:minmax(0,auto) minmax(0,1fr)!important;grid-template-rows:48px!important;min-height:60px!important;padding:6px 9px!important}
 .topbar .header-search,.topbar .nav-links{display:none!important}
 .topbar .nav-actions{justify-content:flex-end!important;overflow:hidden!important;min-width:0!important;gap:4px!important}
 .topbar .nav-actions .header-action,.topbar .nav-actions .profile-link{flex:0 0 38px!important;width:38px!important;min-width:38px!important;height:38px!important;min-height:38px!important}
 .topbar .nav-actions .utility-action,.topbar .nav-actions a[href*="customer/loyalty.php"],.topbar .nav-actions a[href*="customer/wheel.php"]{display:none!important}
 .topbar .brand img{width:100px!important;max-width:100px!important;height:46px!important;object-fit:contain!important}
 .app-main{padding-bottom:calc(var(--ff-nav-height) + var(--ff-safe-bottom) + 32px)!important}
 .mobile-bottom-nav{z-index:2147479000!important;box-sizing:border-box!important;min-height:var(--ff-nav-height)!important;padding:5px 4px calc(6px + var(--ff-safe-bottom))!important}
 .mobile-bottom-nav a{min-width:0!important;min-height:58px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:4px!important;padding:5px 2px!important}
 .mobile-bottom-nav a.is-active{background:var(--ff-orange-soft)!important;color:var(--ff-red)!important;border-radius:14px}
 .mobile-bottom-nav a span{font-size:10px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;max-width:100%}
 .mobile-bottom-nav a i{font-size:19px!important}
 .toast{position:fixed!important;bottom:calc(var(--ff-nav-height) + var(--ff-safe-bottom) + 12px)!important;left:50%!important;right:auto!important;transform:translate(-50%,10px)!important;max-width:min(90vw,360px)!important;z-index:2147479500!important}
 .toast.show{transform:translate(-50%,0)!important}
 .wheel-layout{grid-template-columns:minmax(0,1fr)!important}
 .wheel-visual{width:min(100%,390px)!important}
 .wheel-rewards{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
}
@media(max-width:520px){
 .wheel-stage{padding:16px 10px!important;gap:10px!important}
 .wheel-visual{width:100%!important;max-width:380px!important}
 .wheel-rewards{grid-template-columns:minmax(0,1fr)!important}
 .wheel-page .page-head{gap:8px!important}
 .wheel-page .page-head .muted.small{display:none!important}
 .ff-cart-line{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:8px!important}
 .ff-cart-line>a{grid-column:1/-1!important}
 .ff-cart-line .qty{justify-self:start!important}
 .ff-line-end{justify-self:end!important;display:flex;align-items:center;gap:8px!important}
 .ff-checkout-layout,.checkout-panel{min-width:0!important}
}
@media(max-width:360px){.topbar .brand img{width:86px!important;max-width:86px!important}.topbar .nav-actions .header-action,.topbar .nav-actions .profile-link{flex-basis:35px!important;width:35px!important;min-width:35px!important}}
@media(prefers-reduced-motion:reduce){.wheel-svg{transition:none!important}}
:root[data-theme=dark] .wheel-stage{background:#080808!important}
/* Manager photo verification */
.ff-photo-audit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:14px}
.ff-photo-card{min-width:0;overflow:hidden;border:1px solid var(--ff-border);background:var(--ff-paper);padding:12px;border-radius:20px;display:grid;gap:10px}
.ff-photo-card img{display:block;width:100%;aspect-ratio:4/3;object-fit:contain;border-radius:12px;background:var(--ff-surface-2);border:1px solid var(--ff-border)}
.ff-photo-card input[type=file]{max-width:100%;width:100%}
.ff-photo-card h3{font-size:16px;margin:0}
.ff-photo-card small{color:var(--ff-muted)}
.ff-photo-card .notice{margin:0;padding:9px}

/* QR product card: always fit inside the purchase panel, including 320px wide screens. */
.qr-product{max-width:100%!important;box-sizing:border-box!important;grid-template-columns:minmax(0,1fr) minmax(90px,106px)!important;padding:10px!important;gap:8px!important}
.qr-product>div:first-child{min-width:0!important;overflow-wrap:anywhere}
.qr-product #qr{width:100%!important;max-width:106px!important;min-width:0!important;height:106px!important;justify-self:center!important;overflow:hidden!important}
.qr-product #qr .ff-qr-code{width:100%!important;height:100%!important}
.qr-product #qr canvas,.qr-product #qr img:not(.ff-qr-logo){max-width:100%!important;max-height:100%!important;object-fit:contain!important}
@media(max-width:380px){.qr-product{grid-template-columns:minmax(0,1fr) 92px!important}.qr-product #qr{width:92px!important;height:92px!important}}