/* ============================================================
   IMGOTOP — общие правки стилей
   ОДИНАКОВЫЙ файл для eskdv.ru, tor.spb.ru, tor-prof.ru
   Подключается модификатором imgotop_custom.ocmod.xml
   Фирменные цвета конкретного сайта — в соседнем site.css
   ============================================================ */


/* ------------------------------------------------------------
   GoFilter: списки значений фильтра

   Плагин jquery.scrollbar делает контейнер .scroll-content шире
   видимой области и сдвигает его отрицательным отступом — так он
   прячет системную полосу прокрутки за краем. Побочный эффект:
   счётчик .filter_total, привязанный к label через right:0,
   уезжает за правую границу, а горизонтальная полоса съедает
   высоту снизу и обрезает значения на середине строки.

   Возвращаем контейнеру ширину по месту, системную полосу прячем
   напрямую, горизонтальную убираем совсем. Собственная вертикальная
   полоса плагина (.scroll-element.scroll-y) продолжает работать.
   ------------------------------------------------------------ */

.scroll-wrapper > .scroll-content {
	width: 100% !important;
	margin-right: 0 !important;
	margin-bottom: 0 !important;
	padding-right: 0 !important;
	overflow-x: hidden !important;
	scrollbar-width: none;        /* Firefox */
	-ms-overflow-style: none;     /* старый Edge */
}

.scroll-wrapper > .scroll-content::-webkit-scrollbar {
	width: 0;
	height: 0;
}

.scroll-element.scroll-x {
	display: none !important;
}

/* место под счётчик, чтобы длинные подписи не залезали под него */
.filter .checkbox-group .checkbox label,
.filter .checkbox-group .radio label {
	padding-right: 44px !important;
}

/* ------------------------------------------------------------
   Счётчики, обрезанные справа в боковой колонке

   Модуль сдвигает список фильтра на 12px вправо:
       #option_filter .checkbox-group-overflow.row-group-right
           { margin-right: -12px }
   Так его собственная полоса прокрутки садится в отступ панели.
   Полосу мы убрали выше — сдвиг остался, и список стал шире
   своей колонки: обёртка 286px против 274px у .column_filt.
   Счётчик .filter_total прибит к правому краю строки
   (position:absolute; right:0), уезжает вместе с ней за границу
   и обрезается по живому.

   Правило выше обнуляло отступ у вложенного .scroll-content,
   а минус висит на ОБЁРТКЕ .scroll-wrapper — до неё не доставало.
   Трогаем только боковые колонки: в горизонтальном фильтре
   над каталогом сдвиг работает как задумано.
   ------------------------------------------------------------ */

#column-left #option_filter .row-group-right,
#column-right #option_filter .row-group-right {
	margin-right: 0 !important;
}

/* ------------------------------------------------------------
   Полоса прокрутки поверх счётчика

   В длинных списках (категории, значения свойств) плагин рисует
   свою полосу .scroll-element.scroll-y шириной 12px у правого
   края блока. Счётчик .filter_total прибит туда же (right:0),
   и полоса ложится поверх него — от «89» видно только «8».
   Замерено: счётчик 365–388, полоса 376–388.

   Ничего не обрезается, это именно перекрытие. Отодвигаем
   счётчик левее полосы и добавляем подписи места под него.

   Привязка не к самому блоку, а к классу scroll-scrolly_visible:
   плагин вешает его на контейнер ровно тогда, когда вертикальная
   полоса показана. Список короткий и полосы нет — сдвиг не
   применяется, счётчик стоит у края как обычно. Список вырос,
   полоса появилась — граница счётчика сразу её учитывает.

   12px — ширина полосы у плагина, 4px — зазор.
   ------------------------------------------------------------ */

.scroll-content.scroll-scrolly_visible .filter_total {
	right: 16px !important;
}

.scroll-content.scroll-scrolly_visible .checkbox label,
.scroll-content.scroll-scrolly_visible .radio label {
	padding-right: 60px !important;
}

/* ------------------------------------------------------------
   Плитки товаров одной высоты

   Сетка темы — float-колонки Bootstrap. Плитка с галереей
   получает ряд точек, с большим числом характеристик — лишние
   строки; высота у всех разная, и float-раскладка сваливает
   следующий ряд под самую высокую плитку — кнопки «Купить»
   влипают в соседей.

   Ряд переводим на flex: плитки вытягиваются до самой высокой,
   а .caption сам становится колонкой и прижимает блок с ценой
   и кнопкой к низу. Только для режима плитки: в списке плитка
   лежит горизонтально, её не трогаем.
   ------------------------------------------------------------ */

.list-product > div {
	display: flex;
	flex-wrap: wrap;
}

.list-product > div::before,
.list-product > div::after {
	display: none;   /* clearfix-псевдоэлементы Bootstrap ломают flex-перенос */
}

.list-product .product-layout:not(.product-list):not(.product-price) {
	display: flex;
	margin-bottom: 30px;   /* воздух между рядами: во flex-сетке зазор задаём сами */
}

.list-product .product-layout:not(.product-list):not(.product-price) .product-thumb {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.list-product .product-layout:not(.product-list):not(.product-price) .product-thumb .caption {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.list-product .product-layout:not(.product-list):not(.product-price) .product-thumb .caption .price-button {
	margin-top: auto;
}


/* ------------------------------------------------------------
   Исполнения серии в карточке

   Разметку добавляет модификатор system/imgotop_variants.ocmod.xml.
   Каждый ряд — характеристика, которая внутри серии различается;
   плашки ведут на соседние товары, текущее значение подсвечено.

   Цвет подсветки берётся из site.css через переменную, чтобы
   на разных сайтах он совпадал с фирменным. Если переменная
   не задана — используется нейтральный синий.
   ------------------------------------------------------------ */

.imgotop-variants {
	margin: 0 0 16px;
}

.iv-row {
	background: #f3f6f9;
	border-radius: 6px;
	padding: 10px 14px;
	margin-bottom: 8px;
}

.iv-name {
	font-size: 12px;
	color: #8a9199;
	margin-bottom: 8px;
}

.iv-vals {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.iv-chip {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 4px;
	background: #fff;
	border: 1px solid #dfe4e8;
	font-size: 13px;
	line-height: 1.3;
	color: #55606f;
	text-decoration: none;
	transition: border-color .15s ease, color .15s ease;
	white-space: nowrap;
}

a.iv-chip:hover {
	border-color: var(--imgotop-accent, #0f8ec5);
	color: var(--imgotop-accent, #0f8ec5);
	text-decoration: none;
}

.iv-chip--on {
	background: var(--imgotop-accent, #0f8ec5);
	border-color: var(--imgotop-accent, #0f8ec5);
	color: #fff;
	cursor: default;
}

/* значение, которого у текущего товара нет и уйти некуда */
.iv-chip--off {
	opacity: .45;
	cursor: default;
}


/* ------------------------------------------------------------
   Характеристики на плитке товара

   Разметку добавляет модификатор system/imgotop_attrs.ocmod.xml
   в список категории, перед ценой. Вид — как на eme54: название
   слева приглушённым, значение справа, тонкие разделители.

   Блок появляется только у товаров, у которых характеристики
   есть; на остальных плитках ничего не меняется.
   ------------------------------------------------------------ */

.imgotop-attrs {
	margin: 10px 0;
	font-size: 12px;
	line-height: 1.35;
}

.imgotop-attr {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	padding: 5px 0;
	border-bottom: 1px solid #eceff1;
}

.imgotop-attr:first-child {
	border-top: 1px solid #eceff1;
}

.imgotop-attr .ia-name {
	color: #8a9199;
	flex: 0 1 auto;
	overflow-wrap: anywhere;
}

.imgotop-attr .ia-val {
	color: #55606f;
	text-align: right;
	flex: 0 0 auto;
	max-width: 55%;
	overflow-wrap: anywhere;
}

/* в режиме списка плитка шире — характеристики в две колонки */
.product-list .imgotop-attrs {
	column-count: 2;
	column-gap: 24px;
}

.product-list .imgotop-attr {
	break-inside: avoid;
}

@media (max-width: 767px) {
	.product-list .imgotop-attrs {
		column-count: 1;
	}
}

/* длинные значения переносить по словам, а не распирать блок */
.scroll-content li,
.scroll-content label,
.scroll-content a {
	overflow-wrap: anywhere;
	word-break: break-word;
}


/* ------------------------------------------------------------
   H1 на главной — ставится модулем «HTML-контент» на макет
   главной, в шаблоне Unity Store своего H1 нет. Размер скромный:
   это заголовок для поисковика, а не баннер.
   ------------------------------------------------------------ */

.imgotop-h1 {
	font-size: 22px;
	font-weight: 600;
	line-height: 1.3;
	margin: 0 0 18px;
	color: #27303e;
}


/* ------------------------------------------------------------
   Мобильные: минимальный размер текста

   Яндекс.Вебмастер помечал страницы «слишком мелкий текст»: тема
   задаёт 10–11px подвалу (.footer-niz, .bottom-footer-text),
   верхней полосе шапки (#top, .header_top), обратному звонку,
   ссылкам подвала и описанию под названием плитки. Порог
   поисковиков — 12px. На телефонах поднимаем до 13px, десктоп
   не трогаем.
   ------------------------------------------------------------ */

@media (max-width: 767px) {
	#top,
	.header_top,
	#welcome,
	#welcome .dropdown-enter span,
	#welcome .register a,
	.callback-header,
	.footer-niz,
	.bottom-footer-text,
	.links > ul > li > a,
	.caption h4 + p,
	.caption h4 + span + p,
	.button-group span.description,
	#content .news .owl-item > div .descrip,
	.btn-sm,
	.btn-group > .btn-sm,
	h6,
	.imgotop-attrs,
	.imgotop-attr {
		font-size: 13px !important;
		line-height: 1.4 !important;
	}

	span.append,
	label span.append {
		font-size: 12px !important;
	}
}