/* Base Styles */
*{ margin:0; padding:0; box-sizing:border-box; font-family:'Poppins',sans-serif; scroll-behavior:smooth;}
body{ background: linear-gradient(135deg,#d0f0fd,#ffffff); display:flex; flex-direction:column; min-height:100vh; }

/* Navigation Bar */
nav{ width:100%; background:#111; color:#fff; padding:12px 30px; position:sticky; top:0; z-index:1000; display:flex; justify-content:space-between; align-items:center; box-shadow:0 2px 8px rgba(0,0,0,0.3); transition:0.3s; }
nav:hover{ box-shadow:0 4px 14px rgba(0,0,0,0.5);}
nav .logo{ display:flex; align-items:center; gap:10px;}
nav .logo img{ height:40px; width:50px; border-radius:8px; object-fit:cover; transition:0.3s;}
nav .logo img:hover{ transform:rotate(-5deg) scale(1.05);}
nav h2{ font-size:24px; font-weight:700; letter-spacing:1.2px; }
nav .menu{ display:flex; gap:18px; align-items:center; }
nav .menu a{ color:#fff; text-decoration:none; font-weight:600; transition:0.3s; padding:6px 12px; border-radius:6px; }
nav .menu a:hover{ background:#00c0ff; color:#111; transform:scale(1.05);}
nav button{ background:#00c0ff; border:none; padding:10px 20px; border-radius:10px; cursor:pointer; font-size:15px; font-weight:700; transition:0.3s; box-shadow:0 2px 8px rgba(0,0,0,0.3); }
nav button:hover{ background:#00a0d0; transform:scale(1.05); }

/* Hero Section */
.hero{ background: linear-gradient(135deg,#87cefa,#ffffff); padding:80px 20px; text-align:center; position:relative; overflow:hidden; }
.hero h1{ font-size:48px; font-weight:700; color:#111; margin-bottom:20px; animation:fadeInDown 1s ease forwards; }
.hero p{ font-size:20px; color:#333; margin-bottom:30px; animation:fadeInUp 1s ease forwards; }
.hero .cta-btn{ background:#111; color:#00c0ff; border:none; padding:15px 35px; font-size:18px; font-weight:700; border-radius:12px; cursor:pointer; transition:0.3s; animation:fadeIn 1s ease forwards; }
.hero .cta-btn:hover{ transform:scale(1.05); background:#333; color:#00a0d0; }

/* Product Grid */
.products{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:25px; padding:40px; flex:1; }

/* Product Card */
.card{ background:#fff; border-radius:15px; overflow:hidden; text-align:center; box-shadow:0 4px 12px rgba(0,0,0,0.15); transition:0.4s ease, transform 0.4s ease, box-shadow 0.4s ease; position:relative; }
.card:hover{ transform:translateY(-10px) scale(1.05); box-shadow:0 12px 30px rgba(0,0,0,0.25); }
.card img{ width:100%; height:240px; object-fit:cover; transition:0.4s; }
.card img:hover{ transform:scale(1.1);}
.card h3{ font-size:20px; font-weight:700; margin:12px 0 6px; color:#111;}
.price{ font-size:18px; font-weight:600; margin-bottom:12px; color:#00c0ff; }
.btn{ width:48%; padding:10px 0; border:none; cursor:pointer; border-radius:10px; margin:4px 0; font-weight:700; transition:0.3s; display: inline-block; } 
.add-btn{ background:#111; color:#ffffff; }
.buy-btn{ background:#FFC107; color:#000000; }
.add-btn:hover{ background:#333; color:#00a0d0; transform:scale(1.1); }
.buy-btn:hover{ background:#00a0d0; transform:scale(1.1); }

/* Cart Panel (Needs Mobile Fix) */
.cart-panel{ position:fixed; right:-400px; top:0; width:360px; height:100%; background:#f0f8ff; box-shadow:-4px 0 15px rgba(0,0,0,0.25); padding:25px; transition:right 0.4s ease; display:flex; flex-direction:column; z-index:1001; border-radius:15px 0 0 15px; }
.cart-panel.active{ right:0; }
.cart-panel .close-cart{ background:#111; color:#00c0ff; border:none; padding:8px 12px; border-radius:8px; cursor:pointer; font-weight:700; margin-bottom:12px; transition:0.3s; }
.cart-panel .close-cart:hover{ background:#333; color:#00a0d0; transform:scale(1.05);}
.cart-item{ background:#fff; padding:12px; border-radius:12px; margin-bottom:12px; display:flex; justify-content:space-between; align-items:center; transition:0.3s; box-shadow:0 2px 6px rgba(0,0,0,0.1); }
.cart-item:hover{ box-shadow:0 6px 18px rgba(0,0,0,0.2); }
.cart-item span.name{ flex:1; margin-right:5px; }
.quantity-controls{ display:flex; align-items:center; gap:6px; }
.quantity-controls button{ padding:3px 8px; border:none; border-radius:6px; cursor:pointer; font-weight:700; background:#00c0ff; color:#fff; transition:0.2s; }
.quantity-controls button:hover{ background:#00a0d0; transform:scale(1.1);}
.checkout-btn{ background:#00c0ff; color:#fff; width:100%; padding:12px; border:none; margin-top:10px; font-size:16px; font-weight:700; cursor:pointer; border-radius:10px; transition:0.3s; }
.checkout-btn:hover{ background:#00a0d0; transform:scale(1.05); }

/* Checkout Modal */
.modal{ display:none; position:fixed; inset:0; background:rgba(0,0,0,0.6); justify-content:center; align-items:center; z-index:1002; }
.modal-content{ background:#fff; padding:30px; width:90%; max-width:420px; border-radius:15px; transform:scale(0.8); opacity:0; transition:0.3s ease; box-shadow:0 8px 30px rgba(0,0,0,0.3); }
.modal.show .modal-content{ transform:scale(1); opacity:1;}
input{ width:100%; padding:12px; margin-bottom:12px; border:1px solid #ddd; border-radius:10px; transition:0.3s; }
input:focus{ border-color:#00c0ff; outline:none; }

/* Toast Notification */
#toast{ position:fixed; bottom:20px; left:50%; transform:translateX(-50%) translateY(20px); background:#111; color:#fff; padding:14px 22px; border-radius:12px; opacity:0; transition:0.4s ease; }
#toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* Footer */
.site-footer{
  background:#0f172a;
  color:#cbd5f5;
  padding:60px 20px 20px;
}

.footer-container{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:30px;
}

.footer-box h3,
.footer-box h4{
  color:#fff;
  margin-bottom:12px;
}

.footer-box p{
  font-size:14px;
  line-height:1.7;
}

.site-footer .social-icons{
  display:flex;
  gap:12px;
}

.site-footer .social-icons img{
  width:32px;
  transition:.3s;
}

.site-footer .social-icons img:hover{
  transform:scale(1.15);
}

.payment-icons{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.payment-icons img{
  height:32px;
  background:#fff;
  padding:4px 6px;
  border-radius:6px;
}

.footer-bottom{
  text-align:center;
  margin-top:40px;
  padding-top:15px;
  border-top:1px solid rgba(255,255,255,.1);
  font-size:13px;
  color:#94a3b8;
}

@media(max-width:600px){
  .site-footer{text-align:center;}
  .social-icons,.payment-icons{justify-content:center;}
}


/* Responsive Adjustments (FIXED for Cart and Navbar) */
@media(max-width:768px){
    /* Navigation Adjustments */
    nav { padding: 10px 15px; }
    nav .logo img { height:30px; width:30px; }
    nav h2 { font-size:18px; }
    nav .menu a { font-size:14px; padding:4px 8px; } 
    nav button { padding:8px 15px; font-size:13px; }

    /* Product Grid Adjustment */
  @media(max-width:768px){
  .products{ 
    grid-template-columns:repeat(2,1fr); 
    gap:15px;
    padding:15px; 
  }

  .card img{
    height:180px;
  }

  .card h3{
    font-size:15px;
  }

  .price{
    font-size:14px;
  }

  .card .btn{
    width:100%;
    font-size:13px;
    padding:8px 0;
  }
}

    
    /* Product Card specific adjustment to ensure full width */
    .card {
        max-width: 100%; 
        margin: 0 auto; 
    }
    
    /* FIX: Button Layout Adjustment for mobile - Stacked */
    .card .btn {
        width: 90%; 
        display: block; 
        margin: 8px auto; 
    }

    /* FIX: Cart Panel Responsive Adjustments for Mobile */
    .cart-panel{ 
        width: 90%; 
        max-width: none; 
        right: -90%; 
    }
    .cart-panel.active{ right: 0; }
    
    /* Adjustments for better cart item layout on mobile */
    .cart-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .cart-item span.name {
        margin-right: 0;
        margin-bottom: 4px; 
        font-weight: 600;
    }
    .quantity-controls {
        width: 100%;
        justify-content: space-between;
    }
    .cart-item > span:last-child { 
        align-self: flex-end; 
        font-weight: 700;
        color: #111;
    }
}

@media(max-width:480px){
    /* FIX: Adjust cart panel to take full width on very small screens */
    .cart-panel {
        width: 100%;
        right: -100%;
        border-radius: 0; 
    }
    .cart-panel.active {
        right: 0;
    }
    
    .hero h1{ font-size:32px; }
    .hero p{ font-size:16px; }
    .hero .cta-btn{ font-size:16px; padding:12px 25px; }
    
    /* FIX: Hide menu links (including Facebook) on very small screens to ensure logo and cart fit */
    nav .menu {
        display: none;
    }
}


/* Keyframe Animations */
@keyframes fadeInDown{ 0%{opacity:0; transform:translateY(-30px);} 100%{opacity:1; transform:translateY(0);} }
@keyframes fadeInUp{ 0%{opacity:0; transform:translateY(30px);} 100%{opacity:1; transform:translateY(0);} }
@keyframes fadeIn{ 0%{opacity:0;} 100%{opacity:1;} } 
.img-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.85);
  display:flex;
  justify-content:center;
  align-items:center;
  opacity:0;
  pointer-events:none;
  transition:.3s ease;
  z-index:2000;
}

.img-modal.show{
  opacity:1;
  pointer-events:auto;
}

.img-modal img{
  max-width:90%;
  max-height:90%;
  border-radius:14px;
  animation:zoomIn .3s ease;
}

@keyframes zoomIn{
  from{transform:scale(.7);}
  to{transform:scale(1);}
}
.close-img{
  position:absolute;
  top:20px;
  right:20px;
  background:rgba(0,0,0,0.6);
  color:#fff;
  border:none;
  font-size:30px;
  font-weight:700;
  width:44px;
  height:44px;
  border-radius:50%;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.3s;
  z-index:2100;
}

.close-img:hover{
  background:#ff4d4d;
  transform:scale(1.1);
}
/* Category Filter */
.category-filter{
  display:flex;
  justify-content:center;
  margin:30px 0;
}

.category-filter select{
  padding:12px 18px;
  min-width:220px;
  border-radius:14px;
  border:2px solid #00c0ff;
  background:#fff;
  font-size:15px;
  font-weight:600;
  color:#111;
  cursor:pointer;
  transition:.3s ease;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
}

.category-filter select:hover{
  background:#f0fbff;
  transform:scale(1.05);
}

.category-filter select:focus{
  outline:none;
  border-color:#0096cc;
  box-shadow:0 0 0 3px rgba(0,192,255,.3);
}

@media(max-width:768px){
  .category-filter select{
    width:90%;
    font-size:14px;
  }
}
/* FIX: Single product full width issue */
.products{
  max-width:1200px;
  margin:0 auto;
}

/* When only one product, keep card normal size */
.products .card{
  max-width:320px;
  margin:0 auto;
}
/* Floating WhatsApp Button */
.whatsapp-float{
  position:fixed;
  bottom:25px;
  right:25px;
  width:60px;
  height:60px;
  background:#25D366;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 20px rgba(0,0,0,.3);
  z-index:3000;
  transition:.3s ease;
}

.whatsapp-float img{
  width:34px;
  height:34px;
}

.whatsapp-float:hover{
  transform:scale(1.12);
  box-shadow:0 12px 30px rgba(0,0,0,.4);
}

/* Mobile adjust */
@media(max-width:480px){
  .whatsapp-float{
    width:52px;
    height:52px;
    bottom:18px;
    right:18px;
  }

  .whatsapp-float img{
    width:30px;
    height:30px;
  }
}