*{margin:0;padding:0;box-sizing:border-box;font-family:Inter}
body{background:#f9fafb;color:#111;line-height:1.5}
a{color:inherit;text-decoration:none}
button{cursor:pointer;}

/* Navbar */
header{position:sticky;top:0;z-index:300;background:#fff;padding:1rem 2rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;box-shadow:0 2px 8px rgba(0,0,0,.08);}
.logo{font-size:2.5rem;font-weight:700;color:#3b82f6;text-decoration:none;border:none;}
nav{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;position:relative}
nav input{padding:.5rem 1rem;border:1px solid #ddd;border-radius:6px;width:220px}
nav button{margin-left:1rem;padding:.5rem 1rem;border:none;background:#3b82f6;color:#fff;border-radius:6px;transition:.3s}
nav button:hover{background:#2563eb}

/* Hero */
.hero{background:url('https://plus.unsplash.com/premium_photo-1683758344058-60a1506db480?w=1200&auto=format&fit=crop&q=60') center/cover no-repeat;color:#fff;text-align:center;padding:6rem 2rem;border-radius:12px;margin:2rem 2rem 3rem 2rem;position:relative}
.hero::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.35);border-radius:12px}
.hero-content{position:relative;z-index:1;max-width:800px;margin:0 auto}
.hero h1{font-size:3rem;font-weight:700;margin-bottom:1rem}
.hero p{font-size:1.2rem;margin-bottom:2rem}
.hero button{background:#3b82f6;color:#fff;padding:.8rem 1.5rem;border:none;border-radius:6px;font-weight:600;transition:.3s}
.hero button:hover{background:#2563eb}

/* Products Grid */
.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;padding:0 2rem;margin-bottom:2rem}

/* Jumia-style Product Card */
.card{
  background:#fff;
  border-radius:8px;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
  position:relative;
  overflow:hidden;
  cursor:pointer;
  transition:.3s;
}
.card:hover{transform:translateY(-5px);}
.card img{width:100%;height:200px;object-fit:cover;transition:.3s}
.card img:hover{transform:scale(1.05)}
.card h4{font-size:0.95rem;margin:0.5rem;padding:0 0.3rem;font-weight:600;min-height:40px}
.card .price{color:#3b82f6;font-weight:700;font-size:1rem;margin:0.2rem 0;padding:0 0.3rem}

/* Badges */
.card .label{
  position:absolute;
  top:10px;
  left:10px;
  background:#3b82f6;color:#fff;padding:3px 6px;font-size:.7rem;font-weight:600;border-radius:4px;
}

/* Wishlist */
.card .wishlist{
  position:absolute;
  top:10px;
  right:10px;
  font-size:1.3rem;
  color:#3b82f6;
  background:#fff;
  border-radius:50%;
  padding:5px;
  cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
  transition:.3s;
}
.card .wishlist:hover{transform:scale(1.2);}

/* Hover overlay Jumia-style */
.card .overlay{
  position:absolute;top:0;left:0;width:100%;height:100%;
  background:rgba(0,0,0,.55);
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  opacity:0;transition:.3s;
  gap:.5rem;
}
.card:hover .overlay{opacity:1;}
.overlay button{
  width:80%;
  padding:.5rem 0;
  border:none;
  border-radius:6px;
  background:#3b82f6;
  color:#fff;
  font-weight:600;
  transition:.2s;
}
.overlay button:hover{background:#2563eb;}

/* Quick View Panel */
#quickView{position:fixed;top:0;right:0;width:360px;height:100%;background:#fff;box-shadow:-6px 0 20px rgba(0,0,0,.1);padding:1rem;transform:translateX(100%);transition:.4s;overflow:auto;z-index:200;}
#quickView.show{transform:translateX(0);}
#quickView img{width:100%;border-radius:8px;margin-bottom:.5rem;}
#quickView button{width:100%;margin-top:.5rem;padding:.5rem 0;border:none;border-radius:6px;background:#3b82f6;color:#fff;font-weight:600;transition:.2s;}
#quickView button:hover{background:#2563eb;}

/* Mini Add Animation */
.add-animation{
  position:absolute;top:10px;right:10px;background:#3b82f6;color:#fff;padding:5px 10px;border-radius:6px;font-size:.8rem;
  animation:fadeOut 1s forwards;
}
@keyframes fadeOut{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-20px)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}

/* Modern Footer */
footer{background:#111827;color:#fff;padding:0;margin-top:2rem;}
footer .footer-top{background:#1f2937;padding:3rem 0;}
footer .footer-bottom{background:#111827;padding:1.5rem 0;border-top:1px solid #374151;}
footer .container{max-width:1200px;margin:0 auto;padding:0 1rem;}
footer h4{margin-bottom:1rem;color:#fff;font-size:1.125rem;font-weight:600;}
footer a{color:#9ca3af;text-decoration:none;transition:color 0.2s ease;line-height:1.8;}
footer a:hover{color:#2563eb;}
.footer-section{flex:1;min-width:200px;}
.footer-section p{color:#9ca3af;line-height:1.6;margin-bottom:1rem;}
.newsletter{margin-top:1rem;}
.socials{display:flex;gap:1rem;margin-top:1rem;}
.socials a{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:#374151;color:#fff;border-radius:50%;text-decoration:none;transition:all 0.2s ease;font-size:1rem;}
.socials a:hover{background:#2563eb;transform:translateY(-2px);}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:2rem;}
.footer-bottom-content{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;}
.footer-bottom-links{display:flex;gap:2rem;flex-wrap:wrap;}
.footer-bottom-links a{color:#9ca3af;font-size:0.875rem;}
.footer-copyright{color:#6b7280;font-size:0.875rem;}
.payment-methods{display:flex;gap:1rem;margin-top:1rem;flex-wrap:wrap;}
.payment-methods img{height:24px;opacity:0.7;transition:opacity 0.2s ease;}
.payment-methods img:hover{opacity:1;}
/* Comprehensive Responsive Design */

/* Large Desktop (1200px and up) */
@media (min-width: 1200px) {
    header{padding:1rem 3rem;}
    .hero{padding:8rem 3rem;margin:2rem 3rem 4rem 3rem;}
    .hero h1{font-size:3.5rem;}
    .hero p{font-size:1.4rem;}
    .products{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));padding:0 3rem;}
    .container{max-width:1400px;margin:0 auto;}
}

/* Desktop (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    header{padding:1rem 2.5rem;}
    .hero{padding:7rem 2.5rem;margin:2rem 2.5rem 3.5rem 2.5rem;}
    .hero h1{font-size:3.2rem;}
    .hero p{font-size:1.3rem;}
    .products{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));padding:0 2.5rem;}
    nav input{width:200px;}
}

/* Laptop (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    header{padding:1rem 2rem;flex-wrap:wrap;}
    nav{width:100%;margin-top:1rem;justify-content:center;}
    nav input{width:250px;}
    .hero{padding:6rem 2rem;margin:2rem 2rem 3rem 2rem;}
    .hero h1{font-size:2.8rem;}
    .hero p{font-size:1.2rem;}
    .products{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));padding:0 2rem;}
    .logo{font-size:1.6rem;}
}

/* Tablet (576px - 767px) */
@media (min-width: 576px) and (max-width: 767px) {
    header{padding:1rem 1.5rem;position:relative;}
    .logo{font-size:1.5rem;}
    nav{display:none;}
    .mobile-menu-toggle{display:flex;}
    .hero{padding:5rem 1.5rem;margin:1.5rem 1.5rem 2.5rem 1.5rem;}
    .hero h1{font-size:2.5rem;}
    .hero p{font-size:1.1rem;}
    .hero button{padding:.6rem 1.2rem;font-size:.9rem;}
    .products{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem;padding:0 1.5rem;}
    .card img{height:160px;}
    .card h4{font-size:.85rem;}
    .card .price{font-size:.9rem;}
}

/* Mobile Large (480px - 575px) */
@media (min-width: 480px) and (max-width: 575px) {
    header{padding:1rem;}
    .logo{font-size:1.4rem;}
    .hero{padding:4rem 1rem;margin:1rem 1rem 2rem 1rem;}
    .hero h1{font-size:2.2rem;}
    .hero p{font-size:1rem;margin-bottom:1.5rem;}
    .hero button{padding:.5rem 1rem;font-size:.85rem;}
    .products{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1rem;padding:0 1rem;}
    .card img{height:140px;}
    .card h4{font-size:.8rem;}
    .card .price{font-size:.85rem;}
    .card .label{font-size:.6rem;padding:2px 4px;}
}

/* Mobile Small (320px - 479px) */
@media (max-width: 479px) {
    header{padding:0.8rem;}
    .logo{font-size:1.2rem;}
    .hero{padding:3rem 0.8rem;margin:0.8rem 0.8rem 1.5rem 0.8rem;border-radius:8px;}
    .hero h1{font-size:1.8rem;line-height:1.2;}
    .hero p{font-size:0.9rem;margin-bottom:1rem;}
    .hero button{padding:.4rem 0.8rem;font-size:.8rem;}
    .products{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:0.8rem;padding:0 0.8rem;}
    .card{border-radius:6px;}
    .card img{height:120px;}
    .card h4{font-size:.75rem;padding:0 0.2rem;}
    .card .price{font-size:.8rem;padding:0 0.2rem;}
    .card .label{font-size:.55rem;padding:2px 3px;}
    .card .wishlist{top:5px;right:5px;}
    .card .wishlist i{font-size:.8rem;}
}

/* Ultra Small Mobile (280px - 319px) */
@media (max-width: 319px) {
    header{padding:0.5rem;}
    .logo{font-size:1rem;}
    .hero{padding:2.5rem 0.5rem;margin:0.5rem 0.5rem 1rem 0.5rem;}
    .hero h1{font-size:1.5rem;}
    .hero p{font-size:0.8rem;}
    .hero button{padding:.3rem 0.6rem;font-size:.75rem;}
    .products{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:0.6rem;padding:0 0.5rem;}
    .card img{height:100px;}
    .card h4{font-size:.7rem;}
    .card .price{font-size:.75rem;}
}

/* Landscape Orientation for Mobile */
@media (max-height: 500px) and (orientation: landscape) {
    .hero{padding:2rem 1rem;margin:1rem;}
    .hero h1{font-size:1.8rem;}
    .hero p{font-size:0.9rem;margin-bottom:1rem;}
    .products{padding:0 1rem;}
    .card img{height:100px;}
}

/* High DPI/Retina Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .card img{image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;}
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .card,.card img,.card:hover,.card img:hover,nav button,.hero button{transition:none;}
    .mobile-nav,.mobile-nav-overlay,.quick-view-modal{transition:none;}
}

/* Print Styles */
@media print {
    header,nav,.mobile-nav,.mobile-nav-overlay,.hero,.footer{display:none;}
    .products{grid-template-columns:repeat(2,1fr);gap:0.5rem;}
    .card{break-inside:avoid;}
}

/* Existing mobile responsive styles */
@media (max-width:768px){.footer-grid{grid-template-columns:1fr;gap:1.5rem;}.footer-bottom-content{flex-direction:column;text-align:center;gap:1rem;}}

/* Quick View Modal */
.quick-view-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.quick-view-modal.active {
  opacity: 1;
  visibility: visible;
}

.quick-view-content {
  background: white;
  border-radius: var(--radius-lg);
  max-width: 800px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

.quick-view-modal.active .quick-view-content {
  transform: scale(1);
}

.quick-view-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: var(--bg-secondary);
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.quick-view-close:hover {
  background: var(--error-color);
  color: white;
}

.quick-view-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  padding: 2rem;
}

.quick-view-image img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.quick-view-details h2 {
  margin-bottom: 1rem;
  color: var(--text-primary);
}

.quick-view-price {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: 1.5rem;
}

.quick-view-actions {
  display: flex;
  gap: 1rem;
}

/* Search Suggestions */
.search-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid var(--border-color);
  border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  max-height: 300px;
  overflow-y: auto;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
}

.search-suggestions.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.suggestion-item {
  display: flex;
  align-items: center;
  padding: 1rem;
  cursor: pointer;
  transition: var(--transition);
  border-bottom: 1px solid var(--border-light);
}

.suggestion-item:last-child {
  border-bottom: none;
}

.suggestion-item:hover {
  background: var(--bg-secondary);
}

.suggestion-image {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  margin-right: 1rem;
}

.suggestion-details {
  flex: 1;
}

.suggestion-name {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

.suggestion-price {
  color: var(--primary-color);
  font-weight: 700;
}

/* Mobile Navigation */
.mobile-nav {
  position: fixed;
  top: 0;
  left: -100%;
  width: 80%;
  max-width: 320px;
  height: 100%;
  background: white;
  box-shadow: 2px 0 10px rgba(0,0,0,0.1);
  transition: left 0.3s ease;
  z-index: 1001;
  overflow-y: auto;
}

.mobile-nav.active {
  left: 0;
}

.mobile-nav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 1000;
}

.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
}

.mobile-menu-toggle span {
  width: 22px;
  height: 2px;
  background: #111827;
  margin: 3px 0;
  transition: all 0.3s ease;
  transform-origin: center;
}

.mobile-menu-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-toggle.active span:nth-child(2) {
  opacity: 0;
  transform: scale(0);
}

.mobile-menu-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile Navigation Content */
.mobile-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
}

.mobile-nav-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #6b7280;
  padding: 0.5rem;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.mobile-nav-close:hover {
  background: #e5e7eb;
  color: #111827;
}

.mobile-nav-user {
  padding: 1rem;
  border-bottom: 1px solid #e5e7eb;
  background: white;
}

.mobile-nav-user-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.mobile-nav-user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #2563eb;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

.mobile-nav-user-details {
  flex: 1;
}

.mobile-nav-user-name {
  font-weight: 600;
  color: #111827;
  margin-bottom: 0.25rem;
}

.mobile-nav-user-email {
  font-size: 0.875rem;
  color: #6b7280;
}

.mobile-nav-menu {
  padding: 0.5rem 0;
}

.mobile-nav-section {
  margin-bottom: 1rem;
}

.mobile-nav-section-title {
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: #f9fafb;
  border-top: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
}

.mobile-nav-link {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  color: #111827;
  text-decoration: none;
  transition: all 0.2s ease;
  border-bottom: 1px solid #f3f4f6;
}

.mobile-nav-link:hover {
  background: #f9fafb;
  color: #2563eb;
}

.mobile-nav-link i {
  width: 20px;
  margin-right: 0.75rem;
  color: #6b7280;
  font-size: 0.875rem;
}

.mobile-nav-link:hover i {
  color: #2563eb;
}

.mobile-nav-link.active {
  background: #eff6ff;
  color: #2563eb;
  border-left: 3px solid #2563eb;
}

.mobile-nav-link.active i {
  color: #2563eb;
}

/* Mobile Bottom Navigation (Jumia Style) */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  border-top: 1px solid #e5e7eb;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
  z-index: 999;
}

.mobile-bottom-nav-items {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0.5rem 0;
}

.mobile-bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #6b7280;
  transition: all 0.2s ease;
  padding: 0.25rem;
  min-width: 60px;
}

.mobile-bottom-nav-item:hover,
.mobile-bottom-nav-item.active {
  color: #2563eb;
}

.mobile-bottom-nav-item i {
  font-size: 1.25rem;
  margin-bottom: 0.25rem;
}

.mobile-bottom-nav-item span {
  font-size: 0.625rem;
  font-weight: 500;
}

.mobile-bottom-nav-item.active span {
  font-weight: 600;
}

/* Mobile Cart Badge */
.mobile-cart-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #ef4444;
  color: white;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.625rem;
  font-weight: 600;
}

@media (max-width: 768px) {
  .mobile-menu-toggle {
    display: flex;
  }
  
  header nav {
    display: none;
  }
  
  .mobile-bottom-nav {
    display: block;
  }
  
  /* Add padding to body to account for bottom nav */
  body {
    padding-bottom: 70px;
  }
}

@media (max-width: 480px) {
  .mobile-bottom-nav-items {
    padding: 0.25rem 0;
  }
  
  .mobile-bottom-nav-item i {
    font-size: 1rem;
  }
  
  .mobile-bottom-nav-item span {
    font-size: 0.5625rem;
  }
}

/* Jumia-Style Mobile Footer */
@media (max-width: 768px) {
  .footer-top {
    display: none;
  }
  
  .footer-bottom {
    background: #f8f9fa;
    padding: 1rem 0;
    border-top: 1px solid #e5e7eb;
  }
  
  .footer-bottom-content {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }
  
  .footer-copyright {
    font-size: 0.75rem;
    color: #6b7280;
  }
  
  .footer-bottom-links {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
  }
  
  .footer-bottom-links a {
    font-size: 0.75rem;
    color: #6b7280;
    text-decoration: none;
    padding: 0.25rem 0.5rem;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    transition: all 0.2s ease;
  }
  
  .footer-bottom-links a:hover {
    background: #2563eb;
    color: white;
    border-color: #2563eb;
  }
  
  .payment-methods {
    justify-content: center;
    margin-top: 1rem;
  }
  
  .payment-methods img {
    height: 20px;
  }
}

/* Mobile Footer Accordion */
@media (max-width: 768px) {
  .mobile-footer-accordion {
    display: block;
  }
  
  .mobile-footer-section {
    border-bottom: 1px solid #e5e7eb;
    background: white;
  }
  
  .mobile-footer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
  }
  
  .mobile-footer-header:hover {
    background: #f9fafb;
  }
  
  .mobile-footer-title {
    font-weight: 600;
    color: #111827;
    font-size: 0.875rem;
  }
  
  .mobile-footer-toggle {
    font-size: 0.875rem;
    color: #6b7280;
    transition: transform 0.2s ease;
  }
  
  .mobile-footer-section.active .mobile-footer-toggle {
    transform: rotate(180deg);
  }
  
  .mobile-footer-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  
  .mobile-footer-section.active .mobile-footer-content {
    max-height: 300px;
  }
  
  .mobile-footer-links {
    padding: 0 1rem 1rem;
  }
  
  .mobile-footer-links a {
    display: block;
    padding: 0.5rem 0;
    color: #6b7280;
    text-decoration: none;
    font-size: 0.875rem;
    border-bottom: 1px solid #f3f4f6;
    transition: color 0.2s ease;
  }
  
  .mobile-footer-links a:hover {
    color: #2563eb;
  }
  
  .mobile-footer-links a:last-child {
    border-bottom: none;
  }
}