/* Manti Jewel Art - Premium Theme (Phase 3) */
:root {
    /* --- NEW PALETTE (Navy & Teal) --- */

    /* Backgrounds: Dark Navy & Slate */
    --color-bg-primary: #191F26;
    --color-bg-secondary: #3A414B;

    /* Accents */
    --color-accent-teal: #00B4CC;
    /* Vibrant Teal from palette */
    --color-accent-highlight: #F0F2F5;
    /* Light Gray/White */

    /* Jewelry Identity - Gold (Kept for specific product highlights) */
    --color-accent-gold: #D4AF37;
    --color-gold-hover: #AA8C2C;

    /* Text */
    --color-text-main: #F0F2F5;
    --color-text-muted: #A0AAB5;

    /* Glass/Overlay */
    --glass-bg: rgba(58, 65, 75, 0.4);
    /* Slate tinted glass */
    --glass-border: rgba(0, 180, 204, 0.2);
    /* Teal border hint */
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);

    /* Gradients */
    --gradient-gold: linear-gradient(135deg, #D4AF37, #F2D06B, #D4AF37);
    --gradient-gold-text: linear-gradient(to right, #F2D06B, #D4AF37, #B5952F);

    /* Theme Gradient - Navy to Slate */
    --gradient-dark: linear-gradient(135deg, #191F26 0%, #3A414B 100%);

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

/* Light theme removed as per user request */

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

html {
    scroll-behavior: smooth;
}

/* --- SCROLL REVEAL ANIMATION --- */
.reveal-up {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.reveal-up.active {
    opacity: 1;
    transform: translateY(0);
}

body {
    background-color: var(--color-bg-primary);
    color: var(--color-text-main);
    font-family: var(--font-body);
    line-height: 1.6;
    overflow-x: hidden;
    position: relative;
    /* Ensure positioning context for pseudo-element */
}

/* Logo Watermark */
body::before {
    content: "";
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 60%;
    background-image: url('images/logo-white.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.08;
    /* Adjusted opacity to 0.08 */
    pointer-events: none;
    z-index: -1;
}

/* --- TYPOGRAPHY --- */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    letter-spacing: 0.5px;
}

.text-gold {
    color: var(--color-accent-gold);
    background: var(--gradient-gold-text);
    -webkit-background-clip: text;
    background-clip: text;
    /* Standard property */
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

/* --- UTILITIES --- */
.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem;
}

.glass-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    box-shadow: var(--glass-shadow);
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.glass-card:hover {
    border-color: rgba(227, 75, 38, 0.5);
    /* Orange Border */
}

/* --- BUTTONS --- */
.btn {
    padding: 0.8rem 2rem;
    border-radius: 50px;
    /* Pill shape */
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
    font-size: 0.95rem;
    letter-spacing: 0.5px;
}

.btn-primary {
    background: var(--color-accent-gold);
    /* Now Orange */
    color: #fff;
    box-shadow: 0 4px 15px rgba(227, 75, 38, 0.3);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.5);
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--color-accent-gold);
    color: var(--color-accent-gold);
}

.btn-outline:hover {
    background: rgba(212, 175, 55, 0.1);
}

.w-100 {
    width: 100%;
}

.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
}

/* --- NAVIGATION (MEGA MENU PREP) --- */
/* --- NAVIGATION (Segmented Island Style) --- */
/* --- NAVIGATION (Fixed/Freezed) --- */
#navbar {
    position: fixed;
    /* Freezed as requested */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 1rem 0;
    transition: all 0.3s ease;
    /* Optional: Add a subtle background immediately or rely on scroll script */
    background: linear-gradient(to bottom, rgba(2, 11, 22, 0.8), transparent);
}

/* Remove the old 'scrolled' logic that changed position, just keep style updates if needed */
#navbar.scrolled {
    background: rgba(2, 11, 22, 0.9);
    backdrop-filter: blur(15px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

#navbar.scrolled .nav-menu {
    /* Optional: make menu pill merge with navbar or stay distinct */
}

/* Ensure content clickable */
.nav-content {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-content {
    display: flex;
    justify-content: center;
    /* Center the entire island structure */
    align-items: center;
    position: relative;
    gap: 1rem;
}

/* Logo - Left Absolute or centered? 
   If we want "Tasks | Chat" style, usually logo is separate.
   The user image shows the menu as the main element.
   Let's keep logo on left, but maybe smaller?
   Actually, let's keep the standard "Space Between" layout but style the components.
*/
.nav-content {
    justify-content: space-between;
}

/* --- LOGO GRAPHIC ENHANCEMENT --- */
.logo {
    position: relative;
    display: block;
    border-radius: 8px;
    /* Optional slight rounding */
    padding: 5px;
    /* Space for glow */
}

.logo img {
    filter: drop-shadow(0 0 2px rgba(212, 175, 55, 0.5));
    transition: all 0.5s ease;
}

.logo:hover img {
    filter: drop-shadow(0 0 10px rgba(212, 175, 55, 1));
    transform: scale(1.02);
}

/* --- LOGO LIGHT MODE FIX --- */
[data-theme="light"] .logo img {
    /* filter: invert(1) brightness(0.8); */
    /* Removed inversion: Navbar stays dark in light mode, so logo must stay white */
    filter: drop-shadow(0 0 2px rgba(212, 175, 55, 0.5));
}

[data-theme="light"] body::before {
    filter: invert(1);
    opacity: 0.03;
}

/* Center Menu Capsule - The "Island" */
.nav-menu {
    display: flex;
    align-items: center;
    gap: 5px;
    /* Tight gap for segmented look */
    background: rgba(10, 10, 15, 0.6);
    /* Darker glass */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 6px;
    border-radius: 99px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.nav-menu a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    padding: 10px 24px;
    border-radius: 99px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border: 1px solid transparent;
    /* Prevent layout shift */
}

/* Hover State */
.nav-menu a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
}

/* Active Segment State */
.nav-menu a.active,
.nav-menu a.active:hover {
    color: #fff;
    background: rgba(212, 175, 55, 0.2);
    /* Gold Active */
    border-color: rgba(212, 175, 55, 0.3);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.1);
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.4);
}



/* Dropdown styling updates for this new menu */
.dropdown {
    position: relative;
    display: flex;
    /* Ensure it behaves like a flex item */
}

.dropdown .dropbtn {
    /* Inherits .nav-menu a styles automatically if we use <a> tag, but we need to ensure the div doesn't break it */
    display: flex;
    align-items: center;
}

/* Cart & Actions */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Circular Search/Cart Button Style */
.btn-cart {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 10, 15, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;

    /* Variable width: Icon+Text */
    padding: 10px 20px;
    border-radius: 99px;
    height: 54px;
    /* Match menu height approx */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.btn-cart:hover {
    transform: translateY(-2px);
    background: rgba(212, 175, 55, 0.15);
    /* Gold Hover */
    border-color: rgba(212, 175, 55, 0.5);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

.btn-cart i {
    font-size: 1.1rem;
    margin-right: 8px;
}

#nav-cart-count {
    background: var(--color-accent-gold);
    color: #000;
    font-size: 0.75rem;
    height: 20px;
    min-width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 700;
    margin-left: 8px;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--color-accent-teal);
}

/* --- SIDEBAR & LAYOUT (Shop) --- */
.layout-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    /* Fixed Sidebar Width */
    gap: 3rem;
    align-items: start;
}

.sidebar {
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 1.5rem;
    position: sticky;
    top: 100px;
    /* Stick below navbar */
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}

.sidebar h3 {
    font-size: 1.1rem;
    color: var(--color-accent-gold);
    margin-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 0.5rem;
}

.filter-group {
    margin-bottom: 2rem;
}

.filter-group h4 {
    font-size: 0.9rem;
    margin-bottom: 1rem;
    color: var(--color-text-main);
}

.checkbox-group label {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 0.8rem;
    font-size: 0.9rem;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color 0.2s;
}

.checkbox-group label:hover {
    color: var(--color-text-main);
}

input[type="checkbox"] {
    accent-color: var(--color-accent-gold);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--color-accent-gold);
}

/* Mobile Toggle */
.mobile-toggle {
    display: none;
    font-size: 1.5rem;
    color: var(--color-accent-gold);
    cursor: pointer;
}

/* --- ANIMATION KEYFRAMES (Premium) --- */
@keyframes float {
    0% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-15px) rotate(1deg);
    }

    100% {
        transform: translateY(0px) rotate(0deg);
    }
}

@keyframes glowPulse {
    0% {
        text-shadow: 0 0 10px rgba(212, 175, 55, 0.2);
    }

    50% {
        text-shadow: 0 0 25px rgba(212, 175, 55, 0.6);
    }

    100% {
        text-shadow: 0 0 10px rgba(212, 175, 55, 0.2);
    }
}

@keyframes glideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        @keyframes glideUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0px);
    }
}

/* --- HERO SECTION --- */
/* --- HERO SECTION --- */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    /* Premium Onyx & Gold Gradient */
    background: radial-gradient(circle at 70% 30%, #241d18, #000000);
    overflow: hidden;
    padding-top: 100px;
    /* Space for fixed nav */
    padding-bottom: 8rem;
}

/* Wave Separator */
.custom-shape-divider-bottom-1689 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

.custom-shape-divider-bottom-1689 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 150px;
}

.custom-shape-divider-bottom-1689 .shape-fill {
    fill: var(--color-bg-primary);
}


.hero-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    z-index: 5;
    /* Ensure above background */
    gap: 2rem;
    /* Better spacing */
}

.hero-text {
    flex: 1;
    max-width: 600px;
    /* Slightly tighter */
    animation: glideUp 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    padding-left: 2rem;
}

/* Subtitle "Est 2026" */
.hero-text .subtitle {
    display: inline-block;
    color: #fff;
    /* White to pop on purple */
    background: rgba(255, 255, 255, 0.1);
    padding: 0.4rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    border: none;
}

.hero-text h1 {
    font-size: 5rem;
    /* Larger impact */
    line-height: 1.1;
    margin-bottom: 1.5rem;
    font-weight: 800;
    color: #fff;
    /* Optional Text Gradient support */
    background: linear-gradient(to right, #fff, #f0f0f0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-text p {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 2.5rem;
    max-width: 480px;
    line-height: 1.8;
}

.hero-btns {
    display: flex;
    gap: 1.5rem;
    position: relative;
    z-index: 10;
}

.hero-visual {
    flex: 1;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-visual img {
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 20px 50px rgba(0, 0, 0, 0.5));
    animation: float 6s ease-in-out infinite;
}



/* Adjust Circle for new BG */
.glowing-circle {
    display: none;
    /* Remove old circle, clean look */
}

/* Image Wrapper similar to reference (Laptop style or Floating) */
/* We will keep the 'Glass Arch' but make it cleaner */
.image-wrapper {
    width: 500px;
    height: 500px;
    border: none;
    padding: 0;
    border-radius: 0;
    /* Removing Arch for a moment to see if we can do a clean image */
    background: transparent;
    animation: float 6s ease-in-out infinite;
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-wrapper img {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 20px;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.3));
}

/* --- SECTIONS --- */
.rates-section {
    padding: 6rem 0;
    /* Increased */
    margin-top: -80px;
    position: relative;
    z-index: 3;
}

.values-section {
    padding: 8rem 0;
    /* Increased */
    text-align: center;
}

/* --- REVIEWS SECTION --- */
.reviews-section {
    padding: 6rem 0;
    /* Increased */
    max-width: 800px;
    margin: 0 auto;
}

.product-grid {
    display: grid;
    /* Responsive Grid: Auto-fit with min width 280px */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2rem;
    align-items: stretch;
    /* Forces equal height */
}

.product-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    /* Flex layout for internal alignment */
    flex-direction: column;
    height: 100%;
    /* Fill grid cell */
    position: relative;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border-color: rgba(212, 175, 55, 0.4);
}

/* Wishlist Heart Button */
.btn-wishlist {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
    color: white;
    font-size: 1.1rem;
}

.btn-wishlist:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.btn-wishlist.active {
    color: #ef4444;
    /* Red */
    background: rgba(255, 255, 255, 0.15);
}

.product-card img {
    width: 100%;
    height: 250px;
    /* Fixed height for uniformity */
    object-fit: cover;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.product-info {
    padding: 1.5rem;
    flex: 1;
    /* Pushes footer down */
    display: flex;
    flex-direction: column;
}

.product-title {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    color: var(--color-text-main);
    /* Limit to 2 lines for tidiness */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    /* Standard property */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-price {
    font-family: var(--font-heading);
    /* Professional Serif for Prices */
    font-variant-numeric: lining-nums;
    font-size: 1.2rem;
    /* Slightly larger for serif */
    color: var(--color-accent-gold);
    font-weight: 700;
    margin-bottom: 1rem;
}

/* Action Area at bottom of card */
.product-card .actions {
    margin-top: auto;
    /* Pushes to bottom */
    display: flex;
    gap: 0.5rem;
}

.product-card .btn {
    flex: 1;
    /* Stretch buttons */
    text-align: center;
    padding: 0.6rem;
    font-size: 0.9rem;
}

/* --- RATE CARDS (Admin/Home) --- */
.rate-card {
    /* Background & Border handled by .glass-card now */
    padding: 1.5rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s;
}

.rate-card:hover {
    transform: translateY(-3px);
}

.rate-card h3 {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-text-muted);
    margin-bottom: 0.2rem;
}

.rate-value {
    font-family: var(--font-heading);
    font-variant-numeric: lining-nums;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-text-main);
}

.rate-card .icon {
    font-size: 3.5rem;
    width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-accent-gold);
    transition: all 0.3s ease;
}

.rate-card .icon i {
    filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.3));
}

.rate-card:hover .icon {
    transform: scale(1.1);
    filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.6));
}

/* --- ABOUT SECTION (Restructured) --- */
.about-section {
    padding: 8rem 0;
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 10% 20%, rgba(26, 47, 76, 0.4), transparent);
}

.about-container {
    display: flex;
    align-items: center;
    gap: 5rem;
}

.about-text {
    flex: 1;
}

.section-subtitle {
    display: inline-block;
    color: var(--color-accent-gold);
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 0.85rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.section-title {
    font-size: 3rem;
    margin-bottom: 2rem;
    line-height: 1.2;
}

.about-desc {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--color-text-muted);
    margin-bottom: 1.5rem;
}

/* Values Grid inside Text */
.about-values {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-top: 2.5rem;
    margin-bottom: 2rem;
}

.value-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.03);
    padding: 1rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: transform 0.3s;
}

.value-item:hover {
    transform: translateY(-5px);
    background: rgba(212, 175, 55, 0.05);
    border-color: rgba(212, 175, 55, 0.3);
}

.val-icon {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(212, 175, 55, 0.1);
    border-radius: 50%;
    color: var(--color-accent-gold);
    font-size: 1.2rem;
}

.value-item h5 {
    font-size: 1rem;
    margin-bottom: 0.1rem;
    color: var(--color-text-main);
}

.value-item small {
    color: var(--color-text-muted);
    font-size: 0.8rem;
}

/* Right Visual */
.about-visual {
    flex: 1;
    position: relative;
    height: 500px;
    /* Force height for stack */
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-stack {
    position: relative;
    width: 100%;
    height: 100%;
}

.img-back {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 80%;
    height: 90%;
    border: 2px solid var(--color-accent-gold);
    border-radius: 20px 0 20px 0;
    z-index: 1;
    opacity: 0.3;
}

.img-front {
    position: absolute;
    top: 0;
    left: 0;
    width: 90%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    z-index: 2;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    /* Grayscale to Gold hover? Optional */
}

/* Floating Badge */
.floating-badge {
    position: absolute;
    bottom: 50px;
    right: 0;
    z-index: 3;
    padding: 1rem 2rem;
    background: rgba(10, 10, 15, 0.85);
    border: 1px solid var(--color-accent-gold);
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    animation: float 6s ease-in-out infinite reverse;
}

.floating-badge i {
    font-size: 1.5rem;
}

.floating-badge span {
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
}

/* Responsive About */
@media (max-width: 992px) {
    .about-container {
        flex-direction: column;
        gap: 3rem;
        text-align: center;
    }

    .about-values {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 2rem auto;
    }

    .value-item {
        text-align: left;
        /* Keep internal item alignment */
    }

    .about-visual {
        height: 400px;
        width: 100%;
    }
}

/* --- REVIEWS SECTION --- */
.reviews-section {
    padding: 2rem 0 4rem 0;
    max-width: 800px;
    margin: 0 auto;
}

.review-form-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 1.5rem;
    margin-top: 2rem;
}

.star-rating {
    display: flex;
    flex-direction: row-reverse;
    /* For hover effect logic */
    justify-content: flex-end;
    gap: 5px;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.star-rating input {
    display: none;
}

.star-rating label {
    cursor: pointer;
    color: #444;
    transition: color 0.2s;
}

/* Fill stars on hover/check */
.star-rating label:hover,
.star-rating label:hover~label,
.star-rating input:checked~label {
    color: var(--color-accent-gold);
}

.review-card {
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1.5rem 0;
}

.review-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.review-stars {
    color: var(--color-accent-gold);
}

/* --- PINCODE CHECKER --- */
.pincode-checker {
    margin: 1.5rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 1.5rem;
}

.pincode-input-group {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.pincode-input-group input {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    padding: 0.8rem;
    border-radius: 4px;
    flex: 1;
    font-size: 0.95rem;
}

.pincode-input-group button {
    background: transparent;
    border: 1px solid var(--color-accent-gold);
    color: var(--color-accent-gold);
    padding: 0 1.5rem;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s;
}

.pincode-input-group button:hover {
    background: var(--color-accent-gold);
    color: black;
}

.check-msg {
    font-size: 0.9rem;
    display: none;
    /* Hidden by default */
    align-items: center;
    gap: 8px;
}

.check-msg.success {
    display: flex;
    color: #4ade80;
    /* Green */
}

.check-msg.error {
    display: flex;
    color: #ef4444;
    /* Red */
}

/* --- POLISHED FOOTER (Cleaner) --- */
.footer {
    background: #080c14;
    padding: 1.5rem 0 0.5rem;
    /* Ultra Compact */
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 2rem;
    /* Less space above */
}

.footer::before {
    display: none;
}

/* Ensure Buttons are ALWAYS clickable */
.btn {
    position: relative;
    z-index: 20;
    transform: translateZ(0);
}

.footer-content {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1rem;
    align-items: start;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 1rem;
}

.footer-brand h3 {
    font-size: 1.2rem;
    color: var(--color-accent-gold);
    margin-bottom: 0.5rem;
    font-family: var(--font-heading);
}

.footer-brand p {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    line-height: 1.4;
    margin-bottom: 0.5rem;
    max-width: 300px;
}

.footer-socials {
    display: flex;
    gap: 0.5rem;
}

.footer-socials a {
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    font-size: 1rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
}

/* Glass Shine Reflection */
.footer-socials a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 50%);
    border-radius: 50%;
    pointer-events: none;
}

.footer-socials a:hover {
    transform: translateY(-3px) scale(1.1);
    color: white;
}

.footer-socials a.social-instagram:hover {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow: 0 10px 30px rgba(214, 41, 118, 0.5), 0 0 15px rgba(253, 89, 73, 0.3);
}

.footer-socials a.social-facebook:hover {
    background: linear-gradient(135deg, #1877F2, #165EAB);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 10px 20px rgba(24, 119, 242, 0.4);
}

.footer-socials a.social-whatsapp:hover {
    background: linear-gradient(135deg, #25D366, #128C7E);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 10px 20px rgba(37, 211, 102, 0.4);
}

.footer-links h4 {
    font-size: 0.95rem;
    color: white;
    margin-bottom: 0.5rem;
    position: relative;
    display: inline-block;
}

.footer-links h4::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 20px;
    height: 1px;
    background: var(--color-accent-gold);
}

.footer-links ul {
    list-style: none;
    padding: 0;
}

.footer-links li {
    margin-bottom: 0.3rem;
}

/* Improved Footer Links */
.footer-links a {
    color: var(--color-text-muted);
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
    /* Space for hidden icon */
}

.footer-links a::before {
    content: '\f054';
    /* FontAwesome Chevron Right */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.7em;
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease;
    color: var(--color-accent-gold);
}

.footer-links a:hover {
    color: var(--color-accent-gold);
    transform: translateX(5px);
    padding-left: 5px;
    /* Subtle nudging */
}

.footer-links a:hover::before {
    opacity: 1;
    transform: translateX(0);
}

.footer-contact p {
    display: flex;
    gap: 0.5rem;
    color: var(--color-text-muted);
    margin-bottom: 0.4rem;
    font-size: 0.85rem;
    align-items: center;
}

.footer-contact i {
    color: var(--color-accent-gold);
    font-size: 1.1rem;
    min-width: 20px;
    /* Consitent icon width */
}

.copyright {
    text-align: center;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.75rem;
    /* Smaller font */
}

@media (max-width: 768px) {
    .cart-drawer {
        width: 100%;
        max-width: none;
    }
}

/* --- END RESPONSIVE --- */
@media (max-width: 768px) {
    .footer-content {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        text-align: center;
    }

    .footer-links h4::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .footer-brand p {
        margin: 0 auto 1.5rem;
    }

    .footer-socials {
        justify-content: center;
    }
}

/* --- MEGA MENU STYLES (Global) --- */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background: rgba(10, 15, 28, 0.98);
    min-width: 600px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.5);
    z-index: 1001;
    padding: 2rem;
    border: 1px solid var(--glass-border);
    top: 100%;
    margin-top: 10px;
    border-radius: 12px;
}

.dropdown:hover .dropdown-content {
    display: block;
    animation: glideUp 0.3s ease forwards;
}

.mega-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.mega-grid h4 {
    color: var(--color-accent-gold);
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 0.5rem;
}

.mega-grid a {
    color: white;
    padding: 5px 0;
    text-decoration: none;
    display: block;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.mega-grid a:hover {
    color: var(--color-accent-gold);
    padding-left: 5px;
    /* Slide effect */
}

@media (max-width: 968px) {
    .dropdown-content {
        position: static;
        transform: none;
        min-width: 100%;
        background: transparent;
        box-shadow: none;
        padding: 0 0 0 1rem;
        display: none;
        border: none;
    }

    .dropdown.active .dropdown-content {
        display: block;
    }

    .mega-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* --- RESPONSIVE --- */
@media (max-width: 968px) {
    .container {
        padding: 0 1.5rem;
    }

    @media (max-width: 968px) {
        .container {
            padding: 0 1.5rem;
        }

        /* Hero adjustments */
        .hero-container {
            flex-direction: column-reverse;
            /* Stack visual on top or bottom? Reversed puts text below image which is common, but let's stick to column for text-first */
            flex-direction: column;
            text-align: center;
            padding-top: 2rem;
            gap: 3rem;
        }

        .hero-text {
            padding-left: 0;
            max-width: 100%;
        }

        .hero-text h1 {
            font-size: 3rem;
            /* Reduced from 5rem */
            line-height: 1.2;
        }

        .hero-text p {
            margin: 0 auto 2rem;
            font-size: 1rem;
        }

        .hero-btns {
            justify-content: center;
            flex-wrap: wrap;
        }

        .hero-visual {
            width: 100%;
            display: flex;
            justify-content: center;
        }

        .image-wrapper {
            width: 100%;
            max-width: 320px;
            height: auto;
        }

        /* Mobile Navigation Drawer */
        .nav-menu {
            position: fixed;
            top: 0;
            right: -100%;
            flex-direction: column;
            background: rgba(10, 15, 28, 0.98);
            /* Solid dark background */
            backdrop-filter: blur(20px);
            width: 80%;
            /* Drawer width */
            max-width: 300px;
            height: 100vh;
            padding: 6rem 2rem 2rem;
            /* Space for close button if needed, but we toggle logic */
            transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            border-left: 1px solid var(--glass-border);
            border-radius: 0;
            /* Reset pill shape */
            align-items: flex-start;
            /* Left align links */
            gap: 1.5rem;
            box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
            z-index: 1001;
        }

        .nav-menu.active {
            right: 0;
        }

        .nav-menu a {
            width: 100%;
            text-align: left;
            padding: 12px 0;
            /* More spacing */
            border-radius: 0;
            background: transparent !important;
            /* Remove pill bg */
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            font-size: 1.1rem;
            color: var(--color-text-main);
        }

        .nav-menu a:hover,
        .nav-menu a.active {
            color: var(--color-accent-gold);
            padding-left: 10px;
            /* Slide effect */
            background: transparent !important;
            box-shadow: none;
            text-shadow: none;
            border-color: var(--color-accent-gold);
        }

        /* Mobile Toggle Button */
        .mobile-toggle {
            display: block;
            z-index: 1002;
            font-size: 1.5rem;
        }

        /* Hide the desktop dropdown mechanics in drawer if needed, 
       but for now we just let them stack. 
       Ideally, dropdowns on mobile need click-to-expand. 
       Let's hide the dropdown hover content for now to avoid mess 
       or assume users click the parent link. */
        .dropdown {
            flex-direction: column;
            width: 100%;
            align-items: flex-start;
        }

        .dropdown-content {
            position: static;
            width: 100%;
            background: transparent;
            border: none;
            box-shadow: none;
            padding: 0 0 0 1rem;
            display: none;
            /* Hidden by default, requires JS to toggle. 
                        Since we lack mobile dropdown JS, let's keep it simple. */
        }

        /* Adjust Cart/Actions for Mobile */
        .nav-actions {
            z-index: 1002;
            /* Ensure toggle is clickable */
        }

        .btn-cart {
            padding: 8px 16px;
            height: 44px;
            font-size: 0.9rem;
        }

        .btn-cart span {
            display: none;
            /* Hide "My Cart" text on mobile, keep icon */
        }
    }

    @media (max-width: 480px) {
        .hero-text h1 {
            font-size: 2.5rem;
            /* Even smaller for phones */
        }

        .hero-btns .btn {
            width: 100%;
            /* Stack buttons */
            text-align: center;
        }
    }

    /* --- SLIDE-OUT CART (Global) --- */
    .cart-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(5px);
        z-index: 1999;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s;
    }

    .cart-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    .cart-drawer {
        position: fixed;
        top: 0;
        right: -400px;
        width: 400px;
        height: 100vh;
        background: #0a0f1c;
        border-left: 1px solid var(--color-accent-gold);
        z-index: 2000;
        transition: right 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
        display: flex;
        flex-direction: column;
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
    }

    .cart-drawer.active {
        right: 0;
    }

    .cart-header {
        padding: 1.5rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .cart-header h2 {
        color: var(--color-accent-gold);
        font-size: 1.5rem;
    }

    .close-cart-btn {
        background: none;
        border: none;
        color: white;
        font-size: 2rem;
        cursor: pointer;
    }

    .cart-items {
        flex: 1;
        overflow-y: auto;
        padding: 1.5rem;
    }

    .cart-item {
        display: flex;
        gap: 1rem;
        margin-bottom: 1.5rem;
        background: var(--glass-bg);
        padding: 1rem;
        border-radius: 8px;
        border: 1px solid var(--glass-border);
    }

    .cart-item img {
        width: 60px;
        height: 60px;
        object-fit: cover;
        border-radius: 4px;
    }

    .cart-item-details {
        flex: 1;
    }

    .cart-item-title {
        font-size: 0.95rem;
        margin-bottom: 0.3rem;
        color: var(--color-text-main);
    }

    .cart-item-price,
    .cart-price {
        font-family: var(--font-heading);
        font-variant-numeric: lining-nums;
        font-weight: bold;
        color: var(--color-accent-gold);
        margin-bottom: 0.5rem;
    }

    .cart-item-remove {
        background: none;
        border: none;
        color: #ef4444;
        font-size: 0.8rem;
        cursor: pointer;
        text-decoration: underline;
    }

    .cart-footer {
        padding: 1.5rem;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        background: var(--glass-bg);
    }

    .cart-total {
        display: flex;
        justify-content: space-between;
        font-size: 1.2rem;
        margin-bottom: 1rem;
        font-weight: bold;
        color: white;
    }

    .checkout-btn {
        width: 100%;
        padding: 1rem;
        background: var(--color-accent-gold);
        color: black;
        border: none;
        border-radius: 50px;
        font-weight: bold;
        cursor: pointer;
        font-size: 1rem;
        transition: transform 0.2s;
    }

    .checkout-btn:hover {
        transform: scale(1.02);
    }

    /* --- ADMIN PANEL STYLES (Grid Layout) --- */
    .product-grid-admin {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 1.5rem;
        padding: 1rem 0;
    }


    .admin-prod-card {
        display: flex;
        flex-direction: column;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        padding: 1rem;
        border-radius: 12px;
        height: 100%;
        transition: transform 0.2s;
    }

    .admin-prod-card:hover {
        transform: translateY(-5px);
        background: rgba(255, 255, 255, 0.08);
    }

    .admin-prod-img {
        width: 100%;
        height: 180px;
        /* Slightly taller */
        border-radius: 8px;
        object-fit: cover;
        margin-bottom: 1rem;
        background: #000;
    }

    .admin-prod-title {
        font-size: 1rem;
        font-weight: 600;
        color: white;
        margin-bottom: 0.5rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        /* Standard property */
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 1.3;
    }

    .admin-prod-price {
        font-weight: bold;
        color: var(--color-accent-gold);
        margin-bottom: 1rem;
        font-size: 1.1rem;
    }

    /* Button Wrapper - Push to bottom */
    .admin-prod-card>div:last-child {
        margin-top: auto;
        display: flex;
        gap: 0.8rem;
    }

    .action-btn {
        padding: 0.6rem 0.5rem;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font-weight: 600;
        font-size: 0.9rem;
        transition: all 0.2s;
        flex: 1;
        text-align: center;
    }

    .edit-btn {
        background: rgba(212, 175, 55, 0.15);
        color: var(--color-accent-gold);
        border: 1px solid rgba(212, 175, 55, 0.3);
        margin-right: 0.5rem;
    }

    .edit-btn:hover {
        background: var(--color-accent-gold);
        color: #000;
    }

    .delete-btn {
        background: rgba(239, 68, 68, 0.15);
        color: #ef4444;
        border: 1px solid rgba(239, 68, 68, 0.3);
    }

    .delete-btn:hover {
        background: #ef4444;
        color: white;
    }

    /* --- ADMIN HEADER --- */
    .header-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1.5rem 2rem;
        background: rgba(0, 0, 0, 0.2);
        position: sticky;
        top: 0;
        z-index: 100;
        backdrop-filter: blur(10px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .header-bar h2 {
        margin: 0;
        color: var(--color-accent-gold);
        font-family: var(--font-heading);
    }

    .header-bar .back-link {
        color: var(--color-text-muted);
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        transition: color 0.3s;
    }

    .header-bar .back-link:hover {
        color: white;
    }}