/* Оформление sanway-opt.ru поверх стандартной темы OpenCart 4.
 *
 * Старая тема storeset — это полмегабайта правил под Bootstrap 3, и её классы
 * (col-sm-*, pull-right, panel) в Bootstrap 5 не значат ничего. Поэтому не
 * переносим её, а собираем заново по снятым с боевого сайта величинам:
 * шрифт, размеры, цвета и раскладка шапки с подвалом взяты замером, а не на глаз.
 *
 * Всё своё помечено приставкой ilean-, чтобы при обновлении движка было видно,
 * что здесь наше. Правки в самих шаблонах помечены комментарием ilean-.
 */

/* --------------------------------------------------------------- шрифт */

@font-face {
	font-family: 'Roboto Condensed';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url(fonts/roboto-condensed-300.woff2) format('woff2'),
	     url(fonts/roboto-condensed-300.woff) format('woff');
}

@font-face {
	font-family: 'Roboto Condensed';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(fonts/roboto-condensed-regular.woff2) format('woff2'),
	     url(fonts/roboto-condensed-regular.woff) format('woff');
}

@font-face {
	font-family: 'Roboto Condensed';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(fonts/roboto-condensed-700.woff2) format('woff2'),
	     url(fonts/roboto-condensed-700.woff) format('woff');
}

/* --------------------------------------------------------------- основа */

:root {
	--ilean-red: #e71614;
	--ilean-red-dark: #c2110f;
	--ilean-ink: #252525;
	--ilean-title: #232323;
	--ilean-muted: #a0a0a0;
	--ilean-line: #dedede;
	--ilean-field: #eeeeee;
	--ilean-footer-top: #141414;
	--ilean-footer-mid: #2b2a29;
	--ilean-footer-bottom: #1d1d1c;
	--ilean-footer-text: #ebecec;
	--ilean-shell: 1300px;
}

body {
	font-family: 'Roboto Condensed', 'Arial Narrow', Arial, sans-serif;
	font-size: 13px;
	line-height: 18px;
	color: var(--ilean-ink);
	background: #fff;
}

/* Ширина полосы у старого сайта — 1300 px. Bootstrap 5 останавливается на
   1320 px только на самых широких экранах, поэтому задаём явно. */
.container,
.container-fluid {
	max-width: var(--ilean-shell);
}

a {
	color: var(--ilean-ink);
	text-decoration: none;
}

a:hover,
a:focus-visible {
	color: var(--ilean-red);
	text-decoration: none;
}

h1, h2, h3, h4, h5 {
	color: var(--ilean-title);
	font-weight: 600;
	line-height: 1.2;
}

h1 { font-size: 26px; margin-bottom: 18px; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }

.btn-primary {
	--bs-btn-bg: var(--ilean-red);
	--bs-btn-border-color: var(--ilean-red);
	--bs-btn-hover-bg: var(--ilean-red-dark);
	--bs-btn-hover-border-color: var(--ilean-red-dark);
	--bs-btn-active-bg: var(--ilean-red-dark);
	--bs-btn-active-border-color: var(--ilean-red-dark);
	--bs-btn-disabled-bg: var(--ilean-red);
	--bs-btn-disabled-border-color: var(--ilean-red);
	border-radius: 2px;
	font-weight: 700;
	text-transform: uppercase;
}

.form-control:focus,
.form-select:focus {
	border-color: var(--ilean-red);
	box-shadow: none;
}

/* ---------------------------------------------------------------- шапка */
/* Три зоны: логотип, поиск, контакты с корзиной. Пропорции взяты с боевого
   сайта — 325 / 488 / 470 при полосе в 1300 px. */

.ilean-topline {
	display: none;
}

.ilean-header {
	padding: 14px 0 12px;
	background: #fff;
	/* Разделительной линии под шапкой нет: на боевом сайте её тоже нет,
	   а на широком экране она читается как лишняя полоса над баннером. */
}

.ilean-header__row {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr) auto;
	align-items: center;
	gap: 26px;
}

.ilean-header__logo img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
}

/* Штатный блок поиска — группа из поля и кнопки (input-group). Перекрашиваем
   под старый вид: серое поле без скруглений, красная кнопка с лупой. */
.ilean-header__search .input-group {
	margin-bottom: 0 !important;
}

.ilean-header__search .form-control {
	height: 44px;
	padding: 0 14px;
	border: 1px solid var(--ilean-line);
	border-right: 0;
	border-radius: 2px 0 0 2px;
	background: var(--ilean-field);
	color: #2c3e50;
	font-size: 14px;
}

.ilean-header__search .form-control::placeholder {
	color: #8a8a8a;
}

.ilean-header__search .btn {
	width: 54px;
	padding: 0;
	border: 0;
	border-radius: 0 2px 2px 0;
	background: var(--ilean-red);
	color: #fff;
	font-size: 16px;
}

.ilean-header__search .btn:hover {
	background: var(--ilean-red-dark);
	color: #fff;
}

.ilean-header__aside {
	display: flex;
	align-items: center;
	gap: 22px;
}

.ilean-contacts-head {
	display: grid;
	grid-template-columns: auto auto;
	gap: 4px 22px;
	font-size: 14px;
	white-space: nowrap;
}

.ilean-contacts-head a {
	font-weight: 700;
}

.ilean-contacts-head__hint {
	color: var(--ilean-muted);
	font-size: 13px;
}

.ilean-contacts-head__link {
	color: var(--ilean-red);
	border-bottom: 1px dashed currentColor;
	font-weight: 400 !important;
	font-size: 13px;
}

.ilean-contacts-head__link:hover {
	border-bottom-color: transparent;
}

/* Корзина: штатная кнопка выпадающего списка. Из чёрной широкой делаем
   светлую и узкую, сумму выделяем красным. */
.ilean-header__cart .dropdown {
	display: block !important;
}

.ilean-header__cart .dropdown-toggle {
	padding: 0 16px;
	height: 44px;
	border: 1px solid var(--ilean-line);
	border-radius: 2px;
	background: #fff;
	color: var(--ilean-ink);
	font-size: 14px;
	font-weight: 400;
	white-space: nowrap;
}

.ilean-header__cart .dropdown-toggle i {
	margin-right: 7px;
	color: var(--ilean-red);
}

.ilean-header__cart .dropdown-toggle:hover,
.ilean-header__cart .dropdown-toggle:focus-visible,
.ilean-header__cart .dropdown-toggle.show {
	border-color: var(--ilean-red);
	background: #fff;
	color: var(--ilean-ink);
}

/* ----------------------------------------------------------------- меню */
/* На боевом сайте горизонтального меню нет вовсе: разделы живут в боковой
   колонке. Оставляем полосу только на узких экранах — там она работает как
   кнопка «Категории», которая на старом сайте и была. */

@media (min-width: 992px) {
	main > .container > #menu,
	#menu {
		display: none;
	}
}

@media (max-width: 991.98px) {
	#menu.navbar {
		margin-bottom: 14px;
		padding: 8px 12px;
		background: var(--ilean-ink) !important;
		border-radius: 2px;
	}

	#menu #category {
		color: #fff;
		font-size: 15px;
		font-weight: 700;
		text-transform: uppercase;
	}

	#menu .navbar-toggler {
		border-color: rgba(255, 255, 255, .4);
		color: #fff;
	}

	#menu .nav-link,
	#menu .dropdown-item {
		color: #fff;
	}
}

/* -------------------------------------------------- боковой список разделов */

#column-left .list-group {
	border: 1px solid var(--ilean-line);
	border-radius: 2px;
	overflow: hidden;
}

#column-left .list-group-item {
	padding: 11px 14px;
	border: 0;
	border-bottom: 1px solid var(--ilean-line);
	border-radius: 0;
	color: var(--ilean-ink);
	font-size: 14px;
	line-height: 1.3;
}

#column-left .list-group-item:last-child {
	border-bottom: 0;
}

#column-left .list-group-item:hover {
	background: #fafafa;
	color: var(--ilean-red);
}

#column-left .list-group-item.active {
	background: var(--ilean-red);
	border-color: var(--ilean-red);
	color: #fff;
}

/* --------------------------------------------------------------- подвал */
/* Три полосы, как на боевом: тёмная с рассказом и контактами, чуть светлее
   со ссылками, и совсем узкая с правовой строкой. */

/* Стандартная тема прибивает подвал к низу окна: сам подвал стоит
   position: absolute, а под него в колонках зарезервировано 730 px пустоты.
   Приём рассчитан на подвал заданной высоты — наш выше, и он наезжал на
   нижние пункты бокового меню (на «Котлах» под него уходило 140 px списка).
   Возвращаем подвал в обычный поток и убираем резерв. Заодно снимаем с него
   тёмную заливку и рамку: полосы подвала красят себя сами. */
#container {
	position: static;
	margin-bottom: 0;
	/* Правильный прижим подвала: колонка на всю высоту окна, содержимое
	   растягивается, подвал не сжимается. Ни на что не наезжает, в отличие
	   от приёма с абсолютным положением. */
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

#container > main {
	flex: 1 0 auto;
}

#container > footer {
	flex-shrink: 0;
}

#content,
#column-left,
#column-right {
	padding-bottom: 0;
}

footer {
	position: static;
	width: auto;
	margin-top: 46px;
	padding-top: 0;
	border: 0;
	background: none;
	color: var(--ilean-footer-text);
}

footer a {
	color: var(--ilean-footer-text);
}

footer a:hover {
	color: #fff;
}

/* Величины сняты с боевого сайта: заголовок колонки — серый, среднего
   начертания, без разрядки; ссылки мельче и с широким межстрочным. Прежние
   14 px в белом и вразрядку выглядели тяжело и тесно. */
.ilean-foot__title {
	margin: 0 0 12px;
	color: #6c6c6c;
	font-size: 13px;
	font-weight: 500;
	line-height: 24px;
	text-transform: uppercase;
}

.ilean-foot-top {
	padding: 34px 0 30px;
	background: var(--ilean-footer-top);
}

.ilean-foot-top__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: 40px;
}

.ilean-foot-about p {
	margin: 0 0 14px;
	color: #969696;
	font-size: 13px;
	line-height: 18px;
}

.ilean-foot-about p:last-child {
	margin-bottom: 0;
}

.ilean-foot-contacts {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ilean-foot-contacts li {
	display: grid;
	grid-template-columns: 26px minmax(0, 1fr);
	align-items: start;
	margin-bottom: 10px;
	font-size: 13px;
	line-height: 20px;
}

.ilean-foot-contacts i {
	margin-top: 2px;
	color: var(--ilean-muted);
}

.ilean-foot-mid {
	padding: 30px 0 22px;
	background: var(--ilean-footer-mid);
}

.ilean-foot-mid__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px;
}

.ilean-foot-mid ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ilean-foot-mid li {
	margin-bottom: 0;
	font-size: 12px;
	line-height: 25px;
}

/* Метка перед ссылкой — короткая красная черта, как на старом сайте. */
.ilean-foot-mid li a::before {
	content: '';
	display: inline-block;
	width: 7px;
	height: 1px;
	margin-right: 9px;
	vertical-align: middle;
	background: var(--ilean-red);
}

.ilean-foot-bottom {
	padding: 20px 0;
	background: var(--ilean-footer-bottom);
	color: #7d7d7d;
	font-size: 12px;
	line-height: 1.5;
	text-align: right;
}

/* --------------------------------------------------------------- узкие */

@media (max-width: 1199.98px) {
	.ilean-header__row {
		grid-template-columns: 210px minmax(0, 1fr) auto;
		gap: 18px;
	}

	.ilean-contacts-head {
		grid-template-columns: auto;
		gap: 2px;
	}
}

@media (max-width: 991.98px) {
	.ilean-header__row {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 14px 18px;
	}

	.ilean-header__search {
		grid-column: 1 / -1;
		order: 3;
	}

	.ilean-contacts-head {
		font-size: 13px;
	}

	.ilean-foot-top__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	.ilean-foot-mid__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ilean-foot-bottom {
		text-align: left;
	}
}

@media (max-width: 575.98px) {
	.ilean-header__logo img {
		max-height: 44px;
	}

	.ilean-header__aside {
		gap: 12px;
	}

	/* На телефоне в строке помещается только телефон — почта, часы и ссылка
	   для оптовиков уезжают, их видно в подвале. */
	.ilean-contacts-head {
		font-size: 15px;
	}

	.ilean-contacts-head a[href^="mailto"],
	.ilean-contacts-head .ilean-contacts-head__hint,
	.ilean-contacts-head .ilean-contacts-head__link {
		display: none;
	}

	/* Корзина сжимается до значка: подпись «0 товар(ов) — 0,00 ₽» съедает
	   всю строку и выдавливает логотип. Прячем именно подпись — если гасить
	   её размером шрифта, текст остаётся в потоке и растягивает страницу
	   вбок на сотню точек. */
	.ilean-cart-label {
		display: none;
	}

	.ilean-header__cart .dropdown-toggle {
		width: 44px;
		padding: 0;
	}

	.ilean-header__cart .dropdown-toggle::after {
		display: none;
	}

	.ilean-header__cart .dropdown-toggle i {
		margin: 0;
		font-size: 17px;
	}

	.ilean-foot-mid__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 22px;
	}
}

/* ============================================================== каталог */
/* Карточка товара на боевом сайте: белый прямоугольник в тонкой светлой
   рамке, картинка 200 px, название по центру в две строки, цена под ним
   полужирным. Описания в сетке нет — оно только мешает сравнивать. */

#product-category h1,
#product-search h1,
#product-manufacturer-info h1 {
	margin: 0 0 18px;
	font-size: 26px;
	font-weight: 600;
	text-transform: uppercase;
}

/* Стандартная тема рисует крошки коробкой с рамкой во всю ширину и уголками
   у каждого пункта — на пустом месте справа это читается как обрывок полосы.
   На боевом сайте крошки простые: домик, косая черта, название. Гасим и
   рамку, и уголки, и возвращаем обычный разделитель. */
.breadcrumb {
	margin-bottom: 14px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	font-size: 13px;
}

.breadcrumb > li.breadcrumb-item {
	padding: 0;
	text-shadow: none;
	white-space: normal;
}

.breadcrumb > li.breadcrumb-item::after {
	content: none;
	display: none;
}

.breadcrumb > li.breadcrumb-item + li.breadcrumb-item::before {
	content: "/";
	padding: 0 9px;
	color: var(--ilean-muted);
}

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

.breadcrumb-item a:hover {
	color: var(--ilean-red);
}

.breadcrumb-item + .breadcrumb-item::before {
	color: var(--ilean-muted);
}

.breadcrumb-item:last-child a {
	color: var(--ilean-ink);
}

/* --------------------------------------------------- плитки подкатегорий */

.ilean-subcats {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 12px;
	margin: 0 0 26px;
	padding: 0;
	list-style: none;
}

.ilean-subcats__item {
	display: flex;
}

.ilean-subcats__link {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
	padding: 14px 10px 12px;
	border: 1px solid #f0f0f0;
	background: #fff;
	text-align: center;
	/* То же правило, что у плиток на главной: обводка красным, подъём на две
	   точки, мягкая тень. Действует на любом уровне каталога — второй,
	   третий и глубже рисуются этой же плиткой. */
	transition: border-color .18s, box-shadow .18s, transform .18s;
}

.ilean-subcats__link:hover,
.ilean-subcats__link:focus-visible {
	border-color: var(--ilean-red);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .10);
	transform: translateY(-2px);
}

.ilean-subcats__link:hover .ilean-subcats__name,
.ilean-subcats__link:focus-visible .ilean-subcats__name {
	color: var(--ilean-red);
}



.ilean-subcats__img {
	position: relative;
	display: block;
	height: 74px;
	margin-bottom: 10px;
}

/* Та же укладка, что в карточках товаров, и по той же причине. */
.ilean-subcats__img img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.ilean-subcats__name {
	margin-top: auto;
	font-size: 13px;
	line-height: 1.3;
	color: var(--ilean-ink);
	overflow-wrap: break-word;
	hyphens: auto;
}

/* ------------------------------------------------------ карточка товара */

#product-list .col {
	display: flex;
}

/* Карточка повторяет поведение боевого сайта: при наведении мягкая тень по
   всему периметру за 0,4 с, а панель с названием, ценой и кнопкой выезжает
   снизу на 54 точки — до наведения кнопка «в корзину» спрятана под краем.
   Поэтому панель уложена поверх карточки, а высота задана явно: иначе
   карточка сжалась бы до одной картинки. */
.product-thumb {
	position: relative;
	display: block;
	flex: 1;
	min-width: 0;
	/* Высота карточки считается от высоты снимка: панель с названием и ценой
	   занимает около 109 точек, и если карточка короче — панель наползает на
	   картинку. Держим обе величины связанными через переменную. */
	--ilean-img: 106px;
	min-height: calc(var(--ilean-img) + 119px);
	overflow: hidden;
	border: 1px solid #f5f5f5;
	background: #fff;
	text-align: center;
	transition: box-shadow .4s ease;
}

.product-thumb:hover {
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, .15);
}

/* Нижняя панель всегда видна целиком — так на боевом сайте. При наведении
   разворачивается только строка кнопок и надстраивается вверх, поверх
   картинки: карточка не меняет высоту и соседи не прыгают. */

/* Field for the picture is a fixed rectangle, the picture is laid into it
   as a separate layer. Flexbox did not work: percentage heights on an image
   flex item do not resolve, and a square picture stuck out of the field
   by 70px. */
.product-thumb .image {
	position: relative;
	display: block;
	height: var(--ilean-img);
	padding: 10px;
}

.product-thumb .image img {
	position: absolute;
	top: 10px;
	left: 10px;
	width: calc(100% - 20px);
	height: calc(100% - 20px);
	max-width: none;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.product-thumb .content {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 8px 12px 0;
	background: #fafafa;
}

.product-thumb h4 {
	margin: 0 0 6px;
	padding-top: 0;
	font-size: 13px;
	font-weight: 400;
	line-height: 17px;
	/* две строки: дальше название обрезается, полное видно в карточке товара */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.product-thumb h4 a {
	color: var(--ilean-ink);
}

/* Короткое описание в сетке не показываем: у 13 тысяч позиций оно почти
   везде повторяет название и мешает сравнивать цены. */
.product-thumb .description > p {
	display: none;
}

.product-thumb .price {
	padding-left: 4px;
	font-size: 16px;
	font-weight: 700;
	line-height: 28px;
	color: var(--ilean-red);
	border-bottom: 1px solid #e5e5e5;
}

.product-thumb .price-old {
	margin-left: 6px;
	color: var(--ilean-muted);
	font-size: 13px;
	font-weight: 400;
	text-decoration: line-through;
}

/* Цена со скидкой — красным, как на старом сайте. */
.product-thumb .price-new + .price-old,
.product-thumb .price:has(.price-old) .price-new {
	color: var(--ilean-red);
}

.product-thumb .price-tax {
	display: block;
	color: var(--ilean-muted);
	font-size: 12px;
	font-weight: 400;
}

/* Кнопки действий: показываем только «в корзину» и только при наведении.
   Избранное и сравнение убраны — личного кабинета на сайте нет. */
/* Кнопка «в корзину»: тёмная, как на странице товара, и широкая — со значком
   и подписью, как было на боевом сайте. */
.product-thumb .button button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 150px;
	height: 34px;
	padding: 0 18px;
	border: 0;
	border-radius: 2px;
	background: #141414;
	color: #f2f2f2;
	font-size: 13px;
	line-height: 1;
	white-space: nowrap;
	transition: background .2s ease;
}

.product-thumb .button button:hover,
.product-thumb .button button:focus-visible {
	background: var(--ilean-red);
	color: #fff;
}

.ilean-cart-text {
	text-transform: uppercase;
	letter-spacing: .02em;
}

.product-thumb .button button:nth-child(2),
.product-thumb .button button:nth-child(3) {
	display: none;
}

/* ------------------------------------------------- сортировка и показ */

#product-category .form-select,
#product-search .form-select {
	border-radius: 2px;
	font-size: 13px;
}

#product-category .input-group-text,
#product-search .input-group-text {
	border-radius: 2px 0 0 2px;
	background: #fafafa;
	font-size: 13px;
	color: var(--ilean-muted);
}

/* Кнопки «списком/плиткой» и «сравнить» отключены: сравнения на сайте нет,
   а вид списка дублирует плитку. */
#product-category .btn-group:has(#button-list),
#product-search .btn-group:has(#button-list),
#compare-total {
	display: none !important;
}

/* --------------------------------------------------- постраничная навигация */

.pagination {
	--bs-pagination-color: var(--ilean-ink);
	--bs-pagination-active-bg: var(--ilean-red);
	--bs-pagination-active-border-color: var(--ilean-red);
	--bs-pagination-hover-color: var(--ilean-red);
	--bs-pagination-border-radius: 2px;
	font-size: 14px;
}

/* --------------------------------------------------------------- узкие */

@media (max-width: 1199.98px) {
	.ilean-subcats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
	.ilean-subcats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.product-thumb { --ilean-img: 80px; }
}

@media (max-width: 575.98px) {
	.ilean-subcats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.ilean-subcats__img { height: 56px; }
}

/* --------------------------------------------- поправки сетки товаров */
/* Скрипт темы сам расставляет классы row-cols-* и при боковой колонке даёт
   три карточки в ряд. На боевом сайте их четыре — при полосе 1300 px это
   ровно те же 208 px на карточку. Возвращаем четыре на широких экранах. */

@media (min-width: 1200px) {
	#product-list > .col {
		width: 25%;
	}
}

/* Строку «Без НДС» не показываем: цены оптовые, вторая цифра рядом только
   сбивает. */
.product-thumb .price-tax {
	display: none;
}

/* Кнопка «в корзину» — небольшая, появляется при наведении на карточку.
   На узких экранах наведения нет, поэтому там она видна всегда. */
.product-thumb .button {
	margin-top: 10px;
}

.product-thumb .button button {
	padding: 5px 14px;
	font-size: 14px;
	line-height: 1;
}

/* Строка кнопок свёрнута и разворачивается при наведении — как на боевом,
   где она в покое высотой в одну точку. */
.product-thumb .button {
	/* Стандартная тема прибивает строку кнопок к низу карточки абсолютным
	   положением, из-за чего она ложится поверх цены. Возвращаем в поток —
	   тогда панель растёт вверх, а цена остаётся на месте. */
	position: static;
	height: 0;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: height .3s ease;
}

.product-thumb:hover .button,
.product-thumb:focus-within .button {
	height: 46px;
}

/* ========================================================= страница товара */
/* Собрано по замерам с боевого сайта: снимок слева, сведения справа, между
   ними тонкая линия; цена красная 24 px, кнопка тёмная во всю ширину,
   характеристики — первой вкладкой. */

#product-info h1 {
	margin: 0 0 16px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
	text-transform: none;
}

/* --- две колонки --- */

#product-info > .row > #content > .row > div + div {
	border-left: 1px solid #f0f0f0;
}

@media (min-width: 576px) {
	#product-info > .row > #content > .row > div + div {
		padding-left: 30px;
	}
}

/* Снимок показываем как есть, без рамки и скруглений стандартной темы. */
#product-info .image .img-thumbnail {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

#product-info .image > a > img {
	display: block;
	width: 100%;
	max-width: 460px;
	height: auto;
	margin: 0 auto;
}

#product-info .image > div img {
	width: 78px;
	height: auto;
	margin: 0 6px 6px 0;
	border: 1px solid #f0f0f0;
}

/* --- сведения о товаре --- */

#product-info h1 + .list-unstyled {
	margin: 0 0 14px;
}

#product-info h1 + .list-unstyled li {
	position: relative;
	margin-bottom: 5px;
	padding-left: 18px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--ilean-ink);
}

/* Галочка перед строкой — как на боевом. */
#product-info h1 + .list-unstyled li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--ilean-red);
	font-size: 12px;
}

#product-info h1 + .list-unstyled a {
	border-bottom: 1px solid rgba(37, 37, 37, .25);
}

/* --- цена --- */

#product-info .price-new {
	color: var(--ilean-red);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.1;
}

#product-info h2 {
	margin: 0 0 4px;
}

#product-info .price-old {
	color: var(--ilean-muted);
	font-size: 15px;
	font-weight: 400;
	text-decoration: line-through;
}

/* --- покупка --- */

/* Избранное и сравнение убраны целиком вместе с их полосой кнопок:
   личного кабинета на сайте не будет. */
#product-info form:has(> .btn-group) {
	display: none;
}

#product-info form:has(> .btn-group) + br {
	display: none;
}

#product-info #input-quantity {
	height: 46px;
	max-width: 84px;
	border: 1px solid var(--ilean-line);
	border-radius: 2px 0 0 2px;
	font-size: 15px;
	text-align: center;
}

#product-info label[for="input-quantity"],
#product-info .input-group-text {
	height: 46px;
	border: 1px solid var(--ilean-line);
	border-radius: 2px 0 0 2px;
	background: #fafafa;
	color: var(--ilean-muted);
	font-size: 13px;
}

#button-cart {
	min-height: 46px;
	padding: 0 26px;
	border: 0;
	border-radius: 2px;
	background: #141414;
	color: #f2f2f2;
	font-size: 14px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: .02em;
	transition: background .2s ease;
}

#button-cart:hover,
#button-cart:focus-visible {
	background: var(--ilean-red);
	color: #fff;
}

/* --- вкладки --- */

#product-info .nav-tabs {
	margin-top: 26px;
	border-bottom: 1px solid var(--ilean-line);
}

#product-info .nav-tabs .nav-link {
	margin-bottom: -1px;
	padding: 9px 18px;
	border: 1px solid transparent;
	border-radius: 3px 3px 0 0;
	color: #555;
	font-size: 13px;
	font-weight: 400;
	text-transform: none;
}

#product-info .nav-tabs .nav-link:hover {
	color: var(--ilean-red);
}

#product-info .nav-tabs .nav-link.active {
	border-color: var(--ilean-line) var(--ilean-line) #fff;
	background: #fff;
	color: var(--ilean-ink);
	font-weight: 700;
}

#product-info .tab-content {
	padding: 20px 0 0;
	font-size: 14px;
	line-height: 1.55;
}

/* --- таблица характеристик --- */

#product-info .tab-content .table {
	width: 100%;
	max-width: 820px;
	margin: 0;
	border: 1px solid #f0f0f0;
	font-size: 13px;
}

#product-info .tab-content .table thead td {
	padding: 9px 12px;
	background: #fafafa;
	border-bottom: 1px solid #f0f0f0;
	font-weight: 700;
	color: var(--ilean-ink);
}

#product-info .tab-content .table tbody td {
	padding: 8px 12px;
	border-bottom: 1px solid #f4f4f4;
	vertical-align: top;
}

#product-info .tab-content .table tbody tr:nth-child(even) td {
	background: #fafafa;
}

#product-info .tab-content .table tbody td:first-child {
	width: 46%;
	color: #6c6c6c;
}

@media (max-width: 767.98px) {
	#product-info > .row > #content > .row > div + div {
		margin-top: 18px;
		padding-left: 0;
		border-left: 0;
		border-top: 1px solid #f0f0f0;
		padding-top: 18px;
	}

	#product-info .image > a > img {
		max-width: 100%;
	}
}

/* ------------------------------------------- широкое содержимое на телефоне */

/* Таблицы внутри текстов категорий и в характеристиках товара шире экрана.
   Делаем их отдельной прокручиваемой полосой, чтобы вбок ехала таблица,
   а не вся страница. */
#product-category .tab-content table,
#product-info .tab-content table,
#product-category #content table,
#information-information #content table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	white-space: nowrap;
}

@media (min-width: 768px) {
	#product-category .tab-content table,
	#product-info .tab-content table,
	#product-category #content table,
	#information-information #content table {
		display: table;
		white-space: normal;
	}
}

/* Длинное название товара в хлебных крошках не должно распирать страницу. */
.breadcrumb {
	flex-wrap: wrap;
}

.breadcrumb-item {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* Тексты страниц и категорий приехали со старого сайта вместе с вёрсткой
   под полосу в 1000 точек. На телефоне такая ширина распирает страницу —
   отпускаем её, содержимое переносится само. */
#information-information #content [style*="width"],
#product-category #content [style*="width"],
#product-info .tab-content [style*="width"] {
	width: auto !important;
	max-width: 100% !important;
}

#information-information #content img,
#product-category #content img,
#product-info .tab-content img {
	max-width: 100%;
	height: auto;
}

/* На телефоне движок ставит одну карточку в ряд — половина экрана уходит
   впустую. Ставим две, как на боевом сайте, и уменьшаем картинку. */
@media (min-width: 340px) and (max-width: 767.98px) {
	#product-list > .col {
		width: 50%;
	}
}

@media (max-width: 767.98px) {
	.product-thumb {
		--ilean-img: 68px;
	}

	.product-thumb h4 {
		font-size: 12px;
	}

	.product-thumb .price {
		font-size: 15px;
	}
}

/* Стрелки листания у баннера Bootstrap выходят за его правый край и
   растягивают страницу вбок на несколько точек. Обрезаем по горизонтали:
   clip, а не hidden — чтобы не появлялся лишний блок прокрутки.
   (Правило вернулось: при переборе раздела карточки товара оно попало
   в заменяемый кусок и потерялось.) */
.carousel {
	overflow-x: clip;
}

/* Снимок раздела над списком подкатегорий: у него не было заданного размера,
   он тянулся по ширине колонки и выходил 220 px. Приводим к тем же минус
   двадцати процентам, что и остальные картинки вне главной. */
#product-category #content .img-thumbnail {
	max-width: 176px;
	padding: 0;
	border: 1px solid #f0f0f0;
	border-radius: 0;
}


/* Страховочное правило выше (#product-category #content img) написано с ДВУМЯ
   идентификаторами и потому перевешивало правила каталога — оно возвращало
   снимкам в карточках max-width: 100% и height: auto, и квадратный снимок
   вылезал за своё поле на 70-100 точек, наезжая на название. Повторяем укладку
   с тем же числом идентификаторов, чтобы вёрстка каталога не зависела от
   страховки, написанной для текстов, приехавших со старого сайта. */
#product-category #content .product-thumb .image img,
#product-search #content .product-thumb .image img,
#product-info #content .product-thumb .image img {
	position: absolute;
	top: 10px;
	left: 10px;
	width: calc(100% - 20px);
	height: calc(100% - 20px);
	max-width: none;
	object-fit: contain;
}

#product-category #content .ilean-subcats__img img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
}

/* Две поправки против стандартной темы OpenCart:
   у неё .product-thumb .description h4 задан жирным и весит больше нашего
   правила, а у .description стоит нижний отступ в 45 px — из-за него панель
   вырастала до 152 px и наезжала на картинку. */
.product-thumb .description h4 {
	font-weight: 400;
}

.product-thumb .description {
	margin-bottom: 0;
}

.product-thumb .description > p {
	margin: 0;
}


/* Листание баннера на главной.

   Bootstrap глушит переход слайдов правилом внутри
   @media (prefers-reduced-motion: reduce) — а у владельца эта системная
   настройка включена, и баннер переключался мгновенным рывком вместо
   прокрутки. Ровно та же причина была у плиток каталога, которые не хотели
   плавно подниматься.

   Поэтому переход задаётся здесь безусловно, без ограничителя по настройке,
   и двумя классами — чтобы перевесить односложное правило Bootstrap. Секунда
   вместо стандартных 0,6 и мягкое замедление к концу: слайд трогается быстро,
   а останавливается плавно. */
.carousel-inner .carousel-item,
.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev,
.carousel-inner .carousel-item-next.carousel-item-start,
.carousel-inner .carousel-item-prev.carousel-item-end {
	transition: transform 1s cubic-bezier(.4, 0, .2, 1);
}

/* Стрелки листания проявляются при наведении на баннер, а не мигают всегда. */
.carousel .carousel-control-prev,
.carousel .carousel-control-next {
	opacity: 0;
	transition: opacity .3s ease;
}

.carousel:hover .carousel-control-prev,
.carousel:hover .carousel-control-next,
.carousel .carousel-control-prev:focus-visible,
.carousel .carousel-control-next:focus-visible {
	opacity: .8;
}