/* =========================================================
   NextShop.bg — Responsive
   Breakpoints: 1024, 768, 560, 420
   ========================================================= */

/* ---------- Large tablet / small desktop ---------- */
@media (max-width: 1024px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento-lg { grid-column: span 2; grid-row: auto; }
  .bento-md { grid-column: span 2; }
  .features-alt { gap: 36px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; gap: 36px; }
  .footer-brand { grid-column: 1 / -1; }
}

/* ---------- Tablet ---------- */
@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-burger { display: flex; }
  .nav-login { display: none; }

  .hero { padding: 56px 20px 48px; }
  .section { padding: 72px 20px; }

  .steps-grid { grid-template-columns: 1fr; }
  .step-line { display: none; }

  .features-alt { grid-template-columns: 1fr; gap: 32px; margin-bottom: 56px; }
  .features-alt.reverse .feat-visual { order: 0; }

  .testi-grid { grid-template-columns: 1fr; }

  .plans { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; }
  .plan.popular { order: -1; }

  .marquee-label { display: none; }
}

/* ---------- Mobile ---------- */
@media (max-width: 560px) {
  .nav { padding: 0 16px; }
  .nav-cta-btn span, .nav-cta-btn { font-size: 13px; padding: 8px 14px; }
  .nav-logo-name { font-size: 15px; }

  .hero-title { font-size: 36px; letter-spacing: -.02em; }
  .hero-sub { font-size: 15px; }
  .btn-lg { padding: 13px 22px; font-size: 14px; width: 100%; justify-content: center; }
  .hero-actions { flex-direction: column; align-items: stretch; }

  .stats { padding: 40px 16px; }
  .stats-grid { grid-template-columns: 1fr 1fr; padding: 28px 20px; gap: 16px; }

  .bento { grid-template-columns: 1fr; gap: 14px; }
  .bento-lg, .bento-md { grid-column: span 1; }
  .bento-lg { padding: 26px; }
  .bento-lg h3 { font-size: 21px; }

  .section-head { margin-bottom: 40px; }
  h2 { font-size: 30px; }

  .feat-h { font-size: 24px; }
  .feat-visual { padding: 18px; }

  .shm-products { grid-template-columns: 1fr 1fr; }
  .shm-products .sprod:nth-child(3) { display: none; }
  .screen-hero-mini { padding: 20px; }
  .shm-h1 { font-size: 18px; }

  .guarantee { gap: 16px 24px; }
  .guar-item { font-size: 12.5px; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; gap: 10px; text-align: center; }

  .final-cta-btns { flex-direction: column; align-items: stretch; }
  .btn-cta-white, .btn-cta-ghost { width: 100%; justify-content: center; }

  .to-top { right: 16px; bottom: 16px; width: 42px; height: 42px; }
  .marquee-group { gap: 32px; padding-right: 32px; }
}

/* ---------- Small mobile ---------- */
@media (max-width: 420px) {
  .hero-title { font-size: 32px; }
  .stats-grid { grid-template-columns: 1fr; }
  .faq-q { font-size: 15px; }
}

/* ---------- Hover-capable devices only ---------- */
@media (hover: hover) and (pointer: fine) {
  .cursor-glow { opacity: 1; }
}

/* ---------- Desktop: mobile menu fully removed ---------- */
@media (min-width: 861px) {
  .nav-mobile { display: none !important; }
}

/* ---------- Print ---------- */
@media print {
  .nav-wrap, .scroll-progress, .cursor-glow, .to-top, .preloader, .hero-bg, .final-cta-bg { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding: 24px 0; }
}