/* PRODUCT DETAIL PAGE — layout only. Colors, fonts, card/button/tag looks
   all come from whichever theme CSS loads before this file, so a product
   page reads as part of its category rather than a bolt-on template. */

.product-detail { padding: 48px 0 80px; }

.product-detail .back-link {
  display: inline-block;
  margin-bottom: 20px;
  font-size: 0.9rem;
  color: var(--ink-soft);
  text-decoration: none;
}
.product-detail .back-link:hover { text-decoration: underline; }

.product-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

.product-gallery { display: flex; flex-direction: column; gap: 12px; }

.product-detail-grid .product-image {
  border-radius: var(--radius, 12px);
  border: 1px solid var(--border);
}

.product-thumbs { display: flex; gap: 10px; flex-wrap: wrap; }
.product-thumb {
  padding: 0;
  width: 64px;
  height: 64px;
  border-radius: calc(var(--radius, 12px) / 2);
  border: 2px solid var(--border);
  overflow: hidden;
  background: none;
  cursor: pointer;
  flex-shrink: 0;
}
.product-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-thumb.active { border-color: var(--ink); }
.product-thumb:hover { border-color: var(--ink-soft); }

.product-detail-body .product-tags { margin-bottom: 14px; }
.product-detail-body h1 { margin-bottom: 10px; }

.product-detail-price {
  display: inline-block;
  font-size: 1.35rem;
  margin-bottom: 20px;
}
.product-detail-size { color: var(--ink-soft); font-size: 0.92rem; margin: -12px 0 20px; }
.product-detail-delivery-note { color: var(--ink-soft); font-size: 0.82rem; margin: -12px 0 20px; }
.product-detail-desc { font-size: 1rem; max-width: 52ch; margin-bottom: 32px; }
.product-detail-note { color: var(--ink-soft); font-size: 0.82rem; max-width: 52ch; margin-top: 16px; }

@media (max-width: 760px) {
  .product-detail-grid { grid-template-columns: 1fr; gap: 28px; }
}