/* =========================================================
   PRODUCT DETAILS PAGE
========================================================= */

/* reset styles */

/* HERO */
.product-image-wrap {
   position: relative;
   padding: 60px;
   background:
      radial-gradient(circle at top left,
         rgba(0, 208, 132, 0.15),
         transparent 40%),
      #121315;
   z-index: 400;
}

.product-image-wrap img {
   max-width: 100%;
   margin: auto;
   object-fit: cover;
   object-position: center;
}

.product-badge {
   position: absolute;
   top: 30px;
   left: 65px;
   background: rgba(0, 208, 132, 0.12);
   border: 1px solid rgba(0, 208, 132, 0.2);
   color: var(--primary);
   padding: 10px 16px;
   border-radius: 999px;
   font-size: 0.9rem;
   font-weight: 600;
   z-index: 500;
}

.product-price {
   font-size: 2.4rem;
   font-weight: 800;
   color: var(--white);
}

.old-price {
   color: #777;
   text-decoration: line-through;
   font-size: 1.1rem;
}

.product-meta-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 18px;
}

.meta-item {
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: 18px;
   padding: 18px;
}

.meta-item span {
   display: block;
   font-size: 0.9rem;
   color: #999;
   margin-bottom: 6px;
}

.meta-item strong {
   font-size: 1rem;
   color: var(--white);
}

/* QUANTITY */
.quantity-box {
   width: fit-content;
   display: flex;
   align-items: center;
   border: 1px solid var(--border);
   border-radius: 16px;
   overflow: hidden;
   background: var(--card);
}

.quantity-box input {
   width: 60px;
   text-align: center;
   color: var(--white);
   font-weight: 700;
}

.qty-btn {
   width: 50px;
   height: 50px;
   color: var(--white);
   font-size: 1.2rem;
   transition: var(--transition);
}

.qty-btn:hover {
   background: rgba(255, 255, 255, 0.05);
}

/* NOTE */
.research-note {
   display: flex;
   align-items: center;
   gap: 14px;
   padding: 18px;
   border-radius: 18px;
   background: rgba(255, 255, 255, 0.03);
   border: 1px solid var(--border);
}

.research-note i {
   color: var(--primary);
   font-size: 1.4rem;
}

/* SCIENCE CARDS */
.science-card {
   transition: var(--transition);
}

.science-card:hover {
   transform: translateY(-6px);
}

/* PRODUCT CARD */
.product-card-image {
   padding: 40px;
}

.product-card-image img {
   max-width: 220px;
   margin: auto;
   object-fit: contain;
}

.product-category {
   color: var(--primary);
   font-size: 0.9rem;
}

/* RESPONSIVE */
@media(max-width: 991px) {

   .product-image-wrap {
      padding: 30px;
   }

   .product-meta-grid {
      grid-template-columns: 1fr;
   }

}

@media(max-width: 576px) {

   .product-price {
      font-size: 2rem;
   }

   .product-image-wrap img {
      max-width: 100%;
   }

}