/* ==========================================================================
   SCRIPTIFYZONE - Mobile App Shell (max-width: 860px)
   ========================================================================== */

@media (min-width: 861px) {
  .mobile-topbar, .mobile-bottomnav, .mobile-search-sheet { display: none !important; }
}

@media (max-width: 860px) {

  /* ---------- BASE ---------- */
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .container { padding: 0 14px; }

  /* ---------- HEADER (app top bar) ---------- */
  .site-header { display: none; }
  .mobile-topbar {
    position: sticky; top: 0; z-index: 95;
    display: flex; align-items: center; justify-content: space-between;
    height: 56px; padding: 0 14px;
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
  }
  .mobile-topbar .brand img { width: 30px; height: 30px; border-radius: 8px; }
  .mobile-top-actions { display: flex; gap: 8px; }
  .mobile-topbar .icon-btn { width: 38px; height: 38px; }
  #themeToggleMobile .sun, [data-theme="dark"] #themeToggleMobile .moon { display: none; }
  #themeToggleMobile .moon, [data-theme="dark"] #themeToggleMobile .sun { display: block; }

  /* ---------- MOBILE SEARCH SHEET ---------- */
  .mobile-search-sheet {
    position: fixed; top: 58px; left: 12px; right: 12px; z-index: 210;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 14px; box-shadow: var(--shadow-lg); padding: 10px;
    opacity: 0; visibility: hidden; transform: translateY(-12px);
    transition: .22s ease;
  }
  .mobile-search-sheet.open { opacity: 1; visibility: visible; transform: translateY(0); }
  .mobile-search-form { display: flex; align-items: center; gap: 9px; }
  .mobile-search-form svg { width: 18px; height: 18px; color: var(--text-muted); }
  .mobile-search-form input {
    flex: 1; border: none; background: none; outline: none;
    font-size: 14px; color: var(--text); font-family: inherit; padding: 8px 0;
  }

  /* ---------- BOTTOM NAV ---------- */
  .mobile-bottomnav {
    position: fixed; left: 10px; right: 10px; bottom: calc(8px + env(safe-area-inset-bottom));
    z-index: 100; display: flex; justify-content: space-around; align-items: stretch;
    background: var(--surface); border: 1px solid var(--border-2);
    border-radius: 20px; box-shadow: 0 12px 34px rgba(8, 24, 46, .18);
  }
  .mbn-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 10px 4px 8px; font-size: 10px; font-weight: 700; color: var(--text-muted);
    text-decoration: none; letter-spacing: .3px;
  }
  .mbn-item svg { width: 21px; height: 21px; }
  .mbn-item.on { color: var(--cyan-2); }
  .mbn-item.on svg { filter: drop-shadow(0 3px 6px rgba(47, 206, 198, .35)); }
  .mbn-icon-wrap { position: relative; display: grid; }
  .mbn-badge {
    position: absolute; top: -6px; right: -9px; min-width: 15px; height: 15px;
    background: var(--orange); color: #2c2308; font-size: 9px; font-weight: 800;
    border-radius: 20px; display: grid; place-items: center; padding: 0 3px;
  }

  /* ---------- HERO (compact) ---------- */
  .announce-bar { font-size: 11px; letter-spacing: 0; padding: 7px 12px; }
  .hero .container { padding-top: 40px; padding-bottom: 52px; }
  .hero-grid { gap: 34px; }
  .hero-eyebrow { font-size: 11px; padding: 6px 12px; margin-bottom: 16px; }
  .hero h1 { font-size: 32px; letter-spacing: -.5px; }
  .hero-sub, .hero > .container > .hero-grid .hero-sub { font-size: 15px; }
  .hero-cta { margin: 24px 0 30px; }
  .hero-cta .btn { flex: 1; min-width: 148px; }
  .hero-stats { flex-wrap: wrap; gap: 10px 0; }
  .stat { flex: 1 1 33%; padding: 6px 10px; }
  .stat + .stat { border-left: none; }
  .stat b { font-size: 21px; }
  .hero-visual { max-width: 100%; }
  .hero-card { padding: 14px; }
  .chip-1 { top: -14px; right: 2%; }
  .chip-2 { bottom: 14px; left: -6px; }

  /* ---------- SECTIONS ---------- */
  .section { padding: 46px 0; }
  .section-title { font-size: 24px; letter-spacing: -.4px; }
  .section-head { margin-bottom: 26px; }
  .section-tag { font-size: 10.5px; letter-spacing: 1.2px; }

  /* ---------- GRIDS ---------- */
  .cats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .cat-card { padding: 16px 10px; }
  .cat-ic { width: 42px; height: 42px; }
  .products-grid, .scroll-row { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .prod-body { padding: 12px; }
  .prod-title { font-size: 13.5px; }
  .prod-quickview { display: none; }
  .features-grid { grid-template-columns: 1fr; gap: 12px; }
  .feature { padding: 20px 18px; }
  .testi-grid { grid-template-columns: 1fr; gap: 12px; }
  .testi { padding: 20px; }
  .cta-banner { padding: 46px 22px; }
  .cta-banner h2 { font-size: 26px; }

  /* ---------- PAGE HERO ---------- */
  .page-hero { padding: 28px 0 22px; }
  .page-hero h1 { font-size: 25px; }
  .crumbs { font-size: 11.5px; margin-bottom: 10px; }

  /* ---------- PRODUCT PAGE ---------- */
  .product-page { padding: 16px 0 60px; }
  .prod-detail { gap: 26px; margin-bottom: 30px; }
  .prod-info h1 { font-size: 23px; }
  .prod-price-box .price-now { font-size: 25px; }
  .trust-row { grid-template-columns: 1fr; gap: 8px; }
  .tab-btn { padding: 11px 13px; font-size: 13.5px; }
  .gallery-main { aspect-ratio: 4/3; }

  /* ---------- SHOP ---------- */
  .shop-layout { padding: 22px 0 60px; gap: 22px; }
  .filter-box { display: none; }
  .shop-toolbar { margin-bottom: 14px; }
  .search-hits { font-size: 12px; }
  .sort-form select { width: 100%; }

  /* ---------- CART ---------- */
  .cart-layout { padding: 24px 0 60px; gap: 24px; }
  .cart-item { padding: 10px; gap: 11px; }
  .cart-item > a:first-child { width: 78px; height: 60px; }
  .ci-price { font-size: 14px; }

  /* ---------- CHECKOUT ---------- */
  .checkout-grid { padding: 24px 0 60px; gap: 24px; }
  .gateway-option { padding: 13px 14px; }
  .btn-lg { padding: 14px 20px; }

  /* ---------- ACCOUNT ---------- */
  .account-layout { padding: 24px 0 60px; gap: 22px; }
  .acct-me { padding: 13px; }
  .acct-nav { display: flex; overflow-x: auto; gap: 4px; padding: 6px; }
  .acct-nav a { white-space: nowrap; padding: 10px 13px; font-size: 12.5px; }
  .acct-nav a svg { display: none; }
  .dash-cards { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .dash-card { padding: 14px; }
  .dash-card b { font-size: 18px; }
  .dl-item { gap: 11px; }
  .dl-btn { padding: 8px 11px; font-size: 11.5px; }

  /* ---------- AUTH ---------- */
  .auth-wrap { padding: 40px 16px 90px; }
  .auth-card { padding: 28px 22px; }

  /* ---------- SUPPORT / LEGAL ---------- */
  .support-grid { grid-template-columns: 1fr; gap: 22px; padding: 24px 0 60px; }
  .legal { padding: 26px 0 60px; }

  /* ---------- FOOTER ---------- */
  .site-footer { margin-top: 20px; }
  .footer-grid { grid-template-columns: 1fr; gap: 26px; padding: 40px 0 28px; }
  .footer-bottom .container { flex-direction: column; gap: 6px; text-align: center; }

  /* ---------- TOASTS (above bottom nav) ---------- */
  .toast-wrap { top: auto; bottom: calc(92px + env(safe-area-inset-bottom)); right: 14px; left: 14px; max-width: none; }

  /* ---------- BACK TO TOP FAB ---------- */
  .to-top { right: 14px; bottom: calc(92px + env(safe-area-inset-bottom)); }

  /* ---------- PAYMENT STATUS ---------- */
  .payment-status-wrap { padding: 30px 0 80px; }
}