:root {
     --primary-color: #22c55e;
     --secondary-color: #16a34a;
     --dark-bg: #1a1a1a;
     --light-bg: #f8fafc;
     --text-dark: #1e293b;
     --text-muted: #64748b;
     --border-color: #e2e8f0;
}
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
}
 body {
     font-family: 'Inter', sans-serif;
     line-height: 1.6;
     color: var(--text-dark);
     background: white;
}
 .navbar-brand {
     font-weight: 700;
     font-size: 1.5rem;
     color: var(--primary-color) !important;
}
 .navbar-nav .nav-link {
     font-weight: 500;
     color: var(--text-dark) !important;
     margin: 0 0.5rem;
     transition: color 0.3s ease;
}
 .navbar-nav .nav-link:hover {
     color: var(--primary-color) !important;
}
 .product-image {
     width: 100%;
     height: 400px;
     object-fit: cover;
     border-radius: 15px;
     border: 1px solid var(--border-color);
}
 .product-gallery {
     display: flex;
     gap: 0.5rem;
     margin-top: 1rem;
}
 .gallery-thumb {
     width: 80px;
     height: 80px;
     object-fit: cover;
     border-radius: 8px;
     border: 2px solid transparent;
     cursor: pointer;
     transition: border-color 0.3s ease;
}
 .gallery-thumb.active {
     border-color: var(--primary-color);
}
 .product-badge {
     display: inline-block;
     background: var(--primary-color);
     color: white;
     padding: 0.25rem 0.75rem;
     border-radius: 20px;
     font-size: 0.8rem;
     font-weight: 600;
     margin-bottom: 1rem;
}
 .product-title {
     font-size: 2rem;
     font-weight: 700;
     margin-bottom: 0.5rem;
     color: var(--text-dark);
}
 .product-brand {
     color: var(--primary-color);
     font-size: 1.1rem;
     font-weight: 600;
     margin-bottom: 1rem;
}
 .product-price {
     font-size: 2.5rem;
     font-weight: 700;
     color: var(--text-dark);
     margin-bottom: 1rem;
}
 .product-price .old-price {
     font-size: 1.5rem;
     color: var(--text-muted);
     text-decoration: line-through;
     margin-left: 1rem;
}
 .product-rating {
     display: flex;
     align-items: center;
     gap: 0.5rem;
     margin-bottom: 1rem;
}
 .stars {
     color: #fbbf24;
}
 .availability {
     display: flex;
     align-items: center;
     gap: 0.5rem;
     margin-bottom: 1.5rem;
     padding: 0.75rem;
     background: #f0fdf4;
     border: 1px solid #bbf7d0;
     border-radius: 8px;
     color: var(--secondary-color);
}
 .quantity-selector {
     display: flex;
     align-items: center;
     gap: 0.5rem;
     margin-bottom: 1.5rem;
}
 .quantity-btn {
     width: 40px;
     height: 40px;
     border: 1px solid var(--border-color);
     background: white;
     border-radius: 8px;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: all 0.3s ease;
}
 .quantity-btn:hover {
     border-color: var(--primary-color);
}
 .quantity-input {
     width: 80px;
     text-align: center;
     border: 1px solid var(--border-color);
     border-radius: 8px;
     padding: 0.5rem;
}
 .btn-primary-custom {
     background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
     border: none;
     padding: 15px 40px;
     font-size: 1.1rem;
     font-weight: 600;
     border-radius: 50px;
     transition: all 0.3s ease;
     color: white;
     width: 100%;
     margin-bottom: 1rem;
}
 .btn-primary-custom:hover {
     transform: translateY(-2px);
     box-shadow: 0 10px 25px rgba(34, 197, 94, 0.3);
     color: white;
}
 .btn-outline-custom {
     border: 2px solid var(--primary-color);
     color: var(--primary-color);
     background: transparent;
     padding: 15px 40px;
     font-size: 1.1rem;
     font-weight: 600;
     border-radius: 50px;
     transition: all 0.3s ease;
     width: 100%;
}
 .btn-outline-custom:hover {
     background: var(--primary-color);
     color: white;
}
 .specs-table {
     background: white;
     border-radius: 15px;
     border: 1px solid var(--border-color);
     overflow: hidden;
}
 .specs-table .table {
     margin-bottom: 0;
}
 .specs-table .table th {
     background: var(--light-bg);
     color: var(--text-dark);
     font-weight: 600;
     border: none;
     padding: 1rem;
}
 .specs-table .table td {
     padding: 1rem;
     border-color: var(--border-color);
}
 .tab-content {
     background: white;
     border-radius: 15px;
     border: 1px solid var(--border-color);
     padding: 2rem;
     margin-top: 1rem;
}
 .nav-tabs {
     border-bottom: 2px solid var(--border-color);
}
 .nav-tabs .nav-link {
     border: none;
     color: var(--text-muted);
     font-weight: 500;
     padding: 1rem 2rem;
}
 .nav-tabs .nav-link.active {
     background: none;
     color: var(--primary-color);
     border-bottom: 2px solid var(--primary-color);
}
 .feature-list {
     list-style: none;
     padding: 0;
}
 .feature-list li {
     display: flex;
     align-items: center;
     padding: 0.5rem 0;
     border-bottom: 1px solid var(--border-color);
}
 .feature-list li:last-child {
     border-bottom: none;
}
 .feature-list i {
     color: var(--primary-color);
     margin-right: 0.75rem;
     width: 20px;
}
 @media (max-width: 768px) {
     .product-image {
         height: 250px;
    }
     .product-title {
         font-size: 1.5rem;
    }
     .product-price {
         font-size: 1.8rem;
    }
     .gallery-thumb {
         width: 60px;
         height: 60px;
    }
     .btn-primary-custom, .btn-outline-custom {
         padding: 12px 20px;
         font-size: 1rem;
    }
     .tab-content {
         padding: 1rem;
    }
     .nav-tabs .nav-link {
         padding: 0.75rem 1rem;
         font-size: 0.9rem;
    }
}
 
.price-wrapper {
  position: relative;
  display: inline-block;
  text-align: center;
  margin-top: 10px;
}

.discount-badge {
  position: absolute;
  top: -5px;
  left: 70px;
  background-color: #e53935;
  color: white;
  border-radius: 50%;
  padding: 6px 10px;
  font-size: 0.8rem;
  font-weight: bold;
  box-shadow: 0 0 5px rgba(0,0,0,0.2);
}

.new-price {
  font-size: 1.3rem;
  font-weight: bold;
  color: #28a745;
}

.old-price {
  font-size: 0.95rem;
  color: #888;
  text-decoration: line-through;
  margin-top: 4px;
}