/* ============================
   فخامة — أطياب أزرق العود
   بدون تغيير الخط الأساسي
   ============================ */

/* ----------------------------
   1) هيدر وفوتر — أسود بالكامل
---------------------------- */
header:first-of-type > div:first-child,
.header:first-of-type > div:first-child,
.site-header:first-of-type > div:first-child {
    background-color: #000 !important;
    color: #fff !important;
    padding: 12px 0 !important;
}

header:first-of-type > div:first-child a,
.header:first-of-type > div:first-child a,
.site-header:first-of-type > div:first-child a {
    color: #fff !important;
    transition: 0.3s ease;
}

header:first-of-type > div:first-child a:hover,
.header:first-of-type > div:first-child a:hover,
.site-header:first-of-type > div:first-child a:hover {
    color: #ffd300 !important;
}

/* ----------------------------
   2) الأقسام — أفقية على الكمبيوتر
---------------------------- */
nav, .navigation, .main-menu, .header-menu, .store-header-nav {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: #fff !important;
    padding: 12px !important;
    gap: 12px !important;
    border-bottom: 1px solid #eee !important;
    justify-content: center !important;
}

nav a, .navigation a, .main-menu a, .header-menu a, .store-header-nav a {
    color: #000 !important;
    padding: 8px 18px !important;
    background: #fff !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    transition: 0.3s ease;
}

nav a:hover,
.navigation a:hover,
.main-menu a:hover,
.header-menu a:hover,
.store-header-nav a:hover {
    background: #000 !important;
    color: #ffd300 !important;
}

/* ----------------------------
   3) أيقونة السلة
---------------------------- */
.cart-icon svg,
.header-cart svg,
.nav-cart svg {
    color: #000 !important;
    width: 26px !important;
    height: 26px !important;
    transition: .3s;
}

.cart-icon:hover svg,
.header-cart:hover svg,
.nav-cart:hover svg {
    color: #ffd300 !important;
}

/* ----------------------------
   4) الفوتر — مثل الهيدر
---------------------------- */
footer, .site-footer, .main-footer {
    background-color: #000 !important;
    color: #ffd300 !important;
    padding: 12px 0 !important;
    text-align: center;
}

footer h1, footer h2, footer h3, footer h4, footer h5, footer h6 {
    color: #fff !important;
}

footer p, footer span, footer li, footer a, footer div, footer strong, footer em {
    color: #ffd300 !important;
    transition: 0.3s ease;
}

footer a:hover, footer span:hover, footer i:hover, footer svg:hover {
    color: #ffd300 !important;
    fill: #ffd300 !important;
}

footer .s-social-list {
    display: flex !important;
    justify-content: center !important;
    gap: 12px !important;
    padding: 10px 0 0 0 !important;
}

footer .s-social-list a .s-social-icon svg {
    width: 32px !important;
    height: 32px !important;
    fill: #fff !important;
    transition: 0.3s ease;
}

footer .s-social-list a:hover .s-social-icon svg {
    fill: #ffd300 !important;
}

/* ----------------------------
   5) ألوان المحتوى وأزرار
---------------------------- */
body, .product-title, .section-title, h1, h2, h3, p {
    color: #000000 !important;
}

.product-price {
    color: #ffd300 !important;
    font-weight: 700 !important;
}

a { color: #000000 !important; }
a:hover { color: #ffd300 !important; }

button, .btn, .add-to-cart-btn {
    background-color: #000000 !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    padding: 12px 18px !important;
    border: none !important;
}

button:hover, .btn:hover {
    background-color: #ffd300 !important;
    color: #000000 !important; 
}

.buy-now-btn {
    background-color: #000000 !important;
    color: #ffffff !important;
}

.buy-now-btn:hover {
    background-color: #222 !important;
}

/* ----------------------------
   6) بنرات — عرض كامل مستقل
---------------------------- */
/* ----------------------------


/* ----------------------------
   8) تنظيم الأقسام والعناوين
---------------------------- */
.section {
    margin-bottom: 45px !important;
}

.section-title {
    border-bottom: 2px solid #ffd300 !important;
    padding-bottom: 8px !important;
    text-align: center !important;
}

/* ----------------------------
   9) القوائم على الجوال — عمودية
---------------------------- */
/* ===========================
   إصلاح مشكلة القائمة في الجوال
   القائمة تظهر كاملة بدون قص
   =========================== */
/* ===========================
   إصلاح القائمة بالجوال نهائياً
   =========================== */

@media (max-width: 768px) {

    /* جعل القائمة عمودية + قابلة للظهور */
    nav, .navigation, .main-menu, .header-menu, .store-header-nav {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        width: 100% !important;
        padding: 10px 0 !important;
        gap: 0 !important;
        overflow: visible !important; 
        background: #fff !important;
    }

    /* الروابط تظهر بكامل العرض */
    nav a, .navigation a, .main-menu a, .header-menu a, .store-header-nav a {
        display: block !important;
        width: 100% !important;
        padding: 14px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }

    /* منع القص من الحاويات */
    header, .site-header, .header-wrapper, .store-header {
        overflow: visible !important;
        height: auto !important;
    }
}