/* Cart test page and the fake pay, thanks and order desk pages. Same tokens as the Silver Mountain Press site
   (src/styles/base/tokens.css): warm paper, near-black ink, the crisp jacket red for the masthead block,
   old-style serif text, a utility sans for small labels. No external fonts. No inline style needed. */
:root {
  --ink: #16181b; --stone: #5e5c58; --paper: #f7f2e8; --sink: #efe8da; --rule: #ded7c9;
  --red: #ab2f25; --link: #445069; --focus: #445069; --warn: #ab2f25; --on-red: #f7f2e8;
  --face-text: "Iowan Old Style", "Palatino", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --face-util: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color-scheme: light;
}
/* The customer-facing shop is always the cream used across the rest of the site, whatever the visitor's device prefers.
   The dark theme belongs to the admin (the Order desk and its sign-in pages) and is always on there. */
body.admin {
  --ink: #efe8da; --stone: #b3ada2; --paper: #1b1915; --sink: #26231e; --rule: #3a362f;
  --link: #a9b6d6; --focus: #f7f2e8; --warn: #ff9a8a;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 1.0625rem/1.5 var(--face-text); }
/* Pages without a masthead (pay, thanks, order desk) get the red band as a plain top edge. */
body { border-top: 0.55rem solid var(--red); padding: 1rem 1rem 3rem; max-width: 46rem; margin-inline: auto; }
body.shop { border-top: 0; padding: 0 0 3rem; max-width: none; }

h1, h2 { font-family: "Cormorant Garamond", "EB Garamond", Garamond, "Iowan Old Style", Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif; font-weight: 600; text-transform: uppercase; line-height: 1.06; letter-spacing: 0.01em; margin: 1.5rem 0 0.5rem; }
h1 { font-size: 1.5rem; } h2 { font-size: 1.28rem; }
a { color: var(--link); text-underline-offset: 0.15em; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.85em; overflow-wrap: anywhere; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 1.5rem 0; }
small { color: var(--stone); }

/* ---- masthead: the site's colour block ---- */
.masthead { background: var(--red); color: var(--on-red); padding: 0.9rem 1rem; }
.masthead-in { max-width: 46rem; margin-inline: auto; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.9rem; }
.masthead-name { font-size: 1.28rem; letter-spacing: 0.01em; margin: 0; color: inherit; text-decoration: none; }
.masthead-place { font-family: var(--face-util); font-size: 0.82rem; margin: 0; }
/* Imprint title treatment, matching the main SMP site's masthead (src/styles/base/layout.css, 2026-09-29). */
.masthead-name { font-family: "Cormorant Garamond", "EB Garamond", Garamond, "Iowan Old Style", Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif; font-weight: 700; font-size: clamp(1.4rem, 5.4vw, 1.95rem); line-height: 1.05; letter-spacing: 0.1em; text-transform: uppercase; }

/* ---- the test marker: an ink strip, deliberately the loudest thing after the masthead ---- */
.testbar { background: var(--ink); color: var(--paper); padding: 0.6rem 1rem; font-family: var(--face-util); font-size: 0.875rem; }
.testbar-in { max-width: 46rem; margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.8rem; }
.testbar a { color: var(--paper); }
.tag { display: inline-block; background: var(--ink); color: var(--paper); border: 2px solid var(--red); padding: 0.1rem 0.55rem;
  font: 700 0.8125rem/1.5 var(--face-util); letter-spacing: 0.02em; }
.testbar .tag { background: var(--paper); color: var(--ink); border-color: var(--paper); }
/* ---- manila-folder tab nav: the WHOLE site's navigation, not just Home/Shop - every SMP page
   (Home, Shop, About, Contact, and whatever's duplicated in here next) is a tab, all equally
   prominent, no separate secondary nav row (2026-09-28: that's what "revert and use our tab nav as
   the whole system" meant - a two-tier nav with About/Contact demoted to plain masthead links was
   the wrong direction). Plain links to separate pages, not a JS tab-switcher. The active tab sits
   flush with the page below it (same paper background, no visible seam); inactive tabs read as a
   step behind - the way a folder's other tabs sit lower and slightly muted. Wraps to a second row
   past four or so tabs at narrow widths - accepted, still reads as a folder with many tabs. */
.folder-tabs-band { background: var(--stone); }
.folder-tabs { display: flex; flex-wrap: wrap; gap: 0.3rem; max-width: 46rem; margin: 0 auto; padding: 0.6rem 1rem 0; }
.folder-tabs a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.5rem 0.9rem; border-radius: 0.6rem 0.6rem 0 0; text-decoration: none; font: 700 0.95rem/1.2 var(--face-util); background: var(--rule); color: var(--ink); }
.folder-tabs a[aria-current="page"] { background: var(--paper); color: var(--ink); }
.folder-tabs a:not([aria-current="page"]):hover { background: var(--paper); }
.folder-tabs a:focus-visible { outline-offset: -3px; }
main { max-width: 46rem; margin-inline: auto; padding: 0 1rem; }
.lede { margin: 0.25rem 0 1rem; color: var(--stone); max-width: 34rem; }

/* ---- buttons: 44px targets, visible focus ---- */
button, .button { font: 600 0.9375rem/1.2 var(--face-util); min-height: 2.75rem; min-width: 2.75rem; padding: 0.55rem 1rem; margin: 0.15rem;
  border: 2px solid var(--ink); background: transparent; color: var(--ink); border-radius: 0.2rem; cursor: pointer; }
button:hover:not(:disabled) { background: var(--sink); }
button:disabled { color: var(--stone); border-color: var(--rule); cursor: not-allowed; }
button.primary { background: var(--red); border-color: var(--red); color: var(--on-red); }
button.primary:hover:not(:disabled) { background: var(--red); filter: brightness(1.12); }
button.primary:disabled { background: var(--sink); border-color: var(--rule); color: var(--stone); }
button.quiet { border-color: transparent; text-decoration: underline; text-underline-offset: 0.2em; min-width: 0; padding-inline: 0.5rem; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.masthead a:focus-visible, .testbar a:focus-visible { outline-color: var(--paper); }

/* ---- catalogue ---- */
.catalog, .lines { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.catalog li, .lines li { display: grid; grid-template-columns: 1fr auto; gap: 0.1rem 1rem; align-items: center; padding: 0.6rem 0; border-bottom: 1px solid var(--rule); }
.title { margin: 0; font-size: 1.0625rem; font-weight: 600; }
.price, .total { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; margin: 0; }
.avail { margin: 0; font: 0.875rem/1.4 var(--face-util); color: var(--stone); }
.avail.low { color: var(--warn); font-weight: 600; }
.avail.out { color: var(--warn); font-weight: 600; }
.catalog .act { justify-self: end; }
.catalog li > *, .lines li > * { min-width: 0; }
.stepper { display: inline-flex; align-items: center; }
.stepper output { min-width: 2rem; text-align: center; font-variant-numeric: tabular-nums; font-family: var(--face-util); }

.cartbar { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; margin-top: 1.5rem; }
.subtotal { display: flex; justify-content: space-between; gap: 1rem; padding: 0.75rem 0; margin: 0; font-variant-numeric: tabular-nums; }
.subtotal span:last-child { font-weight: 600; }
.fine { font: 0.8125rem/1.45 var(--face-util); color: var(--stone); margin: 0.25rem 0 1rem; }
.empty { padding: 1rem 0; margin: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.actions { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.75rem; }

/* ---- messages ---- */
.notice { margin: 1rem 0 0; padding: 0.75rem 0.9rem; border-left: 0.3rem solid var(--red); background: var(--sink); font: 0.9375rem/1.45 var(--face-util); }
.notice:empty { display: none; }
.neg { color: var(--warn); font-weight: 700; }

/* ---- plain tables and forms (pay, thanks, order desk) ---- */
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th, td { border-bottom: 1px solid var(--rule); padding: 0.5rem 0.4rem; text-align: left; vertical-align: top; }
th { font: 600 0.8125rem/1.3 var(--face-util); color: var(--stone); }
.row { display: flex; flex-wrap: wrap; gap: 0.1rem; }
.row form { margin: 0; }

@media (min-width: 34rem) {
  .catalog li { grid-template-columns: 1fr 5rem 7.5rem 6rem; }
  .catalog .avail { text-align: right; }
  .lines li { grid-template-columns: 1fr 5rem 9.5rem 5.5rem; }
}
@media (prefers-reduced-motion: no-preference) {
  button { transition: background-color 120ms ease; }
}

/* ---- order desk: collapsible panels, all closed until opened (owner 2026-10-06: functionally a vertical nav) ----
   Native <details>, one shared name so opening a panel closes the others where the browser supports it; no script. A panel opens by itself when an
   action just happened in it (so a notice is never hidden inside a closed panel). The header says what is inside without opening it. */

.desk { display: grid; gap: 0.5rem; grid-template-columns: minmax(0, 1fr); }
.desk > * { min-width: 0; scroll-margin-top: 1rem; }
.deskpanel { border: 1px solid var(--rule); border-radius: 0.3rem; background: var(--sink); }
.deskpanel > summary { display: flex; align-items: center; gap: 0.75rem; min-height: 3.25rem; padding: 0.5rem 0.9rem; cursor: pointer; list-style: none; }
.deskpanel > summary::-webkit-details-marker { display: none; }
.deskpanel > summary::before { content: ''; flex: none; width: 0.5rem; height: 0.5rem; border-right: 2px solid var(--stone); border-bottom: 2px solid var(--stone); transform: rotate(-45deg); transition: transform 0.15s; }
.deskpanel[open] > summary::before { transform: rotate(45deg); }
.deskpanel > summary:hover { background: var(--paper); }
.deskpanel > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.deskpanel > summary h2, .desk .deskpanel > summary h2.plain { margin: 0; font-size: 1.1rem; }
.panel-note { margin-left: auto; color: var(--stone); font: 0.85rem/1.3 var(--face-util); text-align: right; }
.panel-note.urgent { color: var(--ink); font-weight: 700; }
.deskpanel[open] > summary { border-bottom: 1px solid var(--rule); }
.panel-body { padding: 0.75rem 0.9rem 1rem; min-width: 0; overflow-x: auto; position: relative; }
.panel-body > h3:first-child { margin-top: 0.25rem; }
@media (prefers-reduced-motion: reduce) { .deskpanel > summary::before { transition: none; } }
.desk h2 { margin-top: 0.5rem; }
table.grid { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
table.grid th { font: 600 0.75rem/1.3 var(--face-util); color: var(--stone); text-align: left; padding: 0.4rem 0.5rem; border-bottom: 2px solid var(--rule); }
table.grid td { padding: 0.5rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
table.grid .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.grid td.low { color: var(--warn); font-weight: 600; }
table.grid td.neg { color: var(--warn); font-weight: 700; }
table.grid span[title] { border-bottom: 1px dotted var(--stone); cursor: help; font-family: var(--face-util); font-weight: 600; letter-spacing: 0.02em; }
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.4rem 0 0.8rem; }
.chip { display: inline-block; min-height: 2.25rem; padding: 0.35rem 0.8rem; border: 1px solid var(--rule); border-radius: 999px; background: var(--sink); color: var(--ink); font: 0.85rem/1.4 var(--face-util); text-decoration: none; }
.chip b { font-weight: 700; margin-left: 0.2rem; }
.chip.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.pill { display: inline-block; padding: 0.1rem 0.6rem; border-radius: 999px; font: 600 0.78rem/1.6 var(--face-util); white-space: nowrap; border: 1px solid var(--rule); background: var(--sink); color: var(--ink); }
.p-new { background: var(--red); border-color: var(--red); color: var(--on-red); }
.p-pending { background: transparent; border-style: dashed; color: var(--stone); }
.p-shipped { background: transparent; color: var(--ink); }
.p-expired { background: transparent; color: var(--stone); text-decoration: line-through; }
.p-archived { background: var(--sink); color: var(--stone); }
.p-review { display: block; width: fit-content; max-width: 100%; margin-top: 0.35rem; border-color: var(--warn); color: var(--warn); white-space: normal; }
button.quiet { background: transparent; border-color: var(--rule); color: var(--stone); }
/* Codes and times stay on one line; the order list scrolls sideways on a narrow phone rather than breaking them. */
table.grid td:first-child, table.grid span[title], table.grid code { white-space: nowrap; }
/* position: relative keeps the absolutely placed .sr-only labels inside the scrolling box instead of widening the page */
.table-scroll { max-width: 100%; overflow-x: auto; position: relative; }

/* ---- order desk: shipping details, stock form, notices ---- */
.notice.good, .notice.bad { padding: 0.6rem 0.9rem; border-left: 5px solid var(--ink); background: var(--sink); margin: 0.6rem 0; }
.notice.bad { border-left-color: var(--red); }
.desk-note { margin: 0.75rem 0 1rem; padding: 0.55rem 0.8rem; border-left: 3px solid var(--stone); background: var(--sink); color: var(--stone); font: 0.85rem/1.45 var(--face-util); }
details.ship { display: inline-block; max-width: 100%; }
details.ship > summary { list-style: none; cursor: pointer; min-height: 2.75rem; padding: 0.55rem 0.9rem; border: 1px solid var(--ink); border-radius: 0.25rem; background: var(--paper); color: var(--ink); font: 600 0.9rem/1.4 var(--face-util); white-space: nowrap; }
details.ship > summary::-webkit-details-marker { display: none; }
details.ship > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
details.ship[open] > summary { background: var(--ink); color: var(--paper); }
details.ship.undo { display: block; margin-top: 0.2rem; }
details.ship.undo > p { margin: 0.45rem 0; max-width: 20rem; color: var(--stone); font: 0.82rem/1.4 var(--face-util); }
details.ship form, .stockform { display: grid; gap: 0.5rem; margin-top: 0.5rem; padding: 0.75rem; border: 1px solid var(--rule); background: var(--sink); min-width: 14rem; }
details.ship label, .stockform label { display: grid; gap: 0.2rem; font: 0.8rem/1.3 var(--face-util); color: var(--stone); }
details.ship input, details.ship select, .stockform input:not([type=radio]), .stockform select { font: 1rem/1.4 var(--face-util); min-height: 2.5rem; padding: 0.3rem 0.5rem; color: var(--ink); background: var(--paper); border: 1px solid var(--stone); border-radius: 0.2rem; width: 100%; }
.stockform select[multiple] { min-height: 8rem; }
.stockform fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }
.stockform legend { font: 0.8rem/1.3 var(--face-util); color: var(--stone); padding: 0; margin-bottom: 0.25rem; }
.stockform label.inline { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.95rem; color: var(--ink); }
.stockform input[type=radio] { width: 1.25rem; height: 1.25rem; min-height: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---- order desk: categories and the per-book product cards ---- */
.catlist { list-style: none; margin: 0 0 0.5rem; padding: 0; }
.catlist li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 0.3rem; padding: 0.2rem 0; border-bottom: 1px solid var(--rule); }
.cat-name { min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.cat-name::before { content: attr(data-position); margin-right: 0.35rem; color: var(--stone); font: 0.75rem/1.3 var(--face-util); }
.category-move { display: inline-flex; align-items: center; gap: 0.1rem; margin: 0; }
.category-move button { min-width: 2.75rem; min-height: 2.75rem; margin: 0; padding: 0.15rem; font-size: 1.1rem; }
.cat-rename > summary { display: flex; align-items: center; min-height: 2.75rem; padding: 0 0.45rem; cursor: pointer; font: 0.8rem/1.3 var(--face-util); text-decoration: underline; text-underline-offset: 0.15em; }
.cat-rename[open] { grid-column: 1 / -1; }
.cat-rename form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; }
.cat-rename input { flex: 1 1 8rem; min-width: 0; font: 0.9rem/1.4 var(--face-util); min-height: 2.5rem; padding: 0.2rem 0.4rem; border: 1px solid var(--stone); border-radius: 0.2rem; background: var(--paper); color: var(--ink); }
.cat-rename button { min-height: 2.5rem; padding: 0.3rem 0.6rem; }
form.inline { display: inline-flex; align-items: center; gap: 0.3rem; margin: 0; }
form.inline input:not([type=hidden]) { font: 0.9rem/1.4 var(--face-util); min-height: 2.25rem; padding: 0.2rem 0.4rem; border: 1px solid var(--stone); border-radius: 0.2rem; width: 8rem; }
form.inline button { min-height: 2.25rem; padding: 0.3rem 0.6rem; }
/* A book is a <details>: collapsed by default, open on its own when a format needs attention, so the list
 * stays short and scannable at a glance instead of a wide table that doesn't fit the desk's narrow sidebar
 * column on desktop (each format stacks its own fields on its own lines - "multiline" - rather than
 * spreading forms across table columns, which is what blew the viewport out in the first version, 2026-09-27). */
.productcard { margin: 0 0 0.5rem; border: 1px solid var(--rule); border-radius: 0.25rem; }
.productcard > summary { list-style: none; cursor: pointer; padding: 0.6rem 0.75rem; font: 600 0.95rem/1.3 var(--face-text); }
.productcard > summary::-webkit-details-marker { display: none; }
.productcard > summary::before { content: '\25b8'; display: inline-block; width: 1em; color: var(--stone); }
.productcard[open] > summary::before { content: '\25be'; }
.productcard > summary.product-summary { display: flex; align-items: center; gap: 0.65rem; }
.productcard > summary.product-summary::before { flex: 0 0 1em; }
.product-heading { min-width: 0; }
.product-thumb { display: block; flex: 0 0 auto; width: 2.5rem; height: 4rem; object-fit: contain; border: 1px solid var(--rule); background: var(--sink); }
.productcard > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: -2px; }
.pflag { display: inline-block; margin-left: 0.4rem; padding: 0.05rem 0.5rem; border-radius: 999px; font: 600 0.75rem/1.6 var(--face-util); background: var(--sink); color: var(--stone); }
.pflag.low { color: var(--warn); background: transparent; border: 1px solid var(--warn); }
.pflag.neg { color: var(--on-red); background: var(--red); }
.formatlist { padding: 0 0.75rem 0.6rem; }
.formatrow { padding: 0.5rem 0; border-top: 1px solid var(--rule); }
.formatrow:first-child { border-top: 0; padding-top: 0.1rem; }
.fmtname { margin: 0 0 0.35rem; font: 0.9rem/1.3 var(--face-text); }
.fmtisbn { color: var(--stone); font: 0.75rem/1.35 var(--face-util); }
.fmtfields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 0.35rem 0.5rem; }
.fmtstats { grid-column: 1 / -1; margin: 0; font: 0.8rem/1.4 var(--face-util); color: var(--stone); overflow-wrap: anywhere; }
.fmtstats.low { color: var(--warn); }
.fmtstats.neg { color: var(--warn); font-weight: 700; }
form.inline-num { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.15rem 0.25rem; min-width: 0; margin: 0; }
form.inline-num label { grid-column: 1 / -1; font: 0.8rem/1.3 var(--face-util); color: var(--stone); }
form.inline-num input { min-width: 0; width: 100%; font: 0.9rem/1.4 var(--face-util); min-height: 2.25rem; padding: 0.2rem 0.3rem; border: 1px solid var(--stone); border-radius: 0.2rem; text-align: right; }
form.inline-num button { min-width: 2.5rem; min-height: 2.25rem; margin: 0; padding: 0.3rem 0.35rem; font-size: 0.8rem; }
form.offerrow { display: flex; flex-wrap: wrap; width: 100%; justify-content: space-between; align-items: center; gap: 0.3rem; margin-top: 0.4rem; padding: 0.4rem 0.6rem; background: var(--sink); font: 0.85rem/1.4 var(--face-util); border-radius: 0.2rem; }
.how-works { margin-top: 0.75rem; border-top: 1px solid var(--rule); padding-top: 0.5rem; }
.how-works > summary { cursor: pointer; color: var(--stone); font: 0.85rem/1.4 var(--face-util); }
.how-works p { margin: 0.5rem 0; font: 0.82rem/1.45 var(--face-util); color: var(--stone); }
.desk-linkcard { display: flex; align-items: center; gap: 0.7rem; margin: 0 0 0.5rem; padding: 0.5rem 0.65rem; border: 1px solid var(--rule); border-radius: 0.25rem; background: var(--sink); }
.desk-linkcopy { min-width: 0; }
.desk-linktitle { margin: 0; font: 600 0.9rem/1.35 var(--face-text); overflow-wrap: anywhere; }
.desk-linkmeta { margin: 0.2rem 0; color: var(--stone); font: 0.75rem/1.35 var(--face-util); }
.desk-linkcard a, .link-review { font: 0.8rem/1.4 var(--face-util); }
.link-review { color: var(--warn); }
/* Orders: one card per order (see routes.mjs). Header line, then books beside shipping and actions, stacked on a phone. */
.olist { border-top: 2px solid var(--rule); }
.ocard { padding: 0.8rem 0 0.9rem; border-bottom: 1px solid var(--rule); }
.ocard-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.75rem; }
.ocard-ref { font-weight: 600; white-space: nowrap; }
.ocard-when { color: var(--stone); font: 0.85rem/1.4 var(--face-util); }
.ocard-head small { color: var(--stone); font: 0.8rem/1.4 var(--face-util); }
.ocard-status { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.3rem; margin-left: auto; }
.ocard-body { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.6rem 1.5rem; margin-top: 0.55rem; }
.ocard-items { flex: 2 1 15rem; min-width: 0; margin: 0; padding: 0; list-style: none; }
.ocard-side { flex: 1 1 15rem; max-width: 24rem; min-width: 0; }
.ocard-side:empty { display: none; }
.ocard-ship { margin: 0 0 0.5rem; font: 0.9rem/1.45 var(--face-util); overflow-wrap: anywhere; }
.ocard .neg { margin: 0 0 0.5rem; color: var(--warn); font-weight: 700; }
.order-item { display: flex; align-items: center; gap: 0.4rem; margin: 0.15rem 0; min-width: 0; }
.order-thumb { display: block; flex: 0 0 auto; width: 1.875rem; height: 3rem; object-fit: contain; border: 1px solid var(--rule); background: var(--sink); }
.order-item-copy { min-width: 0; }
.order-item-copy small { display: block; margin-top: 0.1rem; font: 0.72rem/1.3 var(--face-util); color: var(--stone); }
/* Owner settings page: section titles are labels, not headlines (2026-09-29, owner: "reading super loud"). */
.desk h2.plain { font-family: var(--face-text); font-size: 1.1rem; font-weight: 700; text-transform: none; letter-spacing: 0; margin-top: 2rem; }
.desk h3 { font-size: 1.05rem; font-weight: 600; margin: 1.25rem 0 0.4rem; }
table.grid td:nth-child(3) { min-width: 10rem; overflow-wrap: anywhere; }

/* ---- the Home tab: same design system as the rest of the shop, not a separate stylesheet.
   Content is duplicated verbatim from the press homepage (see docs/decisions.md 2026-09-28); these
   rules exist so that duplicated content reads as part of one cohesive site, not a bolted-on second
   design. a11y-only hides visually while staying in the accessibility tree, same intent as .sr-only. */
.a11y-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.hero { padding: 2rem 0 1rem; }
.hero-line { margin: 0 0 0.6rem; font-size: 1.9rem; max-width: 16ch; }
.hero-sub { margin: 0; color: var(--stone); max-width: 34rem; }
.band { padding: 1.5rem 0; }
.band.rule-top { border-top: 1px solid var(--rule); }
.works-list { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.works-item { border-top: 1px solid var(--rule); }
.works-item:first-child { border-top: 0; }
.works-link { display: flex; align-items: flex-start; gap: 1rem; padding: 0.9rem 0; text-decoration: none; color: inherit; }
.works-thumb { width: 3.6rem; height: auto; flex: none; border: 1px solid var(--rule); background: var(--sink); }
.works-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.works-title { font-weight: 700; border-bottom: 1px solid transparent; }
.works-link:hover .works-title { border-bottom-color: var(--link); }
.works-blurb { color: var(--stone); font-size: 0.95rem; }
.works-status { font: 700 0.75rem/1.4 var(--face-util); letter-spacing: 0.02em; text-transform: uppercase; color: var(--stone); margin-top: 0.15rem; }
.works-status.volume-status-soon { color: var(--red); }
.works-act { margin-left: 0.5rem; color: var(--link); }
.works-link:hover .works-act { text-decoration: underline; }
.credits { margin: 0.75rem 0 0; font-size: 0.9rem; color: var(--stone); }
.pull { margin: 0; }
.pull-quote { margin: 0; font: 1.15rem/1.5 var(--face-text); font-style: italic; max-width: 34rem; }
.pull-quote::before { content: open-quote; } .pull-quote::after { content: close-quote; }
.pull-attrib { margin: 0.6rem 0 0; font: 0.85rem/1.4 var(--face-util); }
.pull-affil { color: var(--stone); }
.crosslink { margin: 1.5rem 0 0; padding: 1rem; border: 1px solid var(--rule); background: var(--sink); }
.crosslink-kicker { margin: 0; font: 700 0.75rem/1.4 var(--face-util); letter-spacing: 0.04em; text-transform: uppercase; color: var(--stone); }
.crosslink-name { margin: 0.2rem 0 0; font-size: 1.1rem; }
.crosslink-line { margin: 0.15rem 0 0; color: var(--stone); font-size: 0.9rem; }

/* ---- About / Contact: same duplicate-to-fit approach as Home, same design system. */
/* overflow-wrap deliberately left at its normal default: this heading wraps at a space, never mid-word
   (the live press site's own About page splits "MOORE" into "MOOR"/"E" at narrow widths - found in
   QA 2026-09-28 - because its own CSS breaks words rather than wrapping them; not reproduced here). */
.page-title { margin: 1rem 0 1rem; }
.prose { max-width: 34rem; }
.prose p { margin: 0 0 0.9rem; }
.bio { display: flex; flex-wrap: wrap-reverse; gap: 1.25rem; align-items: flex-start; max-width: none; }
.bio-text { flex: 1 1 18rem; margin: 0; }
.portrait { flex: 0 0 auto; margin: 0; width: 11rem; }
.portrait img { width: 100%; height: auto; display: block; border: 1px solid var(--rule); }
.cutline { margin: 0.35rem 0 0; font-size: 0.85rem; font-style: italic; color: var(--stone); }
.eyebrow { font-size: 0.85rem; letter-spacing: 0.04em; }
.eyebrow.rule-top { border-top: 1px solid var(--rule); padding-top: 1rem; }
.awards { list-style: none; margin: 0.75rem 0 0; padding: 0; max-width: 34rem; }
.award { padding: 0.6rem 0; border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: 0.15rem; }
.award:first-child { border-top: 0; }
.award-label { font-weight: 700; }
.award-detail { color: var(--stone); font-size: 0.9rem; }
.works { margin: 0; }
.works-sep { margin: 0 0.5rem; color: var(--rule); }
.body-link { font-weight: 700; }

/* ---- the frame around the harness pages: masthead, test strip, content, quiet footer ---- */
body.app { border-top: 0; padding: 0 0 1.5rem; max-width: none; }
.app .masthead-in, .app .testbar-in, .app main.appmain { max-width: 46rem; margin-inline: auto; }
.app.wide .masthead-in, .app.wide .testbar-in, .app.wide main.appmain { max-width: 72rem; }
.app main.appmain { padding: 0 1rem 1rem; }
.appfoot { max-width: 72rem; margin: 1.5rem auto 0; padding: 1rem; border-top: 1px solid var(--rule); font: 0.8rem/1.4 var(--face-util); color: var(--stone); }
/* The desk is always rendered "wide" (72rem, see .app.wide above), so .appfoot's 72rem matches it there.
   The shop page has no .app/.wide class and centers everything else - masthead-in, testbar-in, main -
   at 46rem; without this override the footer alone stayed 72rem, becoming a wider centered box whose
   left-aligned text then sat visibly left of the narrower content column above it (found in QA 2026-09-27). */
body.shop .appfoot { max-width: 46rem; }
.appfoot p { margin: 0; }
.searchform { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: end; margin: 0.4rem 0 0.8rem; }
.searchform label { display: grid; gap: 0.2rem; font: 0.8rem/1.3 var(--face-util); color: var(--stone); flex: 1 1 14rem; }
.searchform input { font: 1rem/1.4 var(--face-util); min-height: 2.5rem; padding: 0.3rem 0.5rem; color: var(--ink); background: var(--paper); border: 1px solid var(--stone); border-radius: 0.2rem; width: 100%; }

/* ---- the product popup ---- */
.pd-open { overflow: hidden; }
.pd-open-btn, button.pd-open { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 0.7rem; cursor: pointer; color: var(--ink); text-align: left; min-height: 2.75rem; }
button.pd-open span { text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 0.2em; }
button.pd-open:hover span { text-decoration-color: var(--ink); }
button.pd-open:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.pd-thumb { width: 2.6rem; height: auto; border: 1px solid var(--rule); flex: none; }
dialog.product { border: 0; padding: 0; width: min(46rem, calc(100% - 1rem)); max-height: 92vh; max-height: 92dvh; overflow: auto; background: var(--paper); color: var(--ink); border-radius: 0.4rem; box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, 0.35); }
dialog.product::backdrop { background: rgba(22, 24, 27, 0.6); }
.pd { position: relative; padding: 3.2rem 1.1rem 1.4rem; }
.pd-close { position: absolute; top: 0.6rem; right: 0.6rem; min-height: 2.75rem; padding: 0.4rem 1rem; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); font: 600 0.9rem/1.4 var(--face-util); border-radius: 0.25rem; cursor: pointer; }
.pd-close:focus-visible, .pd-add:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.pd-body { display: grid; gap: 1.2rem; }
@media (min-width: 40rem) { .pd { padding: 3.4rem 1.6rem 1.8rem; } .pd-body { grid-template-columns: 15rem minmax(0, 1fr); gap: 1.8rem; align-items: start; } }
.pd-photo { margin: 0; }
.pd-photo img { display: block; width: 100%; max-width: 15rem; height: auto; margin-inline: auto; border: 1px solid var(--rule); background: var(--sink); }
.pd-title { margin: 0 0 0.2rem; font-size: 1.35rem; line-height: 1.12; }
.pd-binding { margin: 0 0 0.8rem; font: 0.9rem/1.4 var(--face-util); color: var(--stone); }
.pd-offer { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; padding: 0.7rem 0; border-block: 1px solid var(--rule); margin-bottom: 1rem; }
.pd-price { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.pd-avail { font: 600 0.85rem/1.4 var(--face-util); color: var(--stone); }
.pd-avail.out { color: var(--warn); }
.pd-add { min-height: 2.75rem; padding: 0.5rem 1.1rem; border: 2px solid var(--ink); background: var(--ink); color: var(--paper); font: 600 0.95rem/1.4 var(--face-util); border-radius: 0.25rem; cursor: pointer; }
.pd-add:disabled { background: transparent; color: var(--stone); border-color: var(--rule); cursor: not-allowed; }
.pd-h { font: 600 0.78rem/1.3 var(--face-util); letter-spacing: 0.12em; text-transform: uppercase; color: var(--stone); margin: 1.2rem 0 0.4rem; }
.pd-about p { margin: 0 0 0.8rem; }
/* Audio taster: the sample player on the listen page, the sample list on the thank-you page, and the desk's link status chips. */
.tp { margin: 1rem 0; }
.tp-row { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.tp-row button { min-height: 2.75rem; padding: 0.4rem 1rem; font: 700 0.95rem/1.2 var(--face-util); cursor: pointer; }
@media (max-width: 30rem) { .tp-row { gap: 0.45rem; } .tp-row button { padding: 0.4rem 0.65rem; font-size: 0.88rem; } }
.tp-play { min-width: 6.5rem; background: var(--red); color: var(--on-red); border: 0; border-radius: 0.3rem; }
.tp-skip { background: var(--paper); color: var(--ink); border: 1px solid var(--stone); border-radius: 0.3rem; }
.tp-seek { width: 100%; margin: 0.9rem 0 0.2rem; min-height: 2rem; accent-color: var(--red); }
.tp-time { margin: 0; font: 0.9rem/1.4 var(--face-util); color: var(--stone); font-variant-numeric: tabular-nums; }
.tp-status { min-height: 1.4rem; margin: 0.4rem 0 0; font: 0.9rem/1.4 var(--face-util); }
.tp-again { margin-top: 0.3rem; }
.samples { padding-left: 0; list-style: none; }
.samples li { display: flex; gap: 0.9rem; align-items: center; margin: 0 0 0.9rem; }
.sample-cover { flex: none; width: 3.75rem; height: auto; border-radius: 0.15rem; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); }
.tp-more { margin: 1.75rem 0 1.25rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.tp-more h2 { margin: 0 0 0.4rem; font-size: 1.05rem; }
.tp-more p { margin: 0; }
.tp-more-list { display: flex; flex-wrap: wrap; gap: 0.9rem 1.5rem; margin: 0.9rem 0 0; padding: 0; list-style: none; }
.tp-more-list a { display: flex; align-items: center; gap: 0.65rem; max-width: 18rem; color: var(--ink); text-decoration: none; font: 0.9rem/1.35 var(--face-util); }
.tp-more-list a:hover span, .tp-more-list a:focus-visible span { text-decoration: underline; }
.more-cover { flex: none; width: 2.75rem; height: auto; border-radius: 0.12rem; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); }
.tp-head { display: flex; gap: 1.1rem; align-items: flex-start; margin: 1.25rem 0 0.75rem; }
.tp-head h1 { margin-top: 0; }
.tp-cover { flex: none; width: min(34vw, 9.5rem); height: auto; border-radius: 0.2rem; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); }
.tchip { display: inline-block; padding: 0.1rem 0.6rem; border-radius: 1rem; font: 700 0.78rem/1.5 var(--face-util); }
.t-green { background: #2f6b3a; color: #fff; } .t-amber { background: #e0a526; color: #1e2430; } .t-red { background: #ab2f25; color: #fff; } .t-grey { background: #5e5c58; color: #fff; }
.linkbox { width: 16rem; max-width: 100%; font: 0.75rem/1.3 monospace; }
.acts form { display: inline-block; margin: 0 0.25rem 0 0; }
/* Taster links: one compact line per link, so a long list stays scannable. */
.desk-tasters table.grid td { vertical-align: middle; }
.desk-tasters table.grid td:nth-child(3), .desk-tasters table.grid td:nth-child(4), .desk-tasters table.grid td:nth-child(5), .desk-tasters table.grid td:nth-child(6), .desk-tasters table.grid td.acts { white-space: nowrap; }
.linkdet { margin-top: 0.25rem; } .linkdet summary { cursor: pointer; font: 0.75rem/1.4 var(--face-util); color: var(--stone); }
.desk-tasters small { color: var(--stone); }
.desk-tasters .acts button { min-height: 2rem; padding: 0.2rem 0.65rem; font-size: 0.8rem; text-decoration: none; }
/* Marketing consent boxes on the PayPal review page: unticked, optional, plain. */
.consent { margin: 1.2rem 0; padding: 0.8rem 1rem; border: 1px solid var(--rule); border-radius: 0.3rem; }
.consent legend { font: 700 0.9rem/1.3 var(--face-util); padding: 0 0.3rem; }
.check { display: flex; gap: 0.6rem; align-items: flex-start; margin: 0.6rem 0; line-height: 1.4; }
.check input { flex: none; width: 1.4rem; height: 1.4rem; margin-top: 0.1rem; }
/* Outside reviews on the product page: a quoted teaser, who said it and where, and a link to the real thing. */
.pd-review { margin: 0 0 1.1rem; padding: 0.1rem 0 0.1rem 0.9rem; border-left: 3px solid var(--red); }
.pd-stars { margin: 0 0 0.2rem; font: 1rem/1 var(--face-util); letter-spacing: 0.12em; color: var(--red); }
.pd-review-text { margin: 0; font-style: italic; }
.pd-review-text p { margin: 0 0 0.35rem; }
.pd-review-who { font: 0.82rem/1.4 var(--face-util); color: var(--stone); }
.pd-review-link { display: inline-block; margin-top: 0.3rem; font: 600 0.85rem/1.4 var(--face-util); min-height: 2.75rem; padding-block: 0.7rem 0; }

/* The sample passage, in the owner's style: a framed white panel with a cream band, a red opening quote and a large red drop cap. */
.pd-excerpt { background: #fff; color: #16181b; border: 0.5rem solid var(--sink); border-radius: 0.9rem; box-shadow: 0 0 0 0.2rem #fff; padding: 1rem 1.15rem 1.1rem; line-height: 1.4; }
.pd-excerpt .excerpt-open { float: left; font-size: 4.4em; line-height: 0.82; margin: 0.02em 0.04em 0 -0.02em; color: #ab2f25; font-weight: 700; }
.pd-excerpt .excerpt-body { margin: 0; text-align: justify; hyphens: auto; }
.pd-excerpt .excerpt-body-lead::first-letter { float: left; font-size: 5.1em; line-height: 0.74; padding: 0.02em 0.09em 0 0.02em; font-weight: 700; color: #ab2f25; }
.pd-excerpt .excerpt-cite { display: block; clear: both; margin-top: 0.7rem; font: 0.72rem/1.3 var(--face-util); letter-spacing: 0.1em; text-transform: uppercase; color: #5e5c58; }
.pd-excerpt .excerpt-cut { margin: 0.5rem 0 0; font-style: italic; color: #5e5c58; }
@media (prefers-reduced-motion: no-preference) { dialog.product[open] { animation: pd-in 0.16s ease-out; } @keyframes pd-in { from { opacity: 0; transform: translateY(0.4rem); } to { opacity: 1; transform: none; } } }

.pd-author { margin: 0 0 .15rem; font-size: .95rem; }
.pd-variants { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 .25rem; }
.pd-variant { font: inherit; font-size: .85rem; padding: .3rem .65rem; border: 1px solid currentColor; border-radius: 999px; background: transparent; color: inherit; cursor: pointer; }
.pd-variant.current { background: var(--ink, #16181b); color: var(--cream, #efe8da); cursor: default; }
.pd-author { white-space: nowrap; }

.titlebox { min-width: 0; }
.fmt { margin: 0.1rem 0 0; font: inherit; font-size: 0.9rem; padding: 0.25rem 0.5rem; max-width: 100%; border: 1px solid var(--rule); border-radius: 4px; background: transparent; color: inherit; }
.fmt-one { margin: 0.1rem 0 0; font-size: 0.9rem; opacity: 0.75; }

.pd-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: -0.3rem 0 0.8rem; padding: 0; list-style: none; }
.pd-tag { padding: 0.1rem 0.55rem; border: 1px solid var(--rule); border-radius: 999px; font: 0.72rem/1.4 var(--face-util); letter-spacing: 0.06em; text-transform: uppercase; color: var(--stone); }

.pd-share { min-height: 2.75rem; padding: 0.5rem 1.1rem; border: 2px solid var(--ink); border-radius: 999px; background: transparent; color: var(--ink); font: 600 0.95rem/1.4 var(--face-util); cursor: pointer; }
.pd-share::before { content: ""; display: inline-block; width: 0.9em; height: 0.9em; margin-right: 0.45em; vertical-align: -0.1em; background: currentColor; -webkit-mask: url('share.svg') center / contain no-repeat; mask: url('share.svg') center / contain no-repeat; }
.pd-share:focus-visible, .pd-share-url:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.pd-share-note { min-height: 1.4em; margin: -0.6rem 0 0.8rem; font: 0.85rem/1.4 var(--face-util); color: var(--stone); }
.pd-share-url { width: 100%; font: inherit; padding: 0.4rem 0.5rem; border: 1px solid var(--rule); border-radius: 4px; background: #fff; color: var(--ink); }
/* On a phone the offer row wraps: price and availability on the first line, Add and Share side by side below, both easy to hit. */
@media (max-width: 39.99rem) { .pd-actions { flex: 1 1 100%; } .pd-add, .pd-share { flex: 1 1 0; } }

.pd-actions { display: flex; gap: 0.6rem; margin-left: auto; }

/* Confirms an add: pinned to the bottom while the cart is off screen, with the count and a way to it. */
.cartpill { white-space: nowrap; position: fixed; z-index: 20; left: 50%; bottom: max(0.9rem, env(safe-area-inset-bottom)); transform: translateX(-50%); display: inline-flex; align-items: center; gap: 0.9rem;
  padding: 0.7rem 1.1rem 0.7rem 1.3rem; min-height: 2.9rem; border-radius: 999px; background: var(--ink); color: var(--paper); text-decoration: none; font: 600 0.95rem/1.2 var(--face-util); box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,0.3); }
.cartpill[hidden] { display: none; }
.cartpill-go { padding: 0.25rem 0.7rem; border-radius: 999px; background: var(--paper); color: var(--ink); }
.cartpill:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) { .cartpill.bump { animation: pill-bump 0.5s ease-out; } @keyframes pill-bump { 0% { transform: translateX(-50%) scale(0.85); } 60% { transform: translateX(-50%) scale(1.08); } 100% { transform: translateX(-50%) scale(1); } } }
body.pd-open .cartpill { display: none; }

.removed p { margin: 0 0 0.5rem; }
.removed .row { gap: 0.4rem; }

/* Shop list rows. Phone: the title gets the full width (a wide Add button must not squeeze it), then format and price share a line, then
 * availability and Add. Wide: the familiar four columns with the format chooser under the title. */
.catalog li { grid-template-columns: minmax(7.5rem, 1fr) auto; grid-template-areas: "title title" "fmt price" "avail act"; row-gap: 0.3rem; }
.catalog .titlebox { grid-area: title; }
.catalog .fmt, .catalog .fmt-one { grid-area: fmt; justify-self: start; }
.catalog .price { grid-area: price; font-size: 1.125rem; }
.catalog .avail { grid-area: avail; }
.catalog .act { grid-area: act; }
@media (min-width: 34rem) {
  .catalog li { grid-template-columns: 1fr 5rem 7.5rem 9rem; grid-template-areas: "title price avail act" "fmt . . ."; row-gap: 0.1rem; }
  .catalog .fmt, .catalog .fmt-one { margin-left: 3.4rem; }
  .catalog .price { font-size: inherit; }
}

/* A category heading in the shop list, its own <li role="presentation"> so the <h3> inside stays a real heading for screen
 * reader navigation without breaking <ul> markup; not shown at all when only one category (or none) loaded. */
.catalog li.cathead-row { display: block; grid-template-columns: none; padding: 0; border-bottom: none; }
.cathead { margin: 1.5rem 0 0.4rem; font: 600 0.95rem/1.3 var(--face-util); text-transform: uppercase; letter-spacing: 0.03em; color: var(--stone); }
.catalog li.cathead-row:first-child { margin-top: 0; }
.catalog li.cathead-row:first-child .cathead { margin-top: 0; }
/* A collapsed category (e.g. Audio): the heading (a real <h2>, inside <summary> - still a navigable
 * heading, HTML5's own recommended disclosure pattern) becomes clickable, same look otherwise. */
.cat-collapse { margin: 1.5rem 0 0; }
.cat-collapse summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 0.4rem; }
.cat-collapse summary::-webkit-details-marker { display: none; }
.cat-collapse summary::before { content: '\25b8'; display: inline-block; width: 1em; font-size: 1.1em; color: var(--stone); }
.cat-collapse[open] summary::before { content: '\25be'; }
.cat-collapse summary .cathead { margin: 0; }
.cat-collapse summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.cat-sublist { list-style: none; margin: 0.4rem 0 0; padding: 0; }

/* A card the shop lists but never sells: title, author, an optional note, and a link that says plainly where it goes. No format
 * chooser, no price, no Add - it doesn't reuse the sellable-row grid at all. */
.catalog li.linkcard { display: block; grid-template-columns: none; grid-template-areas: none; }
.linkcard .byline { margin: 0 0 0.15rem; font-size: 0.95rem; color: var(--stone); }
.linkcard .note { margin: 0.35rem 0; font: 0.875rem/1.4 var(--face-util); color: var(--stone); }
.pd-linkout { display: inline-flex; align-items: center; min-height: 2.5rem; margin-top: 0.3rem; padding: 0.5rem 1.1rem; border: 2px solid var(--ink); border-radius: 999px;
  background: transparent; color: var(--ink); font: 600 0.9rem/1.4 var(--face-util); text-decoration: none; }
.pd-linkout:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* A conditional offer (promos.json): a small sheet pinned above the cart pill so it is seen wherever the shopper is on the page. */
.promosheet { position: fixed; z-index: 21; left: 50%; transform: translateX(-50%); bottom: calc(max(0.9rem, env(safe-area-inset-bottom)) + 3.7rem); width: min(92vw, 26rem);
  padding: 0.85rem 1rem; border: 2px solid var(--ink); border-radius: 0.6rem; background: var(--paper); color: var(--ink); box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,0.25); font: 1rem/1.4 var(--face-util); }
.promosheet[hidden] { display: none; }
.promosheet p { margin: 0 0 0.6rem; font-weight: 600; }
body.pd-open .promosheet { display: none; }

/* On a list row, beside Add: a small bag with the count already in the bag for this title, linking to the bag. Hidden when nothing is in it. */
.catalog .act { display: inline-flex; align-items: center; gap: 0.6rem; }
.rowbag { position: relative; display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 999px; color: var(--ink); text-decoration: none; }
.rowbag[hidden] { display: none; }
.rowbag-icon { width: 1.9rem; height: 1.9rem; background: currentColor; -webkit-mask: url('bag.svg') center / contain no-repeat; mask: url('bag.svg') center / contain no-repeat; }
.rowbag-n { position: absolute; top: 0.05rem; right: 0.05rem; min-width: 1.2rem; height: 1.2rem; padding: 0 0.25rem; border-radius: 999px; background: var(--red); color: var(--on-red); font: 700 0.75rem/1.2rem var(--face-util); text-align: center; }
.rowbag:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Customer catalog: keyboard entry, a readable loading/retry state, and space for the bag link. */
.skip-link { position: absolute; z-index: 30; top: 0.5rem; left: 0.5rem; transform: translateY(-200%); padding: 0.65rem 1rem;
  background: var(--paper); color: var(--ink); border: 2px solid var(--ink); font: 600 0.95rem/1.3 var(--face-util); }
.skip-link:focus { transform: none; }
.catalog-status { margin: 0.75rem 0 1rem; color: var(--stone); font: 0.9375rem/1.5 var(--face-util); }
.catalog-status:empty { display: none; }
.catalog-status button { margin-left: 0; }
body.shop { padding-bottom: 6rem; }
.cartpill { max-width: calc(100% - 2rem); }
.promosheet { max-height: calc(100vh - 7rem); max-height: calc(100dvh - 7rem); overflow-y: auto; }
@media (max-width: 39.99rem) {
  .pd-excerpt .excerpt-body { text-align: left; hyphens: none; }
}
/* On a short screen, the offer remains scrollable and cannot take over the view. */
@media (max-height: 30rem) {
  .promosheet { max-height: 35vh; max-height: 35dvh; }
  .cartpill { gap: 0.45rem; padding: 0.5rem 0.75rem; font-size: 0.875rem; }
}

/* ---- in-stock notice signup (owner, 2026-10-11): a small form for a book that cannot be bought yet ---- */
.rownotify, .pd-notify { font: 0.85rem/1.3 var(--face-util); color: var(--link); background: none; border: 0; padding: 0.35rem 0; text-decoration: underline; text-underline-offset: 0.15em; cursor: pointer; text-align: left; }
.pd-notify { margin-top: 0.6rem; }
.notify { display: grid; gap: 0.5rem; margin: 0.6rem 0 0; max-width: 28rem; grid-column: 1 / -1; }
.notify-label { display: grid; gap: 0.2rem; font: 0.8rem/1.3 var(--face-util); color: var(--stone); }
.notify-input { font: 1rem/1.4 var(--face-util); min-height: 2.5rem; padding: 0.3rem 0.5rem; color: var(--ink); background: var(--paper); border: 1px solid var(--stone); border-radius: 3px; width: 100%; box-sizing: border-box; }
.notify-go { justify-self: start; font: 600 0.95rem/1.2 var(--face-util); min-height: 2.5rem; padding: 0.4rem 0.9rem; color: var(--on-red); background: var(--red); border: 0; border-radius: 3px; cursor: pointer; }
.notify-go:disabled { opacity: 0.6; cursor: default; }
.notify-fine { font: 0.75rem/1.4 var(--face-util); color: var(--stone); margin: 0; }
.notify-fine a { color: var(--link); }
.notify-msg { font: 0.85rem/1.4 var(--face-util); margin: 0; min-height: 1.2rem; }

/* The small logo badge beside the publisher line on About (about 100px; the vector is sharp at any size). */
.brand-badge { float: left; margin: 0.2rem 1rem 0.4rem 0; height: auto; }

/* Veeqo hand-over state on an order card (desk only). */
.ocard-veeqo { margin: 0.4rem 0; font: 0.8rem/1.4 var(--face-util); }
.veeqo { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 3px; border: 1px solid var(--rule); }
.veeqo-sent { color: var(--ink); } .veeqo-failed { color: var(--warn); border-color: var(--warn); } .veeqo-none { color: var(--stone); }
form.inline { display: inline; }

/* Bookshelf Partners (wholesale): the desk panel, the partner pill on an order, and the printable invoice. */
.p-partner { background: transparent; color: var(--ink); border-color: var(--stone); }
.ocard-partner { margin: 0.4rem 0; font: 0.8rem/1.5 var(--face-util); }
.partner-edit, .partner-order { display: grid; gap: 0.5rem; margin: 0.6rem 0; }
.partner-edit label, .partner-order label { display: grid; gap: 0.15rem; font: 0.85rem/1.3 var(--face-util); }
.invoice { max-width: 46rem; margin: 0 auto; }
.invoice-parties { display: flex; flex-wrap: wrap; gap: 2rem; margin: 1rem 0; }
.invoice .grid td, .invoice .grid th { vertical-align: top; }
@media print { .masthead, .testbar, .appfoot { display: none; } .invoice .fine a { display: none; } }

/* The header is the same on the apex and the shop (owner 2026-10-13): the red masthead, then the manila-folder tab strip with the same five links in the same
   order, pointing at the apex pages. Same column as the press frame (1030px of content at desktop widths) so the tabs sit at the same x on both. */
body.shop .masthead-in { max-width: 1030px; }
body.shop .folder-tabs { max-width: calc(1030px + 2rem); }
body.shop main { max-width: calc(1030px + 2rem); }
body.shop .masthead { padding-block: 0.7rem; }
body.shop .masthead-name { font-size: clamp(1.25rem, 4.8vw, 1.6rem); }
/* a row reached from a link (the press page's Buy): marked for a moment */
.catalog li.row-linked { background: var(--sink); outline: 2px solid var(--link); outline-offset: -2px; }
/* the title is plain text now (no popup button around it): keep the small cover beside it */
.catalog .title { display: flex; align-items: center; gap: 0.7rem; }
.catalog .title .pd-thumb { flex: none; }
/* The list as plain HTML before script draws it (replaced by shop.js), and the title links to the press page. */
.catalog .static-in { grid-column: 1 / -1; }
.catalog .title a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }

/* Order desk: a light tab strip that stays at the top and opens each panel, and a way back up from the bottom of every panel. */
.desk-tabs { position: sticky; top: 0; z-index: 4; display: flex; gap: 0.35rem; overflow-x: auto; padding: 0.45rem 0; margin: 0 0 0.75rem; background: var(--paper); border-bottom: 1px solid var(--rule); scrollbar-width: thin; }
.desk-tabs a { flex: none; font: 600 0.9rem/1.2 var(--face-util); color: var(--ink); text-decoration: none; padding: 0.45rem 0.8rem; border: 1px solid var(--rule); border-radius: 0.3rem; background: var(--sink); white-space: nowrap; }
.desk-tabs a:hover { background: var(--paper); border-color: var(--stone); }
.desk-tabs a[aria-current] { border-color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }
.desk-tabs a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.deskpanel, h1#top { scroll-margin-top: 3.4rem; }
.totop { margin: 1rem 0 0; text-align: right; font: 0.85rem/1.3 var(--face-util); }
.totop a { color: var(--link); }

/* The small logo in the Home tab (owner 2026-10-13: "use it in the home tab"). It sits inside the tab's own height; on phones it replaces the word visually so the tab row is no wider than before. */
.tab-mark { flex: none; height: 1.3em; width: auto; margin-right: 0.45em; }
@media (max-width: 480px) {
  .tab-mark { margin-right: 0; }
  .tab-mark + .tab-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}