/* ==========================================================================
   Fetish Market Global Design System
   Matches fetish-market.ru/services/ aesthetics with Dark/Light Mode support
   ========================================================================== */

:root,
[data-theme="dark"] {
  /* Color Scheme */
  color-scheme: dark;

  /* Surfaces & Backgrounds */
  --bg: #0f1115;
  --bg-surface: rgba(22, 27, 34, 0.75);
  --bg-surface-hover: rgba(32, 38, 48, 0.9);
  --bg-card: rgba(255, 255, 255, 0.03);
  --bg-card-hover: rgba(255, 255, 255, 0.06);
  --bg-card-solid: #161a22;
  --bg-input: rgba(15, 17, 21, 0.8);
  --bg-input-focus: rgba(20, 24, 31, 0.95);
  --bg-header: rgba(15, 17, 21, 0.85);
  --bg-footer: #0c0e12;
  --bg-photo-placeholder: #1a1e27;

  /* Typography & Inks */
  --ink: #e5e7eb;
  --ink-heading: #ffffff;
  --mut: #9ca3af;
  --dim: #6b7280;

  /* Accent & Gradients (Signature Pink Aesthetic) */
  --acc: #ff2d7d;
  --acc-deep: #d4145a;
  --acc-hover: #ff4791;
  --acc-glow: rgba(255, 45, 125, 0.35);
  --acc-subtle: rgba(255, 45, 125, 0.12);
  --acc-subtle-border: rgba(255, 45, 125, 0.25);
  --acc-gradient: linear-gradient(135deg, #d4145a 0%, #ff2d7d 100%);
  --acc-gradient-hover: linear-gradient(135deg, #e01b63 0%, #ff4791 100%);

  /* Sportscar / Neon Speed Button Accents */
  --btn-shadow: 0 4px 20px rgba(212, 20, 90, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.4);
  --btn-shadow-hover: 0 8px 30px rgba(255, 45, 125, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.6);

  /* Borders & Glassmorphism */
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.15);
  --line-hover: rgba(255, 45, 125, 0.5);
  --glass-blur: blur(14px);

  /* Shadows */
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.5);
  --shadow-hit: 0 0 25px rgba(255, 45, 125, 0.25);

  /* Badges & Alerts */
  --badge-bg: rgba(255, 255, 255, 0.06);
  --badge-border: rgba(255, 255, 255, 0.1);
  --status-ok-bg: rgba(34, 197, 94, 0.12);
  --status-ok-line: rgba(34, 197, 94, 0.3);
  --status-ok-ink: #4ade80;
  --status-warn-bg: rgba(245, 158, 11, 0.12);
  --status-warn-line: rgba(245, 158, 11, 0.3);
  --status-warn-ink: #fbbf24;
  --status-err-bg: rgba(255, 45, 125, 0.12);
  --status-err-line: rgba(255, 45, 125, 0.3);
  --status-err-ink: #ff6097;
}

[data-theme="light"] {
  /* Color Scheme */
  color-scheme: light;

  /* Surfaces & Backgrounds */
  --bg: #f5f6f9;
  --bg-surface: rgba(255, 255, 255, 0.85);
  --bg-surface-hover: rgba(255, 255, 255, 0.98);
  --bg-card: rgba(255, 255, 255, 0.82);
  --bg-card-hover: #ffffff;
  --bg-card-solid: #ffffff;
  --bg-input: #ffffff;
  --bg-input-focus: #ffffff;
  --bg-header: rgba(255, 255, 255, 0.88);
  --bg-footer: #ffffff;
  --bg-photo-placeholder: #edf0f5;

  /* Typography & Inks */
  --ink: #1f242d;
  --ink-heading: #0f1115;
  --mut: #6b7280;
  --dim: #9ca3af;

  /* Accent & Gradients */
  --acc: #d4145a;
  --acc-deep: #b3104b;
  --acc-hover: #ff2d7d;
  --acc-glow: rgba(212, 20, 90, 0.25);
  --acc-subtle: rgba(212, 20, 90, 0.08);
  --acc-subtle-border: rgba(212, 20, 90, 0.2);
  --acc-gradient: linear-gradient(135deg, #d4145a 0%, #ff2d7d 100%);
  --acc-gradient-hover: linear-gradient(135deg, #b3104b 0%, #e01b63 100%);

  /* Sportscar / Neon Speed Button Accents */
  --btn-shadow: 0 4px 18px rgba(212, 20, 90, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.5);
  --btn-shadow-hover: 0 8px 25px rgba(212, 20, 90, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.7);

  /* Borders & Glassmorphism */
  --line: rgba(0, 0, 0, 0.08);
  --line-strong: rgba(0, 0, 0, 0.15);
  --line-hover: rgba(212, 20, 90, 0.4);
  --glass-blur: blur(14px);

  /* Shadows */
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.08);
  --shadow-hit: 0 4px 22px rgba(212, 20, 90, 0.18);

  /* Badges & Alerts */
  --badge-bg: #eceff4;
  --badge-border: rgba(0, 0, 0, 0.06);
  --status-ok-bg: #ecfdf5;
  --status-ok-line: #a7f3d0;
  --status-ok-ink: #059669;
  --status-warn-bg: #fffbeb;
  --status-warn-line: #fde68a;
  --status-warn-ink: #d97706;
  --status-err-bg: #fff1f2;
  --status-err-line: #fecdd3;
  --status-err-ink: #e11d48;
}

/* ==========================================================================
   Color Themes: Mint, Vanilla, Lavender, Neon, Slate
   ========================================================================== */

[data-theme="mint"] {
  color-scheme: dark;
  --bg: #071914;
  --bg-surface: rgba(11, 36, 29, 0.8);
  --bg-surface-hover: rgba(16, 52, 42, 0.95);
  --bg-card: rgba(16, 185, 129, 0.05);
  --bg-card-hover: rgba(16, 185, 129, 0.1);
  --bg-card-solid: #0c2b22;
  --bg-input: rgba(7, 25, 20, 0.85);
  --bg-input-focus: rgba(11, 36, 29, 0.95);
  --bg-header: rgba(7, 25, 20, 0.88);
  --bg-footer: #051410;
  --bg-photo-placeholder: #0e3026;

  --ink: #e6fcf5;
  --ink-heading: #ffffff;
  --mut: #82d8b8;
  --dim: #499e7f;

  --acc: #10b981;
  --acc-deep: #059669;
  --acc-hover: #34d399;
  --acc-glow: rgba(16, 185, 129, 0.35);
  --acc-subtle: rgba(16, 185, 129, 0.12);
  --acc-subtle-border: rgba(16, 185, 129, 0.28);
  --acc-gradient: linear-gradient(135deg, #059669 0%, #10b981 100%);
  --acc-gradient-hover: linear-gradient(135deg, #047857 0%, #059669 100%);

  --btn-shadow: 0 4px 20px rgba(5, 150, 105, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.3);
  --btn-shadow-hover: 0 8px 30px rgba(16, 185, 129, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.5);

  --line: rgba(16, 185, 129, 0.12);
  --line-strong: rgba(16, 185, 129, 0.25);
  --line-hover: rgba(16, 185, 129, 0.5);
  --glass-blur: blur(14px);

  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.5);
  --shadow-hit: 0 0 25px rgba(16, 185, 129, 0.25);

  --badge-bg: rgba(16, 185, 129, 0.08);
  --badge-border: rgba(16, 185, 129, 0.18);
  --status-ok-bg: rgba(16, 185, 129, 0.15);
  --status-ok-line: rgba(16, 185, 129, 0.35);
  --status-ok-ink: #34d399;
  --status-warn-bg: rgba(245, 158, 11, 0.12);
  --status-warn-line: rgba(245, 158, 11, 0.3);
  --status-warn-ink: #fbbf24;
  --status-err-bg: rgba(239, 68, 68, 0.12);
  --status-err-line: rgba(239, 68, 68, 0.3);
  --status-err-ink: #f87171;
}

[data-theme="vanilla"] {
  color-scheme: light;
  --bg: #faf7ee;
  --bg-surface: rgba(255, 255, 255, 0.88);
  --bg-surface-hover: rgba(255, 255, 255, 0.98);
  --bg-card: rgba(255, 255, 255, 0.85);
  --bg-card-hover: #ffffff;
  --bg-card-solid: #ffffff;
  --bg-input: #ffffff;
  --bg-input-focus: #ffffff;
  --bg-header: rgba(250, 247, 238, 0.9);
  --bg-footer: #f5f0e1;
  --bg-photo-placeholder: #f2ece0;

  --ink: #292524;
  --ink-heading: #1c1917;
  --mut: #78716c;
  --dim: #a8a29e;

  --acc: #d97706;
  --acc-deep: #b45309;
  --acc-hover: #f59e0b;
  --acc-glow: rgba(217, 119, 6, 0.28);
  --acc-subtle: rgba(217, 119, 6, 0.08);
  --acc-subtle-border: rgba(217, 119, 6, 0.22);
  --acc-gradient: linear-gradient(135deg, #b45309 0%, #f59e0b 100%);
  --acc-gradient-hover: linear-gradient(135deg, #92400e 0%, #d97706 100%);

  --btn-shadow: 0 4px 18px rgba(180, 83, 9, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.5);
  --btn-shadow-hover: 0 8px 25px rgba(217, 119, 6, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.7);

  --line: rgba(0, 0, 0, 0.07);
  --line-strong: rgba(0, 0, 0, 0.14);
  --line-hover: rgba(217, 119, 6, 0.45);
  --glass-blur: blur(14px);

  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.08);
  --shadow-hit: 0 4px 22px rgba(217, 119, 6, 0.2);

  --badge-bg: #f4eee1;
  --badge-border: rgba(0, 0, 0, 0.06);
  --status-ok-bg: #ecfdf5;
  --status-ok-line: #a7f3d0;
  --status-ok-ink: #059669;
  --status-warn-bg: #fffbeb;
  --status-warn-line: #fde68a;
  --status-warn-ink: #d97706;
  --status-err-bg: #fff1f2;
  --status-err-line: #fecdd3;
  --status-err-ink: #e11d48;
}

[data-theme="lavender"] {
  color-scheme: dark;
  --bg: #130f1e;
  --bg-surface: rgba(30, 22, 48, 0.75);
  --bg-surface-hover: rgba(43, 31, 69, 0.9);
  --bg-card: rgba(168, 85, 247, 0.04);
  --bg-card-hover: rgba(168, 85, 247, 0.08);
  --bg-card-solid: #1b132c;
  --bg-input: rgba(19, 15, 30, 0.85);
  --bg-input-focus: rgba(30, 22, 48, 0.95);
  --bg-header: rgba(19, 15, 30, 0.88);
  --bg-footer: #0e0a17;
  --bg-photo-placeholder: #221838;

  --ink: #f3e8ff;
  --ink-heading: #ffffff;
  --mut: #c084fc;
  --dim: #7e53a3;

  --acc: #a855f7;
  --acc-deep: #7e22ce;
  --acc-hover: #c084fc;
  --acc-glow: rgba(168, 85, 247, 0.35);
  --acc-subtle: rgba(168, 85, 247, 0.12);
  --acc-subtle-border: rgba(168, 85, 247, 0.25);
  --acc-gradient: linear-gradient(135deg, #7e22ce 0%, #c084fc 100%);
  --acc-gradient-hover: linear-gradient(135deg, #6b21a8 0%, #a855f7 100%);

  --btn-shadow: 0 4px 20px rgba(126, 34, 206, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.4);
  --btn-shadow-hover: 0 8px 30px rgba(168, 85, 247, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.6);

  --line: rgba(168, 85, 247, 0.12);
  --line-strong: rgba(168, 85, 247, 0.22);
  --line-hover: rgba(168, 85, 247, 0.5);
  --glass-blur: blur(14px);

  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.5);
  --shadow-hit: 0 0 25px rgba(168, 85, 247, 0.25);

  --badge-bg: rgba(168, 85, 247, 0.08);
  --badge-border: rgba(168, 85, 247, 0.18);
  --status-ok-bg: rgba(34, 197, 94, 0.12);
  --status-ok-line: rgba(34, 197, 94, 0.3);
  --status-ok-ink: #4ade80;
  --status-warn-bg: rgba(245, 158, 11, 0.12);
  --status-warn-line: rgba(245, 158, 11, 0.3);
  --status-warn-ink: #fbbf24;
  --status-err-bg: rgba(244, 63, 94, 0.12);
  --status-err-line: rgba(244, 63, 94, 0.3);
  --status-err-ink: #fb7185;
}

[data-theme="neon"] {
  color-scheme: dark;
  --bg: #050508;
  --bg-surface: rgba(17, 17, 26, 0.85);
  --bg-surface-hover: rgba(28, 28, 42, 0.95);
  --bg-card: rgba(0, 240, 255, 0.03);
  --bg-card-hover: rgba(0, 240, 255, 0.07);
  --bg-card-solid: #0d0d15;
  --bg-input: rgba(5, 5, 8, 0.9);
  --bg-input-focus: rgba(17, 17, 26, 0.98);
  --bg-header: rgba(5, 5, 8, 0.92);
  --bg-footer: #020205;
  --bg-photo-placeholder: #131320;

  --ink: #f0fdf4;
  --ink-heading: #ffffff;
  --mut: #38bdf8;
  --dim: #1e6e94;

  --acc: #00f0ff;
  --acc-deep: #0284c7;
  --acc-hover: #38bdf8;
  --acc-glow: rgba(0, 240, 255, 0.45);
  --acc-subtle: rgba(0, 240, 255, 0.12);
  --acc-subtle-border: rgba(0, 240, 255, 0.3);
  --acc-gradient: linear-gradient(135deg, #0284c7 0%, #00f0ff 100%);
  --acc-gradient-hover: linear-gradient(135deg, #0369a1 0%, #0284c7 100%);

  --btn-shadow: 0 4px 20px rgba(0, 240, 255, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.5);
  --btn-shadow-hover: 0 8px 30px rgba(0, 240, 255, 0.7), inset 0 1px 2px rgba(255, 255, 255, 0.8);

  --line: rgba(0, 240, 255, 0.15);
  --line-strong: rgba(0, 240, 255, 0.3);
  --line-hover: rgba(0, 240, 255, 0.65);
  --glass-blur: blur(14px);

  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.6);
  --shadow-hit: 0 0 30px rgba(0, 240, 255, 0.35);

  --badge-bg: rgba(0, 240, 255, 0.08);
  --badge-border: rgba(0, 240, 255, 0.22);
  --status-ok-bg: rgba(34, 197, 94, 0.15);
  --status-ok-line: rgba(34, 197, 94, 0.35);
  --status-ok-ink: #4ade80;
  --status-warn-bg: rgba(245, 158, 11, 0.15);
  --status-warn-line: rgba(245, 158, 11, 0.35);
  --status-warn-ink: #fbbf24;
  --status-err-bg: rgba(244, 63, 94, 0.15);
  --status-err-line: rgba(244, 63, 94, 0.35);
  --status-err-ink: #fb7185;
}

[data-theme="slate"] {
  color-scheme: dark;
  --bg: #0b0f17;
  --bg-surface: rgba(22, 30, 46, 0.75);
  --bg-surface-hover: rgba(30, 41, 64, 0.9);
  --bg-card: rgba(100, 116, 139, 0.04);
  --bg-card-hover: rgba(100, 116, 139, 0.08);
  --bg-card-solid: #151c2c;
  --bg-input: rgba(11, 15, 23, 0.85);
  --bg-input-focus: rgba(22, 30, 46, 0.95);
  --bg-header: rgba(11, 15, 23, 0.88);
  --bg-footer: #070a10;
  --bg-photo-placeholder: #1a2336;

  --ink: #e2e8f0;
  --ink-heading: #ffffff;
  --mut: #94a3b8;
  --dim: #64748b;

  --acc: #38bdf8;
  --acc-deep: #0284c7;
  --acc-hover: #7dd3fc;
  --acc-glow: rgba(56, 189, 248, 0.35);
  --acc-subtle: rgba(56, 189, 248, 0.12);
  --acc-subtle-border: rgba(56, 189, 248, 0.25);
  --acc-gradient: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%);
  --acc-gradient-hover: linear-gradient(135deg, #0369a1 0%, #0284c7 100%);

  --btn-shadow: 0 4px 20px rgba(2, 132, 199, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.35);
  --btn-shadow-hover: 0 8px 30px rgba(56, 189, 248, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.55);

  --line: rgba(148, 163, 184, 0.1);
  --line-strong: rgba(148, 163, 184, 0.2);
  --line-hover: rgba(56, 189, 248, 0.5);
  --glass-blur: blur(14px);

  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.5);
  --shadow-hit: 0 0 25px rgba(56, 189, 248, 0.25);

  --badge-bg: rgba(148, 163, 184, 0.08);
  --badge-border: rgba(148, 163, 184, 0.16);
  --status-ok-bg: rgba(34, 197, 94, 0.12);
  --status-ok-line: rgba(34, 197, 94, 0.3);
  --status-ok-ink: #4ade80;
  --status-warn-bg: rgba(245, 158, 11, 0.12);
  --status-warn-line: rgba(245, 158, 11, 0.3);
  --status-warn-ink: #fbbf24;
  --status-err-bg: rgba(244, 63, 94, 0.12);
  --status-err-line: rgba(244, 63, 94, 0.3);
  --status-err-ink: #fb7185;
}

/* ==========================================================================
   Base & Reset
   ========================================================================== */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  background-color: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.3s ease, color 0.3s ease;
  overflow-x: hidden;
}

::selection {
  background: var(--acc);
  color: #ffffff;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

img {
  max-width: 100%;
  display: block;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--ink-heading);
  font-weight: 700;
  line-height: 1.25;
}

h1 { font-size: 28px; margin-bottom: 0.5em; letter-spacing: -0.02em; }
h2 { font-size: 22px; margin: 1.2em 0 0.6em; letter-spacing: -0.01em; }
h3 { font-size: 17px; margin: 0.8em 0 0.4em; }

.wrap {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 20px;
}

main.wrap {
  flex: 1 0 auto;
  padding-top: 24px;
  padding-bottom: 48px;
}

/* ==========================================================================
   Utility Classes & Glassmorphism
   ========================================================================== */

.glass {
  background: var(--bg-card);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--line);
  border-radius: 20px;
}

.glass-card {
  background: var(--bg-card);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}

.text-gradient {
  background: var(--acc-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}

.center { text-align: center; }
.center-h { text-align: center; margin-top: 36px; margin-bottom: 8px; }
.muted { color: var(--mut); font-size: 13px; }
.found { color: var(--mut); font-size: 14px; }

/* ==========================================================================
   Header / Topbar
   ========================================================================== */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 14px 24px;
  background: var(--bg-header);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 50;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.03em;
  color: var(--ink-heading);
  text-transform: uppercase;
}

.logo-picture {
  display: block;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
}

.logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 10px;
  background: var(--acc-subtle);
  border: 1px solid var(--acc-subtle-border);
  padding: 3px;
  box-shadow: 0 4px 12px var(--acc-glow);
}

[data-theme="dark"] .logo-img,
[data-theme="mint"] .logo-img,
[data-theme="lavender"] .logo-img,
[data-theme="neon"] .logo-img,
[data-theme="slate"] .logo-img {
  content: url('/images/logo_fs_dark.svg');
}

.logo-sub {
  display: block;
  font-size: 11px;
  color: var(--mut);
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  margin-top: -2px;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.topnav {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 14px;
  font-weight: 500;
}

.topnav a {
  color: var(--ink);
  transition: color 0.2s ease;
}

.topnav a:hover {
  color: var(--acc);
}

/* ==========================================================================
   Header Live Search, Dropdown & Mobile Navigation
   ========================================================================== */

.search-box-wrap {
  flex: 1 1 320px;
  max-width: 480px;
  position: relative;
}

.search-form {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
}

.search-input {
  width: 100%;
  height: 42px;
  padding: 0 42px 0 16px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 24px;
  color: var(--ink);
  font-size: 14px;
  transition: all 0.25s ease;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.search-input:focus {
  outline: none;
  border-color: var(--acc);
  box-shadow: 0 0 0 3px var(--acc-glow);
  background: var(--bg-input-focus);
}

.search-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--mut);
  cursor: pointer;
  border-radius: 50%;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.search-btn:hover {
  color: var(--acc);
  background: var(--acc-subtle);
}

.search-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--bg-card-solid);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 100;
  overflow: hidden;
  max-height: 480px;
  overflow-y: auto;
}

.sd-group {
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}

.sd-group:last-of-type {
  border-bottom: none;
}

.sd-title {
  padding: 4px 16px 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mut);
  font-weight: 700;
}

.sd-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  color: var(--ink);
  transition: background-color 0.15s ease;
  font-size: 13px;
}

.sd-item:hover {
  background: var(--bg-surface-hover);
  color: var(--acc);
}

.sd-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--bg-surface);
  border: 1px solid var(--line);
  font-size: 13px;
  flex-shrink: 0;
}

.sd-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--acc-subtle-border);
}

.sd-listing {
  gap: 10px;
}

.sd-thumb {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
}

.sd-info {
  flex: 1;
  min-width: 0;
}

.sd-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

.sd-meta {
  font-size: 12px;
  color: var(--mut);
}

.sd-empty {
  padding: 16px;
  text-align: center;
  color: var(--mut);
  font-size: 13px;
}

.sd-all {
  display: block;
  text-align: center;
  padding: 10px;
  background: var(--acc-subtle);
  color: var(--acc);
  font-weight: 600;
  font-size: 13px;
  border-top: 1px solid var(--line);
}

.sd-all:hover {
  background: var(--acc-glow);
}

/* Nav Item Styling & Buttons */
.fav-top-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.fav-count {
  background: var(--acc);
  color: #fff;
  border-radius: 10px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  display: inline-block;
}

.mobile-nav-btn {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  padding: 0 10px;
  border-radius: 10px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  color: var(--ink);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.mobile-nav-btn:hover {
  border-color: var(--acc);
  color: var(--acc);
}

.mobile-nav-label {
  display: inline-block;
}

/* Dropdown Menus (Theme & Site Menu) */
.theme-select-wrap,
.site-menu-wrap {
  position: relative;
}

.theme-menu,
.site-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: var(--bg-card-solid);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  padding: 8px 0;
  min-width: 190px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 100;
}

@media(max-width: 480px) {
  .theme-menu {
    left: 0;
    right: auto;
    min-width: 170px;
  }
  .site-dropdown-menu {
    left: auto;
    right: 0;
  }
}

.theme-menu-item,
.site-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 16px;
  background: none;
  border: none;
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.theme-menu-item:hover,
.site-menu-item:hover {
  background: var(--bg-surface-hover);
  color: var(--acc);
}

.theme-menu-item.active {
  color: var(--acc);
  font-weight: 700;
}

.theme-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}

.theme-dot-dark { background: #161a22; border: 1px solid #30363d; }
.theme-dot-light { background: #f6f8fa; border: 1px solid #d0d7de; }
.theme-dot-mint { background: #0f2e26; border: 1px solid #10b981; }
.theme-dot-vanilla { background: #fdf6e2; border: 1px solid #f59e0b; }
.theme-dot-lavender { background: #261e38; border: 1px solid #a855f7; }
.theme-dot-neon { background: #0a0a0f; border: 1px solid #ec4899; }
.theme-dot-slate { background: #1e2430; border: 1px solid #64748b; }

.theme-toggle {
  background: var(--bg-card);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.theme-toggle:hover {
  border-color: var(--acc);
  color: var(--acc);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--acc-glow);
}

[data-theme="dark"] .icon-moon { display: none; }
[data-theme="dark"] .icon-sun { display: block; }
[data-theme="light"] .icon-sun { display: none; }
[data-theme="light"] .icon-moon { display: block; }

/* ==========================================================================
   Speed / Sportscar Accent Buttons (Vibrant Glow & Shimmer)
   ========================================================================== */

.btn-cta,
.btn-primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #ffffff !important;
  background: var(--acc-gradient);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 14px;
  cursor: pointer;
  box-shadow: var(--btn-shadow);
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  text-align: center;
  overflow: hidden;
  user-select: none;
}

/* Dynamic light-flare speedline across the button */
.btn-cta::before,
.btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 80%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-25deg);
  transition: left 0.6s ease;
  pointer-events: none;
}

.btn-cta:hover::before,
.btn-primary:hover::before {
  left: 140%;
}

/* Speed line accent indicator */
.btn-cta::after,
.btn-primary::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 15%;
  right: 15%;
  height: 2px;
  background: #ffffff;
  border-radius: 999px;
  opacity: 0.4;
  filter: drop-shadow(0 0 3px #ffffff);
  transition: all 0.3s ease;
}

.btn-cta:hover,
.btn-primary:hover {
  background: var(--acc-gradient-hover);
  transform: translateY(-2px) scale(1.01);
  box-shadow: var(--btn-shadow-hover);
  border-color: rgba(255, 255, 255, 0.45);
}

.btn-cta:hover::after,
.btn-primary:hover::after {
  left: 8%;
  right: 8%;
  opacity: 0.9;
  filter: drop-shadow(0 0 6px #ffffff);
}

.btn-cta:active,
.btn-primary:active {
  transform: translateY(1px) scale(0.99);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-secondary:hover {
  background: var(--bg-surface-hover);
  border-color: var(--line-strong);
  color: var(--ink-heading);
}

.cta-mini {
  position: relative;
  background: var(--acc-gradient);
  color: #ffffff !important;
  border-radius: 10px;
  padding: 8px 16px;
  font-weight: 700;
  font-size: 13px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 2px 12px var(--acc-glow);
  transition: all 0.25s ease;
  overflow: hidden;
}

.cta-mini::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transform: skewX(-20deg);
  transition: left 0.5s ease;
}

.cta-mini:hover::before {
  left: 120%;
}

.cta-mini:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 18px var(--acc-glow);
  border-color: rgba(255, 255, 255, 0.45);
}

.linkbtn {
  background: none;
  border: 0;
  color: var(--mut);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: color 0.2s ease;
}

.linkbtn:hover {
  color: var(--acc);
}

/* Header authentication action */
.auth-nav-link {
  flex-shrink: 0;
}

.topnav .auth-nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 8px 14px;
  border: 1px solid var(--acc-subtle-border);
  border-radius: 10px;
  background: var(--acc-gradient);
  box-shadow: 0 2px 12px var(--acc-glow);
  color: #ffffff !important;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}

.topnav .auth-nav-link:hover {
  background: var(--acc-gradient-hover);
  border-color: var(--line-hover);
  color: #ffffff !important;
  transform: translateY(-1px);
}

.topnav .auth-nav-link .desktop-only-link {
  display: inline !important;
}

/* ==========================================================================
   Hero & Home Banners
   ========================================================================== */

.hero-large-banner {
  width: 100%;
  margin: 0 0 34px;
}

.hero-banner-inner {
  position: relative;
  min-height: 330px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(135deg, var(--bg-card-solid), var(--bg-surface));
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow-md);
}

.hero-banner-inner.has-custom-bg {
  background-position: center;
}

.hero-banner-content {
  position: relative;
  z-index: 1;
  width: min(620px, 72%);
  padding: 48px 52px;
  color: #ffffff;
}

.hero-banner-content h1 {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.hero-banner-content p {
  max-width: 560px;
  margin: 0 0 24px;
  color: rgba(255, 255, 255, 0.84);
  font-size: 16px;
  line-height: 1.6;
}

.hero-banner-btn {
  min-width: 190px;
}

.hero-sell-block {
  min-height: 190px;
  background-size: cover;
  background-position: center;
}

.hero-sell-block.has-custom-bg {
  color: #ffffff;
  background-color: #161a22;
  background-size: cover;
  background-position: center;
  border-color: rgba(255, 255, 255, 0.16);
}

.hero-sell-block.has-custom-bg h2,
.hero-sell-block.has-custom-bg p {
  color: #ffffff;
}

.sell-cta-body {
  position: relative;
  z-index: 1;
  flex: 1 1 420px;
  min-width: 0;
}

.sell-cta-actions {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex: 0 1 auto;
}

.sell-cta-icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  border-radius: 16px;
  background: var(--acc-subtle);
  border: 1px solid var(--acc-subtle-border);
  color: var(--acc);
}

/* ==========================================================================
   Category Grid
   ========================================================================== */

.hero {
  padding: 36px 0 20px;
}

.hero h1 {
  font-size: 36px;
  font-weight: 900;
  letter-spacing: -0.03em;
  margin-bottom: 12px;
}

.hero p {
  color: var(--mut);
  font-size: 16px;
  max-width: 680px;
  line-height: 1.6;
}

.hero.center p {
  margin: 0 auto;
}

.sell-cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  background: var(--bg-card);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 28px 32px;
  margin: 28px 0 36px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.sell-cta::before {
  content: '';
  position: absolute;
  top: -50px;
  right: -50px;
  width: 150px;
  height: 150px;
  background: var(--acc-glow);
  filter: blur(50px);
  border-radius: 50%;
  pointer-events: none;
}

.sell-cta h2 {
  margin: 0 0 6px;
  font-size: 24px;
}

.sell-cta p {
  margin: 0;
  color: var(--mut);
  font-size: 15px;
}

.sell-btn {
  padding: 13px 28px;
  font-size: 15px;
  white-space: nowrap;
}

/* ==========================================================================
   Category Grid
   ========================================================================== */

.cats {
  margin: 24px 0 42px;
}

.cats-header {
  margin-bottom: 18px;
}

.cats-header h2,
.features-header h2 {
  margin-top: 0;
  margin-bottom: 6px;
}

.cats-subtitle,
.features-subtitle {
  color: var(--mut);
  font-size: 14px;
}

.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
  margin: 18px 0;
}

.cat-grid-centered {
  width: 100%;
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}

.cat {
  min-height: 176px;
  padding: 22px 16px 18px;
  background: var(--bg-card);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--line);
  border-radius: 18px;
  color: var(--ink);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 13px;
  text-align: center;
}

.cat-large {
  font-size: 15px;
  font-weight: 700;
}

.cat:hover {
  border-color: var(--acc);
  background: var(--bg-card-hover);
  transform: translateY(-4px);
  box-shadow: var(--shadow-hit);
  color: var(--ink-heading);
}

.cat-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  flex: 0 0 88px;
  overflow: hidden;
  border-radius: 24px;
  background: var(--acc-subtle);
  border: 1px solid var(--acc-subtle-border);
  box-shadow: 0 10px 24px var(--acc-glow);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.cat:hover .cat-icon-badge {
  transform: scale(1.06) rotate(-2deg);
  box-shadow: 0 14px 30px var(--acc-glow);
}

.cat-icon-large {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 7px;
}

.cat-icon-placeholder {
  color: var(--acc);
}

.cat-icon-placeholder svg {
  width: 42px;
  height: 42px;
}

.cat-large-title {
  max-width: 100%;
  color: inherit;
  line-height: 1.3;
}

/* Homepage feature highlights */
.features-section {
  margin: 44px 0;
}

.features-header {
  margin-bottom: 20px;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  max-width: 1080px;
  margin: 0 auto;
}

.feature-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 142px;
  padding: 22px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.feature-card:hover {
  transform: translateY(-3px);
  border-color: var(--acc-subtle-border);
  box-shadow: var(--shadow-hit);
}

.feature-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 14px;
  background: var(--acc-subtle);
  border: 1px solid var(--acc-subtle-border);
  color: var(--acc);
  font-size: 24px;
  line-height: 1;
}

.feature-card-content {
  min-width: 0;
}

.feature-card-content h3 {
  margin: 0 0 6px;
  font-size: 16px;
  line-height: 1.3;
}

.feature-card-content p {
  margin: 0;
  color: var(--mut);
  font-size: 13px;
  line-height: 1.55;
}

/* ==========================================================================
   Listing Cards & Grids
   ========================================================================== */

.latest-section {
  margin: 42px 0;
}

.section-head-flex {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 4px;
}

.section-head-flex h2 {
  margin-top: 0;
}

.see-all-link {
  flex: 0 0 auto;
  color: var(--acc);
  font-size: 14px;
  font-weight: 700;
}

.see-all-link:hover {
  color: var(--acc-hover);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 18px;
  margin: 20px 0 36px;
}

@media(min-width: 993px) {
  .cat-grid-centered {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .latest-section .grid-two-rows {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.card {
  background: var(--bg-card);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--shadow-sm);
  position: relative;
}

.card:hover {
  border-color: var(--line-hover);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md), var(--shadow-hit);
}

.card-photo {
  aspect-ratio: 3/4;
  background: var(--bg-photo-placeholder);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.card:hover .card-photo img {
  transform: scale(1.04);
}

.card-noimg {
  color: var(--mut);
  font-size: 12px;
  font-weight: 500;
}

.card-title {
  padding: 12px 14px 4px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
  transition: color 0.2s ease;
}

.card:hover .card-title {
  color: var(--ink-heading);
}

.card-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 14px 14px;
  margin-top: auto;
  gap: 8px;
}

.card-price {
  font-weight: 800;
  font-size: 16px;
  color: var(--acc);
  white-space: nowrap;
}

.card-seller {
  font-size: 12px;
  color: var(--mut);
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==========================================================================
   Product / Listing Detail Page & Gallery
   ========================================================================== */

.crumbs {
  font-size: 13px;
  color: var(--mut);
  margin: 12px 0 16px;
}

.crumbs a:hover {
  color: var(--acc);
}

.card-page {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin-top: 16px;
}

@media(min-width: 780px) {
  .card-page {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  }
}

.gallery-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gallery-main-wrap {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-photo-placeholder);
  aspect-ratio: 4/5;
  cursor: zoom-in;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-main {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.gallery-main-wrap:hover .gallery-main {
  transform: scale(1.02);
}

.gallery-zoom-badge {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  color: #ffffff;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  pointer-events: none;
}

.gallery-thumbs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 2px 8px;
  scrollbar-width: thin;
}

.gallery-thumb {
  width: 76px;
  height: 76px;
  flex-shrink: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid var(--line);
  background: var(--bg-photo-placeholder);
  cursor: pointer;
  transition: all 0.2s ease;
}

.gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-thumb:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
}

.gallery-thumb.active {
  border-color: var(--acc);
  box-shadow: 0 0 12px var(--acc-glow);
}

/* ==========================================================================
   Lightbox / Modal Zoom
   ========================================================================== */

.lightbox-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(10, 12, 16, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.lightbox-overlay.active {
  opacity: 1;
  visibility: visible;
}

.lightbox-img-wrap {
  position: relative;
  max-width: 90vw;
  max-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-img {
  max-width: 100%;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
  user-select: none;
  animation: zoomIn 0.25s ease-out;
}

@keyframes zoomIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.lightbox-close {
  position: absolute;
  top: 24px;
  right: 24px;
  background: var(--bg-card);
  border: 1px solid var(--line-strong);
  color: #ffffff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: all 0.2s ease;
  z-index: 100000;
}

.lightbox-close:hover {
  background: var(--acc);
  border-color: var(--acc);
  transform: scale(1.1);
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 100000;
}

.lightbox-nav:hover {
  background: var(--acc);
  border-color: var(--acc);
  transform: translateY(-50%) scale(1.1);
}

.lightbox-prev { left: 24px; }
.lightbox-next { right: 24px; }

.lightbox-counter {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.6);
  padding: 6px 16px;
  border-radius: 999px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.price {
  font-size: 32px;
  font-weight: 900;
  color: var(--acc);
  margin: 0.2em 0 0.4em;
  letter-spacing: -0.02em;
}

.variants {
  margin: 18px 0;
}

.variants h3 {
  font-size: 14px;
  color: var(--mut);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.variant {
  display: inline-block;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px 14px;
  margin: 4px 6px 4px 0;
  font-size: 13px;
  font-weight: 500;
  background: var(--bg-card);
  color: var(--ink);
  transition: all 0.2s ease;
}

.variant:hover {
  border-color: var(--line-strong);
}

.variant-active {
  border-color: var(--acc);
  background: var(--acc-subtle);
  color: var(--acc);
  font-weight: 600;
}

.attrs {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin: 18px 0;
}

.attrs th {
  text-align: left;
  color: var(--mut);
  font-weight: 400;
  padding: 8px 12px 8px 0;
  width: 40%;
  border-bottom: 1px solid var(--line);
}

.attrs td {
  padding: 8px 0;
  color: var(--ink-heading);
  font-weight: 500;
  border-bottom: 1px solid var(--line);
}

.contact-block {
  margin: 20px 0;
}

.contact-body {
  margin-top: 14px;
  background: var(--bg-card);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px;
  box-shadow: var(--shadow-sm);
}

.contact-legal {
  font-size: 12px;
  color: var(--mut);
  margin-top: 10px;
  line-height: 1.5;
}

.seller-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  color: var(--acc);
  font-size: 14px;
  font-weight: 600;
}

.seller-link:hover {
  text-decoration: underline;
}

.card-desc {
  background: var(--bg-card);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px;
  margin: 16px 0 32px;
  line-height: 1.7;
}

/* ==========================================================================
   Sellers Directory & Details (Cards & Avatars)
   ========================================================================== */

.seller-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin: 20px 0 36px;
}

.seller-card {
  background: var(--bg-card);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--shadow-sm);
}

.seller-card:hover {
  border-color: var(--line-hover);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md), var(--shadow-hit);
  background: var(--bg-card-hover);
}

.avatar-wrapper {
  position: relative;
  margin-bottom: 12px;
}

.seller-avatar {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--acc-subtle-border);
  box-shadow: 0 4px 16px var(--acc-glow);
  background: var(--bg-photo-placeholder);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.seller-card:hover .seller-avatar {
  transform: scale(1.05);
  border-color: var(--acc);
}

.seller-monogram {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--acc-gradient);
  color: #ffffff;
  font-size: 26px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px var(--acc-glow);
  user-select: none;
  transition: transform 0.3s ease;
}

.seller-card:hover .seller-monogram {
  transform: scale(1.05);
}

.online-pulse {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 14px;
  height: 14px;
  background: #22c55e;
  border-radius: 50%;
  border: 2px solid var(--bg);
  box-shadow: 0 0 8px #22c55e;
}

.seller-name {
  display: block;
  font-weight: 700;
  font-size: 16px;
  color: var(--ink-heading);
  margin-bottom: 4px;
}

.seller-count {
  font-size: 13px;
  color: var(--mut);
  margin-bottom: 10px;
}

.seller-preview-photos {
  display: flex;
  gap: 6px;
  margin-top: auto;
  padding-top: 8px;
}

.seller-preview-photo {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--line);
}

.seller-head {
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 18px 0 28px;
  background: var(--bg-card);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 24px 28px;
  box-shadow: var(--shadow-sm);
}

.seller-head .avatar-wrapper {
  margin-bottom: 0;
}

.seller-head .seller-avatar,
.seller-head .seller-monogram {
  width: 90px;
  height: 90px;
  font-size: 34px;
}

.seller-head h1 {
  margin-bottom: 4px;
  font-size: 30px;
}

.seller-desc {
  color: var(--mut);
  font-size: 15px;
  margin-top: 8px;
  line-height: 1.6;
}

/* ==========================================================================
   Services & Tariffs & Earnings Calculator
   ========================================================================== */

.calc-box {
  background: var(--bg-card);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 32px;
  margin: 28px 0 40px;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}

.calc-box::before {
  content: '';
  position: absolute;
  top: -80px;
  left: -80px;
  width: 200px;
  height: 200px;
  background: var(--acc-glow);
  filter: blur(70px);
  border-radius: 50%;
  pointer-events: none;
}

.calc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-top: 24px;
}

@media(min-width: 860px) {
  .calc-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }
}

.calc-section-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mut);
  margin-bottom: 12px;
}

.calc-categories {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
  margin-bottom: 24px;
}

.calc-cat {
  background: var(--bg-card-solid);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 10px;
  text-align: center;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.calc-cat:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
}

.calc-cat.active {
  border-color: var(--acc);
  background: var(--acc-subtle);
  box-shadow: 0 0 16px var(--acc-glow);
}

.calc-cat-emoji {
  font-size: 22px;
}

.calc-cat-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--ink-heading);
}

.calc-cat-price {
  font-size: 11px;
  color: var(--mut);
}

.calc-slider-wrap {
  margin-bottom: 24px;
}

.calc-slider-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}

.calc-slider-value {
  font-weight: 800;
  font-size: 18px;
  color: var(--acc);
}

input[type="range"].calc-slider {
  width: 100%;
  height: 8px;
  border-radius: 6px;
  background: var(--line-strong);
  outline: none;
  accent-color: var(--acc);
  cursor: pointer;
}

.calc-activity-btns {
  display: flex;
  gap: 8px;
}

.calc-act-btn {
  flex: 1;
  padding: 10px 8px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--bg-card-solid);
  color: var(--mut);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease;
}

.calc-act-btn:hover {
  border-color: var(--line-strong);
  color: var(--ink);
}

.calc-act-btn.active {
  border-color: var(--acc);
  background: var(--acc-subtle);
  color: var(--acc);
  box-shadow: 0 2px 10px var(--acc-glow);
}

.calc-result-card {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow-sm);
  position: relative;
}

.calc-income-title {
  font-size: 13px;
  color: var(--mut);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.calc-income-value {
  font-size: 38px;
  font-weight: 900;
  letter-spacing: -0.03em;
  margin: 6px 0 14px;
  line-height: 1;
}

.calc-stat-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  font-size: 13px;
}

.calc-goal-box {
  background: var(--acc-subtle);
  border: 1px solid var(--acc-subtle-border);
  border-radius: 14px;
  padding: 12px 14px;
  margin: 14px 0 18px;
}

.calc-goal-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--acc);
  margin-bottom: 4px;
}

.calc-goal-text {
  font-weight: 700;
  font-size: 14px;
  color: var(--ink-heading);
}

.calc-progress-bar {
  height: 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
  margin-top: 8px;
}

.calc-progress-fill {
  height: 100%;
  background: var(--acc-gradient);
  width: 45%;
  transition: width 0.4s ease;
}

.calc-rec-tariff {
  font-size: 13px;
  color: var(--mut);
  margin-bottom: 16px;
}

.calc-rec-tariff b {
  color: var(--acc);
}

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin: 24px 0 36px;
}

.step {
  background: var(--bg-card);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px 18px;
  text-align: center;
  transition: all 0.2s ease;
}

.step:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
}

.step b {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--acc-subtle);
  border: 1px solid var(--acc-subtle-border);
  color: var(--acc);
  font-size: 20px;
  font-weight: 800;
  margin: 0 auto 12px;
}

.step span {
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
}

.tariff-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin: 24px 0 36px;
}

.tariff {
  background: var(--bg-card);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 28px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--shadow-sm);
  position: relative;
}

.tariff:hover {
  border-color: var(--line-hover);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.tariff-hit {
  border-color: var(--acc);
  background: rgba(255, 45, 125, 0.05);
  box-shadow: var(--shadow-hit);
}

.tariff h3 {
  font-size: 20px;
  margin-bottom: 8px;
}

.tariff-price {
  font-size: 34px;
  font-weight: 900;
  color: var(--acc);
  margin: 0.2em 0 0.3em;
  letter-spacing: -0.02em;
}

.tariff-limit {
  color: var(--mut);
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 20px;
}

.tariff .btn-cta {
  margin-top: auto;
  width: 100%;
}

.faq-acc {
  margin: 36px 0;
}

.faq-item {
  background: var(--bg-card);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--line);
  border-radius: 16px;
  margin-bottom: 12px;
  overflow: hidden;
  transition: all 0.2s ease;
}

.faq-item:hover {
  border-color: var(--line-strong);
}

.faq-header {
  padding: 18px 22px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-heading);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.faq-icon {
  font-size: 18px;
  color: var(--acc);
  transition: transform 0.25s ease;
}

.faq-item.active .faq-icon {
  transform: rotate(45deg);
}

.faq-body {
  padding: 0 22px 18px;
  font-size: 14px;
  color: var(--mut);
  line-height: 1.6;
  display: none;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.faq-item.active .faq-body {
  display: block;
}

/* ==========================================================================
   Forms, Auth & Inputs
   ========================================================================== */

.authbox {
  max-width: 440px;
  margin: 36px auto;
  background: var(--bg-card);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 32px;
  box-shadow: var(--shadow-md);
}

.authbox h1 {
  font-size: 24px;
  text-align: center;
  margin-bottom: 18px;
}

.authbox label,
.formv label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--mut);
  margin: 14px 0;
}

.authbox input:not([type=checkbox]),
.formv input:not([type=checkbox]),
.formv select,
.formv textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg-input);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 15px;
  color: var(--ink);
  font-family: inherit;
  margin-top: 6px;
  transition: all 0.2s ease;
}

.authbox input:not([type=checkbox]):focus,
.formv input:not([type=checkbox]):focus,
.formv select:focus,
.formv textarea:focus {
  outline: none;
  background: var(--bg-input-focus);
  border-color: var(--acc);
  box-shadow: 0 0 0 3px var(--acc-subtle);
}

.chk {
  display: flex !important;
  gap: 10px;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.formv {
  max-width: 680px;
  background: var(--bg-card);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 28px;
  box-shadow: var(--shadow-sm);
}

/* ==========================================================================
   Cabinet & Dashboard
   ========================================================================== */

.cab-head {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.badge {
  background: var(--badge-bg);
  border: 1px solid var(--badge-border);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--mut);
}

.badge-published {
  background: var(--status-ok-bg);
  border-color: var(--status-ok-line);
  color: var(--status-ok-ink);
}

.badge-moderation {
  background: var(--status-warn-bg);
  border-color: var(--status-warn-line);
  color: var(--status-warn-ink);
}

.badge-rejected {
  background: var(--status-err-bg);
  border-color: var(--status-err-line);
  color: var(--status-err-ink);
}

.stats {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 18px 0 26px;
}

.stat {
  background: var(--bg-card);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 22px;
  text-align: center;
  flex: 1 1 120px;
}

.stat b {
  display: block;
  font-size: 26px;
  font-weight: 800;
  color: var(--ink-heading);
}

.stat span {
  font-size: 12px;
  color: var(--mut);
  font-weight: 500;
}

.stat-link {
  color: var(--acc);
}

.checklist {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 16px 0 24px;
}

.chk-item {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
}

.chk-item.done {
  background: var(--status-ok-bg);
  border-color: var(--status-ok-line);
  color: var(--status-ok-ink);
}

.cab-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 16px 0;
}

.cab-row {
  display: flex;
  gap: 16px;
  background: var(--bg-card);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
  align-items: center;
  transition: border-color 0.2s ease;
}

.cab-row:hover {
  border-color: var(--line-strong);
}

.cab-photo {
  width: 70px;
  height: 70px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-photo-placeholder);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--mut);
}

.cab-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cab-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cab-title {
  font-weight: 600;
  font-size: 15px;
  color: var(--ink-heading);
}

.cab-meta {
  font-size: 13px;
  color: var(--mut);
}

.cab-note {
  font-size: 13px;
  color: var(--status-err-ink);
}

.cab-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}

.cab-del {
  background: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 4px 12px;
  font-size: 12px;
  cursor: pointer;
  color: var(--mut);
  transition: all 0.2s ease;
}

.cab-del:hover {
  border-color: var(--status-err-ink);
  color: var(--status-err-ink);
}

.photo-manage {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 12px 0;
}

.photo-chip {
  position: relative;
  width: 74px;
  height: 74px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
}

.photo-chip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-del {
  position: absolute;
  top: 4px;
  right: 4px;
  border: 0;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  width: 22px;
  height: 22px;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   Alerts & Notifications
   ========================================================================== */

.alert {
  background: var(--status-err-bg);
  color: var(--status-err-ink);
  border: 1px solid var(--status-err-line);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 14px;
  margin-bottom: 18px;
}

.alert.ok {
  background: var(--status-ok-bg);
  color: var(--status-ok-ink);
  border-color: var(--status-ok-line);
}

.alert-link {
  color: inherit;
  text-decoration: underline;
}

/* ==========================================================================
   CMS Pages & Articles
   ========================================================================== */

.cms-page {
  background: var(--bg-card);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 28px;
  margin: 16px 0 36px;
  font-size: 15px;
  line-height: 1.7;
}

.cms-page h2 { margin-top: 1.4em; }
.cms-page img { border-radius: 14px; margin: 16px 0; border: 1px solid var(--line); }
.cms-page table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 16px 0; }
.cms-page td, .cms-page th { border: 1px solid var(--line); padding: 10px 12px; }
.cms-page th { background: var(--bg-card-hover); font-weight: 600; }

.helplist { line-height: 2.2; font-size: 15px; }

/* ==========================================================================
   Pagination
   ========================================================================== */

.pager {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin: 18px 0 36px;
}

.pg {
  border: 1px solid var(--line);
  background: var(--bg-card);
  color: var(--ink);
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.pg:hover {
  border-color: var(--acc);
  color: var(--acc);
}

.pg-current {
  background: var(--acc-gradient);
  color: #ffffff !important;
  border-color: transparent;
  box-shadow: 0 2px 10px var(--acc-glow);
}

.pg-dots {
  padding: 8px 4px;
  color: var(--mut);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
  border-top: 1px solid var(--line);
  margin-top: auto;
  background: var(--bg-footer);
  padding: 32px 0;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.disclaimer {
  font-size: 12px;
  color: var(--dim);
  line-height: 1.6;
  margin-bottom: 12px;
}

.footnav {
  font-size: 13px;
  color: var(--mut);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.footnav a:hover {
  color: var(--acc);
}

/* ==========================================================================
   Root Catalog Page
   ========================================================================== */

.catalog-page {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 8px 0 40px;
}

.catalog-header {
  padding: 20px 0 30px;
  text-align: center;
}

.catalog-top-tag {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 5px 11px;
  border: 1px solid var(--acc-subtle-border);
  border-radius: 999px;
  background: var(--acc-subtle);
  color: var(--acc);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.catalog-breadcrumbs {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  color: var(--mut);
  font-size: 13px;
}

.catalog-breadcrumbs a:hover {
  color: var(--acc);
}

.catalog-breadcrumbs .sep {
  color: var(--dim);
}

.catalog-breadcrumbs .current {
  color: var(--ink);
  font-weight: 600;
}

.catalog-subtitle {
  max-width: 680px;
  margin: 10px auto 0;
  color: var(--mut);
  font-size: 15px;
  line-height: 1.55;
}

.catalog-categories-section {
  margin: 0 0 38px;
}

.catalog-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.cat-card {
  --card-accent: var(--acc);
  --card-glow: var(--acc-glow);
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 290px;
  padding: 20px;
  overflow: hidden;
  color: var(--ink);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

.cat-card:hover {
  color: var(--ink-heading);
  background: var(--bg-card-hover);
  border-color: color-mix(in srgb, var(--card-accent) 58%, transparent);
  box-shadow: 0 14px 32px var(--card-glow);
  transform: translateY(-4px);
}

.cat-card:focus-visible {
  outline: 3px solid var(--card-accent);
  outline-offset: 3px;
}

.cat-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.cat-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  flex: 0 0 92px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--card-accent) 35%, transparent);
  border-radius: 24px;
  background: color-mix(in srgb, var(--card-accent) 13%, transparent);
  color: var(--card-accent);
  box-shadow: 0 10px 24px var(--card-glow);
}

.cat-icon-img {
  width: 100%;
  height: 100%;
  padding: 8px;
  object-fit: contain;
}

.cat-icon-fallback {
  width: 42px;
  height: 42px;
}

.cat-card-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border: 1px solid color-mix(in srgb, var(--card-accent) 30%, transparent);
  border-radius: 50%;
  color: var(--card-accent);
  transition: transform 0.25s ease, background-color 0.25s ease;
}

.cat-card:hover .cat-card-arrow {
  background: color-mix(in srgb, var(--card-accent) 14%, transparent);
  transform: translateX(3px);
}

.cat-card-body {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 22px;
}

.cat-card-title {
  margin: 0 0 8px;
  color: var(--ink-heading);
  font-size: 20px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.cat-card-subtext {
  color: var(--mut);
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.cat-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.cat-card-count {
  color: var(--card-accent);
  font-size: 13px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.card-theme-pink { --card-accent: #ff4f93; --card-glow: rgba(255, 79, 147, 0.22); }
.card-theme-blue { --card-accent: #38bdf8; --card-glow: rgba(56, 189, 248, 0.22); }
.card-theme-purple { --card-accent: #a855f7; --card-glow: rgba(168, 85, 247, 0.22); }
.card-theme-amber { --card-accent: #f59e0b; --card-glow: rgba(245, 158, 11, 0.22); }
.card-theme-teal { --card-accent: #14b8a6; --card-glow: rgba(20, 184, 166, 0.22); }

.catalog-features-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.feature-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border-radius: 14px;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.feature-item:hover {
  background: var(--bg-card-hover);
  transform: translateY(-2px);
}

.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border: 1px solid var(--acc-subtle-border);
  border-radius: 13px;
  background: var(--acc-subtle);
  color: var(--acc);
}

.feature-icon svg {
  width: 22px;
  height: 22px;
}

.feature-text {
  min-width: 0;
}

.feature-title {
  color: var(--ink-heading);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.feature-desc {
  margin-top: 4px;
  color: var(--mut);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

/* ===============================================================================
   Catalog Section Subcategory Cards
   ========================================================================== */

.subcategory-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: 18px;
  margin: 22px 0 28px;
}

.subcategory-card {
  min-width: 0;
  min-height: 218px;
  padding: 18px 14px 16px;
  gap: 13px;
  justify-content: center;
  overflow: hidden;
  text-align: center;
}

.subcategory-card .cat-subcategory-icon {
  display: block;
  width: min(100%, 132px);
  height: 142px;
  flex: 0 0 142px;
  object-fit: contain;
  object-position: center;
  margin: 0 auto;
  border-radius: 12px;
}

.subcategory-card > span {
  display: block;
  width: 100%;
  min-width: 0;
  color: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.subcategory-card:focus-visible {
  outline: 3px solid var(--acc);
  outline-offset: 3px;
}

@media(min-width: 769px) and (max-width: 1100px) {
  .subcategory-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

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

@media(min-width: 769px) and (max-width: 1100px) {
  .catalog-cards-grid,
  .catalog-features-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media(max-width: 768px) {
  .desktop-only-link {
    display: none !important;
  }
  .mobile-nav-btn {
    display: inline-flex;
  }
}

@media(min-width: 993px) {
  .site-menu-wrap {
    display: none !important;
  }
  .mobile-nav-btn.theme-select-btn {
    display: inline-flex;
  }
  .mobile-nav-btn.auth-nav-link .mobile-nav-label {
    display: none;
  }
  .topnav .mobile-nav-btn.auth-nav-link {
    display: inline-flex;
    min-height: 36px;
    height: auto;
    padding: 8px 14px;
    background: var(--acc-gradient);
    border: 1px solid var(--acc-subtle-border);
    border-radius: 10px;
    box-shadow: 0 2px 12px var(--acc-glow);
    color: #ffffff !important;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
  }
  .topnav .mobile-nav-btn.auth-nav-link:hover {
    background: var(--acc-gradient-hover);
    border-color: var(--line-hover);
    color: #ffffff !important;
    transform: translateY(-1px);
  }
  .mobile-nav-btn.auth-nav-link svg {
    display: none;
  }
}

@media(min-width: 769px) and (max-width: 992px) {
  .cat-grid-centered,
  .latest-section .grid-two-rows {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .features-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media(max-width: 768px) {
  .catalog-page {
    padding-top: 0;
  }

  .catalog-header {
    padding: 14px 0 24px;
  }

  .catalog-subtitle {
    font-size: 14px;
  }

  .catalog-cards-grid,
  .catalog-features-bar {
    grid-template-columns: 1fr;
  }

  .cat-card {
    min-height: 0;
    padding: 16px;
  }

  .cat-card-icon {
    width: 76px;
    height: 76px;
    flex-basis: 76px;
    border-radius: 20px;
  }

  .cat-card-body {
    padding-top: 16px;
  }

  .cat-card-title {
    font-size: 18px;
  }

  .catalog-features-bar {
    padding: 12px;
  }

  .feature-item {
    padding: 12px 10px;
  }

  .topbar {
    padding: 10px 14px;
    gap: 10px;
  }

  .logo {
    font-size: 17px;
    gap: 8px;
  }

  .logo-picture,
  .logo-img {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
  }

  .logo-sub {
    font-size: 10px;
  }

  .search-box-wrap {
    order: 3;
    flex: 1 1 100%;
    max-width: 100%;
    margin-top: 2px;
  }

  .search-input {
    height: 38px;
    font-size: 13px;
  }

  .topbar-right {
    gap: 8px;
    margin-top: 0;
  }

  .topnav {
    gap: 8px;
  }

  .mobile-nav-btn {
    height: 34px;
    padding: 0 8px;
    font-size: 12px;
  }

  .mobile-nav-btn svg {
    width: 16px;
    height: 16px;
  }

  .hero h1 {
    font-size: 26px;
  }

  .hero-banner-inner {
    min-height: 280px;
    border-radius: 18px;
  }

  .hero-banner-content {
    width: 88%;
    padding: 32px 24px;
  }

  .hero-banner-content h1 {
    font-size: clamp(26px, 8vw, 36px);
  }

  .hero-banner-content p {
    font-size: 14px;
  }

  .sell-cta {
    padding: 22px;
  }

  .hero-sell-block {
    min-height: 0;
  }

  .sell-cta-icon {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
  }

  .sell-cta-body {
    flex-basis: calc(100% - 60px);
  }

  .sell-cta-actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .cat-grid,
  .latest-section .grid-two-rows {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .section-head-flex {
    align-items: center;
  }

  .section-head-flex h2 {
    font-size: 19px;
  }

  .see-all-link {
    font-size: 12px;
  }

  .cat {
    min-height: 142px;
    padding: 16px 10px;
  }

  .cat-icon-badge {
    width: 68px;
    height: 68px;
    flex-basis: 68px;
    border-radius: 18px;
  }

  .cat-large-title {
    font-size: 13px;
  }

  .features-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .feature-card {
    min-height: 0;
    padding: 18px;
  }

  .grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
  }

  .cab-row {
    flex-wrap: wrap;
  }

  .cab-actions {
    flex-direction: row;
    width: 100%;
    justify-content: flex-end;
  }

  .seller-head {
    flex-direction: column;
    text-align: center;
    padding: 20px;
  }

  .lightbox-nav {
    width: 40px;
    height: 40px;
  }
  .lightbox-prev { left: 10px; }
  .lightbox-next { right: 10px; }
  .lightbox-close { top: 16px; right: 16px; }

  .calc-box {
    padding: 20px;
  }
}

/* ==========================================================================
   Super-Selling Landing & Services Funnel Enhancements (CRO)
   ========================================================================== */

.services-badge-hero {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--acc-subtle);
  border: 1px solid var(--acc-subtle-border);
  color: var(--acc);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 16px;
}

.hero-stats-strip {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin: 24px 0 32px;
}

.hero-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  backdrop-filter: var(--glass-blur);
}

.hero-stat-pill b {
  color: var(--acc);
}

.gender-pills-wrap {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.gender-pill {
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--bg-card-solid);
  border: 1px solid var(--line);
  color: var(--mut);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.gender-pill:hover {
  border-color: var(--line-strong);
  color: var(--ink);
}

.gender-pill.active {
  background: var(--acc-gradient);
  border-color: rgba(255, 255, 255, 0.25);
  color: #ffffff;
  box-shadow: 0 2px 14px var(--acc-glow);
}

/* Feature & Trust Bento Grid */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin: 36px 0;
}

.bento-card {
  background: var(--bg-card);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 26px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}

.bento-card:hover {
  border-color: var(--line-hover);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.bento-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--acc-subtle);
  border: 1px solid var(--acc-subtle-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin-bottom: 16px;
  color: var(--acc);
}

.bento-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--ink-heading);
  margin-bottom: 8px;
}

.bento-desc {
  font-size: 14px;
  color: var(--mut);
  line-height: 1.6;
  margin: 0;
}

/* Enhanced Tariffs Hierarchy */
.tariff-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 14px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.tariff-badge-start {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--line-strong);
  color: var(--mut);
}

.tariff-badge-hit {
  background: var(--acc-gradient);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  box-shadow: 0 4px 15px var(--acc-glow);
}

.tariff-badge-vip {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
}

.tariff-card-vip {
  border-color: rgba(245, 158, 11, 0.4);
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.04) 0%, rgba(255, 255, 255, 0.02) 100%);
}

.tariff-card-vip .tariff-price {
  color: #fbbf24;
}

.tariff-features-list {
  list-style: none;
  padding: 0;
  margin: 18px 0 24px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13px;
}

.tariff-features-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.45;
  color: var(--ink);
}

.tariff-features-list li.disabled {
  color: var(--dim);
  text-decoration: line-through;
  opacity: 0.65;
}

.tariff-features-list li .chk-icon {
  font-weight: 800;
  flex-shrink: 0;
}

.chk-icon.yes { color: #22c55e; }
.chk-icon.no { color: var(--dim); }
.chk-icon.gold { color: #fbbf24; }

/* Testimonials / Success Stories */
.testimonials-section {
  margin: 48px 0;
}

.story-card {
  background: var(--bg-card);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.3s ease;
}

.story-card:hover {
  border-color: var(--line-hover);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.story-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.story-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--acc-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 18px;
  color: #ffffff;
  flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.story-meta h4 {
  margin: 0 0 2px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-heading);
}

.story-meta span {
  font-size: 12px;
  color: var(--mut);
}

.story-quote {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: 16px;
  font-style: italic;
}

.story-stat-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  background: var(--acc-subtle);
  border: 1px solid var(--acc-subtle-border);
  color: var(--acc);
  font-size: 12px;
  font-weight: 700;
}

.story-stat-badge.gold {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.3);
  color: #fbbf24;
}

.story-stat-badge.green {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.3);
  color: #4ade80;
}

/* Comparison Matrix (Old way vs Fetish Market) */
.comparison-table-wrap {
  overflow-x: auto;
  margin: 32px 0;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--bg-card);
  backdrop-filter: var(--glass-blur);
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 14px;
}

.comparison-table th,
.comparison-table td {
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}

.comparison-table th {
  background: var(--bg-surface);
  font-weight: 700;
  color: var(--ink-heading);
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.05em;
}

.comparison-table tr:last-child td {
  border-bottom: none;
}

/* SEO Content Block Styling */
.seo-story-block {
  background: var(--bg-card);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 36px 32px;
  margin: 42px 0;
}

.seo-story-block h2 {
  font-size: 26px;
  font-weight: 800;
  margin-top: 0;
  margin-bottom: 16px;
}

.seo-story-block h3 {
  font-size: 19px;
  font-weight: 700;
  margin-top: 24px;
  margin-bottom: 10px;
  color: var(--ink-heading);
}

.seo-story-block p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--mut);
  margin-bottom: 16px;
}

.seo-highlight-box {
  background: var(--acc-subtle);
  border-left: 4px solid var(--acc);
  border-radius: 0 14px 14px 0;
  padding: 18px 22px;
  margin: 20px 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
}

/* Sticky Bottom Mobile Bar */
.sticky-mobile-cta {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 16px;
  background: var(--bg-surface);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--line-strong);
  z-index: 99;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
}

@media(max-width: 768px) {
  .sticky-mobile-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
}