/* تصنيفات main-links-3 على الجوال فقط */ @media (max-width: 767px) { /* تحويل السلايدر إلى شبكة */ #main-links-3 .swiper-wrapper { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* مسافة أكبر رأسياً بين الصفوف */ column-gap: 12px !important; row-gap: 28px !important; transform: none !important; transition: none !important; width: 100% !important; height: auto !important; align-items: start !important; } /* كل منتج */ #main-links-3 .swiper-slide { width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; transform: none !important; position: relative !important; overflow: visible !important; } /* الرابط داخل البطاقة */ #main-links-3 .itme-cat-entry { display: flex !important; flex-direction: column !important; width: 100% !important; height: auto !important; position: relative !important; overflow: visible !important; } /* حاوية الصورة */ #main-links-3 .itme-categories-image { position: relative !important; width: 100% !important; height: auto !important; aspect-ratio: 1 / 1 !important; overflow: hidden !important; margin: 0 !important; } /* الصورة نفسها */ #main-links-3 .itme-categories-image img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; position: relative !important; } /* العنوان وعدد المنتجات */ #main-links-3 .main-links-title { position: static !important; display: block !important; width: 100% !important; height: auto !important; min-height: 52px !important; margin-top: 10px !important; padding: 0 4px !important; text-align: center !important; overflow: visible !important; transform: none !important; } /* اسم التصنيف */ #main-links-3 .main-links-title h4 { position: static !important; margin: 0 0 3px !important; padding: 0 !important; line-height: 1.4 !important; white-space: normal !important; overflow: visible !important; } /* عدد المنتجات */ #main-links-3 .main-links-title span { position: static !important; display: block !important; margin: 0 !important; padding: 0 !important; line-height: 1.4 !important; white-space: normal !important; } /* السماح للحاوية بالتمدد حسب المحتوى */ #main-links-3 .swiper, #main-links-3 .s-slider-container { height: auto !important; min-height: 0 !important; overflow: visible !important; } /* المنتج الخامس في المنتصف */ #main-links-3 .swiper-slide:last-child:nth-child(odd) { grid-column: 1 / -1 !important; width: calc(50% - 6px) !important; justify-self: center !important; } } ========================================================================================== /* ========================================= مميزات المتجر - التصميم العام ========================================= */ .features-home-grid .s-block--features__item { background: #fffaf0 !important; border: 1px solid rgba(150, 120, 70, 0.08) !important; border-radius: 14px !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 10px 24px rgba(0, 0, 0, 0.05) !important; transition: transform 0.3s ease, box-shadow 0.3s ease !important; } /* ========================================= الجوال فقط ========================================= */ @media (max-width: 767px) { .features-home-grid { display: flex !important; flex-wrap: nowrap !important; gap: 10px !important; overflow-x: auto !important; overflow-y: visible !important; padding: 10px 14px 22px !important; scroll-behavior: smooth !important; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none !important; } /* إخفاء Scrollbar */ .features-home-grid::-webkit-scrollbar { display: none !important; } /* كل بطاقة */ .features-home-grid .s-block--features__item { /* * تقريباً بطاقتين ظاهرتين * مع ظهور جزء من البطاقة الثالثة */ flex: 0 0 43% !important; width: 43% !important; min-width: 43% !important; max-width: 43% !important; min-height: 135px !important; height: auto !important; margin: 0 !important; padding: 15px 10px !important; box-sizing: border-box !important; scroll-snap-align: start; background: #fffaf0 !important; border-radius: 14px !important; border: 1px solid rgba(165, 130, 70, 0.10) !important; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05), 0 8px 20px rgba(0, 0, 0, 0.08) !important; position: relative !important; overflow: hidden !important; } /* الأيقونة */ .features-home-grid .feature-icon-div { margin-bottom: 9px !important; } .features-home-grid .feature-icon { font-size: 28px !important; } /* النص */ .features-home-grid .feature-text { width: 100% !important; } .features-home-grid .feature-text h4 { font-size: 14px !important; line-height: 1.5 !important; margin: 0 0 5px !important; white-space: normal !important; } .features-home-grid .feature-text p { font-size: 11.5px !important; line-height: 1.6 !important; margin: 0 !important; white-space: normal !important; } /* لمسة بسيطة عند الضغط */ .features-home-grid .s-block--features__item:active { transform: scale(0.98) !important; } } /* ===================================================== إصلاح بطاقات مميزات المتجر - الكمبيوتر + الجوال ===================================================== */ /* جميع الأجهزة */ .features-home-grid { overflow: visible !important; } /* تصميم البطاقة - يعمل على الكمبيوتر والجوال */ .features-home-grid .s-block--features__item { position: relative !important; /* مهم جداً حتى لا يتم قص الأيقونة */ overflow: visible !important; /* اللون */ background: #FFFAF0 !important; background-color: #FFFAF0 !important; /* إطار خفيف */ border: 1px solid rgba(151, 116, 55, 0.10) !important; /* تدوير */ border-radius: 14px !important; /* ظل طبيعي */ box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05), 0 8px 22px rgba(0, 0, 0, 0.07) !important; transition: transform .3s ease, box-shadow .3s ease, background-color .3s ease !important; } /* حتى لا يقوم عنصر الحدود بقص التأثير */ .features-home-grid .s-block--features__item .card-border { border-radius: 14px !important; pointer-events: none !important; } /* الأيقونة دائماً فوق البطاقة */ .features-home-grid .feature-icon-div { position: relative !important; z-index: 10 !important; overflow: visible !important; } /* الأيقونة نفسها */ .features-home-grid .feature-icon { position: relative !important; z-index: 11 !important; } /* النص يبقى في مكانه الطبيعي */ .features-home-grid .feature-text { position: relative !important; z-index: 2 !important; } /* تأثير إضافي لطيف على الكمبيوتر */ @media (min-width: 768px) { .features-home-grid .s-block--features__item:hover { transform: translateY(-4px) !important; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.06), 0 14px 30px rgba(0, 0, 0, 0.09) !important; } } /* ===================================================== الجوال ===================================================== */ @media (max-width: 767px) { /* * مساحة علوية إضافية داخل منطقة السلايدر * حتى عندما ترتفع الأيقونة لا يتم قصها */ .features-home-grid { padding-top: 32px !important; padding-bottom: 24px !important; overflow-x: auto !important; /* * بعض المتصفحات تقص العنصر المرتفع بسبب السلايدر، * لذلك نعطيه مساحة كافية من الأعلى */ scroll-padding-top: 32px !important; } /* مهم: إلغاء overflow hidden السابق */ .features-home-grid .s-block--features__item { overflow: visible !important; background: #FFFAF0 !important; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05), 0 8px 20px rgba(0, 0, 0, 0.08) !important; } /* * إعطاء الأيقونة أعلى طبقة حتى تظهر * عندما ترتفع فوق حدود البطاقة */ .features-home-grid .feature-icon-div { position: relative !important; z-index: 50 !important; overflow: visible !important; } .features-home-grid .feature-icon { z-index: 51 !important; } }