/*!
Theme Name: Autopr New
Theme URI:
Author: Dmitry_V
Author URI: https://rozmuar.ru/
Description: Description
Version: 0.49.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: apr
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

autopr is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/* Main navbar isn't actually sticky: css/style.css has a bare `nav{position:sticky;
   top:0;...}` rule (specificity 0,0,1), but Bootstrap's own `.navbar{position:relative;
   ...}` component rule (specificity 0,1,0 — a class always beats a tag) wins regardless
   of load order, so the mockup's sticky-nav intent never actually applied. Most visible
   when the mobile menu is open and long: scrolling the page drags the whole navbar
   (burger included) off-screen instead of keeping it pinned. Found 2026-09-22. */
.navbar {
	position: sticky;
	top: 0;
	z-index: 1000;
}

/* Header nav (menu-1) is now wp_nav_menu() output — WP marks the active item on the
   <li> (current-menu-item / current_page_item / current-menu-ancestor), not on the
   <a> like the mockup's hardcoded .active did. Reuse the mockup's own hover/active
   look for those. */
nav ul li.current-menu-item a,
nav ul li.current_page_item a,
nav ul li.current-menu-ancestor a {
	color: #fff;
	background: rgba(0, 176, 240, .18);
}

/* Мессенджеры иконками перед «Получить расчёт» (li.nav-socials в menu-1). */
nav ul li.nav-socials {
	display: flex;
	align-items: center;
	gap: 8px;
}

nav ul li.nav-socials a {
	display: inline-flex;
	padding: 0;
	background: none;
}

nav ul li.nav-socials img {
	width: 28px;
	height: 28px;
	border-radius: 6px;
	transition: opacity .2s;
}

nav ul li.nav-socials a:hover img {
	opacity: .8;
}

/* Мессенджеры иконками в подвале, колонка «Контакты» (li.footer-messengers). */
.footer-col ul li.footer-messengers {
	display: flex;
	align-items: center;
	gap: 8px;
}

.footer-col ul li.footer-messengers a {
	display: inline-flex;
}

.footer-col ul li.footer-messengers img {
	width: 28px;
	height: 28px;
	border-radius: 6px;
	transition: opacity .2s;
}

.footer-col ul li.footer-messengers a:hover img {
	opacity: .8;
}

/* Меню по центру между логотипом и правой группой (соцсети + «Получить расчёт»):
   авто-отступы слева от первого пункта и слева от правой группы делят свободное место поровну. */
@media (min-width: 992px) {
	.navbar-expand-lg .navbar-collapse {
		flex-grow: 1;
	}

	#mainNav > ul {
		width: 100%;
		align-items: center;
		padding-left: 0;
	}

	#mainNav > ul > li:first-child,
	#mainNav > ul > li.nav-socials,
	#mainNav > ul > li.nav-cta-item {
		margin-left: auto;
	}

	#mainNav > ul > li.nav-socials {
		margin-right: 10px;
	}

	#mainNav > ul > li.nav-socials + li.nav-cta-item {
		margin-left: 0;
	}
}

/* Мобильный: мессенджеры перед бургером, в раскрытом меню их нет. */
.nav-socials-mobile {
	align-items: center;
	gap: 8px;
	margin-left: auto;
	margin-right: 12px;
}

.nav-socials-mobile a {
	display: inline-flex;
}

.nav-socials-mobile img {
	width: 28px;
	height: 28px;
	border-radius: 6px;
}

/* Мобильный: контакты из топбара внизу раскрытого меню, сам топбар скрыт. */
.nav-contacts-mobile {
	border-top: 1px solid rgba(255, 255, 255, .1);
	padding: 12px 6px 14px;
	font-size: 13px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .6);
	flex-direction: column;
	gap: 6px;
}

.nav-contacts-mobile a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	align-self: flex-start;
	color: rgba(255, 255, 255, .8);
	text-decoration: none;
}

/* Иконки почты и телефона (SVG из header.php) — белые, одного размера, отступ 8px; в топбаре и мобильном меню. */
.topbar-contacts a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.topbar-contacts svg,
.nav-contacts-mobile svg {
	flex-shrink: 0;
	color: #fff;
}

.nav-contacts-mobile a:hover {
	color: var(--blue);
}

@media (max-width: 991.98px) {
	.topbar {
		display: none;
	}

	.nav-contacts-mobile {
		display: flex;
	}

	.nav-socials-mobile {
		display: flex;
	}

	nav ul li.nav-socials {
		display: none;
	}
}

/* WordPress pagination (the_posts_pagination) — not part of the html/ mockup, own styling.
   Reset background/position/box-shadow/z-index: css/style.css has a bare `nav{...}` rule
   meant for the site navbar that otherwise bleeds onto this <nav> too.
   Bootstrap's own `.pagination{display:flex}` (its <ul> component) also matches this
   <nav class="pagination">, making .nav-links a flex item — flex items get "blockified"
   (inline-flex computes to flex), so text-align on the parent has no effect once that
   happens. Centering has to go through justify-content on the flex parent instead. */
.pagination {
	margin-top: 40px;
	display: flex;
	justify-content: center;
	background: none;
	position: static;
	box-shadow: none;
	z-index: auto;
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	font-weight: 600;
	text-decoration: none;
}

.pagination a.page-numbers {
	color: #000;
	border: 1px solid #000;
}

.pagination .page-numbers.current {
	color: var(--white);
	background: var(--dark);
	border: 1px solid var(--dark);
}

.pagination .page-numbers.dots {
	width: auto;
	border: none;
}

.pagination .prev.page-numbers,
.pagination .next.page-numbers {
	display: none;
}

/* ============================================================
   Страница «Цены» (page-templates/template-ceny.php)
   Собственный дизайн под ACF-данные старой темы (new_price,
   oklejka_ceny, pochemu_mozhno_doveryat, posty, calculation option),
   в стилистике остальной темы — переиспользует .calc-wrap/.calc-field
   (как на главной), .faq-list (как на «Контактах»), .val-card
   (как на «О компании»), .port-card, .svc-card, .form-wrap/.form-row.
   ============================================================ */

/* --- Таблица цен (new_price repeater) ---
   Разметка и структура повторяют .box-price* из старой темы
   (wp-content/themes/autopr/css/style.css:5820-5926) — белая карточка с
   серой "подложкой" под колонками и белыми строками-пилюлями цен внутри неё;
   перекрашено под палитру autopr_new (var(--blue)/var(--dark)/var(--gray))
   вместо старых #2980b9/#2c3e50/#efefef/#32bc51. */
.price-card {
	background: #fff;
	border: 2px solid var(--gray2);
	border-radius: 12px;
	padding: 0 15px;
	margin-bottom: 20px;
	overflow: hidden;
}

.price-card-head {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 0;
}

.price-card-img {
	width: 56px;
	flex-shrink: 0;
}

.price-card-img img {
	width: 100%;
	display: block;
}

.price-card-title {
	font-family: 'Onest', sans-serif;
	font-weight: 800;
	letter-spacing: .03em;
	text-transform: uppercase;
	font-size: 21px;
	line-height: 1.1;
	color: var(--dark);
	flex: 1;
}

.price-order-btn {
	flex-shrink: 0;
}

.price-cont {
	background: var(--gray);
	margin: 0 -15px;
	padding: 14px 15px 4px;
}

.price-part {
	position: relative;
	padding-bottom: 10px;
}

.price-part:not(.price-part-last)::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	border-right: 1px solid rgba(44, 62, 80, .11);
}

@media (max-width: 991px) {
	.price-part:not(.price-part-last)::after {
		display: none;
	}
}

.price-part-label {
	font-weight: 800;
	color: var(--blue);
	margin: 0 0 8px;
	font-size: 14px;
}

.price-row {
	background: #fff;
	border-radius: 9px;
	padding: 5px 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 5px;
	font-size: 13px;
	color: var(--dark);
}

.price-row b {
	color: var(--blue);
	font-weight: 700;
	white-space: nowrap;
}

/* --- Блок доверия «Почему нам можно доверять» --- */
.trust-phone-cta {
	text-align: center;
	padding: 32px 0;
}

.trust-phone-cta p {
	font-size: 18px;
	color: var(--muted);
	margin-bottom: 8px;
}

.trust-phone-cta a {
	font-family: 'Onest', sans-serif;
	font-size: 28px;
	font-weight: 800;
	color: var(--dark);
	text-decoration: none;
}

.trust-phone-cta a:hover {
	color: var(--blue);
}

/* Как в старой теме: обычный нумерованный список, не карточки */
.trust-list {
	max-width: 900px;
	margin: 0 auto;
}

.trust-list li {
	list-style: none;
	position: relative;
	padding-left: 40px;
	margin-bottom: 20px;
	font-size: 15px;
	color: var(--muted);
	line-height: 1.7;
}

.trust-list li b.trust-num {
	position: absolute;
	left: 0;
	top: 0;
	font-family: 'Onest', sans-serif;
	font-weight: 800;
	color: var(--dark);
	font-size: 16px;
}

/* --- FAQ: ряд + синяя круглая стрелка (как на автопр.про), не +/- аккордеон --- */
.faq-row-list {
	max-width: 900px;
	margin: 0 auto;
}

.faq-row {
	border: 0.5px solid var(--gray2);
	border-radius: 8px;
	margin-bottom: 10px;
	overflow: hidden;
	background: #fff;
}

.faq-row-q {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 16px 20px;
	cursor: pointer;
	font-weight: 700;
	font-size: 15px;
	color: var(--dark);
}

.faq-row-arrow {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--blue);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 14px;
	transition: transform .3s;
}

.faq-row.open .faq-row-arrow {
	transform: rotate(90deg);
}

.faq-row-a {
	padding: 0 20px 18px;
	font-size: 14px;
	color: var(--muted);
	line-height: 1.7;
	display: none;
}

.faq-row.open .faq-row-a {
	display: block;
}

/* --- «Примеры недавних работ»: статичная серая подпись под фото, не hover-оверлей --- */
.example-card {
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
	border: 0.5px solid var(--gray2);
	height: 100%;
}

.example-card img {
	width: 100%;
	height: 180px;
	object-fit: cover;
	display: block;
}

.example-card-body {
	background: var(--gray);
	padding: 14px 16px;
}

.example-card-body h4 {
	font-size: 13px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .5px;
	color: var(--dark);
	margin-bottom: 4px;
}

.example-card-body p {
	font-size: 12px;
	color: var(--muted);
	margin-bottom: 8px;
	line-height: 1.4;
}

.example-card-arrow {
	color: var(--blue);
	font-size: 16px;
}

/* --- Калькуляторы: светлая карточка (как на автопр.про), не тёмная .calc-wrap --- */
.calc-card-light {
	background: #fff;
	border: 0.5px solid var(--gray2);
	border-radius: 14px;
	padding: 32px;
}

.calc-card-light .calc-field-label {
	font-size: 13px;
	font-weight: 700;
	color: var(--dark);
	text-transform: uppercase;
	letter-spacing: .5px;
	margin-bottom: 14px;
}

.pill-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.pill-list.pill-list-row {
	flex-direction: row;
	flex-wrap: wrap;
}

.pill-radio {
	position: relative;
}

.pill-radio input {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
}

.pill-radio span {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	padding: 11px 16px;
	border-radius: 8px;
	background: var(--gray);
	color: var(--dark);
	font-size: 14px;
	transition: all .2s;
}

.pill-radio span::after {
	content: '';
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid var(--gray2);
	flex-shrink: 0;
	background: #fff;
}

.pill-radio input:checked + span {
	background: rgba(0, 176, 240, .1);
}

.pill-radio input:checked + span::after {
	content: '✓';
	background: var(--blue);
	border-color: var(--blue);
	color: #fff;
	font-size: 11px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pill-check {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 14px;
	color: var(--dark);
	cursor: pointer;
	margin-bottom: 12px;
}

.pill-check input {
	width: 18px;
	height: 18px;
	accent-color: var(--blue);
	flex-shrink: 0;
}

/* Галочки в тёмном калькуляторе главной (home-calc): перебивают .calc-field label/input макета */
/* Поля размеров в калькуляторе главной — без стрелок вверх/вниз у type=number */
.calc-field input[type=number] {
	-moz-appearance: textfield;
}

.calc-field input[type=number]::-webkit-outer-spin-button,
.calc-field input[type=number]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Три поля размеров в строку на телефоне: подсказки «Ширина (м)*» иначе обрезаются */
@media (max-width: 575.98px) {
	.calc-field input[type=number] {
		padding-left: 8px;
		padding-right: 8px;
		font-size: 13px;
	}
}

.calc-checks {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
}

/* На телефоне галочки — одна под другой */
@media (max-width: 575.98px) {
	.calc-checks {
		flex-direction: column;
	}
}

.calc-field .calc-check {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 14px;
	font-weight: 400;
	color: #fff;
	text-transform: none;
	letter-spacing: 0;
	margin-bottom: 0;
	cursor: pointer;
}

.calc-field .calc-check input {
	width: 18px;
	height: 18px;
	padding: 0;
	appearance: auto;
	accent-color: var(--blue);
	flex-shrink: 0;
}

.dim-icon-row {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 16px;
}

.dim-icon-row img {
	width: 64px;
	flex-shrink: 0;
}

.dim-icon-row .row {
	flex: 1;
}

/* --- Плёнки-тарифы (как .plenka__el в старой теме) --- */
.film-tier-card {
	background: #F5F8FA;
	border-radius: 8px;
	border: 3px solid #fff;
	box-shadow: 0 0 0 1px var(--gray2);
	overflow: hidden;
	transition: box-shadow .2s;
	height: 100%;
}

.film-tier-card:hover {
	box-shadow: 0 0 0 1px var(--blue);
}

.film-tier-head {
	padding: 10px 16px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: #fff;
}

.film-tier-head .film-tier-name {
	font-weight: 700;
	font-size: 15px;
}

.film-tier-stars {
	font-size: 11px;
	white-space: nowrap;
}

.film-tier-elEk .film-tier-head,
.film-tier-elEk .film-tier-select {
	background: #8ED6F5;
}

.film-tier-elMid .film-tier-head,
.film-tier-elMid .film-tier-select {
	background: #4CC3F0;
}

.film-tier-elLux .film-tier-head,
.film-tier-elLux .film-tier-select {
	background: var(--blue);
}

.film-tier-elPrem .film-tier-head,
.film-tier-elPrem .film-tier-select {
	background: var(--blue-d);
}

.film-tier-body {
	padding: 16px;
}

.film-tier-price {
	font-family: 'Onest', sans-serif;
	font-size: 32px;
	font-weight: 800;
	color: var(--blue);
	line-height: 1;
	margin-bottom: 14px;
}

.film-tier-price small {
	font-size: 13px;
	font-weight: 400;
	color: var(--muted);
}

.film-tier-total {
	font-family: 'Onest', sans-serif;
	font-size: 26px;
	font-weight: 800;
	color: var(--blue);
	margin-top: 2px;
}

.film-tier-total:empty {
	display: none;
}

.film-tier-select {
	border: none;
	border-radius: 30px;
	color: #fff;
	padding: 6px 20px;
	font-size: 13px;
	cursor: pointer;
	margin-bottom: 16px;
}

.film-tier-desc {
	display: flex;
	justify-content: space-between;
	font-size: 13px;
	color: var(--muted);
	margin-bottom: 8px;
	padding-bottom: 8px;
	border-bottom: 1px solid #e4e4e4;
}

.film-tier-desc b {
	color: var(--dark);
	font-weight: 600;
}

.film-tier-desc.film-tier-green,
.film-tier-desc.film-tier-green b {
	color: #27ae60;
	border-bottom: none;
}

/* --- Подчёркнутые поля попапов заявки (.myhidform/.myhidform_price в footer.php).
   Форма «Получить скидку» — отдельно, .apr-lead (inc/lead-form.php). --- */
.underline-field {
	text-align: left;
	margin-bottom: 6px;
}

.underline-field label {
	display: block;
	font-size: 13px;
	color: var(--muted);
	margin-bottom: 6px;
}

.underline-field input {
	width: 100%;
	background: none;
	border: none;
	border-bottom: 1px solid var(--gray2);
	padding: 6px 2px;
	font-size: 15px;
	color: var(--dark);
	font-family: 'Onest', sans-serif;
	outline: none;
	transition: border-color .2s;
}

.underline-field input:focus {
	border-color: var(--blue);
}

/* --- «Стоимость печати» (реальный контент страницы /ceny/ — raw HTML-блок
   в post_content: <h3 class="h1">Стоимость<br>Печати</h3> + <table
   class="newTable newTableWithLine">). Правим только оформление через CSS,
   сам контент страницы не трогаем. Старые классы .newTable/.newTableWithLine
   — wp-content/themes/autopr/css/style.css:1093,2129-2151 — светло-серая
   таблица с вертикальной чертой между двумя группами колонок; перекрашено
   под палитру autopr_new. */
.entry-content h3.h1 {
	text-align: center;
	white-space: nowrap;
	font-family: 'Onest', sans-serif;
	font-size: 32px;
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--dark);
	margin: 48px 0 28px;
}

.entry-content table.newTable {
	background: var(--gray);
	border-radius: 12px;
	padding: 24px;
	width: 100%;
	border-collapse: collapse;
	display: block;
	overflow-x: auto;
}

.entry-content table.newTable th {
	background: transparent;
	color: var(--muted);
	font-weight: 600;
	font-size: 13px;
	text-align: left;
	padding: 10px 14px;
	white-space: nowrap;
}

.entry-content table.newTableWithLine td {
	color: var(--dark);
	font-size: 14px;
	padding: 8px 14px;
	white-space: nowrap;
}

.entry-content table.newTableWithLine tr td:first-of-type {
	color: var(--muted);
}

.entry-content table.newTableWithLine tr:nth-of-type(2) td:not(:first-of-type) {
	border-bottom: 1px solid var(--gray2);
}

.entry-content table.newTableWithLine tr td:nth-of-type(4) {
	border-right: 1px solid var(--gray2);
}

.entry-content table.newTableWithLine tr:first-of-type th:nth-of-type(2) {
	border-right: 1px solid var(--gray2);
}

/* --- Карточки каталога («Печать наклеек для авто») — модификатор поверх
   .svc-card (не трогаем базовые правила — .svc-card используется и на
   главной для карточек услуг с обычными фото). Картинка выше и без обрезки
   (object-fit:contain — на карточках сервисов cover уместен, тут нет), а
   количество+кнопка всегда прижаты к низу карточки независимо от длины
   названия/цены. */
.catalog-card .svc-card-img {
	height: 260px;
	background: var(--gray);
}

.catalog-card .svc-card-img img {
	object-fit: contain;
	padding: 14px;
}

.catalog-card-footer {
	margin-top: auto;
}

/* ============================================================
   Магазин: страница товара (single-catalog.php) и корзина
   (page-templates/template-korzina.php).
   ============================================================ */

/* --- Галерея товара --- */
.product-gallery-main {
	background: var(--gray);
	border-radius: 14px;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.product-gallery-main img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 20px;
}

.product-gallery-thumbs {
	display: flex;
	gap: 10px;
	margin-top: 12px;
}

.product-gallery-thumbs img {
	width: 64px;
	height: 64px;
	object-fit: contain;
	background: var(--gray);
	border-radius: 8px;
	padding: 6px;
	cursor: pointer;
	border: 2px solid transparent;
	transition: border-color .2s;
}

.product-gallery-thumbs img.active,
.product-gallery-thumbs img:hover {
	border-color: var(--blue);
}

/* --- Корзина --- */
.cart-row {
	display: grid;
	grid-template-columns: 64px 1fr auto auto auto;
	align-items: center;
	gap: 16px;
	padding: 14px 0;
	border-bottom: 0.5px solid var(--gray2);
}

.cart-row-photo img {
	width: 64px;
	height: 64px;
	object-fit: contain;
	background: var(--gray);
	border-radius: 8px;
	padding: 6px;
}

.cart-row-name {
	font-size: 14px;
	color: var(--dark);
}

.cart-row-name span {
	display: block;
	font-size: 12px;
	color: var(--muted);
}

.cart-row-qty {
	display: flex;
	align-items: center;
	background: var(--gray);
	border-radius: 8px;
}

.cart-row-qty .minus,
.cart-row-qty .plus {
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--dark);
	user-select: none;
}

.cart-row-qty input {
	width: 34px;
	border: none;
	background: none;
	text-align: center;
	font-size: 14px;
}

.cart-row-price {
	font-weight: 700;
	color: var(--dark);
	white-space: nowrap;
}

.cart-row-remove {
	color: var(--muted);
	cursor: pointer;
	font-size: 16px;
	transition: color .2s;
}

.cart-row-remove:hover {
	color: #e05a4e;
}

.cart-empty {
	color: var(--muted);
	font-size: 15px;
}

.cart-thanks-title {
	font-family: 'Onest', sans-serif;
	font-size: 22px;
	font-weight: 800;
	color: var(--dark);
	margin-bottom: 8px;
}

.cart-thanks-text {
	color: var(--muted);
}

@media (max-width: 575px) {
	.cart-row {
		grid-template-columns: 48px 1fr;
		grid-template-areas:
			"photo name"
			"qty qty"
			"price remove";
	}

	.cart-row-photo { grid-area: photo; }
	.cart-row-name { grid-area: name; }
	.cart-row-qty { grid-area: qty; margin-top: 8px; }
	.cart-row-price { grid-area: price; }
	.cart-row-remove { grid-area: remove; justify-self: end; }
}

.catalog-card .add_cart {
	white-space: nowrap;
	text-align: center;
}

/* На узких карточках (2 в ряд на мобильном) "Перейти в корзину" (после
   добавления) не помещается рядом со счётчиком количества, даже без
   переноса слов внутри самой кнопки — расширяет карточку по горизонтали.
   Переносим саму кнопку на отдельную строку, а не текст внутри неё. */
@media (max-width: 400px) {
	.catalog-card-actions {
		flex-wrap: wrap;
	}

	.catalog-card-actions .add_cart {
		flex-basis: 100%;
	}
}

/* ============================================================
   Всплывающие формы заявки (.myhidform / .myhidform_price) —
   ported from wp-content/themes/autopr/css/style.css:5158-5250,
   редизайн под стиль autopr_new вместо старых #2980b9/#2c3e50.
   ============================================================ */
.black {
	position: relative;
}

.black::before {
	content: '';
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .6);
	z-index: 999;
}

.overflow {
	overflow: hidden;
}

.myhidform,
.myhidform_price {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 90%;
	max-width: 440px;
	max-height: 90vh;
	overflow-y: auto;
	background: #fff;
	border-radius: 14px;
	padding: 32px;
	display: none;
	z-index: 1001;
}

.myhidform.active,
.myhidform_price.active {
	display: block;
}

.myhidform .mfclose,
.myhidform_price .mfpclose {
	position: absolute;
	top: 16px;
	right: 20px;
	font-size: 28px;
	line-height: 1;
	color: var(--muted);
	cursor: pointer;
	transition: color .2s;
}

.myhidform .mfclose:hover,
.myhidform_price .mfpclose:hover {
	color: var(--dark);
}

.myhidform .mhf_zak,
.myhidform_price .mhf_zak_price {
	font-family: 'Onest', sans-serif;
	font-size: 24px;
	font-weight: 800;
	color: var(--dark);
	text-transform: uppercase;
	margin-bottom: 6px;
	padding-right: 24px;
}

.myhidform .mhf_zak span {
	display: block;
	color: var(--blue);
	font-size: 18px;
}

.myhidform .mhf_details {
	margin-bottom: 8px;
}

.myhidform .mhf_details p {
	color: var(--dark);
	font-size: 14px;
	margin-bottom: 4px;
}

.myhidform .mhf_details span {
	color: var(--muted);
}

.myhidform .mhf_sum {
	color: var(--muted);
	font-size: 14px;
	margin-bottom: 18px;
}

.myhidform .mhf_sum span {
	color: var(--blue);
	font-weight: 700;
}

/* Подтверждение отправки в попапе — по центру, без заголовка формы (js/calc-modal.js). */
.myhidform_price #price-form.is-sent {
	text-align: center;
}

.myhidform #calc-form-response,
.myhidform_price #price-form-response {
	color: #e05a4e;
	text-align: center;
	font-weight: 600;
	margin-top: 10px;
}

/* --- Плавающая иконка корзины (.cart_ico), ported from
   wp-content/themes/autopr/css/style.css:7417-7456, перекрашено под
   палитру autopr_new. --- */
.cart_ico {
	position: fixed;
	top: 40%;
	right: 12px;
	width: 60px;
	height: 60px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
	z-index: 998;
	transition: transform .2s;
}

.cart_ico:hover {
	transform: scale(1.06);
}

.cart_ico a {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--dark);
}

.cart_ico .cart_sum {
	width: 20px;
	height: 20px;
	position: absolute;
	top: -2px;
	right: -2px;
	background: var(--blue);
	border-radius: 50%;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	font-family: 'Onest', sans-serif;
	display: flex;
	align-items: center;
	justify-content: center;
}

@media (max-width: 767px) {
	.cart_ico {
		width: 48px;
		height: 48px;
		top: auto;
		bottom: 16px;
		right: 12px;
	}

	.cart_ico svg {
		width: 26px;
		height: 26px;
	}
}

/* --- Логотип в шапке/подвале: реальный файл из медиатеки
   (wp-content/themes/autopr/images/logo_footer.png со старого сайта,
   attachment #7474) вместо инлайн-SVG-отрисовки макета. Правила
   .brandmark/.lg-* в css/style.css (макет) теперь просто не используются —
   этот файл не редактируем, поэтому не убираю их там, только не подключаю. */
.logo .site-logo-img {
	height: 28px;
	width: auto;
	display: block;
}

.footer-logo .site-logo-img {
	height: 34px;
	width: auto;
	display: block;
}

/* --- Отступы вокруг шапки/подвала на записях блога.
   В контенте 95 записей (94 blog + 1 post) вставлена копия калькулятора
   со своим <style>, где есть глобальное body{background:var(--bg);
   min-height:100vh;padding:40px 20px}. Она сдвигает всю страницу: отступы
   вокруг шапки и подвала, серый фон. В reusable-блоке #7206 это исправлено
   в самом контенте; здесь перебиваем правило на уровне темы, чтобы
   не править 95 записей в базе. Встроенный там же *{margin:0;padding:0}
   проверен (CDP, 2026-09-24): вне .calc-wrap ни на что не влияет. */
body.single {
	padding: 0 !important;
	min-height: 0 !important;
	background: #fff !important;
}

/* --- Хлебные крошки Rank Math (apr_breadcrumbs() в inc/template-tags.php).
   Выводятся как <nav class="breadcrumb">: сбрасываем голое правило nav{...}
   из css/style.css (фон/sticky/тень навбара), как у пагинации.
   Остальное оформление — правила .breadcrumb из макета. */
nav.breadcrumb {
	background: none;
	position: static;
	box-shadow: none;
	z-index: auto;
}

.breadcrumb .last {
	color: #fff;
}

/* Фон-картинка .page-hero::before (css/style.css, position:absolute; inset:0)
   лежит поверх содержимого героя и перехватывала клики — ссылки крошек
   не нажимались. */
.page-hero::before {
	pointer-events: none;
}

/* Светлый фон (шаблоны без .page-hero: archive.php, search.php, index.php).
   Двойной класс: css/style.css подключается после этого файла, и его .breadcrumb a /
   .breadcrumb span при равной специфичности побеждают. */
.breadcrumb--light {
	padding-top: 24px;
}

.breadcrumb.breadcrumb--light a {
	color: var(--muted);
}

.breadcrumb.breadcrumb--light span {
	color: var(--gray2);
}

.breadcrumb.breadcrumb--light .last {
	color: var(--dark); /* = --text; --text переопределяет встроенный в контент CSS калькулятора */
}

/* --- Страница «Услуги»: название услуги в карточке вкладки — ссылка на сингл
   (page-templates/template-uslugi.php). Выглядит как текст заголовка макета. */
.svc-row h4 a {
	color: inherit;
	text-decoration: none;
}

.svc-row h4 a:hover {
	color: var(--blue);
}

/* Иконка карточки — изображение из поля svc_icon, вписано в квадрат 48×48 макета. */
.svc-row-icon img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

/* --- Страница 404: карточка .svc-card из макета — целиком ссылка (404.php).
   Сброс цвета/подчёркивания ссылки, остальное — стили .svc-card макета. */
a.svc-card {
	color: inherit;
	text-decoration: none;
}

a.svc-card:hover h3 {
	color: var(--blue);
}

/* --- Горизонтальная прокрутка на мобильном («Контакты», «О компании»,
   «Корзина», товар каталога). .row.g-5 (--bs-gutter-x:3rem) выходит за
   контейнер на 24px с каждой стороны, а у .container до 576px поле всего
   12px — страница шире экрана на 12px. Колонки в этих рядах там уже друг
   под другом (col-12 до md), поэтому стандартный отступ ряда (1.5rem)
   не сдвигает содержимое, только убирает вылет. Ряды .g-5 на главной
   и «Услугах» обрезает родитель с overflow:hidden — их не трогаем. */
@media (max-width: 575.98px) {
	.contacts-grid,
	.about-story,
	.submit_cart > .row.g-5,
	.single-catalog .section > .container > .row.g-5 {
		--bs-gutter-x: 1.5rem;
	}
}

/* --- Сингл услуги: блок «Банер услуг» (gutenberg/main-baner/render.php)
   выводится как .page-hero. Фон — картинка из поля блока вместо стоковой
   картинки макета (css/style.css, .page-hero::before), остальное как есть.
   Двойной класс: css/style.css подключается после этого файла и при равной
   специфичности побеждает. */
.page-hero.page-hero--img::before {
	background-image: var(--hero-img);
}

.page-hero__btn {
	margin-top: 24px;
}

/* --- Блок «Цены» (gutenberg/price/render.php) внутри контента записи:
   те же карточки .price-card, что на странице «Цены», отступы от текста. */
.price-cards {
	margin: 24px 0 32px;
}

/* Один блок — одна машина: несколько блоков подряд стоят через 20px, как карточки внутри одного блока
   (отступы схлопываются: 32px снизу + −12px сверху = 20px). */
.price-cards + .price-cards {
	margin-top: -12px;
}

/* Страница «Цены»: блоки под зашитым заголовком «Прайс-лист» (template-ceny.php) — снизу 20px, как было у таблицы из полей. */
.sec-head ~ .price-cards:last-child {
	margin-bottom: 20px;
}

/* --- Блок «Преимущества(иконки)» (gutenberg/main-preim/render.php).
   Раскладка как в старой теме (иконка над подписью, 3 в ряд / 2 на телефоне),
   оформление — новой темы. Все правила только под .apr-preim.
   Иконка в коробке фиксированной высоты и не шире колонки: заглушка ленивой
   загрузки (SVG без размеров, по умолчанию 300×150) до подгрузки картинки
   раньше растягивала страницу шире экрана. */
.apr-preim {
	margin: 32px 0;
}

.apr-preim .apr-preim-title {
	font-size: 28px;
	line-height: 1.15;
	color: var(--dark);
	margin-bottom: 24px;
}

.apr-preim .apr-preim-item {
	height: 100%;
	background: var(--gray);
	border-radius: 12px;
	padding: 24px 16px 20px;
	text-align: center;
}

.apr-preim .apr-preim-icon {
	height: 96px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 14px;
}

.apr-preim .apr-preim-icon img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
}

.apr-preim .apr-preim-text {
	font-family: 'Onest', sans-serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--dark);
	margin: 0;
}

@media (max-width: 575.98px) {
	.apr-preim .apr-preim-title {
		font-size: 22px;
	}

	.apr-preim .apr-preim-item {
		padding: 18px 10px 16px;
	}

	.apr-preim .apr-preim-icon {
		height: 72px;
	}

	.apr-preim .apr-preim-text {
		font-size: 13px;
	}
}

/* --- Таблица цен .tableWithPrice в тексте услуг (HTML в контенте, 39 услуг).
   Структура и поведение — как в старой теме (autopr/css/style.css:1417–1473,
   мобильная версия :4083–4110 до 900px и :4510 до 500px): большая картинка
   слева в ячейке .tableWithPrice__bigImage, маленькая картинка в первой
   ячейке шапки видна только на мобильном; на мобильном большая картинка и
   пустая 2-я ячейка шапки скрыты, колонки сужены — таблица помещается в экран.
   Оформление — цвета и шрифты новой темы. Правила только под .tableWithPrice. */
.tableWithPrice {
	width: 100%;
	border: 0;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--gray);
	border-radius: 12px;
	padding: 20px;
	margin: 24px 0;
	font-size: 15px;
}

.tableWithPrice th {
	background: none;
	border-bottom: 1px solid var(--gray2);
	color: var(--dark);
	font-size: 14px;
	line-height: 21px;
	font-weight: 600;
	padding: 10px 0;
	text-align: left;
}

.tableWithPrice th:first-of-type {
	border: 0;
	width: 50%;
}

.tableWithPrice th:first-of-type img {
	display: none;
}

.tableWithPrice td {
	padding: 0 20px 0 0;
	color: var(--muted);
	min-width: 140px;
	text-align: left;
	vertical-align: middle;
}

.tableWithPrice .tableWithPrice__name {
	font-family: 'Onest', sans-serif;
	font-size: 1.3em;
	line-height: 30px;
	color: var(--dark);
	font-weight: 700;
	padding-left: 0;
}

.tableWithPrice .tableWithPrice__price {
	font-family: 'Onest', sans-serif;
	font-size: 1.4em;
	font-weight: 700;
	color: var(--blue);
	white-space: nowrap;
}

.tableWithPrice .tableWithPrice__bigImage img {
	display: block;
	width: 100%;
	max-width: 360px;
	height: auto;
	padding: 0 50px 0 30px;
	box-sizing: content-box;
}

.tableWithPrice .tableWithPrice__material {
	padding-top: 12px;
	padding-bottom: 12px;
}

.tableWithPrice .tableWithPrice__material p {
	margin: 0;
	line-height: 1.35;
}

@media (max-width: 900px) {
	.tableWithPrice {
		padding: 10px 12px;
	}

	.tableWithPrice th {
		padding: 10px 5px;
	}

	.tableWithPrice th:first-of-type {
		width: auto;
		padding: 10px 0;
		border-bottom: 1px solid var(--gray2);
	}

	.tableWithPrice th:first-of-type img {
		display: block;
		width: 80px;
		max-width: 100%;
		height: auto;
		padding: 0 10px 0 0;
	}

	.tableWithPrice th:nth-of-type(2),
	.tableWithPrice .tableWithPrice__bigImage {
		display: none;
	}

	.tableWithPrice td {
		min-width: 0;
		width: 29% !important;
		padding: 0 10px 0 0;
	}
}

@media (max-width: 500px) {
	.tableWithPrice {
		font-size: 13px;
	}

	.tableWithPrice th {
		font-size: 12px;
		line-height: 1.3;
	}

	.tableWithPrice .tableWithPrice__name {
		font-size: 1.15em;
		line-height: 1.3;
	}

	.tableWithPrice .tableWithPrice__price {
		font-size: 1.15em;
		white-space: normal;
	}
}

/* --- Блоки «Сопутствующие услуги» (main-suslug) и «Примеры работ» (main-primer)
   в тексте услуги: карточки .example-card (как «Примеры работ» на «Ценах»),
   заголовок .sec-head/.sec-title. Свои правила — только под .apr-suslug/.apr-primer. */
.apr-suslug,
.apr-primer {
	margin: 48px 0;
}

.apr-suslug .sec-head,
.apr-primer .sec-head {
	margin-bottom: 28px;
}

.apr-primer .apr-primer-blue {
	color: var(--blue);
	margin-bottom: 0;
}

.apr-suslug .apr-card-link,
.apr-primer .apr-card-link {
	display: block;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.apr-suslug .example-card,
.apr-primer .example-card {
	display: flex;
	flex-direction: column;
	transition: box-shadow .22s, transform .22s;
}

.apr-suslug .apr-card-link:hover .example-card,
.apr-primer .apr-card-link:hover .example-card {
	box-shadow: 0 6px 28px rgba(44, 62, 80, .1);
	transform: translateY(-3px);
}

.apr-suslug .example-card img,
.apr-primer .example-card img {
	height: 200px;
}

.apr-suslug .example-card-body,
.apr-primer .example-card-body {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.apr-suslug .example-card-body p,
.apr-primer .example-card-body p {
	flex: 1;
}

.apr-suslug .apr-card-link:hover h4,
.apr-primer .apr-card-link:hover h4 {
	color: var(--blue);
}

@media (max-width: 575.98px) {
	.apr-suslug .example-card img,
	.apr-primer .example-card img {
		height: 180px;
	}
}

/* --- Блок «Отзывы» (main-otziv): заголовок по центру. */
.apr-otziv-title {
	text-align: center;
}

/* --- Блок «Клиенты» (main-client): сетка плиток с логотипами вместо карусели
   Owl старой темы. Логотипы серые, цветные при наведении (как на проде).
   Только под .apr-clients. */
.apr-clients {
	margin: 48px 0;
}

.apr-clients .sec-head {
	margin-bottom: 28px;
}

.apr-clients .apr-client {
	height: 96px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 14px 18px;
	background: #fff;
	border: 0.5px solid var(--gray2);
	border-radius: 12px;
	text-decoration: none;
	color: var(--muted);
	font-weight: 600;
	text-align: center;
	transition: box-shadow .22s, transform .22s;
}

.apr-clients .apr-client img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	filter: grayscale(1);
	opacity: .6;
	transition: filter .22s, opacity .22s;
}

.apr-clients .apr-client:hover {
	box-shadow: 0 6px 28px rgba(44, 62, 80, .1);
	transform: translateY(-3px);
}

.apr-clients .apr-client:hover img {
	filter: none;
	opacity: 1;
}

@media (max-width: 575.98px) {
	.apr-clients .apr-client {
		height: 80px;
		padding: 12px 14px;
	}
}

/* --- Универсальная форма «Получить скидку» (apr_lead_form(), inc/lead-form.php):
   блок «Форма» на услугах/клиентах и страница «Цены». Тёмная карточка в стиле .cta-banner макета
   (градиент var(--dark)→var(--dark2) + фоновая картинка), поля .form-row.
   Только под .apr-lead. */
.apr-lead {
	position: relative;
	overflow: hidden;
	border-radius: 16px;
	background: linear-gradient(135deg, var(--dark) 0%, var(--dark2) 100%);
	padding: 48px 40px 36px;
	color: #fff;
}

.apr-lead::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url(https://images.unsplash.com/photo-1519003722824-194d4455a60c?w=1400&q=40);
	background-size: cover;
	background-position: center;
	opacity: .08;
	pointer-events: none;
}

.apr-lead .apr-lead-inner {
	position: relative;
	max-width: 820px;
	margin: 0 auto;
}

.apr-lead .apr-lead-title {
	font-size: 32px;
	line-height: 1.15;
	color: #fff;
	text-align: center;
	margin-bottom: 28px;
}

.apr-lead .form-row {
	margin-bottom: 0;
}

.apr-lead .form-row label {
	color: #9CB0C0;
}

.apr-lead .form-row input {
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .18);
	color: #fff;
	height: 48px;
}

.apr-lead .form-row input:focus {
	background: rgba(255, 255, 255, .12);
	border-color: var(--blue);
	box-shadow: 0 0 0 3px rgba(0, 176, 240, .2);
}

.apr-lead .apr-lead-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-top: 22px;
}

.apr-lead .apr-lead-assent .form-note {
	color: #9CB0C0;
	font-size: 13px;
	margin: 0;
}

.apr-lead .apr-lead-btn {
	flex-shrink: 0;
	padding: 14px 32px;
}

.apr-lead .apr-lead-btn:disabled {
	opacity: .6;
	cursor: default;
}

.apr-lead .apr-lead-note {
	color: rgba(255, 255, 255, .45);
	font-size: 12px;
	margin: 16px 0 0;
}

.apr-lead .apr-lead-response {
	color: #ff8a80;
	font-size: 14px;
	margin-top: 8px;
}

.apr-lead .apr-lead-response:empty {
	display: none;
}

.apr-lead .apr-lead-success {
	text-align: center;
	padding: 12px 0;
}

.apr-lead .apr-lead-success-title {
	font-size: 26px;
	color: var(--blue);
	margin-bottom: 8px;
}

.apr-lead .apr-lead-success p {
	color: #9CB0C0;
	margin: 0;
}

@media (max-width: 767.98px) {
	.apr-lead {
		padding: 32px 20px 26px;
		border-radius: 12px;
	}

	.apr-lead .apr-lead-title {
		font-size: 24px;
		margin-bottom: 20px;
	}

	.apr-lead .apr-lead-bottom {
		flex-direction: column;
		align-items: stretch;
	}

	.apr-lead .apr-lead-btn {
		width: 100%;
	}
}

/* --- Ссылки по умолчанию (без своего оформления — в тексте записей и т.п.):
   цвет сайта вместо синего Bootstrap (#0d6efd), без подчёркивания.
   Через переменные Bootstrap 5.3 — ими красится a и a:hover в bootstrap.min.css;
   ссылки со своим цветом (меню, кнопки, крошки, карточки) не затронуты. */
:root {
	--bs-link-color: #00B0F0;
	--bs-link-color-rgb: 0, 176, 240;
	--bs-link-hover-color: #0093c9;
	--bs-link-hover-color-rgb: 0, 147, 201;
}

a {
	text-decoration: none;
}

/* --- «Контакты» (page-templates/template-kontakty.php): карта Яндекса по координатам
   из «Настроек темы» вместо заглушки .map-ph макета; строка реквизитов. */
.contact-block .map-ph.map-embed {
	height: 280px;
	padding: 0;
	overflow: hidden;
	display: block;
}

.contact-block .map-embed iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.contact-block .c-req {
	display: block;
	margin-top: 2px;
	color: var(--muted);
	font-weight: 400;
	font-size: 13px;
}

/* --- Подвал: плашка-ссылка на документ (.cert-badge как <a>) — вид плашки макета,
   без цвета ссылки по умолчанию. */
a.cert-badge {
	text-decoration: none;
	transition: color .2s, background .2s;
}

a.cert-badge:hover {
	color: #fff;
	background: rgba(255, 255, 255, .12);
}

/* --- Подвал: контакты под логотипом (.footer-contacts) — одинаковые контурные
   SVG-иконки цвета текста вместо разнородных эмодзи, ровный отступ 10px
   (у эмодзи в одном текстовом узле gap не работал), многострочный адрес —
   иконка по первой строке. Селектор с footer: css/style.css (.footer-contacts a,
   gap:8px, align-items:center) подключается позже и при равной специфичности побеждает. */
footer .footer-contacts a {
	align-items: flex-start;
	gap: 10px;
	line-height: 1.5;
}

.footer-contacts .fc-ico {
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	margin-top: 2px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: .8;
}

.footer-contacts a:hover .fc-ico {
	opacity: 1;
}

/* --- Главная, блок «Баннер» (gutenberg/home-hero/render.php).
   Выделение части заголовка голубым через <span> (в макете — <em>,
   css/style.css: .hero h1 em). Фон — картинка из поля блока вместо стоковой
   картинки макета (.hero-bg в css/style.css); двойной класс — css/style.css
   подключается после этого файла. */
.hero h1 span {
	color: var(--blue);
}

.hero-bg.hero-bg--img {
	background-image: var(--hero-img);
}

/* --- Главная, блок «Популярные услуги» (gutenberg/home-services/render.php).
   Вся карточка — ссылка: .stretched-link Bootstrap на «Подробнее →» растягивается
   на ближайший position:relative-предок. Картинки услуг — PNG-вырезки ~200px
   (не фото, как в макете) с белыми «отражениями» под белый фон: светлая
   подложка --gray вместо тёмного градиента макета, картинка по центру без
   увеличения вместо object-fit:cover. Ссылка без цены — справа, как в макете. */
.svc-card.svc-card--link {
	position: relative;
}

.svc-card-img.svc-card-img--cut {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--gray);
}

.svc-card-img.svc-card-img--cut img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.svc-card--link .svc-link {
	margin-left: auto;
}

/* Строка цены с «Подробнее →» и чертой над ней — всегда у низа карточки,
   при любой длине заголовка/описания (карточки в ряду одной высоты: h-100 макета). */
.svc-card--link .svc-card-body {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.svc-card--link .svc-price-row {
	margin-top: auto;
}

/* Плашка категории — по ширине текста, как в макете (в колонке флекса
   inline-block растягивался бы на всю ширину). */
.svc-card--link .svc-cat {
	align-self: flex-start;
}

/* --- Архив портфолио (template-parts/portfolio-archive.php).
   Фильтр — ссылки на страницы меток с классом .filter-btn макета
   (в макете это <button>). Описание метки под сеткой, как в старой теме
   (там — серая плашка), в палитре темы. */
/* Дата публикации — плашка в углу фото, видна всегда (подпись .port-overlay
   макета появляется только при наведении). Форма — как .blog-tag макета. */
.port-card .port-date {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 1;
	background: rgba(28, 40, 52, .78);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .5px;
	padding: 4px 10px;
	border-radius: 20px;
}

a.filter-btn {
	display: inline-block;
	text-decoration: none;
}

.portfolio-term-desc {
	margin-top: 48px;
	padding: 28px;
	background: var(--gray);
	border-radius: 12px;
	color: var(--muted);
	font-size: 15px;
	line-height: 1.7;
}

.portfolio-term-desc > :last-child {
	margin-bottom: 0;
}

/* --- Страница работы портфолио (single-portfolio.php).
   Текст записи (обычный HTML из редактора: абзацы, подзаголовки h2/h3,
   ссылки) и дата — как в старой теме, в типографике макета; фото — столбиком,
   со скруглением как у .port-card. */
.portfolio-single-text {
	margin-top: 20px;
	color: var(--muted);
	font-size: 15px;
	line-height: 1.75;
}

.portfolio-single-text p {
	margin-bottom: 16px;
}

.portfolio-single-text h2,
.portfolio-single-text h3 {
	margin: 32px 0 14px;
	color: var(--dark);
	font-family: 'Onest', sans-serif;
	font-weight: 700;
	line-height: 1.25;
}

.portfolio-single-text h2 {
	font-size: 24px;
}

.portfolio-single-text h3 {
	font-size: 19px;
}

.portfolio-single-text img {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
}

.portfolio-single-date {
	display: inline-block;
	margin-top: 8px;
	padding: 4px 12px;
	border-radius: 20px;
	background: var(--gray);
	color: var(--muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .5px;
}

.portfolio-single-gallery {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.portfolio-single-gallery img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
}

.portfolio-single-back {
	margin-top: 24px;
	text-align: center;
}

.portfolio-process-title span {
	color: var(--blue);
}

/* «Содержание» в записях блога — плагин Table of Contents Plus (.tocbod > p.toc_title + ссылки).
   Номер пункта оборачивает js/toc.js в .toc-num. */
.tocbod {
	background: var(--gray);
	border-radius: 14px;
	padding: 28px 32px;
	margin: 28px 0 36px;
}

.tocbod .toc_title {
	font-family: 'Onest', sans-serif;
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--dark);
	margin: 0 0 12px;
}

.tocbod a {
	display: flex;
	align-items: baseline;
	gap: 14px;
	padding: 11px 0;
	border-bottom: 0.5px solid var(--gray2);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.45;
	color: var(--dark);
	text-decoration: none;
	transition: color .2s;
}

.tocbod a:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.tocbod a:hover {
	color: var(--blue);
}

.tocbod .toc-num {
	flex-shrink: 0;
	min-width: 22px;
	font-weight: 800;
	color: var(--blue);
}

/* Переход по пункту содержания: заголовок не уходит под липкую шапку. */
.titletoc {
	scroll-margin-top: 100px;
}

@media (max-width: 575.98px) {
	.tocbod {
		padding: 22px 20px;
	}
}


/* Паттерн в верхней полосе подвала (.footer-deco) — из tmp/паттерн.pdf: плитка
   из двух параллелограммов (синий и тёмный), images/footer-pattern.svg.
   Остальное (высота, прозрачность, затухание вниз) — из css/style.css макета.
   #colophon — css/style.css подключается после этого файла. */
#colophon .footer-deco {
	background-image: url("images/footer-pattern.svg");
	background-size: 177.428px 88.3035px;
	background-repeat: repeat;
}

/* Списки колонок подвала (Услуги/Компания/Контакты) — без отступа слева, вровень
   с заголовком колонки (аудит, п. 19). Сброс макета *{padding:0} проигрывает
   Bootstrap ul{padding-left:2rem} по специфичности. */
#colophon .footer-col ul {
	padding-left: 0;
}

/* Подвал, колонка «Контакты»: «Офис»/«Производство» — обычный текст, не ссылка
   (аудит, п. 22); вид как у соседних ссылок (css/style.css, .footer-col ul li a). */
#colophon .footer-col ul li > span {
	color: rgba(255, 255, 255, .5);
	font-size: 13px;
}

/* «Типы и фактуры плёнок» (template-uslugi.php): на светлых образцах (хром, сатин,
   антигравийная) белый текст макета не читается — тёмный текст без тени (аудит, п. 27).
   Двойной класс — css/style.css (.film-card h4) подключается после этого файла. */
.film-card.film-card--light h4 {
	color: var(--dark);
	text-shadow: none;
}

.film-card.film-card--light span {
	color: rgba(58, 73, 87, .75);
}

/* Попап с видео блока «Видео» (js/video-modal.js): плеер 16:9 на чёрном фоне,
   крестик — над окном справа, чтобы не закрывал панель плеера. */
.apr-video-modal .modal-content {
	position: relative;
	background: #000;
	border: 0;
	border-radius: 14px;
}

.apr-video-modal-frame {
	border-radius: 14px;
	overflow: hidden;
}

.apr-video-modal-close {
	position: absolute;
	top: -40px;
	right: 0;
	z-index: 2;
	opacity: .9;
}

/* --- Форма в секциях .cta-banner (inc/cta-banners.php, apr_cta_form()):
   имя, телефон, тип транспорта и кнопка — в одну строку; на мобильном — столбиком.
   Поля — как .form-row input/select макета. */
.cta-form {
	max-width: 960px;
	margin: 0 auto;
}

.cta-form .cta-form-row {
	display: flex;
	gap: 12px;
	align-items: stretch;
}

.cta-form .cta-form-row input,
.cta-form .cta-form-row select {
	flex: 1 1 0;
	min-width: 0;
	background: #fff;
	border: 0.5px solid var(--gray2);
	border-radius: 8px;
	padding: 12px 14px;
	font-size: 14px;
	font-family: 'Onest', sans-serif;
	color: var(--text);
	outline: none;
	transition: border .2s;
	min-height: 48px;
}

.cta-form .cta-form-row input:focus,
.cta-form .cta-form-row select:focus {
	border-color: var(--blue);
	box-shadow: 0 0 0 3px rgba(0, 176, 240, .1);
}

.cta-form .cta-form-row .apr-lead-btn {
	flex: 0 0 auto;
	font-size: 16px;
	padding: 12px 36px;
}

.cta-form .cta-form-row .apr-lead-btn:disabled {
	opacity: .6;
}

.cta-form .cta-form-assent {
	display: flex;
	justify-content: center;
	margin-top: 14px;
}

.cta-form .cta-form-assent .form-note {
	margin-top: 0;
	color: #9CB0C0;
}

.cta-form .apr-lead-response {
	margin-top: 10px;
	color: #ff8a80;
	font-size: 14px;
}

.cta-form .apr-lead-response:empty {
	display: none;
}

.cta-form .apr-lead-success-title {
	font-size: 26px;
	color: var(--blue);
	margin-bottom: 8px;
}

.cta-form .apr-lead-success p {
	margin: 0;
}

@media (max-width: 767.98px) {
	.cta-form .cta-form-row {
		flex-direction: column;
	}

	.cta-form .cta-form-row .apr-lead-btn {
		width: 100%;
	}
}

/* --- Блоки «Начало/Конец ограничения по ширине» (gutenberg/container-start, container-end):
   отступ сверху и снизу — как у .section макета (64px, до 575.98px — 44px). */
.container-limit-start {
	padding-top: 64px;
}

.container-limit-end {
	height: 64px;
}

@media (max-width: 575.98px) {
	.container-limit-start {
		padding-top: 44px;
	}

	.container-limit-end {
		height: 44px;
	}
}

/* --- Форма «Получить расчёт» на «Контактах» (template-kontakty.php),
   отправка — .apr-lead-form (js/calc-modal.js). --- */
.contact-form .contact-form-assent {
	display: flex;
	justify-content: center;
	margin-top: 14px;
}

.contact-form .contact-form-assent .form-note {
	margin-top: 0;
}

.contact-form .apr-lead-btn:disabled {
	opacity: .6;
}

.contact-form .apr-lead-response {
	margin-top: 10px;
	color: #e05a4e;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
}

.contact-form .apr-lead-response:empty {
	display: none;
}

.contact-form .apr-lead-success {
	text-align: center;
}

.contact-form .apr-lead-success-title {
	font-size: 26px;
	color: var(--blue);
	margin-bottom: 8px;
}

.contact-form .apr-lead-success p {
	margin: 0;
	color: var(--muted);
}

/* --- Блок «География работ» (gutenberg/geografiya-rabot): светло-голубая плашка с кавычкой
   (макет docs/input/Screenshot_2026_10_27-1.png) --- */
.geo-works{position:relative;background:#edf7ff;border:1px solid #e6f4ff;border-radius:8px;padding:18px 24px 18px 30px;color:#333;line-height:1.55}
.geo-works::before{content:"\2019";position:absolute;left:12px;top:4px;font:700 34px/1 Georgia,serif;color:#c4e6ff}
.geo-works-title{font-weight:700}
.geo-works-list a{color:inherit;text-decoration:none}
.geo-works-list a:hover{color:var(--blue)}
/* Блок «География работ»: только заголовок и города ссылками-плашками (как .brand-pill макета), без подложки и кавычки */
.geo-works--pills{background:none;border:0;border-radius:0;padding:0}
.geo-works--pills::before{content:none}
.geo-works--pills .geo-works-title{margin-bottom:12px}
.geo-works--pills .geo-works-list{display:flex;flex-wrap:wrap;gap:8px}
.geo-works--pills .geo-works-list a{background:#fff;border:0.5px solid var(--gray2);border-radius:8px;padding:6px 14px;font-size:14px;font-weight:600;color:var(--dark);transition:all .2s}
.geo-works--pills .geo-works-list a:hover{border-color:var(--blue);color:var(--blue)}