/* File: /css/product.css | Version: 1.0.0 | 2026-10-27: the product page (product.asp 1.0.0), laid out like Steve's Etsy example: the image on the left; price, title, Purchase now, item details and delivery on the right; one column on phones. Colours and sizes come from site.css. */
.product { padding-bottom: 3rem; }
.product__draft {
  margin: 1.5rem 0 0;
  padding: 0.6rem 0.9rem;
  border: 1px dashed var(--ox-rule);
  background: var(--ox-surface);
  color: var(--ox-ink-dim);
}
.product__layout {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 2.5rem;
  align-items: start;
  margin-top: 2rem;
}
.product__figure { margin: 0; padding: 1.5rem; background: var(--ox-surface); }
.product__image { display: block; max-width: 100%; height: auto; max-height: 78vh; margin-inline: auto; }
.product__price { margin: 0; font-size: 1.8rem; font-weight: 700; }
.product__title { margin: 0.4rem 0 1.4rem; font-size: 1.3rem; line-height: 1.35; }
.product__buy { margin: 0 0 0.8rem; }
.product__variant { margin: 0 0 0.5rem; }
.product__button { width: 100%; }
.product__heading { margin: 1.8rem 0 0.6rem; font-size: 1.05rem; }
.product__highlights { margin: 0 0 1rem; padding-left: 1.2rem; }
.product__highlights li { margin: 0 0 0.3rem; }
.product__text p { margin: 0 0 0.8rem; }

@media (max-width: 48rem) {
  .product__layout { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .product__figure { padding: 0.75rem; }
}