/* Add custom CSS styles below */ 
.home-slider,
.hero,
.main-slider {
    max-height: 500px; /* تقدري تصغري أكثر لو حبيتي */
    overflow: hidden;
}

.home-slider img,
.hero img,
.main-slider img {
    height: 500px;
    object-fit: cover;
}@media (max-width: 768px) {
    .products-list,
    .products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 480px) {
    .products-list,
    .products-grid {
        grid-template-columns: 1fr !important;
    }
}
.products-list,
.products-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px;
}
.main-header,
.header,
.navbar {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    min-height: 60px !important;
}
<script>
document.addEventListener("DOMContentLoaded", function() {

    // ما نعرضها إلا مرة واحدة لكل زائر
    if (localStorage.getItem("discountShown")) return;

    setTimeout(function() {

        // إنشاء طبقة الخلفية
        var overlay = document.createElement("div");
        overlay.style.position = "fixed";
        overlay.style.top = "0";
        overlay.style.left = "0";
        overlay.style.width = "100%";
        overlay.style.height = "100%";
        overlay.style.background = "rgba(0,0,0,0.6)";
        overlay.style.display = "flex";
        overlay.style.alignItems = "center";
        overlay.style.justifyContent = "center";
        overlay.style.zIndex = "9999";

        // إنشاء البوب أب
        var popup = document.createElement("div");
        popup.style.background = "#fff";
        popup.style.padding = "30px";
        popup.style.borderRadius = "12px";
        popup.style.textAlign = "center";
        popup.style.maxWidth = "400px";
        popup.style.width = "90%";

        popup.innerHTML = `
            <h2 style="margin-bottom:10px;">🎉 خصم خاص لك!</h2>
            <p style="margin-bottom:15px;">احصل على خصم 5% على طلبك الآن</p>
            <div style="font-size:22px;font-weight:bold;margin-bottom:15px;">
                SAVE5
            </div>
            <button id="closePopup" style="background:#000;color:#fff;padding:10px 20px;border:none;border-radius:6px;cursor:pointer;">
                إغلاق
            </button>
        `;

        overlay.appendChild(popup);
        document.body.appendChild(overlay);

        document.getElementById("closePopup").onclick = function() {
            overlay.remove();
        };

        // نحفظ إنها ظهرت
        localStorage.setItem("discountShown", "true");

    }, 60000); // 60000 = دقيقة
});
</script>