 <style>
        /* General body styling for a clean, professional look */
        body {
            font-family: 'Montserrat', sans-serif;
            margin: 0;
            padding: 0;
            background-color: #fffafa; /* Changed to an extremely light pink */
            color: #554a40; /* Text color changed to dark for readability */
            line-height: 1.6;
        }

        /* Container to center the content and apply a max-width */
        .container {
            max-width: 960px;
            margin: 0 auto;
            padding: 20px;
            margin-top: 100px;
        }

        /* Header styling with a logo, navigation, and a subtle drop shadow */
        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #fffafa;
            padding: 10px 20px;
            border-bottom: 2px solid #554a40;
            height: 110px;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            z-index: 2000;
        }

        /* Logo text style */
        .logo {
            display: flex;
            align-items: center;
            background: #fffafa;
            gap: 15px;
            text-decoration: none;
            color: #554a40;
            font-size: 1.2rem;
            font-weight: bold;
            font-fmaily: 'Playfair Display', serif;
        }

        .logo img {
          max-width: 60px;
          height: 40px;
          background: transparent;
        }

         /* Navigation links */
        .nav-links {
            display: flex;
            align-items: center;
            gap: 20px; /* Added cursor to indicate interactivity */
            overflow: visible;
        }

        .nav-links a {
            color: #554a40;
            text-decoration: none;
            font-weight: 600;
            font-family: 'Montserrat', sans-serif;
            transition: color 0.3s ease;
            cursor: pointer;
        }
        
        .nav-links a:hover {
            color: #c96c4d;/* Warm burnt orange on hover */
        }

        .hamburger {
            display: none;
            background: none;
            border: none;
            cursor: pointer;
            padding: 15px;
            z-index: 1002;
            order: 2;
        }

        .sidebar-menu {
            position: fixed;
            right: -250px;
        }

        .sidebar-menu.active {
            display: block;
            right: 0;
        }

        .sidebar-menu a {
            color: #554a40
            text-decoration: none;
            padding: 15px 0;
            border-bottom: 1px solid #915f6d;
        }

        /* --- Cart Icon Styling --- */
        /* Container for the new cart icon, making it a subtle circle button */
        .cart {
            order: 3;
        } 

        .cart-link {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 62px;
            height: 62px;
            cursor: pointer;
            z-index: 2000;
            border: 1px solid #915f6d;
            border-radius: 50%;
            padding: 0px;
            box-sizing: border-box;
            transition: all 0.3s ease;
        }


        /* Hover state for the cart button */
        .cart-link:hover {
            background-color: #c96c4d;
            border-color: #c96c4d;
            cursor: pointer;
        }

        /* Styling for the cart icon itself */
        .cart-icon {
            width: 24px;
            height: 24px;
            fill: #b38481;
            transition: fill 0.3s ease;
            display: block;
        }

        /* Hover state for the icon inside the button */
        .cart-link:hover .cart-icon {
            fill: #fff;
        }
        
        .cart-count {
            position: absolute;
            top: -8px;
            right: -12px;
            background-color: red;
            color: white;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 8px;
            padding: 2px 4px;
            font-weight: bold; 
        }

        @media (min-width: 1024px) {
            .cart-link {
                display: flex;
            }
        }

        /* Hero section - the main, eye-catching part of the page */
        .hero-section {
            text-align: left;
            padding: 80px 20px;
            background-color: #fff0f5; /* Changed back to match header color */
            color: #554a40; /* Changed to a darker color for readability */
            border-radius: 8px;
            margin-bottom: 40px;
            position: relative;
            margin-top: 50px;
            z-index: 999;
        }

        .hero-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
        }

        /* Hero text styling */
        .hero-content h1 {
            font-family: 'Playfair Display', serif; /* Changed font to Playfair Display */
            font-weight: 700; /* Bolder font weight for legibility */
            font-size: 3.5em;
            margin: 0; /* Removed bottom margin since gap is used */
        }

        .hero-content p {
            font-size: 1.2em;
            max-width: 600px;
            margin: 0; /* Removed margin since gap is used */
        }

        /* Styling for the new "Shop Now" button */
        .cta-button {
            display: inline-block;
            padding: 15px 30px;
            background-color: #554a40; /* Use the burnt orange accent color */
            color: #fffafa;
            text-decoration: none;
            border-radius: 5px;
            font-weight: bold;
            font-size: 1.2em;
            transition: background-color 0.3s ease, transform 0.2s ease;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }

        .cta-button:hover {
            background-color: #554a40; /* Darken the color on hover */
            transform: translateY(-2px); /* Add a subtle lift effect */
        }

        /* Main content sections with flexible display for multiple items */
        .products-grid {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 20px;
            margin-top: 120px;
        }
        
        .products-heading {
            width: 100%;
            text-align: center;
            font-family: 'Playfair Display', serif;
            font-size: 2.5em;
            font-weight: 700;
            color: #554a40;
            margin-bottom: 20px;
        }

        /* Individual content cards for products or features */
        .card {
            background-color: #fffafa;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            padding: 20px;
            flex: 0 0 250px; /* Allow cards to grow and shrink responsively */
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .card img {
            max-width: 100%;
            height: auto;
            border-radius: 5px;
            margin-bottom: 15px;
        }

        .card h3 {
            font-family: 'Montserrat', sans-serif; /* New font for the card headings */
            font-weight: 700;
            color: #3e2f2e; /* Changed to a deep brown */
            font-size: 1.5em;
            margin: 0 0 10px;
        }

        /* Styling for the payment buttons */
        .add-to-cart-button {
            display: inline-block;
            margin-top: 15px;
            padding: 10px 20px;
            background-color: #c96c4d; /* Use the burnt orange accent color */
            color: white;
            text-decoration: none;
            border-radius: 5px;
            font-weight: bold;
            transition: background-color 0.3s ease;
            cursor: pointer;
            border: none;
        }

        .add-to-cart-button:hover, 
        .add-to-cart-button:focus {
            background-color: #a6583d;
        }
        
        .price {
            font-size: 1.2em;
            color: #555;
            font-weight: 600;
            margin: 10px 0;
        }

        /* Footer styling */
        .footer {
            text-align: center; /* Reverted to 'center' */
            padding: 20px;
            border-top: 2px solid #554a40; /* Lighter border color */
            margin-top: 40px;
            font-size: 0.9em;
            color: #554a40; /* Dark text for readability */
            background-color: #fff0f5; /* Changed to match the header color */
        }
        
        /* New social links styling for the footer */
        .social-links {
            margin-top: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
        }
        
        .social-links a {
            color: #554a40
            text-decoration: none;
            font-weight: bold;
            transition: color 0.3s ease;
            display: inline-flex; /* Use flexbox for icon and text alignment */
            align-items: center;
            gap: 5px; /* Add a small gap between the icon and text */
        }
        
        .social-links a:hover {
            color: #554a40 /* Match the accent color */
        }
        
        /* New styling for image-based social media logos */
        .social-links img.logo-img {
            width: 24px;
            height: 24px;
            transition: transform 0.3s ease;
        }

        .social-links a:hover img.logo-img {
            transform: scale(1.1); /* Add a slight zoom effect on hover */
        }

        .contact-info {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            margin-top: 10px;
        }
        
        /* New styling for the social links on the home page */
        .social-links-home {
            text-align: center;
            padding: 20px;
            background-color: #fff0f5;
            color: #554a40;
            border-radius: 8px;
            margin-top: 20px;
        }

        /* --- New styles for Cart and Contact Pages --- */
        .page-content {
            text-align: center;
            padding: 40px 20px;
        }
        
        .page-content h2 {
            font-family: 'Playfair Display', serif;
            font-size: 3em;
            color: #3e2f2e;
            margin-bottom: 20px;
        }
        
        .contact-details {
            max-width: 600px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            gap: 15px;
            font-size: 1.2em;
        }

        .cart-items {
            list-style: none;
            padding: 0;
            max-width: 600px;
            margin: 0 auto;
            text-align: left;
        }

        .cart-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #ccc;
            padding: 10px 0;
        }
        
        .cart-item-info {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .cart-item-actions {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .quantity-control {
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .quantity-btn {
            background-color: #ccc;
            border: none;
            padding: 5px 10px;
            cursor: pointer;
            border-radius: 3px;
        }

        .remove-btn {
            background-color: #ff6347;
            color: white;
            border: none;
            padding: 5px 10px;
            cursor: pointer;
            border-radius: 3px;
        }

        .cart-summary {
            margin-top: 20px;
            padding-top: 20px;
            border-top: 2px solid #e9967a;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
            text-align: right;
            font-size: 1.5em;
        }

        .checkout-btn {
            margin-top: 20px;
            padding: 15px 30px;
            background-color: #28a745;
            color: white;
            border: none;
            border-radius: 5px;
            font-weight: bold;
            cursor: pointer;
        }


        /* Responsive design for smaller screens */
        @media (max-width: 768px) {
            .navbar {
                padding: 5px 2%;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                width: 100%;
                box-sizing: border-box;
            }

            .nav-links {
                display: none;
            }

            .logo {
                padding-left: 0;
            }
         
            .hamburger {
                display: block;
                margin-left: auto;
                cursor: pointer;
            }

            .hamburger .bar {
                width: 25px;
                height: 3px;
                background-color: #f5f5dc;
                margin: 5px 0;
                transition: all 0.3s ease-in-out;
            }

            .sidebar-menu {
                position: fixed;
                top: 0;
                right: -250px;
                width: 250px;
                height: 100%;
                background-color: #f0dddf;
                transition: right 0.3s ease-in-out;
                z-index: 2001;
            }

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

            .sidebar-menu a.sidebar-link {
                color: #554a40;
                text-decoration: none;
                padding: 15px 0;
                border-bottom: 1px solid #915f6d;
            }

            .hero-section {
                padding: 50px 20px;
                margin-top: 110px;
            }

            /* Stack home page cards vertically on small screens */
            .products-grid {
                flex-direction: column;
                align-items: center;
            }

            .cart {
                order: initial;
            }
        }

        @media (min-width: 769px) {
            .sidebar-menu {
                display: none;
            }
            .sidebar-menu a.sidebar-link {
                display: none;
            }
        }

        /* New styles for the filter and currency buttons */
        .shop-controls {
            display: flex;
            justify-content: flex-end; /* Align to the right */
            gap: 15px;
            margin-bottom: 20px;
        }

        .filter-button,
        .currency-button {
            background-color: #c96c4d;
            color: #fff;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            font-weight: bold;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .filter-button:hover, 
        .currency-button:hover,
        .filter-button:focus,
        .currency-button:focus {
            background-color: #a6583d;
        }
        
        /* Filter and Currency Dropdown Base Styles */
        .filter-selector, 
        .currency-selector {
            position: relative;
            display: inline-block;
        }
        
        .filter-selector .dropdown-content, 
        .currency-selector .dropdown-content {
            display: none;
            position: absolute;
            background-color: #fdf7e9;
            min-width: 120px;
            box-shadow: 0 8px 16px rgba(0,0,0,0.2);
            z-index: 1;
            right: 0;
            border-radius: 5px;
            overflow: hidden;
            top: 100%; /* Position below the button */
        }
        
        .filter-selector .dropdown-content a, 
        .currency-selector .dropdown-content a {
            color: #3e2f2e;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }
        
        .filter-selector .dropdown-content a:hover,  
        .currency-selector .dropdown-content a:hover {
            background-color: #e9967a;
            color: #fff;
        }
        
        /* Show dropdown on hover or when active class is applied by JS */
        .filter-selector.active .dropdown-content,
        .currency-selector.active .dropdown-content {
            display: block;
        }

        /* Simple modal for messages */
        .modal {
            display: none;
            position: fixed;
            z-index: 2000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.4);
            transition: opacity 0.5s ease-in-out;
            opacity: 0;
        }

        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            max-width: 500px;
            border-radius: 8px;
            text-align: center;
        }

        .close-button {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
        }

        .close-button:hover,
        .close-button:focus {
            color: black;
            text-decoration: none;
        }
        
        .confirm-modal-buttons {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 20px;
        }
        
        .confirm-modal-buttons button {
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            font-weight: bold;
            cursor: pointer;
        }

        .confirm-button {
            background-color: #28a745;
            color: white;
        }
        
        .cancel-button {
            background-color: #dc3545;
            color: white;
        }

        /* New styles for the color swatches */
        .color-options, .flavour-options {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 10px;
            margin-bottom: 10px;
        }
        
        .color-swatch, .flavour-swatch {
            width: 25px;
            height: 25px;
            border-radius: 50%;
            border: 2px solid transparent;
            cursor: pointer;
            transition: border-color 0.2s ease, transform 0.2s ease;
            position: relative;
            z-index: 10;
        }

        .color-swatch:hover, .flavour-swatch:hover {
            transform: scale(1.1);
        }

        .color-swatch.active, .flavour-swatch.active { /* Highlight the active swatch */
            border: 2px solid #c96c4d; /* Add a subtle glow */
        }
    </style>
