/* Add custom CSS styles below */ 

/* ========================================== */
/* 1. إعدادات السعر والبيانات (الوضع الفاتح والداكن) */
/* ========================================== */

/* وضع الفاتح للبيانات */
.product-details__price, .product-details__meta, .product-details__sku, .product-price, .product-meta, .product-sku, .price-wrapper {
    background-color: rgba(23, 54, 32, 0.05) !important;
    padding: 14px 20px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(23, 54, 32, 0.1) !important;
    margin-bottom: 12px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02) !important;
}

/* وضع الداكن للبيانات */
.dark .product-details__price, .dark .product-details__meta, .dark .product-details__sku, .dark .product-price, .dark .product-meta, .dark .product-sku, .dark .price-wrapper,
[data-theme="dark"] .product-details__price, [data-theme="dark"] .product-details__meta, [data-theme="dark"] .product-details__sku, [data-theme="dark"] .product-price, [data-theme="dark"] .product-meta, [data-theme="dark"] .product-sku, [data-theme="dark"] .price-wrapper {
    background-color: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* ========================================== */
/* 2. كود الإطار الشفاف وبدون لون لصورة المنتج   */
/* ========================================== */

/* جعل إطار الصورة شفافاً وبدون ألوان بالوضع الفاتح */
.product-single__media, 
.product-images-wrapper, 
.product-gallery, 
.main-image-slider, 
.swiper-container,
.product-slider,
.preview-image,
.product-media,
.gallery-image-class,
.product-single__photos img,
.main-image-wrapper img,
.swiper-slide img {
    background-color: transparent !important; /* إلغاء لون الخلفية بالكامل */
    border: 1px solid rgba(0, 0, 0, 0.08) !important; /* إطار خفيف جداً وشفاف لتحديد الأبعاد بصرياً */
    border-radius: 14px !important; /* الحفاظ على الزوايا الدائرية الاحترافية */
    padding: 12px !important; /* الحفاظ على مسافة التنفس الفخمة حول علبة العود */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important; /* الاعتماد على ظل ناعم جداً ليعطي بروزاً هندسياً */
}

/* جعل إطار الصورة شفافاً وبدون ألوان بالوضع الداكن */
.dark .product-single__media, .dark .product-images-wrapper, .dark .product-gallery, .dark .main-image-slider, .dark .swiper-container, .dark .product-slider, .dark .preview-image, .dark .product-media, .dark .product-single__photos img, .dark .main-image-wrapper img, .dark .swiper-slide img,
[data-theme="dark"] .product-single__media, [data-theme="dark"] .product-images-wrapper, [data-theme="dark"] .product-gallery, [data-theme="dark"] .main-image-slider, [data-theme="dark"] .swiper-container, [data-theme="dark"] .product-slider, [data-theme="dark"] .preview-image, [data-theme="dark"] .product-media, [data-theme="dark"] .product-single__photos img, [data-theme="dark"] .main-image-wrapper img, [data-theme="dark"] .swiper-slide img {
    background-color: transparent !important; /* إلغاء اللون بالكامل في الليل */
    border: 1px solid rgba(255, 255, 255, 0.08) !important; /* إطار مضيء خفيف جداً يندمج مع العتمة */
}