.project-material-controls { margin: 0 0 20px; padding: 20px; background: #20251a; border: 1px solid #465139; }
.project-material-heading { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 16px; }
.material-compare { display: flex; align-items: center; gap: 9px; font-size: 12px; color: #d4ddc5; }
.material-compare input[type=checkbox] { width: 18px; height: 18px; margin: 0; padding: 0; accent-color: var(--lime); }
.project-material-controls .material-buttons { grid-template-columns: repeat(4,minmax(0,1fr)); }
.project-material-controls .material-buttons button { padding: 12px; min-height: 82px; gap: 10px; }
.project-material-controls .material-chip { flex-basis: 26px; height: 34px; }
.project-material-options { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 18px; }
.project-material-options label { display: grid; gap: 8px; font-size: 12px; color: #c6ceba; flex: 1 1 170px; }
.project-material-options select { min-height: 44px; font-size: 13px; padding: 12px; }
.project-material-options .project-light-control { flex: 1.2 1 220px; }
.project-light-control input { min-height: 26px; margin: 3px 0; }
.project-material-summary { margin-top: 13px; font-size: 12px; line-height: 1.65; color: #e1ebd1; }
.project-material-foot { display: flex; gap: 20px; justify-content: space-between; align-items: start; margin-top: 8px; font-size: 10px; line-height: 1.65; color: #aeb99f; }
.project-material-foot p { max-width: 650px; }
.project-material-foot a { color: var(--lime); white-space: nowrap; border-bottom: 1px solid #677341; }
#project-material-canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.project-image-wrap.material-ready #project-image { visibility: hidden; }
@media(max-width:900px) {
  .project-material-controls .material-buttons { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media(max-width:650px) {
  .project-material-controls { padding: 12px; }
  .project-material-heading { align-items: start; flex-direction: column; gap: 10px; }
  .project-material-heading .eyebrow { font-size: 9px; }
  .project-material-controls .material-buttons button { padding: 12px 9px; }
  .project-material-controls .material-chip { flex-basis: 20px; height: 29px; }
  .project-material-options { gap: 12px; }
  .project-material-options label { flex-basis: 120px; min-width: 0; }
  .project-material-options select { font-size: 16px; }
  .project-material-options .project-light-control { flex-basis: 100%; }
  .project-material-foot { flex-direction: column; gap: 8px; }
}