/* MyBeautyIndo — Global Dark Theme & Layout Overrides */

/* FORCE GLOBAL BLACK BACKGROUND FOR ALL WOOCOMMERCE PAGES */
html, body, 
body.woocommerce, 
body.woocommerce-page, 
body.woocommerce-checkout, 
body.woocommerce-cart, 
body.woocommerce-shop,
body.single-product,
#page, #content, .site-content, main, .entry-content, .wp-block-group {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* HIDE DUPLICATE THEME FOOTERS — ONLY SHOW SINGLE GMC FOOTER */
footer:not(#mbi-gmc-footer),
.wp-block-template-part.footer,
.site-footer,
header + footer:not(#mbi-gmc-footer) {
    display: none !important;
}

/* Base Theme Variables */
.woocommerce, .woocommerce-page {
    --mbi-bg: #000000;
    --mbi-card: #0a0a0a;
    --mbi-border: #1A1A1A;
    --mbi-accent: #EA580C;
    --mbi-text: #FFFFFF;
    --mbi-muted: #888888;
    --mbi-heading-font: 'Cormorant Garamond', serif;
    --mbi-mono-font: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Ensure Native Theme Header is 100% Unmodified & Clickable */
header.wp-block-template-part,
header.relative {
    background-color: #000000 !important;
    position: relative !important;
    z-index: 99999 !important;
    pointer-events: auto !important;
}

/* ==========================================================================
   GLOBAL CENTERING & CONTAINER SYSTEM FOR ALL PAGES
   ========================================================================== */

.wp-site-blocks,
#page,
.site,
#content,
.site-content,
main,
.entry-content,
.single-product .entry-content,
.woocommerce-checkout .entry-content,
.woocommerce-cart .entry-content,
.woocommerce-shop .entry-content {
    width: 100% !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
    float: none !important;
}

/* ==========================================================================
   PERFECT SINGLE PRODUCT PAGE CENTERING & LAYOUT
   ========================================================================== */

.single-product div.product,
.single-product .product {
    max-width: 1100px !important;
    margin: 40px auto !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 40px !important;
    float: none !important;
    clear: both !important;
}

/* Left Column Image Gallery */
.single-product .woocommerce-product-gallery,
.single-product .images,
.single-product .wp-block-woocommerce-product-image-gallery {
    flex: 1 1 45% !important;
    max-width: 500px !important;
    min-width: 300px !important;
    width: 45% !important;
    margin: 0 auto !important;
    background: #0a0a0a !important;
    border: 1px solid #1A1A1A !important;
    border-radius: 8px !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    text-align: center !important;
}

.single-product .woocommerce-product-gallery img,
.single-product .images img {
    margin: 0 auto !important;
    display: block !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    max-height: 420px !important;
}

/* Right Column Summary Box */
.single-product .summary,
.single-product .entry-summary {
    flex: 1 1 48% !important;
    max-width: 540px !important;
    min-width: 300px !important;
    width: 48% !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    text-align: left !important;
}

.single-product h1.product_title,
.single-product h1.wp-block-post-title,
.single-product h1 {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: clamp(28px, 3.5vw, 40px) !important;
    font-weight: 300 !important;
    color: #ffffff !important;
    line-height: 1.2 !important;
    margin: 0 0 16px 0 !important;
}

.single-product p.price,
.single-product .price,
.single-product .woocommerce-Price-amount {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
    font-size: 28px !important;
    font-weight: bold !important;
    color: #EA580C !important;
    margin: 0 0 16px 0 !important;
}

.single-product form.cart {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
    flex-wrap: wrap !important;
}

.single-product button.single_add_to_cart_button {
    background: #EA580C !important;
    color: #000000 !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
    font-size: 13px !important;
    font-weight: bold !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    padding: 14px 32px !important;
    min-height: 48px !important;
    border: none !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: background-color .3s ease !important;
}
.single-product button.single_add_to_cart_button:hover {
    background: #FFFFFF !important;
    color: #000000 !important;
}

/* Description & Reviews Tabs */
.single-product .woocommerce-tabs,
.single-product .wp-block-woocommerce-product-details {
    max-width: 900px !important;
    margin: 50px auto 0 auto !important;
    padding: 0 !important;
    float: none !important;
    clear: both !important;
    text-align: center !important;
}

.single-product ul.tabs.wc-tabs {
    display: flex !important;
    justify-content: center !important;
    gap: 12px !important;
    border-bottom: 1px solid #1A1A1A !important;
    padding: 0 !important;
    margin: 0 0 24px 0 !important;
    list-style: none !important;
}

.single-product ul.tabs.wc-tabs li a {
    display: block !important;
    padding: 12px 24px !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
    font-size: 12px !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    color: #888888 !important;
    text-decoration: none !important;
    border-bottom: 2px solid transparent !important;
}

.single-product ul.tabs.wc-tabs li.active a,
.single-product ul.tabs.wc-tabs li a:hover {
    color: #EA580C !important;
    border-bottom-color: #EA580C !important;
}

.single-product .woocommerce-Tabs-panel {
    background: #0a0a0a !important;
    border: 1px solid #1A1A1A !important;
    border-radius: 8px !important;
    padding: 30px 35px !important;
    color: #d4d4d4 !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
    font-size: 13px !important;
    line-height: 1.8 !important;
    text-align: left !important;
    margin: 0 auto !important;
}

/* Related Products Grid */
.single-product .related.products {
    max-width: 1100px !important;
    margin: 60px auto 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
    float: none !important;
    clear: both !important;
}

.single-product .related.products > h2 {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 32px !important;
    font-weight: 300 !important;
    color: #ffffff !important;
    text-align: center !important;
    margin-bottom: 30px !important;
}

.single-product .related.products ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
    justify-content: center !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

/* ==========================================================================
   CHECKOUT PAGE — 2-COLUMN DESKTOP GRID
   ========================================================================== */

@media (min-width: 992px) {
    form.checkout.woocommerce-checkout {
        display: grid !important;
        grid-template-columns: 58% 38% !important;
        column-gap: 4% !important;
        align-items: start !important;
        max-width: 1200px !important;
        margin: 0 auto !important;
        width: 100% !important;
    }
}

/* Billing & Shipping Cards */
.col-1, .col-2, 
.woocommerce-billing-fields, 
.woocommerce-shipping-fields, 
.woocommerce-additional-fields {
    width: 100% !important;
    float: none !important;
    margin: 0 0 24px 0 !important;
    background: #0a0a0a !important;
    border: 1px solid #1A1A1A !important;
    border-radius: 6px !important;
    padding: 24px !important;
    box-sizing: border-box !important;
}

.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3,
#order_review_heading {
    font-family: var(--mbi-heading-font) !important;
    font-size: 26px !important;
    font-weight: 300 !important;
    color: #ffffff !important;
    margin: 0 0 20px 0 !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid #1A1A1A !important;
}

.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
}

.form-row {
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    width: 100% !important;
    float: none !important;
    display: flex !important;
    flex-direction: column !important;
}

.form-row-first,
.form-row-last {
    width: calc(50% - 8px) !important;
}

.woocommerce-checkout label {
    color: #a3a3a3 !important;
    font-family: var(--mbi-mono-font) !important;
    font-size: 11px !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    margin-bottom: 8px !important;
    font-weight: 600 !important;
}

.woocommerce-checkout label .required {
    color: var(--mbi-accent) !important;
    margin-left: 3px !important;
}

.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout input[type="password"],
.woocommerce-checkout textarea,
.woocommerce-checkout select {
    background: #121212 !important;
    border: 1px solid #262626 !important;
    color: #ffffff !important;
    font-family: var(--mbi-mono-font) !important;
    font-size: 14px !important;
    padding: 12px 14px !important;
    border-radius: 4px !important;
    width: 100% !important;
    min-height: 46px !important;
    box-sizing: border-box !important;
}

/* Order Summary Box */
#order_review {
    background: #0a0a0a !important;
    border: 1px solid #1A1A1A !important;
    border-radius: 6px !important;
    padding: 24px !important;
    box-sizing: border-box !important;
}

#order_review table.shop_table {
    background: transparent !important;
    border: none !important;
    width: 100% !important;
    margin-bottom: 24px !important;
    border-collapse: collapse !important;
}

#order_review table.shop_table th {
    font-family: var(--mbi-mono-font) !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: .1em !important;
    color: #737373 !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid #1A1A1A !important;
    text-align: left !important;
}

#order_review table.shop_table td {
    padding: 14px 0 !important;
    border-bottom: 1px solid #1A1A1A !important;
    color: #ffffff !important;
    font-family: var(--mbi-mono-font) !important;
    font-size: 13px !important;
}

#order_review table.shop_table .product-name {
    font-family: var(--mbi-heading-font) !important;
    font-size: 17px !important;
    color: #ffffff !important;
}

#order_review table.shop_table .product-total,
#order_review table.shop_table .cart-subtotal td,
#order_review table.shop_table .order-total td {
    text-align: right !important;
}

#order_review table.shop_table .order-total td .woocommerce-Price-amount {
    font-size: 24px !important;
    color: var(--mbi-accent) !important;
    font-weight: bold !important;
}

/* Interactive Payment Gateways Selection */
#payment {
    background: #0a0a0a !important;
    border: 1px solid #1A1A1A !important;
    border-radius: 6px !important;
    padding: 20px !important;
    margin-top: 20px !important;
}

#payment ul.payment_methods {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 20px 0 !important;
    border-bottom: 1px solid #1A1A1A !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

#payment ul.payment_methods li {
    background: #111111 !important;
    border: 1px solid #222222 !important;
    border-radius: 6px !important;
    padding: 14px 16px !important;
    margin: 0 !important;
    cursor: pointer !important;
    transition: border-color .2s ease !important;
}

#payment ul.payment_methods li:hover {
    border-color: #EA580C !important;
}

#payment ul.payment_methods li label {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
}

#payment ul.payment_methods li input[type="radio"] {
    accent-color: #EA580C !important;
    width: 18px !important;
    height: 18px !important;
    cursor: pointer !important;
    margin: 0 !important;
}

#payment div.payment_box {
    background: #000000 !important;
    border: 1px solid #262626 !important;
    color: #a3a3a3 !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
    padding: 12px 14px !important;
    border-radius: 4px !important;
    margin-top: 10px !important;
}

#payment #place_order,
.woocommerce-checkout #place_order {
    display: block !important;
    width: 100% !important;
    background: var(--mbi-accent) !important;
    color: #000000 !important;
    padding: 16px 24px !important;
    font-family: var(--mbi-mono-font) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: .15em !important;
    text-transform: uppercase !important;
    border: none !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    margin-top: 20px !important;
    transition: background-color .3s ease, transform .2s ease !important;
}

#payment #place_order:hover,
.woocommerce-checkout #place_order:hover {
    background: #FFFFFF !important;
    color: #000000 !important;
    transform: translateY(-2px) !important;
}

/* RESPONSIVE BREAKPOINTS (<767px) */
@media (max-width: 767px) {
    .wp-site-blocks, #page, #content, .site-content, main {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    .single-product div.product,
    form.checkout.woocommerce-checkout {
        flex-direction: column !important;
        display: flex !important;
        gap: 24px !important;
        margin: 15px auto !important;
    }
    .single-product .woocommerce-product-gallery,
    .single-product .summary,
    .single-product .woocommerce-tabs,
    .single-product .related.products {
        width: 100% !important;
        max-width: 100% !important;
    }
}