/* ==========================================================================
   Buttons - one recipe, both themes.

   The problem this replaces: the UI had four different button looks that each
   had been tuned against one surface. The category pills used a solid fill with
   an inset highlight, .vs-btn used a hardcoded blue glow plus --n-r-pill, the
   icon buttons used a flat circle, and the dark theme only had overrides for
   some of them. Anything sitting on the seasonal photo was unreadable because
   its shadow was painted for the flat page, not for a photo behind it.

   The rule now: one geometry (radius, height, transitions) shared by every
   button, and one elevation recipe expressed in tokens so the dark theme flips
   it by re-pointing the tokens instead of adding selectors. Surfaces are opaque,
   never translucent, so a photo can never bleed through a control.
   ========================================================================== */

:root {
	/* Geometry. Every control uses these, so nothing drifts out of line. */
	--vs-btn-r: 16px;
	--vs-btn-r-sm: 12px;
	--vs-btn-h: 44px;
	--vs-btn-h-sm: 40px;
	--vs-btn-px: 22px;
	--vs-btn-px-sm: 16px;

	/* Neumorphic tactile buttons - dual shadows */
	--vs-btn-rest: var(--n-raise-sm);
	--vs-btn-hover: var(--n-raise);
	--vs-btn-active: var(--n-inset-sm);
	--vs-btn-lift: -2px;
	--vs-btn-tint: rgba(91, 108, 255, .08);
}

html[data-vs-theme="dark"] {
	--vs-btn-rest: var(--n-raise-sm);
	--vs-btn-hover: var(--n-raise);
	--vs-btn-active: var(--n-inset-sm);
	--vs-btn-tint: rgba(107, 124, 255, .10);
}

/* Shared behaviour for every control on the site */
.vs-btn,
.vs-theme-toggle,
.vs-nav__scroll,
.vs-to-top {
	border: 1px solid var(--n-line);
	cursor: pointer;
	font: inherit;
	color: var(--n-text);
	background-color: var(--n-bg);
	box-shadow: var(--vs-btn-rest);
	border-radius: var(--vs-btn-r);
	transition: transform .18s cubic-bezier(0.16, 1, 0.3, 1),
	            box-shadow .18s cubic-bezier(0.16, 1, 0.3, 1),
	            background-color .18s ease, color .18s ease;
	-webkit-tap-highlight-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
	.vs-btn,
	.vs-nav__link,
	.vs-theme-toggle,
	.vs-nav__scroll,
	.vs-to-top {
		transition: none;
	}
}

.vs-btn:hover,
.vs-nav__link:hover,
.vs-theme-toggle:hover,
.vs-nav__scroll:hover,
.vs-to-top:hover {
	box-shadow: var(--vs-btn-hover);
	transform: translateY(var(--vs-btn-lift));
}

/* Category pills do not lift.
   The row is a horizontal scroller with clip padding tuned to a few pixels, so a
   2px translate either clipped the shadow or made the pill jump as it crossed
   that padding - most visible on "Главная", the first item, where the clipped
   edge is the container edge. The pills keep the same raised-to-sunken change as
   the icon buttons, just without the movement. */
.vs-nav__link:hover,
.vs-nav .category-link:hover {
	transform: none;
}

.vs-btn:active,
.vs-nav__link:active,
.vs-theme-toggle:active,
.vs-nav__scroll:active,
.vs-to-top:active {
	box-shadow: var(--vs-btn-active);
	transform: translateY(0);
}

/* Keyboard focus must be visible on every control, including the ones whose
   resting state is a flat fill. */
.vs-btn:focus-visible,
.vs-nav__link:focus-visible,
.vs-theme-toggle:focus-visible,
.vs-nav__scroll:focus-visible,
.vs-to-top:focus-visible {
	outline: 2px solid var(--n-accent);
	outline-offset: 2px;
}

/* ------------------------------------------------------------- primary --- */

.vs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 0 var(--vs-btn-px);
	height: var(--vs-btn-h);
	background: linear-gradient(135deg, var(--vs-accent-strong), var(--n-accent-dk));
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	border-radius: var(--vs-btn-r);
	border: 1px solid rgba(255, 255, 255, 0.16);
	box-shadow: -3px -3px 8px rgba(255, 255, 255, 0.06), 4px 4px 14px rgba(0, 0, 0, 0.6), 0 4px 14px rgba(91, 108, 255, 0.35);
	transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.vs-btn:hover {
	background: linear-gradient(135deg, #6b7cff, #4e5ef5);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: -4px -4px 12px rgba(255, 255, 255, 0.08), 6px 6px 18px rgba(0, 0, 0, 0.7), 0 8px 24px rgba(91, 108, 255, 0.5);
}

.vs-btn:active {
	transform: translateY(0);
	box-shadow: inset 2px 2px 6px rgba(0, 0, 0, 0.45), inset -2px -2px 6px rgba(255, 255, 255, 0.2);
}

/* Hero CTA: a play disc inside the button. The old markup tinted a raster
   play.png with a filter, which lost its edge on the accent fill. */
.vs-btn--play {
	height: 54px;
	padding: 0 32px 0 12px;
	gap: 14px;
}

.vs-btn__disc {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	flex: none;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, .24);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);
	transition: background-color .18s ease, transform .18s ease;
}

.vs-btn__disc .icon {
	width: 15px;
	height: 15px;
	/* the glyph is drawn with fill, so nudge it right to sit optically centred */
	margin-left: 1px;
}

.vs-btn--play:hover .vs-btn__disc {
	background-color: rgba(255, 255, 255, .36);
	transform: scale(1.06);
}

/* The dark override that flipped the label to #1b1f28 is gone. It existed
   because the button filled with --n-accent, which is a light blue in the dark
   theme and left white text at about 2.5:1. The button now fills with
   --vs-accent-strong, which steps down to --n-accent-dk there, so the white
   label clears contrast in both themes and matches the active nav pill. */
.vs-btn--block {
	width: 100%;
}

/* Ghost buttons sit on the surface rather than the accent, so they keep the
   accent label that makes them readable there. */
.vs-btn--ghost {
	background-color: var(--n-bg);
	color: var(--n-text);
	box-shadow: var(--vs-btn-rest);
}

.vs-btn--ghost:hover {
	background-color: var(--n-bg);
	color: var(--n-accent);
	box-shadow: var(--vs-btn-hover);
}

/* --------------------------------------------------------------- pills --- */

/* Category pills.
   Same geometry and same elevation as every other header control: raised on the
   page surface, sunk on hover. They previously inherited --n-raise-sm, whose
   white up-left half is what made the whole light header look lit from within,
   and they carried a separate hover shadow of their own - which is why the row
   beside the icon buttons never quite matched. */
.vs-nav__link,
.vs-nav .category-link {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--vs-btn-h);
	padding: 0 20px;
	border-radius: var(--vs-btn-r);
	background-color: var(--n-bg);
	color: var(--n-text);
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	box-shadow: var(--vs-icon-rest);
	transition: box-shadow .18s ease, color .18s ease, background-color .18s ease;
}

/* The sunken reaction. transform stays off so the row does not jump - see the
   note on the shared hover rule. */
.vs-nav__link:hover,
.vs-nav .category-link:hover {
	color: var(--n-accent);
	box-shadow: var(--vs-icon-hover);
	transform: none;
}

html[data-vs-theme="dark"] .vs-nav__link,
html[data-vs-theme="dark"] .vs-nav .category-link {
	color: var(--n-ink);
}

/* Selected category.
   The label is white in BOTH themes. The dark theme previously switched it to
   near-black (#1b1f28) because its accent is a light blue, and while that is
   legible it read as a bug next to the white label the light theme uses.
   Instead the dark theme fills with a deeper accent so white text still clears
   contrast: white on #4a58e0 is about 5.5:1, against roughly 2.5:1 for white on
   the dark theme's #7b8aff. */
.vs-nav__link.is-active,
.vs-nav__link[aria-current="page"],
.vs-nav .category-link.is-active,
.vs-nav .category-link[aria-current="page"] {
	background-color: var(--vs-accent-strong, #5b6cff);
	color: #fff;
	box-shadow: 0 0 0 1px rgba(91, 108, 255, .2), 0 4px 14px rgba(91, 108, 255, .34);
}

/* Header control elevation, built from colours the themes already define.
   --n-ink / --n-light are the theme's own ink and highlight, so the ramp
   re-tints itself per theme instead of hard-coding two sets of rgba().

   The neumorphic pair --n-raise-sm = -3px -3px 8px white + 3px 3px 8px #d4dbe7
   is what made the light header look like it was glowing: the white half is
   offset up-left, and on a bright seasonal photograph that reads as a halo
   around every control rather than as depth. A plain drop shadow plus an inset
   pair behaves the same on the photo and on the flat page.

   --vs-accent-strong is the single accent every accent-filled control uses,
   including the "Смотреть" button, so an active category and the hero CTA cannot
   end up different colours inside the same theme. */
:root {
	--vs-accent-strong: var(--n-accent);
	--vs-icon-rest: -3px -3px 8px #ffffff, 3px 3px 8px rgba(163, 177, 198, 0.55);
	--vs-icon-hover: inset -2px -2px 5px #ffffff, inset 2px 2px 5px rgba(163, 177, 198, 0.6);
}

html[data-vs-theme="dark"] {
	/* The dark theme accent (#7b8aff) is too light to carry a white label, so
	   filled controls step down to --n-accent-dk. One value for both the nav
	   pill and the CTA, which was the visible inconsistency. */
	--vs-accent-strong: var(--n-accent-dk);
	--vs-icon-rest: -3px -3px 8px rgba(255, 255, 255, 0.04), 4px 4px 10px rgba(0, 0, 0, 0.65);
	--vs-icon-hover: inset -2px -2px 5px rgba(255, 255, 255, 0.03), inset 2px 2px 5px rgba(0, 0, 0, 0.75);
}

html[data-vs-theme="dark"] .vs-nav__link.is-active,
html[data-vs-theme="dark"] .vs-nav__link[aria-current="page"],
html[data-vs-theme="dark"] .vs-nav .category-link.is-active,
html[data-vs-theme="dark"] .vs-nav .category-link[aria-current="page"] {
	color: #fff;
}

.vs-nav__link.is-active:hover,
.vs-nav .category-link.is-active:hover {
	box-shadow: 0 0 0 1px rgba(91, 108, 255, .24), 0 8px 20px rgba(91, 108, 255, .42);
}

/* --------------------------------------------------------- icon controls --- */

/* Header icon buttons take the design already used by .vs-row__nav and
   .vs-slider__arrow elsewhere on the site: a circle, 40px, page-surface fill,
   raised at rest, and pressing INWARD on hover with the accent glyph.

   That recipe is exactly what the supplied reference screenshots show, so it is
   copied rather than invented. The previous version used the 16px radius and
   the --n-accent-soft pill surface, which made the header read as a different
   component from the rest of the page.

   --n-inset-sm is the sunken pair; note it only exists in the token set, so it
   is used directly instead of the --vs-btn-* elevation, which is a raised-only
   ramp with no pressed state. */
.vs-theme-toggle,
.vs-theme-toggle {
	/* grid, not flex. The sun and the moon are two separate <svg> elements that
	   are cross-faded with opacity, so they have to occupy the SAME cell. As a
	   flex row they sat side by side and the visible glyph drifted: measured
	   centres were 446px (sun) and 468px (moon) inside a button centred on 457px,
	   so the moon rendered 11px off to the right. The grid stacking below is what
	   The full geometry is repeated here on purpose. It used to share the rule
	   below with .vs-nav__scroll and .vs-to-top; when it was split out for the
	   grid fix it lost width/height/surface/elevation and silently fell back to
	   the shared group above, whose fill is --n-accent-soft. That is why the
	   toggle showed a different background from every other control. */
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	flex: none;
	border-radius: 50%;
	background-color: var(--n-bg);
	box-shadow: var(--vs-icon-rest);
	color: var(--n-muted);
	padding: 0;
}

.vs-theme-toggle .icon {
	grid-area: 1 / 1;
}

.vs-nav__scroll,
.vs-to-top {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex: none;
	border-radius: 50%;
	background-color: var(--n-bg);
	box-shadow: var(--vs-icon-rest);
	color: var(--n-muted);
	padding: 0;
}

/* Pressed inward on hover, and on touch on tap.
   transform is reset explicitly: the shared rule near the top of this file
   lifts every control on hover with translateY(-2px), and that lift would fight
   the sunken shadow. The reference buttons do not move, they only sink. */
.vs-theme-toggle:hover,
.vs-nav__scroll:hover,
.vs-to-top:hover {
	color: var(--n-accent);
	box-shadow: var(--vs-icon-hover);
	transform: none;
}

.vs-theme-toggle:active,
.vs-nav__scroll:active,
.vs-to-top:active {
	color: var(--n-accent);
	box-shadow: var(--vs-icon-hover);
	transform: none;
}

/* Keyboard focus has to stay visible even though the resting state is a flat
   circle with no ring. */
.vs-theme-toggle:focus-visible,
.vs-nav__scroll:focus-visible,
.vs-to-top:focus-visible {
	outline: 2px solid var(--n-accent);
	outline-offset: 2px;
}

html[data-vs-theme="dark"] .vs-theme-toggle,
html[data-vs-theme="dark"] .vs-nav__scroll,
html[data-vs-theme="dark"] .vs-to-top {
	color: var(--n-muted);
}

.vs-to-top {
	width: 46px;
	height: 46px;
}

/* The burger is deliberately NOT in this list.
   vstream.css sets `.vs-burger { display: none }` for the desktop layout and
   re-enables it inside `@media (max-width: 992px)`. This file loads after
   vstream.css, so putting the burger in a shared `display: inline-flex` rule
   here outranked both and the three-dot button showed up on desktop. */

/* The search submit button is styled in vstream.css, next to the field it has
   to blend into, so the two are changed together. */

/* The burger is three lines, not an icon, so it keeps its own geometry.
   It is given no `display` value here on purpose - see the note above. The
   desktop/mobile switch stays owned by vstream.css so there is one place that
   decides it. Surface and geometry match the other icon buttons. */
.vs-burger {
	width: 40px;
	height: 40px;
	flex: none;
	border-radius: 50%;
	background-color: var(--n-bg);
	box-shadow: var(--vs-icon-rest);
	color: var(--n-muted);
	flex-direction: column;
	justify-content: center;
	gap: 4px;
}

.vs-burger:hover {
	color: var(--n-accent);
	box-shadow: var(--vs-icon-hover);
	transform: none;
}

/* The lines use --n-text rather than --n-muted: on the seasonal photo the
   muted grey was too close to the wash to read as three distinct bars. */
.vs-burger__line {
	display: block;
	width: 18px;
	height: 2px;
	border-radius: 2px;
	background-color: var(--n-text);
	transition: transform .2s ease, opacity .2s ease;
}

/* ------------------------------------------------------------- card buttons --- */
.vs-card__more {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-left: auto;
	padding: 7px 18px;
	height: 34px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
	background: #1e2434;
	color: #ffffff !important;
	border: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow: -3px -3px 7px rgba(255, 255, 255, 0.035), 3px 3px 8px rgba(0, 0, 0, 0.7);
}

html[data-vs-theme="light"] .vs-card__more,
:root:not([data-vs-theme="dark"]) .vs-card__more {
	background: #ebf0f7;
	color: #0f172a !important;
	border: 1px solid rgba(255, 255, 255, 0.9);
	box-shadow: -3px -3px 7px #ffffff, 3px 3px 8px rgba(163, 177, 198, 0.6);
}

.vs-card__more:hover {
	background: linear-gradient(135deg, var(--n-accent), var(--n-accent-dk)) !important;
	color: #ffffff !important;
	border-color: transparent;
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(91, 108, 255, 0.45);
}

.vs-card__more:active {
	transform: translateY(0);
	box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.5), inset -2px -2px 5px rgba(255, 255, 255, 0.1);
}

.vs-card__tools .icon-action {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
	background: #1e2434;
	color: var(--n-muted);
	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: -2px -2px 6px rgba(255, 255, 255, 0.03), 3px 3px 7px rgba(0, 0, 0, 0.6);
}

html[data-vs-theme="light"] .vs-card__tools .icon-action,
:root:not([data-vs-theme="dark"]) .vs-card__tools .icon-action {
	background: #ebf0f7;
	color: #475569;
	border: 1px solid rgba(255, 255, 255, 0.9);
	box-shadow: -2px -2px 6px #ffffff, 3px 3px 7px rgba(163, 177, 198, 0.5);
}

.vs-card__tools .icon-action:hover {
	color: var(--n-accent);
	transform: translateY(-2px);
	box-shadow: -3px -3px 8px rgba(255, 255, 255, 0.05), 4px 4px 10px rgba(0, 0, 0, 0.7);
}

.vs-card__tools .icon-action.is-active,
.vs-card__tools .icon-action:active {
	transform: translateY(0);
	color: var(--n-accent);
	box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.7), inset -2px -2px 5px rgba(255, 255, 255, 0.04);
}