/* Coda reference tokens; loaded after the legacy catalogue and clarity layers. */
.pc-root,
.pc-dialog {
  --pc-ink: var(--color-ink-black);
  --pc-muted: var(--color-graphite);
  --pc-line: var(--color-ash-border);
  --pc-paper: var(--color-pure-white);
  color: var(--pc-ink);
  font-family: var(--font-inter);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

.pc-root .pc-head {
  align-items: flex-start;
  gap: var(--spacing-24);
  padding-bottom: var(--spacing-24);
  margin-bottom: var(--spacing-24);
  border-bottom: 1px solid var(--pc-line);
}

.pc-root .pc-head > div { min-width: 0; }
.pc-root .pc-head > .pc-actions { align-items: flex-start; }
.pc-root .pc-head h2 {
  margin: var(--spacing-8) 0 0;
  color: var(--pc-ink);
  font-family: var(--font-display);
  font-size: var(--text-heading);
  font-weight: var(--theme-display-weight, 800);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  overflow-wrap: anywhere;
}

:is(.pc-root, .pc-dialog) .pc-kicker {
  color: var(--color-graphite);
  font: var(--font-weight-semibold) var(--text-body-sm)/var(--leading-body-sm) var(--font-inter);
  letter-spacing: var(--tracking-body-sm);
  text-transform: none;
}

.pc-root .pc-head > div > .pc-kicker::before {
  content: "";
  display: inline-block;
  width: var(--spacing-8);
  height: var(--spacing-8);
  margin-right: var(--spacing-8);
  background: var(--color-ember-orange);
  border-radius: var(--radius-md);
}

:is(.pc-root, .pc-dialog) .pc-actions { gap: var(--spacing-8); }
.pc-root .pc-management > summary,
.pc-root .pc-row-actions > summary {
  min-height: var(--theme-control-height, 44px);
  padding: var(--spacing-12) var(--spacing-16);
  border: 0;
  border-radius: var(--radius-buttons);
  box-shadow: var(--shadow-subtle-2);
  background: var(--color-pure-white);
  color: var(--color-ink-black);
  font: var(--font-weight-semibold) var(--text-body-sm)/var(--leading-body-sm) var(--font-inter);
}

.pc-root .pc-management-actions { gap: var(--spacing-8); padding-top: var(--spacing-8); }
.pc-root .pc-management > summary:hover,
.pc-root .pc-row-actions > summary:hover { box-shadow: var(--shadow-subtle); }
.pc-root .pc-management[open] > summary { background: var(--color-cream-paper); }

.pc-root .pc-stats {
  gap: var(--spacing-12);
  margin: var(--spacing-24) 0;
}

.pc-root .pc-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
  min-width: 0;
  padding: var(--spacing-20);
  border: 1px solid var(--pc-line);
  border-radius: var(--radius-cards);
  background: var(--color-pure-white);
}

.pc-root .pc-stat:first-child { background: var(--color-cream-paper); }
.pc-root .pc-stat small {
  max-width: 12em;
  color: var(--pc-muted);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-body-sm);
  overflow-wrap: anywhere;
}

.pc-root .pc-stat strong {
  flex: none;
  margin: 0;
  color: var(--pc-ink);
  font: var(--font-weight-bold) 28px/1.1 var(--font-inter);
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

.pc-root .pc-connection {
  padding: var(--spacing-12) var(--spacing-16);
  margin: var(--spacing-20) 0;
  background: var(--color-cream-paper);
  border: 1px solid var(--pc-line);
  border-radius: var(--radius-cards);
  color: var(--pc-muted);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
}

.pc-root .pc-connection strong { color: var(--pc-ink); }
.pc-root .pc-publishing-info { padding-block: 0; background: var(--color-pure-white); }
.pc-root .pc-publishing-info > summary {
  min-height: var(--theme-control-height, 44px);
  padding-block: var(--spacing-12);
  color: var(--pc-ink);
  font-size: var(--text-body-sm);
}

.pc-root .pc-publishing-info[open] { padding-bottom: var(--spacing-16); }
.pc-root .pc-publishing-info p { max-width: 78ch; margin-top: var(--spacing-12); }
.pc-root .pc-connection a { color: var(--pc-ink); text-underline-offset: var(--spacing-4); }

.pc-root .pc-toolbar {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--spacing-16);
  padding: var(--spacing-20);
  margin: var(--spacing-24) 0;
  border: 1px solid var(--pc-line);
  border-radius: var(--radius-cards);
  background: var(--color-pure-white);
}

.pc-root .pc-toolbar label,
.pc-dialog .pc-field {
  gap: var(--spacing-8);
  color: var(--pc-ink);
  font: var(--font-weight-semibold) var(--text-body-sm)/var(--leading-body-sm) var(--font-inter);
}

.pc-root .pc-filter-fields { gap: var(--spacing-16); }
.pc-root .pc-toolbar .pc-filter-actions { gap: var(--spacing-8); padding-bottom: 0; }
.pc-root .pc-toolbar :is(input, select),
.pc-dialog :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  min-height: 48px;
  padding: var(--spacing-12) var(--spacing-16);
  border: 0;
  border-radius: var(--radius-buttons);
  box-shadow: var(--shadow-subtle-2);
  background: var(--color-pure-white);
  color: var(--pc-ink);
  font: var(--font-weight-regular) var(--text-body)/var(--leading-body) var(--font-inter);
}

.pc-root .pc-toolbar :is(input, select):focus,
.pc-dialog :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus {
  box-shadow: var(--shadow-subtle);
}

.pc-root .pc-toolbar input::placeholder,
.pc-dialog :is(input, textarea)::placeholder { color: var(--color-smoke); opacity: 1; }
.pc-root .pc-results-head { gap: var(--spacing-16); margin: var(--spacing-24) 0 var(--spacing-8); }
.pc-root .pc-results-heading {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--spacing-8);
  margin: 0;
  color: var(--pc-ink);
  font: var(--font-weight-semibold) var(--text-subheading)/var(--leading-subheading) var(--font-inter);
  letter-spacing: var(--tracking-subheading);
}

.pc-root .pc-results-heading span {
  color: var(--pc-muted);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

:is(.pc-root, .pc-dialog) .pc-count {
  margin: var(--spacing-8) 0 var(--spacing-20);
  color: var(--pc-muted);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
}

.pc-root .pc-pagination { gap: var(--spacing-16); margin: var(--spacing-24) 0; font-size: var(--text-body-sm); font-variant-numeric: tabular-nums; }
.pc-root .pc-results-head .pc-pagination { margin: 0; }
.pc-root .pc-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--spacing-24); }
:is(.pc-root, .pc-dialog) .pc-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--pc-line);
  border-radius: var(--radius-cards);
  background: var(--color-pure-white);
  box-shadow: none;
}

.pc-root .pc-card { transition: border-color 140ms ease; }
.pc-root .pc-card:focus-within { border-color: var(--color-ink-black); }
.pc-root .pc-cover {
  aspect-ratio: 1;
  padding: var(--spacing-16);
  border-bottom: 1px solid var(--pc-line);
  background: var(--color-cream-paper);
  color: var(--color-graphite);
}

.pc-root .pc-cover img { display: block; object-fit: contain; }
.pc-root .pc-cover .pc-placeholder { font: var(--font-weight-regular) 64px/1 var(--font-inter); }
.pc-root .pc-cover .pc-pill {
  left: var(--spacing-12);
  top: var(--spacing-12);
  max-width: calc(100% - 24px);
  background: var(--color-pure-white);
  color: var(--pc-ink);
}

:is(.pc-root, .pc-dialog) .pc-card-body { min-width: 0; padding: var(--spacing-20); }
.pc-root .pc-card-body { flex: 1; display: flex; flex-direction: column; }
.pc-root .pc-card h3 {
  margin: var(--spacing-8) 0 var(--spacing-12);
  color: var(--pc-ink);
  font: var(--font-weight-semibold) var(--text-subheading)/var(--leading-subheading) var(--font-inter);
  letter-spacing: var(--tracking-subheading);
}

.pc-root .pc-card .pc-meta {
  color: var(--pc-muted);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
}

.pc-root .pc-card .pc-price {
  margin: var(--spacing-16) 0;
  color: var(--pc-ink);
  font: var(--font-weight-semibold) var(--text-body)/var(--leading-body) var(--font-inter);
}

.pc-root .pc-readiness { margin: var(--spacing-12) 0 var(--spacing-16); color: var(--pc-muted); font-size: var(--text-body-sm); line-height: var(--leading-body-sm); }
.pc-root .pc-card-foot {
  display: flex;
  align-items: stretch;
  gap: var(--spacing-8);
  margin-top: auto;
  padding-top: var(--spacing-16);
  border-top: 1px solid var(--pc-line);
}

.pc-root .pc-card-foot > .btn { flex: 1 1 auto; }
:is(.pc-root, .pc-dialog) .pc-pill {
  gap: var(--spacing-4);
  margin: 0 var(--spacing-4) var(--spacing-4) 0;
  padding: var(--spacing-4) var(--spacing-8);
  border: 1px solid var(--pc-line);
  border-radius: var(--radius-icons);
  background: var(--color-pure-white);
  color: var(--pc-muted);
  font: var(--font-weight-regular) var(--text-body-sm)/var(--leading-body-sm) var(--font-inter);
}

:is(.pc-root, .pc-dialog) .pc-pill.warn { background: var(--color-cream-paper); color: var(--pc-ink); border-color: var(--pc-line); }
:is(.pc-root, .pc-dialog) .pc-pill.burgundy { background: var(--color-ink-black); color: var(--color-pure-white); border-color: var(--color-ink-black); }
.pc-root .pc-table-wrap { border-color: var(--pc-line); border-radius: var(--radius-cards); background: var(--color-pure-white); }
.pc-root .pc-table :is(th, td) { border-color: var(--pc-line); padding: var(--spacing-16); }
.pc-root .pc-table th { background: var(--color-cream-paper); color: var(--pc-ink); font: var(--font-weight-semibold) var(--text-body-sm)/var(--leading-body-sm) var(--font-inter); }
.pc-root .pc-table td { font-size: var(--text-body-sm); line-height: var(--leading-body-sm); }
.pc-root .pc-table tbody tr:last-child td { border-bottom: 0; }
.pc-root .pc-table tbody tr:hover { background: var(--color-cream-paper); }
.pc-root .pc-table-product { gap: var(--spacing-12); }
.pc-root .pc-thumbnail {
  width: 64px;
  height: 64px;
  border: 1px solid var(--pc-line);
  border-radius: var(--radius-images);
  background: var(--color-pure-white);
  color: var(--pc-muted);
}

.pc-root .pc-table-product .pc-product-link { margin-bottom: var(--spacing-4); color: var(--pc-ink); }
.pc-root .pc-row-actions[open] .pc-actions { gap: var(--spacing-8); margin-top: var(--spacing-8); }

:is(.pc-root, .pc-dialog) .pc-empty {
  padding: var(--spacing-60) var(--spacing-24);
  border: 1px dashed var(--color-ash-border);
  border-radius: var(--radius-cards);
  background: var(--color-cream-paper);
  color: var(--pc-ink);
}

:is(.pc-root, .pc-dialog) .pc-empty h3 {
  margin-bottom: var(--spacing-16);
  font: var(--theme-display-weight, 800) var(--text-heading)/var(--leading-heading) var(--font-display);
  letter-spacing: var(--tracking-heading);
}

:is(.pc-root, .pc-dialog) .pc-empty p { font-size: var(--text-body); line-height: var(--leading-body); color: var(--pc-muted); }
:is(.pc-root, .pc-dialog) .pc-error {
  padding: var(--spacing-16);
  margin: var(--spacing-16) 0;
  border: 1px solid var(--color-ink-black);
  border-left-width: var(--spacing-4);
  border-radius: var(--radius-cards);
  background: var(--color-cream-paper);
  color: var(--pc-ink);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

/* Large, contained product photography remains the first detail column. */
.pc-root.pc-detail .pc-customer-preview,
.pc-dialog .pc-customer-preview {
  padding: var(--spacing-24);
  border: 1px solid var(--pc-line);
  border-radius: var(--radius-cards);
  background: var(--color-pure-white);
  color: var(--pc-ink);
}

:is(.pc-root, .pc-dialog) .pc-preview-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--spacing-32); }
:is(.pc-root, .pc-dialog) .pc-preview-grid > * { min-width: 0; }
.pc-root .pc-detail-main {
  aspect-ratio: 1;
  min-height: 0;
  padding: var(--spacing-16);
  border: 1px solid var(--pc-line);
  border-radius: var(--radius-images);
  background: var(--color-cream-paper);
}

.pc-root .pc-detail-main img { display: block; width: 100%; height: 100%; max-height: none; }
.pc-root .pc-photo-hint {
  right: var(--spacing-12);
  bottom: var(--spacing-12);
  padding: var(--spacing-8) var(--spacing-12);
  border: 1px solid var(--pc-line);
  border-radius: var(--radius-buttons);
  background: var(--color-pure-white);
  color: var(--pc-ink);
  font: var(--font-weight-semibold) var(--text-body-sm)/var(--leading-body-sm) var(--font-inter);
}

.pc-root .pc-detail-thumbs { gap: var(--spacing-8); margin-top: var(--spacing-12); max-width: 360px; }
.pc-root .pc-detail-thumbs button { padding: var(--spacing-4); border: 1px solid var(--pc-line); border-radius: var(--radius-images); background: var(--color-pure-white); }
.pc-root .pc-detail-thumbs button.selected { border-color: var(--color-ink-black); box-shadow: var(--shadow-subtle); }
.pc-root .pc-detail-thumbs img { display: block; height: auto; aspect-ratio: 1; }
:is(.pc-root, .pc-dialog) .pc-customer-preview h3 {
  margin: var(--spacing-12) 0 var(--spacing-20);
  font: var(--theme-display-weight, 800) var(--text-heading)/var(--leading-heading) var(--font-display);
  letter-spacing: var(--tracking-heading);
  overflow-wrap: anywhere;
}

:is(.pc-root, .pc-dialog) .pc-customer-preview .pc-price { margin: var(--spacing-16) 0; font-size: var(--text-subheading); font-weight: var(--font-weight-semibold); }
:is(.pc-root, .pc-dialog) .pc-customer-preview p { font-size: var(--text-body); line-height: var(--leading-body-sm); }
:is(.pc-root, .pc-dialog) .pc-customer-preview dl { margin: var(--spacing-24) 0; font-size: var(--text-body-sm); }
:is(.pc-root, .pc-dialog) .pc-customer-preview dl > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--spacing-16); border-color: var(--pc-line); padding: var(--spacing-12) 0; }
:is(.pc-root, .pc-dialog) .pc-customer-preview dt { color: var(--pc-muted); }
:is(.pc-root, .pc-dialog) .pc-customer-preview :is(dt, dd) { min-width: 0; overflow-wrap: anywhere; }
:is(.pc-root, .pc-dialog) .pc-customer-preview details { border-top: 1px solid var(--pc-line); }
:is(.pc-root, .pc-dialog) .pc-customer-preview summary { min-height: 48px; padding-block: var(--spacing-12); cursor: pointer; font-size: var(--text-body); font-weight: var(--font-weight-semibold); line-height: var(--leading-body); }
:is(.pc-root, .pc-dialog) .pc-customer-preview h4 { font: var(--font-weight-semibold) var(--text-subheading)/var(--leading-subheading) var(--font-inter); }
:is(.pc-root, .pc-dialog) .pc-preview-gallery figure { border: 1px solid var(--pc-line); border-radius: var(--radius-images); background: var(--color-cream-paper); overflow: hidden; }
:is(.pc-root, .pc-dialog) .pc-preview-gallery figcaption { padding: var(--spacing-12); font-size: var(--text-body-sm); color: var(--pc-muted); }
.pc-root .pc-stock-details { margin-top: var(--spacing-24); }
.pc-root .pc-stock-details dl { gap: var(--spacing-24); margin: var(--spacing-24) 0; }
.pc-root .pc-stock-details dl > div { border-color: var(--pc-line); padding-top: var(--spacing-12); font-size: var(--text-body-sm); }
.pc-root .pc-stock-details dt { color: var(--pc-muted); margin-bottom: var(--spacing-8); }
.pc-root .pc-stock-details dd { font-weight: var(--font-weight-semibold); }
.pc-root .pc-stock-details > .pc-actions { padding-top: var(--spacing-16); border-top: 1px solid var(--pc-line); }

/* The existing native dialogs keep their focus, cancel and draft guards. */
dialog.pc-dialog {
  border: 1px solid var(--color-ink-black);
  border-radius: var(--radius-cards);
  background: var(--color-pure-white);
  box-shadow: var(--shadow-xl);
}

dialog.pc-dialog::backdrop { background: rgb(0 0 0 / 60%); backdrop-filter: none; }
.pc-dialog .pc-dialog-head {
  gap: var(--spacing-20);
  padding: var(--spacing-24);
  background: var(--color-cream-paper);
  border-color: var(--pc-line);
  border-radius: 0;
}

.pc-dialog .pc-dialog-head h2 { margin: var(--spacing-8) 0 0; color: var(--pc-ink); font: var(--font-weight-semibold) var(--text-heading-sm)/var(--leading-heading-sm) var(--font-inter); letter-spacing: var(--tracking-heading-sm); }
.pc-dialog .pc-editor { grid-template-columns: minmax(0, 1fr) 264px; gap: var(--spacing-24); padding: var(--spacing-24); }
:is(.pc-root, .pc-dialog) .pc-section {
  padding: var(--card-padding, 24px);
  margin-bottom: var(--spacing-20);
  border: 1px solid var(--pc-line);
  border-radius: var(--radius-cards);
  background: var(--color-pure-white);
}

:is(.pc-root, .pc-dialog) .pc-section h3 { margin: 0 0 var(--spacing-8); font: var(--font-weight-semibold) var(--text-subheading)/var(--leading-subheading) var(--font-inter); letter-spacing: var(--tracking-subheading); }
:is(.pc-root, .pc-dialog) .pc-section > p { margin: 0 0 var(--spacing-20); color: var(--pc-muted); font-size: var(--text-body-sm); line-height: var(--leading-body-sm); }
.pc-dialog .pc-fields { gap: var(--spacing-20); }
.pc-dialog .pc-field small { font-weight: var(--font-weight-regular); font-size: var(--text-body-sm); line-height: var(--leading-body-sm); color: var(--pc-muted); }
.pc-dialog .pc-aside { top: 120px; }
.pc-dialog .pc-aside .pc-section { padding: var(--spacing-16); }
.pc-dialog .pc-aside :is(p, li) { font-size: var(--text-body-sm); line-height: var(--leading-body-sm); color: var(--pc-muted); }
.pc-dialog .pc-checklist { margin: var(--spacing-12) 0; }
.pc-dialog .pc-checklist li { gap: var(--spacing-8); padding-block: var(--spacing-12); border-color: var(--pc-line); }
.pc-dialog .pc-checklist li span { color: var(--pc-muted); }
.pc-dialog .pc-checklist .is-done span { color: var(--pc-ink); font-weight: var(--font-weight-bold); }
.pc-dialog .pc-check { gap: var(--spacing-12); margin: var(--spacing-12) 0; font-size: var(--text-body-sm); line-height: var(--leading-body-sm); }
.pc-dialog .pc-check input { accent-color: var(--color-carbon); }
.pc-dialog .pc-dialog-foot { gap: var(--spacing-20); padding: var(--spacing-20) var(--spacing-24); border-color: var(--pc-line); border-radius: 0; background: var(--color-pure-white); }
.pc-dialog .pc-dialog-foot p { color: var(--pc-muted); font-size: var(--text-body-sm); line-height: var(--leading-body-sm); }
.pc-dialog .pc-photo-section { background: var(--color-cream-paper); border-color: var(--pc-line); }
.pc-dialog .pc-photo-slots { gap: var(--spacing-16); margin: var(--spacing-20) 0; }
.pc-dialog .pc-photo-slot { padding: var(--spacing-12); border: 1px solid var(--pc-line); border-radius: var(--radius-cards); background: var(--color-pure-white); }
.pc-dialog .pc-photo-slot > img { height: auto; aspect-ratio: 1; margin-bottom: var(--spacing-12); border-radius: var(--radius-images); background: var(--color-pure-white); }
.pc-dialog .pc-photo-slot > .pc-pill { top: var(--spacing-20); left: var(--spacing-20); }
.pc-dialog .pc-photo-slot .pc-actions { margin: var(--spacing-12) 0; }
.pc-dialog .pc-photo-empty { margin: var(--spacing-16) 0; padding: var(--spacing-32) var(--spacing-16); border-color: var(--pc-line); border-radius: var(--radius-cards); background: var(--color-pure-white); color: var(--pc-muted); font-size: var(--text-body-sm); }
.pc-dialog .pc-upload-preview { margin-bottom: var(--spacing-12); border: 1px solid var(--pc-line); border-radius: var(--radius-images); background: var(--color-pure-white); }
.pc-dialog .pc-gallery-row { gap: var(--spacing-12); padding: var(--spacing-16) 0; border-color: var(--pc-line); }
.pc-dialog .pc-section > summary { min-height: var(--theme-control-height, 44px); padding-block: var(--spacing-8); color: var(--pc-ink); cursor: pointer; font-size: var(--text-body); font-weight: var(--font-weight-semibold); }
.pc-dialog .pc-section[open] > summary { margin-bottom: var(--spacing-16); }
.pc-dialog .pc-preview-note { padding: var(--spacing-20) var(--spacing-24); border-color: var(--pc-line); background: var(--color-cream-paper); color: var(--pc-muted); font-size: var(--text-body-sm); line-height: var(--leading-body-sm); }
.pc-dialog .pc-unsaved { padding: var(--spacing-20) var(--spacing-24); background: var(--color-cream-paper); border-color: var(--color-ink-black); box-shadow: none; }
.pc-dialog .pc-unsaved p { color: var(--pc-ink); font-size: var(--text-body); line-height: var(--leading-body); }
.pc-dialog #pi-status { margin: var(--spacing-20) 0; font-size: var(--text-body); line-height: var(--leading-body); overflow-wrap: anywhere; }
.pc-dialog #pi-review { margin: var(--spacing-20) 0; padding: var(--spacing-16); border-radius: var(--radius-cards); background: var(--color-cream-paper); font-size: var(--text-body-sm); overflow-wrap: anywhere; }
.pc-dialog #pi-review:empty { display: none; }
.pc-dialog #pi-archive { margin-top: var(--spacing-24); }
.pc-dialog #pi-archive .pc-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: var(--spacing-16); margin: var(--spacing-20) 0; }
.pc-dialog #pi-archive .pc-card > img { padding: var(--spacing-12); background: var(--color-cream-paper); border-bottom: 1px solid var(--pc-line); }
.pc-dialog #pi-archive .pc-card-body { padding: var(--spacing-16); overflow-wrap: anywhere; }
.pc-dialog #pi-archive .pc-card-body p { margin: var(--spacing-8) 0 0; color: var(--pc-muted); font-size: var(--text-body-sm); line-height: var(--leading-body-sm); }

/* Photo viewer is a pc-dialog variant, isolated from the product editor. */
dialog.pc-dialog.pc-photo-viewer { border-radius: var(--radius-images); }
.pc-dialog.pc-photo-viewer .pc-viewer-head { padding: var(--spacing-20) var(--spacing-24); gap: var(--spacing-16); border-color: var(--pc-line); background: var(--color-pure-white); }
.pc-dialog.pc-photo-viewer .pc-viewer-head h2 { font: var(--font-weight-semibold) var(--text-subheading)/var(--leading-subheading) var(--font-inter); color: var(--pc-ink); }
.pc-dialog.pc-photo-viewer .pc-viewer-image { padding: var(--spacing-24); background: var(--color-cream-paper); }
.pc-dialog.pc-photo-viewer .pc-viewer-foot { gap: var(--spacing-16); padding: var(--spacing-20) var(--spacing-24); border-color: var(--pc-line); background: var(--color-pure-white); }
.pc-dialog.pc-photo-viewer .pc-viewer-caption { margin: 0 0 var(--spacing-4); font-size: var(--text-body); color: var(--pc-ink); }
.pc-dialog.pc-photo-viewer .pc-viewer-count { color: var(--pc-muted); font-size: var(--text-body-sm); }
.pc-dialog.pc-photo-viewer .pc-viewer-error { color: var(--pc-ink); }
.pc-dialog.pc-photo-viewer .pc-viewer-actions { gap: var(--spacing-8); }

:is(.pc-root, .pc-dialog) :is(button, a, summary, input, select, textarea):focus-visible,
.pc-root .pc-results-heading:focus-visible,
.pc-dialog .pc-unsaved:focus-visible { outline: 2px solid var(--color-ink-black); outline-offset: var(--spacing-4); }

@media (hover: hover) {
  .pc-root .pc-card:hover { border-color: var(--color-slate-button); }
}

@media (max-width: 1000px) {
  .pc-root .pc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pc-dialog .pc-editor { grid-template-columns: minmax(0, 1fr); }
  .pc-dialog .pc-aside { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-16); }
  .pc-dialog .pc-aside .pc-section { margin-bottom: 0; }
  :is(.pc-root, .pc-dialog) .pc-preview-grid { gap: var(--spacing-24); }
}

@media (max-width: 760px) {
  :is(.pc-root, .pc-dialog) .pc-preview-grid { grid-template-columns: minmax(0, 1fr); }
  .pc-root.pc-detail .pc-preview-gallery { position: static; }
  .pc-root .pc-toolbar { grid-template-columns: minmax(0, 1fr); }
  .pc-root .pc-toolbar .pc-filter-actions { justify-content: flex-start; }
  .pc-root .pc-filter-fields { grid-row: auto; }
  .pc-root .pc-stock-details dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .pc-root .pc-head { gap: var(--spacing-16); margin-bottom: var(--spacing-16); padding-bottom: var(--spacing-16); }
  .pc-root .pc-head h2 { font-size: var(--text-heading); line-height: var(--leading-heading); }
  .pc-root .pc-head > .pc-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-8); }
  .pc-root .pc-management > summary { height: 100%; padding: var(--spacing-12); }
  .pc-root .pc-stat { min-height: 64px; padding: var(--spacing-12); gap: var(--spacing-8); }
  .pc-root .pc-stat small { font-size: var(--text-body-sm); }
  .pc-root .pc-stat strong { font-size: var(--text-heading-sm); }
  .pc-root .pc-stats { gap: var(--spacing-8); margin: var(--spacing-16) 0; }
  .pc-root .pc-connection { margin: var(--spacing-16) 0; }
  .pc-root .pc-toolbar { gap: var(--spacing-12); padding: var(--spacing-16); margin: var(--spacing-16) 0; }
  .pc-root .pc-toolbar .pc-filter-actions { grid-row: 2; gap: var(--spacing-8); }
  .pc-root .pc-toolbar .pc-filter-actions .btn { flex: 1 1 auto; }
  .pc-root .pc-filter-fields { grid-row: 3; gap: var(--spacing-16); padding: var(--spacing-16); background: var(--color-cream-paper); border-color: var(--pc-line); border-radius: var(--radius-cards); }
  .pc-root .pc-grid { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-20); }
  .pc-root .pc-cover { aspect-ratio: 1; }
  .pc-root .pc-card-body { padding: var(--spacing-20); }
  .pc-root .pc-card h3 { font-size: var(--text-subheading); }
  .pc-root .pc-card-foot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-8); }
  .pc-root .pc-card-foot > .btn:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .pc-root .pc-results-head { gap: var(--spacing-12); margin: var(--spacing-20) 0 var(--spacing-8); }
  .pc-root .pc-results-head .pc-pagination { width: 100%; }
  .pc-root .pc-pagination { gap: var(--spacing-8); }
  .pc-root .pc-count { margin-bottom: var(--spacing-16); }
  .pc-root .pc-thumbnail { width: 56px; height: 56px; }
  :is(.pc-root, .pc-dialog) .pc-empty { padding: var(--spacing-40) var(--spacing-20); }
  :is(.pc-root, .pc-dialog) .pc-empty h3 { font: var(--font-weight-semibold) var(--text-heading-sm)/var(--leading-heading-sm) var(--font-inter); letter-spacing: var(--tracking-heading-sm); }
  .pc-root.pc-detail .pc-customer-preview,
  .pc-dialog .pc-customer-preview { padding: var(--spacing-16); }
  :is(.pc-root, .pc-dialog) .pc-customer-preview h3 { font-size: var(--text-heading); line-height: var(--leading-heading); }
  .pc-root .pc-detail-main { padding: var(--spacing-8); }
  .pc-root .pc-photo-hint { right: var(--spacing-8); bottom: var(--spacing-8); padding: var(--spacing-8); }
  .pc-root .pc-detail-thumbs { max-width: 280px; }
  .pc-root .pc-stock-details { padding: var(--spacing-16); }
  .pc-root .pc-stock-details dl { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-16); margin: var(--spacing-20) 0; }
  dialog.pc-dialog { border-radius: var(--radius-cards); }
  .pc-dialog .pc-dialog-head { padding: var(--spacing-16); gap: var(--spacing-12); }
  .pc-dialog .pc-dialog-head h2 { font-size: var(--text-heading-sm); }
  .pc-dialog .pc-editor { padding: var(--spacing-12); gap: var(--spacing-16); }
  .pc-dialog .pc-section { padding: var(--spacing-16); margin-bottom: var(--spacing-16); }
  .pc-dialog .pc-fields { gap: var(--spacing-16); }
  .pc-dialog .pc-aside { grid-template-columns: minmax(0, 1fr); }
  .pc-dialog .pc-dialog-foot { position: static; padding: var(--spacing-16); padding-bottom: max(var(--spacing-16), env(safe-area-inset-bottom, 0px)); gap: var(--spacing-16); }
  .pc-dialog .pc-preview-note { padding: var(--spacing-16); }
  .pc-dialog .pc-unsaved { position: relative; padding: var(--spacing-16); }
  .pc-dialog #pi-archive .pc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-12); }
  .pc-dialog #pi-archive .pc-card-body { padding: var(--spacing-12); }
  .pc-dialog.pc-photo-viewer .pc-viewer-head,
  .pc-dialog.pc-photo-viewer .pc-viewer-foot { padding: var(--spacing-16); gap: var(--spacing-12); }
  .pc-dialog.pc-photo-viewer .pc-viewer-head h2 { font-size: var(--text-body); }
  .pc-dialog.pc-photo-viewer .pc-viewer-image { padding: var(--spacing-8); }
  .pc-dialog.pc-photo-viewer .pc-viewer-caption { font-size: var(--text-body-sm); }
}

@media (max-width: 380px) {
  .pc-root .pc-head h2 { font-size: var(--text-heading); }
  .pc-root .pc-stat { align-items: flex-start; }
  .pc-root .pc-stat strong { padding-top: var(--spacing-4); }
  .pc-root .pc-toolbar { padding: var(--spacing-12); }
  .pc-root .pc-management > summary { padding-inline: var(--spacing-8); }
  .pc-dialog #pi-archive .pc-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1100px) and (max-height: 500px) {
  .pc-dialog .pc-dialog-head,
  .pc-dialog .pc-dialog-foot { position: static; }
}

@media (max-height: 500px) {
  .pc-dialog.pc-photo-viewer .pc-viewer-head,
  .pc-dialog.pc-photo-viewer .pc-viewer-foot { padding: var(--spacing-8) var(--spacing-12); gap: var(--spacing-8); }
  .pc-dialog.pc-photo-viewer .pc-viewer-head h2 { font-size: var(--text-body); }
  .pc-dialog.pc-photo-viewer .pc-viewer-image { padding: var(--spacing-8); }
}

@media (prefers-reduced-motion: reduce) {
  .pc-root .pc-card { transition: none; }
}
/* Catalogue composition controls and a scaled first-page layout preview. */
.pc-root .pc-toolbar:has(.pc-sort-select){grid-template-columns:minmax(180px,1fr) minmax(170px,.65fr) auto}
.pc-root .pc-filter-hint{grid-column:1/-1;margin:0;font-size:12px;line-height:1.5;color:var(--pc-muted)}
.pc-sort-header{border:0;background:transparent;color:inherit;padding:0;font:inherit;font-weight:600;text-align:left;cursor:pointer;min-height:36px}
.pc-sort-header:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.pc-pdf-studio{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.85fr);gap:36px;padding:30px}
.pc-pdf-studio h3{font-family:var(--font-manrope, sans-serif);font-size:28px;line-height:1.15;letter-spacing:-1px;margin:12px 0}
.pc-pdf-studio section>p{font-size:14px;line-height:1.65;margin-bottom:24px}
.pc-pdf-studio .pc-pdf-note{font-size:12px;color:var(--pc-muted);margin:18px 0 0}
.pc-pdf-sheet{--paper:#fcfaf5;--sheet-ink:#292723;--card:#fff;--gold:#a3814e;background:var(--paper);color:var(--sheet-ink);border:1px solid #ddd6c9;aspect-ratio:210/297;padding:5.7%;align-self:start;box-shadow:0 12px 35px #00000012;display:flex;flex-direction:column}
.pc-pdf-sheet[data-theme=mono]{--paper:#fff;--sheet-ink:#171717;--card:#fff;--gold:#6c6c6c}
.pc-pdf-sheet[data-theme=ink]{--paper:#172a28;--sheet-ink:#f5ecd9;--card:#243a37;--gold:#c5ab75;border-color:#172a28}
.pc-pdf-sheet-head{display:flex;flex-direction:column;align-items:center;padding:0 0 5%;border-bottom:1px solid var(--gold);margin-bottom:4%;font-family:Georgia,serif;letter-spacing:3px}
.pc-pdf-sheet-head strong{font-size:19px;font-weight:400}.pc-pdf-sheet-head span{font:7px/1.8 sans-serif;letter-spacing:4px}
.pc-pdf-mini-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(4,minmax(0,1fr));gap:9px;flex:1;min-height:0}
.pc-pdf-mini-card{background:var(--card);border:1px solid color-mix(in srgb,var(--gold) 25%,transparent);padding:6px;display:flex;flex-direction:column;align-items:center;min-width:0;overflow:hidden}
.pc-pdf-mini-card img,.pc-pdf-placeholder{height:49px;max-height:55%;width:100%;object-fit:contain;flex:1;min-height:0;margin-bottom:3px}
.pc-pdf-placeholder{display:grid;place-items:center;font:25px Georgia,serif;color:var(--gold)}
.pc-pdf-mini-card small{font:7px/1.4 sans-serif;color:var(--gold);max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.pc-pdf-mini-card strong{font:8px/1.3 sans-serif;text-align:center;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere}
.pc-pdf-sheet-foot{display:flex;justify-content:space-between;border-top:1px solid var(--gold);margin-top:4%;padding-top:3%;font:7px sans-serif;letter-spacing:1px}
.pc-pdf-progress{font-size:13px;line-height:1.6;padding:0 30px}.pc-pdf-progress:empty{display:none}
@media(max-width:1050px){.pc-root .pc-toolbar:has(.pc-sort-select){grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.pc-root .pc-filter-actions{grid-column:1/-1}}
@media(max-width:650px){.pc-pdf-studio{grid-template-columns:1fr;padding:20px;gap:24px}.pc-pdf-sheet{width:min(330px,100%);justify-self:center}.pc-root .pc-toolbar:has(.pc-sort-select){grid-template-columns:minmax(0,1fr)}.pc-root .pc-sort-select{grid-row:2}.pc-root .pc-toolbar .pc-filter-actions{grid-row:3}.pc-root .pc-toolbar .pc-filter-fields{grid-row:4}.pc-pdf-studio h3{font-size:24px}}