/****************************************
   THEME V2 – Balanced + Luxury Shadowed
   متناسق – فاخر – ظلال ناعمة
*****************************************/
.bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(206 206 245);
    background-color: rgb(206 206 245);
}
/*---------------------------
  0) متغيرات عامة
----------------------------*/
:root {
  --color-primary: #6F54AB;
  --color-primary-soft: #F6F2FF;
  --color-secondary: #A58BDF;
  --color-accent: #FECACA;            /* لمسات خفيفة للخصومات إن وجدت */
  --color-bg: #FFFFFF;
  --color-bg-soft: #F9FAFB;
  --color-border-soft: #E5E7EB;
  --color-text-main: #111827;
  --color-text-sub: #6B7280;
  --radius-card: 18px;
  --radius-pill: 999px;
  --shadow-soft: 0 10px 30px rgba(15, 23, 42, 0.10);
  --shadow-strong: 0 18px 45px rgba(15, 23, 42, 0.18);
  --transition-fast: 0.18s ease-out;
  --transition-normal: 0.28s ease-out;
  --font-main: "Tajawal", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/*---------------------------
  1) أساسيات الصفحة
----------------------------*/
html,
body {
  font-family: var(--font-main);
  background: radial-gradient(circle at top, #F5F3FF 0, #FFFFFF 38%, #FFFFFF 100%);
  color: var(--color-text-main);
}

a {
  text-decoration: none;
  color: inherit;
  transition: color var(--transition-fast), opacity var(--transition-fast);
}

a:hover {
  color: var(--color-primary);
}

/* إزالة زحمة الحدود من جداول أو أماكن قديمة */
table,
td,
th {
  border-color: var(--color-border-soft);
}

/*---------------------------
  2) الهيدر (Header)
----------------------------*/
header.site-header,
.store-header,
.main-header {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
  padding-block: 8px;
}

@media (min-width: 992px) {
  header.site-header,
  .store-header,
  .main-header {
    position: sticky;
    top: 0;
    z-index: 60;
  }
}

/* الشعار */
header .logo img,
.store-header .logo img {
  height: 54px;
  width: auto;
  transition: transform var(--transition-fast), filter var(--transition-fast);
}

header .logo img:hover,
.store-header .logo img:hover {
  transform: translateY(-1px) scale(1.03);
  filter: drop-shadow(0 10px 18px rgba(111, 84, 171, 0.45));
}

/* عناصر القائمة */
header .main-menu > li > a,
.navbar-nav > li > a,
.navigation > li > a {
  position: relative;
  padding-inline: 14px;
  padding-block: 10px;
  font-weight: 600;
  font-size: 15px;
  color: var(--color-text-main);
  transition: color var(--transition-fast);
}

header .main-menu > li > a::after,
.navbar-nav > li > a::after,
.navigation > li > a::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 3px;
  height: 2px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--transition-fast);
}

header .main-menu > li:hover > a,
.navbar-nav > li:hover > a,
.navigation > li:hover > a {
  color: var(--color-primary);
}

header .main-menu > li:hover > a::after,
.navbar-nav > li:hover > a::after,
.navigation > li:hover > a::after {
  transform: scaleX(1);
}

/* أيقونات الهيدر (السلة – الحساب – البحث) */
.header-icons a,
.header-tools a,
header .icon-link {
  color: var(--color-primary);
  font-size: 18px;
  margin-inline: 6px;
  transition: transform var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast);
}

.header-icons a:hover,
.header-tools a:hover,
header .icon-link:hover {
  color: var(--color-secondary);
  transform: translateY(-2px);
  opacity: 1;
}

/*---------------------------
  3) عناوين الأقسام (saji_titles)
----------------------------*/
.saji_titles {
  text-align: center;
  margin-top: 26px;
  margin-bottom: 20px;
  position: relative;
}

.saji_titles h2 {
  font-size: 24px;
  font-weight: 800;
  color: var(--color-text-main);
  display: inline-block;
  padding-inline: 10px;
  position: relative;
}

.saji_titles h2::before {
  content: "";
  position: absolute;
  inset: -8px -18px;
  border-radius: 999px;
  background: radial-gradient(circle at top, #FFFFFF 0, #F5F3FF 60%, #F3E8FF 100%);
  z-index: -1;
  opacity: 0.7;
}

.saji_titles h2::after {
  content: "";
  position: absolute;
  right: 18%;
  left: 18%;
  bottom: -6px;
  margin: 0 auto;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
}

.saji_titles span {
  display: none !important;
}

/*---------------------------
  4) سلايدر الهيرو/البنرات العامة
----------------------------*/
.s-slider-container,
.home-slider,
.swiper-container {
  border-radius: 24px;
  overflow: hidden;
  background: #FFFFFF;
  box-shadow: var(--shadow-soft);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.s-slider-container:hover,
.home-slider:hover,
.swiper-container:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-strong);
}

/* تحسين lazy__bg للصور */
.lazy__bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity var(--transition-normal), transform var(--transition-normal), filter var(--transition-normal);
}

.lazy__bg.loaded {
  opacity: 1;
}

/*---------------------------
  5) كرت المنتج – Luxury Shadowed
----------------------------*/
.product-entry {
  position: relative;
  background: #FFFFFF;
  border-radius: var(--radius-card);
  padding: 12px 12px 16px;
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(148, 163, 184, 0.12);
  overflow: hidden;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-fast), background var(--transition-fast);
}

.product-entry::before {
  /* لمعة خفيفة داخلية */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top, rgba(255, 255, 255, 0.8) 0, transparent 45%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal);
}

.product-entry:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-strong);
  border-color: rgba(111, 84, 171, 0.4);
  background: radial-gradient(circle at top, #FFFFFF 0, #F9FAFF 70%, #FFFFFF 100%);
}

.product-entry:hover::before {
  opacity: 1;
}

/* صورة المنتج */
.product-entry .product-image,
.product-entry .product-image a {
  display: block;
  border-radius: 16px;
  overflow: hidden;
}

.product-entry .product-image img {
  width: 100%;
  display: block;
  transition: transform 0.35s ease, filter 0.35s ease;
}

.product-entry:hover .product-image img {
  transform: scale(1.04);
  filter: brightness(0.97);
}

/* نصوص المنتج */
.product-entry .product-title {
  margin-top: 10px;
  text-align: center;
  font-weight: 700;
  font-size: 15px;
  color: var(--color-text-main);
}

.product-entry .product-price,
.product-entry .price {
  margin-top: 4px;
  text-align: center;
  font-weight: 700;
  font-size: 14px;
  color: var(--color-primary);
}

.product-entry .product-details {
  margin-top: 4px;
  text-align: center;
  font-size: 13px;
  color: var(--color-text-sub);
}

/* زر إضافة للسلة – Luxury Glassy */
.product-entry salla-add-product-button button {
  width: 100%;
  margin-top: 12px;
  border-radius: var(--radius-pill) !important;
  border: 1px solid rgba(255, 255, 255, 0.75) !important;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)) !important;
  color: #FFFFFF !important;
  font-weight: 700;
  font-size: 14px;
  padding: 10px 0;
  box-shadow: 0 12px 26px rgba(111, 84, 171, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast);
}

.product-entry salla-add-product-button button:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(111, 84, 171, 0.7);
  filter: brightness(1.04);
}

.product-entry salla-add-product-button button:active {
  transform: translateY(0);
  box-shadow: 0 8px 20px rgba(111, 84, 171, 0.55);
}

/* إخفاء زر المفضلة في الكرت */
.product-entry .product_buttons,
.product_buttons {
  display: none !important;
}

/*---------------------------
  6) قسم "هدايا لكل لحظة" #main-links-2
----------------------------*/
#main-links-2 {
  padding-block: 22px;
}

/* الأيقونات الدائرية */
#main-links-2 .itme-categories-image .aspect-square {
  width: 110px;
  height: 110px;
  margin: 0 auto;
}

#main-links-2 .itme-categories-image .lazy__bg {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background-size: 68% auto !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.12);
  background-color: #FFFFFF;
}

/* الكرت اللي يحتوي الأيقونة + النص */
#main-links-2 .itme-cat-entry {
  gap: 6px;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast);
}

#main-links-2 .itme-cat-entry:hover {
  transform: translateY(-5px);
  filter: drop-shadow(0 10px 30px rgba(15, 23, 42, 0.22));
}

/* عنوان الأيقونة */
#main-links-2 .main-links-title {
  padding: 0;
  margin-top: 4px;
}

#main-links-2 .main-links-title strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-main);
}

#main-links-2 .main-links-title b {
  display: none !important;
}

/*---------------------------
  7) قسم أيقونات (باقات يد / فازات ...) 
----------------------------*/
/* استعمل id المناسب إذا يختلف، هنا مثال على #main-links-4 و #main-links-5 */
#main-links-4,
#main-links-5 {
  padding-block: 26px;
}

/* الكرت */
#main-links-4 .itme-cat-entry,
#main-links-5 .itme-cat-entry {
  background: #FFFFFF;
  border-radius: 20px;
  padding: 12px;
  box-shadow: var(--shadow-soft);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

#main-links-4 .itme-cat-entry:hover,
#main-links-5 .itme-cat-entry:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-strong);
}

/* الأيقونة */
#main-links-4 .itme-categories-image .aspect-square,
#main-links-5 .itme-categories-image .aspect-square {
  width: 110px;
  height: 110px;
  margin: 0 auto;
}

/*---------------------------
  8) قسم New Collection – #main-links-6
----------------------------*/
#main-links-6 {
  padding-block: 28px;
}

/* عنوان القسم */
#main-links-6 .saji_titles h2 {
  color: var(--color-text-main);
}

/* الكرت */
#main-links-6 .itme-cat-entry {
  background: #FFFFFF;
  border-radius: 20px;
  padding: 8px;
  box-shadow: var(--shadow-soft);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  height: 100%;
}

#main-links-6 .itme-cat-entry:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-strong);
}

/* نسبة البوستر 3:4 */
#main-links-6 .itme-categories-image .aspect-\[3\/4\] {
  position: relative;
  width: 100%;
  padding-top: calc(4 / 3 * 100%);
  border-radius: 16px;
  overflow: hidden;
}

/* الصورة داخل البوستر */
#main-links-6 .itme-categories-image .lazy__bg {
  position: absolute;
  inset: 0;
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  transition: transform 0.4s ease, filter 0.4s ease;
}

#main-links-6 .itme-cat-entry:hover .itme-categories-image .lazy__bg {
  transform: scale(1.04);
  filter: brightness(0.96);
}

/*---------------------------
  9) البنرات الجانبية / الشبكة
----------------------------*/
.special-banners-animations,
.banner-hero,
.banner-data {
  border-radius: 22px;
  overflow: hidden;
  position: relative;
}

/* صورة البنر */
.banner-hero-image {
  background-size: cover !important;
  background-position: center !important;
  transition: transform 0.5s ease, filter 0.5s ease;
}

.banner-hero:hover .banner-hero-image,
.banner-data:hover .banner-hero-image {
  transform: scale(1.05);
  filter: brightness(0.94);
}

/* overlay لطيف */
.banner-hero-overlay {
  background: linear-gradient(to top, rgba(15, 23, 42, 0.28), rgba(15, 23, 42, 0.04));
}

/*---------------------------
  10) الفوتر (Footer)
----------------------------*/
footer,
.store-footer,
.main-footer {
  background: radial-gradient(circle at top, #4C3A84 0, #2E1C59 50%, #1F1638 100%);
  color: #F9FAFB;
  padding-top: 26px;
  padding-bottom: 16px;
}

footer a,
.store-footer a,
.main-footer a {
  color: #F9FAFB;
}

footer a:hover,
.store-footer a:hover,
.main-footer a:hover {
  color: var(--color-secondary);
}

footer .footer-section-title,
.store-footer .footer-section-title,
.main-footer .footer-section-title {
  font-weight: 700;
  margin-bottom: 8px;
}

/*---------------------------
  11) أزرار عامة خارج الكروت
----------------------------*/
button,
.s-button-element,
.s-button-btn {
  border-radius: var(--radius-pill);
  font-family: var(--font-main);
  font-weight: 600;
}

/* زر أساسي */
.s-button-primary,
.s-button-solid.s-button-primary {
  background: var(--color-primary) !important;
  color: #FFFFFF !important;
  border: none !important;
  box-shadow: 0 8px 20px rgba(111, 84, 171, 0.45);
  transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast);
}

.s-button-primary:hover,
.s-button-solid.s-button-primary:hover {
  background: var(--color-secondary) !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(111, 84, 171, 0.7);
  filter: brightness(1.03);
}

.s-button-primary:active,
.s-button-solid.s-button-primary:active {
  transform: translateY(0);
  box-shadow: 0 8px 18px rgba(111, 84, 171, 0.6);
}
/****************************************
   تحسين قسم "اكتشف أفكار هدايا رائعة"
   (غالباً id = main-links-4)
*****************************************/

/* الكرت الخارجي للقسم كامل */
#main-links-4 .swiper_categories {
  background: #FFFFFF;
  border-radius: 26px;
  padding: 18px 8px 22px;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.12);
}

/* إزالة الشادو من كل عنصر داخل السلايدر
   عشان ما تطلع "تموجات" تحت */
#main-links-4 .itme-cat-entry {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* كرت الأيقونة نفسه يكون بسيط وخفيف */
#main-links-4 .itme-categories-image .aspect-square {
  width: 110px;
  height: 110px;
  margin: 0 auto;
}

#main-links-4 .itme-categories-image .lazy__bg {
  border-radius: 999px;
  background-size: 68% auto !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color: #FFFFFF;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.10);
}

/* عنوان الأيقونة تحت */
#main-links-4 .main-links-title {
  padding: 0;
  margin-top: 6px;
}

#main-links-4 .main-links-title strong {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
}

/* تضبيط النقاط أسفل السلايدر داخل الكرت */
#main-links-4 .swiper-pagination-bullets {
  bottom: 4px !important;
}

#main-links-4 .swiper-pagination-bullet {
  background: rgba(111,84,171,0.25);
}

#main-links-4 .swiper-pagination-bullet-active {
  background: #6F54AB;
}
/* كيرف ناعم وفخم للصورة */
.card-slide img,
.card-slide-first img {
    border-radius: 0 !important;
    border-bottom-left-radius: 45px !important;
    border-bottom-right-radius: 45px !important;
    overflow: hidden !important;
}

/* نضمن القص */
.card-slide,
.card-slide-first,
.product-entry {
    overflow: hidden !important;
}