/* Surface finishes share the same layout, palette, content and hero artwork. */
.site-controls,
.finish-control,
.sound-control { display: none !important; }
.site-controls {
  position: fixed;
  right: max(clamp(16px, 2vw, 28px), env(safe-area-inset-right));
  bottom: max(clamp(16px, 2vw, 28px), env(safe-area-inset-bottom));
  z-index: 120;
  display: flex;
  align-items: center;
  gap: 10px;
}
.site-controls .sound-control { position: static; flex: 0 0 auto; }
.finish-control {
  display: flex;
  flex-wrap: wrap;
  min-width: 0;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgb(255 255 255 / 0.2);
  border-radius: 999px;
  background: #25232C;
  box-shadow: 0 12px 32px -16px rgb(0 0 0 / 0.7), inset 0 1px 0 rgb(255 255 255 / 0.12);
}
.finish-control button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 13px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: #E8E1EF;
  font: 500 0.875rem/1.2 var(--font-ui);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}
.finish-control button:hover { background: #3D3448; }
.finish-control button[aria-pressed="true"] { background: #E2CEF4; color: #34213D; }
.finish-control button:active { transform: scale(0.95); }
.finish-control button:focus-visible { outline: 2px solid #F4E8FF; outline-offset: 3px; }
.finish-control__swatch { width: 16px; height: 16px; flex: 0 0 16px; border-radius: 50%; }
.finish-control__swatch--glossy {
  border: 1px solid #C5A4E2;
  background: radial-gradient(circle at 30% 22%, #FFFFFF 0 8%, #D6B3F4 22%, #8050A5 55%, #392044 85%);
  box-shadow: inset -1px -2px 2px rgb(0 0 0 / 0.3);
}
.finish-control__swatch--matte { border: 1px solid #8D6AA6; background: #AF88CE; }
html.navx-open .site-controls { visibility: hidden; pointer-events: none; }

/* Gloss: static, directional reflections across the existing surfaces. */
html[data-finish="glossy"] .grain { opacity: 0.016; }
html[data-finish="glossy"] .promises--editorial > .promise {
  background-image: linear-gradient(145deg, rgb(255 255 255 / 0.14), transparent 35%, rgb(255 255 255 / 0.035) 70%, transparent);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.25), inset 0 -1px 0 rgb(0 0 0 / 0.12), 0 22px 42px -28px rgb(0 0 0 / 0.48);
}
html[data-finish="glossy"] .pull.quote-card {
  background-image: linear-gradient(135deg, rgb(255 255 255 / 0.48), transparent 50%, rgb(255 255 255 / 0.12));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.7), 0 20px 36px -28px rgb(0 0 0 / 0.42);
}
html[data-finish="glossy"] .text-detail {
  background-image: linear-gradient(125deg, rgb(255 255 255 / 0.07), transparent 55%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12), 0 10px 28px -24px rgb(0 0 0 / 0.6);
}
html[data-finish="glossy"] :is(.footer, .form--playful) {
  background-image: radial-gradient(ellipse at 15% 0, rgb(201 162 255 / 0.13), transparent 55%), linear-gradient(155deg, rgb(255 255 255 / 0.065), transparent 40%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 24px 48px -36px rgb(0 0 0 / 0.5);
}
html[data-finish="glossy"] .form.form--playful :is(.check, .budget-choice) {
  background-image: linear-gradient(155deg, rgb(255 255 255 / 0.13), transparent 50%);
}
html[data-finish="glossy"] :is(.finish-control, .site-controls .sound-control, .install-control) {
  background-image: linear-gradient(160deg, rgb(255 255 255 / 0.14), transparent 48%);
}

/* Matte: opaque surfaces, soft grain and a quiet edge instead of reflections. */
html[data-finish="matte"] .grain { opacity: 0.045; }
html[data-finish="matte"] .promises--editorial > .promise:nth-child(3n + 2) { background: #4A3179; }
html[data-finish="matte"] .promises--editorial > .promise:nth-child(3n) { background: #2A3878; }
html[data-finish="matte"] :is(.band:not(.band--sky), .footer, .text-detail, .pull.quote-card, .promises--editorial > .promise, .form--playful) {
  background-image: none;
  box-shadow: none;
}
html[data-finish="matte"] .band--sky { background: var(--sky-2); box-shadow: none; }
html[data-finish="matte"] :is(.brand, .nav-toggle, .lang, .sound-control, .install-control, .install-help, .finish-control) {
  background: var(--ground-2);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
html[data-finish="matte"] :is(.sound-control, .install-control, .install-help, .finish-control) { background: #25232C; }
html[data-finish="matte"].is-inverse :is(.brand, .nav-toggle, .lang) { background: var(--shade); }
html[data-finish="matte"] :is(.sound-control__orb, .lang__thumb) { background: var(--accent); box-shadow: none; }
html[data-finish="matte"] .sound-control__orb span { background: var(--shade); }
html[data-finish="matte"] .form.form--playful :is(.check, .budget-choice) { background-image: none; }
@media (min-width: 1100px) {
  html[data-finish="matte"] .nav__list { background: var(--ground-2); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
  html[data-finish="matte"].is-inverse .nav__list { background: var(--shade); }
}
@media (max-width: 720px) {
  .site-controls { right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); max-width: calc(100vw - 84px - env(safe-area-inset-right)); gap: 8px; }
  .finish-control button { padding-inline: 7px; gap: 6px; }
  .site-controls .sound-control { padding: 4px; min-width: 44px; min-height: 44px; }
  .site-controls .sound-control__copy { display: none; }
  .install-control { padding: 4px; min-width: 44px; min-height: 44px; }
  .install-control > span:last-child { display: none; }
  body { padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  .finish-control button { transition: none; }
  .finish-control button:active { transform: none; }
}
@media (forced-colors: active) {
  .finish-control { background: Canvas; border-color: ButtonText; box-shadow: none; }
  .finish-control button { color: ButtonText; }
  .finish-control button[aria-pressed="true"] { background: Highlight; color: HighlightText; border-color: ButtonText; }
  .finish-control button:focus-visible { outline-color: Highlight; }
}
@media print { .site-controls { display: none; } }