:root{
      --primary:#0f172a;
      --accent:#2563eb;
      --text:#0f172a;
      --muted:#64748b;
      --border:#e2e8f0;
      --bg:#ffffff;
    }

    *{margin:0;padding:0;box-sizing:border-box;font-family:Inter,Arial,sans-serif;}

    body{background:#fff;color:var(--text);}

    html{
      scroll-behavior:smooth;
    }

    /* TOP BAR */
    .top-bar{
      background:#0b1220;
      color:#fff;
      text-align:center;
      font-size:.85rem;
      padding:.5rem;
    }

    /* NAVBAR */
    header{
      position:sticky;
      top:0;
      background:#fff;
      border-bottom:1px solid var(--border);
      z-index:100;
    }

    .nav{
      max-width:1280px;
      margin:auto;
      display:flex;
      justify-content:space-between;
      align-items:center;
      padding:0 1.5rem;   /* 👈 remove vertical padding */
      height:70px;        /* 👈 fixed navbar height */
    }

    .logo img{
      height:100%;        /* 👈 takes full navbar height */
      max-height:60px;    /* 👈 safety limit */
      width:auto;
      object-fit:contain;
    }

    .nav-links{
      display:flex;
      align-items:center;
      gap:1.2rem;
    }

    .nav-links a{
      text-decoration:none;
      color:var(--muted);
      font-weight:500;
    }

    .nav-links a:hover{color:var(--accent);}

    .menu-toggle{
      display:none;
      flex-direction:column;
      gap:5px;
      cursor:pointer;
    }

    .menu-toggle span{
      width:26px;
      height:3px;
      background:var(--primary);
      border-radius:3px;
      transition:.3s;
    }

    /* HERO */
    .hero{
      background:linear-gradient(rgba(15,23,42,.9),rgba(15,23,42,.8)),
      url('https://images.unsplash.com/photo-1547082299-de196ea013d6?auto=format&fit=crop&w=1600&q=80');
      background-size:cover;
      background-position:center;
      color:#fff;
      padding:6rem 1.5rem;
    }

    .hero-inner{
      max-width:1280px;
      margin:auto;
    }

    .hero h1{
      font-size:3rem;
      max-width:700px;
    }

    .hero p{margin-top:1rem;color:#cbd5e1;max-width:600px;}

    .hero-btn{
      display:inline-block;
      margin-top:1.5rem;
      background:var(--accent);
      color:#fff;
      padding:1rem 1.5rem;
      border-radius:10px;
      text-decoration:none;
      font-weight:700;
    }

    /* CATEGORIES */
    .cats{
      max-width:1280px;
      margin:2rem auto;
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:1rem;
      padding:0 1.5rem;
    }

    .cat{
      padding:1.2rem;
      border:1px solid var(--border);
      border-radius:14px;
      text-align:center;
      cursor:pointer;
      background:#f8fafc;
      font-weight:600;
      transition:.2s;
    }

    .cat.active{
      background:var(--accent);
      color:#fff;
    }

    /* CONTROLS */
    .controls{
      max-width:1280px;
      margin:1rem auto;
      display:flex;
      gap:1rem;
      padding:0 1.5rem;
    }

    input,select{
      flex:1;
      padding:.9rem;
      border:1px solid var(--border);
      border-radius:10px;
    }

    /* PRODUCTS */
    .grid{
      max-width:1280px;
      margin:auto;
      display:grid;
      grid-template-columns:repeat(auto-fill,280px);
      justify-content:center;
      gap:1.5rem;
      padding:2rem 1.5rem;
    }

    .card{
      border:1px solid var(--border);
      cursor:pointer;
      border-radius:16px;
      overflow:hidden;
      transition:.25s;
      background:#fff;
    }

    .card:hover{
      transform:translateY(-6px);
      box-shadow:0 20px 40px rgba(0,0,0,.08);
    }

    .card img{
      width:100%;
      height:220px;
      object-fit:cover;
    }

    .card-body{padding:1rem;}

    .price-wrap{
      display:flex;
      align-items:center;
      gap:.6rem;
      margin:.5rem 0;
      flex-wrap:wrap;
    }

    .old-price{
      color:#94a3b8;
      text-decoration:line-through;
      font-size:.95rem;
      font-weight:600;
    }

    .price{
      font-weight:800;
      color:#e11d48;
      font-size:1.05rem;
    }

    .btn{
      display:block;
      background:#25D366;
      color:#fff;
      text-align:center;
      padding:.9rem;
      border-radius:10px;
      text-decoration:none;
      font-weight:700;
    }

    @media (max-width: 800px){
      .menu-toggle{display:flex;}

      .nav-links{
        position:absolute;
        top:100%;
        left:0;
        right:0;
        background:#fff;
        flex-direction:column;
        align-items:flex-start;
        padding:1rem 1.5rem;
        border-bottom:1px solid var(--border);
        box-shadow:0 10px 25px rgba(0,0,0,.08);
        display:none;
      }

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

      .hero{padding:4rem 1.25rem;}
      .hero h1{font-size:2.25rem;}

      .cats{grid-template-columns:repeat(2,1fr);}
      .controls{flex-direction:column;}
      .grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
    }

    /* PRODUCT MODAL */
    .modal{
      position:fixed;
      inset:0;
      background:rgba(0,0,0,.75);
      display:none;
      align-items:center;
      justify-content:center;
      padding:1rem;
      z-index:1000;
    }

    .modal.active{display:flex;}

    .modal-content{
      background:#fff;
      width:min(100%,1000px);
      border-radius:20px;
      overflow:hidden;
      display:grid;
      grid-template-columns:1.1fr .9fr;
      max-height:90vh;
    }

    #modalPrice{
      display:flex;
      align-items:center;
      gap:.8rem;
      margin:1rem 0;
      flex-wrap:wrap;
    }

    #modalPrice .old-price{
      color:#94a3b8;
      text-decoration:line-through;
      font-size:1rem;
      font-weight:600;
    }

    #modalPrice .new-price{
      color:#e11d48;
      font-size:1.5rem;
      font-weight:800;
    }

    .modal-actions{
      display:flex;
      gap:1rem;
      margin-top:1rem;
    }

    .modal-actions .cart-btn,
    .modal-actions .btn{
    flex:1;
    }

    .gallery{padding:1.5rem;}
    .main-image{width:100%;height:420px;object-fit:cover;border-radius:16px;border:1px solid var(--border);}
    .thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:.75rem;margin-top:1rem;}
    .thumb{width:100%;height:72px;object-fit:cover;border:2px solid transparent;border-radius:10px;cursor:pointer;}
    .thumb.active{border-color:var(--accent);}
    .details{padding:2rem;border-left:1px solid var(--border);overflow-y:auto;}
    .details h2{font-size:2rem;margin-bottom:.5rem;}
    .details .category-label{color:var(--accent);font-weight:700;margin-bottom:1rem;display:block;}
    .details .description{color:var(--muted);line-height:1.7;margin:1rem 0 1.5rem;}
    .close-modal{position:absolute;top:1rem;right:1rem;width:42px;height:42px;border:none;border-radius:50%;background:#fff;cursor:pointer;font-size:1.4rem;}


  /* CART ICON */
.cart-icon{
  position:fixed;
  bottom:20px;
  right:20px;
  background:#0f172a;
  color:#fff;
  padding:14px 18px;
  border-radius:50px;
  cursor:pointer;
  z-index:3000;
  font-weight:700;
  display:flex;
  align-items:center;
  gap:.5rem;
  box-shadow:0 10px 25px rgba(0,0,0,.15);
  transition:.25s;
}

.cart-icon:hover{
  transform:translateY(-2px);
}

/* FLOATING BADGE */
#cartCount{
  background:#ef4444;
  min-width:22px;
  height:22px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.8rem;
  padding:0 6px;
}

/* OVERLAY */
.cart-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(4px);
  opacity:0;
  pointer-events:none;
  transition:.3s;
  z-index:3500;
}

.cart-overlay.active{
  opacity:1;
  pointer-events:auto;
}

/* CART SIDEBAR */
.cart{
  position:fixed;
  top:0;
  right:-420px;
  width:380px;
  max-width:100%;
  height:100vh;
  background:#fff;
  border-left:1px solid #e2e8f0;
  box-shadow:-10px 0 40px rgba(0,0,0,0.15);
  transition:right .35s ease;
  z-index:4000;
  display:flex;
  flex-direction:column;
}

.cart.active{
  right:0;
}

.cart-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1rem;
  border-bottom:1px solid #e2e8f0;
}

.cart-header h2{
  font-size:1.3rem;
}

.cart-header button{
  border:none;
  background:none;
  font-size:1.8rem;
  cursor:pointer;
}

#cartItems{
  flex:1;
  overflow:auto;
  padding:1rem;
}

.cart-item{
  display:flex;
  gap:1rem;
  margin-bottom:1rem;
  border-bottom:1px solid #eee;
  padding-bottom:1rem;
}

.cart-item img{
  width:75px;
  height:75px;
  object-fit:cover;
  border-radius:10px;
  border:1px solid #e2e8f0;
}

.cart-info{
  flex:1;
}

.cart-info strong{
  display:block;
  margin-bottom:.3rem;
}

.qty-controls{
  display:flex;
  align-items:center;
  gap:.6rem;
  margin-top:.5rem;
}

.qty-controls button{
  width:28px;
  height:28px;
  border:none;
  border-radius:6px;
  background:#0f172a;
  color:#fff;
  cursor:pointer;
  font-weight:700;
}

.remove-btn{
  border:none;
  background:#ef4444;
  color:#fff;
  width:28px;
  height:28px;
  border-radius:6px;
  cursor:pointer;
}

.cart-footer{
  padding:1rem;
  border-top:1px solid #e2e8f0;
  background:#fff;
}

.cart-total{
  font-size:1.2rem;
  font-weight:800;
  margin-bottom:1rem;
}

.cart-btn{
  width:100%;
  border:none;
  background:#0f172a;
  color:#fff;
  padding:.9rem;
  border-radius:10px;
  font-weight:700;
  cursor:pointer;
  transition:.25s;
}

.cart-btn:hover{
  background:#2563eb;
  transform:translateY(-2px);
}

@media(max-width:576px){
  .cart{
    width:100%;
  }
}

    /* FOOTER */
    .footer{
      background:#0b1220;
      color:#cbd5e1;
      margin-top:4rem;
      padding:4rem 1.5rem 1.5rem;
    }

    .footer-container{max-width:1280px;margin:auto;}
    .footer-grid{
      display:grid;
      grid-template-columns:2fr 1fr 1fr 1.2fr;
      gap:3rem;
      margin-bottom:3rem;
    }

    .footer-logo{
      color:#fff;
      font-size:2rem;
      margin-bottom:1rem;
    }

    .footer-text{line-height:1.8;color:#94a3b8;max-width:320px;}
    .footer h4{color:#fff;margin-bottom:1rem;font-size:1.1rem;}

    .footer-links,
    .footer-contact{
      list-style:none;
      display:flex;
      flex-direction:column;
      gap:.8rem;
    }

    .footer-links a{
      color:#94a3b8;
      text-decoration:none;
      transition:.2s;
    }

    .footer-links a:hover,
    .social-links a:hover{color:#fff;}

    .footer-contact li{color:#94a3b8;}

    .footer-bottom{
      border-top:1px solid rgba(255,255,255,.1);
      padding-top:1.5rem;
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:1rem;
    }

    .social-links{
      display:flex;
      gap:1rem;
      flex-wrap:wrap;
    }

    .social-links a{
      color:#94a3b8;
      text-decoration:none;
      transition:.2s;
    }

    @media (max-width: 768px){
      .modal-content{grid-template-columns:1fr;max-height:95vh;overflow-y:auto;}
      .details{border-left:none;border-top:1px solid var(--border);}
      .main-image{height:300px;}
      .thumbs{grid-template-columns:repeat(4,1fr);}
    }

    @media (max-width: 576px){
      .nav{padding:1rem;}
      .logo{font-size:1.4rem;}
      .hero h1{font-size:1.8rem;}
      .hero p{font-size:.95rem;}
      .hero-btn{padding:.9rem 1.25rem;}
      .cats{grid-template-columns:1fr; padding:0 1rem;}
      .controls{padding:0 1rem;}
      .grid{
        grid-template-columns:1fr;
        padding:2rem 1rem;
        gap:1.25rem;
      }

      .footer-grid{grid-template-columns:1fr;gap:2rem;}
      .footer-bottom{flex-direction:column;text-align:center;}
      .card img{height:200px;}
    }