/* 1. Root Level Force Black - Poori website ke core elements ko block karna */
html, body, main, #main, #page, #wrapper, .wrapper, #content-wrapper {
    background-color: #000000 !important;
    
    color: #ffffff !important;
}

/* 2. Main layout ke grid containers jo page ko hold karte hain */
.container, .container-fluid, #content, .page-home, .page-content {
    background-color: #000000 !important;
    
}

/* 3. Volty/ETS Theme ke specific structural sections */
#header, .header-nav, .header-top, #footer, .footer-container, .footer-before, .footer-after {
    background-color: #000000 !important;
    background: #000000 !important;
}

/* 4. Saare text elements, titles aur text links ko force white karna */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, 
p, span, a, .products-section-title, .products-section-title span,
.product-title a, .product-price, .price, .product-name {
    color: #ffffff !important;
}

/* 5. Product boxes/miniatures ko dark grey clean appearance dena */
.product-miniature, .thumbnail-container, .product-miniature .thumbnail-container, .group_item_product {
    background-color: #111111 !important;
    background: #111111 !important;
    border: 1px solid #222222 !important;
}

/* Product cards ke niche jo safed boxes aa rahe hain unhe dark gray karne ke liye */
.product-description, 
.product-miniature .product-description, 
.thumbnail-container .product-description,
.product-miniature .js-product-miniature-wrapper {
    background-color: #111111 !important;
    background: #111111 !important;
}

/* Product ka Naam (Title) aur Price ko kale background par chamkane ke liye */
.product-title, .product-title a, h3.product-title a {
    color: #ffffff !important;
    display: block !important;
}

.product-price-and-shipping, .price, .product-price {
    color: #ff4d4d !important; /* Price ko red rakhne ke liye taaki achha dikhe, aap chahein toh #ffffff bhi kar sakte hain */
}

/* Section ke beech mein jo blocks khali white dikh rahe hain (Headings) */
.products-section-title, .products-section-title span, h4.h1 span {
    color: #ffffff !important;
    background-color: transparent !important;
}

/* Breadcrumb ke piche ki white strip ko pure black ya transparent karne ke liye */
.breadcrumb, .breadcrumb-wrapper, .breadcrumb_wrapper, nav.breadcrumb {
    background-color: #000000 !important;
    background: #000000 !important;
    border: none !important;
    padding: 10px 0 !important;
}

/* Breadcrumb ke andar ke links aur text ko kale background pr chamkane ke liye */
.breadcrumb ol li, .breadcrumb li, .breadcrumb a, .breadcrumb span {
    color: #cccccc !important; /* Thoda soft white/gray look ke liye */
}

/* Jo active page ka naam hai (last item) use pure white karne ke liye */
.breadcrumb ol li:last-child, .breadcrumb ol li:last-child a, .breadcrumb li:last-child span {
    color: #ffffff !important;
    font-weight: bold;
}

/* Links ke beech mein jo separators hote hain (jaise / ya >) unhe white karne ke liye */
.breadcrumb li::after, .breadcrumb ol li::before {
    color: #ffffff !important;
}

/* 1. Scroll hone par header ka koi bhi outer wrapper side mein white na dikhe */
.is-sticky, .scroll-menu, .fixed-header, .sticky-header, [class*="sticky"], [class*="scroll"] {
    background-color: #000000 !important;
    background: #000000 !important;
}

/* 2. Scroll hote hi header ke andar ke saare sub-sections aur divs ko pure black force karna */
.is-sticky div, .scroll-menu div, .fixed-header div,
#header.is-sticky .header-top, #header.scroll-menu .header-top,
.is-sticky .container, .scroll-menu .container {
    background-color: #000000 !important;
    background: #000000 !important;
}

/* 3. Agar sidebar block ya categories list ke text elements (jaise image_428815.jpg mein left sidebar white hai) unhe dark mode mein fit karna */
.block-categories, .products-by-category, .sidebar-box, .block-categories .category-submenu {
    background-color: #111111 !important;
    color: #ffffff !important;
}
.block-categories .category-submenu li a, .block-categories a {
    color: #ffffff !important;
}

/* Black dropdown arrow ko force karke white banana */
.ets_mm_megamenu_content_ul .mm_columns_contents_ul li a .arrow,
.ets_mm_megamenu_content_ul .mm_columns_ul li a .arrow,
.ets_mm_megamenu_content_ul li li a .arrow,
.ets_mm_megamenu .arrow,
.ets_mm_megamenu .opener,
.ets_mm_megamenu .plus_minus {
    filter: invert(1) brightness(2) !important; /* Yeh black ko pakad kar pure white kar dega */
    -webkit-filter: invert(1) brightness(2) !important; /* Safari aur Chrome ke liye */
    opacity: 1 !important;
    display: inline-block !important;
    visibility: visible !important;
}

/* Agar arrow kisi element ke pseudo-class (:before/:after) se aa raha hai */
.ets_mm_megamenu_content_ul li.has-sub > a::after,
.ets_mm_megamenu .mm_columns_ul li.has-sub > a::after,
.ets_mm_megamenu .mm_columns_contents_ul li.has-sub > a::after {
    filter: invert(1) brightness(2) !important;
    -webkit-filter: invert(1) brightness(2) !important;
}