:root {
            --festive-red: #fa6aff;
            --warm-cream: #FFF6DA;
            --accent-yellow: #F4F754;
            --accent-orange: #dcff40;
            --nav-beige: #090775;
            --nav-gold: #17e7fe;
            --white: #FFFFFF;
            --transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { background-color: var(--warm-cream); color: var(--festive-red); font-family: 'News Cycle', sans-serif; overflow-x: hidden; }
        
        h1, h2, h3, .festive-font {font-family: 'News Cycle', sans-serif;   }

        /* --- Announcement Bar --- */
        .announcement-bar {
            background-color: var(--accent-yellow);
            color: var(--accent-orange);
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            overflow: hidden;
            position: relative;
        }
        .announcement-text {
            position: absolute;
            color:#090775;
            white-space: nowrap;
            animation: slideText 8s infinite linear;
        }
        @keyframes slideText {
            0% { transform: translateY(100%); opacity: 0; }
            5%, 20% { transform: translateY(0); opacity: 1; }
            25% { transform: translateY(-100%); opacity: 0; }
            100% { transform: translateY(-100%); opacity: 0; }
        }

        /* --- Header --- */
        header { background-color: var(--nav-beige); padding: 20px 0; position: sticky; top: 0; z-index: 1000; box-shadow: 0 4px 20px rgba(0,0,0,0.05); }
        .header-main { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.logo{
    cursor:pointer;
    display:flex;
    align-items:center;
}

.logo img{
    height:190px;      /* control logo size */
    width:auto;
    object-fit:contain;
}        
        .nav-container { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 0 40px; }
        .social-icons { display: flex; gap: 10px; flex: 1; }
        .social-icons a { 
            width: 35px; height: 35px; border: 1px solid var(--nav-gold); border-radius: 50%; 
            display: flex; align-items: center; justify-content: center; color: var(--nav-gold); text-decoration: none; transition: var(--transition);
        }
        .social-icons a:hover { background: var(--nav-gold); color: var(--nav-beige); }

        nav { display: flex; gap: 20px; flex: 3; justify-content: center; }
        nav a { 
            text-decoration: none; color: var(--nav-gold); font-weight: 200; font-size: 0.8rem; 
            text-transform: uppercase; letter-spacing: 1px; transition: 0.3s; padding-bottom: 4px; border-bottom: 2px solid transparent;
        }
        nav a:hover { border-bottom-color: var(--festive-red); color: var(--festive-red); }

        .header-right { flex: 1; display: flex; justify-content: flex-end; gap: 20px; align-items: center; }
        .auth-link { color: var(--nav-gold); font-weight: 700; text-decoration: none; cursor: pointer; }
        .cart-trigger { position: relative; cursor: pointer; color: var(--nav-gold); }
        .cart-count { 
            position: absolute; top: -8px; right: -8px; background: var(--festive-red); color: white; 
            font-size: 0.7rem; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
        }

        /* --- Hero --- */
        .hero {
            height: 85vh;
            background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('https://i.pinimg.com/736x/01/6c/c8/016cc8d9fb4107505e416a1093a0ef40.jpg');
            background-attachment: fixed;
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            position: relative;
        }
        .hero-overlay { background: rgba(255, 246, 218, 0.85); padding: 60px 80px; border-radius: 20px; max-width: 700px; backdrop-filter: blur(5px); }
        .hero-overlay h1 { font-size: 5rem; margin-bottom: 15px; }
        .hero-overlay p { font-size: 1.2rem; margin-bottom: 30px; line-height: 1.6; }

        .btn {
            background: var(--festive-red); color: white; border: none; padding: 12px 35px; 
            font-family: 'News Cycle'; font-weight: 700; text-transform: uppercase; cursor: pointer;
            border-radius: 4px; transition: var(--transition); letter-spacing: 1px;
        }
        .btn:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(169, 74, 74, 0.3); background: #8e3d3d; }

        /* --- Overlapping Cards --- */
        .overlap-container {
            max-width: 1200px; margin: -100px auto 100px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; padding: 0 40px; position: relative; z-index: 10;
        }
        .overlap-card {
            background: white; border-radius: 15px; overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.1); 
            transition: var(--transition); display: flex; flex-direction: column; text-align: center;
        }
        .overlap-card:hover { transform: translateY(-15px); }
        .overlap-card img { width: 100%; height: 250px; object-fit: cover; }
        .overlap-card-content { padding: 30px; }
        .overlap-card h3 { font-size: 2.2rem; margin-bottom: 10px; }
        .overlap-card p { font-size: 0.95rem; margin-bottom: 20px; color: #666; }

        /* --- Sections --- */
        section { padding: 100px 5%; max-width: 1400px; margin: 0 auto; }
        .section-title { text-align: center; font-size: 4rem; margin-bottom: 60px; }

        /* --- Product Grid --- */
        .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 40px; }
        .product-card {
            background: white; border-radius: 20px; overflow: hidden; padding-bottom: 25px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.03); transition: var(--transition); text-align: center;
        }
        .product-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
        .product-card img { width: 100%; height: 320px; object-fit: cover; }
        .product-info { padding: 20px; }
        .product-info h4 { font-family: 'News Cycle'; font-size: 1.4rem; margin-bottom: 5px; color: #333; }
        .price { font-weight: 700; font-size: 1.2rem; margin-bottom: 20px; display: block; }

        /* --- Quiz Section --- */
        .quiz-section { 
            background: var(--festive-red); color: var(--warm-cream); border-radius: 40px; margin: 100px 5%;
            padding: 100px 50px; text-align: center; position: relative; overflow: hidden;
        }
        .snowflake { position: absolute; opacity: 0.2; color: white; animation: rotate 20s infinite linear; }
        @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

        /* --- Split Section --- */
        .split-section { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; background: var(--warm-cream); }
        .split-image { border-radius: 40px; overflow: hidden; box-shadow: 0 30px 60px rgba(0,0,0,0.1); }
        .split-image img { width: 100%; display: block; }
        .split-text h2 { font-size: 4.5rem; margin-bottom: 20px; }
        .divider { width: 80px; height: 3px; background: var(--festive-red); margin-bottom: 30px; }

        /* --- Cart Drawer --- */
        .cart-drawer {
            position: fixed; right: -400px; top: 0; width: 400px; height: 100vh; 
            background: white; z-index: 5000; transition: var(--transition); padding: 40px;
            box-shadow: -10px 0 50px rgba(0,0,0,0.1); display: flex; flex-direction: column;
        }
        .cart-drawer.active { right: 0; }
        .cart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }
        .cart-items { flex: 1; overflow-y: auto; }
        .cart-item { display: flex; gap: 15px; margin-bottom: 20px; border-bottom: 1px solid #eee; padding-bottom: 15px; }
        .cart-item img { width: 70px; height: 70px; border-radius: 8px; object-fit: cover; }
        .cart-item-info h5 { font-size: 1.1rem; }
        .cart-footer { padding-top: 20px; border-top: 2px solid var(--warm-cream); }

        /* --- Modals --- */
        .modal {
            position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(10px);
            z-index: 6000; display: none; align-items: center; justify-content: center; padding: 20px;
        }
        .modal-content { 
            background: white; width: 100%; max-width: 900px; border-radius: 30px; position: relative; 
            max-height: 90vh; overflow-y: auto; padding: 60px; animation: popIn 0.4s ease-out;
        }
        @keyframes popIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
        .close-modal { position: absolute; top: 30px; right: 30px; cursor: pointer; color: var(--festive-red); }

        /* --- Footer --- */
        footer { background: var(--festive-red); color: var(--warm-cream); padding: 100px 5% 50px; }
        .footer-grid { 
            max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 2fr; gap: 60px; 
            border-bottom: 1px solid rgba(255,246,218,0.2); padding-bottom: 60px;
        }
        .footer-col h4 { font-family: 'News Cycle'; font-weight: 700; margin-bottom: 25px; text-transform: uppercase; letter-spacing: 1px; }
        .footer-col ul { list-style: none; }
        .footer-col li { margin-bottom: 12px; cursor: pointer; opacity: 0.8; transition: 0.3s; }
        .footer-col li:hover { opacity: 1; transform: translateX(5px); }
        .footer-bottom { text-align: center; padding-top: 40px; font-size: 0.9rem; opacity: 0.7; }

        /* --- Quiz & Filters --- */
        .quiz-container { text-align: left; }
        .quiz-step { display: none; }
        .quiz-step.active { display: block; }
        .quiz-option { 
            background: rgba(255,246,218,0.1); border: 2px solid var(--warm-cream); padding: 20px; 
            border-radius: 15px; margin-bottom: 15px; cursor: pointer; transition: 0.3s; 
        }
        .quiz-option:hover { background: var(--warm-cream); color: var(--festive-red); }

        /* --- Page Swapper --- */
        .page { display: none; }
        .page.active { display: block; }

        /* Responsive */
        @media (max-width: 900px) {
            .overlap-container { grid-template-columns: 1fr; margin-top: -50px; }
            .split-section { grid-template-columns: 1fr; }
            .footer-grid { grid-template-columns: 1fr 1fr; }
            .nav-container nav { display: none; }
            .hero-overlay h1 { font-size: 3.5rem; }
        }

        /* hamburger hidden on desktop */
.hamburger{
    display:none;
    flex-direction:column;
    cursor:pointer;
    gap:5px;
}

.hamburger span{
    width:25px;
    height:3px;
    background:#000;
    display:block;
}

/* mobile styles */
@media(max-width:900px){

    .hamburger{
        display:flex;
    }

    .nav-container{
        position:absolute;
        top:80px;
        left:0;
        width:100%;
        background:white;
        flex-direction:column;
        align-items:center;
        padding:20px;
        display:none;
        box-shadow:0 10px 30px rgba(0,0,0,0.1);
    }

    .nav-container.active{
        display:flex;
    }

    nav{
        display:flex;
        flex-direction:column;
        gap:15px;
        margin:20px 0;
    }

    .social-icons{
        margin-bottom:15px;
    }

    .header-right{
        margin-top:10px;
    }
}