/*
 * mobile.css — адаптивный слой для темы layout_new (fixit39.ru)
 * Черновик v1 от 21.07.2026
 *
 * ПРИНЦИП: этот файл только ДОБАВЛЯЕТ правила внутри @media.
 * Ни одна строка не действует на десктопе шире 1010px.
 * Откат = отключить подключение этого файла в header.php.
 *
 * Подключать ПОСЛЕДНИМ, после styles.css и cms.css.
 */


/* ==========================================================================
   1. ОБЩЕЕ — действует на всех экранах
   Картинки не должны вылезать за контейнер. Без этого ломается всё остальное.
   ========================================================================== */

img,
video,
iframe {
	max-width: 100%;
	height: auto;
}

/* Таблицы — самая частая причина горизонтальной прокрутки на старых сайтах */
table {
	max-width: 100%;
}
/* Телефоны в шапке стали ссылками tel:. Тема не знает про них ничего,
   поэтому браузер красил бы их в синий с подчёркиванием.
   Возвращаем вид обычного текста. */
.phone-list a[href^="tel:"] {
	color: inherit;
	text-decoration: none;
}
/* В областях логотипа и слогана лежат посторонние виджеты:
   #text-4       — дубль копирайта; полная версия есть в подвале (#text-8).
                   Наследует font-size:72px от .logo и растягивается
                   на всю шапку, наезжая на телефоны.
   #custom_cf7-3 — виджет CF7, выводит шорткод сырым текстом.
   Правильная правка — удалить их на экране виджетов, но он сейчас
   не сохраняется (ошибка JSON). Прячем до починки. */
.head .logo #text-4,
.head .slogan #custom_cf7-3 {
	display: none;
}
/* Тема задаёт body { line-height: 17px } в пикселях, и это наследуется
   как есть. У .phone-list li шрифт 28px — строки не помещаются в 17px
   и налезают друг на друга. Задаём межстрочку множителем.
   .feedback («Напишите нам») сюда не попадает: у него в теме
   line-height: 0.6 !important, оно перебивает. */
.phone-list li {
	line-height: 1.3;
}
/* Слоган в теме стоит на top: 90px. Телефоны — на top: 35px, кегль 28px.
   С межстрочкой 1.3 два номера занимают ~73px и упираются в слоган.
   Уменьшаем кегль до 24px и поднимаем блок: 20 + 2 × 24 × 1.3 ≈ 82px,
   до слогана остаётся запас.
   На мобильном не действует: там .phone-list становится position: static
   (top игнорируется), а кегль перебивается правилом в блоке 760px ниже. */
.head .phone-list {
	top: 8px;
}

.phone-list li {
	font-size: 24px;
}
/* «Напишите нам» идёт третьим в .phone-list и опускался до ~103px,
   а слоган в теме начинается на 90px — они делили одну полосу.
   Вправо блок не сдвинуть: он уже на right: 0, а .head обрезает
   по 990px. Поэтому поднимаем весь блок и убираем отступ у feedback.
   Верх блока встаёт вровень с логотипом (тот на top: 10px). */
.head .feedback {
	margin-top: 0;
}
/* Конвертик — position: absolute (css/icon.css), тема сдвигает его
   на left: 86px. Но <li> растянут на ширину всего блока (~200px по
   длине номера), поэтому 86px попадают в середину «Напишите нам».
   Сжимаем li до содержимого: левый край совпадает с началом текста,
   и штатный padding-left: 32px становится местом под иконку.
   Выключку li наследует от родителя — справа на десктопе,
   слева на мобильном, — так что правило работает на обоих. */
.head .feedback {
	display: inline-block;
}

.head .feedback i {
	left: 0;
}
/* ==========================================================================
   2. ПЛАНШЕТ И УЖЕ (<= 1010px)
   Контейнер 990px становится резиновым.
   ========================================================================== */

@media (max-width: 1010px) {

	.content,
	.bottom .also,
	.bottom .footer {
		width: auto;
		max-width: 990px;
		margin-left: auto;
		margin-right: auto;
		padding-left: 12px;
		padding-right: 12px;
		box-sizing: border-box;
	}

	.top .head {
		width: auto;
		max-width: 990px;
		padding-left: 12px;
		padding-right: 12px;
		box-sizing: border-box;
	}

	/* Две колонки в процентах вместо 230px + 712px */
	.sidebar {
		width: 26%;
		margin-right: 2%;
		box-sizing: border-box;
	}

	.main-content {
		width: 72%;
		box-sizing: border-box;
	}

	/* Карусель товаров была прибита к 675px */
	.inner_carousel,
	.inner_carousel1,
	.inner_carousel2,
	.inner_carousel3,
	.inner_carousel4,
	.inner_carousel5,
	.inner_carousel6,
	.inner_carousel7,
	.inner_carousel8,
	.inner_carousel9,
	.inner_carousel10 {
		width: 100% !important;
	}

	.social {
		width: 100%;
	}

	/* --- Слайдер Nivo ---
	   ВНИМАНИЕ, грабли. Плагин при запуске меряет первую картинку
	   и вешает на .nivoSlider ИНЛАЙНОВЫЙ стиль width/height в пикселях.
	   Если задать .slider img { width:100% }, плагин меряет картинку
	   внутри ещё не растянутого контейнера, получает круговую
	   зависимость и схлопывает слайдер до ~100px. Проверено на живой
	   странице 22.07.2026 — именно так и произошло.
	   Поэтому картинки НЕ трогаем, а переопределяем сам контейнер.
	   Инлайновый стиль бьётся только через !important. */
	.slider {
		height: auto !important;
	}

	/* Высота = пропорция кадра (250/710 = 35.21%) ПЛЮС 62px под подпись.
	   Подпись кладём не поверх фото, а на белую полосу под ним:
	   на узком экране она перекрывала почти половину кадра. */
	.nivoSlider {
		width: 100% !important;
		height: 0 !important;
		padding-bottom: calc(35.21% + 62px) !important;
		background-size: 100% auto !important;
		background-position: center top !important;
		background-color: #fff !important;
	}

	/* Слои «шторки»: их размеры плагин посчитал в пикселях под 710px,
	   на резиновой ширине они разъезжаются. Прячем — смена кадра
	   становится мгновенной, сам показ и ссылки работают. */
	.nivo-slice,
	.nivo-box {
		display: none !important;
	}
}


/* ==========================================================================
   3. МОБИЛЬНЫЕ (<= 760px)
   Одна колонка. Контент выше меню.
   ========================================================================== */

@media (max-width: 760px) {

	/* Читаемость: 12px на телефоне мелковато */
	body {
		font-size: 15px;
		line-height: 1.5;
	}

	h1 { font-size: 22px; }
	h2 { font-size: 19px; }
	h3 { font-size: 17px; }

	/* --- Шапка ---
	   Логотип был position:absolute 72px внутри блока height:150px.
	   Возвращаем в поток. */
	.top,
	.top .head {
		height: auto;
	}

	.top .head {
		padding-top: 12px;
		padding-bottom: 12px;
	}

	.head .logo,
	.head .slogan,
	.head .phone-list {
		position: static;
		text-align: left;
	}

	.head .logo {
		font-size: 34px;
		line-height: 1.1;
	}

	.head .slogan {
		font-size: 16px;
		margin-top: 6px;
	}

	.phone-list li {
		font-size: 20px;
	}
		/* Конвертик у «Напишите нам» — position: absolute (icon.css),
	   тема сдвигает его на left: 86px под десктопную шапку с
	   выравниванием вправо. Здесь строка широкая и левая, поэтому
	   иконка попадает в середину текста. У .feedback есть
	   padding-left: 32px, оставленный как раз под неё. */
	.head .feedback i {
		left: 0;
	}
	/* --- Раскладка: одна колонка, main-content первым ---
	   .content держится на float. Переводим во flex — float перестаёт
	   действовать внутри flex-контейнера, порядок задаём через order. */
	.content {
		display: flex;
		flex-direction: column;
		overflow: visible;
	}

	.main-content {
		order: 1;
		width: 100%;
		float: none;
	}

	.sidebar {
		order: 2;
		width: 100%;
		float: none;
		margin-right: 0;
		margin-top: 30px;
	}

	/* --- Меню в сайдбаре ---
	   Крупнее зоны нажатия: палец, а не мышь. Минимум 44px по высоте. */
	.menu li {
		padding: 0;
	}

	.menu li a {
		display: block;
		padding: 12px 0;
		font-size: 16px;
	}

	.menu .sub-menu {
		margin-left: 18px;
	}

	/* --- Стрелки каруселей ---
	   В теме у .next стоит right:-15px, то есть стрелка вынесена ЗА
	   контейнер, а .carousel обрезает содержимое по overflow:hidden.
	   Половина стрелки была не видна и не нажималась. Баг темы,
	   на десктопе тоже есть, просто там менее заметен.
	   Проверено на 4 каруселях страницы «Сопутствующие направления». */
	.carousel .next {
		right: 2px !important;
	}

	.carousel .next,
	.carousel .prev {
		width: 40px !important;
		height: 52px !important;
		background-position: center center !important;
	}

	/* --- Карточки товаров: было 164px float --- */
	.products .item {
		width: 48%;
		padding-right: 0;
		margin-right: 4%;
		box-sizing: border-box;
	}

	.products .item:nth-child(2n) {
		margin-right: 0;
	}

	/* --- Подпись на слайдере: absolute 140x85 поверх картинки ---
	   ВАЖНО: прятать нельзя — внутри телефон +7 911 855 28 29.
	   Вместо этого растягиваем по нижнему краю кадра. */
	.nivo-caption {
		width: auto !important;
		height: auto !important;
		min-height: 62px;
		top: auto !important;
		bottom: 0 !important;
		left: 0 !important;
		right: 0 !important;
		padding: 6px 10px !important;
		font-size: 13px;
		line-height: 1.35;
		/* Плагин вешает inline opacity:0.9 — фото просвечивало сквозь
		   текст. Гасим, фон делаем сплошным. */
		opacity: 1 !important;
		background: #fff !important;
		border-top: 1px solid #000;
		box-sizing: border-box;
	}

	/* Точки переключения слайдов — в угол, чтобы не налезали на текст */
	.nivo-controlNav {
		top: auto !important;
		left: auto !important;
		right: 8px !important;
		bottom: 4px !important;
	}

	/* Заголовок цены. В nivo-slider.css у него border-bottom + padding,
	   а мы делаем его строчным — из-за этого подчёркивание проваливалось
	   на строку с телефоном и перечёркивало цифры. Снимаем и то и другое. */
	.nivo-caption h3,
	.nivo-caption p h3 {
		display: inline;
		font-size: 15px !important;
		font-weight: bold;
		border-bottom: 0 !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	.nivo-caption p {
		display: inline;
		margin: 0 !important;
	}

	/* Номер телефона не должен разрываться посередине */
	.nivo-caption strong {
		white-space: nowrap;
	}

	/* --- Таблицы в подвале «Также вы найдёте у нас» ---
	   Было 4 колонки по 25%. Ставим в столбик. */
	.also table,
	.also thead,
	.also tbody,
	.also tr {
		display: block;
		width: 100%;
	}

	.also th,
	.also td {
		display: block;
		width: 100%;
		padding: 6px 0;
		box-sizing: border-box;
	}

	.also th {
		padding-top: 14px;
		font-size: 16px;
	}

	/* --- Подвал: было три float в блоке height:70px --- */
	.bottom .footer {
		height: auto;
		padding-top: 15px;
		padding-bottom: 25px;
	}

	.footer .copy,
	.footer .stats-list,
	.footer .mm {
		float: none;
		width: auto;
		margin: 10px 0;
	}

	.footer .mm img,
	.footer .mm p {
		float: none;
	}

	/* --- Двухколоночные таблицы в контенте --- */
	.main td {
		display: block;
		width: 100%;
		padding: 5px 0;
	}

	/* --- Галереи NextGEN --- */
	.ngg-gallery-thumbnail {
		float: none;
		display: inline-block;
		margin: 5px 10px 5px 0;
	}

	/* --- Обтекание картинками в тексте ---
	   alignleft/alignright на узком экране зажимают текст в 2 слова. */
	.alignleft,
	.alignright,
	.alignnone,
	.aligncenter {
		float: none;
		display: block;
		margin: 10px auto;
	}

	/* --- Формы Contact Form 7 ---
	   Было .wpcf7 800px, поля по 440-538px внутри fancybox. */
	.wpcf7 {
		width: 100%;
	}

	.fancybox-inner .wpcf7 input[type=text],
	.fancybox-inner .wpcf7 input[type=email],
	.fancybox-inner .wpcf7 textarea {
		width: 100%;
		margin-right: 0;
		box-sizing: border-box;
	}

	.fancybox-inner .wpcf7 .wpcf7-form-control-wrap {
		float: none;
		margin: 4px 0 8px 0;
		display: block;
	}

	.fancybox-inner .wpcf7 p {
		padding-left: 0;
	}

	/* --- Кнопка отправки формы ---
	   Оформление из form.css до неё не доходит (селектор не совпадает
	   с реальной разметкой), поэтому кнопка рендерится браузерной
	   по умолчанию: 74x22. Для пальца мало — минимум 44px.
	   Селектор намеренно широкий, чтобы поймать её в любом контексте. */
	.wpcf7 input[type=submit],
	.fancybox-inner input[type=submit] {
		display: block;
		width: 100% !important;
		min-height: 46px;
		height: auto !important;
		padding: 12px !important;
		font-size: 16px !important;
		background: #E5B642 !important;   /* акцентный цвет темы */
		color: #000 !important;
		text-shadow: none !important;
		border: 0 !important;
		border-radius: 6px !important;
		cursor: pointer;
	}

	/* Поля ввода не должны быть меньше 16px —
	   иначе iOS Safari зумит страницу при фокусе. */
	input[type=text],
	input[type=email],
	input[type=password],
	textarea,
	select {
		font-size: 16px;
	}

	/* --- Всплывающие окна fancybox ---
	   Ширина задаётся скриптом в пикселях под десктоп.
	   max-width перебьёт inline-стиль только с !important. */
	.fancybox-wrap,
	.fancybox-inner {
		max-width: 94vw !important;
	}

	.fancybox-inner {
		height: auto !important;
	}

	/* --- Окно выбора языка Google-перевода: свёрстано таблицей --- */
	#translate_popup .translate_links,
	#translate_popup .translate_links tbody,
	#translate_popup .translate_links tr,
	#translate_popup .translate_links td {
		display: block;
		width: 100%;
	}

	/* --- Комментарии --- */
	#respond {
		width: 100%;
	}

	/* --- Корзина wpshop --- */
	.cform fieldset,
	#wpshop_cart .recycle_bin {
		width: 100%;
	}

	.cform input,
	.cform textarea {
		width: 100%;
		box-sizing: border-box;
	}
}


/* ==========================================================================
   4. УЗКИЕ ЭКРАНЫ (<= 480px)
   ========================================================================== */

@media (max-width: 480px) {

	.head .logo {
		font-size: 26px;
	}

	.head .slogan {
		font-size: 14px;
	}

	/* Карточки товаров в один столбец */
	.products .item {
		width: 100%;
		margin-right: 0;
	}

	.content,
	.bottom .also,
	.bottom .footer,
	.top .head {
		padding-left: 8px;
		padding-right: 8px;
	}
}

/* --- стили галерей, перенесены из плагина NextGEN 01.10.2026 --- */
.ngg-galleryoverview { overflow: hidden; margin-top: 10px; width: 100%; clear: both; display: block !important; margin-bottom: 25px; }
.ngg-gallery-thumbnail-box { float: left; }
.ngg-gallery-thumbnail { float: left; margin-right: 5px; text-align: center; }
.ngg-gallery-thumbnail img { background-color: #FFFFFF; border: 1px solid #A9A9A9; display: block; margin: 4px 0px 4px 5px; padding: 4px; position: relative; }
.ngg-gallery-thumbnail img:hover { background-color: #A9A9A9; }
.ngg-clear { clear: both; }
.ngg-galleryoverview ul li:before { content: '' !important; }
.ngg-gallery-list { list-style-type: none; padding: 0px !important; text-indent: 0px !important; }
.ngg-gallery-list li { margin: 0 2px 0px 2px !important; }
.ngg-gallery-list li a { border: 1px solid #CCCCCC; display: block; padding: 2px; height: 100px; }
.ngg-gallery-list li img { height: 100px; width: 125px; }
/* === Список новостей /news: ровные строки — миниатюра 225x170 слева, дата/заголовок/текст справа (03.10.2026) === */
body.category-news .archive-meta{overflow:hidden;margin-bottom:10px}
body.category-news .main-content .inner > article{position:relative;box-sizing:content-box;clear:both;min-height:170px;padding:18px 0 18px 245px;border-top:1px solid #e3e3e3}
body.category-news .main-content .inner > article:not(:has(img)){padding-left:0;min-height:0}
body.category-news .main-content .inner > article img{position:absolute;left:0;top:18px;width:225px;height:170px;object-fit:cover;float:none;margin:0;max-width:none}
body.category-news .main-content .inner > article header time{display:block;color:#888;margin-bottom:4px}
body.category-news .main-content .inner > article header h3{margin:0 0 8px}
body.category-news .main-content .inner > article p{margin:0 0 6px;overflow-wrap:anywhere}
@media (max-width:600px){
 body.category-news .main-content .inner > article{padding-left:0;min-height:0}
 body.category-news .main-content .inner > article img{position:static;width:100%;height:200px;margin-top:8px}
}
/* === Новый стиль, шаг 1: шрифты и цвета (05.10.2026) ===
   Заголовки Unbounded, текст Manrope (подключены в header.php), фон тёплый,
   акцент янтарный. Вёрстку не трогаем. Откат = удалить этот блок до конца файла. */
:root{--fx-bg:#F6F2EA;--fx-ink:#1F1D1A;--fx-muted:#5E574D;--fx-line:#E4DCCD;--fx-accent:#D9952E;--fx-link:#8A5413}
body{font-family:'Manrope',Tahoma,sans-serif;color:var(--fx-ink);background:var(--fx-bg)}
h1,h2,h3,h4,.header,.title a,.also .header{font-family:'Unbounded',Arial,sans-serif;font-style:normal;font-weight:500;color:var(--fx-ink)}
h1{font-weight:600}
.head .logo{font-family:'Unbounded',Arial,sans-serif;font-style:normal;font-weight:700}
.head .slogan{font-family:'Manrope',Arial,sans-serif;font-style:normal;font-weight:700}
.head .phone-list li{font-family:'Unbounded',Arial,sans-serif;font-style:normal;font-weight:500}
.head .feedback a{font-family:'Manrope',Arial,sans-serif;font-weight:700}
a,.footer a{color:var(--fx-ink)}
a:hover,.menu li a:hover,.also th a:hover{color:var(--fx-link)}
.menu li{border-bottom-color:var(--fx-line)}
.menu .current-menu-item > a{color:var(--fx-link)}
.header{background:none;border-bottom:2px solid var(--fx-accent)}
.category time,.breadcrumbs,.wp-caption .wp-caption-text,.wp-caption dd{color:var(--fx-muted)}
.wp-caption{background:#FBF8F2}
.wp-pagenavi a,.wp-pagenavi span{border-color:var(--fx-accent)!important}
.ngg-gallery-thumbnail img:hover{background-color:var(--fx-accent)!important}
.nivo-caption{font-family:'Manrope',Arial,sans-serif}
.wpcf7 input[type=submit],.fancybox-inner input[type=submit]{background:var(--fx-accent)!important}
@media (min-width:761px){
 body{font-size:15px;line-height:1.6}
 /* карусели фото рассчитаны на старые 12px/17px — иначе рамка миниатюры распирается */
 .ngg-galleryoverview{font-size:12px;line-height:17px}
 /* подпись слайдера — плашка 140x85 фиксированная, крупный Unbounded в неё не влезал */
 .nivo-caption{line-height:1.3}
 .nivo-caption p,.nivo-caption p p{font-size:12px}
 .nivo-caption h3,.nivo-caption p h3{font-size:13px;line-height:1.25;font-weight:600;white-space:nowrap}
}
/* === Новый стиль, шаг 1б: анимация (05.10.2026) ===
   Только CSS. У кого в системе включено «уменьшить движение» — всё отключается. */
@media (prefers-reduced-motion: no-preference){
 @keyframes fx-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
 @keyframes fx-fade{from{opacity:0}to{opacity:1}}
 @keyframes fx-ring{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(1.7);opacity:0}}

 /* 1. Плавные наведения */
 a{transition:color .2s ease}
 .menu li a{transition:color .2s ease,padding-left .2s ease}
 .menu li a:hover{padding-left:5px}
 @media (hover:hover){
  .inner.main td a img{transition:translate .35s ease,box-shadow .35s ease}
  .inner.main td a:hover img{translate:0 -4px;box-shadow:0 10px 22px rgba(31,29,26,.18)}
  .ngg-gallery-list li a{overflow:hidden}
  .ngg-gallery-list li a img{vertical-align:top}
  .ngg-gallery-list li a img,.ngg-gallery-thumbnail img{transition:scale .4s ease}
  .ngg-gallery-list li a:hover img,.ngg-gallery-thumbnail a:hover img{scale:1.08}
 }

 /* 2. Кнопка WhatsApp: мягкое кольцо раз в 3 секунды */
 a[href^="https://wa.me/"][style*="position:fixed"]::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #25D366;pointer-events:none;animation:fx-ring 3s ease-out 1.5s infinite}

 /* 3. Появление при открытии страницы (backwards — после конца анимации стили не остаются) */
 .main-content{animation:fx-up .6s ease-out backwards}
 .sidebar{animation:fx-fade .6s ease-out .15s backwards}

 /* 4. Блоки при прокрутке — только в браузерах, которые это умеют; в остальных всё просто стоит */
 @supports (animation-timeline: view()){
  /* обёртки темы с overflow:hidden браузер считает «окном прокрутки» и анимация срабатывает сразу;
     clip режет так же, flow-root так же удерживает плавающие колонки */
  .main{overflow:clip;display:flow-root}
  @media (min-width:761px){.content{overflow:clip;display:flow-root}}
  .main-content .inner h2,
  .main-content .inner img:not(.nivoSlider img):not(.ngg-galleryoverview img),
  .main-content .ngg-galleryoverview{animation:fx-up linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
 }
}

/* === Новый стиль, шаг 2: меню разделов в шапке (06.10.2026) ===
   Шапка остаётся как была; снизу на дереве добавлена строка меню (.fx-nav, HTML — в header.php).
   Шапка выросла со 150 до 178px под меню. Откат = удалить этот блок и строку fx-nav в header.php. */
.top,.top .head{height:178px}
.fx-nav{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;gap:0 18px;border-top:1px solid rgba(31,29,26,.28);font-style:normal}
.fx-nav a{padding:9px 0 7px;border-bottom:2px solid transparent;font:600 15px 'Manrope',Arial,sans-serif;color:#1F1D1A;text-decoration:none;white-space:nowrap}
.fx-nav a:hover{color:#1F1D1A;border-bottom-color:rgba(31,29,26,.45)}
.page-id-1248 .fx-nav a[href$="/derevyannye-doma"],
.page-id-1247 .fx-nav a[href$="/derevyannye-okna"],
.page-id-1495 .fx-nav a[href$="/kleenyj-brus"],
.page-id-1252 .fx-nav a[href$="/pogonazhnye-izdeliya"],
.page-id-1249 .fx-nav a[href$="/krovelnye-materialy"],
.page-id-1246 .fx-nav a[href$="/pilomaterialy"],
.page-id-2216 .fx-nav a[href$="/nashi-obekty"]{border-bottom-color:#1F1D1A}
/* планшет: логотип и слоган в теме стоят position:absolute, поэтому меню ставим в поток с отступом под слоган
   (слоган кончается на 119px, а уже 950px переносится на 2 строки и кончается на 148px) */
@media (max-width:1010px){
 .top,.top .head{height:auto}
 .fx-nav{position:static;margin-top:134px;flex-wrap:wrap;justify-content:flex-start;gap:0 22px}
}
@media (max-width:950px){
 .fx-nav{margin-top:162px}
}
@media (max-width:760px){
 .top,.top .head{height:auto}
 .fx-nav{position:static;flex-wrap:nowrap;justify-content:flex-start;gap:8px;overflow-x:auto;border-top:0;margin:12px -12px 0;padding:0 12px 2px;scrollbar-width:none}
 .fx-nav::-webkit-scrollbar{display:none}
 .fx-nav a{flex:none;padding:8px 14px;border:1px solid rgba(31,29,26,.18);border-radius:999px;background:rgba(255,255,255,.85);font-size:14px}
 .page-id-1248 .fx-nav a[href$="/derevyannye-doma"],
 .page-id-1247 .fx-nav a[href$="/derevyannye-okna"],
 .page-id-1495 .fx-nav a[href$="/kleenyj-brus"],
 .page-id-1252 .fx-nav a[href$="/pogonazhnye-izdeliya"],
 .page-id-1249 .fx-nav a[href$="/krovelnye-materialy"],
 .page-id-1246 .fx-nav a[href$="/pilomaterialy"],
 .page-id-2216 .fx-nav a[href$="/nashi-obekty"]{background:#1F1D1A;color:#fff;border-color:#1F1D1A}
}
@media (max-width:480px){
 .fx-nav{margin-left:-8px;margin-right:-8px;padding-left:8px;padding-right:8px}
}
/* === Шаг 3: новости в колонке — дата, заголовок и кадр (08.10.2026) ===
   Кадр выводит sidebar.php: изображение записи → обложка видео (со значком ▶) → первая картинка из текста.
   Откат = удалить этот блок и вернуть в sidebar.php старые строки 11–12. */
.news .fx-news-pic{display:block;position:relative;margin:8px 0 4px;max-width:320px;overflow:hidden;border:1px solid #1F1D1A}
.news .fx-news-pic img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
.news .fx-news-pic.is-video::before{content:"";position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:rgba(31,29,26,.72);z-index:1}
.news .fx-news-pic.is-video::after{content:"";position:absolute;left:50%;top:50%;margin:-12px 0 0 -7px;border-style:solid;border-width:12px 0 12px 20px;border-color:transparent transparent transparent #fff;z-index:2}
@media (prefers-reduced-motion:no-preference){
 .news .fx-news-pic img{transition:scale .4s ease}
 .news .fx-news-pic:hover img{scale:1.05}
}
/* === Подвал «Также вы найдёте у нас»: текстура дерева на всю высоту (13.10.2026) === */
.bottom .wrapper-also{background-repeat:repeat}