/* ========================================================= MOBILE SPACE OPTIMISATION — Pickup Now / hours bar, Tuesday banner, hero, and category nav. Scope: max-width: 600px ONLY. Nothing here touches any selector above that breakpoint, so desktop layout is completely unaffected. IMPORTANT: order.css has an existing "CATEGORY VISIBILITY FIX" block that forces .fof-category-nav to max-height:none !important and overflow:visible !important. Since !important rules of equal specificity are decided by load order, every rule below that needs to beat that block uses !important too, AND this file must be linked in the HTML AFTER order.css so it loads later in the cascade. Paired with a small JS snippet (mobile-scroll-collapse.js) that adds a "fof-scrolled" class to once the user scrolls down a bit — this CSS uses that class to collapse the bars out of the way, and removes it again near the top. ========================================================= */ @media (max-width: 600px) { /* ---- Hours ("PICKUP ORDERING OPEN/CLOSED") bar: shrink ---- */ .fof-order__hours-card { margin: 6px 10px 4px !important; padding: 8px 12px !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; flex-wrap: nowrap !important; gap: 8px !important; } .fof-order__hours-status { font-size: 12px !important; gap: 6px !important; white-space: nowrap; } .fof-order__hours-dot { width: 8px !important; height: 8px !important; } .fof-order__hours-times { font-size: 11px !important; line-height: 1.3; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---- Tuesday $17 banner: shrink to a thin strip ---- */ .fof-order__tuesday-banner { margin: 0 10px 6px !important; padding: 7px 12px !important; flex-direction: row !important; align-items: center !important; flex-wrap: nowrap !important; gap: 8px !important; } .fof-order__tuesday-banner strong { font-size: 12px !important; white-space: nowrap; } .fof-order__tuesday-banner span.fof-order__tuesday-banner-note { display: none !important; /* full sentence hidden on mobile; bold headline alone still says $17 Curries */ } /* ---- Hero ("Order ahead. Pick up fresh."): reduced to a thin strip — heading only, address/payment details hidden (still available at checkout) since keeping them was what made this block tall even after the first round of shrinking. ---- */ .fof-order__hero { margin: 6px 10px 8px !important; padding: 10px 14px !important; border-radius: 10px !important; } .fof-order__hero-kicker { display: none !important; } .fof-order__hero h2 { font-size: 1rem !important; line-height: 1.25 !important; margin: 0 !important; } .fof-order__hero p { display: none !important; } .fof-order__hero-details { display: none !important; } /* ---- Category nav: thin, compact, horizontally SWIPEABLE, NOT sticky (overrides both the base sticky rule and the existing "CATEGORY VISIBILITY FIX" block's forced wrap). flex-shrink:0 on the pills is the key fix — without it the browser squeezes every pill to fit the screen width instead of letting the row overflow, which is what actually enables touch-swipe scrolling. scroll-snap makes the swipe feel like a proper carousel rather than a loose scroll. ---- */ .fof-category-nav { position: static !important; padding: 6px 10px !important; gap: 6px !important; flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; scroll-behavior: auto; scrollbar-width: none; touch-action: pan-x !important; /* tell the browser this row handles its own horizontal gesture */ cursor: grab; user-select: none !important; /* avoid accidental text selection while dragging */ } .fof-category-nav.fof-dragging { cursor: grabbing; scroll-snap-type: none !important; /* don't fight the manual drag with snap while actively dragging */ } .fof-category-nav::-webkit-scrollbar { display: none; } .fof-category-nav a { flex: 0 0 auto !important; flex-shrink: 0 !important; scroll-snap-align: start; padding: 7px 12px !important; font-size: 0.72rem !important; white-space: nowrap; } /* ---- Collapse-on-scroll: hides the ENTIRE stack of bars above the menu (hours, Tuesday banner, hero, AND category nav) once the user scrolls down a little, so the menu gets maximum screen height. Nothing stays sticky on mobile. ---- */ .fof-order__hours-card, .fof-order__tuesday-banner, .fof-order__hero, .fof-category-nav { max-height: 500px !important; overflow: hidden !important; transition: max-height 0.25s ease, margin 0.25s ease, padding 0.25s ease, opacity 0.2s ease; } body.fof-scrolled .fof-order__hours-card, body.fof-scrolled .fof-order__tuesday-banner, body.fof-scrolled .fof-order__hero, body.fof-scrolled .fof-category-nav { max-height: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; opacity: 0 !important; pointer-events: none !important; border-width: 0 !important; } /* ---- Category bar collapses completely the moment a category is tapped (see mobile-scroll-collapse.js), replaced by a small "Categories" reopen button fixed in the corner. This is independent of the scroll-collapse above — either trigger hides the bar; the reopen button brings it back on demand. ---- */ body.fof-categories-collapsed .fof-category-nav { display: none !important; } #fof-category-reopen { display: none; } body.fof-categories-collapsed #fof-category-reopen { display: inline-flex !important; align-items: center !important; position: fixed !important; top: 8px !important; left: 8px !important; z-index: 35 !important; padding: 6px 14px !important; border: none !important; border-radius: 999px !important; background: #2A1F1A !important; color: #FBF3E7 !important; font-size: 0.72rem !important; font-weight: 700 !important; box-shadow: 0 2px 10px rgba(0,0,0,0.25) !important; } }