:root {
            --primary: #A36B5F;
            --secondary: #FFD8C9;
            --backgroundLight: #FEE3E3;
            --backgroundDark: #121212;
            --cardDark: #1e1e1e;
            --textDark: #f3f3f3;
        }
        
        html, body {
            overflow-x: hidden;
            width: 100%;
            max-width: 100%;
        }
        
        body {
            font-family: 'Poppins', sans-serif;
            background-color: var(--backgroundLight);
            transition: background-color 0.5s ease;
            color: #333;
        }
        
        .dark body {
            background-color: var(--backgroundDark);
            color: var(--textDark);
        }
        
        h1, h2, h3 {
            font-family: 'Pacifico', 'Cherry Swash', cursive;
        }
        
        .hero-bg {
            background-image: linear-gradient(rgba(255, 240, 245, 0.7), rgba(255, 240, 245, 0.7)), url('images/background.png');
            background-size: cover;
            background-position: center;
        }
        
        .dark .hero-bg {
            background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('images/background.png');
        }
        
        .cookie-card {
            transition: all 0.3s ease;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
            background-color: #FFF0EE; /* Brighter, lighter color */
        }
        
        .dark .cookie-card {
            background-color: var(--cardDark);
            color: var(--textDark);
            border: 1px solid #333;
        }
        
        .cookie-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        
        .floating-btn {
            animation: float 6s ease-in-out infinite;
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
            border-radius: 50%;
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 40;
        }
        
        .counter-btn {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }
        
        .counter-btn:hover {
            transform: scale(1.1);
        }
        
        .counter-value {
            min-width: 30px;
            text-align: center;
        }
        
        .cart-drawer {
            transform: translateX(100%);
            transition: transform 0.4s ease-in-out;
        }
        
        .cart-drawer.open {
            transform: translateX(0);
        }
        
        .cart-item {
            transition: all 0.3s ease;
        }
        
        .cart-item:hover {
            background-color: rgba(163, 107, 95, 0.05);
        }
        
        .cart-overlay {
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s;
        }
        
        .cart-overlay.active {
            opacity: 1;
            visibility: visible;
        }
        
        .form-input:focus {
            outline: none;
            box-shadow: 0 0 0 2px #A36B5F;
        }
        
        .dark .form-input {
            background-color: #2a2a2a;
            border-color: #444;
            color: #f3f3f3;
        }
        
        .dark .form-input::placeholder {
            color: #aaa;
        }
        
        .cookie-chip {
            position: absolute;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: linear-gradient(145deg, #A36B5F, #8a5a50);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            z-index: 0;
            animation: float 8s ease-in-out infinite;
        }
        
        .cookie-chip:nth-child(1) {
            top: 10%;
            left: 5%;
            animation-delay: 0s;
        }
        
        .cookie-chip:nth-child(2) {
            top: 20%;
            right: 7%;
            animation-delay: 1s;
        }
        
        .cookie-chip:nth-child(3) {
            bottom: 15%;
            left: 8%;
            animation-delay: 2s;
        }
        
        .cookie-chip:nth-child(4) {
            bottom: 25%;
            right: 5%;
            animation-delay: 3s;
        }
        
        .instagram-button {
            background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
            min-height: 44px;
            padding: 12px 24px;
            font-weight: bold;
            border-radius: 9999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }
        
        /* Responsive cookie grid */
        .cookie-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 1rem;
        }
        
        @media (min-width: 768px) {
            .cookie-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 1.5rem;
            }
        }
        
        @media (min-width: 1024px) {
            .cookie-grid {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }
        }
        
        /* Instagram carousel */
        .instagram-carousel {
            display: flex;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            gap: 20px;
            padding: 10px 0;
            scrollbar-width: thin;
            scrollbar-color: #A36B5F transparent;
            -webkit-overflow-scrolling: touch;
            position: relative;
        }
        
        .instagram-carousel::-webkit-scrollbar {
            height: 8px;
        }
        
        .instagram-carousel::-webkit-scrollbar-thumb {
            background-color: #A36B5F;
            border-radius: 4px;
        }
        
        .instagram-slide {
            scroll-snap-align: start;
            min-width: 80%;
            flex: 0 0 auto;
            position: relative;
            padding-top: 100%; /* 1:1 Aspect Ratio */
            overflow: hidden;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        
        .instagram-slide iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: none;
        }
        
        .delivery-note {
            background-color: #FFE4E1;
            border-radius: 10px;
            padding: 15px;
            margin: 15px 0;
            text-align: center;
            font-size: 0.9rem;
        }
        
        .dark .delivery-note {
            background-color: #2a2a2a;
        }
        
        /* Instagram navigation buttons */
        .carousel-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 10;
            background: rgba(255,255,255,0.7);
            border: none;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 1.2rem;
            transition: all 0.3s;
            backdrop-filter: blur(5px);
        }
        
        .carousel-nav:hover {
            background: rgba(255,255,255,0.9);
            transform: translateY(-50%) scale(1.1);
        }
        
        .carousel-prev {
            left: 10px;
        }
        
        .carousel-next {
            right: 10px;
        }
        
        /* Mobile-specific adjustments */
        @media (max-width: 640px) {
            .cookie-card h3 {
                font-size: 1rem;
            }
            .cookie-card p {
                font-size: 0.75rem;
            }
            .counter-btn {
                width: 30px;
                height: 30px;
            }
            .counter-value {
                min-width: 25px;
                font-size: 0.9rem;
            }
            .price-tag {
                font-size: 0.9rem;
            }
            .hero-bg h1 {
                font-size: 2rem;
            }
            .hero-bg p {
                font-size: 0.9rem;
            }
            
            /* Ensure images are square on mobile */
            .cookie-card img {
                aspect-ratio: 1/1;
                object-fit: cover;
            }
            
            .instagram-slide {
                min-width: 85%;
            padding-top: 100%; /* Maintain 1:1 aspect ratio */
            }
            
            /* Hide navigation on mobile */
            .carousel-nav {
                display: none;
            visibility: hidden;
            pointer-events: none;
            opacity: 0;
            position: absolute;
            top: -9999px;
            left: -9999px;
            width: 0;
            height: 0;
            overflow: hidden;
            font-size: 0;
            line-height: 0;
            padding: 0;
            margin: 0;
            border: none;
            box-shadow: none;
            z-index: -1;
        }
            
            /* Hide copy order button on mobile */
            .copy-order-btn {
                display: none !important;
            }
        }
        
        @media (min-width: 1024px) {
            .instagram-slide {
                min-width: 400px;
                padding-top: 0;
                height: 400px;
            }
            
            /* Show copy order button on desktop */
            .copy-order-btn {
                display: flex !important;
            }
        }
        
        /* Animation keyframes */
        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-20px); }
        }
        
        @keyframes fadeIn {
            0% { opacity: 0; }
            100% { opacity: 1; }
        }
        
        /* Button tap targets */
        .action-button {
            min-height: 44px;
            padding: 12px 24px;
            font-weight: bold;
            border-radius: 9999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }
        
        /* Navbar spacing - UPDATED to solid background */
        nav {
            padding: 12px 0;
            background-color: white;
            z-index: 100;
            height: 70px; /* Fixed height for navbar */
        }
        .dark nav {
            background-color: #0e0e0e;
        }
        
        /* Floating button positioning */
        .floating-btn.whatsapp {
            bottom: 20px;
            left: 20px;
        }
        
        .floating-btn.cart {
            bottom: 20px;
            right: 20px;
        }
        
        /* Toast notification */
        .toast {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 12px 24px;
            border-radius: 30px;
            z-index: 1000;
            opacity: 0;
            transition: opacity 0.3s ease;
            pointer-events: none;
        }
        
        .toast.show {
            opacity: 1;
        }
        
        /* Copy order button */
        .copy-order-btn {
            display: none;
        }
        
        /* FEATURE 1: Updated Milestone Discount Bar - FIXED */
        #milestoneBar {
            position: fixed;
            top: 70px; /* Positioned below navbar */
            width: 100%;
            background-color: white;
            padding: 10px 0;
            z-index: 45; /* Below navbar */
            transform: translateY(-100%);
            transition: transform 0.5s ease;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            height: 120px; /* Increased height */
        }
        
        .dark #milestoneBar {
            background-color: #0e0e0e;
        }
        
        #milestoneBar.show {
            transform: translateY(0);
        }
        
        .milestone-progress-container {
            width: 90%;
            max-width: 800px;
            margin: 0 auto;
            position: relative;
            height: 110px; /* Increased height */
        }
        
        .milestone-title {
            text-align: center;
            font-weight: bold;
            color: var(--primary);
            margin-bottom: 10px;
            font-size: 1.1rem;
        }
        
        .dark .milestone-title {
            color: var(--secondary);
        }
        
        .milestone-track {
            height: 8px;
            background-color: #f0d9d5;
            border-radius: 4px;
            position: absolute;
            top: 40px; /* Adjusted position */
            left: 0;
            width: 100%;
            transform: translateY(-50%);
        }
        
        .dark .milestone-track {
            background-color: #333;
        }
        
        #milestoneProgress {
            height: 100%;
            background-color: #A36B5F;
            width: 0;
            transition: width 0.5s ease;
            border-radius: 4px;
        }
        
        .dark #milestoneProgress {
            background-color: #FFD8C9;
        }
        
        .milestone-markers {
            position: absolute;
            top: 40px; /* Adjusted position */
            left: 0;
            width: 100%;
            height: 0;
        }
        
        .milestone-marker {
            position: absolute;
            transform: translateX(-50%);
        }
        
        .milestone-point {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: white;
            border: 3px solid #d0b9b5;
            margin: 0 auto;
            position: relative;
            z-index: 2;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            font-weight: bold;
            color: #666;
        }
        
        .dark .milestone-point {
            background: #333;
            border-color: #555;
            color: #aaa;
        }
        
        .milestone-point.active {
            border-color: #A36B5F;
            background: #A36B5F;
            box-shadow: 0 0 0 4px rgba(163, 107, 95, 0.3);
            color: white;
        }
        
        .dark .milestone-point.active {
            border-color: #FFD8C9;
            background: #FFD8C9;
            box-shadow: 0 0 0 4px rgba(255, 216, 201, 0.3);
            color: #333;
        }
        
        .milestone-pointer {
            position: absolute;
            top: 40px; /* Adjusted position */
            transform: translate(-50%, -50%);
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #A36B5F;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 16px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
            z-index: 3;
            transition: left 0.5s ease;
        }
        
        .dark .milestone-pointer {
            background: #FFD8C9;
            color: #333;
        }
        
        .milestone-label {
            position: absolute;
            top: 60px; /* Positioned below progress bar */
            left: 50%;
            transform: translateX(-50%);
            font-size: 12px;
            color: #666;
            white-space: nowrap;
        }
        
        .dark .milestone-label {
            color: #aaa;
        }
        
        .milestone-percentages {
            display: flex;
            justify-content: space-between;
            margin-top: 20px; /* More spacing */
            font-size: 14px;
            font-weight: 500;
            color: #666;
        }
        
        .dark .milestone-percentages {
            color: #aaa;
        }
        
        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
            40% {transform: translateY(-15px);}
            60% {transform: translateY(-7px);}
        }
        
        @keyframes bounceMilestone {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-6px); }
        }
        
        .bounce {
            animation: bounceMilestone 0.4s ease;
        }
        
        /* Food classification icons */
        .food-icon {
            display: inline-block;
            width: 16px;
            height: 16px;
            border-radius: 3px;
            border: 1px solid #ddd;
            position: relative;
            margin-right: 8px;
            vertical-align: middle;
        }
        
        .food-icon::before {
            content: '';
            position: absolute;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        
        .food-icon-veg {
            border-color: #4CAF50;
        }
        
        .food-icon-veg::before {
            background-color: #4CAF50;
        }
        
        .food-icon-egg {
            border-color: #FFC107;
        }
        
        .food-icon-egg::before {
            background-color: #FFC107;
        }
        
        /* Delivery charge info */
        .delivery-info {
            background-color: #fff7f6;
            border-radius: 8px;
            padding: 12px;
            margin: 12px 0;
            font-size: 0.9rem;
            text-align: center;
        }
        
        .dark .delivery-info {
            background-color: #2a2a2a;
        }
        
        .delivery-free {
            color: #10B981;
            font-weight: bold;
        }
        
        .delivery-charge {
            color: #EF4444;
            font-weight: bold;
        }