/* Add custom CSS styles below */ 
/* ============================================================
   توتيا — تطوير الواجهة الكامل | ستايل نظيف مستوحى من eyewa
   النسخة: 3.0 | ألوان البراند الجديدة
   ------------------------------------------------------------
   الرئيسي: #7d5ca0   |   الفرعي: #ba7faf
   مكان اللصق: لوحة سلة ← تصميم المتجر ← تخصيص ← CSS مخصص
   ============================================================ */

:root {
  --t-primary: #7d5ca0;
  --t-secondary: #ba7faf;
  --t-primary-dark: #654a83;
  --t-primary-soft: #f0eaf6;
  --t-primary-tint: #f8f5fb;
  --t-grad: linear-gradient(135deg, #7d5ca0, #ba7faf);
  --t-ink: #2c2440;
  --t-muted: #8b8597;
  --t-line: #eee9f3;
  --t-bg: #ffffff;
  --t-surface: #faf9fc;
  --t-sale: #d4537e;
  --t-r-sm: 12px;
  --t-r: 16px;
  --t-r-lg: 22px;
  --t-r-xl: 28px;
  --t-shadow-sm: 0 2px 10px rgba(44, 36, 64, 0.05);
  --t-shadow: 0 6px 22px rgba(44, 36, 64, 0.07);
  --t-shadow-hover: 0 14px 38px rgba(125, 92, 160, 0.2);
  --t-ease: 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  --t-gap: 18px;
}

/* 0) أساسيات */
body {
  background: var(--t-bg) !important;
  color: var(--t-ink) !important;
  -webkit-font-smoothing: antialiased;
}
* { scroll-behavior: smooth; }
.s-block, section.s-block { margin-block: clamp(32px, 5vw, 64px) !important; }
.s-block-title, .section-title, .s-block h2 {
  font-weight: 700 !important;
  font-size: clamp(19px, 2.4vw, 24px) !important;
  color: var(--t-ink) !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 18px !important;
}

/* 1) الهيدر */
header, .s-header, #header {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  box-shadow: var(--t-shadow-sm) !important;
  border-bottom: 1px solid var(--t-line) !important;
}
header a, .s-header a, .main-menu a {
  font-weight: 500 !important;
  color: var(--t-ink) !important;
  transition: color var(--t-ease) !important;
}
header a:hover, .main-menu a:hover { color: var(--t-primary) !important; }
.s-header svg, header .icon { transition: transform var(--t-ease) !important; }
.s-header svg:hover { transform: scale(1.12); }

/* 2) البنرات / السلايدر */
.salla-slider, .s-block-main-slider, .main-slider, .banner-slider {
  border-radius: var(--t-r-xl) !important;
  overflow: hidden !important;
  box-shadow: var(--t-shadow) !important;
}
.salla-slider img, .main-slider img, .banner-slider img {
  border-radius: var(--t-r-xl) !important;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.salla-slider:hover img, .main-slider:hover img { transform: scale(1.03); }
.swiper-pagination-bullet {
  background: var(--t-primary) !important;
  opacity: 0.28 !important;
  transition: all var(--t-ease) !important;
}
.swiper-pagination-bullet-active {
  opacity: 1 !important;
  width: 24px !important;
  border-radius: 6px !important;
  background: var(--t-grad) !important;
}
.swiper-button-next, .swiper-button-prev {
  background: rgba(255, 255, 255, 0.9) !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  box-shadow: var(--t-shadow) !important;
  color: var(--t-primary) !important;
  transition: all var(--t-ease) !important;
}
.swiper-button-next:hover, .swiper-button-prev:hover {
  background: var(--t-primary) !important;
  color: #fff !important;
}
.swiper-button-next::after, .swiper-button-prev::after { font-size: 16px !important; }

/* 3) كروت المنتجات */
.product-entry, .s-product-card-entry, .product-card, salla-product-card {
  background: var(--t-bg) !important;
  border: 1px solid var(--t-line) !important;
  border-radius: var(--t-r) !important;
  overflow: hidden !important;
  box-shadow: none !important;
  transition: transform var(--t-ease), box-shadow var(--t-ease), border-color var(--t-ease) !important;
}
.product-entry:hover, .s-product-card-entry:hover, .product-card:hover, salla-product-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--t-shadow-hover) !important;
  border-color: var(--t-secondary) !important;
}
.product-entry img, .s-product-card-image img, .product-card img {
  border-radius: var(--t-r-sm) var(--t-r-sm) 0 0 !important;
  transition: transform var(--t-ease) !important;
  background: var(--t-surface) !important;
}
.product-entry:hover img { transform: scale(1.05); }
.s-product-card-content-title, .product-entry .title, .product-card h3 {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--t-ink) !important;
  line-height: 1.4 !important;
}
.s-product-card-price, .product-entry .price, .price {
  font-weight: 700 !important;
  color: var(--t-ink) !important;
  font-size: 15px !important;
}
.s-product-card-sale-price, .product-entry .offer, del, .was-price {
  color: var(--t-muted) !important;
  text-decoration: line-through !important;
  font-size: 12px !important;
  font-weight: 400 !important;
}
.s-product-card-promotion-title, .product-entry .promotion-title, .discount-badge, .sale-badge {
  background: var(--t-grad) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  box-shadow: 0 2px 8px rgba(125, 92, 160, 0.3) !important;
}
.s-button-element.s-button-icon, .product-entry .add-to-cart, .add-btn {
  border-radius: 50% !important;
  background: var(--t-primary-soft) !important;
  color: var(--t-primary) !important;
  border: none !important;
  transition: all var(--t-ease) !important;
}
.s-button-element.s-button-icon:hover, .product-entry .add-to-cart:hover {
  background: var(--t-primary) !important;
  color: #fff !important;
  transform: scale(1.1) !important;
}
.s-product-card-wishlist-btn {
  background: rgba(255, 255, 255, 0.9) !important;
  border-radius: 50% !important;
  box-shadow: var(--t-shadow-sm) !important;
  transition: all var(--t-ease) !important;
}
.s-product-card-wishlist-btn:hover { transform: scale(1.15) !important; color: var(--t-sale) !important; }

/* 4) كروت الأقسام */
.s-block-photos a, .banner-boxes a, .fixed-banners a, .category-card {
  border-radius: var(--t-r-lg) !important;
  overflow: hidden !important;
  box-shadow: var(--t-shadow-sm) !important;
  transition: transform var(--t-ease), box-shadow var(--t-ease) !important;
  display: block !important;
}
.s-block-photos a:hover, .banner-boxes a:hover, .fixed-banners a:hover, .category-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--t-shadow-hover) !important;
}
.s-block-photos img, .banner-boxes img, .category-card img {
  border-radius: var(--t-r-lg) !important;
  transition: transform var(--t-ease) !important;
}
.s-block-photos a:hover img { transform: scale(1.04); }

/* 5) شبكة الماركات */
.brands-list, .s-block-brands ul, .brands-grid, .s-brands-slider {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)) !important;
  gap: var(--t-gap) !important;
  list-style: none !important;
  padding: 0 !important;
}
.brands-list li, .s-block-brands li, .brand-item {
  background: var(--t-bg) !important;
  border: 1px solid var(--t-line) !important;
  border-radius: var(--t-r) !important;
  padding: 18px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  margin: 0 !important;
  transition: transform var(--t-ease), box-shadow var(--t-ease), border-color var(--t-ease) !important;
}
.brands-list li:hover, .s-block-brands li:hover, .brand-item:hover {
  transform: translateY(-5px) !important;
  box-shadow: var(--t-shadow-hover) !important;
  border-color: var(--t-secondary) !important;
}
.brands-list li img, .brand-item img {
  max-height: 54px !important;
  width: auto !important;
  object-fit: contain !important;
  filter: grayscale(20%) !important;
  transition: filter var(--t-ease), transform var(--t-ease) !important;
}
.brands-list li:hover img, .brand-item:hover img { filter: grayscale(0%) !important; transform: scale(1.06) !important; }
.brand-item h4, .brands-list li h4 {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--t-muted) !important;
  margin: 0 !important;
}

/* 6) الإحصائيات */
.numbers-block, .stats-block, .s-block-stats {
  background: var(--t-primary-soft) !important;
  border-radius: var(--t-r-xl) !important;
  padding: clamp(28px, 4vw, 48px) !important;
}
.numbers-block .number, .stats-block h4, .s-block-stats .count {
  color: var(--t-primary) !important;
  font-weight: 800 !important;
  font-size: clamp(30px, 4.5vw, 46px) !important;
  letter-spacing: -0.03em !important;
}

/* 7) الأكورديون */
.s-block-faq details, .accordion-item, .faq-item {
  background: var(--t-surface) !important;
  border: 1px solid var(--t-line) !important;
  border-radius: var(--t-r-sm) !important;
  margin-bottom: 12px !important;
  overflow: hidden !important;
  transition: box-shadow var(--t-ease), border-color var(--t-ease) !important;
}
.s-block-faq details[open], .accordion-item.active {
  box-shadow: var(--t-shadow) !important;
  border-color: var(--t-secondary) !important;
}
.s-block-faq summary { font-weight: 500 !important; color: var(--t-ink) !important; padding: 16px !important; cursor: pointer !important; }

/* 8) الأزرار */
.btn, .s-button-element, a.button, button.primary {
  border-radius: 999px !important;
  font-weight: 600 !important;
  transition: transform var(--t-ease), box-shadow var(--t-ease), background var(--t-ease) !important;
}
.btn-primary, .s-button-element.primary, button.primary {
  background: var(--t-primary) !important;
  border-color: var(--t-primary) !important;
}
.btn:hover, .s-button-element:hover, a.button:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--t-shadow-hover) !important;
}
.btn-primary:hover { background: var(--t-primary-dark) !important; }

/* 9) الفوتر */
footer, .s-footer { background: var(--t-surface) !important; border-top: 1px solid var(--t-line) !important; }
footer a:hover { color: var(--t-primary) !important; }

/* 10) سكرول بار */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--t-surface); }
::-webkit-scrollbar-thumb { background: #d2c2e0; border-radius: 999px; border: 2px solid var(--t-surface); }
::-webkit-scrollbar-thumb:hover { background: var(--t-primary); }

/* 11) ظهور تدريجي */
.t-reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.t-reveal.t-visible { opacity: 1; transform: translateY(0); }

/* 12) موبايل */
@media (max-width: 768px) {
  :root { --t-gap: 12px; }
  .brands-list, .s-block-brands ul { grid-template-columns: repeat(auto-fill, minmax(95px, 1fr)) !important; }
  .brands-list li img { max-height: 42px !important; }
  .salla-slider, .main-slider { border-radius: var(--t-r-lg) !important; }
}


/* ============================================================
   13) لمسات أنيميشن احترافية — أيقونات وصور
   ============================================================ */

/* ---- 13.1 الأيقونات: نبضة + دوران خفيف عند المرور ---- */
.s-header svg,
header .icon,
.icon-cart,
.icon-search,
.icon-account,
.s-header a i,
.menu-icon {
  transition: transform var(--t-ease), color var(--t-ease) !important;
}
.s-header svg:hover,
header .icon:hover,
.icon-cart:hover,
.icon-search:hover,
.icon-account:hover,
.s-header a:hover i {
  transform: translateY(-2px) scale(1.15) !important;
  color: var(--t-primary) !important;
}

/* أيقونة السلة: هزة بسيطة عند الإضافة */
@keyframes t-cart-bounce {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-5px) rotate(-8deg); }
  60% { transform: translateY(0) rotate(6deg); }
}
.icon-cart:active,
.s-cart-icon:active { animation: t-cart-bounce 0.5s ease; }

/* ---- 13.2 أيقونة المفضلة: نبض قلب ---- */
@keyframes t-heart-beat {
  0%, 100% { transform: scale(1); }
  25% { transform: scale(1.25); }
  50% { transform: scale(1.1); }
  75% { transform: scale(1.2); }
}
.s-product-card-wishlist-btn:hover i,
.wishlist-btn:hover { animation: t-heart-beat 0.7s ease; }

/* ---- 13.3 الصور: زووم ناعم + لمعة (shine) تمر فوق الصورة ---- */
.product-entry,
.s-product-card-entry,
.product-card {
  position: relative !important;
}

/* تأثير اللمعة على صور المنتجات */
.s-product-card-image,
.product-entry .image-wrap,
.product-card .img-box {
  position: relative !important;
  overflow: hidden !important;
}
.s-product-card-image::after,
.product-entry .image-wrap::after,
.product-card .img-box::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: -120% !important;
  width: 60% !important;
  height: 100% !important;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.55), transparent) !important;
  transform: skewX(-20deg) !important;
  transition: left 0.7s ease !important;
  pointer-events: none !important;
  z-index: 2 !important;
}
.product-entry:hover .s-product-card-image::after,
.product-entry:hover .image-wrap::after,
.product-card:hover .img-box::after {
  left: 130% !important;
}

/* ---- 13.4 كروت الأقسام: زووم + لمعة برضو ---- */
.s-block-photos a,
.banner-boxes a,
.category-card {
  position: relative !important;
}
.s-block-photos a::after,
.banner-boxes a::after,
.category-card::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: -120% !important;
  width: 50% !important;
  height: 100% !important;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.4), transparent) !important;
  transform: skewX(-20deg) !important;
  transition: left 0.8s ease !important;
  pointer-events: none !important;
  z-index: 2 !important;
}
.s-block-photos a:hover::after,
.banner-boxes a:hover::after,
.category-card:hover::after {
  left: 140% !important;
}

/* ---- 13.5 لوجوهات الماركات: طفو لطيف مستمر ---- */
@keyframes t-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.brand-item:hover img,
.brands-list li:hover img {
  animation: t-float 1.8s ease-in-out infinite !important;
}

/* ---- 13.6 زر "تسوّق الآن" والأزرار الرئيسية: نبض جذب خفيف ---- */
@keyframes t-pulse-glow {
  0%, 100% { box-shadow: 0 6px 22px rgba(125, 92, 160, 0.25); }
  50% { box-shadow: 0 6px 30px rgba(186, 127, 175, 0.5); }
}
.btn-primary,
.hero-btn,
.s-button-element.primary {
  animation: t-pulse-glow 2.6s ease-in-out infinite !important;
}
.btn-primary:hover,
.hero-btn:hover {
  animation: none !important;
}

/* السهم جوّه الزر يتحرك */
.btn-primary i,
.hero-btn i { transition: transform var(--t-ease) !important; }
.btn-primary:hover i,
.hero-btn:hover i { transform: translateX(-5px) !important; }

/* ---- 13.7 شارة الخصم: نبضة لطيفة تلفت الانتباه ---- */
@keyframes t-badge-pop {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
.s-product-card-promotion-title,
.discount-badge,
.sale-badge {
  animation: t-badge-pop 2.2s ease-in-out infinite !important;
}

/* ---- 13.8 احترام تفضيل تقليل الحركة (إتاحة + أداء) ---- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.15s !important;
  }
}