.appearance-section { background:#f5f5f7; padding-block:80px; }
.appearance-layout { display:grid; gap:20px; }
.appearance-intro { min-width:0; }
.appearance-preview { margin:0; min-width:0; }
.appearance-preview img { display:block; width:100%; height:auto; aspect-ratio:4 / 3; object-fit:contain; }
.appearance-float-stage { position:relative; --appearance-float-rise:clamp(6px,1.1vw,10px); }
.appearance-float-stage img { position:relative; z-index:1; animation:appearance-float 4.8s ease-in-out infinite; }
.appearance-float-stage::after { content:""; position:absolute; left:50%; bottom:2.5%; width:38%; height:5%; pointer-events:none; background:radial-gradient(ellipse at center,rgba(29,29,31,.18),rgba(29,29,31,.06) 45%,transparent 75%); transform:translateX(-50%); opacity:.7; animation:appearance-float-shadow 4.8s ease-in-out infinite; }
@keyframes appearance-float {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(calc(-1 * var(--appearance-float-rise))); }
}
@keyframes appearance-float-shadow {
  0%,100% { transform:translateX(-50%) scaleX(1); opacity:.7; }
  50% { transform:translateX(-50%) scaleX(1.12); opacity:.4; }
}
@media (prefers-reduced-motion:reduce) {
  .appearance-float-stage img,.appearance-float-stage::after { animation:none; }
}
.appearance-controls fieldset { border:0; padding:0; margin:0; min-width:0; }
.appearance-view { margin:12px auto 0 !important;}
.appearance-view label { flex:1; cursor:pointer;}
.appearance-view span { place-items:center;}
.appearance-controls { min-width:0; }
.appearance-intro .section-heading { font-size:clamp(32px,4vw,52px); line-height:1.08; letter-spacing:-.025em; }
.appearance-description { margin:18px 0 0; max-width:400px; font-size:18px; line-height:1.45; color:var(--secondary); }
.appearance-styles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.appearance-style { min-width:0; cursor:pointer;}
.appearance-style-card { display:flex; flex-direction:column; justify-content:center; text-align:center;}
.appearance-style strong { overflow-wrap:anywhere;}
.appearance-finishes { margin-top:28px !important; }
.appearance-finishes legend { margin-bottom:12px;}
.appearance-swatches { display:flex; flex-wrap:wrap; gap:8px 12px; }
.appearance-finish { display:grid; place-items:center; width:44px; height:44px; border-radius:50%; cursor:pointer; }
.appearance-finish[hidden] { display:none; }
.appearance-swatch { display:block; width:28px; height:28px; border-radius:50%; background:var(--finish); box-shadow:inset 0 0 0 1px #00000020; }
.appearance-finish:has(input:checked) { box-shadow:inset 0 0 0 2px var(--blue); }.appearance-finish:has(input:focus-visible) { outline:3px solid var(--blue); outline-offset:4px; border-radius:16px; }
.appearance-finish:has(input:focus-visible) { border-radius:50%; }
.appearance-note { min-height:2.8em; margin:20px 0 8px; font-size:14px; line-height:1.4; color:var(--secondary); }
.appearance-section fieldset:disabled label { cursor:default; }
@media (min-width:900px) {
  .appearance-layout { grid-template-columns:minmax(0,1.1fr) minmax(360px,1fr); align-items:start; gap:24px 64px; }
  .appearance-preview { grid-column:1; grid-row:1 / span 2; align-self:center; }
  .appearance-intro,.appearance-controls { grid-column:2; }
}
@media (max-width:899px) {
  .appearance-intro { text-align:center; }
  .appearance-description { margin-inline:auto; }
  .appearance-preview { margin-top:-8px; }
  .appearance-finishes { margin-top:20px!important; }
}
@media (max-width:359px) {
}