/* ============================================================
   8 FLORA — product detail typography
   ------------------------------------------------------------
   Shared by product.html and the CMS preview at /admin, so the
   preview cannot drift from the real page.
   ============================================================ */

.product-cat {
  font-size: 9.5px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--product-cat-color, var(--gold)); margin-bottom: 14px;
}
.product-name {
  font-family: var(--serif); font-size: clamp(32px,3.5vw,54px);
  font-weight: 300; line-height: 1.08; color: var(--product-name-color, var(--black)); margin-bottom: 10px;
}
.product-subtitle {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--product-subtitle-color, var(--text-mid)); margin-bottom: 36px;
}
.product-desc {
  font-size: 15px; font-weight: 300; line-height: 1.9;
  color: var(--product-desc-color, var(--text-mid)); margin-bottom: 40px;
}
.product-details {
  border-top: 1px solid var(--border); padding-top: 28px; margin-bottom: 48px;
}
.product-details h4 {
  font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 16px;
}
.product-details ul { list-style: none; }
.product-details ul li {
  font-size: 13.5px; font-weight: 300; color: var(--text-mid);
  padding: 8px 0; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px;
}
.product-details ul li::before {
  content: ''; display: block; width: 4px; height: 4px;
  border-radius: 50%; background: var(--gold); flex-shrink: 0;
}
/* Purchase panel — flows after details, no sticky */
.product-purchase {
  padding-top: 40px; border-top: 1px solid var(--border);
}
.product-price-label {
  font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--text-mid); margin-bottom: 8px;
}
.product-price {
  font-family: var(--serif); font-size: 36px; font-weight: 300;
  color: var(--product-price-color, var(--black)); margin-bottom: 32px;
}
.tier-label {
  font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-mid); margin-bottom: 10px;
}
.tier-row {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 26px;
}
.tier-btn {
  flex: 1 1 auto; min-width: 72px;
  padding: 13px 10px; background: none; cursor: pointer;
  border: 1px solid var(--border); color: var(--text);
  font-family: var(--sans); font-size: 13px; letter-spacing: 0.04em;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.tier-btn:hover { border-color: var(--gold); }
.tier-btn.active {
  background: var(--gold); border-color: var(--gold); color: var(--black);
}

/* Phone: the desktop type scale is far too large in a narrow column. */
@media (max-width: 768px) {
  .product-name { font-size: clamp(28px, 8vw, 38px); }
  .product-subtitle { margin-bottom: 24px; }
  .product-desc { font-size: 14px; line-height: 1.8; margin-bottom: 28px; }
  .product-details { padding-top: 22px; margin-bottom: 32px; }
  .product-price { font-size: 30px; margin-bottom: 24px; }
  .tier-btn { min-width: 64px; padding: 11px 8px; font-size: 12px; }
}