/* =========================================================
   MASARI STORE — Responsive (mobile-first overrides)
   ========================================================= */

.mobile-quick-nav { display: none; } /* إخفاء الشريط في شاشات الحاسبة */

@media (max-width: 1080px){
  .cat-grid{ grid-template-columns: repeat(3, 1fr); }
  .product-grid{ grid-template-columns: repeat(3, 1fr); }
  .brand-grid{ grid-template-columns: repeat(4, 1fr); }
  .pdp-grid{ gap: 26px; }
}

@media (max-width: 900px){
  .main-nav{ display:none; }
  .header-search{ display:none; }
  .menu-toggle{
    display:flex; align-items:center; justify-content:center;
    width:42px; height:42px; background:none; border:none; font-size:1.3rem;
    color: var(--color-forest-dark);
  }
  .bottom-nav{ display:block; }
  .listing-layout{ grid-template-columns: 1fr; }
  .filters-panel{ display:none; position: fixed; inset:0; z-index:400; border-radius:0; overflow-y:auto; }
  .filters-panel.open{ display:block; }
  .mobile-filter-bar{ display:flex; gap:10px; margin-bottom:14px; }
  .mobile-filter-bar button{ flex:1; }
  .cart-layout{ grid-template-columns: 1fr; }
  .summary-card{ position:static; }
  .pdp-grid{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .form-grid{ grid-template-columns: 1fr; }

  /* تنسيق شريط الروابط السريعة للموبايل */
  .mobile-quick-nav {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    padding: 12px 14px;
    background: #fff;
    border-top: 1px solid var(--color-line);
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    -ms-overflow-style: none; /* إخفاء شريط التمرير المزعج */
    scrollbar-width: none;
  }
  .mobile-quick-nav::-webkit-scrollbar { display: none; }
  
  .mobile-quick-nav a {
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    border-radius: 99px;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--color-forest-dark);
    background: var(--color-cream-deep);
    white-space: nowrap;
    border: 1px solid var(--color-line);
    transition: all 0.2s ease;
  }
  
  /* تغيير اللون فقط عند الضغط (أو التواجد داخل الصفحة) */
  .mobile-quick-nav a:active,
  .mobile-quick-nav a.active {
    background: var(--color-forest);
    color: #fff;
    border-color: var(--color-forest);
  }
}

@media (max-width: 640px){
  .container{ padding: 0 14px; }
  .cat-grid{ grid-template-columns: repeat(2, 1fr); gap:12px; }
  .product-grid{ grid-template-columns: repeat(2, 1fr); gap:12px; }
  .brand-grid{ grid-template-columns: repeat(3, 1fr); }
  .hero-content{ padding: 26px 22px; max-width:100%; }
  .hero-content h1{ font-size:1.5rem; }
  .hero-slide{ min-height: 260px; }
  .section{ padding: 26px 0; }
  .section-head h2{ font-size:1.15rem; }
  :root{ --header-h: 62px; }
  .logo{ font-size:1.2rem; }
  .footer-grid{ grid-template-columns: 1fr; text-align:center; }
  .cart-line{ grid-template-columns: 64px 1fr; }
  .cart-line img{ width:64px; height:64px; }
  .cart-line .cl-side{ grid-column: 1/-1; flex-direction:row; justify-content:space-between; align-items:center; }
}

@media (min-width: 1400px){
  .cat-grid{ grid-template-columns: repeat(4, 1fr); }
}