:root {
    /* Color Palette - Minimalist & High End */
    --primary-color: #FAFAFA;
    /* Off-white background */
    --primary-medi: #E5E5E5;
    /* Light Grey for borders */
    --primary-dark: #1A1A1A;
    /* Almost Black for text/links */
    --secondary-color: #333333;
    /* Dark Grey Accent */

    --text-color: #1A1A1A;
    /* Main Text */
    --text-light: #666666;
    /* Secondary Text */
    --bg-color: #FFFFFF;
    /* Pure White */
    --white: #FFFFFF;

    /* Typography */
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Poppins', sans-serif;

    /* Shadows & Effects */
    --shadow-soft: 0 2px 10px rgba(0, 0, 0, 0.03);
    --shadow-hover: 0 5px 20px rgba(0, 0, 0, 0.06);
    --glass-bg: rgba(255, 255, 255, 0.98);
}

body {
    background-color: var(--white);
    color: var(--text-color);
    font-family: var(--font-body);
    font-weight: 300;
    /* Lighter weight for elegance */
    padding-top: 0;
    /* Content goes behind header for hero effect */
    line-height: 1.6;
}

h1,
h2,
h3,
h4,
h5,
h6,
.brand-font {
    font-family: var(--font-heading);
    color: var(--text-color);
    letter-spacing: 0.5px;
    font-weight: 400;
}

/* Header Utilities */
.tracking-wider {
    letter-spacing: 1.5px !important;
    font-size: 0.8rem;
}

.tracking-widest {
    letter-spacing: 2.5px !important;
    font-size: 0.75rem;
}

.social-link-tiny {
    color: var(--text-light);
    font-size: 0.9rem;
    transition: color 0.3s;
}

.social-link-tiny:hover {
    color: var(--primary-dark);
}

.brand-logo {
    /* Img controlled inline, but ensure alignment */
    display: inline-block;
}

/* Navbar Links */
.navbar-nav .nav-link {
    color: var(--text-color);
    font-weight: 400;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 10px 15px !important;
    transition: color 0.3s;
}

.navbar-nav .nav-link:hover {
    color: var(--text-light);
}

/* Top Bar - Minimal */
.top-bar {
    background-color: transparent;
    /* Or keep white if preferred, but usually transparent for full hero */
    color: var(--text-color);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    font-size: 0.7rem;
    transition: background-color 0.3s;
}

.top-bar a {
    color: var(--text-color);
}

/* Minimal Navbar Glass */
.glass-nav {
    background: transparent !important;
    border-bottom: none;
    padding: 15px 0;
    transition: all 0.3s;
}

.fixed-header-wrapper {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    background: transparent;
    box-shadow: none;
    transition: background-color 0.4s ease, box-shadow 0.3s ease;
}

/* Scrolled State (Added via JS) */
.fixed-header-wrapper.header-scrolled {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.fixed-header-wrapper.header-scrolled .top-bar {
    background-color: var(--white);
    border-bottom: 1px solid var(--primary-medi);
    display: none;
    /* Optional: Hide top bar on scroll for cleaner look? Keeping it for now but maybe hiding is better for sleekness. Let's keep it visible or hide? User just said menu white. Let's keep simpler. */
}

/* Dynamic Logo: Hidden initially, Visible on Scroll */
.fixed-header-wrapper .navbar-brand {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    width: 0;
    padding: 0;
    overflow: hidden;
    margin-right: 0 !important;
}

.fixed-header-wrapper.header-scrolled .navbar-brand {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    width: auto;
    margin-right: 3rem !important;
    padding-top: 5px;
    padding-bottom: 5px;
}

/* Dropdown Menu - Minimal */
.dropdown-menu {
    border: 1px solid var(--primary-medi) !important;
    border-radius: 0 !important;
    /* Square edges */
    box-shadow: var(--shadow-soft) !important;
    padding: 15px 0 !important;
    margin-top: 0 !important;
    background-color: var(--white) !important;
    min-width: 200px;
}

.dropdown-item {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--text-light);
    padding: 8px 25px;
    transition: all 0.2s;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: #f5f5f5;
    color: var(--primary-dark);
}

/* Buttons - Minimalist */
.btn-beauty {
    background: var(--primary-dark);
    color: var(--white);
    border: 1px solid var(--primary-dark);
    border-radius: 0;
    /* Square */
    padding: 12px 30px;
    font-size: 0.8rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    box-shadow: none;
    transition: all 0.3s ease;
}

.btn-beauty:hover {
    background: transparent;
    color: var(--primary-dark);
    transform: none;
    box-shadow: none;
}

.btn-outline-dark {
    /* Replacing beauty-outline */
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.8rem;
}

/* Product Cards - Minimal */
.card-product-beauty {
    border: none;
    /* No border */
    background: transparent;
    box-shadow: none;
    /* No shadow by default */
    transition: all 0.3s;
}

/*.card-product-beauty:hover { transform: translateY(-5px); }*/

.product-img-wrapper {
    position: relative;
    overflow: hidden;
    background-color: #f9f9f9;
}

/* Footer - Minimal */
.footer-beauty {
    background-color: var(--white);
    color: var(--text-color);
    padding-top: 60px;
    padding-bottom: 30px;
    border-top: 1px solid var(--primary-medi);
}

.footer-beauty h5 {
    color: var(--primary-dark);
    font-size: 0.9rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600;
}

.footer-beauty a {
    color: var(--text-light);
    font-size: 0.85rem;
}

.footer-beauty a:hover {
    color: var(--primary-dark);
    text-decoration: underline !important;
}

.footer-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #f5f5f5;
    color: var(--primary-dark);
    margin: 0 5px;
    transition: all 0.3s;
}

.footer-social-icon:hover {
    background: var(--primary-dark);
    color: white;
}

/* Marquee - Minimal */
.marquee-wrapper {
    background: var(--white);
    border-top: 1px solid var(--primary-medi);
    border-bottom: 1px solid var(--primary-medi);
    color: var(--text-color);
}

.marquee-item span {
    color: var(--text-dark);
    font-weight: 500;
}

.marquee-item img {
    filter: grayscale(100%);
    opacity: 0.6;
}

.marquee-item:hover img {
    opacity: 1;
}

/* Misc */
.beauty-separator i {
    color: var(--primary-medi);
}

.beauty-separator::before,
.beauty-separator::after {
    background: var(--primary-medi);
}

/* Cart Badge */
.cart-badge {
    background-color: var(--primary-dark);
    color: white;
}

/* Hero Section - Fix for collapsed height */
.hero-section {
    height: 100vh;
    /* Full viewport height for impact */
    min-height: 600px;
    position: relative;
    width: 100%;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    /* Slight overlay for text readability */
    z-index: 1;
}

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

/* Brand Parallax Banner (Added for Fix) */
.parallax-separator {
    position: relative;
    width: 100%;
    min-height: 300px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.parallax-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
}

/* Instagram Grid Layout (Added for Brand Reel) */
.insta-grid-layout {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    grid-auto-flow: dense;
    /* Helps backfill if video position creates gaps */
}

.insta-video-cell {
    grid-column: span 2;
    /* Full width on mobile/tablet if 2 cols */
    background: #000;
    border-radius: 4px;
    /* Slight radius */
    overflow: hidden;
    position: relative;
    box-shadow: var(--shadow-soft);
    min-height: 300px;
}

.insta-video-cell video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Play button overlay/icon style if needed, or default controls */

@media (min-width: 768px) {
    .insta-grid-layout {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 992px) {
    .insta-grid-layout {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Central Video Position Logic for Desktop */
    /* We want video to span 2x2. */
    .insta-video-cell {
        grid-column: span 2;
        grid-row: span 2;
        min-height: 100%;
        /* Match grid row height */
    }
}

/* Override Bootstrap .col in this context if needed */
.insta-grid-layout>.col {
    width: auto;
    /* Reset bootstrap width */
    flex: none;
}