/* Visual Sale arculat az aloldalakon – a dist/vs/ arculatra hangolt stíluslapok után, utolsóként töltődik.
   Itt csak a közös elemek vannak: fejléc, betűk, feliratok, gombok, címkék, lábléc. A színeket és sarkokat a
   visual-sale-css.cjs hangolja át a régi stíluslapokban. */
:root {
  --lime: #c9a86b;
  --vs-bg: #15130f; --vs-surf: #1d1a15; --vs-line: #2c2821; --vs-line2: #4a4235;
  --vs-tx: #f1ebdd; --vs-tx2: #e6dfcf; --vs-mut: #bdb4a2; --vs-mut2: #a79f8e;
  --vs-gold: #c9a86b; --vs-gold2: #e2c894; --vs-ink: #1a1712;
  --vs-label: Michroma, 'Instrument Sans', Arial, sans-serif;
  --vs-disp: Newsreader, Georgia, 'Times New Roman', serif;
  --vs-body: 'Instrument Sans', Arial, Helvetica, sans-serif;
  --vs-cut: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  color-scheme: dark;
}
html body { background: var(--vs-bg); color: var(--vs-tx); font-family: var(--vs-body); -webkit-font-smoothing: antialiased; }
html body :is(button, input, select, textarea) { font-family: var(--vs-body); }
::selection { background: var(--vs-gold); color: var(--vs-ink); }
html body :is(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--vs-gold2); outline-offset: 3px; }

/* fejléc – mint a főoldalon */
html body .header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 60; height: 76px; padding-left: max(clamp(16px, 3.9vw, 72px), env(safe-area-inset-left, 0px)); padding-right: max(clamp(16px, 3.9vw, 72px), env(safe-area-inset-right, 0px)); background: rgba(21,19,15,.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--vs-line); color: var(--vs-tx); }
html body .header .brand { gap: 14px; color: var(--vs-tx); font-weight: 400; letter-spacing: 0; }
.vs-mark { color: var(--vs-gold); flex-shrink: 0; }
.vs-word { display: flex; flex-direction: column; gap: 5px; font: 400 15px/1 var(--vs-label); letter-spacing: 4.5px; white-space: nowrap; }
.vs-word small { font-size: 8px; letter-spacing: 5.2px; color: var(--vs-mut2); }
html body .header nav a { font: 400 15px var(--vs-body); color: #d6cfbf; letter-spacing: 0; }
html body .header nav a:hover { color: var(--vs-gold3, #f6ead0); }
html body .header .header-cta { height: 46px; padding: 0 20px; gap: 10px; border: 0; background: var(--vs-gold); color: var(--vs-ink); font: 600 15px var(--vs-body); clip-path: var(--vs-cut); }
html body .header .header-cta:hover { background: var(--vs-gold2); }
html body .header .header-cta span { color: inherit; font-size: 16px; }
@media (max-width: 460px) { .vs-word { font-size: 12px; letter-spacing: 2.6px; } .vs-word small { display: none; } .vs-mark { width: 42px; } }

/* betűk és feliratok */
html body :is(h1, h2) { font-family: var(--vs-disp); font-weight: 400; letter-spacing: -0.5px; text-wrap: balance; }
html body h3 { font-family: var(--vs-disp); font-weight: 400; }
html body :is(h1, h2) em { color: var(--vs-gold2); font-style: italic; }
html body .eyebrow, html body .breadcrumb { font-family: var(--vs-label); font-weight: 400; font-size: 10px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--vs-gold); }
html body .breadcrumb a { color: var(--vs-mut); }
html body .breadcrumb a:hover { color: var(--vs-gold2); }
html body .muted, html body .page-lead { color: var(--vs-mut); }

/* gombok és linkek */
html body .button { clip-path: var(--vs-cut); border: 0; font: 600 15px var(--vs-body); gap: 14px; }
html body .button.lime, html body .button.dark { background: var(--vs-gold); color: var(--vs-ink); }
html body .button.lime:hover, html body .button.dark:hover { background: var(--vs-gold2); color: var(--vs-ink); }
html body .text-link { color: var(--vs-gold2); border-bottom: 1px solid #5a5142; padding-bottom: 6px; }
html body .text-link:hover { color: var(--vs-gold3, #f6ead0); }

/* űrlapmezők */
html body :is(input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea) { background-color: var(--vs-surf); color: var(--vs-tx); border-color: var(--vs-line2); }
html body :is(input, textarea)::placeholder { color: #8a8273; }

/* a régi logó vízjele helyett halvány VS-jel */
html body.subpage .page-top:after { background: url('assets/visualsale-jel-512.png') center/contain no-repeat; mix-blend-mode: lighten; opacity: .05; animation: none; transform: rotate(-8deg); }

/* lábléc */
html body .footer { background: var(--vs-bg); border-top: 1px solid var(--vs-line); color: var(--vs-mut2); }
html body .footer a { color: var(--vs-mut); }
html body .footer a:hover { color: var(--vs-gold2); }
html body .footer-bottom { border-top-color: var(--vs-line); color: var(--vs-mut2); font-size: 13px; }

/* kapcsolati központ: eredetileg világos háttérre készült, itt sötét felületet kap */
html body .contact-hub .hub-paths > a { background: var(--vs-surf); border-color: var(--vs-line2); color: var(--vs-tx); }
html body .contact-hub .hub-paths > a:hover, html body .contact-hub .hub-paths > a[aria-current=true] { background: #24201a; border-color: var(--vs-gold); color: var(--vs-tx); }
html body .contact-hub .hub-paths span { font-family: var(--vs-label); letter-spacing: 2px; color: var(--vs-gold); }
html body .contact-hub .hub-paths small { color: var(--vs-mut); }
html body .contact-hub .hub-panel { background: var(--vs-surf); border-color: var(--vs-line); color: var(--vs-tx); }
html body .contact-hub .hub-panel :is(p, small, label) { color: var(--vs-mut); }
html body .contact-hub .hub-panel :is(h3, strong) { color: var(--vs-tx); }
html body .contact-hub textarea { background: var(--vs-bg); color: var(--vs-tx); }
html body :is(h1, h2) em { letter-spacing: -0.2px; }

/* Térsegéd indítógomb */
html body .space-guide .guide-launch { border-radius: 2px; background: var(--vs-surf); border: 1px solid var(--vs-line2); color: var(--vs-tx); }

@media (prefers-reduced-motion: reduce) { html body.subpage .page-top:after { animation: none; } }