/*
 * Variables Base - Astrogoled Theme
 * 
 * Global CSS Variables, Theme Switcher, Base Styles
 * Used by all pages - loaded globally
 */

:root {
    --primary-color: #feb900;
    --bg-color: #111;
    --text-color: #fff;
    --text-muted: rgba(255, 255, 255, 0.6);
    --card-bg: #1a1a1a;
    --border-color: rgba(255, 255, 255, 0.1);
    --skeleton-bg: rgba(255, 255, 255, 0.06);
    --skeleton-shine: rgba(255, 255, 255, 0.14);
    --product-image-bg: #fff;
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-card-hover: 0 20px 40px rgba(0, 0, 0, 0.15);
    --shadow-icon: 0 4px 12px rgba(0, 0, 0, 0.15);
    --filter-input-bg: var(--input-bg);
    --filter-input-bg-focus: var(--input-bg);
    --filter-input-placeholder: rgba(255, 255, 255, 0.55);
    --filter-input-border: 1px solid var(--border-color);
    --loader-overlay-bg: rgba(17, 17, 17, 0.9);
    --loader-logo-light-display: block;
    --loader-logo-dark-display: none;
    --woo-notice-text: var(--text-color);
    --woo-notice-info-bg: rgba(254, 185, 0, 0.1);
    --woo-notice-success-bg: rgba(40, 167, 69, 0.1);
    --woo-notice-error-bg: rgba(231, 76, 60, 0.1);
    --woo-notice-bg: var(--card-bg);
    --woo-notice-border-top: 3px solid var(--primary-color);
    --woo-notice-border-left: 0;
    --woo-notice-border-top-error: 3px solid #e74c3c;
    --woo-notice-border-left-error: 0;
    --woo-form-label-color: var(--text-color);
    --qty-input-bg: var(--input-bg);
    --qty-input-color: var(--input-text);
    --qty-input-outline: none;
    --single-gallery-bg: rgba(0, 0, 0, 0.02);
    --single-slider-shadow: none;
    --single-slider-img-hover-shadow: none;
    --single-price-bg: rgba(254, 185, 0, 0.1);
    --single-price-border-color: rgba(254, 185, 0, 0.2);
    --mobile-filter-toggle-bg: var(--card-bg);
    --mobile-filter-toggle-border-color: var(--border-color);
    --mobile-filter-toggle-color: var(--text-color);
    --mobile-filter-toggle-hover-bg: var(--input-bg);
    --mobile-filters-wrapper-active-bg: var(--card-bg);
    --mobile-filter-header-color: var(--text-color);
    --mobile-filter-header-border-color: var(--border-color);
    --mobile-price-input-bg: var(--input-bg);
    --mobile-price-input-border-color: var(--border-color);
    --mobile-price-input-color: var(--text-color);
    --mobile-filter-label-color: var(--text-color);
    --mobile-filter-item-color: var(--text-color);
    --mobile-filter-item-border-color: rgba(255, 255, 255, 0.05);
    --mobile-filter-link-color: var(--text-color);
    --auth-label-color: var(--text-color);
    --auth-input-bg: var(--input-bg);
    --auth-input-border-color: var(--border-color);
    --auth-input-color: var(--input-text);
    --auth-placeholder-color: var(--filter-input-placeholder);
    --promo-accent-color: var(--primary-color);
    --promo-badge-shadow: 0 10px 40px rgba(254, 185, 0, 0.3);
    --promo-badge-shadow-peak: 0 15px 50px rgba(254, 185, 0, 0.5);
    --btn-google-bg: #fff;
    --btn-google-border-color: #ddd;
    --top-bar-text-color: var(--text-muted);
    --top-bar-link-color: var(--text-muted);
    --logo-for-light-display: none;
    --logo-for-dark-display: block;
    --page-overlay-opacity: 0;
    --dashboard-tile-shadow: none;
    --dashboard-tile-hover-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    --account-form-input-bg: var(--input-bg);
    --account-form-input-border-color: var(--border-color);
    --account-form-input-color: var(--input-text);
    --account-address-bg: var(--card-bg);
    --account-address-border-color: var(--border-color);
    --account-address-shadow: none;
    --privacy-form-shadow: none;
    --privacy-form-hover-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
    --contact-wpcf7-input-bg: rgba(255, 255, 255, 0.05);
    --contact-wpcf7-input-radius: 8px;
    --contact-wpcf7-border: 1px solid rgba(255, 255, 255, 0.1);
    --contact-wpcf7-input-color: var(--text-color);
    --footer-glow-opacity: 0.8;
    --footer-glow-after-gradient: linear-gradient(180deg, rgba(254, 185, 0, 0.15) 0%, transparent 100%);
    --footer-logo-light-display: none;
    --footer-logo-dark-display: block;
    --footer-payments-shadow: inset 0 2px 15px rgba(0, 0, 0, 0.63);
    --mobile-widget-bg: var(--card-bg);
    --mobile-widget-border-color: var(--border-color);
    --mobile-widget-li-bg: rgba(255, 255, 255, 0.03);
    --mobile-widget-li-border-color: rgba(255, 255, 255, 0.08);
    --mobile-widget-li-color: var(--text-color);
    --mobile-widget-search-bg: var(--input-bg);
    --mobile-widget-search-border-color: var(--border-color);
    --mobile-widget-search-color: var(--text-color);
    --review-comment-bg: var(--input-bg);
    --review-form-input-bg: var(--card-bg);
    --review-form-input-color: var(--text-color);
    --review-avatar-border-color: var(--border-color);
    --ajax-search-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    --blog-load-more-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    --blog-load-more-hover-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
    --product-sidebar-shadow: none;
    --product-sidebar-children-bg: var(--bg-color);
    --offcanvas-overlay-bg: rgba(0, 0, 0, 0.7);
    --offcanvas-menu-shadow: -5px 0 15px rgba(0, 0, 0, 0.5);
    --offcanvas-checkout-bg: #333;
    --offcanvas-checkout-color: #FFF;
    --asb-product-item-bg: transparent;
    --asb-product-item-border: none;
    --custom-slider-arrow-bg: rgba(30, 30, 30, 0.7);
    --custom-slider-arrow-hover-bg: rgba(30, 30, 30, 0.88);
    --custom-slider-arrow-color: #fff;
    --custom-slider-arrow-border-color: rgba(255, 255, 255, 0.1);
    --archive-accent-2: #ffcc00;
    --archive-dot-shadow-idle: 0 0 10px rgba(254, 185, 0, 0.5), 0 0 20px rgba(254, 185, 0, 0.3);
    --archive-dot-shadow-peak: 0 0 15px rgba(254, 185, 0, 0.7), 0 0 30px rgba(254, 185, 0, 0.4);
    --header-bg: rgba(15, 15, 15, 0.95);
    --top-bar-bg: #0a0a0a;
    --nav-bar-bg: rgba(0, 0, 0, 0.2);
    --search-bg: rgba(255, 255, 255, 0.05);
    --search-text: #fff;
    --footer-bg: #111;
    --footer-gradient: linear-gradient(314deg, rgb(35, 35, 35), rgb(63, 63, 63));
    --input-bg: #222;
    --input-text: #fff;
    --hero-bg: linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 100%);
    --features-bg: #151515;
    --feature-item-bg: rgba(255, 255, 255, 0.02);
    --product-bg: #1a1a1a;
    --section-bg: #121212;
    --font-main: 'Outfit', sans-serif;
    --container-width: 1200px;
    --slider-arrow-bg: rgba(255, 255, 255, 0.1);
    --slider-arrow-hover-bg: rgba(255, 255, 255, 0.3);

    /* Astra global color variables for dark mode */
    --ast-global-color-0: #feb900;
    --ast-global-color-1: #ffcc00;
    --ast-global-color-2: #fff;
    --ast-global-color-3: #fff;
    --ast-global-color-4: #1a1a1a;
    --ast-global-color-5: #111;
    --ast-global-color-6: #111;
    --ast-global-color-7: rgba(255, 255, 255, 0.1);
    --ast-global-color-8: rgba(255, 255, 255, 0.6);
}

/* Explicit Dark Mode - Forces dark colors when light-mode class is removed */
html:not(.light-mode) body:not(.light-mode),
body.dark-mode {
    --bg-color: #111;
    --text-color: #fff;
    --text-muted: rgba(255, 255, 255, 0.6);
    --card-bg: #1a1a1a;
    --border-color: rgba(255, 255, 255, 0.1);
    --header-bg: rgba(15, 15, 15, 0.95);
    --top-bar-bg: #0a0a0a;
    --footer-bg: #111;
    --input-bg: #222;
    --input-text: #fff;
    --filter-input-bg: #222;
    --search-bg: rgba(255, 255, 255, 0.05);
    --search-text: #fff;

    /* Astra global color variables for dark mode */
    --ast-global-color-0: #feb900;
    --ast-global-color-1: #ffcc00;
    --ast-global-color-2: #fff;
    --ast-global-color-3: #fff;
    --ast-global-color-4: #1a1a1a;
    --ast-global-color-5: #111;
    --ast-global-color-6: #111;
    --ast-global-color-7: rgba(255, 255, 255, 0.1);
    --ast-global-color-8: rgba(255, 255, 255, 0.6);
}

/* Light Mode - Synced with Astra via JS (set on html or body element) */
.light-mode {
    --bg-color: #f4f4f4;
    --text-color: #333;
    --text-muted: rgba(0, 0, 0, 0.6);
    --card-bg: #fff;
    --border-color: rgba(0, 0, 0, 0.1);
    --skeleton-bg: rgba(0, 0, 0, 0.06);
    --skeleton-shine: rgba(0, 0, 0, 0.12);
    --product-image-bg: #fff;
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.05);
    --shadow-card-hover: 0 20px 40px rgba(0, 0, 0, 0.1);
    --shadow-icon: 0 4px 12px rgba(0, 0, 0, 0.1);
    --filter-input-bg: #f3f3f3;
    --filter-input-bg-focus: #fff;
    --filter-input-placeholder: #999;
    --filter-input-border: none;
    --loader-overlay-bg: rgba(255, 255, 255, 0.9);
    --loader-logo-light-display: none;
    --loader-logo-dark-display: block;
    --woo-notice-text: #000;
    --woo-notice-info-bg: rgba(254, 185, 0, 0.15);
    --woo-notice-success-bg: rgba(40, 167, 69, 0.15);
    --woo-notice-error-bg: rgba(231, 76, 60, 0.15);
    --woo-notice-bg: #f8f9fa;
    --woo-notice-border-top: 0;
    --woo-notice-border-left: 4px solid var(--primary-color);
    --woo-notice-border-top-error: 0;
    --woo-notice-border-left-error: 4px solid #e74c3c;
    --woo-form-label-color: #000;
    --qty-input-bg: #f0f0f0;
    --qty-input-color: #000;
    --qty-input-outline: 2px solid var(--primary-color);
    --single-gallery-bg: rgba(0, 0, 0, 0.04);
    --single-slider-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    --single-slider-img-hover-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
    --single-price-bg: rgba(254, 185, 0, 0.15);
    --single-price-border-color: rgba(254, 185, 0, 0.3);
    --mobile-filter-toggle-bg: #f9f9f9;
    --mobile-filter-toggle-border-color: #e0e0e0;
    --mobile-filter-toggle-color: #333;
    --mobile-filter-toggle-hover-bg: #fff;
    --mobile-filters-wrapper-active-bg: #fff;
    --mobile-filter-header-color: #333;
    --mobile-filter-header-border-color: #e0e0e0;
    --mobile-price-input-bg: #fff;
    --mobile-price-input-border-color: #e0e0e0;
    --mobile-price-input-color: #333;
    --mobile-filter-label-color: #333;
    --mobile-filter-item-color: #333;
    --mobile-filter-item-border-color: #f0f0f0;
    --mobile-filter-link-color: #333;
    --auth-label-color: #333;
    --auth-input-bg: #f5f5f5;
    --auth-input-border-color: #ddd;
    --auth-input-color: #333;
    --auth-placeholder-color: var(--filter-input-placeholder);
    --promo-accent-color: #d39e00;
    --promo-badge-shadow: 0 10px 40px rgba(254, 185, 0, 0.25);
    --promo-badge-shadow-peak: 0 15px 50px rgba(254, 185, 0, 0.45);
    --btn-google-bg: #fff;
    --btn-google-border-color: #ccc;
    --top-bar-text-color: #333;
    --top-bar-link-color: #333;
    --logo-for-light-display: block;
    --logo-for-dark-display: none;
    --page-overlay-opacity: 1;
    --dashboard-tile-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    --dashboard-tile-hover-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    --account-form-input-bg: #fff;
    --account-form-input-border-color: #ddd;
    --account-form-input-color: #333;
    --account-address-bg: #fff;
    --account-address-border-color: #eee;
    --account-address-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    --privacy-form-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    --privacy-form-hover-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    --contact-wpcf7-input-bg: #fff;
    --contact-wpcf7-input-radius: 8px;
    --contact-wpcf7-border: 1px solid #ddd;
    --contact-wpcf7-input-color: #333;
    --footer-glow-opacity: 0.5;
    --footer-glow-after-gradient: linear-gradient(180deg, rgba(254, 185, 0, 0.1) 0%, transparent 100%);
    --footer-logo-light-display: block;
    --footer-logo-dark-display: none;
    --footer-payments-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
    --mobile-widget-bg: #f9f9f9;
    --mobile-widget-border-color: #e0e0e0;
    --mobile-widget-li-bg: #fff;
    --mobile-widget-li-border-color: #e0e0e0;
    --mobile-widget-li-color: #333;
    --mobile-widget-search-bg: #fff;
    --mobile-widget-search-border-color: #e0e0e0;
    --mobile-widget-search-color: #333;
    --review-comment-bg: #f9f9f9;
    --review-form-input-bg: #fff;
    --review-form-input-color: #000;
    --review-avatar-border-color: #e0e0e0;
    --ajax-search-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    --blog-load-more-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
    --blog-load-more-hover-shadow: 0 10px 22px rgba(0, 0, 0, 0.14);
    --product-sidebar-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    --product-sidebar-children-bg: rgba(0, 0, 0, 0.02);
    --offcanvas-overlay-bg: rgba(0, 0, 0, 0.5);
    --offcanvas-menu-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
    --offcanvas-checkout-bg: #000;
    --offcanvas-checkout-color: #FFF;
    --asb-product-item-bg: revert;
    --asb-product-item-border: revert;
    --custom-slider-arrow-bg: rgba(255, 255, 255, 0.7);
    --custom-slider-arrow-hover-bg: rgba(255, 255, 255, 0.7);
    --custom-slider-arrow-color: #333;
    --custom-slider-arrow-border-color: var(--border-color);
    --archive-accent-2: #d4a000;
    --archive-dot-shadow-idle: 0 0 8px rgba(254, 185, 0, 0.6), 0 0 16px rgba(254, 185, 0, 0.4);
    --archive-dot-shadow-peak: 0 0 15px rgba(254, 185, 0, 0.7), 0 0 30px rgba(254, 185, 0, 0.4);
    --header-bg: rgba(255, 255, 255, 0.95);
    --top-bar-bg: #e0e0e0;
    --nav-bar-bg: rgba(0, 0, 0, 0.05);
    --search-bg: rgba(0, 0, 0, 0.05);
    --search-text: #333;
    --footer-bg: #e0e0e0;
    --footer-gradient: linear-gradient(314deg, #e0e0e0, #f5f5f5);
    --input-bg: #fff;
    --input-text: #333;
    --hero-bg: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%);
    --features-bg: #fff;
    --feature-item-bg: rgba(0, 0, 0, 0.02);
    --product-bg: #fff;
    --section-bg: #f9f9f9;
    --slider-arrow-bg: rgba(0, 0, 0, 0.1);
    --slider-arrow-hover-bg: rgba(0, 0, 0, 0.3);

    /* Override Astra global color variables for light mode */
    --ast-global-color-0: var(--primary-color);
    /* Primary */
    --ast-global-color-1: #d4a000;
    /* Secondary/hover */
    --ast-global-color-2: #333;
    /* Headings - dark text */
    --ast-global-color-3: #333;
    /* Text */
    --ast-global-color-4: #fff;
    /* Background - white for cards */
    --ast-global-color-5: #f4f4f4;
    /* Background alt */
    --ast-global-color-6: #f4f4f4;
    /* Background secondary */
    --ast-global-color-7: rgba(0, 0, 0, 0.1);
    /* Border */
    --ast-global-color-8: #666;
    /* Text muted */
}

body {
    font-family: var(--font-main);
    /* Changed to use var */
    background-color: var(--bg-color);
    color: var(--text-color);
    margin: 0;
    /* Added */
    padding: 0;
    /* Added */
    transition: background-color 0.5s ease, color 0.5s ease;
    /* Added */
    overflow-x: hidden;
}

.woocommerce ul.products li.product .woocommerce-loop-product__link,
.ast-site-content .woocommerce ul.products li.product .woocommerce-loop-product__link {
    display: block;
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background-color: var(--product-image-bg);
    border-top-left-radius: 15px !important;
    border-top-right-radius: 15px !important;
}

.woocommerce ul.products li.product a img {
    margin-bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    min-height: 2.8em;
}

.woocommerce ul.products li.product .price {
    min-height: 2.4em;
    margin: 0 15px 15px 15px;
}

.woocommerce ul.products,
.ast-site-content .woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    width: 100%;
}

/* Theme Toggle Button */
.theme-toggle {
    background: none;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--text-color);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 5px;
    margin-right: 15px;
    transition: color 0.3s;
    position: relative;
}

.theme-toggle .fa-sun,
.theme-toggle .fa-moon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s;
}

/* Default (dark mode) - show sun, hide moon */
.theme-toggle .fa-sun {
    opacity: 1;
}

.theme-toggle .fa-moon {
    opacity: 0;
}

/* Light mode - hide sun, show moon */
.light-mode .theme-toggle .fa-sun {
    opacity: 0;
}

.light-mode .theme-toggle .fa-moon {
    opacity: 1;
}

.theme-toggle:hover {
    color: #000;
}

/* Override Astra defaults */
.site-content,
.ast-plain-container,
.ast-page-builder-template,
body.ast-plain-container,
body.ast-page-builder-template {
    background-color: var(--bg-color);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--text-color);
    font-family: var(--font-main);
}

/* Remove default mb on p */
p {
    margin-bottom: 0;
}

/* Basic margin for standard first child container responsive */
.site-content .container {
    margin: 0 25px;
}

/* Scroll to top */
#ast-scroll-top {
    background-color: var(--primary-color);
}

#ast-scroll-top:hover {
    transform: scale(1.07);
}

/* ===========================================
   RESPONSIVE BREAKPOINTS
   =========================================== */

@media (max-width: 1200px) {

    .woocommerce ul.products,
    .ast-site-content .woocommerce ul.products {
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
    }
}

@media (max-width: 768px) {
    .home .site-content .container {
        padding: 0 10px !important;
        gap: 20px !important;
        margin: 0;
    }
}

@media (max-width: 900px) {

    .woocommerce ul.products,
    .ast-site-content .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
}

@media (max-width: 380px) {

    .woocommerce ul.products,
    .ast-site-content .woocommerce ul.products {
        grid-template-columns: repeat(1, 1fr);
        gap: 15px;
        padding: 0 10px;
    }
}

/* Font Awesome - font-display: swap fix (PageSpeed optimization) */
@font-face {
    font-family: 'Font Awesome 6 Free';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/webfonts/fa-solid-900.woff2') format('woff2'),
        url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/webfonts/fa-solid-900.ttf') format('truetype');
}

@font-face {
    font-family: 'Font Awesome 6 Brands';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/webfonts/fa-brands-400.woff2') format('woff2'),
        url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/webfonts/fa-brands-400.ttf') format('truetype');
}