/* ──────────────────────────────────────────────────────────
   ASTRO — صفحة التصنيف
   ──────────────────────────────────────────────────────────
   شبكة منتجات التصنيف وكروت الأقسام في الصفحة الرئيسية.
   تنسيق التصنيفات الفرعية والفلاتر في css/features/catalog.css
────────────────────────────────────────────────────────── */

        /* ── Category page ── */
    #categoryPage .products-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
      gap: 22px;
    }

        /* ── Category cards ── */
    .browse-link {
      margin-top: 14px;
      font-family: 'Orbitron', sans-serif;
      font-size: 0.68rem;
      letter-spacing: 2px;
      color: var(--pl);
      transition: color 0.2s;
    }
    .category-card:hover .browse-link { color: #fff; }
    .category-card:hover { border-color: rgba(138,77,255,0.6) !important; }

    /* ── عناصر الفلاتر ──
       الكلاسين دول بتستخدمهم لوحة الفلاتر في css/features/catalog.css
       (.cat-filter-bar القديم اتشال — مكانش مستخدم في أي مكان) */
    .cat-filter-title {
      font-family: 'Orbitron', sans-serif;
      font-size: 0.75rem;
      font-weight: 700;
      color: var(--pl);
      letter-spacing: 2px;
    }
    .cat-clear-btn {
      padding: 7px 18px;
      background: rgba(138,77,255,0.15);
      border: 1px solid rgba(138,77,255,0.3);
      border-radius: 20px;
      color: var(--pl);
      font-family: 'Orbitron', sans-serif;
      font-size: 0.65rem;
      letter-spacing: 1px;
      cursor: pointer;
      transition: background 0.2s;
    }
    .cat-clear-btn:hover { background: rgba(138,77,255,0.3); color: #fff; }

    
    .lang-btn {
      /* ارتفاع كافي للضغط بالإصبع من غير ما الشكل يكبر */
      min-height: 36px;
      display: inline-flex; align-items: center; justify-content: center;
      padding: 7px 14px;
      background: rgba(138,77,255,0.12);
      border: 1px solid rgba(138,77,255,0.3);
      border-radius: 4px;
      color: var(--pl);
      font-family: 'Orbitron', sans-serif;
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 1px;
      cursor: pointer;
      transition: background 0.2s;
    }
    .lang-btn:hover { background: rgba(138,77,255,0.25); }