:root {
  --ink: #14231f;
  --muted: #6f756f;
  --line: #dfddd7;
  --panel: #ffffff;
  --soft: #f5f3ef;
  --accent: #0c7168;
  --accent-2: #07534d;
  --warn: #c88a17;
  --danger: #991b1b;
  --good: #166534;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Baloo 2", "Segoe UI", Arial, sans-serif;
  color: var(--ink);
  background: #f5f3ef;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
}

button.secondary,
#reset,
.pager button {
  background: #fff;
  color: var(--accent);
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.app {
  display: grid;
  grid-template-columns: 330px 1fr;
  height: 100vh;
}

.sidebar {
  background: var(--panel);
  border-right: 1px solid var(--line);
  padding: 18px;
  overflow: auto;
}

.brand {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 18px;
}

.mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  border-radius: 8px;
}

h1,
h2,
h3 {
  margin: 0;
}

h1 {
  font-size: 19px;
}

h2 {
  font-size: 18px;
}

h3 {
  font-size: 14px;
  color: var(--accent);
  margin: 18px 0 8px;
}

p {
  margin: 4px 0 0;
  color: var(--muted);
}

#dbPath {
  max-width: 230px;
  overflow-wrap: anywhere;
  font-size: 11px;
}

.stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 18px;
}

.stat {
  border: 1px solid var(--line);
  background: var(--soft);
  border-radius: 8px;
  padding: 10px;
}

.stat strong {
  display: block;
  font-size: 20px;
}

.stat span {
  color: var(--muted);
  font-size: 12px;
}

.filters {
  display: grid;
  gap: 12px;
}

label {
  display: grid;
  gap: 5px;
  color: #344054;
  font-size: 12px;
  font-weight: 600;
}

.field-block {
  display: grid;
  gap: 5px;
  color: #344054;
  font-size: 12px;
  font-weight: 600;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px;
  background: #fff;
  color: var(--ink);
}

select[multiple] {
  min-height: 132px;
  padding: 4px;
}

select[multiple] option {
  padding: 5px 7px;
}

.multi-dropdown {
  position: relative;
}

.multi-dropdown summary {
  width: 100%;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 32px 8px 8px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  font-weight: 500;
}

.multi-dropdown summary::-webkit-details-marker {
  display: none;
}

.multi-dropdown summary::after {
  content: "v";
  position: absolute;
  right: 10px;
  top: 8px;
  color: #667085;
  font-size: 11px;
}

.multi-dropdown[open] summary {
  border-color: var(--accent);
}

.multi-dropdown-panel {
  position: absolute;
  z-index: 8;
  width: 100%;
  max-height: 260px;
  overflow: auto;
  margin-top: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.16);
  padding: 6px;
}

.multi-option {
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  font-weight: 500;
}

.multi-option:hover {
  background: #eef7fb;
}

.multi-option input {
  width: 14px;
  height: 14px;
  padding: 0;
}

textarea {
  min-height: 130px;
  resize: vertical;
  line-height: 1.35;
}

.feature-textarea {
  min-height: 92px;
}

.feature-rich-editor {
  width: 100%;
  min-height: 36px;
  height: auto;
  max-height: none;
  overflow: visible;
  overflow-wrap: anywhere;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  white-space: pre-wrap;
}

.feature-rich-editor:focus {
  border-color: var(--accent);
  outline: 2px solid rgba(31, 77, 120, 0.12);
}

.feature-rich-editor strong {
  font-weight: 700;
}

.feature-rich-editor span {
  font-weight: 400;
}

.feature-row {
  display: grid;
  grid-template-columns: minmax(120px, 28%) minmax(0, 1fr);
}

.feature-heading-cell,
.feature-value-cell {
  padding: 7px 9px;
}

.feature-heading-cell {
  border-right: 1px solid var(--line);
}

.feature-row + .feature-row {
  border-top: 1px solid rgba(26, 57, 69, 0.08);
}

.feature-continuation .feature-heading-cell {
  background: rgba(26, 57, 69, 0.025);
}

.filter-actions {
  display: flex;
  gap: 8px;
}

.filter-actions button { flex: 1 1 0; min-width: 0; }
.filter-actions #adminMode { background: transparent; color: #fff; border-color: #7d8b85; }

.mode-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 18px;
}

.wood-collection-card header small { display: block; margin-top: 3px; color: #78847f; font-size: 11px; }
.wood-swatch img { object-fit: cover; }
.wood-description { margin: 18px 0 0; color: #596a63; line-height: 1.5; }

.workspace {
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr;
  height: 100vh;
}

.list-pane,
.admin-pane {
  min-width: 0;
}

.list-pane {
  background: #f9fafb;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.admin-pane {
  overflow: auto;
}

.pane-head {
  flex: 0 0 auto;
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: rgba(249, 250, 251, 0.96);
  border-bottom: 1px solid var(--line);
}

.pager {
  display: flex;
  gap: 8px;
}

.product-list-actions { display: flex; align-items: center; gap: 12px; }
.product-view-switch { display: flex; }
.product-view-switch button { min-width: 76px; border-radius: 7px 0 0 7px; }
.product-view-switch button + button { margin-left: -1px; border-radius: 0 7px 7px 0; }

.products-gallery {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 18px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(245px, 1fr));
  grid-auto-rows: max-content;
  align-content: start;
  gap: 16px;
}
.product-gallery-card { overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: #fff; cursor: pointer; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.product-gallery-card:hover { transform: translateY(-2px); border-color: #9cb8ae; box-shadow: 0 10px 28px rgba(20,35,31,.11); }
.product-gallery-card:focus-visible, .product-gallery-card.active { outline: 3px solid rgba(12,113,104,.2); border-color: var(--accent); }
.product-gallery-image { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; overflow: hidden; background: #f5f3ef; }
.product-gallery-image > img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.product-gallery-placeholder { display: grid; place-items: center; gap: 5px; color: #929791; }
.product-gallery-placeholder span { font-size: 38px; line-height: 1; }
.product-gallery-content { display: grid; gap: 13px; padding: 15px; }
.product-gallery-heading h3 { margin: 0; color: var(--ink); font-size: 17px; line-height: 1.12; }
.product-gallery-heading p { margin-top: 4px; color: var(--accent); font-size: 12px; font-weight: 600; }
.product-gallery-metrics { display: flex; flex-wrap: wrap; gap: 6px; }
.product-metric { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 5px 7px; border-radius: 999px; background: #f2f3f0; color: #4d5a54; font-size: 10px; }
.product-metric > span { color: #6d7b75; font-weight: 800; }
.product-metric strong { max-width: 105px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.product-metric small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.product-metric.good { background: #dcece6; color: #07534d; }
.product-metric.warn { background: #f4e5bf; color: #76510f; }
.product-gallery-content .info-readiness { justify-self: start; }

.table-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--accent);
  color: #fff;
  text-align: left;
  padding: 9px;
}

td {
  border-bottom: 1px solid #e8edf3;
  padding: 8px 9px;
  vertical-align: top;
}

tr {
  cursor: pointer;
}

tbody tr:nth-child(odd) {
  background: #e8f6fb;
}

tbody tr:hover,
tbody tr.active {
  background: #dbeafe;
}

.info-readiness {
  --info-color: #8b98a6;
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 6px;
  min-width: 86px;
  padding: 5px 8px 5px 5px;
  border: 1px solid color-mix(in srgb, var(--info-color) 32%, white);
  border-radius: 999px;
  background: color-mix(in srgb, var(--info-color) 8%, white);
  white-space: nowrap;
}

.info-readiness-score {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: white;
  background: var(--info-color);
  font-size: 10px;
  font-weight: 800;
}

.info-readiness-label { color: #334b60; font-size: 11px; font-weight: 700; }
.info-readiness-demo { --info-color: #16845b; }
.info-readiness-developing { --info-color: #c08314; }
.info-readiness-edit { --info-color: #b34b4b; }

.pill {
  display: inline-block;
  padding: 3px 7px;
  border-radius: 999px;
  background: #e5e7eb;
  color: #374151;
  font-size: 11px;
}

.pill.published {
  background: #dcfce7;
  color: var(--good);
}

.pill.featured {
  background: #fef3c7;
  color: #92400e;
}

.featured-star {
  color: #d97706;
}

.featured-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
}

.featured-toggle input {
  width: auto;
  margin: 0;
}

.header-featured-toggle {
  min-height: 25px;
  font-size: 12px;
  font-weight: 600;
}

.image-preview-pill {
  border: 0;
  display: inline-block;
  padding: 3px 7px;
  border-radius: 999px;
  background: #dcfce7;
  color: var(--good);
  font-size: 11px;
  line-height: 1.2;
}

.image-preview-pill:hover,
.image-preview-pill:focus {
  outline: 2px solid rgba(22, 101, 52, 0.25);
  background: #bbf7d0;
}

.pill.draft {
  background: #fef3c7;
  color: var(--warn);
}

.pill.no {
  background: #fee2e2;
  color: var(--danger);
}

.detail-pane {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(24, 32, 42, 0.45);
}

.detail-pane[hidden] {
  display: none;
}

.image-preview-overlay {
  position: fixed;
  inset: 0;
  z-index: 35;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(24, 32, 42, 0.5);
}

.image-preview-modal {
  width: min(720px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  background: var(--panel);
  border-radius: 10px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
  padding: 16px;
}

.image-preview-header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
}

.image-preview-modal img {
  display: block;
  width: 100%;
  max-height: 68vh;
  object-fit: contain;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.image-preview-meta {
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.detail-modal {
  width: min(1120px, calc(100vw - 44px));
  max-height: calc(100vh - 44px);
  overflow: auto;
  background: var(--panel);
  border-radius: 10px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
  padding: 18px;
}

.admin-pane {
  grid-column: 1 / -1;
  background: var(--panel);
  padding: 18px;
}

.admin-header {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.admin-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.admin-grid {
  display: grid;
  grid-template-columns: minmax(520px, 1fr) 380px;
  gap: 18px;
  margin-top: 18px;
}

.admin-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #fbfdff;
}

.inline-form,
.admin-search,
.merge-form {
  display: grid;
  gap: 10px;
}

.inline-form {
  grid-template-columns: 1fr auto;
  margin: 10px 0;
}

.admin-search {
  grid-template-columns: 1fr auto;
  margin: 12px 0;
}

.admin-list-wrap {
  max-height: calc(100vh - 300px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.admin-list-wrap th {
  top: 0;
}

.merge-form {
  margin-top: 12px;
}

.note {
  font-size: 12px;
  line-height: 1.35;
}

.terms-picker {
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.empty-state {
  display: grid;
  place-items: center;
  align-content: center;
  height: 100%;
  text-align: center;
}

.detail-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.detail-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.detail-header h2 {
  line-height: 1.2;
}

.meta-line {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.classification-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.classification-grid .read-panel p {
  margin: 8px 0 0;
}

.classification-grid .read-panel > small,
.field-block > span small {
  color: var(--muted);
  font-weight: 400;
}

.form-grid .wide {
  grid-column: 1 / -1;
}

.product-edit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.product-edit-column {
  display: grid;
  gap: 12px;
}

.product-edit-column-main {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  height: 100%;
}

.product-short-description {
  min-height: 65px;
}

.product-feature-field {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
}

.product-feature-field textarea,
.product-feature-field .feature-rich-editor {
  flex: 0 0 auto;
  height: auto;
  min-height: 36px;
}

.product-image-panel {
  display: grid;
  gap: 6px;
  width: 100%;
}

.product-image-thumb,
.product-image-placeholder {
  width: 100%;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.product-image-thumb {
  display: block;
  padding: 0;
  overflow: hidden;
  cursor: zoom-in;
}

.product-image-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  background: #fff;
}

.product-image-placeholder {
  display: grid;
  place-items: center;
  color: #667085;
  font-weight: 500;
  text-align: center;
  padding: 14px;
}

.product-image-caption {
  color: #667085;
  font-size: 11px;
  overflow-wrap: anywhere;
}

.save-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

.read-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
  padding: 10px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 12px;
}

.component-shell {
  display: grid;
  gap: 10px;
}

.component-group {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.component-group-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 12px;
  background: #eef6fb;
  border-bottom: 1px solid var(--line);
}

.component-group-head strong,
.component-group-head span {
  display: block;
}

.component-group-head span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.component-table-wrap {
  max-height: 340px;
  overflow: auto;
  background: #fff;
}

.component-table th {
  top: 0;
}

.component-table td {
  cursor: default;
}

.component-table tbody tr:nth-child(odd) {
  background: #f7fbfd;
}

.component-table tbody tr:hover {
  background: #eef7fb;
}

.variants {
  display: grid;
  gap: 10px;
}

.variant-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #fbfdff;
}

.variant-primary-section {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.variant-details-column,
.variant-image-column {
  display: grid;
  gap: 12px;
}

.variant-identity {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 38%);
  gap: 18px;
  align-items: start;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
}

.variant-identity-main {
  display: grid;
  gap: 3px;
}

.variant-identity-main span {
  color: var(--muted);
  font-size: 14px;
}

.variant-identity-meta {
  display: grid;
  justify-items: end;
  gap: 8px;
}

.variant-sku-field {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr);
  align-items: center;
  gap: 8px;
  margin: 0;
}

.variant-sku-field > span {
  color: var(--ink);
  font-weight: 700;
}

.variant-sku-field input {
  min-width: 0;
  padding: 7px 9px;
}

.variant-status-pill {
  display: flex;
  justify-content: flex-end;
}

.variant-image-panel {
  display: grid;
  gap: 6px;
  width: 100%;
}

.variant-image-thumb,
.variant-image-placeholder {
  width: 100%;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.variant-image-thumb {
  display: block;
  padding: 0;
  overflow: hidden;
  cursor: zoom-in;
}

.variant-image-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.variant-image-placeholder {
  display: grid;
  place-items: center;
  padding: 14px;
  color: var(--muted);
  text-align: center;
}

.variant-image-caption {
  color: var(--muted);
  font-size: 11px;
  overflow-wrap: anywhere;
}

.variant-options-section {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.information-section {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.information-section > h3,
.variant-description-section > h4 {
  margin: 0 0 10px;
}

.information-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
}

.information-tab {
  padding: 8px 14px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
  background: transparent;
  color: var(--muted);
}

.information-tab.active {
  margin-bottom: -1px;
  border-color: var(--line);
  background: #fff;
  color: var(--text);
}

.information-panel {
  padding-top: 14px;
}

.information-panel[hidden] {
  display: none;
}

.dimensional-profile-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.dimension-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 4px 18px rgba(28, 48, 70, 0.05);
}

.dimension-card-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(135deg, #f6f9fc, #eef4fa);
}

.dimension-card-heading span {
  color: #173a5e;
  font-weight: 700;
}

.dimension-card-heading small,
.dimension-source {
  color: var(--muted);
  font-size: 10px;
}

.dimension-table {
  width: 100%;
  border-collapse: collapse;
}

.dimension-table th,
.dimension-table td {
  position: static;
  padding: 11px 16px;
  border-bottom: 1px solid #edf1f5;
  background: transparent;
  text-align: left;
}

.dimension-table th {
  width: 58%;
  color: #4b6074;
  font-size: 12px;
  font-weight: 500;
}

.dimension-table td {
  color: #1769aa;
  font-size: 13px;
  font-weight: 700;
}

.dimension-source {
  padding: 10px 16px 12px;
}

.pricing-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.fabric-requirements-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  min-height: 260px;
}

.fabric-requirements-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 4px 18px rgba(28, 48, 70, 0.05);
}

.fabric-requirements-heading {
  display: grid;
  gap: 2px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(135deg, #f6f9fc, #eef4fa);
}

.fabric-requirements-heading span { color: #173a5e; font-weight: 700; }
.fabric-requirements-heading small,
.fabric-requirements-source { color: var(--muted); font-size: 10px; }
.fabric-requirements-body { max-height: 390px; overflow: auto; }
.fabric-requirement-group h4 { margin: 0; padding: 12px 16px 7px; color: #36566f; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.fabric-requirements-table { width: 100%; border-collapse: collapse; }
.fabric-requirements-table th,
.fabric-requirements-table td { padding: 9px 16px; border-bottom: 1px solid #edf1f5; text-align: left; }
.fabric-requirements-table th { width: 58%; color: #4b6074; font-size: 12px; font-weight: 500; }
.fabric-requirements-table td { color: #1769aa; font-size: 13px; font-weight: 700; }
.fabric-requirements-source { padding: 10px 16px 12px; }
.fabric-requirements-empty { min-height: 185px; display: grid; place-items: center; padding: 20px; color: var(--muted); text-align: center; }
.fabric-requirements-future { background: #fbfcfe; }

.pricing-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 4px 18px rgba(28, 48, 70, 0.05);
}

.pricing-card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(135deg, #f6f9fc, #eef4fa);
}

.pricing-card-heading > div {
  display: grid;
  gap: 2px;
}

.pricing-card-heading span {
  color: #173a5e;
  font-weight: 700;
}

.pricing-card-heading small,
.pricing-source,
.pricing-note {
  color: var(--muted);
  font-size: 10px;
}

.pricing-status {
  padding: 3px 8px;
  border-radius: 999px;
  background: #dcfce7;
  color: #166534 !important;
  font-size: 10px;
}

.pricing-status.calculated {
  background: #fef3c7;
  color: #92400e !important;
}

.pricing-table-wrap {
  max-height: 390px;
  overflow: auto;
}

.pricing-table {
  width: 100%;
  border-collapse: collapse;
}

.pricing-table th,
.pricing-table td {
  padding: 10px 16px;
  border-bottom: 1px solid #edf1f5;
}

.pricing-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #fff;
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pricing-table th:last-child,
.pricing-table td:last-child {
  text-align: right;
}

.pricing-table td:last-child {
  color: #1769aa;
  font-weight: 700;
}

.pricing-base-row {
  background: #f2f8fd;
}

.pricing-source {
  padding: 10px 16px 12px;
}

.pricing-hero {
  display: grid;
  gap: 4px;
  padding: 22px 18px 16px;
  text-align: center;
}

.pricing-hero > span,
.pricing-hero small,
.pricing-metrics span {
  color: var(--muted);
}

.pricing-hero strong {
  color: #1769aa;
  font-size: 28px;
}

.pricing-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 0 16px;
}

.pricing-metrics div {
  display: grid;
  gap: 3px;
  padding: 10px 11px;
  border: 1px solid #e7edf4;
  border-radius: 7px;
  background: #fafcff;
}

.pricing-metrics span { font-size: 10px; }
.pricing-metrics strong { color: #243b53; font-size: 13px; }

.pricing-range-visual {
  padding: 16px 16px 6px;
}

.pricing-range-track {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #dce6f0;
}

.pricing-range-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #1769aa, #49a3dd);
}

.pricing-range-visual > div:last-child {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  color: var(--muted);
  font-size: 9px;
}

.pricing-insight {
  margin: 10px 16px;
  padding: 10px 12px;
  border-left: 3px solid #1769aa;
  border-radius: 4px;
  background: #eef7fd;
  color: #244b6e;
  font-size: 11px;
}

.pricing-note {
  margin: 12px 16px 16px;
  line-height: 1.45;
}

.pricing-empty {
  grid-column: 1 / -1;
  min-height: 150px;
  display: grid;
  place-items: center;
  padding: 20px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--soft);
  color: var(--muted);
  text-align: center;
}

.volume-hero {
  display: grid;
  gap: 4px;
  padding: 24px 18px 18px;
  text-align: center;
}

.volume-hero strong {
  color: #1769aa;
  font-size: 28px;
}

.volume-hero span,
.volume-note,
.volume-unavailable {
  color: var(--muted);
}

.volume-facts {
  display: grid;
  gap: 0;
  margin: 0 16px;
  border: 1px solid #edf1f5;
  border-radius: 7px;
}

.volume-facts div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 11px;
  border-bottom: 1px solid #edf1f5;
}

.volume-facts div:last-child { border-bottom: 0; }
.volume-facts dt { color: var(--muted); }
.volume-facts dd { margin: 0; font-weight: 700; }
.volume-note { margin: 14px 16px 16px; font-size: 10px; line-height: 1.45; }
.volume-unavailable { min-height: 180px; display: grid; place-items: center; padding: 22px; text-align: center; }

.dimensional-profile-empty {
  grid-column: 1 / -1;
  min-height: 110px;
  display: grid;
  place-items: center;
  padding: 18px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--soft);
  color: var(--muted);
  text-align: center;
}

.variant-component-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 4px 0 2px;
}

.variant-component-group {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.variant-component-heading {
  margin-bottom: 7px;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}

.variant-component-row {
  display: grid;
  max-height: 240px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0;
  scrollbar-width: thin;
}

.variant-option-table-head,
.component-thumbnail {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) minmax(86px, 0.38fr);
  gap: 10px;
  align-items: center;
}

.variant-option-table-head {
  padding: 0 6px 6px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
}

.component-thumbnail {
  width: 100%;
  min-height: 38px;
  padding: 6px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: #fff;
  text-align: left;
}

.component-thumbnail:hover,
.component-thumbnail:focus {
  background: #f7fbfd;
  outline: none;
}

.component-thumbnail-image {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  overflow: hidden;
  border-radius: 3px;
  background: #f3f6f8;
}

.component-option-icon-button {
  width: 20px;
  height: 20px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 3px;
  background: transparent;
  cursor: zoom-in;
}

.component-option-icon-button img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.component-thumbnail-placeholder {
  max-width: 54px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.component-thumbnail-code {
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.component-option-description,
.component-option-surcharge {
  min-width: 0;
  font-size: 10px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.component-option-surcharge {
  text-align: right;
}

.component-thumbnail::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 0;
  bottom: calc(100% + 7px);
  z-index: 10;
  display: none;
  width: max-content;
  max-width: 290px;
  padding: 8px 10px;
  border-radius: 6px;
  background: #17212b;
  color: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.35;
  text-align: left;
  white-space: pre-line;
}

.component-thumbnail:hover::after,
.component-thumbnail:focus::after {
  display: none;
}

.component-image-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(24, 32, 42, 0.72);
}

.component-image-lightbox {
  position: relative;
  width: min(500px, calc(100vw - 48px));
  height: min(500px, calc(100vh - 48px));
  box-sizing: border-box;
  padding: 14px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
}

.component-image-lightbox img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.component-lightbox-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
}

.variant-component-empty {
  align-self: center;
  color: var(--muted);
  font-size: 11px;
}

.variant-feature-field {
  grid-column: 1 / -1;
}

.issues {
  display: grid;
  gap: 8px;
}

.issue {
  border-left: 4px solid var(--warn);
  background: #fffbeb;
  padding: 8px 10px;
  font-size: 12px;
}

.toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  background: #111827;
  color: #fff;
  padding: 10px 14px;
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
}

.supplier-pane { height: 100vh; overflow: hidden; padding: 24px; background: #f5f7fa; }
.supplier-directory-head { display: flex; justify-content: space-between; gap: 24px; align-items: end; margin-bottom: 18px; }
.supplier-directory-head h2 { margin: 0; color: #173b5b; }
.supplier-directory-head p { margin: 4px 0 0; color: var(--muted); }
.supplier-directory-head input { width: 280px; }
.supplier-workspace { display: grid; grid-template-columns: 310px minmax(0, 1fr); gap: 18px; height: calc(100vh - 112px); }
.supplier-profile-list, .supplier-profile-detail { overflow-y: auto; }
.supplier-profile-list { display: grid; align-content: start; gap: 9px; }
.supplier-profile-card { width: 100%; display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 14px; text-align: left; background: #fff; color: #17212b; border: 1px solid #d9e0e7; border-radius: 10px; }
.supplier-profile-card:hover { border-color: #23557c; box-shadow: 0 5px 16px rgba(22, 52, 76, .08); }
.supplier-profile-card span { display: grid; gap: 4px; }
.supplier-profile-card span:last-child { justify-items: end; }
.supplier-profile-card small { color: var(--muted); font-size: 11px; }
.supplier-profile-detail { background: #fff; border: 1px solid #d9e0e7; border-radius: 12px; padding: 24px; }
.supplier-profile-hero { display: flex; justify-content: space-between; gap: 24px; align-items: start; padding-bottom: 18px; border-bottom: 1px solid #e3e7eb; }
.supplier-profile-hero h2 { margin: 2px 0; font-size: 30px; }
.supplier-profile-hero p { margin: 0; color: var(--muted); }
.supplier-profile-hero > div:last-child { display: flex; gap: 10px; align-items: center; }
.supplier-profile-hero a { padding: 8px 12px; border: 1px solid #23557c; border-radius: 8px; color: #173b5b; text-decoration: none; }
.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: 10px; font-weight: 700; color: #4d718e !important; }
.supplier-profile-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 18px 0; }
.supplier-profile-metrics div { display: grid; padding: 14px; background: #f3f6f8; border-radius: 9px; }
.supplier-profile-metrics strong { color: #173b5b; font-size: 22px; }
.supplier-profile-metrics span { color: var(--muted); font-size: 12px; }
.supplier-profile-summaries { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
.supplier-profile-summaries section { padding: 14px; border-top: 3px solid #4d718e; border-radius: 7px; background: #f6f8fa; }
.supplier-profile-summaries span { color: #173b5b; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.supplier-profile-summaries p { margin: 7px 0 0; color: #445462; line-height: 1.45; }
.supplier-profile-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.supplier-profile-section { margin-top: 20px; }
.supplier-profile-section h3 { margin: 0 0 10px; color: #173b5b; }
.supplier-profile-section > p { line-height: 1.55; }
.supplier-fact-list { border: 1px solid #dfe5ea; border-radius: 9px; overflow: hidden; }
.supplier-fact { display: flex; justify-content: space-between; gap: 12px; padding: 12px; border-bottom: 1px solid #e8ecef; }
.supplier-fact:last-child { border-bottom: 0; }
.supplier-fact p { margin: 3px 0 0; color: #4a5865; line-height: 1.45; }
.supplier-sources ul { margin: 0; padding: 0; list-style: none; border: 1px solid #dfe5ea; border-radius: 9px; }
.supplier-sources li { display: grid; grid-template-columns: minmax(160px, .8fr) minmax(260px, 2fr) auto; gap: 12px; align-items: center; padding: 11px 12px; border-bottom: 1px solid #e8ecef; }
.supplier-sources li:last-child { border-bottom: 0; }
.supplier-sources li span { overflow-wrap: anywhere; color: var(--muted); }
.source-note { color: var(--muted); font-size: 11px; }

@media (max-width: 1180px) {
  .app,
  .workspace {
    grid-template-columns: 1fr;
    height: auto;
  }

  .sidebar,
  .list-pane,
  .detail-pane {
    height: auto;
    max-height: none;
  }

  th {
    top: 0;
  }

  .admin-grid {
    grid-template-columns: 1fr;
  }

  .product-edit-grid {
    grid-template-columns: 1fr;
  }

  .supplier-pane { height: auto; }
  .supplier-workspace { grid-template-columns: 1fr; height: auto; }
  .supplier-profile-columns { grid-template-columns: 1fr; }
  .supplier-profile-summaries { grid-template-columns: 1fr; }

  .product-feature-field textarea,
  .product-feature-field .feature-rich-editor {
    height: auto;
    min-height: 36px;
  }

}

@media (max-width: 760px) {
  .pane-head { align-items: flex-start; }
  .product-list-actions { align-items: stretch; flex-direction: column; }
  .variant-identity { grid-template-columns: 1fr; }
  .variant-identity-meta { justify-items: stretch; }
  .variant-status-pill { justify-content: flex-start; }
  .variant-primary-section,
  .variant-component-options,
  .dimensional-profile-columns,
  .pricing-layout {
    grid-template-columns: 1fr;
  }
  .fabric-requirements-layout { grid-template-columns: 1fr; }
  .classification-grid { grid-template-columns: 1fr; }
}
[hidden] { display: none !important; }

.fabric-pane{padding:32px;min-width:0;width:100%;background:#f7f9fb;overflow:auto}.fabric-header{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:24px}.fabric-header h2{font-size:34px;margin:2px 0}.fabric-header p{margin:0;color:#657181}.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:700;color:#287ea1!important}.fabric-summary{display:grid;grid-template-columns:auto auto;gap:0 9px;align-items:baseline;color:#697687}.fabric-summary strong{font-size:22px;color:#17324d;text-align:right}.fabric-toolbar{display:grid;grid-template-columns:minmax(320px,1fr) 220px auto;gap:14px;align-items:end;background:#fff;padding:16px;border:1px solid #dfe5eb;border-radius:14px;box-shadow:0 5px 18px rgba(23,50,77,.05)}.fabric-toolbar label{display:grid;gap:6px;font-size:12px;font-weight:600;color:#596676}.fabric-toolbar input,.fabric-toolbar select{height:43px}.fabric-view-switch{display:flex}.fabric-view-switch button{border-radius:8px 0 0 8px}.fabric-view-switch button+button{border-radius:0 8px 8px 0;margin-left:-1px}.fabric-layout{display:grid;grid-template-columns:minmax(0,1fr) 285px;gap:20px;margin-top:20px}.fabric-results-meta{font-size:13px;color:#687586;margin:0 0 12px}.fabric-gallery.collections{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:16px}.fabric-collection-card,.colourway-card,.finish-tray{background:#fff;border:1px solid #dfe5eb;border-radius:14px;box-shadow:0 5px 18px rgba(23,50,77,.045)}.fabric-collection-card{padding:16px}.fabric-collection-card header{display:flex;justify-content:space-between;gap:12px;align-items:start;margin-bottom:14px}.fabric-collection-card header p{margin:0;color:#287ea1;font-size:12px;font-weight:700}.fabric-collection-card h3{margin:2px 0 0;font-size:20px}.fabric-collection-card header>span{font-size:11px;background:#eaf3f7;color:#24577f;padding:5px 8px;border-radius:99px}.collection-swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.fabric-swatch{padding:0;border:0;background:transparent;color:#243343;text-align:left;min-width:0}.fabric-swatch img,.swatch-fallback{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:9px;border:1px solid #d9e0e6;background:#eef2f5}.fabric-swatch:hover img{outline:3px solid rgba(40,126,161,.22);transform:translateY(-1px)}.fabric-swatch span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:5px;font-size:11px}.fabric-swatch small{display:block;color:#89939d;font-size:9px}.swatch-fallback{display:grid;place-items:center;font-size:24px;color:#8c98a4}.collection-more{width:100%;margin-top:14px}.fabric-gallery.colourways{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}.colourway-card{padding:10px}.colourway-card>div{display:grid;margin-top:7px}.colourway-card>div span{font-size:11px;color:#718090}.finish-tray{padding:18px;position:sticky;top:20px;align-self:start}.finish-tray h3{margin:2px 0 15px;font-size:20px}.selected-finishes{display:grid;gap:8px;min-height:70px}.selected-finishes>p{color:#778390;font-size:13px}.selected-finishes button{display:grid;grid-template-columns:43px 1fr auto;gap:10px;align-items:center;padding:7px;border:0;background:#f7f9fb;border-radius:10px;text-align:left;color:#243343}.selected-finishes img{width:43px;height:43px;object-fit:cover;border-radius:50%}.selected-finishes span{min-width:0}.selected-finishes strong,.selected-finishes small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.selected-finishes small{font-size:10px;color:#75818c}.selected-finishes b{font-size:18px;color:#82909b}.finish-pricing-note{border-top:1px solid #e2e7ec;margin-top:16px;padding-top:16px;display:grid;gap:4px}.finish-pricing-note strong{font-size:13px;color:#24577f}.finish-pricing-note span{font-size:12px;line-height:1.4;color:#73808c}@media(max-width:1100px){.fabric-layout{grid-template-columns:1fr}.finish-tray{position:static}.fabric-toolbar{grid-template-columns:1fr 1fr}.fabric-search{grid-column:1/-1}}@media(max-width:720px){.fabric-pane{padding:18px}.fabric-toolbar{grid-template-columns:1fr}.fabric-search{grid-column:auto}.fabric-header{align-items:start;flex-direction:column}.fabric-gallery.collections{grid-template-columns:1fr}}
.swatch-unit{min-width:0;position:relative}.swatch-detail-action{display:block;width:100%;padding:3px 0;margin-top:2px;border:0;background:transparent;color:#287ea1;font-size:10px;text-align:left}.swatch-detail-action:hover{text-decoration:underline;background:transparent}.colourway-card>.swatch-unit{display:block;margin-top:0}.fabric-lightbox-overlay{position:fixed;inset:0;z-index:1000;background:rgba(15,30,43,.76);backdrop-filter:blur(4px);display:grid;place-items:center;padding:32px}.fabric-lightbox{position:relative;width:min(1020px,94vw);max-height:90vh;overflow:auto;background:#fff;border-radius:18px;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);box-shadow:0 28px 90px rgba(0,0,0,.32)}.fabric-lightbox-close{position:absolute;right:14px;top:14px;z-index:2;width:38px;height:38px;border-radius:50%;font-size:24px;padding:0;background:rgba(255,255,255,.94);color:#17324d}.fabric-lightbox-image{min-height:580px;background:#eef2f4;display:grid;place-items:center}.fabric-lightbox-image img{width:100%;height:100%;max-height:78vh;object-fit:contain}.fabric-lightbox-image .swatch-fallback{width:100%;height:100%;border:0;border-radius:0}.fabric-lightbox-content{padding:42px 34px 30px}.fabric-lightbox-content h2{font-size:36px;line-height:1;margin:5px 0}.fabric-lightbox-collection{font-size:18px;color:#667585;margin:0 0 25px}.fabric-facts{display:grid;margin:0}.fabric-facts>div{display:grid;grid-template-columns:130px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid #e6ebef}.fabric-facts dt{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#7a8792}.fabric-facts dd{margin:0;color:#23384b;text-transform:capitalize}.fabric-lightbox-note{display:grid;gap:4px;padding:14px;margin:22px 0;background:#eaf3f7;border-radius:10px}.fabric-lightbox-note strong{color:#24577f}.fabric-lightbox-note span{font-size:12px;line-height:1.45;color:#5e6d79}.fabric-lightbox-select{width:100%;min-height:44px}@media(max-width:760px){.fabric-lightbox-overlay{padding:12px}.fabric-lightbox{grid-template-columns:1fr}.fabric-lightbox-image{min-height:300px}.fabric-lightbox-content{padding:26px 22px}.fabric-lightbox-close{position:fixed;right:22px;top:22px}}
.fabric-colour-tags{margin-top:18px}.fabric-colour-tags>strong{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#7a8792;margin-bottom:7px}.fabric-colour-tags>div{display:flex;flex-wrap:wrap;gap:5px}.fabric-colour-tags span{font-size:10px;padding:5px 8px;border-radius:99px;background:#f0f4f6;color:#496170}.fabric-source-links{display:flex;gap:8px;margin:-10px 0 18px}.fabric-source-links a{flex:1;text-align:center;border:1px solid #287ea1;border-radius:8px;padding:8px;color:#24577f;font-size:11px;font-weight:700}.fabric-source-links a:hover{background:#eaf3f7}

/* Urban Choices brand theme */
body,
.workspace,
.detail-pane,
.admin-pane,
.supplier-pane,
.fabric-pane { background: #f5f3ef; color: #14231f; }

.sidebar { background: #182520; color: #f7f3eb; border-color: #2d3d36; }
.sidebar h1,
.sidebar h2,
.sidebar h3,
.sidebar label { color: #f7f3eb; }
.sidebar p,
.sidebar small,
.sidebar .muted,
.sidebar .stat span { color: #aeb9b3; }
.sidebar .stat,
.sidebar .field-block { background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.13); }
.sidebar input,
.sidebar select { background: #fff; color: #14231f; border-color: #dfddd7; }
.sidebar button.secondary { background: transparent; color: #f7f3eb; border-color: #819089; }
.sidebar button.secondary:hover { background: rgba(255,255,255,.08); }
.mark { background: #c88a17; color: #14231f; }

button,
.primary-button { background: #0c7168; border-color: #0c7168; color: #fff; }
button:hover,
.primary-button:hover { background: #07534d; border-color: #07534d; }
button.secondary,
.secondary-button { background: #fff; border-color: #0c7168; color: #07534d; }
button.secondary:hover,
.secondary-button:hover { background: #e6eee9; }

.list-pane,
.product-card,
.variant-card,
.panel,
.modal,
.option-block,
.dimensional-profile-panel,
.pricing-panel,
.fabric-requirements-panel,
.supplier-profile,
.supplier-card,
.fabric-toolbar,
.fabric-collection-card,
.colourway-card,
.finish-tray,
.fabric-lightbox { background: #fff; border-color: #dfddd7; }

th,
.table-header,
.section-header { background: #f8f7f3; color: #14231f; border-color: #dfddd7; }
td,
tr,
.field,
input,
select,
textarea { border-color: #dfddd7; }
tbody tr:hover,
.active-row,
.selected-row { background: #e6eee9; }

a,
.link,
.eyebrow,
.supplier-profile-section h3,
.supplier-profile-summaries span,
.fabric-collection-card header p,
.swatch-detail-action { color: #0c7168 !important; }

.info-tabs button.active,
.tab-button.active,
.mode-switch button.active { background: #0c7168; border-color: #0c7168; color: #fff; }
.info-tabs,
.tabs { border-color: #dfddd7; }

.supplier-profile-hero { border-color: #dfddd7; }
.supplier-profile-hero a { border-color: #0c7168; color: #07534d; }
.supplier-profile-metrics div,
.supplier-profile-summaries section { background: #f8f7f3; }
.supplier-profile-metrics strong,
.supplier-profile-section h3 { color: #07534d; }
.supplier-profile-summaries section { border-top-color: #c88a17; }
.supplier-profile-summaries p,
.supplier-fact p { color: #53605a; }
.supplier-fact-list,
.supplier-sources ul,
.supplier-fact,
.supplier-sources li { border-color: #dfddd7; }

.fabric-pane { background: #f7f6f2; }
.fabric-summary strong,
.fabric-lightbox-close,
.fabric-facts dd { color: #14231f; }
.fabric-toolbar,
.fabric-collection-card,
.colourway-card,
.finish-tray { box-shadow: 0 5px 18px rgba(20,35,31,.06); }
.fabric-collection-card header>span,
.fabric-lightbox-note { background: #e6eee9; color: #07534d; }
.fabric-swatch img,
.swatch-fallback,
.fabric-lightbox-image { background: #f5f3ef; border-color: #dfddd7; }
.fabric-swatch:hover img { outline-color: rgba(12,113,104,.24); }
.selected-finishes button { background: #f8f7f3; color: #14231f; }
.finish-pricing-note,
.fabric-facts>div { border-color: #dfddd7; }
.finish-pricing-note strong,
.fabric-lightbox-note strong { color: #07534d; }
.fabric-lightbox-overlay { background: rgba(20,35,31,.78); }

.pill.featured,
.badge.featured { background: #f4e5bf; color: #76510f; }
.pill.published,
.badge.published,
.pill.good,
.badge.good { background: #dcece6; color: #07534d; }

/* Softer actions inside the Product Information screen */
.detail-pane .save-row button {
  background: #779d99;
  border-color: #779d99;
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(20, 35, 31, .06);
}
.detail-pane .save-row button:hover {
  background: #668c88;
  border-color: #668c88;
  color: #ffffff;
}
.detail-pane .save-row button:focus-visible {
  outline: 3px solid rgba(12, 113, 104, .18);
  outline-offset: 2px;
}

/* Product shell colours: options independent of variants. */
.shell-colour-options { margin: 12px 0 18px; }
.shell-colour-options > strong { font-size: 14px; }
.shell-swatch-grid { display:flex; flex-wrap:wrap; gap:12px; margin:10px 0 6px; }
.shell-swatch-item { display:flex; flex-direction:column; align-items:center; gap:5px; font-size:11px; min-width:44px; max-width:76px; text-align:center; }
.shell-swatch { display:block; width:34px; height:34px; border:1px solid #bdb6ae; border-radius:2px; box-shadow:0 1px 2px #00000010; }
.shell-swatch:focus { outline:2px solid #2c665d; outline-offset:3px; }
.shell-swatch-pending { background:repeating-linear-gradient(135deg,#fff 0px,#fff 5px,#ddd 5px,#ddd 6px); }
.shell-swatch-item small,.shell-colour-note { font-size:10px; color:#766e64; }

/* MacPhersons catalogue-linked melamine finish options */
.mac-wood-options .wood-scope {font-size:12px;margin:5px 0 12px;color:#766e64;}
.wood-palette h4 {font-size:13px;margin:14px 0 8px;}
.wood-finish-group {border-top:1px solid #e4ded6;padding:8px 0;}
.wood-finish-group summary {cursor:pointer;font-size:12px;line-height:1.5;}
.wood-finish-group summary span {color:#766e64;}
.wood-product-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:12px 8px;}
.wood-product-grid .shell-swatch-item {min-width:0;max-width:none;overflow-wrap:anywhere;}
.wood-product-swatch {width:48px;height:48px;object-fit:cover;border-radius:0;}
.wood-catalogue-source {display:block;font-size:11px;margin-top:7px;}