/* Add custom CSS styles below */ 
/* الكود لتدوير صور الفئات داخل متجرك سلة */
/*الكود الخاص بتصميم الاقسام*/
/* استهداف محدد للعنصر image-parent داخل overflow-hidden */
/* تحديد فقط داخل السيكشن g_cat */
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;
}