/* Keep material controls reachable throughout the configurator. */
.personalization-bar {
  position: sticky;
  top: var(--personalization-top, 0px);
  z-index: 9;
  padding: 18px 0 12px;
  background: var(--ink-soft);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 8px 12px -10px #000;
}
.personalization-bar h2 {
  margin: 0 0 12px;
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.4px;
}
.personalization-bar h2 span {
  margin-right: 11px;
  color: var(--accent-light);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0;
}
.personalization-bar .color-targets { margin: 0; border: 0; gap: 6px; }
.personalization-bar .color-targets button {
  min-height: 48px;
  padding: 8px 4px;
  border: 1px solid #ffffff26;
  border-radius: 6px;
  background: var(--panel);
  color: #c4cbd4;
  font-size: 13px;
  line-height: 1.35;
}
.personalization-bar .color-targets button:hover { border-color: var(--accent-light); }
.personalization-bar .color-targets button[aria-pressed="true"] {
  border-color: var(--accent);
  background: #0d2c42;
  color: #fff;
  box-shadow: inset 0 0 0 1px var(--accent);
}
.personalization-bar .color-targets button[aria-pressed="true"]::after { display: none; }
.personalization-fields {
  padding-top: 18px;
  scroll-margin-top: calc(var(--personalization-top, 0px) + var(--personalization-height, 110px) + 12px);
}
@media (max-width: 760px) {
  .personalization-bar { padding-top: 10px; }
  .personalization-bar h2 { margin-bottom: 8px; }
}
/* Leave room for the controls on short phone screens and in landscape. */
@media (max-width: 760px) and (max-height: 600px) {
  .color-comparison { position: static; }
}