#detail {
  --glass-solid:#eee4d7;
  --glass-tint:#e9ded19c;
  --glass-gleam:#fffc;
  --glass-edge:#fff9;
  --glass-shadow:#4e3c2933;
  color:#342c26;
}
body[data-theme=graphite] #detail {
  --glass-solid:#373635;
  --glass-tint:#302f2dc9;
  --glass-gleam:#ffffff36;
  --glass-edge:#fff4;
  --glass-shadow:#0006;
  color:#fff8ec;
}
#detail :is(.single-dock,.back-button,.info-button,#helpButton,#controlHelp,.part-card,.product-ident h1) {
  background:linear-gradient(168deg,var(--glass-gleam),transparent 52%),var(--glass-solid);
  border:1px solid var(--glass-edge);
  box-shadow:inset 0 1px 2px var(--glass-gleam),inset 0 -2px 5px #fff3,0 4px 14px var(--glass-shadow);
  color:inherit;
}
@supports ((backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px))) {
  #detail :is(.single-dock,.back-button,.info-button,#helpButton,#controlHelp,.part-card,.product-ident h1) {
    background:linear-gradient(168deg,var(--glass-gleam),transparent 52%),var(--glass-tint);
    -webkit-backdrop-filter:blur(12px) saturate(1.16);
    backdrop-filter:blur(12px) saturate(1.16);
  }
}
#detail .single-dock {border-radius:19px;padding:4px}
#detail .single-dock button {border-radius:14px;color:inherit}
#detail button:not(:disabled):is(:hover,[aria-pressed=true],[aria-expanded=true]) {box-shadow:inset 0 0 0 1px var(--glass-edge),inset 0 1px 3px var(--glass-gleam);background-color:#8b725333}
#detail .color-swatch:not(:disabled):is(:hover,[aria-pressed=true]) {background-color:var(--swatch)}
#detail .single-dock button:disabled {opacity:.55}
#detail .back-button {min-height:44px;border-radius:15px}
#detail .product-ident h1 {border-radius:999px;padding:6px 11px;white-space:nowrap;font-weight:500}
#detail button:focus-visible {outline:2px solid #36618b;outline-offset:2px}
#detailBackdrop {background:radial-gradient(ellipse at 50% 32%,#fbefe0,transparent 66%),linear-gradient(#b9aa94,#e6d3bb 67%,#aa9b87)}
#detailBackdrop:after {display:none}
body:not([data-page=detail]) #detailBackdrop {visibility:hidden}
@media(max-width:699px) {
  #detail .product-ident {top:calc(max(17px,env(safe-area-inset-top)) + 48px)}
  #detail .detail-header {padding-top:max(12px,env(safe-area-inset-top))}
}
body[data-theme=stone] #detailBackdrop {
  background:#c4b4a0 url('../assets/showroom/detail-studio.png') center 65% / cover no-repeat;
}