.variant-editor-list { display: grid; gap: 0; }
.brand { justify-content: flex-start; }
.brand-logo { display: block; width: 130px; height: 55px; object-fit: contain; }
.variant-editor { display: grid; grid-template-columns: 120px minmax(0,1fr) 36px; gap: 20px; padding: 24px 0; border-bottom: 1px solid #e3e7e5; }
.variant-editor:first-child { padding-top: 8px; }
.variant-image { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.variant-image > img { width: 120px; height: 120px; object-fit: cover; border-radius: 4px; }
.variant-image > svg { width: 120px; height: 120px; padding: 40px; background: #f3f5f4; color: #65746e; }
.variant-image .btn { padding: 8px; font-size: 12px; min-width: 0; }
.variant-actions { display: flex; flex-direction: column; gap: 6px; }
.variant-editor .form-grid { align-content: start; }
.variant-preview-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(130px,1fr)); gap: 20px; }
.variant-preview-grid .variant-choice { display: flex; flex-direction: column; min-width: 0; gap: 5px; overflow-wrap: anywhere; }
.variant-preview-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; margin-bottom: 5px; border-radius: 4px; }
.variant-choice { text-align: left; padding: 8px; background: #fff; color: inherit; border: 2px solid transparent; border-radius: 4px; }
.variant-choice:hover { border-color: #b5ccc1; }
.variant-choice[aria-pressed="true"] { border-color: #176d60; background: #f4f9f6; }
.variant-missing-image { display: grid; place-items: center; width: 100%; aspect-ratio: 1; background: #f3f5f4; }

.installation-figure { margin: 0 0 20px; max-width: 340px; }
.installation-figure .installation-preview-image { margin-bottom: 10px; }
.installation-figure figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 13px; overflow-wrap: anywhere; }
.variant-preview-grid strong { font-size: 14px; }
.variant-preview-grid span,.variant-preview-grid small { font-size: 12px; color: #63716a; }
.spec-label { display: flex; align-items: center; gap: 12px; font-weight: 500; }
.spec-label svg { width: 20px; height: 20px; flex: 0 0 20px; color: #6d8178; }
.dynamic-spec { display: inline-flex; align-items: center; gap: 8px; color: #527268; font-size: 13px; }
.dynamic-spec svg { width: 16px; height: 16px; }
.product-spec-editor { table-layout: fixed; min-width: 440px; width: 100%; }
.product-spec-editor th:first-child { width: 150px; }
.product-spec-editor th:last-child { width: 85px; }
.product-spec-editor input { width: 100%; min-width: 0; }
.product-spec-editor td { white-space: normal; }
.fixed-spec-table { width: 100%; }
.fixed-spec-table th { width: 150px; }
.fixed-spec-table td { white-space: normal; overflow-wrap: anywhere; }
.installation-preview-image { width: 100%; max-width: 340px; aspect-ratio: 1; object-fit: cover; margin-bottom: 20px; }
.product-install-preview { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 28px; margin-top: 28px; }
.product-install-preview section { min-width: 0; }
.product-install-preview .fixed-spec-table { min-width: 0; }
.product-install-preview .fixed-spec-table th { width: 130px; }
[data-page="product-edit"] .tabs { flex-wrap: wrap; }
@media(max-width: 650px) {
  .variant-editor { grid-template-columns: 100px minmax(0,1fr); gap: 16px; }
  .variant-image > img,.variant-image > svg { width: 100px; height: 100px; }
  .variant-editor .form-grid { grid-template-columns: minmax(0,1fr); }
  .variant-actions { grid-column: 1 / -1; flex-direction: row; justify-content: flex-end; }
  .product-install-preview { grid-template-columns: minmax(0,1fr); }
  .product-spec-editor { min-width: 0; }
  .product-spec-editor th:first-child { width: 100px; }
  .product-spec-editor th:last-child { width: 62px; }
  .product-spec-editor th,.product-spec-editor td { padding: 10px 5px; }
  .product-spec-editor input { padding: 8px 6px; }
  .product-spec-editor .spec-label { gap: 6px; font-size: 12px; }
  .product-spec-editor .spec-label svg { width: 16px; height: 16px; flex-basis: 16px; }
}