/* База: скидання, типографіка, форми, доступність, прозовий текст */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--vs-header-h) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }
body { margin: 0; background: var(--vs-bg); color: var(--vs-text); font: 400 16px/1.65 var(--vs-font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100vh; display: flex; flex-direction: column; }
.vs-main { flex: 1 0 auto; }
img, svg, video { max-width: 100%; height: auto; }
svg { display: block; }
a { color: var(--vs-accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--vs-accent-hover); }
h1, h2, h3, h4 { margin: 0 0 .5em; color: var(--vs-heading); font-family: var(--vs-font-display); font-weight: 400; line-height: 1.18; letter-spacing: -.01em; text-wrap: balance; }
h1 { font-size: clamp(28px, 4.4vw, 48px); } h2 { font-size: clamp(22px, 3vw, 34px); } h3 { font-size: clamp(17px, 1.8vw, 21px); } h4 { font-size: 16px; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.3em; }
hr { border: 0; border-top: 1px solid var(--vs-border); margin: 2em 0; }
:focus-visible { outline: 2px solid var(--vs-accent); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--vs-accent); color: var(--vs-on-accent); }
.vs-skip { position: absolute; left: 12px; top: -60px; z-index: 200; padding: 10px 16px; border-radius: var(--vs-r-sm); background: var(--vs-heading); color: var(--vs-bg); transition: top .2s; }
.vs-skip:focus { top: 12px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vs-wrap { width: min(100% - 2 * var(--vs-gutter), var(--vs-wrap)); margin-inline: auto; }
.vs-hide-sm { display: inline-flex; }
@media (max-width: 899px) { .vs-hide-sm { display: none !important; } }

/* форми */
input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="search"], input[type="url"], textarea, select {
  width: 100%; min-height: 48px; padding: 12px 16px; border: 1px solid var(--vs-border); border-radius: var(--vs-r-sm); background: var(--vs-surface); color: var(--vs-heading); font: inherit; transition: border-color .2s, box-shadow .2s;
}
textarea { min-height: 120px; resize: vertical; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--vs-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--vs-accent) 22%, transparent); }
input::placeholder, textarea::placeholder { color: var(--vs-muted); opacity: .8; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--vs-accent); width: 18px; height: 18px; }
label { color: var(--vs-heading); font-weight: 500; }

/* прозовий текст (статті, сторінки, опис товару) */
.vs-prose { max-width: 72ch; font-size: 17px; line-height: 1.75; }
.vs-prose > * + * { margin-top: 1.1em; }
.vs-prose--wide { max-width: none; } .vs-prose--wide > p { max-width: 118ch; font-size: 18px; } .vs-prose--wide > h2, .vs-prose--wide > h3, .vs-prose--wide > ul:not([class]), .vs-prose--wide > ol:not([class]) { max-width: 72ch; }   /* вступний абзац сторінок із віджетами — майже на всю ширину (було 72ch, як на телефоні) */   /* сторінки з віджетами (підбір, галерея, відгуки…): віджет на всю ширину, текст — читабельної ширини */
.vs-prose h2 { margin-top: 2em; font-size: clamp(22px, 2.6vw, 30px); }
.vs-prose h3 { margin-top: 1.6em; }
.vs-prose img { border-radius: var(--vs-r); }
.vs-prose ul, .vs-prose ol { padding-left: 1.4em; } .vs-prose li { margin: .35em 0; }
.vs-prose ul li::marker { color: var(--vs-accent); }
.vs-prose blockquote { margin: 1.6em 0; padding: 1em 1.4em; border-left: 3px solid var(--vs-sand); background: var(--vs-bg-soft); border-radius: 0 var(--vs-r) var(--vs-r) 0; }
.vs-prose table { width: 100%; border-collapse: collapse; font-size: 15px; display: block; overflow-x: auto; }
.vs-prose th, .vs-prose td { padding: 10px 14px; border-bottom: 1px solid var(--vs-border); text-align: left; }
.vs-prose th { color: var(--vs-heading); font-weight: 600; background: var(--vs-bg-soft); }