/* تقسيم المنتجات في صفحة التصنيفات / المنتجات إلى عمودين في الجوال */
@media (max-width: 768px) {

  /* الشبكة الأساسية لمنتجات صفحة التصنيفات */
  .product-index .s-products-list-wrapper {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* عمودين */
  }

  /* بطاقات المنتجات الرأسية */
  .s-products-list-wrapper.s-products-list-vertical-cards {
    grid-template-columns: repeat(2, 1fr) !important; /* عمودين */
    gap: 10px;
    margin: auto;
  }

  /* لو بقي منتج واحد في الصف الأخير يتعامل معه عادي */
  .product-entry:nth-child(odd):last-child {
    grid-column: unset;
  }
}


/* ===========================================
   1) تغيير أيقونة القائمة (Menu Trigger)
   - يستبدل أيقونة المنيو الافتراضية بصورة
   - يخفي أيقونة الفونت الأصلية
   =========================================== */
.menu-trigger {
  background-image: url(https://i.ibb.co/pPBmrf6/menu-1.png); /* رابط أيقونة القائمة */
  width: 28px;
  height: 28px;
  background-size: 100%;
  background-position: center;
}

/* إخفاء أيقونة المنيو الأصلية داخل الزر */
.menu-trigger i {
  display: none;
}


/* ===========================================
   2) تغيير أيقونة حساب المستخدم في الهيدر
   - يحول زر الحساب إلى صورة (أفاتار) مخصّصة
   - يخفي أيقونة المستخدم الافتراضية
   =========================================== */
.header-btn:has(i.sicon-user) {
  background-image: url(https://i.ibb.co/bXCcf3b/user-2-1.png); /* صورة الحساب */
  width: 28px;
  height: 28px;
  background-size: 100%;
  background-position: center;
}

/* إخفاء أيقونة المستخدم الأصلية داخل الزر */
.header-btn:has(i.sicon-user) i {
  display: none;
}


/* ===========================================
   3) تغيير أيقونة السلة في الهيدر
   - يستبدل أيقونة السلة بصورة حقيبة/سلة مخصّصة
   - يخفي أيقونة السلة الافتراضية
   =========================================== */


/* ===========================================
   1) إخفاء التوب هيدر بالكامل
   - الشريط العلوي اللي فيه أيقونة الوضع الليلي وغيره
   =========================================== */
.top-navbar,
.store-header .s-topnav {
  display: none !important;
}

/* احتياطياً: إخفاء زر تبديل الوضع الليلي لو ظهر في مكان آخر */
.theme-mode-btn {
  display: none !important;
}

.s-block.s-block--photos-slider {
  margin-top: 10px;
}

.s-block.s-block--photos-slider img {
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* ضبط المسافات داخل سلايدر الصور */
salla-slider.photos-slider .swiper {
  padding-left: 14px !important;
  padding-right: 14px !important;
  padding-bottom: -30;
}

@media (min-width: 992px) {
  .header-search {
    display: none !important;
  }
}


/* استبدال شعار سلة بصورة GIF المتحركة */
.header-logo img,
.site-logo img,
.logo img,
.navbar-brand img {
    display: inline-block !important;      /* تأكد أن الشعار ظاهر */
    content: url('https://i.ibb.co/RkryptCL/Untitled-Made-with-Flex-Clip-6.gif') !important;  /* رابط الشعار المتحرك */
    height: 400px !important;               /* ارتفاع الشعار */
    width: auto !important;                /* يحافظ على التناسب */
}




/* لو كان عندك زر أو بلوك خاصة بالأقسام في الهيدر */
.header-categories,
.categories-dropdown {
  display: none !important;
}



/* تباعد الهيدر في الجوال */
@media (max-width: 991px) {
  .store-header .main-nav-container {
    padding-top: 10px !important;
    padding-bottom: 5px !important;
  }
}


/* إخفاء نقاط التنقل في الهوم */
.index .swiper-pagination.swiper-pagination-bullets.swiper-pagination-horizontal {
  display: none;
}




/* =========================================================
   20) تعديلات صفحة التصنيف في الجوال (max-width: 992px)
   تشمل عنوان الصفحة + وصف التصنيف + شكل الكروت
   ========================================================= */
@media (max-width: 992px) {

  .product-index .page-title-bar h1 {
    text-align: right !important;
    margin-bottom: 1rem;
    height: 37px;
    border-radius: 14px;
    color: var(--white-text);
    font-size: 17px;
    font-weight: 500 !important;
    padding-inline: 12px;
    width: 100%;
    line-height: 35px;
    background-image: radial-gradient(circle at 50% 30%, var(--secondary-background-light) 0, var(--primary-background-dark) 70%) !important;
  }

  /* شبكة المنتجات في صفحة التصنيف – عمودين في الجوال */
  .product-index .s-products-list-wrapper {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* شبكة الكروت العمودية – عمودين في الجوال */
  .s-products-list-wrapper.s-products-list-vertical-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin: auto;
  }

  /* ضبط بلوك المزايا في الهوم (الجوال) */
  .s-block--features.enhanced-store .s-block--features__item {
    padding: .625rem 0;
    border: none !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
  }

  .s-block--features__item:first-child {
    grid-column: unset;
  }

  .s-block--features__item .feature-icon .rounded-full {
    border-radius: 0;
    background-color: transparent !important;
  }

  .s-block--features.enhanced-store .s-block--features__item h4 {
    font-size: 1rem;
    text-align: center !important;
  }

  .s-block--features.enhanced-store .s-block--features__item p {
    font-size: .9rem;
    text-align: center !important;
  }

  
  /* صور التصنيفات في الجوال أصغر */
  .product-index .cat-col img {
    max-width: 500px;
    object-fit: cover;
    margin: auto;
    max-height: 1050px;
    border-radius: 5px !important;
  }

  .product-index .page-title-bar {
    border: none !important;
  }

  .product-index .page-title-bar h1 {
    text-align: center;
    margin-bottom: 1rem;
  }

  .product-index .category-description {
    justify-content: center;
    text-align: center;
    flex-direction: column;
    align-items: center;
  }

  .product-index .category-description .cat-feature {
    flex-direction: column;
  }

  .product-index .product-entry--cat {
    flex-direction: column;
  }

  .product-index .product-entry--cat .product-entry__image {
    height: 9rem;
    width: 9rem;
    padding: 0;
  }

}
  
/* روابط المينو في الجوال */
@media (max-width: 1024px) {

  #mobile-menu li > a {
    color: var(--primary-background-dark);
    font-weight: 500;
    padding: 12px 15px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  }

  #mobile-menu li > a:hover {
    background-color: rgba(0, 0, 0, 0.05);
  }

  .dark #mobile-menu li > a {
    color: var(--white-text);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .dark #mobile-menu li > a:hover {
    background-color: rgba(255, 255, 255, 0.1);
  }
}

/* جعل وصف المنتج كاملاً باللون الأبيض في صفحة المنتج */
.product-single .product__description,
.product-single .product__description *,
.dark .product__description,
.dark .product__description * {
    color: #ffffff !important;   /* كل النصوص داخل الوصف تكون بيضاء */
    opacity: 1 !important;       /* يلغي أي تعتيم مثل opacity-70 */
}

  /* تغيير لون الروابط داخل وصف المنتج إلى اللون المطلوب */
.product-single .product__description a,
.dark .product__description a {
    color: #FED023 !important;
    text-decoration: underline; /* ممكن تحذفها لو ما تبي خط */
}


  /* =========================================
   SPLASH SCREEN للشعار - تعمل على كل الأجهزة
   وتُستثنى منها صفحات: المنتج، التصنيف، السلة
   ========================================= */

/* السبلّاش الأساسية (تغطي الشاشة كاملة) */
body::before {
    content: "";
    position: fixed;
    inset: 0; /* top, right, bottom, left = 0 */
    background: #1F171E url("https://i.ibb.co/RkryptCL/Untitled-Made-with-Flex-Clip-6.gif")
                no-repeat center center;
    background-size: 180px auto;   /* حجم الشعار */
    z-index: 999999;
    opacity: 1;
    pointer-events: none;          /* لا تمنع الضغط بعد الاختفاء */
    animation: splash-hide 2.5s ease-out forwards;
}

/* أنيميشن الاختفاء */
@keyframes splash-hide {
    0%   { opacity: 1; }
    70%  { opacity: 1; }
    100% { opacity: 0; }
}

/* إلغاء السبلّاش عن صفحات المنتجات (product-single) */
body.product-single::before {
    display: none !important;
}

/* إلغاء السبلّاش عن صفحات التصنيفات (product-index) */
body.product-index::before {
    display: none !important;
}

/* إلغاء السبلّاش عن صفحة السلة (cart) إن وُجد */
body.cart::before {
    display: none !important;
}

/* =======================================================
   صفحة التصنيف – كمبيوتر فقط
   3 منتجات بالسطر + صورة المنتج بحجمها الطبيعي
   ======================================================= */
@media (min-width: 992px) {

  /* جعل الشبكة 3 أعمدة في الكمبيوتر فقط */
  .product-index .s-products-list-wrapper {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;  /* 3 منتجات لكل سطر */
    gap: 20px !important;                              /* مسافة بين المنتجات */
  }

  /* البطاقة تكون عمودية */
  .product-index .product-entry,
  .product-index .product-entry--vertical {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;   /* توسيط المحتوى */
    text-align: center !important;
  }

  /* الصورة بحجمها الطبيعي */
  .product-index .product-entry__image {
    width: 100% !important;
    height: auto !important;          /* ← أهم سطر، يلغي المقاس الإجباري */
    margin-bottom: 12px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }

  .product-index .product-entry__image img {
    width: 100% !important;
    height: auto !important;          /* ← يخلي الصورة طبيعية */
    object-fit: contain !important;   /* ← بدون قصّ، يظهر كامل */
  }

  /* المحتوى تحت الصورة */
  .product-index .product-entry__content {
    text-align: center !important;
    width: 100% !important;
  }
}


/* =======================================================
   توسيط كامل محتوى البطاقة في صفحة التصنيف – كمبيوتر فقط
   ======================================================= */
@media (min-width: 992px) {

  /* جعل الشبكة 3 منتجات بالسطر */
  .product-index .s-products-list-wrapper {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
  }

  /* البطاقة كاملة عمودية ومتمركزة */
  .product-index .product-entry,
  .product-index .product-entry--vertical {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;     /* ← توسيط أفقي */
    justify-content: flex-start !important;
    text-align: center !important;      /* ← توسيط النصوص */
  }

  /* توسيط محتوى العنصر الداخلي مباشرة */
  .product-index .product-entry__content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;      /* ← أهم شيء */
    justify-content: center !important;
    width: 100% !important;
    text-align: center !important;
  }

  /* توسيط السعر */
  .product-index .price-wrapper {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }

  /* الصورة تبقى طبيعية */
  .product-index .product-entry__image {
    width: 100% !important;
    height: auto !important;
    margin-bottom: 12px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }

  .product-index .product-entry__image img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }
}