/* Videostijl: één kop en één soort knop op elke werkpagina.
   Zelfde waarden als de live Productscan (#160, #161, #163): blauw mono-kopregeltje,
   Sora-titel met één woord in blauw verloop, geen streepje eronder.
   Rust bij werken: alleen de titel komt één keer zacht binnen.
   Geladen door office.html en door de pagina's in een eigen venster (bundels, winkelwagen, checkout-logo). */

.vs-head { display: flex; flex-direction: column; gap: 10px; }
.vs-kick { display: block; margin: 0; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 13px; font-weight: 500; line-height: 1.4; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ice, #5b8bff); }
.vs-title { margin: 0; font-family: "Sora", "IBM Plex Sans", sans-serif; font-size: 34px; font-weight: 700; letter-spacing: -0.035em; line-height: 1.08; color: var(--text, #eef1f8); }
.vs-acc { background: linear-gradient(90deg, #6f97ff, #b3c8ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vs-sub { margin: 0; max-width: 62ch; font-size: 15px; line-height: 1.6; color: #a6aed0; }
.vs-in { animation: vs-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes vs-in { from { opacity: 0; filter: blur(12px); transform: translateY(14px) scale(0.98); } to { opacity: 1; filter: none; transform: none; } }

/* Eén primaire en één lichte knop. */
.vs-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 0 20px; border: 0; border-radius: 12px; background: #5b8bff; color: #ffffff; font: 600 15px "IBM Plex Sans", sans-serif; text-decoration: none; cursor: pointer; box-shadow: 0 8px 24px rgba(91, 139, 255, 0.25); transition: background 0.15s; }
.vs-btn:hover:not(:disabled) { background: #4a7af0; }
.vs-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 12px; background: transparent; color: #c7cce0; font: 500 15px "IBM Plex Sans", sans-serif; text-decoration: none; cursor: pointer; transition: border-color 0.15s, color 0.15s; }
.vs-ghost:hover:not(:disabled) { border-color: rgba(91, 139, 255, 0.4); color: #eef1f8; }

html[data-theme="light"] .vs-acc { background-image: linear-gradient(90deg, #3f6fe8, #6f97ff); }
html[data-theme="light"] .vs-sub { color: var(--muted, #5b6480); }

@media (max-width: 560px) {
  .vs-kick { font-size: 11px; letter-spacing: 0.12em; }
  .vs-title { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .vs-in { animation: none; }
}

/* Pagina's in een eigen venster (Bundels, Winkelwagen, Checkout-logo): dezelfde kop en knoppen. */
.page-head + .vs-page-head { margin: 0 0 22px; }
body.bundle-editing .vs-page-head { display: none; }
button.primary { border-color: transparent; border-radius: 12px; background: #5b8bff; color: #ffffff; font-weight: 600; box-shadow: 0 8px 24px rgba(91, 139, 255, 0.25); }
button.primary:hover:not(:disabled) { border-color: transparent; background: #4a7af0; color: #ffffff; }
html.is-office .cb-title .vs-title { font-size: 34px; }
html.is-office .cb-title .vs-acc { margin: 0; font-size: inherit; color: transparent; }
html.is-office .cb-title .vs-acc::before { content: none; }
html:not(.is-office) .cb-title .vs-kick { display: none; }
html.is-office .cb-actions button, html.is-office .cb-device button { border-radius: 12px; }
html.is-office .cb-actions > button:not(#cbShopify), html.is-office .cb-device button:not(.is-on) { border-color: rgba(255, 255, 255, 0.14); color: #c7cce0; }
html.is-office .cb-actions #cbSave { background: transparent; }
html.is-office .cb-actions #cbShopify { border-radius: 12px; background: #5b8bff; box-shadow: 0 8px 24px rgba(91, 139, 255, 0.25); }
.cl-title .vs-kick.vs-kick, .cb-title .vs-kick.vs-kick { margin: 0; font-size: 13px; color: #5b8bff; }
.cl-title h1.vs-title { font-size: 34px; letter-spacing: -0.035em; line-height: 1.08; }
.cl-title .vs-acc { margin: 0; font-size: inherit; color: transparent; }
.cl-primary { border-radius: 12px; background: #5b8bff; box-shadow: 0 8px 24px rgba(91, 139, 255, 0.25); }
@media (max-width: 560px) {
  html.is-office .cb-title .vs-title, .cl-title h1.vs-title { font-size: 30px; }
}