/* Material choices follow the pricing chart; the display remains illustrative. */
.lab-controls {
  grid-template-columns: minmax(230px, .8fr) minmax(0, 1.7fr);
  gap: 28px 48px;
  align-items: start;
}
.lab-art-controls { grid-column: 1; grid-row: 1; }
.lab-material-control { grid-column: 2; grid-row: 1 / span 3; min-width: 0; }
.lab-controls .rotation { grid-column: 1; grid-row: 2; }
.lab-controls .lab-color-control { grid-column: 1; grid-row: 3; max-width: none; }
.material-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.material-buttons button {
  display: flex; align-items: center; gap: 13px; text-align: left;
  padding: 16px; min-height: 88px; border: 1px solid #596049; background: #171a14;
}
.material-buttons button:hover { border-color: #aab88b; }
.material-buttons button.active { border-color: var(--lime); background: #ceff3511; color: var(--ink); box-shadow: inset 0 3px var(--lime); }
.material-buttons strong { display: block; font-size: 13px; font-weight: 600; }
.material-buttons small { display: block; font-size: 10px; line-height: 1.5; color: #bac2ad; margin-top: 5px; }
.material-chip { flex: 0 0 37px; height: 43px; border: 1px solid #ffffff30; transform: skewY(-7deg); }
.material-chip-standard { background: linear-gradient(125deg, #343b2e 8%, #e7efdc 24%, #647153 32%, #172014 68%, #859775); }
.material-chip-flake { background: radial-gradient(ellipse, #fff7bd 0 13%, transparent 23%) 0 0 / 7px 9px, radial-gradient(ellipse, #d2a348 0 16%, transparent 23%) 3px 3px / 9px 7px, linear-gradient(135deg, #857143, #191b13); }
.material-chip-exotic { background: linear-gradient(130deg, #384c69, #b1e1e1 20%, #f4b4d2 32%, #372c42 42%, #eae5b4 53%, #78b2a7 65%, #343746 77%, #e7e7ed); }
.material-chip-exotic-flake { background: radial-gradient(ellipse, #fff 0 13%, transparent 23%) 0 0 / 7px 9px, radial-gradient(ellipse, #fde5ae 0 15%, transparent 24%) 4px 2px / 11px 8px, linear-gradient(130deg, #6e9497, #b36c9c 32%, #201e36 46%, #8dad78 60%, #55566f 83%, #d2e0ed); }
.material-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 14px; margin-top: 20px; }
.material-options label { display: grid; gap: 9px; font-size: 11px; color: #c6ceba; }
.material-options select { min-height: 46px; font-size: 12px; }
.material-description { font-size: 12px; line-height: 1.75; color: #c2cbb2; margin-top: 17px; min-height: 42px; }
.material-pricing-link { display: inline-block; margin-top: 12px; padding: 5px 0; font-size: 11px; color: var(--lime); border-bottom: 1px solid #677341; }
.lab-note { max-width: 900px; font-size: 11px; }
.stage-top { align-items: start; }
.stage-top > .eyebrow { max-width: 74%; }
#finish-label { text-transform: none; letter-spacing: .2px; }
#lab-fallback-surface {
  position: absolute; width: 78%; height: 65%; top: 16%; left: 12%;
  transform: perspective(900px) rotateY(-12deg) rotateZ(-6deg);
  box-shadow: 15px 40px 60px #0008; overflow: hidden; isolation: isolate;
}
#lab-fallback-surface #lab-fallback { position: static; width: 100%; height: 100%; object-fit: cover; transform: none; box-shadow: none; }
#lab-fallback-effects { position: absolute; inset: 0; pointer-events: none; }
@media (max-width: 900px) {
  .lab-controls { grid-template-columns: minmax(190px, .85fr) minmax(0, 1.3fr); gap: 24px; }
  .material-buttons button { padding: 13px; gap: 9px; }
  .material-buttons strong { font-size: 12px; }
  .material-chip { flex-basis: 28px; height: 36px; }
}
@media (max-width: 650px) {
  .lab-controls { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .lab-art-controls, .lab-material-control, .lab-controls .rotation, .lab-controls .lab-color-control { grid-column: 1; grid-row: auto; }
  .lab-controls .eyebrow { font-size: 9px; }
  .swatches { gap: 12px; flex-wrap: wrap; }
  .swatches button { width: 44px; height: 44px; }
  .material-buttons { gap: 8px; }
  .material-buttons button { padding: 13px 10px; gap: 9px; min-height: 98px; }
  .material-buttons strong { font-size: 12px; line-height: 1.45; }
  .material-buttons small { font-size: 10px; }
  .material-chip { flex-basis: 22px; height: 33px; }
  .material-options select, .lab-color-control select { font-size: 16px; }
  .lab-controls .rotation input { min-height: 36px; }
  .material-description { font-size: 12px; min-height: 0; }
  .stage-top > .eyebrow { max-width: 78%; }
  .stage-top .live-dot { display: none; }
}