/* 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; } }