/**
 * sbo-app-shell.css — mobile/tablet app-like shell for SmartBuy pages only
 * (home, search results, store pages, category hubs).
 *
 * Adds a slim fixed top bar (logo + hamburger) and a fixed bottom
 * navigation bar (Home / Search / Share / Saved / Menu), independent
 * of REHub's desktop header_seven markup, so this never has to fight
 * REHub's hideontablet / sticky-nav / off-canvas CSS.
 *
 * Desktop (>1024px): this entire shell is hidden; REHub's normal
 * header continues to render logo + primary menu as before.
 *
 * Load this AFTER sbo-base.css.
 */

.sbo-app-topbar,
.sbo-app-bottomnav,
.sbo-app-menu-sheet-backdrop {
  display: none;
}

@media (max-width: 1024px) {

  /* ===== Top bar ===== */
  .sbo-app-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    padding: 0 14px;
    background: var(--sb-surface, #FFFFFF);
    border-bottom: 1px solid var(--sb-line, #E2DDD3);
    z-index: 500;
  }

  .sbo-app-topbar .sbo-app-logo {
    display: flex;
    align-items: center;
    height: 32px;
  }

  .sbo-app-topbar .sbo-app-logo img {
    height: 32px;
    width: auto;
    display: block;
  }

  .sbo-app-topbar .sbo-app-hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    color: var(--sb-ink, #151A2D);
    cursor: pointer;
  }

  /* Push page content below the fixed top bar */
  body.sbo-app-shell-active #sb-app {
    padding-top: 56px;
  }

  /* ===== Category chip strip (horizontal scroll, below top bar) ===== */
  .sbo-app-category-strip {
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    z-index: 490;
    background: var(--sb-surface, #FFFFFF);
    border-bottom: 1px solid var(--sb-line, #E2DDD3);
    padding: 8px 0;
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .sbo-app-category-strip::-webkit-scrollbar {
    display: none;
  }

  .sbo-app-category-strip .sbo-app-cat-chip {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 7px 14px;
    margin: 0 6px;
    border-radius: 999px;
    border: 1px solid var(--sb-line, #E2DDD3);
    background: var(--sb-surface-muted, #EFECE6);
    color: var(--sb-ink, #151A2D);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
  }

  .sbo-app-category-strip .sbo-app-cat-chip:first-child {
    margin-left: 14px;
  }

  .sbo-app-category-strip .sbo-app-cat-chip:last-child {
    margin-right: 14px;
  }

  .sbo-app-category-strip .sbo-app-cat-chip.sbo-active {
    background: var(--sb-primary, #2A3BA0);
    border-color: var(--sb-primary, #2A3BA0);
    color: #FFFFFF;
  }

  /* When the category strip is present, push content down further */
  body.sbo-app-shell-active.sbo-has-category-strip #sb-app {
    padding-top: 100px;
  }

  /* ===== Bottom nav ===== */
  .sbo-app-bottomnav {
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: var(--sb-surface, #FFFFFF);
    border-top: 1px solid var(--sb-line, #E2DDD3);
    box-shadow: 0 -4px 16px rgba(0,0,0,0.06);
    z-index: 500;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  .sbo-app-bottomnav .sbo-app-navitem {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: none;
    background: transparent;
    color: var(--sb-muted, #5B6472);
    font-size: 10px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    padding: 6px 0;
  }

  .sbo-app-bottomnav .sbo-app-navitem svg {
    width: 22px;
    height: 22px;
  }

  .sbo-app-bottomnav .sbo-app-navitem.sbo-active {
    color: var(--sb-primary, #2A3BA0);
  }

  /* Push page content above the fixed bottom bar */
  body.sbo-app-shell-active #sb-app {
    padding-bottom: 68px;
  }

  /* ===== Slide-up menu sheet (opened from bottom nav "Menu") ===== */
  .sbo-app-menu-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 600;
  }

  .sbo-app-menu-sheet-backdrop.sbo-open {
    display: block;
  }

  .sbo-app-menu-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 75vh;
    overflow-y: auto;
    background: var(--sb-surface, #FFFFFF);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 24px rgba(0,0,0,0.18);
    z-index: 601;
    padding: 8px 0 max(16px, env(safe-area-inset-bottom, 16px));
  }

  .sbo-app-menu-sheet .sbo-app-menu-handle {
    width: 40px;
    height: 4px;
    border-radius: 4px;
    background: var(--sb-line, #E2DDD3);
    margin: 10px auto 6px;
  }

  .sbo-app-menu-sheet ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .sbo-app-menu-sheet li a {
    display: block;
    padding: 14px 20px;
    font-size: 15px;
    font-weight: 600;
    color: var(--sb-ink, #151A2D);
    text-decoration: none;
    border-bottom: 1px solid var(--sb-line, #E2DDD3);
  }

  .sbo-app-menu-sheet li:last-child a {
    border-bottom: none;
  }

  .sbo-app-menu-sheet .sbo-app-menu-section-label {
    padding: 12px 20px 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sb-muted, #5B6472);
  }
}