/* 1. تبييض خلفية المتجر بالكامل */
html, body, #app, .main-content, .s-block, section, .product-index {
    background-color: #ffffff !important;
    background: #ffffff !important;
}

/* 2. الهيدر والفوتر (أسود موحد ونحيف) */
:root { --store-black: #1a1a1a; --store-gold: #fad228; }

header, .top-navbar, .main-nav-container, .main-nav-container .container, footer, .store-footer {
    background-color: var(--store-black) !important;
    background: var(--store-black) !important;
    border: none !important;
}

.main-nav-container { padding: 5px 0 !important; min-height: auto !important; }

/* 3. الشعار (اللوقو) */
.navbar-brand img { height: 45px !important; width: auto !important; }

/* 4. عرض المنتجات (خانتين خانتين فوق بعض) */
.s-products-list-wrapper {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* هنا السحر: خانتين بكل صف */
    gap: 15px !important;
    padding: 10px !important;
    background-color: #ffffff !important;
}

/* 5. تحويل الحدود البنفسجية إلى أصفر ذهبي */
.product-entry, .product-card, .s-product-card, [style*="border-color"] {
    border: 1px solid var(--store-gold) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    background-color: #ffffff !important;
}

/* 6. ألوان الأيقونات والنصوص */
.header-btn i, #s-cart-icon i, .sicon-menu, .search-icon i { color: var(--store-gold) !important; }
.product-entrytitle a, .s-blocktitle h2, p { color: #222222 !important; }
footer p, .store-footer a { color: #ffffff !important; }

/* تنسيق الجوال لضمان بقاء الخانتين */
@media (max-width: 768px) {
    .s-products-list-wrapper {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .navbar-brand img { height: 38px !important; }
}