/* Special orders and the quick quote (22 Oct 2026). Linked from /special-orders and /special-orders/quote only
   (tools/build.mjs, layout's css option). Ported from the standalone draft's quote.css: its fonts, colors, buttons,
   inputs and headings now come from site.css (the same tokens: --espresso, --saddle, --rust, --hide, --paper, --ink,
   --muted, --line, --line-strong, --shadow, --display, --mono), and every rule here sits under the page's own root
   class (.qb-page for the builder and the client's quote, .so-page for the special orders page), so nothing reaches
   the site header or footer. Phones first: 320px wide with no sideways scroll, every tap target 40px or more.
   Print: the quote document only. */

/* ---------- The quote builder and the client's quote (.qb-page) ---------- */
.qb-page .qb-intro { display: grid; gap: 10px; margin-bottom: clamp(18px, 3vw, 28px); }
.qb-page .qb-intro h1 { font-size: var(--step-3); }
.qb-page .qb-intro .lede { font-size: var(--step-0); max-width: 62ch; }
.qb-page .qview { display: grid; min-width: 0; }

/* Builder: the form beside a live preview of the quote (stacked on phones, the preview below). */
.qb-page .qgrid { display: grid; gap: 20px; align-items: start; grid-template-columns: minmax(0, 1fr); }
.qb-page .qpreview { min-width: 0; }
@media (min-width: 1000px) {
  .qb-page .qgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* the preview stays in view while she fills the form, and scrolls on its own when the quote is long */
  .qb-page .qpreview { position: sticky; top: calc(var(--nav-h) + 12px); max-height: calc(100dvh - var(--nav-h) - 24px); overflow-y: auto; overscroll-behavior: contain; padding: 2px 6px 6px 6px; }   /* 6px: room for the focus ring (3px + 3px offset), which the scroll box would clip */
}
.qb-page .qbuild { display: grid; gap: 16px; min-width: 0; }
.qb-page .qcard { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: clamp(14px, 3vw, 18px); box-shadow: var(--shadow); min-width: 0; }
.qb-page .qcard h2 { font-size: var(--step-1); margin-bottom: 12px; }
/* display:flex drops the browser's open/close triangle, so it gets the FAQ's "+" (site.css .faq summary::after) */
.qb-page .qsettings summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none; }
.qb-page .qsettings summary::-webkit-details-marker { display: none; }
.qb-page .qsettings summary::after { content: "+"; font: 400 1.4rem/1 var(--body); color: var(--rust); transition: transform .2s; }
.qb-page .qsettings[open] summary::after { transform: rotate(45deg); }
.qb-page .qsettings[open] summary { margin-bottom: 6px; }
.qb-page .qrow { display: grid; gap: 0 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.qb-page .qf { display: grid; gap: 4px; margin-bottom: 12px; min-width: 0; align-content: start; }
.qb-page .qf > span { font-weight: 600; font-size: .9rem; }
.qb-page .qf small { color: var(--muted); font-size: .8rem; line-height: 1.35; }
.qb-page .qline { border: 1.5px dashed var(--line-strong); border-radius: 12px; padding: 12px; margin: 0 0 12px; min-width: 0; }
.qb-page .qline.is-so { background: #fffaf2; }
.qb-page .ql-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.qb-page .qchecks { display: flex; flex-wrap: wrap; gap: 0 16px; align-items: center; margin: 0 0 8px; font-size: .92rem; }
.qb-page .qchecks > span { font-weight: 600; width: 100%; }
.qb-page .qchecks label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; }
.qb-page .qchecks input { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--rust); flex: none; }
.qb-page .qadd, .qb-page .qactions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.qb-page .qactions { margin-top: 16px; }
.qb-page .qactions .btn { flex: 1 1 13rem; }   /* full width on a phone, two or three to a row on a computer */
.qb-page .qcard .hint { margin: 6px 0 8px; }
.qb-page .qcard .hint:empty, .qb-page .qpreview .hint:empty { margin: 0; }
.qb-page .qpreview [data-copied] { margin-top: 10px; overflow-wrap: anywhere; }
.qb-page .qpreview .notice { margin-top: 10px; }

/* The quote document: the builder's preview, the client's view and the printout. */
.qb-page .qdoc { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: clamp(14px, 3vw, 20px); box-shadow: var(--shadow); font-size: .95rem; line-height: 1.5; min-width: 0; overflow-wrap: anywhere; }
.qb-page .qdoc-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; border-bottom: 2px solid var(--saddle); padding-bottom: 12px; }
.qb-page .qdoc-head img { width: 42px; height: auto; }
.qb-page .qdoc-head p { font-size: .84rem; color: var(--muted); line-height: 1.45; }
.qb-page .qdoc-head .qdoc-name { font-family: var(--display); font-size: 1.1rem; color: var(--ink); }
.qb-page .qdoc-head .qdoc-title { font-family: var(--display); font-size: 1.5rem; color: var(--saddle); }
.qb-page .qdoc-meta { text-align: right; }
@media (max-width: 520px) {
  .qb-page .qdoc-head { grid-template-columns: auto minmax(0, 1fr); }
  .qb-page .qdoc-meta { grid-column: 1 / -1; text-align: left; }
}
.qb-page .qdoc-for { margin: 12px 0; }
.qb-page .qdoc-for span { font-weight: 700; color: var(--muted); margin-right: 4px; }
.qb-page .qdoc-table { width: 100%; border-collapse: collapse; margin: 10px 0; }
.qb-page .qdoc-table th { text-align: left; font: 500 .74rem var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); border-bottom: 1px solid var(--line); padding: 6px 4px; }
.qb-page .qdoc-table td { border-bottom: 1px solid var(--line); padding: 9px 4px; vertical-align: top; }
.qb-page .qdoc-table small { display: block; color: var(--muted); font-size: .8rem; line-height: 1.4; margin-top: 2px; }
.qb-page .qdoc-table .n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Phones: each line becomes a small card, the item on top, then Qty, Each and the line total. */
@media (max-width: 520px) {
  .qb-page .qdoc-table thead { display: none; }
  .qb-page .qdoc-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; border-bottom: 1px solid var(--line); padding: 8px 0; }
  .qb-page .qdoc-table td { border: 0; padding: 2px 0; }
  .qb-page .qdoc-table td:first-child { grid-column: 1 / -1; }
  .qb-page .qdoc-table td.n { text-align: left; }
  .qb-page .qdoc-table td:last-child { grid-column: 1 / -1; text-align: right; font-weight: 600; }
  .qb-page .qdoc-table td:nth-child(2)::before { content: "Qty "; color: var(--muted); }
  .qb-page .qdoc-table td:nth-child(3)::before { content: "Each "; color: var(--muted); }
  .qb-page .qdoc-table td:nth-child(2):empty, .qb-page .qdoc-table td:nth-child(3):empty { display: none; }
}
.qb-page .qdoc-sum { margin: 10px 0 0 auto; max-width: 22rem; }
.qb-page .qdoc-sum div { display: flex; justify-content: space-between; gap: 16px; padding: 4px 0; }
.qb-page .qdoc-sum dt { color: var(--muted); min-width: 0; }
/* A price never breaks ("$95." / "17" at 320px): .qdoc's break-anywhere is turned off here, so "$95.17" is one word,
   while a text value ("Added for your delivery address") still wraps between words and leaves its label room. */
.qb-page .qdoc-sum dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: normal; }
.qb-page .qdoc-sum .qdoc-total { border-top: 2px solid var(--ink); margin-top: 4px; padding-top: 8px; font-weight: 700; font-size: 1.1rem; }
.qb-page .qdoc-sum .qdoc-total dt { color: var(--ink); }
.qb-page .qdoc-sum .qdoc-total dd { white-space: nowrap; }
.qb-page .qdoc-due { display: grid; gap: 4px; background: var(--hide); border-left: 4px solid var(--rust); border-radius: 10px; padding: 10px 14px; margin: 14px 0; }
.qb-page .qdoc-notes { white-space: pre-line; background: var(--hide); border-radius: 10px; padding: 10px 12px; margin: 12px 0; }
.qb-page .qdoc-terms { display: grid; gap: 3px; font-size: .82rem; color: var(--muted); padding-left: 18px; margin: 14px 0 6px; }
.qb-page .qdoc-foot { font-size: .85rem; color: var(--muted); margin-top: 6px; }

/* "Send it to Kelsey", under the client's quote. */
.qb-page .qb-send { display: grid; gap: 14px; max-width: 720px; margin-top: clamp(28px, 4vw, 44px); }
.qb-page .qb-send h2 { font-size: var(--step-2); }
.qb-page .qb-send > p { color: var(--muted); }

@media print {
  @page { margin: 14mm; }
  body:has(.qb-page)::after { display: none; }   /* the film grain */
  body:has(.qb-page) :is(.site-header, .site-footer, .crumbs-nav, .to-top, .skip, .toast) { display: none !important; }
  /* as invoice.css: !important beats site.css's .section.tight-top padding, which would leave the header's space */
  main > section.qb-page { padding: 0 !important; margin: 0 !important; }
  .qb-page .wrap { max-width: none; padding: 0; }
  .qb-page :is(.qdoc-table tr, .qdoc-sum, .qdoc-due, .qdoc-head) { break-inside: avoid; }
  .qb-page :is(.noprint, .qbuild, .qb-intro, .qb-send) { display: none !important; }
  .qb-page .qgrid { display: block; }
  .qb-page .qpreview { position: static; max-height: none; overflow: visible; padding: 0; }
  .qb-page .qdoc { border: 0; box-shadow: none; padding: 0; font-size: 10.5pt; }
  .qb-page :is(.qdoc-due, .qdoc-notes) { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* ---------- The special orders page (.so-page) ---------- */
.so-page .so-cat { gap: 12px; }
.so-page .so-cat h3 { color: var(--saddle); }
.so-page .so-tier { font: 500 .74rem/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.so-page .so-list { list-style: none; padding: 0; margin: 0; }
.so-page .so-list li { border-top: 1px solid var(--line); padding: 7px 0; line-height: 1.4; }
.so-page .so-list b { font-weight: 600; }
.so-page .so-deco { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; }
.so-page .so-deco li { font-size: .85rem; line-height: 1.3; background: var(--hide); border-radius: 999px; padding: 5px 11px; }
.so-page .so-care { gap: 10px; }