@charset "UTF-8";
/*
 * terem-fixes.css — точечные правки раскладки поверх Storefront 4 + легаси-CSS 2.1.7.
 * Подключается последним в каскаде. Шапка: десктоп-раскладка прода (Storefront 2.1.7-мод)
 * и мобильная раскладка (viewport включён в header.php темы).
 * Пополняется по итогам визуального QA.
 */

/*
 * Полные грани Open Sans 300/400/600/700 (латиница + кириллица, Google v57,
 * скачаны локально 2026-10-02). Легаси-файлы opensans*.woff2 и комплект плагина
 * yith-badges (yith-gfont-open-sans, отключён в functions.php) содержат ТОЛЬКО
 * латиницу: кириллица выпадала в системный фолбэк, а элементы со стеком без
 * фолбэка (легаси) — в Times-serif. unicode-range сабсетов — из ответа Google.
 */
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url('../fonts/opensans-cyr/opensans-300-cyrillic-ext.woff2') format('woff2');
	unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url('../fonts/opensans-cyr/opensans-300-cyrillic.woff2') format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url('../fonts/opensans-cyr/opensans-300-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url('../fonts/opensans-cyr/opensans-300-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/opensans-cyr/opensans-400-cyrillic-ext.woff2') format('woff2');
	unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/opensans-cyr/opensans-400-cyrillic.woff2') format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/opensans-cyr/opensans-400-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/opensans-cyr/opensans-400-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/opensans-cyr/opensans-600-cyrillic-ext.woff2') format('woff2');
	unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/opensans-cyr/opensans-600-cyrillic.woff2') format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/opensans-cyr/opensans-600-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/opensans-cyr/opensans-600-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/opensans-cyr/opensans-700-cyrillic-ext.woff2') format('woff2');
	unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/opensans-cyr/opensans-700-cyrillic.woff2') format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/opensans-cyr/opensans-700-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/opensans-cyr/opensans-700-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
 * =====================================================================
 * Единый шрифт сайта — Open Sans (@font-face легаси-CSS).
 *
 * До правки вперемешку: body/формы — Source Sans Pro (SF4 и легаси),
 * заголовки и ссылки футера — Verdana (на Linux его нет → браузер
 * рисует Times-serif), остальное — Open Sans. Собираем всё на
 * Open Sans; его легаси-варианты (Light/Semibold/Bold) — та же
 * гарнитура, их не трогаем. Google-шрифт SF4 отключён в functions.php.
 * =====================================================================
 */
body,
button,
input,
select,
textarea,
.alpha,
h1, h2, h3, h4, h5, h6,
.site-footer a:not(.button),
.first-terem p,
a.zagolovok-v-stati {
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}

/*
 * =====================================================================
 * Десктоп (≥768px)
 *
 * Шапка как на проде: вторичное меню, затем слева логотип, справа
 * колонка «корзина → поиск → соцсети», ниже — тёмная панель главного меню.
 * Правая колонка собирается естественным порядком флоатов: каждый блок
 * прижат вправо и посажен clear:right под предыдущий. Никаких
 * отрицательных полей: корзина больше не хукается внутрь обёртки
 * навигации (см. terem_reorder_hooks в functions.php).
 * =====================================================================
 */
@media (min-width: 768px) {

	/* Шапка: без верхнего поля SF4 (2.618em) — на проде вторичное меню прижато кверху. */
	.site-header {
		padding-top: 0;
	}

	/*
	 * Специфичность: SF4 при layout-классе body .storefront-secondary-navigation
	 * задаёт .site-branding width:21.7391% селектором (0,0,4,0) — обычные
	 * правила child-темы его не перебивают. Дублируем селектор SF4 (он позже в каскаде).
	 */
	.site-header .site-branding,
	.storefront-secondary-navigation .site-header .site-branding,
	.storefront-secondary-navigation.woocommerce-active .site-header .site-branding {
		display: block;
		width: 66.7391304348%;
		float: left;
		margin-right: 1.347826087%;
		clear: both;
		padding-top: 10px;
	}

	/* Логотип (бывший inline-стиль в storefront_site_title_or_logo). */
	.site-title-logo {
		float: left;
		display: block;
		width: 40%;
		height: auto;
		padding-top: 25px;
		padding-left: 30px;
		text-align: center;
	}

	.site-header .site-branding img.img-site-branding {
		max-width: 100%;
		height: auto;
		margin: 0 0 10px 0;
	}

	.woocommerce-active .site-header .secondary-navigation,
	.storefront-secondary-navigation .site-header .secondary-navigation,
	.storefront-secondary-navigation.woocommerce-active .site-header .secondary-navigation {
		width: 100%;
		float: left;
		border-bottom: 3px solid #9d9e9e;
	}

	.woocommerce-active .site-header .secondary-navigation ul,
	.storefront-secondary-navigation .site-header .secondary-navigation ul {
		list-style: none;
		margin: 0;
		padding-left: 0;
		display: block;
	}

	.woocommerce-active .site-header .secondary-navigation ul li,
	.storefront-secondary-navigation .site-header .secondary-navigation ul li {
		display: inline-block;
		text-align: left;
		border-right: 1px solid #ffffff;
	}

	.woocommerce-active .site-header .secondary-navigation ul li a,
	.storefront-secondary-navigation .site-header .secondary-navigation ul li a {
		display: block;
	}

	/* Корзина — как на проде: UL шириной 20.74% колонки (20.74/30.74 от нашего
	 * wrap ≈ 67.47%), прижат вправо; «0 ₽» слева, иконка float:right справа.
	 * Верх строки — у нижней кромки вторичного меню. */
	.site-header .site-header-cart-wrap,
	.storefront-secondary-navigation.woocommerce-active .site-header .site-header-cart-wrap {
		float: right;
		width: 20.7391304348%;
		margin: -15px 0 0 0;
		padding-top: 0;
	}

	/*
	 * Легаси вешает раскладку прямо на UL корзины (width 20.74%, float right,
	 * margin-top:-131px — «вертикаль» SF2) селектором (0,3,0) — дублируем его
	 * (терем-файл позже в каскаде) и усиливаем элементом. Ширина — своя колонка,
	 * текст слева: «0 ₽ 0 Товаров» + иконка справа (float:right легаси).
	 */
	.site-header ul.site-header-cart,
	.woocommerce-active .site-header .site-header-cart,
	.storefront-secondary-navigation.woocommerce-active .site-header .site-header-cart {
		float: none;
		width: auto;
		margin: 0;
		font-size: 18px;
		position: relative;
		text-align: left;
	}

	/* Поиск — под корзиной (зазор как на проде, ~4px). */
	.woocommerce-active .site-header .site-search,
	.storefront-secondary-navigation .site-header .site-search,
	.storefront-secondary-navigation.woocommerce-active .site-header .site-search {
		width: 30.7391304348%;
		float: right;
		clear: right;
		margin: 4px 0 0 0;
	}

	/* Соцсети (MAX, VK) — под поиском, по правому краю колонки. */
	.woocommerce-active .site-header .site-set,
	.storefront-secondary-navigation.woocommerce-active .site-header .site-set {
		float: right;
		clear: right;
		width: 30.7391304348%;
		margin: 10px 0 8px 0;
		text-align: right;
	}

	.site-set a {
		display: inline-block;
		vertical-align: middle;
		margin-left: 6px;
		text-decoration: none;
	}

	.site-set a img {
		display: inline-block;
		vertical-align: middle;
	}

	/* Главное меню — полная ширина, ниже всех флоатов шапки. */
	.woocommerce-active .site-header .main-navigation,
	.storefront-secondary-navigation .site-header .main-navigation {
		width: 100%;
		float: left;
		margin-right: 1.347826087%;
		clear: both;
	}

	/*
	 * Светлая шапка на всех страницах, как на проде: легаси красит .site-header
	 * в тёмный #2c2d33 вне главной, а SF4/woo-11 вешает хлебные крошки везде,
	 * поэтому легаси-класс .no-wc-breadcrumb (светлый фон) не появляется ни на
	 * одной странице. Рисуем фоновую текстуру прода всем страницам ≥768px.
	 * (0,1,0) позже легаси в каскаде — перебивает его базовое правило.
	 */
	.site-header {
		background-color: #f9f8f6;
		background-image: url(/wp-content/images/bg-001.jpg);
		background-position: center center;
	}

	/* Корзина: легаси/inline-стили красят ссылку белым — на светлой шапке не видно. */
	.woocommerce-active .site-header .site-header-cart .cart-contents,
	.storefront-secondary-navigation.woocommerce-active .site-header .site-header-cart .cart-contents {
		color: #43454b;
	}

	.woocommerce-active .site-header .site-header-cart .cart-contents .count,
	.storefront-secondary-navigation.woocommerce-active .site-header .site-header-cart .cart-contents .count {
		color: #6d6d6d;
	}

	/*
	 * Заглушка корзины (1.1.56): на кешируемых страницах цифр в HTML нет —
	 * их дорисовывает wc-cart-fragments. Резервируем ширину, чтобы шапка
	 * не прыгала в момент прихода цифр.
	 */
	.woocommerce-active .site-header .site-header-cart .cart-contents .amount.terem-cart-placeholder,
	.storefront-secondary-navigation.woocommerce-active .site-header .site-header-cart .cart-contents .amount.terem-cart-placeholder {
		display: inline-block;
		min-width: 3.5em;
	}

	.woocommerce-active .site-header .site-header-cart .cart-contents .count.terem-cart-placeholder,
	.storefront-secondary-navigation.woocommerce-active .site-header .site-header-cart .cart-contents .count.terem-cart-placeholder {
		display: inline-block;
		min-width: 4.5em;
	}

	/*
	 * Активный пункт вторичного меню: inline-стили SF4 (цвет заголовка из модов
	 * темы) красят его белым (0,3,1) — на светлой шапке невидим (перебивали и на
	 * мобильной, см. ниже). Акцентный красный сайта читается на любом фоне.
	 */
	.site-header .secondary-navigation ul.menu li.current-menu-item > a,
	.site-header .secondary-navigation ul.menu li.current-menu-parent > a,
	.site-header .secondary-navigation ul.menu li.current-menu-ancestor > a,
	.site-header .secondary-navigation ul li.current_page_item > a,
	.site-header .secondary-navigation ul li.current_page_parent > a,
	.site-header .secondary-navigation ul li.current_page_ancestor > a {
		color: #ed3237;
	}

	/*
	 * Активный пункт главного меню: просто красный текст на серой полосе
	 * меню читается слабо — делаем белую ссылку на красной подложке
	 * (акцентный цвет сайта).
	 */
	.site-header .main-navigation ul.menu li.current-menu-item > a,
	.site-header .main-navigation ul.menu li.current-menu-parent > a,
	.site-header .main-navigation ul.menu li.current-menu-ancestor > a,
	.site-header .main-navigation ul li.current_page_item > a,
	.site-header .main-navigation ul li.current_page_parent > a,
	.site-header .main-navigation ul li.current_page_ancestor > a {
		color: #ffffff;
		background-color: #ed3237;
		border-radius: 3px;
	}
}

/*
 * =====================================================================
 * Главное меню на узком десктопе (768–1199px)
 *
 * Пункты не влезают в одну строку, перенос даёт «повисший» пункт
 * с белой вертикальной чертой (border-right). В этом диапазоне убираем
 * разделители — строки центрируются легаси (text-align:center) и
 * переносятся аккуратно.
 * =====================================================================
 */
@media (min-width: 768px) and (max-width: 1199px) {
	.site-header .main-navigation ul.menu > li {
		border-right: 0;
	}

	.site-header .main-navigation ul.menu > li:first-child {
		margin-left: 0;
		border-left: 0;
	}

	.site-header .main-navigation ul.menu > li > a {
		padding-left: 0.8em;
		padding-right: 0.8em;
	}
}

/*
 * =====================================================================
 * Фильтр по цене (WOOF, woocommerce-products-filter)
 *
 * front.css плагина ставит треку .price_slider жёсткий min-width:200px —
 * в узком левом сайдбаре (контент 174px) трек вылезает за блок вправо
 * вместе с правым ползунком. Ширина трека = ширина контейнера.
 * =====================================================================
 */
.widget_price_filter .price_slider_wrapper .price_slider {
	min-width: 0;
}

/*
 * =====================================================================
 * Кнопка «вверх» (wpfront-scroll-top)
 *
 * Обновлённый плагин 3.x рендерит контейнер <button>, а легаси-правило
 * `button,input,select,textarea{width:100%}` растягивает его на весь
 * экран — flex центрирует стрелку, и она повисает посреди страницы
 * (на проде старая версия плагина рендерила <div> и проблемы не было).
 * Возвращаем авторазмер: позицию плагин ставит сам (right/bottom 20px).
 *
 * Вид кнопки (1.4.64, фидбек «несоразмерно и некрасиво»): раньше на
 * десктопе висел голый чёрный шеврон в натуральную величину 64×68 —
 * теперь тот же белый кружок, что на мобильном с 1.4.54: 48px, шеврон
 * 20px по центру, рамка и мягкая тень; по ховеру тень чуть сильнее.
 * Специфичность body # обязательна: плагин печатает свой <style> в
 * конце body и на равной специфичности побеждает (у него radius 4px).
 * =====================================================================
 */
body #wpfront-scroll-top-container {
	width: 48px;
	height: 48px;
	padding: 0;
	background: #fff;
	border: 1px solid var(--terem-line, #e2e2e2);
	border-radius: 50%;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .14);
	transition: box-shadow .15s ease, border-color .15s ease;
}

body #wpfront-scroll-top-container img {
	width: 20px;
	height: auto;
}

body #wpfront-scroll-top-container:hover,
body #wpfront-scroll-top-container:focus-visible {
	border-color: #c9ccd2;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}

/*
 * =====================================================================
 * Мобильная раскладка (<768px)
 *
 * Одна колонка, по центру: логотип → корзина → поиск → соцсети →
 * кнопка «Меню» → разворачиваемое меню каталога (локация handheld,
 * «WP-меню»). Шапка светлая на всех страницах: легаси красит её в
 * тёмный (#2c2d33) вне главной, на фоне тёмного SF4-меню пропадает
 * кнопка и ссылки.
 * =====================================================================
 */

@media (max-width: 767.98px) {

	/*
	 * Шапка одной строкой 49px, как на прода (wptouch): SF4 даёт ей
	 * padding 1.6em сверху/снизу и margin-bottom 2.24em — из-за этого
	 * строка раздувалась до ~100px, а плашка телефонов отрывалась от
	 * шапки («телефоны улетают» на главной). Всё обнуляем.
	 */
	.site-header,
	/* Легаси красит главную специфичностью (0,4,0): margin 2.24em (щель
	 * перед плашкой) + фоновая текстура bg-001.jpg. Перебиваем тем же
	 * селектором — terem-fixes стоит позже в каскаде. */
	.home.blog .site-header,
	.home.page:not(.page-template-template-homepage) .site-header {
		background-color: #ffffff;
		background-image: none;
		padding-top: 0;
		padding-bottom: 0;
		margin-bottom: 0;
	}

	/* Логотип по центру (SF4 оставляет справа 120px под кнопку меню). */
	.site-header .site-branding,
	.storefront-secondary-navigation .site-header .site-branding,
	.storefront-secondary-navigation.woocommerce-active .site-header .site-branding {
		float: none;
		width: 100%;
		clear: both;
		margin-right: 0;
		padding-top: 4px;
	}

	.site-title-logo {
		float: none;
		width: 100%;
		padding: 2px 0;
		text-align: center;
	}

	.site-header .site-branding img.img-site-branding {
		display: block;
		width: auto;
		max-width: 209px;
		height: auto;
		margin: 0 auto;
	}

	/*
	 * Шапка как на проде (wptouch-стиль): одна строка «гамбургер — логотип —
	 * лупа», под ней серая плашка телефонов. Корзина, поле поиска и соцсети
	 * из мобильной шапки убраны (корзина доступна в нижней панели SF4).
	 */
	.site-header .site-header-cart-wrap,
	.site-header .site-search,
	.site-header .site-set,
	.woocommerce-active .site-header .site-search,
	.storefront-secondary-navigation.woocommerce-active .site-header .site-search,
	.woocommerce-active .site-header .site-header-cart .cart-contents,
	.storefront-secondary-navigation.woocommerce-active .site-header .site-header-cart .cart-contents {
		display: none;
	}

	/*
	 * Гамбургер — статичная кнопка в строке шапки (1.1.66): absolute к
	 * шапке, уезжает со страницей при прокрутке, без fixed-поведения и
	 * анимаций (класс terem-scrolled и его скрипт удалены). Он внутри
	 * off-canvas панели в DOM, вынести нельзя — SF4 ищет кнопку только
	 * внутри #site-navigation. При открытом меню уезжает вправо вместе
	 * с сайтом и закрывается повторным тапом (см. :has(.toggled) ниже).
	 */
	.site-header .menu-toggle {
		position: absolute;
		top: 3px;
		left: 6px;
		width: 44px;
		max-width: 44px;
		height: 44px;
		margin: 0;
		padding: 0;
		border: 0;
		background: transparent;
		color: transparent;
		font-size: 20px;
		text-align: center;
		overflow: hidden;
		z-index: 100001;
		/* Бокс 44px = боксы иконок (лупа/корзина): полоски гамбургера
		 * стоят на top:50% этого бокса — центры совпадают (1.1.64).
		 * Было padding 0.6em → бокс 56px и гамбургер на ~6px ниже иконок. */
	}

	/*
	 * Легаси красит ВСЕ button в тёмный (#43454b, radius 4px) и темнее
	 * на hover/focus — после тапа кнопка меню покрывалась серым блоком.
	 * У гамбургера фон прозрачен в любом состоянии.
	 */
	.site-header .menu-toggle,
	.site-header .menu-toggle:hover,
	.site-header .menu-toggle:focus,
	.site-header .menu-toggle:active {
		background: transparent;
		background-image: none;
		border: 0;
		box-shadow: none;
		-webkit-tap-highlight-color: transparent;
	}

	/* Гамбургер абсолютен к шапке — админ-бар сверху в потоке, сдвигать
	 * top не нужно (правило top:49px от fixed-эпохи удалено в 1.1.66). */

	/* Родная кнопка SF живёт внутри fixed-панели меню — скрыта, меню
	 * открывает статичная кнопка .terem-mobile-burger из шапки (1.1.67):
	 * клик пробрасывается панельной, SF сам крутит классы/aria. */
	.main-navigation .menu-toggle {
		display: none;
	}

	.site-header .menu-toggle span {
		color: transparent;
		white-space: nowrap; /* иначе прозрачная надпись «Меню» переносится и растягивает кнопку до ~90px */
	}

	.site-header .menu-toggle::before,
	.site-header .menu-toggle::after,
	.site-header .menu-toggle span::before {
		background-color: #43454b;
	}

	/* Лупа — справа (ссылка на поиск, терем-элемент из header.php). */
	.terem-mobile-search {
		position: absolute;
		top: 3px;
		right: 8px;
		width: 44px;
		height: 44px;
		z-index: 20;
	}

	.terem-mobile-search::before {
		content: "\f002";
		font: normal normal normal 20px/44px FontAwesome;
		color: #43454b;
	}

	/*
	 * Корзина — полоса под основным меню (1.1.61–1.1.65) УДАЛЕНА в 1.2.0:
	 * вместо неё нижняя таб-панель с кнопкой «Корзина» и бейджем
	 * (разметка footer.php, стили в секции 1.2.0 в конце файла,
	 * фрагмент terem_tabbar_cart_fragment).
	 */

	/* Плашка телефонов под шапкой: как на проде — узкая тёмно-серая
	 * полоса (#555151), одна строка 16px по центру. */
	.terem-mobile-phones {
		display: block;
		background-color: #555151;
		text-align: center;
		padding: 1px 8px;
		font-size: 16px;
		line-height: 1.2;
	}

	.terem-mobile-phones a {
		color: #ffffff;
		text-decoration: none;
	}

	/* запятую между номерами легаси красит в фирменный красный — на проде она белая */
	.terem-mobile-phones span {
		color: #ffffff;
	}

	/*
	 * Форма поиска: по тапу на лупу раскрывается под плашкой телефонов
	 * (как на проде). Без терем-search-open скрыта; на белой подложке,
	 * инпут во всю ширину строки.
	 */
	.terem-mobile-search-form {
		display: none;
		background-color: #ffffff;
		padding: 8px 10px;
	}

	body.terem-search-open .terem-mobile-search-form {
		display: block;
	}

	.terem-mobile-search-form input[type="search"] {
		width: 100%;
		margin: 0;
		padding: 0.6em 0.85em;
		font-size: 16px;
		color: #43454b;
		background-color: #ffffff;
		border: 1px solid #d0d0d0;
		border-radius: 3px;
		-webkit-appearance: none;
		appearance: none;
	}

	/*
	 * Отступ контента от плашки телефонов — на проде контент начинается
	 * не вплотную (~2em), у нас страница прилипала к плашке.
	 */
	.site-content .col-full {
		padding-top: 1.375em;
	}

	/*
	 * Новости (плагин page-list) — карточкой: картинка сверху по центру,
	 * заголовок под ней. Плагиновский float:left зажимал заголовок в
	 * узкую колонку справа от превью и рвал слова по буквам.
	 */
	.page-list-ext .page-list-ext-item {
		clear: both;
		float: none;
		overflow: hidden;
		margin: 0 0 1.8em;
		text-align: center;
	}

	.page-list-ext .page-list-ext-image {
		float: none !important;
		display: block;
		margin: 0 0 0.55em;
		text-align: center;
	}

	.page-list-ext .page-list-ext-image img {
		float: none;
		display: inline-block;
		max-width: 100%;
		height: auto;
		margin: 0;
	}

	.page-list-ext .page-list-ext-title {
		clear: both;
		float: none;
		margin: 0;
		text-align: center;
	}

	/*
	 * Развёрнутое меню — красное, как мобильная тема прода (wptouch): фирменный
	 * красный фон, белые пункты во всю ширину экрана, тонкие светлые
	 * разделители, подкатегории — темнее. Высота пунктов — под палец.
	 */
	/*
	 * Меню — раскрывается на всю ширину поверх сайта. Прокрутка страницы
	 * при открытом меню заблокирована (overflow:hidden на body), иначе
	 * fixed-панель «залипает» над прокрученным контентом.
	 */
	body:has(.main-navigation.toggled) {
		overflow: hidden;
	}

	/* Открытое меню: кнопка уезжает вправо вместе с сайтом на тёмном
	 * фоне — полосы делаем белыми, тап по ней закрывает меню. */
	body:has(.main-navigation.toggled) .site-header .menu-toggle::before,
	body:has(.main-navigation.toggled) .site-header .menu-toggle::after,
	body:has(.main-navigation.toggled) .site-header .menu-toggle span::before {
		background-color: #ffffff;
	}

	html {
		background-color: #2c2d33;
	}

	.site-header .main-navigation {
		position: fixed;
		top: 0;
		left: -110%;
		width: 100%;
		height: 100vh;
		margin: 0;
		transition: left 0.3s ease;
		overflow-y: auto;
		overscroll-behavior: contain;
		z-index: 100000;
		background-color: #dd3333;
	}

	.site-header .main-navigation.toggled {
		left: 0;
	}

	/* Легаси рисует перед пунктами иконки-«документы» (FontAwesome \f0f6) —
	 * на проде их нет, здесь они обрезались у левого края. */
	.site-header .handheld-navigation a::before {
		display: none;
	}

	.site-header .main-navigation.toggled a {
		color: #ffffff;
	}

	/* Пункты как на проде: строка 48px, текст 16px, тёмные разделители
	 * (на красном фоне выглядят более тёмными линиями, не белыми). */
	.site-header .main-navigation.toggled li {
		border-bottom: 1px solid rgba(0, 0, 0, 0.12);
	}

	.site-header .main-navigation.toggled .handheld-navigation ul.menu > li > a,
	.site-header .main-navigation.toggled .handheld-navigation > li > a {
		padding: 0.65em 10px;
		font-size: 16px;
		font-weight: 400;
	}

	/*
	 * Первый пункт «Главная» — как на прода: строка выше остальных (80px),
	 * подпись прижата вправо, перед ней шеврон вниз.
	 */
	.site-header .main-navigation.toggled .handheld-navigation ul.menu > li:first-child > a,
	.site-header .main-navigation.toggled .handheld-navigation > li:first-child > a {
		height: 80px;
		line-height: 80px;
		padding: 0 16px 0 10px;
		text-align: right;
	}

	.site-header .main-navigation.toggled .handheld-navigation ul.menu > li:first-child > a::before,
	.site-header .main-navigation.toggled .handheld-navigation > li:first-child > a::before {
		content: "\f107";
		font-family: FontAwesome;
		font-size: 16px;
		margin-right: 0.4em;
	}

	/*
	 * Подкатегории — темнее красный (на проде раскрытый блок темнеет)
	 * и на ВСЮ ширину панели: SF4 даёт вложенным ul отступ слева
	 * (1.41575em), из-за него тёмный блок начинался не от края.
	 * Текст пунктов при этом сдвинут вправо — иерархия видна.
	 */
	.site-header .main-navigation.toggled ul ul,
	.site-header .main-navigation.toggled .handheld-navigation ul ul {
		background-color: #c92530;
		margin-left: 0;
		margin-right: 0;
		padding-left: 0;
	}

	.site-header .main-navigation.toggled ul ul a,
	.site-header .main-navigation.toggled .handheld-navigation ul ul a {
		padding-left: 1.5em;
	}

	/*
	 * Inline-стили SF4 (цвет текста шапки из модов темы) красят текущий пункт
	 * меню белым (0,3,1) — на красном фоне он сливается с остальными.
	 * Выделяем жирным.
	 */
	.site-header .main-navigation.toggled ul.menu li.current-menu-item > a,
	.site-header .main-navigation.toggled ul.menu li.current_page_item > a,
	.site-header .main-navigation.toggled .handheld-navigation ul.menu li.current-menu-item > a,
	.site-header .main-navigation.toggled .handheld-navigation ul.menu li.current_page_item > a {
		color: #ffffff;
		font-weight: 700;
	}

	/*
	 * Легаси `button {width:100%}` растягивает кнопку раскрытия подкатегорий
	 * на всю строку (невидимая зона клика поверх ссылки). Белая стрелка в
	 * правой ячейке с тёмной чертой слева — как ячейка-шеврон на проде.
	 */
	.site-header .handheld-navigation .dropdown-toggle {
		width: 56px;
		color: #ffffff;
		background: transparent;
		border-left: 1px solid rgba(0, 0, 0, 0.12);
		font-size: 18px;
	}

	.site-header .main-navigation.toggled .handheld-navigation {
		border-top: 1px solid rgba(0, 0, 0, 0.12);
		margin-top: 0;
	}

	/*
	 * Кнопка «вверх» (1.4.54): wpfront-scroll-top с кастомной картинкой-
	 * шевроном (stre.png 64×68, плагин не масштабирует) висел справа
	 * bottom:24px — наезжал и на круглую кнопку Jivo (правый край, наш
	 * подъём над панелью 58px), и на саму таб-панель. Jivo трогать
	 * нельзя (инлайн-стили виджета), поэтому стрелка уезжает ВЛЕВО и
	 * поднимается над панелью: 58px + safe-area + 12px зазор. Белый
	 * кружок с 1.4.64 живёт в базовом правиле (48px), здесь только
	 * позиция и тач-цель 44px.
	 */
	body #wpfront-scroll-top-container {
		left: 12px;
		right: auto;
		bottom: calc(58px + env(safe-area-inset-bottom, 0px) + 12px);
		width: 44px;
		height: 44px;
	}

	/* Картинки контента с зашитой инлайн-высотой (например, блоки категорий
	 * на главной — height:426px из контента прода): на мобильном колонка
	 * уже, ширина обжимается max-width, а высота остаётся — пропорция
	 * ломается («растянуты по вертикали»). Возвращаем авто-высоту; слайдеру
	 * (сам ставит инлайн-размеры) правило не мешает — его классы исключены.
	 */
	#content img[style*="height"]:not([class*="rs-"]):not([class*="rev"]) {
		height: auto !important;
	}

	/*
	 * Главная, баннеры категорий (1.1.69): пары <a><img></a> с float:left
	 * из легаси-контента; у первых в паре img-left-f даёт margin 0 25px 15px 0,
	 * у вторых ничего — зазоры между блоками на мобильном выходили 15px и 0
	 * вперемешку. Ставим всем ровный отступ снизу; float и боковые отступы
	 * снимаем — баннер на всю ширину колонки.
	 */
	.entry-content a[href*="/product-category/"] > img {
		float: none;
		display: block;
		width: 100%;
		margin: 0 0 15px;
	}

	/*
	 * Легаси-обтекание картинок текстом (img-left/img-right/img-left-first/
	 * img-left-f — float и боковые margins из storefront-2-custom.css, ~250
	 * страниц новостей/акций + «О компании»): на мобильном колонка узкая,
	 * тексту рядом оставалось 40–60px — «столбик из букв». Обтекание
	 * выключаем: картинка — блок по центру, текст ниже. На десктопе
	 * обтекание остаётся как было.
	 */
	.entry-content img.img-left,
	.entry-content img.img-right,
	.entry-content img.img-left-first,
	.entry-content img.img-left-f {
		float: none;
		display: block;
		max-width: 100%;
		height: auto;
		margin: 0 auto 15px;
	}

	/*
	 * Мобильный футер: с terem-fixes 1.1.50 общий футер из
	 * footer.php виден и на мобильных (правила — в секции «Футер»
	 * в конце файла). Легаси-блок wptouch (terem-mobile-footer) удалён.
	 */
}

/*
 * Главная, слайдер-«галерея» (1.1.69): легаси-CSS держит контейнер слайдера
 * на width:794px (.first-page-ext .first-page-sl-ext-item) — на телефоне
 * уезжает за экран. Отпускаем контейнер на ширину колонки. На ≥768 то же
 * делает правило карусели ниже по файлу (margin 20px) — здесь только
 * мобильный отступ 15px.
 */
@media (max-width: 767.98px) {
	.first-page-ext .first-page-sl-ext-item {
		width: 100%;
		max-width: 100%;
		margin: 0 0 15px;
	}
}

/*
 * Плашки-заголовки секций главной «АКЦИИ ❯» / «НОВОСТИ ❯»: белый текст
 * на легаси-сером #9d9e9e давал контраст 2.7:1 (a11y-провал Lighthouse).
 * Фон задаётся inline-стилем в контенте страницы — перебиваем здесь,
 * контент страницы не трогаем: #767676 даёт 4.5:1. Вне медиаблоков —
 * плашки видны на всех ширинах.
 */
.entry-content div[style*="background: #9d9e9e"] {
	background-color: #767676 !important;
}

/*
 * Мобильные элементы (плашка телефонов, поиск): на десктопе не существуют.
 * Прячем только ≥768px — иначе правило, стоящее после мобильного
 * медиаблока, перебило бы их же display внутри него.
 */
@media (min-width: 768px) {
	.terem-mobile-phones,
	.terem-mobile-search-form {
		display: none;
	}
}

/*
 * Промо-страницы акций: контент набран вручную флоатами (инлайн
 * style="float: left" на блоках картинки и текста) — на десктопе текст
 * ложится колонкой справа от картинки, а на мобиле его зажимает в узкую
 * полосу рядом с ней (~160px, перенос через слово). На <768px
 * разворачиваем блоки в стек на всю ширину; !important — против
 * инлайн-стилей. Десктоп не затронут.
 */
@media (max-width: 767px) {
	.entry-content div[style*="float"] {
		float: none !important;
		width: auto !important;
	}
	.entry-content div[style*="float"]:after {
		content: "";
		display: block;
		clear: both;
	}
	.entry-content div[style*="float"] img {
		max-width: 100%;
		height: auto;
	}
}

/*
 * Слайдер «Фильтр по цене» на тач-устройствах: без touch-action браузер
 * забирал жест под нативный скролл страницы, preventDefault у
 * jquery-ui-touch-punch вызывался на событии с cancelable=false (Chrome
 * Intervention в консоли), и ручку нельзя было тащить. На ручке жест целиком
 * уходит слайдеру; на дорожке — только горизонтальный (drag к точке касания),
 * вертикальный свайп над дорожкой по-прежнему скроллит страницу.
 */
.widget_price_filter .price_slider {
	touch-action: pan-y;
}
.widget_price_filter .ui-slider .ui-slider-handle {
	touch-action: none;
}

/*
 * Hover/focus кнопок сайдбара фильтров (1.4.19, фидбек «Фильтрация при
 * наведении становится светло-серой с белыми буквами, плохой контраст»):
 * инлайн-CSS кастомайзера Storefront светлит фон любой не-alt .button до
 * #d5d5d5 (правило button:hover,…,.button:hover в <head>), белый текст на
 * нём читается отвратительно. Базовый тёмный #43454b не трогаем, hover/focus
 * уводим ВНИЗ в #2c2d33 — как у родных alt-кнопок SF (тот же приём затемнения);
 * специфичность (0,3,0) против (0,2,0) у кастомайзера, файл позже.
 */
.widget-area .button:hover,
.widget-area .button:focus,
.widget-area-2 .button:hover,
.widget-area-2 .button:focus {
	background: #2c2d33;
	color: #fff;
	text-decoration: none;
}

/* --- Панель сортировки каталога (1.4.21, фидбек «сортировка плохо
 *     выглядит — сделай красивее и удобнее») --------------------------------
 * Родная woo-панель .storefront-sorting: children на флоатах, select —
 * системный контрол с родной стрелкой, шрифт .875em. Переводим панель на
 * flex: счётчик слева приглушённым, сортировка справа; select — белая
 * пилюля 42px с кастомным шевроном (appearance:none; нативный дропдаун
 * сохранён — доступность и привычное поведение на таче). Флоаты сброшены
 * (в flex-контейнере игнорируются, сняты и явно — против SF-правил
 * .woocommerce-ordering/.woocommerce-result-count (0,1,0)); clearfix
 * .storefront-sorting::before/::after стал лишним. На <768 сортировка
 * во всю ширину строки. Метки пунктов уточнены gettext'ом
 * (terem_shop_texts): «Исходная сортировка» → «По умолчанию», «По
 * возрастанию/убыванию цены» → «Сначала дешевле/дороже».
 */
.storefront-sorting {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 10px 14px;
	margin-bottom: 22px;
}
/* Нижняя панель сортировки (после грида) — SF печатает её без верхнего
 * отступа, верхняя кромка прилипала к плиткам вплотную (фидбек «нижняя
 * кнопка по умолчанию слеплена с плитками»). Соседство с ul.products
 * отличает её от верхней панели (та СНАЧАЛА, до грида). Отступ = ритм
 * верхней панели (22px). */
ul.products + .storefront-sorting {
	margin-top: 22px;
}
/* Clearfix-псевдоэлементы SF в flex-контейнере лишние flex-items. */
.storefront-sorting::before,
.storefront-sorting::after {
	content: none;
}
/* Пустой .woocommerce-notices-wrapper внутри панели — первый flex-item,
 * space-between ставил сортировку в центр. Порядок: счётчик (order:-1)
 * слева, сортировка прижата вправо авто-маржином. */
.storefront-sorting .woocommerce-result-count {
	order: -1;
	float: none;
	margin: 0;
	padding: 0;
	color: var(--terem-muted);
	font-size: 14px;
}
/* Селект сортировки живёт в двух местах: панель .storefront-sorting
 * (товарные вьюхи) и строка «Смотрите также» на разделах (1.4.77, фидбек
 * 2026-10-13: ссылки и сортировка — одна строка) — общие классы
 * .woocommerce-ordering/.terem-cat-ordering. */
.storefront-sorting .woocommerce-ordering,
.terem-cat-ordering {
	float: none;
	margin: 0 0 0 auto;
	padding: 0;
}
.storefront-sorting .woocommerce-ordering select.orderby,
.terem-cat-ordering select.orderby {
	appearance: none;
	-webkit-appearance: none;
	box-sizing: border-box;
	width: auto;
	max-width: 100%;
	height: 42px;
	margin: 0;
	padding: 0 38px 0 14px;
	border: 1px solid #d9d9d9;
	border-radius: 8px;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235a5a5a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	color: var(--terem-text, #1f1f1f);
	font-size: 14px;
	cursor: pointer;
}
.storefront-sorting .woocommerce-ordering select.orderby:hover,
.terem-cat-ordering select.orderby:hover {
	border-color: #b3b3b3;
}
.storefront-sorting .woocommerce-ordering select.orderby:focus-visible,
.terem-cat-ordering select.orderby:focus-visible {
	border-color: var(--terem-red-dark, #c9272c);
	outline: 2px solid var(--terem-red-dark, #c9272c);
	outline-offset: 1px;
}
@media (max-width: 767.98px) {
	.storefront-sorting .woocommerce-ordering,
	.terem-cat-ordering {
		width: 100%;
	}
	.storefront-sorting .woocommerce-ordering select.orderby,
	.terem-cat-ordering select.orderby {
		width: 100%;
	}
}

/*
 * Ручка слайдера 1em (~16px) — меньше минимальной тач-цели. На тач-экранах
 * расширяем зону попадания прозрачным псевдоэлементом: он часть ручки,
 * jQuery UI найдёт её по координатам касания (elementFromPoint).
 */
@media (pointer: coarse) {
	.widget_price_filter .ui-slider .ui-slider-handle:before {
		content: "";
		position: absolute;
		top: -12px;
		right: -12px;
		bottom: -12px;
		left: -12px;
	}
}

/*
 * Ровная сетка каталога (товары и подкатегории в ul.products). У ~1% миниатюр
 * исходник не квадрат (например 324×147): ядро не создаёт кроп
 * woocommerce_thumbnail 324×324, если исходник меньше по высоте (без апскейла),
 * srcset отдаёт оригинал, картинка рендерится 141×65 вместо 141×141, и строка
 * сетки проседает под её высоту. Вписываем миниатюру в квадрат ячейки с
 * обрезкой по центру — независимо от пропорций исходного файла.
 */
ul.products li.product img.attachment-woocommerce_thumbnail,
ul.products li.product img.woocommerce-placeholder {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/*
 * Ровные ряды каталога: цена и кнопка «В корзину» на одном уровне.
 * Миниатюры выше уже квадратные, но текст карточки плавает: заголовок
 * занимает 3–5 строк, описание — 1–2, и в легаси float-сетке карточки ряда
 * растут каждая под свой контент — кнопки идут «лесенкой» до ~50px.
 * Контейнер становится flex-строкой: карточки ряда вытягиваются на высоту
 * самой высокой (align-items: stretch по умолчанию), внутри карточки цена
 * прижимается к низу ссылки (margin-top: auto), кнопка — следующая за
 * ссылкой, и весь ряд стоит на одной линии. Ширины колонок (22.05% +
 * margin-right 3.8% и т.п.) и классы .first/.last работают как раньше:
 * float у flex-элементов игнорируется по спецификации. Псевдоэлементы-
 * кларификсеры контейнера в flex не нужны и убраны (иначе ::after стал бы
 * лишним flex-элементом).
 */
ul.products {
	display: flex;
	flex-wrap: wrap;
}

/* Запас 2px справа (только десктоп): у columns-2/3 сумма ширин ряда даёт
 * ровно 100%, а во flex в набивку строки входит margin каждой карточки,
 * включая последнюю в ряду — пограничный субпиксель способен перенести
 * карточку на новую строку (Safari/WebKit считает проценты без округления
 * вниз). Мобильная раскладка (одна карточка в ряд) запаса не требует.
 * Правый край уходит на 2px в пустой отступ — визуально не заметно. */
@media (min-width: 768px) {
	ul.products {
		margin-right: -2px;
	}
}

/*
 * Мобильный каталог (до 768px): Storefront 4.x задаёт сеточные ширины
 * только в @media (min-width: 768px). В исходном block-потоке карточка без
 * ширины растягивалась на всю строку, во flex-контейнере (см. выше) —
 * сжимается по контенту, и квадратная миниатюра (aspect-ratio 1/1 при
 * width:100% — циклическая зависимость) даёт случайную ширину 35–326px.
 * Одна карточка на строку не годится: квадрат во всю ширину экрана —
 * полэкрана на товар. Две колонки: gap во flex не даёт субпиксельной
 * проблемы набивки строки. Зазор 12px фикс-пикселями (было 4% ≈ 14px),
 * ширина calc(50% - 6px) — колонки делят контейнер без «48%+4%»-остатка;
 * 14px между фото соседних карточек (1px+12px+1px) — воздух в диапазоне
 * маркетплейсов при фото на всю ширину плитки (секция карточек ниже).
 * Заголовок под картинкой прижат влево как в легаси (SF4 центрирует),
 * вертикальный ритм плотнее — марджин SF 4.24em рассчитан на
 * одноколоночную раскладку.
 */
@media (max-width: 767.98px) {
	ul.products {
		column-gap: 12px;
		row-gap: 2.4em;
	}

	ul.products li.product {
		width: calc(50% - 6px);
		margin-right: 0;
		margin-bottom: 0;
		text-align: left;
	}

	ul.products li.product img {
		margin-bottom: 10px;
	}
}

ul.products::before,
ul.products::after {
	content: none;
}

ul.products li.product {
	display: flex;
	flex-direction: column;
}

ul.products li.product .woocommerce-loop-product__link {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

/* Цена — вниз ссылки, сразу над кнопкой (кнопка вне ссылки, следующая). */
ul.products li.product .price {
	margin-top: auto;
	padding-top: 0.3em;
}

/*
 * Кнопка «В корзину» в каталоге: легаси красит её в тёмный #43454b с белым
 * текстом, но на hover инлайн-CSS кастомайзера Storefront перекрашивает фон
 * в светло-серый #d5d5d5, а легаси-.button:hover { color:#fff } удерживает
 * текст белым — белое на светло-сером не читается. Затемняем фон (как легаси
 * делает для .alt), текст остаётся белым. (0,4,2) — перекрывает оба
 * источника независимо от порядка загрузки. Это же сочетание диктует и цвет
 * ссылки «В корзине» (added_to_cart), появляющейся после добавления.
 */
ul.products li.product .button:hover,
ul.products li.product .button:focus,
ul.products li.product .added_to_cart:hover,
ul.products li.product .added_to_cart:focus {
	background-color: #2c2d33;
	border-color: #2c2d33;
	color: #fff;
}

/*
 * Лента партнёров на главной — фолбэк-шорткод [tiny-carousel-slider] из
 * functions.php (плагины tiny-carousel-* деактивированы как мёртвые,
 * см. speedup-план). Вместо jQuery-карусели — статичная лента: 4 логотипа
 * в рамке как раньше, по центру контейнера; на узких экранах переносятся
 * в сетку 2×2.
 */
.terem-partners ul.terem-partners__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.terem-partners ul.terem-partners__list li {
	padding: 1px;
	border: 1px solid #dcdcdc;
	line-height: 0;
}

.terem-partners ul.terem-partners__list img {
	width: 143px;
	height: auto;
}

/*
 * =====================================================================
 * Главное меню на десктопе (≥768px) — редизайн: светлая полоса вместо
 * серой текстуры легаси, красная линия под пунктом при наведении,
 * белые карточки-дропдауны с плавным появлением и «мостиком» под
 * курсор, мега-панель на всю ширину для «Строительных смесей»,
 * примыкание к правому краю у «Сантехники» и «Обоев».
 * Мобильное меню (max-width: 767.98px) не затронуто.
 *
 * Адаптация внешнего CSS под реальную разметку terem:
 *  — меню размечено ul.menu (не ul.nav-menu, как в исходнике);
 *  — акцент — фирменный красный сайта #ed3237 (как в остальной шапке);
 *  — сброшены легаси-правила: текстура back-menu-zag-grey.jpg, белый
 *    регистр, 5px-граница панели, белые разделители пунктов, стрелка
 *    FontAwesome \f107, серые плашки #777 и width:200px в дропдаунах;
 *  — активный пункт: красный текст + линия вместо белого на красной
 *    подложке из блока выше по этому же файлу.
 * =====================================================================
 */
:root {
	--terem-red: #ed3237;
	--terem-text: #1f1f1f;
	--terem-muted: #6b6b6b;
	--terem-line: #e8e8e8;
	--terem-hover: #f5f5f5;
	--terem-strip: #f6f6f6;
	--terem-red-dark: #c9272c;
	--terem-ink: #1f1f1f;
	--terem-bg-soft: #f5f5f6;
	--terem-radius: 10px;
	--terem-radius-sm: 8px;
	--terem-shadow: 0 6px 18px rgba(0, 0, 0, .08);
	--terem-shadow-lg: 0 16px 40px rgba(0, 0, 0, .14);
}

@media (min-width: 768px) {

	/* ---------- Панель меню ---------- */
	.storefront-primary-navigation {
		background: #fff;                            /* вместо текстуры легаси */
		border-bottom: 1px solid var(--terem-line);  /* вместо 5px #ddd */
		padding-top: 0;
		padding-bottom: 0;
		text-transform: none;                        /* легаси: uppercase */
	}

	/* Якорь для мега-панели «Строительных смесей». */
	.storefront-primary-navigation .main-navigation {
		position: relative;
	}

	.storefront-primary-navigation .primary-navigation ul.menu {
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
		/* Текст первого пункта — вровень с краем col-full (логотип, крошки).
		 * SF4 тянет меню на -1em; компенсируем фактической боковой набивкой
		 * ссылки 12px (блок «Меню каталога: ниже и компактнее» ниже по файлу):
		 * li начинается на 12px левее контента, текст — ровно по краю. */
		margin-left: -12px;
		justify-content: flex-start;
		gap: 4px;
	}

	/* ---------- Пункты верхнего уровня ---------- */
	.storefront-primary-navigation .primary-navigation ul.menu > li {
		border: 0;                                   /* белые разделители легаси */
		background: none;
		box-shadow: none;
		margin-left: 0;                              /* легаси: -1em у первого */
	}

	.storefront-primary-navigation .primary-navigation ul.menu > li > a {
		position: relative;
		display: flex;
		align-items: center;
		gap: 7px;
		padding: 17px 14px;                          /* легаси: .618em/.5em/.3em, 85% */
		color: var(--terem-text);
		font-size: 14px;
		font-weight: 600;
		letter-spacing: .01em;
		text-transform: none;
		transition: color .2s ease;
	}

	/* Красная линия под пунктом при наведении (на месте ::before-иконки легаси). */
	.storefront-primary-navigation .primary-navigation ul.menu > li > a::before {
		content: "";
		position: absolute;
		left: 14px;
		right: 14px;
		bottom: 0;
		height: 3px;
		margin: 0;
		border-radius: 3px 3px 0 0;
		background: var(--terem-red);
		transform: scaleX(0);
		transform-origin: left;
		transition: transform .25s ease;
	}

	.storefront-primary-navigation .primary-navigation ul.menu > li:hover > a,
	.storefront-primary-navigation .primary-navigation ul.menu > li.focus > a,
	.storefront-primary-navigation .primary-navigation ul.menu > li:focus-within > a,
	.storefront-primary-navigation .primary-navigation ul.menu > li.current-menu-item > a,
	.storefront-primary-navigation .primary-navigation ul.menu > li.current-menu-parent > a,
	.storefront-primary-navigation .primary-navigation ul.menu > li.current-menu-ancestor > a {
		color: var(--terem-red);
	}

	.storefront-primary-navigation .primary-navigation ul.menu > li:hover > a::before,
	.storefront-primary-navigation .primary-navigation ul.menu > li.focus > a::before,
	.storefront-primary-navigation .primary-navigation ul.menu > li:focus-within > a::before,
	.storefront-primary-navigation .primary-navigation ul.menu > li.current-menu-item > a::before,
	.storefront-primary-navigation .primary-navigation ul.menu > li.current-menu-parent > a::before,
	.storefront-primary-navigation .primary-navigation ul.menu > li.current-menu-ancestor > a::before {
		transform: scaleX(1);
	}

	/* Активный пункт: вместо белого на красной подложке (блок выше по файлу). */
	.site-header .main-navigation ul.menu li.current-menu-item > a,
	.site-header .main-navigation ul.menu li.current-menu-parent > a,
	.site-header .main-navigation ul.menu li.current-menu-ancestor > a,
	.site-header .main-navigation ul li.current_page_item > a,
	.site-header .main-navigation ul li.current_page_parent > a,
	.site-header .main-navigation ul li.current_page_ancestor > a {
		background-color: transparent;
		border-radius: 0;
	}

	/* ---------- Стрелка: рамкой вместо FontAwesome \f107, поворот при открытии ---------- */
	.storefront-primary-navigation .primary-navigation ul.menu > li.menu-item-has-children > a::after {
		content: "";
		display: inline-block;
		font-family: inherit;
		width: 6px;
		height: 6px;
		margin: 0;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: rotate(45deg);
		transition: transform .2s ease;
	}

	.storefront-primary-navigation .primary-navigation ul.menu > li.menu-item-has-children:hover > a::after,
	.storefront-primary-navigation .primary-navigation ul.menu > li.menu-item-has-children.focus > a::after,
	.storefront-primary-navigation .primary-navigation ul.menu > li.menu-item-has-children:focus-within > a::after {
		transform: rotate(-135deg);
	}

	/* ---------- Выпадающая панель ---------- */
	.storefront-primary-navigation .primary-navigation ul.menu > li > ul.sub-menu {
		position: absolute;
		top: 100%;                                   /* легаси: 85% */
		left: 0;                                     /* легаси: -9999px */
		float: none;
		min-width: 270px;
		margin: 0;                                   /* легаси: margin-left 1.41575em */
		padding: 8px;
		background: #fff;
		border: 1px solid var(--terem-line);
		border-radius: 0 0 14px 14px;
		box-shadow: 0 16px 40px rgba(0, 0, 0, .12);
		z-index: 99999;

		opacity: 0;
		visibility: hidden;
		transform: translateY(8px);
		transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
	}

	.storefront-primary-navigation .primary-navigation ul.menu > li:hover > ul.sub-menu,
	.storefront-primary-navigation .primary-navigation ul.menu > li.focus > ul.sub-menu,
	.storefront-primary-navigation .primary-navigation ul.menu > li:focus-within > ul.sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		transition-delay: 0s;
	}

	/* Невидимый «мостик», чтобы панель не закрывалась по пути курсора. */
	.storefront-primary-navigation .primary-navigation ul.menu > li > ul.sub-menu::before {
		content: "";
		position: absolute;
		top: -12px;
		left: 0;
		right: 0;
		height: 12px;
	}

	/* ---------- Пункты внутри панели ---------- */
	.storefront-primary-navigation .primary-navigation ul.menu ul.sub-menu > li {
		width: 100%;
		float: none;
		background: none;                            /* легаси: плашки #777 */
		border: 0;                                   /* легаси: линии #aaa */
	}

	.storefront-primary-navigation .primary-navigation ul.menu ul.sub-menu > li > a {
		display: block;
		width: auto;                                 /* легаси: 200px */
		padding: 10px 14px;
		border-radius: 8px;
		color: var(--terem-text);
		font-size: 14px;
		font-weight: 400;
		line-height: 1.35;
		white-space: normal;
		/* 1.4.13: явный left — наследование зависит от того, какое легаси-
		 * правило (SF-мод text-align:center на .primary-navigation против
		 * text-align:left на li) победило в конкретном состоянии кеша;
		 * длинные двухстрочные названия «посередине пилюли» читались плохо. */
		text-align: left;
		/* 1.4.12: без padding-left в transition — анимированный сдвиг кнопки
		 * менял ширину текста, и длинные названия («Материалы для устройства
		 * пола и самовыравнивающиеся смеси») перескакивали между 1 и 2
		 * строками при наведении. */
		transition: background .15s ease, color .15s ease;
	}

	.storefront-primary-navigation .primary-navigation ul.menu ul.sub-menu > li > a:hover,
	.storefront-primary-navigation .primary-navigation ul.menu ul.sub-menu > li > a:focus {
		background: var(--terem-hover);
		color: var(--terem-red);
	}

	/*
	 * Зазор между пунктами панели (terem-fixes 1.1.74): без него соседние
	 * серые пиллюли стоят впритык и при наведении сливаются в одну серую
	 * массу — «фон на фоне» (заметно, когда один из пунктов активен и его
	 * пиллюля подсвечена постоянно). 2px — как в мега-панели смесей ниже;
	 * у той сетка с gap, поэтому здесь она исключена.
	 */
	.storefront-primary-navigation .primary-navigation ul.menu > li:not(#menu-item-6174) > ul.sub-menu > li + li {
		margin-top: 2px;
	}

	/* Активная подкатегория в панели. */
	.storefront-primary-navigation .primary-navigation ul.menu ul.sub-menu > li.current-menu-item > a,
	.storefront-primary-navigation .primary-navigation ul.menu ul.sub-menu > li.current-menu-parent > a,
	.storefront-primary-navigation .primary-navigation ul.menu ul.sub-menu > li.current-menu-ancestor > a {
		background: var(--terem-hover);
		color: var(--terem-red);
		font-weight: 600;
	}

	/* 1.4.12: компенсация hover-сдвига padding-left у активных пунктов
	 * удалена вместе с самим сдвигом (см. комментарий выше). */

	/* Первый пункт «Керамический гранит» / «Плитка облицовочная» дублирует
	 * название родителя — выделен жирным как «общий» пункт. Лучше переименовать
	 * его в админке в «Все товары» / «Весь керамогранит». */
	.storefront-primary-navigation .primary-navigation ul.menu #menu-item-14965 > a,
	.storefront-primary-navigation .primary-navigation ul.menu #menu-item-14966 > a {
		font-weight: 600;
	}

	/* ---------- «Строительные смеси»: панель во всю ширину меню, 3 колонки ---------- */
	.storefront-primary-navigation .primary-navigation ul.menu > li#menu-item-6174 {
		position: static;                            /* панель тянется от .main-navigation */
	}

	.storefront-primary-navigation .primary-navigation ul.menu > li#menu-item-6174 > ul.sub-menu {
		left: 0;
		right: 0;
		width: 100%;
		min-width: 0;
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 2px 12px;
		padding: 14px;
	}

	/* ---------- «Сантехника» и «Обои»: панель у правого края ---------- */
	.storefront-primary-navigation .primary-navigation ul.menu > li#menu-item-8885 > ul.sub-menu,
	.storefront-primary-navigation .primary-navigation ul.menu > li#menu-item-33560 > ul.sub-menu {
		left: auto;
		right: 0;
	}
}

/* Уважаем настройку «уменьшить анимацию». */
@media (prefers-reduced-motion: reduce) {
	.storefront-primary-navigation * {
		transition: none !important;
	}
}

/*
 * =====================================================================
 * Компактная шапка (десктоп ≥768px) — terem-fixes 1.1.41–1.1.43.
 *
 * Две строки: серая полоса с «Верхним меню» (и телефоном справа),
 * под ней логотип — поиск — соцсети — корзина; ниже панель каталога,
 * чуть ниже обычного (правила выше, у редизайна меню). Фон шапки —
 * легаси-текстура bg-001.jpg, как было на главной (решение заказчика),
 * на всех страницах. Ничего не закрепляется при прокрутке. Мобильная
 * версия (<768px) не затронута: весь код — внутри @media (min-width:
 * 768px).
 *
 * Телефон: пункт «Верхнего меню» — произвольная ссылка
 * tel:+74722207162 с CSS-классом terem-phone (Внешний вид → Меню).
 *
 * Адаптация внешнего макета под реальную разметку и легаси-каскад:
 *  — переменные (--terem-red/-text/-muted/-line) объявлены выше по
 *    файлу, фирменный красный единый #ed3237; здесь только новая
 *    --terem-strip, чужие не переопределяем (иначе сдвинется красный
 *    и на мобильном меню);
 *  — меню каталога — ul.menu внутри .primary-navigation (в SF4 нет
 *    ul.nav-menu);
 *  — сброшены легаси-правила: флоаты/ширины правой колонки (перебиты
 *    !important против селекторов body.storefront-secondary-navigation…),
 *    серый 3px-бордер вторичного меню, поле логотипа .site-title-logo
 *    (float 40% + padding 25px), отступ картинки лого, margin-right у
 *    цены в корзине, кнопка сабмита AWS (у пилюли своя лупа слева,
 *    кнопка плагина не вписывается).
 * =====================================================================
 */

@media (min-width: 768px) {

	/* ---------- Каркас шапки: сетка в две строки ---------- */
	/*
	 * Фон — легаси-текстура bg-001.jpg на ВСЕХ страницах (как было на
	 * главной; решено с заказчиком). Селекторы главной продублированы не
	 * зря: легаси красит .site-header на главной селектором
	 * .home.page:not(.page-template-template-homepage) (0,4,0) — без
	 * дублей текстура была бы только там, внутренние страницы оставались
	 * бы белыми. Максимальная специфичность дублей (0,4,0) связывает
	 * правило легаси, файл позже в каскаде — побеждает. Подложка #fff —
	 * как у легаси (там прозрачная над белым телом страницы); щель
	 * margin-bottom 2.2em из легаси не возвращаем.
	 */
	.site-header,
	.home.blog .site-header,
	.home.page:not(.page-template-template-homepage) .site-header,
	.home.post-type-archive-product .site-header,
	.no-wc-breadcrumb .site-header {
		padding: 0 !important;
		background: #fff url("/wp-content/images/bg-001.jpg");
		border-bottom: 0;
		margin-bottom: 0;
	}

	.site-header > .col-full {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto auto;
		grid-template-areas:
			"top    top    top  top"
			"logo   search soc  cart";
		align-items: center;
		column-gap: 18px;
	}

	/* Clearfix контейнера стал бы лишними ячейками сетки */
	.site-header > .col-full::before,
	.site-header > .col-full::after {
		display: none !important;
	}

	/* Легаси-флоаты правой колонки и лого (ширины в %, clear) — сброс */
	.site-header > .col-full > .secondary-navigation,
	.site-header > .col-full > .site-branding,
	.site-header > .col-full > .site-search,
	.site-header > .col-full > .site-set,
	.site-header > .col-full > .site-header-cart-wrap {
		float: none !important;
		width: auto !important;
		margin: 0 !important;
		clear: none !important;
	}

	/* ---------- Верхняя полоса с «Верхним меню» ---------- */
	.site-header .secondary-navigation,
	.storefront-secondary-navigation .site-header .secondary-navigation,
	.storefront-secondary-navigation.woocommerce-active .site-header .secondary-navigation {
		grid-area: top;
		background: var(--terem-strip);
		border-bottom: 0;                 /* легаси: 3px solid #9d9e9e */
		/* фон на всю ширину экрана, а не только контейнера */
		box-shadow: 0 0 0 100vmax var(--terem-strip);
		clip-path: inset(0 -100vmax);
	}

	/* (0,4,0): легаси красит этот ul в display:block — перебиваем его же приёмом.
	 * flex-wrap (1.4.16): с «Полезным» в меню полоса требует ~854px — на узких
	 * десктопах 768–853 без переноса телефон обрезался бы правым краем. */
	.woocommerce-active .site-header .secondary-navigation ul.menu {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		column-gap: 20px;
		row-gap: 0;
		width: 100%;
		margin: 0;
		padding: 0;
		text-align: left;
	}

	.secondary-navigation ul.menu > li {
		margin: 0 !important;
		border: 0 !important;             /* легаси: белые разделители пунктов */
	}

	.secondary-navigation ul.menu > li > a {
		display: block;
		padding: 0 !important;
		border: 0 !important;
		font-size: 12px;
		line-height: 34px;
		font-weight: 400;
		text-transform: none;
		color: var(--terem-muted) !important;  /* inline-стили SF4 красят ссылки белым */
		transition: color .15s ease;
	}

	.secondary-navigation ul.menu > li > a:hover,
	.secondary-navigation ul.menu > li.current-menu-item > a,
	.secondary-navigation ul.menu > li.menu-item-home.current-menu-item > a {
		color: var(--terem-red) !important;
	}

	/*
	 * Легаси-разделители между пунктами: у каждой ссылки ::before —
	 * 1px rgba(0,0,0,.05), position:absolute (storefront-2-custom.css).
	 * На серой полосе читаются как грязные серые «палки» — убираем.
	 */
	.secondary-navigation .menu > li > a::before {
		content: none;
	}

	/* Телефон справа (пункт меню с классом terem-phone) */
	.secondary-navigation ul.menu > li.terem-phone {
		margin-left: auto !important;
	}

	.secondary-navigation ul.menu > li.terem-phone > a {
		display: flex;
		align-items: center;
		gap: 6px;
		color: var(--terem-text) !important;
		font-weight: 600;
	}

	.secondary-navigation ul.menu > li.terem-phone > a::before {
		content: "";
		position: static;                 /* легаси: absolute — иконка наезжала на номер */
		display: block;
		width: 14px;
		height: 14px;
		background: var(--terem-red);
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M497.39 361.8l-112-48a24 24 0 0 0-28 6.9l-49.6 60.6A370.66 370.66 0 0 1 130.6 204.11l60.6-49.6a23.94 23.94 0 0 0 6.9-28l-48-112A24.16 24.16 0 0 0 122.6.61l-104 24A24 24 0 0 0 0 48c0 256.5 207.9 464 464 464a24 24 0 0 0 23.4-18.6l24-104a24.29 24.29 0 0 0-14.01-27.6z'/%3E%3C/svg%3E") center / contain no-repeat;
		        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M497.39 361.8l-112-48a24 24 0 0 0-28 6.9l-49.6 60.6A370.66 370.66 0 0 1 130.6 204.11l60.6-49.6a23.94 23.94 0 0 0 6.9-28l-48-112A24.16 24.16 0 0 0 122.6.61l-104 24A24 24 0 0 0 0 48c0 256.5 207.9 464 464 464a24 24 0 0 0 23.4-18.6l24-104a24.29 24.29 0 0 0-14.01-27.6z'/%3E%3C/svg%3E") center / contain no-repeat;
	}

	/* ---------- Логотип ---------- */
	.site-header .site-branding,
	.storefront-secondary-navigation .site-header .site-branding,
	.storefront-secondary-navigation.woocommerce-active .site-header .site-branding {
		grid-area: logo;
		padding: 12px 0;                  /* легаси (0,4,0): padding-top 10px */
	}

	.site-header .site-branding .site-title,
	.site-header .site-branding .site-title-logo {
		margin: 0;
		line-height: 1;
	}

	/* легаси: float:left, width:40%, padding 25px/30px, text-align:center */
	.site-header .site-branding .site-title-logo {
		float: none;
		width: auto;
		padding: 0;
		text-align: left;
	}

	.site-header .site-branding img.img-site-branding {
		display: block;
		height: 44px;
		width: auto;
		max-width: none;
		margin: 0;                        /* легаси: 0 0 10px 0 */
	}

	/* ---------- Поиск (Advanced Woo Search) ---------- */
	.site-header .site-search {
		grid-area: search;
		padding: 0;
	}

	.site-search .aws-container,
	.site-search .aws-search-form,
	.site-search .aws-wrapper {
		width: 100%;
		margin: 0;
	}

	/*
	 * Поиск Ozon-типа (1.2.0): прямоугольное поле + красная кнопка-лупа
	 * справа. Кнопки сабмита в разметке AWS нет (search-btn не выводится),
	 * роль кнопки играет label.aws-search-label — он связан с полем (for),
	 * клик по нему фокусит инпут; живой поиск у AWS и так AJAX, Enter
	 * работает. Лупа слева поля убрана — она теперь на кнопке.
	 */
	.site-search .aws-search-form {
		position: relative;
	}

	/*
	 * Плагин AWS прячет label экран-ридер-паттерном (.aws-container
	 * .aws-search-label {left:-10000px; width/height:1px; clip:rect(1px…)})
	 * и его CSS стоит в каскаде после нашего файла — поэтому здесь усиленный
	 * селектор (0,3,0) и !important на топовых свойствах паттерна.
	 */
	.site-search .aws-search-form .aws-search-label {
		position: absolute !important;
		left: auto !important;
		right: 0 !important;
		top: 0 !important;
		bottom: 0 !important;
		width: 56px !important;
		height: auto !important;
		margin: 0;
		background: var(--terem-red);
		border-radius: 0 10px 10px 0;
		cursor: pointer;
		overflow: hidden;
		clip: auto !important;
		clip-path: none !important;
		text-indent: -9999px;
		transition: background-color .15s ease;
	}

	.site-search .aws-search-form .aws-search-label::after {
		content: "";
		position: absolute;
		inset: 0;
		background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0'/%3E%3Cpath d='M21 21l-6 -6'/%3E%3C/svg%3E") center / 20px no-repeat;
	}

	.site-search .aws-search-form .aws-search-label:hover {
		background: var(--terem-red-dark, #c9272c);
	}

	.site-search .aws-search-field {
		width: 100%;
		padding: 0 70px 0 18px !important;
		border: 1px solid var(--terem-line) !important;
		border-radius: 10px 0 0 10px !important;   /* плагин ставит border-radius:0 !important — наш файл позже его стилей */
		background: #f6f6f6 !important;
		font-size: 14px;
		box-shadow: none !important;
		transition: border-color .15s ease, background-color .15s ease;
	}

	.site-search .aws-search-field:focus {
		border-color: var(--terem-red) !important;
		background-color: #fff !important;
		outline: 0;
	}

	.site-search .aws-search-field::placeholder {
		color: var(--terem-muted);
	}

	.site-search .aws-search-clear {
		right: 64px;                     /* не налегает на красную кнопку */
	}

	/* выпадающие результаты поиска поверх панели меню (там z-index 99999) */
	.aws-search-result {
		z-index: 100000 !important;
	}

	/* ---------- Соцсети MAX и VK ---------- */
	/* (0,3,0): легаси красит тот же блок в display:inline-block — иконки
	 * складывались в столбик. Пустой ::before легаси во flex стал бы
	 * лишним элементом с зазором — гасим. */
	.site-header .site-set,
	.woocommerce-active .site-header .site-set {
		grid-area: soc;
		display: flex;
		align-items: center;
		gap: 8px;
	}

	.site-header .site-set::before {
		content: none;
	}

	/* легаси: margin-left 6px — с gap промежуток раздваивался */
	.site-set a {
		display: block;
		margin-left: 0;
		line-height: 0;
		transition: transform .15s ease, opacity .15s ease;
	}

	.site-set a:hover {
		transform: translateY(-2px);
		opacity: .9;
	}

	.site-set img {
		width: 34px !important;
		height: 34px;
		border-radius: 9px;
		object-fit: cover;
	}

	/* ---------- Корзина ---------- */
	.site-header .site-header-cart-wrap {
		grid-area: cart;
		position: relative;
	}

	.site-header-cart {
		margin: 0 !important;
		padding: 0;
	}

	.site-header-cart > li:first-child {
		margin: 0;
	}

	/*
	 * Счётчик товаров тема выводит готовым текстом («0 товаров») — бейдж
	 * с числом из него CSS не сделать. Кнопка-пилюля: иконка слева, сумма
	 * жирным и «N товаров» серым во втором столбце.
	 */
	.site-header-cart a.cart-contents {
		display: grid;
		grid-template-columns: auto auto;
		grid-template-areas:
			"icon amount"
			"icon count";
		column-gap: 10px;
		align-items: center;
		padding: 6px 16px 6px 14px !important;
		border: 1px solid var(--terem-line);
		border-radius: 22px;
		background: #fff;
		color: var(--terem-text) !important;
		text-decoration: none;
		transition: border-color .15s ease;
	}

	.site-header-cart a.cart-contents:hover {
		border-color: var(--terem-red);
	}

	.site-header-cart a.cart-contents .woocommerce-Price-amount {
		grid-area: amount;
		margin: 0;                        /* легаси: margin-right 1.327em у .amount */
		font-size: 14px;
		font-weight: 600;
		line-height: 1.2;
		color: var(--terem-text);
	}

	.site-header-cart a.cart-contents .count {
		grid-area: count;
		margin: 0;
		font-size: 11px;
		font-weight: 400;
		line-height: 1.2;
		color: var(--terem-muted);
		opacity: 1;                       /* легаси: opacity .5 */
	}

	/* Иконка корзины вместо иконочного шрифта легаси (::after с FontAwesome) */
	.site-header-cart a.cart-contents::after {
		grid-area: icon;
		content: "" !important;
		position: static !important;
		float: none !important;
		width: 22px;
		height: 22px;
		margin: 0 !important;
		font-family: inherit !important;
		background: var(--terem-red);
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 19m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0'/%3E%3Cpath d='M17 19m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0'/%3E%3Cpath d='M17 17h-11v-14h-2'/%3E%3Cpath d='M6 5l14 1l-1 7h-13'/%3E%3C/svg%3E") center / contain no-repeat;
		        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 19m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0'/%3E%3Cpath d='M17 19m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0'/%3E%3Cpath d='M17 17h-11v-14h-2'/%3E%3Cpath d='M6 5l14 1l-1 7h-13'/%3E%3C/svg%3E") center / contain no-repeat;
	}

	/* Мини-корзина: раскрывается под кнопкой, у правого края, не уже 300px
	 * (легаси ширина 100% дала бы ширину пилюли ~150px) */
	.site-header-cart .widget_shopping_cart {
		min-width: 300px;
	}

	.site-header-cart:hover .widget_shopping_cart,
	.site-header-cart li:hover .widget_shopping_cart,
	.site-header-cart li:focus-within .widget_shopping_cart {
		right: 0 !important;
		left: auto !important;            /* легаси: left:0 у левого края пилюли */
	}

	/*
	 * Содержимое мини-корзины — белая карточка в стиле дропдаунов меню.
	 * Инлайн-CSS кастомайзера Storefront (наследие тёмной шапки) красит
	 * все ссылки дропдауна белым (#fff) на сером #dfdfdf — название товара
	 * нечитаемо; полоски суммы и кнопок — серые плашки #e4e4e4.
	 */
	.site-header-cart .widget_shopping_cart {
		background: #fff;
		border: 1px solid var(--terem-line);
		border-radius: 12px;
		box-shadow: 0 16px 40px rgba(0, 0, 0, .12);
	}

	/* Название товара: тёмное, при наведении — фирменный красный. */
	.site-header-cart .widget_shopping_cart .product_list_widget li a {
		color: var(--terem-text);
	}

	.site-header-cart .widget_shopping_cart .product_list_widget li a:hover {
		color: var(--terem-red);
	}

	/* Крестик удаления позиции. */
	.site-header-cart .widget_shopping_cart .product_list_widget li a.remove {
		color: var(--terem-red);
	}

	.site-header-cart .widget_shopping_cart .product_list_widget li .quantity {
		color: var(--terem-muted);
	}

	/* Полоски «Сумма: …» и кнопок — без серых плашек, с тонкой линией. */
	.site-header-cart .widget_shopping_cart p.total,
	.site-header-cart .widget_shopping_cart p.buttons {
		background: transparent;
	}

	.site-header-cart .widget_shopping_cart p.total {
		border-top: 1px solid var(--terem-line);
		border-bottom: 0;
		color: var(--terem-text);
	}

	/* ---------- Меню каталога: ниже и компактнее (поверх блока выше) ---------- */
	.storefront-primary-navigation {
		border-top: 1px solid var(--terem-line);
	}

	.storefront-primary-navigation .primary-navigation ul.menu > li > a {
		padding: 14px 12px;
		font-size: 13.5px;
	}

	/* красная линия под пунктом — на ширину нового паддинга */
	.storefront-primary-navigation .primary-navigation ul.menu > li > a::before {
		left: 12px;
		right: 12px;
	}
}

/*
 * Планшеты и узкие ноутбуки (768–1024px): прячем подпись «0 товаров»
 * и сжимаем промежутки. 16px у поля поиска — выше порога авто-зума iOS.
 */
@media (min-width: 768px) and (max-width: 1024px) {
	.site-header > .col-full {
		column-gap: 12px;
	}

	.site-header-cart a.cart-contents .count {
		display: none;
	}

	.site-search .aws-search-field {
		font-size: 16px;
	}

	/* тот же (0,4,0)-селектор, что в блоке выше, — иначе gap не перебить */
	.woocommerce-active .site-header .secondary-navigation ul.menu {
		gap: 14px;
	}
}

/*
 * =====================================================================
 * Блок покупки на карточке товара (terem-fixes 1.1.47):
 *  — количество и кнопка «В корзину» в один ряд, равной высоты;
 *  — ввод количества — аккуратная белая коробка с рамкой, число по
 *    центру, родные spinner'ы number-поля спрятаны;
 *  — кнопка — фирменный красный #ed3237, как на проде (легаси красит
 *    все кнопки в тёмный #43454b, а button{width:100%} уводит её
 *    на отдельную строку под полем).
 * Раскладку ряда включаем только там, где количество — прямой ребёнок
 * формы (простые товары) или блока кнопки вариации (вариативные):
 * у сгруппированных количество живёт внутри таблицы, flex сломал бы её.
 * =====================================================================
 */

/* ---- Поле количества: белая коробка с рамкой ---- */
.single-product div.product form.cart .quantity {
	display: inline-flex;
	align-items: stretch;
	background: #fff;
	border: 1px solid #d9d9d9;
	border-radius: 4px;
	overflow: hidden;
}

.single-product div.product form.cart .quantity:focus-within {
	border-color: var(--terem-red);
}

/* родные стрелочки number-поля мелкие и кривые — прячем */
.single-product div.product form.cart input.qty::-webkit-outer-spin-button,
.single-product div.product form.cart input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* легаси: input{width:100%; background:#f5f5f5} и .quantity .qty{width:4.23em}
 * 3.6em — с запасом под дробное количество м² («0.0763» у мелких форматов) */
.single-product div.product form.cart input.qty {
	width: 3.6em;
	height: 48px;
	padding: 0;
	border: 0;
	background: #fff;
	box-shadow: none;
	text-align: center;
	font-weight: 600;
	font-size: 16px;
	color: var(--terem-text);
	-moz-appearance: textfield;
	appearance: textfield;
}

.single-product div.product form.cart input.qty:focus {
	outline: none;
}

/* ---- Ряд: количество + кнопка ---- */
.single-product div.product form.cart:has(> .quantity),
.single-product div.product form.cart .woocommerce-variation-add-to-cart:has(> .quantity) {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 12px;
}

/* во flex-контейнере плавание игнорируется, но сбросим для порядка
 * (легаси: .quantity{float:left}, .button{float:right}) */
.single-product div.product form.cart:has(> .quantity) .quantity,
.single-product div.product form.cart:has(> .quantity) .single_add_to_cart_button,
.single-product div.product form.cart .woocommerce-variation-add-to-cart:has(> .quantity) .quantity,
.single-product div.product form.cart .woocommerce-variation-add-to-cart:has(> .quantity) .single_add_to_cart_button {
	float: none;
}

/* Легаси margin-right .quantity (14px) в flex-ряду лишний — зазор задаёт gap,
 * иначе до метки «м²» и кнопки 26px. */
.single-product div.product form.cart:has(> .quantity) .quantity,
.single-product div.product form.cart .woocommerce-variation-add-to-cart:has(> .quantity) .quantity {
	margin-right: 0;
}

/* Легаси-клирфикс формы (content:""; display:table; height:50px) во
 * flex-контейнере становится нулевым flex-элементом: распорка ::before
 * сдвигала весь ряд на gap (12px) вправо — инпут не по левому краю
 * H1/цены, ::after доблял пустые 12px после кнопки. */
.single-product div.product form.cart:has(> .quantity)::before,
.single-product div.product form.cart:has(> .quantity)::after,
.single-product div.product form.cart .woocommerce-variation-add-to-cart:has(> .quantity)::before,
.single-product div.product form.cart .woocommerce-variation-add-to-cart:has(> .quantity)::after {
	display: none;
}

/* ---- Кнопка «В корзину»: фирменный красный ----
 * Ширина ограничена (1.3.10, фидбек «почти 800px ради одного действия»):
 * 220–280px, воздух справа заполняет строка наличия (.terem-stock-note).
 * На телефоне (≤600px) кнопка добирает свободную ширину ряда. */
.single-product div.product form.cart .single_add_to_cart_button {
	flex: 0 0 auto;
	width: auto;                 /* легаси: button { width:100% } */
	min-width: 220px;
	max-width: 280px;
	min-height: 48px;
	padding: 0 28px;
	background-color: var(--terem-red);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	text-transform: none;
	text-shadow: none;
	box-shadow: none;
	border-radius: 4px;
	transition: background-color .15s ease;
	touch-action: manipulation;
}

.single-product div.product form.cart .single_add_to_cart_button:hover,
.single-product div.product form.cart .single_add_to_cart_button:focus {
	background-color: #d3232a;   /* фирменный, темнее на hover */
	color: #fff;
}

@media (max-width: 600px) {
	.single-product div.product form.cart .single_add_to_cart_button {
		flex: 1 1 auto;
		min-width: 0;
		max-width: none;
	}
}

/* ---- «В наличии» рядом с кнопкой (1.3.10) ----
 * Woo без управления запасами не печатает ничего (get_availability
 * отдаёт пусто для in-stock) — строчка своей разметкой
 * (terem_in_stock_note, woocommerce_after_add_to_cart_button). */
.single-product div.product form.cart .terem-stock-note {
	align-self: center;
	flex-shrink: 0;
	margin-left: 4px;
	font-size: 14px;
	color: var(--terem-muted);
	white-space: nowrap;
}

.single-product div.product form.cart .terem-stock-note::before {
	content: '';
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 7px;
	border-radius: 50%;
	background: #2f9e5f;
	vertical-align: 0;
}

/* ---- Единицы измерения и телефон-путь у блока покупки (1.4.0) ----
 * Аудит 2026-10-09: «1 308 ₽» без «/м²» (ключевая единица магазина),
 * количество «1.08» без подписи, телефон-путь в блоке покупки
 * отсутствовал. Разметка — terem_price_unit_html / terem_qty_unit_label /
 * terem_buy_phone_help + terem-product.js. */

/* Фон и рамка галереи: белоснежная плитка (Lava High Glossy и т.п.) на
 * белом фоне страницы читалась как «пустой белый квадрат» (аудит
 * 2026-10-09 — фото при этом загружено). Лёгкая подложка очерчивает
 * фото для любых светлых товаров. */
.single-product div.product .woocommerce-product-gallery {
	background: #fafafa;
	border: 1px solid var(--terem-line);
	border-radius: 4px;
}

/* Фото — во всю ширину контейнера галереи: атрибут width=416 (старая опция
 * магазина woocommerce_single_image_width) вместе с max-width:100% только
 * СЖИМАЕТ картинку, расти выше 416px она не может — на 480–767px (карточка
 * одной колонкой, контейнер до ~680px) справа от фото оставалась пустота.
 * Браузер по sizes-подсказке всё равно выбирает 600px-вариант (оригинал
 * 660px), так что заполнение контейнера без потери резкости. */
.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__image img {
	width: 100%;
	height: auto;
}

.single-product div.product .woocommerce-product-gallery > .woocommerce-product-gallery__trigger {
	border-radius: 0 0 0 4px;
}

.terem-price-unit {
	font-size: 0.72em;
	font-weight: 400;
	color: var(--terem-muted);
	white-space: nowrap;
}

.woocommerce-Price-amount + .terem-price-unit {
	margin-left: 3px;
}

/* «≈ 942 ₽/шт» — только основная цена карточки (в каталоге и sticky-баре
 * не выводится). Блочный спан внутри p.price — валидный HTML5. */
.single-product div.product p.price .terem-price-per,
.single-product div.product span.price .terem-price-per {
	display: block;
	margin-top: 3px;
	font-size: 14px;
	font-weight: 400;
	color: var(--terem-muted);
}

/* Подпись «м²» — СОСЕД блока .quantity, а не внутри него: хук
 * woocommerce_after_add_to_cart_quantity срабатывает СНАРУЖИ
 * woocommerce_quantity_input() (тот печатает свой div.quantity).
 * Селектор «.quantity .terem-qty-unit» потому никогда не матчился —
 * спан жил без стилей: растянутый на высоту ряда flex-элемент с
 * текстом у верхнего края («м² не по центру инпута»). */
.single-product div.product form.cart > .terem-qty-unit,
.single-product div.product form.cart .woocommerce-variation-add-to-cart > .terem-qty-unit {
	align-self: center;
	font-size: 14px;
	color: var(--terem-muted);
	white-space: nowrap;
}

/* На телефоне ряд покупки переносится: [поле + м²] / [кнопка] /
 * [В наличии]. Без этого «В наличии» влезало в первую строку и
 * перекрывало метку «м²» (QA 1.4.1, 375px). */
@media (max-width: 600px) {

	.single-product div.product form.cart > .terem-qty-unit,
	.single-product div.product form.cart .woocommerce-variation-add-to-cart > .terem-qty-unit {
		flex-shrink: 0;
	}

	.single-product div.product form.cart .terem-stock-note {
		flex-basis: 100%;
		order: 4;
		margin: 2px 0 0;
	}
}

.terem-qty-hint {
	margin: 6px 0 0;
	font-size: 14px;
	color: var(--terem-muted);
}

.terem-buy-help {
	margin: 10px 0 0;
	font-size: 14px;
	color: var(--terem-muted);
}

.terem-buy-help a {
	/* red-dark: 14px/600 — мелкий текст, #ed3237 даёт 3.76:1 < AA 4.5 */
	color: var(--terem-red-dark, #c9272c);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.terem-buy-help a:hover,
.terem-buy-help a:focus {
	text-decoration: underline;
}

/* Неразрывные куски текста: телефон в описании/подсказках не должен
 * резаться переносом посередине номера («…20-71-» / «62.») — весь номер
 * уезжает на следующую строку целиком. */
.terem-nowrap {
	white-space: nowrap;
}

/* H1 главной — компактный видимый (1.4.2): раньше заголовок прятался
 * легаси-механизмом dojo-hide-title (терем_hide_title_css теперь не
 * действует на главной). Скрывать нельзя: H1 несёт SEO-текст
 * «Терем — керамогранит…» (terem_front_h1), скрытый заголовок с ключами —
 * риск пессимизации. Кегль тихий, над hero-каруселью. */
.home .entry-title {
	font-size: 15px;
	font-weight: 400;
	letter-spacing: .02em;
	color: var(--terem-muted);
	margin: 18px 0 14px;
}

/* ---- Отступы мета-блока (артикул/категории) равномерные (1.3.10):
 * 14px над линией и 14px под ней — раньше сверху было ~11, снизу
 * ноль, интервал «гулял» относительно вкладок (1.617em). */
.single-product div.product div.product_meta {
	margin-top: 14px;
	padding-top: 14px;
	padding-bottom: 2px;
}

/*
 * =====================================================================
 * Футер (terem-fixes 1.1.50): переделан по макету редизайна, но в
 * светлой гамме сайта — тот же серый фон #f3f3f3, что и был.
 *  — верхняя строка повторяет шапку: логотип + «Сеть магазинов» слева,
 *    соцсети MAX/VK справа;
 *  — три колонки: «Каталог» (дубль основного меню), «Компания»,
 *    «Контакты» с однотипными линейными SVG-иконками фирменного красного;
 *  — нижняя серая полоса: сокращённая оферта мелким серым, копирайт справа;
 *  — счётчики LiveInternet/Метрика уведены за экран: статистика
 *    считается, видимой разметки нет.
 * Разметка — footer.php дочерней темы (storefront_footer не вызывается,
 * старые блоки и handheld-панель не выводятся). Виден и на мобильных:
 * колонки стакаются, легаси-блок wptouch удалён из functions.php и CSS.
 * =====================================================================
 */

/* Легаси-фон #f3f3f3 и 3px-полоса сверху сохраняются; гасим только
 * отрицательный отступ .site-livein и легаси-цвет текста. */
.site-footer.terem-footer {
	color: #5f6166;
	padding: 0;
}

.site-footer.terem-footer .site-livein {
	position: absolute;
	left: -9999px;
	top: 0;
	float: none;
	margin: 0;
}

/* ---------- Верхняя строка: бренд + соцсети ---------- */
.terem-footer-top {
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.terem-footer-top-in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-top: 26px;
	padding-bottom: 26px;
}

.terem-footer-brand {
	display: flex;
	align-items: center;
	gap: 18px;
	min-width: 0;
}

.terem-footer-logo {
	display: block;
	line-height: 0;
}

.terem-footer-logo img {
	display: block;
	width: auto;
	height: 40px;
}

/* Подпись опущена на 2px: flex центрирует её по коробке картинки точно,
 * но видимая масса лого сидит ниже центра коробки — верхняя грань ромба
 * белая и на сером фоне футера исчезает, а красные пиксели «ТЕРЕМ»
 * начинаются с 14-й строки из 74 (профиль logo-terem-big.png). Без
 * сдвига подпись кажется задранной (1.1.80). */
.terem-footer-sub {
	font-size: 16px;
	color: #6b6b6b;
	white-space: nowrap;
	position: relative;
	top: 2px;
}

.terem-footer-social {
	display: flex;
	align-items: center;
	gap: 12px;
}

.terem-footer-social a {
	line-height: 0;
	transition: opacity 0.15s ease;
}

.terem-footer-social a:hover,
.terem-footer-social a:focus {
	opacity: 0.85;
}

.terem-footer-social img {
	display: block;
	width: 36px;
	height: 36px;
}

/* ---------- Три колонки ссылок ---------- */
.terem-footer-cols {
	display: grid;
	grid-template-columns: 1fr 1fr 1.2fr;
	gap: 36px 48px;
	padding-top: 42px;
	padding-bottom: 46px;
}

/* «Контакты» — к правому краю контейнера: трек 1.2fr шире содержимого,
 * и справа от колонки оставалась пустота (1.1.80). Когда трек уже
 * контента (узкие десктопы), элемент заполняет его целиком и правило
 * ничего не меняет. Мобильная раскладка (одна колонка ≤767.98px)
 * остаётся на всю ширину — ветка только ≥768px. */
@media (min-width: 768px) {
	.terem-footer-contacts {
		justify-self: end;
	}
}

.terem-footer-heading {
	margin: 0 0 24px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #6b6b6b;
}

.terem-footer-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.terem-footer-menu li {
	margin: 0 0 15px;
}

.terem-footer-menu li:last-child {
	margin-bottom: 0;
}

.terem-footer-menu a {
	color: #1f1f1f;
	font-size: 15px;
	line-height: 1.5;
	text-decoration: none;
	transition: color 0.15s ease;
}

.terem-footer-menu a:hover,
.terem-footer-menu a:focus {
	color: var(--terem-red);
}

/* ---------- Колонка «Контакты»: строка = иконка + текст ---------- */
.terem-footer-contacts-list li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0 0 18px;
	color: #1f1f1f;
	font-size: 15px;
	line-height: 1.5;
}

.terem-footer-contacts-list li:last-child {
	margin-bottom: 0;
}

.terem-footer-ico {
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	color: var(--terem-red);
}

.terem-footer-ico svg {
	display: block;
	width: 100%;
	height: 100%;
}

.terem-footer-contacts-list a {
	color: #1f1f1f;
	text-decoration: none;
	transition: color 0.15s ease;
}

.terem-footer-contacts-list a:hover,
.terem-footer-contacts-list a:focus {
	color: var(--terem-red);
}

.terem-footer-note {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	color: #6b6b6b;
}

/* ---------- Нижняя серая полоса: оферта + копирайт ---------- */
.terem-footer-bottom {
	background-color: #ececec;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.terem-footer-bottom-in {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 40px;
	padding-top: 20px;
	padding-bottom: 22px;
}

/* #5f6166 на #ececec ≈ 5.4:1 — AA для мелкого текста */
.terem-footer-legal {
	margin: 0;
	max-width: 62em;
	font-size: 12.5px;
	line-height: 1.65;
	color: #5f6166;
}

.terem-footer-copy {
	margin: 0;
	font-size: 13px;
	color: #5f6166;
	white-space: nowrap;
}

/* ---------- Мобильный футер: колонки в столбик ---------- */
@media (max-width: 767.98px) {
	.terem-footer-top-in {
		padding-top: 18px;
		padding-bottom: 18px;
		gap: 12px;
	}

	.terem-footer-brand {
		gap: 8px;
	}

	/* Соцблок несжимаемый: иначе flex сжимает <a>, legacy
	 * img{max-width:100%} режет ширину значков при фикс. высоте —
	 * MAX/VK рисуются сплющенными ~25×32 вместо квадрата (1.1.71). */
	.terem-footer-social {
		flex-shrink: 0;
	}

	.terem-footer-logo img {
		height: 32px;
	}

	.terem-footer-sub {
		font-size: 14px;
	}

	/* На совсем узких экранах (<380px) подпись «Сеть магазинов» из строки
	 * бренда убирается: без неё «логотип + значки» помещаются без сжатия
	 * (1.1.72). */
	@media (max-width: 379.98px) {
		.terem-footer-sub {
			display: none;
		}
	}

	.terem-footer-social img {
		width: 32px;
		height: 32px;
	}

	.terem-footer-cols {
		grid-template-columns: 1fr;
		gap: 34px;
		padding-top: 30px;
		padding-bottom: 34px;
	}

	.terem-footer-heading {
		margin-bottom: 16px;
	}

	.terem-footer-menu li {
		margin-bottom: 12px;
	}

	.terem-footer-bottom-in {
		flex-direction: column;
		gap: 8px;
		padding-top: 16px;
		padding-bottom: 18px;
	}
}

/* Легаси-клирфикс (.col-full:after/before, content:"";display:table) внутри
 * грид-/флекс-обёрток футера становится лишним грид-итемом: из-за него
 * колонки съезжали на одну вправо. Гасим только внутри футера. */
.terem-footer-top-in::before,
.terem-footer-top-in::after,
.terem-footer-cols::before,
.terem-footer-cols::after,
.terem-footer-bottom-in::before,
.terem-footer-bottom-in::after {
	content: none;
}

/*
 * Новости и акции на главной (плагин page-list, [pagelist_ext]) — горизонтальная
 * раскладка карточек, как на проде. Прод держал её правкой css самого плагина
 * (width:337px + inline-block), при обновлении до 6.3 правка стёрлась и карточки
 * встали столбиком — восстановлено здесь, чтобы обновления плагина больше не
 * трогали раскладку. Ширина/отступы — из прод-правки плагина; заголовки
 * центруются обёрткой <center> в контенте главной.
 * Мобильная ветка (<768px) выше по файлу оставляет карточки во всю ширину.
 */
@media (min-width: 768px) {

	/*
	 * Живой остаток прод-правки плагина после слоя редизайн-плиток ниже
	 * по файлу (1.2.2 перебивает раскладку карточек: flex, паддинги,
	 * margin, шрифт заголовка, цвет ссылок): ширина прод-плитки,
	 * позиционирование, паддинг заголовка и зум превью.
	 */
	.page-list-ext .page-list-ext-item {
		width: 337px;
		height: 100%;
		position: relative;
	}

	.page-list-ext .page-list-ext-title {
		padding: 10px 10px 0;
	}

	.page-list-ext .page-list-ext-image img {
		transition: transform 1s ease-out;
	}

	.page-list-ext .page-list-ext-image:hover img {
		transform: scale(1.1);
	}
}

/*
 * Корзина: строка действий под таблицей (terem-fixes 1.1.54, отступ — 1.1.55).
 * Легаси тянул кнопку «Обновить корзину» на всю ширину таблицы
 * (storefront-2-custom.css: button {..., width:100%}), рисовал над ней
 * случайную тёмную полосу (SF: table.cart td.actions {border-top:1em solid})
 * и прижимал её вплотную к таблице (padding:0). Кнопка — компактная, справа,
 * с воздухом от таблицы; на мобильных (<768px, responsive-таблица) остаётся
 * во всю ширину — так удобнее пальцу.
 */
.woocommerce-cart table.cart td.actions {
	border-top: 1px solid rgba(0, 0, 0, 0.05);
	padding: 1.2em 0 0;
}

@media (min-width: 768px) {

	.woocommerce-cart table.cart td.actions button[name="update_cart"] {
		width: auto;
	}
}

/*
 * Цены в таблицах корзины/чекаута без переносов (terem-fixes 1.1.58):
 * «2 146 ₽» в узкой колонке «Цена» ломалось на «2 / 146 ₽» — пробел
 * тысячного разряда в цене становился точкой переноса.
 */
table.cart td.product-price,
table.cart td.product-subtotal,
.woocommerce-checkout-review-order-table td.product-total {
	white-space: nowrap;
}

/*
 * Поле «Количество» в корзине шире (terem-fixes 1.1.73): легаси зажимал его
 * ~3.6em (woocommerce-2-custom: width в базе, max-width на ≥768px) — для
 * 2–3-значных значений (в т.ч. м² вида «12.5») оставалось 1–2 видимых цифры.
 * 6em хватает с запасом; text-align и паддинги остаются легаси-центровкой.
 */
table.cart td.product-quantity .qty {
	width: 6em;
	max-width: none;
}

/*
 * Оформление заказа одной колонкой (terem-fixes 1.1.58): форма реквизитов,
 * под ней «Ваш заказ» (баннер акции в сайдбаре остаётся как был — 1.1.54).
 * Перебивка SF: .col2-set{float:left;width:52.94%} и
 * #order_review,#order_review_heading{float:right;width:41.18%}.
 * На мобильных (<768px) SF и так складывает в одну колонку.
 */
@media (min-width: 768px) {

	body.woocommerce-checkout .col2-set#customer_details {
		float: none;
		width: 100%;
		margin-right: 0;
	}

	body.woocommerce-checkout #order_review_heading,
	body.woocommerce-checkout #order_review {
		float: none;
		width: 100%;
		margin-right: 0;
		clear: both;
	}
}

/*
 * Чекаут: блок «Как проходит заказ» + тишина вокруг формы (terem-fixes 1.4.0).
 *
 * .terem-checkout-how — спокойная серая плашка над формой: секций
 * «Доставка/Оплата» на минимальном COD-чекауте нет, и без объяснения
 * покупатель не понимает, что будет после кнопки (аудит 2026-10-09:
 * «чекаут выглядит сломанным, а не простым»). Цвета — только тема
 * (hover/line), без красного и без steel-нотисов.
 *
 * .woocommerce-form-login-toggle («Уже покупали? Нажмите для входа»)
 * скрывается: ядро красит его steel-фоном (#607d8b,
 * woocommerce-2-custom.css:1622), на одностраничном чекауте из трёх полей
 * приглашение ко входу — шум; ссылка «Войти» живёт в шапке сайта.
 */
.woocommerce-checkout .woocommerce-form-login-toggle {
	display: none;
}

.terem-checkout-how {
	background: var(--terem-hover);
	border: 1px solid var(--terem-line);
	border-radius: 8px;
	padding: 16px 20px 14px;
	margin: 0 0 24px;
}

.terem-checkout-how__title {
	font-size: 15px;
	font-weight: 600;
	color: var(--terem-text);
	margin: 0 0 8px;
}

.terem-checkout-how__steps {
	margin: 0;
	padding-left: 20px;
	color: var(--terem-text);
	font-size: 14px;
	line-height: 1.5;
}

.terem-checkout-how__steps li {
	margin: 0 0 4px;
}

.terem-checkout-how__steps li:last-child {
	margin-bottom: 0;
}

/*
 * Sticky-полоса итога заказа (1.4.6): сумма и кнопка «Подтвердить заказ»
 * при одноколоночной раскладке — под сгибом (1440 и 375); полоса держит
 * «N товаров — M ₽ → Оформить», пока #place_order вне экрана (скрывает
 * IntersectionObserver, inline в functions.php). На ≤767.98px — НАД
 * таб-панелью (58px + safe-area). ГРАБЛЯ [hidden] (та же, что лайтбокс
 * 1.4.5): display:flex перебивает UA-правило — нужен явный [hidden].
 */
.terem-checkout-total {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 99980; /* таб-панель 99990 выше и ниже неё */
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 16px;
	padding-right: 9px;
	background: #fff;
	border-top: 1px solid var(--terem-line);
	box-shadow: 0 -4px 14px rgba(0, 0, 0, .07);
}

.terem-checkout-total[hidden] {
	display: none;
}

.terem-checkout-total__label {
	font-size: 13px;
	color: var(--terem-muted);
}

.terem-checkout-total__n {
	font-size: 14px;
	color: var(--terem-text);
}

.terem-checkout-total__sum {
	margin-left: auto;
	font-size: 16px;
	font-weight: 700;
	color: var(--terem-text);
	white-space: nowrap;
}

.terem-checkout-total__sum .woocommerce-Price-amount {
	white-space: nowrap;
}

.terem-checkout-total__go {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0 22px;
	background: var(--terem-red);
	border-radius: 4px;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
}

.terem-checkout-total__go:hover,
.terem-checkout-total__go:focus {
	background: #d3232a;
	color: #fff;
}

@media (max-width: 767.98px) {

	.terem-checkout-total {
		bottom: calc(58px + env(safe-area-inset-bottom));
		gap: 8px;
		padding: 8px 12px;
		padding-right: 8px;
	}

	.terem-checkout-total__label {
		display: none;
	}

	.terem-checkout-total__sum {
		font-size: 15px;
	}

	.terem-checkout-total__go {
		min-height: 40px;
		padding: 0 16px;
	}
}

/*
 * =====================================================================
 * Баннер «Акция» на главной (фон .first-page-ext) — terem-fixes 1.1.76.
 *
 * Баннер — правая часть фоновой картинки zatirka-v-podarok-gl.jpg
 * (левая половина холста спрятана под ревслайдером). Якорь фона по
 * умолчанию — левый край, поэтому на узких окнах фон срезался справа
 * (там, где рамка арта), а при максимальной ширине линии рамки
 * упирались в самый край колонки и исчезали при масштабировании.
 * Якорим фон к правому краю: рамка всегда с белым полем от границы
 * колонки, срез уходит влево — под ревслайдер.
 * =====================================================================
 */
.first-page-ext {
	background-position: right top;
}

/*
 * =====================================================================
 * Главная: хвост фоновой картинки акции на мобильном — terem-fixes 1.1.77.
 *
 * Продолжение 1.1.69/1.1.76. На ≤879.98px слайдер растянут на всю
 * ширину колонки и полностью накрывает фон .first-page-ext, но нижний
 * отступ слайдера (margin-bottom: 15px из фикса 1.1.69) лежит внутри
 * контейнера — в этой полосе фон не накрыт, и под баннером слайдера
 * виден низ картинки акции (узкая цветная полоска с линией рамки).
 * Сама акция на мобильном всё равно не видна (замыта слайдером) —
 * выключаем фон совсем. Инлайн-стиль в контенте страницы задаёт
 * background-image напрямую, поэтому перебиваем с !important.
 * =====================================================================
 */
@media (max-width: 879.98px) {
	.first-page-ext {
		background-image: none !important;
	}
}

/*
 * =====================================================================
 * Страница «Контакты» на мобильном — terem-fixes 1.1.77.
 *
 * Легаси-раскладка (storefront-2-custom.css): .kont-zagolovok-k1/k3 —
 * float: left по 25%, строка = логотип + «РЕЖИМ РАБОТЫ»/«ТЕЛЕФОН»/
 * «E-MAIL», ниже такими же колонками значения. На телефоне это
 * 4 колонки по ~82px: часы переносятся по слову, логотип магазина
 * сжат в квадрат, e-mail не помещается и наезжает на соседнюю
 * колонку. Фикс: ≤767.98px колонки стакаются в одну во всю ширину.
 *
 * Пустые распорки из &nbsp; (k1 без ссылок/картинок/переносов)
 * прячем через :has — на браузерах без :has селектор молча не
 * применится и останется просто пустая строка (безопасно).
 * =====================================================================
 */
@media (max-width: 767.98px) {
	.entry-content div.kont-zagolovok-k1,
	.entry-content div.kont-zagolovok-k2,
	.entry-content div.kont-zagolovok-k3 {
		float: none;
		width: auto;
	}
}

/*
 * =====================================================================
 * Кнопки в виджетах сайдбара — terem-fixes 1.1.78.
 *
 * Легаси storefront-2-custom.css красит .widget-area .widget a.button
 * белым (писалось под фиолетовые кнопки прода #96588a), а инлайн-CSS
 * кастомайзера на обновлённом стеке заливает их светло-серым #eeeeee —
 * в сайдбарном виджете корзины кнопка «Просмотр корзины» становится
 * белым по светло-серому, текст не читается. Возвращаем кнопкам тёмный
 * текст (как у «Просмотра» в мини-корзине шапки); красные checkout/alt
 * (белый текст) не трогаем — :not отсекает их и в каскаде, и по смыслу.
 * =====================================================================
 */
.widget-area .widget a.button:not(.checkout):not(.alt) {
	color: var(--terem-text);
}

/*
 * =====================================================================
 * Страница «Доставка и оплата» — terem-fixes 1.1.79.
 *
 * Контент страницы (слаг dostavka-i-oplata, создаётся
 * scripts/create-delivery-page.php) размечен обёрткой .terem-dlv:
 * карточки способов доставки, таблица сроков, список способов оплаты,
 * контактный блок. Легаси storefront-2-custom.css красит .entry-content
 * h2 в 1.218em и ссылкам списков задаёт font-weight 300 — перебиваем;
 * таблицы легаси не знает вовсе. Палитра — --terem-* из шапки файла,
 * иконки — подключённый темой Font Awesome 4.7. Сетка карточек
 * minmax(210px,1fr) сама складывается в 2/1 колонку на узких экранах —
 * отдельные брейкпоинты не нужны.
 * =====================================================================
 */
.terem-dlv {
	font-size: 15px;
}

.terem-dlv .terem-dlv-h2 {
	margin: 30px 0 4px;
	padding-left: 12px;
	border-left: 4px solid var(--terem-red);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--terem-text);
}

.terem-dlv .terem-dlv-h2:first-child {
	margin-top: 0;
}

.terem-dlv .terem-dlv-h3 {
	margin: 22px 0 10px;
	font-size: 18px;
	font-weight: 600;
	color: var(--terem-text);
}

/* Способы получения — карточки */
.terem-dlv-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 14px;
	margin: 4px 0 6px;
}

.terem-dlv-card {
	padding: 14px 16px 12px;
	border: 1px solid var(--terem-line);
	border-radius: 4px;
	background: #fff;
}

.terem-dlv .terem-dlv-card-head {
	margin: 0 0 8px;
	font-weight: 600;
	color: var(--terem-text);
}

.terem-dlv-card-head .fa {
	margin-right: 8px;
	color: var(--terem-red);
}

.terem-dlv-card p {
	margin: 0 0 8px;
	line-height: 1.55;
}

.terem-dlv-card p:last-child {
	margin-bottom: 0;
}

/* Сроки доставки */
.terem-dlv-table {
	width: 100%;
	margin: 4px 0 6px;
	border-collapse: collapse;
}

.terem-dlv-table th,
.terem-dlv-table td {
	padding: 9px 12px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--terem-line);
}

.terem-dlv-table thead th {
	border-bottom: 2px solid var(--terem-line);
	font-weight: 600;
	color: var(--terem-text);
	background: #fafafa;
}

.terem-dlv-table td:first-child {
	width: 40%;
	font-weight: 600;
	color: var(--terem-text);
}

.terem-dlv-table td {
	line-height: 1.5;
}

/* Примечание о подъёме/разгрузке */
.terem-dlv-note {
	display: flex;
	align-items: flex-start;
	margin: 16px 0;
	padding: 12px 16px;
	border: 1px solid var(--terem-line);
	border-left: 4px solid var(--terem-red);
	border-radius: 4px;
	background: #fafafa;
}

.terem-dlv-note .fa {
	margin: 3px 10px 0 0;
	color: var(--terem-red);
}

.terem-dlv-note p {
	margin: 0;
	line-height: 1.55;
}

/* Оплата */
.terem-dlv-pay {
	list-style: none;
	margin: 12px 0;
	padding: 0;
}

.terem-dlv-pay li {
	position: relative;
	margin: 0;
	padding: 10px 0 10px 32px;
	border-bottom: 1px solid var(--terem-line);
	line-height: 1.55;
}

.terem-dlv-pay li:last-child {
	border-bottom: 0;
}

.terem-dlv-pay .fa {
	position: absolute;
	left: 4px;
	top: 13px;
	color: var(--terem-red);
}

.terem-dlv-pay b {
	font-weight: 600;
	color: var(--terem-text);
}

/* легаси .entry-content ul a — font-weight 300 */
.terem-dlv-pay a,
.terem-dlv-note a,
.terem-dlv-card a {
	font-weight: 400;
}

/* Контакты для вопросов */
.terem-dlv-contacts {
	margin: 30px 0 6px;
	padding: 16px 18px;
	border: 1px solid var(--terem-line);
	border-left: 4px solid var(--terem-red);
	border-radius: 4px;
	background: #fafafa;
}

.terem-dlv-contacts-title {
	margin-bottom: 8px;
	font-weight: 600;
	color: var(--terem-text);
}

.terem-dlv .terem-dlv-phone {
	display: inline-block;
	margin: 2px 22px 2px 0;
	font-size: 20px;
	font-weight: 700;
	color: var(--terem-text);
	text-decoration: none;
	white-space: nowrap;
}

.terem-dlv-phone .fa {
	margin-right: 8px;
	color: var(--terem-red);
	font-size: 17px;
}

.terem-dlv .terem-dlv-phone:hover {
	color: var(--terem-red);
	text-decoration: none;
}

@media (max-width: 767.98px) {
	.terem-dlv .terem-dlv-h2 {
		font-size: 21px;
	}

	.terem-dlv .terem-dlv-phone {
		display: block;
		margin: 6px 0;
	}
}

/* =====================================================================
 * Страница «Заказ получен»: блок «что дальше» (1.1.81)
 * Выводит terem_thankyou_next_steps (functions.php) между сводкой
 * заказа и таблицей товаров. Карточка в тон блока контактов страницы
 * «Доставка и оплата»: белая, красный левый акцент.
 * =====================================================================
 */
.woocommerce-order .terem-thankyou-next {
	margin: 30px 0 34px;
	padding: 18px 22px;
	background: #fff;
	border: 1px solid var(--terem-line);
	border-left: 4px solid var(--terem-red);
	border-radius: 4px;
}

.terem-thankyou-next p {
	margin: 0 0 10px;
	color: var(--terem-text);
	line-height: 1.6;
}

.terem-thankyou-next p:last-child {
	margin-bottom: 0;
}

@media (max-width: 767.98px) {
	.woocommerce-order .terem-thankyou-next {
		margin: 22px 0 26px;
		padding: 14px 16px;
	}
}

/* =====================================================================
 * Калькулятор плитки (1.1.82; ровесник строки полей — 1.1.83: подпись цены
 * укорочена до однострочной — двухстрочная просаживала поле ниже соседнего
 * в паре «шов/цена»; пресеты 10/15% — равная ширина через flex:1).
 *
 * Страница /kalkulyator/ (контент — scripts/create-calculator-page.php),
 * логика — assets/js/terem-tile-calc.js (условное подключение в
 * functions.php). Разметка: .terem-calc > .terem-calc-grid > форма
 * + карточка результата; до старта JS переключатель панелей пола/стен
 * управляется атрибутом data-mode (в разметке = floor). Поля текстовые
 * с inputmode=decimal (type=number конфликтует с запятой); шрифт полей
 * 16px — iOS не автозумит; тач-цели 44px. Пресеты и CTA — единственные
 * кнопки на странице: у легаси button{width:100%} — перебито width:auto.
 * =====================================================================
 */
.terem-calc {
	font-size: 15px;
}

.terem-calc-intro {
	margin: 0 0 18px;
	max-width: 720px;
	line-height: 1.55;
	color: var(--terem-text);
}

.terem-calc-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	align-items: start;
}

/* ---------- Форма ---------- */
.terem-calc-form {
	padding: 18px 16px 16px;
	background: #fff;
	border: 1px solid var(--terem-line);
	border-radius: 4px;
}

.terem-calc-h3 {
	margin: 20px 0 10px;
	font-size: 16px;
	font-weight: 600;
	color: var(--terem-text);
}

.terem-calc-form .terem-calc-h3:first-child {
	margin-top: 0;
}

/* Сегмент «Пол / Стены»: radio визуально скрыт, фокус — на пилюле */
.terem-calc-mode {
	display: flex;
	gap: 4px;
	margin-bottom: 14px;
	padding: 3px;
	background: var(--terem-hover);
	border-radius: 4px;
}

.terem-calc-mode-opt {
	flex: 1;
}

/* Радио визуально скрыт (фокус — на пилюле span): без явных 1×1 легаси-
   стили input растягивают его на 305px и на 320px появляется гор. скролл */
.terem-calc-mode-opt input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.terem-calc-mode-opt span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	border-radius: 3px;
	font-weight: 600;
	color: var(--terem-muted);
	cursor: pointer;
}

.terem-calc-mode-opt input:checked + span {
	background: #fff;
	color: var(--terem-red);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.terem-calc-mode-opt input:focus-visible + span {
	outline: 2px solid var(--terem-red);
	outline-offset: 1px;
}

/* Панели пола/стен — видимая выбирается атрибутом data-mode на корне */
.terem-calc[data-mode="walls"] .terem-calc-panel-floor,
.terem-calc:not([data-mode="walls"]) .terem-calc-panel-walls {
	display: none;
}

/* Проёмы — поле режима стен (1.3.12, фидбек: в калькуляторе пола лишнее):
 * в режиме пола строка скрыта, JS (terem-tile-calc.js) значение не читает. */
.terem-calc:not([data-mode="walls"]) .terem-calc-openings {
	display: none;
}

.terem-calc-panel {
	margin-bottom: 12px;
}

.terem-calc-fields2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.terem-calc-field {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin-bottom: 12px;
	font-size: 13px;
	color: var(--terem-muted);
}

.terem-calc-fields2 .terem-calc-field {
	margin-bottom: 0;
}

.terem-calc-label {
	line-height: 1.3;
}

.terem-calc-field input,
.terem-calc-reserve input {
	width: 100%;
	box-sizing: border-box;
	height: 44px;
	padding: 0 12px;
	font: inherit;
	font-size: 16px;
	font-family: inherit;
	color: var(--terem-text);
	background: #fff;
	border: 1px solid var(--terem-line);
	border-radius: 4px;
}

.terem-calc-field input:focus,
.terem-calc-reserve input:focus {
	border-color: var(--terem-red);
	outline: none;
	box-shadow: 0 0 0 1px var(--terem-red);
}

.terem-calc-field input::placeholder {
	color: #b5b5b5;
}

/* Стены: подпись + два поля в ряд. Подпись — span (wpautop оборачивает
   label в <p>, если перед ним в строке есть закрывающийся блочный тег),
   поэтому display:block здесь, а не в разметке. */
.terem-calc-wall {
	display: grid;
	grid-template-columns: auto 1fr 1fr;
	gap: 10px;
	align-items: end;
	margin-bottom: 10px;
}

.terem-calc-wall:last-child {
	margin-bottom: 0;
}

.terem-calc-wall-n {
	display: block;
	padding-bottom: 14px;
	font-size: 13px;
	color: var(--terem-muted);
	white-space: nowrap;
}

.terem-calc-wall .terem-calc-field {
	margin-bottom: 0;
}

@media (max-width: 399.98px) {
	.terem-calc-wall {
		grid-template-columns: 1fr 1fr;
	}

	.terem-calc-wall-n {
		grid-column: 1 / -1;
		padding-bottom: 0;
	}
}

/* Поверхности пола (1.4.30, «пол в нескольких комнатах»): те же строки,
   что у стен, плюс итог «= N м²» и крестик удаления. Строки клонирует
   initFloorRows (terem-tile-calc.js 1.1.0), максимум 6; разметка и
   хелпер общие с модалкой на карточке. */
.terem-calc-floor-row {
	display: grid;
	/* Итог «= N м²» — фиксированная колонка (не max-content): текст итога
	   не должен сжимать поля заполненной строки относительно пустых
	   (выравнивание «столбиком» при нескольких поверхностях). */
	grid-template-columns: auto 1fr 1fr 84px auto;
	gap: 10px;
	align-items: end;
	margin-bottom: 10px;
}

.terem-calc-floor-row .terem-calc-field {
	margin-bottom: 0;
}

.terem-calc-floor-m2 {
	padding-bottom: 14px;
	font-size: 13px;
	color: var(--terem-muted);
	white-space: nowrap;
}

.terem-calc-floor-actions {
	margin-top: 2px;
}

/* Крестик и «Добавить поверхность» — общие для страницы и модалки.
   Грабли легаси: button{width:100%} на все кнопки и инлайн-hover
   кастомайзера SF (посветление до #d5d5d5) — ширина и фон заданы явно. */
.terem-floor-del {
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
	color: #b5b5b5;
	font-size: 22px;
	font-weight: 400;
	line-height: 1;
	cursor: pointer;
	transition: color .15s ease;
}

.terem-floor-del:hover,
.terem-floor-del:focus {
	color: var(--terem-red);
	background: none;
	outline: none;
	box-shadow: none;
}

.terem-floor-del[hidden] {
	display: none;
}

.terem-floor-add {
	width: auto;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
	color: var(--terem-red);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-transform: none;
	text-shadow: none;
	cursor: pointer;
	transition: opacity .15s ease;
}

.terem-floor-add:hover,
.terem-floor-add:focus {
	opacity: .75;
	color: var(--terem-red);
	background: none;
	text-decoration: none;
	outline: none;
	box-shadow: none;
}

.terem-floor-add[hidden] {
	display: none;
}

@media (max-width: 479.98px) {
	.terem-calc-floor-row {
		grid-template-columns: 1fr 1fr;
	}

	.terem-calc-floor-row .terem-floor-n {
		grid-column: 1 / -1;
		padding-bottom: 0;
	}

	.terem-calc-floor-m2 {
		grid-column: 1;
		align-self: center;
		padding-bottom: 0;
	}

	.terem-calc-floor-row .terem-floor-del {
		grid-column: 2;
		justify-self: end;
	}
}

/* Запас: поле + пресеты 10/15 в один ряд */
.terem-calc-reserve {
	display: flex;
	gap: 8px;
}

.terem-calc-reserve input {
	flex: 1;
	min-width: 0;
}

.terem-calc-presets {
	display: flex;
	gap: 6px;
}

.terem-calc-preset {
	flex: 1;
	width: auto;
	min-width: 52px;
	height: 44px;
	padding: 0 12px;
	font: inherit;
	font-size: 14px;
	color: var(--terem-muted);
	background: #fff;
	border: 1px solid var(--terem-line);
	border-radius: 4px;
	cursor: pointer;
}

.terem-calc-preset.is-active {
	border-color: var(--terem-red);
	color: var(--terem-red);
	font-weight: 600;
}

.terem-calc-hint {
	font-size: 12px;
	color: var(--terem-muted);
}

/* ---------- Результат ---------- */
.terem-calc-card {
	padding: 16px;
	background: #fff;
	border: 1px solid var(--terem-line);
	border-radius: 4px;
}

.terem-calc-msg {
	margin: 6px 0 10px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--terem-muted);
}

.terem-calc-warn {
	margin: 0 0 12px;
	padding: 8px 10px;
	border-left: 3px solid var(--terem-red);
	background: #fdf2f2;
	border-radius: 0 4px 4px 0;
	font-size: 13px;
	line-height: 1.45;
	color: var(--terem-text);
}

.terem-calc-hero {
	display: flex;
	align-items: baseline;
	gap: 7px;
}

.terem-calc-hero-n {
	font-size: 34px;
	font-weight: 700;
	line-height: 1;
	color: var(--terem-red);
	overflow-wrap: anywhere;
}

.terem-calc-hero-u {
	font-size: 15px;
	font-weight: 600;
	color: var(--terem-text);
}

.terem-calc-hero-sub {
	margin: 6px 0 12px;
	color: var(--terem-text);
}

.terem-calc-rows {
	margin: 0 0 10px;
	border-top: 1px solid var(--terem-line);
}

.terem-calc-rrow {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px solid var(--terem-line);
	font-size: 14px;
}

.terem-calc-rrow dt {
	color: var(--terem-muted);
}

.terem-calc-rrow dd {
	margin: 0;
	font-weight: 600;
	text-align: right;
	color: var(--terem-text);
	overflow-wrap: anywhere;
}

.terem-calc-muted {
	color: var(--terem-muted);
	font-weight: 400;
}

.terem-calc-note {
	margin: 0 0 12px;
	font-size: 12px;
	line-height: 1.5;
	color: var(--terem-muted);
}

.terem-calc-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 0 14px;
	background: var(--terem-red);
	border-radius: 4px;
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	text-align: center;
}

.terem-calc-cta:hover,
.terem-calc-cta:focus {
	background: #d92c31;
	color: #fff;
}

/* Пара действий результата (1.4.0): «Подобрать плитку» + «Позвонить» —
 * телефон-путь рядом с расчётом (аудит 2026-10-09: у калькулятора не было
 * выхода на живого человека, если расчёт вызывает вопросы). Ghost-кнопка
 * вторична: белый фон, красная рамка. */
.terem-calc-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.terem-calc-actions .terem-calc-cta {
	flex: 1 1 200px;
}

.terem-calc-cta--ghost {
	background: #fff;
	border: 1px solid var(--terem-red);
	color: var(--terem-red);
}

.terem-calc-cta--ghost:hover,
.terem-calc-cta--ghost:focus {
	background: #fdf2f2;
	color: var(--terem-red);
}

.terem-calc-noscript {
	margin: 12px 0;
	padding: 10px 14px;
	background: #fdf2f2;
	border-left: 3px solid var(--terem-red);
	border-radius: 0 4px 4px 0;
	color: var(--terem-text);
}

/* Никаких скрытых легаси-display: строки результата выключаем hidden */
.terem-calc [hidden] {
	display: none !important;
}

/* ---------- SEO-блок «Как считаем» ---------- */
.terem-calc .terem-calc-h2 {
	margin: 30px 0 4px;
	padding-left: 12px;
	border-left: 4px solid var(--terem-red);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--terem-text);
}

.terem-calc-howto {
	max-width: 720px;
	line-height: 1.6;
	color: var(--terem-text);
}

.terem-calc-howto h3 {
	margin: 20px 0 6px;
	font-size: 17px;
	font-weight: 600;
	color: var(--terem-text);
}

.terem-calc-howto p,
.terem-calc-howto li {
	line-height: 1.6;
}

@media (min-width: 768px) {
	.terem-calc-grid {
		grid-template-columns: minmax(0, 1fr) 320px;
		gap: 28px;
	}

	.terem-calc-form {
		padding: 22px 20px 18px;
	}

	/* Карточка результата ездит за формой, не наезжая на фиксированную шапку */
	.terem-calc-card {
		position: sticky;
		top: 90px;
	}
}

/* -------------------------------------------------------------------------
 * 1.1.84 Lighthouse 2026-10-07
 * ---------------------------------------------------------------------- */

/* [video] нативный плеер вместо mediaelement: атрибутные размеры 980×551
 * на мобильном сжимаются по ширине контейнера. */
.terem-video {
	max-width: 100%;
	height: auto;
}

/* Ванильный лайтбокс (замена easy-fancybox). z-index 99999 — над мобильным
 * таб-баром (99990): при равном z-index панель, будучи позже в DOM, рисовалась
 * поверх оверлея, и счётчик/подпись низа ложились на её кнопки (1.4.41). */
.terem-lightbox {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(0, 0, 0, 0.88);
	cursor: zoom-out;
}
/* display:flex выше перебивает UA-правило [hidden]{display:none}: без этого
 * «закрытый» лайтбокс остаётся висеть тёмным экраном с крестиком (1.4.5). */
.terem-lightbox[hidden] {
	display: none;
}
.terem-lightbox img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.6);
}
.terem-lightbox__close {
	position: absolute;
	top: 10px;
	right: 14px;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #fff;
	font-size: 34px;
	line-height: 44px;
	cursor: pointer;
}
/* Галерейные стрелки (1.4.41): сквозь легаси button{width:100%} — ширина/фон
 * заданы явно, как у крестика. display у кнопки не задаём, чтобы работало
 * скрытие атрибутом hidden (грабля 1.4.5); исключением — явный [hidden]. */
.terem-lightbox__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 52px;
	height: 52px;
	padding: 0;
	border: 0;
	background: transparent;
	color: rgba(255, 255, 255, 0.65);
	font-size: 52px;
	line-height: 52px;
	cursor: pointer;
	user-select: none;
	transition: color 0.15s;
}
.terem-lightbox__nav:hover,
.terem-lightbox__nav:focus-visible {
	color: #fff;
}
/* Инлайн-CSS кастомайзера SF красит ЛЮБУЮ кнопку в hover/focus/active в серый
 * #d5d5d5 (button:hover — (0,1,1), пробивает наш прозрачный фон (0,1,0)): за
 * стрелкой/крестиком проступал серый квадрат, после клика оставался (focus)
 * — фидбек «при наведении на стрелку неровно отображается обводка/фон».
 * Гасим фон во всех состояниях — (0,2,0) выше (0,1,1); та же грабля, что у
 * стрелок слайдера и кнопок сайдбара фильтров. Ринг :focus-visible с клавиатуры
 * не тронут (правим только background). */
.terem-lightbox__nav:hover,
.terem-lightbox__nav:focus,
.terem-lightbox__nav:active,
.terem-lightbox__close:hover,
.terem-lightbox__close:focus,
.terem-lightbox__close:active {
	background: transparent;
}
.terem-lightbox__nav[hidden] {
	display: none;
}
.terem-lightbox__nav--prev {
	left: 6px;
}
.terem-lightbox__nav--next {
	right: 6px;
}
.terem-lightbox__counter {
	position: absolute;
	right: 16px;
	bottom: 16px;
	color: rgba(255, 255, 255, 0.75);
	font-size: 13px;
	line-height: 1;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
	pointer-events: none;
	user-select: none;
}
/* Подпись из title/alt: центр низа, поля 60px не дают лечь на стрелки
 * и счётчик по углам. */
.terem-lightbox__caption {
	position: absolute;
	left: 60px;
	right: 60px;
	bottom: 14px;
	color: #fff;
	font-size: 15px;
	line-height: 1.4;
	text-align: center;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
	pointer-events: none;
}

/* ─ Карусель .terem-slider (1.2.6, редизайн) — горизонтальная, scroll-snap.
 * Слайды лежат в нативном scroll-контейнере .terem-slider__frames: свайп
 * на телефоне — браузерный скролл (прежний preventDefault на touchstart
 * отменял клик по ссылке слайда). Сколько баннеров видно сразу —
 * --terem-per-view (2 только на главной ≥1024px, 1 обычно). Пропорцию
 * --terem-slide-ar ставит JS по первой картинке (фолбэк 794/400 держит
 * высоту до загрузки), кропа текста больше нет. */
.terem-slider {
	--terem-per-view: 1;
	--terem-slide-gap: 20px;
	position: relative;
}
.terem-slider__viewport {
	position: relative; /* стрелки центрируются по треку, не по корню с точками */
}
.terem-slider__frames {
	display: flex;
	align-items: flex-start; /* stretch обнулял бы aspect-ratio слайдов */
	gap: var(--terem-slide-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
	margin: 0;
}
.terem-slider__frames::-webkit-scrollbar {
	display: none;
}
.terem-slider__slide {
	position: relative;
	flex: 0 0 calc((100% - (var(--terem-per-view) - 1) * var(--terem-slide-gap)) / var(--terem-per-view));
	scroll-snap-align: start;
	scroll-snap-stop: always; /* флинг не пролетает мимо баннеров */
	aspect-ratio: var(--terem-slide-ar, 794 / 400);
	border-radius: var(--terem-radius, 10px);
	overflow: hidden;
	background: #ececec;
}
.terem-slider__slide a {
	display: block;
	height: 100%;
}
.terem-slider__slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Точки — ПОД слайдером (висели поверх баннера сверху): активная вытянута
 * и красная. Кнопка-плитка 24×24 — тач-таргет (Lighthouse target-size),
 * рисует пилюлю ::after. */
.terem-slider__bullets {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin: 14px 0 0;
	padding: 0;
	border: 0;
}
.terem-slider__dot {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	border-radius: 12px;
	background: transparent;
	cursor: pointer;
}
.terem-slider__dot::after {
	content: "";
	/* Storefront глушит button::after display-ом по всему сайту (style.css
	 * 4.6.2: button::after,input::after {display:none}) — точки были
	 * невидимы. Специфичность класса выше, но display надо задать явно. */
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 99px;
	background: #c3c3c7;
	transition: width 0.25s ease, background-color 0.25s ease;
}
.terem-slider__dot.is-active::after {
	width: 28px;
	background: var(--terem-red, #ed3237);
}
/* Лишние точки (позиций прокрутки меньше, чем слайдов) прячет JS —
 * display:none, чтобы оставшиеся пересобрались по центру. */
.terem-slider__dot.is-hidden {
	display: none;
}

/* Стрелки — маленькие белые кружки на краях баннера, краснеют на ховере.
 * Специфичность 0,3,0 (класс + класс + :hover) перекрывает инлайн-правило
 * кастомайзера button:hover → серый #d5d5d5 (0,2,1, грабля 1.1.88). */
.terem-slider .terem-slider__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: var(--terem-ink, #1f1f1f);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.terem-slider .terem-slider__arrow:hover,
.terem-slider .terem-slider__arrow:focus-visible,
.terem-slider .terem-slider__arrow:active {
	background: var(--terem-red, #ed3237);
	color: #fff;
}
.terem-slider .terem-slider__arrow.is-hidden {
	visibility: hidden;
	pointer-events: none;
}
.terem-slider .terem-slider__arrow svg {
	display: block;
}
.terem-slider .terem-slider__arrow--prev {
	left: 12px;
}
.terem-slider .terem-slider__arrow--next {
	right: 12px;
}

/* Планшет: один баннер, следующий слегка выглядывает справа. */
@media (min-width: 768px) and (max-width: 1023.98px) {
	.first-page-ext .terem-slider__slide {
		flex-basis: calc(100% - 72px);
	}
}
/* Телефон: стрелок нет — листается свайпом, зазор уже. */
@media (max-width: 767.98px) {
	.terem-slider {
		--terem-slide-gap: 12px;
	}
	.terem-slider .terem-slider__arrow {
		display: none;
	}
}

/* =========================================================================
 * 1.2.0 — РЕДИЗАЙН: широкая сетка 1440px (ветка redesign/wide-1440)
 *
 * Контейнер был зажат легаси .col-full {max-width:67.141em} (~1010px,
 * storefront-2-custom.css) — на широкоформатных мониторах сайт выглядел
 * узкой колонкой. Новая ширина 1440px по центру (у Ozon ~1600px), паддинги
 * сохранены. Правила ниже перекрывают легаси-пропорции: terem-fixes грузится
 * в каскаде последним, равная специфичность решает порядком файлов.
 * ======================================================================= */

/* --- Контейнер ---------------------------------------------------------- */

@media (min-width: 768px) {
	.col-full {
		max-width: 1440px;
		margin-left: auto;
		margin-right: auto;
		padding-left: 2.617924em;
		padding-right: 2.617924em;
		box-sizing: border-box;
	}
}

/* Мобильный контейнер: легаси держит поля 1.41575em (~23px) до 568px и
 * 2.617924em (~42px) до 768px — на телефоне каталог выглядел зажатым
 * (фото карточки 136px из 375). 12px на сторону на всех страницах:
 * шапка, контент и подвал держат один левый край. Равная специфичность
 * с легаси-ветками (0,1,0), terem-fixes грузится последним. */
@media (max-width: 767.98px) {
	.col-full {
		margin-left: 12px;
		margin-right: 12px;
	}
}

/* --- Каталог: раскладка «фильтры слева + товары» ------------------------
 * На архивах товаров правая колонка снята с вывода (functions.php —
 * terem_shop_no_right_sidebar), фильтровая widget-area-2 и контент
 * переводятся с легаси-флоатов (16.4% + 59.5%) на грид с фикс-колонкой.
 * Прицел body.woocommerce.archive не задевает корзину/чекаут/карточку
 * товара: там правая колонка работает как раньше.
 * Крошки (nav.woocommerce-breadcrumb на storefront_content_top) — первый
 * ребёнок .col-full, растягиваем на всю ширину грида.
 * ------------------------------------------------------------------------ */
@media (min-width: 768px) {
	/* Прицел строго .site-content > .col-full: col-full есть ещё в шапке,
	 * панели меню и футере — грид (0,3,0) перебивал бы шапочный грид
	 * 1.1.43 (.site-header > .col-full, 0,2,0) и ломал раскладку шапки
	 * на архивных страницах («меню не такое, как на главной»). */
	body.woocommerce.archive .site-content > .col-full {
		display: grid;
		grid-template-columns: 280px minmax(0, 1fr);
		column-gap: 40px;
	}

	body.woocommerce.archive .site-content > .col-full > .woocommerce-breadcrumb {
		grid-column: 1 / -1;
		/* Легаси растягивало крошки на всё окно трюком margin/padding
		 * ±99em (woocommerce-2-custom) — в гриде это переполняет страницу
		 * вправо. Текст и так стоит от края контейнера. */
		margin-left: 0;
		margin-right: 0;
		padding-left: 0;
		padding-right: 0;
	}

	/* Пустая обёртка <div class="woocommerce"> (плагинная, встречается на
	 * архивах) — иначе занимает первую grid-ячейку и сдвигает фильтры с
	 * контентом на чужие строки. */
	body.woocommerce.archive .site-content > .col-full > div.woocommerce:empty {
		display: none;
	}

	/* <noscript> с фолбэк-стилем мобильных фильтров — прямой ребёнок грида:
	 * без JS Chrome рисует его обычным блоком (0×0 он только с JS), блок
	 * занимает первую ячейку и увозит #secondary/#primary на чужие строки
	 * (замер no-JS 2026-10-14). Сам <style> внутри работает и с display:none
	 * у родителя — фолбэк не отключается. */
	body.woocommerce.archive .site-content > .col-full > noscript {
		display: none;
	}

	body.woocommerce.archive #secondary.widget-area-2 {
		width: auto;
		float: none;
		margin: 0;
		border: 0;
		padding: 0;
	}

	body.woocommerce.archive #primary.content-area-2 {
		width: auto;
		float: none;
		margin: 0;
	}
}

/* --- Слайдер акций над каталогом (1.4.80, inc/promos.php) -----------------
 * Тонкая полоса-карусель над хлебными крошками (storefront_content_top:8,
 * крошки на :10) на /shop/ и в категориях — референс мосплитка. Заменяет
 * розовые зоны 1.4.x: карточку «Акция» у баннера категории и полосу после
 * сетки. Слайды — баннеры ~12:1 (2880×240), пропорцию JS берёт из первой
 * картинки (инлайн --terem-slide-ar).
 * ------------------------------------------------------------------------ */
.terem-cat-promo-slider {
	/* Фолбэк пропорции до замера: реальную ставит PHP инлайном на обёртке
	 * (terem_catalog_promo_slider), JS — на .terem-slider. Без этого слайды
	 * жили на движковом фолбэке 794/400 — при загрузке полоса вспыхивала
	 * баннером ~2:1 на всю ширину и схлопывалась (CLS). */
	--terem-slide-ar: 12 / 1;
	margin: 18px 0 0;
}

/* У слайда есть мобильная картинка — её пропорция (--terem-slide-ar-m с
 * обёртки, ставит PHP), нет — 7/2 кроп десктопной. !important: JS ставит
 * десктопную переменную инлайном, мобильную не трогает. */
@media (max-width: 767.98px) {
	.terem-cat-promo-slider .terem-slider__slide {
		aspect-ratio: var(--terem-slide-ar-m, 7 / 2) !important;
	}
}

/* Грид каталога (280px + 1fr): полоса над крошками — на всю ширину. */
@media (min-width: 768px) {
	body.woocommerce.archive .site-content > .col-full > .terem-cat-promo-slider {
		grid-column: 1 / -1;
	}
}

/* --- Статичные страницы: без легаси-правой колонки (1.2.9) ----------------
 * Доставка/Калькулятор/Новости…: sidebar-1 снят фильтром
 * terem_pages_no_right_sidebar — контент на всю ширину колонки, акция
 * идёт фирменной полосой после контента (terem_page_promo_append).
 * Прицел body.page без wc-страниц (у корзины/чекаута/аккаунта и главной
 * свои раскладки): .home — это тоже page. Флоаты сняты только ≥768px.
 * ------------------------------------------------------------------------ */
@media (min-width: 768px) {
	body.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .site-content > .col-full > #primary.content-area,
	body.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .site-content > .col-full > .sidebar {
		float: none;
		width: auto;
		margin: 0;
	}
}

/* --- Каталог: CSS-грид карточек -----------------------------------------
 * Легаси задавал ширину карточек процентами columns-N (woocommerce-2-custom:
 * .columns-3 29.41% + margin 5.88%…). В широкой сетке проценты дают слишком
 * крупные карточки и лесенку на переносах — переводим каталог на грид:
 * ≥1024px — 4 в ряд, 768–1023px — 2 (контент рядом с фильтром узкий),
 * <768px — прежние 48%+4% (правило выше по файлу). Только архивы: блок
 * «Похожие товары» (columns-3, полная ширина) остаётся на легаси-сетке.
 * minmax(0,1fr) — иначе длинные названия товаров растягивают колонку.
 * Грид игнорирует float/.first/.last карточек, -2px-запас не нужен.
 * ------------------------------------------------------------------------ */
@media (min-width: 1024px) {
	body.woocommerce.archive ul.products {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		column-gap: 2%;
		row-gap: 2.4em;
		margin-right: 0;
	}
}

@media (min-width: 768px) and (max-width: 1023.98px) {
	body.woocommerce.archive ul.products {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 4%;
		row-gap: 2.4em;
		margin-right: 0;
	}
}

/*
 * !important: легаси задаёт ширину карточек процентами columns-N
 * (.site-main .columns-4 ul.products li.product {width:22.05%} —
 * (0,4,2), а его fullwidth-вариант (0,5,2)) — специфичности терем-фикс
 * не хватает, и в гриде карточки сжимаются в столбик шириной ~52px
 * (22% от grid-колонки). Матчит и плитки подкатегорий (product-category
 * product). Грид игнорирует float/.first/.last. Только ≥768px: на
 * мобильном без important работает width:48% двухколоночной ветки выше.
 */
@media (min-width: 768px) {
	body.woocommerce.archive ul.products > li.product {
		float: none !important;
		width: auto !important;
		margin-right: 0 !important;
		margin-left: 0 !important;
		clear: none !important;
	}
}

/* --- «Другие коллекции» / «Вы недавно смотрели» после сетки (1.4.44) -------
 * Страницы коллекций и карточки товара (inc/archive.php — terem_other_
 * collections + terem-viewed.js): до восьми соседних коллекций того же
 * раздела карточками с картинкой/счётчиком/«от N ₽»; «Вы недавно смотрели»
 * рендерит JS из localStorage в скрытый каркас (WPSC держит один HTML для
 * всех — персонального в разметке нет). Карточки повторяют плитки раздела
 * (li.product-category), заголовок — terem-h2 главной. Блок живёт вне
 * ul.products: легаси-проценты карточек и скоуп .woocommerce.archive на
 * него не действуют — стили свои, компактные дубли счётчика/цены.
 * -------------------------------------------------------------------------- */
.terem-colls,
.terem-viewed {
	margin-top: 3em;
	/* легаси-флоаты описаний: без clear блок обтекается и сжимается */
	clear: both;
}

/* ГРАБЛЯ грида каталога: col-full на архивах — grid 280px + 1fr (1.2.0),
 * промо-полоса выходит на всю ширину через grid-column: 1 / -1; без него
 * блок попадает в колонку фильтров 280px (карточки 66px, заголовки
 * накладываются). Карточка товара — не archive, там col-full обычный блок. */
@media (min-width: 768px) {
	body.woocommerce.archive .terem-colls,
	body.woocommerce.archive .terem-viewed {
		grid-column: 1 / -1;
	}
}

.terem-colls .terem-h2,
.terem-viewed .terem-h2 {
	/* 3.2em терем-h2 — воздух между секциями главной, после сетки он излишен */
	margin: 0 0 1.1em;
}

.terem-colls__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: 2%;
	row-gap: 2em;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 1023.98px) {
	.terem-colls__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 4%;
	}
}

@media (max-width: 767.98px) {
	.terem-colls__grid {
		row-gap: 16px;
		/* 12px — как у сетки товаров (см. мобильный каталог), зазоры
		 * коллекций и товаров на одной странице совпадают. */
		column-gap: 12px;
	}

	.terem-colls .terem-h2,
	.terem-viewed .terem-h2 {
		font-size: 22px;
	}
}

/* Ряд: карточка растягивается на высоту грид-строки (li — item грида),
 * иначе сосед с коротким набором метаданных короче — цена «гуляет». */
.terem-colls__grid > li {
	display: flex;
}

.terem-colls__grid > li > .terem-colls__card {
	flex: 1 1 auto;
}

.terem-colls__card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--terem-line);
	border-radius: var(--terem-radius);
	padding: 14px;
	text-decoration: none;
	color: var(--terem-ink);
	transition: box-shadow .2s ease, border-color .2s ease;
}

.terem-colls__card:hover,
.terem-colls__card:focus-visible {
	border-color: transparent;
	box-shadow: var(--terem-shadow-lg);
}

/* Картинка — стабильный квадрат: коллекции без thumbnail (и записи
 * истории без img) держат ту же высоту, карточки не «пляшут» по ряду;
 * фон контейнера — заглушка пустой картинки (1.4.46, фидбек «размеры
 * блоков пляшут относительно картинки»). */
.terem-colls__img {
	display: block;
	aspect-ratio: 1 / 1;
	border-radius: 6px;
	overflow: hidden;
	background: var(--terem-bg-soft, #f5f5f6);
}

.terem-colls__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.terem-colls__name {
	margin-top: 10px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--terem-ink);
	text-align: left;
}

/* Счётчик «N товаров» и «от N ₽/м²» — вид плиток раздела; скоуп
 * body.woocommerce.archive ul.products на блок не матчит — дублируем. */
.terem-colls .terem-cat-count {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	font-weight: 400;
	color: var(--terem-muted);
	text-align: left;
}

.terem-colls .terem-cat-price {
	font-size: 13px;
	font-weight: 600;
	color: var(--terem-text);
	text-align: left;
	/* короткое название соседа — цена не гуляет по ряду, прижата к низу
	 * (та же схема, что у li.product-category 1.4.27) */
	margin-top: auto;
	padding-top: 4px;
}

/* Мобильная карточка коллекции — как товарная плитка: фото во всю ширину
 * (внутренний радиус 6px убран — углы клипает радиус карточки), текст с
 * полями 10px. Блок стоит ПОСЛЕ базовых правил выше: равная специфичность,
 * иначе паддинг 14px перекрывает мобильный 0. Касается и «Вы недавно
 * смотрели» — карточки те же .terem-colls__card. */
@media (max-width: 767.98px) {
	.terem-colls__card {
		padding: 0 0 12px;
		overflow: hidden;
	}

	.terem-colls__img {
		border-radius: 0;
	}

	.terem-colls__name,
	.terem-colls__grid .terem-cat-count,
	.terem-colls__grid .terem-cat-price {
		padding-left: 10px;
		padding-right: 10px;
	}
}

/* Воздух до футера: последний блок каталога прилипал к футеру вплотную
 * (замер 0px) — «Вы недавно смотрели» на категориях/товаре, стена фильтров
 * на мобиле. Паддинг контейнеру только там, где такие блоки есть (:has уже
 * в ходу темы с 1.3.1). */
.site-content > .col-full:has(> .terem-colls, > .terem-viewed) {
	padding-bottom: 48px;
}

/* --- «Вы недавно смотрели»: модалка полной истории (1.4.46) ---------------
 * Блок показывает 4 последние коллекции; вся история (до 12) — в модалке
 * по кнопке «Смотреть все →» в заголовке (терем-viewed.js). Скрытие —
 * атрибутом hidden: у модалки авторский display:flex, поэтому обязателен
 * явный [hidden]-гиб (грабля лайтбокса 1.4.5). z-index — как у лайтбокса
 * (99999), выше мобильного таб-бара. */
.terem-vmodal[hidden] {
	display: none;
}

.terem-vmodal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.terem-vmodal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.66);
}

.terem-vmodal__dialog {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(920px, 100%);
	max-height: min(84vh, 860px);
	background: #fff;
	border-radius: var(--terem-radius, 10px);
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25);
}

.terem-vmodal__close {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	border-radius: 8px;
	cursor: pointer;
	font-size: 28px;
	line-height: 1;
	color: var(--terem-muted);
}

.terem-vmodal__close:hover,
.terem-vmodal__close:focus-visible {
	color: var(--terem-ink);
	background: var(--terem-bg-soft, #f5f5f6);
}

.terem-vmodal__title {
	margin: 0;
	padding: 20px 64px 12px 24px;
	font-size: 20px;
	font-weight: 700;
	color: var(--terem-ink);
}

.terem-vmodal__body {
	overflow-y: auto;
	padding: 0 24px 24px;
	-webkit-overflow-scrolling: touch;
}

.terem-vmodal__body .terem-colls__grid {
	row-gap: 18px;
}

body.terem-vmodal-open {
	overflow: hidden;
}

/* Кнопка «Смотреть все →» в заголовке — вид terem-h2__all (стиль писался
 * под <a>): кнопке нужен сброс вида. width:auto обязателен: легаси
 * button{width:100%} растягивала её на весь заголовок — текст висел
 * слева, auto-маржин прижатия справа не оставалось. */
button.terem-h2__all {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	font: inherit;
	width: auto;
}

@media (prefers-reduced-motion: no-preference) {
	.terem-vmodal__dialog {
		animation: terem-vmodal-in 0.18s ease-out;
	}

	@keyframes terem-vmodal-in {
		from {
			opacity: 0;
			transform: translateY(10px) scale(0.98);
		}
	}
}

@media (max-width: 767.98px) {
	.terem-vmodal {
		padding: 12px;
	}

	.terem-vmodal__dialog {
		width: 100%;
		max-height: 86vh;
	}

	.terem-vmodal__title {
		padding: 14px 56px 10px 16px;
		font-size: 17px;
	}

	.terem-vmodal__body {
		padding: 0 16px 16px;
	}
}

/* --- Архивы: баннер категории на всю ширину слота (1.4.80) ------------------
 * Раньше справа от баннера стояла акция-карточка (снята — акции переехали
 * в слайдер над каталогом, .terem-cat-promo-slider). Слот один: баннер —
 * на всю ширину колонки каталога, жёсткая пропорция 2:1 (кроп; баннеры
 * 660×330 и квадратные фолбэпы thumbnail_id центрируются object-fit'ом —
 * заказчику квадрат в широком слоте «не подходит», фидбек 2026-10-12).
 * Аспект в CSS, а не из width/height-атрибутов: размер terem-cat-banner
 * (1341×670) сгенерирован не у всех старых вложений, у фолбэпа атрибуты
 * квадратные. Скругление — как у слайдов карусели.
 * ---------------------------------------------------------------------------- */
.terem-cat-hero > img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 2 / 1;
	object-fit: cover;
	border-radius: var(--terem-radius, 10px);
}

/* --- Главная: hero — два баннера в ряд (1.2.6) ----------------------------
 * Промо-колонка и баннерные пары сняты PHP-фильтром (1.2.3): ссылки на
 * категории живут в секции «Каталог». Один растянутый баннер кропился
 * пропорцией 2.4 до ~559px и съедал первый экран; теперь карусель
 * показывает 2 баннера (~660px при исходниках 794×400, высота ~332px),
 * каталог попадает в первый экран. Нужен один баннер — --terem-per-view: 1.
 * Легаси держал контейнер слайдера на 794px (storefront-2-custom.css) —
 * на планшете в широкой сетке справа пустовал: с 768px hero на всю
 * ширину колонки, на 768–1023px один баннер + выглядывающий следующий
 * (см. секцию карусели выше). Фон акции (1.1.76, zatirka-v-podarok-gl.jpg
 * правее слайдера 794px) в широкой сетке не виден за баннерами, но
 * выглядывал бы хвостом под каруселью — гасим (≤879.98 уже гасит 1.1.77).
 * ------------------------------------------------------------------------ */
@media (min-width: 768px) {
	.first-page.first-page-ext {
		float: none;
		width: 100%;
		margin: 0;
		background-image: none !important;
	}

	.first-page-ext .first-page-sl-ext-item {
		width: 100%;
		max-width: 100%;
		display: block;
		margin: 0 0 20px;
	}
}

@media (min-width: 1024px) {
	.first-page-ext .terem-slider {
		--terem-per-view: 2;
	}
}

/* --- Главная: карточки новостей/акций — резиновый грид ------------------
 * Было: фиксированные 337px inline-block (восстановление прод-правки
 * плагина). В широкой сетке — авто-наполнение от 320px: 1356px контента
 * дают 4 карточки в ряд, на узких — сколько влезет. auto-fit (не fill):
 * акций сейчас 3 — на широком экране ряд растягивается ими на всю ширину,
 * пустой колонки справа нет (превью исходно 640×480, растяжение до ~440px
 * без апскейла).
 * ------------------------------------------------------------------------ */
@media (min-width: 768px) {
	.page-list.page-list-ext {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
		column-gap: 22px;
		/* 1.4.14: ряды карточек прилипали по вертикали (column-gap был,
		 * row-gap нет, у item margin:0) — заметно на многорядных страницах:
		 * «Реализованные проекты» и её подразделы, «Полезные статьи»;
		 * на главной ряд один, там зазор не проявлялся. */
		row-gap: 22px;
	}

	/* Клирфикс плагина (::before/::after content:"" display:table) в
	 * grid-контейнере сам занимает грид-ячейку: ::before съедал первую
	 * колонку, и весь ряд карточек уезжал вправо (замечено заказчиком). */
	.page-list.page-list-ext::before,
	.page-list.page-list-ext::after {
		content: none;
		display: none;
	}

	.page-list-ext .page-list-ext-item {
		width: auto;
		margin: 0;
	}
}

/* --- Карта на «Контактах»: без потолка 1070px ---------------------------
 * (исторические слои .terem-ymap 1.1.84/1.2.0 схлопнуты в единый блок
 * карты в секции 1.3.0 ниже: там height/max-width/background/margin.) */

/* =========================================================================
 * 1.2.0 (стадия 3) — рестайлинг карточек
 *
 * Фирменная палитра: красный #ed3237, тёмный текст, мягкий серый фон
 * поверхностей, скругления и тени. Все дизайн-токены --terem-* собраны
 * в одном :root в секции меню выше по файлу.
 * ======================================================================= */

/* --- Крошки: тише и мельче ---------------------------------------------- */
.woocommerce-breadcrumb,
.woocommerce-breadcrumb a {
	color: var(--terem-muted);
	font-size: 12.5px;
}

.woocommerce-breadcrumb a:hover {
	color: var(--terem-red);
}

/* --- Карточка товара: снять легаси-клип Storefront ------------------------
 * SF4 (woocommerce.css) вешает .single-product div.product overflow:hidden —
 * обёртка режет блок «Похожие товары» по краям: правую рамку последней
 * карточки (ul.products с -2px-запасом шире обёртки, см. правило выше) и
 * тень карточек на ховере слева/снизу/справа, где список стоит вплотную
 * к границам. Флоаты галереи/сводки клирит легаси-clearfix
 * div.product:before/:after (display:table) — BFC для клипа не нужен.
 * ------------------------------------------------------------------------ */
.single-product div.product {
	overflow: visible;
}

/* --- Карточки каталога: белые плитки со скруглением и тенью на ховере --- */
body.woocommerce.archive ul.products > li.product,
.single-product .related ul.products > li.product,
.single-product .upsells ul.products > li.product,
.woocommerce-cart .cross-sells ul.products > li.product {
	background: #fff;
	border: 1px solid var(--terem-line);
	border-radius: var(--terem-radius);
	padding: 14px 14px 16px;
	transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}

@media (min-width: 768px) {
	body.woocommerce.archive ul.products > li.product:hover,
	.single-product .related ul.products > li.product:hover,
	.single-product .upsells ul.products > li.product:hover,
	.woocommerce-cart .cross-sells ul.products > li.product:hover {
		border-color: transparent;
		box-shadow: var(--terem-shadow-lg);
		transform: translateY(-3px);
	}
}

/* Мобильная плитка: фото во всю ширину карточки (было утоплено на 10px
 * с каждой стороны — при 48% колонки фото съедало 20px+рамка). Поля
 * переносятся на текст: заголовок/цена 10px по бокам, кнопка тоже.
 * overflow:hidden отдаёт клип углов фото радиусу плитки. Бейдж
 * «Распродажа» позиционируется от ссылки (секция 1.2.0) — угол ссылки
 * при padding:0 совпадает с углом фото, геометрия не меняется. */
@media (max-width: 767.98px) {
	body.woocommerce.archive ul.products > li.product,
	.single-product .related ul.products > li.product,
	.single-product .upsells ul.products > li.product,
	.woocommerce-cart .cross-sells ul.products > li.product {
		padding: 0 0 12px;
		overflow: hidden;
	}

	ul.products li.product .woocommerce-loop-product__title,
	ul.products li.product .title-description,
	ul.products li.product .price {
		padding-left: 10px;
		padding-right: 10px;
	}

	/* Атрибуты «60×119,5 / Ед.изм. м²» (the_excerpt в span): span инлайн,
	 * <p> внутри — без display:block паддинг инлайн-бокса инсет не даст. */
	ul.products li.product .title-description {
		display: block;
	}

	/* width:100% кнопки наследуется от легаси-кнопок — при боковых
	 * марджинах 10px обязана ужаться, иначе выпирает за рамку плитки.
	 * «В корзине» (added_to_cart) остаётся компактной пилюлей — только
	 * боковые поля, чтобы не прилипала к краю. */
	/* text-align:center: кнопка блочная на всю ширину, без прямого правила
	 * наследует left от карточки (мобильная сетка выше) — текст прижат
	 * к левому краю (десктоп центрирован своим правилом легаси). */
	ul.products li.product a.button {
		width: calc(100% - 20px);
		margin-left: 10px;
		margin-right: 10px;
		text-align: center;
	}

	ul.products li.product .added_to_cart {
		margin-left: 10px;
		margin-right: 10px;
	}
}

/* Подкатегории-плитки — тот же стиль плитки. */
body.woocommerce.archive ul.products > li.product-category {
	background: #fff;
	border: 1px solid var(--terem-line);
	border-radius: var(--terem-radius);
	padding: 14px;
	transition: box-shadow .2s ease, border-color .2s ease;
}

body.woocommerce.archive ul.products > li.product-category:hover {
	border-color: transparent;
	box-shadow: var(--terem-shadow-lg);
}

/* Мобильная плитка подкатегории — в одну линию с товарными карточками:
 * фото во всю ширину, текст с полями 10px (см. секцию карточек выше).
 * Разметка li.product-category > a > img + h2 (+ div.terem-cat-price
 * хуком после заголовка). Легаси-отступ под фото 1.618em заменяем на
 * общий для плиток 10px. */
@media (max-width: 767.98px) {
	body.woocommerce.archive ul.products > li.product-category {
		padding: 0 0 12px;
		overflow: hidden;
	}

	body.woocommerce.archive ul.products > li.product-category img {
		margin-bottom: 10px;
	}

	body.woocommerce.archive ul.products > li.product-category .woocommerce-loop-category__title,
	body.woocommerce.archive ul.products > li.product-category .terem-cat-price {
		padding-left: 10px;
		padding-right: 10px;
	}
}

/* --- Цены в карточках: жирные тёмные, старая цена серым ----------------- */
body.woocommerce.archive ul.products li.product .price {
	font-weight: 700;
	font-size: 16px;
	color: var(--terem-ink);
}

body.woocommerce.archive ul.products li.product .price del {
	color: var(--terem-muted);
	font-weight: 400;
	font-size: .85em;
	opacity: 1;
}

body.woocommerce.archive ul.products li.product .price ins {
	text-decoration: none;
}

/* Скидочный бейдж «Распродажа!» — стикер на углу фото (1.4.39, фидбек
 * «похоже на кнопку с кнопкой»: красная плашка с легаси-рамкой 2px #43454b
 * жила в ПОТОКЕ карточки между названием и ценой — прямо над красной же
 * «В корзину», читалась второй кнопкой). Позиционируемся от ссылки
 * карточки, а не от li: левый-верхний угол ссылки = угол фото при любых
 * паддингах li (на мобильных они свои). Селектор без archive-скоупа — тот
 * же стикер на related/кросс-селлах/шорткодных сетках; бейдж основной
 * карточки товара (div.product span.onsale) не задет. */
ul.products li.product .woocommerce-loop-product__link {
	position: relative;
}

ul.products li.product .onsale {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 10;
	margin: 0;
	padding: 4px 9px;
	background: var(--terem-red);
	color: #fff;
	border: 0;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .05em;
	line-height: 1.3;
	text-transform: uppercase;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .22);
}

/* --- Первичные кнопки: фирменный красный везде ---------------------------
 * Инлайн-CSS кастомайзера красит button/.button в тёмно-серый (локаль) —
 * перекрываем с !important (паттерн terem-fixes для кнопок). Каталожная
 * «В корзину» уже красная (секция выше); здесь — карточка товара, чекаут,
 * общие alt-кнопки.
 * ------------------------------------------------------------------------ */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce #place_order {
	background: var(--terem-red) !important;
	border: 0 !important;
	border-radius: var(--terem-radius-sm) !important;
	color: #fff !important;
	font-weight: 600;
	transition: background-color .15s ease, box-shadow .15s ease;
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce #place_order:hover {
	background: var(--terem-red-dark) !important;
	color: #fff !important;
	box-shadow: var(--terem-shadow);
}

/* --- Фокус полей форм: красная рамка ------------------------------------ */
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus,
.input-text:focus {
	border-color: var(--terem-red) !important;
	outline: 0;
}

/* =========================================================================
 * 1.2.0 (стадия 5) — мобильная нижняя таб-панель
 *
 * Главная / Каталог / Корзина (с бейджем) / Позвонить — как у Ozon:
 * корзина всегда под большим пальцем. Разметка — footer.php, бейдж
 * заполняет wc-cart-fragments (.terem-tabbar-badge, пустой рендер под
 * кеш — класс terem-cart-empty его прячет). Полоса корзины под меню
 * (1.1.61–1.1.65) снята. Sticky add-to-cart SF4 живёт у ВЕРХНЕГО края
 * (top:0) — с нижней панелью не конфликтует и не сдвигается.
 * ======================================================================= */

@media (min-width: 768px) {
	.terem-tabbar {
		display: none;
	}
}

@media (max-width: 767.98px) {
	body {
		padding-bottom: 58px;              /* место под панель */
	}

	.terem-tabbar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99990;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		background: #fff;
		border-top: 1px solid var(--terem-line);
		box-shadow: 0 -4px 16px rgba(0, 0, 0, .06);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.terem-tabbar__item {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 3px;
		padding: 8px 4px 7px;
		/* #5a5a5a (~6.1:1), не --terem-muted #6b6b6b (4.63:1): подпись
		 * 11px — мелкий текст AA 4.5, пограничный контраст флейкал
		 * между LH-прогонами (1.4.8). */
		color: #5a5a5a;
		font-size: 11px;
		line-height: 1.1;
		font-weight: 500;
		text-decoration: none;
		-webkit-tap-highlight-color: rgba(237, 50, 55, .12);
	}

	.terem-tabbar__item svg {
		width: 22px;
		height: 22px;
	}

	.terem-tabbar__item.is-active {
		/* #c9272c вместо #ed3237: контраст с белым 5.4:1 (Lighthouse
		 * color-contrast требует ≥4.5, у фирменного красного только 4.1). */
		color: var(--terem-red-dark);
		font-weight: 600;
	}

	/*
	 * Jivo (jdiv в нашем документе, инлайн position:fixed;bottom:0) вешал
	 * кнопку-лейбл «Напишите нам» ПОВЕРХ таб-панели — «Каталог» под ней
	 * не нажимался. Поднимаем и кнопку, и окно чата над панелью.
	 * !important обязателен: jivo ставит стили инлайном. В панели Jivo
	 * точного отступа от низа нет (только сторона), поэтому CSS сайта.
	 *
	 * На ТАЧ-устройствах jivo рендерит ДРУГУЮ разметку: вместо лейбла —
	 * компактная круглая кнопка в обёртке без id, классы CSS-модульные с
	 * хэш-суффиксами (wrap__HGZ4V _orientationRight__FAMTx) — матчу по
	 * семантическим частям «wrap__» + «orientation» (хэши меняются от
	 * сборки к сборке, префиксы — нет; проверено на jivo 1.3.6.1).
	 * Мобильное окно чата — фуллскрин-оверлей самого jivo, его не трогаем.
	 */
	jdiv#jvLabelWrap,
	jdiv#jcont,
	jdiv[class*="wrap__"][class*="orientation"] {
		bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
	}

	.terem-tabbar__item:active {
		color: var(--terem-red);
	}

	/* Бейдж корзины: красный круг у верхнего правого края иконки. */
	.terem-tabbar-badge {
		position: absolute;
		top: 2px;
		left: calc(50% + 6px);
		min-width: 17px;
		height: 17px;
		padding: 0 4px;
		background: var(--terem-red);
		color: #fff;
		font-size: 11px;
		font-weight: 600;
		line-height: 17px;
		text-align: center;
		border-radius: 9px;
		box-shadow: 0 0 0 2px #fff;
	}

	.terem-tabbar-badge.terem-cart-empty {
		display: none;
	}
}

/* =========================================================================
 * 1.2.2 — Главная: секции с заголовками, сетка «Каталог», ровные карточки
 *
 * Контент главной перестраивает terem_home_sections (functions.php):
 * баннерные пары после hero сменяет секция «Каталог» (плитки категорий),
 * плашки «АКЦИИ/НОВОСТИ» и Verdana-заголовки — единые terem-h2. Здесь —
 * их вид и выравнивание карточек новостей/акций (page-list) в плитки.
 * ======================================================================= */

/* --- Заголовок секции: название слева, «Все … →» справа ------------------ */
.terem-h2 {
	display: flex;
	align-items: baseline;
	gap: 16px;
	margin: 3.2em 0 1.1em;
	padding: 0;
	border: 0;
	color: var(--terem-ink);
	font-size: 26px;
	font-weight: 700;
	line-height: 1.25;
	text-align: left;
}

.terem-h2 > span:first-child {
	white-space: nowrap;
}

.terem-h2 .terem-h2__all {
	margin-left: auto;
	/* #c9272c (5.4:1 на белом): у фирменного #ed3237 контраст 4.1 —
	 * Lighthouse color-contrast для 15px-ссылки требует ≥4.5. */
	color: var(--terem-red-dark);
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition: color .15s ease;
}

.terem-h2 .terem-h2__all:hover {
	color: var(--terem-ink);
	text-decoration: underline;
}

/* --- Сетка «Каталог»: плитки категорий ------------------------------------
 * 8 плиток (7 категорий + «Все товары»): 4 в ряд ≥1024, 3 на планшете,
 * 2 на мобильном. Миниатюры — квадраты с обрезкой по центру.
 * ------------------------------------------------------------------------ */
.terem-home-cats__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

@media (min-width: 768px) {
	.terem-home-cats__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 20px;
	}
}

@media (min-width: 1024px) {
	.terem-home-cats__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.terem-home-cat {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--terem-line);
	border-radius: var(--terem-radius);
	padding: 14px;
	text-decoration: none;
	transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}

@media (min-width: 768px) {
	.terem-home-cat:hover {
		border-color: transparent;
		box-shadow: var(--terem-shadow-lg);
		transform: translateY(-3px);
	}
}

.terem-home-cat__img {
	display: block;
	border-radius: calc(var(--terem-radius) - 4px);
	overflow: hidden;
	background: var(--terem-bg-soft);
}

.terem-home-cat__img img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transition: transform .4s ease-out;
}

.terem-home-cat:hover .terem-home-cat__img img {
	transform: scale(1.06);
}

.terem-home-cat__name {
	margin-top: 12px;
	color: var(--terem-ink);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
}

.terem-home-cat__go {
	margin-top: 2px;
	color: var(--terem-red);
	font-size: 13px;
	font-weight: 500;
	opacity: 0;
	transition: opacity .15s ease;
}

@media (hover: hover) {
	.terem-home-cat:hover .terem-home-cat__go {
		opacity: 1;
	}
}

/* Плитка-кнопка «Все товары»: без картинки, центр. */
.terem-home-cat--all {
	align-items: center;
	justify-content: center;
	min-height: 100%;
	border-style: dashed;
}

.terem-home-cat--all .terem-home-cat__name {
	font-size: 17px;
}

.terem-home-cat--all .terem-home-cat__go {
	margin-top: 6px;
	font-size: 20px;
	opacity: 1;
}

/* Мобильная плитка каталога на главной — в один стиль с сеткой товаров
 * (см. мобильный каталог): фото во всю ширину карточки, зазор 12px, текст
 * с полями 10px. Блок ПОСЛЕ базовых правил плитки: специфичность равна,
 * иначе базовый padding:14px перекрывает мобильный (грабля 1.4.51). */
@media (max-width: 767.98px) {
	.terem-home-cats__grid {
		gap: 12px;
	}

	.terem-home-cat {
		padding: 0 0 12px;
		overflow: hidden;
	}

	.terem-home-cat__img {
		border-radius: 0;
	}

	.terem-home-cat__name,
	.terem-home-cat__go {
		padding-left: 10px;
		padding-right: 10px;
	}
}

/* --- «Почему мы»: плитки с иконками --------------------------------------
 * Вместо ленты-картинки pochemu-mi-new.jpg (terem_home_why, 1.2.3):
 * 5 пунктов исходника — доставкой, ассортимент, лояльность, склад, 3Д.
 * С 1.3.14 плитка — ссылка: без подчёркивания, фокус виден рамкой.
 * ------------------------------------------------------------------------ */
.terem-why {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
	gap: 14px;
	margin: 1.2em 0 0.8em;
}

.terem-why__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 22px 12px 18px;
	background: #fff;
	border: 1px solid var(--terem-line);
	border-radius: var(--terem-radius);
	text-align: center;
	text-decoration: none;
	transition: box-shadow .2s ease, border-color .2s ease;
}

.terem-why__item:focus-visible {
	outline: 2px solid var(--terem-red);
	outline-offset: 2px;
}

/* Ссылка без подчёркивания: легаси Storefront .hentry .entry-content a
 * (специфичность 0,2,1) вешает underline — перебиваем равной + позже в каскаде. */
.terem-why a.terem-why__item {
	text-decoration: none;
}

@media (min-width: 768px) {
	.terem-why__item:hover {
		border-color: transparent;
		box-shadow: var(--terem-shadow);
	}
}

.terem-why__ico {
	color: var(--terem-red);
	line-height: 0;
}

.terem-why__ico svg {
	width: 42px;
	height: 42px;
}

.terem-why__t {
	color: var(--terem-ink);
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.3;
}

/* Короткая подпись под названием (1.2.7, просьба заказчика). */
.terem-why__d {
	margin-top: 3px;
	color: var(--terem-muted);
	font-size: 13px;
	line-height: 1.45;
}

/* --- Партнёры: лента из центра — на всю ширину контейнера ---------------- */
.home .entry-content div[style*="width: 75%"] {
	width: 100% !important;
}

/* --- Карточки новостей/акций/статей (page-list) — ровные плитки ---------- */
.home .page-list-ext {
	text-align: left;
}

.page-list-ext .page-list-ext-item {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--terem-line);
	border-radius: var(--terem-radius);
	padding: 12px;
	margin: 0;
	transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}

@media (min-width: 768px) {
	.page-list-ext .page-list-ext-item:hover {
		border-color: transparent;
		box-shadow: var(--terem-shadow-lg);
		transform: translateY(-3px);
	}
}

.page-list-ext .page-list-ext-image {
	float: none;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border-radius: calc(var(--terem-radius) - 4px);
	overflow: hidden;
}

/* Единая пропорция превью: у акций атрибут 337px, у новостей 245×180 —
 * 16/10 с обрезкой по центру выравнивает карточки. */
.page-list-ext .page-list-ext-image img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.page-list-ext .page-list-ext-title {
	clear: none;
	margin: 12px 2px 2px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--terem-ink);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.page-list-ext .page-list-ext-title a {
	color: inherit;
	text-decoration: none;
}

.page-list-ext .page-list-ext-title a:hover {
	color: var(--terem-red);
}

/* Дата — к нижнему краю карточки: заголовки разной высоты (кламп 3 строк),
 * иначе красные даты на главной стоят на разных уровнях. */
.home .page-list-ext-item .terem-card-date {
	margin-top: auto;
	padding-top: 8px;
}

/* =========================================================================
 * 1.3.0 — правки по аудиту UI/UX (2026-10-08): карта, единая сетка главной,
 * красные CTA каталога, бейдж распродажи, плитка «Все товары», зазоры сетки,
 * пагинация Storefront по краям экрана, чекбоксы фильтров, счётчик категорий.
 * ======================================================================= */

/* --- Карта Яндекса: iframe виджета вместо конструктора -------------------
 * Ширина — вся сетка контента (было 1070px, зашитое в URL конструктора:
 * справа оставалась серая дыра ~270px). Центрирование в колонке — из
 * первоначального фасада 1.1.84 (margin:0 auto). Фон бокса — серый до
 * загрузки (нативный loading=lazy у iframe), скругление как у карточек.
 * ---------------------------------------------------------------------- */
.terem-ymap {
	position: relative;
	height: 450px;
	max-width: 100%;
	margin: 0 auto;
	border-radius: var(--terem-radius, 10px);
	overflow: hidden;
	background: #ececec;
}

.terem-ymap iframe {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100%;
	border: 0;
}

@media (max-width: 767.98px) {
	.terem-ymap {
		height: 340px;
	}
}

/* --- «Все товары»: CTA-плитка с круглой стрелкой -------------------------
 * Текстовый «→» рендерился стрелкой fallback-шрифта — тонкой линией.
 * SVG-кружок (маркап в terem_home_catalog) читается как кнопка; фон —
 * мягкий красный tint в тон акционной полосе. */
.terem-home-cat--all {
	border-style: solid;
	border-color: #f3cfd1;
	background: linear-gradient(160deg, #fdeced 0%, #fff 70%);
}

.terem-home-cat--all .terem-home-cat__go {
	margin-top: 12px;
	line-height: 0;
	color: var(--terem-red);
}

.terem-home-cat--all .terem-home-cat__go svg {
	width: 44px;
	height: 44px;
	transition: transform .2s ease;
}

@media (hover: hover) {
	.terem-home-cat--all:hover .terem-home-cat__go svg {
		transform: translateX(4px);
	}
}

/* --- Каталог: единый красный CTA -----------------------------------------
 * «В корзину» в листингах и «Похожих товарах» легаси красит в тёмный
 * (на локале #43454b, на проде фиолетовый Woo) — при красной кнопке
 * карточки товара и sticky-бара каталог выглядел другим магазином.
 * !important — против инлайн-CSS кастомайзера (паттерн секции .alt выше).
 * ---------------------------------------------------------------------- */
ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
	background: var(--terem-red) !important;
	border: 0 !important;
	border-radius: var(--terem-radius-sm) !important;
	color: #fff !important;
	font-weight: 600;
	transition: background-color .15s ease, box-shadow .15s ease;
}

ul.products li.product .button:hover,
ul.products li.product .button:focus,
ul.products li.product .added_to_cart:hover,
ul.products li.product .added_to_cart:focus {
	background: var(--terem-red-dark) !important;
	border-color: var(--terem-red-dark) !important;
	color: #fff !important;
	box-shadow: var(--terem-shadow);
}

/* Ссылка «В корзине» (после добавления) — раньше серела по легаси. */
.woocommerce ul.products li.product .added_to_cart {
	display: inline-block;
	margin-top: 6px;
	padding: 6px 14px;
	font-size: 14px;
}

/* Мобильная карточка после добавления: Woo вешает на кнопку ::after-галочку
 * (иконка шрифта Woo, .button.added::after), легаси — стрелку FontAwesome
 * (\f178) на ссылку .wc-forward. В двухколоночной карточке (~136px под
 * кнопку) «В корзину ✓» не влезает в строку — галочка падает на вторую
 * строку и кнопка раздувается вдвое; «Просмотр корзины» тоже переносится,
 * и стрелка повисает хвостом на отдельной строке. Гасим оба хвоста: факт
 * добавления и так виден по появившейся кнопке «Просмотр корзины» и бейджу
 * корзины в таб-баре. Десктоп (широкая карточка, всё влезает) не тронут.
 * Специфичности хватает: (0,4,2) против (0,3,1) у Woo и (0,4,1) против
 * (0,1,0) у легаси .wc-forward:after. */
@media (max-width: 767.98px) {
	ul.products li.product .button.added::after,
	.woocommerce ul.products li.product .added_to_cart::after {
		content: none;
	}
}

/* --- Бейдж «РАСПРОДАЖА!» на карточке товара ------------------------------
 * В листингах бейдж красная пилюля (секция 1.2.0 выше), на карточке
 * оставался легаси-контур 2px #43454b. */
.single-product div.product span.onsale {
	background: var(--terem-red);
	color: #fff;
	border: 0;
	border-radius: var(--terem-radius-sm);
	font-weight: 600;
	letter-spacing: .02em;
	padding: 3px 12px;
	position: static;
}

/* --- Пагинация Storefront (prev/next товар) ------------------------------
 * Штатные миниатюры prev/next торчат по краям вьюпорта половинками и на
 * редизайне читаются как обрезанная вёрстка; навигация по серии живёт
 * в крошках и в боковом дереве категорий — блок скрыт целиком. */
.storefront-product-pagination {
	display: none !important;
}

/* --- Зазоры рядов грида каталога -----------------------------------------
 * row-gap 2.4em складывался с легаси margin-bottom карточки (SF 2.6em):
 * между рядами читалось ~80px против 20px между колонками. */
@media (min-width: 768px) {
	body.woocommerce.archive ul.products > li.product {
		margin-bottom: 0 !important;
	}
}

/* Счётчик «N товаров» на карточках категорий/серий. */
body.woocommerce.archive ul.products li.product-category .terem-cat-count {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	font-weight: 400;
	color: var(--terem-muted);
}

body.woocommerce.archive ul.products li.product-category .woocommerce-loop-category__title {
	text-align: left;
}

/* «от N ₽/м²» на плитке категории (1.4.7, terem_subcategory_price): цена
 * — главный вопрос витрины без цен; тёмная и тихая, рядом со счётчиком. */
body.woocommerce.archive ul.products li.product-category .terem-cat-price {
	margin-top: 2px;
	font-size: 13px;
	font-weight: 600;
	color: var(--terem-text);
}

/* Заголовки виджетов-фильтров (1.4.7): легаси красил их красной плашкой
 * #ec3237 с белым текстом (storefront-2-custom.css .widget-2
 * .widget-title-2) — девять красных блоков в левой колонке читались как
 * крик и спорили с красным CTA. Спокойная типографика: тёмный текст,
 * тонкая линия. Сайдбар фильтров — .widget-area-2 (легаси-класс,
 * «widget-area» через дефис — селектор .widget-area его НЕ матчит);
 * специфичность (0,3,0) выше легаси (0,2,0). */
.widget-area-2 .widget-2 .widget-title-2,
.widget-area-2 .widget-2 .widgettitle-2 {
	padding: 0 0 .35em;
	margin-bottom: .5em;
	background: none;
	color: var(--terem-text);
	font-size: 14px;
	font-weight: 600;
	border-bottom: 1px solid var(--terem-line);
	border-radius: 0;
}

/* --- Фильтры: квадратики layered-nav -------------------------------------
 * «Чекбоксы» в фильтрах — не input, а глифы FontAwesome ::before
 * (woocommerce-2-custom: .widget_layered_nav li:before → \f0c8, opacity .35;
 * выбранный — \f14a в легаси-розовом #FB01CB). Калибруем размер, красим
 * выбранное состояние в фирменный красный, ховер ссылок — туда же. */
.widget_layered_nav li:before {
	font-size: 13px;
	color: var(--terem-ink);
	opacity: .35;
}

.widget_layered_nav li.chosen:before,
.widget_layered_nav .chosen:before {
	color: var(--terem-red) !important;
	opacity: 1;
}

.widget_layered_nav li a:hover {
	color: var(--terem-red);
}

.widget_layered_nav .woocommerce-widget-layered-nav-list__item .count {
	color: var(--terem-muted);
}

/* --- Фильтры: свотчи цвета (1.4.55) --------------------------------------
 * В фасете «Цвет» (pa_filtr-cvet, PHP: terem_color_swatch_nav_term_html в
 * inc/archive.php) к названию добавлен кружок с самим цветом — по одним
 * названиям («Греж», «Тауп») ориентироваться тяжело. Инлайн-блок: базовый
 * поток li с ::before-квадратиком не ломаем, счётчик (N) остаётся справа.
 * Кант — inset-тень, а не border: рамка нужна светлым (Белый, Кремовый)
 * и не должна раздувать тёмные кружки. */
.widget_layered_nav .terem-swatch {
	display: inline-block;
	width: 15px;
	height: 15px;
	margin-right: 6px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .22);
	vertical-align: -2px;
}

/* --- Чекаут: пояснение о доставке --------------------------------------- */
.terem-delivery-note {
	margin-bottom: 1.2em;
	padding: 12px 16px;
	background: var(--terem-bg-soft, #f5f5f6);
	border-left: 3px solid var(--terem-red);
	border-radius: 6px;
	color: var(--terem-ink);
	font-size: 14.5px;
	line-height: 1.5;
}

/* --- Видео магазина на главной: по сетке (после unwrap .first-terem) ----- */
.home .entry-content .wp-video,
.home .entry-content video {
	max-width: 100%;
	height: auto;
}

/* --- Карточка: «Описание» и «Детали» сразу в два столбца (1.3.1) --------- */
/*
 * Таб-меню убрано (terem_product_data_columns в functions.php): у всех
 * товаров вкладок ровно две, отзывов не бывает (comment_status closed у
 * всех 5617 товаров), меню лишь добавляло клик. Отступы и линия сверху —
 * как у прежнего .woocommerce-tabs (woocommerce-2-custom 2366-2375),
 * заголовки — как у панелей табов (woocommerce-2-custom 1505), таблица
 * атрибутов — как в панели: белый фон на (0,2,1) против (0,1,2)
 * инлайн-CSS кастомайзера.
 */
.terem-product-tabs {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: 0.6em 56px;
	padding-top: 1.617924em;
	padding-bottom: 2.617924em;
	border-top: 1px solid #d7d7d7;
	/* легаси .images/.summary плавают — без clear блок обтекается в 0px
	 * (у прежнего .woocommerce-tabs для этого был клирфикс) */
	clear: both;
}

/* одинокая секция (товар без атрибутов) — на всю ширину */
.terem-product-tabs:has(> :only-child) {
	grid-template-columns: minmax(0, 1fr);
}

.terem-product-tabs h2:first-of-type {
	font-size: 1.218em;
	margin-bottom: 1em;
	font-weight: 300;
	color: #c74f23;
}

@media (max-width: 767.98px) {
	.terem-product-tabs {
		grid-template-columns: minmax(0, 1fr);
		gap: 2.2em;
	}
}

/* --- Новости/Акции: отрывки в карточках (1.3.2) --------------------------- */
/*
 * На проде стоит старый хакнутый page-list: он игнорирует show_content и
 * печатает контент страниц КАК ТЕКСТ вместе с тегами (в карточках видно
 * «<span class="news-date">17-03-2020</span><br />…»). У 6.3 парсер
 * pagelist_unqprfx_parse_content чистит теги корректно, поэтому на страницах
 * «Новости» (124) и «Акции» (14897) отрывки включены (show_content="0"
 * снят в контенте страниц) — текст в плитке чистый, дата новости идёт
 * первой строкой отрывка. Плитки те же, что на главной; отрывок и
 * выравнивание — по левому краю: обёртка страниц красит контент в центр
 * инлайновым text-align:center, главной для этого уже нужен
 * .home .page-list-ext { text-align:left }.
 */
.page-id-124 .page-list-ext,
.page-id-14897 .page-list-ext {
	text-align: left;
}

.page-list-ext .page-list-ext-item-content {
	margin: 6px 2px 2px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--terem-muted);
	text-align: left;
	display: -webkit-box;
	-webkit-line-clamp: 6;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* --- Контакты: два адреса под картой (1.3.3) ------------------------------ */
/*
 * Карта теперь с двумя метками (pt= в terem_ymap_facade), а адреса обеих
 * точек — текстом под картой, каждый ведёт на карточку организации в
 * Яндекс.Картах (там рейтинг и часы). Обёртка страницы красит контент
 * в центр — ряд адресов центрируется целиком, внутри строки выровнены
 * по левому краю, чтобы длинный адрес Дубового не рябил.
 */
.terem-ymap-places {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 36px;
	margin-top: 14px;
}

.terem-ymap-place {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	max-width: 100%;
	font-size: 15px;
	line-height: 1.45;
	color: var(--terem-ink);
	text-align: left;
}

.terem-ymap-place svg {
	align-self: center;
	flex-shrink: 0;
	color: var(--terem-red);
}

.terem-ymap-place span {
	border-bottom: 1px dashed currentColor;
}

.terem-ymap-place:hover span {
	color: var(--terem-red);
}

@media (max-width: 767.98px) {
	.terem-ymap-places {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
}

/* --- Шапка архивов магазина: без 96px пустоты под H1 (1.3.4) -------------- */
/*
 * Storefront 4.6.2 (woocommerce.css, .storefront-full-width-content
 * .woocommerce-products-header) задаёт шапке архива padding-bottom
 * 5.9968353111em (~96px) — на «Товарах» и в категориях между H1 и сеткой
 * висела пустота в треть экрана (замечание заказчика). Первый селектор
 * повторяет SF-специфичность (0,2,0), terem-fixes идёт позже — побеждает.
 * text-align:left (1.4.18, фидбек «название категории прижми к левой
 * стороне, а не по середине»): тот же центральный H1-центрирующий
 * SF-селектор — в 1.3.4 центр не трогали, теперь прижат к левому краю
 * контентной колонки (над сеткой карточек). Cart/checkout/account entry-
 * header это правило SF не затрагивает — их центр не менялся.
 */
.storefront-full-width-content .woocommerce-products-header,
.woocommerce-products-header {
	padding-bottom: 0.618em;
	text-align: left;
}

/* --- Карточки [pagelist_ext]: дата и подпись (1.3.5) ---------------------- */
/*
 * Своя реализация шорткода (terem_pagelist_ext_shortcode в functions.php):
 * дата новости — красной строкой под заголовком, словами («27 сентября
 * 2022»); текст анонса — .page-list-ext-item-content (стили 1.3.2), а
 * подпись карточек без анонса (главная, проекты, статьи) — из мета 'text'
 * плагина, вычищенная от тегов (плагин печатал её esc_html-ем — в карточках
 * был виден сырой <span class="news-date">…).
 */
.terem-card-date {
	margin: 8px 2px 0;
	font-size: 12.5px;
	font-weight: 600;
	/* Тёмно-красный (5.4:1), не фирменный #ed3237 (3.76:1): дата 12.5px
	 * мелким текстом ниже порога AA 4.5 — LH color-contrast (1.4.3). */
	color: var(--terem-red-dark, #c9272c);
}

.page-list-ext .terem-card-date + .page-list-ext-item-content {
	margin-top: 4px;
}

.terem-card-note {
	margin: 6px 2px 2px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--terem-muted);
}

/* --- Карточка товара: без правой колонки (1.3.9) --------------------------
 * Карточку приводим к одному виду со страницами каталога уровнем выше
 * (фидбек заказчика): sidebar-1 снят фильтром terem_shop_no_right_sidebar —
 * пустую колонку скрываем целиком (легаси рисовал на ней бордюр), контент
 * растягиваем на всю ширину col-full, как на архивах (1.2.0). Легаси-класс
 * .right-sidebar на body статичен (кастомайзер SF), поэтому ширина —
 * явным правилом: ID (1,2,1) перебивает .right-sidebar .content-area-2
 * (0,2,0) и terem-full 76.9% (0,3,0). Класс terem-full в разметке остался.
 * Только ≥768px: на мобиле колонки и так стакаются.
 * ------------------------------------------------------------------------ */
@media (min-width: 768px) {
	body.single-product #primary.content-area-2.terem-full {
		width: auto;
		float: none;
		margin: 0;
	}
}

/* --- Контакты (1.4.7): телефон tel:, кнопка «Маршрут» к адресу ---------
 * Легаси-карточки kont-zagolovok-* в контенте; кнопка — контурная пилюля
 * рядом с адресом (terem_kontakty_enhance), телефоны — красные ссылки. */
.terem-kont-route {
	display: inline-block;
	margin-left: 10px;
	padding: 3px 12px;
	/* red-dark: текст 13px/600 — мелкий, #ed3237 на белом 3.76:1 < AA */
	border: 1px solid var(--terem-red-dark, #c9272c);
	border-radius: 4px;
	color: var(--terem-red-dark, #c9272c);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	vertical-align: middle;
}

.terem-kont-route:hover,
.terem-kont-route:focus {
	background: #fdf2f2;
	color: var(--terem-red);
	text-decoration: none;
}

/* ГРАБЛИ: селектор БЕЗ .entry-content красил «Позвонить» в таб-баре
 * (11px, #ed3237 на белом = 3.76:1 — провал AA, LH 1.4.8). tel-ссылки
 * контента — red-dark (5.4:1). */
.entry-content a[href^="tel:"] {
	color: var(--terem-red-dark, #c9272c);
}

/* --- Карточки page-list: вертикальные отступы (1.4.14) --------------------
 * Грид ≥768px получает row-gap рядом с колонкой выше; на <768px сетка
 * снимается (блочный столбик), а глобальный margin:0 у плиток-карточек
 * (блок «ровные плитки») перекрывал старый мобильный отступ 1.8em из
 * легаси-блока выше — карточки прилипали и в столбике (страницы проектов,
 * мобильная главная). Отступ возвращаем здесь, последними в каскаде.
 * (row-gap сетки ≥768px — выше, в блоке грида.) */
@media (max-width: 767.98px) {
	.page-list-ext .page-list-ext-item {
		margin: 0 0 16px;
	}

	.page-list-ext .page-list-ext-item:last-child {
		margin-bottom: 0;
	}
}

/* --- Карточки page-list на мобильном — как плитки каталога (1.4.52) -------
 * Превью во всю ширину карточки (было в полях 12px — картинка 325 из 351
 * при контейнере, а с полями контейнера 375 ещё меньше), текст с полями
 * 10px. Блок последним в каскаде: базовый padding:12px выше (5477),
 * overflow:hidden на мобильном уже даёт легаси-блок выше по файлу.
 * Касается главной (акции/новости) и страниц списков /aktsii/, /novosti/,
 * /realizovannye-proekty/ — плитки те же. */
@media (max-width: 767.98px) {
	.page-list-ext .page-list-ext-item {
		padding: 0 0 12px;
	}

	.page-list-ext .page-list-ext-image {
		border-radius: 0;
	}

	.page-list-ext .page-list-ext-title,
	.page-list-ext .terem-card-date,
	.page-list-ext .terem-card-note,
	.page-list-ext .page-list-ext-item-content {
		padding-left: 10px;
		padding-right: 10px;
	}
}

/* ===========================================================================
 * Карточка товара 1.4.23: шапка по мотивам Kerama Marazzi (надзаголовок,
 * H1 с форматом, артикул/серия), модалка «Калькулятор плитки»,
 * «Характеристики» строками с пунктирными лидерами.
 * ======================================================================== */

/* ---- Блок заголовка (terem_single_title_block) ---- */
.single-product .terem-title-eyebrow {
	margin: 0 0 6px;
	font-size: 14px;
	color: var(--terem-muted);
}

.single-product .terem-title-eyebrow a {
	color: inherit;
	text-decoration: none;
}

.single-product .terem-title-eyebrow a:hover,
.single-product .terem-title-eyebrow a:focus {
	color: var(--terem-red);
}

/* размер в H1 не рвётся на переносе: «…обрезной 30х31,2» */
.single-product .terem-title-format {
	white-space: nowrap;
}

.single-product .terem-title-meta {
	margin-top: 10px;
	font-size: 14px;
	color: var(--terem-text);
}

/* каждый пункт своей строкой (фидбек «серия должна быть под артикулом») */
.single-product .terem-title-meta__item {
	display: block;
}

.single-product .terem-title-meta__label {
	color: var(--terem-muted);
}

.single-product .terem-title-meta a {
	color: var(--terem-red-dark, #c9272c);
	text-decoration: none;
}

.single-product .terem-title-meta a:hover,
.single-product .terem-title-meta a:focus {
	color: var(--terem-red);
	text-decoration: underline;
}

.single-product .terem-title-specs-link {
	display: inline-block;
	margin-top: 10px;
	font-size: 14px;
	color: var(--terem-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.single-product .terem-title-specs-link:hover,
.single-product .terem-title-specs-link:focus {
	color: var(--terem-red);
}

/* родная строка меты: артикул теперь под H1 (дубль), категории остаются */
.single-product .product_meta .sku_wrapper {
	display: none;
}

/* ---- Кнопка «Калькулятор плитки» (terem_calc_button) ----
 * Легаси button{width:100%} глушим: призрак на всю колонку не нужен. */
.single-product .terem-calc-btn {
	width: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	margin-top: 14px;
	padding: 0 22px;
	background: #fff;
	border: 1px solid #cfcfcf;
	border-radius: 6px;
	color: var(--terem-text);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	text-transform: none;
	text-shadow: none;
	box-shadow: none;
	cursor: pointer;
	transition: border-color .15s ease, color .15s ease;
}

.single-product .terem-calc-btn:hover,
.single-product .terem-calc-btn:focus {
	border-color: var(--terem-red);
	color: var(--terem-red);
	background: #fff;
}

/* ---- Модалка калькулятора ---- */
.terem-pmodal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}

/* грабля лайтбокса (1.4.5): display:flex выше перебивает [hidden] */
.terem-pmodal[hidden] {
	display: none;
}

body.terem-pmodal-open {
	overflow: hidden;
}

.terem-pmodal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(24, 24, 27, .55);
}

.terem-pmodal__box {
	position: relative;
	width: 100%;
	max-width: 540px;
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	background: #fff;
	border-radius: 12px;
	padding: 24px;
	box-shadow: 0 18px 60px rgba(0, 0, 0, .25);
}

.terem-pmodal__close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 40px;
	height: 40px;
	min-height: 40px;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 50%;
	font-size: 26px;
	line-height: 1;
	color: #8a8a8f;
	cursor: pointer;
}

.terem-pmodal__close:hover,
.terem-pmodal__close:focus {
	background: var(--terem-hover, #f5f5f5);
	color: var(--terem-text);
}

.terem-pmodal__title {
	margin: 0 0 8px;
	font-size: 22px;
	font-weight: 700;
	color: var(--terem-text);
}

.terem-pmodal__intro {
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--terem-muted);
}

.terem-pmodal__mode {
	display: flex;
	gap: 8px;
	margin-bottom: 14px;
}

.terem-pmodal__mode-opt {
	position: relative;
}

/* скрытый radio шириной 1px (грабля: 0×0 роняет клик в части webview) */
.terem-pmodal__mode-opt input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
}

.terem-pmodal__mode-opt span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 0 20px;
	background: var(--terem-hover, #f5f5f5);
	border: 1px solid var(--terem-hover, #f5f5f5);
	border-radius: 8px;
	font-size: 15px;
	font-weight: 600;
	color: var(--terem-text);
	cursor: pointer;
	transition: background-color .15s ease;
}

.terem-pmodal__mode-opt input:checked + span {
	background: var(--terem-red);
	border-color: var(--terem-red);
	color: #fff;
}

.terem-pmodal__mode-opt input:focus-visible + span {
	outline: 2px solid var(--terem-red);
	outline-offset: 2px;
}

.terem-pmodal__fields {
	display: flex;
	align-items: flex-end;
	gap: 10px;
	margin-bottom: 10px;
}

.terem-pmodal__wall-n {
	flex: 0 0 62px;
	padding-bottom: 12px;
	font-size: 14px;
	color: var(--terem-muted);
}

.terem-pmodal__field {
	flex: 1 1 0;
	min-width: 0;
	font-size: 13px;
	color: var(--terem-muted);
}

.terem-pmodal__field > span {
	display: block;
	margin-bottom: 5px;
}

.terem-pmodal__field--wide {
	flex-basis: 100%;
}

.terem-pmodal__field input {
	width: 100%;
	height: 42px;
	padding: 0 12px;
	background: #fff;
	border: 1px solid #cfcfcf;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 600;
	color: var(--terem-text);
}

.terem-pmodal__field input:focus {
	outline: none;
	border-color: var(--terem-red);
}

/* Поверхности пола в модалке (1.4.30): тот же .terem-floor-row, что на
   /kalkulyator/ (хелпер общий), стили — под поле модалки. */
.terem-pmodal .terem-floor-n {
	flex: 0 0 auto;
	padding-bottom: 12px;
	font-size: 14px;
	color: var(--terem-muted);
}

.terem-pmodal .terem-floor-m2 {
	/* Фиксированная ширина итога «= N м²» (1.4.50): появление текста не
	   сжимает поля строки относительно пустых строк ниже. */
	flex: 0 0 84px;
	padding-bottom: 12px;
	font-size: 13px;
	color: var(--terem-muted);
	white-space: nowrap;
	text-align: right;
}

.terem-pmodal .terem-floor-del {
	height: 42px;
}

.terem-pmodal .terem-floor-add {
	min-height: 40px;
	margin-top: 2px;
}

/* 1.4.49: запас и шов в одной строке, одинаковой структуры — инпут 76px
   + пресетные чипы у обоих (подписи на одном уровне, поля не «разной
   длины»); на узких экранах шов переносится на свою строку. */
.terem-pmodal__reserve-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0 12px;
	margin-top: 4px;
}

.terem-pmodal__field--reserve,
.terem-pmodal__field--joint {
	flex: 0 0 auto;
}

.terem-pmodal__reserve-wrap .terem-pmodal__hint {
	flex: 0 0 100%;
}

.terem-pmodal__field .terem-pmodal__reserve {
	/* (0,2,0) против подписевого .terem-pmodal__field > span (0,1,1):
	   тот делает резервный span блоком, и пресеты 10%/15% переносились
	   под инпут — инпут и оба пресета должны стоять в одной строке. */
	display: flex;
	align-items: center;
	gap: 8px;
}

.terem-pmodal__reserve input {
	width: 76px;
	flex: 0 0 auto;
}

.terem-pmodal__presets {
	display: flex;
	gap: 6px;
}

.terem-pmodal__preset {
	width: auto;
	min-height: 36px;
	margin: 0;
	padding: 0 12px;
	background: var(--terem-hover, #f5f5f5);
	border: 1px solid var(--terem-hover, #f5f5f5);
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--terem-text);
	text-transform: none;
	text-shadow: none;
	box-shadow: none;
	line-height: 1;
	cursor: pointer;
}

.terem-pmodal__preset:hover,
.terem-pmodal__preset:focus {
	background: #ebebee;
	border-color: #ebebee;
	color: var(--terem-text);
}

.terem-pmodal__preset.is-active {
	background: var(--terem-red);
	border-color: var(--terem-red);
	color: #fff;
}

.terem-pmodal__hint {
	display: block;
	margin-top: 6px;
	font-size: 12.5px;
	color: var(--terem-muted);
}

.terem-pmodal__result {
	margin-top: 14px;
	padding: 14px 16px;
	background: var(--terem-hover, #f5f5f5);
	border-radius: 8px;
}

.terem-pmodal__msg {
	margin: 0;
	font-size: 14px;
	color: var(--terem-muted);
}

.terem-pmodal__tiles {
	font-size: 15px;
	color: var(--terem-text);
}

.terem-pmodal__tiles strong {
	font-size: 22px;
	font-weight: 700;
}

.terem-pmodal__row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: 6px;
	font-size: 14.5px;
	color: var(--terem-text);
}

.terem-pmodal__row b {
	font-weight: 700;
}

.terem-pmodal__warn {
	margin: 8px 0 0;
	font-size: 13.5px;
	color: #b3261e;
}

.terem-pmodal__add {
	display: block;
	width: 100%;
	min-height: 48px;
	margin-top: 14px;
	padding: 0 24px;
	background: var(--terem-red);
	border: 0;
	border-radius: 8px;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	text-transform: none;
	text-shadow: none;
	box-shadow: none;
	cursor: pointer;
	transition: background-color .15s ease;
}

.terem-pmodal__add:hover,
.terem-pmodal__add:focus {
	background: #d3232a;
	color: #fff;
}

.terem-pmodal__add:disabled {
	background: #e3e3e6;
	color: #9a9aa0;
	cursor: default;
}

.terem-pmodal__note {
	margin: 10px 0 0;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--terem-muted);
}

/* ---- «Характеристики»: строки «метка …… значение» ---- */
.terem-product-tabs__col--specs {
	scroll-margin-top: 20px;
}

.terem-spec-list {
	margin: 0;
	font-size: 14.5px;
}

.terem-spec-row {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 8px 0;
	border-bottom: 1px solid var(--terem-line, #ececec);
}

.terem-spec-row:last-child {
	border-bottom: 0;
}

.terem-spec-row dt {
	flex: 0 1 auto;
	color: var(--terem-muted);
	font-weight: 400;
}

.terem-spec-dots {
	flex: 1 1 12px;
	border-bottom: 1px dotted #c2c2c2;
	transform: translateY(-4px);
}

.terem-spec-row dd {
	flex: 0 1 auto;
	margin: 0;
	text-align: right;
	font-weight: 600;
	color: var(--terem-text);
}

.terem-spec-row dd a {
	color: var(--terem-red-dark, #c9272c);
	text-decoration: none;
}

.terem-spec-row dd a:hover,
.terem-spec-row dd a:focus {
	color: var(--terem-red);
	text-decoration: underline;
}

/* ---- «Описание»: остаток контента + честные пункты ---- */
.terem-product-desc p {
	margin: 0 0 10px;
	line-height: 1.55;
}

.terem-product-notes {
	margin: 14px 0 0;
	padding-left: 18px;
	color: var(--terem-text);
}

.terem-product-notes li {
	margin-bottom: 8px;
	line-height: 1.55;
}

.terem-product-notes a {
	color: var(--terem-red-dark, #c9272c);
}

/* ---- «О серии»: текст коллекции в колонке описания карточки ---- */
/* Заголовок блока — скромный подзаголовок: дефолтный h3 (26px/600) крупнее
 * красного h2 колонки и ломал иерархию. Ссылки в блоке нет — рядом строка
 * «Серия» в характеристиках (дубль). */
.terem-series-note__title {
	margin: 0 0 8px;
	font-size: 1.05em;
	font-weight: 700;
	line-height: 1.4;
	color: var(--terem-text, #2c2d33);
}

/* ---- Модалка: мобайл — нижний лист ---- */
@media (max-width: 600px) {
	.terem-pmodal {
		padding: 8px;
		align-items: flex-end;
	}

	.terem-pmodal__box {
		max-height: calc(100vh - 16px);
		border-radius: 12px 12px 0 0;
		padding: 20px 16px;
	}

	.terem-pmodal__fields {
		flex-wrap: wrap;
	}

	.terem-pmodal__wall-n {
		flex-basis: 100%;
		padding-bottom: 0;
	}

	/* Поверхности пола: подпись на своей строке, поля рядом, итог и
	   крестик — строкой под ними. */
	.terem-pmodal .terem-floor-row {
		flex-wrap: wrap;
	}

	.terem-pmodal .terem-floor-n {
		flex-basis: 100%;
		padding-bottom: 0;
	}

	.terem-pmodal .terem-floor-row .terem-pmodal__field {
		flex: 1 1 40%;
	}

	.terem-pmodal .terem-floor-m2 {
		/* Итог и крестик — своей строкой под полями (как на мобайле
		   /kalkulyator/): 100% минус крестик с зазором. */
		flex: 1 1 calc(100% - 54px);
		align-self: center;
		padding-bottom: 0;
	}

	.terem-pmodal .terem-floor-del {
		align-self: center;
		/* Пустой итог схлопывается в 0, и крестик переносится на свою
		   строку прижатым к левому краю — уводим вправо. */
		margin-left: auto;
	}
}

/* ---- Правки по итогам визуальной приёмки 1.4.23 ----
 * 1) .product_meta дубль нового тайтл-блока: «Артикул» уже под H1,
 *    категории/серия — в надзаголовке и таблице характеристик; вдобавок
 *    «Категории: Ифран, Ифран,…» печатает товар в двух ветках каталога.
 * 2) Зум-триггер галереи зависел от FontAwesome-шрифта (пока тот грузится
 *    — пустой квадрат в углу фото): инлайн-SVG лупа вместо глифа. */
.single-product div.product .product_meta {
	display: none;
}

.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
	top: 12px;
	right: 12px;
	width: 36px;
	height: 36px;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6b6b' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21'/%3E%3C/svg%3E") center / 18px no-repeat;
	border: 1px solid #e3e3e3;
	border-radius: 8px;
	text-indent: -9999px;
	overflow: hidden;
	transition: border-color .15s ease;
}

.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger:before {
	content: none;
}

.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger:hover,
.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger:focus {
	border-color: var(--terem-red);
}

/* ===========================================================================
 * 1.4.25, фидбек: корзина на мобайле («наезжают крестики») и единицы
 * измерения у товаров без м²-шага (SPC, декоры — из контента 1С).
 * ======================================================================== */

/* ---- Корзина ≤767: легаси рисовал разделитель позиций 25px-бордером
 * td.product-remove (#43454b), а крестик absolute top:-14px ложился ровно
 * на эту полосу. Разделитель — светлая линия, крестик — аккуратная кнопка
 * в своей строке. ---- */
@media (max-width: 767.98px) {
	.woocommerce-cart-form table.cart td.product-remove {
		border-top: 1px solid var(--terem-line, #e8e8e8);
		padding: 10px 12px 0;
		text-align: right;
	}

	.woocommerce-cart-form table.cart tr:first-child td.product-remove {
		border-top: 0;
	}


}

/* Крестик удаления в корзине: видимая иконка — FontAwesome-глиф
 * a.remove:before (\f057) на text-indent:-9999px; пока шрифт не загружен,
 * крестик исчезает или плывёт (на мобайле уезжал к центру позиции).
 * Рисуем штатный ×-текст Woo в красном круге, псевдо выключаем. */
.woocommerce-cart-form table.cart td.product-remove a.remove {
	position: static;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	text-indent: 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	text-decoration: none; /* легаси a{underline} рисовал белую черту под × */
	background: #e2401c;
	border-radius: 50%;
}

.woocommerce-cart-form table.cart td.product-remove a.remove::before {
	content: none;
}

.woocommerce-cart-form table.cart td.product-remove a.remove:hover,
.woocommerce-cart-form table.cart td.product-remove a.remove:focus {
	background: #c23417;
	color: #fff;
}

/* ---- Единица в строке корзины: «Количество: [4] м²» ---- */
/* «Количество: [2] м²» — единица в строке с инпутом, не под ним */
.woocommerce-cart-form table.cart td.product-quantity .quantity {
	display: inline-block;
}

.woocommerce-cart-form .terem-cart-unit {
	display: inline-block;
	margin-left: 8px;
	font-size: 13px;
	color: var(--terem-muted);
	vertical-align: middle;
}

/* --- Корзина и чекаут: без правой колонки (1.4.26 корзина — фидбек
 * «убери с корзины информацию о акции затирка», 1.4.57 чекаут — фидбек
 * «баннер с акцией отвлекает от основного») — sidebar-1 пуст фильтром
 * terem_cart_checkout_no_sidebar; пустую колонку скрываем (легаси-борт),
 * контент на всю ширину col-full по образцу 1.3.9. Только ≥768px. --- */
@media (min-width: 768px) {
	body.woocommerce-cart .site-content > .col-full > #primary.content-area,
	body.woocommerce-checkout .site-content > .col-full > #primary.content-area {
		width: auto;
		float: none;
		margin: 0;
	}
}

/* --- Аудит дизайна 2026-10-10 (1.4.27) ---------------------------------- */

/* 1) Хаб/архивы: цена «от N ₽» прижата к низу карточки категории.
 * Карточки товаров (li.product) давно flex-колонки с .price{margin-top:auto}
 * (1.1.40), а карточки категорий (li.product-category) — нет: заголовок в
 * 1–2 строки (SPC/кварцвинил против «Мозаика - керамический гранит») и цены
 * ряда стоят на разных уровнях. Та же схема: <a> — flex-колонка на высоту
 * карточки, цена — вниз. */
body.woocommerce.archive ul.products li.product-category {
	display: flex;
	flex-direction: column;
}

body.woocommerce.archive ul.products li.product-category > a {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

body.woocommerce.archive ul.products li.product-category .terem-cat-price {
	margin-top: auto;
	padding-top: 2px;
}

/* 2) Мобайл (<768): стена фильтров перед товарами. В DOM сайдбар
 * (#secondary.widget-area-2) стоит ДО контента (#primary.content-area-2),
 * на десктопе он уходит вправо float'ом, а на мобильном без изменений
 * ~2000px фильтров (цена, производитель, поверхность, цвет на 37 пунктов)
 * стоят над сеткой — товары за первым экраном. На архивах магазина
 * (/shop/ — post-type-archive-product, категории — tax-product_cat)
 * col-full становится flex-колонкой: контент первым, фильтры после сетки.
 * Корзина/чекаут/карточка (woocommerce-cart/-checkout/single-product) не
 * матчатся; элементы вне пары primary/secondary (хлебные крошки,
 * .woocommerce) остаются на местах порядка DOM (order:0). */
@media (max-width: 767.98px) {
	body.post-type-archive-product .site-content > .col-full,
	body.tax-product_cat .site-content > .col-full {
		display: flex;
		flex-direction: column;
	}

	body.post-type-archive-product .site-content > .col-full > #primary.content-area-2,
	body.tax-product_cat .site-content > .col-full > #primary.content-area-2 {
		order: 1;
	}

	/* Блоки коллекций после сетки (terem-colls/terem-viewed, 1.4.44) —
	 * прямые дети col-full с order:0, без явного порядка выпрыгивают выше
	 * primary; ставим между сеткой и фильтрами, взаимный порядок — DOM
	 * (приоритеты хука 25/30). */
	body.post-type-archive-product .site-content > .col-full > section.terem-colls,
	body.post-type-archive-product .site-content > .col-full > section.terem-viewed,
	body.tax-product_cat .site-content > .col-full > section.terem-colls,
	body.tax-product_cat .site-content > .col-full > section.terem-viewed {
		order: 2;
	}

	body.post-type-archive-product .site-content > .col-full > #secondary.widget-area-2,
	body.tax-product_cat .site-content > .col-full > #secondary.widget-area-2 {
		order: 3;
	}
}

/* --- Контакты (1.4.28): карточки адресов семантичной сеткой -------------
 * Легаси-«таблица» (k1/k3 float по 25%: подписи отдельной строкой от
 * значений, склейка только за счёт флоатов) на мобильном складывалась
 * «подписи грудой, значения грудой» (фидбек аудита 2026-10-10). Контент
 * карточек переверстан в .terem-kont-card (БД стр. 46, zz-скрипт на прод):
 * подпись прижата к своему значению в .terem-kont-col. Полосы отделов
 * (k4/k5), карта и фильтр terem_kontakty_enhance (tel:/«Маршрут» — DOM,
 * не классы) не тронуты.
 *
 * 1.4.72 (фидбек юзера «блоки прижаты к правой стороне»): в БД логотип
 * лежит ВНУТРИ .terem-kont-body (первый flex-элемент), а не прямым
 * ребёнком карточки, поэтому колонка «logo» сетки 25% оставалась пустой —
 * адрес/колонки уезжали вправо на четверть ширины. Сетка в одну колонку:
 * адрес строкой сверху, ниже логотип + три колонки на всю ширину. */
.terem-kont-card {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas:
		"addr"
		"body";
	margin-bottom: 30px;
}

.terem-kont-card .kont-zagolovok-k2 {
	float: none;
	width: auto;
	grid-area: addr;
	align-self: start;
}

.terem-kont-card .terem-kont-logo {
	flex: 0 0 200px;
	padding-right: 28px;
}

.terem-kont-card .terem-kont-logo img {
	max-width: 100%;
	height: auto;
}

.terem-kont-card .terem-kont-body {
	grid-area: body;
	display: flex;
	gap: 28px 36px;
	flex-wrap: wrap;
	margin-top: 10px;
}

.terem-kont-card .terem-kont-col {
	flex: 1 1 170px;
	min-width: 160px;
}

.terem-kont-label {
	margin-bottom: 4px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--terem-muted, #6d6d6d);
}

.terem-kont-val {
	font-size: 15px;
	line-height: 1.65;
	overflow-wrap: break-word;
}

@media (max-width: 767.98px) {
	.terem-kont-card .terem-kont-body {
		display: block;
		margin-top: 6px;
	}

	.terem-kont-card .terem-kont-col {
		margin-bottom: 14px;
	}

	.terem-kont-card .terem-kont-logo {
		padding-right: 0;
	}

	.terem-kont-card .terem-kont-logo img {
		max-width: 170px;
	}
}

/*
 * =====================================================================
 * Кнопка «В корзину» в состоянии is-busy — terem-fixes 1.4.29.
 *
 * Гвард двойного сабмита (terem-product.js 1.1.2) лочит форму на
 * submit, пока страница уходит в перезагрузку: повторный клик до ухода
 * уходил бы вторым POST-ом и удваивал количество в корзине («счётчик
 * прибавляет по два»). Саму кнопку disabled-ить нельзя: отключённый
 * сабмиттер не включает name/value в отправку — POST уходит без
 * add-to-cart и Woo молча не добавляет товар. Поэтому лочится форма,
 * а кнопка получает только визуальное состояние «идёт добавление».
 * =====================================================================
 */
.single-product div.product form.cart .single_add_to_cart_button.is-busy {
	opacity: 0.6;
	cursor: progress;
}

/* ===========================================================================
 * 1.4.32, фидбек «на главной много свободного места — только для мобильных
 * меньше, на компе норм»: межсекционный ритм главной на мобиле задавал
 * .terem-h2 (margin-top 3.2em при мобильном кегле ≈ 64px, со схлопыванием
 * давал равные ~62px пустоты между Каталогом/Акциями/«Почему мы»/Новостями
 * и партнёрами). Секционный воздух ужат до 30/14px; легаси <br> вокруг
 * видео (по 22px переноса) на мобиле скрыты. Десктоп ≥768 не тронут.
 * ---------------------------------------------------------------------- */
@media (max-width: 767.98px) {
	.home .terem-h2 {
		margin: 30px 0 14px;
	}

	.home .entry-content br:has(+ video.terem-video),
	.home .entry-content video.terem-video + br {
		display: none;
	}
}

/* ===========================================================================
 * 1.4.58. Мобильные фильтры каталога как на Ozon: липкая полоса-чипсы над
 * сеткой + фуллскрин-панель. Фидбек: «фильтр в самом низу — неудобно»
 * (сайдбар <768 уезжал под сетку order'ом 1.4.0-эпохи, ~2400px листать).
 * Панель — НЕ копия виджетов: тот же #secondary.widget-area-2 (обвязку
 * head/foot печатает PHP в storefront_before_content), на мобильном
 * превращается в оверлей; на десктопе остаётся левой колонкой, полоса и
 * обвязка скрыты. Поведение — assets/js/terem-mobile-filters.js:
 * мульти-выбор в панели без перезагрузок, «Показать» применяет разом.
 * Без JS панель мертва — noscript-стиль из PHP возвращает сайдбар в поток.
 * ---------------------------------------------------------------------- */

	/* --- Полоса над сеткой (только <768) -----------------------------------
	 * position:sticky здесь НЕ работает: легаси .site{overflow-x:hidden}
	 * делает обёртку страницы скроллпортом, к которому липнет sticky, а
	 * сама она не скроллится. Липкое состояние даёт JS (класс --stuck →
	 * position:fixed + паддинг-компенсация родителю). */
@media (min-width: 768px) {
	.terem-mfilters,
	.terem-mfilters__head,
	.terem-mfilters__foot {
		display: none !important;
	}

	/* «Сбросить фильтры» над виджетами сайдбара (1.4.63): панель на
	 * десктопе не открывается, футер с «Сбросить» скрыт — а мультисписки
	 * накапливают клики, сброс нужен на виду. На всю колонку (легаси
	 * button{width:100%}) — как виджеты под ним. */
	.terem-mfilters__reset--top {
		margin: 0 0 18px;
		height: 40px;
		padding: 0 16px;
		border: 1.5px solid var(--terem-line, #e2e2e2);
		border-radius: 10px;
		background: #fff;
		color: var(--terem-ink, #2c2d33);
		font-size: 14px;
		font-weight: 600;
	}
}

@media (max-width: 767.98px) {
	.terem-mfilters {
		position: sticky;
		top: 0;
		z-index: 500;
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 8px 12px;
		background: #fff;
		box-shadow: 0 6px 14px rgba(0, 0, 0, .06);
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.terem-mfilters::-webkit-scrollbar {
		display: none;
	}

	/* Липкое состояние (ставит JS, см. докблок выше): fixed к верху окна,
	 * место в потоке компенсирует паддинг родителя (div.woocommerce). */
	.terem-mfilters--stuck {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
	}

	/* Кнопка «Фильтры»: тёмная пилюля с иконкой слайдеров и бейджем
	 * активных фильтров (бейдж дорисовывает JS, в HTML его нет — кеш).
	 * width:auto сбивает легаси button{width:100%}: иначе кнопка жрёт всю
	 * строку, а чипсы уходят за край прокрутки. */
	.terem-mfilters__btn {
		flex: 0 0 auto;
		width: auto;
		display: inline-flex;
		align-items: center;
		gap: 7px;
		height: 36px;
		padding: 0 14px;
		border: 0;
		border-radius: 18px;
		background: var(--terem-ink, #2c2d33);
		color: #fff;
		font-size: 13.5px;
		font-weight: 600;
		-webkit-tap-highlight-color: rgba(237, 50, 55, .12);
	}

	.terem-mfilters__count {
		min-width: 17px;
		height: 17px;
		padding: 0 4px;
		background: var(--terem-red);
		border-radius: 9px;
		color: #fff;
		font-size: 11px;
		font-weight: 600;
		line-height: 17px;
		text-align: center;
	}

	/* Чипсы-разделы: тап открывает панель на своём фасете. */
	.terem-mfilters__chip {
		flex: 0 0 auto;
		width: auto; /* легаси button{width:100%} — см. __btn выше */
		height: 36px;
		padding: 0 14px;
		border: 0;
		border-radius: 18px;
		background: #f3f3f3;
		color: var(--terem-ink, #2c2d33);
		font-size: 13.5px;
		font-weight: 500;
		-webkit-tap-highlight-color: rgba(237, 50, 55, .12);
	}

	.terem-mfilters__chip.is-chosen {
		background: #fdeeee;
		color: var(--terem-red-dark, #c9272c);
		box-shadow: inset 0 0 0 1.5px var(--terem-red);
		font-weight: 600;
	}

	/* --- Панель: #secondary становится фуллскрин-оверлеем -----------------
	 * display не трогаем (не none) — переход анимируется, а на десктопе
	 * боксовая модель пересчитывается тем же каскадом. */
	#secondary.widget-area-2 {
		position: fixed;
		inset: 0;
		z-index: 99995; /* над таб-панелью (99990) и кнопкой «вверх» */
		display: flex;
		flex-direction: column;
		width: auto;
		float: none;
		margin: 0;
		padding: 0;
		border: 0;
		background: #fff;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		visibility: hidden;
		opacity: 0;
		transform: translateY(16px);
		pointer-events: none;
		transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
	}

	body.terem-mfilters-open #secondary.widget-area-2 {
		visibility: visible;
		opacity: 1;
		transform: none;
		pointer-events: auto;
		transition-delay: 0s;
	}

	body.terem-mfilters-open {
		overflow: hidden;
	}

	/* Кнопка «вверх» (wpfront) рисуется поверх контента инлайном —
	 * в панели ей не место. */
	body.terem-mfilters-open #wpfront-scroll-top-container {
		display: none !important;
	}

	/* Шапка и низ панели — sticky внутри скроллящегося #secondary. */
	.terem-mfilters__head {
		position: sticky;
		top: 0;
		z-index: 2;
		order: -1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 52px;
		padding: 0 6px 0 16px;
		background: #fff;
		border-bottom: 1px solid var(--terem-line, #e2e2e2);
	}

	.terem-mfilters__title {
		font-size: 17px;
		font-weight: 600;
		color: var(--terem-ink, #2c2d33);
	}

	.terem-mfilters__close {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		/* SF-паддинг кнопки (0.618em/1.416em) съедал контент-бокс 44px —
		 * svg-крестик жался в 0px и исчезал. */
		padding: 0;
		border: 0;
		background: none;
		color: var(--terem-ink, #2c2d33);
	}

	.terem-mfilters__foot {
		position: sticky;
		bottom: 0;
		z-index: 2;
		order: 99;
		display: flex;
		gap: 10px;
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
		background: #fff;
		border-top: 1px solid var(--terem-line, #e2e2e2);
	}

	/* «Сбросить» — видим, только пока активен хоть один фильтр (hidden
	 * ставит JS). width:auto сбивает легаси button{width:100%}: иначе при
	 * появлении «Сбросить» соседнее «Показать» (min-width:0) сжимается
	 * в ноль. */
	.terem-mfilters__reset {
		flex: 0 0 auto;
		width: auto;
		height: 48px;
		padding: 0 18px;
		border: 1.5px solid var(--terem-line, #e2e2e2);
		border-radius: 12px;
		background: #fff;
		color: var(--terem-ink, #2c2d33);
		font-size: 15px;
		font-weight: 600;
	}

	/* Десктопный «Сбросить» над виджетами: в мобильной панели не нужен —
	 * там своя кнопка в липком футере. */
	.terem-mfilters__reset--top {
		display: none;
	}

	.terem-mfilters__apply {
		flex: 1 1 auto;
		min-width: 0;
		width: auto;
		height: 48px;
		padding: 0; /* сброс SF-паддинга кнопки: ровная высота 48px, текст по центру */
		border: 0;
		border-radius: 12px;
		background: var(--terem-red);
		color: #fff;
		font-size: 16px;
		font-weight: 600;
	}

	.terem-mfilters__apply:active {
		background: var(--terem-red-dark, #c9272c);
	}

	/* --- Разделы панели ----------------------------------------------------
	 * Разделитель — сами заголовки (бездушным линиям тут не место, как и
	 * у Ozon); легаси .8em-кегль колонки поднят до читаемого. */
	#secondary.widget-area-2 .widget-2 {
		width: auto;
		float: none;
		margin: 0;
		padding: 18px 16px 6px;
		font-size: 15px;
	}

	#secondary.widget-area-2 .widget-2 .widget-title-2 {
		display: block;
		padding: 0;
		margin: 0 0 12px;
		background: none;
		border: 0;
		border-radius: 0;
		color: var(--terem-ink, #2c2d33);
		font-size: 15px;
		font-weight: 700;
		line-height: 1.3;
	}

	/* scroll-margin: чипс полосы открывает панель скроллом к разделу,
	 * sticky-шапка (52px) не должна накрывать заголовок. */
	#secondary.widget-area-2 .widget-2 {
		scroll-margin-top: 60px;
	}

	/* --- Цена: слайдер (ванильный, тач-драг) + два инпута ------------------
	 * Woo-связка jquery-ui + wc-price-slider снята (assets.php 1.4.62):
	 * инпуты больше никто не прячет инлайном, слайдер виден и тащится
	 * пальцем (Pointer Events). Лейбл «Цена: X — Y» и кнопку «Применить»
	 * не печатаем — применяет «Показать», ввод руками живёт в инпутах. */
	#secondary .widget_price_filter .price_label,
	#secondary .widget_price_filter .price_slider_amount .button,
	#secondary .widget_price_filter .price_slider_amount .clear {
		display: none;
	}

	#secondary .widget_price_filter .price_slider {
		margin: 24px 0 18px;
	}

	/* Тач-мишень ручки: видимая 1em, вокруг неё прозрачная зона до 44px
	 * (псевдоэлемент ловит pointer-события исходного элемента). */
	#secondary .widget_price_filter .ui-slider .ui-slider-handle {
		touch-action: none;
	}

	#secondary .widget_price_filter .ui-slider .ui-slider-handle::before {
		content: "";
		position: absolute;
		inset: -13px;
	}

	#secondary .widget_price_filter .price_slider_amount {
		display: flex;
		gap: 10px;
	}

	#secondary .widget_price_filter .price_slider_amount input[type="text"] {
		flex: 1 1 0;
		min-width: 0;
		height: 46px;
		padding: 0 12px;
		border: 1px solid var(--terem-line, #e2e2e2);
		border-radius: 10px;
		background: #fff;
		color: var(--terem-ink, #2c2d33);
		font-size: 16px; /* <16px — iOS зумит фокусом */
		text-align: left;
	}

	/* --- Фасеты-списки (Цвет): чипсы со свотчем, как у Ozon --------------- */
	#secondary .widget_layered_nav .woocommerce-widget-layered-nav-list {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		margin: 0;
		padding: 0;
	}

	#secondary .widget_layered_nav .woocommerce-widget-layered-nav-list__item {
		float: none;
		width: auto;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	/* Легаси-«чекбоксы» FontAwesome в чипсах лишние. */
	#secondary .widget_layered_nav .woocommerce-widget-layered-nav-list__item:before {
		content: none;
	}

	#secondary .widget_layered_nav .woocommerce-widget-layered-nav-list__item a {
		display: inline-flex;
		align-items: center;
		gap: 7px;
		padding: 8px 13px;
		background: #f3f3f3;
		border: 1.5px solid transparent;
		border-radius: 20px;
		color: var(--terem-ink, #2c2d33);
		font-size: 13.5px;
		line-height: 1.25;
		text-decoration: none;
	}

	#secondary .widget_layered_nav .woocommerce-widget-layered-nav-list__item.chosen a {
		background: #fdeeee;
		border-color: var(--terem-red);
		color: var(--terem-red-dark, #c9272c);
		font-weight: 600;
	}

	#secondary .widget_layered_nav .terem-swatch {
		flex: 0 0 auto;
		width: 16px;
		height: 16px;
		margin-right: 0;
		vertical-align: top;
	}

	#secondary .widget_layered_nav .woocommerce-widget-layered-nav-list__item .count {
		display: none;
	}

	/* Длинный список (Цвет, 40 пунктов): обрезка + «Показать все» (JS). */
	#secondary .terem-mfilters__clamp {
		max-height: 172px;
		overflow: hidden;
	}

	#secondary .terem-mfilters__clamp--open {
		max-height: none;
	}

	.terem-mfilters__more {
		margin-top: 10px;
		padding: 0;
		border: 0;
		background: none;
		color: var(--terem-red-dark, #c9272c);
		font-size: 14px;
		font-weight: 600;
	}

	/* --- Фасеты-дропдауны: нативный селект вместо select2 ------------------ */
	#secondary .widget_layered_nav .select2 {
		display: none;
	}

	#secondary select.select2-hidden-accessible {
		display: block !important;
		position: static !important;
		width: 100% !important;
		height: 46px !important;
		margin: 0 0 10px;
		padding: 0 38px 0 14px;
		border: 1px solid var(--terem-line, #e2e2e2) !important;
		border-radius: 10px;
		clip: auto !important;
		clip-path: none !important;
		-webkit-clip-path: none !important;
		overflow: visible !important;
		background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235a5a5a' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center;
		color: var(--terem-ink, #2c2d33);
		font-size: 16px; /* <16px — iOS зумит фокусом */
		appearance: none;
		-webkit-appearance: none;
	}
}

/* ===========================================================================
 * 1.4.62. Слайдер цены без jquery-ui: Woo-хэндл wc-price-slider снят
 * (assets.php), поведение — ванильный terem-price-slider.js на Pointer
 * Events (мышь+тач). Woo-скрипт заодно прятал min/max инпуты инлайном —
 * на десктопе возвращаем тот же вид явно (слайдер + «Применить»), в
 * мобильной панели фильтров инпуты видимы (см. блок 1.4.58 выше).
 * ---------------------------------------------------------------------- */
@media (min-width: 768px) {
	.widget_price_filter .price_slider_amount input[type="text"] {
		display: none;
	}

	/* Подпись «Цена: X — Y ₽» на десктопе (1.4.69, фидбек «не отображается
	 * цена на слайдере»): Woo-шаблон прячет её инлайном и печатает пустой —
	 * terem-price-slider.js 1.0.1 снимает инлайн и заполняет .from/.to.
	 * Колонкой: подпись над кнопкой «Применить» (в потоке она после кнопки).
	 * В мобильной панели подпись по-прежнему скрыта (блок 1.4.58 <768). */
	.widget_price_filter .price_slider_amount {
		display: flex;
		flex-direction: column;
	}

	.widget_price_filter .price_label {
		display: block;
		order: -1;
		margin: 0 0 8px;
		color: var(--terem-ink, #2c2d33);
		font-size: 14px;
	}
}

/* ----------------------------------------------------------------------
 * 1.4.71. SEO-блоки (ТЗ заказчика 2026-10-12): перелинковка хабов
 * (.terem-seo-links под описанием категории) и популярные категории
 * на 404 (.terem-404-cats). Инлайн-списки ссылок, красный ховер меню.
 * ---------------------------------------------------------------------- */
.terem-seo-links,
.terem-404-cats p {
	margin: 12px 0 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--terem-muted, #6b6c75);
}

.terem-seo-links a,
.terem-404-cats p a {
	color: var(--terem-ink, #2c2d33);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.terem-seo-links a:hover,
.terem-404-cats p a:hover {
	color: var(--terem-red, #ed3237);
}

/* Строка «Смотрите также» с селектом сортировки коллекций (1.4.77, фидбек
 * 2026-10-13): на десктопе ссылки слева, селект справа; на <768 селект
 * уезжает на свою строку во всю ширину (медиазапрос в блоке сортировки
 * 1.4.21). Вне flex-контейнера блок выглядит как прежде. */
.terem-seo-links--sort {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 8px;
	row-gap: 12px;
}

.error404 .terem-404-home {
	margin-top: 20px;
}

.error404 .terem-404-home .button {
	display: inline-block;
	width: auto;
}

/* ----------------------------------------------------------------------
 * 1.4.73. Новости (страницы /novosti/*): единая читательская колонка.
 *
 * Легаси-вёрстка старых новостей (флоат-колонки 49%/43% с картинками
 * 400px, герои 794px/100%, подписи-обтекания) проектировалась под
 * контент ~800px; в wide-1440 колонка ~1356px — двухколоночные блоки
 * расходились (двухсотпиксельные дыры между колонками), герои прижаты
 * влево, строки текста по 120 знаков. Контент перестроен zz-скриптом
 * (дата → герой 780px по центру → текст → сетки фото terem-gallery);
 * колонка — на всю ширину контейнера (фидбек юзера «по всей ширине»).
 * Листинг /novosti/ (стр. 124 — не ребёнок) и мобильная версия (≤767)
 * не затронуты.
 * ---------------------------------------------------------------------- */

/* Легаси-герои подтягивались к старой шапке инлайн- margin-top:-20px —
 * при дате над героем (авто-дата inc/news.php) наезжали на неё.
 * Положительные инлайн-отступы (зазоры между картинками) не трогаем. */
.terem-news .entry-content img[style*="margin-top: -"],
.terem-news .entry-content img[style*="margin-top:-"] {
	margin-top: 0 !important;
}

/* У части старых новостей обёртка колонок — флоат без clear, контент
 * после неё заканчивается: футер мог заплывать под фото. */
.terem-news .entry-content::after {
	content: "";
	display: block;
	clear: both;
}

/* ----------------------------------------------------------------------
 * 1.4.74. Новости: поток переформатированного контента (zz-news-fmt-1013).
 *
 * Старые новости перестроены в шаблон новой (35939): дата → герой в
 * div.terem-hero → текст → подряд идущие фото в div.terem-gallery.
 * Картинки в потоке — блоком по центру (флоаты-обтекания ушли вместе
 * с легаси-разметкой); ссылки-миниатюры растягиваются на картинку.
 * Продуктовой сетке (product_categories внутри .terem-news) блочно-
 * центрирование не видно: тайлы уже выводят фото на всю ширину.
 * ---------------------------------------------------------------------- */
.terem-news .entry-content img {
	display: block;
	float: none;
	margin: 20px auto;
	max-width: 100%;
	height: auto;
}

.terem-news .entry-content a:has(> img) {
	display: block;
}

.terem-news .terem-hero {
	margin: 14px 0 24px;
}

.terem-news .terem-hero img {
	width: auto;
	max-width: 780px;
	margin: 0 auto;
}

.terem-news .terem-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 14px;
	margin: 20px 0;
}

.terem-news .terem-gallery p {
	margin: 0;
}

.terem-news .terem-gallery img {
	width: 100%;
	height: auto;
	margin: 0;
}

/* wpautop оборачивает содержимое div-сеток в <p> — сбрасываем отступ,
 * чтобы сетка оставалась ровной. */
.terem-news .terem-gallery p img {
	margin: 0 auto;
}

.terem-news .woocommerce ul.products img {
	margin: 0;
}

/* Ровные тайлы сетки (кадрирование только в миниатюре — лайтбокс
 * показывает полный кадр). */
.terem-news .terem-gallery img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* =========================================================================
 * Отзывы покупателей с Яндекс Карт — страница «О компании» (inc/reviews.php).
 * Данные — статичный снимок 15.10.2026 (qa/reviews-yandex-1015/), рендер
 * сервером, без JS. Карточки — визуальный язык плиток коллекций: белый фон,
 * рамка --terem-line, радиус --terem-radius. Звёзды — двухслойные
 * inline-SVG: серый ряд + красный, обрезанный до доли рейтинга
 * (--terem-fill, ставится инлайном из PHP).
 * ======================================================================= */
.terem-reviews {
	margin: 0 0 56px;
}

/* Шапка блока: балл сети + звёзды + счётчик оценок, справа — ссылки
 * на карточки организаций. */
.terem-reviews__head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 18px;
	margin: -0.6em 0 20px;
}

.terem-reviews__score {
	font-size: 40px;
	font-weight: 700;
	line-height: 1;
	color: var(--terem-ink);
}

.terem-reviews__scoremeta {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.terem-reviews__count {
	font-size: 13px;
	color: var(--terem-muted);
}

.terem-reviews__orgs {
	margin-left: auto;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
}

.terem-reviews__orgs a {
	/* red-dark, как terem-h2__all: у #ed3237 контраст 4.1 < AA 4.5 */
	color: var(--terem-red-dark);
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
}

.terem-reviews__orgs a:hover {
	color: var(--terem-ink);
	text-decoration: underline;
}

/* Сетка карточек: 3 в ряд ≥1024, 2 на планшете, 1 на мобильном. */
.terem-reviews__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.terem-reviews__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.terem-reviews__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.terem-review {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--terem-line);
	border-radius: var(--terem-radius);
	padding: 16px;
}

.terem-review__head {
	display: flex;
	align-items: center;
	gap: 10px;
}

.terem-review__ava {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #fdeeef;
	color: var(--terem-red-dark, #c9272c);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
}

.terem-review__who {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.terem-review__name {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--terem-ink);
	/* длинные ники (shevchenko.olgavl) не распирают заголовок карточки */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.terem-review__date {
	font-size: 12px;
	color: var(--terem-muted);
}

.terem-review__head .terem-stars {
	margin-left: auto;
	flex: 0 0 auto;
}

.terem-review__text {
	margin: 10px 0 12px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--terem-text);
	/* без JS: длинные отзывы обрезаются на 8-й строке (полный текст —
	 * по ссылке карточки/шапки на Яндекс Картах) */
	display: -webkit-box;
	-webkit-line-clamp: 8;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.terem-review__foot {
	margin-top: auto;
}

.terem-review__store {
	font-size: 12px;
	font-weight: 500;
	color: var(--terem-red-dark);
	text-decoration: none;
}

.terem-review__store:hover {
	text-decoration: underline;
}

/* Звёзды: нижний ряд серый, верхний красный с обрезкой по --terem-fill.
 * SVG не сжимаются (flex:0 0 auto) — ряд фиксированной ширины, контейнер
 * красного ряда клипает лишнее. */
.terem-stars {
	position: relative;
	display: inline-flex;
	line-height: 0;
}

.terem-stars svg {
	width: 14px;
	height: 14px;
	flex: 0 0 auto;
}

.terem-stars__row {
	display: inline-flex;
	gap: 2px;
}

.terem-stars__row--bg {
	color: #dcdcdc;
}

.terem-stars__row--fg {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: var(--terem-fill, 100%);
	overflow: hidden;
	color: var(--terem-red);
}

.terem-reviews__scoremeta .terem-stars svg {
	width: 16px;
	height: 16px;
}

@media (max-width: 767.98px) {
	.terem-reviews {
		margin-bottom: 40px;
	}

	/* Кегль мобильных заголовков секций — как у terem-colls/terem-viewed. */
	.terem-reviews .terem-h2 {
		font-size: 22px;
	}

	/* «Все отзывы на Яндекс Картах →» не влезает в строку с заголовком —
	 * хвост прячется, остаётся «Все отзывы →» (обе точки и так в шапке
	 * блока и в каждой карточке). */
	.terem-reviews__all-extra {
		display: none;
	}

	.terem-reviews__score {
		font-size: 32px;
	}

	.terem-reviews__orgs {
		margin-left: 0;
	}
}