/* ==========================================================================
   Media Store — Application Shell
   Loaded before main.css. Defines the overall layout chrome.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Shell tokens (extend existing :root)
   -------------------------------------------------------------------------- */
:root {
	/* Sidebar */
	--mst-sidebar-w:          260px;
	--mst-sidebar-w-sm:       72px;
	--mst-sidebar-bg:         #0b0b0e;
	--mst-sidebar-border:     rgba(255,255,255,.05);
	--mst-sidebar-text:       #8888a0;
	--mst-sidebar-text-hover: #e0e0f0;
	--mst-sidebar-active-bg:  rgba(255,255,255,.07);
	--mst-sidebar-active-txt: #f0f0f5;
	--mst-sidebar-hover-bg:   rgba(255,255,255,.04);
	--mst-sidebar-icon-size:  18px;
	--mst-sidebar-transition: 270ms cubic-bezier(.4,0,.2,1);

	/* Topbar */
	--mst-topbar-h:           68px;
	--mst-topbar-bg:          rgba(11,11,14,.92);
	--mst-topbar-border:      rgba(255,255,255,.07);

	/* Search */
	--mst-search-bg:          rgba(255,255,255,.06);
	--mst-search-focus-bg:    rgba(255,255,255,.10);
	--mst-search-border:      rgba(255,255,255,.08);

	/* Override old player padding — now on .mst-main-panel */
	--mst-player-h:           72px;
}

/* --------------------------------------------------------------------------
   2. Body / root overrides for app mode
   -------------------------------------------------------------------------- */
body.mst-app {
	overflow:       hidden;    /* body never scrolls — panel does */
	padding-bottom: 0;         /* override main.css body padding */
}

/* Pre-collapse class applied by inline script to prevent transition on load */
html.mst-sidebar-pre-collapsed #mst-shell {
	--mst-sidebar-current-w: var(--mst-sidebar-w-sm);
}
html.mst-sidebar-pre-collapsed .mst-sidebar {
	width: var(--mst-sidebar-w-sm);
	transition: none;
}
html.mst-sidebar-pre-collapsed .mst-main-panel {
	margin-left: var(--mst-sidebar-w-sm);
	transition: none;
}
html.mst-sidebar-pre-collapsed .mst-sidebar__site-name,
html.mst-sidebar-pre-collapsed .mst-sidebar__section-label,
html.mst-sidebar-pre-collapsed .mst-nav-item__label,
html.mst-sidebar-pre-collapsed .mst-account__name {
	opacity: 0;
	width:   0;
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   3. Application shell — flex row
   -------------------------------------------------------------------------- */
.mst-shell {
	display:    flex;
	height:     100dvh;
	height:     100vh;     /* fallback */
	overflow:   hidden;
	background: var(--mst-bg-base, #0a0a0c);
}

/* --------------------------------------------------------------------------
   4. Sidebar
   -------------------------------------------------------------------------- */
.mst-sidebar {
	position:        fixed;
	inset-block:     0;
	left:            0;
	z-index:         300;
	width:           var(--mst-sidebar-w);
	display:         flex;
	flex-direction:  column;
	background:      var(--mst-sidebar-bg);
	border-right:    1px solid var(--mst-sidebar-border);
	overflow:        hidden;
	transition:      width var(--mst-sidebar-transition),
	                 transform var(--mst-sidebar-transition);
	will-change:     width, transform;
}

/* ── Sidebar head ── */
.mst-sidebar__head {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         0 12px 0 16px;
	height:          var(--mst-topbar-h);
	flex-shrink:     0;
	border-bottom:   1px solid var(--mst-sidebar-border);
}

.mst-sidebar__brand {
	display:         flex;
	align-items:     center;
	gap:             10px;
	text-decoration: none;
	overflow:        hidden;
	min-width:       0;
	flex:            1;
}

/* ── Logo constraints — prevent any size logo from overflowing the sidebar head ── */
.mst-sidebar__logo {
	display:        flex;
	align-items:    center;
	overflow:       hidden;
	max-height:     36px;
	flex-shrink:    0;
}

/* WordPress custom-logo wrapper */
.mst-sidebar__brand .custom-logo-link {
	display:        flex;
	align-items:    center;
	overflow:       hidden;
	max-height:     36px;
	flex-shrink:    0;
}

/* The logo image itself — constrain at both dimensions */
.mst-sidebar__brand img,
.mst-sidebar__brand .custom-logo {
	display:        block;
	max-height:     32px;
	max-width:      calc(var(--mst-sidebar-w) - 90px);
	width:          auto;
	height:         auto;
	object-fit:     contain;
	object-position: left center;
}

.mst-sidebar__logo-icon {
	color:      var(--mst-accent, #5c6ef4);
	flex-shrink: 0;
}

.mst-sidebar__site-name {
	font-size:      0.9375rem;
	font-weight:    700;
	color:          var(--mst-sidebar-active-txt);
	letter-spacing: -.02em;
	white-space:    nowrap;
	overflow:       hidden;
	text-overflow:  ellipsis;
	transition:     opacity var(--mst-sidebar-transition),
	                width   var(--mst-sidebar-transition);
}

.mst-sidebar__collapse-btn {
	flex-shrink:  0;
	width:        30px;
	height:       30px;
	border-radius: 6px;
	display:      flex;
	align-items:  center;
	justify-content: center;
	color:        var(--mst-sidebar-text);
	background:   transparent;
	border:       none;
	cursor:       pointer;
	transition:   background 150ms ease, color 150ms ease, transform 200ms ease;
}
.mst-sidebar__collapse-btn:hover {
	background: var(--mst-sidebar-hover-bg);
	color:      var(--mst-sidebar-active-txt);
}
.mst-sidebar__collapse-btn:focus-visible {
	outline: 2px solid var(--mst-accent, #5c6ef4);
	outline-offset: 2px;
}

/* ── Sidebar body ── */
.mst-sidebar__body {
	flex:       1;
	overflow-y: auto;
	overflow-x: hidden;
	padding:    8px 0 16px;
	scrollbar-width: thin;
	scrollbar-color: rgba(255,255,255,.08) transparent;
}
.mst-sidebar__body::-webkit-scrollbar { width: 4px; }
.mst-sidebar__body::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 2px; }

.mst-sidebar__nav {
	padding: 4px 0;
}

.mst-sidebar__nav ul {
	list-style: none;
	margin:     0;
	padding:    0;
}

.mst-sidebar__section {
	margin-top: 16px;
	padding-top: 8px;
	border-top: 1px solid var(--mst-sidebar-border);
}

.mst-sidebar__section-label {
	display:        block;
	padding:        4px 20px 6px;
	font-size:      0.6875rem;
	font-weight:    700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color:          rgba(255,255,255,.22);
	white-space:    nowrap;
	overflow:       hidden;
	transition:     opacity var(--mst-sidebar-transition);
}

/* ── Nav items ── */
.mst-nav-item {
	display: block;
}

.mst-nav-item__link {
	display:     flex;
	align-items: center;
	gap:         11px;
	padding:     9px 20px 9px 18px;
	border-radius: 0;
	color:       var(--mst-sidebar-text);
	text-decoration: none;
	font-size:   0.875rem;
	font-weight: 500;
	transition:  background 140ms ease, color 140ms ease;
	white-space: nowrap;
	overflow:    hidden;
	position:    relative;
}

.mst-nav-item__link:hover {
	background: var(--mst-sidebar-hover-bg);
	color:      var(--mst-sidebar-text-hover);
}

.mst-nav-item--active > .mst-nav-item__link {
	color:      var(--mst-sidebar-active-txt);
	background: var(--mst-sidebar-active-bg);
	font-weight: 600;
}

/* Active indicator bar on left edge */
.mst-nav-item--active > .mst-nav-item__link::before {
	content:          '';
	position:         absolute;
	left:             0;
	top:              6px;
	bottom:           6px;
	width:            3px;
	border-radius:    0 3px 3px 0;
	background:       var(--mst-accent, #5c6ef4);
}

.mst-nav-item__link:focus-visible {
	outline:        2px solid var(--mst-accent, #5c6ef4);
	outline-offset: -2px;
	border-radius:  4px;
}

.mst-nav-item__icon {
	flex-shrink:  0;
	width:        var(--mst-sidebar-icon-size);
	height:       var(--mst-sidebar-icon-size);
	display:      flex;
	align-items:  center;
	justify-content: center;
}

.mst-nav-item__label {
	overflow:     hidden;
	text-overflow: ellipsis;
	transition:   opacity var(--mst-sidebar-transition),
	              width   var(--mst-sidebar-transition);
}

/* Future items */
.mst-nav-item--future > .mst-nav-item__link {
	opacity: 0.55;
	cursor:  default;
	pointer-events: none;
}

/* ── Sidebar foot / account ── */
.mst-sidebar__foot {
	flex-shrink:  0;
	padding:      12px 12px;
	border-top:   1px solid var(--mst-sidebar-border);
}

.mst-account__btn {
	display:      flex;
	align-items:  center;
	gap:          10px;
	width:        100%;
	padding:      8px 10px;
	border-radius: 8px;
	background:   transparent;
	border:       none;
	color:        var(--mst-sidebar-text);
	cursor:       pointer;
	font-size:    0.875rem;
	font-weight:  500;
	text-align:   left;
	transition:   background 140ms ease, color 140ms ease;
	overflow:     hidden;
}
.mst-account__btn:hover {
	background: var(--mst-sidebar-hover-bg);
	color:      var(--mst-sidebar-text-hover);
}
.mst-account__btn:focus-visible {
	outline: 2px solid var(--mst-accent, #5c6ef4);
	outline-offset: 2px;
}

.mst-account__avatar {
	border-radius: 50%;
	flex-shrink:   0;
	width:         32px;
	height:        32px;
	object-fit:    cover;
}

.mst-account__name {
	flex:         1;
	min-width:    0;
	overflow:     hidden;
	text-overflow: ellipsis;
	white-space:  nowrap;
	transition:   opacity var(--mst-sidebar-transition);
}

.mst-account__menu {
	position:     absolute;
	bottom:       calc(100% + 8px);
	left:         8px;
	right:        8px;
	z-index:      400;
	background:   #18181e;
	border:       1px solid rgba(255,255,255,.1);
	border-radius: 10px;
	overflow:     hidden;
	box-shadow:   0 8px 32px rgba(0,0,0,.6);
}

.mst-account { position: relative; }

.mst-account__menu-item {
	display:      flex;
	align-items:  center;
	gap:          10px;
	padding:      11px 16px;
	color:        var(--mst-sidebar-text-hover);
	font-size:    0.875rem;
	text-decoration: none;
	transition:   background 140ms ease;
}
.mst-account__menu-item:hover { background: rgba(255,255,255,.06); }

.mst-account--guest .mst-account__guest-link {
	display:       flex;
	align-items:   center;
	gap:           11px;
	padding:       8px 8px 8px 10px;
	border-radius: 8px;
	color:         var(--mst-sidebar-text);
	font-size:     0.875rem;
	text-decoration: none;
	transition:    background 140ms ease, color 140ms ease;
}
.mst-account--guest .mst-account__guest-link:hover {
	background: var(--mst-sidebar-hover-bg);
	color:      var(--mst-sidebar-text-hover);
}

/* --------------------------------------------------------------------------
   5. Sidebar collapsed state
   -------------------------------------------------------------------------- */
.mst-shell--collapsed .mst-sidebar {
	width: var(--mst-sidebar-w-sm);
}

.mst-shell--collapsed .mst-sidebar__collapse-btn {
	transform: rotate(180deg);
}

.mst-shell--collapsed .mst-sidebar__site-name,
.mst-shell--collapsed .mst-sidebar__section-label,
.mst-shell--collapsed .mst-nav-item__label,
.mst-shell--collapsed .mst-account__name {
	opacity:    0;
	width:      0;
	overflow:   hidden;
	pointer-events: none;
}

/* Centre nav items when collapsed (icon-only) */
.mst-shell--collapsed .mst-nav-item__link {
	padding:         10px;
	justify-content: center;
	gap:             0;
}

.mst-shell--collapsed .mst-sidebar__section-label {
	padding:   4px 0;
}

.mst-shell--collapsed .mst-account__btn {
	padding:         8px;
	justify-content: center;
}

.mst-shell--collapsed .mst-account__menu {
	bottom: auto;
	top:    0;
	left:   calc(100% + 8px);
	right:  auto;
	min-width: 180px;
}

.mst-shell--collapsed .mst-sidebar__head {
	padding:         0 8px;
	justify-content: center;
}
.mst-shell--collapsed .mst-sidebar__brand {
	flex: 0;
}
.mst-shell--collapsed .mst-sidebar__brand .mst-sidebar__site-name { display: none; }
.mst-shell--collapsed .mst-sidebar__brand img,
.mst-shell--collapsed .mst-sidebar__brand .custom-logo {
	max-width:  38px;
	max-height: 28px;
}

/* Tooltip on hover for collapsed nav items */
.mst-shell--collapsed .mst-nav-item { position: relative; }
.mst-shell--collapsed .mst-nav-item:hover::after {
	content:          attr(data-label);
	position:         absolute;
	left:             calc(var(--mst-sidebar-w-sm) + 8px);
	top:              50%;
	transform:        translateY(-50%);
	background:       #18181e;
	color:            #f0f0f5;
	padding:          5px 10px;
	border-radius:    6px;
	font-size:        0.8125rem;
	white-space:      nowrap;
	pointer-events:   none;
	z-index:          500;
	border:           1px solid rgba(255,255,255,.1);
	box-shadow:       0 4px 16px rgba(0,0,0,.4);
}

/* --------------------------------------------------------------------------
   6. Main panel
   -------------------------------------------------------------------------- */
.mst-main-panel {
	flex:            1;
	min-width:       0;
	margin-left:     var(--mst-sidebar-w);
	height:          100dvh;
	height:          100vh;
	display:         flex;
	flex-direction:  column;
	overflow:        hidden;
	transition:      margin-left var(--mst-sidebar-transition);
}

.mst-shell--collapsed .mst-main-panel {
	margin-left: var(--mst-sidebar-w-sm);
}

/* --------------------------------------------------------------------------
   7. Topbar
   -------------------------------------------------------------------------- */
.mst-topbar {
	display:          flex;
	align-items:      center;
	gap:              12px;
	height:           var(--mst-topbar-h);
	padding:          0 16px;
	background:       var(--mst-topbar-bg);
	border-bottom:    1px solid var(--mst-topbar-border);
	backdrop-filter:  blur(16px);
	-webkit-backdrop-filter: blur(16px);
	flex-shrink:      0;
	z-index:          200;
	position:         relative;
}

.mst-topbar__menu-btn {
	display:      none;     /* shown on tablet/mobile */
	flex-shrink:  0;
	width:        38px;
	height:       38px;
	align-items:  center;
	justify-content: center;
	border-radius: 8px;
	border:       none;
	background:   transparent;
	color:        rgba(255,255,255,.6);
	cursor:       pointer;
	transition:   background 140ms ease, color 140ms ease;
}
.mst-topbar__menu-btn:hover {
	background: rgba(255,255,255,.07);
	color:      #f0f0f5;
}
.mst-topbar__menu-btn:focus-visible {
	outline: 2px solid var(--mst-accent, #5c6ef4);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   8. Search bar — pill, in header flex flow
   -------------------------------------------------------------------------- */

/* Search sits as a normal flex item between menu-btn (left) and avatar (right) */
.mst-search {
	flex:      1;
	max-width: 820px;
	margin:    0 auto;
	min-width: 0;
}

/* Pill input bar */
.mst-search__bar {
	display:          flex;
	align-items:      center;
	gap:              10px;
	background:       rgba(255,255,255,.08);
	border:           1px solid rgba(255,255,255,.11);
	border-radius:    999px;
	padding:          0 16px 0 18px;
	height:           44px;
	transition:       background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
	backdrop-filter:  blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.mst-search__bar:focus-within {
	background:   rgba(255,255,255,.13);
	border-color: rgba(255,255,255,.25);
	box-shadow:   0 0 0 4px rgba(255,255,255,.05), 0 8px 32px rgba(0,0,0,.3);
}

.mst-search__icon {
	flex-shrink: 0;
	color:       rgba(255,255,255,.4);
}

.mst-search__input {
	flex:        1;
	min-width:   0;
	background:  none;
	border:      none;
	outline:     none;
	color:       #f0f0f5;
	font-size:   1.0625rem;
	font-family: inherit;
	padding:     0;
	letter-spacing: -.01em;
}
.mst-search__input::placeholder { color: rgba(255,255,255,.3); }
.mst-search__input::-webkit-search-cancel-button { display: none; }

/* Spinner */
.mst-spinner {
	display:          inline-block;
	width:            16px;
	height:           16px;
	border:           2px solid rgba(255,255,255,.15);
	border-top-color: var(--mst-accent, #5c6ef4);
	border-radius:    50%;
	animation:        mst-spin 600ms linear infinite;
}
@keyframes mst-spin { to { transform: rotate(360deg); } }

.mst-search__clear {
	flex-shrink:   0;
	display:       flex;
	align-items:   center;
	justify-content: center;
	width:         24px;
	height:        24px;
	border-radius: 50%;
	border:        none;
	background:    rgba(255,255,255,.1);
	color:         rgba(255,255,255,.55);
	cursor:        pointer;
	transition:    background 140ms ease, color 140ms ease;
}
.mst-search__clear:hover { background: rgba(255,255,255,.18); color: #f0f0f5; }

/* --------------------------------------------------------------------------
   8a–8d. Search panel CSS removed — search is now a dedicated page (search.php).
          Panel, recent, trending, and result CSS live in search-page.css.
   -------------------------------------------------------------------------- */
/* placeholder — keep section number for diff readability */
/* (panel CSS removed — see search-page.css) */

/* --------------------------------------------------------------------------
   9. Filter chips (topbar)
   -------------------------------------------------------------------------- */
.mst-topbar__chips {
	flex-shrink: 0;
}

.mst-chips {
	display:    flex;
	align-items: center;
	gap:        6px;
	flex-wrap:  nowrap;
}

.mst-chip {
	display:       inline-flex;
	align-items:   center;
	padding:       5px 14px;
	border-radius: 999px;
	font-size:     0.8125rem;
	font-weight:   500;
	color:         rgba(255,255,255,.5);
	background:    rgba(255,255,255,.06);
	border:        1px solid transparent;
	text-decoration: none;
	white-space:   nowrap;
	transition:    background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.mst-chip:hover {
	color:      rgba(255,255,255,.85);
	background: rgba(255,255,255,.1);
}
.mst-chip--active {
	color:        var(--mst-accent, #5c6ef4);
	background:   rgba(92,110,244,.14);
	border-color: rgba(92,110,244,.3);
}

/* --------------------------------------------------------------------------
   10. Topbar actions — right-side icon group
   -------------------------------------------------------------------------- */
.mst-topbar__actions {
	flex-shrink: 0;
	display:     flex;
	align-items: center;
	gap:         4px;
}

/* ── Base icon button ── */
.mst-header-btn {
	position:        relative;
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           38px;
	height:          38px;
	border-radius:   50%;
	border:          none;
	background:      transparent;
	color:           rgba(255,255,255,.55);
	cursor:          pointer;
	text-decoration: none;
	flex-shrink:     0;
	transition:      background 150ms ease, color 150ms ease;
}
.mst-header-btn:hover {
	background: rgba(255,255,255,.08);
	color:      rgba(255,255,255,.9);
}
.mst-header-btn:focus-visible {
	outline:        2px solid var(--mst-accent, #5c6ef4);
	outline-offset: 2px;
}

/* ── Badge (count indicator) ── */
.mst-header-btn__badge {
	position:     absolute;
	top:          4px;
	right:        4px;
	min-width:    16px;
	height:       16px;
	border-radius: 999px;
	background:   var(--mst-accent, #5c6ef4);
	color:        #fff;
	font-size:    0.625rem;
	font-weight:  700;
	line-height:  16px;
	text-align:   center;
	padding:      0 4px;
	pointer-events: none;
	border:       2px solid var(--mst-topbar-bg, #0b0b0e);
}

/* ── Thin vertical separator ── */
.mst-header-sep {
	display:      block;
	width:        1px;
	height:       20px;
	background:   rgba(255,255,255,.1);
	margin:       0 6px;
	flex-shrink:  0;
}

/* ── Sign In button (logged-out state) ── */
.mst-header-signin {
	display:         inline-flex;
	align-items:     center;
	padding:         7px 18px;
	border-radius:   999px;
	background:      rgba(255,255,255,.1);
	border:          1px solid rgba(255,255,255,.14);
	color:           #f0f0f5;
	font-size:       0.875rem;
	font-weight:     600;
	text-decoration: none;
	white-space:     nowrap;
	flex-shrink:     0;
	transition:      background 150ms ease, border-color 150ms ease;
}
.mst-header-signin:hover {
	background:   rgba(255,255,255,.16);
	border-color: rgba(255,255,255,.24);
	color:        #fff;
	text-decoration: none;
}
.mst-header-signin:focus-visible {
	outline:        2px solid var(--mst-accent, #5c6ef4);
	outline-offset: 2px;
}

/* ── Avatar button (logged-in state) ── */
.mst-header-avatar-btn {
	padding:   0;
	width:     38px;
	height:    38px;
}
.mst-header-avatar-btn:hover {
	background: transparent;
}
.mst-header-avatar-btn:hover .mst-topbar__avatar-img {
	border-color: rgba(255,255,255,.45);
}

.mst-topbar__avatar-img {
	width:         32px;
	height:        32px;
	border-radius: 50%;
	object-fit:    cover;
	display:       block;
	border:        2px solid rgba(255,255,255,.2);
	transition:    border-color 150ms ease;
}

/* Legacy action-btn kept for backward compat */
.mst-topbar__action-btn {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           38px;
	height:          38px;
	border-radius:   50%;
	color:           rgba(255,255,255,.5);
	transition:      color 140ms ease, background 140ms ease;
}
.mst-topbar__action-btn:hover {
	color:      #f0f0f5;
	background: rgba(255,255,255,.07);
}

/* --------------------------------------------------------------------------
   11. Mobile sidebar overlay
   -------------------------------------------------------------------------- */
.mst-sidebar-overlay {
	display:    none;
	position:   fixed;
	inset:      0;
	z-index:    250;
	background: rgba(0,0,0,.6);
	backdrop-filter:  blur(3px);
	-webkit-backdrop-filter: blur(3px);
	opacity:    0;
	transition: opacity 280ms ease;
}

/* --------------------------------------------------------------------------
   12. Main content area
   -------------------------------------------------------------------------- */
.mst-content {
	flex:       1;
	overflow-y: auto;
	overflow-x: hidden;
	padding-bottom: var(--mst-player-h);
	scrollbar-width: thin;
	scrollbar-color: rgba(255,255,255,.1) transparent;
}
.mst-content::-webkit-scrollbar       { width: 6px; }
.mst-content::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 3px; }

/* --------------------------------------------------------------------------
   13. Minimal content footer
   -------------------------------------------------------------------------- */
.mst-content-footer {
	flex-shrink:  0;
	padding:      16px 24px;
	border-top:   1px solid rgba(255,255,255,.05);
	background:   var(--mst-sidebar-bg);
}

.mst-content-footer__inner {
	display:      flex;
	align-items:  center;
	justify-content: space-between;
	flex-wrap:    wrap;
	gap:          12px;
}

.mst-content-footer__copy {
	font-size:  0.75rem;
	color:      rgba(255,255,255,.3);
	margin:     0;
}

.mst-content-footer__nav-list {
	display:    flex;
	align-items: center;
	gap:        16px;
	list-style: none;
	margin:     0;
	padding:    0;
}

.mst-content-footer__nav-list a {
	font-size:  0.75rem;
	color:      rgba(255,255,255,.3);
	transition: color 140ms ease;
}
.mst-content-footer__nav-list a:hover { color: rgba(255,255,255,.6); }

/* --------------------------------------------------------------------------
   14. Player — pull to bottom of panel
   -------------------------------------------------------------------------- */
#mst-player {
	position:   fixed;
	bottom:     0;
	left:       var(--mst-sidebar-w);
	right:      0;
	z-index:    400;
	transition: left var(--mst-sidebar-transition);
}

.mst-shell--collapsed #mst-player {
	left: var(--mst-sidebar-w-sm);
}

/* --------------------------------------------------------------------------
   15. Skip link
   -------------------------------------------------------------------------- */
.mst-skip-link {
	position:   absolute;
	top:        -100px;
	left:       16px;
	z-index:    9999;
	background: var(--mst-accent, #5c6ef4);
	color:      #fff;
	padding:    8px 16px;
	border-radius: 6px;
	font-size:  0.875rem;
	font-weight: 600;
	text-decoration: none;
	transition: top 150ms ease;
}
.mst-skip-link:focus { top: 16px; }

/* --------------------------------------------------------------------------
   16. Responsive
   -------------------------------------------------------------------------- */

/* ── Tablet: collapse sidebar to icon-only ── */
@media (max-width: 1100px) {
	.mst-shell {
		--mst-sidebar-w: var(--mst-sidebar-w-sm); /* start collapsed */
	}

	.mst-sidebar { width: var(--mst-sidebar-w-sm); }
	.mst-main-panel { margin-left: var(--mst-sidebar-w-sm); }
	#mst-player { left: var(--mst-sidebar-w-sm); }

	.mst-sidebar__site-name,
	.mst-sidebar__section-label,
	.mst-nav-item__label,
	.mst-account__name {
		opacity:  0;
		width:    0;
		overflow: hidden;
	}

	.mst-nav-item__link {
		padding:         10px;
		justify-content: center;
		gap:             0;
	}

	.mst-sidebar__head {
		padding:         0 8px;
		justify-content: center;
	}

	.mst-sidebar__collapse-btn { display: none; }
	.mst-sidebar__brand { flex: 0; }

	/* Expand sidebar on hover (desktop tablet) */
	.mst-sidebar:hover {
		width: var(--mst-sidebar-w);
		box-shadow: 4px 0 24px rgba(0,0,0,.4);
	}

	.mst-sidebar:hover .mst-sidebar__site-name,
	.mst-sidebar:hover .mst-sidebar__section-label,
	.mst-sidebar:hover .mst-nav-item__label,
	.mst-sidebar:hover .mst-account__name {
		opacity: 1;
		width:   auto;
	}

	.mst-sidebar:hover .mst-nav-item__link {
		padding:         9px 20px 9px 18px;
		justify-content: flex-start;
		gap:             11px;
	}

	.mst-sidebar:hover .mst-sidebar__head {
		padding:         0 12px 0 16px;
		justify-content: space-between;
	}

	.mst-sidebar:hover .mst-sidebar__brand { flex: 1; }
}

/* ── Tablet: show topbar menu button, compact right zone ── */
@media (max-width: 1100px) {
	.mst-topbar__menu-btn { display: flex; }
	.mst-topbar__actions  { gap: 2px; }
	.mst-header-sep       { margin: 0 4px; }
}

/* ── Mobile: sidebar off-canvas ── */
@media (max-width: 768px) {
	.mst-sidebar {
		transform: translateX(-100%);
		width:     var(--mst-sidebar-w) !important;
		box-shadow: none;
	}

	/* Restore label visibility for mobile open state */
	.mst-sidebar .mst-sidebar__site-name,
	.mst-sidebar .mst-sidebar__section-label,
	.mst-sidebar .mst-nav-item__label,
	.mst-sidebar .mst-account__name {
		opacity:  1 !important;
		width:    auto !important;
		overflow: visible !important;
	}

	.mst-sidebar .mst-nav-item__link {
		padding:         9px 20px 9px 18px !important;
		justify-content: flex-start !important;
		gap:             11px !important;
	}

	.mst-sidebar .mst-sidebar__head {
		padding:         0 12px 0 16px !important;
		justify-content: space-between !important;
	}

	.mst-sidebar .mst-sidebar__brand { flex: 1 !important; }

	.mst-sidebar__collapse-btn { display: flex !important; }

	/* Open state */
	.mst-shell--open .mst-sidebar {
		transform:  translateX(0);
		box-shadow: 8px 0 32px rgba(0,0,0,.5);
	}

	.mst-shell--open .mst-sidebar-overlay {
		display:  block;
		opacity:  1;
	}

	/* Main panel uses full width — no margin */
	.mst-main-panel {
		margin-left: 0 !important;
	}

	#mst-player { left: 0 !important; }

	.mst-topbar__menu-btn { display: flex; }

	/* Mobile: tighter topbar spacing */
	.mst-topbar {
		gap:     8px;
		padding: 0 12px;
	}

	/* Notifications hidden on smallest screens to reduce clutter */
	.mst-header-btn--notif { display: none; }

	/* Separator hidden on mobile */
	.mst-header-sep { display: none; }

	/* Sign In becomes icon-only on mobile */
	.mst-header-signin {
		padding:  7px 12px;
		font-size: 0.8125rem;
	}

}

@media (max-width: 380px) {
	/* Very small: only show cart + user, hide Sign In text */
	.mst-header-signin { display: none; }
}

@media (max-width: 480px) {
	.mst-topbar__chips { display: none; }
}