* { margin:0; padding:0; box-sizing:border-box; font-family:'Segoe UI', sans-serif; }
    body { background:#0d0d0d; color:#f5f5f5; }

    /* Navbar */
    header {
      background:#111;
      border-bottom:1px solid #ffb400;
      padding:15px 20px;
      display:flex; justify-content:space-between; align-items:center;
      position:sticky; top:0; z-index:1000;
    }
    .logo { display:flex; align-items:center; gap:10px; }
    .logo img { height:50px; }
    .logo span { font-size:1.3rem; font-weight:bold; color:#ffb400; }
    nav a { margin-left:20px; color:#fff; text-decoration:none; }
    nav a:hover { color:#ffb400; }

    /* Page Layout */
    .product-page {
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:30px;
      max-width:1200px;
      margin:30px auto;
      padding:0 20px;
    }

    /* Left - Images */
    .image-gallery {
      display:flex;
      flex-direction:column;
      gap:15px;
    }
    .main-image {
      width:100%;
      border:1px solid #333;
      border-radius:10px;
      background:#111;
      padding:10px;
    }
    .main-image img {
      width:100%; border-radius:8px; object-fit:contain;
    }
    .thumbnails {
      display:flex;
      gap:10px;
      justify-content:center;
    }
    .thumbnails img {
      width:60px; height:60px;
      border:2px solid transparent;
      border-radius:8px;
      cursor:pointer;
      object-fit:cover;
      transition:0.3s;
    }
    .thumbnails img:hover,
    .thumbnails img.active {
      border:2px solid #ffb400;
    }
.features {
    margin: 15px 0;
    padding-left: 20px;
}

    .features li {
        margin: 6px 0;
        font-size: 0.95rem;
        color: #ddd;
    }

    /* Right - Details */
    .details h1 {
      font-size:1.8rem; margin-bottom:8px; color:#ffb400;
    }
    .rating {
      font-size:0.9rem; color:#ccc; margin-bottom:15px;
    }
    .rating span { color:#ffcc33; }

    .features { margin:15px 0; }
    .features li { margin:6px 0; font-size:0.95rem; }

    .price {
      font-size:1.5rem; font-weight:bold; color:#ffcc33;
      margin:15px 0;
    }
    .old-price {
      text-decoration:line-through; color:#777; font-size:1rem; margin-left:10px;
    }
    .discount { color:#4CAF50; font-weight:600; margin-left:10px; }

    /* Buttons */
    .action-buttons {
      display:flex;
      gap:15px;
      margin:20px 0;
    }
    .btn {
      flex:1; padding:12px;
      border-radius:25px;
      font-size:1rem; font-weight:600;
      cursor:pointer; transition:0.3s;
      text-align:center;
    }
    .btn.buy { background:#ffb400; color:#0d0d0d; border:none; }
    .btn.buy:hover { background:#ffcc33; }
    .btn.cart { background:transparent; border:2px solid #ffb400; color:#ffb400; }
    .btn.cart:hover { background:#ffb400; color:#0d0d0d; }
    .btn.wish { background:#e74c3c; color:#fff; border:none; }
    .btn.wish:hover { background:#ff6b6b; }

    /* Description */
    .description {
      background:#1a1a1a;
      padding:20px;
      border-radius:10px;
      margin-top:20px;
      line-height:1.6;
      color:#ddd;
    }
    .description h2 {
      margin-bottom:10px; color:#ffb400;
    }

    /* Mobile Sticky Bar */
    .mobile-bar {
      position:fixed;
      bottom:0; left:0; width:100%;
      display:none;
      background:#111;
      padding:12px 15px;
      border-top:1px solid #ffb400;
      display:flex;
      gap:10px;
      z-index:1000;
    }
    .mobile-bar .btn { flex:1; }

    /* Responsive */
    @media(max-width:900px){
      .product-page { grid-template-columns:1fr; }
    }
    @media(min-width:768px){
      .mobile-bar { display:none; }
    }
    @media(max-width:767px){
      .action-buttons { display:none; }
    }

    .footer {
  background: #000;
  color: #ccc;
  padding: 50px 20px 20px;
  border-top: 1px solid #ffb400;
}
.footer-container {
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 40px;
}

.footer-brand img {
  height: 50px;
  margin-bottom: 10px;
}
.footer-brand h2 {
  color: #ffb400;
  font-size: 1.5rem;
  margin-bottom: 10px;
}
.footer-brand p {
  font-size: 0.9rem;
  line-height: 1.6;
}

.footer-links h4,
.footer-contact h4 {
  color: #ffb400;
  margin-bottom: 15px;
  font-size: 1.1rem;
}
.footer-links ul li a {
  color: #ccc;
  font-size: 0.9rem;
  transition: color 0.3s;
  text-decoration: none;   
}
.footer-links ul li a:hover {
  color: #ffb400;
  text-decoration: none;   /* keeps it clean on hover */
}

.footer-contact p {
  margin-bottom: 8px;
  font-size: 0.9rem;
}
.socials {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}
.socials img {
  width: 22px;
  height: 22px;
  filter: invert(80%) sepia(60%) hue-rotate(10deg);
  transition: transform 0.3s;
}
.socials img:hover {
  transform: scale(1.2);
}

.footer-bottom {
  margin-top: 30px;
  text-align: center;
  font-size: 0.8rem;
  color: #777;
  border-top: 1px solid rgba(255,180,0,0.2);
  padding-top: 15px;
}