:root {
            --light-pink: #FBCFE8;
            --deep-blue: #1E3A8A;
            --hot-pink: #EC4899;
            --soft-blush: #FFF1F2;
            --white: #ffffff;
        }

        body { font-family: 'Outfit', sans-serif; color: var(--deep-blue); background-color: var(--white); overflow-x: hidden; }
        h1, h2, h3, .navbar-brand { font-family: 'Playfair Display', serif; font-weight: 700; }

        /* Navbar */
        .navbar { padding: 1.2rem 0; background: transparent !important; border-bottom: 1px solid var(--light-pink); }
        .nav-link { color: var(--deep-blue) !important; font-weight: 600; margin: 0 10px; transition: 0.3s; font-size: 0.9rem; }
        .nav-link:hover { color: var(--hot-pink) !important; }
        .cart-btn { background: var(--deep-blue); color: white; border: none; padding: 10px 22px; border-radius: 50px; position: relative; transition: 0.3s; }
        .cart-btn:hover { background: var(--hot-pink); transform: scale(1.05); }
        .cart-badge { position: absolute; top: -5px; right: -5px; background: var(--hot-pink); color: white; border-radius: 50%; padding: 2px 7px; font-size: 0.7rem; font-weight: bold; border: 2px solid white; }

        /* Hero */
        .hero {
            background: linear-gradient(rgba(30, 58, 138, 0.7), rgba(236, 72, 153, 0.3)), url('https://images.pexels.com/photos/3965548/pexels-photo-3965548.jpeg?auto=compress&cs=tinysrgb&w=1920');
            height: 75vh; display: flex; align-items: center; background-size: cover; background-position: center; color: white;
        }

        /* Generic Section Styling */
        section { padding: 80px 0; }
        .section-title { text-align: center; margin-bottom: 50px; }
        .section-title h2 { color: var(--deep-blue); font-size: 2.5rem; position: relative; padding-bottom: 15px; }
        .section-title h2::after { content: ''; position: absolute; width: 60px; height: 3px; background: var(--hot-pink); bottom: 0; left: 50%; transform: translateX(-50%); }

        /* Product Cards */
        .product-card { border: none; transition: 0.4s; height: 100%; border-radius: 15px; background: var(--soft-blush); overflow: hidden; border: 1px solid var(--light-pink); }
        .product-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(30, 58, 138, 0.1); }
        .product-img { height: 260px; object-fit: cover; }
        .badge-cat { background: var(--light-pink); color: var(--deep-blue); font-size: 0.7rem; font-weight: bold; padding: 4px 12px; border-radius: 5px; margin-bottom: 15px; display: inline-block; }
        .btn-add { background: var(--deep-blue); color: white; border: none; width: 100%; padding: 14px; font-weight: 700; transition: 0.3s; }
        .btn-add:hover { background: var(--hot-pink); }

        /* Banners */
        .offer-banner { 
            background: var(--light-pink); color: var(--deep-blue); padding: 50px; border-radius: 20px; text-align: center; 
            border: 2px dashed var(--hot-pink); margin-top: 40px;
        }

        /* Cart Sidebar */
        #cartSidebar { position: fixed; right: -420px; top: 0; width: 400px; height: 100vh; background: white; z-index: 9999; box-shadow: -10px 0 30px rgba(0,0,0,0.1); padding: 30px; transition: 0.4s; overflow-y: auto; }
        #cartSidebar.active { right: 0; }
        .cart-item { display: flex; align-items: center; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #eee; }
        .cart-item img { width: 60px; height: 60px; object-fit: cover; border-radius: 8px; margin-right: 15px; }

        /* Checkout Form Styling */
        .form-check-input:checked { background-color: var(--hot-pink); border-color: var(--hot-pink); }

        /* FAQ */
        .accordion-button:not(.collapsed) { background-color: var(--soft-blush); color: var(--hot-pink); font-weight: bold; }

        /* Footer */
        footer { background: var(--deep-blue); color: #cbd5e1; padding: 80px 0 20px; }
        footer h5 { color: var(--light-pink); margin-bottom: 25px; border-left: 4px solid var(--hot-pink); padding-left: 15px; }
        footer a { color: #cbd5e1; text-decoration: none; transition: 0.3s; }
        footer a:hover { color: var(--hot-pink); padding-left: 5px; }


        .hero-offer {
    background: linear-gradient(135deg, #f8f5f2, #e8dfd8);
    padding: 80px 0;
}

.offer-badge {
    background-color: #b76e79;
    color: #fff;
    padding: 15px 35px;
    font-size: 28px;
    font-weight: 700;
    border-radius: 8px;
    display: inline-block;
}

.btn-shop {
    background-color: #333;
    color: #fff;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 600;
    transition: 0.3s ease;
}

.btn-shop:hover {
    background-color: #b76e79;
    color: #fff;
}