/*
 * NG tech: оформление по образцу прежнего лендинга ngtechgrill.tb.ru.
 * Цвета и шрифты — в theme.json; здесь то, что блоками не задаётся.
 */

html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 24px; }
.wp-site-blocks { position: relative; }

/* Секции главной идут встык, без белых полос между ними. */
.wp-block-post-content > .alignfull + .alignfull,
.wp-site-blocks > footer,
.wp-site-blocks > main { margin-block-start: 0; }
.wp-site-blocks > main { padding-block-end: 0; }

/* Заголовки на тёмном фоне и на фото — белые (глобально заголовки #111). */
.wp-block-cover h1, .wp-block-cover h2, .wp-block-cover h3,
.has-base-color h1, .has-base-color h2, .has-base-color h3 { color: inherit; }

/* ---------- Шапка ---------- */
.ng-header { background: #111; }
/* На главной меню лежит прямо на видео, без полосы и без названия слева — как на tb.ru. */
.home .ng-header { position: absolute; top: 0; left: 0; right: 0; z-index: 20; background: transparent; }
.home .ng-header .wp-block-site-title { visibility: hidden; }

/* ---------- Обложка с видео ---------- */
.ng-hero h1 { margin: 0 0 24px; }
.ng-hero .wp-block-buttons { margin-top: 40px; }

/* ---------- «Почему лучший выбор»: номер слева, текст справа, линии между пунктами ---------- */
.ng-adv-list { margin-top: 48px !important; }
.ng-adv-row {
	border-top: 1px solid rgba(17, 17, 17, .12);
	padding-block: 40px;
	margin: 0 !important;
}
.ng-adv-row:last-child { border-bottom: 1px solid rgba(17, 17, 17, .12); }
.ng-adv-row h3 { margin-top: 0; }
.ng-num {
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 112px;
	line-height: .9;
	color: rgba(17, 17, 17, .24);
	margin: 0;
}
@media (max-width: 781px) {
	.ng-num { font-size: 64px; }
}

/* ---------- Каталог: фото-карточки, текст поверх, цена белой «пилюлей», сетка 3 + 2 ---------- */
.ng-catalog .woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 40px;
	margin: 0;
	padding: 0;
}
.ng-catalog .woocommerce ul.products::before,
.ng-catalog .woocommerce ul.products::after { display: none; }
.ng-catalog .woocommerce ul.products li.product {
	grid-column: span 2;
	width: auto;
	margin: 0;
	float: none;
	position: relative;
	height: 316px;
	overflow: hidden;
	background: #fff;
}
/* По три карточки в ряд. Неполный ряд не оставляем с дыркой: 2 карточки — две широкие,
 * 4 — по две в ряд, 5 — 3 + 2 (нижние шире, как было на tb.ru). */
.ng-catalog .woocommerce ul.products li.product:first-child:nth-last-child(2),
.ng-catalog .woocommerce ul.products li.product:first-child:nth-last-child(2) ~ li,
.ng-catalog .woocommerce ul.products li.product:first-child:nth-last-child(4),
.ng-catalog .woocommerce ul.products li.product:first-child:nth-last-child(4) ~ li,
.ng-catalog .woocommerce ul.products li.product:nth-child(4):nth-last-child(2),
.ng-catalog .woocommerce ul.products li.product:nth-child(5):nth-last-child(1) { grid-column: span 3; }
.ng-catalog .woocommerce ul.products li.product:only-child { grid-column: span 3; }
.ng-catalog .woocommerce + h3 { margin-top: 56px; }
.ng2-models .woocommerce + h3 { margin-top: 48px; }
.ng-catalog li.product a.woocommerce-LoopProduct-link {
	display: block;
	height: 100%;
	color: #fff;
	text-decoration: none;
}
.ng-catalog li.product a.woocommerce-LoopProduct-link img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	margin: 0 !important;
}
.ng-catalog li.product a.woocommerce-LoopProduct-link::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .15);
}
.ng-catalog li.product .woocommerce-loop-product__title,
.ng-catalog li.product .ng-loop-excerpt {
	position: relative;
	z-index: 2;
	color: #fff;
	text-shadow: 0 1px 6px rgba(0, 0, 0, .45);
	padding: 0 20px !important;
	text-align: left;
}
.ng-catalog li.product .woocommerce-loop-product__title {
	font-size: 20px !important;
	line-height: 1.25;
	padding-top: 20px !important;
	margin: 0 0 8px !important;
}
.ng-catalog li.product .ng-loop-excerpt { font-size: 14px; line-height: 1.4; margin: 0; }
.ng-catalog li.product .price {
	position: absolute;
	left: 20px;
	bottom: 20px;
	z-index: 2;
	background: #fff;
	color: #111;
	border-radius: 100px;
	padding: 14px 20px;
	font-size: 16px;
	line-height: 1.25;
	margin: 0;
}
.ng-catalog li.product .button,
.ng-catalog li.product .added_to_cart { display: none; }
@media (max-width: 781px) {
	.ng-catalog .woocommerce ul.products { grid-template-columns: 1fr; gap: 20px; }
	.ng-catalog .woocommerce ul.products li.product,
	.ng-catalog .woocommerce ul.products li.product:nth-child(n) { grid-column: auto !important; }
}

/* ---------- Секции моделей: заголовок поверх слайдера фото ---------- */
.ng-product { position: relative; padding-left: 0 !important; padding-right: 0 !important; }
.ng-product > .wp-block-heading {
	position: absolute;
	z-index: 3;
	top: 48px;
	left: max(20px, calc((100% - 864px) / 2));
	right: 20px;
	max-width: none;
	margin: 0;
	pointer-events: none;
	text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}
.ng-product > .ng-slider { max-width: none !important; }
.ng-slider {
	display: flex;
	gap: 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	margin: 0 !important;
}
.ng-slider::-webkit-scrollbar { display: none; }
.ng-slider > .wp-block-cover {
	flex: 0 0 100%;
	scroll-snap-align: start;
	min-height: min(768px, 100vh);
	margin: 0 !important;
	padding-bottom: 72px;
}
.ng-slider .wp-block-cover p {
	font-size: 16px;
	text-align: center;
	max-width: 720px;
	margin-inline: auto;
	text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
}
.ng-slider-btn {
	position: absolute;
	top: 50%;
	z-index: 4;
	width: 40px;
	height: 40px;
	margin-top: -20px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .85);
	color: #111;
	font-size: 22px;
	line-height: 40px;
	cursor: pointer;
}
.ng-slider-btn--prev { left: 16px; }
.ng-slider-btn--next { right: 16px; }
.ng-slider-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 24px;
	z-index: 4;
	display: flex;
	justify-content: center;
	gap: 8px;
}
.ng-slider-dots button {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .5);
	cursor: pointer;
}
.ng-slider-dots button[aria-current="true"] { background: #fff; }

/* ---------- Контакты ---------- */
.ng-contacts p { color: #111; font-size: 20px; line-height: 1.4; }
.ng-contacts .ng-address { color: rgba(17, 17, 17, .48); font-size: 16px; }

/* ---------- Подвал главной: фото и карточка с QR и соцсетями поверх ---------- */
.ng-social-card {
	position: relative;
	z-index: 2;
	margin-top: -140px !important;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 16px 20px rgba(17, 17, 17, .07);
	padding: 24px 24px 32px;
}
.ng-social-card p { font-size: 14px; }
.ng-social-card .wp-block-social-links { gap: 12px; }

/* ---------- Нижняя строка ---------- */
.ng-footer p { color: rgba(17, 17, 17, .7); margin: 0; }

/* =====================================================================
 * Переключатель вариантов (временно, пока владелец выбирает)
 * ===================================================================== */
.ng-variant {
	position: fixed;
	left: 16px;
	bottom: 16px;
	z-index: 100;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 8px 6px 14px;
	border-radius: 100px;
	background: #111;
	color: #fff;
	font: 14px/1.2 "Golos Text", system-ui, sans-serif;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
}
.ng-variant span { opacity: .7; }
.ng-variant a { color: #fff; text-decoration: none; padding: 6px 12px; border-radius: 100px; }
.ng-variant a[aria-current="true"] { background: #E15F41; }
body:not(.ng-v2) .ng-v2-only { display: none !important; }

/* =====================================================================
 * Новый вариант: body.ng-v2
 * Текст — Golos Text, заголовки — Russo One, кнопки — красные,
 * шапка — тёмная полоса с телефоном на всех страницах.
 * ===================================================================== */
.ng-v2 { font-family: "Golos Text", system-ui, sans-serif; font-size: 17px; line-height: 1.55; }
.ng-v2.home .ng-header { position: static; background: #111; }
.ng-v2.home .ng-header .wp-block-site-title { visibility: visible; }
.ng-v2 .ng-header-phone { margin: 0; font-family: var(--wp--preset--font-family--russo-one); white-space: nowrap; }
.ng-v2 .ng-header-phone a { text-decoration: none; }

.ng-v2 .wp-element-button,
.ng-v2 .wp-block-button__link { background: #E15F41; color: #fff; }
.ng-v2 .is-style-outline > .wp-block-button__link {
	background: transparent;
	color: inherit;
	border: 2px solid currentColor;
	padding: 12px 26px;
}
.ng-fab {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 100;
	padding: 14px 22px;
	border-radius: 100px;
	background: #E15F41;
	color: #fff;
	font-family: var(--wp--preset--font-family--russo-one);
	text-decoration: none;
	box-shadow: 0 6px 20px rgba(225, 95, 65, .45);
}

.ng2-hero h1 { margin-bottom: 16px; }
.ng2-facts { opacity: .8; font-size: 15px; }

/* Карточки преимуществ, отзывов, условий */
.ng2-card {
	background: #fff;
	border-radius: 16px;
	padding: 28px;
	box-shadow: 0 8px 24px rgba(17, 17, 17, .06);
}
.has-accent-2-background-color .ng2-card { background: #fff; }
.has-base-background-color .ng2-card,
.ng2-plain .ng2-card { background: #F6F7F8; box-shadow: none; }
.ng2-card h3 { font-size: 20px; margin: 0 0 10px; }
.ng2-card p { margin: 0; }

/* Каталог: карточка — фото сверху, название, описание, цена, кнопка */
.ng2-models .woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	margin: 0;
	padding: 0;
}
.ng2-models .woocommerce ul.products::before,
.ng2-models .woocommerce ul.products::after { display: none; }
.ng2-models .woocommerce ul.products li.product {
	display: flex;
	flex-direction: column;
	width: auto;
	margin: 0;
	float: none;
	padding-bottom: 24px;
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 8px 24px rgba(17, 17, 17, .07);
	text-align: left;
}
.ng2-models li.product a.woocommerce-LoopProduct-link { color: inherit; text-decoration: none; flex: 1; }
.ng2-models li.product a.woocommerce-LoopProduct-link img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	margin: 0 0 16px !important;
}
.ng2-models li.product .woocommerce-loop-product__title {
	padding: 0 24px !important;
	font-size: 20px !important;
	margin: 0 0 6px !important;
}
.ng2-models li.product .ng-loop-excerpt { padding: 0 24px; margin: 0 0 12px; font-size: 15px; color: #5b6275; }
.ng2-models li.product .price {
	display: block;
	padding: 0 24px;
	font-family: var(--wp--preset--font-family--russo-one);
	font-size: 22px !important;
	color: #111 !important;
}
.ng2-models li.product .button {
	align-self: flex-start;
	margin: 16px 24px 0 !important;
	border-radius: 100px;
	background: #E15F41 !important;
	color: #fff !important;
}
@media (max-width: 781px) {
	.ng2-models .woocommerce ul.products { grid-template-columns: 1fr; gap: 20px; }
}

/* Вопросы и ответы */
.ng2-faq .wp-block-details {
	border-bottom: 1px solid rgba(17, 17, 17, .12);
	padding: 18px 0;
	margin: 0 !important;
}
.ng2-faq .wp-block-details summary {
	font-family: var(--wp--preset--font-family--russo-one);
	font-size: 19px;
	color: #111;
	cursor: pointer;
}
.ng2-faq .wp-block-details p { margin: 10px 0 0; }

/* Контакты */
.ng2-phone { font-family: var(--wp--preset--font-family--russo-one); font-size: 28px; line-height: 1.3; }
.ng2-phone a { text-decoration: none; }

@media (max-width: 600px) {
	.ng-variant span { display: none; }
	.ng-fab { padding: 12px 16px; font-size: 14px; }
	.ng-v2 .ng-header-phone { display: none; }
}

/* «Как это работает» под карточками преимуществ — свёрнутое подробное объяснение */
.ng2-more { margin-top: 32px !important; border-top: 1px solid rgba(17, 17, 17, .12); }