/* ==========================================================================
   SCRIPTIFYZONE - Mobile App Experience (max-width: 900px)
   Native-app feel: drawer menu, floating bottom nav, sticky buy bar,
   filter sheets, 16px form controls (no iOS zoom), touch-first sizing.
   ========================================================================== */

@media (min-width: 901px) {
  .mobile-topbar, .mobile-bottomnav, .mobile-search-sheet,
  .mobile-drawer, .drawer-backdrop, .mobile-buybar,
  .btn-filter-mobile { display: none !important; }
}

@media (max-width: 900px) {

  /* ---------- BASE / TOUCH ---------- */
  body { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
  body.nav-open, body.filter-open { overflow: hidden; }
  .container { padding: 0 14px; }
  html { -webkit-text-size-adjust: 100%; }
  a, button, select, input, textarea { touch-action: manipulation; }
  * { -webkit-tap-highlight-color: transparent; }
  button, a { -webkit-touch-callout: none; }

  /* no sticky-hover on touch devices */
  @media (hover: none) {
    .prod-card:hover, .cat-card:hover, .feature:hover, .testi:hover, .banner-card:hover {
      transform: none; box-shadow: var(--shadow-sm);
    }
    .btn:hover { transform: none; }
  }

  /* ---------- TOP BAR (app-style) ---------- */
  .site-header { display: none; }
  .mobile-topbar {
    position: sticky; top: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    height: 56px; padding: 0 12px;
    background: color-mix(in srgb, var(--surface) 84%, transparent);
    backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
    border-bottom: 1px solid var(--border);
  }
  .mobile-menu-btn { border: none; background: var(--surface-3); }
  .mobile-topbar .brand { gap: 8px; }
  .mobile-topbar .brand img { height: 30px; width: auto; }
  .mobile-topbar .brand-name { font-size: 15.5px; }
  .mobile-top-actions { display: flex; gap: 7px; }
  .mobile-topbar .icon-btn { width: 40px; height: 40px; border-radius: 12px; }
  .mobile-avatar {
    border: none !important;
    background: linear-gradient(135deg, var(--cyan), var(--navy-2)) !important;
    color: #fff !important; font-weight: 800; font-size: 15px;
  }
  .mobile-top-actions > .btn { padding: 11px 13px; font-size: 12.5px; }
  @media (max-width: 380px) {
    .mobile-topbar .brand-name { display: none; }
    .mobile-top-actions .icon-btn { width: 36px; height: 36px; }
  }
  #themeToggleMobile .sun, [data-theme="dark"] #themeToggleMobile .moon { display: none; }
  #themeToggleMobile .moon, [data-theme="dark"] #themeToggleMobile .sun { display: block; }

  /* ---------- NAV DRAWER ---------- */
  .drawer-backdrop {
    position: fixed; inset: 0; z-index: 190;
    background: rgba(9, 17, 32, .55); backdrop-filter: blur(3px);
    opacity: 0; transition: opacity .25s ease;
  }
  .drawer-backdrop.show { opacity: 1; }
  .mobile-drawer {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 200;
    width: min(84vw, 340px); display: flex; flex-direction: column;
    background: var(--surface); box-shadow: 0 0 70px rgba(0,0,0,.35);
    transform: translateX(-105%); transition: transform .32s cubic-bezier(.2,.8,.3,1);
    border-radius: 0 22px 22px 0;
  }
  body.nav-open .mobile-drawer { transform: translateX(0); }

  .drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px 12px; border-bottom: 1px solid var(--border);
  }
  .drawer-head .icon-btn { border: none; background: var(--surface-3); }
  .drawer-user {
    display: flex; align-items: center; gap: 12px;
    margin: 14px 14px 6px; padding: 13px 15px;
    background: linear-gradient(135deg, rgba(47,206,198,.09), rgba(47,206,198,.03));
    border: 1px solid var(--border); border-radius: 15px;
  }
  .drawer-user .avatar { width: 40px; height: 40px; font-size: 15px; }
  .drawer-user b { display: block; font-size: 14px; }
  .drawer-user span { display: block; font-size: 11.5px; color: var(--text-muted); word-break: break-all; }

  .drawer-nav { flex: 1; overflow-y: auto; padding: 10px 12px; }
  .drawer-nav a {
    display: flex; align-items: center; gap: 13px;
    padding: 13px 14px; border-radius: 13px;
    font-size: 14.5px; font-weight: 700; color: var(--text); margin-bottom: 3px;
    transition: background .15s;
  }
  .drawer-nav a svg { width: 20px; height: 20px; color: var(--text-soft); }
  .drawer-nav a:hover { background: var(--surface-3); }
  .drawer-nav a.on { background: rgba(47,206,198,.1); color: var(--cyan-2); }
  .drawer-nav a.on svg { color: var(--cyan-2); }

  .drawer-foot {
    padding: 12px 14px calc(16px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border); display: grid; gap: 9px;
  }
  .drawer-theme, .drawer-logout {
    display: flex; align-items: center; gap: 11px; width: 100%;
    padding: 12px 14px; border-radius: 12px; font-size: 13.5px; font-weight: 700;
    color: var(--text); background: var(--surface-3); border: 1px solid var(--border);
    cursor: pointer; font-family: inherit;
  }
  .drawer-theme svg { width: 18px; height: 18px; color: var(--cyan-2); }
  .drawer-logout { color: var(--danger); text-decoration: none; }
  .drawer-logout svg { width: 18px; height: 18px; }
  #themeToggleDrawer .sun, [data-theme="dark"] #themeToggleDrawer .moon { display: none; }
  #themeToggleDrawer .moon, [data-theme="dark"] #themeToggleDrawer .sun { display: block; }
  .drawer-authbtns { display: flex; gap: 9px; }
  .drawer-authbtns .btn { flex: 1; padding: 12px; }

  /* ---------- SEARCH SHEET ---------- */
  .mobile-search-sheet {
    position: fixed; top: 60px; left: 10px; right: 10px; z-index: 210;
    background: var(--surface); border: 1.5px solid var(--border-2);
    border-radius: 15px; box-shadow: 0 18px 50px rgba(8,24,46,.25);
    padding: 13px 14px; opacity: 0; visibility: hidden;
    transform: translateY(-14px) scale(.98); transition: .22s ease;
  }
  .mobile-search-sheet.open { opacity: 1; visibility: visible; transform: none; }
  .mobile-search-form { display: flex; align-items: center; gap: 10px; }
  .mobile-search-form svg { width: 19px; height: 19px; color: var(--text-muted); }
  .mobile-search-form input { flex: 1; border: none; background: none; outline: none; font-size: 16px; color: var(--text); font-family: inherit; padding: 8px 0; }

  /* ---------- BOTTOM NAV (floating pill) ---------- */
  .mobile-bottomnav {
    position: fixed; left: 10px; right: 10px; bottom: calc(8px + env(safe-area-inset-bottom));
    z-index: 150; display: flex; justify-content: space-around; align-items: stretch;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5);
    border: 1px solid var(--border-2); border-radius: 22px;
    box-shadow: 0 14px 40px rgba(8,24,46,.2);
  }
  .mbn-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 9px 4px 8px; font-size: 10px; font-weight: 700; color: var(--text-muted);
    text-decoration: none; letter-spacing: .3px; border-radius: 16px;
  }
  .mbn-item svg { width: 21px; height: 21px; }
  .mbn-item.on { color: var(--cyan-2); background: rgba(47,206,198,.08); }
  .mbn-item.on svg { filter: drop-shadow(0 3px 6px rgba(47,206,198,.4)); }
  .mbn-icon-wrap { position: relative; display: grid; }
  .mbn-badge {
    position: absolute; top: -6px; right: -10px; min-width: 16px; height: 16px;
    background: var(--orange); color: #2c2308; font-size: 9.5px; font-weight: 800;
    border-radius: 20px; display: grid; place-items: center; padding: 0 4px;
    border: 2px solid var(--surface); box-shadow: 0 2px 8px rgba(227,165,69,.5);
  }

  /* ---------- HERO ---------- */
  .announce-bar { font-size: 11px; letter-spacing: 0; padding: 7px 12px; }
  .hero .container { padding-top: 34px; padding-bottom: 46px; }
  .hero-grid { gap: 30px; }
  .hero-eyebrow { font-size: 11px; padding: 6px 12px; margin-bottom: 14px; }
  .hero h1 { font-size: 30px; letter-spacing: -.5px; }
  .hero-sub, .hero > .container > .hero-grid .hero-sub { font-size: 14.5px; }
  .hero-cta { margin: 22px 0 26px; }
  .hero-cta .btn { flex: 1; min-width: 148px; padding: 13px 16px; }
  .hero-stats { flex-wrap: wrap; gap: 8px 0; padding-top: 20px; }
  .stat { flex: 1 1 33%; padding: 4px 8px; }
  .stat + .stat { border-left: none; }
  .stat b { font-size: 20px; }
  .stat span { font-size: 10.5px; }
  .hero-visual { max-width: 100%; }
  .h3d-stage { height: 300px; }
  .h3d-card { width: 206px; margin-left: -103px; padding: 9px; border-radius: 16px; }
  .h3d-card.c0 { --tx: -96px; --ty: -74px; }
  .h3d-card.c1 { --tx: 92px;  --ty: 16px; }
  .h3d-card.c2 { --tx: -18px; --ty: -6px; }
  .h3d-media { border-radius: 11px; }
  .h3d-body b { font-size: 12.5px; }
  .h3d-price { font-size: 14px; }
  .h3d-sticker { top: 14px; right: 14px; font-size: 9px; }
  .chip-c { display: none; }
  .h3d-chip-inner { padding: 7px 10px; font-size: 11.5px; }
  .chip-a { left: 0; top: 4%; }
  .chip-b { right: 0; bottom: 10%; }
  .h3d-shadow { width: 260px; margin-left: -130px; bottom: 0; }
  .h3d-orb.o1 { width: 220px; height: 220px; }
  .h3d-orb.o2 { width: 200px; height: 200px; }

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

  /* ---------- GRIDS ---------- */
  .cats-grid { grid-template-columns: repeat(3, 1fr); gap: 9px; }
  .cat-card { padding: 13px 6px; }
  .cat-ic { width: 38px; height: 38px; border-radius: 11px; margin-bottom: 8px; }
  .cat-ic svg { width: 19px; height: 19px; }
  .cat-card h3 { font-size: 12.5px; }
  .cat-card span { font-size: 10.5px; }
  .products-grid, .scroll-row { grid-template-columns: repeat(2, 1fr); gap: 11px; }
  .prod-card { border-radius: 13px; }
  .prod-body { padding: 11px 11px 12px; }
  .prod-cat { font-size: 10px; }
  .prod-title { font-size: 13.5px; }
  .prod-desc { font-size: 11.5px; -webkit-line-clamp: 2; }
  .price-now { font-size: 15px; }
  .prod-add { width: 38px; height: 38px; border-radius: 11px; }
  .prod-quickview { display: none; }
  .features-grid { grid-template-columns: 1fr; gap: 11px; }
  .feature { padding: 19px 17px; }
  .feature-ic { width: 44px; height: 44px; }
  .testi-grid { grid-template-columns: 1fr; gap: 11px; }
  .testi { padding: 19px; }
  .cta-banner { padding: 40px 20px; border-radius: 18px; }
  .cta-banner h2 { font-size: 24px; }
  .cta-banner p { font-size: 14px; }
  .cta-banner .btn { width: 100%; padding: 14px; }
  .banner-strip { gap: 11px; }
  .banner-card { padding: 17px; border-radius: 14px; min-height: 104px; }
  .banner-title { font-size: 15.5px; }
  .banner-caption { font-size: 11.5px; }

  /* ---------- PAGE HERO ---------- */
  .page-hero { padding: 26px 0 20px; }
  .page-hero h1 { font-size: 24px; }
  .page-hero p { font-size: 13.5px; }
  .crumbs { font-size: 11.5px; margin-bottom: 10px; }

  /* ---------- PRODUCT PAGE ---------- */
  .product-page { padding: 14px 0 130px; }
  .prod-detail { gap: 22px; margin-bottom: 28px; }
  .gallery-main { border-radius: 16px; margin-bottom: 10px; }
  .gallery-thumbs { gap: 8px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .gallery-thumb { flex-shrink: 0; width: 68px; height: 54px; }
  .prod-info h1 { font-size: 22px; }
  .prod-chip-row { gap: 6px; }
  .chip { padding: 5px 11px; font-size: 11px; }
  .prod-price-box { padding: 13px 15px; border-radius: 13px; }
  .prod-price-box .price-now { font-size: 24px; }
  .prod-short { font-size: 14px; }
  .buy-row .btn { flex: 1; padding: 13px 12px; font-size: 14px; }
  .buy-row .btn-ghost { flex: 0 0 auto; }
  .trust-row { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .trust-tile { padding: 11px 12px; }
  .prod-tabs { margin-bottom: 34px; }
  .tab-heads { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tab-heads::-webkit-scrollbar { display: none; }
  .tab-btn { padding: 11px 14px; font-size: 13.5px; white-space: nowrap; }

  /* ---------- STICKY BUY BAR ---------- */
  .mobile-buybar {
    display: flex; align-items: center; gap: 12px;
    position: fixed; left: 10px; right: 10px;
    bottom: calc(80px + env(safe-area-inset-bottom));
    z-index: 140;
    background: color-mix(in srgb, var(--surface) 93%, transparent);
    backdrop-filter: blur(16px) saturate(1.5); -webkit-backdrop-filter: blur(16px) saturate(1.5);
    border: 1px solid var(--border-2); border-radius: 17px;
    box-shadow: 0 14px 44px rgba(8,24,46,.24);
    padding: 9px 12px; animation: buybarIn .35s ease;
  }
  @keyframes buybarIn { from { transform: translateY(120%); opacity: 0; } }
  .mb-buy-price { display: flex; flex-direction: column; line-height: 1.25; flex-shrink: 0; }
  .mb-buy-price .price-now { font-size: 16px; }
  .mb-buy-price .price-was { font-size: 11px; text-decoration: line-through; color: var(--text-muted); font-weight: 600; }
  .mb-buy-actions { display: flex; gap: 8px; flex: 1; min-width: 0; }
  .mb-buy-actions .btn { flex: 1; white-space: nowrap; }
  .btn-buy-sm { padding: 12px 13px; font-size: 12.5px; }
  .btn-buy-lg { padding: 13px 15px; font-size: 14.5px; }
  .mb-buy-actions .btn svg { width: 16px; height: 16px; }

  /* ---------- SHOP ---------- */
  .shop-layout { padding: 20px 0 60px; gap: 20px; }
  .filter-box { display: none; }
  .btn-filter-mobile { display: inline-flex; align-items: center; gap: 6px; }
  .shop-toolbar {
    position: sticky; top: 56px; z-index: 80;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    padding: 9px 2px; margin: 0 -2px 12px;
    border-bottom: 1px solid var(--border);
  }
  .search-hits { font-size: 12px; }
  .sort-form select { width: auto; min-width: 150px; padding: 10px 30px 10px 12px; font-size: 12.5px; }
  .sort-form { margin-left: auto; }

  /* mobile filter bottom sheet (reuses the desktop sidebar) */
  body.filter-open .filter-box {
    display: block;
    position: fixed; left: 50%; bottom: 0; z-index: 230;
    width: 100%; max-width: 560px; max-height: 74vh; overflow-y: auto;
    background: var(--surface); border-radius: 24px 24px 0 0;
    border: 1px solid var(--border); box-shadow: 0 -20px 60px rgba(0,0,0,.3);
    padding: 14px 18px calc(22px + env(safe-area-inset-bottom));
    animation: sheetUp .3s cubic-bezier(.2,.8,.3,1);
  }
  @keyframes sheetUp { from { transform: translate(0, 100%); } to { transform: translate(0, 0); } }
  body.filter-open .filter-box::before {
    content: ''; display: block; width: 44px; height: 5px; border-radius: 6px;
    background: var(--border-2); margin: 2px auto 18px;
  }
  body.filter-open .filter-box::after {
    content: 'Categories'; display: block;
    font-size: 13px; font-weight: 800; text-transform: uppercase;
    letter-spacing: 1.2px; color: var(--text-muted); margin-bottom: 10px;
  }
  body.filter-open::after {
    content: ''; position: fixed; inset: 0; z-index: 220;
    background: rgba(9,17,32,.55); backdrop-filter: blur(3px);
  }
  .filter-box h4 { display: none; }
  .filter-link { padding: 13px 14px; font-size: 14px; }
  .filter-link .cnt { font-size: 11px; }

  /* ---------- CART ---------- */
  .cart-layout { padding: 22px 0 70px; gap: 22px; grid-template-columns: 1fr; }
  .summary .btn-ghost { width: auto; }
  .summary .btn:not(.btn-ghost) { width: 100%; }
  .sum-row { flex-wrap: wrap; gap: 4px 10px; }
  .sum-row b { word-break: break-all; }
  .cart-item { padding: 10px; gap: 11px; border-radius: 13px; }
  .cart-item > a:first-child { width: 74px; height: 58px; border-radius: 10px; }
  .ci-body h4 { font-size: 13.5px; }
  .ci-price { font-size: 14px; }
  .ci-remove { width: 40px; height: 40px; }
  .summary { padding: 20px 18px; border-radius: 17px; }
  .summary .btn:not(.btn-ghost) { width: 100%; padding: 14px; }
  .sum-row.total b { font-size: 19px; }
  .summary .sum-row .btn-ghost { width: auto; padding: 8px 12px; }
  .summary form[style*="flex"] input[name="coupon_code"] { min-width: 0; }

  /* ---------- CHECKOUT ---------- */
  .checkout-grid { padding: 22px 0 70px; gap: 22px; grid-template-columns: 1fr; }
  .checkout-grid > form { min-width: 0; }
  .gateway-option { padding: 14px 14px; }
  .gateway-option b { font-size: 13.5px; }
  .checkout-grid .btn-lg, .checkout-grid .btn-primary { width: 100%; padding: 14px; }

  /* ---------- ACCOUNT ---------- */
  .account-layout { padding: 18px 0 70px; gap: 16px; }
  .account-layout .panel { padding: 18px 15px; border-radius: 15px; }
  .account-layout .panel > h2 { font-size: 15.5px; margin-bottom: 14px; }
  .acct-me { padding: 13px; border-radius: 13px; }
  .acct-me .avatar { width: 40px; height: 40px; font-size: 15px; flex-shrink: 0; }
  .acct-nav {
    display: flex; overflow-x: auto; gap: 5px; padding: 6px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .acct-nav::-webkit-scrollbar { display: none; }
  .acct-nav a { white-space: nowrap; padding: 11px 14px; font-size: 12.5px; }
  .acct-nav a svg { display: none; }
  .dash-cards { grid-template-columns: repeat(2, 1fr); gap: 9px; }
  .dash-card { padding: 13px; border-radius: 13px; }
  .dash-card b { font-size: 17px; word-break: break-all; }
  .dc-ic { width: 34px; height: 34px; }
  .dl-item { gap: 10px; padding: 12px 2px; flex-wrap: wrap; }
  .dl-ic { width: 38px; height: 38px; border-radius: 11px; }
  .dl-info { min-width: 0; flex: 1 1 55%; }
  .dl-info span { word-break: break-word; }
  .dl-btn { margin-left: auto; padding: 10px 12px; font-size: 12px; }
  .order-card { padding: 14px; border-radius: 13px; }
  .order-head { flex-wrap: wrap; gap: 8px; }
  .order-head b { font-size: 13px; word-break: break-all; }
  .order-prod { flex-wrap: wrap; gap: 8px 10px; }
  .order-prod img { width: 44px; height: 34px; }
  .order-prod .btn { padding: 9px 13px; font-size: 12px; }
  .order-status { white-space: nowrap; }
  .order-foot { flex-wrap: wrap; gap: 6px; }

  /* ---------- AUTH ---------- */
  .auth-wrap { padding: 34px 14px 80px; }
  .auth-card { padding: 26px 20px; border-radius: 18px; }
  .auth-card .btn { width: 100%; padding: 14px; }
  .form-grid { grid-template-columns: 1fr !important; }
  .field input, .field select, .field textarea { padding: 14px 14px; }

  /* kill iOS zoom on form controls */
  input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
  input[type="number"], input[type="date"], select, textarea { font-size: 16px; }

  /* ---------- SUPPORT / LEGAL ---------- */
  .support-grid { grid-template-columns: 1fr; gap: 20px; padding: 20px 0 60px; }
  .faq-q { padding: 15px 2px; }
  .legal { padding: 22px 0 60px; }

  /* ---------- FOOTER ---------- */
  .site-footer { margin-top: 16px; }
  .footer-grid { grid-template-columns: 1fr; gap: 26px; padding: 36px 0 24px; }
  .footer-brand, .footer-news { grid-column: auto; max-width: none; }
  .footer-bottom .container { flex-direction: column; gap: 6px; text-align: center; }
  .news-form { flex-direction: row; }
  .news-form input { padding: 13px; font-size: 16px; }

  /* ---------- TOASTS / FAB (above bottom nav) ---------- */
  .toast-wrap { top: auto; bottom: calc(90px + env(safe-area-inset-bottom)); right: 14px; left: 14px; max-width: none; }
  .toast { padding: 13px 16px; border-left-width: 5px; }
  .to-top { right: 14px; bottom: calc(90px + env(safe-area-inset-bottom)); width: 46px; height: 46px; }

  /* ---------- PAYMENT STATUS ---------- */
  .payment-status-wrap { padding: 24px 0 70px; }
  .payment-success { padding: 30px 18px !important; }
  .payment-success .btn-lg { width: 100%; }

  /* ---------- POPUP ---------- */
  .popup-overlay { padding: 12px; align-items: flex-end; }
  .popup-card { width: 100%; border-radius: 22px 22px 0 0; max-height: 90vh; }
  .popup-close { top: 10px; right: 10px; width: 38px; height: 38px; }

  /* ---------- PAGINATION ---------- */
  .pagination { gap: 5px; }
  .pagination a, .pagination .dots { min-width: 42px; height: 42px; font-size: 14px; }
}