/* How many decks (lib/qtypicker.js): stepper, price breaks, nudge, lines. Mobile first. */
.qp { display: flex; flex-direction: column; gap: var(--s2); container-type: inline-size; }
.qp-row { display: flex; align-items: center; gap: var(--s3); }
.qp-label { font-weight: 600; font-size: var(--text-s); }
.qp-each { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
/* The price breaks sit in the panel as a grid of equal chips, in balanced rows (at most four
   across: 8 breaks are 4 + 4, 6 are 3 + 3), so every break shows at every width. qtypicker.js sets
   --qp-cols; a narrow picker (a small phone) falls back to as many 64px chips as fit. */
.qp-breaks {
  display: grid; grid-template-columns: repeat(var(--qp-cols, 4), minmax(0, 1fr)); gap: 6px;
}
@container (max-width: 290px) { .qp-breaks { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); } }
.qp-break {
  min-width: 0; display: flex; flex-direction: column; align-items: center;
  padding: 6px 4px; border: 1px solid var(--line); border-radius: var(--radius-s);
  background: var(--card); color: var(--ink); font: inherit; cursor: pointer; line-height: 1.2;
  white-space: nowrap;
}
.qp-break strong { font-size: var(--text-s); font-variant-numeric: tabular-nums; }
.qp-break span { font-size: var(--text-xs); color: var(--ink-3); }
.qp-break[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: var(--paper); }
.qp-nudge { margin: 0; min-height: 1.45em; color: var(--good); font-weight: 600; }
.qp-lines { display: flex; flex-direction: column; gap: 4px; font-size: var(--text-s); font-variant-numeric: tabular-nums; }
.qp-lines > div { display: flex; justify-content: space-between; gap: var(--s3); }
.qp-lines > div:not(.qp-total) { color: var(--ink-2); }
.qp-total { padding-top: 6px; border-top: 1px solid var(--line); font-size: var(--text-m); }
.qp-quote { margin: 2px 0 0; color: var(--ink-2); }

/* Request a quote (lib/quote.js): orders over $500 */
.quote-sheet .quote-form { display: flex; flex-direction: column; gap: var(--s3); }
.quote-sheet .quote-sum { margin: 0 0 var(--s1); font-size: var(--text-s); color: var(--ink-2); }
.quote-field { display: flex; flex-direction: column; gap: 6px; font-size: var(--text-s); font-weight: 600; }
.quote-field .field {
  font-weight: 400; font-size: var(--text-m); padding: 11px 14px; border-radius: var(--radius-s);
  background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line);
}
.quote-field .field:focus { box-shadow: inset 0 0 0 2px var(--ink); }
.quote-field textarea.field { resize: none; min-height: 72px; }
.quote-done { margin: var(--s2) 0 0; }
@media (min-width: 1024px) { .quote-sheet { width: 480px; } }

/* The buy flow (lib/buyflow.js): the CTA (a small − N + beside "Print this deck", the volume line
   under it) and the drawer's summary. The create page and a gallery deck's page share it. */
.buy-row { display: flex; gap: var(--s2); align-items: stretch; }
.buy-row .buy-cta { flex: 1; min-width: 0; white-space: nowrap; }
.qty-mini {
  flex: none; gap: 0; border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--card); padding: 0 2px;
}
.qty-mini[hidden] { display: none; }
.qty-mini .btn-icon { width: 36px; min-height: 36px; height: auto; align-self: stretch; background: none; box-shadow: none; }
.qty-mini .btn-icon:disabled { opacity: 0.3; }
.qty-mini output { min-width: 1.6em; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.volume-note { margin: calc(-1 * var(--s1)) 0 0; text-align: center; color: var(--good); font-weight: 600; }
.volume-note[hidden] { display: none; }
.buy-qty { margin: 0 0 var(--s4); }
.buy-summary { display: flex; gap: var(--s4); align-items: center; margin: var(--s3) 0 var(--s5); }
.buy-summary p { margin: var(--s1) 0 0; font-size: var(--text-s); }
.buy-thumb { width: 84px; flex: none; }
.buy-thumb img { border-radius: 6px; box-shadow: var(--shadow-card); }
/* the deck in its case or box (lib/productshot.js): a product shot, not a card, so no card shadow */
.buy-thumb.has-case { width: 112px; }
.buy-thumb.has-case img { display: block; width: 100%; height: auto; border-radius: 10px; box-shadow: none; }
.buy-sheet .sheet-foot { text-align: center; margin: var(--s3) 0 0; }