html {
  color-scheme: dark;
}

.fq-delivery-consent-dialog__body{max-width:620px}
.fq-delivery-consent-dialog__label{display:grid;grid-template-columns:20px 1fr;gap:12px;align-items:start;margin:22px 0 10px;color:var(--text);font-size:14px;line-height:1.6}
.fq-delivery-consent-dialog__label input{width:18px;height:18px;margin:3px 0 0;accent-color:var(--accent)}
.fq-delivery-consent-dialog__policy,.fq-delivery-consent-dialog__error{margin:0 0 18px 32px;font-size:12px;line-height:1.5}
.fq-delivery-consent-dialog__policy a{text-decoration:underline;text-underline-offset:3px}
.fq-delivery-consent-dialog__error{color:#f1a8a8}
.fq-delivery-consent-dialog__actions button:disabled{cursor:not-allowed;opacity:.45}

@media (max-width:767px){
  .fq-delivery-consent-dialog__body{width:min(100% - 24px,620px);padding:24px 20px}
  .fq-delivery-consent-dialog__actions{flex-direction:column-reverse}
  .fq-delivery-consent-dialog__actions .btn{width:100%}
}

.fq-header-v40,
.fq-mobile-drawer,
.fq-mobile-nav,
.fq-shell-footer,
#miniPlayer,
#webTracklistPanel {
  --bg: var(--color-bg-base);
  --bg-alt: var(--color-bg-alt);
  --surface: var(--color-surface);
  --surface-hover: var(--color-surface-hover);
  --line: var(--color-line);
  --text: var(--color-text);
  --text-dim: var(--color-text-dim);
  --text-ui: var(--color-text-ui);
  --text-faint: var(--color-text-faint);
  --receded: var(--color-text-receded);
  --accent: var(--color-accent);
  --blue: var(--color-accent);
  --blue-surface: var(--color-accent-surface);
}

/* Web Tracklist v15 host (regression fix, 2026-09-18).
   The shared shell declares `html { color-scheme: dark }` above. The frozen
   v15 module, when framed, switches its own root to `color-scheme: normal`
   (its v76 embed block was written for v83, which declares no color-scheme)
   and makes html/body/.device/.track-row transparent so the panel's floating
   glass shows through. Chromium, WebKit and Gecko paint an OPAQUE canvas for
   a framed document whose used color-scheme differs from its <iframe>
   element's, so with the shell's dark root the transparent v15 canvas was
   rendered as solid white. Every computed background inside the frame was
   already transparent; only the frame-owner/document scheme mismatch was
   painting white. Matching the iframe element to the framed document's
   `normal` scheme restores the composited glass. `normal` also matches the
   `about:blank` document that exists before v15 loads, and the explicit
   transparent background keeps the element from ever contributing a fill,
   so no white first-paint flash can occur. No color values are added; the
   surface remains var(--overlay-floating) from .web-tracklist-panel. */
#webTracklistPanel > iframe,
#webTracklistFrame {
  color-scheme: normal;
  background: transparent;
}

body[data-fq-shell-page="search"] .page {
  padding-top: 176px;
}

body[data-fq-shell-page="search"] .fq-shell-footer {
  margin-top: 32px;
}

/* Album/Genre/Home featured Hero share control.
   It is authored outside the frozen Album v6 input and composed only on a
   large Hero representing one exact album. Collection cards remain unchanged. */
body:is([data-fq-shell-page="album"],[data-fq-shell-page="genre"],[data-fq-shell-page="home"]) .hero-slide > .fq-album-share-button {
  position: absolute;
  z-index: 4;
  right: 28px;
  bottom: 64px;
  width: 44px;
  height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  background: var(--overlay-share-control);
  border: 1px solid var(--overlay-accent-edge);
  border-radius: 6px;
  box-shadow:
    inset 0 1px 0 var(--overlay-white-quiet),
    0 10px 26px rgba(0, 0, 0, .18);
  -webkit-backdrop-filter: blur(12px) saturate(118%);
  backdrop-filter: blur(12px) saturate(118%);
  cursor: pointer;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    transform 160ms ease;
}

body:is([data-fq-shell-page="album"],[data-fq-shell-page="genre"],[data-fq-shell-page="home"]) .hero-slide > .fq-album-share-button:hover {
  background: var(--overlay-share-control-hover);
  border-color: color-mix(in srgb, var(--color-accent-soft) 48%, transparent);
  transform: translateY(-1px);
}

body:is([data-fq-shell-page="album"],[data-fq-shell-page="genre"],[data-fq-shell-page="home"]) .hero-slide > .fq-album-share-button:focus-visible {
  outline: 2px solid var(--color-accent-soft);
  outline-offset: 3px;
}

body:is([data-fq-shell-page="album"],[data-fq-shell-page="genre"],[data-fq-shell-page="home"]) .fq-album-share-icon {
  display: block;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body:is([data-fq-shell-page="album"],[data-fq-shell-page="genre"],[data-fq-shell-page="home"]) .fq-album-share-button > .fq-album-share-status {
  position: absolute;
  z-index: 5;
  right: 0;
  bottom: 52px;
  width: max-content;
  max-width: 220px;
  padding: 7px 10px;
  color: var(--color-text);
  background: var(--overlay-floating);
  border: 1px solid var(--overlay-accent-edge);
  border-radius: 6px;
  -webkit-backdrop-filter: blur(12px) saturate(118%);
  backdrop-filter: blur(12px) saturate(118%);
  font-size: 11px;
  line-height: 1.25;
  letter-spacing: .02em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 150ms ease, transform 150ms ease;
}

body:is([data-fq-shell-page="album"],[data-fq-shell-page="genre"],[data-fq-shell-page="home"]) .fq-album-share-button > .fq-album-share-status[data-visible="true"] {
  opacity: 1;
  transform: translateY(0);
}

/* Page-level Album/Track share modal. It deliberately follows the dimensions
   of the existing cart-conflict decision dialog, while owning the browser top
   layer so the Web Tracklist iframe can never constrain its position. */
html.fq-share-dialog-open,
html.fq-share-dialog-open body {
  overflow: hidden;
}

.fq-footer-privacy-choices {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

/* Preserve the approved License album button footprint when only its visible
   label changes to ADDED. The hidden natural label participates in layout, so
   no width is ever measured from a closed Album Info drawer. */
.fq-license-size-lock {
  display: inline-grid !important;
  align-items: center;
  justify-items: center;
}

.fq-license-size-lock > :is(.fq-license-visible-label, .fq-license-natural-sizer) {
  grid-area: 1 / 1;
}

.fq-license-natural-sizer {
  visibility: hidden;
  pointer-events: none;
}

.fq-share-dialog {
  width: min(520px, calc(100vw - 32px));
  max-width: none;
  max-height: min(640px, calc(100dvh - 32px));
  overflow: visible;
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--text);
  font-family: "Schibsted Grotesk", sans-serif;
}

.fq-share-dialog::backdrop {
  background: rgba(0, 7, 16, .76);
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
}

.fq-share-dialog__body {
  position: relative;
  padding: 34px;
}

#albumReplaceDialog .cart-conflict-dialog__body {
  position: relative;
}

#albumReplaceDialog .cart-conflict-dialog__body > h2 {
  margin-right: 52px;
}

.fq-share-dialog__body > .label {
  color: var(--text-faint);
}

.fq-share-dialog__body > h2 {
  margin: 8px 52px 12px 0;
  font-family: "Schibsted Grotesk", sans-serif;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.5;
}

.fq-share-dialog__close {
  position: absolute;
  top: 23px;
  right: 22px;
  width: 44px;
  height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  color: var(--text-dim);
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.fq-share-dialog__close:hover {
  color: var(--text);
}

.fq-share-dialog__close:focus-visible {
  outline: none;
}

.fq-share-dialog__copy-button:focus-visible {
  outline: 2px solid var(--color-accent-soft);
  outline-offset: 3px;
}

.fq-share-dialog__close svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}

.fq-share-dialog__link-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 126px;
  gap: 12px;
  align-items: stretch;
  margin-top: 28px;
}

.fq-share-dialog__url {
  min-width: 0;
  width: 100%;
  height: 44px;
  padding: 0 13px;
  color: var(--text-dim);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  font: 400 13px/1 "Schibsted Grotesk", sans-serif;
  text-overflow: ellipsis;
}

.fq-share-dialog__url:focus {
  outline: 1px solid var(--overlay-accent-edge);
  outline-offset: 2px;
}

.fq-share-dialog__copy-button {
  min-width: 126px;
  min-height: 44px;
}

@media (min-width: 768px) and (max-width: 900px) {
  body:is([data-fq-shell-page="album"],[data-fq-shell-page="genre"],[data-fq-shell-page="home"]) .hero-slide > .fq-album-share-button {
    position: relative;
    right: auto;
    bottom: auto;
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    justify-self: end;
    margin: 0 16px 28px 0;
  }
}

@media (max-width: 767px) {
  body[data-fq-shell-page="search"] .page {
    padding-top: 92px;
  }

  /* Album hero: keep Highlight, Album info and + Save on one mobile row.
     The approved controls and typography are unchanged; only horizontal
     padding/gaps are tightened enough for the 360px–767px range. */
  body:is([data-fq-shell-page="album"],[data-fq-shell-page="genre"],[data-fq-shell-page="home"]) .featured-actions {
    flex-wrap: nowrap !important;
    gap: 8px !important;
  }

  body:is([data-fq-shell-page="album"],[data-fq-shell-page="genre"],[data-fq-shell-page="home"]) .featured-actions > .btn {
    min-width: 0 !important;
    width: auto !important;
    padding: 12px 10px !important;
    white-space: nowrap;
    text-align: center;
    justify-content: center;
  }

  body:is([data-fq-shell-page="album"],[data-fq-shell-page="genre"],[data-fq-shell-page="home"]) .featured-actions > a {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  body:is([data-fq-shell-page="album"],[data-fq-shell-page="genre"],[data-fq-shell-page="home"]) .hero-slide > .fq-album-share-button {
    right: max(8px, calc(var(--gutter-reading) - 12px));
    bottom: 27px;
  }

  /* Mobile Spacing Guide: the modal follows the 18px page gutter and keeps
     every interactive target at least 44px. */
  .fq-share-dialog {
    width: min(520px, calc(100vw - 36px));
    max-height: min(640px, calc(100dvh - 36px));
  }

  .fq-share-dialog__body {
    padding: 24px;
  }

  .fq-share-dialog__close {
    top: 13px;
    right: 12px;
  }

  .fq-share-dialog__link-row {
    grid-template-columns: minmax(0, 1fr) 88px;
    gap: 9px;
    margin-top: 22px;
  }

  .fq-share-dialog__copy-button {
    min-width: 88px;
    padding-left: 12px;
    padding-right: 12px;
  }
}

@media (max-width: 340px) {
  .fq-share-dialog__body {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* Interrupted playback uses the existing transport instead of a separate popup.
   The cool accent-soft blue belongs to the Frequenoir token palette and keeps the
   recovery cue visually related to the player, not to warnings or commerce. */
#miniPlayerToggle.is-interrupted,
.album-info-drawer .track-play.is-interrupted {
  position: relative;
  isolation: isolate;
  color: var(--color-accent-soft, #9bbce2) !important;
}

#miniPlayerToggle.is-interrupted::after,
.album-info-drawer .track-play.is-interrupted::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: 32px;
  height: 32px;
  border: 1.5px solid var(--color-accent-soft, #9bbce2);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(155, 188, 226, .28);
  pointer-events: none;
  animation: fqInterruptedPlayPulse 1.15s cubic-bezier(.3,.6,.4,1) infinite;
}

@keyframes fqInterruptedPlayPulse {
  0% {
    transform: translate(-50%, -50%) scale(.72);
    opacity: .9;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.82);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
  }

  #miniPlayerToggle.is-interrupted::after,
  .album-info-drawer .track-play.is-interrupted::after {
    animation: none;
    opacity: .72;
    transform: translate(-50%, -50%) scale(1.08);
  }
}
.mini-player-progress-track{
  position:relative;
  cursor:pointer;
  touch-action:none;
  outline:none;
}
.mini-player-progress-track::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:22px;
  transform:translateY(-50%);
}
.mini-player-progress-track:focus-visible{
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 28%,transparent);
}

/* Shuffle / Repeat on the shared play bar (2026-09-23).
   Order: Shuffle · Previous · Play/Pause · Next · Repeat. The icons are the design-system SVGs
   (src/shared/assets/icons/27_transport_shuffle.svg, 26_transport_repeat.svg,
   27_transport_repeat_one.svg), drawn 15 px wide (square, their own 24×24 proportion).
   Gap: Previous/Next keep their 44 px hit boxes with a 17 px glyph centred (13.5 px inset); a 38 px
   wide mode button centres its 15 px glyph with an 11.5 px inset, so glyph-to-glyph is exactly
   11.5 + 13.5 = 25 px at every play-bar width (the transport row is a fixed-size flex row).
   Off = the disabled-Next look (--text-dim at .32); on / Repeat All / Repeat One = #9bbce2. */
.mini-player .transport-icons .mini-mode{
  width:38px;
  min-width:38px;
  height:44px;
  min-height:44px;
  flex:0 0 38px;
  border-radius:12px;
  color:var(--text-dim);
  background:transparent;
  -webkit-tap-highlight-color:transparent;
}
.mini-transport.mini-mode svg{
  width:15px;
  height:15px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6px;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.32;
  transition:opacity .15s ease,filter .15s ease;
}
.mini-transport.mini-mode[aria-pressed="true"],
.mini-transport.mini-mode[data-repeat-mode="all"],
.mini-transport.mini-mode[data-repeat-mode="one"]{color:#9bbce2}
.mini-transport.mini-mode[aria-pressed="true"] svg,
.mini-transport.mini-mode[data-repeat-mode="all"] svg,
.mini-transport.mini-mode[data-repeat-mode="one"] svg{opacity:1}
.mini-transport.mini-mode .mini-repeat-one,
.mini-transport.mini-mode[data-repeat-mode="one"] .mini-repeat-all{display:none}
.mini-transport.mini-mode[data-repeat-mode="one"] .mini-repeat-one{display:block}
/* hover / focus: keep the state colour, only lift it slightly (no bright text colour, no circle) */
.mini-transport.mini-mode:hover,
.mini-transport.mini-mode:focus-visible{background:transparent}
.mini-transport.mini-mode:not([aria-pressed="true"]):not([data-repeat-mode="all"]):not([data-repeat-mode="one"]):hover,
.mini-transport.mini-mode:not([aria-pressed="true"]):not([data-repeat-mode="all"]):not([data-repeat-mode="one"]):focus-visible{color:var(--text-dim)}
.mini-transport.mini-mode[aria-pressed="true"]:hover,
.mini-transport.mini-mode[data-repeat-mode="all"]:hover,
.mini-transport.mini-mode[data-repeat-mode="one"]:hover{color:#9bbce2}
@media (hover:hover) and (pointer:fine){
  .mini-transport.mini-mode:hover svg{opacity:.5}
  .mini-transport.mini-mode[aria-pressed="true"]:hover svg,
  .mini-transport.mini-mode[data-repeat-mode="all"]:hover svg,
  .mini-transport.mini-mode[data-repeat-mode="one"]:hover svg{opacity:1;filter:brightness(1.14)}
}
/* A tap never paints a ring (iOS Safari can report programmatic/tap focus as :focus-visible); a
   hardware keyboard gets the brand ring. */
html:not([data-fq-focus-modality="keyboard"]) .mini-transport.mini-mode:focus,
html:not([data-fq-focus-modality="keyboard"]) .mini-transport.mini-mode:focus-visible{outline:none;box-shadow:none;background:transparent}
html[data-fq-focus-modality="keyboard"] .mini-transport.mini-mode:focus-visible{
  outline:1px solid rgba(151,187,224,.46);
  outline-offset:-5px;
  background:rgba(151,187,224,.08);
}
@media (prefers-reduced-motion:reduce){
  .mini-transport.mini-mode svg{transition:none}
  .mini-transport.mini-mode.pop{animation:none}
}

/* ---- Image loading (2026-09-23) ----
   Featured / album / genre hero: the page's inline style picks the file by pixel ratio with
   image-set() — Hero_1280 on 1x screens (a >= 768 px layout draws the 16:9 hero at most 1120 x 630
   CSS px), Hero_1920 on >= 1.5x screens (phones cover-crop it into the 4:5 frame, ~790 CSS px of image
   width). Only a 1x window narrower than 768 px also needs the 1920 px file for that crop; the page
   supplies it as --fq-hero-2x. (Tablet widths show the image through .featured-media-stage, which
   inherits it.) */
@media (max-width:767px) and (max-resolution:1.49dppx){
  .hero-slide[style*="--fq-hero-2x"]{background-image:var(--fq-hero-2x) !important}
}

/* ---- Shared shell geometry (2026-09-24) ----
   The ONE place the fixed shell header's height is stated. Both shell headers sit at top:0 and do not
   grow with the safe area, so "header bottom" == this height:
   - >= 768 px: the v40 desktop/tablet header (.fq-header-v40, position:fixed), 130 px;
   - <= 767 px: the mobile shell's header (player-system.html shadow root, position:fixed), whose own
     --header-h now reads --fq-shell-mobile-header-h.
   Page content that starts under the header (the Licensing / Help Center hub is the first user) pads
   its first section with --fq-shell-header-h instead of a page-specific number, so a header height
   change moves the header and every first section together. The safe-area insets are exposed with the
   same prefix for side gutters (landscape iPhone) and the bottom dock. */
:root {
  --fq-shell-desktop-header-h: 130px;
  --fq-shell-mobile-header-h: 64px;
  --fq-shell-header-h: var(--fq-shell-desktop-header-h);
  --fq-shell-safe-top: env(safe-area-inset-top, 0px);
  --fq-shell-safe-right: env(safe-area-inset-right, 0px);
  --fq-shell-safe-bottom: env(safe-area-inset-bottom, 0px);
  --fq-shell-safe-left: env(safe-area-inset-left, 0px);
}
@media (max-width: 767px) {
  :root {
    --fq-shell-header-h: var(--fq-shell-mobile-header-h);
  }
}