/* ELONEN PRIVÉ - Core Stylesheet */

:root {
    --gold: #D4AF37; /* The iconic deep, warm gold */
    --gold-hover: #F8E391;
    --gold-muted: rgba(212, 175, 55, 0.6);
    --black: #000000;
    --black-alt: #0A0A0A; /* Deep slate black for subtle section contrast */
    --marble-fallback: url('https://i.imgur.com/G4P4pZ0.jpeg'); /* Placeholder until hero.png is uploaded */
}

body {
    background-color: var(--black);
    font-family: 'Montserrat', sans-serif;
    color: white;
    letter-spacing: 0.5px;
}

/* Smooth scrolling for anchor links */
html {
    scroll-behavior: smooth;
}

.cinzel {
    font-family: 'Cinzel', serif; /* Custom luxury serif */
    letter-spacing: 2px;
}

.gold-text { color: var(--gold); }
.italic { font-style: italic; }

/* 1. Header / Navbar */
.navbar-brand.brand-title,
.navbar-dark .navbar-brand.brand-title {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    letter-spacing: 4px;
    color: var(--gold) !important; /* Force original gold color */
}

/* Hard-lock the hover and focus states to keep the exact same gold color */
.navbar-brand.brand-title:hover,
.navbar-dark .navbar-brand.brand-title:hover,
.navbar-brand.brand-title:focus,
.navbar-dark .navbar-brand.brand-title:focus {
    color: var(--gold) !important;
    text-decoration: none;
}

/* 2. Dynamic Hero Section with Fallback */
/* Reduce the hero padding to leave perfect breathing room below your new banner */
.hero-section {
    position: relative;
    padding-top: 5rem;    /* Scaled down from larger layouts */
    padding-bottom: 5rem; /* Scaled down from larger layouts */
    min-height: auto;     /* Ensures it doesn't stretch to fill the viewport */
    display: flex;
    align-items: center;
}

/* Ensure the background image behavior remains seamless */
.hero-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 1;
}

.hero-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* Deeper overlay so text pops if your background model image is busy */
    background: rgba(0, 0, 0, 0.7);
}

.hero-content {
    position: relative;
    z-index: 1;
}

/* 3. Dynamic Global Buttons */
.btn-gold {
    background-color: var(--gold);
    color: black;
    border-radius: 0; /* Minimalist */
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-gold:hover {
    background-color: var(--gold-hover);
    color: black;
}

.btn-outline-gold {
    color: var(--gold);
    border: 2px solid var(--gold);
    border-radius: 0;
}

.btn-outline-gold:hover {
    background-color: var(--gold);
    color: black;
}

/* 4. Background Banners */
.bg-gold {
    background-color: var(--gold);
    color: black;
}

.bg-black-alt {
    background-color: var(--black-alt);
}

/* 5. Product Gallery Grid */
.product-card {
    border: 1px solid transparent;
    transition: transform 0.3s ease, border 0.3s ease;
    background-color: #050505;
    height: 100%; /* Important for grid alignment */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.bottle-mock {
    max-height: 250px;
    margin: 0 auto 15px auto;
}

.tagline {
    font-size: 0.9rem;
    margin-bottom: 5px;
}

/* Hover effect for the Active Collection */
.product-card.available:hover {
    border: 1px solid var(--gold);
    transform: translateY(-5px);
}

/* Styling for the Upcoming Collection */
.product-card.muted img.bottle-mock {
    filter: grayscale(100%) opacity(0.3); /* Monochromatic/Desaturated for Upcoming */
}

.product-card.muted {
    border: 1px solid rgba(255, 255, 255, 0.05); /* Minimal muted border */
}

/* Muted state for upcoming collection taglines */
.coming-soon .tagline, .coming-soon h4 {
    color: rgba(255, 255, 255, 0.3) !important;
}

/* 6. Form Styling (Black & Gold Theme) */
.allocation-section {
    border-top: 1px solid var(--gold);
}

.gold-form {
    border: 1px solid var(--gold);
    background-color: var(--black-alt);
    margin-top: -30px; /* Overlap effect for depth */
}

.gold-form .form-control {
    background-color: black;
    color: white;
    border: 1px solid #333;
    border-radius: 0;
}

.gold-form .form-control:focus {
    background-color: black;
    border: 1px solid var(--gold);
    color: white;
    box-shadow: none;
}

.gold-form select option, .gold-form select optgroup {
    background-color: black;
    color: white;
}

.gold-divider {
    border-color: var(--gold);
    opacity: 0.2;
}