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


/* HERO */
.product-image-wrap {
   position: relative;
   padding: 60px;

   background:
      radial-gradient(circle at top left,
         var(--primary-soft),
         transparent 40%),
      var(--bg-light);

   border: 1px solid var(--border);
   border-radius: var(--radius-lg);

   z-index: 400;
}

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


/* BADGE */
.product-badge {
   position: absolute;
   top: 30px;
   left: 65px;

   background: var(--primary-soft);
   border: 1px solid var(--primary-border);

   color: var(--primary);

   padding: 10px 16px;
   border-radius: 999px;

   font-size: .9rem;
   font-weight: 600;

   z-index: 500;
}


/* PRICE */
.product-price {
   font-size: 2.4rem;
   font-weight: 800;
   color: var(--heading);
}

.old-price {
   color: var(--text-muted);
   text-decoration: line-through;
   font-size: 1.1rem;
}


/* META GRID */
.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: var(--radius-md);

   padding: 18px;

   box-shadow: var(--shadow-sm);
}

.meta-item span {
   display: block;

   font-size: .9rem;
   color: var(--text-muted);

   margin-bottom: 6px;
}

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


/* 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(--heading);

   font-weight: 700;
}

.qty-btn {

   width: 50px;
   height: 50px;

   color: var(--heading);

   font-size: 1.2rem;

   transition: var(--transition);
}

.qty-btn:hover {

   background: var(--bg-soft);

}


/* NOTE */
.research-note {

   display: flex;
   align-items: center;

   gap: 14px;

   padding: 18px;

   border-radius: var(--radius-md);

   background: var(--bg-light);

   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);

   box-shadow: var(--shadow-hover);

}


/* PRODUCT CARD IMAGE */
.product-card-image {

   padding: 40px;

}

.product-card-image img {

   max-width: 220px;

   margin: auto;

   object-fit: contain;

}

.product-category {

   color: var(--primary);

   font-size: .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%;

   }

}