/* ==========================================================================
   Hosainy Store — Responsive rules (mobile-first breakpoints)
   --------------------------------------------------------------------------
   Breakpoints:
     < 640px   mobile
     640-1024  tablet
     > 1024    desktop (default styles in style.css)
   ========================================================================== */

/* ---------- Tablet & below (<= 1024px) ---------- */
@media (max-width: 1024px) {
  :root { --section-y: 72px; }

  .grid-3, .grid-4, .products-grid, .steps, .pricing { grid-template-columns: repeat(2, 1fr); }
  .stats-inner { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero-actions { justify-content: center; }
  .hero .lead { margin-inline: auto; }
  .hero-visual { max-width: 560px; margin: 0 auto; }
  .hero-visual .float-card.a { inset-inline-start: 0; }
  .hero-visual .float-card.b { inset-inline-end: 0; }
  html[lang="en"] .hero-grid > .hero-visual { order: 0; }
  .pd-grid { grid-template-columns: 1fr; }
  .pd-info { position: static; }
  .price-card.popular { transform: none; }
  .price-card.popular:hover { transform: translateY(-6px); }
  .cta-band { flex-direction: column; text-align: center; }
  .cta-band .hero-actions { justify-content: center; }

  /* Mobile navigation drawer */
  .nav-toggle { display: grid; }
  /* Drawer slides in from the inline-start edge (right in RTL, left in LTR).
     Off-screen on the start side never creates scrollable overflow. */
  .nav {
    position: fixed; top: 0; bottom: 0; inset-inline-start: 0;
    width: min(320px, 85vw);
    flex-direction: column; align-items: stretch; gap: 6px;
    background: var(--white); padding: 84px 22px 22px;
    box-shadow: var(--shadow-lg);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform .35s cubic-bezier(.4, 0, .2, 1), visibility 0s .35s;
    z-index: 110;
  }
  html[lang="ar"] .nav { transform: translateX(100%); }
  .nav.open { transform: none !important; visibility: visible; transition-delay: 0s; }
  .nav a { padding: .8em 1em; font-size: 1.05rem; }
  .nav-close { display: grid; position: absolute; top: 18px; inset-inline-end: 18px; width: 40px; height: 40px; border-radius: 10px; place-items: center; color: var(--primary); }
  .nav-close:hover { background: var(--primary-soft); }
  .nav-close svg { width: 24px; height: 24px; }
  .nav-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, .5); z-index: 99; /* below the header (z 100) — the drawer lives inside the header stacking context */ opacity: 0; visibility: hidden; transition: all var(--transition); }
  .nav-backdrop.show { opacity: 1; visibility: visible; }
  .header-actions .btn-header { display: none; }
}

/* ---------- Mobile (<= 640px) ---------- */
@media (max-width: 640px) {
  :root { --section-y: 56px; --header-h: 66px; }
  body { font-size: 15px; }

  .container { padding-inline: 16px; }
  .grid-2, .grid-3, .grid-4, .products-grid, .steps, .pricing, .features-list, .form-row, .pd-actions .row { grid-template-columns: 1fr; }
  .stats-inner { grid-template-columns: 1fr 1fr; padding: 18px; gap: 8px; }
  .stat { border: 0; }
  .stat strong { font-size: 1.7rem; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { justify-content: center; text-align: center; }
  .hero { padding: 56px 0 72px; }
  .hero-actions .btn { width: 100%; }
  .hero-visual .float-card { display: none; }
  .logo { font-size: 1.15rem; }
  .logo img, .logo svg { width: 36px; height: 36px; }
  .lang-switch span { display: none; }
  .lang-switch { padding: .5em .65em; }
  .card { padding: 24px; }
  .section-head { margin-bottom: 2rem; }
  .filters { gap: 8px; }
  .chip { font-size: .85rem; padding: .5em 1em; }
  .toolbar { flex-direction: column; align-items: stretch; }
  .toolbar .sort { justify-content: space-between; }
  .pd-thumbs { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .pd-price-box { flex-wrap: wrap; }
  .price-card { padding: 28px 22px; }
  .about-visual .exp-badge { inset-inline-start: 12px; bottom: -12px; padding: 12px 16px; }
  .about-visual .exp-badge strong { font-size: 1.6rem; }
  .cta-band { padding: 32px 22px; }
  .wa-float { width: 54px; height: 54px; bottom: 18px; inset-inline-end: 18px; }
  .wa-float .tip { display: none; }
  .to-top { bottom: 84px; inset-inline-end: 22px; width: 40px; height: 40px; }
  .map-frame { height: 240px; }
  .tabs-nav button { padding: 12px 14px; font-size: .92rem; }
}

/* ---------- Large desktop (>= 1400px) ---------- */
@media (min-width: 1400px) {
  :root { --container: 1280px; }
}

/* ---------- Print ---------- */
@media print {
  .header, .footer, .wa-float, .to-top, .preloader, .nav-toggle { display: none !important; }
  body { background: #fff; }
}