/* استدعاء خط Cairo من Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&display=swap');

/* تطبيق الخط على جميع عناصر الموقع */
body, h1, h2, h3, h4, h5, h6, p, span, a, li, button {
    font-family: 'Cairo', sans-serif !important;
}
/* الهيدر */
.store-header {
    position: sticky; /* يبقى ثابت عند التمرير */
    top: 0;
    width: 100%;
    z-index: 1000;
    background: transparent; /* شفاف */
    backdrop-filter: none; /* بدون ضبابية */
    box-shadow: none;
    font-family: 'Tajawal', sans-serif; /* خط جميل */
    padding: 15px 0;
}

/* القائمة الرئيسية */
.main-nav-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* روابط التنقل */
.main-menu > li > a {
    padding: 10px 20px;
    font-weight: 600;
    color: #000; /* لون أسود ثابت */
    text-decoration: none;
    position: relative;
    font-size: 16px;
}


/* تأثير عند المرور - الخط فقط */
.main-menu > li > a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom:20px; /* الخط مباشرة تحت النص */
    width: 0;
    height: 2px; /* سمك الخط */
    background: #daa789; /* لون الخط عند المرور */
    transition: width 0.3s ease-in-out;
}

.main-menu > li > a:hover::after {
    width: 100%; /* الخط يظهر بالكامل */
    color: #000; /* يبقى أسود */
}
@media (max-width: 768px) {
    .main-menu > li > a::after {
        content: none; /* إخفاء الخط تحت النص على الشاشات الصغيرة */
    }
}

.image-title .title-heade {
    background: transparent !important; /* اجعل الخلفية شفافة */
    color: #000; /* لون النص أسود أو حسب الرغبة */
}

section.g_cat .s-slider-wrapper .overflow-hidden.image-parent {
    border-radius: 50% !important;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 2px solid #fefefe;
    width: 150px;
    height: 150px;
    margin: auto;
}

/* عند تحليق الماوس */
section.g_cat .s-slider-wrapper .overflow-hidden.image-parent:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    border-color: #E6A7A7;
}

/* لضبط الصورة داخل الدائرة فقط ضمن السلايدر داخل g_cat */
section.g_cat .s-slider-wrapper .overflow-hidden.image-parent img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}


/انتهاء الكود الخاص بتصميم الاقسام/






/الكود الخاص بخلفية عنوان كل قسم/


.title-heade {
    background-color: transparent !important; /* يجعل الخلفية شفافة */
    color: #fff; /* لون الخط أبيض (يمكن تغييره) */
    padding: 10px;
    font-size: 1.8rem; /* حجم الخط، يمكنك تعديله */
    font-weight: bold;
    text-align: center;
}

/*انتهاء الكود الخاص بخلفية عنوان كل قسم */





/تسوقي حسب نوع بشرتك/
/* يطبق فقط على القسم المضاف له الكلاس custom-skin-type-section */
.custom-skin-type-section .products-item {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

.custom-skin-type-section .products-item .image-parent img {
  transition: transform 0.4s ease;
  display: block;
  width: 100%;
}

.custom-skin-type-section .products-item:hover .image-parent img {
  transform: scale(1.1);
}

/* طبقة شفافة فوق الصورة */
.custom-skin-type-section .products-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0,0,0,0.4);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 1;
}

.custom-skin-type-section .products-item:hover::after {
  opacity: 1;
}

/* النص فوق الصورة */
.custom-skin-type-section .products-item h3 {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-weight: bold;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.custom-skin-type-section .products-item:hover h3 {
  opacity: 1;
}
:root {
  --f-color: #e6a7a7;
   --color-primary:#e6a7a7;
}

section.s-block--fixed-banner img {
  border-radius: 16px;
  box-shadow: 0 0 30px rgba(255, 192, 203, 0.6), 0 0 60px rgba(255, 192, 203, 0.3); /* توهج وردي */
  transition: box-shadow 0.3s ease-in-out;
  margin-bottom: 50px;
}

section.s-block--fixed-banner img:hover {
  box-shadow: 0 0 40px rgba(255, 105, 180, 0.7), 0 0 80px rgba(255, 182, 193, 0.4); /* توهج أقوى عند التحويم */
}
/* === أوراق طافية (CSS-only) ===
   يستخدم :root::before, :root::after, body::before, body::after
   لتوليد أوراق بدون HTML إضافي. */
/* حركة الطفو */
@keyframes floatLeaf {
  0%   { transform: translateY(0) translateX(0) rotate(-10deg); opacity: 0; }
  20%  { opacity: 1; }
  50%  { transform: translateY(60vh) translateX(10px) rotate(15deg); }
  100% { transform: translateY(110vh) translateX(-10px) rotate(0deg); opacity: 0; }
}

/* ================================
   تحسين قسم "أسرار الجمال" - توسيط البطاقات
=================================*/
/* ================================
   تصميم قسم "أسرار الجمال" - ألوان الهوية
=================================*/

/* حاوية القسم */
.s-block--categories {
    background: #fff; /* خلفية بيضاء */
    padding: 50px 0;
    border-radius: 20px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.08);
    margin-bottom: 60px;
}

/* عنوان القسم */
.s-block--categories .s-slider-block__title h2 {
    font-family: 'Tajawal', sans-serif;
    font-size: 30px;
    font-weight: 700;
    color: #425649; /* أخضر داكن */
    margin-bottom: 30px;
    text-align: center;
    position: relative;
}

/* خط تحتي للعنوان */
.s-block--categories .s-slider-block__title h2::after {
    content: '';
    display: block;
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #e6aaaa, #425649);
    margin: 12px auto 0;
    border-radius: 3px;
}

/* كل بطاقة داخل السلايدر */
.s-block--categories .slide--cat-entry {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #e6aaaa10; /* ظل زهري فاتح شبه شفاف */
    padding: 25px 20px;
    border-radius: 18px;
    transition: transform 0.4s ease, box-shadow 0.4s ease, background 0.4s ease;
    text-align: center;
}

/* تأثير عند المرور على البطاقة */
.s-block--categories .slide--cat-entry:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 35px rgba(0,0,0,0.15);
    background: #e6aaaa20; /* تدرج أفتح عند المرور */
}

/* أيقونة البطاقة */
.s-block--categories .slide--cat-entry i {
    font-size: 42px;
    color: #425649; /* أخضر داكن */
    margin-bottom: 15px;
    transition: transform 0.3s ease, color 0.3s ease;
}

.s-block--categories .slide--cat-entry:hover i {
    transform: scale(1.25) rotate(10deg);
    color: #e6aaaa; /* تتحول للزهري عند المرور */
}

/* عنوان البطاقة */
.s-block--categories .slide--cat-entry h2 {
    font-size: 17px;
    font-weight: 600;
    color: #425649;
    margin-top: 5px;
    line-height: 1.5;
    transition: color 0.3s ease;
}

.s-block--categories .slide--cat-entry:hover h2 {
    color: #e6aaaa; /* تتحول للزهري عند المرور */
}

/* أزرار التحكم Prev / Next */
.s-block--categories .s-slider-nav-arrow {
    background: #fff;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 6px 18px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.s-block--categories .s-slider-nav-arrow:hover {
    transform: scale(1.15);
    box-shadow: 0 12px 25px rgba(0,0,0,0.15);
}

/* لون الأسهم */
.s-block--categories .s-slider-nav-arrow svg path {
    fill: #425649;
}


/* ================================
   نهاية تصميم قسم "أسرار الجمال" فقط
=================================*/


/* ================================
   تصميم وصف المنتج لكي لا يظهر كامل
=================================*/





/* ================================
   نهاية تصميم وصف المنتج لكي لا يظهر كامل
=================================*/