/* The Finish Frame — per-style product page (product.html). The two-pane
   layout, form fields, splits grid, preview stage and buy box all come from
   customize.css; this file only adds the product chrome: header copy, size
   and frame pills, the preview's frame treatment, details, related cards.
   (The old six-product gallery page this file used to style is retired.) */

.pd-head { max-width: 560px; }
.pd-head h1 { font-size: clamp(30px, 4vw, 42px); line-height: 1.05; margin: 14px 0 12px; }
.pd-desc { color: var(--muted); font-size: 14.5px; line-height: 1.6; margin: 0; }

/* ---------- size + frame pills ---------- */
.pd-pills { display: flex; gap: 10px; flex-wrap: wrap; }
.pd-pill {
  font: inherit; font-size: 13px; font-weight: 600; letter-spacing: 0.04em;
  padding: 9px 16px; border-radius: 999px; cursor: pointer;
  color: var(--muted); background: transparent;
  border: 1px solid var(--hairline);
  transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}
.pd-pill:hover { border-color: rgba(138, 100, 53, 0.5); color: var(--ink, #1a170f); }
.pd-pill.is-active {
  color: var(--white); background: #8a6435; border-color: #8a6435;
}

/* ---------- preview frame treatment (matches the chosen finish) ---------- */
/* the framed look wraps the poster stage in a real border + inner lip so the
   preview itself sells the frame choice; "print only" shows the bare stage */
.pd-framewrap { transition: padding 0.25s ease, background 0.25s ease; border-radius: 4px; }
.pd-framewrap.pd-fr-black,
.pd-framewrap.pd-fr-white,
.pd-framewrap.pd-fr-wood { padding: 14px; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.55); }
.pd-framewrap.pd-fr-black { background: linear-gradient(135deg, #34343a 0%, #17171a 55%, #232326 100%); }
.pd-framewrap.pd-fr-white { background: linear-gradient(135deg, #fdfcf9 0%, #e8e4da 55%, #f4f1ea 100%); }
.pd-framewrap.pd-fr-wood { background: linear-gradient(135deg, #74502f 0%, #4a2f1a 55%, #5d3c22 100%); } /* dark walnut-brown, matched to the Printify 1502 Brown frame */
.pd-framewrap.pd-fr-black .poster-stage,
.pd-framewrap.pd-fr-white .poster-stage,
.pd-framewrap.pd-fr-wood .poster-stage { border-radius: 0; box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.45); }

/* a frame finish that doesn't exist at the chosen size (wood outside 18x24) */
.pd-pill.is-unavailable { opacity: 0.35; cursor: not-allowed; text-decoration: line-through; }

/* ---------- details + related ---------- */
.pd-details details {
  border: 1px solid var(--glass-edge); border-radius: 10px;
  background: var(--glass-bg); padding: 14px 18px;
}
.pd-details summary { cursor: pointer; font-size: 14px; font-weight: 600; }
.pd-details p { margin: 12px 0 4px; color: var(--muted); font-size: 13.5px; line-height: 1.6; }

.pd-related .eyebrow { margin-bottom: 14px; }
.pd-rel-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pd-rel-card {
  display: block; text-decoration: none; color: inherit; text-align: center;
  border: 1px solid var(--glass-edge); border-radius: 10px;
  background: var(--glass-bg); padding: 16px 16px 14px;
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.pd-rel-card:hover { transform: translateY(-4px); border-color: rgba(138, 100, 53, 0.45); }
.pd-rel-card img { width: 100%; height: auto; display: block; margin-bottom: 10px; }
.pd-rel-card span { font-size: 13.5px; font-weight: 600; }

@media (max-width: 900px) {
  .pd-rel-row { grid-template-columns: 1fr 1fr; }
}

/* ---------- autofill paste box ---------- */
.cz-field textarea {
  font: inherit; font-size: 13.5px; resize: vertical; min-height: 74px;
  padding: 10px 12px; border-radius: 8px;
  border: 1px solid var(--hairline); background: rgba(255, 255, 255, 0.55);
  color: inherit;
}
.cz-field textarea:focus { outline: none; border-color: #8a6435; }
#pasteStatus.is-good { color: #4a6741; }
#pasteStatus.is-bad { color: #a03123; }