.vlike-commerce-hub {
  --vch-brand: #5b45f5;
  --vch-text: #172033;
  --vch-muted: #667085;
  --vch-line: #e5e9f2;
  --vch-surface: rgba(255, 255, 255, .94);
  position: relative;
  z-index: 40;
  margin: 14px 0 6px;
  color: var(--vch-text);
}

body.theme-dark .vlike-commerce-hub,
body[data-theme="dark"] .vlike-commerce-hub,
.night-mode .vlike-commerce-hub {
  --vch-text: #f8fafc;
  --vch-muted: #a7b2c5;
  --vch-line: #2a3548;
  --vch-surface: rgba(17, 24, 39, .94);
}

.vlike-commerce-hub *, .vlike-commerce-hub *::before, .vlike-commerce-hub *::after { box-sizing: border-box; }
.vlike-commerce-hub__inner { overflow: hidden; border: 1px solid var(--vch-line); border-radius: 18px; background: var(--vch-surface); box-shadow: 0 12px 35px rgba(15, 23, 42, .06); backdrop-filter: blur(14px); }
.vlike-commerce-hub__top { display: flex; justify-content: space-between; gap: 18px; align-items: center; padding: 13px 15px 11px; border-bottom: 1px solid var(--vch-line); }
.vlike-commerce-hub__brand { display: inline-flex; gap: 9px; align-items: center; color: var(--vch-text) !important; text-decoration: none !important; white-space: nowrap; }
.vlike-commerce-hub__brand > span { display: grid; width: 31px; height: 31px; place-items: center; color: #fff; border-radius: 10px; background: linear-gradient(135deg, var(--vch-brand), #7c3aed); font-size: 15px; font-weight: 900; box-shadow: 0 7px 16px rgba(91, 69, 245, .22); }
.vlike-commerce-hub__brand strong { font-size: 15px; letter-spacing: -.015em; }

.vlike-commerce-hub__types { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(100, 116, 139, .09); }
.vlike-commerce-hub__types a { padding: 7px 11px; color: var(--vch-muted) !important; border-radius: 9px; font-size: 12px; font-weight: 750; text-decoration: none !important; white-space: nowrap; transition: .17s ease; }
.vlike-commerce-hub__types a:hover { color: var(--vch-brand) !important; }
.vlike-commerce-hub__types a.is-active { color: var(--vch-brand) !important; background: var(--vch-surface); box-shadow: 0 2px 8px rgba(15,23,42,.08); }

.vlike-commerce-hub__primary { display: flex; align-items: stretch; gap: 2px; overflow-x: auto; padding: 5px 8px 0; scrollbar-width: thin; scrollbar-color: rgba(91,69,245,.25) transparent; }
.vlike-commerce-hub__primary a { position: relative; display: inline-flex; min-height: 47px; gap: 7px; align-items: center; padding: 9px 12px 12px; color: var(--vch-muted) !important; font-size: 13px; font-weight: 720; text-decoration: none !important; white-space: nowrap; transition: color .17s ease, background .17s ease; }
.vlike-commerce-hub__primary a::after { content: ""; position: absolute; right: 10px; bottom: 0; left: 10px; height: 3px; border-radius: 3px 3px 0 0; background: transparent; }
.vlike-commerce-hub__primary a:hover { color: var(--vch-text) !important; background: rgba(91,69,245,.045); }
.vlike-commerce-hub__primary a.is-active { color: var(--vch-brand) !important; }
.vlike-commerce-hub__primary a.is-active::after { background: linear-gradient(90deg, var(--vch-brand), #8b5cf6); }
.vlike-commerce-hub__icon { display: grid; width: 23px; height: 23px; place-items: center; color: inherit; border-radius: 7px; background: rgba(100,116,139,.08); font-size: 12px; font-weight: 900; }
.vlike-commerce-hub__primary a.is-active .vlike-commerce-hub__icon { color: #fff; background: var(--vch-brand); }

.vlike-commerce-digital-shelf { margin: 18px 0 28px; }

@media (max-width: 720px) {
  .vlike-commerce-hub { margin-top: 8px; }
  .vlike-commerce-hub__inner { border-right: 0; border-left: 0; border-radius: 0; }
  .vlike-commerce-hub__top { align-items: stretch; flex-direction: column; gap: 10px; }
  .vlike-commerce-hub__brand { display: none; }
  .vlike-commerce-hub__types { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
  .vlike-commerce-hub__types a { text-align: center; }
  .vlike-commerce-hub__primary { padding-inline: 5px; }
  .vlike-commerce-hub__primary a { min-height: 45px; padding-inline: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .vlike-commerce-hub * { transition: none !important; }
}