:root{
  --primary:#065f46;--primary-light:#059669;--secondary:#dc2626;--light:#f9fafb;--light-gray:#f3f4f6;--dark:#111827;--border:#e2e8f0;--gradient-1:linear-gradient(135deg,#065f46,#059669,#10b981);--gradient-2:linear-gradient(135deg,#dc2626,#ef4444,#f87171)
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;color:var(--dark)}
.navbar{position:fixed;top:0;width:100%;background:rgba(255,255,255,.95);backdrop-filter:blur(20px);z-index:1000;border-bottom:1px solid rgba(255,255,255,.2)}
.nav-container{max-width:1400px;margin:0 auto;padding:1rem 2rem;display:flex;justify-content:space-between;align-items:center}
.logo{display:flex;align-items:center;gap:12px;font-size:28px;font-weight:800;background:var(--gradient-1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-decoration:none;font-family:'Playfair Display',serif}
.nav-links{display:flex;list-style:none;gap:2.5rem;align-items:center;margin:0;padding:0}
.nav-links a{text-decoration:none;color:var(--dark);font-weight:600;position:relative;padding:.5rem 0}
.nav-actions{display:flex;align-items:center;gap:1rem}
.nav-icon{position:relative;padding:12px;background:none;border:none;cursor:pointer;border-radius:12px;color:var(--dark);font-size:18px}
.nav-icon:hover{background:var(--light-gray)}
.cart-badge{position:absolute;top:-8px;right:-8px;background:var(--gradient-2);color:#fff;border-radius:50%;width:22px;height:22px;font-size:12px;display:flex;align-items:center;justify-content:center;font-weight:700}
.mobile-menu-btn{display:none;flex-direction:column;justify-content:space-around;width:30px;height:30px;background:transparent;border:none;cursor:pointer;padding:0;z-index:1001}
.mobile-menu-btn span{width:100%;height:3px;background:var(--dark);border-radius:2px;transition:all .3s cubic-bezier(0.4,0,0.2,1);transform-origin:center}
.mobile-menu-btn.active span:nth-child(1){transform:rotate(45deg) translate(8px,8px)}
.mobile-menu-btn.active span:nth-child(2){opacity:0;transform:scale(0)}
.mobile-menu-btn.active span:nth-child(3){transform:rotate(-45deg) translate(8px,-8px)}
.mobile-menu{position:fixed;top:0;left:0;width:100%;height:100vh;background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(249,250,251,.95));backdrop-filter:blur(20px);z-index:999;transform:translateX(-100%);transition:transform .4s;padding-top:100px}
.mobile-menu.active{transform:translateX(0)}
.mobile-menu-links{display:flex;flex-direction:column;padding:2rem;gap:1rem}
.mobile-menu-links a{text-decoration:none;color:var(--dark);font-size:24px;font-weight:600;padding:1rem 0;border-bottom:1px solid rgba(0,0,0,.1);transition:all .3s ease;transform:translateX(-50px);opacity:0}
.mobile-menu.active .mobile-menu-links a{transform:translateX(0);opacity:1}
.mobile-menu-links a:nth-child(1){transition-delay:.1s}
.mobile-menu-links a:nth-child(2){transition-delay:.2s}
.mobile-menu-links a:nth-child(3){transition-delay:.3s}
.mobile-menu-links a:nth-child(4){transition-delay:.4s}
.mobile-menu-links a:nth-child(5){transition-delay:.5s}
.mobile-menu-links a:hover{color:var(--primary);transform:translateX(10px)}
.footer{background:var(--dark);color:#fff;padding:4rem 2rem 2rem;margin-top:4rem}
.footer-content{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:3rem}
.footer-section h3{margin-bottom:1.5rem;background:var(--gradient-1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-size:1.3rem;font-weight:700}
.footer-section a{color:#ccc;text-decoration:none;display:block;padding:.3rem 0}
.footer-bottom{text-align:center;margin-top:3rem;padding-top:2rem;border-top:1px solid #333;color:#999}
/* Improved responsive menu - prevent line breaking */
.nav-container {
    flex-wrap: nowrap !important;
    min-width: 0;
}

.nav-links {
    flex-shrink: 0;
    display: flex !important;
    align-items: center;
    min-width: 0;
}

/* Modal styles */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    backdrop-filter: blur(10px);
}

.modal.active {
        display: flex !important;
    animation: fadeInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-content {
    background: white;
    border-radius: 24px;
    padding: 3rem;
    max-width: 900px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    animation: fadeInUp 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.modal-close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background: var(--light-gray);
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    color: var(--dark);
}

.modal-close:hover {
    background: var(--secondary);
    color: white;
    transform: scale(1.1);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.nav-actions {
    flex-shrink: 0;
}

@media(max-width: 1200px) {
    .nav-links {
        gap: 1.5rem;
    }
    
    .nav-links a {
        font-size: 0.95rem;
    }
}

@media(max-width: 1024px) {
    .nav-links {
        gap: 1.2rem;
    }
    
    .nav-links a {
        font-size: 0.9rem;
    }
}

@media(max-width: 980px) {
    .nav-links {
        display: none;
    }
    
    .mobile-menu-btn {
        display: flex;
    }
}