/* ============================================================
   RANKHOSTZONE STORE - MOBILE APP-LIKE EXPERIENCE
   Loaded only on screens <= 860px. Feel like a native app:
   bottom navigation, sticky buy bar, full-screen drawers,
   large touch targets, safe-area support.
   ============================================================ */

@media (max-width: 860px) {

  :root { --nav-h: 60px; }

  body { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }

  /* ---------- topbar ---------- */
  .topbar { height: var(--nav-h); }
  .topbar.scrolled { height: 56px; }
  .nav-wrap { gap: 10px; padding: 0 14px; }
  .brand-logo { width: 34px; height: 34px; border-radius: 10px; }
  .brand-text { font-size: 14px; }
  .brand-text em { font-size: 9.5px; }
  .nav-links { display: none; }
  .search-box { display: none; }
  .hide-sm { display: none !important; }
  .nav-tools { gap: 8px; }
  .icon-btn, .avatar-btn { width: 40px; height: 40px; }
  .user-drop { right: -60px; }
  .wish-badge { min-width: 17px; height: 17px; font-size: 9.5px; }

  /* ---------- bottom navigation (app-like) ---------- */
  .bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 150;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -8px 30px rgba(2, 132, 199, .1);
  }
  [data-theme="dark"] .bottom-nav { background: rgba(10, 23, 40, .92); }
  .bn-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 9px 4px 7px;
    color: var(--muted);
    font-size: 10.5px;
    font-weight: 600;
    text-decoration: none;
    position: relative;
    transition: color .2s;
    -webkit-tap-highlight-color: transparent;
  }
  .bn-item:active { transform: scale(.92); }
  .bn-ico { font-size: 20px; line-height: 1; }
  .bn-item.active, .bn-item:active { color: var(--sky1); }

  /* ---------- hero ---------- */
  .hero { min-height: 88vh; }
  .hero-inner { padding: 96px 0 54px; }
  .hero-title { font-size: clamp(1.7rem, 8vw, 2.3rem); margin-top: 16px; }
  .hero-sub { font-size: 15px; padding: 0 10px; }
  .hero-cta .btn { width: 100%; }
  .hero-stats { gap: 4px; padding: 14px 8px; margin-top: 30px; }
  .stat { padding: 6px 14px; }
  .stat b { font-size: 19px; }

  /* ---------- grids ---------- */
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr 1fr; gap: 12px; }
  .section { padding: 44px 0; }
  .section-head { margin-bottom: 28px; }
  .steps { grid-template-columns: 1fr 1fr; gap: 14px; }
  .step { padding: 26px 14px 20px; }
  .license-wrap { grid-template-columns: 1fr; gap: 24px; }
  .cta-inner { flex-direction: column; text-align: center; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 26px; padding: 40px 20px 26px; }
  .footer-bottom .container { justify-content: center; text-align: center; }

  /* ---------- product cards ---------- */
  .p-card-title { font-size: 13.5px; }
  .p-card-desc { font-size: 12px; -webkit-line-clamp: 2; min-height: 34px; }
  .p-price { font-size: 14.5px; }
  .p-card-foot .btn { padding: 7px 11px; font-size: 12px; }
  .p-disc { font-size: 10.5px; padding: 4px 9px; top: 8px; left: 8px; }
  .p-trial { font-size: 10px; padding: 4px 9px; top: 8px; right: 8px; }
  .p-cat { font-size: 10px; padding: 4px 9px; bottom: 8px; left: 8px; }
  .wish-toggle { display: flex; width: 32px; height: 32px; font-size: 14px; top: 8px; right: 8px; }

  /* ---------- product page ---------- */
  .page-hero { padding: 96px 0 26px; }
  .page-hero.compact { padding: 88px 0 20px; }
  .product-layout { grid-template-columns: 1fr; gap: 26px; }
  .product-gallery { position: static; }
  .g-thumb { width: 62px; height: 50px; }
  .plan-grid { grid-template-columns: repeat(2, 1fr); }
  .buy-row { gap: 10px; }
  .buy-row .btn-lg { flex: 1; min-width: 140px; }
  .feature-pills span { font-size: 11px; padding: 6px 10px; }
  .tab { padding: 10px 14px; font-size: 13.5px; }

  /* sticky buy bar (app-like) on product page */
  .product-layout { padding-bottom: 12px; }
  .pricing-box .buy-row { position: static; }
  .feature-pills { display: none; }

  /* ---------- auth ---------- */
  .auth-section { padding: 90px 16px 30px; }
  .auth-card { padding: 26px 20px; }

  /* ---------- checkout ---------- */
  .checkout-wrap { grid-template-columns: 1fr; }
  .checkout-pay { order: -1; }

  /* ---------- contact ---------- */
  .contact-wrap { grid-template-columns: 1fr; }
  .contact-info, .contact-form-card { padding: 22px 18px; }
  .contact-form-card .form-grid.two { grid-template-columns: 1fr; }

  /* ---------- dashboard ---------- */
  .dash-greeting { padding: 18px; }
  .dash-actions { width: 100%; }
  .dash-actions .btn { flex: 1; }
  .msg-row summary { gap: 10px; padding: 13px 14px; }
  .msg-subject { flex: 1 1 100%; order: 2; }
  .msg-from { order: 3; flex: 1; min-width: 0; }
  .msg-date { order: 4; }
  .msg-toggle { order: 5; }

  /* ---------- account ---------- */
  .account-head { flex-direction: column; text-align: center; gap: 10px; }
  .acct-tabs { flex-wrap: nowrap; justify-content: flex-start; }
  .acct-tab { padding: 10px 14px; font-size: 13px; }
  .order-row { gap: 10px; }
  .order-actions { width: 100%; }
  .lic-key-row.big .lic-key { font-size: 15px; letter-spacing: .8px; }

  /* ---------- admin mobile ---------- */
  .admin-sidebar {
    transform: translateX(-100%);
    width: 270px;
  }
  .admin-sidebar.open { transform: translateX(0); box-shadow: 0 0 60px rgba(0,0,0,.5); }
  .admin-main { margin-left: 0; }
  .admin-burger { display: inline-flex; }
  .admin-topbar { padding: 12px 14px; }
  .admin-content { padding: 16px 14px; }
  .admin-grid.stats-row { grid-template-columns: repeat(2, 1fr); }
  .admin-grid.two, .admin-grid.chart-grid { grid-template-columns: 1fr; }
  .admin-pill { display: none; }
  .form-grid.two, .form-grid.four { grid-template-columns: 1fr; }
  .page-search.inline-search { flex-wrap: wrap; }
  .page-search.inline-search select { width: 100%; }
  .row-actions { flex-wrap: wrap; }

  /* ---------- misc ---------- */
  .fab { bottom: calc(80px + env(safe-area-inset-bottom)); right: 16px; }
  .toast { width: calc(100% - 32px); text-align: center; top: 70px; font-size: 13px; padding: 12px 14px; }
  .page-search { flex-direction: column; }
  .page-search .btn { width: 100%; }
  .sort-box { width: 100%; margin-left: 0; }
  .sort-box select { flex: 1; }
  .filter-bar { gap: 10px; padding: 10px; }
  .chip-row { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .chip { flex-shrink: 0; }
  .paginarion .page-link { padding: 8px 12px; }
  .hero-stats.glass { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); }

  /* ---------- marketing blocks ---------- */
  .banner-slider { aspect-ratio: 16 / 9; border-radius: 14px; }
  .banner-cap { left: 12px; bottom: 12px; font-size: 12.5px; padding: 7px 12px; }
  .banner-arrow { width: 34px; height: 34px; font-size: 14px; }
  .banner-dots { bottom: 10px; right: 10px; }
  .strip-banner img { height: 110px; }
  .strip-banner span { font-size: 13px; }
  .countdown { gap: 4px; }
  .cd-box { min-width: 44px; padding: 6px 8px; }
  .cd-box b { font-size: 16px; }
  .flash-banner { padding: 10px 12px; }
  .countdown.mini { width: 100%; margin-left: 0; text-align: center; }
  .cross-sell { padding: 18px; }
  .cross-row { grid-template-columns: 1fr; }
  .coupon-form { flex-direction: column; }
  .coupon-form .btn { width: 100%; }
  .banner-thumb img, .banner-noimg { width: 90px; height: 40px; }

  /* ---------- popups ---------- */
  .popup-box { padding: 20px; border-radius: 14px; }
  .popup-title { font-size: 17px; }
  .popup-img { max-height: 150px; }
  .popup-news { flex-direction: column; }
  .popup-news .btn { width: 100%; }
  .admin-grid.popup-grid { grid-template-columns: 1fr; }
}