عرض الخط
body {
  font-size: 16px !important;
}

.section-title, 
.main-heading, 
h2, 
.products-section h2 {
  font-size: 22px !important;
}
شكل المنتجات 
/* 1. تصميم البطاقة الأساسي */
.product-card, .s-product-card, [class*="product-card"] {
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    border-radius: 20px !important;
    border: 1px solid #eee !important;
    background: #fff !important;
    padding: 10px !important;
    position: relative !important;
}

/* 2. الرفعة عند التأشير */
.product-card:hover, .s-product-card:hover, [class*="product-card"]:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 15px 30px rgba(0, 229, 255, 0.15) !important;
    border-color: #00E5FF !important;
}

/* 3. زر "إضافة للسلة" - ظاهر دائماً بتصميم فخم */
.product-card button, .s-product-card button, [class*="product-card"] button, .s-button-add-to-cart {
    opacity: 1 !important; /* ظاهر دائماً */
    visibility: visible !important;
    background: #00E5FF !important; /* لونك السماوي */
    color: #fff !important;
    border-radius: 12px !important;
    font-weight: bold !important;
    transition: all 0.2s ease !important; /* سرعة استجابة للضغطة */
    transform: translateY(0) !important;
}

/* 4. أنيميشن عند الضغط (Active State) */
.product-card button:active, .s-product-card button:active, [class*="product-card"] button:active {
    transform: scale(0.92) !important; /* تأثير الانضغاط عند الضغط */
    background: #00b8cc !important; /* يغمق اللون شوي وقت الضغطة */
}

/* 5. تكبير الصورة بهدوء عند الـ Hover */
.product-card:hover img, .s-product-card:hover img, [class*="product-card"]:hover img {
    transform: scale(1.05) !important;
    transition: transform 0.6s ease !important;
}


شكل الصوره

/* 1. تقليص حجم السلايدر وتوسيطه كـ "لوحة طافية" */
.s-slider, .swiper-container, .slider-main, [class*="slider-container"] {
    max-width: 85% !important; /* لم السلايدر بوسط الصفحة */
    margin: 40px auto !important; /* توسيط ومسافة فوق وتحت */
    border-radius: 30px !important; /* زوايا دائرية كبيرة وفخمة */
    overflow: hidden !important; /* هذا اللي يخلي الصورة "تنقص" وتملي الزوايا */
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1) !important; /* ظل عميق للفخامة */
    border: none !important; /* حذف أي إطارات قديمة */
}

/* 2. إجبار الصورة على ملء كامل مساحة الإطار الجديد */
.swiper-slide img, .slider-main img, .s-slider img, .swiper-zoom-container img {
    width: 100% !important; /* عرض كامل */
    height: 100% !important; /* طول كامل */
    object-fit: cover !important; /* هذا أهم سطر: يخلي الصورة تملي المكان غصب بدون تمطيط */
    display: block !important;
    padding: 0 !important; /* حذف أي فراغات داخلية */
    margin: 0 !important;
}

/* 3. تنسيق خاص للجوال لضمان الاستجابة */
@media (max-width: 768px) {
    .s-slider, .swiper-container {
        max-width: 95% !important; /* في الجوال نخليه أوسع شوي عشان الكلام يوضح */
        border-radius: 20px !important;
    }
}