/* Add custom CSS styles below */ 
/* --------------------------------- */
/* 🌟 تحسين الهيدر – شريط القوائم */
header.site-header {
  background: #0A122A;
  padding: 15px 0;
}
header.site-header .site-logo img {
  max-height: 60px;
}
header.site-header nav a {
  color: #fff;
  font-weight: 600;
  margin: 0 12px;
}
header.site-header nav a:hover {
  color: #FFDD59;
}

/* --------------------------------- */
/* 🖼️ بنرات الصفحة الرئيسية */
.main-slider .slide {
  border-radius: 10px;
  overflow: hidden;
}
.main-slider img {
  object-fit: cover;
}

/* --------------------------------- */
/* 🛍️ شبكة المنتجات */
.products-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 18px !important;
}
.products-grid .product-card {
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
  transition: transform .25s ease;
}
.products-grid .product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 18px rgba(0,0,0,.1);
}

/* --------------------------------- */
/* 💰 الأزرار */
.btn {
  background: #0A122A;
  color: #fff !important;
  font-weight: 600;
  border-radius: 6px;
  transition: .3s;
}
.btn:hover {
  background: #FFDD59;
  color: #0A122A !important;
}

/* --------------------------------- */
/* 🏷️ الأسعار */
.product-card .price {
  font-size: 1.18rem;
  font-weight: 700;
  color: #0A122A;
}
.product-card .price del {
  color: #888;
}

/* --------------------------------- */
/* 📦 بطاقات المنتج */
.product-card .title {
  font-size: 1rem;
  font-weight: 500;
  margin: 10px 0;
  color: #0A122A;
}

/* --------------------------------- */
/* 📣 قسم الأقسام */
.categories-list li a {
  padding: 10px 16px;
  background: #F5F5F5;
  border-radius: 6px;
  color: #0A122A;
  font-weight: 500;
  display: block;
  text-align: center;
}
.categories-list li a:hover {
  background: #FFDD59;
  color: #fff;
}

/* --------------------------------- */
/* 🦶 الفوتر */
footer.site-footer {
  background: #0A122A !important;
  color: #fff !important;
  padding: 24px;
  font-size: 0.95rem;
}
footer.site-footer a {
  color: #FFDD59 !important;
}
footer.site-footer a:hover {
  color: #fff !important;
}
/* تحسين قسم الروابط المهمة في الفوتر */
footer .footer-links,
footer .important-links {
  background: transparent;
}

footer .footer-links h4,
footer .important-links h4 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #FFDD59;
  margin-bottom: 12px;
}

footer .footer-links ul li,
footer .important-links ul li {
  margin-bottom: 8px;
}

footer .footer-links ul li a,
footer .important-links ul li a {
  color: #ffffff;
  font-size: 0.95rem;
  opacity: 0.85;
  transi
  <section class="hero-menu">
  <div class="hero-grid">

    <a href="/categories/discord" class="hero-card">
      <img src="رابط-الصورة-1">
      <div class="hero-overlay">
        <h3>ديسكورد</h3>
        <p>اشتراكات • خدمات • إضافات</p>
      </div>
    </a>

    <a href="/categories/nitro" class="hero-card">
      <img src="رابط-الصورة-2">
      <div class="hero-overlay">
        <h3>نيترو</h3>
        <p>أسعار خاصة • تفعيل سريع</p>
      </div>
    </a>

    <a href="/categories/boost" class="hero-card">
      <img src="رابط-الصورة-3">
      <div class="hero-overlay">
        <h3>بوستات</h3>
        <p>رفع مستوى السيرفر</p>
      </div>
    </a>

    <a href="/categories/offe
  /* إخفاء الهواتف والبريد والواتساب في الموقع فقط */
a[href^="tel:"],
a[href^="mailto:"],
a[href*="wa.me"],
*[class*="phone"],
*[id*="phone"],
*[class*="email"],
*[id*="email"],
*[class*="whatsapp"],
*[id*="whatsapp"] {
    display: none !important;
}

/* لكن نتركهم يظهرون عند الطباعة (الفواتير) */
@media print {
    a[href^="tel:"],
    a[href^="mailto:"],
    a[href*="wa.me"],
    *[class*="phone"],
    *[id*="phone"],
    *[class*="email"],
    *[id*="email"],
    *[class*="whatsapp"],
    *[id*="whatsapp"] {
        display: inline !important;
    }
}