/* Reset */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:"Segoe UI", Arial, sans-serif; background:#f9f9fb; color:#333; display:flex; flex-direction:column; min-height:100vh; }

/* HEADER */
header {
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 24px; background:#fff; border-bottom:1px solid #e5e5e5;
  position:sticky; top:0; z-index:1000; box-shadow:0 2px 8px rgba(0,0,0,0.06);
}

/* Premium Menu */
.menu-dropdown { position:relative; }
.menu-btn { font-size:22px; color:#333; cursor:pointer; padding:6px 10px; border-radius:50%; transition:0.3s; }
.menu-btn:hover { background:#f1f1f5; color:#4B004F; }
.dropdown-content {
  display:none; position:absolute; top:110%; left:0; min-width:180px; background:#fff;
  border-radius:10px; box-shadow:0 4px 12px rgba(0,0,0,0.1); overflow:hidden; animation:fadeIn 0.2s ease; z-index:1001;
}
.dropdown-content a { display:block; padding:12px 16px; color:#333; text-decoration:none; transition:0.2s; border-bottom:1px solid #f0f0f0; }
.dropdown-content a:last-child { border-bottom:none; }
.dropdown-content a.submenu-item { padding-left:28px; font-size:0.9em; color:#666; }
.dropdown-content a:hover { background:#4B004F; color:#fff; }
.menu-dropdown:hover .dropdown-content { display:block; }
@keyframes fadeIn { from {opacity:0; transform:translateY(-5px);} to {opacity:1; transform:translateY(0);} }

/* Logo */
.logo img { height:40px; max-width:150px; }

/* Cart */
.cart { position:relative; font-size:22px; color:#333; cursor:pointer; transition:0.3s; text-decoration:none; }
.cart:hover { color:#4B004F; }
.cart span {
  position:absolute; top:-6px; right:-10px; background:#e63946; color:#fff; font-size:12px;
  font-weight:bold; padding:2px 6px; border-radius:50%;
}

/* Cart animation */
.cart.animate { animation: cart-bounce 0.8s ease; }
@keyframes cart-bounce {
  0% { transform: scale(1); } 20% { transform: scale(1.2); } 40% { transform: scale(0.9); }
  60% { transform: scale(1.1); } 80% { transform: scale(0.95); } 100% { transform: scale(1); }
}

/* BODY */
.container { max-width:1200px; margin:30px auto; padding:0 20px; flex:1; }
h2.section-title { font-size:24px; margin-bottom:20px; color:#4B004F; border-left:5px solid #4B004F; padding-left:12px; }
.product-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; }

.product-card { background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 4px 10px rgba(0,0,0,0.05); transition:0.3s; cursor:pointer; }
.product-card:hover { transform:translateY(-6px); box-shadow:0 8px 20px rgba(0,0,0,0.1); }
.product-card img { width:100%; height:220px; object-fit:cover; }
.product-info { padding:15px; text-align:center; }
.product-info h3 { font-size:18px; margin-bottom:8px; color:#333; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.price { font-size:16px; font-weight:700; color:#4B004F; margin-bottom:12px; }
.price .original-price { text-decoration: line-through; color:#999; font-size:14px; margin-left:8px; font-weight:normal; }
.btn { display:inline-block; background:#4B004F; color:#fff; padding:8px 18px; border-radius:25px; font-size:14px; text-decoration:none; border:none; cursor:pointer; transition:0.3s; }
.btn:hover { background:#38003c; }

.no-products { text-align:center; grid-column:1/-1; padding:2rem; font-size:1.2rem; color:#666; }

/* FOOTER */
footer { background:#222; color:#ccc; padding:40px 20px 20px; margin-top:40px; }
.footer-container { max-width:1200px; margin:auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:30px; }
.footer-section h4 { margin-bottom:15px; color:#fff; font-size:16px; }
.footer-section ul { list-style:none; }
.footer-section ul li { margin-bottom:10px; }
.footer-section ul li a { color:#bbb; text-decoration:none; transition:0.3s; }
.footer-section ul li a:hover { color:#fff; }
.footer-bottom { text-align:center; margin-top:30px; font-size:14px; border-top:1px solid #444; padding-top:15px; color:#aaa; }

/* Notification */
.notification { position:fixed; top:20px; right:20px; padding:12px 20px; border-radius:4px; color:#fff; z-index:1000; box-shadow:0 4px 12px rgba(0,0,0,0.15); font-weight:500; animation:fadeIn 0.3s ease; }
.notification.success { background:#27ae60; }
.notification.error { background:#e74c3c; }

/* Responsive tweaks */
@media(max-width:768px){ .logo img { height:35px; } .product-card img { height:180px; } .container { margin:20px auto; padding:0 15px; } }
@media(max-width:480px){ .product-grid { grid-template-columns:repeat(2,1fr); gap:15px; } header { padding:12px 15px; } .menu-btn { font-size:20px; padding:5px 8px; } .cart { font-size:20px; } }
@media(max-width:360px){ .product-grid { grid-template-columns:1fr; } }