/*
Theme Name: Astra Child
Description: Child theme of Astra with custom modifications for Mount Hydra Biotech
Author: Mount Hydra Biotech
Template: astra
Version: 1.0.0
Text Domain: astra-child
*/

/* Child theme styles will be added here */
/* =========================================================
   Mount Hydra US — 3DExosomes Cosmetic Style
   Dark Navy + Gold Luxury Theme
   ========================================================= */

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Montserrat:wght@300;400;500;600;700;800&display=swap');

/* --- CSS Variables --- */
:root {
    --mh-gold: #D4AF37;
    --mh-gold-light: #F0D47F;
    --mh-gold-dark: #B8941F;
    --mh-navy-dark: #0f172a;
    --mh-navy: #1e293b;
    --mh-navy-mid: #162032;
    --mh-navy-light: #243447;
    --mh-white: #ffffff;
    --mh-white-80: rgba(255,255,255,0.8);
    --mh-white-60: rgba(255,255,255,0.6);
    --mh-gold-gradient: linear-gradient(135deg, #D4AF37 0%, #F0D47F 50%, #D4AF37 100%);
    --mh-dark-gradient: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
}

/* --- Base / Body --- */
body,
.ast-site-content-wrap,
.site,
#page {
    background-color: var(--mh-navy-dark) !important;
    color: var(--mh-white) !important;
    font-family: 'Inter', sans-serif !important;
}

/* --- Global heading font --- */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
    font-family: 'Montserrat', sans-serif !important;
    color: var(--mh-white) !important;
}

/* --- Body text --- */
p, .elementor-widget-text-editor,
.elementor-text-editor,
body .elementor p {
    font-family: 'Inter', sans-serif !important;
}

/* =========================================================
   HEADER — Dark Navy with Gold Logo
   ========================================================= */
#masthead,
.site-header,
.ast-primary-header-bar,
.main-header-bar,
.ast-main-header-wrap,
.ast-desktop-header,
header.site-header,
.elementor-location-header {
    background-color: var(--mh-navy) !important;
    background: var(--mh-navy) !important;
    border-bottom: 1px solid rgba(212, 175, 55, 0.3) !important;
}

/* Navigation links */
.ast-builder-menu-1 .menu-item a,
.main-header-menu .menu-item a,
.ast-nav-menu .menu-link,
#site-navigation .menu-item a,
.ast-primary-header-bar .menu-item a,
.elementor-nav-menu .elementor-item {
    color: var(--mh-white-80) !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 500 !important;
    transition: color 0.3s ease !important;
}

.ast-builder-menu-1 .menu-item a:hover,
.ast-nav-menu .menu-link:hover,
.elementor-nav-menu .elementor-item:hover,
.elementor-nav-menu .elementor-item.elementor-item-active {
    color: var(--mh-gold) !important;
}

/* Site logo */
.ast-logo-img,
.custom-logo,
.ast-site-identity img {
    filter: brightness(0) saturate(100%) invert(1) !important;
}

/* =========================================================
   ANNOUNCEMENT BAR
   ========================================================= */
.ast-above-header-bar,
.ast-below-header-bar {
    background-color: var(--mh-navy-dark) !important;
    border-bottom: 1px solid rgba(212, 175, 55, 0.2) !important;
}

.ast-above-header-bar *,
.ast-below-header-bar * {
    color: var(--mh-gold-light) !important;
}

/* =========================================================
   ALL PAGE SECTIONS — Dark Background Override
   ========================================================= */
.elementor-section,
.e-container,
.elementor-container,
.elementor-section-wrap {
    background-color: transparent;
}

/* Sections with white/light backgrounds → dark navy */
.elementor-section.elementor-section-boxed > .elementor-container,
body .elementor-section[data-element_type="section"],
body .e-con {
    /* Preserve specific color overrides below */
}

/* Override light Elementor section backgrounds site-wide */
body .elementor-section:not([style*="background-image"]):not(.mh-keep-bg),
body .e-con:not([style*="background-image"]):not(.mh-keep-bg) {
    /* handled per-section */
}

/* =========================================================
   HERO SECTION — Already using background image
   ========================================================= */

/* Hero overlay enhancement */
.elementor-section.hero-section,
.hero-section .elementor-background-overlay,
.e-con.hero-section .elementor-background-overlay {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.4) 0%, rgba(15, 23, 42, 0.7) 100%) !important;
}

/* =========================================================
   GOLD BUTTONS — Primary CTAs
   ========================================================= */
.mh-btn-gold,
.elementor-button.elementor-size-md.mh-btn-gold,
a.mh-btn-gold {
    background: var(--mh-gold-gradient) !important;
    color: var(--mh-navy-dark) !important;
    border: none !important;
    border-radius: 30px !important;
    padding: 16px 32px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 20px rgba(212, 175, 55, 0.4) !important;
}

.mh-btn-gold:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 30px rgba(212, 175, 55, 0.6) !important;
}

/* Gold outline button */
.mh-btn-outline,
.elementor-button.mh-btn-outline {
    background: transparent !important;
    color: var(--mh-gold) !important;
    border: 2px solid var(--mh-gold) !important;
    border-radius: 30px !important;
    padding: 14px 30px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    transition: all 0.3s ease !important;
}

.mh-btn-outline:hover {
    background: var(--mh-gold) !important;
    color: var(--mh-navy-dark) !important;
}

/* =========================================================
   GOLD DIVIDER LINE
   ========================================================= */
.mh-gold-divider {
    height: 2px !important;
    background: var(--mh-gold-gradient) !important;
    border: none !important;
    margin: 40px 0 !important;
    opacity: 0.7 !important;
}

/* =========================================================
   CARDS — Dark with Gold Borders
   ========================================================= */
.mh-card,
.mh-benefit-card {
    background: var(--mh-navy) !important;
    border: 1px solid rgba(212, 175, 55, 0.2) !important;
    border-radius: 16px !important;
    padding: 32px !important;
    transition: all 0.3s ease !important;
}

.mh-card:hover,
.mh-benefit-card:hover {
    border-color: rgba(212, 175, 55, 0.6) !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 40px rgba(212, 175, 55, 0.15) !important;
}

/* =========================================================
   GOLD ACCENT TEXT
   ========================================================= */
.mh-gold-text,
.mh-label-gold {
    color: var(--mh-gold) !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    font-size: 13px !important;
}

/* =========================================================
   SECTION HEADINGS
   ========================================================= */
.mh-section-title {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 48px !important;
    font-weight: 700 !important;
    color: var(--mh-white) !important;
    line-height: 1.2 !important;
    letter-spacing: -1px !important;
}

.mh-section-title span {
    background: var(--mh-gold-gradient) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* =========================================================
   FEATURE LIST ITEMS — Gold Check Marks
   ========================================================= */
.mh-feature-list,
.mh-feature-list ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.mh-feature-list li {
    padding: 10px 0 10px 32px !important;
    position: relative !important;
    color: var(--mh-white-80) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

.mh-feature-list li::before {
    content: '✓' !important;
    position: absolute !important;
    left: 0 !important;
    color: var(--mh-gold) !important;
    font-weight: 700 !important;
    font-size: 16px !important;
}

/* =========================================================
   PRODUCT SHOWCASE CARDS
   ========================================================= */
.mh-product-card {
    background: linear-gradient(135deg, var(--mh-navy) 0%, var(--mh-navy-light) 100%) !important;
    border: 1px solid rgba(212, 175, 55, 0.3) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    padding: 40px !important;
}

.mh-product-card img {
    border-radius: 12px !important;
    width: 100% !important;
    object-fit: cover !important;
}

/* =========================================================
   APPLICATIONS GRID ITEMS
   ========================================================= */
.mh-app-card {
    position: relative !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    aspect-ratio: 1 !important;
}

.mh-app-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.5s ease !important;
}

.mh-app-card:hover img {
    transform: scale(1.05) !important;
}

.mh-app-card-overlay {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: linear-gradient(0deg, rgba(15,23,42,0.9) 0%, transparent 100%) !important;
    padding: 24px !important;
}

.mh-app-card-overlay h4 {
    color: var(--mh-white) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    margin: 0 !important;
}

/* =========================================================
   DARK CTA SECTION
   ========================================================= */
.mh-cta-section {
    background: linear-gradient(135deg, #0f172a 0%, #162032 50%, #0f172a 100%) !important;
    border-top: 1px solid rgba(212, 175, 55, 0.3) !important;
    border-bottom: 1px solid rgba(212, 175, 55, 0.3) !important;
}

/* =========================================================
   FOOTER — Dark Navy 4-Column
   ========================================================= */
.site-footer,
#colophon,
.ast-footer-overlay,
footer.site-footer {
    background-color: var(--mh-navy-dark) !important;
    background: var(--mh-navy-dark) !important;
    border-top: 1px solid rgba(212, 175, 55, 0.3) !important;
    color: var(--mh-white-60) !important;
}

.site-footer *,
#colophon * {
    color: var(--mh-white-60) !important;
    font-family: 'Inter', sans-serif !important;
}

.site-footer a,
#colophon a {
    color: var(--mh-white-60) !important;
    transition: color 0.3s ease !important;
    text-decoration: none !important;
}

.site-footer a:hover,
#colophon a:hover {
    color: var(--mh-gold) !important;
}

.site-footer h3,
.site-footer h4,
.site-footer h5,
#colophon h3,
#colophon h4 {
    color: var(--mh-white) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    font-size: 14px !important;
    margin-bottom: 20px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid rgba(212, 175, 55, 0.3) !important;
}

/* =========================================================
   DISCLAIMER BANNER
   ========================================================= */
.mh-disclaimer {
    background: rgba(212, 175, 55, 0.1) !important;
    border: 1px solid rgba(212, 175, 55, 0.3) !important;
    border-radius: 8px !important;
    padding: 16px 24px !important;
    margin: 20px 0 !important;
}

.mh-disclaimer p {
    color: var(--mh-gold-light) !important;
    font-size: 13px !important;
    font-style: italic !important;
    margin: 0 !important;
    line-height: 1.6 !important;
}

/* =========================================================
   WOOCOMMERCE — Preserve checkout (dark theme friendly)
   ========================================================= */
.woocommerce-page .site-content,
.woocommerce-checkout .entry-content,
.woocommerce-cart .entry-content {
    background: var(--mh-navy) !important;
}

.woocommerce-page form.checkout,
.woocommerce-page .woocommerce {
    color: var(--mh-white) !important;
}

.woocommerce-page .woocommerce-input-wrapper input,
.woocommerce-page .woocommerce-input-wrapper select,
.woocommerce-page .woocommerce-input-wrapper textarea {
    background: var(--mh-navy-light) !important;
    color: var(--mh-white) !important;
    border: 1px solid rgba(212, 175, 55, 0.3) !important;
}

.woocommerce-page .button.alt,
.woocommerce-page #place_order,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt {
    background: var(--mh-gold) !important;
    color: var(--mh-navy-dark) !important;
    font-weight: 700 !important;
}

/* Product prices */
.woocommerce-page .price,
.woocommerce .price {
    color: var(--mh-gold) !important;
}

/* =========================================================
   ELEMENTOR GLOBAL OVERRIDES — Force Dark Theme
   ========================================================= */

/* Section backgrounds */
.elementor-section,
.e-con {
    background-color: inherit;
}

/* White-background sections get dark treatment */
.elementor-section[style*="background-color: #ffffff"],
.elementor-section[style*="background-color: rgb(255, 255, 255)"],
.elementor-section[style*="background-color: #F7F8F8"],
.e-con[style*="background-color: #F7F8F8"],
.e-con[style*="background-color: #ffffff"] {
    background-color: var(--mh-navy) !important;
}

/* Override heading text colors in Elementor */
.elementor-widget-heading .elementor-heading-title {
    color: inherit;
}

/* Gold icon color */
.elementor-icon.mh-gold-icon,
.elementor-icon.mh-gold-icon i,
.elementor-icon.mh-gold-icon svg {
    color: var(--mh-gold) !important;
    fill: var(--mh-gold) !important;
}

/* =========================================================
   ANIMATIONS
   ========================================================= */
@keyframes mhFadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes mhFloat {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

.mh-animate-fade-up {
    animation: mhFadeInUp 0.8s ease forwards !important;
}

.mh-float {
    animation: mhFloat 3s ease-in-out infinite !important;
}

/* =========================================================
   SCROLLBAR — Dark theme
   ========================================================= */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--mh-navy-dark);
}

::-webkit-scrollbar-thumb {
    background: var(--mh-gold-dark);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--mh-gold);
}

/* =========================================================
   BADGE / TAG STYLING
   ========================================================= */
.mh-badge {
    display: inline-block !important;
    background: rgba(212, 175, 55, 0.15) !important;
    border: 1px solid rgba(212, 175, 55, 0.4) !important;
    color: var(--mh-gold) !important;
    padding: 6px 16px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    font-family: 'Inter', sans-serif !important;
}

/* =========================================================
   COMPARISON CARDS
   ========================================================= */
.mh-compare-card {
    background: linear-gradient(135deg, #162032 0%, #1e293b 100%) !important;
    border-radius: 20px !important;
    padding: 40px !important;
    border: 1px solid rgba(212, 175, 55, 0.2) !important;
    position: relative !important;
    overflow: hidden !important;
}

.mh-compare-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: var(--mh-gold-gradient) !important;
}

.mh-compare-card .card-title {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    color: var(--mh-white) !important;
    margin-bottom: 8px !important;
}

.mh-compare-card .card-subtitle {
    color: var(--mh-gold) !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 24px !important;
}

/* =========================================================
   STATS SECTION
   ========================================================= */
.mh-stat-number {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 52px !important;
    font-weight: 800 !important;
    background: var(--mh-gold-gradient) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    line-height: 1 !important;
}

.mh-stat-label {
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    color: var(--mh-white-60) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-top: 8px !important;
}

/* =========================================================
   OVERRIDE EXISTING SITE COLOR SCHEME
   ========================================================= */

/* Green buttons → Gold */
.elementor-button[style*="background-color: #06B275"],
.elementor-button[style*="background-color: #00B278"],
.elementor-button.elementor-button-success {
    background-color: var(--mh-gold) !important;
    color: var(--mh-navy-dark) !important;
}

/* Dark CTA section that was green → Navy */
[style*="background-color: #09232A"],
[style*="background-color: #0b2129"] {
    background-color: var(--mh-navy-dark) !important;
}

/* Light background sections → Navy */
[style*="background-color: #F7F8F8"],
[style*="background-color: #f7f8f8"],
[style*="background-color: rgb(247, 248, 248)"] {
    background-color: var(--mh-navy) !important;
}

/* White backgrounds → Dark Navy */
.elementor-section[style*="background-color: rgb(255, 255, 255)"],
.e-con[style*="background-color: rgb(255, 255, 255)"] {
    background-color: var(--mh-navy) !important;
}

/* Dark text → White in dark context */
.elementor-heading-title[style*="color: #222222"],
.elementor-heading-title[style*="color: #122A31"],
.elementor-heading-title[style*="color: #000000"] {
    color: var(--mh-white) !important;
}

.elementor-text-editor[style*="color: #6B7A8F"],
.elementor-text-editor[style*="color: #6B7980"] {
    color: var(--mh-white-60) !important;
}

/* =========================================================
   LOGO FLOATING ANIMATION
   ========================================================= */
.mh-logo-float img {
    animation: mhFloat 4s ease-in-out infinite !important;
    filter: drop-shadow(0 20px 40px rgba(212, 175, 55, 0.4)) !important;
}

/* =========================================================
   MOBILE RESPONSIVE
   ========================================================= */
@media (max-width: 768px) {
    .mh-section-title {
        font-size: 32px !important;
    }
    
    .mh-stat-number {
        font-size: 36px !important;
    }
    
    .mh-product-card,
    .mh-compare-card {
        padding: 24px !important;
    }
}

/* MH Dark Theme - Body Override */
body.mh-dark-theme {
    background-color: #0f172a !important;
    color: #ffffff !important;
}

/* Override any remaining white areas */
.ast-container,
.entry-content,
.site-content,
.content-area,
.ast-content-area-inner {
    background-color: transparent !important;
}

/* WooCommerce pages keep semi-dark */
.woocommerce-page .entry-content,
.woocommerce-page .site-content {
    background-color: #1e293b !important;
    color: #ffffff !important;
}

.woocommerce table.shop_table,
.woocommerce-page table.shop_table {
    border: 1px solid rgba(212,175,55,0.3) !important;
    background: #1e293b !important;
    color: #ffffff !important;
}

/* ============================================================
   SHOP PAGE - Dark WooCommerce Theme (added 2026-03-17)
   ============================================================ */

/* Shop page global background */
.woocommerce ul.products,
.woocommerce-page ul.products {
    background: transparent;
}

/* Product grid items */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    background: rgba(30,41,59,0.85) !important;
    border: 1px solid rgba(212,175,55,0.2) !important;
    border-top: 3px solid #D4AF37 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    padding: 0 !important;
    margin-bottom: 30px !important;
}

.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5) !important;
}

/* Product image container */
.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img {
    border-radius: 0 !important;
    width: 100% !important;
    height: 260px !important;
    object-fit: cover !important;
}

/* Product title */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    padding: 20px 20px 8px !important;
    margin: 0 !important;
}

/* Product price */
.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price,
.woocommerce ul.products li.product .price .amount,
.woocommerce-page ul.products li.product .price .amount,
.woocommerce ul.products li.product .price ins .amount {
    color: #D4AF37 !important;
    font-weight: 700 !important;
    font-size: 1.15rem !important;
    padding: 0 20px !important;
}

/* Add to Cart button on product cards */
.woocommerce ul.products li.product .button,
.woocommerce-page ul.products li.product .button,
.woocommerce ul.products li.product a.button {
    background: linear-gradient(135deg, #D4AF37, #F0D47F) !important;
    color: #0f172a !important;
    border: none !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    letter-spacing: 0.5px !important;
    margin: 12px 20px 20px !important;
    width: calc(100% - 40px) !important;
    text-align: center !important;
    padding: 12px 20px !important;
    transition: opacity 0.2s ease !important;
}

.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product a.button:hover {
    opacity: 0.9 !important;
    color: #0f172a !important;
}

/* Shop page header / title area */
.woocommerce .woocommerce-result-count,
.woocommerce-page .woocommerce-result-count {
    color: #94a3b8 !important;
    font-size: 0.9rem !important;
}

.woocommerce .woocommerce-ordering select,
.woocommerce-page .woocommerce-ordering select {
    background: rgba(30,41,59,0.8) !important;
    border: 1px solid rgba(212,175,55,0.3) !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
}

/* Sale badge */
.woocommerce ul.products li.product .onsale,
.woocommerce-page ul.products li.product .onsale {
    background: #D4AF37 !important;
    color: #0f172a !important;
    font-weight: 700 !important;
    border-radius: 50px !important;
    padding: 4px 12px !important;
}

/* Single product page - dark styling */
.single-product .woocommerce-product-gallery {
    background: transparent !important;
}

.single-product .product_title,
.woocommerce div.product .product_title {
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
}

.single-product .woocommerce-price-suffix,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
    color: #D4AF37 !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
}

.single-product .woocommerce-product-details__short-description,
.woocommerce div.product .woocommerce-product-details__short-description {
    color: #94a3b8 !important;
    font-size: 1rem !important;
    line-height: 1.7 !important;
}

/* Single product Add to Cart */
.single-product .single_add_to_cart_button,
.woocommerce div.product form.cart .button {
    background: linear-gradient(135deg, #D4AF37, #F0D47F) !important;
    color: #0f172a !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    padding: 15px 35px !important;
    letter-spacing: 0.5px !important;
}

/* Shop page title */
.woocommerce .page-title,
.shop .page-title,
body.post-type-archive-product .page-title {
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
}

/* Shop body background */
body.post-type-archive-product,
body.woocommerce-page,
body.woocommerce-shop {
    background-color: #0f172a !important;
}

body.post-type-archive-product .site-content,
body.woocommerce-shop .site-content {
    background-color: #0f172a !important;
}

/* Shop filter/widget sidebar */
.woocommerce .widget_product_categories ul li a,
.woocommerce-page .widget_product_categories ul li a {
    color: #94a3b8 !important;
}

.woocommerce .widget_product_categories ul li a:hover {
    color: #D4AF37 !important;
}

/* Pagination */
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    background: rgba(30,41,59,0.8) !important;
    border: 1px solid rgba(212,175,55,0.2) !important;
    color: #94a3b8 !important;
    border-radius: 6px !important;
}

.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
    background: #D4AF37 !important;
    color: #0f172a !important;
    border-color: #D4AF37 !important;
}

/* Product description tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    color: #94a3b8 !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: #D4AF37 !important;
}

.woocommerce div.product .woocommerce-tabs .panel {
    color: #94a3b8 !important;
    background: rgba(30,41,59,0.5) !important;
    border: 1px solid rgba(212,175,55,0.15) !important;
    border-radius: 8px !important;
    padding: 30px !important;
}

/* Shop page - make section headers dark */
.woocommerce .shop-banner,
.post-type-archive-product .page-header {
    background: linear-gradient(135deg, #0f172a, #1e293b) !important;
    color: #ffffff !important;
}