/* Studio photography and color, scoped to the beat shop. */
.beat-shop { position:relative; isolation:isolate; background:#14151e; color:#f6f0e5; border-top:4px solid var(--orange); }
.shop-atmosphere { position:absolute; inset:0 0 auto; height:830px; max-height:100%; overflow:hidden; z-index:-1; pointer-events:none; }
.shop-atmosphere img { height:100%; object-fit:cover; object-position:30% 45%; opacity:.6; }
.shop-atmosphere::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,#1515206b,#15152099 48%,#14151ef2),linear-gradient(0deg,#14151e,#14151e40 55%,#14151e66); }
.beat-shop .section-kicker { color:#eee5da; }
.beat-shop .section-kicker a { color:#ffb087; }
.beat-shop .shop-layout { grid-template-columns:minmax(0,1.12fr) minmax(0,1fr); gap:7%; align-items:start; margin-top:56px; }
.beat-shop .shop-intro { padding-top:10px; }
.beat-shop .shop-intro .eyebrow { color:#ffe0cd; }
.beat-shop .shop-intro h2 { font-size:clamp(90px,10.5vw,160px); margin:26px 0 32px; }
.beat-shop .shop-intro h2 .serif { color:#ff905f; }
.beat-shop .shop-intro>p { font-size:24px; }
.beat-shop .shop-intro .shop-caption { font-size:13px; color:#d8d0c5; }
.beat-shop .shop-intro .text-link { color:#ffb087; border-color:#ff895c66; gap:20px; }
.beat-shop .shop-intro .text-link:hover { color:#ffad86; }
.beat-shop .shop-portrait { top:64px; width:36%; max-width:215px; border:6px solid #ede5d8; border-bottom-width:22px; box-shadow:10px 10px 0 #ff5a2a; transform:rotate(4deg); }
.beat-shop .shop-panel { background:linear-gradient(145deg,#292723,#1b1c18 70%); border:1px solid #8f5940; border-top:4px solid #ff895c; padding:28px; box-shadow:8px 8px 0 #0b0c1466; }
.beat-shop .shop-panel-top { color:#ffcca9; border-color:#665348; margin-bottom:22px; padding-bottom:18px; }
.beat-shop .shop-panel-top>span:first-child::before { content:''; display:inline-block; width:6px; height:6px; background:#ff926a; border-radius:50%; margin-right:8px; }
.beat-shop .shop-label { color:#e8bea4; }
.beat-shop .shop-panel select { color:#fff6ea; color-scheme:dark; border-color:#665348; font-size:38px; }
.beat-shop .shop-panel option { background:#24241f; color:#fff6ea; }
.beat-shop .shop-track-meta { color:#e2d3c5; }
.beat-shop .shop-wave { height:68px; margin:22px 0; }
.beat-shop .shop-wave i { background:#d99772; }
.beat-shop .shop-wave i.played { background:#ff915e; }
.beat-shop .shop-transport button { background:#ff5a2a; color:#1b1c18; font-weight:700; }
.beat-shop .shop-transport button>span { color:#392319; }
.beat-shop .shop-transport button:hover:not(:disabled) { background:#ff9b6e; }
.beat-shop .shop-panel input[type=range] { accent-color:#ffa371; }
.beat-shop .shop-panel .shop-caption { color:#d4c8bb; }
.beat-shop .shop-license { border-color:#665348; }
.beat-shop .shop-license-icon { color:#ffad86; }
.beat-shop .shop-footnote { color:#c7b9aa; }
.beat-shop .studio-button { background:#ff895c; color:#211a20; }
.beat-shop .studio-button:hover:not(:disabled) { background:#ffa177; }
.beat-shop .shop-browse { margin-top:65px; padding-top:38px; border-color:#695044; }
.beat-shop .shop-browse-top .eyebrow { color:#ffa276; }
.beat-shop .shop-browse-top h3 { font-size:clamp(36px,4vw,60px); letter-spacing:-.5px; }
.beat-shop .shop-browse-top p { color:#d7cbbf; }
.beat-shop #shop-demo { color:#ffb087; background:transparent; }
.beat-shop .shop-demo-note { color:#392813; }
.beat-shop .shop-browser-layout { grid-template-columns:minmax(0,1.75fr) minmax(285px,1fr); gap:32px; }
.beat-shop .shop-catalog { min-width:0; }
.beat-shop .shop-filters { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.beat-shop .shop-filters button {
  --collection-accent:#ff5a2a;
  position:relative; isolation:isolate; display:grid;
  grid-template-columns:1fr auto; grid-template-rows:1fr auto; gap:8px;
  min-width:0; min-height:218px; padding:16px 12px; overflow:hidden; text-align:left;
  color:#fff9ee; background:#24241f; border:1px solid #80604d; border-bottom:4px solid var(--collection-accent);
  transition:border-color .2s,box-shadow .2s;
}
.beat-shop #collection-value { --collection-accent:#ffa276; }
.beat-shop #collection-premium { --collection-accent:#ff5a2a; }
.beat-shop .shop-filters img { position:absolute; inset:0; height:100%; object-fit:cover; object-position:50% 40%; z-index:-2; transition:transform .4s ease; }
.beat-shop #collection-all img { object-position:47% 50%; }
.beat-shop .shop-filters button::after { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,#090b1566,transparent 45%,#090b15e6 85%); }
.beat-shop .collection-number { grid-column:1/-1; align-self:start; font-size:8px; font-weight:600; letter-spacing:1px; color:#fff5e9; }
.beat-shop .collection-name { align-self:end; font-family:var(--display); font-size:27px; font-weight:600; line-height:1; }
.beat-shop .collection-arrow { align-self:end; font-size:23px; color:var(--collection-accent); }
.beat-shop .shop-filters button:hover img { transform:scale(1.05); }
.beat-shop .shop-filters button:hover,.beat-shop .shop-filters button[aria-expanded=true] { border-color:var(--collection-accent); box-shadow:0 0 0 2px var(--collection-accent); }
.beat-shop .shop-filters button[aria-expanded=true] .collection-name { color:var(--collection-accent); }
.beat-shop .shop-collection-hint,.beat-shop .shop-results,.beat-shop .shop-empty { color:#cec1b3; }
.beat-shop .shop-search { color:#f0c3a6; }
.beat-shop .shop-search input { color:#fff5e8; border-color:#8c6954; }
.beat-shop .shop-search input::placeholder { color:#b8a99a; }
.beat-shop .shop-row { border-color:#58473d; }
.beat-shop .shop-row small { color:#d1bdac; }
.beat-shop .shop-row-price { color:#ffd0b3; }
.beat-shop .shop-row-actions button { background:#2b2721; border-color:#87604a; color:#ffe0cd; }
.beat-shop .shop-row-actions button:last-child { background:#ff5a2a; color:#1b1c18; }
.beat-shop .shop-row-actions button:hover:not(:disabled) { background:#ff9b6e; color:#1b1c18; }
.beat-shop .shop-pagination,.beat-shop .shop-close-collection { border-color:#73513e; }
.beat-shop .shop-pagination button { background:transparent; color:#ffd0b3; }
.beat-shop .shop-close-collection:hover { color:#ffa67c; }
.beat-shop .shop-browse button:focus-visible,.beat-shop .shop-browse input:focus-visible { outline-color:#ffa67c; }
.beat-shop .beat-cart { background:#22232b; color:#d8d6d1; border:0; border-top:4px solid #555761; box-shadow:7px 7px 0 #0b0c14; padding:25px; }
.beat-shop .cart-top { border-color:#454750; }
.beat-shop .cart-top h3 { font-size:36px; }
.beat-shop #cart-count { background:#14151e; color:#d8d6d1; padding:7px 10px; border-radius:20px; }
.beat-shop .beat-cart .shop-empty,.beat-shop .cart-item small { color:#c9c5bf; }
.beat-shop .cart-item { border-color:#454750; }
.beat-shop .cart-item button { color:#d8d6d1; background:transparent; }
.beat-shop .cart-total { align-items:center; border-top:1px solid #454750; padding-top:20px; }
.beat-shop .cart-total strong { font-size:38px; }
.beat-shop .beat-cart .studio-button { background:#393c48; color:#d8d6d1; }
.beat-shop .beat-cart .studio-button:hover:not(:disabled) { background:#4c505e; }
.beat-shop #cart-message,.beat-shop .cart-error { color:#ffb89d; }
.beat-shop #cart-message:empty { display:none; }
@media(max-width:1000px) {
  .beat-shop .shop-layout { gap:5%; }
  .beat-shop .shop-panel { padding:24px; }
  .beat-shop .shop-browser-layout { grid-template-columns:minmax(0,1.4fr) minmax(255px,1fr); gap:25px; }
  .beat-shop .collection-name { font-size:23px; }
  .beat-shop .shop-filters button { min-height:195px; }
}
@media(max-width:800px) {
  .beat-shop .shop-layout { grid-template-columns:1fr; gap:42px; margin-top:38px; }
  .beat-shop .shop-intro h2 { font-size:112px; }
  .beat-shop .shop-intro>p { font-size:21px; }
  .beat-shop .shop-intro .shop-caption { max-width:62%; font-size:13px; }
  .beat-shop .shop-atmosphere { height:620px; }
  .beat-shop .shop-atmosphere img { object-position:38% 50%; }
  .beat-shop .shop-browser-layout { grid-template-columns:1fr; gap:28px; }
  .beat-shop .shop-browse-top { gap:12px; }
  .beat-shop .shop-filters button { min-height:230px; }
  .beat-shop .collection-name { font-size:30px; }
  .beat-shop .beat-cart { position:static; }
}
@media(max-width:460px) {
  .beat-shop .section-kicker { font-size:7px; gap:15px; }
  .beat-shop .section-kicker a { text-align:right; max-width:100px; }
  .beat-shop .shop-intro h2 { font-size:clamp(72px,22.6vw,88px); }
  .beat-shop .shop-portrait { top:53px; width:34%; border-width:4px; border-bottom-width:14px; box-shadow:5px 5px 0 #ff5a2a; }
  .beat-shop .shop-panel { padding:24px 18px; box-shadow:5px 5px 0 #0b0c1466; }
  .beat-shop .shop-panel select { font-size:32px; }
  .beat-shop .shop-browse { margin-top:48px; padding-top:28px; }
  .beat-shop .shop-browse-top h3 { font-size:37px; }
  .beat-shop .shop-filters { gap:8px; }
  .beat-shop .shop-filters button { min-height:170px; padding:12px 8px; gap:6px; grid-template-columns:minmax(0,1fr) 14px; }
  .beat-shop .collection-number { font-size:6px; letter-spacing:.6px; }
  .beat-shop .collection-name { grid-column:1/-1; font-size:clamp(19px,5.6vw,23px); }
  .beat-shop .collection-arrow { position:absolute; right:9px; top:34px; font-size:20px; }
  .beat-shop .beat-cart { padding:22px 18px; box-shadow:5px 5px 0 #0b0c14; }
}
@media(prefers-reduced-motion:reduce) {
  .beat-shop .shop-filters img,.beat-shop .shop-filters button { transition:none; }
  .beat-shop .shop-filters button:hover img { transform:none; }
}
body.motion-paused .beat-shop .shop-filters img,body.motion-paused .beat-shop .shop-filters button { transition:none; }
body.motion-paused .beat-shop .shop-filters button:hover img { transform:none; }