/* Staff price confirmation; Customer and drawing controls retain their styles. */
.staff-hu-editor .staff-price-preview {
  width: min(1180px, calc(100% - 32px));
}
.staff-price-preview .half-post-selection-panel {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.staff-price-preview .half-post-option-content {
  display: block;
  padding: 20px 24px 10px;
}
.staff-price-preview .half-post-option-group {
  margin-bottom: 22px;
}
.staff-price-preview .half-post-selection-header h2 {
  font-size: 20px;
  overflow-wrap: anywhere;
}
.staff-price-preview .half-post-selection-header,
.staff-price-preview .half-post-selection-actions,
.staff-price-selection,
.staff-price-row-status {
  flex-wrap: wrap;
}
.staff-price-preview button {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
.staff-price-preview h3 {
  margin: 0 0 12px;
  font-size: 16px;
}
.staff-price-steps {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}
.staff-price-steps [aria-current] {
  color: var(--green);
  font-weight: 700;
}
.staff-price-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 270px;
}
.staff-price-body.glass-only {
  grid-template-columns: minmax(0, 1fr);
}
.glass-only .staff-price-main {
  padding-right: 0;
}
.staff-price-body.accessories-only {
  grid-template-columns: minmax(0, 1fr);
}
.accessories-only .staff-price-main {
  padding-right: 0;
}
.staff-price-accessory-row .staff-starting-price {
  min-height: 25px;
}
.staff-price-accessory-row.unavailable {
  cursor: default;
}
.staff-starting-price {
  display: block;
  min-width: 0;
  padding-left: 27px;
}
.staff-starting-price small {
  white-space: nowrap;
}
.staff-price-main {
  min-width: 0;
  padding: 22px 22px 10px 0;
}
.staff-price-scope {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  margin: 6px 0 18px;
}
.staff-glass-prices .staff-price-scope {
  font-size: 19px;
}
.staff-price-matrix {
  display: grid;
  gap: 12px;
}
.staff-price-row {
  display: block;
  border-left: 3px solid transparent;
  border-bottom: 1px solid var(--line);
  padding: 12px 8px;
  cursor: pointer;
}
.staff-price-row:hover,
.staff-price-accessory:hover {
  background: #f1fbf9;
}
.staff-price-row.selected {
  border-left-color: var(--green);
  background: #e5f6f3;
}
.staff-price-row:focus-within,
.staff-price-accessory:focus-within,
.staff-price-accessory-none:focus-within {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}
.staff-price-preview input[type="radio"],
.staff-price-preview input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin: 0;
  accent-color: var(--green);
}
.staff-price-color,
.staff-price-accessory-heading {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 14px;
}
.staff-price-color > span:last-child,
.staff-price-accessory-heading > span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.staff-glass-swatch {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  border: 1px solid #7ab8c4;
  border-radius: 3px;
  background: #d9f1f6;
}
.staff-glass-swatch.u3 {
  background: #919da8;
  border-color: #788590;
}

.staff-glass-swatch.matt { background: #f1f4f3; border-color: #94a3a0; }
.staff-glass-swatch.grey { background: #8b979f; border-color: #68747c; }
.staff-glass-swatch.bronze { background: #b6a185; border-color: #8c765d; }
.staff-glass-swatch.green { background: #a9c3b1; border-color: #688976; }
.staff-parsol-colors { display: flex; flex-wrap: wrap; gap: 12px 24px; padding: 12px 10px 18px 38px; background: #e5f5f2; }
.staff-parsol-color { display: flex; align-items: center; gap: 8px; min-height: 36px; max-width: 100%; cursor: pointer; }
.staff-parsol-color input { flex: 0 0 auto; accent-color: #0f766e; }
.staff-parsol-color.selected { font-weight: 700; }
.staff-parsol-color .staff-glass-swatch { flex-shrink: 0; }
.staff-price-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.staff-price-cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 4px 7px;
  border-left: 1px solid var(--line);
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 1.4;
}
.staff-price-plan {
  min-height: 38px;
  color: var(--muted);
  font-size: 12px;
}
.staff-price-source {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 4px;
  background: var(--yellow);
}
.staff-price-source.source-B {
  background: var(--path-blue);
}
.staff-price-source.source-C {
  background: var(--path-blue);
  border-right: 4px solid var(--yellow);
}
.staff-price-money {
  display: block;
  font-size: 19px;
  line-height: 1.3;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.staff-price-preview small,
.staff-price-unavailable {
  font-size: 11px;
  line-height: 1.4;
  color: var(--muted);
  font-weight: 400;
}
.staff-price-unavailable {
  display: block;
}
.staff-price-row-status,
.staff-price-selection {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  font-size: 13px;
}
.staff-price-row-status > span {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--red);
}
.staff-price-summary {
  min-width: 0;
  border-left: 1px solid var(--line);
  padding: 22px 0 10px 20px;
}
.staff-price-summary > p {
  font-size: 13px;
  overflow-wrap: anywhere;
}
.staff-price-total {
  border-top: 1px solid var(--line-soft);
  padding: 14px 0;
}
.staff-price-total h4 {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.staff-price-total .staff-price-money {
  margin: 0;
  min-width: 0;
  text-align: right;
  color: var(--green);
}
.staff-price-grand-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
  font-size: 12px;
}
.staff-price-breakdown {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: var(--muted);
  margin: 5px 0;
}
.staff-price-breakdown > span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.staff-price-breakdown > span:last-child {
  text-align: right;
}
.staff-price-accessory {
  display: block;
  border-bottom: 1px solid var(--line);
  padding: 16px 0;
  cursor: pointer;
}
.staff-price-accessory-heading {
  margin-bottom: 0;
}
.staff-price-accessory-none {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 0;
  font-size: 14px;
  cursor: pointer;
}
.staff-price-status {
  min-height: 24px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--muted);
}
@media (max-width: 820px) {
  .staff-price-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .staff-price-main {
    padding-right: 0;
  }
  .staff-price-summary {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding: 22px 0 0;
  }
}
@media (max-width: 480px) {
  .staff-hu-editor .staff-price-preview {
    width: calc(100% - 16px);
    padding-top: 18px;
  }
  .staff-price-preview .half-post-option-content,
  .staff-price-preview .half-post-selection-header,
  .staff-price-preview .half-post-selection-actions {
    padding-left: 12px;
    padding-right: 12px;
  }
  .staff-price-preview .half-post-selection-message {
    padding: 0 12px;
  }
  .staff-price-row {
    padding: 12px 2px;
  }
  .staff-price-columns {
    gap: 3px;
  }
  .staff-price-cell {
    padding: 3px 4px;
    font-size: 12px;
  }
  .staff-price-plan {
    font-size: 11px;
    min-height: 48px;
  }
  .staff-price-cell .staff-price-money {
    font-size: 14px;
  }
  .staff-price-preview .half-post-selection-actions .primary-button {
    width: 100%;
    font-size: 14px;
    line-height: 1.4;
  }
}
:root {
  --bg: #eef1f4;
  --panel: #ffffff;
  --panel-2: #f8fafc;
  --line: #cbd5e1;
  --line-soft: #e2e8f0;
  --text: #111827;
  --muted: #596579;
  --blue: #1769e0;
  --blue-soft: #e7f0ff;
  --path-blue: #6fb7e9;
  --path-blue-strong: #2b82c4;
  --path-blue-soft: #e6f4ff;
  --green: #0f766e;
  --green-dark: #0b5f59;
  --yellow: #facc15;
  --yellow-dark: #ca8a04;
  --yellow-soft: #fff7cc;
  --orange: #b45309;
  --red: #b91c1c;
  --shadow: 0 18px 45px rgba(15, 23, 42, 0.10);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 0;
}

button,
input {
  font: inherit;
}

button {
  border: 0;
}

.topbar {
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}

.brand {
  color: var(--green);
  font-weight: 800;
  font-size: 12px;
}

h1,
h2 {
  margin: 0;
  letter-spacing: 0;
}

h1 {
  margin-top: 4px;
  font-size: 24px;
  line-height: 1.15;
}

h2 {
  font-size: 15px;
}

/* Customer header: system family, mounting position and handrail variant. */
.product-customer .topbar { height: auto; min-height: 94px; }
.product-customer .topbar > div:first-child { min-width: 0; max-width: 100%; }
.product-customer #pageTitle { line-height: 1.25; overflow-wrap: anywhere; }
.product-customer .customer-system-description {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 5px;
  color: #53635f;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
}
@media (max-width: 520px) {
  .product-customer #pageTitle { font-size: 22px; }
  .product-customer .customer-system-description { gap: 3px 12px; font-size: 14px; }
}

.top-actions,
.canvas-toolbar,
.download-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.workspace {
  height: calc(100vh - 76px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 14px;
  padding: 14px;
}

.system-picker {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  padding: 28px 0;
}

.system-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 18px;
}

.system-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.system-card {
  min-height: 118px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}

.system-card:hover {
  border-color: #94a3b8;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.system-card.ready {
  border-color: rgba(15, 118, 110, 0.45);
}

.system-number {
  font-size: 26px;
  font-weight: 800;
}

.system-status {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.system-card.ready .system-status {
  color: var(--green);
}

.canvas-panel,
.side-panel {
  min-width: 0;
  min-height: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.canvas-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}

.canvas-toolbar {
  min-height: 58px;
  flex-wrap: wrap;
  padding: 10px;
  border-bottom: 1px solid var(--line-soft);
}

.canvas-fit-button {
  margin-left: 16px;
}

.selected-system {
  height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  color: var(--text);
  background: transparent;
  font-weight: 800;
}

.active-part-label {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  color: var(--green-dark);
  font-size: 13px;
  font-weight: 800;
}

.segmented {
  display: inline-grid;
  grid-template-columns: repeat(2, 70px);
  height: 38px;
  padding: 3px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel-2);
}

.segment {
  border-radius: 6px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font-weight: 700;
}

.segment.active {
  color: #ffffff;
  background: var(--blue);
}

.shape-picker {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.shape-picker-label {
  color: #334155;
  font-size: 12px;
  font-weight: 800;
}

.shape-options {
  display: inline-grid;
  grid-template-columns: repeat(3, 48px) 82px;
  height: 38px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
}

.shape-button {
  border-radius: 6px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font-size: 15px;
  font-weight: 800;
}

.shape-button.line-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.shape-line-icon {
  width: 16px;
  height: 3px;
  border-radius: 999px;
  background: currentColor;
}

.shape-button.text {
  font-size: 13px;
}

.shape-button.active {
  color: #ffffff;
  background: var(--green);
}

.field {
  display: grid;
  gap: 6px;
  color: #334155;
  font-size: 12px;
  font-weight: 700;
}

.field.small {
  width: 132px;
}

input {
  width: 100%;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  background: #ffffff;
  padding: 0 10px;
}

input:disabled {
  color: #94a3b8;
  background: #f1f5f9;
}

.tool-button,
.text-button,
.icon-button,
.primary-button,
.download-link,
.quote-pdf-link {
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}

.tool-button {
  min-width: 64px;
  padding: 0 12px;
  border: 1px solid var(--line);
  color: var(--text);
  background: #ffffff;
}

.tool-button.active {
  border-color: var(--yellow-dark);
  color: #111827;
  background: var(--yellow);
}

.tool-button.danger {
  color: var(--red);
}

.text-button {
  height: 30px;
  padding: 0 10px;
  color: var(--blue);
  background: var(--blue-soft);
  font-size: 13px;
  font-weight: 700;
}

.icon-button {
  width: 38px;
  border: 1px solid var(--line);
  background: #ffffff;
  color: var(--text);
  font-size: 18px;
  font-weight: 800;
}

.primary-button {
  min-width: 98px;
  padding: 0 16px;
  color: #ffffff;
  background: var(--green);
  font-weight: 800;
}

.primary-button.small {
  min-width: 76px;
  padding: 0 14px;
}

.primary-button:hover {
  background: var(--green-dark);
}

.primary-button:disabled,
.text-button:disabled,
.tool-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.canvas-wrap {
  min-height: 0;
  position: relative;
  background: #f9fafb;
}

#pathCanvas {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: grab;
}

.canvas-status {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 12px;
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 13px;
}

.canvas-status.error {
  color: var(--red);
}

#zoomStatus {
  display: none;
}

.grid-line {
  stroke: #e2e8f0;
  stroke-width: 1;
}

.grid-line.major {
  stroke: #cfd8e3;
}

.platform-side {
  fill: rgba(114, 177, 131, 0.24);
  stroke: rgba(77, 137, 93, 0.18);
  stroke-width: 1;
  cursor: pointer;
}

.platform-side.selected {
  fill: rgba(114, 177, 131, 0.24);
  stroke: rgba(77, 137, 93, 0.18);
}

.platform-arrow {
  stroke: #3b8052;
  stroke-width: 2.5;
  stroke-linecap: round;
  pointer-events: none;
}

.platform-arrow.selected {
  stroke: #3b8052;
}

.platform-arrow-head {
  fill: #3b8052;
}

.platform-side-label {
  font: 600 13px Arial, sans-serif;
  letter-spacing: 0;
  pointer-events: none;
  paint-order: stroke fill;
  stroke: #f9fafb;
  stroke-width: 5px;
  stroke-linejoin: round;
  fill: #53616a;
}

.platform-side-label.inside {
  fill: #285e3b;
  stroke: #e1eee4;
}

#platformFlip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  height: auto;
  max-width: 100%;
  white-space: normal;
  line-height: 1.3;
}

#platformFlip svg { flex: 0 0 18px; }
#platformFlip span { overflow-wrap: anywhere; }

@media (max-width: 700px) {
  .staff-hu-editor .workspace:not(.has-result) .canvas-wrap { min-height: 520px; }
}

.axis-line {
  stroke: #94a3b8;
  stroke-width: 1.5;
}

.path-edge {
  stroke: var(--path-blue);
  stroke-width: 10;
  stroke-linecap: square;
  cursor: pointer;
}

.path-edge.selected {
  stroke: var(--yellow);
  stroke-width: 11;
}

.dimension-line,
.dimension-tick {
  stroke: #8d969c;
  stroke-width: 1.5;
}

.section-label {
  fill: #777d83;
  font-size: 13px;
  font-weight: 800;
  paint-order: stroke;
  stroke: #ffffff;
  stroke-width: 4px;
  stroke-linejoin: round;
}

.length-label {
  fill: #202427;
  font-size: 16px;
  font-weight: 700;
  paint-order: stroke;
  stroke: #ffffff;
  stroke-width: 5px;
  stroke-linejoin: round;
}

.balcony-part-label {
  cursor: pointer;
}

.balcony-part-label rect {
  fill: #ffffff;
  stroke: rgba(43, 130, 196, 0.45);
  stroke-width: 1.5;
}

.balcony-part-label text {
  fill: #334155;
  font-size: 13px;
  font-weight: 800;
  pointer-events: none;
}

.balcony-part-label.selected rect {
  fill: var(--yellow-soft);
  stroke: var(--yellow-dark);
  stroke-width: 2;
}

.balcony-part-label.selected text {
  fill: #111827;
}

.balcony-part-label.selected {
  cursor: grab;
}

.balcony-part-label.dragging {
  cursor: grabbing;
}

.balcony-part-grip {
  pointer-events: none;
}

.balcony-part-grip circle {
  fill: var(--yellow-dark);
}

.edge-label {
  fill: #0f172a;
  font-size: 13px;
  font-weight: 800;
  paint-order: stroke;
  stroke: #ffffff;
  stroke-width: 4px;
  stroke-linejoin: round;
}

.point-handle {
  fill: #ffffff;
  stroke: var(--path-blue);
  stroke-width: 3;
  cursor: grab;
}

.point-handle.selected {
  fill: #ffffff;
  stroke: var(--yellow);
  stroke-width: 4;
}

.point-handle:active {
  cursor: grabbing;
}

.grow-button {
  cursor: pointer;
}

.grow-button circle {
  fill: var(--path-blue);
  stroke: #ffffff;
  stroke-width: 3;
}

.grow-button.selected circle {
  fill: var(--yellow);
}

.grow-button text {
  fill: #ffffff;
  font-size: 18px;
  font-weight: 800;
  pointer-events: none;
}

.grow-button.selected text {
  fill: #111827;
}

.grow-button:hover circle {
  fill: var(--path-blue-strong);
}

.grow-button.selected:hover circle {
  fill: var(--yellow-dark);
}

.delete-button {
  cursor: pointer;
}

.delete-button circle {
  fill: #dc2626;
  stroke: #ffffff;
  stroke-width: 3;
}

.delete-button path,
.delete-button line,
.delete-button polyline,
.delete-button rect {
  fill: none;
  stroke: #ffffff;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.delete-button:hover circle {
  fill: #b91c1c;
}

.side-panel {
  overflow: auto;
  padding: 12px;
}

.workspace.has-result {
  grid-template-columns: minmax(260px, 3fr) minmax(0, 5fr) minmax(340px, 4fr);
  grid-template-rows: auto minmax(0, 1fr) minmax(0, 1fr);
}

.workspace.has-result .canvas-panel {
  grid-column: 1;
  grid-row: 2;
}

.workspace.has-result .side-panel {
  display: contents;
}

.workspace.has-result .system-switch-block,
.workspace.has-result .sections-block,
.workspace.has-result .price-block,
.workspace.has-result .result-block {
  min-width: 0;
  min-height: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
  overflow: auto;
}

.workspace.has-result .system-switch-block {
  grid-column: 1;
  grid-row: 1;
}

.workspace.has-result .sections-block {
  grid-column: 1;
  grid-row: 3;
}

.workspace.has-result .price-block {
  grid-column: 2;
  grid-row: 1 / span 3;
}

.workspace.has-result .result-block {
  grid-column: 3;
  grid-row: 1 / span 3;
  display: grid;
  grid-template-rows: auto auto auto auto minmax(0, 1fr);
  gap: 10px;
  overflow: hidden;
}

.workspace.has-result .canvas-fit-button {
  display: none;
}

.section-block {
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
}

.section-block:first-child {
  padding-top: 2px;
}

.section-block:last-child {
  border-bottom: 0;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.selected-info {
  min-height: 28px;
  display: flex;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
}

.edge-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

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

.balcony-part-group.selected {
  border-color: rgba(15, 118, 110, 0.65);
}

.balcony-part-header {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 5px 4px 10px;
  border-bottom: 1px solid var(--line-soft);
  background: #f5f8f8;
}

.balcony-part-select {
  min-width: 0;
  padding: 0;
  border: 0;
  color: var(--text);
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  font-weight: 900;
  text-align: left;
}

.balcony-part-group.selected .balcony-part-select {
  color: var(--green-dark);
}

.balcony-part-delete {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
}

.balcony-part-edges {
  display: grid;
  gap: 7px;
  padding: 7px;
}

.section-limit {
  margin: 7px 0 12px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.system-switch-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin-top: 12px;
}

.system-switch-select {
  width: 100%;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  background: #ffffff;
  font: inherit;
  font-weight: 700;
}

.switch-system-message {
  min-height: 18px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.switch-system-message.error {
  color: var(--red);
}

.edge-row {
  display: grid;
  grid-template-columns: 38px minmax(62px, 1fr) 34px minmax(122px, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 54px;
  padding: 8px;
  border: 1px solid rgba(43, 130, 196, 0.28);
  border-radius: 8px;
  background: var(--path-blue-soft);
  cursor: pointer;
}

.balcony-part-edges .edge-row {
  border-radius: 6px;
}

.edge-row.selected {
  border-color: var(--yellow-dark);
  background: var(--yellow-soft);
}

.edge-badge {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: #0f2745;
  background: #bfdbfe;
  font-weight: 800;
}

.edge-row.selected .edge-badge {
  color: #111827;
  background: var(--yellow);
}

.edge-meta {
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
}

.edge-meta strong {
  display: block;
  color: var(--text);
  font-size: 13px;
}

.edge-delete,
.edge-delete-placeholder {
  width: 36px;
  height: 40px;
}

.edge-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: #ffffff;
  background: #dc2626;
  cursor: pointer;
}

.edge-delete:hover {
  background: #b91c1c;
}

.edge-delete svg {
  width: 18px;
  height: 18px;
  display: block;
}

.edge-delete path,
.edge-delete line,
.edge-delete polyline {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.edge-meter-lock {
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 0 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: #64748b;
  background: #f1f5f9;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.edge-length-field {
  height: 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
  overflow: hidden;
}

.edge-length-field:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 1px var(--blue);
}

.edge-length-field input {
  height: 38px;
  min-width: 0;
  border: 0;
  border-radius: 0;
  padding: 0 6px;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
}

.edge-length-field input:focus {
  outline: none;
}

.edge-length-unit {
  padding-right: 7px;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
  pointer-events: none;
}

.json-preview {
  max-height: 260px;
  overflow: auto;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0f172a;
  color: #dbeafe;
  font-size: 12px;
  line-height: 1.55;
}

.result-message {
  min-height: 34px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-line;
}

.result-message.error {
  color: var(--red);
}

.generation-progress {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #dbe7f3;
}

.generation-progress-bar {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--green);
  transition: width .25s ease;
}

.download-row {
  margin: 8px 0 0;
}

.download-link,
.quote-pdf-link {
  padding: 0 12px;
  color: #ffffff;
  background: var(--green);
  font-size: 13px;
  font-weight: 800;
}

.material-summary {
  display: grid;
  gap: 12px;
  margin: 10px 0 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  overflow: hidden;
}

.quote-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-bottom: 10px;
}

.quote-section-header h2 {
  margin: 0;
}

.quote-package-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  max-width: 100%;
  margin-left: auto;
  font-size: 13px;
  line-height: 1.3;
  text-align: center;
  letter-spacing: 0;
}

.quote-package-link svg {
  flex: 0 0 16px;
}

a[download][aria-disabled="true"] {
  opacity: 0.55;
  pointer-events: none;
}

.quote-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: #f3f5f1;
  color: #334155;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.quote-table-wrap {
  overflow: auto;
}

.quote-warning {
  margin: 12px 14px 0;
  color: #b45309;
  font-size: 12px;
  line-height: 1.45;
}

.quote-preview-image-wrap {
  padding: 12px;
  background: #ffffff;
}

.quote-preview-image {
  display: block;
  width: 100%;
  height: auto;
}

.quote-pdf-link {
  justify-self: start;
  max-width: calc(100% - 24px);
  margin: 0 12px 12px;
}

.quote-number {
  color: #a00000;
  font-size: 12px;
  font-weight: 800;
  white-space: normal;
  overflow-wrap: anywhere;
  max-width: 100%;
}

.fallback-plan-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  background: #f8fbfb;
}

.fallback-plan-tab {
  min-height: 62px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 7px 10px;
  border: 0;
  border-right: 1px solid var(--line);
  color: #526277;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
}

.fallback-plan-label {
  display: block;
}

.fallback-plan-price {
  color: var(--green);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
}

.fallback-plan-tab:last-child {
  border-right: 0;
}

.fallback-plan-tab:hover:not(:disabled) {
  color: var(--green);
  background: #edf9f7;
}

.fallback-plan-tab.active {
  color: var(--green);
  background: #e5f6f3;
  box-shadow: inset 0 -3px 0 var(--green);
}

.fallback-plan-tab:disabled {
  cursor: default;
}

.fallback-plan-tab.unavailable {
  color: #66717c;
  background: #f0f2f3;
}

.fallback-plan-status {
  font-weight: 400;
}

.fallback-options {
  display: grid;
  gap: 8px;
  padding: 14px;
}

.fallback-option {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(15, 118, 110, 0.52);
  border-radius: 6px;
  color: var(--text);
  background: #ffffff;
  text-align: left;
  cursor: pointer;
}

.fallback-option strong {
  color: var(--green);
  font-size: 14px;
  white-space: nowrap;
}

.fallback-option:hover:not(:disabled) {
  border-color: var(--green);
  background: #f1fbf9;
}

.fallback-option:disabled {
  cursor: wait;
  opacity: 0.6;
}

@media (max-width: 560px) {
  .fallback-plan-tabs {
    grid-template-columns: 1fr;
  }

  .fallback-plan-tab {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .fallback-plan-tab:last-child {
    border-bottom: 0;
  }
}

.product-code-details {
  margin: 0 12px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfb;
  overflow: hidden;
}

.product-code-details summary {
  min-height: 38px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  color: #334155;
  cursor: pointer;
  font-size: 13px;
  font-weight: 900;
  list-style: none;
}

.product-code-details summary::-webkit-details-marker {
  display: none;
}

.product-code-details summary::after {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-left: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
  color: var(--green);
  font-size: 15px;
  font-weight: 900;
}

.product-code-details[open] summary {
  border-bottom: 1px solid var(--line-soft);
}

.product-code-details[open] summary::after {
  content: "-";
}

.product-code-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--text);
  font-size: 13px;
}

.product-code-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--line-soft);
}

.product-code-table tr:last-child td {
  border-bottom: 0;
}

.product-code-detail-row td {
  padding: 0;
}

.product-code-detail-block {
  position: relative;
  min-height: 64px;
  padding: 10px 46px 10px 12px;
  background: #ffffff;
}

.product-code-detail-text {
  margin: 0;
  color: #334155;
  font-family: inherit;
  font-size: 12px;
  line-height: 1.4;
  white-space: pre-wrap;
  user-select: text;
}

.product-code-detail-copy {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
  color: var(--green);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}

.product-code-detail-copy:hover,
.product-code-detail-copy.copied {
  border-color: var(--green);
  background: var(--green);
  color: #ffffff;
}

.product-code-cell {
  font-weight: 900;
}

.product-code-quantity {
  text-align: right;
  white-space: nowrap;
  font-weight: 800;
}

.quote-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  color: var(--text);
  font-size: 13px;
}

.quote-table th,
.quote-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  vertical-align: top;
}

.quote-table th {
  color: #5f6b64;
  background: #fafaf8;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.quote-table tbody tr:nth-child(even) {
  background: #fafafa;
}

.quote-table .number-cell {
  text-align: right;
  white-space: nowrap;
  font-weight: 700;
}

.quote-table tfoot td {
  border-bottom: 0;
  background: #f6f5f0;
  font-weight: 900;
}

.quote-table .quote-quantity-cell {
  text-align: left;
}

.quote-optional-label {
  display: block;
  width: 0;
  margin-top: 4px;
  color: #c00000;
  font-size: 10px;
  font-weight: 400;
  line-height: 14px;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: visible;
}

.size-list {
  display: grid;
  gap: 3px;
  padding-top: 8px;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

.size-list-title {
  color: #334155;
}

.preview-toolbar {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 4px;
  border-top: 1px solid var(--line-soft);
  color: #334155;
  font-size: 13px;
  font-weight: 800;
}

.preview-zoom-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}

.preview-zoom-button {
  min-width: 32px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
}

.preview-zoom-button.text {
  min-width: 48px;
  padding: 0 8px;
}

.preview-frame-wrap {
  width: 100%;
  height: 100%;
  min-height: 0;
  align-self: stretch;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.preview-frame-wrap.dragging {
  cursor: grabbing;
}

.svg-preview {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
}

.customer-comparison {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 42px 0 56px;
}

.comparison-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.comparison-eyebrow {
  color: var(--green);
  font-size: 12px;
  font-weight: 800;
}

.comparison-heading h2 {
  margin-top: 6px;
  font-size: 28px;
}

.comparison-geometry {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.comparison-loading,
.comparison-error {
  padding: 34px 0;
  color: var(--muted);
  font-size: 14px;
}

.comparison-loading p {
  margin: 12px 0 0;
  font-weight: 700;
}

.comparison-progress-track {
  width: min(360px, 100%);
  height: 7px;
  overflow: hidden;
  border-radius: 6px;
  background: #d9e3ef;
}

.comparison-progress-track span {
  display: block;
  width: 44%;
  height: 100%;
  border-radius: inherit;
  background: var(--green);
  animation: comparison-progress 1.1s ease-in-out infinite alternate;
}

@keyframes comparison-progress {
  from { transform: translateX(-25%); }
  to { transform: translateX(180%); }
}

.comparison-results {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding-top: 24px;
}

.comparison-card {
  min-height: 190px;
  min-width: 0;
  overflow-wrap: anywhere;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.customer-all .comparison-results { grid-template-columns: minmax(0, 1fr); gap: 0; }
.customer-all .comparison-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 32px;
  align-items: center;
  min-height: 0;
  padding: 28px 24px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}
.customer-all .comparison-copy { display: flex; flex-direction: column; min-width: 0; align-self: stretch; justify-content: center; }
.customer-all .comparison-card h3 { margin: 0; font-size: 22px; line-height: 1.35; }
.customer-all .comparison-included { margin: 14px 0 0; color: var(--muted); line-height: 1.5; }
.customer-all .comparison-card .comparison-price { margin: 0; padding-top: 28px; }
.customer-all .comparison-open { margin-top: 16px; text-decoration: none; text-align: center; width: min(100%, 250px); box-sizing: border-box; }
.customer-all .comparison-image { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; }
.customer-all .comparison-results > .tool-button { justify-self: start; margin-top: 20px; }
@media (max-width: 680px) {
  .customer-all .comparison-card { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 24px 16px; }
  .customer-all .comparison-card h3 { font-size: 20px; }
  .customer-all .comparison-open { width: 100%; }
}
.customer-all .comparison-loading:not(.hidden) {
  min-height: min(420px, 55dvh);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.customer-all .comparison-loading p { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  .customer-all .comparison-progress-track span { animation: none; width: 100%; }
}

.comparison-card.ready {
  border-color: rgba(15, 118, 110, 0.5);
}

.comparison-card.unavailable {
  background: #fbfcfd;
}

.comparison-system {
  color: var(--text);
  font-size: 20px;
  font-weight: 800;
}

.comparison-glass {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
}

.comparison-price {
  margin-top: auto;
  color: var(--green);
  font-size: 23px;
  font-weight: 800;
  line-height: 1.2;
}

.comparison-vat,
.comparison-message {
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.comparison-message {
  margin-top: auto;
}

.comparison-error {
  color: var(--red);
  font-weight: 700;
}

.comparison-variants {
  width: 100%;
  margin-top: 16px;
}

.comparison-variant + .comparison-variant {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.comparison-variant-name {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.comparison-variant .comparison-price {
  margin-top: 4px;
  font-size: 20px;
}

.half-post-selection {
  width: min(720px, calc(100% - 32px));
  margin: 0 auto;
  padding: 34px 0 48px;
}

.half-post-selection-panel {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.half-post-selection-header {
  min-height: 108px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px;
  border-bottom: 1px solid var(--line);
  background: #fbfcfd;
}

.selection-eyebrow {
  color: var(--green);
  font-size: 12px;
  font-weight: 900;
}

.half-post-selection-header h2 {
  margin-top: 5px;
  font-size: 22px;
}

.half-post-selection-system {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.half-post-option-content {
  display: grid;
  gap: 28px;
  min-height: 268px;
  padding: 26px 24px 10px;
}

.half-post-option-group h3 {
  margin: 0 0 10px;
  color: #334155;
  font-size: 13px;
  font-weight: 900;
}

.half-post-height-options,
.half-post-color-options {
  display: grid;
  gap: 8px;
}

.half-post-height-options {
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
}

.half-post-color-options {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.half-post-accessory-options {
  display: grid;
  gap: 8px;
}

.half-post-accessory {
  min-height: 50px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: #334155;
  background: #ffffff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
}

.half-post-accessory:hover,
.half-post-accessory:focus-within {
  border-color: var(--green);
  background: #f1fbf9;
}

.half-post-accessory input {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin: 0;
  accent-color: var(--green);
}

.half-post-accessory-label {
  min-width: 0;
  line-height: 1.35;
}

.half-post-height,
.half-post-color {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: #334155;
  background: #ffffff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
}

.half-post-height:hover:not(:disabled),
.half-post-color:hover:not(:disabled) {
  border-color: var(--green);
  background: #f1fbf9;
}

.half-post-height.active,
.half-post-color.active {
  border-color: var(--green);
  color: var(--green);
  background: #e5f6f3;
  box-shadow: inset 0 -3px 0 var(--green);
}

.half-post-height:disabled,
.half-post-color:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.half-post-swatch {
  width: 18px;
  height: 18px;
  display: inline-block;
  flex: 0 0 auto;
  border: 1px solid rgba(15, 23, 42, 0.28);
  border-radius: 50%;
}

.half-post-swatch.natural {
  background: #e2e8f0;
}

.half-post-swatch.black {
  background: #111827;
}

.half-post-swatch.gray {
  background: #6b7280;
}

.profile-glass-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.half-post-selected-code {
  justify-self: start;
  padding: 7px 10px;
  border: 1px solid rgba(15, 118, 110, 0.45);
  border-radius: 6px;
  color: var(--green);
  background: #f1fbf9;
  font-size: 13px;
  font-weight: 900;
}

.half-post-loading,
.half-post-selection-message {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.half-post-loading {
  align-self: center;
  justify-self: center;
}

.half-post-selection-message {
  min-height: 24px;
  padding: 0 24px;
}

.half-post-selection-message.error {
  color: var(--red);
  font-weight: 700;
}

.half-post-selection-actions {
  display: flex;
  justify-content: flex-end;
  padding: 18px 24px 24px;
}

.direct-glass-stock-dialog {
  width: min(430px, calc(100vw - 32px));
  margin: auto;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: #ffffff;
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.22);
}

.direct-glass-stock-dialog::backdrop {
  background: rgba(15, 23, 42, 0.36);
}

.direct-glass-stock-dialog-card {
  display: grid;
  gap: 12px;
  padding: 22px;
}

.direct-glass-stock-dialog h2 {
  margin: 0;
  font-size: 20px;
}

.direct-glass-stock-dialog p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
}

.direct-glass-stock-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 6px;
}

.direct-glass-editor {
  min-height: calc(100vh - 76px);
  padding: 14px;
}

.direct-glass-editor-shell {
  height: max(620px, calc(100vh - 104px));
  min-height: calc(100vh - 104px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.direct-glass-editor-header,
.direct-glass-drawing-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.direct-glass-editor-header {
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}

.direct-glass-editor-header h2 {
  margin-top: 3px;
  font-size: 21px;
}

.direct-glass-editor-workspace {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 370px;
}

.direct-glass-drawing-panel {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border-right: 1px solid var(--line);
  background: #f8fafc;
}

.direct-glass-drawing-toolbar {
  min-height: 58px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: #ffffff;
}

.direct-glass-drawing-toolbar h3,
.direct-glass-inspector h3 {
  margin: 0;
  font-size: 14px;
}

.direct-glass-fit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 30px;
}

.direct-glass-fit[aria-pressed="true"] {
  color: #0f766e;
  background: #e1f3f2;
  border-color: #0f766e;
}

#directGlassZoomLabel {
  min-width: 42px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.direct-glass-drawing {
  min-height: 0;
  overflow: auto;
  padding: 18px;
  background: #eef3f6;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  overflow-anchor: none;
  overscroll-behavior: contain;
}

.direct-glass-drawing-content {
  box-sizing: content-box;
  width: max-content;
}

.direct-glass-svg-part {
  min-width: max-content;
  margin-bottom: 18px;
  background: #ffffff;
  border: 1px solid #d8e0e9;
}

.direct-glass-svg-part:last-child {
  margin-bottom: 0;
}

.direct-glass-svg-part > svg {
  display: block;
  max-width: none;
  height: auto;
}

.direct-glass-drawing [data-glass-pane] {
  cursor: grab;
}

.direct-glass-drawing.dragging,
.direct-glass-drawing.dragging * {
  cursor: grabbing !important;
}

.direct-glass-drawing [data-glass-pane].selected .glass-panel {
  stroke: #0f766e !important;
  stroke-width: 4 !important;
}

.direct-glass-anchor:disabled {
  color: #64748b;
  background: #f1f5f9;
  cursor: not-allowed;
}

.direct-glass-pane-hit {
  fill: transparent;
  stroke: transparent;
  stroke-width: 32;
  pointer-events: all;
}

.direct-glass-inspector {
  min-width: 0;
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 14px;
  overflow: auto;
  padding: 18px;
  background: #ffffff;
}

.direct-glass-inspector-content {
  display: grid;
  gap: 13px;
}

.direct-glass-empty {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.direct-glass-pane-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  color: var(--text);
  font-size: 16px;
  font-weight: 900;
}

.direct-glass-pane-title span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.direct-glass-field-label,
.direct-glass-control-label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.direct-glass-length-field {
  height: 44px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
}

.direct-glass-length-field:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 1px var(--blue);
}

.direct-glass-length-field input {
  min-width: 0;
  height: 42px;
  border: 0;
  padding: 0 10px;
  outline: 0;
  color: var(--text);
  background: transparent;
  font-size: 17px;
  font-weight: 900;
}

.direct-glass-length-field input.invalid {
  color: var(--red);
}

.direct-glass-length-field span {
  padding-right: 11px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.direct-glass-anchor-options,
.direct-glass-source-options {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
}

.direct-glass-anchor-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.direct-glass-source-options {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.direct-glass-anchor,
.direct-glass-source {
  min-width: 0;
  min-height: 42px;
  border: 0;
  border-right: 1px solid var(--line);
  padding: 6px 7px;
  color: #526277;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
}

.direct-glass-anchor:last-child,
.direct-glass-source:last-child {
  border-right: 0;
}

.direct-glass-anchor.active {
  color: #0f5f59;
  background: #dff4f2;
  box-shadow: inset 0 -3px 0 var(--green);
}

.direct-glass-source.active.stock {
  color: #075985;
  background: #e0f2fe;
}

.direct-glass-source.active.cut {
  color: #ffffff;
  background: #111827;
}

.direct-glass-source.active.custom {
  color: #4a3100;
  background: #fde68a;
}

.direct-glass-free-space {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.direct-glass-free-space div {
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: #f8fafc;
}

.direct-glass-free-space span,
.direct-glass-free-space strong {
  display: block;
}

.direct-glass-free-space span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.direct-glass-free-space strong {
  margin-top: 3px;
  color: var(--text);
  font-size: 15px;
}

.direct-glass-price {
  min-height: 21px;
  color: var(--green-dark);
  font-size: 15px;
  font-weight: 900;
}

.direct-glass-feedback {
  min-height: 36px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}

.direct-glass-feedback.error {
  color: var(--red);
}

.staff-hu-editor .selected-system {
  height: auto;
  min-height: 38px;
  min-width: 0;
  max-width: 100%;
  line-height: 1.35;
  overflow-wrap: break-word;
}

.staff-hu-editor .top-actions > button {
  white-space: nowrap;
}

.staff-hu-editor .edge-row {
  grid-template-columns: 30px minmax(0, 1fr) minmax(76px, auto) 36px;
  gap: 6px;
}

.staff-hu-editor .edge-row .edge-badge {
  grid-column: 1;
  grid-row: 1;
}

.staff-hu-editor .edge-row .edge-meta {
  grid-column: 2 / 4;
  grid-row: 1;
}

.staff-hu-editor .edge-row .edge-delete,
.staff-hu-editor .edge-row .edge-delete-placeholder {
  grid-column: 4;
  grid-row: 1;
  width: 32px;
  height: 32px;
  justify-self: end;
}

.staff-hu-editor .edge-row .edge-length-field {
  grid-column: 1 / -1;
  grid-row: 2;
  min-width: 0;
}

.staff-hu-editor .edge-row .edge-meter-lock {
  grid-column: 3 / -1;
  grid-row: 2;
  min-width: 0;
  white-space: nowrap;
}

.staff-hu-editor .system-card {
  min-height: 136px;
}

.staff-hu-editor .system-name {
  font-size: 17px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.staff-hu-editor .section-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  gap: 10px 6px;
  margin-bottom: 14px;
}

.staff-hu-editor .section-actions > button {
  flex: 1 1 auto;
  min-width: 0;
  height: 38px;
  padding: 0 8px;
  font-size: 13px;
  white-space: nowrap;
}

.staff-hu-editor .section-actions > #submitPath {
  grid-column: 1 / -1;
  width: 100%;
  height: auto;
  min-height: 54px;
  padding: 12px 16px;
  font-size: 18px;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
}

.staff-hu-editor .add-part-button {
  color: #111827;
  background: var(--yellow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  height: 44px;
  padding: 0 16px;
  font-size: 15px;
  white-space: nowrap;
}

.staff-hu-editor .add-part-button svg {
  flex: 0 0 20px;
}

.staff-hu-editor .add-part-button:focus-visible {
  outline: 2px solid var(--yellow-dark);
  outline-offset: 3px;
}

.staff-hu-editor .add-part-button:hover:not(:disabled) {
  background: #eab308;
}

.staff-hu-editor .add-part-button:active:not(:disabled) {
  background: var(--yellow-dark);
}

.staff-hu-editor .path-edge,
.staff-hu-editor .path-edge-hit,
.staff-hu-editor .platform-side,
.staff-hu-editor .balcony-part-label {
  cursor: grab;
}

.staff-hu-editor .path-edge-hit {
  stroke: transparent;
  stroke-width: 28;
  pointer-events: stroke;
}

.staff-hu-editor #pathCanvas.input-dragging,
.staff-hu-editor #pathCanvas.input-dragging * {
  cursor: grabbing;
}

.staff-hu-editor .point-handle,
.staff-hu-editor .point-handle:active {
  cursor: pointer;
}

.staff-hu-editor .section-label {
  pointer-events: none;
}

.staff-hu-editor .canvas-length-control {
  cursor: pointer;
  outline: none;
}

.staff-hu-editor .canvas-length-control rect {
  fill: #ffffff;
  stroke: var(--green);
  stroke-width: 1.5;
}

.staff-hu-editor .canvas-length-control:hover rect,
.staff-hu-editor .canvas-length-control:focus-visible rect {
  fill: #e3f5f1;
  stroke-width: 2.5;
}

.staff-hu-editor .canvas-length-control .length-label {
  fill: var(--green-dark);
  stroke: none;
  pointer-events: none;
}

.staff-hu-editor .length-edit-icon {
  fill: none;
  stroke: var(--green-dark);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.staff-hu-editor .canvas-length-meters {
  display: block;
  min-height: 24px;
  margin: 6px 2px 0;
  color: var(--green-dark);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  overflow-wrap: anywhere;
}

.edge-length-error {
  grid-column: 1 / -1;
  color: var(--red);
  font-size: 13px;
  line-height: 1.4;
}

.edge-length-field:has(input[aria-invalid="true"]) {
  border-color: var(--red);
}

.customer-calculation-help {
  margin: 12px 0;
  color: var(--text);
  font-size: 16px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.customer-contact {
  display: block;
  margin: 12px 0;
  color: var(--red);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.customer-contact a {
  color: inherit;
  text-decoration: underline;
}

.product-customer .staff-price-wait.has-error > p,
.product-customer .half-post-selection-message.error,
.product-customer .result-message.error,
.product-customer .customer-calculation-help,
.product-customer .customer-plan-error {
  color: #111111;
}

.staff-hu-editor .canvas-length-editor {
  position: absolute;
  z-index: 5;
  padding: 6px;
  border: 1px solid var(--green);
  border-radius: 6px;
  background: #ffffff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
}

.staff-hu-editor .canvas-length-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px 40px;
  gap: 4px;
}

.staff-hu-editor .canvas-length-fields label {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
}

.staff-hu-editor .canvas-length-fields input {
  width: 100%;
  min-width: 0;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0 4px;
  color: var(--text);
  font-size: 16px;
  -moz-appearance: textfield;
}

.staff-hu-editor .canvas-length-fields input::-webkit-inner-spin-button,
.staff-hu-editor .canvas-length-fields input::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

.staff-hu-editor .canvas-length-fields button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  background: var(--panel-2);
  color: var(--muted);
  cursor: pointer;
}

.staff-hu-editor .canvas-length-fields button[type="submit"] {
  background: var(--green);
  color: #ffffff;
}

.staff-hu-editor .canvas-length-fields button svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.staff-hu-editor .canvas-length-fields input:focus,
.staff-hu-editor .canvas-length-fields button:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 1px;
}

.staff-hu-editor .canvas-length-fields input[aria-invalid="true"] {
  border-color: var(--red);
}

.staff-hu-editor .canvas-length-error {
  margin-top: 6px;
  color: var(--red);
  font-size: 12px;
  line-height: 1.4;
}

.hidden {
  display: none !important;
}

@media (max-width: 1000px) {
  .topbar {
    height: auto;
    align-items: flex-start;
    flex-direction: column;
  }

  .top-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .workspace {
    height: auto;
    min-height: calc(100vh - 120px);
    grid-template-columns: 1fr;
  }

  .workspace.has-result {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .workspace.has-result .canvas-panel,
  .workspace.has-result .system-switch-block,
  .workspace.has-result .sections-block,
  .workspace.has-result .price-block,
  .workspace.has-result .result-block {
    grid-column: 1;
    grid-row: auto;
  }

  .system-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .canvas-panel {
    min-height: 620px;
  }

  .side-panel {
    max-height: none;
  }

  .comparison-results {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .direct-glass-editor {
    min-height: auto;
    padding: 10px;
  }

  .direct-glass-editor-shell {
    height: auto;
    min-height: calc(100vh - 96px);
  }

  .direct-glass-editor-workspace {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(480px, 62vh) auto;
  }

  .direct-glass-drawing-panel {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}

@media (max-width: 560px) {
  .workspace {
    padding: 8px;
  }

  h1 {
    font-size: 20px;
  }

  .top-actions > *,
  .primary-button {
    flex: 1 1 auto;
  }

  .field.small {
    width: calc(50% - 5px);
  }

  .shape-picker {
    width: 100%;
  }

  .shape-options {
    flex: 1;
    grid-template-columns: repeat(3, minmax(42px, 1fr)) minmax(70px, 1.25fr);
  }

  .system-picker {
    width: min(100% - 16px, 1120px);
  }

  .system-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .edge-row {
    grid-template-columns: 34px minmax(0, 1fr) 38px;
  }

  .edge-meter-lock,
  .edge-length-field {
    grid-column: 1 / -1;
  }

  .system-switch-row {
    grid-template-columns: 1fr;
  }

  .customer-comparison {
    width: min(100% - 24px, 1180px);
    padding: 26px 0 40px;
  }

  .comparison-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .comparison-heading h2 {
    font-size: 24px;
  }

  .comparison-results {
    grid-template-columns: 1fr;
  }

  .comparison-card {
    min-height: 142px;
  }

  .half-post-selection {
    width: min(100% - 16px, 720px);
    padding: 16px 0 32px;
  }

  .half-post-selection-header {
    align-items: stretch;
    flex-direction: column;
    padding: 18px;
  }

  .half-post-selection-header .tool-button {
    align-self: flex-start;
  }

  .half-post-option-content {
    min-height: 0;
    padding: 22px 18px 8px;
  }

  .half-post-height-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .half-post-selection-message {
    padding: 0 18px;
  }

  .half-post-selection-actions {
    padding: 16px 18px 20px;
  }

  .direct-glass-stock-dialog-card {
    padding: 18px;
  }

  .direct-glass-stock-dialog-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .direct-glass-editor-header,
  .direct-glass-drawing-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .direct-glass-editor-header .tool-button {
    align-self: flex-start;
  }

  .direct-glass-drawing {
    padding: 10px;
  }

  .direct-glass-source-options {
    grid-template-columns: 1fr;
  }

  .direct-glass-source {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .direct-glass-source:last-child {
    border-bottom: 0;
  }
}
.staff-price-preview .staff-price-wait {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 24px;
  min-height: 360px;
  padding: 32px 0;
  text-align: center;
}
.staff-price-wait-indicator {
  width: min(380px, 100%);
  display: grid;
  gap: 20px;
}
.staff-price-wait p {
  margin: 0;
  color: var(--muted);
  font-size: 19px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.staff-price-wait.has-error p {
  color: var(--red);
}
.staff-price-wait-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
@media (prefers-reduced-motion: reduce) {
  .staff-price-wait .comparison-progress-track span {
    animation: none;
    transform: translateX(75%);
  }
}

/* Shared glass photographs, scoped to Staff selection and its image dialog. */
.staff-price-preview .staff-glass-product-row,
.staff-price-preview .staff-glass-film-row {
  position: relative;
  min-width: 0;
}
.staff-price-preview .staff-glass-product {
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  padding: 12px;
}
.staff-price-preview .staff-glass-product-info {
  display: block;
  min-width: 0;
  padding-right: 38px;
}
.staff-price-preview .staff-glass-product .staff-price-color {
  font-size: 16px;
}
.staff-price-preview .staff-glass-photo {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #eef0f2;
  border-radius: 4px;
}
.staff-price-preview .staff-glass-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.staff-price-preview .staff-glass-image-error {
  padding: 10px;
  text-align: center;
  font-size: 12px;
  color: #536171;
}
.staff-price-preview .staff-glass-photo [hidden] {
  display: none;
}
.staff-price-preview .staff-glass-zoom {
  position: absolute;
  top: 16px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  color: var(--green);
  cursor: pointer;
}
.staff-price-preview .staff-glass-zoom:hover {
  background: #e5f6f3;
}
.staff-price-preview .staff-film-image-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}
.staff-price-preview .staff-film-image-option {
  height: 100%;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 12px 12px 18px;
}
.staff-price-preview .staff-film-image-option.selected {
  border-color: var(--green);
  box-shadow: inset 0 0 0 1px var(--green);
}
.staff-price-preview .staff-film-image-option .staff-glass-photo {
  margin-bottom: 18px;
}
.staff-price-preview .staff-film-image-option .staff-price-color {
  font-size: 16px;
}
.staff-price-preview .staff-glass-confirmation {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1 1 300px;
  min-width: 0;
}
.staff-price-preview .staff-glass-confirmation strong {
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.5;
}
.staff-price-preview .staff-glass-photo.compact {
  width: 96px;
  flex: 0 0 96px;
}
.glass-icon-definitions {
  position: absolute;
  overflow: hidden;
}
.staff-glass-image-dialog {
  width: min(1000px, calc(100% - 32px));
  max-width: calc(100% - 32px);
  max-height: calc(100dvh - 32px);
  padding: 16px;
  border: 1px solid #c9d6df;
  border-radius: 6px;
  background: #fff;
  color: #152031;
}
.staff-glass-image-dialog::backdrop {
  background: rgb(0 0 0 / 55%);
}
.staff-glass-image-dialog header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.staff-glass-image-dialog h2 {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.staff-glass-image-dialog form {
  flex: 0 0 auto;
}
.staff-glass-original {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  max-height: 70dvh;
  background: #eef0f2;
}
.staff-glass-original img {
  display: block;
  width: 100%;
  max-height: 70dvh;
  object-fit: contain;
}
.staff-glass-original [hidden] {
  display: none;
}
@media (max-width: 700px) {
  .staff-price-preview .staff-film-image-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .staff-price-preview .staff-glass-product {
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 14px;
  }
  .staff-price-preview .staff-glass-product-info {
    padding-right: 0;
  }
  .staff-price-preview .staff-glass-product-row .staff-glass-zoom {
    left: 18px;
    right: auto;
  }
}
@media (max-width: 420px) {
  .staff-price-preview .staff-glass-product {
    grid-template-columns: minmax(0, 1fr);
  }
  .staff-price-preview .staff-glass-product .staff-glass-photo {
    max-width: 224px;
    justify-self: center;
  }
  .staff-price-preview .staff-glass-confirmation {
    gap: 10px;
  }
  .staff-price-preview .staff-glass-photo.compact {
    width: 72px;
    flex-basis: 72px;
  }
}
@media (pointer: coarse) {
  .staff-price-preview .staff-glass-zoom {
    width: 44px;
    height: 44px;
  }
}

.staff-accessory-group {
  min-width: 0;
  margin: 24px 0 0;
  padding: 0;
  border: 0;
}
[data-required-selection] { scroll-margin-top: 16px; }
[data-required-selection].needs-answer { outline: none; }
[data-required-selection].needs-answer > .staff-accessory-grid,
[data-required-selection].needs-answer > .staff-price-matrix,
[data-required-selection].needs-answer > .half-post-products {
  outline: 1px solid #b8202c;
  outline-offset: 4px;
}
.staff-selection-required {
  margin: 0 0 12px;
  color: #b8202c;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.staff-accessory-group legend {
  display: block;
  width: 100%;
  margin-bottom: 12px;
  padding: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}
.staff-accessory-group + .staff-accessory-group {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.half-post-header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 8px;
  max-width: 100%;
}
.half-post-header-actions button {
  max-width: 100%;
  min-height: 40px;
  white-space: normal;
  overflow-wrap: break-word;
}
.half-post-header-actions .primary-button {
  max-width: 300px;
  line-height: 1.4;
}
.staff-price-preview .half-post-selection-header > div:first-child {
  min-width: 0;
}
.staff-price-money,
.number-cell,
.comparison-price {
  font-variant-numeric: tabular-nums;
}
@media (max-width: 700px) {
  .half-post-header-actions { width: 100%; }
  .half-post-header-actions .primary-button { max-width: 100%; }
}

/* All seven compositions use the shared full-frame comparison photographs. */
.staff-price-preview .staff-glass-composition-group {
  min-width: 0;
  margin-bottom: 20px;
}
.staff-price-preview .staff-glass-composition-group h4 {
  margin: 18px 0 10px;
  font-size: 16px;
  line-height: 1.5;
}
.staff-price-preview .staff-glass-comparison-row {
  grid-template-columns: minmax(0, 356px) minmax(0, 1fr);
  gap: 24px;
  cursor: default;
}
.staff-price-preview .staff-glass-comparison-media {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.staff-price-preview .staff-glass-image-select,
.staff-price-preview .staff-glass-comparison-row .staff-glass-product-info {
  min-width: 0;
  cursor: pointer;
}
.staff-price-preview .staff-glass-comparison-row .staff-glass-photo {
  aspect-ratio: 2304 / 1086;
  max-width: none;
}
.staff-price-preview .staff-glass-comparison-row .staff-glass-product-info {
  padding-right: 0;
}
.staff-price-preview .customer-glass-recommendation {
  display: inline-block;
  margin-left: 8px;
  color: #b91c1c;
  font: inherit;
  overflow-wrap: anywhere;
  max-width: 100%;
}
.staff-price-preview .staff-glass-comparison-media .staff-glass-zoom {
  position: static;
  width: 44px;
  height: 44px;
  border-color: var(--green);
}
.staff-glass-image-dialog.comparison .staff-glass-original {
  aspect-ratio: 2304 / 1086;
}
@media (max-width: 700px) {
  .staff-price-preview .staff-glass-comparison-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .staff-price-preview .staff-glass-comparison-media {
    width: 100%;
    max-width: 440px;
  }
}

/* Horizontal glass choice grid. Film and accessory layouts are unchanged. */
.staff-price-preview .staff-glass-composition-group {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px 16px;
  margin-bottom: 8px;
}
.staff-price-preview .staff-glass-composition-group h4 {
  grid-column: 1 / -1;
  margin: 8px 0 0;
}
.staff-price-preview .staff-glass-comparison-row {
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 12px;
  height: 100%;
}
.staff-price-preview .staff-glass-comparison-row .staff-price-color {
  margin-bottom: 8px;
}
@media (min-width: 600px) {
  .staff-price-preview .staff-glass-composition-group {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .staff-price-preview .customer-clear-recommended { grid-column: 1 / -1; }
  .staff-price-preview .customer-clear-recommended .staff-glass-comparison-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
  .staff-price-preview .customer-clear-recommended .staff-glass-product-info { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
  .staff-price-preview .staff-glass-composition-group {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .staff-price-preview .customer-clear-recommended .staff-glass-comparison-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Full product composition and scope of each base price. */
.staff-price-preview .staff-price-system-note {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.staff-price-preview .staff-glass-comparison-row .staff-price-color {
  min-height: 44px;
  align-items: flex-start;
}

/* Shared half-post photography; independent of glass/price selection layouts. */
.half-post-gallery { border: 0; padding: 0; margin: 0; min-width: 0; }
.half-post-gallery legend { font-size: 16px; font-weight: 700; padding: 0; }
.half-post-fixed-height { margin: 8px 0 16px; color: #536178; }
.half-post-products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.half-post-product { border: 1px solid #c7d4e1; border-radius: 6px; padding: 16px; min-width: 0; background: #fff; }
.half-post-product.selected { border-color: #167872; box-shadow: inset 0 0 0 1px #167872; background: #e4f5f2; }
.half-post-product-name { display: flex; align-items: center; gap: 10px; min-height: 32px; cursor: pointer; font-size: 20px; }
.half-post-product-name input { width: 18px; height: 18px; flex: 0 0 18px; accent-color: #167872; margin: 0; }
.half-post-product-name:has(input:disabled) { cursor: default; color: #687585; }
.half-post-unavailable { color: #687585; font-size: 14px; margin: 4px 0; }
.half-post-main-row { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; gap: 10px; margin: 12px 0; }
.staff-price-preview .half-post-main-row .staff-glass-zoom { position: static; width: 44px; height: 44px; border-color: #167872; }
[data-post-main] { height: 320px; min-width: 0; }
.half-post-photo { display: flex; position: relative; align-items: center; justify-content: center; width: 100%; height: 100%; }
.half-post-photo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.half-post-photo img[hidden], .half-post-image-error[hidden] { display: none; }
.half-post-image-error { font-size: 13px; padding: 8px; text-align: center; color: #536178; overflow-wrap: anywhere; }
.half-post-thumbnails { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 300px; margin: 0 auto; }
.half-post-thumbnails button { padding: 3px; border: 1px solid #c7d4e1; border-radius: 4px; background: #fff; cursor: pointer; height: 80px; min-width: 0; }
.half-post-thumbnails button[aria-pressed="true"] { border-color: #167872; box-shadow: inset 0 0 0 1px #167872; }
.half-post-gallery button:focus-visible, .half-post-product-name input:focus-visible, .half-post-dialog button:focus-visible { outline: 3px solid #b28308; outline-offset: 3px; }
.half-post-dialog { width: min(900px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 24px); box-sizing: border-box; padding: 16px; border: 1px solid #c7d4e1; border-radius: 8px; background: #fff; color: #172031; }
.half-post-dialog::backdrop { background: rgb(0 0 0 / 55%); }
.half-post-dialog header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.half-post-dialog h2 { font-size: 20px; line-height: 1.35; margin: 0; overflow-wrap: anywhere; }
.half-post-dialog form { margin: 0; }
.half-post-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 10px; flex: 0 0 44px; }
.half-post-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.half-post-original-frame { display: flex; justify-content: center; align-items: center; height: min(65dvh, 650px); margin: 12px 0; }
.half-post-original-frame img { display: block; width: 100%; height: 100%; object-fit: contain; }
.half-post-original-frame img[hidden] { display: none; }
.half-post-dialog footer { display: flex; justify-content: center; align-items: center; gap: 16px; }
#halfPostImageCount { width: 54px; text-align: center; font-variant-numeric: tabular-nums; }
@media (max-width: 620px) {
  .half-post-products { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .half-post-product { padding: 12px; }
  [data-post-main] { height: 270px; }
  .half-post-main-row { gap: 6px; }
  .half-post-thumbnails { gap: 8px; }
  .half-post-dialog { padding: 12px; }
}

/* Whole-system starting prices share the existing two-column photo layout. */
.half-post-starting-price {
  display: grid;
  gap: 6px;
  margin: 12px 0 16px;
  min-height: 100px;
  font-size: 19px;
  line-height: 1.4;
  color: #526078;
  overflow-wrap: anywhere;
}
.half-post-starting-price .staff-price-money {
  display: block;
  font-size: 19px;
  color: #111827;
}
.half-post-starting-price .staff-price-money small {
  white-space: nowrap;
  font-size: 12px;
  font-weight: 400;
  color: #526078;
}

/* Collapse removed descriptions without changing photo or selection controls. */
.half-post-starting-price {
  min-height: 0;
}
.staff-price-preview .staff-accessories-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}
.staff-price-preview .staff-accessories-heading h3 {
  margin: 0;
}

.staff-price-preview .staff-accessories-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px 24px;
}
.staff-current-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  min-width: 0;
  min-height: 28px;
  font-size: 16px;
  line-height: 1.4;
  color: var(--text);
  overflow-wrap: anywhere;
}
.staff-current-price .staff-price-money {
  font-size: 20px;
  line-height: 1.4;
  color: var(--teal, #187873);
}
.staff-current-price .staff-price-money small {
  white-space: nowrap;
}
.staff-current-price-status {
  color: var(--muted);
}
.staff-price-preview .half-post-option-content:focus {
  outline: none;
}
@media (max-width: 850px) {
  .staff-price-preview .staff-accessories-heading {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .staff-accessories-heading .staff-current-price {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .staff-accessories-heading > .tool-button {
    grid-column: 2;
    grid-row: 1;
  }
}
@media (max-width: 520px) {
  .staff-price-preview .staff-accessories-heading {
    grid-template-columns: minmax(0, 1fr);
  }
  .staff-accessories-heading > .tool-button {
    grid-column: 1;
    grid-row: 3;
    justify-self: start;
  }
}

/* One shared whole-system price band across the selection steps and result. */
.staff-system-price {
  min-width: 0;
}
.staff-system-price .staff-current-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin: 0;
  min-height: 36px;
  color: #b4232b;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}
.staff-system-price .staff-price-money {
  min-width: 0;
  font-size: 26px;
  line-height: 1.4;
  color: inherit;
}
.staff-system-price .staff-price-money small {
  color: inherit;
  font-size: 18px;
  font-weight: 600;
  white-space: nowrap;
}
.staff-system-price .staff-current-price-status {
  color: var(--muted);
  font-size: 18px;
  font-weight: 400;
}
.staff-system-price-note {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.staff-price-preview .staff-accessories-heading {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
#materialSummary > .staff-system-price {
  padding: 18px 14px;
  border-bottom: 1px solid var(--line);
}

/* Compact selection chrome only; editor and result layouts stay unchanged. */
.staff-hu-editor .staff-price-preview {
  padding-top: 12px;
}
.staff-price-preview .half-post-selection-header {
  min-height: 64px;
  padding: 12px 24px;
  align-items: center;
  gap: 12px 24px;
}
.staff-price-preview .half-post-heading {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
#staffPriceSteps {
  display: none;
}
.staff-price-preview #staffPriceSteps {
  display: flex;
  min-width: 0;
  padding: 0;
  border: 0;
  gap: 8px 16px;
}
.staff-price-preview .half-post-header-actions {
  margin-left: auto;
}
.staff-price-preview .half-post-option-content {
  padding-top: 12px;
}
.staff-price-preview .staff-system-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
}
.staff-price-preview .staff-system-price > .staff-current-price {
  flex: 0 1 auto;
  max-width: 100%;
}
.staff-price-preview .staff-system-price-note {
  flex: 1 1 320px;
  min-width: 0;
  margin: 0;
}
.staff-price-preview .staff-price-main {
  padding-top: 12px;
}
@media (max-width: 700px) {
  .staff-price-preview .half-post-selection-header {
    flex-direction: row;
  }
  .staff-price-preview .half-post-header-actions {
    width: auto;
  }
}
@media (max-width: 480px) {
  .staff-price-preview .half-post-selection-header {
    padding: 12px;
  }
}

/* Distinct, compact glass sections; green remains the selected-option state. */
.staff-price-preview .staff-glass-composition-group {
  margin-bottom: 12px;
}
.staff-price-preview .staff-glass-composition-group + .staff-glass-composition-group {
  border-top: 1px solid #c4c8cc;
  padding-top: 12px;
}
.staff-price-preview .staff-glass-composition-group > h4 {
  margin: 0;
  padding: 8px 12px;
  background: #f0f1f3;
  color: #20242a;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0;
  text-align: center;
  overflow-wrap: anywhere;
}

.staff-price-preview .staff-glass-composition-group > h4 .staff-glass-color-word { color: #1e4c86; }

/* Customer color selection only; film, staff and material eligibility are unchanged. */
.staff-price-preview .customer-glass-first .customer-clear-combination .staff-glass-photo {
  aspect-ratio: 4 / 3;
}
.staff-price-preview .customer-glass-first > h3 {
  margin-bottom: 16px;
}
.staff-price-preview .customer-glass-first .customer-clear-recommended .staff-glass-comparison-row {
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  padding: 20px 16px;
}
.staff-price-preview .customer-glass-first .customer-clear-recommended .staff-glass-product-info {
  grid-column: auto;
}
.staff-price-preview .customer-glass-first .customer-clear-recommended .staff-price-color {
  font-size: 20px;
  line-height: 1.5;
}
.staff-price-preview .customer-glass-first .customer-clear-recommended .customer-glass-recommendation {
  margin: 8px 0 0;
  padding: 0;
  background: transparent;
  color: #b91c1c;
  border-radius: 0;
  font-size: 14px;
  font-weight: 600;
}
.staff-price-preview .customer-glass-colors {
  min-width: 0;
  margin-top: 20px;
  border: 1px solid #e2c66b;
  border-left: 4px solid #ba8b22;
}
.staff-price-preview .customer-glass-colors > summary {
  padding: 18px 16px;
  background: #fff4c4;
  color: #514725;
  cursor: pointer;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  list-style-position: inside;
  overflow-wrap: anywhere;
}
.staff-price-preview .customer-glass-colors > summary small {
  display: block;
  margin: 4px 0 0;
  color: #685d37;
  font-size: 14px;
  font-weight: 400;
}
.staff-price-preview .customer-glass-colors > summary:hover {
  background: #ffedaa;
}
.staff-price-preview .customer-glass-colors > summary:focus-visible {
  outline: 2px solid #87681c;
  outline-offset: 3px;
}
.staff-price-preview .customer-glass-colors[open] > summary {
  margin-bottom: 16px;
}
@media (max-width: 700px) {
  .staff-price-preview .customer-glass-first .customer-clear-recommended .staff-glass-comparison-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding: 16px 8px;
  }
  .staff-price-preview .customer-glass-first .customer-clear-recommended .staff-price-color {
    font-size: 17px;
  }
  .staff-price-preview .customer-glass-colors > summary {
    padding: 16px 12px;
    font-size: 17px;
  }
}

/* Neutral flip state and plain waiting guidance; progress styles stay intact. */
.staff-hu-editor #platformFlip.active {
  border-color: var(--line);
  color: var(--text);
  background: #ffffff;
}
.staff-price-preview .staff-price-wait > .staff-wait-guidance {
  max-width: 680px;
  font-size: 18px;
}

/* System scope is red; completed steps share one consistent return control. */
.staff-hu-editor .staff-system-price-note {
  color: #b4232b;
  font-size: 24px;
  line-height: 1.4;
}
.staff-price-preview #staffPriceSteps {
  flex: 1 1 600px;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.staff-price-preview #staffPriceSteps .staff-back-button {
  flex: 0 0 172px;
  width: 172px;
  min-width: 0;
  height: 40px;
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
  color: var(--text);
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0;
  text-align: center;
}
@media (max-width: 480px) {
  .staff-price-preview #staffPriceSteps .staff-back-button {
    flex-basis: calc((100% - 8px) / 2);
    width: calc((100% - 8px) / 2);
    height: 44px;
    min-height: 44px;
  }
}

/* Product notes stay neutral; only the whole-system heading is red and 24px. */
.staff-hu-editor .staff-system-price .staff-price-money,
.staff-hu-editor .staff-system-price .staff-price-money small {
  font-size: 24px;
}
.staff-price-preview .staff-accessory-grid {
  display: grid;
  grid-template-columns: repeat(var(--choice-count, 2), minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}
.staff-price-preview .staff-accessory-none {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 16px;
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 4px;
  cursor: pointer;
}
.staff-price-preview .staff-accessory-none .staff-price-color {
  font-size: 18px;
  line-height: 1.4;
}
.staff-price-preview .staff-accessory-none.selected {
  border-color: var(--green);
  box-shadow: inset 0 0 0 1px var(--green);
}
.staff-price-preview .staff-accessory-option {
  position: relative;
  min-width: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 4px;
}
.staff-price-preview .staff-accessory-option.selected {
  border-color: var(--green);
  box-shadow: inset 0 0 0 1px var(--green);
}
.staff-price-preview .staff-accessory-select {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 12px;
  height: 100%;
  padding: 16px;
  cursor: pointer;
}
.staff-price-preview .staff-accessory-photo {
  width: min(320px, 100%);
  aspect-ratio: 1;
  margin-inline: auto;
}
.staff-price-preview .staff-accessory-select .staff-price-color {
  align-items: flex-start;
  font-size: 18px;
  line-height: 1.4;
}
.staff-price-preview .staff-accessory-description {
  display: block;
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.staff-price-preview .staff-accessory-select .staff-starting-price {
  margin: 0;
  padding-left: 26px;
  min-height: 28px;
}
.staff-price-preview .staff-accessory-option > .staff-glass-zoom {
  top: 16px;
  right: 16px;
  left: auto;
  width: 44px;
  height: 44px;
}
.staff-glass-image-dialog.accessory .staff-glass-original {
  width: min(100%, 70dvh);
  aspect-ratio: 1;
  margin-inline: auto;
}
@media (max-width: 700px) {
  .staff-price-preview .staff-accessory-grid {
    gap: 12px;
  }
  .staff-price-preview .staff-accessory-select,
  .staff-price-preview .staff-accessory-none {
    padding: 10px;
  }
  .staff-price-preview .staff-accessory-select .staff-price-color,
  .staff-price-preview .staff-accessory-none .staff-price-color,
  .staff-price-preview .staff-accessory-description {
    font-size: 14px;
    overflow-wrap: anywhere;
  }
  .staff-price-preview .staff-accessory-option > .staff-glass-zoom {
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
  }
  .staff-price-preview .staff-accessory-select .staff-starting-price,
  .staff-price-preview .staff-accessory-none .staff-starting-price {
    padding-left: 0;
  }
  .staff-price-preview .staff-accessory-grid .staff-price-money {
    font-size: 16px;
    white-space: normal;
  }
  .staff-price-preview .staff-accessory-grid .staff-price-color {
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
  }
}

/* Product entries share configuration controls, but present read-only results. */
.product-customer #changeSystem,
.product-customer #systemSwitchBlock,
.product-customer #downloadQuotePackage,
.product-customer #resultMessage:empty,
.product-customer #resultBlock > .download-row,
.product-customer:has(.workspace.has-result) .top-actions {
  display: none !important;
}
body.product-customer:has(.workspace.has-result) {
  height: auto;
  min-height: 100dvh;
  overflow: auto;
}
.product-customer .workspace.has-result {
  width: min(1440px, 100%);
  margin-inline: auto;
  height: auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: start;
  gap: 20px;
  padding: 20px;
  overflow: visible;
}
.product-customer .workspace.has-result .canvas-panel,
.product-customer .workspace.has-result .sections-block {
  display: none;
}
.product-customer .customer-result-header {
  grid-column: 1 / -1;
  min-width: 0;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.customer-result-back {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.customer-result-back .staff-back-button {
  min-height: 38px;
  font-size: 13px;
}
.customer-result-header h2 {
  margin: 20px 0 16px;
  font-size: 24px;
  line-height: 1.4;
  color: #b8202c;
  overflow-wrap: anywhere;
}
.customer-result-header h2 span { display: inline-block; white-space: nowrap; }
.customer-downloads {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.customer-downloads .download-link {
  width: 100%;
  min-height: 58px;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid #147a74;
  border-radius: 6px;
  background: #fff;
  color: #136962;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}
.customer-downloads svg { flex: 0 0 20px; width: 20px; height: 20px; }
.customer-downloads .primary-button { color: #fff; background: #147a74; }
.customer-downloads a[aria-disabled="true"] { opacity: .5; cursor: wait; pointer-events: none; }
.customer-downloads a:focus-visible { outline: 3px solid #238ec5; outline-offset: 3px; }
.product-customer .workspace.has-result .price-block,
.product-customer .workspace.has-result .result-block {
  grid-row: 2;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.product-customer .workspace.has-result .price-block { grid-column: 1; }
.product-customer .workspace.has-result .result-block { grid-column: 2; display: block; }
.product-customer .result-block .preview-toolbar { margin-block: 0 10px; }
.product-customer .result-block .preview-frame-wrap {
  height: 560px;
  max-height: 80dvh;
  min-height: 260px;
}
.product-customer .quote-preview-image-wrap { max-height: none; overflow: visible; }
.product-customer .material-summary { min-width: 0; }
.product-customer .quote-title { flex-wrap: wrap; overflow-wrap: anywhere; }
.product-customer .fallback-plan-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.product-customer .fallback-plan-tab { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .product-customer .workspace.has-result { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .product-customer .workspace.has-result .price-block { grid-column: 1; grid-row: 2; }
  .product-customer .workspace.has-result .result-block { grid-column: 1; grid-row: 3; }
  .customer-downloads { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 400px) {
  .product-customer .workspace.has-result { padding: 10px; gap: 16px; }
  .customer-result-header h2 { font-size: 22px; }
}

/* Each customer's quote, drawing and downloads stay bound to one plan. */
.product-customer .customer-comparison-result #priceBlock,
.product-customer .customer-comparison-result #resultBlock,
.product-customer .customer-comparison-result #customerResultHeader > .customer-downloads,
.product-customer .customer-comparison-result #customerDownloadStatus {
  display: none;
}
.customer-plan-comparison {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(var(--plan-count, 2), minmax(0, 1fr));
  gap: 16px 24px;
  min-width: 0;
}
.customer-plan-comparison:has(> .customer-plan:only-child) {
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  max-width: 820px;
  margin-inline: auto;
}
.customer-plan {
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
  min-width: 0;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.customer-plan h2 { margin: 0; font-size: 20px; line-height: 1.4; overflow-wrap: anywhere; }
.customer-plan h3 { margin: 0 0 10px; font-size: 16px; line-height: 1.4; }
.customer-plan-price { margin: 10px 0 0; color: #b8202c; font-size: 24px; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }

/* Price components and total always describe the same quoted configuration. */
.customer-price-breakdown {
  container: customer-price / inline-size;
  display: grid;
  width: 100%;
  min-width: 0;
  gap: 10px;
  color: #35423f;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
}
.customer-price-breakdown .customer-price-context {
  color: #61706d;
  font-size: 12px;
  font-weight: 400;
}
.customer-price-breakdown .customer-price-part {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: baseline;
  gap: 8px 16px;
}
.customer-price-breakdown [data-price-part] {
  display: inline-flex;
  align-items: baseline;
  justify-self: end;
  gap: 5px;
  text-align: right;
  white-space: nowrap;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.customer-price-breakdown [data-price-part] small {
  display: inline;
  font-size: 13px;
  font-weight: 400;
  color: #61706d;
}
.customer-price-breakdown .customer-price-sum {
  padding-top: 12px;
  border-top: 1px solid #b9c7c2;
  color: #175b50;
  font-weight: 700;
}
.customer-price-breakdown .customer-price-sum strong { font-size: 21px; }
.staff-system-price.customer-price-summary {
  display: block;
  padding: 16px 0 20px;
}
.staff-system-price.customer-price-summary > .staff-current-price {
  display: block;
  width: 100%;
  max-width: 620px;
}
.customer-option-total { display: grid; gap: 4px; min-width: 0; }
.customer-option-total .customer-option-total-label { color: #53635f; font-size: 20px; font-weight: 400; line-height: 1.4; }
.customer-option-total .staff-price-money { display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; color: #175b50; font-size: 20px; line-height: 1.4; }
.customer-option-total .staff-price-money small { color: #61706d; font-size: 13px; font-weight: 400; }
.staff-starting-price:has(.customer-option-total) { display: grid; width: 100%; gap: 10px; }
.half-post-starting-price:has(.customer-option-total) { margin: 12px 0 16px; }
.product-customer .staff-glass-product-info > .staff-starting-price:empty,
.product-customer .staff-film-image-option > .staff-starting-price:empty { display: none; }
.product-customer .staff-accessory-group .staff-price-money {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  white-space: nowrap;
}
@media (max-width: 520px) {
  .product-customer .staff-accessory-grid { grid-template-columns: minmax(0, 1fr); }
}
.customer-plan-price:has(.customer-price-breakdown) { width: 100%; }
@container customer-price (max-width: 540px) {
  .customer-price-breakdown .customer-price-part {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 3px;
  }
  .customer-price-breakdown [data-price-part] {
    justify-self: start;
    text-align: left;
  }
}
@media (max-width: 520px) {
  .customer-price-breakdown { font-size: 14px; gap: 10px; }
  .customer-price-breakdown .customer-price-part { gap: 8px 10px; }
  .customer-price-breakdown [data-price-part] { font-size: 15px; }
  .customer-price-breakdown .customer-price-sum strong { font-size: 19px; }
}
/* Reserve the same currency, starting-price and VAT columns in every summary row. */
.customer-price-breakdown [data-price-part] {
  display: grid;
  grid-template-columns: minmax(0, max-content) 22px 36px 40px;
  column-gap: 4px;
  justify-self: end;
  max-width: 100%;
  text-align: left;
}
.customer-price-breakdown .customer-price-amount {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: right;
}
.customer-price-breakdown .customer-price-currency,
.customer-price-breakdown .customer-price-from,
.customer-price-breakdown [data-price-part] small { text-align: left; }

.customer-plan .customer-downloads { gap: 8px; }
.customer-plan .customer-downloads a { height: auto; min-height: 64px; font-size: 14px; padding: 10px 8px; }
.customer-plan .customer-downloads svg { flex-basis: 16px; width: 16px; height: 16px; }
.customer-plan-quote, .customer-plan-drawing { min-width: 0; }
.customer-plan-quote-image { display: block; width: 100%; height: auto; background: #fff; }
.customer-plan .quote-title { gap: 8px; padding: 12px; }
.customer-plan-drawing .preview-toolbar { margin: 0 0 10px; padding: 0; flex-wrap: wrap; gap: 8px; }
.customer-plan-drawing .preview-toolbar h3 { margin: 0; }
.customer-plan-drawing-frame {
  width: 100%;
  height: 460px;
  max-height: 75dvh;
  min-height: 240px;
  overflow: auto;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
}
.customer-plan-drawing-frame img { display: block; margin: auto; max-width: none; }
.customer-plan-zoom-label { min-width: 42px; text-align: center; font-size: 12px; }
.customer-comparison-result .customer-result-header h2 { color: var(--text); font-size: 20px; margin-bottom: 0; }
@media (max-width: 1100px) and (min-width: 701px) {
  .customer-plan-downloads { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .customer-plan-comparison { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .customer-plan { display: grid; grid-template-rows: auto; grid-row: auto; gap: 16px; }
  .customer-plan-downloads { grid-template-columns: minmax(0, 1fr); }
}

.customer-preview-open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: zoom-in;
}
.customer-preview-open:focus-visible { outline: 3px solid #197b77; outline-offset: 2px; }
.customer-preview-open:disabled { cursor: default; }
.customer-plan-drawing-frame .customer-preview-open { width: max-content; margin: auto; }
html.customer-image-open { overflow: hidden; scrollbar-gutter: stable; }
.customer-result-image-dialog {
  width: min(1440px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  height: calc(100dvh - 24px);
  max-height: calc(100dvh - 24px);
  box-sizing: border-box;
  padding: 12px;
  overflow: hidden;
}
.customer-result-image-dialog[open] { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 12px; }
.customer-result-image-dialog header { margin: 0; min-width: 0; align-items: center; flex-wrap: wrap; }
.customer-result-image-dialog h2 { flex: 1 1 240px; min-width: 0; }
.customer-image-tools { display: flex; gap: 6px; align-items: center; flex: 0 0 auto; }
.customer-image-tools output { min-width: 46px; font-size: 13px; text-align: center; }
.customer-image-tools .half-post-icon { width: 40px; min-width: 40px; height: 40px; min-height: 40px; padding: 6px; flex: 0 0 40px; }
.customer-result-image-frame { min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 12px; background: #eef0f2; }
#customerResultImageContent { width: max-content; min-width: 100%; }
#customerResultImageContent img { display: block; margin: auto; max-width: none; background: #fff; }
#customerResultImageContent img[hidden], #customerResultImageStatus[hidden] { display: none; }
#customerResultImageStatus { color: #20242a; overflow-wrap: anywhere; }
@media (max-width: 420px) {
  .customer-result-image-dialog { padding: 8px; gap: 8px; }
  .customer-image-tools { width: 100%; justify-content: flex-end; gap: 4px; }
}

.customer-glass-breakdown { min-width: 0; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--text); font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.customer-glass-part + .customer-glass-part { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.customer-glass-part h4 { margin: 0 0 8px; color: var(--text); font-size: 15px; }
.customer-glass-part ul { list-style: none; padding: 0; margin: 0; }
.customer-glass-edge + .customer-glass-edge { margin-top: 14px; }
.customer-glass-breakdown p { margin: 4px 0; }
.customer-glass-edge-title span { display: inline-block; }
.customer-glass-source strong { display: block; }
.customer-pane-size { display: inline-block; }
.customer-glass-count { color: var(--muted); }

.customer-plan-breakdown { min-width: 0; }
.customer-plan-breakdown .customer-glass-breakdown { margin-top: 0; padding-top: 0; border-top: 0; }

.customer-profile-comparison { display: block; }
.customer-profile-overviews {
  display: grid;
  grid-template-columns: repeat(var(--plan-count, 2), minmax(0, 1fr));
  gap: 24px;
}
.customer-profile-overview { min-width: 0; }
.customer-profile-overviews:has(> .customer-profile-overview:only-child) { max-width: 820px; margin-inline: auto; }
.customer-profile-overview h2 { margin: 0; font-size: 20px; line-height: 1.4; overflow-wrap: anywhere; }
.customer-profile-description { margin-top: 18px; }
.customer-profile-description h3 { margin: 0 0 8px; font-size: 16px; line-height: 1.5; }
.customer-profile-description p { margin: 0; line-height: 1.65; overflow-wrap: anywhere; }
.customer-profile-comparison-note { margin: 24px 0; padding-block: 16px; border-block: 1px solid var(--line); line-height: 1.65; }
.customer-profile-details > .customer-plan { grid-row: span 3; }
.customer-profile-mobile-title { display: none; }
@media (max-width: 700px) {
  .customer-profile-overviews { grid-template-columns: minmax(0, 1fr); }
  .customer-profile-details > .customer-plan { grid-row: auto; }
  .customer-profile-mobile-title { display: block; grid-column: 1 / -1; }
}

.customer-compact-sizes { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--text); }
.customer-compact-sizes.is-single { max-width: 820px; margin-inline: auto; }
.customer-compact-sizes table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 14px; line-height: 1.65; }
.customer-compact-sizes caption { text-align: center; font-weight: 700; font-size: 16px; margin-bottom: 8px; }
.customer-compact-sizes th, .customer-compact-sizes td { text-align: left; vertical-align: top; padding: 4px 12px 4px 0; overflow-wrap: anywhere; }
.customer-compact-sizes th + th, .customer-compact-sizes td + td { padding-left: 12px; padding-right: 0; }
.customer-compact-sizes .customer-compact-balcony { padding-top: 16px; padding-bottom: 6px; font-size: 15px; }
.customer-compact-edge, .customer-compact-piece { display: inline-block; max-width: 100%; }
.customer-compact-edge { margin-right: 8px; }
.customer-compact-status { color: var(--muted); }
@media (max-width: 420px) {
  .customer-compact-sizes table { font-size: 13px; }
  .customer-compact-sizes th, .customer-compact-sizes td { padding-right: 6px; }
  .customer-compact-sizes th + th, .customer-compact-sizes td + td { padding-left: 6px; padding-right: 0; }
  .customer-compact-edge { display: block; margin-right: 0; }
}

@media (max-width: 1000px) {
  .customer-three-plans .customer-profile-overviews,
  .customer-three-plans .customer-profile-details { grid-template-columns: minmax(0, 1fr); }
  .customer-three-plans .customer-profile-details > .customer-plan { grid-row: auto; }
  .customer-three-plans .customer-profile-mobile-title { display: block; grid-column: 1 / -1; }
}

/* Customer solution selection and selected-plan confirmation. */
.product-customer .workspace.customer-comparison-result {
  width: min(1180px, calc(100% - 32px));
  margin: 12px auto 0;
  padding: 0 24px 24px;
  background: #fff;
}
.product-customer .customer-result-navigation {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 24px;
  min-height: 64px;
  margin-inline: -24px;
  padding: 12px 24px;
  background: #f9fbfc;
  border-bottom: 1px solid var(--line);
}
.product-customer .customer-result-back {
  flex: 1 1 640px;
  min-width: 0;
  padding: 0;
  border: 0;
  gap: 8px 16px;
}
.product-customer #customerPlanNext {
  margin-left: auto;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
.product-customer #customerPlanNext[hidden] { display: none; }
.product-customer .customer-result-header { padding-bottom: 0; border: 0; }
.product-customer #customerResultPrice:focus { outline: none; }
.product-customer .customer-profile-overview {
  border: 1px solid #c7d4e1;
  border-radius: 6px;
  padding: 16px;
  background: #fff;
}
.product-customer .customer-profile-overview.selected {
  border-color: #167872;
  box-shadow: inset 0 0 0 1px #167872;
  background: #e4f5f2;
}
.product-customer .customer-plan-choice { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.product-customer .customer-plan-choice input { width: 18px; height: 18px; flex: 0 0 18px; margin: 5px 0 0; accent-color: #167872; }
.product-customer .customer-plan-choice:has(input:disabled) { cursor: default; color: var(--muted); }
.product-customer .customer-plan-choice input:focus-visible { outline: 3px solid #b28308; outline-offset: 3px; }
.product-customer .customer-profile-overviews.needs-answer { outline: 2px solid #b8202c; outline-offset: 5px; }
.product-customer .customer-plan-selection-message { margin: 14px 0 0; color: #b8202c; font-weight: 700; scroll-margin-top: 12px; }
.product-customer .customer-plan-selection .customer-plan { grid-row: auto; grid-template-rows: auto; border-bottom: 0; }
.product-customer .customer-plan-final .customer-profile-details { display: block; max-width: 820px; margin-inline: auto; }
.product-customer .customer-plan-final .customer-plan { grid-row: auto; grid-template-rows: auto; gap: 20px; border: 0; }
.product-customer .customer-final-price { margin-top: 0; }
.product-customer .customer-plan-final #customerResultPrice { max-width: 820px; margin-inline: auto; }
.product-customer .customer-plan-final .customer-downloads { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 700px) {
  .product-customer .workspace.customer-comparison-result { width: calc(100% - 24px); padding-inline: 12px; }
  .product-customer .customer-result-navigation { margin-inline: -12px; padding-inline: 12px; }
  .product-customer .customer-profile-overview { padding: 12px; }
  .product-customer .customer-plan-final .customer-downloads { grid-template-columns: minmax(0, 1fr); }
}

/* Customer plan cards own their dimensions and highlight their drawing. */
.product-customer .customer-plan-selection .customer-profile-overview {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span var(--overview-row-count, 5);
  row-gap: 0;
}
.product-customer .customer-plan-sizes {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span var(--size-row-count, 2);
  row-gap: 0;
  min-width: 0;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.65;
}
.product-customer .customer-plan-sizes > h3 { margin: 0 0 8px; font-size: 16px; text-align: center; }
.product-customer .customer-plan-size-part {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span var(--part-size-rows, 2);
  row-gap: 0;
  min-width: 0;
}
.product-customer .customer-plan-size-part h4 { margin: 16px 0 6px; font-size: 15px; }
.product-customer .customer-plan-sizes p { margin: 4px 0; min-width: 0; overflow-wrap: anywhere; }
.product-customer .customer-plan-selection .customer-plan {
  border: 1px solid #c7d4e1;
  border-radius: 6px;
  padding: 16px;
  background: #fff;
}
.product-customer .customer-plan-selection .customer-plan.selected-drawing {
  border-color: #167872;
  box-shadow: inset 0 0 0 1px #167872;
}
.product-customer .customer-plan-selection .customer-plan-drawing-frame { border: 0; border-radius: 0; }
@media (max-width: 700px) {
  .product-customer .customer-plan-selection .customer-profile-overview,
  .product-customer .customer-plan-sizes,
  .product-customer .customer-plan-size-part { display: block; grid-row: auto; }
  .product-customer .customer-plan-selection .customer-plan { padding: 12px; }
}

/* Separate shared price notes and make customer plan cards easier to choose. */
.staff-price-preview .staff-system-price { display: block; }
.staff-price-preview .staff-system-price-note { margin-top: 4px; }
.product-customer .customer-plan-pricing { min-width: 0; }
.product-customer .customer-plan-system-note {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.product-customer .customer-plan-selection .customer-profile-overview:has([data-customer-plan-choice]:not(:disabled)) { cursor: pointer; }

/* Compare complete quotes consistently, independent of itemized data availability. */
.product-customer .customer-plan-selection .customer-plan-pricing { padding: 16px 0 20px; }
.product-customer .customer-plan-selection .customer-plan-total-label {
  margin: 0;
  color: #53635f;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}
.product-customer .customer-plan-selection .customer-plan-price {
  margin: 4px 0 0;
  color: #175b50;
  font-size: 26px;
  line-height: 1.4;
}
.product-customer .customer-plan-selection .customer-plan-amount {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  max-width: 100%;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.product-customer .customer-plan-selection .customer-plan-amount small {
  color: #61706d;
  font-size: 13px;
  font-weight: 400;
}
.product-customer .customer-plan-selection .customer-plan-system-note { margin-top: 6px; font-size: 14px; }
@media (max-width: 700px) {
  .product-customer .customer-plan-selection .customer-plan-price { font-size: 24px; }
}
@media (max-width: 360px) {
  .product-customer .customer-plan-selection .customer-plan-price { font-size: 21px; }
}

.order-contact-banner { margin: 0; padding: 14px 20px; border-bottom: 1px solid #e7a5a5; background: #fde2e2; color: #342c10; font-size: 20px; font-weight: 600; line-height: 1.5; text-align: center; letter-spacing: 0; overflow-wrap: anywhere; }
.order-contact-banner strong { font-weight: 750; }
.order-contact-banner { display: none; }
.product-customer.customer-quote-page > .order-contact-banner { display: block; }

/* Shared numbered flow indicator for Customer and authenticated Staff. */
.customer-progress-steps {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
  color: #64756d;
  font-size: 13px;
  letter-spacing: 0;
}
.customer-progress-steps[hidden] { display: none; }
.customer-progress-steps ol {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.customer-progress-steps li {
  display: flex;
  align-items: center;
  flex: 1 1 0;
  min-width: 0;
  gap: 9px;
  line-height: 1.5;
}
.customer-progress-steps li:last-child { flex: 0 0 auto; }
.customer-progress-steps li:not(:last-child)::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #dce5df;
  margin: 0 14px 0 4px;
}
.customer-step-number {
  display: grid;
  place-items: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border: 1px solid #dce5df;
  border-radius: 50%;
  background: #f8faf8;
  font-size: 12px;
  box-sizing: border-box;
}
.customer-step-label { overflow-wrap: anywhere; }
.customer-progress-steps [aria-current="step"] { color: #147a74; font-weight: 650; }
.customer-progress-steps [aria-current="step"] .customer-step-number {
  color: #fff;
  background: #147a74;
  border-color: #147a74;
}
.product-customer #staffPriceSteps > span,
.product-customer #customerResultBack > span { display: none; }
@media (max-width: 900px) {
  .customer-progress-steps { padding: 20px 16px; }
  .customer-progress-steps ol {
    display: grid;
    grid-template-columns: repeat(var(--step-count), minmax(0, 1fr));
    gap: 12px 0;
  }
  .customer-progress-steps li {
    position: relative;
    flex-direction: column;
    align-self: stretch;
    gap: 6px;
    text-align: center;
    font-size: 12px;
  }
  .customer-progress-steps li:not(:last-child)::after {
    position: absolute;
    top: 14px;
    left: calc(50% + 21px);
    right: calc(-50% + 21px);
    margin: 0;
  }
}
@media (max-width: 600px) {
  .customer-progress-steps { padding: 18px 12px; }
  .customer-progress-steps ol { grid-template-columns: repeat(min(4, var(--step-count)), minmax(0, 1fr)); }
  .customer-progress-steps li:nth-child(4n)::after { display: none; }
  .customer-step-label { padding: 0 3px; font-size: 11px; }
}

/* Shared original installation images; outside the dimension drawing viewport. */
.installation-guides { min-width: 0; margin-top: 24px; padding-top: 20px; border-top: 1px solid #cbd5e1; }
.installation-guides h3 { margin: 0 0 16px; font-size: 20px; }
.installation-guide { margin: 0 0 24px; min-width: 0; }
.installation-guide figcaption { margin: 0 0 8px; font-weight: 600; }
.installation-guide .customer-preview-open { position: relative; display: block; width: 100%; padding: 0; border: 1px solid #cbd5e1; background: #fff; cursor: zoom-in; }
.installation-guide img { display: block; width: 100%; height: auto; object-fit: contain; }
.installation-guide .guide-expand { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #99bdc0; border-radius: 4px; color: #157873; background: #fff; }
.installation-guide .customer-preview-open:focus-visible { outline: 3px solid #157873; outline-offset: 3px; }
.installation-guide [hidden], .customer-preview-open[hidden] { display: none; }

/* Completed-step edits replace the second customer navigation row. */
.customer-step-copy { display: flex; flex-direction: column; min-width: 0; min-height: 56px; }
.customer-step-copy .customer-step-label { display: flex; align-items: center; min-height: 28px; }
.customer-step-edit { align-self: flex-start; min-height: 28px; max-width: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; color: #147a74; font: inherit; font-size: 12px; line-height: 1.5; text-decoration: underline; text-underline-offset: 3px; white-space: normal; cursor: pointer; }
.customer-step-edit:disabled { color: #64756d; opacity: .65; cursor: default; }
.customer-step-edit:focus-visible { outline: 2px solid #147a74; outline-offset: 3px; }
.customer-progress-steps ol, .customer-progress-steps li { align-items: flex-start; }
.customer-progress-steps li:not(:last-child)::after { margin-top: 14px; }
.product-customer #staffPriceSteps, .product-customer #customerResultBack, .customer-all #comparisonBack { display: none; }
.staff-flow #staffPriceSteps, .staff-flow #halfPostBack { display: none; }
.staff-flow .half-post-selection-actions { justify-content: flex-end; }
.product-customer .customer-plan-final .customer-result-navigation { display: none; }
.product-customer .customer-result-navigation { justify-content: flex-end; }
@media (max-width: 900px) {
  .customer-progress-steps li { align-items: center; }
  .customer-step-copy { align-items: center; }
  .customer-step-edit { align-self: center; font-size: 11px; }
  .customer-progress-steps li:not(:last-child)::after { margin-top: 0; }
}

/* Each comparison card owns its gallery; preserve the existing 4:3 cover frame. */
.customer-all .comparison-gallery { min-width: 0; width: 100%; margin: 0; }
.customer-all .comparison-gallery-media { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.customer-all .comparison-gallery-thumbnails { position: relative; min-width: 0; height: 76px; }
.customer-all .comparison-gallery-thumb-list { position: absolute; inset: 0; display: flex; gap: 6px; padding: 3px; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.customer-all .gallery-thumbnail { position: relative; display: grid; place-items: center; flex: 0 0 80px; width: 80px; height: 60px; padding: 2px; border: 2px solid transparent; border-radius: 4px; background: #f5f6f6; cursor: pointer; }
.customer-all .gallery-thumbnail img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; pointer-events: none; }
.customer-all .gallery-thumbnail:hover { border-color: #9dbfc1; }
.customer-all .gallery-thumbnail[aria-current="true"] { border-color: #147a74; background: #fff; }
.customer-all .gallery-thumbnail-fallback { color: var(--muted); font-size: 14px; }
@media (min-width: 900px) {
  .customer-all .comparison-gallery-media { grid-template-columns: minmax(0, 1fr) 94px; }
  .customer-all .comparison-gallery-thumbnails { height: auto; }
  .customer-all .comparison-gallery-thumb-list { flex-direction: column; }
  .customer-all .gallery-thumbnail { flex-basis: 60px; }
}
.customer-all .comparison-gallery-frame { position: relative; width: 100%; aspect-ratio: 4 / 3; background: #f5f6f6; touch-action: pan-y pinch-zoom; }
.customer-all .comparison-gallery .comparison-image { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: contain; user-select: none; }
.customer-all .comparison-gallery [hidden] { display: none !important; }
.customer-all .comparison-gallery-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 44px; margin-top: 8px; }
.customer-all .gallery-arrow { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; padding: 0; border: 1px solid var(--line); border-radius: 4px; background: #fff; color: var(--green); cursor: pointer; }
.customer-all .gallery-arrow:hover { background: #e5f6f3; border-color: var(--green); }
.customer-all .gallery-counter { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.customer-all .comparison-gallery:focus-visible, .customer-all .comparison-gallery button:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.customer-all .comparison-gallery-error { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px; color: var(--muted); text-align: center; }
.customer-all .comparison-gallery-error p { margin: 0; }
.customer-all [data-gallery-retry] { padding: 8px 12px; border: 1px solid var(--line); border-radius: 4px; background: #fff; color: var(--green); cursor: pointer; }

/* Match the existing glass image expand button without cropping the photo. */
.customer-all .gallery-zoom { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid #9dbfc1; border-radius: 4px; background: #fff; color: #147a74; cursor: pointer; }
.customer-all .gallery-zoom:hover { background: #e5f6f3; border-color: #147a74; }
body.comparison-gallery-open { overflow: hidden !important; }
.customer-all .comparison-gallery-dialog { width: min(1280px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; }
.customer-all .comparison-gallery-dialog header { margin-bottom: 12px; }
.customer-all .comparison-gallery-dialog h2 { font-size: 18px; }
.customer-all .comparison-gallery-dialog .comparison-gallery-frame { height: min(60dvh, 800px); aspect-ratio: auto; }
.customer-all .comparison-gallery-dialog .gallery-counter { font-size: 14px; }
@media (max-height: 500px) {
  .customer-all .comparison-gallery-dialog .comparison-gallery-frame { height: calc(100dvh - 260px); min-height: 80px; }
}
/* The thickness workbench follows the product-page visual treatment. */
.top-glass-height-model { position:relative; aspect-ratio:1; min-width:0; background:#f6f8f5; overflow:hidden; }
.half-post-selection:has(#topGlassHeightWorkbench:not([hidden])) .half-post-option-content { min-height:0; }
.top-glass-height-model canvas,.top-glass-height-model > svg { position:absolute; inset:0; width:100%; height:100%; }
.top-glass-height-model > svg { pointer-events:none; }
.top-glass-height-model [data-height-loading] { position:absolute; left:20px; right:20px; bottom:20px; text-align:center; color:#485452; font-size:14px; }
.top-glass-height-model[data-ready] [data-height-loading] { display:none; }
.top-glass-height #topGlassHeightError { color:#ffc2ca; margin:16px 0 0; }
.top-glass-height .half-post-layer-result strong { font-size:20px; margin-bottom:14px; }
.top-glass-height-recommendation { display:grid; gap:16px; margin-bottom:16px; }
.top-glass-height .top-glass-height-recommendation strong { margin:0; }
.top-glass-height [data-height-reset] { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:56px; padding:12px; border:2px solid #b8e7db; border-radius:3px; background:#b8e7db; color:#173d35; font:inherit; font-size:18px; font-weight:700; line-height:1.4; cursor:pointer; }
.top-glass-height [data-height-reset]:hover:not(:disabled) { background:#dbf4ec; border-color:#dbf4ec; }
.top-glass-height [data-height-reset]:focus-visible { outline:3px solid #fff; outline-offset:4px; }
.top-glass-height [data-height-reset]:disabled { opacity:1; cursor:default; }
.top-glass-height [data-height-reset-icon] { display:flex; }
.top-glass-height .half-post-layer-result p { margin-bottom:12px; }
.top-glass-height .half-post-layer-result p:last-child { margin-bottom:0; font-size:12px; }
.top-glass-height .top-glass-height-type { margin:20px 0 0; color:#e1ece5; font-weight:600; min-height:48px; }
.top-glass-height .top-glass-height-number { height:64px; width:240px; margin:26px auto 0; }
.top-glass-height-number button { font-size:24px; padding:6px; }
.top-glass-height-number button svg { display:block; margin:auto; }
.top-glass-height .top-glass-height-number input { font-size:36px; }
.top-glass-height [hidden] { display:none; }
.customer-progress-steps:has([data-progress-step="glass_height"]) .customer-step-label { overflow-wrap:normal; }
@media(min-width:1200px) {
  .customer-progress-steps:has([data-progress-step="glass_height"]) li { flex:1 0 auto; }
  .customer-progress-steps:has([data-progress-step="glass_height"]) li:last-child { flex:0 0 auto; }
  .customer-progress-steps:has([data-progress-step="glass_height"]) li::after { margin-right:8px; }
}
@media(min-width:601px) and (max-width:1199px) {
  .customer-progress-steps:has([data-progress-step="glass_height"]) ol { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px 0; }
  .customer-progress-steps:has([data-progress-step="glass_height"]) li { flex-direction:column; align-items:center; position:relative; text-align:center; gap:6px; }
  .customer-progress-steps:has([data-progress-step="glass_height"]) .customer-step-copy { align-items:center; }
  .customer-progress-steps:has([data-progress-step="glass_height"]) .customer-step-edit { align-self:center; }
  .customer-progress-steps:has([data-progress-step="glass_height"]) li::after { position:absolute; top:14px; left:calc(50% + 21px); right:calc(-50% + 21px); margin:0; }
  .customer-progress-steps:has([data-progress-step="glass_height"]) li:nth-child(4n)::after { display:none; }
}
@media(max-width:379px) {
  .customer-progress-steps:has([data-progress-step="glass_height"]) ol { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .customer-progress-steps:has([data-progress-step="glass_height"]) li:nth-child(4n)::after { display:block; }
  .customer-progress-steps:has([data-progress-step="glass_height"]) li:nth-child(3n)::after { display:none; }
}
.half-post-layer { background:#222c2e; color:#e6ece9; display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,1fr); gap:28px; padding:24px; align-items:start; letter-spacing:0; }
.half-post-layer-model { position:relative; aspect-ratio:1; min-width:0; background:#f6f8f5; overflow:hidden; }
.half-post-layer-model canvas,.half-post-layer-model > svg,.half-post-layer-model > img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.half-post-layer-model > svg { pointer-events:none; }
.half-post-layer-model[data-fallback] canvas,.half-post-layer-model[data-fallback] > svg { display:none; }
.half-post-layer-model [data-layer-loading] { position:absolute; bottom:16px; left:16px; right:16px; text-align:center; color:#52695a; font-size:14px; }
.half-post-layer-controls { background:#2d393d; border:1px solid #74867c; border-radius:3px; padding:28px; min-width:0; }
.half-post-layer-controls h3 { margin:0 0 16px; font-size:23px; line-height:1.35; font-weight:650; color:#e6ece9; }
.half-post-layer-controls p { font-size:14px; line-height:1.7; color:#becac6; margin:0 0 22px; }
.half-post-layer-controls [data-layer-slider] { appearance:none; -webkit-appearance:none; display:block; width:100%; height:8px; margin:42px 0 18px; padding:0; background:#687a74; border:none; border-radius:8px; cursor:pointer; accent-color:#ca2341; }
.half-post-layer-controls [data-layer-slider]::-webkit-slider-thumb { appearance:none; width:30px; height:30px; border:3px solid #f2f4f1; border-radius:50%; background:#ca2341; box-shadow:0 0 0 4px #895964; }
.half-post-layer-controls [data-layer-slider]::-moz-range-thumb { width:24px; height:24px; border:3px solid #f2f4f1; border-radius:50%; background:#ca2341; box-shadow:0 0 0 4px #895964; }
.half-post-layer-ticks { display:flex; justify-content:space-between; color:#b1c2ba; font-size:12px; margin-bottom:28px; }
.half-post-layer-number { display:flex; align-items:center; width:210px; max-width:100%; height:56px; margin:0 auto 16px; border:1px solid #a0b4a4; border-radius:3px; background:#222c2e; }
.half-post-layer-number button { width:44px; height:48px; flex:0 0 44px; border:0; background:none; color:#e6ece9; padding:12px; }
.half-post-layer-number button svg { width:18px; height:18px; }
.half-post-layer-number button:disabled { opacity:.35; cursor:default; }
.half-post-layer-number input { min-width:0; width:100%; height:48px; padding:0 4px; border:0; color:#e6ece9; background:none; font:650 26px/1.2 inherit; font-family:inherit; font-size:26px; font-weight:650; text-align:right; }
.half-post-layer-number span { font-size:14px; color:#becac6; padding-right:8px; }
.half-post-layer-controls #postLayerError { color:#ffb6bd; }
.half-post-layer-result { border-top:1px solid #596f62; border-bottom:1px solid #596f62; padding:24px 0; margin-top:18px; }
.half-post-layer-result p { margin:0 0 10px; }
.half-post-layer-result strong { display:block; color:#e1ece5; font-size:25px; line-height:1.35; overflow-wrap:anywhere; }
.half-post-layer-gap { display:flex; justify-content:space-between; gap:12px; align-items:center; margin:24px 0 0; }
.half-post-layer-gap dt { font-size:14px; color:#becac6; }
.half-post-layer-gap dd { margin:0; font-size:22px; font-weight:650; white-space:nowrap; }
.half-post-layer :focus-visible { outline:3px solid #fff; outline-offset:5px; }
.side-mount-height { align-items:start; }
.side-mount-height.is-mount-expanded { align-items:stretch; }
.side-mount-visual { position:relative; display:grid; grid-template-rows:auto 1fr; min-width:0; background:#f6f8f5; }
.side-mount-detail { position:relative; align-self:end; width:100%; min-width:0; margin:0; background:#f6f8f5; border:0; border-top:1px solid #bdcbc1; overflow:hidden; }
.side-mount-detail figcaption { padding:16px 16px 0; font-size:15px; line-height:1.45; font-weight:650; color:#374e43; }
.side-mount-detail figcaption span { display:block; color:#52695a; font-weight:400; font-size:12px; }
.side-mount-detail-model { position:relative; aspect-ratio:1; }
.side-mount-detail-model canvas,.side-mount-detail-model > svg { position:absolute; inset:0; width:100%; height:100%; }
.side-mount-detail-model > svg { pointer-events:none; }
.side-mount-detail-model [data-height-loading] { color:#52695a; font-size:12px; padding:12px; }
.side-mount-detail-model[data-ready] [data-height-loading] { display:none; }
.side-mount-height .half-post-layer-controls { padding:22px; }
.side-mount-height .half-post-layer-controls h3 { font-size:21px; margin-bottom:8px; }
.side-mount-height .half-post-layer-controls > p:first-of-type { margin-bottom:12px; }
.side-mount-height .top-glass-height-number { margin-top:16px; height:56px; }
.side-mount-height .half-post-layer-controls [data-layer-slider] { margin-top:30px; }
.side-mount-height .half-post-layer-ticks { margin-bottom:18px; }
.side-mount-height .half-post-layer-result { padding:16px 0; }
.side-mount-height .half-post-layer-result p { font-size:13px; line-height:1.6; }
.side-mount-height .top-glass-height-recommendation { gap:12px; margin-bottom:12px; }
.side-mount-height .top-glass-height-recommendation strong { font-size:18px; }
.side-mount-height [data-height-reset] { min-height:50px; font-size:17px; }
.side-mount-height .top-glass-height-type { min-height:0; margin:12px 0 0; font-size:13px; }
.side-mount-adjustment { border-top:1px solid #596f62; margin-top:20px; padding-top:20px; }
.side-mount-adjustment .side-mount-datum { margin-bottom:16px; font-size:12px; line-height:1.5; }
.side-mount-number { margin:0 auto; }
.side-mount-height #sideMountError { color:#ffc2ca; font-size:13px; margin:12px 0; }
.side-mount-height [data-height-reset][data-unavailable="true"] { border-color:#8a9f93; background:#354348; color:#d2ddd7; font-size:16px; }
.side-mount-height [data-layer-slider]:disabled { opacity:.55; cursor:default; }
/* An edge-to-edge recommendation band keeps stock height ahead of custom input. */
.top-glass-height .stock-height-offer { margin:20px -28px 24px; padding:22px 28px; background:#d8f0e8; color:#183e35; border-top:1px solid #aed8c8; border-bottom:1px solid #aed8c8; }
.top-glass-height .top-glass-height-recommendation { gap:14px; margin:0 0 12px; }
.top-glass-height .stock-height-heading { display:flex; align-items:center; flex-wrap:wrap; column-gap:18px; row-gap:6px; }
.top-glass-height .stock-height-heading strong { font-size:38px; line-height:1.15; color:#143d32; white-space:nowrap; }
.top-glass-height .stock-height-heading strong span { font-size:18px; font-weight:500; }
.top-glass-height .stock-height-heading > span { font-size:15px; line-height:1.4; font-weight:650; max-width:160px; }
.top-glass-height .stock-height-benefit { color:#204d40; font-size:15px; line-height:1.5; margin:0; }
.top-glass-height .stock-height-conditions { color:#46655a; font-size:12px; line-height:1.5; margin:0; }
.top-glass-height [data-height-reset] { min-height:52px; font-size:17px; background:#006e61; border-color:#006e61; color:#fff; }
.top-glass-height [data-height-reset]:hover:not(:disabled) { background:#00594f; border-color:#00594f; }
.top-glass-height [data-height-reset][data-selected="true"] { background:#18564a; border-color:#18564a; }
.top-glass-height [data-height-reset]:focus-visible { outline-color:#173d35; }
.top-glass-height .glass-height-field-label { margin:0; font-size:14px; font-weight:600; }
.top-glass-height .top-glass-height-number { margin-top:12px; }
.side-mount-height .stock-height-offer { margin-left:-22px; margin-right:-22px; padding-left:22px; padding-right:22px; }
.side-mount-adjustment { padding-top:16px; }
.side-mount-height .side-mount-adjustment h3 { margin:0; }
.side-mount-height [data-mount-toggle] { display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px; width:100%; min-height:112px; padding:16px; border:2px solid #ffd563; border-radius:4px; background:#ffd563; color:#252b28; font:inherit; text-align:left; cursor:pointer; }
.side-mount-height [data-mount-toggle]:hover { background:#ffe69a; border-color:#ffe69a; }
.side-mount-height [data-mount-toggle]:focus-visible { outline:3px solid #fff0bf; outline-offset:4px; }
.side-mount-summary-copy { display:grid; gap:8px; min-width:0; flex:1 1 148px; font-size:18px; font-weight:700; line-height:1.4; }
.side-mount-summary-value { display:flex; align-items:center; flex-wrap:wrap; column-gap:10px; row-gap:2px; }
.side-mount-summary-copy small { font-size:13px; font-weight:400; color:#554b31; }
[data-mount-summary] { font-size:24px; white-space:nowrap; }
.side-mount-toggle-action { display:flex; align-items:center; gap:10px; flex:1 0 180px; min-height:52px; padding:0 14px; border-radius:4px; background:#173e33; color:#fff; font-size:16px; font-weight:700; line-height:1.3; }
.side-mount-toggle-action svg { flex:0 0 20px; width:20px; height:20px; }
[data-mount-action-label] { flex:1; white-space:nowrap; }
[data-mount-toggle][aria-expanded="true"] .side-mount-toggle-action .lucide-chevron-down { transform:rotate(180deg); }
#sideMountControls { padding-top:20px; }
.side-mount-height [data-mount-reset] { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:44px; margin-top:18px; padding:10px 12px; border:1px solid #96bbaa; border-radius:4px; background:#374e43; color:#e6f1eb; font:inherit; font-size:14px; font-weight:600; line-height:1.4; cursor:pointer; }
.side-mount-height [data-mount-reset] svg { flex:0 0 20px; }
.side-mount-height [data-mount-reset]:hover:not(:disabled) { background:#476657; border-color:#c6efdf; }
.side-mount-height [data-mount-reset]:disabled { background:transparent; border-color:#71897b; color:#aebfb7; cursor:default; }
@media(min-width:801px) and (max-width:1150px) {
  .side-mount-detail { width:100%; margin:0; border:0; border-top:1px solid #bdcbc1; }
  .side-mount-detail-model { width:100%; margin:auto; }
}
@media(max-width:800px) {
  .half-post-layer { grid-template-columns:minmax(0,1fr); gap:20px; padding:16px; }
  .half-post-layer-controls { padding:20px; }
  .half-post-layer-controls h3 { font-size:21px; }
  .half-post-layer-result strong { font-size:23px; }
  .side-mount-detail { position:relative; width:auto; left:auto; bottom:auto; margin:0; border:0; border-top:1px solid #bdcbc1; border-radius:0; }
  .side-mount-detail figcaption { font-size:15px; padding:16px 16px 0; }
  .side-mount-detail-model { width:100%; margin:auto; }
  .side-mount-height .half-post-layer-controls { padding:20px; }
  .top-glass-height .stock-height-offer { margin-left:-20px; margin-right:-20px; padding-left:20px; padding-right:20px; }
}

/* Selected customer quotation only; comparison and Staff layouts stay unchanged. */
.product-customer.customer-quote-page > .order-contact-banner { display:none; }
.product-customer .customer-plan-final .customer-profile-details { max-width:1180px; width:100%; }
.product-customer .customer-plan-final #customerResultPrice { max-width:1180px; }
.product-customer .customer-plan-final .customer-plan { gap:0; padding:0; background:#fff; }
.quote-final-summary { padding:24px 32px 30px; }
.quote-final-reference { color:#596579; font-size:12px; margin:0 0 9px; }
.quote-final-summary .customer-final-price { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:5px 20px; max-width:620px; margin:0; color:#175b50; font-size:14px; font-weight:700; }
.quote-final-summary .customer-final-price strong { display:inline-flex; align-items:baseline; gap:5px; white-space:nowrap; font-size:21px; }
.quote-final-summary .customer-final-price small { color:#61706d; font-size:13px; font-weight:400; }
.quote-detail-note { margin:10px 0 0; color:#596579; font-size:14px; }
.quote-contact-section { padding:28px 32px 26px; background:#e5f3ef; border-top:3px solid #0f766e; border-bottom:1px solid #c5ddd5; min-width:0; }
.quote-contact-heading { display:flex; align-items:flex-start; gap:12px; margin-bottom:24px; }
.quote-contact-section .lucide { width:20px; height:20px; flex:0 0 20px; }
.quote-contact-heading > .lucide { margin-top:3px; width:24px; height:24px; flex-basis:24px; color:#0f766e; }
.quote-contact-heading h2 { margin:0; font-size:22px; line-height:1.35; color:#173d35; }
.quote-contact-heading p { margin:7px 0 0; font-size:14px; color:#4b645e; }
.quote-contact-fields { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.quote-contact-field { min-width:0; }
.quote-contact-field label { display:block; margin-bottom:7px; font-size:14px; font-weight:700; color:#294b42; }
.quote-contact-field label span { color:#5d716b; font-weight:400; }
.quote-contact-field input { display:block; width:100%; min-width:0; height:50px; border:1px solid #97b4ab; border-radius:4px; padding:0 13px; color:#162c27; background:#fff; font:inherit; font-size:16px; }
.quote-contact-field input::placeholder { color:#70817a; opacity:1; }
.quote-contact-field input[aria-invalid="true"] { border-color:#b42332; }
.quote-contact-error { margin:6px 0 0; color:#a81d2c; font-size:13px; }
.quote-contact-footer { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:22px; }
.quote-contact-footer p { margin:0; max-width:470px; color:#526962; font-size:12px; }
.quote-contact-footer .primary-button { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:12px 24px; background:#0f766e; color:#fff; border:1px solid #0f766e; border-radius:4px; font-size:16px; font-weight:700; white-space:nowrap; }
.quote-contact-footer .primary-button:hover { background:#0b5f59; }
.quote-contact-footer .primary-button:disabled { opacity:.65; cursor:wait; }
.quote-contact-section :is(input,button):focus-visible { outline:3px solid #2c9189; outline-offset:3px; }
.quote-contact-status { margin:18px 0 0; border-top:1px solid #a5c9bc; padding-top:15px; color:#175b50; font-size:14px; }
.quote-contact-status.is-error { color:#a81d2c; }
.quote-final-downloads { padding:27px 32px 32px; min-width:0; }
.quote-final-downloads h2 { margin:0 0 14px; font-size:16px; }
.quote-final-downloads .customer-downloads .download-link { justify-content:flex-start; border:1px solid #cbd5d8; border-radius:4px; min-height:64px; padding:12px 16px; gap:12px; text-align:left; font-size:14px; }
.quote-final-downloads .download-link small { display:block; margin-top:1px; font-size:11px; color:#596579; font-weight:400; }
.quote-final-downloads .download-link:hover { background:#f3f8f6; border-color:#75a39c; }
.quote-final-downloads > p { margin-top:14px; font-size:14px; }
@media(max-width:680px) {
  .quote-final-summary,.quote-contact-section,.quote-final-downloads { padding:24px 20px; }
  .quote-final-summary .customer-final-price { flex-direction:column; align-items:flex-start; }
  .quote-contact-heading { gap:10px; margin-bottom:22px; }
  .quote-contact-heading h2 { font-size:20px; }
  .quote-contact-fields { grid-template-columns:minmax(0,1fr); gap:17px; }
  .quote-contact-footer { flex-direction:column; align-items:stretch; gap:16px; margin-top:18px; }
  .quote-contact-footer .primary-button { width:100%; padding-inline:12px; }
}

/* Text-first glass sizes and one continuous final contact/download area. */
.product-customer .customer-plan-selection .customer-plan-sizes > h3 { font-size: 18px; }
.product-customer .customer-plan-selection .customer-plan-size-part .customer-compact-edge { display: block; margin-bottom: 6px; color: var(--text); font-size: 14px; }
.product-customer .customer-plan-selection .customer-plan-size-part > p { margin-block: 6px 10px; color: #923d47; font-size: 24px; font-weight: 700; }
.product-customer .customer-plan-selection .customer-plan-sizes .customer-compact-status { color: var(--muted); font-size: 14px; font-weight: 400; }
.product-customer .customer-plan-selection .customer-plan-sizes .customer-compact-piece {
  color: #923d47;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.45;
}
.product-customer .customer-plan-final .quote-final-summary .customer-final-price { max-width: 820px; font-size: 18px; }
.product-customer .customer-plan-final .quote-final-summary .customer-final-price strong { font-size: 32px; }
.product-customer .customer-plan-final .quote-final-reference { font-size: 14px; }
.product-customer .customer-plan-final .quote-detail-note { font-size: 16px; }
.quote-final-actions { min-width: 0; }
.quote-final-actions .quote-contact-section { margin: 0; padding: 32px; border-bottom: 0; }
.quote-final-actions .quote-contact-heading h2 { font-size: 24px; overflow-wrap: anywhere; }
.quote-final-actions .quote-contact-heading p { font-size: 16px; line-height: 1.5; }
.quote-final-actions .quote-contact-field label { font-size: 16px; }
.quote-final-actions .quote-contact-field input { height: 56px; }
.quote-final-actions .quote-contact-footer p { font-size: 14px; line-height: 1.5; }
.quote-final-actions .quote-contact-footer .primary-button { min-height: 56px; font-size: 18px; white-space: normal; }
.quote-final-actions .quote-final-downloads { margin: 0; padding: 30px 32px 34px; background: #f7ecee; color: #80333d; }
.quote-final-actions .quote-final-downloads h2 { margin-bottom: 20px; color: #80333d; font-size: 24px; line-height: 1.35; }
.quote-final-actions .quote-final-downloads .customer-downloads { gap: 16px; }
.quote-final-actions .quote-final-downloads .customer-downloads .download-link {
  min-height: 96px;
  padding: 20px;
  gap: 14px;
  border-color: #d9b5bb;
  background: #fff;
  color: #80333d;
  font-size: 20px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.quote-final-actions .quote-final-downloads .download-link > span { min-width: 0; }
.quote-final-actions .quote-final-downloads .download-link .lucide { width: 26px; height: 26px; flex: 0 0 26px; }
.quote-final-actions .quote-final-downloads .download-link small { margin-top: 5px; color: #6b565a; font-size: 14px; }
.quote-final-actions .quote-final-downloads .download-link:hover { background: #fff0f2; border-color: #923d47; }
.quote-final-actions .quote-final-downloads .download-link:focus-visible { outline: 3px solid #923d47; outline-offset: 4px; }
.quote-final-actions .quote-final-downloads .download-link[aria-disabled="true"] { opacity: .6; cursor: not-allowed; }
@media (max-width: 700px) {
  .product-customer .customer-plan-selection .customer-plan-sizes .customer-compact-piece,
  .product-customer .customer-plan-selection .customer-plan-size-part > p { font-size: 22px; }
  .product-customer .customer-plan-final .quote-final-summary .customer-final-price strong { font-size: 28px; }
  .quote-final-actions .quote-contact-section, .quote-final-actions .quote-final-downloads { padding: 26px 20px; }
  .quote-final-actions .quote-contact-heading h2, .quote-final-actions .quote-final-downloads h2 { font-size: 22px; }
  .quote-final-actions .quote-final-downloads .customer-downloads .download-link { min-height: 86px; padding: 18px 16px; }
}

/* Read-only pane elevations share one millimetre scale across the comparison. */
.product-customer .customer-plan-sizes .customer-glass-elevation { display: block; margin-top: 16px; color: #53635f; font-size: 13px; font-weight: 400; }
.product-customer .customer-plan-sizes .customer-glass-elevation-caption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; line-height: 1.5; }
.product-customer .customer-plan-sizes .customer-glass-elevation-caption > span { color: #67736f; }
.product-customer .customer-plan-sizes .customer-glass-elevation-caption > strong { color: #263e39; font-size: 14px; }
.product-customer .customer-plan-sizes .customer-glass-elevation-footer { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: 8px 16px; margin-top: 6px; line-height: 1.5; }
.product-customer .customer-plan-sizes .customer-glass-source-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; min-width: 0; }
.product-customer .customer-plan-sizes .customer-glass-source-key { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.product-customer .customer-plan-sizes .customer-glass-source-key > svg { flex: 0 0 16px; }
.product-customer .customer-plan-sizes .customer-glass-elevation-open { position: relative; display: block; width: 100%; min-width: 0; margin: 8px 0 0; padding: 0; border: 0; border-radius: 0; background: #fff; color: #285e55; cursor: zoom-in; }
.product-customer .customer-plan-sizes .customer-glass-elevation-open > img { display: block; width: 100%; height: auto; }
.product-customer .customer-plan-sizes .customer-glass-elevation-expand { display: flex; align-items: center; justify-content: center; margin: 4px 0 0 auto; width: 36px; height: 36px; background: #fff; border: 1px solid #b7ceca; border-radius: 4px; }
.product-customer .customer-plan-sizes .customer-glass-elevation-open:hover .customer-glass-elevation-expand { background: #eef7f4; }
.product-customer .customer-plan-sizes .customer-glass-elevation-open:focus-visible { outline: 3px solid #0f766e; outline-offset: 3px; }
@media (max-width: 700px) {
  .product-customer .customer-plan-sizes .customer-glass-elevation-open { min-height: 64px; }
  .product-customer .customer-plan-sizes .customer-glass-elevation-expand { width: 44px; height: 44px; }
}

/* Half-post steps share the other selection pages' price-first reading order. */
.product-customer .half-post-top-price {
  min-width: 0;
  padding: 12px 24px 10px;
  background: #fff;
}
.product-customer .half-post-top-price .staff-price-wait { margin: 0; padding: 16px 0; min-height: 0; }
.product-customer .half-post-selection:has(.half-post-top-price) .half-post-option-content:empty { display: none; }
@media (max-width: 480px) {
  .product-customer .half-post-top-price { padding-inline: 12px; }
}

/* Actual entered geometry accompanies the one customer selection price summary. */
.customer-price-geometry {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr);
  align-items: start;
  gap: 28px;
  padding: 16px 0 24px;
}
.customer-price-geometry > .staff-system-price { min-width: 0; margin: 0; padding: 0; }
.customer-price-geometry > .staff-system-price > .staff-current-price { max-width: none; }
.customer-geometry-summary { min-width: 0; color: #263d38; font-size: 14px; line-height: 1.4; letter-spacing: 0; }
.customer-price-geometry > .customer-geometry-summary { border-left: 1px solid #cbd7d3; padding-left: 28px; }
.customer-geometry-total { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 14px; }
.customer-geometry-total > span { font-size: 14px; color: #53635f; }
.customer-geometry-total > strong { font-size: 30px; line-height: 1.2; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.customer-geometry-parts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.customer-geometry-part { margin: 0; min-width: 0; }
.customer-geometry-part + .customer-geometry-part { border-top: 1px solid #dce4e1; padding-top: 14px; }
.customer-geometry-part figcaption { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; color: #53635f; font-size: 13px; }
.customer-geometry-diagram { display: block; width: 100%; height: 132px; overflow: hidden; }
.customer-geometry-diagram polyline { fill: none; stroke: #1c776c; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.customer-geometry-diagram circle { fill: #fff; stroke: #1c776c; stroke-width: 2; }
.customer-geometry-diagram text { fill: #263d38; font-size: 15px; font-weight: 600; }
.customer-geometry-lengths { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; font-size: 14px; font-variant-numeric: tabular-nums; }
.customer-geometry-lengths > div { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.customer-geometry-lengths dt { font-weight: 700; color: #1c776c; }
.customer-geometry-lengths dd { margin: 0; }
.comparison-heading:has(.customer-geometry-summary) { flex-wrap: wrap; }
.comparison-heading:has(.customer-geometry-summary) > div { flex: 1 1 540px; min-width: 0; }
.comparison-heading:has(.customer-geometry-summary) > button { flex-shrink: 0; }
.comparison-geometry:has(.customer-geometry-summary) { margin-top: 24px; }
.customer-geometry-summary.is-comparison { display: grid; grid-template-columns: minmax(150px, 0.6fr) minmax(0, 2fr); align-items: start; gap: 24px; }
.is-comparison .customer-geometry-total { display: grid; justify-content: start; gap: 6px; margin: 0; }
.is-comparison .customer-geometry-total > strong { font-size: 34px; }
.is-comparison .customer-geometry-parts { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 360px)); }
.is-comparison .customer-geometry-part + .customer-geometry-part { border-top: 0; padding-top: 0; }
@media (max-width: 1000px) {
  .customer-price-geometry { grid-template-columns: minmax(0, 1fr) minmax(240px, 0.85fr); gap: 22px; }
  .customer-price-geometry > .customer-geometry-summary { padding-left: 22px; }
}
@media (max-width: 760px) {
  .customer-price-geometry { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .customer-price-geometry > .customer-geometry-summary { padding: 20px 0 0; border-left: 0; border-top: 1px solid #cbd7d3; }
  .customer-geometry-summary.is-comparison { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .is-comparison .customer-geometry-total { display: flex; justify-content: space-between; }
  .is-comparison .customer-geometry-total > strong { font-size: 30px; }
  .comparison-heading:has(.customer-geometry-summary) > button { margin-left: auto; }
}

/* Customer waiting indicator is explicitly an estimate, never backend progress. */
.product-customer .customer-generation-wait { max-width: 640px; margin: 0 auto; padding: 48px 12px; text-align: center; color: #263d38; line-height: 1.6; }
.product-customer .customer-generation-stage { display: flex; justify-content: center; align-items: center; gap: 12px; margin: 0 0 12px; color: #17786f; font-size: 16px; font-weight: 600; }
.product-customer .customer-generation-spinner { width: 22px; height: 22px; flex: 0 0 22px; border: 3px solid #d3e7e2; border-top-color: #17786f; border-radius: 50%; animation: customer-generation-spin 1.2s linear infinite; }
.product-customer .customer-generation-wait h2 { font-size: 24px; line-height: 1.4; margin: 0 0 24px; overflow-wrap: anywhere; }
.product-customer .customer-generation-meter { max-width: 480px; margin: 0 auto 16px; }
.product-customer .customer-generation-percent { display: block; font-size: 44px; line-height: 1.25; font-weight: 700; font-variant-numeric: tabular-nums; color: #17786f; }
.product-customer .customer-generation-estimate-label { display: block; margin: 4px 0 16px; font-size: 14px; color: #53635f; }
.product-customer .customer-generation-track { height: 10px; overflow: hidden; border-radius: 4px; background: #e1ebe8; }
.product-customer .customer-generation-track > span { display: block; height: 100%; background: #17786f; }
.product-customer .customer-generation-elapsed { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 8px 16px; margin: 0 0 24px; color: #53635f; }
.product-customer .customer-generation-elapsed strong { min-width: 5ch; font-size: 18px; font-variant-numeric: tabular-nums; color: #263d38; }
.product-customer .customer-generation-guidance { margin: 0 0 12px; font-size: 17px; }
.product-customer .customer-generation-detail { margin: 0; font-size: 14px; color: #53635f; }
.product-customer .customer-generation-pending { margin: 20px 0 0; font-size: 14px; color: #775413; }
.product-customer .customer-generation-next { margin: 28px 0 0; padding-top: 20px; border-top: 1px solid #dce4e1; font-size: 14px; color: #53635f; }
@keyframes customer-generation-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .product-customer .customer-generation-spinner { animation: none; }
}

/* Shared inner tracks keep matching panes level despite different text wrapping. */
.product-customer .customer-plan-sizes-heading { min-width: 0; padding-bottom: 8px; }
.product-customer .customer-plan-sizes-heading h3 { margin: 0 0 12px; font-size: 18px; text-align: center; }
.product-customer .customer-plan-sizes-heading .customer-glass-source-legend { justify-content: center; gap: 10px 24px; font-size: 18px; font-weight: 700; line-height: 1.5; }
.product-customer .customer-plan-sizes-heading .customer-glass-source-key { gap: 9px; }
.product-customer .customer-plan-sizes-heading .customer-glass-source-key > svg { width: 24px; height: 24px; flex-basis: 24px; }
.product-customer .customer-plan-size-part > p[data-compact-edge] { display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 0; }
.product-customer .customer-edge-size-text { display: block; min-width: 0; }
.product-customer .customer-plan-sizes .customer-glass-elevation { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0; }
.product-customer .customer-glass-elevation-empty { grid-row: span 3; }
.product-customer .customer-plan-sizes .customer-glass-elevation-caption { align-items: start; align-content: start; }
.product-customer .customer-plan-sizes .customer-glass-elevation-open { align-self: start; }
.product-customer .customer-plan-sizes .customer-glass-elevation-footer { justify-content: flex-end; }
@media (max-width: 700px) {
  .product-customer .customer-generation-wait { padding: 32px 0; }
  .product-customer .customer-generation-wait h2 { font-size: 21px; }
  .product-customer .customer-generation-guidance { font-size: 16px; }
  .product-customer .customer-plan-size-part > p[data-compact-edge],
  .product-customer .customer-plan-sizes .customer-glass-elevation { display: block; grid-row: auto; }
  .product-customer .customer-glass-elevation-empty { display: none; }
  .product-customer .customer-plan-sizes-heading .customer-glass-source-legend { font-size: 17px; gap: 8px 16px; }
}