/* ============================================================
   CLICKFOOD — Public homepage (logged-out visitors)
   ============================================================ */

.home-page { background: var(--bg-body); color: var(--text-primary); min-height: 100vh; min-height: 100dvh; }

/* ---------- Sticky header ----------
   Cream, matching .app-nav (components.css), slightly see-through so
   content scrolling under it stays readable. */
.home-header {
  position: sticky; top: 0; z-index: 300;
  background: color-mix(in srgb, var(--bg-body) 90%, transparent); border-bottom: 1px solid var(--border-color);
  backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
}
.home-header-inner {
  display: flex; align-items: center; gap: 18px; padding: 14px 20px;
}
.home-brand {
  display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--text-primary);
  font-weight: 800; font-size: 21px; white-space: nowrap; cursor: pointer; flex-shrink: 0;
}
.mhome-brand-tag > span { display: flex; flex-direction: column; line-height: 1.1; }
.mhome-tagline { font-family: var(--font-body); letter-spacing: 0.02em; font-size: 10px; font-weight: 500; color: var(--text-secondary); letter-spacing: 0.02em; }
@media (max-width: 480px) { .mhome-tagline { display: none; } }
.home-header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: auto; }

/* In-header nav links (marketing homepage only) — a real single-row
   header (logo | links | actions), distinct from .home-public-nav
   above (a separate secondary bar, unused by the current design). */
.mnav-links { display: flex; align-items: center; gap: 22px; margin: 0 auto; }
.mnav-links a { color: var(--text-secondary); font-size: 13.5px; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; }
.mnav-links a:hover { color: var(--color-primary); }
@media (max-width: 880px) { .mnav-links { display: none; } }
@media (max-width: 560px) { .mnav-order-btn span { display: none; } }

/* ---------- Public nav row ---------- */
.home-public-nav { background: var(--bg-surface-2); border-bottom: 1px solid var(--border-color); overflow-x: auto; }
.home-public-nav-inner { display: flex; gap: 20px; padding: 0 20px; }
.home-public-nav a {
  display: inline-block; padding: 11px 2px; font-size: 13.5px; font-weight: 600; color: var(--text-secondary);
  text-decoration: none; white-space: nowrap; cursor: pointer; border-bottom: 2px solid transparent;
}
.home-public-nav a:hover { color: var(--color-primary); border-color: var(--color-primary); }

/* Anchor targets should land below the sticky header, not under it */
.home-section, #home-top { scroll-margin-top: 90px; }

/* ---------- Page content wrapper ---------- */
.home-content { --content-pad-x: 20px; padding: 20px 20px 48px; }
.storefront { max-width: 100%; }

/* ---------- Homepage: topbar + large curved content sheet ----------
   The existing site header (.home-header for guests, .app-nav for signed-in
   customers — unchanged, still has the logo/cart/profile/etc.) stays
   exactly as it was; these two elements are the homepage's OWN content,
   rendered by renderBrowser(). The topbar sits on the page's own plain
   background (cream, --bg-body — the same "background" the header
   itself sits on, per the reference) with the pickup location/ETA shown
   as solid orange pills for the color accent, not a colored block. The
   curved sheet below is a true white surface (--bg-surface) with large
   rounded top corners rising up from that cream background — the single
   large panel everything else lives inside, not a rounded card for
   every section. Both break out of whatever padded/centered ancestor
   wraps them (.home-content for guests, .page-wrap for signed-in
   customers — different padding values in each) by cancelling that
   ancestor's own left/right padding via --content-pad-x (set on
   .home-content/.page-wrap), rather than the viewport-relative
   "100vw + -50vw margin" trick — that trick assumes the ancestor chain
   is centered/flush with the true browser viewport, which breaks (bleeds
   under, and cuts off against) the fixed desktop sidebar (body.has-sidebar,
   components.css) since the sidebar offsets #app from the real viewport
   edge. Cancelling the immediate parent's padding instead is offset-
   agnostic — it works the same whether or not a sidebar (or anything
   else) shifts the ancestor chain. The small negative top/bottom margins
   below cancel that ancestor's vertical padding specifically so the
   topbar sits flush under the sticky header and the sheet's rounded top
   is what's actually visible on load. */
.storefront-topbar {
  position: relative;
  width: calc(100% + var(--content-pad-x, 20px) * 2);
  margin-left: calc(var(--content-pad-x, 20px) * -1);
  margin-right: calc(var(--content-pad-x, 20px) * -1);
  margin-top: -20px;
  /* Same cream as the header; the lighter curved sheet below rises off it
     with a hairline edge. */
  background: var(--bg-body);
  color: var(--text-primary); padding: 0; display: flex; flex-direction: column; gap: 10px;
  overflow: hidden;
}
.storefront-topbar-pills {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 14px 20px 16px;
}
.storefront-topbar-pickup {
  display: flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; color: #fff;
  background: var(--color-primary); padding: 4px 9px; border-radius: 999px; white-space: nowrap;
}
.storefront-topbar-eta { font-size: 10px; font-weight: 600; color: #fff; background: var(--color-primary); padding: 4px 9px; border-radius: 999px; white-space: nowrap; }

.storefront-curved {
  position: relative;
  width: calc(100% + var(--content-pad-x, 20px) * 2);
  margin-left: calc(var(--content-pad-x, 20px) * -1);
  margin-right: calc(var(--content-pad-x, 20px) * -1);
  margin-top: -8px; margin-bottom: -48px;
  background: var(--bg-surface); border-radius: 32px 32px 0 0;
  box-shadow: 0 -1px 0 var(--border-color), 0 -10px 24px rgba(42,26,20,0.04);
  padding: 22px 20px 40px;
}
@media (max-width: 480px) {
  .storefront-topbar-pills { padding: 12px 16px 14px; }
  .storefront-curved { border-radius: 26px 26px 0 0; padding: 18px 16px 32px; margin-bottom: -40px; }
}

.view-all-link { background: none; border: none; color: var(--color-primary); font-size: 12.5px; font-weight: 700; cursor: pointer; padding: 4px; }

/* The curved sheet is a white surface (--bg-surface) — .search-bar's own
   default background is also --bg-surface (shared with the shop detail
   page, where it sits on a different ambient background and needs no
   change), so without this override it would blend invisibly into the
   sheet here specifically. */
.storefront-curved .search-bar { background: var(--bg-surface-2); border-color: transparent; }

/* ---------- Popular Shops (horizontal mini cards) ---------- */
.store-mini-row { display: flex; gap: 12px; overflow-x: auto; padding: 2px 2px 8px; -ms-overflow-style: none; scrollbar-width: none; }
.store-mini-row::-webkit-scrollbar { display: none; }
.store-mini-card { flex: 0 0 auto; width: 150px; cursor: pointer; }
.store-mini-img { aspect-ratio: 4/3; border-radius: var(--radius-md); }
.store-mini-img-fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); }
.store-mini-status { position: absolute; top: 6px; left: 6px; font-size: 9px; padding: 2px 7px; }
.store-mini-body { padding-top: 8px; }
.store-mini-name { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.store-mini-meta { font-size: 11px; color: var(--text-secondary); display: flex; align-items: center; gap: 4px; margin-top: 2px; white-space: nowrap; }
.store-mini-meta .dot { opacity: 0.5; }

/* ---------- Promotions (horizontal mini cards, developer-controlled data only) ---------- */
.promo-mini-row { display: flex; gap: 12px; overflow-x: auto; padding: 2px 2px 8px; -ms-overflow-style: none; scrollbar-width: none; }
.promo-mini-row::-webkit-scrollbar { display: none; }
.promo-mini-card { flex: 0 0 auto; width: 200px; cursor: pointer; }
.promo-mini-img { aspect-ratio: 16/10; border-radius: var(--radius-md); }
.promo-mini-title { font-size: 13.5px; font-weight: 700; margin-top: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.promo-mini-sub { font-size: 11.5px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Hero banner ----------
   A store promotion is a manager-uploaded image OR video of unknown/
   arbitrary aspect ratio (portrait, square, landscape). The media box's
   height is a TRUE FIXED value (not max-height, not auto, not derived
   from the media's own intrinsic size) — this is load-bearing, not
   cosmetic: an <img>/<video> sized to its own aspect ratio would make
   the wrapper shrink-wrap differently per item, shoving the search bar,
   category row and store grid below it up/down on every rotation (real,
   measured layout shift). Fixing the box's height and setting the media
   to width:100%;height:100% makes every image AND every video occupy
   pixel-identical space regardless of what it actually contains.
   The box is a .media box with data-fit="cover" (js/media.js): the
   picture always fills the banner edge to edge, trimming only what
   doesn't fit. No bars of any kind around it.
   The card shows ONLY the media plus the Order Now button (no badge/
   title/shop-name text overlay) — there is deliberately no gradient or
   translucent scrim sitting over the photo/video either, since nothing
   needs to be read over it anymore; the button is its own solid,
   opaque orange element, so it doesn't need a backdrop to stay legible.
   The plain (no active promotion) fallback keeps the original full-
   bleed centered-text treatment since there's no photo underneath it
   to obscure. */
.hero-banner-wrap { position: relative; border-radius: 20px; overflow: hidden; margin-bottom: 24px; box-shadow: var(--shadow-sm); }
.hero-banner-media {
  position: relative; width: 100%; height: 300px; overflow: hidden; cursor: pointer;
  background: linear-gradient(135deg, var(--color-charcoal), #241f2b);
  display: flex; align-items: center; justify-content: center;
}
.hero-banner-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-banner-img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.5); }
.hero-banner-img-placeholder i { width: 40px; height: 40px; }
.hero-banner-info {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 0 20px 18px; display: flex; flex-direction: column; align-items: flex-start;
  pointer-events: none; /* only the button below needs to be clickable */
}
.hero-title { font-size: 20px; font-weight: 700; line-height: 1.2; margin: 0; color: var(--text-primary); }
.hero-sub { font-size: 13.5px; font-weight: 600; color: var(--text-secondary); margin: 0; max-width: 480px; }
.hero-cta { align-self: flex-start; margin-top: 4px; gap: 8px; pointer-events: auto; box-shadow: 0 2px 12px rgba(0,0,0,0.35); }
.hero-dots { position: absolute; top: 12px; left: 0; right: 0; z-index: 2; display: flex; gap: 6px; justify-content: center; padding: 0; }
.hero-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.55); box-shadow: 0 1px 3px rgba(0,0,0,0.4); border: none; padding: 0; cursor: pointer; transition: background var(--transition-fast), width var(--transition-fast); }
.hero-dot.active { background: #fff; width: 18px; border-radius: 4px; }

.hero-banner-static {
  position: relative; border-radius: 20px; background: linear-gradient(135deg, var(--color-charcoal), #241f2b);
  color: #fff; padding: 40px 32px; overflow: hidden; cursor: pointer; min-height: 200px;
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
}
.hero-banner-static::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 85% 15%, rgba(var(--color-primary-rgb),0.35), transparent 55%);
}
.hero-banner-static .hero-title, .hero-banner-static .hero-sub { position: relative; z-index: 1; color: #fff; }
.hero-banner-static .hero-sub { color: rgba(255,255,255,0.82); }
.hero-banner-static .hero-cta { position: relative; z-index: 1; }
.hero-banner-skeleton { height: 200px; border-radius: 20px; }

/* ---------- Food category icon row ---------- */
.category-icon-row { display: flex; gap: 14px; overflow-x: auto; padding: 2px 2px 8px; -ms-overflow-style: none; scrollbar-width: none; }
.category-icon-row::-webkit-scrollbar { display: none; }
.category-icon-card {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 76px;
  background: none; border: none; cursor: pointer; padding: 4px 0;
}
.category-icon-badge {
  width: 60px; height: 60px; border-radius: 50%; background: var(--bg-surface-2); color: var(--color-primary);
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm);
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.category-icon-card span:last-child { font-size: 12px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
.category-icon-card:hover .category-icon-badge { transform: translateY(-2px); }
.category-icon-card.active .category-icon-badge { background: var(--color-primary); color: #fff; box-shadow: var(--shadow-md); transform: translateY(-2px); }
.category-icon-card.active span:last-child { color: var(--color-primary); position: relative; padding-bottom: 4px; }
.category-icon-card.active span:last-child::after {
  content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 16px; height: 2px; border-radius: 2px; background: var(--color-primary);
}

@media (max-width: 480px) {
  .hero-banner-static { padding: 28px 20px; min-height: 170px; }
  .hero-banner-static .hero-title { font-size: 26px; }
  .hero-banner-media { height: 200px; }
  .hero-banner-info { padding: 42px 16px 14px; }
  .hero-banner-info .hero-title { font-size: 18px; }
}

/* ---------- Store cards (marketplace discovery) ----------
   One shared component (storeCard() in home.js) used everywhere a shop
   is listed — Popular Shops, All Stores, and (since those two lists are
   just the same render call over a filtered/sorted array, not separate
   render paths) search and category results too — so this layout
   applies everywhere automatically. Info sits OUTSIDE/above a compact,
   wide, short cover image (never overlaid on top of it): availability
   line, then name + logo + favorite heart, then rating/category, then
   the image itself, capped to a fixed aspect ratio so a portrait,
   square or huge upload never makes one card dramatically taller than
   its neighbors. */
.store-card { display: flex; flex-direction: column; overflow: hidden; cursor: pointer; }
.store-card-info { padding: 12px 14px 10px; }
.store-card-avail { font-size: 11.5px; font-weight: 600; color: var(--text-secondary); margin-bottom: 2px; }
.store-card-avail.is-open { color: var(--color-success); }
.store-card-name-row { display: flex; align-items: center; gap: 8px; }
.store-card-logo { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex-shrink: 0; display: block; }
.store-card-logo-fallback { display: flex; align-items: center; justify-content: center; background: var(--bg-surface-2); color: var(--color-primary); flex-shrink: 0; }
.store-card-name { flex: 1; min-width: 0; font-size: 15.5px; font-weight: 700; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.store-card-fav-btn {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; border: none; background: none;
  color: var(--text-secondary); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.store-card-fav-btn i, .store-card-fav-btn svg { width: 18px; height: 18px; }
.store-card-fav-btn.active { color: var(--color-error); }
.store-card-rating-row { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; margin-top: 3px; }
.store-card-rating-row .dot { opacity: 0.5; font-weight: 400; }

.store-card-cover { position: relative; aspect-ratio: 4/3; background: var(--bg-surface-2); margin: 0 14px 14px; border-radius: var(--radius-md); overflow: hidden; }
.store-card-cover-img-wrap { width: 100%; height: 100%; overflow: hidden; }
.store-card-cover-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-med); }
.store-card:hover .store-card-cover-img-wrap img { transform: scale(1.05); }
.store-card-cover-fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); }
.store-card-status { position: absolute; top: 8px; left: 8px; z-index: 2; }

@media (max-width: 480px) {
  .store-card-info { padding: 10px 12px 8px; }
  .store-card-name { font-size: 14.5px; }
  .store-card-cover { margin: 0 12px 12px; }
}

/* ---------- Shop page (redesigned, modern food-delivery layout) ----------
   Structure: full-bleed banner with floating back/search buttons -> a
   compact info block (name, rating, delivery fee, prep time, open/closed,
   location) -> a horizontally-scrolling category nav that smooth-scrolls
   to a section further down (no page reload, no state re-render — plain
   scrollIntoView, same "direct DOM, skip the framework" pattern already
   used by the hero's dots/hero-scroll) -> a horizontal "Most Liked" row
   -> one 2-column grid per real category, each its own section the nav
   can jump to. Category names, counts and which items are "most liked"
   all come from real menu_items data (category field, rating_count) —
   nothing here is hard-coded to any one shop. */
.store-detail { position: relative; }
/* Full-bleed, edge to edge — same design language as the homepage's
   dark topbar (css above): a full-width "background" element the curved
   white sheet then rises up out of, so opening a shop feels like a
   continuation of the same app, not a different screen. Uses the same
   --content-pad-x cancel-the-parent's-padding trick as .storefront-topbar
   above (sidebar-safe), so it works the same regardless of which padded
   ancestor wraps it (.home-content for guests, .page-wrap for signed-in
   customers). */
.shop-hero {
  position: relative;
  width: calc(100% + var(--content-pad-x, 20px) * 2);
  margin-left: calc(var(--content-pad-x, 20px) * -1);
  margin-right: calc(var(--content-pad-x, 20px) * -1);
  margin-top: -20px;
  aspect-ratio: 16/8; overflow: hidden; background: var(--bg-surface-2);
}
.shop-hero img { width: 100%; height: 100%; object-fit: cover; }
.shop-hero-fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); }
.shop-hero-actions { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; justify-content: space-between; gap: 8px; z-index: 2; }
.shop-hero-actions-right { display: flex; gap: 8px; }
.shop-hero-icon-btn {
  width: 38px; height: 38px; border-radius: 50%; border: none; cursor: pointer; flex-shrink: 0;
  background: rgba(20,18,16,0.55); color: #fff; display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.shop-hero-icon-btn:hover { background: rgba(20,18,16,0.75); }
.shop-hero-icon-btn.active { color: var(--color-error); }
.shop-hero-icon-btn.active i, .shop-hero-icon-btn.active svg { fill: currentColor; }

/* ---------- Three-dot bottom sheet ---------- */
.modal-overlay.sheet { align-items: flex-end; padding: 0; }
.modal.sheet-panel {
  max-width: 600px; width: 100%; border-radius: 20px 20px 0 0; max-height: 85vh;
  animation: sheetUp var(--transition-med);
}
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.sheet-handle { width: 40px; height: 4px; border-radius: 2px; background: var(--border-strong); margin: 10px auto 2px; }
.sheet-item {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px 20px; border: none; background: none;
  text-align: left; cursor: pointer; color: var(--text-primary); border-bottom: 1px solid var(--border-color);
}
.sheet-item:last-child { border-bottom: none; }
.sheet-item:active { background: var(--bg-surface-2); }
.sheet-item i, .sheet-item svg { width: 20px; height: 20px; color: var(--text-secondary); flex-shrink: 0; }
.sheet-item.active-fav i, .sheet-item.active-fav svg { color: var(--color-error); fill: currentColor; }
.sheet-item-label { font-size: 15px; font-weight: 600; }
.sheet-item-sub { font-size: 12.5px; color: var(--text-secondary); font-weight: 400; margin-top: 2px; }

.store-info-row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--border-color); gap: 12px; }
.store-info-row:last-child { border-bottom: none; }
.store-info-row-label { color: var(--text-secondary); font-size: 13.5px; flex-shrink: 0; }
.store-info-row-value { font-size: 13.5px; font-weight: 600; text-align: right; }

/* .storefront-curved (the white sheet this card sits inside) already
   contributes 22px/18px of its own top padding above this card — this
   used to ALSO add its own 14px top padding on top of that, stacking
   to ~36px of dead space before the logo/name row. Left/bottom padding
   stay (this card has no side padding of its own elsewhere to fall
   back on), only the redundant top value is trimmed. */
.shop-info-card { padding: 0 0 4px; }
.shop-info-name-row { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.shop-info-logo { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid var(--bg-surface); box-shadow: var(--shadow-sm); }
.shop-info-name { font-size: 21px; font-weight: 700; margin: 0; line-height: 1.2; }
.shop-info-meta-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: 13px; color: var(--text-secondary); }
.shop-info-meta-row .dot { opacity: 0.5; }
.shop-info-rating { display: flex; align-items: center; gap: 4px; font-weight: 700; color: var(--text-primary); }
.shop-info-location { display: flex; align-items: center; gap: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.shop-info-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.shop-fulfil-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--text-secondary); background: var(--bg-surface-2); border-radius: 999px; padding: 5px 10px; }

/* Horizontally-scrolling category nav — tapping a chip scrolls the page
   to that category's section further down; the active chip (whichever
   section is currently in view) is toggled by a plain IntersectionObserver
   directly on the DOM, never through a full app re-render, so scrolling
   the menu never re-renders the whole page just to update a highlight. */
.shop-cat-nav { display: flex; gap: 8px; overflow-x: auto; padding: 12px 2px 10px; -ms-overflow-style: none; scrollbar-width: none; }
.shop-cat-nav::-webkit-scrollbar { display: none; }
.shop-cat-chip {
  flex: 0 0 auto; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border-color);
  background: var(--bg-surface); color: var(--text-secondary); font-size: 13.5px; font-weight: 600; cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.shop-cat-chip.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

.shop-section { scroll-margin-top: 12px; margin-bottom: 20px; }
.shop-section-title { font-size: 16px; font-weight: 700; margin: 0 0 10px; }

.shop-popular-row { display: flex; gap: 12px; overflow-x: auto; padding: 2px 2px 10px; -ms-overflow-style: none; scrollbar-width: none; }
.shop-popular-row::-webkit-scrollbar { display: none; }
.shop-popular-row .shop-prod-card { flex: 0 0 auto; width: 140px; }

.shop-menu-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 620px) { .shop-menu-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .shop-menu-grid { grid-template-columns: repeat(4, 1fr); } }

/* Product card: compact, contained (never cropped) image over a light
   background, name/price/rating below, a round "+" that quick-adds to
   the existing cart exactly like the rest of the app (same store-quick-add
   action) — tapping the card body (not the button) opens the existing
   product detail/add-ons modal, unchanged. */
.shop-prod-card { display: flex; flex-direction: column; background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-lg); overflow: hidden; cursor: pointer; }
/* 4:5 suits the phone photos most shops upload; every card is the same height. */
.shop-prod-img { aspect-ratio: 4/5; }
@media (min-width: 900px) { .shop-prod-img { aspect-ratio: 1/1; } }
.shop-prod-body { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 3px; }
.shop-prod-name { font-size: 13px; font-weight: 700; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 2.5em; }
.shop-prod-rating { font-size: 11.5px; color: var(--text-secondary); display: flex; align-items: center; gap: 3px; }
.shop-prod-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.shop-prod-price { font-size: 14.5px; font-weight: 700; color: var(--color-primary); }
.shop-prod-add {
  width: 28px; height: 28px; border-radius: 50%; border: none; background: var(--color-primary); color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
  transition: transform var(--transition-fast), background var(--transition-fast);
}
.shop-prod-add:hover { transform: scale(1.08); }
.shop-prod-add:disabled { background: var(--border-strong); cursor: not-allowed; }
.shop-prod-add i, .shop-prod-add svg { width: 15px; height: 15px; }
.shop-prod-img .out-of-stock-overlay { font-size: 11px; }

@media (max-width: 480px) {
  .shop-hero { aspect-ratio: 16/9; }
  /* A portrait cover gets a taller banner on phones so it can fill the
     width without zooming in too far (js/media.js tags it). */
  .shop-hero.media--portrait { aspect-ratio: 1/1; max-height: 62vh; }
  .shop-info-name { font-size: 19px; }
}

/* ---------- Location selector ---------- */
.location-select-row { display: flex; align-items: center; gap: 8px; }
.location-select { border: none; background: transparent; padding: 4px 0; min-height: auto; font-weight: 600; font-size: 13.5px; color: var(--text-primary); }
.location-select:focus { box-shadow: none; outline: none; }

/* ---------- Reorder row ("Order it again") ---------- */
.reorder-row {
  display: flex; gap: 12px; overflow-x: auto; padding: 2px 2px 8px;
  -ms-overflow-style: none; scrollbar-width: none;
}
.reorder-row::-webkit-scrollbar { display: none; }
.reorder-card { flex: 0 0 auto; width: 150px; cursor: pointer; overflow: hidden; }
.reorder-card-img-wrap { aspect-ratio: 4/3; }

/* ---------- "Recommended for You" row — horizontal scroll only here;
   .menu-card elsewhere (e.g. a store's own menu grid) is untouched
   since these rules are scoped under .recommended-row. ---------- */
.recommended-row {
  display: flex; gap: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity; padding: 2px 2px 10px;
  -ms-overflow-style: none; scrollbar-width: none;
}
.recommended-row::-webkit-scrollbar { display: none; }
.recommended-row .menu-card { flex: 0 0 auto; width: 62vw; max-width: 210px; scroll-snap-align: start; }
@media (min-width: 481px) { .recommended-row .menu-card { width: 200px; } }

/* ---------- Floating cart bar (mobile-first, visible on store pages) ---------- */
.floating-cart-btn {
  position: fixed; left: 16px; right: 16px; z-index: 350;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  background: var(--color-primary); color: #fff; border: none; border-radius: var(--radius-pill);
  padding: 15px 20px; font-weight: 700; font-size: 14px; box-shadow: var(--shadow-lg);
  display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
  max-width: 480px; margin: 0 auto;
}
/* Stacks above the bottom nav instead of the screen edge whenever one is
   present — see updateFixedBottomSpace() in app.js for the matching
   reserved content padding. The +52px (not the nav's own height + a
   plain 12px gap) is deliberate: the raised centre FAB (guest cart /
   customer My Orientation, css/components.css .bottom-nav-fab) pokes
   28px above the nav's own top edge, so a plain 12px clearance would
   still let this pill's bottom edge visually collide with that circle
   — this leaves a real ~12px gap above the FAB instead. */
body.has-bottomnav .floating-cart-btn { bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px) + 52px); }
@media (min-width: 761px) {
  .floating-cart-btn, body.has-bottomnav .floating-cart-btn { bottom: calc(env(safe-area-inset-bottom, 0px) + 24px); }
}

/* ---------- Food cards ---------- */
.home-food-card { display: flex; flex-direction: column; overflow: hidden; }
.home-food-img-wrap { position: relative; aspect-ratio: 4/3; background: var(--bg-surface-2); overflow: hidden; }
.home-food-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.home-food-img-fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); }
.home-food-img-fallback [data-lucide] { width: 34px; height: 34px; }
.home-food-cat { position: absolute; top: 10px; left: 10px; }
.home-food-desc {
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  min-height: 2.6em;
}

/* ---------- Offers ---------- */
.home-offer-card { border-left: 4px solid var(--color-primary); }
.home-offer-icon {
  width: 46px; height: 46px; border-radius: 50%; background: rgba(var(--color-primary-rgb),0.14); color: var(--color-primary);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* ---------- Footer ---------- */
.home-footer { background: var(--color-charcoal); color: #E9E8ED; margin-top: 20px; }
.home-footer .home-brand { color: #fff; }
.home-footer .home-brand-name { color: #fff; }
.home-footer-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; padding: 44px 20px 28px;
}
.home-footer-grid-single { grid-template-columns: 1fr; max-width: 420px; padding: 20px 20px 14px; }
.home-footer-links { display: flex; flex-direction: column; gap: 9px; }
.home-footer-links a { color: #C9C7D1; text-decoration: none; font-size: 13.5px; cursor: pointer; }
.home-footer-links a:hover { color: #fff; }
.home-footer-bottom {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;
  padding: 16px 20px; border-top: 1px solid rgba(255,255,255,0.12); color: #B6B4C0;
}
.home-footer-legal { display: flex; gap: 18px; }
.home-footer-legal a { color: #B6B4C0; text-decoration: none; cursor: pointer; }
.home-footer-legal a:hover { color: #fff; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .home-footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .home-header-inner { flex-wrap: wrap; padding: 10px 14px; gap: 10px; }
}

@media (max-width: 480px) {
  .home-brand-name { font-size: 16px; }
  .home-header-actions { gap: 6px; }
  .home-header-actions .btn-icon { width: 32px; height: 32px; min-width: 32px; min-height: 32px; padding: 0; }
  .home-header-actions .btn-sm { padding: 7px 10px; font-size: 12px; min-height: 30px; }
  .home-footer-grid { grid-template-columns: 1fr; padding: 32px 16px 20px; }
  .home-footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   PUBLIC MARKETING HOMEPAGE — hero, about, features, how-it-works,
   between-lectures, discover shops, why-choose, final CTA.
   Uses only existing design tokens (base.css :root) — no new colors.
   No real food/campus photography exists in this project, so every
   "media" panel below is a deliberate CSS-only graphic (gradient +
   icon), never a fabricated stock photo.
   ============================================================ */
.mcenter { text-align: center; }
.msection { padding: 30px 0; }
/* Compact, app-native rows (categories/promotions/shops/popular food) —
   tighter than a full editorial .msection, closer to how a real food-
   delivery app stacks its home-screen carousels. */
.msection-tight { padding: 16px 0; }
.msection-title-sm { font-size: 17px; font-weight: 700; margin: 0 0 10px; color: var(--text-primary); }
.msection-header-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.msection-header-row .msection-title-sm { margin-bottom: 0; }
.msection-tint { background: var(--bg-surface-2); }
.msection-title { font-size: 26px; font-weight: 700; line-height: 1.2; margin: 0 0 10px; color: var(--text-primary); }
.msection-sub { font-size: 14.5px; line-height: 1.6; color: var(--text-secondary); margin: 0 0 8px; }
.msection-sub-wide { max-width: 560px; margin-left: auto; margin-right: auto; }
.mhero-eyebrow { margin: 0 0 8px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-primary); }
.mhero-highlight { color: var(--color-primary); }

/* ---------- Hero ---------- */
.mhero { padding: 24px 0; background: var(--bg-body); }
.mhero-inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 24px; align-items: center; }
.mhero-title { font-size: 38px; font-weight: 700; line-height: 1.15; margin: 0 0 14px; color: var(--text-primary); letter-spacing: -0.01em; }
.mhero-sub { font-size: 14.5px; line-height: 1.55; color: var(--text-secondary); max-width: 460px; margin: 0 0 16px; }
.mhero-search { max-width: 460px; box-shadow: var(--shadow-sm); }
.mhero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.mhero-actions .btn { gap: 8px; }
.mhero-badges { display: flex; flex-wrap: wrap; gap: 12px 18px; }
.mhero-badges-compact { gap: 8px 16px; }
.mhero-badge { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.mhero-badge i, .mhero-badge svg { width: 16px; height: 16px; color: var(--color-primary); flex-shrink: 0; }
.mhero-media {
  position: relative; border-radius: var(--radius-lg); min-height: 260px;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: var(--shadow-lg);
}
.mhero-media::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.16) 2px, transparent 2px);
  background-size: 30px 30px; opacity: 0.6;
}
.mhero-media.has-media::before { display: none; }
.mhero-media-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.mhero-media.has-media .mhero-media-accent {
  z-index: 1; background: rgba(0,0,0,0.35); padding: 6px 10px; border-radius: 10px; backdrop-filter: blur(2px);
}
.mhero-media-accent {
  position: absolute; top: 22px; left: 24px; color: #fff; font-family: cursive, 'Segoe Script', sans-serif;
  font-size: 17px; font-weight: 600; line-height: 1.3; opacity: 0.92; transform: rotate(-4deg);
}
.mhero-media-badge {
  width: 130px; height: 130px; border-radius: 50%; background: rgba(255,255,255,0.18);
  border: 2px solid rgba(255,255,255,0.5); display: flex; align-items: center; justify-content: center;
  color: #fff; box-shadow: var(--shadow-lg);
}
@media (max-width: 880px) {
  .mhero-inner { grid-template-columns: 1fr; gap: 28px; }
  .mhero-media { min-height: 220px; order: -1; }
  .mhero-title { font-size: 32px; }
}
@media (max-width: 480px) {
  .mhero { padding: 32px 0 40px; }
  .mhero-title { font-size: 27px; }
  .mhero-actions .btn { flex: 1 1 auto; }
}

/* ---------- Full-bleed hero (image + overlaid text) ---------- */
.mhero-full {
  position: relative; overflow: hidden; min-height: 460px;
  display: flex; align-items: flex-end;
  border-radius: 0 48px 48px 48px;
  margin: 0 16px; box-shadow: var(--shadow-lg);
  background: var(--color-primary-dark);
}
.mhero-full-media { position: absolute; inset: 0; z-index: 0; }
.mhero-full-img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.mhero-full-fallback {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}
.mhero-full-fallback::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.16) 2px, transparent 2px);
  background-size: 30px 30px; opacity: 0.6;
}
.mhero-full-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(10,10,12,0.95) 0%, rgba(10,10,12,0.75) 30%, rgba(10,10,12,0.35) 60%, rgba(10,10,12,0.05) 100%);
}
@media (min-width: 761px) {
  .mhero-full-scrim {
    background: linear-gradient(90deg, rgba(10,10,12,0.95) 0%, rgba(10,10,12,0.80) 35%, rgba(10,10,12,0.25) 75%, rgba(10,10,12,0.05) 100%);
  }
}
.mhero-full-content { position: relative; z-index: 1; padding: 32px 24px; width: 100%; }
.mhero-pill {
  display: inline-flex; align-items: center; gap: 7px; background: var(--color-primary); color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  padding: 8px 16px; border-radius: 999px; box-shadow: var(--shadow-md); margin-bottom: 16px;
}
.mhero-pill i, .mhero-pill svg { width: 13px; height: 13px; }
.mhero-title-lg {
  position: relative; margin: 0 0 16px; color: #fff;
  font-size: clamp(34px, 8vw, 64px); font-weight: 900; line-height: 1.02; letter-spacing: -0.01em;
}
.mhero-underline { display: block; margin-top: 2px; width: 130px; height: 14px; }
.mhero-sub-lg { max-width: 480px; color: rgba(255,255,255,0.88); font-size: 15.5px; line-height: 1.55; margin: 0; }
@media (min-width: 761px) { .mhero-sub-lg { font-size: 18px; } }

.mhero-below { position: relative; margin-top: -28px; z-index: 2; }
.mhero-search-floating {
  background: #fff; box-shadow: var(--shadow-lg); min-height: 56px; padding: 12px 18px; margin-bottom: 16px;
}
.mhero-search-floating input { font-size: 15px; }
.mhero-search-floating:focus-within { box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb),0.18), var(--shadow-lg); }
.mhero-search-mic {
  border: none; background: none; color: var(--color-primary); cursor: pointer; padding: 4px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background 0.2s ease;
}
.mhero-search-mic:hover { background: var(--bg-surface-2); }
.mhero-search-mic.listening { color: #fff; background: var(--color-primary); animation: mpulse 1.2s ease-out infinite; }

.mbenefits-row {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px;
  background: var(--bg-surface); border-radius: var(--radius-lg); padding: 14px 18px; box-shadow: var(--shadow-sm);
}
.mbenefit-item { display: flex; align-items: center; gap: 10px; }
.mbenefit-icon {
  width: 38px; height: 38px; border-radius: 50%; background: rgba(var(--color-primary-rgb),0.12); color: var(--color-primary);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.mbenefit-icon i, .mbenefit-icon svg { width: 18px; height: 18px; }
.mbenefit-item div { display: flex; flex-direction: column; line-height: 1.25; }
.mbenefit-item strong { font-size: 12.5px; color: var(--text-primary); }
.mbenefit-item span { font-size: 11px; color: var(--text-secondary); }
.mbenefit-divider { width: 1px; height: 30px; background: var(--border-color); }
@media (max-width: 560px) {
  .mbenefits-row { justify-content: space-between; gap: 8px; padding: 12px; }
  .mbenefit-divider { display: none; }
  .mbenefit-item strong { font-size: 11.5px; }
  .mbenefit-item span { display: none; }
}

.btn-pill { border-radius: 999px; }

/* ---------- About ---------- */
.mabout { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 24px; align-items: center; }
.mabout-media {
  border-radius: var(--radius-lg); min-height: 160px; background: var(--color-charcoal); overflow: hidden;
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md);
}
.mabout-media-badge {
  width: 96px; height: 96px; border-radius: 50%; background: rgba(var(--color-primary-rgb),0.18); color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
}
.mabout-accent { font-family: cursive, 'Segoe Script', sans-serif; font-size: 18px; font-weight: 600; color: var(--color-primary); line-height: 1.35; margin-top: 14px; }
@media (max-width: 780px) { .mabout { grid-template-columns: 1fr; gap: 24px; } .mabout-media { min-height: 160px; order: -1; } }

/* ---------- Features ("More Than Just Food") ---------- */
.mfeature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-top: 8px; }
.mfeature-card { padding: 16px 14px; }
.mfeature-title { font-size: 15.5px; font-weight: 700; margin: 14px 0 6px; color: var(--text-primary); }
.mfeature-desc { font-size: 13px; line-height: 1.55; color: var(--text-secondary); margin: 0; }

/* ---------- How It Works (dark) ---------- */
.mhow { background: var(--color-charcoal); color: #fff; }
.mhow-title, .mhow-sub { color: #fff; }
.mhow-sub { color: rgba(255,255,255,0.7); }
.mhow-steps { display: flex; align-items: flex-start; justify-content: center; gap: 14px; margin-top: 20px; flex-wrap: wrap; }
.mhow-step { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 220px; }
.mhow-step h4 { font-size: 14.5px; font-weight: 700; margin: 16px 0 6px; color: #fff; }
.mhow-step p { font-size: 12.5px; line-height: 1.55; color: rgba(255,255,255,0.65); margin: 0; }
.mhow-step-badge-wrap { position: relative; }
.mhow-step-badge {
  display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--color-primary); color: #fff; font-weight: 700; font-size: 16px;
}
.mhow-step-icon {
  position: absolute; bottom: -8px; right: -8px; width: 30px; height: 30px; border-radius: 50%;
  background: #fff; color: var(--color-charcoal); display: flex; align-items: center; justify-content: center;
  border: 3px solid var(--color-charcoal);
}
.mhow-step-icon i, .mhow-step-icon svg { width: 14px; height: 14px; }
.mhow-arrow { color: var(--color-primary); align-self: center; margin-top: 20px; }
@media (max-width: 700px) { .mhow-arrow { display: none; } }

/* ---------- Hungry Between Lectures ---------- */
.mlectures { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 24px; align-items: center; }
.mlectures-checklist { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }
.mlectures-checklist li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
.mlectures-checklist i, .mlectures-checklist svg { width: 16px; height: 16px; color: var(--color-success); flex-shrink: 0; }
.mlectures-media {
  border-radius: var(--radius-lg); min-height: 160px; background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary)); overflow: hidden;
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md);
}
.mlectures-media-badge {
  width: 96px; height: 96px; border-radius: 50%; background: rgba(255,255,255,0.25); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
@media (max-width: 780px) {
  .mlectures { grid-template-columns: 1fr; gap: 24px; }
  .mlectures-media { min-height: 160px; order: -1; }
  .mlectures-checklist { grid-template-columns: 1fr; }
}

/* ---------- Discover Food Shops (real store data) ---------- */
.mshop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 14px; }
.mshop-card { background: var(--bg-surface); border-radius: var(--radius-md); overflow: hidden; cursor: pointer; box-shadow: var(--shadow-sm); transition: transform var(--transition-fast); }
.mshop-card:hover { transform: translateY(-2px); }
.mshop-card-img { aspect-ratio: 4/3; }
.mshop-card-img-fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); }
.mshop-card-status { position: absolute; top: 8px; left: 8px; font-size: 9.5px; }
.mshop-card-body { padding: 10px 12px 12px; }
.mshop-card-name { font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mshop-card-fulfil { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-secondary); margin-top: 4px; }

/* ---------- Why Choose ClickFood ---------- */
.mwhy-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }
/* Compact single-row trust strip — replaces the old big "Why Choose"
   section with icon+description cards; just small icon+label pairs. */
.mwhy-item { display: flex; align-items: flex-start; gap: 12px; }
.mwhy-icon {
  width: 44px; height: 44px; border-radius: 50%; background: rgba(var(--color-primary-rgb),0.14); color: var(--color-primary);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.mwhy-item strong { font-size: 13.5px; color: var(--text-primary); }
.mwhy-item p { font-size: 12.5px; color: var(--text-secondary); margin: 3px 0 0; line-height: 1.5; }

/* ---------- Final CTA (dark) ---------- */
.mcta { background: var(--color-charcoal); color: #fff; }
.mcta-compact { padding: 22px 0; }
.mcta-compact .mcta-accent { font-size: 19px; }
.mcta-inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.mcta-accent { font-family: cursive, 'Segoe Script', sans-serif; font-size: 24px; font-weight: 600; color: #fff; line-height: 1.3; margin: 0; }
.mcta-right { text-align: right; }
.mcta-sub { font-size: 14px; color: rgba(255,255,255,0.75); margin: 0 0 14px; }
.mcta-right .mhero-actions { justify-content: flex-end; margin-bottom: 0; }
@media (max-width: 700px) {
  .mcta-inner { flex-direction: column; text-align: center; }
  .mcta-right { text-align: center; }
  .mcta-right .mhero-actions { justify-content: center; }
}

/* ============================================================
   "Modern and live" pass — scroll-reveal motion, a real live-data
   stats strip, ambient background motion, and stronger hover/press
   feedback. No new colors, no fabricated numbers (mstats' values come
   from real store/menu data — see liveStats() in home.js).
   ============================================================ */

/* ---------- Scroll reveal (initMarketingReveal() in home.js) ---------- */
.mreveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); }
.mreveal-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .mreveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Hero: plays once on load, ambient floating glow behind it ---------- */
.mhero { position: relative; overflow: hidden; animation: mheroIn 0.8s cubic-bezier(0.16,1,0.3,1) both; }
@keyframes mheroIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.mhero::before {
  content: ''; position: absolute; top: -120px; right: -120px; width: 360px; height: 360px; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--color-primary-rgb),0.16), transparent 70%);
  animation: mfloat 9s ease-in-out infinite; pointer-events: none; z-index: 0;
}
.mhero-inner { position: relative; z-index: 1; }
@keyframes mfloat { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-18px, 22px); } }
.mhero-media { animation: mfloat 7s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .mhero, .mhero::before, .mhero-media { animation: none; }
}

/* ---------- Live stats strip ---------- */
.mstats {
  position: relative; overflow: hidden; background: var(--color-charcoal); padding: 20px 0;
  margin: 8px 16px; border-radius: 24px; box-shadow: var(--shadow-md);
}
.mstats::before, .mstats::after {
  content: ''; position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(var(--color-primary-rgb),0.22), transparent 70%);
}
.mstats::before { width: 220px; height: 220px; top: -110px; left: -60px; }
.mstats::after { width: 180px; height: 180px; bottom: -100px; right: -40px; }
.mstats-row { position: relative; z-index: 1; }
.mstats-row { display: flex; justify-content: center; gap: 48px; flex-wrap: wrap; text-align: center; }
.mstat { display: flex; flex-direction: column; gap: 4px; }
.mstat-value { font-size: 30px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.mstat-label { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.65); text-transform: uppercase; letter-spacing: 0.04em; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-success); box-shadow: 0 0 0 0 rgba(34,197,94,0.6); animation: mpulse 1.8s ease-out infinite; flex-shrink: 0; }
@keyframes mpulse {
  0% { box-shadow: 0 0 0 0 rgba(34,197,94,0.55); }
  70% { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }
@media (max-width: 480px) { .mstats-row { gap: 28px; } .mstat-value { font-size: 24px; } }

/* ---------- Stronger hover/press feedback (modern micro-interactions) ---------- */
.mfeature-card, .mshop-card, .mwhy-item { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.mfeature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.mwhy-item:hover .mwhy-icon { transform: scale(1.08); }
.mwhy-icon { transition: transform 0.25s ease; }
.mshop-card:hover { box-shadow: var(--shadow-md); }
.mshop-card-img img { transition: transform 0.4s ease; }
.mshop-card:hover .mshop-card-img img { transform: scale(1.06); }
.mnav-links a { position: relative; transition: color 0.2s ease; }
.mnav-links a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: -3px; height: 2px; background: var(--color-primary);
  transition: right 0.25s ease;
}
.mnav-links a:hover::after { right: 0; }
.mhero-actions .btn, .mcta .btn { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.mhero-actions .btn:hover, .mcta .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.mhow-step-badge { transition: transform 0.25s ease; }
.mhow-step:hover .mhow-step-badge { transform: scale(1.08); }

/* ---------- "Start Order" guided flow (guest, home page only) ---------- */
.guest-order-option {
  width: 100%; text-align: left; padding: 16px; margin-bottom: 10px; display: flex; align-items: center; gap: 12px;
  border: 1.5px solid var(--border-color); background: var(--bg-surface); cursor: pointer; transition: border-color 0.2s ease, transform 0.2s ease;
}
.guest-order-option:last-child { margin-bottom: 0; }
.guest-order-option:hover { border-color: var(--color-primary); transform: translateY(-1px); }
.guest-order-banner {
  display: inline-flex; align-items: center; gap: 8px; background: var(--bg-surface); border: 1px solid var(--border-color);
  border-radius: var(--radius-pill); padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--text-primary);
  margin-left: auto; margin-right: auto;
}
.guest-order-banner i, .guest-order-banner svg { width: 15px; height: 15px; color: var(--color-primary); }
.guest-order-banner button {
  border: none; background: none; color: var(--color-primary); font-weight: 700; font-size: 12.5px; cursor: pointer;
  padding: 0; margin-left: 4px; text-decoration: underline;
}

/* ---- Phase 1: shop status, verified, opening hours ---- */
.shop-verified { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--color-success); margin: 2px 0 6px; }
.shop-verified svg { width: 14px; height: 14px; }
.shop-verified-icon { width: 14px; height: 14px; color: var(--color-success); margin-left: 4px; vertical-align: -2px; flex-shrink: 0; }
.shop-status-badge { font-size: 11px; }
.shop-info-desc { font-size: 13px; color: var(--text-secondary); margin: 8px 0 0; line-height: 1.5; }
.shop-status-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; margin-bottom: 16px; border-radius: var(--radius-md); background: rgba(255,193,7,0.12); border: 1px solid rgba(255,193,7,0.35); color: #8a6400; }
:root[data-theme="dark"] .shop-status-note { color: #FFC107; }
.shop-status-note svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.shop-hours-table { width: 100%; max-width: 420px; border-collapse: collapse; font-size: 14px; }
.shop-hours-table td { padding: 7px 0; border-bottom: 1px solid var(--border-color); }
.shop-hours-table td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.shop-hours-table tr.is-today td { font-weight: 700; color: var(--text-primary); }
.shop-about-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: var(--text-secondary); }
.shop-about-list li { display: flex; gap: 10px; align-items: flex-start; }
.shop-about-list svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--color-primary); }

/* Open / Busy / Closed tag sitting on a shop photo: a small cream pill with
   a coloured dot, readable on any photo. */
.store-mini-status, .store-card-status, .mshop-card-status {
  display: inline-flex; align-items: center; gap: 5px; z-index: 2;
  background: var(--bg-surface) !important; color: var(--text-primary) !important; border: none !important;
  text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 11px; padding: 3px 9px 3px 7px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
}
.store-mini-status::before, .store-card-status::before, .mshop-card-status::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--dot, var(--color-error));
}
.badge-success { --dot: var(--color-success); }
.badge-yellow { --dot: var(--color-yellow); }
.badge-gray { --dot: var(--text-secondary); }

/* Shop logo beside the name on shop cards */
.shop-card-title { display: flex; align-items: center; gap: 7px; min-width: 0; }
.shop-card-title > div { min-width: 0; }
.shop-card-logo { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--bg-surface); border: 1px solid var(--border-color); }
.shop-card-logo-empty { display: flex; align-items: center; justify-content: center; color: var(--text-secondary); }
.shop-card-logo-empty svg { width: 13px; height: 13px; }