:root {
  --line: #e1e3e8;
  --muted: #62666e;
  --green-light: #f0f1f3;
  --shadow: 0 16px 48px #1720331a;
}

.primary-button, .secondary-button {
  min-height: 38px;
  border-radius: 8px;
  padding: 9px 15px;
  font-size: 13px;
  line-height: 1.4;
}
.secondary-button { border: 1px solid var(--line); }
.text-button, .quiet-button { line-height: 1.5; }
.primary-button:disabled, .secondary-button:disabled { cursor: default; }
:is(button, a, input, select, textarea, summary):focus-visible {
  outline: 2px solid #737982;
  outline-offset: 3px;
}
.site-header .nav-button, .header-menu>summary { border-radius: 8px; }
.header-menu-panel { padding: 6px; border-radius: 10px; box-shadow: 0 8px 28px #17203314; }
.search-field, .global-search form { border-radius: 9px; }
.search-field input { font-size: 14px; }
.catalog-toolbar, .collection-toolbar { gap: 12px; }
.catalog-toolbar { padding-block: 12px; }
.catalog-actions { gap: 8px; }
.pagination { gap: 10px; }

.product-grid { gap: 28px 20px; }
.workbench-card { display: flex; flex-direction: column; padding-bottom: 8px; }
.workbench-card .product-card-open { min-width: 0; }
.workbench-card .card-title {
  margin: 2px 10px 4px;
  min-height: 0;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 400;
}
.workbench-card .card-sku { min-height: 0; margin: 8px 10px 0; padding: 0; }
.workbench-card .card-code { font-size: 18px; line-height: 1.25; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.workbench-card .card-sku-options { margin: 4px 0; padding-inline: 10px; gap: 6px; }
.card-sku-options .sku-option { border-radius: 7px; }
.card-sku-options .sku-option small { font-size: 11px; }
.workbench-card .card-bottom {
  margin: 0 10px;
  padding-top: 4px;
  gap: 4px 6px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
}
.workbench-card :is(.card-price, .card-stock) { font-size: 12px; line-height: 1.5; }
.workbench-card .card-stock { margin-left: 0; font-variant-numeric: tabular-nums; }
.workbench-card .card-bottom>.text-button { min-height: 28px; padding: 0; }
.workbench-card .card-edit, .workbench-card .card-edit:hover {
  position: relative;
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #626872;
}
.workbench-card .card-edit::before {
  content: '';
  position: absolute;
  width: 28px;
  height: 28px;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  border-radius: 7px;
  background: var(--green-light);
  pointer-events: none;
}
.workbench-card .card-edit:hover::before, .workbench-card .card-edit:focus-visible::before { background: #e3e5e9; }
.workbench-card .card-edit svg { position: relative; width: 14px; height: 14px; }

.product-page, .editor-page { border-radius: 12px; }
.product-page-bar { padding-block: 14px; }
.product-summary h2 { font-size: 27px; line-height: 1.4; margin-block: 10px 14px; }
.product-summary .detail-tools { margin-top: 20px; gap: 8px; }
.product-summary .detail-description { margin-block: 18px; line-height: 1.7; }
.product-tabs { gap: 20px; }
.product-tabs>button { padding: 12px 4px; font-size: 14px; }
.product-tabs>button[aria-selected=true] { font-weight: 600; }
.form-grid, .editor-identity-fields { gap: 14px; }
.form-grid>label, .editor-identity-fields>label { min-width: 0; }
:is(.form-grid, .editor-identity-fields, .product-summary, .matching-view, .matching-dialog, .finance-filters, .staff-dialog, .account-dialog) :is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]):not([type=range]), select, textarea) {
  border-color: var(--line);
  border-radius: 8px;
}
.editor-product-actions, .dialog-actions { gap: 10px; flex-wrap: wrap; }
.editor-footer { gap: 10px; }

:is(.matching-filters, .finance-filters, .inventory-filters) { gap: 12px; }
.matching-filters { padding: 16px; border: 1px solid #eceef1; background: #f7f8fa; border-radius: 10px; }
:is(.matching-view, .finance-view, .inventory-view) :is(h1, h2) { line-height: 1.4; }
.finance-orders table { font-variant-numeric: tabular-nums; }
.inventory-dialog .stock-numbers strong { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.matching-toolbar { gap: 8px 12px; }
.finance-filters>label { color: var(--muted); font-size: 13px; }
dialog { border-radius: 12px; box-shadow: var(--shadow); }
dialog:not(.image-dialog):not(.media-viewer) h2 { font-size: 22px; line-height: 1.4; }
.dialog-actions { margin-top: 20px; }
.field-hint, .field-help { line-height: 1.6; }
input[type=file].sr-only { width: 1px; height: 1px; min-height: 0; padding: 0; }
.rich-more:not([open])>.rich-more-panel { display: none; }
.collection-toolbar { margin-bottom: 20px; }
.collection-toolbar #product-count { font-size: 12px; }
.detail-info .detail-description { line-height: 1.7; }

@media (max-width: 650px) {
  .product-grid { gap: 22px 12px; }
  .workbench-card .card-title { margin: 2px 10px 4px; font-size: 13px; }
  .workbench-card .card-sku-options { padding-inline: 10px; }
  .workbench-card .card-bottom {
    display: flex;
    margin-inline: 10px;
    gap: 2px 4px;
    padding-top: 4px;
  }
  .workbench-card :is(.card-price, .card-stock), .workbench-card .card-bottom>.text-button { font-size: 11px; }
  .workbench-card .card-edit {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }
  .primary-button, .secondary-button { min-height: 44px; padding: 10px 12px; }
  .catalog-toolbar, .collection-toolbar { gap: 10px; }
  .product-summary h2 { font-size: 23px; }
  .product-tabs { gap: 14px; }
  .product-tabs>button { font-size: 13px; }
  .matching-filters { padding: 12px; gap: 10px; }
  :is(.matching-view, .matching-dialog, .finance-filters, .staff-dialog, .account-dialog) :is(input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea) { font-size: 16px; }
  :is(.matching-view, .matching-dialog, .finance-filters, .staff-dialog, .account-dialog) :is(input:not([type=checkbox]):not([type=radio]):not([type=file]), select) { min-height: 44px; }
  .dialog-actions { gap: 8px; }
  .rich-more { position: static; }
  .rich-more-panel { position: absolute; top: 100%; left: 0; right: 0; width: 100%; max-width: 100%; }
  dialog:not(.image-dialog):not(.media-viewer) h2 { font-size: 20px; }
}

.draft-card .draft-open { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: center; }
.draft-card .draft-thumbnail { display: flex; align-items: center; justify-content: center; width: 96px; height: 96px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #f5f5f7; }
.draft-thumbnail img { display: block; width: 100%; height: 100%; object-fit: contain; }
.draft-card .draft-summary { display: flex; flex-direction: column; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.draft-summary time { color: var(--muted); font-size: 11px; }
@media (max-width: 650px) {
  .draft-card .draft-open { grid-template-columns: 80px minmax(0, 1fr); gap: 12px; }
  .draft-card .draft-thumbnail { width: 80px; height: 80px; }
}