/*
Theme Name: Crateflow
Theme URI: https://github.com/ateezie/crateflow-theme
Author: Alex Thipkhosithkun
Description: Editorial/brutalist block theme for Crateflow — the DJ music sourcing workspace. Ships the Crateflow design system and restyles the DJ Unified Search plugin UI to match.
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 7.4
Version: 1.1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: crateflow
Tags: full-site-editing, block-theme, one-column, custom-colors, editor-style
*/

/* ==========================================================================
   Design tokens
   ========================================================================== */

:root {
	--ink: #11110f;
	--paper: #f2f0e9;
	--acid: #d6ff30;
	--line: rgba(17, 17, 15, .18);
	--muted: #77766f;
	--font-display: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	--font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
	margin: 0;
	color: var(--ink);
	background: var(--paper);
	font-family: var(--font-display);
	-webkit-font-smoothing: antialiased;
}

button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }

/* The block theme wrapper must not constrain the app's full-bleed sections. */
.wp-site-blocks > * { margin-block: 0; }
.crateflow-app-page .wp-block-post-content > * { max-width: none; }

/* ==========================================================================
   Topbar (theme header part)
   ========================================================================== */

.cf-topbar {
	height: 72px;
	display: flex;
	align-items: center;
	padding: 0 3.5vw;
	border-bottom: 1px solid var(--line);
	background: rgba(242, 240, 233, .92);
	position: sticky;
	top: 0;
	z-index: 20;
	backdrop-filter: blur(18px);
}

.cf-brand {
	display: flex;
	align-items: center;
	color: inherit;
	text-decoration: none;
	font-weight: 700;
	letter-spacing: -.04em;
	font-size: 20px;
}

.cf-brand sup {
	color: #76756e;
	font: 500 8px var(--font-mono);
	letter-spacing: .12em;
	margin-left: 7px;
}

.cf-brand-mark {
	width: 31px;
	height: 31px;
	margin-right: 10px;
	border: 2px solid var(--ink);
	border-radius: 50%;
	display: flex;
	align-items: end;
	justify-content: center;
	gap: 2px;
	padding-bottom: 7px;
}

.cf-brand-mark i { display: block; width: 2px; background: var(--ink); height: 8px; }
.cf-brand-mark i:nth-child(2) { height: 14px; }
.cf-brand-mark i:nth-child(3) { height: 11px; }

.cf-nav { display: flex; gap: 32px; margin-left: 9vw; align-self: stretch; }

.cf-nav a, .cf-nav button {
	border: 0;
	background: none;
	text-decoration: none;
	color: #85837c;
	font: 600 10px var(--font-mono);
	letter-spacing: .12em;
	display: flex;
	align-items: center;
	position: relative;
	cursor: pointer;
}

.cf-nav .is-active { color: var(--ink); }
.cf-nav .is-active:after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--ink); }
.cf-nav b { background: var(--ink); color: #fff; border-radius: 20px; padding: 3px 6px; margin-left: 6px; font-size: 8px; }

.cf-companion { margin-left: auto; border: 0; background: transparent; font: 500 9px var(--font-mono); letter-spacing: .09em; }
.cf-companion span {
	display: inline-block; width: 7px; height: 7px; border-radius: 50%;
	background: #7da018; margin-right: 6px; box-shadow: 0 0 0 4px rgba(125, 160, 24, .13);
}

.cf-avatar {
	border: 1px solid var(--ink); border-radius: 50%; width: 34px; height: 34px;
	background: transparent; margin-left: 20px; font: 600 10px var(--font-mono);
}

/* ==========================================================================
   Workflow + footer (theme footer part)
   ========================================================================== */

.cf-workflow {
	background: var(--ink);
	color: var(--paper);
	display: grid;
	grid-template-columns: 1fr 2fr;
	padding: 70px 7vw;
	gap: 7vw;
}

.cf-workflow > div span { color: var(--acid); font: 600 10px var(--font-mono); letter-spacing: .14em; }
.cf-workflow h2 { font-size: 42px; line-height: .95; letter-spacing: -.05em; margin: 22px 0 0; }
.cf-workflow ol {
	list-style: none; padding: 0; margin: 0;
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: #44433e;
}
.cf-workflow li { background: var(--ink); padding: 24px; }
.cf-workflow li b { color: var(--acid); font: 500 9px var(--font-mono); display: block; margin-bottom: 35px; }
.cf-workflow li strong { font-size: 16px; display: block; margin-bottom: 8px; }
.cf-workflow li p { color: #a5a39a; font-size: 12px; line-height: 1.5; margin: 0; }

.cf-footer {
	background: var(--ink);
	color: #85837b;
	padding: 0 7vw 44px;
	font: 400 8px/1.6 var(--font-mono);
	letter-spacing: .04em;
	text-align: center;
}
.cf-footer a { color: #a5a39a; }

/* ==========================================================================
   DJ Unified Search plugin — restyled to the Crateflow system
   Selectors below target the plugin's own .djus-* markup.
   ========================================================================== */

.djus-app { display: block; }

.djus-app h1, .djus-app h2, .djus-app h3 { font-family: var(--font-display); }

.djus-eyebrow,
.djus-live-crate-label,
.djus-spotify-now-label {
	font: 600 9px var(--font-mono);
	letter-spacing: .14em;
	color: #706f68;
	text-transform: uppercase;
}

.djus-status { font: 500 9px var(--font-mono); letter-spacing: .06em; color: var(--muted); }

/* --- Hero ---------------------------------------------------------------- */

.djus-hero {
	padding: 64px 7vw;
	border-bottom: 1px solid var(--line);
	background-image:
		linear-gradient(rgba(17, 17, 15, .045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(17, 17, 15, .045) 1px, transparent 1px);
	background-size: 34px 34px;
}

.djus-hero > h1 {
	font-size: clamp(54px, 6.6vw, 98px);
	line-height: .84;
	letter-spacing: -.075em;
	margin: 26px 0 24px;
	max-width: 900px;
	font-weight: 700;
}

.djus-hero > p {
	max-width: 580px;
	color: #64635d;
	font-size: 17px;
	line-height: 1.6;
	margin-bottom: 34px;
}

/* --- How it works -------------------------------------------------------- */

.djus-howto {
	background: #fff;
	border: 1px solid var(--ink);
	box-shadow: 8px 8px 0 var(--ink);
	padding: 24px 26px;
	max-width: 1080px;
	margin-bottom: 40px;
}

.djus-howto-title { font: 700 9px var(--font-mono); letter-spacing: .13em; text-transform: uppercase; margin-bottom: 16px; }
.djus-howto ol { margin: 0; padding-left: 18px; display: grid; gap: 12px; }
.djus-howto li { font-size: 13px; line-height: 1.6; color: #4a4944; }
.djus-howto li strong { font-weight: 700; color: var(--ink); }
.djus-howto li em { font-style: normal; font-family: var(--font-mono); font-size: 11px; }

/* --- Spotify band -------------------------------------------------------- */

.djus-spotify-card {
	background: var(--ink);
	color: #fff;
	padding: 44px 40px;
	margin: 0 0 40px;
	max-width: 1080px;
}

.djus-spotify-card .djus-eyebrow { color: #a9a79f; }
.djus-spotify-head { display: flex; justify-content: space-between; gap: 30px; align-items: flex-start; flex-wrap: wrap; }
.djus-spotify-head h2 { font-size: 34px; letter-spacing: -.05em; margin: 12px 0 9px; }
.djus-spotify-head p { color: #a9a79f; max-width: 560px; line-height: 1.55; font-size: 14px; margin: 0; }

.djus-spotify-instructions,
.djus-spotify-unavailable {
	margin-top: 20px;
	padding: 14px 16px;
	border: 1px solid #494943;
	background: #1d1d1a;
	color: #a9a79f;
	font: 500 11px/1.6 var(--font-mono);
}
.djus-spotify-instructions strong, .djus-spotify-unavailable strong { color: #fff; }
.djus-spotify-instructions em { font-style: normal; color: var(--acid); }

.djus-spotify-connect a,
.djus-spotify-connect button {
	display: inline-block;
	border: 0;
	background: #1ed760;
	color: #08120b;
	padding: 14px 18px;
	font: 800 8px var(--font-mono);
	letter-spacing: .07em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
}
.djus-spotify-connect a:hover, .djus-spotify-connect button:hover { background: #19c256; }

/* Status pill and the secondary "Disconnect" link must not read as the green CTA. */
.djus-spotify-connect { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 18px; }
.djus-spotify-pill {
	display: inline-block; padding: 10px 14px; border: 1px solid #494943;
	color: #a9a79f; background: #1d1d1a;
	font: 700 8px var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
}
.djus-spotify-pill.is-connected { color: #08120b; background: #1ed760; border-color: #1ed760; }
.djus-spotify-connect a.djus-spotify-disconnect {
	background: transparent; color: #a9a79f; padding: 0;
	font: 600 8px var(--font-mono); letter-spacing: .09em; text-decoration: underline;
}
.djus-spotify-connect a.djus-spotify-disconnect:hover { background: transparent; color: #fff; }

.djus-spotify-import,
.djus-spotify-player {
	margin-top: 20px;
	background: #1d1d1a;
	border: 1px solid #494943;
	padding: 20px;
}

.djus-spotify-import-title { font: 700 9px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 8px; }
.djus-spotify-import p { color: #a9a79f; font-size: 13px; line-height: 1.55; margin: 0 0 14px; }
.djus-spotify-import-actions, .djus-spotify-actions { display: flex; gap: 7px; flex-wrap: wrap; }

.djus-spotify-import-actions button,
.djus-spotify-actions button,
.djus-playlist-picker button {
	border: 0;
	background: #fff;
	color: var(--ink);
	padding: 13px 17px;
	font: 800 8px var(--font-mono);
	letter-spacing: .07em;
	text-transform: uppercase;
	cursor: pointer;
}
.djus-spotify-import-actions button:first-child,
.djus-spotify-actions .djus-primary,
.djus-playlist-picker .djus-primary { background: #1ed760; color: #08120b; }

.djus-playlist-picker { display: flex; gap: 7px; margin-top: 10px; flex-wrap: wrap; }
.djus-playlist-select {
	flex: 1; min-width: 200px; background: #11110f; color: #fff;
	border: 1px solid #494943; padding: 12px; font: 500 11px var(--font-mono);
}

.djus-spotify-track { display: flex; justify-content: space-between; gap: 20px; align-items: center; margin: 12px 0 16px; }
.djus-spotify-track-copy { display: grid; gap: 4px; }
.djus-spotify-title { font-size: 17px; font-weight: 700; }
.djus-spotify-artist, .djus-spotify-album { color: #a9a79f; font: 500 10px var(--font-mono); }
.djus-spotify-state { font: 600 8px var(--font-mono); letter-spacing: .1em; color: var(--acid); text-transform: uppercase; }

.djus-spotify-card .djus-status { color: #a9a79f; margin-top: 12px; }

/* --- Pre-connect guidance ------------------------------------------------ */

.djus-preconnect {
	margin-top: 18px;
	padding: 16px 18px;
	border: 1px solid #494943;
	border-left: 3px solid var(--acid);
	background: #1d1d1a;
	color: #a9a79f;
	font-size: 13px;
	line-height: 1.65;
	max-width: 720px;
}
.djus-preconnect strong { color: #fff; }
.djus-preconnect .djus-open-own-app {
	display: inline-block; margin-top: 12px;
	border: 0; background: var(--acid); color: var(--ink);
	padding: 12px 16px; font: 700 8px var(--font-mono);
	letter-spacing: .07em; text-transform: uppercase; cursor: pointer;
}
.djus-preconnect .djus-open-own-app:hover { background: #c8ef27; }
.djus-preconnect-time {
	display: block; margin-top: 8px;
	color: #85837b; font: 400 9px var(--font-mono); letter-spacing: .04em;
}

/* --- Bring-your-own Spotify app ------------------------------------------ */

.djus-own-app { margin-top: 20px; border: 1px solid #494943; background: #1d1d1a; }
.djus-own-app > summary {
	cursor: pointer; padding: 15px 18px; list-style: none;
	font: 700 9px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: #fff;
}
.djus-own-app > summary::-webkit-details-marker { display: none; }
.djus-own-app > summary::before { content: "+ "; color: var(--acid); }
.djus-own-app[open] > summary::before { content: "− "; }
.djus-own-app > summary:hover { color: var(--acid); }

.djus-own-app-body { padding: 4px 18px 20px; border-top: 1px solid #33332f; }
.djus-own-app-body > p { color: #a9a79f; font-size: 13px; line-height: 1.6; max-width: 640px; }

.djus-own-app-steps { color: #a9a79f; font-size: 13px; line-height: 1.7; padding-left: 18px; margin: 14px 0 18px; max-width: 660px; }
.djus-own-app-steps strong { color: #fff; }
.djus-own-app-steps a { color: var(--acid); }
.djus-redirect-uri {
	display: inline-block; margin-top: 6px; padding: 8px 10px;
	background: #11110f; border: 1px solid #494943; color: var(--acid);
	font: 500 11px var(--font-mono); word-break: break-all;
}

.djus-own-app-form .djus-label { color: #fff; margin-top: 12px; }
.djus-own-app-form input {
	width: 100%; max-width: 520px; display: block;
	background: #11110f; border: 1px solid #494943; color: #fff;
	padding: 12px 14px; font: 500 12px var(--font-mono); outline: 0;
}
.djus-own-app-form input:focus { border-color: var(--acid); }

.djus-own-app-actions { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.djus-own-app-actions button {
	border: 1px solid #494943; background: transparent; color: #fff;
	padding: 13px 17px; font: 700 8px var(--font-mono);
	letter-spacing: .07em; text-transform: uppercase; cursor: pointer;
}
.djus-own-app-actions .djus-primary { background: #1ed760; color: #08120b; border-color: #1ed760; }
.djus-own-app-actions button:disabled { opacity: .5; cursor: wait; }

.djus-own-app-req {
	border-left: 3px solid var(--acid); padding: 2px 0 2px 12px;
	color: #c9c7bf; font-size: 13px; line-height: 1.6; max-width: 640px;
}
.djus-own-app-req strong { color: #fff; }
.djus-own-app-note { color: #85837b; font: 400 10px/1.6 var(--font-mono); margin: 16px 0 0; max-width: 660px; }
.djus-own-app-status { margin-top: 10px; color: #a9a79f; }
.djus-inline-link { color: var(--acid); }

/* --- SoundCloud card ----------------------------------------------------- */

.djus-soundcloud-card {
	background: #fff;
	border: 1px solid var(--ink);
	box-shadow: 8px 8px 0 var(--ink);
	padding: 30px 32px;
	max-width: 1080px;
	margin: 0 0 40px;
}

.djus-soundcloud-card h2 { font-size: clamp(26px, 3vw, 34px); letter-spacing: -.05em; margin: 12px 0 10px; }
.djus-soundcloud-card > p { color: #64635d; font-size: 15px; line-height: 1.6; max-width: 700px; margin: 0 0 20px; }
.djus-soundcloud-card .djus-eyebrow span { color: #ff5500; }

.djus-sc-row { display: flex; }
.djus-sc-url {
	flex: 1; min-width: 0; height: 58px; border: 1px solid var(--ink); border-right: 0;
	background: #f7f5ef; padding: 0 16px; font: 500 13px var(--font-mono); outline: 0;
}
.djus-sc-url:focus { background: #fff; }
.djus-sc-load {
	border: 1px solid var(--ink); background: #ff5500; color: #fff;
	padding: 0 22px; font: 700 9px var(--font-mono); letter-spacing: .08em;
	text-transform: uppercase; cursor: pointer; white-space: nowrap;
}
.djus-sc-load:hover { background: #e64d00; }

.djus-sc-note { color: var(--muted); font: 500 9px/1.6 var(--font-mono); margin: 12px 0 0; max-width: 720px; }
.djus-sc-status { margin-top: 10px; }

.djus-sc-player { margin-top: 20px; border: 1px solid var(--line); line-height: 0; }
.djus-sc-player iframe { display: block; width: 100%; border: 0; }

.djus-sc-actions { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.djus-sc-actions button {
	border: 1px solid var(--ink); background: transparent; padding: 14px 18px;
	font: 700 9px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
}
.djus-sc-actions .djus-primary { background: #ff5500; color: #fff; border-color: #ff5500; }
.djus-sc-actions .djus-primary:hover { background: #e64d00; }
.djus-sc-actions button:disabled { opacity: .45; cursor: not-allowed; }

/* --- Live crate bar ------------------------------------------------------ */

.djus-live-crate {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	max-width: 1080px;
	border: 1px solid var(--ink);
	background: #fff;
	padding: 18px 22px;
	margin-bottom: 26px;
}
.djus-live-crate > div { display: grid; gap: 5px; }
.djus-live-crate-count { font-size: 22px; font-weight: 700; letter-spacing: -.03em; }
.djus-live-crate-note { color: var(--muted); font: 500 9px var(--font-mono); }
.djus-open-crate {
	border: 1px solid var(--ink); background: var(--acid);
	padding: 13px 18px; font: 700 8px var(--font-mono);
	letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
}
.djus-open-crate:hover { background: #c8ef27; }

/* --- Source console: tabs + panels --------------------------------------- */

.djus-tabs, .djus-panel.is-active { max-width: 1080px; }

.djus-tabs {
	display: flex;
	gap: 3px;
	background: #e8e5dd;
	padding: 4px;
	margin-bottom: 0;
	border: 1px solid var(--ink);
	border-bottom: 0;
}
.djus-tabs button {
	flex: 1; border: 0; background: transparent; padding: 14px;
	font: 700 9px var(--font-mono); letter-spacing: .08em;
	text-transform: uppercase; cursor: pointer;
}
.djus-tabs button.is-active { background: var(--ink); color: #fff; }

.djus-panel { display: none; }
.djus-panel.is-active {
	display: block;
	background: #fff;
	border: 1px solid var(--ink);
	box-shadow: 8px 8px 0 var(--ink);
	padding: 20px;
	margin-bottom: 30px;
}

.djus-mode-help {
	font: 500 11px/1.65 var(--font-mono);
	color: var(--muted);
	border-left: 3px solid var(--acid);
	padding: 4px 0 4px 12px;
	margin-bottom: 16px;
}
.djus-mode-help strong { color: var(--ink); }

/* Single-track search bar */
.djus-search-row {
	height: 66px;
	display: flex;
	align-items: center;
	background: #fff;
	border: 1px solid var(--ink);
}
.djus-query { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 17px; padding: 0 18px; }
.djus-search-row button {
	align-self: stretch; width: 168px; border: 0; border-left: 1px solid var(--ink);
	background: var(--acid); font: 700 10px var(--font-mono); letter-spacing: .1em;
	text-transform: uppercase; cursor: pointer;
}
.djus-search-row button:hover { background: #c8ef27; }

.djus-chips { display: flex; gap: 7px; margin-top: 14px; flex-wrap: wrap; }
.djus-chips button {
	background: transparent; border: 1px solid var(--line); padding: 9px 12px;
	font: 500 8px var(--font-mono); letter-spacing: .06em;
	text-transform: uppercase; cursor: pointer;
}
.djus-chips button.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* Bulk builder */
.djus-label { display: block; font: 700 8px var(--font-mono); letter-spacing: .11em; text-transform: uppercase; margin: 4px 0 8px; }
.djus-format-hint { font: 500 9px/1.6 var(--font-mono); color: var(--muted); margin-bottom: 10px; }
.djus-format-hint code { background: #f0eee7; padding: 2px 5px; }
.djus-bulk-list {
	width: 100%; min-height: 174px; border: 1px solid var(--ink); background: #f7f5ef;
	padding: 15px; resize: vertical; font: 500 12px/1.75 var(--font-mono); outline: 0;
}
.djus-bulk-actions { display: flex; justify-content: space-between; gap: 9px; margin-top: 10px; flex-wrap: wrap; }
.djus-bulk-actions button,
.djus-export-actions button {
	border: 1px solid var(--ink); background: transparent; padding: 13px 18px;
	font: 700 9px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
}
.djus-bulk-actions .djus-primary,
.djus-export-actions button:first-child { background: var(--acid); }

/* --- Provider strip ------------------------------------------------------ */

.djus-provider-strip { display: flex; align-items: center; gap: 20px; margin-top: 18px; flex-wrap: wrap; }
.djus-provider-strip > span { font: 600 8px var(--font-mono); letter-spacing: .13em; color: #8b8982; text-transform: uppercase; }
.djus-provider-strip a {
	text-decoration: none; color: var(--ink);
	font: 600 9px var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
}
.djus-provider-strip a:hover { text-decoration: underline; }
.djus-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }
.djus-dot.beatport { background: #00ad68; }
.djus-dot.traxsource { background: #e74356; }
.djus-dot.bandcamp { background: #56a8bd; }
.djus-dot.soundcloud { background: #ff5c22; }

/* --- Results: track grid ------------------------------------------------- */

.djus-results { max-width: 1320px; margin: 18px auto 0; }
.djus-results:not(:empty) { border-top: 1px solid var(--ink); }

.djus-track {
	min-height: 110px;
	display: grid;
	grid-template-columns: 42px 74px minmax(240px, 1.5fr) 64px 64px 130px 130px 42px 126px;
	gap: 14px;
	align-items: center;
	border-bottom: 1px solid var(--line);
	transition: .15s;
}
.djus-track:hover { background: rgba(255, 255, 255, .55); padding-inline: 8px; }

.djus-play {
	width: 32px; height: 32px; padding-left: 5px; border: 1px solid var(--line);
	border-radius: 50%; background: transparent; font-size: 10px; cursor: pointer;
}

.djus-art { width: 64px; height: 64px; display: grid; place-items: center; overflow: hidden; position: relative; }
.djus-art:before, .djus-art:after {
	content: ""; position: absolute; border: 1px solid rgba(255, 255, 255, .6);
	border-radius: 50%; width: 52px; height: 52px;
}
.djus-art:after { width: 22px; height: 22px; background: rgba(0, 0, 0, .25); border-color: transparent; }
.djus-art span { position: relative; z-index: 1; color: #fff; font: 700 9px var(--font-mono); }
.djus-art.coral  { background: linear-gradient(135deg, #ff6f52, #5c1515); }
.djus-art.violet { background: linear-gradient(135deg, #421d6b, #cb98ff); }
.djus-art.lime   { background: linear-gradient(135deg, #1b3513, #a8d825); }
.djus-art.blue   { background: linear-gradient(135deg, #13214d, #75a6ff); }
.djus-art.amber  { background: linear-gradient(135deg, #572d09, #ffb93f); }
.djus-art.green  { background: linear-gradient(135deg, #083f39, #5ed5ae); }

.djus-source { font: 600 7px var(--font-mono); letter-spacing: .08em; margin-bottom: 8px; text-transform: uppercase; }
.djus-track-main h3 { font-size: 15px; margin: 0 0 6px; font-weight: 700; letter-spacing: -.02em; }
.djus-track-main h3 span { color: #77756f; font-weight: 400; }
.djus-track-main p { font: 500 9px var(--font-mono); margin: 0; color: #6f6d66; }

.djus-data small, .djus-format small {
	display: block; font: 500 7px var(--font-mono); letter-spacing: .08em;
	color: #8a8881; margin-bottom: 5px; text-transform: uppercase;
}
.djus-data strong { font: 600 11px var(--font-mono); }
.djus-data.djus-genre strong { font-size: 9px; }
.djus-format { text-align: right; }
.djus-format strong { display: block; font: 700 12px var(--font-mono); }

.djus-add {
	width: 32px; height: 32px; border: 1px solid var(--ink);
	background: transparent; font-size: 20px; line-height: 1; cursor: pointer;
}
.djus-add:hover { background: var(--acid); }

.djus-source-link {
	border: 1px solid var(--ink); color: var(--ink); text-decoration: none; text-align: center;
	padding: 11px 7px; font: 600 7px var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
}
.djus-source-link:hover { background: var(--ink); color: #fff; }

/* --- Smart Crate --------------------------------------------------------- */

.djus-crate { padding: 66px 6vw 76px; background: #fff; border-top: 1px solid var(--ink); }

.djus-crate-head {
	max-width: 1260px; margin: auto; display: flex;
	justify-content: space-between; gap: 30px; align-items: end; flex-wrap: wrap;
}
.djus-crate-head h2 { font-size: clamp(32px, 4vw, 48px); letter-spacing: -.06em; margin: 16px 0 8px; }
.djus-crate-intro { color: var(--muted); max-width: 650px; line-height: 1.55; font-size: 14px; margin: 0; }

.djus-strategy { display: flex; background: #eae7df; padding: 4px; }
.djus-strategy button {
	border: 0; background: transparent; padding: 13px 15px;
	font: 700 8px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
}
.djus-strategy button.is-active { background: var(--ink); color: #fff; }

.djus-strategy-help,
.djus-match-help {
	max-width: 1260px; margin: 26px auto 0;
	font: 500 10px/1.7 var(--font-mono); color: var(--muted);
}
.djus-strategy-help { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.djus-strategy-help > div { border-left: 3px solid var(--acid); padding-left: 12px; }
.djus-strategy-help strong, .djus-match-help strong { display: block; color: var(--ink); margin-bottom: 4px; }
.djus-match-help strong { display: inline; }

.djus-summary {
	max-width: 1260px; margin: 30px auto 18px;
	display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--ink);
}
.djus-stat { padding: 20px; border-right: 1px solid var(--ink); }
.djus-stat:last-child { border-right: 0; }
.djus-stat strong { display: block; font-size: 27px; letter-spacing: -.03em; }
.djus-stat span { display: block; color: var(--muted); font: 600 8px var(--font-mono); letter-spacing: .09em; margin-top: 4px; text-transform: uppercase; }

.djus-track-comparisons { max-width: 1260px; margin: 26px auto 0; border-top: 1px solid var(--ink); }

.djus-compare-track {
	display: grid;
	grid-template-columns: minmax(200px, .72fr) minmax(500px, 1.28fr);
	gap: 25px; padding: 20px 0; border-bottom: 1px solid var(--line);
}
.djus-compare-title { display: flex; gap: 16px; align-items: flex-start; }
.djus-compare-title > span {
	background: var(--paper); border-radius: 50%; min-width: 32px; height: 32px;
	display: grid; place-items: center; font: 600 9px var(--font-mono);
}
.djus-compare-title strong { font-size: 16px; letter-spacing: -.02em; }

.djus-retailer-options { display: grid; gap: 6px; }
.djus-retailer-option {
	display: grid; grid-template-columns: 20px minmax(160px, 1fr) 64px 68px;
	gap: 10px; align-items: center; border: 1px solid var(--line); padding: 10px 12px; cursor: pointer;
}
.djus-retailer-option.is-selected { border: 2px solid var(--ink); padding: 9px 11px; background: #f8f7f2; }
.djus-retailer-option input { accent-color: var(--ink); }
.djus-option-main { display: grid; gap: 3px; }
.djus-option-store { font-weight: 700; font-size: 14px; }
.djus-option-meta { color: var(--muted); font: 500 8px var(--font-mono); }
.djus-option-price { font: 700 12px var(--font-mono); text-align: right; }
.djus-option-link { color: var(--ink); font: 700 8px var(--font-mono); text-transform: uppercase; text-decoration: none; }
.djus-option-link:hover { text-decoration: underline; }
.djus-no-options { color: var(--muted); font: 500 10px var(--font-mono); }
.djus-compare-track.is-unmatched { background: #fbf7f1; }
.djus-retailer-option input { width: 18px; height: 18px; margin: 0; }

/* Disabled / busy states carried over from the plugin stylesheet. */
.djus-cart-btn[disabled],
.djus-export-actions button[disabled],
.djus-bulk-actions button[disabled] { opacity: .45; cursor: not-allowed; }
.djus-spotify-actions button:disabled,
.djus-spotify-import-actions button:disabled,
.djus-playlist-picker button:disabled { opacity: .5; cursor: wait; }

/* Retailer batches */
.djus-cart-heading {
	max-width: 1260px; margin: 40px auto 16px; display: flex;
	justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap;
}
.djus-cart-heading h3 { font-size: 26px; letter-spacing: -.04em; margin: 10px 0 0; }
.djus-cart-heading > span { color: var(--muted); font: 500 9px var(--font-mono); }

.djus-store-groups { max-width: 1260px; margin: auto; display: grid; gap: 14px; }
.djus-store { border: 1px solid var(--ink); }
.djus-store-head {
	display: flex; justify-content: space-between; align-items: center; gap: 20px;
	padding: 18px 20px; border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
.djus-store-name { font-size: 18px; font-weight: 700; letter-spacing: -.03em; }
.djus-store-sub { color: var(--muted); font: 500 8px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; margin-top: 4px; }
.djus-store-total { display: flex; align-items: center; gap: 16px; }
.djus-store-total strong { font: 700 18px var(--font-mono); }
.djus-cart-btn {
	border: 1px solid var(--ink); background: var(--acid); padding: 12px 16px;
	font: 700 8px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
}
.djus-store-tracks { padding: 4px 20px 12px; }
.djus-track-row { display: flex; justify-content: space-between; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.djus-track-row:last-child { border-bottom: 0; }
.djus-track-query { font-size: 14px; font-weight: 500; }
.djus-track-row .djus-meta, .djus-track-choice { color: var(--muted); font: 500 9px/1.6 var(--font-mono); }
.djus-track-choice { text-align: right; }
.djus-track-link { color: var(--ink); font-weight: 700; text-decoration: none; text-transform: uppercase; font-size: 8px; }

.djus-unmatched-wrap { max-width: 1260px; margin: 30px auto 0; }
.djus-unmatched-wrap h3 { font-size: 20px; letter-spacing: -.03em; }
.djus-unmatched-item { font: 500 10px var(--font-mono); color: var(--muted); padding: 8px 0; border-bottom: 1px solid var(--line); }

.djus-export-actions { display: flex; gap: 8px; max-width: 1260px; margin: 26px auto 0; flex-wrap: wrap; }

/* --- Crate drawer -------------------------------------------------------- */

.djus-drawer-backdrop {
	position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, .45);
	backdrop-filter: blur(4px); display: flex; justify-content: flex-end;
}
.djus-drawer {
	width: min(520px, 92vw); height: 100%; background: var(--paper);
	padding: 50px 40px 28px; box-shadow: -18px 0 50px rgba(0, 0, 0, .22);
	position: relative; display: flex; flex-direction: column;
}
.djus-drawer-close { position: absolute; right: 28px; top: 24px; border: 0; background: transparent; font-size: 32px; cursor: pointer; line-height: 1; }
.djus-drawer h2 { font-size: clamp(32px, 5vw, 48px); letter-spacing: -.06em; margin: 24px 0 4px; }
.djus-drawer-sub { color: var(--muted); margin: 0 0 28px; font: 500 10px var(--font-mono); }
.djus-crate-items { border-top: 1px solid var(--ink); overflow: auto; flex: 1; }
.djus-crate-item { display: grid; grid-template-columns: 35px 1fr auto; padding: 17px 0; border-bottom: 1px solid var(--line); align-items: center; }
.djus-crate-item > b { font: 500 9px var(--font-mono); color: #88867f; }
.djus-crate-item div { display: flex; flex-direction: column; gap: 4px; }
.djus-crate-item strong { font-size: 14px; }
.djus-crate-item small { font: 500 8px var(--font-mono); color: var(--muted); }
.djus-crate-item button { border: 0; background: transparent; font: 600 7px var(--font-mono); cursor: pointer; color: var(--muted); text-transform: uppercase; }
.djus-drawer-empty { padding: 42px 20px; color: var(--muted); font: 500 11px var(--font-mono); text-align: center; }

/* --- Legal note + toast -------------------------------------------------- */

.djus-note {
	background: var(--ink); color: #85837b;
	padding: 40px 7vw; font: 400 9px/1.7 var(--font-mono); text-align: center;
}
.djus-note strong { color: var(--paper); }
.djus-note-detail { display: block; margin-top: 10px; color: #6d6b64; }

.djus-toast {
	position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 80;
	background: var(--ink); color: #fff; padding: 13px 20px;
	font: 500 9px var(--font-mono); box-shadow: 5px 5px 0 var(--acid); max-width: 90vw;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1000px) {
	.djus-track { grid-template-columns: 42px 64px 1fr 50px 50px 42px 116px; }
	.djus-genre, .djus-format { display: none; }
	.cf-workflow { grid-template-columns: 1fr; }
	.cf-companion { display: none; }
	.djus-compare-track { grid-template-columns: 1fr; }
	.djus-strategy-help { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
	.cf-topbar { padding: 0 18px; }
	.cf-nav { margin-left: auto; gap: 16px; }
	.cf-nav a:nth-of-type(2), .cf-avatar { display: none; }
	.cf-brand { font-size: 15px; }
	.cf-brand-mark { width: 26px; height: 26px; }
	.cf-workflow { padding: 52px 20px; }
	.cf-workflow ol { grid-template-columns: 1fr; }

	.djus-hero { padding: 42px 18px; }
	.djus-hero > h1 { font-size: 52px; }
	.djus-hero > p { font-size: 14px; }
	.djus-spotify-card { padding: 32px 20px; }
	.djus-spotify-head h2 { font-size: 26px; }
	.djus-tabs { display: grid; }
	.djus-search-row { height: auto; display: grid; }
	.djus-query { height: 60px; font-size: 14px; }
	.djus-search-row button { width: 100%; height: 50px; border-left: 0; border-top: 1px solid var(--ink); }
	.djus-panel.is-active { padding: 14px; box-shadow: 5px 5px 0 var(--ink); }
	.djus-bulk-actions { display: grid; }
	.djus-bulk-actions button { width: 100%; }
	.djus-track { grid-template-columns: 34px 54px 1fr 38px; gap: 9px; min-height: 92px; }
	.djus-art { width: 50px; height: 50px; }
	.djus-data, .djus-source-link { display: none; }
	.djus-track-main h3 { font-size: 13px; }
	.djus-crate { padding: 50px 18px; }
	.djus-crate-head { display: block; }
	.djus-strategy { margin-top: 20px; }
	.djus-strategy button { flex: 1; }
	.djus-summary { grid-template-columns: 1fr 1fr; }
	.djus-stat:nth-child(2) { border-right: 0; }
	.djus-stat:nth-child(-n+2) { border-bottom: 1px solid var(--ink); }
	.djus-retailer-option { grid-template-columns: 20px 1fr auto; }
	.djus-option-link { grid-column: 2 / -1; }
	.djus-drawer { padding: 42px 22px 20px; }
	.djus-export-actions { display: grid; }
}

@media (prefers-reduced-motion: reduce) {
	* { scroll-behavior: auto !important; transition: none !important; }
}