:root {
    --bg: #FAFAF8;
    --text: #1a1a1a;
    --accent: #c8a97a;
    --monsieur: #5b7fa6;
    --muse: #a67c8a;
    --white: #ffffff;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body { 
    font-family: 'Jost', sans-serif; 
    background-color: var(--bg); 
    color: var(--text); 
    overflow-x: hidden; 
    line-height: 1.6; 
}

/* Navbar Styling */
header { 
    position: fixed; 
    top: 0; 
    width: 100%; 
    z-index: 1000; 
    transition: all 0.5s ease; 
    height: 80px; 
    display: flex; 
    align-items: center; 
}

header.scrolled { 
    background: rgba(255, 255, 255, 0.95); 
    backdrop-filter: blur(10px); 
    height: 70px; 
    box-shadow: 0 1px 10px rgba(0,0,0,0.05); 
}

.nav-container { 
    max-width: 1200px; 
    margin: 0 auto; 
    width: 100%; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 0 40px; 
}

.logo { 
    font-family: 'Cormorant Garamond', serif; 
    font-size: 1.4rem; 
    letter-spacing: 0.18em; 
    text-transform: uppercase; 
    cursor: pointer; 
    border: none; 
    background: none; 
    color: inherit;
}

.logo span { font-style: italic; font-weight: 300; }

.pune-badge { 
    background: #f5f0e8; 
    border: 1px solid #d4b896; 
    color: #8a6a40; 
    padding: 6px 15px; 
    border-radius: 20px; 
    font-size: 0.65rem; 
    letter-spacing: 0.16em; 
    text-transform: uppercase; 
    display: flex; 
    align-items: center; 
    gap: 8px; 
}

/* Hero Section */
.hero { 
    position: relative; 
    height: 100vh; 
    display: flex; 
    align-items: flex-end; 
    padding-bottom: 100px; 
    color: var(--white); 
    background: url('https://images.unsplash.com/photo-1761865544944-2c8da85c869e?q=80&w=1080') center/cover no-repeat; 
}

.hero-overlay { 
    position: absolute; 
    inset: 0; 
    background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0.2), transparent); 
}

.hero-content { 
    position: relative; 
    z-index: 10; 
    max-width: 1200px; 
    margin: 0 auto; 
    width: 100%; 
    padding: 0 40px; 
}

.hero-sub { letter-spacing: 0.35em; text-transform: uppercase; color: #d4b896; font-size: 0.65rem; }

.hero h1 { 
    font-family: 'Cormorant Garamond', serif; 
    font-size: clamp(3rem, 8vw, 6rem); 
    line-height: 1.1; 
    margin: 20px 0; 
    font-weight: 400; 
}

.hero h1 span { font-style: italic; font-weight: 300; }

.hero-desc { max-width: 300px; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; }

/* Marquee */
.marquee-bg { background: #1a1a1a; overflow: hidden; white-space: nowrap; display: flex; }

.marquee-text { 
    display: inline-block; 
    color: var(--accent); 
    font-size: 0.6rem; 
    letter-spacing: 0.4em; 
    text-transform: uppercase; 
    animation: marquee 20s linear infinite; 
    padding: 15px 0; 
}

@keyframes marquee { 
    from { transform: translateX(0); } 
    to { transform: translateX(-50%); } 
}

/* Products Section */
.shop-section { padding: 100px 40px; max-width: 1200px; margin: 0 auto; }

.section-title { text-align: center; margin-bottom: 60px; }

.section-title p { 
    font-size: 0.65rem; 
    letter-spacing: 0.3em; 
    text-transform: uppercase; 
    color: var(--accent); 
}

.section-title h2 { font-family: 'Cormorant Garamond', serif; font-size: 2.5rem; }

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }

.card { background: var(--white); display: flex; flex-direction: column; transition: 0.3s; }

.card-img-wrap { position: relative; aspect-ratio: 4/5; overflow: hidden; }

.card-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: 0.7s; }

.card:hover img { transform: scale(1.05); }

.card-content { padding: 40px; flex: 1; display: flex; flex-direction: column; }

.product-cat { font-size: 0.6rem; color: #999; letter-spacing: 0.2em; text-transform: uppercase; }

.card-content h3 { font-family: 'Cormorant Garamond', serif; font-size: 2rem; margin: 10px 0; }

.product-desc { font-size: 0.85rem; color: #666; margin-bottom: 15px; }

.notes { margin-bottom: 25px; }

.note-tag { 
    display: inline-block; 
    border: 1px solid #eee; 
    padding: 4px 12px; 
    font-size: 0.6rem; 
    letter-spacing: 0.15em; 
    text-transform: uppercase; 
    margin: 0 5px 5px 0; 
    color: #666; 
}

.card-footer { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-top: auto; 
}

.price { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; }

.buy-btn { 
    text-decoration: none; 
    color: var(--white); 
    padding: 12px 25px; 
    font-size: 0.7rem; 
    letter-spacing: 0.2em; 
    text-transform: uppercase; 
    transition: 0.3s;
}

.buy-btn:hover { opacity: 0.85; transform: translateY(-2px); }

.btn-monsieur { background: var(--monsieur); }
.btn-muse { background: var(--muse); }

/* Footer */
footer { background: #1a1a1a; color: var(--white); padding: 80px 40px; text-align: center; }

.footer-logo { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; letter-spacing: 0.1em; text-transform: uppercase; }

.footer-loc { font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: #666; margin-top: 10px; }

/* Responsive */
@media (max-width: 768px) { 
    .grid { grid-template-columns: 1fr; } 
    .hero h1 { font-size: 3.5rem; }
    .nav-container { padding: 0 20px; }
}