/* Family Food V17 • Screenshot fixes, mobile-first. */
:root{--ff-bottom-safe:calc(76px + env(safe-area-inset-bottom, 0px))}
html{scroll-padding-top:84px;overflow-x:clip}
body{overflow-x:clip}
.topbar{isolation:auto!important}
.topbar-inner{min-width:0;overflow:visible!important}
.header-left,.nav-actions,.brand{min-width:0}
.nav-links{min-width:0}
.app-main{min-width:0}
.exp-product-photo{background:var(--ff-surface-2)}
.exp-product-photo img{object-fit:contain!important;object-position:center;background:var(--ff-surface-2)}
/* Neutral image fallback, not the company logo for an unavailable product photo. */
.exp-product .exp-product-chip:not(.promo){display:none!important}
.exp-product-body h3{overflow-wrap:anywhere}
/* Prevent wheel image/button escaping its panel on small phones. */
.wheel-page,.wheel-layout,.wheel-stage{min-width:0;max-width:100%}
.wheel-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}
.wheel-layout>.panel{min-width:0}
.wheel-stage{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:38px 18px 20px!important;min-height:0!important;overflow:hidden;isolation:isolate;background:var(--ff-paper)!important}
.wheel-visual{width:min(100%,400px)!important;max-width:400px!important;aspect-ratio:1!important;min-width:0;flex:0 1 auto;display:block!important;margin:0 auto}
.wheel-svg{display:block;width:100%!important;height:auto!important;aspect-ratio:1;overflow:visible}
.wheel-pointer{position:relative!important;top:auto!important;left:auto!important;transform:none!important;order:0;flex:none;z-index:3;width:0;height:0;border-left:17px solid transparent;border-right:17px solid transparent;border-top:36px solid #ef5717;margin:0 0 -18px!important}
.wheel-spin{position:static!important;top:auto!important;left:auto!important;transform:none!important;order:2;display:flex!important;align-items:center;justify-content:center;min-width:0!important;width:min(100%,350px);min-height:52px;margin:0!important;border-radius:16px!important;box-shadow:none!important;white-space:normal;z-index:1}
.wheel-spin:hover{transform:none!important}
.wheel-visual{order:1}
.wheel-points{position:static!important;inset:auto!important;order:3;width:min(100%,350px);margin:0!important;min-width:0;white-space:normal;overflow-wrap:anywhere}
.wheel-rewards{max-height:none!important}
.wheel-reward-item{min-width:0;overflow-wrap:anywhere}
/* Correct mobile tab and overlays. Keep controls out of the system gesture area. */
@media(max-width:900px){
  .app-main{padding-bottom:calc(var(--ff-bottom-safe) + 36px)!important}
  .mobile-bottom-nav{z-index:1800!important;min-height:68px!important;padding:6px 6px calc(9px + env(safe-area-inset-bottom,0px))!important;box-sizing:border-box!important}
  .mobile-bottom-nav a{display:flex!important;align-items:center;justify-content:center;flex-direction:column;position:relative;gap:3px!important;min-height:54px;min-width:0;line-height:1.15!important;color:var(--ff-muted);font-weight:650;padding:6px 2px!important}
  .mobile-bottom-nav a.is-active,.mobile-bottom-nav a[aria-current=page]{color:#e95e1a!important;background:var(--ff-orange-soft)!important;border-radius:13px}
  .mobile-bottom-nav a span{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10px}
  .mobile-bottom-nav i{font-size:19px!important}
  .toast{left:50%!important;right:auto!important;bottom:calc(var(--ff-bottom-safe) + 10px)!important;transform:translate(-50%,12px)!important;width:max-content;max-width:min(90vw,340px)!important;text-align:center;z-index:9000!important}
  .toast.show{transform:translate(-50%,0)!important}
  .wheel-layout{grid-template-columns:minmax(0,1fr)!important}
  .wheel-page .page-head{align-items:center;gap:8px}.wheel-page .page-head h1{font-size:1.6rem}
  .wheel-visual{width:min(100%,390px)!important}
}
@media(max-width:600px){
  .wheel-stage{padding:22px 10px 16px!important;gap:12px;border-radius:22px!important}
  .wheel-visual{width:min(100%,360px)!important}
  .wheel-pointer{border-left-width:15px;border-right-width:15px;border-top-width:30px;margin-bottom:-14px!important}
  .wheel-points{padding:12px 8px}
  .wheel-page .page-head .muted.small{display:none}
  .topbar-inner{justify-content:space-between!important}
  .topbar .nav-actions{margin-left:auto!important;flex:0 0 auto!important}
  .topbar .brand img{height:46px!important;object-fit:contain}
  .ff-cart-line{padding:12px 10px!important;min-width:0}
  .ff-cart-line .qty button{min-width:39px;min-height:39px;touch-action:manipulation}
  .ff-line-end>b{font-size:12px}
}
@media(max-width:380px){.wheel-visual{width:min(100%,315px)!important}.mobile-bottom-nav a span{font-size:9px}}
@media(max-width:1200px){.topbar-inner{gap:5px!important}.nav-links a{padding:7px!important}.brand img{max-width:120px!important}}
@media(max-width:1160px){.nav-links{display:none!important}}
@media print{.wheel-stage{display:none!important}}
:root[data-theme=dark] .wheel-stage{background:#101010!important}
:root[data-theme=dark] .exp-product-photo img{background:#181818!important}
:root[data-theme=dark] .mobile-bottom-nav{background:rgba(5,5,5,.98)!important;border-color:#333!important}

/* Product QR card: never crop the QR or let it force the purchase column wider. */
.qr-product{display:grid!important;grid-template-columns:minmax(0,1fr) 112px!important;align-items:center;gap:12px;overflow:hidden;max-width:100%;padding:12px!important}
.qr-product>div:first-child{min-width:0;overflow-wrap:anywhere}
.qr-product #qr{width:110px!important;height:110px!important;max-width:110px;min-width:0;justify-self:end;overflow:hidden}
.qr-product #qr .ff-qr-logo{width:20px!important;height:20px!important}
.qr-product #qr .ff-qr-code canvas,.qr-product #qr .ff-qr-code img{width:94px!important;height:94px!important;object-fit:contain}
/* Camera preview must not push mobile columns outside the viewport. */
.scanner-panel,.qr-reader,.qr-reader-large{min-width:0!important;max-width:100%!important;overflow:hidden}
.qr-reader video,.qr-reader canvas{max-width:100%!important;height:auto!important;object-fit:contain}
@media(max-width:900px){
  .site-footer{padding-bottom:var(--ff-bottom-safe)}
  .topbar .nav-actions .header-action[href*="customer/cart.php"]{display:inline-flex!important}
  .topbar .nav-actions .profile-link{display:flex!important}
}
@media(max-width:600px){
 .product-purchase{min-width:0!important}
 .qr-product{padding:12px 10px!important;grid-template-columns:minmax(0,1fr) 104px!important;gap:8px!important}
 .qr-product #qr{width:102px!important;height:102px!important}
 .qr-product #qr .ff-qr-code canvas,.qr-product #qr .ff-qr-code img{width:90px!important;height:90px!important}
 .ff-home-products .exp-product-photo{height:auto!important;aspect-ratio:1/1}
 .ff-home-products .exp-product-photo img{width:100%;height:100%;object-fit:contain!important}
}