/* =============================================================================
   Header Component — YouTube-style layout
   ============================================================================= */

:root {
  --header-height: 72px;          /* tall header — gives logo maximum presence */
  --header-bg:     #ffffff;
  --header-border: #e5e5e5;
  --header-icon:   #0f0f0f;
  --header-icon-muted: #606060;
  --sidebar-width-collapsed: 64px;
  --sidebar-width-expanded:  240px;
}

/* ── Base shell ─────────────────────────────────────────────────────────────── */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-height);
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
  box-shadow: 0 1px 4px rgba(0,0,0,.07);
  /* Must be above hero slides, sidebar (z-index: 200) and any page content.
     Dropdowns inside the header use z-index: 500 so they clear hero content. */
  z-index: 1000;
  transition: box-shadow var(--transition-normal);
}

/* Clip the header inner content to its height so nothing overflows below */
.header__inner {
  /* Do NOT set overflow:hidden here — it would clip the notification and profile dropdowns */
}

.header--compact {
  box-shadow: var(--shadow-sm);
}

/* Full-width inner — no container max-width, just horizontal padding */
.header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--space-4);
  gap: var(--space-4);
}

/* ── LEFT: hamburger + logo ─────────────────────────────────────────────────── */
/* ── LEFT: hamburger + logo ─────────────────────────────────────────────────── */
.header__left {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex: 0 0 auto;
}

/* Hide merch pill text on small screens, keep icon */
@media (max-width: 640px) {
  .header__merch-pill span { display: none; }
  .header__merch-pill { padding: 0 var(--space-3); }
}

/* Hamburger */
.header__menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--header-icon);
  background: transparent;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition-fast);
}
.header__menu:hover {
  background: rgba(0,0,0,.08);
}

/* Logo */
.header__logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  padding: 0 var(--space-2);
  height: var(--header-height);  /* fill the full header height */
  margin-left: var(--space-3);   /* push logo slightly right from hamburger */
}
.header__logo img {
  height: 22px !important;
  max-height: 22px !important;
  width: auto !important;
  max-width: 110px !important;
  display: block;
  object-fit: contain;
  min-width: 0;
}
.header__logo-fallback {
  display: none;
  align-items: center;
  gap: var(--space-2);
  color: var(--header-icon);
  font-size: var(--font-size-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* ── CENTER: search bar + mic ───────────────────────────────────────────────── */
.header__center {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 640px;
  margin-inline: auto;
}

.header__search-group {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
}

/* Search wrapper holds input + search button together */
.search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  border: 1px solid #ccc;
  border-radius: var(--radius-full);
  overflow: visible;
  background: #fff;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.search-wrapper:focus-within {
  border-color: #1c62b9;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
}

#search-input {
  flex: 1 1 auto;
  background: transparent;
  border: none;
  border-radius: var(--radius-full) 0 0 var(--radius-full);
  color: var(--header-icon);
  padding: 0 var(--space-4);
  height: 40px;
  font-size: var(--font-size-sm);
  width: 100%;
  min-width: 0;
  outline: none;
}
#search-input::placeholder {
  color: var(--header-icon-muted);
}

/* Search submit button — right side of the bar */
.header__search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 40px;
  background: #f8f8f8;
  border: none;
  border-left: 1px solid #ccc;
  border-radius: 0 var(--radius-full) var(--radius-full) 0;
  color: var(--header-icon-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.header__search-btn:hover {
  background: #e8e8e8;
  color: var(--header-icon);
}

/* Mic button — standalone pill */
.header__mic-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f2f2f2;
  border: none;
  color: var(--header-icon);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition-fast);
}
.header__mic-btn:hover {
  background: #e5e5e5;
}

/* Search dropdown (results) */
.search-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--color-base);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  z-index: 400;
  max-height: 480px;
  overflow-y: auto;
  border: 1px solid var(--header-border);
}

/* ── RIGHT: create + bell + avatar ─────────────────────────────────────────── */
.header__right {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex: 0 0 auto;
}

/* Merch pill — earthy brown, sits between search and icon group */
.header__merch-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 var(--space-4);
  height: 34px;
  border-radius: var(--radius-full);
  background: #6b0f2b;
  color: #fff;
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: .02em;
  transition: background var(--transition-fast), transform var(--transition-fast);
  flex-shrink: 0;
  margin-right: var(--space-6); /* clear visual gap before the icon group */
  position: relative;
}
/* Subtle vertical divider after the pill */
.header__merch-pill::after {
  content: '';
  position: absolute;
  right: calc(-1 * var(--space-4));
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 20px;
  background: rgba(0,0,0,.12);
  pointer-events: none;
}
.header__merch-pill i { font-size: .85rem; }
.header__merch-pill:hover {
  background: #7d1535;
  color: #fff;
  transform: translateY(-1px);
}

/* Keep old .header__action-link for any remaining uses but make it neutral */
.header__action-link {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-3);
  height: 36px;
  border-radius: var(--radius-full);
  color: var(--header-icon);
  font-size: var(--font-size-sm);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition-fast);
}
.header__action-link:hover {
  background: rgba(0,0,0,.08);
  color: var(--header-icon);
}

/* + Create button */
.header__create-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-4);
  height: 36px;
  border-radius: var(--radius-full);
  background: #f2f2f2;
  color: var(--header-icon);
  font-size: var(--font-size-sm);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition-fast);
}
.header__create-btn:hover {
  background: #e5e5e5;
  color: var(--header-icon);
}
.header__create-btn svg {
  flex-shrink: 0;
}

/* Generic icon button (bell, etc.) */
.header__icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--header-icon);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.header__icon-btn:hover {
  background: rgba(0,0,0,.08);
}

/* Notification badge */
.header__badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--radius-full);
  background: var(--color-highlight);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  pointer-events: none;
}

/* User avatar circle */
.header__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-highlight);
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -.01em;
  text-decoration: none;
  flex-shrink: 0;
  transition: opacity var(--transition-fast), box-shadow var(--transition-fast);
  box-shadow: 0 0 0 2px rgba(233,69,96,.25);
}
.header__avatar:hover {
  opacity: 0.9;
  color: #fff;
  box-shadow: 0 0 0 3px rgba(233,69,96,.4);
}
.header__avatar--guest {
  background: transparent;
  color: var(--header-icon);
  width: 36px;
  height: 36px;
  font-size: 1.3rem;
}
.header__avatar--guest:hover {
  background: rgba(0,0,0,.08);
  color: var(--header-icon);
  opacity: 1;
}

/* ── Sidebar — persistent left column (admin-style) ────────────────────────── */
.sidebar {
  position: fixed;
  top: var(--header-height);
  left: 0;
  bottom: 0;
  width: var(--sidebar-width-collapsed);
  background: var(--sidebar-bg, #ffffff);
  border-right: 1px solid #e5e5e5;
  z-index: 200;
  transition: width .2s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
}

/* Expanded state */
.sidebar.is-expanded {
  width: var(--sidebar-width-expanded);
}
/* Pre-expand on page load to match sidebar-open body class (set by inline script before JS loads) */
.sidebar-preexpand #site-sidebar {
  width: var(--sidebar-width-expanded);
}

.sidebar__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: var(--sidebar-width-expanded);
  overflow: hidden;
}

/* Scrollable nav */
.sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 0 0;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent; /* hidden by default */
  transition: scrollbar-color 0.2s ease;
}
/* Show scrollbar only on hover */
.sidebar__nav:hover {
  scrollbar-color: rgba(0,0,0,.15) transparent;
}
.sidebar__nav::-webkit-scrollbar { width: 6px; }
.sidebar__nav::-webkit-scrollbar-track { background: transparent; }
.sidebar__nav::-webkit-scrollbar-thumb { 
  background: transparent; /* hidden by default */
  border-radius: 3px;
  transition: background 0.2s ease;
}
.sidebar__nav:hover::-webkit-scrollbar-thumb { 
  background: rgba(0,0,0,.15); 
}
.sidebar__nav::-webkit-scrollbar-thumb:hover { 
  background: rgba(0,0,0,.25); 
}

/* Section labels — hidden in both collapsed and expanded states.
   They clip at non-standard zoom levels and add visual noise.
   Groups are separated by a divider rule on the first link instead. */
.sidebar__section-label {
  display: none !important;
}

/* Nav links — key: each link is exactly 64px wide when collapsed */
.sidebar__nav a {
  display: flex;
  align-items: center;
  gap: 0;
  /* Collapsed: fixed 64px, icon centered */
  width: var(--sidebar-width-collapsed);
  padding: 10px 0;
  border-radius: 8px;
  color: var(--sidebar-link, #444);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background .15s, color .15s;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  justify-content: center;
}
/* Expanded: full width, left-aligned */
.sidebar.is-expanded .sidebar__nav a {
  width: 100%;
  padding: 10px 12px;
  justify-content: flex-start;
  gap: 14px;
}
.sidebar__nav a i {
  width: 20px;
  min-width: 20px;
  text-align: center;
  font-size: 16px;
  flex-shrink: 0;
  color: #555;
  transition: color .15s;
  /* Ensure icon is always visible in collapsed state */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sidebar__nav a:hover {
  background: rgba(0,0,0,.04);
  color: #111;
}
.sidebar__nav a:hover i { color: var(--color-highlight, #e94560); }

/* Active state — left accent bar + highlight colour, no distracting background */
.sidebar__nav a.active {
  color: var(--sidebar-active, var(--color-highlight, #e94560));
  background: transparent;
  font-weight: 700;
}
.sidebar__nav a.active i {
  color: var(--sidebar-active, var(--color-highlight, #e94560));
}
/* Left accent bar — only visible in collapsed and expanded states */
.sidebar__nav a.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--sidebar-active, var(--color-highlight, #e94560));
}

/* Link label — hidden when collapsed */
.sidebar__link-label {
  transition: opacity .15s, transform .2s ease;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  width: 0;
  max-width: 0;
  visibility: hidden;
  display: inline-block;
  transform: translateX(-6px);
}
.sidebar.is-expanded .sidebar__link-label,
.sidebar-preexpand #site-sidebar .sidebar__link-label {
  opacity: 1;
  width: auto;
  max-width: none;
  visibility: visible;
  flex: 1;
  transform: translateX(0);
}

/* Tooltip on collapsed hover */
.sidebar:not(.is-expanded) .sidebar__nav a[title]:hover::after {
  content: attr(title);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: #1a1a2e;
  color: #fff;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  z-index: 9999;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.sidebar:not(.is-expanded) .sidebar__nav a[title]:hover::before {
  content: '';
  position: absolute;
  left: calc(100% + 4px);
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-right-color: #1a1a2e;
  pointer-events: none;
  z-index: 9999;
}

/* Auth footer */
.sidebar__footer {
  flex-shrink: 0;
  padding: 8px 0 12px;
  border-top: 1px solid #e5e5e5;
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
}
.sidebar__auth-link {
  display: flex;
  align-items: center;
  gap: 0;
  width: var(--sidebar-width-collapsed);
  padding: 10px 0;
  border-radius: 8px;
  color: #555;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background .15s, color .15s;
  white-space: nowrap;
  overflow: hidden;
  justify-content: center;
  position: relative;
}
.sidebar.is-expanded .sidebar__auth-link {
  width: 100%;
  padding: 10px 12px;
  justify-content: flex-start;
  gap: 14px;
}
.sidebar__auth-link i {
  width: 20px;
  min-width: 20px;
  text-align: center;
  font-size: 16px;
  flex-shrink: 0;
  color: #666;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sidebar__auth-link:hover {
  background: rgba(0,0,0,.05);
  color: #111;
}
.sidebar__auth-link--signin {
  color: var(--color-highlight, #e94560);
}
.sidebar__auth-link--signin i { color: var(--color-highlight, #e94560); }
.sidebar__auth-link--signin:hover {
  background: rgba(233,69,96,.06);
}
.sidebar__auth-link--logout { color: #c0392b; }
.sidebar__auth-link--logout i { color: #c0392b; }
.sidebar__auth-link--logout:hover {
  background: rgba(192,57,43,.06);
}

/* ── YouTube-style expanded sidebar ─────────────────────────────────────── */
/* Nav links — icon LEFT + label RIGHT on same row, generous padding */
.sidebar.is-expanded .sidebar__nav a {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  margin: 0;
  padding: 0 16px;
  border-radius: 10px;
  gap: 20px;
  font-size: 14px;
  font-weight: 400;
  color: #0f0f0f;
  line-height: 1;
  height: 40px;
  min-height: 40px;
  box-sizing: border-box;
}
.sidebar.is-expanded .sidebar__nav a i {
  font-size: 15px;
  color: #0f0f0f;
  width: 20px;
  min-width: 20px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sidebar.is-expanded .sidebar__nav a:hover {
  background: rgba(0,0,0,.07);
  color: #0f0f0f;
}
.sidebar.is-expanded .sidebar__nav a:hover i { color: #0f0f0f; }

/* Active — soft grey pill, bold label, no red accent bar */
.sidebar.is-expanded .sidebar__nav a.active {
  background: rgba(0,0,0,.09);
  color: #0f0f0f;
  font-weight: 600;
}
.sidebar.is-expanded .sidebar__nav a.active i { color: #0f0f0f; }
.sidebar.is-expanded .sidebar__nav a.active::before { display: none; }

/* Link label — visible, full width, correct size */
.sidebar.is-expanded .sidebar__link-label {
  font-size: 14px;
  font-weight: inherit;
  opacity: 1;
  width: auto;
  max-width: none;
  visibility: visible;
  transform: none;
  flex: 1;
}

/* Show more button — YouTube style */
.sidebar__show-more-btn {
  display: none; /* hidden when collapsed */
  align-items: center;
  gap: 20px;
  width: 100%;
  padding: 0 16px;
  height: 40px;
  min-height: 40px;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 10px;
  color: #0f0f0f;
  font-size: 14px;
  font-weight: 400;
  text-align: left;
  box-sizing: border-box;
}
.sidebar__show-more-btn i {
  font-size: 16px;
  width: 20px;
  min-width: 20px;
  text-align: center;
  transition: transform .2s;
}
.sidebar__show-more-btn[aria-expanded="true"] i {
  transform: rotate(180deg);
}
.sidebar__show-more-btn:hover {
  background: rgba(0,0,0,.07);
}
/* Only show in expanded state */
.sidebar.is-expanded .sidebar__show-more-btn {
  display: flex;
}
/* More group hidden by default, shown when expanded */
.sidebar__more-group[hidden] { display: none !important; }
.sidebar__more-group { display: flex; flex-direction: column; }


.sidebar.is-expanded .sidebar__auth-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 0 16px;
  border-radius: 10px;
  gap: 20px;
  font-size: 14px;
  height: 40px;
  min-height: 40px;
  box-sizing: border-box;
}
.sidebar.is-expanded .sidebar__auth-link i {
  width: 20px;
  min-width: 20px;
  font-size: 16px;
  text-align: center;
}

/* ── Page body offset — shifts content right to make room for sidebar ───────── */
.page-body {
  padding-top: var(--header-height);
}

/* Content wrapper — default collapsed (64px). Keep its shift animation
   synchronized with the sidebar width transition so heavy pages do not jump
   before the rail finishes expanding. */
.page-content-wrap {
  box-sizing: border-box;
  margin-left: var(--sidebar-width-collapsed);
  max-width: calc(100vw - var(--sidebar-width-collapsed));
  min-height: calc(100vh - var(--header-height));
  /* NOTE: No overflow set here — overflow on this element breaks position:sticky */
  transition: margin-left .2s cubic-bezier(.4,0,.2,1), max-width .2s cubic-bezier(.4,0,.2,1);
}
.page-body.sidebar-open .page-content-wrap {
  margin-left: var(--sidebar-width-expanded);
  max-width: calc(100vw - var(--sidebar-width-expanded));
}

/* ── Generic page content — used on simple pages (saved vidz, watch history, etc.) ── */
/* Mirrors page-content-wrap layout so pages using <main class="page-content"> render
   correctly inside the sidebar + header shell. */
.page-content {
  box-sizing: border-box;
  width: 100%;
  min-height: calc(100vh - var(--header-height));
}

/* Prevent horizontal scroll — DO NOT use overflow on html or body.
   overflow on ANY ancestor of position:sticky elements breaks sticky.
   Horizontal overflow is prevented by max-width: 100vw alone. */
html {
  max-width: 100vw;
}
body {
  max-width: 100vw;
}

/* ── Page-specific sidebar overrides ───────────────────────────────────────── */

/* no-site-sidebar pages (e.g. merch): nav sidebar fully hidden — 0 width, no icons */
.no-site-sidebar .sidebar {
  width: 0 !important;
  overflow: hidden;
  transition: width .2s cubic-bezier(.4,0,.2,1);
}

/* Content takes full width — no left margin from sidebar */
.no-site-sidebar .page-content-wrap {
  margin-left: 0 !important;
  max-width: 100% !important;
  width: 100%;
  /* Remove any top gap — merch page handles its own spacing */
  padding-top: 0;
}
.no-site-sidebar.sidebar-open .page-content-wrap {
  margin-left: 0 !important;
  max-width: 100% !important;
  width: 100%;
}

/* When hamburger opens the sidebar: overlay the content, don't push it */
.no-site-sidebar .sidebar.is-expanded {
  width: var(--sidebar-width-expanded) !important;
  z-index: 400;
  box-shadow: 4px 0 24px rgba(0,0,0,.18);
}

/* ── Community page: keep 64px icon rail but expand as overlay ──────────────
   The community feed is a heavy 3-column CSS grid. Animating margin-left on
   page-content-wrap forces the entire grid to reflow on every frame of the
   200ms transition, causing visible jank. This mode keeps the collapsed rail
   (64px, always visible) but makes the expanded sidebar overlay the content
   at z-index 400 — identical to no-site-sidebar expansion but without hiding
   the collapsed icon rail. ──────────────────────────────────────────────── */
.community-overlay-sidebar .page-content-wrap {
  /* Rail is visible: keep the 64px left offset */
  margin-left: var(--sidebar-width-collapsed) !important;
  max-width: calc(100vw - var(--sidebar-width-collapsed)) !important;
  /* Kill the margin-left transition — content never moves when sidebar expands */
  transition: none !important;
}
.community-overlay-sidebar.sidebar-open .page-content-wrap {
  /* Sidebar is overlaying — content stays at the collapsed offset, never shifts */
  margin-left: var(--sidebar-width-collapsed) !important;
  max-width: calc(100vw - var(--sidebar-width-collapsed)) !important;
  transition: none !important;
}
.community-overlay-sidebar .sidebar.is-expanded {
  /* Expand over the content, not pushing it */
  z-index: 400;
  box-shadow: 4px 0 24px rgba(0,0,0,.18);
}

@media (prefers-reduced-motion: reduce) {
  .sidebar,
  .page-content-wrap,
  .sidebar__nav a,
  .sidebar__auth-link,
  .sidebar__link-label {
    transition: none !important;
  }
}

/* ── Utilities ──────────────────────────────────────────────────────────────── */
.hidden { display: none !important; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
  white-space: nowrap;
}

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .header__create-btn span { display: none; }
  .header__create-btn { width: 40px; padding: 0; justify-content: center; }
}

@media (max-width: 600px) {
  .header__center {
    max-width: none;
  }
  .header__mic-btn { display: none; }
  #search-input { font-size: var(--font-size-xs); }
}

@media (max-width: 480px) {
  .header__inner { padding-inline: var(--space-2); gap: var(--space-2); }
  .header__create-btn { display: none; }
}

/* Mobile search icon button — hidden on desktop, shown via responsive.css on mobile */
.header__mob-search-btn {
  display: none;
}

/* Mobile full-width nav row — hidden on desktop, shown on mobile */
.header__mob-row {
  display: none;
}

/* Mobile overlay header — always styled regardless of viewport */
.mob-nav-overlay__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  min-height: 56px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  flex-shrink: 0;
  background: rgba(0,0,0,.2);
}
.mob-nav-overlay__title {
  font-size: 1.15rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.mob-nav-overlay__title span {
  color: #e94560;
}

/* Mobile overlay close button — always styled, visibility controlled by overlay state */
.mob-nav-overlay__close {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  border: none;
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0 !important;
  transition: background .15s, transform .15s;
}
.mob-nav-overlay__close:hover {
  background: rgba(255,255,255,.25);
  transform: rotate(90deg);
}
.mob-nav-overlay__close svg {
  display: block;
  flex-shrink: 0;
}

/* Vidz quick-access — hidden on desktop (sidebar handles it), shown only on mobile */
.header__vidz-btn {
  display: none;
}

/* Mobile search panel — hidden on desktop */
.mob-search-panel {
  display: none;
}

@media (max-width: 768px) {
  .mob-search-panel {
    display: block;
  }
}
.header__currency {
  position: relative;
}
.header__currency-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 6px;
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease;
  white-space: nowrap;
}
.header__currency-btn:hover { background: rgba(255,255,255,.15); }

.header__currency-drop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
  min-width: 200px;
  max-height: 320px;
  overflow-y: auto;
  z-index: 200;
  display: none;
  padding: 6px;
}
.header__currency-drop.is-open { display: block; }

.header__currency-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: none;
  background: transparent;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #1a1a2e;
  cursor: pointer;
  text-align: left;
  transition: background .15s ease;
}
.header__currency-opt:hover { background: #f4f5f7; }
.header__currency-opt.is-active { background: #1a1a2e; color: #fff; }
.header__currency-opt span { font-size: 0.8rem; color: #999; font-weight: 400; }
.header__currency-opt.is-active span { color: rgba(255,255,255,.6); }

/* =============================================================================
   Header additions — notifications, profile dropdown, cart badge
   ============================================================================= */

/* Hidden badge state */
.header__badge--hidden {
  display: none !important;
}

/* ── Notification dropdown ──────────────────────────────────────────────────── */
.header__notif-wrap,
.header__profile-wrap {
  position: relative;
}

.header__notif-dropdown,
.header__profile-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 40px rgba(0,0,0,.18);
  z-index: 500;
  min-width: 320px;
  max-width: 360px;
  border: 1px solid #eee;
  overflow: hidden;
  animation: dropdownIn .15s ease;
}

@keyframes dropdownIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.header__notif-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid #f0f0f0;
}

.header__notif-title {
  font-size: .9375rem;
  font-weight: 700;
  color: #1a1a2e;
}

.header__notif-mark-all {
  font-size: .75rem;
  font-weight: 600;
  color: var(--color-highlight, #e94560);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.header__notif-mark-all:hover { text-decoration: underline; }

.header__notif-list {
  max-height: 360px;
  overflow-y: auto;
}

.header__notif-empty {
  padding: 24px 16px;
  text-align: center;
  color: #999;
  font-size: .875rem;
}

.header__notif-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background .12s;
  border-bottom: 1px solid #f8f8f8;
  text-decoration: none;
  color: inherit;
}
.header__notif-item:hover { background: #f9f9f9; }
.header__notif-item.is-unread { background: #fff8f9; }
.header__notif-item.is-unread:hover { background: #fff0f2; }

.header__notif-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f2f2f2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
  color: var(--color-highlight, #e94560);
}
.header__notif-item.is-unread .header__notif-icon {
  background: rgba(233,69,96,.1);
}

.header__notif-body { flex: 1; min-width: 0; }
.header__notif-item-title {
  font-size: .8125rem;
  font-weight: 600;
  color: #1a1a2e;
  line-height: 1.35;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.header__notif-item-body {
  font-size: .75rem;
  color: #666;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.header__notif-item-time {
  font-size: .7rem;
  color: #aaa;
  margin-top: 3px;
}

.header__notif-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-highlight, #e94560);
  flex-shrink: 0;
  margin-top: 4px;
}

/* ── Profile dropdown ───────────────────────────────────────────────────────── */
.header__profile-dropdown {
  min-width: 240px;
  max-width: 280px;
  padding-bottom: 8px;
}

.header__profile-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
}

.header__profile-avatar-lg {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-highlight, #e94560);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.header__profile-name {
  font-size: .9rem;
  font-weight: 700;
  color: #1a1a2e;
  line-height: 1.2;
}
.header__profile-email {
  font-size: .75rem;
  color: #888;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

.header__profile-divider {
  height: 1px;
  background: #f0f0f0;
  margin: 4px 0;
}

.header__profile-nav {
  display: flex;
  flex-direction: column;
  padding: 4px 8px;
}

.header__profile-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  font-size: .875rem;
  font-weight: 500;
  color: #333;
  text-decoration: none;
  transition: background .12s;
}
.header__profile-link:hover {
  background: #f5f5f5;
  color: #1a1a2e;
}
.header__profile-link i {
  font-size: 15px;
  color: #888;
  width: 18px;
  text-align: center;
}
.header__profile-link:hover i { color: var(--color-highlight, #e94560); }

.header__profile-badge {
  margin-left: auto;
  background: var(--color-highlight, #e94560);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 99px;
  line-height: 1.6;
}

.header__profile-logout {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  font-size: .875rem;
  font-weight: 600;
  color: var(--color-highlight, #e94560);
  text-decoration: none;
  transition: background .12s;
}
.header__profile-logout:hover { background: #fff5f6; }
.header__profile-logout i { font-size: 15px; }

/* ── Search dropdown enhancements ───────────────────────────────────────────── */
.search-dropdown__trending-section {
  padding: 10px 14px 4px;
}
.search-dropdown__trending-label {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #aaa;
  margin-bottom: 6px;
}
.search-dropdown__category-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: #f2f2f2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
  color: #666;
}
.search-dropdown__section-icon {
  font-size: 11px;
  margin-right: 4px;
  opacity: .7;
}

/* Responsive — hide notifications text on small screens */
@media (max-width: 600px) {
  .header__notif-dropdown,
  .header__profile-dropdown {
    right: -8px;
    min-width: 290px;
  }
}

/* =============================================================================
   Mobile Profile Full-Screen Overlay — white theme
   ============================================================================= */
.profile-mob-panel {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: #fff;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}
.profile-mob-panel.is-open {
  display: flex;
  opacity: 1;
  pointer-events: all;
}

.profile-mob-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  min-height: 56px;
  border-bottom: 1px solid #f0f0f0;
  flex-shrink: 0;
  background: #fff;
}

.profile-mob-panel__title {
  font-size: 1.1rem;
  font-weight: 800;
  color: #1a1a2e;
}

.profile-mob-panel__close {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
  border-radius: 50%;
  background: #f4f4f4;
  border: none;
  color: #333;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0 !important;
  transition: background .15s, transform .15s;
}
.profile-mob-panel__close:hover {
  background: #eaeaea;
  transform: rotate(90deg);
}
.profile-mob-panel__close svg { display: block; flex-shrink: 0; }

.profile-mob-panel__body {
  overflow-y: auto;
  flex: 1;
  -webkit-overflow-scrolling: touch;
}

.profile-mob-panel__divider {
  height: 1px;
  background: #f0f0f0;
  margin: 4px 0;
}

/* Reuse desktop profile link styles inside the panel */
.profile-mob-panel__body .header__profile-info {
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fafafa;
}
.profile-mob-panel__body .header__profile-nav {
  display: flex;
  flex-direction: column;
  padding: 8px 12px;
}
.profile-mob-panel__body .header__profile-link {
  padding: 14px 10px;
  font-size: 1rem;
  border-radius: 10px;
  min-height: unset;
}
.profile-mob-panel__body .header__profile-logout {
  padding: 16px 22px;
  font-size: 1rem;
  border-top: 1px solid #f0f0f0;
  min-height: unset;
}

/* =============================================================================
   Mobile Notification Full-Screen Overlay — white theme
   ============================================================================= */
.notif-mob-panel {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: #fff;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}
.notif-mob-panel.is-open {
  display: flex;
  opacity: 1;
  pointer-events: all;
}

/* Header row */
.notif-mob-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  min-height: 56px;
  border-bottom: 1px solid #f0f0f0;
  flex-shrink: 0;
  background: #fff;
}

.notif-mob-panel__title {
  font-size: 1.1rem;
  font-weight: 800;
  color: #1a1a2e;
  letter-spacing: .01em;
}

.notif-mob-panel__close {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
  border-radius: 50%;
  background: #f4f4f4;
  border: none;
  color: #333;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0 !important;
  transition: background .15s, transform .15s;
}
.notif-mob-panel__close:hover {
  background: #eaeaea;
  transform: rotate(90deg);
}
.notif-mob-panel__close svg {
  display: block;
  flex-shrink: 0;
}

.notif-mob-panel__overlay { display: none; }

.notif-mob-panel__sheet {
  display: contents;
}

.notif-mob-panel__mark-row {
  padding: 10px 20px;
  border-bottom: 1px solid #f0f0f0;
  flex-shrink: 0;
}

.notif-mob-panel__mark-row .header__notif-mark-all {
  color: #e94560;
  font-size: .875rem;
  font-weight: 600;
}

.notif-mob-panel__list {
  overflow-y: auto;
  flex: 1;
  padding: 8px 0;
  -webkit-overflow-scrolling: touch;
}

/* Items inside notification overlay use standard light theme */
.notif-mob-panel__list .header__notif-item {
  border-bottom-color: #f5f5f5;
  color: #1a1a2e;
}
.notif-mob-panel__list .header__notif-item:hover {
  background: #f9f9f9;
}
.notif-mob-panel__list .header__notif-item.is-unread {
  background: #fff8f9;
}
.notif-mob-panel__list .header__notif-item-title {
  color: #1a1a2e;
}
.notif-mob-panel__list .header__notif-item-body,
.notif-mob-panel__list .header__notif-item-time {
  color: #888;
}
.notif-mob-panel__list .header__notif-empty {
  color: #999;
  padding: 40px 20px;
  text-align: center;
  font-size: .9rem;
}