/* ================================================================
   سُدرة | SOUDRAH — ثيم متجر سلة
   اللون المسيطر: Rose Cream
   الإصدار: 2.0
   طريقة الاستخدام: الإعدادات ← تصميم المتجر ← CSS مخصص
   ================================================================ */

/* ── استيراد الخطوط ── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Tajawal:wght@200;300;400;500&display=swap');


/* ================================================================
   1. متغيرات الهوية البصرية
   ================================================================ */
:root {
  /* ── الألوان الأساسية ── */
  --s-cream:          #FDF6F7;   /* Rose Cream — الخلفية الرئيسية ★ */
  --s-cream-warm:     #FAF0F2;   /* خلفية أعمق قليلاً */
  --s-cream-deep:     #F5E4E8;   /* الكروت والأقسام */

  --s-rose:           #8B4A5C;   /* الأزرار والعناوين */
  --s-rose-light:     #C47A8A;   /* hover */
  --s-rose-soft:      #D4919F;   /* تفاصيل ناعمة */
  --s-rose-deep:      #6A2E3E;   /* الفوتر والهيدر الداكن */

  --s-petal:          #F2B8C0;   /* وردي بتلة */
  --s-petal-light:    #FAE4E8;   /* الحدود والفواصل */

  /* ── ألوان النص ── */
  --s-text:           #3D1520;
  --s-text-sub:       #7A4455;
  --s-text-muted:     #B890A0;

  /* ── متفرقات ── */
  --s-white:          #FFFFFF;
  --s-border:         #EDD5DC;

  /* ── الخطوط ── */
  --s-font-display:   'Cormorant Garamond', Georgia, serif;
  --s-font-body:      'Tajawal', Arial, sans-serif;

  /* ── الظلال ── */
  --s-shadow-xs:  0 2px 12px rgba(139,74,92,0.06);
  --s-shadow-sm:  0 4px 24px rgba(139,74,92,0.09);
  --s-shadow-md:  0 8px 40px rgba(139,74,92,0.14);
  --s-shadow-lg:  0 16px 60px rgba(139,74,92,0.20);

  /* ── الانتقالات ── */
  --s-ease:       0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --s-ease-lg:    0.55s cubic-bezier(0.16, 1, 0.3, 1);

  /* ── الحواف ── */
  --s-radius-sm:  6px;
  --s-radius-md:  12px;
  --s-radius-lg:  20px;
  --s-radius-pill:9999px;
}


/* ================================================================
   2. إعادة الضبط العامة
   ================================================================ */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: var(--s-font-body) !important;
  background-color: var(--s-cream) !important;
  color: var(--s-text) !important;
  direction: rtl;
  -webkit-font-smoothing: antialiased;
}

/* طبقة نسيج خفيف على كامل الصفحة */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9998;
  opacity: 0.5;
}

img { max-width: 100%; }
a   { transition: color var(--s-ease); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--s-font-display) !important;
  font-weight: 400;
  color: var(--s-text) !important;
  line-height: 1.2;
}

p, span, li, label {
  font-family: var(--s-font-body) !important;
}


/* ================================================================
   3. شريط الإعلانات العلوي
   ================================================================ */
.announcement-bar,
.salla-announcement-bar,
[class*="announcement"] {
  background: var(--s-rose) !important;
  color: var(--s-cream) !important;
  font-family: var(--s-font-body) !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.15em;
}

.announcement-bar a,
[class*="announcement"] a {
  color: var(--s-petal) !important;
}


/* ================================================================
   4. الهيدر / رأس الصفحة
   ================================================================ */
header,
.site-header,
.s-header,
#header,
[class*="site-header"],
[class*="s-header"] {
  background: rgba(253, 246, 247, 0.96) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid var(--s-border) !important;
  box-shadow: 0 2px 20px rgba(139,74,92,0.06) !important;
  transition: box-shadow var(--s-ease) !important;
}

/* اللوغو */
.site-logo img,
.s-header__logo img,
header .logo img {
  transition: transform var(--s-ease) !important;
}

.site-logo:hover img,
.s-header__logo:hover img {
  transform: scale(1.04) !important;
}

/* اسم المتجر */
.site-logo span,
.store-name,
[class*="store-name"] {
  font-family: var(--s-font-display) !important;
  font-style: italic !important;
  color: var(--s-rose) !important;
  letter-spacing: 0.05em !important;
}

/* روابط التنقل */
nav a,
.s-header__nav a,
.main-nav a,
[class*="nav-link"] {
  font-family: var(--s-font-body) !important;
  font-size: 0.88rem !important;
  color: var(--s-text-sub) !important;
  letter-spacing: 0.06em !important;
  position: relative !important;
  padding-bottom: 4px !important;
  transition: color var(--s-ease) !important;
}

nav a::after,
.s-header__nav a::after,
.main-nav a::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  right: 0 !important;
  width: 0 !important;
  height: 1px !important;
  background: var(--s-rose) !important;
  transition: width var(--s-ease) !important;
}

nav a:hover,
.s-header__nav a:hover,
.main-nav a:hover {
  color: var(--s-rose) !important;
}

nav a:hover::after,
.s-header__nav a:hover::after,
.main-nav a:hover::after {
  width: 100% !important;
  right: auto !important;
  left: 0 !important;
}

/* أيقونات الهيدر (سلة، مفضلة، بحث) */
.s-header__actions button,
.header-icon,
[class*="header-icon"],
[class*="cart-icon"],
[class*="wishlist-icon"],
[class*="search-icon"] {
  color: var(--s-text-sub) !important;
  transition: all var(--s-ease) !important;
  border-radius: var(--s-radius-pill) !important;
}

.s-header__actions button:hover,
.header-icon:hover {
  color: var(--s-rose) !important;
  background: var(--s-petal-light) !important;
}

/* عداد السلة */
.cart-count,
.s-header__cart-count,
[class*="cart-count"],
[class*="badge"] {
  background: var(--s-rose) !important;
  color: var(--s-cream) !important;
  font-family: var(--s-font-body) !important;
  border: 2px solid var(--s-cream) !important;
}


/* ================================================================
   5. الصفحة الرئيسية — البانر الرئيسي (Hero)
   ================================================================ */
.hero,
.s-hero,
.slider,
[class*="hero-section"],
[class*="main-slider"],
[class*="home-slider"] {
  background: linear-gradient(
    135deg,
    var(--s-cream-deep) 0%,
    var(--s-cream)      45%,
    var(--s-cream-warm) 100%
  ) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* إضاء وردية خلفية */
.hero::before,
.s-hero::before,
[class*="hero-section"]::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(
    ellipse 65% 70% at 25% 50%,
    rgba(242,184,192,0.4),
    transparent 65%
  ) !important;
  pointer-events: none !important;
  animation: soudrahGlow 7s ease-in-out infinite alternate !important;
}

@keyframes soudrahGlow {
  0%   { opacity: 0.5; transform: scale(1); }
  100% { opacity: 1;   transform: scale(1.06); }
}

/* نص البانر */
.hero h1,
.hero h2,
.s-hero h1,
.s-hero h2,
[class*="hero"] h1,
[class*="hero"] h2,
[class*="slider"] h1,
[class*="slider"] h2 {
  font-family: var(--s-font-display) !important;
  font-weight: 300 !important;
  color: var(--s-text) !important;
  line-height: 1.1 !important;
}

[class*="hero"] p,
[class*="slider"] p {
  color: var(--s-text-sub) !important;
  font-weight: 300 !important;
  line-height: 1.85 !important;
}


/* ================================================================
   6. الأزرار
   ================================================================ */

/* الزر الأساسي */
.btn,
button,
.s-btn,
[class*="s-btn"],
input[type="submit"],
input[type="button"] {
  font-family: var(--s-font-body) !important;
  letter-spacing: 0.08em !important;
  border-radius: var(--s-radius-pill) !important;
  transition: all var(--s-ease) !important;
  cursor: pointer !important;
}

.btn-primary,
.s-btn--primary,
[class*="btn-primary"],
[class*="s-btn--primary"],
.add-to-cart,
[class*="add-to-cart"] {
  background: var(--s-rose) !important;
  color: var(--s-cream) !important;
  border: none !important;
  padding: 13px 32px !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  border-radius: var(--s-radius-pill) !important;
  box-shadow: 0 4px 16px rgba(139,74,92,0.2) !important;
  position: relative !important;
  overflow: hidden !important;
}

.btn-primary:hover,
.s-btn--primary:hover,
[class*="btn-primary"]:hover,
[class*="add-to-cart"]:hover {
  background: var(--s-rose-deep) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(139,74,92,0.3) !important;
}

.btn-primary:active,
[class*="add-to-cart"]:active {
  transform: scale(0.98) translateY(0) !important;
}

/* تأثير موجة عند الضغط */
.btn-primary::after,
[class*="add-to-cart"]::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(255,255,255,0.15) !important;
  opacity: 0 !important;
  transition: opacity 0.2s !important;
}

.btn-primary:active::after,
[class*="add-to-cart"]:active::after {
  opacity: 1 !important;
}

/* الزر الثانوي */
.btn-secondary,
.s-btn--outline,
[class*="btn-secondary"],
[class*="s-btn--outline"] {
  background: transparent !important;
  color: var(--s-rose) !important;
  border: 1.5px solid var(--s-rose) !important;
  padding: 12px 30px !important;
  font-size: 0.88rem !important;
  border-radius: var(--s-radius-pill) !important;
}

.btn-secondary:hover,
[class*="btn-secondary"]:hover {
  background: var(--s-petal-light) !important;
  transform: translateY(-2px) !important;
}

/* زر "اشتري الآن" */
.buy-now,
[class*="buy-now"] {
  background: linear-gradient(135deg, var(--s-rose), var(--s-rose-light)) !important;
  color: var(--s-cream) !important;
  border: none !important;
  border-radius: var(--s-radius-pill) !important;
}

.buy-now:hover,
[class*="buy-now"]:hover {
  opacity: 0.9 !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--s-shadow-md) !important;
}


/* ================================================================
   7. كروت المنتجات
   ================================================================ */
.product-card,
.s-product-card,
[class*="product-card"],
[class*="s-product-card"] {
  background: var(--s-white) !important;
  border: 1px solid var(--s-petal-light) !important;
  border-radius: var(--s-radius-lg) !important;
  overflow: hidden !important;
  box-shadow: var(--s-shadow-sm) !important;
  transition: all var(--s-ease-lg) !important;
}

.product-card:hover,
.s-product-card:hover,
[class*="product-card"]:hover {
  transform: translateY(-8px) !important;
  box-shadow: var(--s-shadow-lg) !important;
  border-color: var(--s-petal) !important;
}

/* صورة المنتج */
.product-card__image,
[class*="product-card__image"],
[class*="product-image"] {
  overflow: hidden !important;
  background: var(--s-cream-deep) !important;
}

.product-card__image img,
[class*="product-card__image"] img,
[class*="product-image"] img {
  transition: transform var(--s-ease-lg) !important;
}

.product-card:hover .product-card__image img,
[class*="product-card"]:hover [class*="product-image"] img {
  transform: scale(1.06) !important;
}

/* اسم المنتج */
.product-card__name,
[class*="product-card__name"],
[class*="product-name"],
.product-title {
  font-family: var(--s-font-display) !important;
  font-size: 1.15rem !important;
  font-weight: 400 !important;
  color: var(--s-text) !important;
  line-height: 1.3 !important;
}

/* التصنيف */
.product-card__category,
[class*="product-category"] {
  font-size: 0.7rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--s-rose-light) !important;
}

/* السعر */
.product-card__price,
[class*="product-price"],
.price,
[class*="s-price"] {
  font-family: var(--s-font-display) !important;
  font-size: 1.15rem !important;
  font-weight: 500 !important;
  color: var(--s-rose) !important;
}

.product-card__price--old,
[class*="price--old"],
[class*="price-before"],
s, del {
  color: var(--s-text-muted) !important;
  font-size: 0.88rem !important;
}

/* شارة "جديد" / "تخفيض" */
.badge,
.product-badge,
[class*="product-badge"],
[class*="s-badge"] {
  font-family: var(--s-font-body) !important;
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  border-radius: var(--s-radius-pill) !important;
  padding: 4px 12px !important;
}

.badge--new,
[class*="badge--new"],
[class*="badge-new"] {
  background: var(--s-rose-light) !important;
  color: white !important;
}

.badge--sale,
[class*="badge--sale"],
[class*="badge-sale"] {
  background: var(--s-rose) !important;
  color: var(--s-cream) !important;
}

/* زر المفضلة */
.wishlist-btn,
[class*="wishlist"],
[class*="favorite"] {
  border-radius: 50% !important;
  transition: all var(--s-ease) !important;
}

.wishlist-btn:hover,
[class*="wishlist"]:hover {
  color: var(--s-rose) !important;
  background: var(--s-petal-light) !important;
  transform: scale(1.12) !important;
}

.wishlist-btn.active,
[class*="wishlist"].active {
  color: var(--s-rose) !important;
}


/* ================================================================
   8. صفحة المنتج
   ================================================================ */

/* صور المنتج */
.product-gallery__main,
[class*="product-gallery__main"],
[class*="product-main-image"] {
  border-radius: var(--s-radius-lg) !important;
  overflow: hidden !important;
  border: 1px solid var(--s-border) !important;
  background: var(--s-cream-deep) !important;
}

.product-gallery__thumb,
[class*="product-gallery__thumb"],
[class*="product-thumb"] {
  border-radius: var(--s-radius-sm) !important;
  border: 2px solid transparent !important;
  overflow: hidden !important;
  transition: border-color var(--s-ease) !important;
  cursor: pointer !important;
}

.product-gallery__thumb:hover,
.product-gallery__thumb.active,
[class*="product-thumb"]:hover,
[class*="product-thumb"].active {
  border-color: var(--s-rose) !important;
}

/* عنوان المنتج */
.product-title,
.product__title,
[class*="product-title"],
[class*="product__title"] {
  font-family: var(--s-font-display) !important;
  font-size: clamp(1.8rem, 2.5vw, 2.4rem) !important;
  font-weight: 400 !important;
  color: var(--s-text) !important;
  line-height: 1.2 !important;
}

/* السعر في صفحة المنتج */
.product-price,
.product__price,
[class*="product-price"],
[class*="product__price"] {
  font-family: var(--s-font-display) !important;
  font-size: 1.8rem !important;
  color: var(--s-rose) !important;
  font-weight: 500 !important;
}

/* اختيار المقاس */
.size-option,
[class*="size-option"],
[class*="variant-option"] {
  border: 1.5px solid var(--s-border) !important;
  border-radius: var(--s-radius-sm) !important;
  padding: 8px 18px !important;
  font-family: var(--s-font-body) !important;
  font-size: 0.88rem !important;
  cursor: pointer !important;
  transition: all var(--s-ease) !important;
  background: transparent !important;
  color: var(--s-text-sub) !important;
}

.size-option:hover,
[class*="size-option"]:hover,
[class*="variant-option"]:hover {
  border-color: var(--s-rose) !important;
  color: var(--s-rose) !important;
}

.size-option.active,
.size-option.selected,
[class*="size-option"].active,
[class*="variant-option"].active {
  background: var(--s-rose) !important;
  border-color: var(--s-rose) !important;
  color: var(--s-cream) !important;
}

/* اختيار اللون */
.color-swatch,
[class*="color-swatch"] {
  border-radius: 50% !important;
  border: 2px solid transparent !important;
  transition: all var(--s-ease) !important;
}

.color-swatch:hover,
.color-swatch.active,
[class*="color-swatch"]:hover {
  border-color: var(--s-rose) !important;
  transform: scale(1.1) !important;
}

/* وصف المنتج */
.product-description,
[class*="product-description"],
[class*="product__description"] {
  font-family: var(--s-font-body) !important;
  color: var(--s-text-sub) !important;
  line-height: 1.9 !important;
  font-size: 0.95rem !important;
}


/* ================================================================
   9. شريط البحث
   ================================================================ */
.search-input,
[class*="search-input"],
[class*="search-bar"] input,
input[type="search"],
input[type="text"] {
  font-family: var(--s-font-body) !important;
  border: 1.5px solid var(--s-border) !important;
  border-radius: var(--s-radius-pill) !important;
  padding: 10px 18px !important;
  background: var(--s-cream) !important;
  color: var(--s-text) !important;
  transition: border-color var(--s-ease) !important;
  outline: none !important;
}

input[type="search"]:focus,
input[type="text"]:focus,
[class*="search-input"]:focus {
  border-color: var(--s-rose) !important;
  box-shadow: 0 0 0 3px rgba(196,122,138,0.12) !important;
}

input::placeholder {
  color: var(--s-text-muted) !important;
}


/* ================================================================
   10. الفلاتر والتصفية
   ================================================================ */
.filter-sidebar,
[class*="filter-sidebar"],
[class*="filters"] {
  background: var(--s-white) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--s-radius-lg) !important;
  box-shadow: var(--s-shadow-xs) !important;
}

.filter-title,
[class*="filter-title"],
[class*="filter-heading"] {
  font-family: var(--s-font-body) !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--s-rose-light) !important;
}

/* Checkbox */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--s-rose) !important;
}

/* Range slider */
input[type="range"] {
  accent-color: var(--s-rose) !important;
}


/* ================================================================
   11. التنقل بين الصفحات (Pagination)
   ================================================================ */
.pagination,
[class*="pagination"] {
  font-family: var(--s-font-body) !important;
}

.pagination__item,
[class*="pagination__item"],
[class*="page-item"] {
  border-radius: var(--s-radius-sm) !important;
  border: 1px solid var(--s-border) !important;
  transition: all var(--s-ease) !important;
  color: var(--s-text-sub) !important;
}

.pagination__item:hover,
[class*="pagination__item"]:hover {
  background: var(--s-petal-light) !important;
  border-color: var(--s-petal) !important;
  color: var(--s-rose) !important;
}

.pagination__item--active,
[class*="pagination__item--active"],
[class*="active"] .page-link {
  background: var(--s-rose) !important;
  border-color: var(--s-rose) !important;
  color: var(--s-cream) !important;
}


/* ================================================================
   12. السلة الجانبية / Cart Drawer
   ================================================================ */
.cart-drawer,
.s-cart-drawer,
[class*="cart-drawer"],
[class*="cart-sidebar"] {
  background: var(--s-cream) !important;
  border-right: 1px solid var(--s-border) !important;
  box-shadow: var(--s-shadow-lg) !important;
}

.cart-drawer__title,
[class*="cart-drawer__title"],
[class*="cart-title"] {
  font-family: var(--s-font-display) !important;
  font-size: 1.6rem !important;
  font-weight: 400 !important;
  color: var(--s-text) !important;
}

.cart-item,
[class*="cart-item"] {
  border-bottom: 1px solid var(--s-border) !important;
  padding: 14px 0 !important;
}

.cart-total,
[class*="cart-total"] {
  font-family: var(--s-font-display) !important;
  color: var(--s-rose) !important;
  font-size: 1.3rem !important;
}

.cart-drawer__footer,
[class*="cart-footer"] {
  background: var(--s-cream-deep) !important;
  border-top: 1px solid var(--s-border) !important;
}


/* ================================================================
   13. الفوتر / ذيل الصفحة
   ================================================================ */
footer,
.site-footer,
.s-footer,
[class*="site-footer"],
[class*="s-footer"] {
  background: var(--s-rose-deep) !important;
  color: var(--s-cream) !important;
  border-top: 1px solid rgba(242,184,192,0.1) !important;
}

.s-footer a,
footer a,
[class*="site-footer"] a,
[class*="s-footer"] a {
  color: rgba(253,246,247,0.6) !important;
  transition: color var(--s-ease) !important;
}

.s-footer a:hover,
footer a:hover {
  color: var(--s-cream) !important;
}

/* عنوان الفوتر */
.footer-title,
[class*="footer-title"],
[class*="footer-heading"] {
  font-size: 0.7rem !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--s-petal) !important;
  margin-bottom: 16px !important;
}

/* حقل النشرة البريدية في الفوتر */
.footer-newsletter input,
[class*="newsletter"] input {
  background: rgba(253,246,247,0.06) !important;
  border: 1px solid rgba(242,184,192,0.25) !important;
  border-radius: var(--s-radius-md) !important;
  color: var(--s-cream) !important;
  font-family: var(--s-font-body) !important;
}

.footer-newsletter input:focus,
[class*="newsletter"] input:focus {
  border-color: var(--s-petal) !important;
  outline: none !important;
}

.footer-newsletter input::placeholder,
[class*="newsletter"] input::placeholder {
  color: rgba(253,246,247,0.35) !important;
}

/* أيقونات التواصل الاجتماعي */
.social-link,
[class*="social-link"],
[class*="social-icon"] {
  border: 1px solid rgba(242,184,192,0.2) !important;
  border-radius: 50% !important;
  color: rgba(253,246,247,0.6) !important;
  transition: all var(--s-ease) !important;
}

.social-link:hover,
[class*="social-link"]:hover,
[class*="social-icon"]:hover {
  background: var(--s-petal) !important;
  border-color: var(--s-petal) !important;
  color: var(--s-rose) !important;
  transform: translateY(-3px) !important;
}

/* حقوق النشر */
.footer-copyright,
[class*="footer-copyright"],
[class*="copyright"] {
  color: rgba(253,246,247,0.35) !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.06em !important;
}


/* ================================================================
   14. الإشعارات والتنبيهات (Toast)
   ================================================================ */
.toast,
.notification,
[class*="toast"],
[class*="notification"],
[class*="alert"] {
  font-family: var(--s-font-body) !important;
  border-radius: var(--s-radius-md) !important;
  box-shadow: var(--s-shadow-md) !important;
}

.toast--success,
[class*="toast--success"],
[class*="alert-success"] {
  background: var(--s-rose-deep) !important;
  color: var(--s-cream) !important;
  border-right: 3px solid var(--s-petal) !important;
}

.toast--error,
[class*="toast--error"],
[class*="alert-danger"] {
  border-right: 3px solid #E05555 !important;
}


/* ================================================================
   15. مودال وبوب‌آب
   ================================================================ */
.modal,
[class*="modal"],
[class*="popup"] {
  background: var(--s-cream) !important;
  border-radius: var(--s-radius-lg) !important;
  box-shadow: var(--s-shadow-lg) !important;
  border: 1px solid var(--s-border) !important;
}

.modal__overlay,
[class*="modal-overlay"],
[class*="popup-overlay"] {
  background: rgba(61,21,32,0.5) !important;
  backdrop-filter: blur(6px) !important;
}

.modal__title,
[class*="modal-title"] {
  font-family: var(--s-font-display) !important;
  font-weight: 400 !important;
  color: var(--s-text) !important;
}

.modal__close,
[class*="modal-close"],
[class*="popup-close"] {
  border-radius: 50% !important;
  border: 1px solid var(--s-border) !important;
  transition: all var(--s-ease) !important;
}

.modal__close:hover {
  background: var(--s-rose) !important;
  border-color: var(--s-rose) !important;
  color: white !important;
}


/* ================================================================
   16. مسار التنقل (Breadcrumb)
   ================================================================ */
.breadcrumb,
[class*="breadcrumb"] {
  font-family: var(--s-font-body) !important;
  font-size: 0.78rem !important;
  color: var(--s-text-muted) !important;
  letter-spacing: 0.05em !important;
}

.breadcrumb a,
[class*="breadcrumb"] a {
  color: var(--s-text-muted) !important;
}

.breadcrumb a:hover,
[class*="breadcrumb"] a:hover {
  color: var(--s-rose) !important;
}

.breadcrumb__separator,
[class*="breadcrumb-separator"] {
  color: var(--s-border) !important;
}


/* ================================================================
   17. التقييمات والنجوم
   ================================================================ */
.stars,
[class*="stars"],
[class*="rating"] .star,
[class*="s-rating"] {
  color: var(--s-rose-light) !important;
}

.rating-count,
[class*="rating-count"] {
  font-size: 0.8rem !important;
  color: var(--s-text-muted) !important;
}


/* ================================================================
   18. التبويبات (Tabs)
   ================================================================ */
.tab,
[class*="tab-item"],
[class*="s-tab"] {
  font-family: var(--s-font-body) !important;
  color: var(--s-text-sub) !important;
  border-bottom: 2px solid transparent !important;
  transition: all var(--s-ease) !important;
  padding-bottom: 8px !important;
  letter-spacing: 0.06em !important;
}

.tab:hover,
[class*="tab-item"]:hover {
  color: var(--s-rose) !important;
}

.tab.active,
[class*="tab-item"].active,
[class*="tab--active"] {
  color: var(--s-rose) !important;
  border-bottom-color: var(--s-rose) !important;
}


/* ================================================================
   19. حقول النموذج
   ================================================================ */
input, textarea, select {
  font-family: var(--s-font-body) !important;
  border: 1.5px solid var(--s-border) !important;
  border-radius: var(--s-radius-md) !important;
  background: var(--s-cream) !important;
  color: var(--s-text) !important;
  transition: border-color var(--s-ease), box-shadow var(--s-ease) !important;
}

input:focus, textarea:focus, select:focus {
  outline: none !important;
  border-color: var(--s-rose-light) !important;
  box-shadow: 0 0 0 3px rgba(196,122,138,0.12) !important;
}

label {
  color: var(--s-text-sub) !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
}


/* ================================================================
   20. أنيميشن دخول الصفحة
   ================================================================ */
@keyframes soudrahFadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes soudrahFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* تطبيق الأنيميشن على العناصر */
.product-card,
[class*="product-card"] {
  animation: soudrahFadeUp 0.6s cubic-bezier(0.16,1,0.3,1) both;
}

/* تأخير تدريجي للكروت */
.product-card:nth-child(1), [class*="product-card"]:nth-child(1) { animation-delay: 0.00s; }
.product-card:nth-child(2), [class*="product-card"]:nth-child(2) { animation-delay: 0.08s; }
.product-card:nth-child(3), [class*="product-card"]:nth-child(3) { animation-delay: 0.16s; }
.product-card:nth-child(4), [class*="product-card"]:nth-child(4) { animation-delay: 0.24s; }
.product-card:nth-child(5), [class*="product-card"]:nth-child(5) { animation-delay: 0.32s; }
.product-card:nth-child(6), [class*="product-card"]:nth-child(6) { animation-delay: 0.40s; }
.product-card:nth-child(7), [class*="product-card"]:nth-child(7) { animation-delay: 0.48s; }
.product-card:nth-child(8), [class*="product-card"]:nth-child(8) { animation-delay: 0.56s; }

/* أنيميشن Scroll Reveal */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--s-ease-lg), transform 0.8s var(--s-ease-lg);
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* ================================================================
   21. شريط Marquee المتحرك
   ================================================================ */
@keyframes soudrahMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

[class*="marquee"] > * {
  animation: soudrahMarquee 24s linear infinite !important;
}


/* ================================================================
   22. قسم الفئات / Collections
   ================================================================ */
.category-card,
[class*="category-card"],
[class*="collection-card"] {
  border-radius: var(--s-radius-lg) !important;
  overflow: hidden !important;
  position: relative !important;
  cursor: pointer !important;
}

.category-card img,
[class*="category-card"] img,
[class*="collection-card"] img {
  transition: transform var(--s-ease-lg) !important;
}

.category-card:hover img,
[class*="category-card"]:hover img,
[class*="collection-card"]:hover img {
  transform: scale(1.07) !important;
}

/* Overlay على صور الفئات */
.category-card::after,
[class*="category-card"]::after,
[class*="collection-card"]::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    to top,
    rgba(106,46,62,0.7) 0%,
    transparent 55%
  ) !important;
  transition: opacity var(--s-ease) !important;
}


/* ================================================================
   23. الـ Dividers والفواصل
   ================================================================ */
hr,
.divider,
[class*="divider"] {
  border: none !important;
  height: 1px !important;
  background: linear-gradient(
    to right,
    transparent,
    var(--s-petal),
    transparent
  ) !important;
  margin: 24px 0 !important;
}


/* ================================================================
   24. مؤشر التحميل
   ================================================================ */
@keyframes soudrahPulse {
  0%, 100% { opacity: 0.4; transform: scale(0.96); }
  50%       { opacity: 1;   transform: scale(1.04); }
}

.loading,
[class*="loading"],
[class*="spinner"],
[class*="loader"] {
  animation: soudrahPulse 1.4s ease-in-out infinite !important;
  color: var(--s-rose) !important;
}

.skeleton,
[class*="skeleton"] {
  background: linear-gradient(
    90deg,
    var(--s-cream-deep) 25%,
    var(--s-petal-light) 50%,
    var(--s-cream-deep) 75%
  ) !important;
  background-size: 200% 100% !important;
  animation: shimmer 1.6s infinite !important;
  border-radius: var(--s-radius-sm) !important;
}

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}


/* ================================================================
   25. الاستجابة للجوال
   ================================================================ */
@media (max-width: 768px) {
  h1 { font-size: 2rem !important; }
  h2 { font-size: 1.6rem !important; }

  .product-card,
  [class*="product-card"] {
    border-radius: var(--s-radius-md) !important;
  }

  .btn-primary,
  .s-btn--primary,
  [class*="btn-primary"] {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }
}

@media (max-width: 480px) {
  body { font-size: 0.92rem !important; }
}


/* ================================================================
   26. طباعة — Print
   ================================================================ */
@media print {
  body { background: white !important; }
  header, footer, [class*="cart-drawer"] { display: none !important; }
}/* خلفية عامة للمتجر */
body {
    background: linear-gradient(to bottom, #f7f3f0, #f1ece8);
    font-family: 'Georgia', serif;
}

/* زخرفة ورد جانبية */
body::before,
body::after {
    content: "";
    position: fixed;
    width: 350px;
    height: 350px;
    background-image: url('رابط-صورة-الورد-هنا');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.25;
    z-index: -1;
}

body::before {
    bottom: 0;
    left: 0;
}

body::after {
    top: 0;
    right: 0;
    transform: rotate(180deg);
}/* البانر الرئيسي */
.hero-banner {
    background: linear-gradient(to right, #f6f1ed, #ece6e2);
    padding: 80px 20px;
    text-align: center;
    border-radius: 20px;
    margin: 30px auto;
    max-width: 1200px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* عنوان البانر */
.hero-banner h1 {
    font-size: 48px;
    letter-spacing: 4px;
    color: #2b2b2b;
    margin-bottom: 10px;
}

/* وصف تحت العنوان */
.hero-banner p {
    font-size: 18px;
    color: #7a6f6a;
}

/* زر أنيق */
.hero-banner .btn-shop {
    display: inline-block;
    margin-top: 25px;
    padding: 12px 35px;
    background-color: #d8b4a0;
    color: #fff;
    border-radius: 30px;
    text-decoration: none;
    transition: 0.3s ease;
}

.hero-banner .btn-shop:hover {
    background-color: #c79a85;
}