/* shell.css — App shell: full-screen iOS layout fix, section sizing, footer.
   These are the "definitive overrides" and must stay linked LAST among the
   page stylesheets in <head> (only the component sheets that JS used to
   inject at runtime come after them).
   Moved out of the inline \3c style> in index.html (was lines 1852–2052). */

/* ════════════════════════════════════════════
   DEFINITIVE OVERRIDES — loaded last, always win
   ════════════════════════════════════════════ */

/* ── NUCLEAR LAYOUT FIX — forces true physical screen bottom on iOS ──────
   Every container in the chain must reach inset:0 / full height.
   Only the footer respects safe-area-inset-bottom (it's the nav bar).
   Everything else: zero bottom clearance, content hits the glass. */

/* html only. Setting a height on BODY here is what left the bottom band
   on real iPhones, and it did it with !important — which is why every
   attempt to fix this in styles.css had no effect at all.

   body is position:fixed. For a fixed element iOS resolves a PERCENTAGE
   height against the small viewport, while inset:0 resolves against the
   large one. So `height/max-height: 100%` capped the body at the smaller
   of the two and anchored it at the top, leaving (large − small) of bare
   html showing along the bottom — which is the home-indicator band.

   Chrome's device emulation never reproduced it because there the two
   viewports are the same number, and env(safe-area-inset-bottom) is 0.
   The bug needs a real notch to appear, which is exactly what was
   observed.

   This also contradicts the rule written 420 lines above this block:
   "body is already position:fixed; inset:0 in styles.css ... DO NOT add
   height/min-height here; it fights inset:0". That note was right. */
html {
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
}

body {
  position: fixed !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.main {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Every section absolutely fills .main — top to bottom, edge to edge */
section,
#home, #searchResults, #plastay, #profile, #settings,
#category, #subcategory, #productPage, #messages,
#makayTable, #brandPage, #brandSignup {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  /* No bottom padding — content hits the true screen bottom */
  padding-bottom: 0 !important;
  box-sizing: border-box !important;
}

/* Scrollable sections fill and scroll internally */
#home, #searchResults, #profile, #makayTable,
#brandPage, #brandSignup, #subcategory {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Category is a flex container — panels fill it */
#category {
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  background: #fff !important;
}

#category .category-container {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  display: flex !important;
  overflow: hidden !important;
  height: 100% !important;
}

#category .category-left {
  flex: 0 0 32% !important;
  width: 32% !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  /* Stretch background to bottom — no gray gap */
  align-self: stretch !important;
  padding-bottom: 0 !important;
}

#category .category-right {
  flex: 1 1 0% !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  align-self: stretch !important;
  padding-bottom: 0 !important;
}

/* Footer — home-indicator aware, zero-gap on ALL devices */
.footer {
  align-items: flex-start !important;
  padding-top: 0.3rem !important;
  padding-left: env(safe-area-inset-left, 0px) !important;
  padding-right: env(safe-area-inset-right, 0px) !important;
  /* +1px cancels the -1px margin-bottom bleed; safe-area handles notched devices */
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1px) !important;
  margin-bottom: -1px !important;
  bottom: 0 !important;
  /* Force GPU composite layer — eliminates subpixel gap at bottom on iOS */
  -webkit-transform: translateZ(0) !important;
  transform: translateZ(0) !important;
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
}
/* Bleed footer background below the viewport edge — kills any browser-rendered gap */
.footer::after {
  content: '' !important;
  position: absolute !important;
  bottom: -50px !important;
  left: 0 !important; right: 0 !important;
  height: 50px !important;
  background: rgba(255,255,255,0.95) !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

/* ── Sections fill to the true bottom of the screen ── */
/* The nav bar floats on top — content scrolls underneath it (Instagram-style).
   Only env(safe-area-inset-bottom) is respected where strictly needed for
   inner scroll containers that aren't covered by the fixed footer. */

/* Home */
#home {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding-bottom: 0 !important;
}

/* Profile / Makay Table / Search Results */
#profile, #makayTable, #searchResults {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding-bottom: 0 !important;
}

/* ── Category — fills viewport fully to the bottom ── */
#category {
  padding: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  top: 0 !important;
  height: 100% !important;
  padding-top: calc(56px + env(safe-area-inset-top, 0px)) !important;
  box-sizing: border-box !important;
  background: #fff !important;
}

#category .category-container {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: stretch;
}

#category .category-left,
#category .category-right {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding-bottom: 0 !important;
  align-self: stretch !important;
  min-height: 100% !important;
}

/* ── Subcategory ── */
#subcategory {
  padding: 0 !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  top: 0 !important;
  height: 100% !important;
  padding-top: calc(56px + env(safe-area-inset-top, 0px)) !important;
  padding-bottom: 0 !important;
  box-sizing: border-box !important;
  -webkit-overflow-scrolling: touch !important;
}