/* Smoked-glass surfaces. Opaque bases remain usable without backdrop filtering. */
:root{--glass-blur:16px;--glass-solid:var(--surface,#191919);--glass-tint:rgba(18,19,20,.88);--glass-text:var(--fg,#f2f0e9)}
body[data-surface="frosted"] > .site-header,
body[data-surface="frosted"] .shopify-section:has(> .site-header){position:sticky;top:0;z-index:40}
body[data-surface="frosted"] .shopify-section > .site-header{position:relative}
body[data-surface="frosted"] .site-header{background:transparent;color:var(--glass-text);isolation:isolate;box-shadow:0 8px 30px #0002}
body[data-surface="frosted"] .site-header::before,
body[data-surface="frosted"] [data-player][data-mode="local"]::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--glass-solid);box-shadow:inset 0 4px 14px #ffffff04}
body[data-surface="frosted"] .hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 88% 42%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 48%),radial-gradient(ellipse at 12% 0%,#ffffff07,transparent 45%)}
body[data-surface="frosted"] .hero-feature{position:relative;isolation:isolate;border-radius:10px;background:var(--glass-solid);color:var(--glass-text);box-shadow:inset 0 4px 16px #ffffff06,0 14px 40px #0005;transition:box-shadow .25s}
body[data-surface="frosted"] .hero-feature::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(125deg,#ffffff12,transparent 42%,#ffffff03);z-index:-1}
body[data-surface="frosted"] .hero-feature .eyebrow{color:var(--glass-text);opacity:.8}
body[data-surface="frosted"] [data-player][data-mode="local"]{background:transparent;isolation:isolate;box-shadow:0 -10px 32px #0003}
body[data-surface="frosted"] .player-queue,
body[data-surface="frosted"] #mobile-menu,
body[data-surface="frosted"] dialog{background:var(--glass-solid);box-shadow:inset 0 4px 18px #ffffff05,0 18px 65px #0008}
body[data-surface="frosted"] .player-queue{border-radius:12px}
body[data-surface="frosted"] .player-queue-heading{background:linear-gradient(120deg,#ffffff08,transparent)}
body[data-surface="frosted"] .player-queue [data-track]:hover{background:#ffffff08}
body[data-surface="frosted"] .player-queue [data-track].is-current,
body[data-surface="frosted"] .player-queue [data-track].is-playing{background:color-mix(in srgb,var(--accent) 12%,transparent)}
body[data-surface="frosted"] .player-queue-heading>button{background:#ffffff05;border-radius:50%}
body[data-surface="frosted"] .player-queue-toolbar select{background:#161616a6}
body[data-surface="frosted"] dialog{border-radius:14px}
body[data-surface="frosted"] dialog::backdrop{background:#08080888}
body[data-surface="frosted"] #mobile-menu{border-radius:0 0 12px 12px;max-height:calc(100dvh - 200px);overflow-y:auto;overscroll-behavior:contain}
body[data-surface="frosted"] .button--outline{background:#ffffff07;box-shadow:inset 0 3px 10px #ffffff04,0 6px 18px #0003}
body[data-surface="frosted"] .button--outline:hover{background:var(--fg)}
body[data-surface="frosted"] .quick-play{background:#171717d9;box-shadow:0 4px 16px #0005}
body[data-surface="frosted"] .quick-play:hover{background:var(--accent)}

/* A separate backdrop plane keeps the queue and mobile menu outside a parent blur root. */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  body[data-surface="frosted"] .site-header::before,
  body[data-surface="frosted"] [data-player][data-mode="local"]::before{background:linear-gradient(110deg,#ffffff08,transparent 60%),var(--glass-tint);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(130%);backdrop-filter:blur(var(--glass-blur)) saturate(130%)}
  body[data-surface="frosted"] .hero-feature,
  body[data-surface="frosted"] .player-queue,
  body[data-surface="frosted"] #mobile-menu,
  body[data-surface="frosted"] dialog{background:var(--glass-tint);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(120%);backdrop-filter:blur(var(--glass-blur)) saturate(120%)}
  body[data-surface="frosted"] dialog::backdrop{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
}
@media(hover:hover) and (pointer:fine){
  body[data-surface="frosted"] .hero-feature:hover{box-shadow:inset 0 5px 22px #ffffff0b,0 18px 46px #0006,0 0 22px color-mix(in srgb,var(--accent) 12%,transparent)}
}
@media(max-width:760px){
  body[data-surface="frosted"]{--glass-blur-mobile:min(var(--glass-blur),12px)}
  body[data-surface="frosted"] .site-header::before,
  body[data-surface="frosted"] [data-player][data-mode="local"]::before,
  body[data-surface="frosted"] .hero-feature,
  body[data-surface="frosted"] .player-queue,
  body[data-surface="frosted"] #mobile-menu,
  body[data-surface="frosted"] dialog{-webkit-backdrop-filter:blur(var(--glass-blur-mobile));backdrop-filter:blur(var(--glass-blur-mobile))}
  body[data-surface="frosted"] .hero::before{background:radial-gradient(ellipse at 98% 55%,color-mix(in srgb,var(--accent) 17%,transparent),transparent 52%)}
  body[data-surface="frosted"] .hero-feature{border-radius:8px}
  body[data-surface="frosted"] .player-queue{border-radius:10px}
}
body[data-surface="matte"] .hero-feature,
body[data-surface="matte"] dialog::backdrop{-webkit-backdrop-filter:none;backdrop-filter:none}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){
  body[data-surface="frosted"] .site-header::before,
  body[data-surface="frosted"] [data-player][data-mode="local"]::before,
  body[data-surface="frosted"] .hero-feature,
  body[data-surface="frosted"] .player-queue,
  body[data-surface="frosted"] #mobile-menu,
  body[data-surface="frosted"] dialog{background:var(--glass-solid);-webkit-backdrop-filter:none;backdrop-filter:none}
  body[data-surface="frosted"] .hero::before,
  body[data-surface="frosted"] .hero-feature::before{display:none}
  body[data-surface="frosted"] dialog::backdrop{background:#080808e6;-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media(prefers-reduced-motion:reduce){body[data-surface="frosted"] .hero-feature{transition:none}}
[data-motion="reduced"][data-surface="frosted"] .hero-feature{transition:none}