/* Add custom CSS styles below */ 
/* ============================================
   فرح لاين — نظام التصميم
   ثيم ملاك / سلة
   الصق هذا الملف كاملاً في حقل CSS المخصص
   ============================================ */

/* ---- 1. متغيرات الهوية ---- */
:root,
html {
  --farah-primary: #8E3B5E;
  --farah-primary-hover: #742F4C;
  --farah-secondary: #F9D3E0;
  --farah-surface: #FDFAFB;
  --farah-card: #FFFFFF;
  --farah-text: #1C1416;
  --farah-muted: #7A6B70;
  --farah-border: #EFE4E8;
  --farah-sale: #B3261E;

  /* استبدال متغيرات سلة الأساسية */
  --color-primary: #8E3B5E;
  --color-primary-dark: #742F4C;
  --color-primary-light: #F9D3E0;
  --primary-color: #8E3B5E;
}
/* ============================================
   فرح لاين — نظام التصميم
   ثيم ملاك / سلة
   الصق هذا الملف كاملاً في حقل CSS المخصص
   ============================================ */

/* ---- 1. متغيرات الهوية ---- */
:root,
html {
  --farah-primary: #8E3B5E;
  --farah-primary-hover: #742F4C;
  --farah-secondary: #F9D3E0;
  --farah-surface: #FDFAFB;
  --farah-card: #FFFFFF;
  --farah-text: #1C1416;
  --farah-muted: #7A6B70;
  --farah-border: #EFE4E8;
  --farah-sale: #B3261E;

  /* استبدال متغيرات سلة الأساسية */
  --color-primary: #8E3B5E;
  --color-primary-dark: #742F4C;
  --color-primary-light: #F9D3E0;
  --primary-color: #8E3B5E;
}

/* ---- 2. الأزرار ---- */
.btn--primary,
.s-button-primary,
button.btn--primary,
a.btn--primary,
.store-widget-btn,
.btn-add-to-cart,
salla-add-product-button .s-button-element,
.s-button-primary.s-button-element {
  background-color: var(--farah-primary) !important;
  border-color: var(--farah-primary) !important;
  color: #FFFFFF !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  transition: background-color .15s ease-out !important;
}

.btn--primary:hover,
.s-button-primary:hover,
salla-add-product-button .s-button-element:hover,
.btn-add-to-cart:hover {
  background-color: var(--farah-primary-hover) !important;
  border-color: var(--farah-primary-hover) !important;
}

.btn--outline,
.s-button-outline {
  border-color: var(--farah-primary) !important;
  color: var(--farah-primary) !important;
  border-radius: 10px !important;
}
.btn--outline:hover,
.s-button-outline:hover {
  background-color: var(--farah-primary) !important;
  color: #FFFFFF !important;
}

/* ---- 3. الروابط والأيقونات ---- */
a:not(.btn):not(.s-button-element):hover,
.text-primary,
.hover\:text-primary:hover {
  color: var(--farah-primary) !important;
}

.s-product-card-wishlist-btn.is-added i,
salla-button[shape="icon"]:hover i {
  color: var(--farah-primary) !important;
}

/* ---- 4. الأسطح والعمق ---- */
body,
.s-block,
main {
  background-color: var(--farah-surface);
}

.s-product-card-entry,
.s-product-card-vertical {
  background-color: var(--farah-card) !important;
  border-radius: 12px !important;
  overflow: hidden;
  transition: box-shadow .2s ease-out, transform .2s ease-out !important;
}

.s-product-card-entry:hover {
  box-shadow: 0 4px 16px rgba(28, 20, 22, .08) !important;
  transform: translateY(-2px);
}

/* ---- 5. بطاقة المنتج: نسبة 2:3 للعبايات ---- */
.s-product-card-image,
.s-product-card-image img,
.s-product-card-vertical .s-product-card-image {
  aspect-ratio: 2 / 3 !important;
  height: auto !important;
  object-fit: cover !important;
  object-position: top center !important;
}

/* اسم المنتج: سطران بحد أقصى */
.s-product-card-content-title,
.s-product-card-content-title a {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.6 !important;
  min-height: 3.2em;
  font-weight: 500 !important;
}

/* السعر */
.s-product-card-price h4,
.s-product-card-sale-price {
  color: var(--farah-text) !important;
  font-weight: 600 !important;
}
.s-product-card-price .s-product-card-price-discount,
.s-product-card-price del {
  color: var(--farah-muted) !important;
  font-weight: 400 !important;
}

/* شارة الخصم */
.s-product-card-promotion-title,
.s-product-card-discount {
  background-color: var(--farah-sale) !important;
  color: #FFFFFF !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  padding: 3px 10px !important;
}

/* ---- 6. أزرار المقاسات في صفحة المنتج ---- */
.s-product-options-option-label,
salla-product-options label,
.s-product-options-option input[type="radio"] + label {
  border: 1.5px solid var(--farah-border) !important;
  border-radius: 8px !important;
  min-width: 52px;
  min-height: 44px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  transition: all .15s ease-out;
}

.s-product-options-option input[type="radio"]:checked + label,
.s-product-options-option-label.is-selected {
  border-color: var(--farah-primary) !important;
  background-color: var(--farah-primary) !important;
  color: #FFFFFF !important;
}

/* المقاس النافد: مشطوب لا مخفي */
.s-product-options-option input[type="radio"]:disabled + label {
  opacity: .45;
  text-decoration: line-through;
  cursor: not-allowed;
}

/* ---- 7. الهيدر والفوتر ---- */
.store-header,
#mainnav {
  background-color: #FFFFFF !important;
  border-bottom: 1px solid var(--farah-border);
}

.store-footer {
  background-color: #F6EFF2 !important;
  border-top: 1px solid var(--farah-border);
}

.store-footer a:hover {
  color: var(--farah-primary) !important;
}

/* إخفاء اللغة والعملة — متجر عربي بعملة واحدة */
.store-header salla-currency-switcher,
.store-header salla-localization-switcher {
  display: none !important;
}

/* ---- 8. الشريط الإعلاني ---- */
.s-block--ad,
.top-banner,
.announcement-bar {
  background-color: #F1DEE6 !important;
  color: #3D2B32 !important;
  font-size: 13px !important;
}

/* ---- 9. زر واتساب: أصغر وأقل حجبًا ---- */
.whatsapp-btn,
a[href*="wa.me"].fixed,
.s-whatsapp-button {
  width: 52px !important;
  height: 52px !important;
  opacity: .92;
}
.whatsapp-btn:hover {
  opacity: 1;
}
.whatsapp-btn img,
.whatsapp-btn svg {
  width: 30px !important;
  height: 30px !important;
}

/* ---- 10. الطباعة ---- */
h1, h2, h3,
.s-block__title,
.section-title {
  font-family: 'Amiri', 'Cairo', serif !important;
  font-weight: 700 !important;
  color: var(--farah-text) !important;
  letter-spacing: 0 !important;
}

h1 { font-size: 32px !important; line-height: 1.3 !important; }
h2 { font-size: 26px !important; line-height: 1.3 !important; }
h3 { font-size: 20px !important; line-height: 1.35 !important; }

body, p, .s-product-card-content-title {
  font-family: 'Cairo', sans-serif !important;
  color: var(--farah-text);
}

@media (max-width: 640px) {
  h1 { font-size: 26px !important; }
  h2 { font-size: 22px !important; }
}

/* ---- 11. الوصول: حلقة تركيز واضحة ---- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--farah-primary) !important;
  outline-offset: 2px !important;
}

/* مناطق لمس 44px */
.s-product-card-wishlist-btn,
salla-button[shape="icon"] {
  min-width: 44px;
  min-height: 44px;
}

/* ---- 12. الحقول ---- */
input:not([type="radio"]):not([type="checkbox"]),
select,
textarea,
.s-form-input {
  border-radius: 8px !important;
  border-color: var(--farah-border) !important;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--farah-primary) !important;
}

/* ---- 13. الأداء وتقليل الحركة ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}
/* ---- 2. الأزرار ---- */
.btn--primary,
.s-button-primary,
button.btn--primary,
a.btn--primary,
.store-widget-btn,
.btn-add-to-cart,
salla-add-product-button .s-button-element,
.s-button-primary.s-button-element {
  background-color: var(--farah-primary) !important;
  border-color: var(--farah-primary) !important;
  color: #FFFFFF !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  transition: background-color .15s ease-out !important;
}

.btn--primary:hover,
.s-button-primary:hover,
salla-add-product-button .s-button-element:hover,
.btn-add-to-cart:hover {
  background-color: var(--farah-primary-hover) !important;
  border-color: var(--farah-primary-hover) !important;
}

.btn--outline,
.s-button-outline {
  border-color: var(--farah-primary) !important;
  color: var(--farah-primary) !important;
  border-radius: 10px !important;
}
.btn--outline:hover,
.s-button-outline:hover {
  background-color: var(--farah-primary) !important;
  color: #FFFFFF !important;
}

/* ---- 3. الروابط والأيقونات ---- */
a:not(.btn):not(.s-button-element):hover,
.text-primary,
.hover\:text-primary:hover {
  color: var(--farah-primary) !important;
}

.s-product-card-wishlist-btn.is-added i,
salla-button[shape="icon"]:hover i {
  color: var(--farah-primary) !important;
}

/* ---- 4. الأسطح والعمق ---- */
body,
.s-block,
main {
  background-color: var(--farah-surface);
}

.s-product-card-entry,
.s-product-card-vertical {
  background-color: var(--farah-card) !important;
  border-radius: 12px !important;
  overflow: hidden;
  transition: box-shadow .2s ease-out, transform .2s ease-out !important;
}

.s-product-card-entry:hover {
  box-shadow: 0 4px 16px rgba(28, 20, 22, .08) !important;
  transform: translateY(-2px);
}

/* ---- 5. بطاقة المنتج: نسبة 2:3 للعبايات ---- */
.s-product-card-image,
.s-product-card-image img,
.s-product-card-vertical .s-product-card-image {
  aspect-ratio: 2 / 3 !important;
  height: auto !important;
  object-fit: cover !important;
  object-position: top center !important;
}

/* اسم المنتج: سطران بحد أقصى */
.s-product-card-content-title,
.s-product-card-content-title a {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.6 !important;
  min-height: 3.2em;
  font-weight: 500 !important;
}

/* السعر */
.s-product-card-price h4,
.s-product-card-sale-price {
  color: var(--farah-text) !important;
  font-weight: 600 !important;
}
.s-product-card-price .s-product-card-price-discount,
.s-product-card-price del {
  color: var(--farah-muted) !important;
  font-weight: 400 !important;
}

/* شارة الخصم */
.s-product-card-promotion-title,
.s-product-card-discount {
  background-color: var(--farah-sale) !important;
  color: #FFFFFF !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  padding: 3px 10px !important;
}

/* ---- 6. أزرار المقاسات في صفحة المنتج ---- */
.s-product-options-option-label,
salla-product-options label,
.s-product-options-option input[type="radio"] + label {
  border: 1.5px solid var(--farah-border) !important;
  border-radius: 8px !important;
  min-width: 52px;
  min-height: 44px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  transition: all .15s ease-out;
}

.s-product-options-option input[type="radio"]:checked + label,
.s-product-options-option-label.is-selected {
  border-color: var(--farah-primary) !important;
  background-color: var(--farah-primary) !important;
  color: #FFFFFF !important;
}

/* المقاس النافد: مشطوب لا مخفي */
.s-product-options-option input[type="radio"]:disabled + label {
  opacity: .45;
  text-decoration: line-through;
  cursor: not-allowed;
}

/* ---- 7. الهيدر والفوتر ---- */
.store-header,
#mainnav {
  background-color: #FFFFFF !important;
  border-bottom: 1px solid var(--farah-border);
}

.store-footer {
  background-color: #F6EFF2 !important;
  border-top: 1px solid var(--farah-border);
}

.store-footer a:hover {
  color: var(--farah-primary) !important;
}

/* إخفاء اللغة والعملة — متجر عربي بعملة واحدة */
.store-header salla-currency-switcher,
.store-header salla-localization-switcher {
  display: none !important;
}

/* ---- 8. الشريط الإعلاني ---- */
.s-block--ad,
.top-banner,
.announcement-bar {
  background-color: #F1DEE6 !important;
  color: #3D2B32 !important;
  font-size: 13px !important;
}

/* ---- 9. زر واتساب: أصغر وأقل حجبًا ---- */
.whatsapp-btn,
a[href*="wa.me"].fixed,
.s-whatsapp-button {
  width: 52px !important;
  height: 52px !important;
  opacity: .92;
}
.whatsapp-btn:hover {
  opacity: 1;
}
.whatsapp-btn img,
.whatsapp-btn svg {
  width: 30px !important;
  height: 30px !important;
}

/* ---- 10. الطباعة ---- */
h1, h2, h3,
.s-block__title,
.section-title {
  font-family: 'Amiri', 'Cairo', serif !important;
  font-weight: 700 !important;
  color: var(--farah-text) !important;
  letter-spacing: 0 !important;
}

h1 { font-size: 32px !important; line-height: 1.3 !important; }
h2 { font-size: 26px !important; line-height: 1.3 !important; }
h3 { font-size: 20px !important; line-height: 1.35 !important; }

body, p, .s-product-card-content-title {
  font-family: 'Cairo', sans-serif !important;
  color: var(--farah-text);
}

@media (max-width: 640px) {
  h1 { font-size: 26px !important; }
  h2 { font-size: 22px !important; }
}

/* ---- 11. الوصول: حلقة تركيز واضحة ---- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--farah-primary) !important;
  outline-offset: 2px !important;
}

/* مناطق لمس 44px */
.s-product-card-wishlist-btn,
salla-button[shape="icon"] {
  min-width: 44px;
  min-height: 44px;
}

/* ---- 12. الحقول ---- */
input:not([type="radio"]):not([type="checkbox"]),
select,
textarea,
.s-form-input {
  border-radius: 8px !important;
  border-color: var(--farah-border) !important;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--farah-primary) !important;
}

/* ---- 13. الأداء وتقليل الحركة ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}
/* ============================================
   فرح لاين — نظام التصميم
   ثيم ملاك / سلة
   الصق هذا الملف كاملاً في حقل CSS المخصص
   ============================================ */

/* ---- 1. متغيرات الهوية ---- */
:root,
html {
  --farah-primary: #8E3B5E;
  --farah-primary-hover: #742F4C;
  --farah-secondary: #F9D3E0;
  --farah-surface: #FDFAFB;
  --farah-card: #FFFFFF;
  --farah-text: #1C1416;
  --farah-muted: #7A6B70;
  --farah-border: #EFE4E8;
  --farah-sale: #B3261E;

  /* استبدال متغيرات سلة الأساسية */
  --color-primary: #8E3B5E;
  --color-primary-dark: #742F4C;
  --color-primary-light: #F9D3E0;
  --primary-color: #8E3B5E;
}

/* ---- 2. الأزرار ---- */
.btn--primary,
.s-button-primary,
button.btn--primary,
a.btn--primary,
.store-widget-btn,
.btn-add-to-cart,
salla-add-product-button .s-button-element,
.s-button-primary.s-button-element {
  background-color: var(--farah-primary) !important;
  border-color: var(--farah-primary) !important;
  color: #FFFFFF !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  transition: background-color .15s ease-out !important;
}

.btn--primary:hover,
.s-button-primary:hover,
salla-add-product-button .s-button-element:hover,
.btn-add-to-cart:hover {
  background-color: var(--farah-primary-hover) !important;
  border-color: var(--farah-primary-hover) !important;
}

.btn--outline,
.s-button-outline {
  border-color: var(--farah-primary) !important;
  color: var(--farah-primary) !important;
  border-radius: 10px !important;
}
.btn--outline:hover,
.s-button-outline:hover {
  background-color: var(--farah-primary) !important;
  color: #FFFFFF !important;
}

/* ---- 3. الروابط والأيقونات ---- */
a:not(.btn):not(.s-button-element):hover,
.text-primary,
.hover\:text-primary:hover {
  color: var(--farah-primary) !important;
}

.s-product-card-wishlist-btn.is-added i,
salla-button[shape="icon"]:hover i {
  color: var(--farah-primary) !important;
}

/* ---- 4. الأسطح والعمق ---- */
body,
.s-block,
main {
  background-color: var(--farah-surface);
}

.s-product-card-entry,
.s-product-card-vertical {
  background-color: var(--farah-card) !important;
  border-radius: 12px !important;
  overflow: hidden;
  transition: box-shadow .2s ease-out, transform .2s ease-out !important;
}

.s-product-card-entry:hover {
  box-shadow: 0 4px 16px rgba(28, 20, 22, .08) !important;
  transform: translateY(-2px);
}

/* ---- 5. بطاقة المنتج: نسبة 2:3 للعبايات ---- */
.s-product-card-image,
.s-product-card-image img,
.s-product-card-vertical .s-product-card-image {
  aspect-ratio: 2 / 3 !important;
  height: auto !important;
  object-fit: cover !important;
  object-position: top center !important;
}

/* اسم المنتج: سطران بحد أقصى */
.s-product-card-content-title,
.s-product-card-content-title a {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.6 !important;
  min-height: 3.2em;
  font-weight: 500 !important;
}

/* السعر */
.s-product-card-price h4,
.s-product-card-sale-price {
  color: var(--farah-text) !important;
  font-weight: 600 !important;
}
.s-product-card-price .s-product-card-price-discount,
.s-product-card-price del {
  color: var(--farah-muted) !important;
  font-weight: 400 !important;
}

/* شارة الخصم */
.s-product-card-promotion-title,
.s-product-card-discount {
  background-color: var(--farah-sale) !important;
  color: #FFFFFF !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  padding: 3px 10px !important;
}

/* ---- 6. أزرار المقاسات في صفحة المنتج ---- */
.s-product-options-option-label,
salla-product-options label,
.s-product-options-option input[type="radio"] + label {
  border: 1.5px solid var(--farah-border) !important;
  border-radius: 8px !important;
  min-width: 52px;
  min-height: 44px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  transition: all .15s ease-out;
}

.s-product-options-option input[type="radio"]:checked + label,
.s-product-options-option-label.is-selected {
  border-color: var(--farah-primary) !important;
  background-color: var(--farah-primary) !important;
  color: #FFFFFF !important;
}

/* المقاس النافد: مشطوب لا مخفي */
.s-product-options-option input[type="radio"]:disabled + label {
  opacity: .45;
  text-decoration: line-through;
  cursor: not-allowed;
}

/* ---- 7. الهيدر والفوتر ---- */
.store-header,
#mainnav {
  background-color: #FFFFFF !important;
  border-bottom: 1px solid var(--farah-border);
}

.store-footer {
  background-color: #F6EFF2 !important;
  border-top: 1px solid var(--farah-border);
}

.store-footer a:hover {
  color: var(--farah-primary) !important;
}

/* إخفاء اللغة والعملة — متجر عربي بعملة واحدة */
.store-header salla-currency-switcher,
.store-header salla-localization-switcher {
  display: none !important;
}

/* ---- 8. الشريط الإعلاني ---- */
.s-block--ad,
.top-banner,
.announcement-bar {
  background-color: #F1DEE6 !important;
  color: #3D2B32 !important;
  font-size: 13px !important;
}

/* ---- 9. زر واتساب: أصغر وأقل حجبًا ---- */
.whatsapp-btn,
a[href*="wa.me"].fixed,
.s-whatsapp-button {
  width: 52px !important;
  height: 52px !important;
  opacity: .92;
}
.whatsapp-btn:hover {
  opacity: 1;
}
.whatsapp-btn img,
.whatsapp-btn svg {
  width: 30px !important;
  height: 30px !important;
}

/* ---- 10. الطباعة ---- */
h1, h2, h3,
.s-block__title,
.section-title {
  font-family: 'Amiri', 'Cairo', serif !important;
  font-weight: 700 !important;
  color: var(--farah-text) !important;
  letter-spacing: 0 !important;
}

h1 { font-size: 32px !important; line-height: 1.3 !important; }
h2 { font-size: 26px !important; line-height: 1.3 !important; }
h3 { font-size: 20px !important; line-height: 1.35 !important; }

body, p, .s-product-card-content-title {
  font-family: 'Cairo', sans-serif !important;
  color: var(--farah-text);
}

@media (max-width: 640px) {
  h1 { font-size: 26px !important; }
  h2 { font-size: 22px !important; }
}

/* ---- 11. الوصول: حلقة تركيز واضحة ---- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--farah-primary) !important;
  outline-offset: 2px !important;
}

/* مناطق لمس 44px */
.s-product-card-wishlist-btn,
salla-button[shape="icon"] {
  min-width: 44px;
  min-height: 44px;
}

/* ---- 12. الحقول ---- */
input:not([type="radio"]):not([type="checkbox"]),
select,
textarea,
.s-form-input {
  border-radius: 8px !important;
  border-color: var(--farah-border) !important;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--farah-primary) !important;
}

/* ---- 13. الأداء وتقليل الحركة ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}