/*
 * HOME PAGE — design handoff "option 6A".
 *
 * Spec: design_handoff_home_page/README.md. Fidelity is stated there as HIGH: "Colours, radii,
 * type sizes, spacing and copy are final." So the values here are the handoff's, verbatim.
 *
 * WHY THIS FILE DEFINES ITS OWN TOKENS INSTEAD OF USING theme.json's
 * -----------------------------------------------------------------
 * The two palettes are close but NOT equal, and the handoff's are the approved ones:
 *
 *     role        theme.json   handoff 6A
 *     brand blue  #1576af      #1a72b8
 *     green       #72c23a      #7ac143
 *     border      #e4e4e7      #e5e9ec
 *
 * The radius scale differs outright: the theme runs 2/4/8/9999, the handoff runs
 * 20/18/14/10/999. Editing theme.json to match would restyle EVERY page on the site — the
 * catalogue, checkout, the article stream — on the strength of a home-page handoff. So the
 * handoff's scale is declared here, scoped to `.nv6`, and nothing outside the home page can
 * see it. When the other 6A-language pages land (contact 4D, cart 5B), this block is what
 * they promote into theme.json.
 *
 * TYPE. The handoff asks for "condensed grotesque headings over a regular grotesque" and adds
 * "any pairing with full Cyrillic coverage is fine" — Fira Sans Condensed has no more Cyrillic
 * than what is already loaded, and the project forbids adding CDN dependencies. So the theme's
 * own Roboto Condensed is used at the handoff's sizes and weights.
 *
 * LAYOUT. Desktop-first with a 1280px content frame, exactly as specified. The responsive
 * rules at the bottom are the handoff's three breakpoints (~1160 / ~1024 / ~720) and nothing
 * invented on top.
 */

/* ---------------------------------------------------------------------------
 * 1. TOKENS
 * ------------------------------------------------------------------------ */

.nv6 {
	/* Blue */
	--nv6-blue: #1a72b8;
	--nv6-blue-hover: #155f9b;
	--nv6-blue-active: #124f81;
	--nv6-blue-tint: #eef5fb;
	--nv6-hero: #0f4c73;
	--nv6-panel: #0b3c5c;

	/* Text on blue */
	--nv6-on-blue: #c5dcea;
	--nv6-on-blue-2: #bcd4e3;
	--nv6-on-blue-3: #8fb6ce;

	/* Green */
	--nv6-green: #7ac143;
	--nv6-green-light: #a5db6a;

	/* Ink */
	--nv6-ink: #16232c;
	--nv6-body: #4a5761;
	--nv6-body-2: #3b4a54;
	--nv6-muted: #6b7880;
	--nv6-muted-2: #7b8891;
	--nv6-faint: #96a2aa;

	/* Lines and fills */
	--nv6-border: #e5e9ec;
	--nv6-rule: #eef1f3;
	--nv6-control: #d6dde2;
	--nv6-fill: #f7f9fa;
	--nv6-error: #e0533a;

	/* Radii */
	--nv6-r-shell: var(--wp--custom--radius--shell);
	--nv6-r-card: var(--wp--custom--radius--card);
	--nv6-r-inner: var(--wp--custom--radius--inner);
	--nv6-r-control: var(--wp--custom--radius--control);
	--nv6-r-pill: var(--wp--custom--radius--pill);

	/* Shadows */
	--nv6-shadow-hero: 0 24px 60px rgba(6, 28, 42, 0.4);
	--nv6-shadow-card: 0 24px 60px rgba(15, 44, 63, 0.18);
	--nv6-shadow-hover: 0 8px 22px rgba(15, 44, 63, 0.07);

	/* The content frame and its gutter. Every band pads to the same 40px. */
	--nv6-frame: var(--wp--style--global--content-size);
	--nv6-gutter: 40px;

	--nv6-condensed: var(--wp--preset--font-family--body, "Roboto Condensed", system-ui, sans-serif);
}

/* ---------------------------------------------------------------------------
 * 2. THE PAGE SHELL
 *
 * `overflow: hidden` with the 20px radius is what the handoff specifies, and it is also what
 * lets the hero's colour run to the shell's edge and stop on the curve.
 * ------------------------------------------------------------------------ */

/*
 * THE ACCENT RULE IS NOT HERE — it belongs to the header.
 *
 * When this file was written the home page carried the site's only accent rule, because the
 * header had none. The 9A navigation put a 6px rule at the top of the header on EVERY page,
 * and this file's `::before` then drew a SECOND copy 163px lower — measured in the browser,
 * one at y=0 and one at the top of `.nv6`. The header is the top of the shell, so the header
 * keeps the rule and this one was removed.
 *
 * The top corners are squared for the same reason: `.nv6` no longer starts the page, it
 * continues from the header above it. The bottom corners keep the handoff's radius 20, so the
 * shell still closes on a curve above the footer.
 */
.nv6 {
	max-inline-size: var(--nv6-frame);
	margin-inline: auto;
	border-radius: 0 0 var(--nv6-r-shell) var(--nv6-r-shell);
	overflow: hidden;
	background: #fff;
	color: var(--nv6-ink);
}

/* ---------------------------------------------------------------------------
 * 3. SHARED PRIMITIVES
 * ------------------------------------------------------------------------ */

.nv6 .nv6-band {
	padding: 48px var(--nv6-gutter) 0;
}

.nv6 .nv6-band__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 14px;
	margin-block-end: 18px;
}

.nv6 .nv6-h2 {
	margin: 0;
	font-family: var(--nv6-condensed);
	font-size: 32px;
	font-weight: 600;
	line-height: 1.15;
	color: var(--nv6-ink);
}

.nv6 .nv6-note {
	margin: 0;
	font-size: 14.5px;
	color: var(--nv6-muted-2);
}

.nv6 .nv6-lead {
	margin: 0 0 18px;
	max-inline-size: 50ch;
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--nv6-body);
}

.nv6 .nv6-eyebrow {
	margin: 0 0 10px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--nv6-muted-2);
}

/* `margin-left: auto` rather than a wrapper: the head is a flex row, so the "see all" link
   pushes itself to the far end without the markup carrying a spacer element. */
.nv6 .nv6-seeall {
	margin-inline-start: auto;
	font-size: 14px;
	font-weight: 600;
	color: var(--nv6-blue);
	text-decoration: none;
}

.nv6 a {
	color: var(--nv6-blue);
	text-decoration: none;
}

.nv6 a:hover {
	color: var(--nv6-green);
}

/* Focus is specified as never the browser default. */
.nv6 a:focus-visible,
.nv6 button:focus-visible,
.nv6 input:focus-visible {
	outline: 2px solid var(--nv6-blue);
	outline-offset: 2px;
}

/* Buttons — three types, all radius 10. */
.nv6 .nv6-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 15px/28px is the handoff's padding; the min-height enforces the project's 44px target
	   without changing the visual box, which is already 45px tall. */
	min-block-size: 44px;
	padding: 15px 28px;
	border: 1px solid transparent;
	border-radius: var(--nv6-r-control);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.nv6 .nv6-btn--primary {
	background: var(--nv6-blue);
	color: #fff;
}

.nv6 .nv6-btn--primary:hover {
	background: var(--nv6-blue-hover);
	color: #fff;
}

.nv6 .nv6-btn--primary:active {
	background: var(--nv6-blue-active);
}

.nv6 .nv6-btn--ghost {
	border-color: rgba(255, 255, 255, 0.35);
	background: transparent;
	color: #fff;
}

.nv6 .nv6-btn--ghost:hover {
	border-color: #fff;
	color: #fff;
}

.nv6 .nv6-btn--outline {
	border-color: var(--nv6-control);
	background: #fff;
	color: var(--nv6-body-2);
}

.nv6 .nv6-btn--outline:hover {
	background: var(--nv6-blue-tint);
	border-color: var(--nv6-blue);
	color: var(--nv6-blue);
}

/*
 * A photo slot with no photograph in it.
 *
 * Deliberately visible. The handoff says every photo slot needs a real image and that the
 * prototype's files are "not for production" — a slot that collapsed silently would hide
 * exactly the gap somebody has to fill.
 */
.nv6 .nv6-photo-need {
	display: grid;
	place-items: center;
	block-size: 100%;
	min-block-size: 104px;
	padding: 12px;
	border: 1px dashed var(--nv6-blue);
	border-radius: inherit;
	background: var(--nv6-fill);
	color: var(--nv6-blue);
	font-size: 12px;
	font-weight: 700;
	text-align: center;
}

/* ---------------------------------------------------------------------------
 * 4. HERO
 *
 * The deep bottom padding is not decoration: the selector card below is pulled up 140px into
 * it, and this is the space it lands in.
 * ------------------------------------------------------------------------ */

.nv6 .nv6-hero {
	padding: 56px var(--nv6-gutter) 180px;
	background: var(--nv6-hero);
	color: #fff;
}

.nv6 .nv6-hero__grid {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 48px;
	align-items: center;
}

.nv6 .nv6-eyebrow--on-dark {
	color: var(--nv6-green-light);
	letter-spacing: 0.18em;
}

.nv6 .nv6-hero__title {
	margin: 0 0 16px;
	max-inline-size: 15ch;
	font-family: var(--nv6-condensed);
	font-size: 60px;
	font-weight: 700;
	line-height: 1.02;
	color: #fff;
}

.nv6 .nv6-hero__lead {
	margin: 0 0 26px;
	max-inline-size: 52ch;
	font-size: 17px;
	line-height: 1.6;
	color: var(--nv6-on-blue);
}

.nv6 .nv6-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.nv6 .nv6-hero__media {
	border-radius: 18px;
	overflow: hidden;
	box-shadow: var(--nv6-shadow-hero);
}

.nv6 .nv6-hero__img {
	display: block;
	inline-size: 100%;
	block-size: 340px;
	object-fit: cover;
}

/* ---------------------------------------------------------------------------
 * 5. OBJECT SELECTOR
 * ------------------------------------------------------------------------ */

.nv6 .nv6-selector {
	position: relative;
	z-index: 2;
	margin: -140px var(--nv6-gutter) 0;
}

.nv6 .nv6-selector__card {
	padding: 30px 32px 26px;
	border-radius: var(--nv6-r-card);
	background: #fff;
	box-shadow: var(--nv6-shadow-card);
}

.nv6 .nv6-selector__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 12px;
	margin-block-end: 16px;
}

.nv6 .nv6-selector__head .nv6-h2 {
	font-size: 28px;
}

.nv6 .nv6-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-block-end: 22px;
}

.nv6 .nv6-chip {
	padding: 10px 18px;
	border: 1px solid var(--nv6-control);
	border-radius: var(--nv6-r-pill);
	background: #fff;
	color: var(--nv6-body-2);
	font-family: inherit;
	font-size: 14.5px;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.nv6 .nv6-chip:hover {
	border-color: var(--nv6-blue);
	color: var(--nv6-blue);
}

/* The selected state is carried by aria-pressed, not by a second class — one source of truth,
   and the accessible state and the visible state cannot drift apart. */
.nv6 .nv6-chip[aria-pressed="true"] {
	border-color: var(--nv6-blue);
	background: var(--nv6-blue);
	color: #fff;
}

.nv6 .nv6-panel {
	display: grid;
	grid-template-columns: 1.25fr 1fr;
	gap: 26px;
	align-items: start;
}

/* Panels are hidden with the `hidden` attribute, which `display: grid` above would otherwise
   override — attribute and rule have to agree. */
.nv6 .nv6-panel[hidden] {
	display: none;
}

.nv6 .nv6-panel__title {
	margin: 0 0 14px;
	font-family: var(--nv6-condensed);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.2;
}

.nv6 .nv6-spec {
	margin: 0 0 20px;
}

.nv6 .nv6-spec__row {
	display: grid;
	grid-template-columns: 190px 1fr;
	gap: 16px;
	padding-block: 11px;
	border-block-start: 1px solid var(--nv6-rule);
	font-size: 15px;
}

.nv6 .nv6-spec__label {
	margin: 0;
	color: var(--nv6-muted);
}

.nv6 .nv6-spec__value {
	margin: 0;
	color: var(--nv6-ink);
}

.nv6 .nv6-panel__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.nv6 .nv6-panel__media {
	border-radius: var(--nv6-r-inner);
	overflow: hidden;
}

.nv6 .nv6-selector__img {
	display: block;
	inline-size: 100%;
	block-size: 264px;
	object-fit: cover;
}

/* ---------------------------------------------------------------------------
 * 6. CATALOGUE
 * ------------------------------------------------------------------------ */

.nv6 .nv6-cats {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nv6 .nv6-cat {
	border: 1px solid var(--nv6-border);
	border-radius: var(--nv6-r-card);
	overflow: hidden;
	transition: border-color 150ms ease, box-shadow 150ms ease;
}

.nv6 .nv6-cat:hover {
	border-color: #c9d6de;
	box-shadow: var(--nv6-shadow-hover);
}

/* The whole card is the link, so the card is the flex column rather than a div inside it. */
.nv6 .nv6-cat__link {
	display: flex;
	flex-direction: column;
	block-size: 100%;
	color: inherit;
}

.nv6 .nv6-cat__link:hover {
	color: inherit;
}

.nv6 .nv6-cat__media {
	display: block;
	block-size: 150px;
	background: var(--nv6-fill);
}

.nv6 .nv6-cat__img {
	display: block;
	inline-size: 100%;
	block-size: 150px;
	object-fit: cover;
}

.nv6 .nv6-cat__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px 16px 18px;
}

.nv6 .nv6-cat__title {
	font-family: var(--nv6-condensed);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2;
}

.nv6 .nv6-cat__count {
	font-size: 13px;
	color: var(--nv6-muted-2);
}

/*
 * `margin-block-start: auto` pins this to the bottom of the card.
 *
 * The five section names run from one line ("Купольные зеркала") to three ("Сферические
 * обзорные зеркала для помещений"), so a fixed margin left the five "Смотреть →" links on
 * three different baselines across one row. Pushed to the bottom of a full-height flex column
 * they align regardless of how the titles wrap.
 */
.nv6 .nv6-cat__more {
	margin-block-start: auto;
	padding-block-start: 6px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--nv6-blue);
}

.nv6 .nv6-cat__body {
	flex: 1 1 auto;
}

/* ---------------------------------------------------------------------------
 * 7. DIAMETER GUIDE + APPLICATIONS
 * ------------------------------------------------------------------------ */

.nv6 .nv6-guide {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	align-items: start;
}

/*
 * SCROLLS, it does not clip. Mobile handoff rule 7: a table is "never compressed" — either it
 * scrolls horizontally inside its rounded container with a visible edge fade, or it converts to
 * parameter → value rows. This was `overflow: hidden`, so on a narrow phone the last column was
 * cut off with no way to reach it, and rule 11 forbids losing table content on mobile.
 *
 * The fade is a background pair pinned to the two edges: the right one is visible only while
 * there is more to scroll to, because it is painted on the scrolling area and slides away as it
 * reaches the end. No JS, and it disappears by itself when the table fits.
 */
.nv6 .nv6-table__frame {
	border: 1px solid var(--nv6-border);
	border-radius: var(--nv6-r-inner);
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	background:
		linear-gradient(to right, #fff 30%, rgb(255 255 255 / 0%)) left center / 24px 100% no-repeat,
		linear-gradient(to left, #fff 30%, rgb(255 255 255 / 0%)) right center / 24px 100% no-repeat,
		radial-gradient(farthest-side at 0 50%, rgb(15 44 63 / 12%), rgb(15 44 63 / 0%)) left center / 12px 100% no-repeat,
		radial-gradient(farthest-side at 100% 50%, rgb(15 44 63 / 12%), rgb(15 44 63 / 0%)) right center / 12px 100% no-repeat;
	background-attachment: local, local, scroll, scroll;
}

.nv6 .nv6-table {
	inline-size: 100%;
	border-collapse: collapse;
	font-size: 15px;
	text-align: start;
}

.nv6 .nv6-table thead th {
	padding: 11px 16px;
	background: var(--nv6-fill);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--nv6-muted-2);
	text-align: start;
}

.nv6 .nv6-table tbody th,
.nv6 .nv6-table tbody td {
	padding: 11px 16px;
	border-block-start: 1px solid var(--nv6-rule);
	font-weight: 400;
	text-align: start;
}

.nv6 .nv6-table__note {
	color: var(--nv6-muted);
}

/* The handoff's 1fr 1fr 1.3fr, expressed as percentages so it survives `border-collapse`. */
.nv6 .nv6-table th:nth-child(1),
.nv6 .nv6-table td:nth-child(1) {
	inline-size: 30%;
}

.nv6 .nv6-table th:nth-child(2),
.nv6 .nv6-table td:nth-child(2) {
	inline-size: 30%;
}

.nv6 .nv6-uses {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nv6 .nv6-use {
	display: grid;
	grid-template-columns: 132px 1fr;
	gap: 18px;
	align-items: center;
	border: 1px solid var(--nv6-border);
	border-radius: var(--nv6-r-inner);
	overflow: hidden;
	transition: border-color 150ms ease, box-shadow 150ms ease;
}

.nv6 .nv6-use:hover {
	border-color: #c9d6de;
	box-shadow: var(--nv6-shadow-hover);
}

.nv6 .nv6-use__media {
	display: block;
	inline-size: 132px;
	block-size: 104px;
}

.nv6 .nv6-use__img {
	display: block;
	inline-size: 132px;
	block-size: 104px;
	object-fit: cover;
}

.nv6 .nv6-use__body {
	display: block;
	padding: 14px 18px 14px 0;
}

.nv6 .nv6-use__title {
	display: block;
	font-family: var(--nv6-condensed);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2;
}

.nv6 .nv6-use__text {
	display: block;
	margin-block-start: 5px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--nv6-muted);
}

/* ---------------------------------------------------------------------------
 * 8. FACTS
 * ------------------------------------------------------------------------ */

.nv6 .nv6-facts__panel {
	padding: 34px 32px;
	border-radius: var(--nv6-r-card);
	background: var(--nv6-panel);
	color: #fff;
}

.nv6 .nv6-band__head--on-dark .nv6-h2 {
	color: #fff;
	font-size: 30px;
}

.nv6 .nv6-note--on-dark {
	color: var(--nv6-on-blue-3);
	font-size: 14px;
}

.nv6 .nv6-facts__list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nv6 .nv6-fact {
	padding-block-start: 16px;
	border-block-start: 1px solid rgba(255, 255, 255, 0.18);
}

.nv6 .nv6-fact__n {
	margin: 0;
	font-family: var(--nv6-condensed);
	font-size: 38px;
	font-weight: 600;
	line-height: 1;
	color: var(--nv6-green-light);
}

.nv6 .nv6-fact__t {
	margin: 8px 0 0;
	font-family: var(--nv6-condensed);
	font-size: 19px;
	font-weight: 600;
}

.nv6 .nv6-fact__d {
	margin: 6px 0 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--nv6-on-blue-2);
}

/* ---------------------------------------------------------------------------
 * 9. TRUST
 * ------------------------------------------------------------------------ */

.nv6 .nv6-trust__grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nv6 .nv6-trust__cell {
	border: 1px solid var(--nv6-border);
	border-radius: var(--nv6-r-inner);
	transition: border-color 150ms ease, box-shadow 150ms ease;
}

.nv6 .nv6-trust__cell:hover {
	border-color: #c9d6de;
	box-shadow: var(--nv6-shadow-hover);
}

.nv6 .nv6-trust__link {
	display: grid;
	place-items: center;
	block-size: 78px;
	padding: 10px;
	color: var(--nv6-muted);
	font-size: 14px;
	font-weight: 600;
}

/*
 * Greyscale at rest, colour on hover — the handoff offers this as optional and it is worth
 * taking: six logos in six different brand palettes on one row compete with the page, and the
 * point of the row is the count, not any one mark.
 */
.nv6 .nv6-trust__logo {
	max-inline-size: 100%;
	max-block-size: 56px;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.75;
	transition: filter 150ms ease, opacity 150ms ease;
}

.nv6 .nv6-trust__link:hover .nv6-trust__logo {
	filter: none;
	opacity: 1;
}

/* ---------------------------------------------------------------------------
 * 10. ARTICLES
 * ------------------------------------------------------------------------ */

.nv6 .nv6-posts__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nv6 .nv6-post {
	border: 1px solid var(--nv6-border);
	border-radius: var(--nv6-r-card);
	transition: border-color 150ms ease, box-shadow 150ms ease;
}

.nv6 .nv6-post:hover {
	border-color: #c9d6de;
	box-shadow: var(--nv6-shadow-hover);
}

.nv6 .nv6-post__link {
	display: flex;
	flex-direction: column;
	gap: 8px;
	block-size: 100%;
	padding: 20px 22px;
	color: inherit;
}

.nv6 .nv6-post__link:hover {
	color: inherit;
}

.nv6 .nv6-post__kicker {
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--nv6-blue);
}

.nv6 .nv6-post__title {
	font-family: var(--nv6-condensed);
	font-size: 21px;
	font-weight: 600;
	line-height: 1.25;
}

.nv6 .nv6-post__text {
	font-size: 14px;
	line-height: 1.6;
	color: var(--nv6-muted);
}

/* ---------------------------------------------------------------------------
 * 11. CALLBACK
 * ------------------------------------------------------------------------ */

.nv6 .nv6-callback {
	padding-block-end: 52px;
}

.nv6 .nv6-callback__frame {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border: 1px solid var(--nv6-border);
	border-radius: var(--nv6-r-card);
	overflow: hidden;
}

.nv6 .nv6-callback__form {
	padding: 32px;
	background: var(--nv6-fill);
}

.nv6 .nv6-callback__form .nv6-h2 {
	margin-block-end: 10px;
	font-size: 30px;
}

.nv6 .nv6-callback__lead,
.nv6 .nv6-callback__form .nv6-lead {
	max-inline-size: 44ch;
}

.nv6 .nv6-callback__direct {
	padding: 32px;
	background: #fff;
}

.nv6 .nv6-callback__phone {
	margin: 0;
	font-family: var(--nv6-condensed);
	font-size: 34px;
	line-height: 1.2;
}

.nv6 .nv6-callback__phone a {
	color: var(--nv6-ink);
}

.nv6 .nv6-callback__mail {
	margin: 6px 0 0;
	font-size: 15px;
}

.nv6 .nv6-callback__hours {
	margin: 16px 0 0;
	font-size: 15px;
	line-height: 1.7;
	color: var(--nv6-body);
}

.nv6 .nv6-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

.nv6 .nv6-tag {
	padding: 8px 14px;
	border: 1px solid var(--nv6-border);
	border-radius: var(--nv6-r-pill);
	font-size: 13.5px;
	color: var(--nv6-body);
}

.nv6 .nv6-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.nv6 .nv6-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/*
 * A real label, not a placeholder standing in for one. The handoff draws placeholders only,
 * but a placeholder disappears the moment somebody types and leaves a screen-reader user with
 * an unnamed field. The label is visible and small; nothing about the design is lost.
 */
.nv6 .nv6-field__label {
	font-size: 13px;
	color: var(--nv6-muted-2);
}

.nv6 .nv6-input {
	inline-size: 100%;
	min-block-size: 44px;
	padding: 13px 14px;
	border: 1px solid var(--nv6-control);
	border-radius: var(--nv6-r-control);
	background: #fff;
	color: var(--nv6-ink);
	font-family: inherit;
	font-size: 15px;
}

.nv6 .nv6-input[aria-invalid="true"] {
	border-color: var(--nv6-error);
}

.nv6 .nv6-form button[type="submit"] {
	margin-block-start: 16px;
}

.nv6 .nv6-field__error {
	font-size: 13px;
	color: var(--nv6-error);
}

.nv6 .nv6-form__ok {
	margin: 0 0 16px;
	padding: 12px 14px;
	border-radius: var(--nv6-r-control);
	background: var(--nv6-blue-tint);
	color: var(--nv6-blue-active);
	font-size: 15px;
}

.nv6 .nv6-form__error {
	margin: 0 0 16px;
	padding: 12px 14px;
	border-radius: var(--nv6-r-control);
	background: #fdefec;
	color: var(--nv6-error);
	font-size: 15px;
}

/*
 * The honeypot. Off-screen rather than `display: none`: a bot that reads computed styles skips
 * anything hidden outright, so the field has to remain "visible" to a machine while being
 * unreachable for a person — hence also `aria-hidden` and `tabindex="-1"` in the markup.
 */
.nv6 .nv6-form__trap {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
 * 12. RESPONSIVE
 *
 * The handoff's three breakpoints, and only those.
 * ------------------------------------------------------------------------ */

@media (max-width: 1160px) {
	.nv6 .nv6-cats {
		grid-template-columns: repeat(3, 1fr);
	}

	.nv6 .nv6-facts__list {
		grid-template-columns: repeat(2, 1fr);
	}

	.nv6 .nv6-trust__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 1024px) {
	.nv6 {
		--nv6-gutter: 24px;

		border-radius: 0;
	}

	/* The hero stacks, so its deep bottom padding has no card to catch and the card's negative
	   margin has nothing to pull into. Both are released together — changing one without the
	   other leaves either a 180px void or an overlap onto the hero text. */
	.nv6 .nv6-hero {
		padding-block-end: 40px;
	}

	.nv6 .nv6-hero__grid {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.nv6 .nv6-hero__title {
		font-size: 44px;
		max-inline-size: none;
	}

	.nv6 .nv6-selector {
		margin-block-start: 24px;
	}

	/*
	 * `minmax(0, 1fr)`, NOT `1fr`. A grid track's default `min-width: auto` refuses to shrink
	 * below its content's min-content width, and `.nv6-guide` holds a table plus a `nowrap`
	 * link — so at 320px the single column measured 333px wide and `main.nv6`'s `overflow:
	 * hidden` silently swallowed the excess. Nothing scrolled and nothing looked wrong; the
	 * right-hand 37px of the section simply was not reachable. `minmax(0, …)` lets the track
	 * shrink and hands the overflow back to the elements that can handle it.
	 */
	.nv6 .nv6-panel,
	.nv6 .nv6-guide,
	.nv6 .nv6-callback__frame {
		grid-template-columns: minmax(0, 1fr);
	}

	.nv6 .nv6-cats {
		grid-template-columns: repeat(2, 1fr);
	}

	.nv6 .nv6-posts__list {
		grid-template-columns: 1fr;
	}

	.nv6 .nv6-h2 {
		font-size: 28px;
	}
}

@media (max-width: 720px) {
	/*
	 * Chips become one horizontally scrolling row rather than wrapping to three lines, so the
	 * panel below stays on screen while a thumb moves through the options.
	 */
	.nv6 .nv6-chips {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		/* The card's own padding is cancelled and re-applied inside, so the row can scroll
		   edge to edge instead of stopping short of it. */
		margin-inline: -32px;
		padding-inline: 32px;
	}

	.nv6 .nv6-chips::-webkit-scrollbar {
		display: none;
	}

	.nv6 .nv6-chip {
		flex: 0 0 auto;
	}

	/* Label over value: a 190px label column leaves ~90px for "перехрестя двох стелажних
	   проїздів, до 12 м" at this width. */
	.nv6 .nv6-spec__row {
		grid-template-columns: 1fr;
		gap: 2px;
	}

	.nv6 .nv6-form__row {
		grid-template-columns: 1fr;
	}

	.nv6 .nv6-cats,
	.nv6 .nv6-trust__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.nv6 .nv6-selector__card,
	.nv6 .nv6-callback__form,
	.nv6 .nv6-callback__direct,
	.nv6 .nv6-facts__panel {
		padding: 22px;
	}

	.nv6 .nv6-hero__title {
		font-size: 34px;
	}

	.nv6 .nv6-hero__img {
		block-size: 240px;
	}

	/*
	 * `nowrap` is a desktop nicety — it keeps "Все решения для объектов →" on the arrow's own
	 * line. On a phone it is the thing that made `.nv6-head` unshrinkable and pushed the whole
	 * section past a 320px viewport. Rule 11 forbids dropping the link, and rule 3 forbids
	 * shrinking the type to fit, so it wraps.
	 */
	.nv6 .nv6-all {
		white-space: normal;
	}

	/*
	 * Section heads stop being a two-up row once the link wraps: heading over link, so neither
	 * has to compete for the same 288px.
	 */
	.nv6 .nv6-head,
	.nv6 .nv6-selector__head {
		flex-direction: column;
		align-items: flex-start;
	}
}

/*
 * ---------------------------------------------------------------- touch floor
 *
 * Mobile handoff rule 2: every button, input, chip and menu row is at least 48px tall. Measured
 * before this block: buttons 47, chips 39.4, the FAQ summaries 24.7, «Все решения» 23.9, the
 * form fields 45.5 — all of them a thumb-width target that misses.
 *
 * AT 1024, NOT 720, because a tablet is a touch device too and the handoff's tablet range is
 * where the desktop nav has already become the drawer.
 *
 * `min-block-size` with flex centring rather than more padding: the box grows, the label stays
 * on its optical centre, and nothing here changes the desktop rendering.
 */
@media (max-width: 1024px) {
	.nv6 .nv6-btn,
	.nv6 .nv6-chip,
	.nv6 .nv6-all,
	.nv6 .nv6-input,
	.nv6 .nv6-faq__q {
		min-block-size: var(--wp--custom--touch--target);
	}

	.nv6 .nv6-btn,
	.nv6 .nv6-chip,
	.nv6 .nv6-all {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	/* A summary is a row, not a pill: its marker stays at the start and the text runs beside it. */
	.nv6 .nv6-faq__q {
		display: flex;
		align-items: center;
	}
}

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

/* ==========================================================================
 * HOME PAGE v2 (option 10A) — what changed from 6A
 *
 * The sections themselves are the same objects; these are the parts v2 re-specifies. Kept in one
 * block rather than edited into the rules above so a reviewer can see the delta, and so reverting
 * to 6A is a deletion.
 * ========================================================================== */

/*
 * THE HERO'S FIRST BUTTON IS GREEN, and deliberately so: the handoff calls the catalogue "the
 * volume path", and on a dark blue band a green button is the one thing the eye lands on first.
 * The blue primary is still the button everywhere else, which is why this is its own modifier
 * rather than a change to `--primary`.
 */
.nv6 .nv6-btn--go {
	color: #fff;
	background: #4c9a2a;
	border: 1px solid #4c9a2a;
}

.nv6 .nv6-btn--go:hover {
	background: #3d7d22;
	border-color: #3d7d22;
}

.nv6 .nv6-btn--go:active {
	background: #35691d;
	border-color: #35691d;
}

/* A section head: heading and note on the left, "everything of this kind" on the right. */
.nv6 .nv6-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px 20px;
	margin-block-end: 18px;
}

.nv6 .nv6-all {
	font-size: 14.5px;
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
}

.nv6 .nv6-all::after {
	content: " →";
}

/* The selector head gains the same treatment. */
.nv6 .nv6-selector__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px 20px;
}

/*
 * THE PANEL IS A TEASER NOW, NOT A SPEC SHEET. v2 replaces the four-row specification table with
 * the Рішення article's own description, three model pills and two buttons — the section stopped
 * being "here are the parameters" and became "here is the article that explains them".
 */
.nv6 .nv6-panel__desc {
	margin: 0 0 14px;
	max-inline-size: 56ch;
	font-size: 15.5px;
	line-height: 1.65;
	color: #4a5761;
}

.nv6 .nv6-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
}

.nv6 .nv6-pill {
	padding: 7px 14px;
	font-size: 13.5px;
	line-height: 1.3;
	color: #4a5761;
	border: 1px solid #e5e9ec;
	border-radius: 999px;
}

/* ---------------------------------------------------------------- Часті питання */

/*
 * Two columns of `<details>`. `column-count` rather than a grid: the six items have different
 * heights and a grid would leave a ragged gap under the shorter column, while columns simply
 * flow. Each item is `break-inside: avoid` so a question is never split across the two.
 */
.nv6 .nv6-faq__grid {
	column-count: 2;
	column-gap: 32px;
}

.nv6 .nv6-faq__item {
	break-inside: avoid;
	padding-block: 14px;
	border-block-start: 1px solid #eef1f3;
}

.nv6 .nv6-faq__q {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	cursor: pointer;
	list-style: none;
}

/* The default disclosure triangle is hidden in both engines and replaced by a drawn chevron,
   so the control still announces its open state without carrying two markers. */
.nv6 .nv6-faq__q::-webkit-details-marker {
	display: none;
}

.nv6 .nv6-faq__q::after {
	content: "";
	float: inline-end;
	inline-size: 0.4em;
	block-size: 0.4em;
	margin-block-start: 0.35em;
	margin-inline-start: 12px;
	border-block-end: 2px solid #1a72b8;
	border-inline-end: 2px solid #1a72b8;
	transform: rotate(45deg);
	transition: transform 150ms ease;
}

.nv6 .nv6-faq__item[open] .nv6-faq__q::after {
	transform: rotate(-135deg);
	margin-block-start: 0.6em;
}

.nv6 .nv6-faq__q:focus-visible {
	outline: 2px solid #1a72b8;
	outline-offset: 2px;
}

.nv6 .nv6-faq__a {
	margin-block-start: 8px;
	max-inline-size: 60ch;
	font-size: 14.5px;
	line-height: 1.65;
	color: #4a5761;
}

@media (max-width: 64rem) {
	.nv6 .nv6-faq__grid {
		column-count: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nv6 .nv6-faq__q::after {
		transition: none;
	}
}

/* ---------------------------------------------------------------- Допомога у виборі */

/*
 * The tool card is pinned above the article list and is the only filled card in the column, so
 * the one thing that ANSWERS the question outranks the four things that explain it.
 */
.nv6 .nv6-tool {
	display: block;
	padding: 18px 20px;
	margin-block-end: 6px;
	text-decoration: none;
	background: #eef5fb;
	border: 1px solid #cfe0ee;
	border-radius: 14px;
	transition: border-color 150ms ease, box-shadow 150ms ease;
}

.nv6 .nv6-tool:hover {
	border-color: #9cc3e0;
	box-shadow: 0 8px 22px rgb(15 44 63 / 7%);
}

.nv6 .nv6-tool__kicker {
	display: block;
	margin-block-end: 6px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #155f9b;
}

.nv6 .nv6-tool__title {
	display: block;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	color: #16232c;
}

.nv6 .nv6-tool__text {
	display: block;
	margin-block-start: 6px;
	font-size: 13.5px;
	line-height: 1.6;
	color: #4a5761;
}

.nv6 .nv6-tool__link {
	display: block;
	margin-block-start: 10px;
	font-size: 13.5px;
	font-weight: 600;
	color: #1a72b8;
}

/* The articles are a list, not cards: they are the column's supporting material. */
.nv6 .nv6-advices {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nv6 .nv6-advice {
	border-block-start: 1px solid #eef1f3;
}

.nv6 .nv6-advice a {
	display: block;
	padding-block: 13px;
	text-decoration: none;
}

.nv6 .nv6-advice__t {
	display: block;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.25;
	color: #16232c;
}

.nv6 .nv6-advice a:hover .nv6-advice__t {
	color: #1a72b8;
}

.nv6 .nv6-advice__d {
	display: block;
	margin-block-start: 3px;
	font-size: 13.5px;
	line-height: 1.5;
	color: #7b8891;
}

.nv6 .nv6-advice a:focus-visible {
	outline: 2px solid #1a72b8;
	outline-offset: 2px;
}