/* ==========================================================================
   Modern Jewelry Brand Overhaul CSS
   ========================================================================== */

/* 1. Base Variables for the new lighter, elegant theme */
:root {
    --mj-bg-color: #FAFAF8 !important; /* Soft warm off-white */
    --mj-surface-color: #FFFFFF !important; /* Pure white for cards */
    --mj-text-main: #2A2A2A !important; /* Elegant charcoal */
    --mj-text-muted: #7A7A7A !important;
    --mj-accent-gold: #CBA135 !important; /* Classic premium gold */
    --mj-accent-hover: #A88224 !important;
    --mj-border-light: #EFEFEF !important;
    --mj-shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.04) !important;
    --mj-shadow-hover: 0 15px 40px rgba(0, 0, 0, 0.08) !important;
}

/* 2. Global Background & Text Overrides */
body, 
.wrapper,
.site-content,
.goldsmith-page-content,
.woocommerce-page {
    background-color: var(--mj-bg-color) !important;
    color: var(--mj-text-main) !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--mj-text-main) !important;
    letter-spacing: 0.05em !important; /* Elegant editorial spacing */
}

p, span, li, a {
    color: var(--mj-text-muted);
}

a:hover {
    color: var(--mj-accent-gold) !important;
}

/* 3. Header & Footer (Lightening them up) */
.site-header,
.goldsmith-header,
.elementor-location-header {
    background-color: var(--mj-surface-color) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02) !important;
    border-bottom: 1px solid var(--mj-border-light) !important;
}

.site-footer,
.goldsmith-footer,
.elementor-location-footer {
    background-color: #F4F4F2 !important; /* Slightly darker than main bg for contrast */
    color: var(--mj-text-main) !important;
    border-top: 1px solid var(--mj-border-light) !important;
}

.site-footer a,
.site-footer p,
.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4 {
    color: var(--mj-text-main) !important;
}

/* 4. Elegant Buttons */
button,
.button,
.btn,
.goldsmith-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.elementor-button {
    background-color: var(--mj-surface-color) !important;
    color: var(--mj-accent-gold) !important;
    border: 1px solid var(--mj-accent-gold) !important;
    border-radius: 0 !important; /* Sharp edges for modern luxury */
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    font-weight: 500 !important;
    padding: 12px 28px !important;
    transition: all 0.3s ease !important;
    box-shadow: none !important;
}

button:hover,
.button:hover,
.btn:hover,
.goldsmith-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.elementor-button:hover {
    background-color: var(--mj-accent-gold) !important;
    color: #FFFFFF !important;
}

/* Primary/Add to Cart buttons specifically */
.woocommerce .single_add_to_cart_button,
.woocommerce ul.products li.product .button {
    background-color: var(--mj-accent-gold) !important;
    color: #FFFFFF !important;
    border: 1px solid var(--mj-accent-gold) !important;
}

.woocommerce .single_add_to_cart_button:hover,
.woocommerce ul.products li.product .button:hover {
    background-color: var(--mj-accent-hover) !important;
    border-color: var(--mj-accent-hover) !important;
}

/* 5. Product Cards & Grids */
.woocommerce ul.products li.product,
.goldsmith-product-item {
    background-color: var(--mj-surface-color) !important;
    border: 1px solid var(--mj-border-light) !important;
    transition: all 0.3s ease !important;
    padding-bottom: 15px !important;
}

.woocommerce ul.products li.product:hover,
.goldsmith-product-item:hover {
    box-shadow: var(--mj-shadow-hover) !important;
    transform: translateY(-5px) !important; /* Gentle lift effect */
    border-color: var(--mj-accent-gold) !important;
}

.woocommerce ul.products li.product .price,
.goldsmith-product-price {
    color: var(--mj-text-main) !important;
    font-weight: 600 !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.goldsmith-product-title {
    color: var(--mj-text-main) !important;
    font-size: 1.1rem !important;
    letter-spacing: 0.03em !important;
}

/* 6. Product Single Page Tweaks */
.woocommerce div.product .product_title {
    color: var(--mj-text-main) !important;
    font-weight: 400 !important;
    font-size: 2rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.woocommerce div.product p.price {
    color: var(--mj-accent-gold) !important;
    font-size: 1.5rem !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    color: var(--mj-text-muted) !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: var(--mj-accent-gold) !important;
    border-bottom: 2px solid var(--mj-accent-gold) !important;
}

/* 7. Inputs and Forms */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
textarea,
select {
    background-color: var(--mj-surface-color) !important;
    border: 1px solid var(--mj-border-light) !important;
    color: var(--mj-text-main) !important;
    border-radius: 0 !important;
    padding: 12px 15px !important;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--mj-accent-gold) !important;
    box-shadow: none !important;
    outline: none !important;
}

/* 8. Dark mode overrides (Forcing light mode on anything forced dark) */
.dark,
.bg-dark,
.elementor-section.elementor-section-boxed > .elementor-container {
    background-color: transparent !important;
}

/* Override any inline dark backgrounds from Elementor if possible */
.elementor-section[style*="background-color: #000"],
.elementor-section[style*="background-color: #111"] {
    background-color: var(--mj-bg-color) !important;
}

/* 9. Mobile Responsiveness Tweaks */
@media (max-width: 768px) {
    button,
    .button,
    .btn,
    .goldsmith-btn,
    .woocommerce a.button,
    .woocommerce button.button,
    .woocommerce input.button,
    .elementor-button {
        padding: 10px 15px !important;
        font-size: 0.8rem !important;
        white-space: nowrap !important; /* Force text to stay on one line */
    }
}