/* assets/css/theme-overrides.css */
/* ==========================================================================
   GLAMSILK THEME OVERRIDES SYSTEM (LIGHT / DARK CORRECTIONS)
   Overrides hardcoded colors on user pages to support dynamic switching
   ========================================================================== */

/* 1. Base Wrapper & Section Backgrounds */
body,
.main-content-wrapper,
.section-container,
.pdp-page-container,
.pf-wrapper,
.cart-wrapper,
.co-wrapper,
.login-wrapper,
.fp-wrapper,
.so-wrapper,
.os-wrapper,
.register-wrapper,
.cart-page-wrapper,
.gs-checkout-page-wrapper,
.co-page-wrapper {
    background-color: var(--color-bg-page) !important;
    background: var(--color-bg-page) !important;
    color: var(--color-text-primary) !important;
    transition: background-color 0.3s ease, color 0.3s ease !important;
}

/* 1.1 Global Text Color Overrides for User & Catalog Containers */
.section-container h1, .section-container h2, .section-container h3, .section-container h4, .section-container h5, .section-container h6, .section-container strong, .section-container label,
.pdp-page-container h1, .pdp-page-container h2, .pdp-page-container h3, .pdp-page-container h4, .pdp-page-container h5, .pdp-page-container h6, .pdp-page-container strong, .pdp-page-container label,
.pf-wrapper h1, .pf-wrapper h2, .pf-wrapper h3, .pf-wrapper h4, .pf-wrapper h5, .pf-wrapper h6, .pf-wrapper strong, .pf-wrapper label,
.cart-wrapper h1, .cart-wrapper h2, .cart-wrapper h3, .cart-wrapper h4, .cart-wrapper h5, .cart-wrapper h6, .cart-wrapper strong, .cart-wrapper label,
.co-wrapper h1, .co-wrapper h2, .co-wrapper h3, .co-wrapper h4, .co-wrapper h5, .co-wrapper h6, .co-wrapper strong, .co-wrapper label,
.login-wrapper h1, .login-wrapper h2, .login-wrapper h3, .login-wrapper h4, .login-wrapper h5, .login-wrapper h6, .login-wrapper strong, .login-wrapper label,
.register-wrapper h1, .register-wrapper h2, .register-wrapper h3, .register-wrapper h4, .register-wrapper h5, .register-wrapper h6, .register-wrapper strong, .register-wrapper label,
.os-wrapper h1, .os-wrapper h2, .os-wrapper h3, .os-wrapper h4, .os-wrapper h5, .os-wrapper h6, .os-wrapper strong, .os-wrapper label,
.cart-page-wrapper h1, .cart-page-wrapper h2, .cart-page-wrapper h3, .cart-page-wrapper h4, .cart-page-wrapper strong,
.gs-checkout-page-wrapper h1, .gs-checkout-page-wrapper h2, .gs-checkout-page-wrapper h3, .gs-checkout-page-wrapper h4, .gs-checkout-page-wrapper strong,
.co-page-wrapper h1, .co-page-wrapper h2, .co-page-wrapper h3, .co-page-wrapper h4, .co-page-wrapper strong {
    color: var(--color-text-primary) !important;
}

.section-container p, .section-container span, .section-container small, .section-container li,
.pdp-page-container p, .pdp-page-container span, .pdp-page-container small, .pdp-page-container li,
.pf-wrapper p, .pf-wrapper span, .pf-wrapper small, .pf-wrapper li,
.cart-wrapper p, .cart-wrapper span, .cart-wrapper small, .cart-wrapper li,
.co-wrapper p, .co-wrapper span, .co-wrapper small, .co-wrapper li,
.login-wrapper p, .login-wrapper span, .login-wrapper small,
.register-wrapper p, .register-wrapper span, .register-wrapper small,
.os-wrapper p, .os-wrapper span, .os-wrapper small, .os-wrapper li,
.cart-page-wrapper p, .cart-page-wrapper span, .cart-page-wrapper small,
.gs-checkout-page-wrapper p, .gs-checkout-page-wrapper span, .gs-checkout-page-wrapper small,
.co-page-wrapper p, .co-page-wrapper span, .co-page-wrapper small {
    color: var(--color-text-muted) !important;
}

.section-container a, .pdp-page-container a, .pf-wrapper a, .cart-wrapper a, .co-wrapper a, .login-wrapper a, .register-wrapper a, .os-wrapper a, .cart-page-wrapper a, .gs-checkout-page-wrapper a, .co-page-wrapper a {
    color: var(--color-text-primary);
}

/* 2. Panels, Sidebars & Cards */
.catalog-sidebar-card,
.catalog-toolbar-card,
.new-card,
.new-card-content,
.cat-chip-pill,
.pdp-gallery-column,
.pdp-thumb-card,
.pdp-main-canvas,
.pf-sidebar,
.pf-sidebar-hero,
.pf-card,
.cart-card,
.cart-summary-card,
.co-card,
.co-summary-card,
.so-card,
.login-card,
.fp-card,
.auth-card,
.checkout-panel-lux,
.gs-checkout-card,
.cart-summary-curated-badge,
.cart-shipping-banner,
.cart-luxury-item,
.os-success-banner,
.os-info-card,
.os-items-card,
.gs-overview-card,
.perks-bar,
.pdp-reviews-wrapper,
.pdp-review-marquee-card,
#writeReviewCard,
.gs-payment-card,
.pf-order-card,
.pf-help-card,
.pf-addr-card {
    background-color: var(--color-bg-surface) !important;
    background: var(--color-bg-surface) !important;
    border: 1px solid var(--border-subtle) !important;
    box-shadow: var(--shadow-sm) !important;
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* 3. Text Color (Primary Elements) */
.new-title,
.new-price,
.sidebar-header-row h3,
.catalog-hero-title,
.pdp-title,
.pdp-price,
.pdp-price-amount,
.pf-name,
.star-score,
.cart-item-title,
.cart-item-price,
.co-section-title,
.summary-total,
.so-title,
.auth-title,
.tab-title,
.catalog-breadcrumb a,
.pdp-breadcrumb a,
.pf-breadcrumb a,
.cart-breadcrumb a,
.co-breadcrumb a,
.cart-header-title,
.cart-item-name,
.cart-item-line-total,
.cart-summary-heading,
.cart-shipping-text-row,
.cart-stepper-val,
.cart-item-name span,
.cart-header-title span,
.os-success-title,
.os-info-name,
.os-item-name,
.os-item-price,
.gs-overview-title,
.gs-summary-item-name,
.gs-summary-item-price,
.gs-total-price,
.custom-cat-checkbox,
.pdp-reviews-wrapper h2,
.pdp-reviews-wrapper h3,
.pdp-review-marquee-card div,
.gs-payment-card strong,
.pf-order-id,
.pf-order-item-name,
.pf-order-item-price,
.pf-order-total,
.pf-help-card h4,
.pf-help-card a,
.pf-addr-name,
.pf-addr-phone {
    color: var(--color-text-primary) !important;
    transition: color 0.3s ease !important;
}

/* 4. Text Color (Secondary / Muted / Light Elements) */
.prod-card-desc,
.catalog-hero-desc,
.catalog-breadcrumb,
.catalog-count-label,
.review-cnt,
.old-price,
.pdp-breadcrumb,
.pdp-desc,
.pf-email,
.pf-breadcrumb,
.cart-item-desc,
.co-desc,
.auth-desc,
.pdp-meta-row span,
.pdp-meta-row strong,
.cart-stepper-btn,
.cart-item-variant-pill,
.cart-summary-curated-badge div p,
.cart-trust-badges-mini span,
.os-success-subtitle,
.os-info-address,
.os-info-phone,
.os-item-meta,
.os-total-row,
.gs-summary-row,
.gs-summary-item-meta,
.pdp-reviews-wrapper p,
.pdp-review-marquee-card p,
.gs-payment-card p,
.pf-order-date,
.pf-order-item-meta,
.pf-help-card p,
.pf-help-card span,
.pf-addr-text {
    color: var(--color-text-muted) !important;
    transition: color 0.3s ease !important;
}

/* 5. Custom Inputs, Selectors & Checkboxes */
.price-input-box input,
.custom-sort-dropdown,
.checkbox-custom,
.pdp-variant-selector,
.pf-input,
.cart-qty-input,
.co-input,
.auth-input,
.form-control,
.address-select-card-lux {
    background-color: var(--color-bg-subtle) !important;
    background: var(--color-bg-subtle) !important;
    border: 1px solid var(--border-subtle) !important;
    color: var(--color-text-primary) !important;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease !important;
}

/* Checkbox checked backgrounds */
.custom-cat-checkbox input:checked ~ .checkbox-custom {
    background-color: var(--color-accent-gold) !important;
    border-color: var(--color-accent-gold) !important;
}

/* 6. Outline & Quick Add Buttons */
.btn-quick-add,
.btn-outline-lux,
.pf-btn-outline,
.cart-btn-outline,
.pf-btn-outline-green {
    background: var(--color-bg-surface) !important;
    color: var(--color-text-muted) !important;
    border: 1px solid var(--border-subtle) !important;
    transition: all 0.25s ease !important;
}

.btn-quick-add:hover,
.btn-outline-lux:hover,
.pf-btn-outline:hover,
.cart-btn-outline:hover,
.pf-btn-outline-green:hover {
    background: var(--color-primary-light, #d49a42) !important;
    color: var(--color-bg-page) !important;
    border-color: var(--color-primary-light, #d49a42) !important;
}

/* Active style matching (active tab filter button has gold outline and gold text) */
.pf-btn-outline-green[style*="#d49a42"],
.pf-btn-outline-green[style*="rgb(212, 154, 66)"] {
    background: rgba(212,154,66,0.08) !important;
    border-color: #d49a42 !important;
    color: #d49a42 !important;
}
.pf-btn-outline-green[style*="#d49a42"] span,
.pf-btn-outline-green[style*="rgb(212, 154, 66)"] span {
    background: #d49a42 !important;
    color: #0b0b0d !important;
}

/* 7. Nav bar links color fix */
.lux-nav-link {
    color: var(--nav-link-color) !important;
    transition: color 0.25s ease !important;
}
.lux-nav-item:hover .lux-nav-link {
    color: var(--header-logo) !important;
}
.lux-best-seller-btn {
    border-color: var(--gold-primary) !important;
    color: var(--gold-primary) !important;
}
.lux-best-seller-btn:hover {
    background: var(--gold-primary) !important;
    color: var(--header-bg) !important;
}

/* 8. Extra Specific Page Adjustments */
.pdp-main-canvas img {
    background: var(--color-bg-subtle) !important;
}
.pdp-detail-card-lux {
    background: var(--color-bg-surface) !important;
    border-color: var(--border-subtle) !important;
}
.catalog-page-header {
    background: radial-gradient(circle at 80% 50%, rgba(212, 154, 66, 0.15) 0%, transparent 60%), 
                linear-gradient(135deg, var(--color-bg-surface) 0%, var(--color-bg-subtle) 100%) !important;
    border: 1px solid var(--border-subtle) !important;
}

/* 9. PDP Promo Grid & Cards Responsive Layout */
.pdp-promo-grid {
    display: grid !important;
    grid-template-columns: 1.2fr 1fr !important;
    gap: 30px !important;
}

.pdp-promo-card {
    background-color: var(--color-bg-surface) !important;
    background: var(--color-bg-surface) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 24px !important;
    padding: 36px !important;
    box-shadow: var(--shadow-sm) !important;
    transition: background-color 0.3s ease, border-color 0.3s ease !important;
}

.pdp-promo-card-left {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.pdp-promo-card-right {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

@media (max-width: 991px) {
    .pdp-promo-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
}

@media (max-width: 576px) {
    .pdp-promo-card-left {
        flex-direction: column-reverse !important;
        align-items: stretch !important;
        gap: 24px !important;
    }
    .pdp-promo-card-left > div:first-child {
        max-width: 100% !important;
    }
    .pdp-promo-card-left > div:last-child {
        margin: 0 auto !important;
    }
}

/* Global viewport overflow fix */
html,
body {
    overflow-x: hidden !important;
    width: 100% !important;
}