/* WOODEN WOODWORKS — SHOP PRODUCT PAGES (draft catalog)
   Extends shop.css tokens + product-grid-draft.css card styles.
   Used by shop/products/index.html and shop/products/<slug>.html.
   Mobile-first: base = smallest screen, min-width media queries add
   layout for tablet (768px) and desktop (1280px), matching shop.css. */

/* ─── Make the whole product-card a clickable link on the index page ──── */
.product-card--link {
  cursor: pointer;
}
.product-card--link:hover .product-card__cta {
  background: var(--shop-brass);
  color: #FFFFFF;
  border-color: var(--shop-brass);
}

.product-grid--full {
  margin-bottom: var(--shop-space-4);
}

/* ─── Back link on product detail pages ────────────────────────────────── */
.product-detail__back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--shop-brass-dark);
  margin-top: var(--shop-space-8);
  margin-bottom: var(--shop-space-4);
}
.product-detail__back:hover { color: var(--shop-walnut); }

/* ─── Product detail layout ─────────────────────────────────────────────── */
.product-detail-section {
  padding-block: 0 var(--shop-space-16);
}

.product-detail {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--shop-space-8);
  padding-bottom: var(--shop-space-12);
}

.product-detail__gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--shop-space-3);
}

.product-detail__gallery--count-2,
.product-detail__gallery--count-3,
.product-detail__gallery--count-4 {
  grid-template-columns: 1fr 1fr;
}

.product-detail__img-wrap {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--shop-radius-lg);
  background: var(--shop-bg);
  border: 1px solid var(--shop-line-2);
}

.product-detail__gallery--count-1 .product-detail__img-wrap {
  aspect-ratio: 4 / 3;
}

.product-detail__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-detail__info {
  display: flex;
  flex-direction: column;
  gap: var(--shop-space-3);
}

.product-detail__finish {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--shop-brass-dark);
}

.product-detail__name {
  font-family: var(--shop-font-serif);
  font-size: clamp(1.375rem, 4vw, 1.875rem);
  font-weight: 700;
  color: var(--shop-ink);
  line-height: 1.2;
}

.product-detail__desc {
  font-size: 1rem;
  color: var(--shop-ink);
  line-height: 1.7;
}

.product-detail__note {
  font-size: 0.8125rem;
  color: var(--shop-muted);
  font-style: italic;
  line-height: 1.6;
  padding: var(--shop-space-3) var(--shop-space-4);
  background: var(--shop-bg-2);
  border: 1px solid var(--shop-line-2);
  border-radius: var(--shop-radius-md);
}

.product-detail__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--shop-space-4);
  margin-top: var(--shop-space-3);
  padding-top: var(--shop-space-4);
  border-top: 1px solid var(--shop-line-2);
}

.product-detail__price {
  font-family: var(--shop-font-serif);
  font-size: 1.25rem;
  color: var(--shop-soft);
  font-style: italic;
}

.product-detail__cta {
  background: var(--shop-line-2);
  color: var(--shop-soft);
  border: 1px solid var(--shop-line);
  border-radius: var(--shop-radius-md);
  padding: var(--shop-space-3) var(--shop-space-6);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-family: var(--shop-font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: not-allowed;
}

/* ─── TABLET (768px+) ───────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .product-detail {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: start;
  }
  .product-detail__info {
    position: sticky;
    top: var(--shop-space-6);
  }
}

/* ─── DESKTOP (1280px+) ─────────────────────────────────────────────────── */
@media (min-width: 1280px) {
  .product-detail {
    grid-template-columns: 1.3fr 0.7fr;
    gap: var(--shop-space-12);
  }
}