/* Fix logo agar fit dalam header dan tidak overflow */

/* Desktop Logo */
.whb-visible-lg .wd-header-html img.alignnone.wp-image-3908,
.whb-visible-lg .wd-header-html img[class*="wp-image-3908"] {
    max-width: 100%;
    height: auto;
    max-height: 80px;
    width: auto;
    display: block;
    object-fit: contain;
}

/* Mobile Logo */
.whb-hidden-lg .wd-header-html img.alignnone.wp-image-3908,
.whb-hidden-lg .wd-header-html img[class*="wp-image-3908"] {
    max-width: 100%;
    height: auto;
    max-height: 40px;
    width: auto;
    display: block;
    object-fit: contain;
}

/* Container wrapper untuk logo */
.wd-header-html {
    display: flex;
    align-items: center;
    max-width: 100%;
    overflow: hidden;
}

.wd-header-html p {
    margin: 0;
    padding: 0;
    max-width: 100%;
    display: flex;
    align-items: center;
}

.wd-header-html a {
    display: inline-block;
    max-width: 100%;
    line-height: 0;
}

/* Pastikan kolom tidak overflow */
.whb-col-left {
    overflow: hidden;
    max-width: 100%;
}

.whb-mobile-center {
    overflow: hidden;
    max-width: 100%;
}

/* Responsive adjustments untuk berbagai ukuran layar */
@media (max-width: 1200px) {
    .whb-visible-lg .wd-header-html img.alignnone.wp-image-3908 {
        max-height: 70px;
    }
}

@media (max-width: 992px) {
    .whb-visible-lg .wd-header-html img.alignnone.wp-image-3908 {
        max-height: 60px;
    }
}

/* Alternative: Jika ingin menggunakan width tetap dengan max-width constraint */
.whb-visible-lg .wd-header-html img.alignnone.wp-image-3908 {
    width: 300px;
    max-width: 100%;
    height: auto;
    max-height: 80px;
}

.whb-hidden-lg .wd-header-html img.alignnone.wp-image-3908 {
    width: 190px;
    max-width: 100%;
    height: auto;
    max-height: 40px;
}

/* ============================================
   DARK GREY BACKGROUND DAN WHITE TEXT STYLING
   ============================================ */

/* Header background dark grey */
.whb-general-header,
.whb-row.whb-general-header,
.whb-general-header.whb-sticky-row {
    background-color: #2b2b2b !important; /* Dark grey */
    background: #2b2b2b !important;
}

/* Main page wrapper background dark grey */
.main-page-wrapper,
#main,
.site-content,
.content-area,
#page {
    background-color: #2b2b2b !important; /* Dark grey */
    background: #2b2b2b !important;
    color: #ffffff !important; /* White text default */
}

/* Semua heading (h1-h6) warna putih */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.entry-title,
.page-title,
.post-title,
.woocommerce h1,
.woocommerce h2,
.woocommerce h3,
.woocommerce-page h1,
.woocommerce-page h2,
.woocommerce-page h3,
.wd-title,
.wd-post-title,
.wd-product-title {
    color: #ffffff !important; /* White */
}

/* Semua paragraf warna putih */
p,
.entry-content p,
.post-content p,
.woocommerce p,
.page-content p,
.entry-summary p,
.wd-text,
.elementor-text-editor p,
.wpb_text_column p {
    color: #ffffff !important; /* White */
}

/* Text umum di main wrapper juga putih */
.main-page-wrapper,
.main-page-wrapper *,
.content-area,
.content-area * {
    color: #ffffff !important;
}

/* Exception untuk link dan elemen khusus yang mungkin perlu warna berbeda */
.main-page-wrapper a,
.content-area a {
    color: inherit; /* Bisa diatur manual jika perlu */
}

/* Pastikan body juga dark untuk konsistensi */
body {
    background-color: #2b2b2b !important;
    color: #ffffff !important;
}

/* Container dan wrapper lainnya */
.container,
.site-main,
.entry-content,
.wd-content-wrapper {
    color: #ffffff !important;
}

/* List items juga putih */
.main-page-wrapper li,
.content-area li,
ul li,
ol li {
    color: #ffffff !important;
}

/* Span dan div text */
.main-page-wrapper span:not(.wd-nav-img),
.content-area span:not(.wd-nav-img) {
    color: #ffffff !important;
}

.main-page-wrapper div,
.content-area div {
    color: #000000 !important;
}

/* Product tabs wrapper dark grey */
.product-tabs-wrapper,
.wd-product-tabs-wrapper,
.woocommerce-tabs,
.wc-tabs-wrapper {
    background-color: #2b2b2b !important; /* Dark grey */
    background: #2b2b2b !important;
    color: #000000 !important;
}

.product-tabs-wrapper *,
.wd-product-tabs-wrapper *,
.woocommerce-tabs *,
.wc-tabs-wrapper * {
    color: #000000 !important;
}

/* Prefooter black */
.wd-prefooter,
.prefooter {
    background-color: #000000 !important; /* Black */
    background: #000000 !important;
    color: #ffffff !important; /* White text */
}

.wd-prefooter *,
.prefooter * {
    color: #ffffff !important; /* White text */
}

/* Pastikan semua elemen di dalam prefooter juga hitam background dan putih text */
.wd-prefooter .vc_row,
.wd-prefooter .vc_row-fluid,
.wd-prefooter .vc_column-inner,
.wd-prefooter .wpb_wrapper,
.wd-prefooter .wpb_content_element,
.wd-prefooter .vc_custom_1637445302154,
.wd-prefooter .vc_custom_1633556413793 {
    background-color: #000000 !important;
    background: #000000 !important;
    color: #ffffff !important; /* White text */
}

/* Pastikan heading dan text di prefooter putih */
.wd-prefooter h1,
.wd-prefooter h2,
.wd-prefooter h3,
.wd-prefooter h4,
.wd-prefooter h5,
.wd-prefooter h6,
.wd-prefooter strong,
.wd-prefooter .wpb_wrapper h4,
.wd-prefooter .wpb_text_column h4,
.wd-prefooter .wpb_wrapper strong,
.wd-prefooter p,
.wd-prefooter span {
    color: #ffffff !important; /* White text */
}

/* Product brands black background */
.wd-product-brands {
    background-color: #000000 !important; /* Black */
    background: #000000 !important;
    color: #000000 !important;
}

.wd-product-brands * {
    color: #000000 !important;
}

/* Sticky button black background */
.wd-sticky-btn,
.wd-sticky-btn-shown {
    background-color: #000000 !important; /* Black */
    background: #000000 !important;
    color: #ffffff !important; /* White text */
}

.wd-sticky-btn-container,
.wd-sticky-btn-content,
.wd-sticky-btn-info,
.wd-sticky-btn-cart {
    background-color: #000000 !important;
    background: #000000 !important;
    color: #ffffff !important; /* White text */
}

/* Semua elemen di dalam sticky button putih text */
.wd-sticky-btn *,
.wd-sticky-btn h4,
.wd-sticky-btn .wd-entities-title,
.wd-sticky-btn p,
.wd-sticky-btn .price,
.wd-sticky-btn .woocommerce-Price-amount,
.wd-sticky-btn .woocommerce-Price-currencySymbol,
.wd-sticky-btn .stock,
.wd-sticky-btn label,
.wd-sticky-btn span,
.wd-sticky-btn .quantity,
.wd-sticky-btn input,
.wd-sticky-btn button,
.wd-sticky-btn a {
    color: #ffffff !important; /* White text */
}

/* Form elements di sticky button */
.wd-sticky-btn .cart,
.wd-sticky-btn .quantity,
.wd-sticky-btn .input-text,
.wd-sticky-btn .qty {
    background-color: #1a1a1a !important; /* Dark grey untuk input fields */
    color: #ffffff !important;
    border-color: #333333 !important;
}

/* Button di sticky button */
.wd-sticky-btn .single_add_to_cart_button,
.wd-sticky-btn .button {
    background-color: #333333 !important;
    color: #ffffff !important;
    border-color: #555555 !important;
}

.wd-sticky-btn .single_add_to_cart_button:hover,
.wd-sticky-btn .button:hover {
    background-color: #444444 !important;
    color: #ffffff !important;
}