/* ==========================================================================
   0. متغيرات الألوان الموحدة لهوية "نقار الخشب" (Woodpecker Brand Colors)
   استخدام متغيرات CSS بيضمن إن كل الألوان في الموقع متناسقة مع بعضها،
   ولو حبيت تغيّر أي لون تانى المستقبل هتغيره مرة واحدة هنا بس.
   ========================================================================== */
:root {
    --wp-brown-dark: #4a2c11;    /* البني الغامق الأساسي (لون اللوجو) */
    --wp-brown-footer: #3d2410;  /* بني غامق أعمق شوية لخلفية الفوتر (متناسق مع الأساسي) */
    --wp-brown-mid: #6b4327;     /* بني متوسط لعناصر الفوتر (بديل موحّد للـ #5D4037 القديم) */
    --wp-gold: #d19a5b;          /* الذهبي/العسلي - لون التفاعل والهوفر */
    --wp-beige: #b58253;         /* البيج الغامق - لون ثانوي */
    --wp-cream: #fdfbf7;         /* الكريمي/الأوف وايت - الخلفية الفاتحة */
    --wp-cream-soft: #F5F5DC;    /* بيج فاتح ناعم لنصوص الفوتر */
    --wp-border-light: #f4ebe1;  /* لون الفواصل الخفيفة */
    --wp-text-muted: #8a7461;    /* بني رمادي فاتح للنصوص الثانوية (بديل موحّد لأي لون رمادي/أزرق كان مستخدم غلط) */
    --wp-whatsapp: #25D366;      /* أخضر الواتساب - ثابت مش بيتغير */
    --wp-shadow-color: 74, 44, 17; /* قيمة RGB للون البني عشان نستخدمها في rgba() للظلال */
}

/* --- إعدادات عامة لتصفير المسافات وتحديد الاتجاه --- */
body {
    margin: 0;
    padding: 0;
    font-family: 'Cairo', sans-serif;
    box-sizing: border-box;
    direction: rtl;
}

/* ==========================================================================
   1. شريط التوب بار العلوي (Top Bar)
   ========================================================================== */
.top_bar_container {
    background-color: var(--wp-brown-dark);
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 100%;
    padding: 12px 40px;
    box-sizing: border-box;
    direction: rtl;
    /* ⬅️ لازم position + z-index عشان يفضل ظاهر فوق خلفيات صفحة الـ checkout
       الثابتة (checkout_bg_right / checkout_bg_left) اللي بتظهر لما يكون
       في منتج في السلة على الشاشات الكبيرة */
    position: relative !important;
    z-index: 1000 !important;
}

.top_bar_item {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    flex: 1; /* كل قسم بياخد مساحة قد التاني عشان السلوجان يفضل في النص */
}

/* --- 1.1 أيقونات السوشيال ميديا (أقصى اليمين) --- */
.top_bar_socials {
    justify-content: flex-start;
    gap: 12px;
}

.top_bar_socials a {
    color: var(--wp-brown-dark);
    background-color: var(--wp-cream);
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-size: 13px;
    transition: all 0.3s ease;
    text-decoration: none;
}

.top_bar_socials a:hover {
    background-color: var(--wp-gold);
    color: #ffffff;
    transform: translateY(-2px);
}

/* --- 1.2 الجملة التسويقية (في المنتصف بالظبط) --- */
.top_bar_slogan {
    color: var(--wp-cream);
    font-size: 15px;
    letter-spacing: 0.5px;
    justify-content: center;
    text-align: center;
}

/* --- 1.3 جهة الواتساب والرقم (أقصى اليسار) --- */
.top_bar_phone {
    justify-content: flex-end;
}

.top_bar_phone a {
    color: var(--wp-cream);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.3s ease;
}

.top_bar_phone a i {
    color: var(--wp-whatsapp);
    font-size: 18px;
}

.top_bar_phone a:hover span {
    color: var(--wp-gold);
}

/* --- 📱 تجاوب التوب بار --- */
@media (max-width: 992px) {
    .top_bar_socials {
        display: none !important;
    }
    .top_bar_slogan {
        justify-content: flex-start;
    }
}

@media (max-width: 600px) {
    .top_bar_container {
        padding: 10px 15px;
    }
    .top_bar_phone {
        display: none !important;
    }
    .top_bar_slogan {
        font-size: 14px;
        justify-content: center;
    }
}

/* ==========================================================================
   2. مسافة أمان في نهاية الموقع لمنع شريط الموبايل من تغطية المحتوى
   ⬅️ اترفع الرقم هنا لأننا خفينا شريط "Powered By Easyorders" اللي كان
      بيوفر مساحة أمان أصلية من تصميم المنصة. الرقم اتظبط بناءً على
      قياس فعلي لارتفاع شريط #tabs (67px) + هامش أمان إضافي
      + مساحة الآيفونات اللي فيها Home Indicator
   ========================================================================== */
@media (max-width: 992px) {
    body {
        padding-bottom: calc(67px + 30px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* ==========================================================================
   3. الهيدر الرئيسي بالكامل (Sphinx Header)
   ========================================================================== */
.sphinx_header {
    background-color: #ffffff !important;
    border-bottom: none !important;
    box-shadow: 0 8px 25px rgba(var(--wp-shadow-color), 0.06) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1001 !important;
    width: 100% !important;
}

.sphinx_header nav.sphinx_header_container,
.sphinx_header .max-w-7xl {
    max-width: 100% !important;
    width: 100% !important;
    padding: 10px 40px !important;
    background-color: #ffffff !important;
    box-sizing: border-box !important;
}

.sphinx_header nav .h-14.flex {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    gap: 20px !important;
}

/* --- 3.1 اللوجو + اسم الموقع (أقصى اليمين) --- */
.sphinx_header_logo {
    margin: 0 !important;
    order: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}
.sphinx_header_logo img {
    height: 65px !important; /* 💡 مقاس اللوجو للكمبيوتر - غيّره براحتك */
    width: auto !important;
    filter: drop-shadow(0 2px 6px rgba(var(--wp-shadow-color), 0.12));
}

/* ⬅️ اسم الموقع بيتحط جنب اللوجو عن طريق CSS content، من غير ما نحتاج
   نلمس الـ HTML خالص (لإنه ثابت زي ما قولت). بيظهر يمين اللوجو بصريًا
   لأن الترتيب هنا rtl، والعنصر ده بييجي بعد اللوجو في التدفق */
.sphinx_header_logo::after {
    content: "نقار الخشب";
    font-family: 'Cairo', sans-serif;
    font-weight: 800;
    font-size: 21px;
    color: var(--wp-brown-dark);
    white-space: nowrap;
    letter-spacing: 0.2px;
    line-height: 1;
}

/* 📱 نخفي الاسم على الشاشات الصغيرة جدًا عشان ميزنقش مربع البحث */
@media (max-width: 420px) {
    .sphinx_header_logo::after {
        display: none;
    }
}
@media (max-width: 768px) {
    .sphinx_header_logo::after {
        font-size: 17px;
    }
}

/* --- 3.2 مربع البحث --- */
.sphinx_header nav .ms-auto.flex-1 {
    order: 2 !important;
    margin: 0 !important;
    flex: 1 !important;
    max-width: 600px !important;
    display: flex !important;
    justify-content: center !important;
}
.sphinx_header nav input[type="text"] {
    background-color: var(--wp-cream) !important;
    border: 1px solid rgba(var(--wp-shadow-color), 0.11) !important;
    border-radius: 12px !important;
    height: 48px !important;
    color: var(--wp-brown-dark) !important;
    font-family: 'Cairo', sans-serif;
    width: 100% !important;
}
.sphinx_header nav input[type="text"]:focus {
    border-color: var(--wp-gold) !important;
    outline: none !important;
}

.sphinx_header nav button.bg-skin-primary {
    background-color: var(--wp-brown-dark) !important;
    border-radius: 10px !important;
    left: 6px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}
.sphinx_header nav button.bg-skin-primary svg {
    color: var(--wp-cream) !important;
}

/* --- 3.3 سلة المشتريات (أقصى اليسار) --- */
.sphinx_header nav .flow-root {
    order: 3 !important;
    margin: 0 !important;
}
.sphinx_header nav button.relative.flex.bg-white {
    background-color: var(--wp-brown-dark) !important;
    color: var(--wp-cream) !important;
    border: none !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}
.sphinx_header nav button.relative.flex.bg-white svg {
    color: var(--wp-cream) !important;
}
.sphinx_header nav .bg-\[\#F44336\] {
    background-color: var(--wp-gold) !important;
    color: #ffffff !important;
}

/* --- 3.4 شريط المنيو والصفحات السفلي --- */
.sphinx_header_links {
    background-color: #ffffff !important;
    border-top: 1px solid var(--wp-border-light) !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 12px 0 !important;
    margin: 0 !important;
}
.sphinx_header_links .flex.space-s-8 {
    display: flex !important;
    justify-content: center !important;
    gap: 35px !important;
}
.sphinx_header_links a {
    color: var(--wp-brown-dark) !important;
    background: transparent !important;
    font-family: 'Cairo', sans-serif;
    font-size: 15px !important;
    font-weight: 700 !important;
    transition: color 0.3s ease;
}
.sphinx_header_links a:hover {
    color: var(--wp-gold) !important;
}

/* ==========================================================================
   4. شريط التنقل السفلي للموبايل (Mobile Tab Bar)
   ⬅️ بيتحط في أعلى طبقة ممكنة في الصفحة عشان ولا عنصر يتغطى عليه أبدًا
   ========================================================================== */
section:has(#tabs) {
    z-index: 999999 !important;
}
#tabs {
    background-color: #ffffff !important;
    border-top: 1px solid rgba(var(--wp-shadow-color), 0.08) !important;
    box-shadow: 0px -10px 40px rgba(var(--wp-shadow-color), 0.08) !important;
    border-radius: 20px 20px 0 0 !important;
    position: relative !important;
    z-index: 999999 !important;
}

#tabs a,
#tabs button {
    color: var(--wp-beige) !important;
    font-family: 'Cairo', sans-serif !important;
    transition: all 0.25s ease !important;
}

#tabs a:hover,
#tabs button:hover,
#tabs .text-\[\#010101\],
#tabs a:focus,
#tabs button:focus {
    color: var(--wp-brown-dark) !important;
    font-weight: 700 !important;
}

#tabs a svg,
#tabs button svg {
    color: var(--wp-beige) !important;
    transition: all 0.25s ease !important;
}

#tabs a:hover svg,
#tabs button:hover svg,
#tabs .text-\[\#010101\] svg {
    color: var(--wp-brown-dark) !important;
    transform: scale(1.05);
}

/* ==========================================================================
   5. تجاوب الهيدر لشاشات الموبايل
   ========================================================================== */
@media (max-width: 768px) {
    .sphinx_header nav.sphinx_header_container,
    .sphinx_header .max-w-7xl {
        padding: 10px 8px !important;
    }

    .sphinx_header nav .h-14.flex {
        gap: 10px !important;
    }

    .sphinx_header_logo img {
        height: 50px !important; /* 💡 مقاس اللوجو للموبايل - ممكن ترفعه لـ 55 لو حبيت */
        width: 50px !important;
        object-fit: contain !important;
    }

    .sphinx_header nav button.relative.flex.bg-white {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
    }

    .sphinx_header .block.md\:hidden.w-full.mt-2 {
        display: none !important;
    }

    .hidden.md\:block.w-full {
        display: block !important;
        margin: 0 !important;
    }
    .sphinx_header nav input[type="text"] {
        height: 40px !important;
        font-size: 12px !important;
        padding: 0 10px 0 35px !important;
    }
    .sphinx_header nav button.bg-skin-primary {
        height: 32px !important;
        width: 32px !important;
        left: 4px !important;
    }
}

/* ==========================================================================
   6. قسم الترحيب البانر (Home Section - Text Fill Animation)
   ========================================================================== */
.home_section_container.css-996p8r {
    background-color: var(--wp-cream) !important;
    padding: 40px 20px !important;
    text-align: center !important;
    overflow: hidden;
}

.home_section_container .editor-paragraph,
.home_section_container .editor-paragraph span {
    font-family: 'Cairo', sans-serif !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    line-height: 1.8 !important;
    white-space: pre-wrap !important;
    display: inline-block !important;

    opacity: 1 !important;
    animation: none !important;

    /* أنيميشن النص: خلفية جراديانت بتتملي بالتدريج من البيج للبني */
    background: linear-gradient(to left, var(--wp-brown-dark) 50%, var(--wp-beige) 50%) !important;
    background-size: 200% 100% !important;
    background-position: 100% 0 !important;

    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;

    animation: fillTextToBrown 2.5s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

@keyframes fillTextToBrown {
    0% {
        background-position: 100% 0 !important;
    }
    100% {
        background-position: 0% 0 !important;
    }
}

@media (max-width: 768px) {
    .home_section_container .editor-paragraph,
    .home_section_container .editor-paragraph span {
        font-size: 18px !important;
        line-height: 1.6 !important;
    }
    .home_section_container {
        padding: 25px 15px !important;
    }
}

/* ==========================================================================
   7. قسم عرض المنتجات ثلاثية الأبعاد (3D Model Viewer Section)
   ========================================================================== */
.threed_section {
    background-color: var(--wp-cream) !important;
    padding: 60px 20px !important;
    direction: rtl;
}

.threed_container {
    max-width: 1200px !important;
    margin: 0 auto !important;
}

.threed_header {
    text-align: center !important;
    margin-bottom: 40px !important;
}

.threed_header h2 {
    font-family: 'Cairo', sans-serif !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    color: var(--wp-brown-dark) !important;
    margin-bottom: 10px !important;
}

.threed_header p {
    font-family: 'Cairo', sans-serif !important;
    font-size: 16px !important;
    color: var(--wp-beige) !important;
}

.threed_grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 30px !important;
}

.threed_card {
    background: #ffffff !important;
    border-radius: 20px !important;
    border: 1px solid rgba(var(--wp-shadow-color), 0.04) !important;
    box-shadow: 0 10px 30px rgba(var(--wp-shadow-color), 0.04) !important;
    overflow: hidden !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.threed_card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 15px 40px rgba(var(--wp-shadow-color), 0.08) !important;
}

.model_wrapper {
    width: 100% !important;
    height: 350px !important;
    background-color: #faf6f0 !important;
    position: relative !important;
}

model-viewer {
    width: 100% !important;
    height: 100% !important;
    --progress-bar-color: var(--wp-gold) !important;
}

.ar_button {
    background-color: var(--wp-brown-dark) !important;
    color: var(--wp-cream) !important;
    font-family: 'Cairo', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 10px 20px !important;
    border-radius: 30px !important;
    border: none !important;
    position: absolute !important;
    bottom: 15px !important;
    right: 15px !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    transition: background-color 0.2s !important;
}

.ar_button:hover {
    background-color: var(--wp-gold) !important;
}

.product_info {
    padding: 20px !important;
    text-align: center !important;
}

.product_info h3 {
    font-family: 'Cairo', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--wp-brown-dark) !important;
    margin-bottom: 8px !important;
}

.product_info p {
    font-family: 'Cairo', sans-serif !important;
    font-size: 14px !important;
    color: var(--wp-text-muted) !important; /* ⬅️ كان لون رمادي مائل للأزرق مش متناسق، اتظبط لبني فاتح متناسق مع الهوية */
    line-height: 1.5 !important;
}

@media (max-width: 768px) {
    .threed_section {
        padding: 40px 15px !important;
    }
    .threed_header h2 {
        font-size: 22px !important;
    }
    .model_wrapper {
        height: 280px !important;
    }
}

/* ==========================================================================
   8. الفوتر (Footer)
   ⬅️ اتظبطت ألوانه هنا عشان تبقى من نفس عيلة ألوان الهوية بتاعت الموقع
      (بني/بيج) بدل الألوان المنفصلة اللي كانت مستخدمة قبل كده
   ========================================================================== */
footer {
    background-color: var(--wp-brown-footer) !important;
    color: var(--wp-cream-soft) !important;
    direction: rtl !important;
    /* ⬅️ نفس سبب التوب بار: خلفيات صفحة الـ checkout الثابتة ممكن تتغطى
       فوق الفوتر لو نزل في نفس مساحة الشاشة الظاهرة وقت السكرول */
    position: relative !important;
    z-index: 1000 !important;
}

footer p, footer span, footer h3 {
    color: var(--wp-cream-soft) !important;
}

footer a {
    color: var(--wp-cream-soft) !important;
    text-decoration: none !important;
    display: inline-block;
    position: relative;
    transition: color 0.3s ease !important;
}

/* --- أنيميشن خط سفلي متحرك عند التمرير فوق روابط الفوتر --- */
footer ul li a::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: -2px;
    left: 0;
    background-color: var(--wp-gold) !important;
    transform-origin: bottom right;
    transition: transform 0.3s ease-out;
}

footer ul li a:hover::after {
    transform: scaleX(1);
    transform-origin: bottom right;
}

footer ul li a:hover {
    color: var(--wp-gold) !important;
}

footer h3 {
    font-weight: 700 !important;
    border-bottom: 2px solid var(--wp-brown-mid);
    padding-bottom: 8px;
    margin-bottom: 16px !important;
}

/* --- أيقونات التواصل الاجتماعي وبيانات الاتصال --- */
footer .bg-skin-primary {
    background-color: var(--wp-brown-mid) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

footer a.bg-skin-primary:hover {
    background-color: var(--wp-gold) !important;
    transform: translateY(-5px) scale(1.1) !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3) !important;
}

footer .text-skin-a11y,
footer .bg-skin-primary svg {
    color: var(--wp-cream-soft) !important;
    fill: currentColor !important;
    transition: color 0.4s ease !important;
}

footer a.bg-skin-primary:hover svg {
    color: var(--wp-brown-footer) !important;
}

/* --- التوافق وإخفاء الحقوق --- */
footer .border-t.bg-skin-primary {
    display: none !important;
}

footer .border-t {
    border-color: var(--wp-brown-mid) !important;
}

@media (max-width: 1023px) {
    footer button[id^="headlessui-disclosure-button"] {
        background: transparent !important;
        border: none !important;
        color: var(--wp-cream-soft) !important;
        width: 100% !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 15px 0 !important;
    }

    footer .max-lg\:pb-20 {
        padding-bottom: 3rem !important;
    }
}

/* ==========================================================================
   9.5 إصلاح إضافي: خلفيات صفحة الـ checkout الثابتة (البيضاء/الرمادي)
   ⬅️ بدل ما نعتمد بس على رفع طبقة التوب بار/الفوتر، بنجبر الخلفيات دي
      نفسها على طبقة واطية جدًا وصريحة، عشان تفضل تحت أي عنصر تاني
      في الموقع بشكل مضمون 100% بغض النظر عن أي تعقيد في ترتيب الطبقات
   ========================================================================== */
.checkout_bg_right,
.checkout_bg_left {
    z-index: -1 !important;
}

/* ==========================================================================
   9. زرار الواتساب العائم (Floating WhatsApp Button)
   ⬅️ الزرار ده بيتحط في الـ HTML عن طريق سكريبت صغير (شوف رسالة الشات)،
      والقسم ده بس بيظبط شكله وحركته. لازم السكريبت يتحط في خانة
      "الكود المخصص" في لوحة تحكم easyorders عشان الزرار يظهر فعلياً.
   ========================================================================== */
.wp-floating-whatsapp {
    position: fixed !important;
    z-index: 9998 !important;
    left: 20px !important;
    bottom: 30px !important;
    width: 58px !important;
    height: 58px !important;
    border-radius: 50% !important;
    background-color: var(--wp-whatsapp) !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 30px !important;
    text-decoration: none !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
    transition: transform 0.3s ease !important;
    animation: wpFloatingWhatsappPulse 2.2s infinite !important;
}

.wp-floating-whatsapp:hover {
    transform: scale(1.08) !important;
}

@keyframes wpFloatingWhatsappPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.45);
    }
    70% {
        box-shadow: 0 0 0 14px rgba(37, 211, 102, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

/* 📱 على الموبايل: يترفع فوق شريط التابس السفلي (اللي ارتفاعه ~67px) */
@media (max-width: 992px) {
    .wp-floating-whatsapp {
        bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important;
        left: 16px !important;
        width: 52px !important;
        height: 52px !important;
        font-size: 26px !important;
    }
}



/*      ===============================          */

/* ==========================================================================
   0. متغيرات الألوان الموحدة (نفس هوية الموقع الأساسية)
   ⬅️ اتحطت هنا كمان عشان الملف ده يشتغل لوحده بشكل مستقل حتى لو
      اتحمّل قبل أو بعد ملف التصميم العام، مفيش تعارض لإن القيم متطابقة
   ========================================================================== */
:root {
    --wp-brown-dark: #4a2c11;
    --wp-brown-footer: #3d2410;
    --wp-brown-mid: #6b4327;
    --wp-gold: #d19a5b;
    --wp-beige: #b58253;
    --wp-cream: #fdfbf7;
    --wp-cream-soft: #F5F5DC;
    --wp-border-light: #f4ebe1;
    --wp-text-muted: #8a7461;
    --wp-whatsapp: #25D366;
    --wp-shadow-color: 74, 44, 17;
}

/* ==========================================================================
   1. خلفية صفحة المنتج بالكامل
   ========================================================================== */
.product_container {
    background-color: var(--wp-cream) !important;
    border-radius: 24px !important;
}

/* ==========================================================================
   2. معرض الصور (الجاليري)
   ⬅️ المشكلة الأصلية: كل صورة كانت بمقاسها الأصلي المختلف عن التانية،
      فالجاليري كان بيبان متسيّب خصوصًا لما الصور تتكدس فوق بعض على
      الشاشات الكبيرة. الحل: نفرض نسبة عرض/ارتفاع (aspect-ratio) موحّدة
      على كل الصور + قصّ ذكي (object-fit: cover) عشان كل صورة تتقص تلقائيًا
      وتملا نفس المساحة بالظبط، أيًا كان مقاسها الأصلي
   ========================================================================== */
.p_gallery_container .swiper {
    border-radius: 18px !important;
    box-shadow: 0 12px 40px rgba(var(--wp-shadow-color), 0.08) !important;
}

/* نفرض ارتفاع موحّد على كل سلايد بدل الـ min-height المتغير الأصلي */
.p_gallery_container .swiper-slide {
    min-height: 0 !important;
    aspect-ratio: 4 / 5 !important; /* 💡 نسبة قياسية للمنتجات (طولية شوية) - غيّرها لـ "1 / 1" لو حابب مربعة تمامًا */
    height: auto !important;
}

.sphinx_product_img {
    border-radius: 18px !important;
    background-color: #ffffff !important;
    width: 100% !important;
    height: 100% !important;
}
.sphinx_product_img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* ⬅️ ده اللي بيقص كل صورة تلقائيًا لتملا نفس المساحة من غير تمدد أو تشويه */
    object-position: center !important;
}

/* لما الصور تتكدس فوق بعض (وضع اللاب/الشاشات الكبيرة)، نضيف مسافات ونعاسة
   بينهم عشان يبانوا كروت منظمة بدل ما يكونوا ملزّقين في بعض */
@media (min-width: 1024px) {
    .p_gallery_container .swiper-wrapper {
        gap: 16px !important;
    }
    .p_gallery_container .swiper-slide {
        box-shadow: 0 8px 24px rgba(var(--wp-shadow-color), 0.06) !important;
        border-radius: 18px !important;
        overflow: hidden;
    }
}

/* أزرار التنقل بين الصور تحت الجاليري */
.p_gallery_container button[aria-label="prev-button"],
.p_gallery_container button[aria-label="next-button"] {
    color: var(--wp-brown-dark) !important;
    background-color: #ffffff !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 12px rgba(var(--wp-shadow-color), 0.1) !important;
    transition: transform 0.2s ease, background-color 0.2s ease !important;
}
.p_gallery_container button[aria-label="prev-button"]:hover,
.p_gallery_container button[aria-label="next-button"]:hover {
    background-color: var(--wp-gold) !important;
    color: #ffffff !important;
    transform: scale(1.08);
}
.p_gallery_container button[disabled] {
    opacity: 0.35 !important;
}
.p_gallery_container span.text-xs {
    font-family: 'Cairo', sans-serif !important;
    font-weight: 700 !important;
    color: var(--wp-text-muted) !important;
}

/* ==========================================================================
   3. تفاصيل المنتج (الاسم، السعر، التقييم، الوصف القصير)
   ========================================================================== */

/* --- بادج القسم (اركان الصلاة) --- */
.p_details_container a.border-\[\#EBEBEB\] {
    border-color: var(--wp-gold) !important;
    color: var(--wp-brown-dark) !important;
    font-weight: 700 !important;
    background-color: rgba(var(--wp-shadow-color), 0.04) !important;
    transition: all 0.25s ease !important;
}
.p_details_container a.border-\[\#EBEBEB\]:hover {
    background-color: var(--wp-gold) !important;
    color: #ffffff !important;
    border-color: var(--wp-gold) !important;
}

/* --- اسم المنتج --- */
.product_name {
    color: var(--wp-brown-dark) !important;
    font-family: 'Cairo', sans-serif !important;
    letter-spacing: -0.3px;
}

/* --- بادج التقييم (5.0) ---
   ⬅️ غيّرناه من الأخضر العام (#059669) للون الذهبي بتاع الهوية،
      عشان يفضل الموقع متناسق بصريًا بدل ما يبان لون غريب مقحم */
.p_details_container .bg-\[\#059669\] {
    background: linear-gradient(135deg, var(--wp-gold), #b9803f) !important;
    box-shadow: 0 4px 10px rgba(209, 154, 91, 0.35) !important;
}

/* --- السعر --- */
.product_price {
    color: var(--wp-brown-dark) !important;
    font-family: 'Cairo', sans-serif !important;
}
.product_price span {
    color: var(--wp-gold) !important;
    font-weight: 700 !important;
}

/* --- الوصف القصير تحت السعر --- */
.p_details_container > div > p.text-\[\#778399\] {
    color: var(--wp-text-muted) !important;
    line-height: 1.9 !important;
}

/* ==========================================================================
   4. اختيار اللون (Variations)
   ========================================================================== */
.variation_name {
    color: var(--wp-brown-dark) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
}

/* ⬅️ لون حلقة التحديد (ring) بتاعة Tailwind بيتحكم فيه متغير CSS داخلي،
   فبنعيد تعريفه هنا عشان الحلقة تبقى ذهبية بدل السوادة الافتراضية */
.color_variation {
    --tw-ring-color: var(--wp-gold) !important;
    transition: transform 0.2s ease !important;
}
.color_variation:hover {
    transform: translateY(-2px) scale(1.05);
}
.color_variation_checked {
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--wp-gold) !important;
}
.color_variation span[aria-hidden="true"] {
    border: 1px solid rgba(var(--wp-shadow-color), 0.15) !important;
}

/* ==========================================================================
   5. أزرار الشراء وإضافة للسلة
   ========================================================================== */
.checkout_btn {
    background-color: var(--wp-brown-dark) !important;
    box-shadow: 0 10px 24px rgba(var(--wp-shadow-color), 0.25) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    font-weight: 700 !important;
}
.checkout_btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(var(--wp-shadow-color), 0.32) !important;
}

.add_to_cart_btn {
    border-color: var(--wp-brown-dark) !important;
    color: var(--wp-brown-dark) !important;
    font-weight: 700 !important;
    transition: all 0.2s ease !important;
}
.add_to_cart_btn:hover {
    background-color: var(--wp-cream) !important;
    transform: translateY(-2px);
}

/* ==========================================================================
   6. أكورديون السياسات (الشحن / الاستبدال / الدفع)
   ========================================================================== */
.p_details_container .rounded-xl.border.divide-y {
    border-color: var(--wp-border-light) !important;
    border-radius: 16px !important;
    overflow: hidden;
}
.p_details_container .rounded-xl.border.divide-y > div {
    border-color: var(--wp-border-light) !important;
}
.p_details_container button[id^="headlessui-disclosure-button"] {
    color: var(--wp-brown-dark) !important;
    transition: background-color 0.2s ease !important;
}
.p_details_container button[id^="headlessui-disclosure-button"]:hover {
    background-color: var(--wp-cream) !important;
}
.p_details_container button[id^="headlessui-disclosure-button"] svg {
    color: var(--wp-gold) !important;
}

/* ==========================================================================
   7. وصف المنتج الطويل (تفاصيل + مميزات + مقاسات)
   ========================================================================== */
.product_description {
    border-top: 1px solid var(--wp-border-light) !important;
}
.product_description .ql-editor {
    color: #4a4038 !important;
    line-height: 2 !important;
}
.product_description h3 {
    color: var(--wp-brown-dark) !important;
    font-weight: 800 !important;
    font-size: 19px !important;
    margin-top: 28px !important;
    padding-inline-start: 14px;
    border-inline-start: 4px solid var(--wp-gold);
}
.product_description ul {
    list-style: none !important;
    padding-inline-start: 0 !important;
}
.product_description ul li {
    position: relative;
    padding-inline-start: 28px;
    margin-bottom: 10px;
}
.product_description ul li::before {
    content: "✓";
    position: absolute;
    right: 0;
    top: 0;
    color: #ffffff;
    background-color: var(--wp-gold);
    width: 18px;
    height: 18px;
    font-size: 11px;
    font-weight: 900;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   8. قسم التقييمات
   ========================================================================== */
.reviews_container {
    border-top: 1px solid var(--wp-border-light) !important;
}

/* فاصل عمودي بين ملخص التقييم وقائمة المراجعات على الشاشات الكبيرة */
@media (min-width: 1024px) {
    .reviews_summary {
        border-inline-end: 1px solid var(--wp-border-light) !important;
        padding-inline-end: 32px;
    }
}

.reviews_summary h2 {
    color: var(--wp-brown-dark) !important;
}

/* تلوين النجوم بالذهبي بدل الأصفر العام عشان يبقى متسق مع الهوية */
.reviews_summary svg.text-yellow-400,
.user_reviews_container svg.text-yellow-400 {
    color: var(--wp-gold) !important;
}
.reviews_summary .bg-yellow-400,
.reviews_summary .border-yellow-400 {
    background-color: var(--wp-gold) !important;
    border-color: var(--wp-gold) !important;
}

.reviews_summary button {
    border-color: var(--wp-brown-dark) !important;
    color: var(--wp-brown-dark) !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    transition: all 0.2s ease !important;
}
.reviews_summary button:hover {
    background-color: var(--wp-brown-dark) !important;
    color: #ffffff !important;
}

/* بطاقات التقييمات الفردية */
.user_review {
    padding: 20px !important;
    background-color: #ffffff;
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(var(--wp-shadow-color), 0.05);
    margin-bottom: 16px;
}
.user_review_name {
    color: var(--wp-brown-dark) !important;
}
.user_review_comment {
    color: var(--wp-text-muted) !important;
}

/* ==========================================================================
   9. عنوان الأقسام العامة (زي "منتجات مشابهة")
   ========================================================================== */
.home_section_top_title {
    color: var(--wp-brown-dark) !important;
    font-family: 'Cairo', sans-serif !important;
}

/* ==========================================================================
   10. كروت المنتجات (المنتجات المشابهة)
   ========================================================================== */
.home_grid_section_card {
    background-color: #ffffff !important;
    border: 1px solid var(--wp-border-light) !important;
}
.home_grid_section_card h2 {
    color: var(--wp-brown-dark) !important;
}
.home_grid_section_card .sphinx_product_card_btn {
    background-color: var(--wp-brown-dark) !important;
}
.home_grid_section_card .sphinx_product_card_btn:hover {
    background-color: var(--wp-gold) !important;
}

/* زرار "عرض الكل" */
.w-fit.mx-auto.mt-6 {
    border-color: var(--wp-gold) !important;
    color: var(--wp-brown-dark) !important;
    font-weight: 700 !important;
    transition: all 0.2s ease !important;
}
.w-fit.mx-auto.mt-6:hover {
    background-color: var(--wp-brown-dark) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   11. تجاوب الموبايل
   ========================================================================== */
@media (max-width: 768px) {
    .product_container {
        border-radius: 16px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    .product_description h3 {
        font-size: 17px !important;
    }
}