/* ==========================================================================
   Antigravity Premium Luxury Theme Skin (Minimalist & Vogue Aesthetic)
   Author: Gemini Flash 3 Integration
   Note: This file overwrites colors and fonts without breaking backend hooks.
   ========================================================================== */

/* 1. Google Fonts Integration */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&family=Montserrat:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,400;0,500;1,400&display=swap');

:root {
    /* Color Palette tokens */
    --luxury-bg: #FDFBF9;
    --luxury-surface: #FFFFFF;
    --luxury-text-main: #4A3E3D;
    --luxury-text-muted: #8C7E7C;
    --luxury-accent: #da5104;
    --luxury-accent-hover: #b84300;
    --luxury-border: #EAE3DC;

    /* Standardized Smooth Transitions */
    --luxury-transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 2. Global Resets & Body Theme Skin */
body {
    background-color: var(--luxury-bg) !important;
    color: var(--luxury-text-main) !important;
    font-family: 'Montserrat', sans-serif !important;
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
}

/* 3. Luxury Editorial Typography Rule */
h1,
h2,
h3,
h4,
.brand-name,
.brand-logo,
.section-title,
.page-title,
.banner-title {
    font-family: 'Playfair Display', serif !important;
    color: var(--luxury-text-main) !important;
    text-transform: uppercase !important;
    letter-spacing: 2.5px !important;
    font-weight: 400 !important;
    /* Premium regular weight, avoids bulky bolds */
}

/* Dark Background Typography Overrides to ensure legibility and high contrast */
.hero-title,
.hero-section h1,
.hero-section h2,
.hero-section h3,
.hero-section h4,
.page-header h1,
.page-header h2,
.page-header h3,
.page-header h4,
.page-header .page-title,
.page-title,
footer h1,
footer h2,
footer h3,
footer h4,
.footer-heading,
.text-white,
.text-light,
[class*="text-white"],
[class*="text-light"] {
    color: #FFFFFF !important;
}

.hero-title em,
.page-title em {
    color: var(--luxury-accent) !important;
}

.footer-heading {
    color: var(--luxury-accent) !important;
}

p,
span,
a,
li,
input,
textarea,
select {
    font-family: 'Montserrat', sans-serif !important;
}

/* 4. Navigation Bar Overwrite */
header,
.navbar,
.nav-container {
    background-color: var(--luxury-surface) !important;
    border-bottom: 1px solid var(--luxury-border) !important;
    box-shadow: none !important;
    /* Removes dated heavy shadows */
    padding: 0 !important;
}

.nav-link,
.nav-item a {
    color: var(--luxury-text-main) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase;
    transition: var(--luxury-transition) !important;
}

.nav-link:hover,
.nav-item a:hover {
    color: var(--luxury-accent) !important;
}

/* 5. Luxury Product Card Grid System */
.product-card,
.product-item,
.product-box {
    background: var(--luxury-surface) !important;
    border: none !important;
    /* Removes standard box styling */
    box-shadow: none !important;
    border-radius: 0px !important;
    /* Pure sharp modern minimalist corners */
    padding: 12px !important;
    transition: var(--luxury-transition) !important;
}

/* Image Container Zoom Effect without altering HTML layout */
.product-card .image-wrapper,
.product-item .img-box,
.product-box a:first-child {
    display: block;
    overflow: hidden !important;
    background-color: #F5F5F5;
    position: relative;
}

.product-card img,
.product-item img,
.product-box img {
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: var(--luxury-transition) !important;
}

/* Smooth zoom on Hover */
.product-card:hover img,
.product-item:hover img,
.product-box:hover img {
    transform: scale(1.04) !important;
}

/* Product Card Details formatting */
.product-title,
.product-name,
.product-card h3 {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: 0.5px !important;
    color: var(--luxury-text-main) !important;
    margin-top: 15px !important;
    margin-bottom: 5px !important;
}

.product-price,
.price,
.price-tag {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--luxury-text-main) !important;
}

/* 6. High-Contrast Premium Call-To-Action Buttons */
.btn-add-to-cart,
.add-to-cart,
.buy-now,
.checkout-btn,
button[type="submit"],
.btn-primary {
    background-color: var(--luxury-accent) !important;
    color: #FFFFFF !important;
    font-family: 'Montserrat', sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    border: 1px solid var(--luxury-accent) !important;
    border-radius: 0px !important;
    /* Minimalist Square Edge */
    padding: 12px 25px !important;
    width: 100%;
    cursor: pointer;
    transition: var(--luxury-transition) !important;
}

/* Button Hover Style: Elegant White Inversion */
.btn-add-to-cart:hover,
.add-to-cart:hover,
.buy-now:hover,
.checkout-btn:hover,
button[type="submit"]:hover,
.btn-primary:hover {
    background-color: var(--luxury-accent-hover) !important;
    border-color: var(--luxury-accent-hover) !important;
    color: #FFFFFF !important;
}

/* 7. Fine Structural Elements (Inputs, Forms, Badges) */
input[type="text"],
input[type="email"],
select,
textarea {
    border: 1px solid var(--luxury-border) !important;
    background-color: var(--luxury-surface) !important;
    border-radius: 0px !important;
    color: var(--luxury-text-main) !important;
    padding: 10px 15px !important;
}

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

/* Custom Offer Badge */
.badge,
.sale-badge,
.discount-tag {
    background-color: var(--luxury-accent) !important;
    color: #FFFFFF !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-weight: 500 !important;
    border-radius: 0px !important;
    padding: 5px 10px !important;
}

/* 8. Extra Search & Header Element Refinements */
.search-wrapper {
    flex: 0 1 550px !important;
    /* Slightly more compact & balanced desktop width */
    margin: 0 auto !important;
    position: relative !important;
}

.desktop-search {
    background-color: var(--luxury-bg) !important;
    /* Muted background matching body */
    border: 1px solid var(--luxury-border) !important;
    border-radius: 0px !important;
    /* Crisp minimalist square corners */
    height: 44px !important;
    /* Slightly taller for editorial spacing */
    padding: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    transition: var(--luxury-transition) !important;
}

.desktop-search .search-icon {
    font-size: 14px !important;
    color: var(--luxury-text-muted) !important;
    margin-left: 16px !important;
    margin-right: 8px !important;
}

.desktop-search input {
    flex: 1 !important;
    border: none !important;
    background: transparent !important;
    color: var(--luxury-text-main) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    letter-spacing: 0.5px !important;
    padding: 0 12px !important;
    height: 100% !important;
}

.desktop-search input::placeholder {
    color: var(--luxury-text-muted) !important;
    opacity: 0.6 !important;
}

/* Elegant Clear Button */
.desktop-search .clear-btn {
    background: transparent !important;
    border: none !important;
    color: var(--luxury-text-muted) !important;
    padding: 0 12px !important;
    cursor: pointer !important;
    font-size: 14px !important;
    transition: var(--luxury-transition) !important;
}

.desktop-search .clear-btn:hover {
    color: var(--luxury-accent) !important;
}

/* Elegant Search Action Button */
.desktop-search .search-btn {
    background-color: #2d2a29 !important;
    color: #FFFFFF !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    border: none !important;
    height: 100% !important;
    padding: 0 24px !important;
    border-radius: 0px !important;
    transition: var(--luxury-transition) !important;
}

.desktop-search .search-btn:hover {
    background-color: var(--luxury-accent) !important;
    /* Gold on hover */
    color: #FFFFFF !important;
}

/* Focus and Active States */
.desktop-search:focus-within {
    border-color: var(--luxury-accent) !important;
    background-color: var(--luxury-surface) !important;
    /* Switches to clean white on focus */
    box-shadow: 0 4px 15px rgba(218, 81, 4, 0.08) !important;
}

/* Search Dropdown Styling matching the theme skin */
.search-dropdown {
    background-color: var(--luxury-surface) !important;
    border: 1px solid var(--luxury-border) !important;
    border-radius: 0px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
    top: calc(100% + 4px) !important;
}

.search-tabs {
    background-color: var(--luxury-bg) !important;
    border-bottom: 1px solid var(--luxury-border) !important;
}

.search-tab {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 11px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    color: var(--luxury-text-muted) !important;
    padding: 12px 18px !important;
    border-bottom: 2px solid transparent !important;
    transition: var(--luxury-transition) !important;
}

.search-tab.active {
    color: var(--luxury-accent) !important;
    border-bottom-color: var(--luxury-accent) !important;
}

.search-tab:hover {
    color: var(--luxury-text-main) !important;
}

.search-result-item {
    border-bottom: 1px solid var(--luxury-border) !important;
    transition: var(--luxury-transition) !important;
}

.search-result-item:hover {
    background-color: var(--luxury-bg) !important;
}

.search-result-name {
    color: var(--luxury-text-main) !important;
    font-weight: 500 !important;
}

.search-result-name mark {
    background-color: rgba(218, 81, 4, 0.15) !important;
    color: var(--luxury-text-main) !important;
}

.search-result-sub {
    color: var(--luxury-accent) !important;
    /* Gold price color */
    font-weight: 500 !important;
}

.search-kbd {
    background-color: var(--luxury-bg) !important;
    border: 1px solid var(--luxury-border) !important;
    color: var(--luxury-text-muted) !important;
    border-radius: 0px !important;
}

.search-dropdown-footer {
    border-top: 1px solid var(--luxury-border) !important;
    color: var(--luxury-text-muted) !important;
    background-color: var(--luxury-bg) !important;
}