/* =====================================================
   trackomatic / components / product-detail-skin.css
   Re-skins webshop's stock item-detail page (cart, wishlist,
   variants, reviews) with brand tokens WITHOUT touching any
   webshop template or JS logic. Scoped under real wrapper
   classes already present in webshop's markup so these rules
   win on specificity, regardless of CSS load order.
   ===================================================== */

/* ---------- Typography ---------- */
.product-page-content .product-title {
  font-family: var(--tk-font-heading);
  font-size: var(--tk-text-3xl);
  font-weight: var(--tk-weight-bold);
  color: var(--tk-color-text);
  line-height: var(--tk-leading-tight);
}

.product-page-content .product-code {
  font-size: var(--tk-text-sm);
  color: var(--tk-color-text-muted);
  margin-top: var(--tk-space-2);
}

.product-page-content .product-item-group {
  display: inline-block;
  font-size: var(--tk-text-xs);
  font-weight: var(--tk-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tk-color-accent);
  margin-right: var(--tk-space-3);
}

.product-page-content .product-description {
  font-size: var(--tk-text-base);
  color: var(--tk-color-text-muted);
  line-height: var(--tk-leading-normal);
  margin-top: var(--tk-space-4);
}

/* ---------- Price ---------- */
.product-page-content .product-price {
  font-family: var(--tk-font-heading);
  font-size: var(--tk-text-2xl);
  font-weight: var(--tk-weight-bold);
  color: var(--tk-color-primary);
  margin-top: var(--tk-space-4);
}

.product-page-content .product-price .formatted-price s {
  color: var(--tk-color-text-muted);
  font-weight: var(--tk-weight-regular);
}

.product-page-content .in-green {
  color: #047857;
}

/* ---------- Stock status ---------- */
.product-page-content .has-stock {
  color: #047857;
  font-weight: var(--tk-weight-medium);
}

.product-page-content .out-of-stock,
.product-page-content .no-stock {
  color: #B91C1C;
  font-weight: var(--tk-weight-medium);
}

/* ---------- Buttons (cart, wishlist, inquiry, review) ---------- */
.item-cart .btn-primary,
.item-cart .btn-add-to-cart {
  background: var(--tk-gradient-gold-btn);
  color: var(--tk-navy-deep);
  border: none;
  border-radius: var(--tk-radius-md);
  font-weight: var(--tk-weight-semibold);
  padding: var(--tk-space-3) var(--tk-space-5);
}

.item-cart .btn-primary:hover,
.item-cart .btn-add-to-cart:hover {
  filter: brightness(1.05);
}

.item-cart .btn-light,
.item-cart .btn-view-in-cart {
  background: var(--tk-color-bg-alt);
  color: var(--tk-color-primary);
  border: 1px solid var(--tk-color-border);
  border-radius: var(--tk-radius-md);
  font-weight: var(--tk-weight-medium);
}

.item-cart .btn-inquiry,
.mt-5.mb-6 .btn-configure {
  background: transparent;
  color: var(--tk-color-primary);
  border: 1px solid var(--tk-color-primary);
  border-radius: var(--tk-radius-md);
  font-weight: var(--tk-weight-medium);
}

.item-cart .btn-inquiry:hover,
.mt-5.mb-6 .btn-configure:hover {
  background: var(--tk-color-primary);
  color: var(--tk-white);
}

.ratings-reviews-section .btn-write-review {
  background: var(--tk-color-primary);
  color: var(--tk-white);
  border: none;
  border-radius: var(--tk-radius-md);
  font-weight: var(--tk-weight-medium);
  padding: var(--tk-space-2) var(--tk-space-4);
}

/* ---------- Specification table ---------- */
.item-website-specification .product-title {
  font-size: var(--tk-text-xl);
}

.item-website-specification table.table {
  width: 100%;
  border-collapse: collapse;
}

.item-website-specification .spec-label {
  padding: var(--tk-space-3) var(--tk-space-4);
  font-weight: var(--tk-weight-medium);
  color: var(--tk-color-text-muted);
  font-size: var(--tk-text-sm);
  border-bottom: 1px solid var(--tk-color-border);
  width: 40%;
}

.item-website-specification .spec-content {
  padding: var(--tk-space-3) var(--tk-space-4);
  color: var(--tk-color-text);
  font-size: var(--tk-text-sm);
  border-bottom: 1px solid var(--tk-color-border);
}

/* ---------- Reviews section ---------- */
.ratings-reviews-section .reviews-header {
  font-family: var(--tk-font-heading);
  font-size: var(--tk-text-xl);
  font-weight: var(--tk-weight-semibold);
  color: var(--tk-color-text);
}

.ratings-reviews-section .rating-summary-numbers h2 {
  color: var(--tk-color-primary);
  font-family: var(--tk-font-heading);
}

.ratings-reviews-section .progress-bar-cosmetic {
  background: var(--tk-color-accent);
}

.ratings-reviews-section .star-click {
  color: var(--tk-color-accent);
}

.user-reviews .review {
  border-bottom: 1px solid var(--tk-color-border);
  padding-block: var(--tk-space-4);
}

.user-reviews .reviewer {
  font-size: var(--tk-text-sm);
  color: var(--tk-color-text-muted);
}

/* ---------- Recommended items sidebar ---------- */
.recommended-item-section .recommendation-header {
  font-family: var(--tk-font-heading);
  font-size: var(--tk-text-lg);
  font-weight: var(--tk-weight-semibold);
  color: var(--tk-color-text);
}

.recommended-item .product-title,
.recommended-item a {
  font-size: var(--tk-text-sm);
  color: var(--tk-color-text);
  font-weight: var(--tk-weight-medium);
}

.recommended-item .item-price {
  color: var(--tk-color-primary);
  font-weight: var(--tk-weight-semibold);
}

/* ---------- Offers block ---------- */
.offers-heading {
  font-size: var(--tk-text-sm);
  font-weight: var(--tk-weight-semibold);
  color: var(--tk-color-text);
}

.offer-details {
  color: var(--tk-color-primary-hover);
  font-weight: var(--tk-weight-medium);
}

/* ---------- Category tabs (spec/description tabs, if used) ---------- */
.category-tabs .nav-link.active {
  color: var(--tk-color-primary);
  border-bottom: 2px solid var(--tk-color-accent);
}

/* ---------- Image zoom close button - align with brand accent on hover ---------- */
.image-zoom-view button:hover svg {
  color: var(--tk-color-accent);
}