/*
 Theme Name:   E-Store Boutique Theme
 Theme URI:    https://estore-kodzee.com
 Description:  Boutique Child Theme for E-Store Kodzee. Premium Gold/Black aesthetic. Requires Storefront parent theme.
 Author:       Antigravity
 Author URI:   https://google.com
 Template:     storefront
 Version:      1.0.0
 Text Domain:  estore-boutique
*/

:root {
    /* Premium Dark Mode Variables */
    --boutique-bg-primary: #0a0a0a;
    --boutique-bg-secondary: #171717;
    --boutique-bg-tertiary: #222222;
    --boutique-gold: #D4AF37;
    --boutique-gold-hover: #b5952f;
    --boutique-gold-glow: rgba(212, 175, 55, 0.4);
    --boutique-text-primary: #f8f9fa;
    --boutique-text-secondary: #adb5bd;
    --boutique-border: #333333;
    
    --boutique-font-heading: 'Cormorant Garamond', serif;
    --boutique-font-body: 'Inter', sans-serif;
    
    --transition-fast: 0.2s ease;
    --transition-smooth: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* ==========================================================================
   Base Styles
   ========================================================================== */
body {
    background-color: var(--boutique-bg-primary);
    font-family: var(--boutique-font-body);
    color: var(--boutique-text-secondary);
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6, .woocommerce-loop-product__title {
    font-family: var(--boutique-font-heading);
    color: var(--boutique-text-primary);
    font-weight: 600;
    margin-bottom: 1rem;
}

a {
    color: var(--boutique-gold);
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--boutique-gold-hover);
    text-decoration: none;
}

/* ==========================================================================
   Header & Navigation
   ========================================================================== */
.site-header {
    background-color: rgba(10, 10, 10, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--boutique-border);
    position: sticky;
    top: 0;
    z-index: 999;
}

.site-branding .site-title a {
    color: var(--boutique-gold);
    font-family: var(--boutique-font-heading);
    font-size: 2rem;
    letter-spacing: 1px;
    text-shadow: 0 0 10px var(--boutique-gold-glow);
}

.site-branding p.site-description {
    color: var(--boutique-text-secondary);
    font-family: var(--boutique-font-body);
}

.main-navigation ul.menu > li > a {
    color: var(--boutique-text-primary);
    font-size: 0.95rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 1rem;
    transition: color var(--transition-fast);
}

.main-navigation ul.menu > li > a:hover {
    color: var(--boutique-gold);
}

/* ==========================================================================
   Buttons
   ========================================================================== */
button, 
input[type="button"], 
input[type="reset"], 
input[type="submit"], 
.button, 
.added_to_cart,
.woocommerce-Button {
    background: linear-gradient(135deg, var(--boutique-gold), var(--boutique-gold-hover)) !important;
    color: var(--boutique-bg-primary) !important;
    border: none !important;
    border-radius: 4px;
    font-family: var(--boutique-font-body);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0.75rem 1.5rem;
    box-shadow: 0 4px 15px var(--boutique-gold-glow);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast) !important;
    cursor: pointer;
}

button:hover, 
input[type="button"]:hover, 
input[type="reset"]:hover, 
input[type="submit"]:hover, 
.button:hover, 
.added_to_cart:hover,
.woocommerce-Button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.6);
    background: linear-gradient(135deg, #e5c354, var(--boutique-gold)) !important;
    color: var(--boutique-bg-primary) !important;
}

/* ==========================================================================
   Product Grid (WooCommerce)
   ========================================================================== */
ul.products li.product {
    background-color: var(--boutique-bg-secondary);
    border: 1px solid var(--boutique-border);
    border-radius: 8px;
    padding: 1.5rem;
    transition: all var(--transition-smooth);
    text-align: center;
    position: relative;
    overflow: hidden;
}

ul.products li.product:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border-color: var(--boutique-gold);
}

ul.products li.product img {
    border-radius: 4px;
    margin-bottom: 1rem;
    transition: transform var(--transition-smooth);
}

ul.products li.product:hover img {
    transform: scale(1.05);
}

ul.products li.product h2.woocommerce-loop-product__title {
    font-size: 1.25rem;
    margin-top: 1rem;
    color: var(--boutique-gold);
}

ul.products li.product .price {
    color: var(--boutique-text-primary);
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
}

/* ==========================================================================
   Single Product Page
   ========================================================================== */
.single-product div.product {
    background-color: transparent;
}

.single-product div.product .product_title {
    font-size: 2.5rem;
    color: var(--boutique-gold);
    margin-bottom: 1rem;
    line-height: 1.2;
}

.single-product div.product p.price {
    font-size: 1.5rem;
    color: var(--boutique-text-primary);
    font-weight: bold;
}

.woocommerce-tabs {
    background-color: var(--boutique-bg-secondary);
    border-radius: 8px;
    padding: 2rem;
    margin-top: 3rem !important;
    border: 1px solid var(--boutique-border);
}

.woocommerce-tabs ul.tabs li {
    background-color: transparent !important;
    border: none !important;
}

.woocommerce-tabs ul.tabs li a {
    color: var(--boutique-text-secondary) !important;
    font-weight: 600;
    transition: color var(--transition-fast);
}

.woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li a:hover {
    color: var(--boutique-gold) !important;
}

/* ==========================================================================
   B2B Cart & Tables Overrides
   ========================================================================== */
table.shop_table {
    border: 1px solid var(--boutique-border);
    border-radius: 8px;
    background-color: var(--boutique-bg-secondary);
    border-collapse: separate;
    overflow: hidden;
}

table.shop_table th {
    background-color: var(--boutique-bg-tertiary);
    color: var(--boutique-gold);
    border-bottom: 1px solid var(--boutique-border);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

table.shop_table td {
    border-top: 1px solid var(--boutique-border);
    color: var(--boutique-text-secondary);
}

.b2b-pack-info {
    background-color: var(--boutique-bg-tertiary);
    border-left: 4px solid var(--boutique-gold);
    padding: 1rem;
    margin-bottom: 1.5rem;
    border-radius: 0 4px 4px 0;
}

.b2b-pack-info strong {
    color: var(--boutique-text-primary);
}

/* ==========================================================================
   Forms & Inputs
   ========================================================================== */
input[type="text"], 
input[type="email"], 
input[type="password"], 
input[type="number"],
textarea,
select {
    background-color: var(--boutique-bg-tertiary);
    border: 1px solid var(--boutique-border);
    color: var(--boutique-text-primary);
    padding: 0.75rem 1rem;
    border-radius: 4px;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

input:focus, 
textarea:focus,
select:focus {
    border-color: var(--boutique-gold);
    outline: none;
    box-shadow: 0 0 0 2px var(--boutique-gold-glow);
}

/* ==========================================================================
   Storefront Specific Resets
   ========================================================================== */
.site-info {
    color: var(--boutique-text-secondary);
}
.site-info a {
    color: var(--boutique-gold);
}

.storefront-breadcrumb {
    color: var(--boutique-text-secondary);
    margin-bottom: 2rem;
}

.storefront-breadcrumb a {
    color: var(--boutique-text-primary);
}

.storefront-breadcrumb a:hover {
    color: var(--boutique-gold);
}

.widget-area .widget-title {
    color: var(--boutique-gold);
    font-family: var(--boutique-font-heading);
}

.site-footer {
    background-color: #050505;
    border-top: 1px solid var(--boutique-border);
    padding-top: 3rem;
}

.site-footer .widget {
    color: var(--boutique-text-secondary);
}