/* =====================================================================
   NOUT.KG — витрина, каталог, товар, корзина и правки после первого деплоя.
   Подключается в header.php сразу после nout-theme.css (только s2).
   ===================================================================== */

/* ---------- Хедер: поиск и выпадашка ---------- */

/* У обёртки поиска старая рамка и лишняя высота — давали «вторую линию» */
html body.site-s2 #noutHeader #topSearchLine,
html body.site-s2 #noutHeader #topSearch2,
html body.site-s2 #noutHeader #topSearchForm {
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
	height: auto !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
}
html body.site-s2 #noutHeader #topSearch2 .searchContainerInner { height: auto !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; }

/* Выпадашка категорий: быстрее и без полупрозрачного кадра */
html body.site-s2 #noutHeader .nout-category-nav__dropdown { transition: opacity .1s ease, visibility .1s !important; transform: none !important; }
html body.site-s2 #noutHeader .nout-category-nav__chevron .nout-icon { transform: none !important; }
html body.site-s2 #noutHeader .nout-category-nav__item:hover .nout-category-nav__chevron .nout-icon { transform: rotate(180deg) !important; }

/* ---------- Футер одним блоком ---------- */

/* Старый отступ 55px под удалённую плашку давал белую полосу снизу */
html body.site-s2 #footer.nout-footer { margin-bottom: 0 !important; }

body.site-s2 .nout-footer__benefits { background: none; border-bottom: 1px solid rgb(255 255 255 / 8%); }
body.site-s2 .nout-footer__benefits-grid { padding-top: 32px !important; padding-bottom: 32px !important; gap: 16px; }
body.site-s2 .nout-benefit {
	padding: 16px;
	border-radius: 14px;
	background: rgb(255 255 255 / 4%);
	border: 1px solid rgb(255 255 255 / 7%);
	transition: background .15s ease, border-color .15s ease;
}
body.site-s2 a.nout-benefit:hover { background: rgb(255 255 255 / 8%); border-color: rgb(255 255 255 / 14%); }
body.site-s2 .nout-benefit__icon { background: linear-gradient(135deg, var(--n-blue) 0%, #1590ff 100%); box-shadow: 0 8px 18px rgb(11 116 222 / 30%); }
body.site-s2 .nout-footer__bottom { background: rgb(0 0 0 / 14%); }

/* ---------- Витрина главной ---------- */

body.site-s2 .nout-storefront { display: grid; gap: 28px; margin: 28px 0 0; }

body.site-s2 .nout-shelf,
body.site-s2 .nout-tiles {
	min-width: 0;
	padding: 24px;
	border-radius: 20px;
	background: #fff;
	box-shadow: var(--n-shadow);
}

body.site-s2 .nout-shelf__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
body.site-s2 .nout-shelf__eyebrow { display: block; margin-bottom: 4px; color: var(--n-blue); font: 12px/1.2 robotomedium, robotobold, arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
html body.site-s2 .nout-shelf__title { margin: 0 !important; padding: 0 !important; color: var(--n-text) !important; font: 26px/1.15 robotobold, arial, sans-serif !important; letter-spacing: -.01em; }
body.site-s2 .nout-shelf__actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

body.site-s2 .nout-shelf__all { display: inline-flex; align-items: center; gap: 6px; margin-right: 8px; color: var(--n-blue) !important; font: 14px/1 robotomedium, robotobold, arial, sans-serif; text-decoration: none !important; }
body.site-s2 .nout-shelf__all .nout-icon { width: 16px; height: 16px; transition: transform .15s ease; }
body.site-s2 .nout-shelf__all:hover .nout-icon { transform: translateX(3px); }

body.site-s2 .nout-shelf__nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid var(--n-line);
	border-radius: 50%;
	background: #fff;
	color: var(--n-text);
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, opacity .15s ease;
}
body.site-s2 .nout-shelf__nav:hover:not(:disabled) { background: var(--n-blue); border-color: var(--n-blue); color: #fff; }
body.site-s2 .nout-shelf__nav:disabled { opacity: .35; cursor: default; }
body.site-s2 .nout-shelf__nav .nout-icon { width: 18px; height: 18px; }
body.site-s2 .nout-shelf__nav--prev .nout-icon { transform: rotate(180deg); }

body.site-s2 .nout-shelf__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 4 * 16px) / 5);
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	padding: 4px 2px 8px;
	margin: -4px -2px -8px;
}
body.site-s2 .nout-shelf__track::-webkit-scrollbar { display: none; }

/* Карточка товара */
body.site-s2 .nout-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 12px;
	border: 1px solid var(--n-line);
	border-radius: 16px;
	background: #fff;
	scroll-snap-align: start;
	transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
body.site-s2 .nout-card:hover { border-color: transparent; box-shadow: 0 16px 36px rgb(10 37 64 / 12%); transform: translateY(-2px); }

body.site-s2 .nout-card__media { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; margin-bottom: 12px; padding: 10px; border-radius: 12px; background: #f7f9fc; overflow: hidden; }
body.site-s2 .nout-card__media img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .3s ease; }
body.site-s2 .nout-card:hover .nout-card__media img { transform: scale(1.04); }

body.site-s2 .nout-card__stock { position: absolute; top: 20px; left: 20px; padding: 4px 8px; border-radius: 6px; background: #e8f8f0; color: var(--n-success); font: 11px/1.2 robotomedium, robotobold, arial, sans-serif; }
body.site-s2 .nout-card__stock.is-order { background: #fff4e0; color: #b45309; }

html body.site-s2 .nout-card__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.6em;
	color: var(--n-text) !important;
	font: 15px/1.3 robotomedium, robotobold, arial, sans-serif;
	text-decoration: none !important;
}
html body.site-s2 .nout-card__title:hover { color: var(--n-blue) !important; }

body.site-s2 .nout-card__specs { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 6px 0 0 !important; color: var(--n-muted); font-size: 12px !important; line-height: 1.45 !important; }

body.site-s2 .nout-card__bottom { display: grid; gap: 10px; margin-top: auto; padding-top: 12px; }
body.site-s2 .nout-card__price { color: var(--n-text); font: 20px/1.1 robotobold, arial, sans-serif; white-space: nowrap; }

html body.site-s2 .nout-card .nout-card__buy {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100% !important;
	height: 42px !important;
	margin: 0 !important;
	padding: 0 12px !important;
	border: 0 !important;
	border-radius: 10px !important;
	background: var(--n-blue) !important;
	color: #fff !important;
	font: 14px/1 robotomedium, robotobold, arial, sans-serif !important;
	text-decoration: none !important;
	box-shadow: none !important;
	transition: background .15s ease;
}
html body.site-s2 .nout-card .nout-card__buy:hover { background: var(--n-blue-600) !important; }
html body.site-s2 .nout-card .nout-card__buy .icon { width: 18px; height: 18px; margin: 0 !important; filter: brightness(0) invert(1); }
html body.site-s2 .nout-card .nout-card__buy.added { background: var(--n-success) !important; }
html body.site-s2 .nout-card .nout-card__buy--ghost { background: var(--n-blue-50) !important; color: var(--n-blue) !important; }

/* Плитки категорий */
body.site-s2 .nout-tiles__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
body.site-s2 .nout-tile {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: 16px;
	border-radius: 16px;
	background: var(--n-ice);
	color: var(--n-text) !important;
	text-decoration: none !important;
	transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
}
body.site-s2 .nout-tile:hover { background: #fff; box-shadow: 0 12px 28px rgb(10 37 64 / 10%); transform: translateY(-2px); }
body.site-s2 .nout-tile .nout-cat-icon--card { width: 56px; height: 56px; }
body.site-s2 .nout-tile__name { font: 15px/1.25 robotomedium, robotobold, arial, sans-serif; }
body.site-s2 .nout-tile__count { color: var(--n-muted); font-size: 12px; }

/* CTA «Не знаете, что выбрать?» */
body.site-s2 .nout-help-cta {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 32px 36px;
	border-radius: 20px;
	background: radial-gradient(120% 160% at 90% 10%, #1f6fd1 0%, #0f3260 45%, #0a2540 100%);
	color: #fff;
	overflow: hidden;
}
body.site-s2 .nout-help-cta__eyebrow { display: inline-flex; align-items: center; gap: 8px; color: #8cc4ff; font: 13px/1 robotomedium, robotobold, arial, sans-serif; }
body.site-s2 .nout-help-cta__eyebrow .nout-icon { width: 16px; height: 16px; }
html body.site-s2 .nout-help-cta h2 { margin: 10px 0 8px !important; color: #fff !important; font: 28px/1.15 robotobold, arial, sans-serif !important; }
html body.site-s2 .nout-help-cta p { max-width: 560px; margin: 0 !important; color: rgb(255 255 255 / 80%) !important; font-size: 15px !important; line-height: 1.55 !important; }
body.site-s2 .nout-help-cta__actions { display: flex; flex-wrap: wrap; gap: 10px; flex: 0 0 auto; }
body.site-s2 .nout-help-cta__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 50px;
	padding: 0 22px;
	border-radius: 12px;
	background: var(--n-accent);
	color: var(--n-navy) !important;
	font: 16px/1 robotobold, arial, sans-serif;
	text-decoration: none !important;
	white-space: nowrap;
}
body.site-s2 .nout-help-cta__btn .nout-icon { width: 18px; height: 18px; }
body.site-s2 .nout-help-cta__btn--ghost { background: rgb(255 255 255 / 12%); color: #fff !important; font-size: 15px; }
body.site-s2 .nout-help-cta__btn:hover { filter: brightness(1.05); }

/* ---------- Страница категории: карточки товаров ---------- */

html body.site-s2 #catalogSection .productList .item.product {
	border: 1px solid var(--n-line) !important;
	border-radius: 16px !important;
	background: #fff !important;
	box-shadow: none !important;
	transition: box-shadow .2s ease, border-color .2s ease !important;
}
html body.site-s2 #catalogSection .productList .item.product:hover { border-color: transparent !important; box-shadow: 0 16px 36px rgb(10 37 64 / 12%) !important; }
html body.site-s2 #catalogSection .productList .item.product .tabloid { position: relative; padding: 12px !important; border: 0 !important; box-shadow: none !important; background: none !important; }
/* Старый шаблон резервировал высоту под всплывающие кнопки — убираем пустоту под карточкой */
html body.site-s2 #catalogSection .productList .item.product,
html body.site-s2 #catalogSection .productList .item.product .tabloid,
html body.site-s2 #catalogSection .productList .item.product .productTable,
html body.site-s2 #catalogSection .productList .item.product .productColText { height: auto !important; min-height: 0 !important; }
html body.site-s2 #catalogSection .productList .item.product .productColText { padding-bottom: 0 !important; margin-bottom: 0 !important; }
html body.site-s2 #catalogSection .productList .productColImage .picture { border-radius: 12px; background: #f7f9fc; }
html body.site-s2 #catalogSection .productList .productColImage img { mix-blend-mode: multiply; }

html body.site-s2 #catalogSection .productList .productColText .name {
	display: -webkit-box !important;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	height: auto !important;
	min-height: 3.9em;
	margin: 10px 0 0 !important;
	color: var(--n-text) !important;
	font: 14px/1.3 robotomedium, robotoregular, arial, sans-serif !important;
}
html body.site-s2 #catalogSection .productList .productColText .name .middle { display: inline !important; font: inherit !important; }
html body.site-s2 #catalogSection .productList .productColText .price { margin: 10px 0 !important; color: var(--n-text) !important; font: 21px/1.1 robotobold, arial, sans-serif !important; }

html body.site-s2 #catalogSection .productList .addCartContainer { display: block !important; margin: 0 !important; }
html body.site-s2 #catalogSection .productList .addCart {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100% !important;
	height: 44px !important;
	border-radius: 10px !important;
	background: var(--n-blue) !important;
	color: #fff !important;
	font: 14px/1 robotomedium, robotobold, arial, sans-serif !important;
	box-shadow: none !important;
}
html body.site-s2 #catalogSection .productList .addCart:hover { background: var(--n-blue-600) !important; }
html body.site-s2 #catalogSection .productList .addCart.added { background: var(--n-success) !important; }
html body.site-s2 #catalogSection .productList .addCart .icon { filter: brightness(0) invert(1); }
html body.site-s2 #catalogSection .productList .addCartContainer .quantityContainer,
html body.site-s2 #catalogSection .productList .productColText > .btn-simple.add-cart { display: none !important; }

/* Сравнение / избранное / «1 клик» в списке убираем, наличие — бейдж на фото */
html body.site-s2 #catalogSection .productList .optional { position: static !important; height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; border: 0 !important; }
html body.site-s2 #catalogSection .productList .optional .quickBuy,
html body.site-s2 #catalogSection .productList .optional .addCompare,
html body.site-s2 #catalogSection .productList .optional .addWishlist { display: none !important; }
html body.site-s2 #catalogSection .productList .optional .row { display: block !important; margin: 0 !important; }
html body.site-s2 #catalogSection .productList .optional .changeAvailable {
	position: absolute !important;
	top: 20px;
	left: 20px;
	z-index: 2;
	display: inline-flex !important;
	align-items: center;
	gap: 4px;
	margin: 0 !important;
	padding: 4px 8px !important;
	border-radius: 6px;
	background: #e8f8f0;
	color: var(--n-success) !important;
	font: 11px/1.2 robotomedium, robotobold, arial, sans-serif !important;
}
html body.site-s2 #catalogSection .productList .optional .changeAvailable .icon { display: none !important; }
html body.site-s2 #catalogSection .productList .optional .onOrder { background: #fff4e0; color: #b45309 !important; }
html body.site-s2 #catalogSection .productList .optional .outOfStock { background: #f1f3f6; color: var(--n-muted) !important; }

/* Фильтр */
html body.site-s2 #smartFilter,
html body.site-s2 .smartFilter { border: 0 !important; border-radius: 16px !important; background: #fff !important; box-shadow: var(--n-shadow) !important; overflow: hidden; }

/* ---------- Страница товара ---------- */

/* Последний пункт крошек дублирует длинный заголовок */
html body.site-s2 #breadcrumbs li:last-child,
html body.site-s2 .breadcrumbs li:last-child,
html body.site-s2 #breadcrumbs li:nth-last-child(2):has(> .arrow),
html body.site-s2 .breadcrumbs li:nth-last-child(2):has(> .arrow) { display: none !important; }
html body.site-s2 .changeName,
html body.site-s2 #catalogElement h1 { font-size: 26px !important; line-height: 1.25 !important; }

body.site-s2 .nout-buy-trust { display: grid; gap: 10px; margin: 16px 0 0 !important; padding: 14px 0 0 !important; border-top: 1px solid var(--n-line); list-style: none; }
body.site-s2 .nout-buy-trust li { display: flex !important; align-items: flex-start; gap: 10px; margin: 0 !important; padding: 0 !important; background: none !important; color: var(--n-muted); font-size: 13px; line-height: 1.4; }
body.site-s2 .nout-buy-trust li::before { display: none !important; }
body.site-s2 .nout-buy-trust strong { color: var(--n-text); font-family: robotomedium, robotobold, arial, sans-serif; font-weight: normal; }
body.site-s2 .nout-buy-trust .nout-icon { width: 18px; height: 18px; margin-top: 1px; color: var(--n-blue); }

body.site-s2 .nout-buy-consult { display: flex; align-items: center; gap: 12px; margin: 14px 0 6px; padding: 12px 14px; border-radius: 12px; background: var(--n-blue-50); text-decoration: none !important; }
body.site-s2 .nout-buy-consult__icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--n-blue); color: #fff; }
body.site-s2 .nout-buy-consult__icon .nout-icon { width: 18px; height: 18px; }
body.site-s2 .nout-buy-consult small { display: block; color: var(--n-muted); font-size: 12px; }
body.site-s2 .nout-buy-consult strong { display: block; color: var(--n-text); font: 17px/1.2 robotobold, arial, sans-serif; }

/* ---------- Корзина: позиции строками ---------- */

html body.site-s2 #basketTopLine #tabsControl .item:first-child { display: none !important; }
html body.site-s2 #basketTopLine #tabsControl a {
	display: inline-flex !important;
	align-items: center;
	height: 42px !important;
	padding: 0 18px !important;
	border: 1px solid var(--n-line) !important;
	border-radius: 10px !important;
	background: #fff !important;
	color: var(--n-text) !important;
	font: 14px/1 robotomedium, robotobold, arial, sans-serif !important;
	text-transform: none !important;
	text-decoration: none !important;
}
html body.site-s2 #basketTopLine #tabsControl a.orderMove { border-color: var(--n-blue) !important; background: var(--n-blue) !important; color: #fff !important; }
html body.site-s2 #basketTopLine #tabsControl a.clearAllBasketItems { color: var(--n-muted) !important; }

html body.site-s2 #personalCart #basketProductList .productList { display: grid !important; gap: 12px; }
html body.site-s2 #personalCart #basketProductList:not(.table) .productList .item.product {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	border: 1px solid var(--n-line) !important;
	border-radius: 16px !important;
	background: #fff !important;
	box-shadow: none !important;
}
html body.site-s2 #personalCart #basketProductList:not(.table) .item.product .tabloid { position: relative; padding: 16px 52px 16px 16px !important; border: 0 !important; box-shadow: none !important; }
html body.site-s2 #personalCart #basketProductList:not(.table) .item.product .topSection { position: static !important; height: 0 !important; margin: 0 !important; }
html body.site-s2 #personalCart #basketProductList:not(.table) .item.product .topSection .column:first-child { position: absolute; top: 16px; left: 164px; }
html body.site-s2 #personalCart #basketProductList:not(.table) .item.product .delete { position: absolute !important; top: 16px; right: 16px; }
html body.site-s2 #personalCart #basketProductList:not(.table) .item.product .productTable { display: grid !important; grid-template-columns: 132px minmax(0, 1fr); gap: 16px; align-items: center; }
html body.site-s2 #personalCart #basketProductList:not(.table) .item.product .productColImage,
html body.site-s2 #personalCart #basketProductList:not(.table) .item.product .productColText { width: auto !important; padding: 0 !important; }
html body.site-s2 #personalCart #basketProductList:not(.table) .item.product .productColImage { display: block !important; }
html body.site-s2 #personalCart #basketProductList:not(.table) .item.product .productColImage .picture { display: flex !important; align-items: center; justify-content: center; width: 132px !important; height: 132px !important; padding: 10px; border: 0 !important; border-radius: 12px; background: #f7f9fc; box-sizing: border-box; }
html body.site-s2 #personalCart #basketProductList:not(.table) .item.product .productColImage img { max-width: 100%; max-height: 100%; mix-blend-mode: multiply; }
html body.site-s2 #personalCart #basketProductList:not(.table) .item.product .productColText {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "name name" "qty price";
	align-items: center;
	gap: 14px 24px;
	padding-top: 24px !important;
}
html body.site-s2 #personalCart #basketProductList:not(.table) .item.product .productColText .name { grid-area: name; height: auto !important; color: var(--n-text) !important; font: 15px/1.4 robotomedium, robotoregular, arial, sans-serif !important; text-align: left !important; }
html body.site-s2 #personalCart #basketProductList:not(.table) .item.product .productColText .price { grid-area: price; margin: 0 !important; color: var(--n-text) !important; font: 22px/1 robotobold, arial, sans-serif !important; text-align: right !important; white-space: nowrap; }
html body.site-s2 #personalCart #basketProductList:not(.table) .item.product .productColText .priceIcon { display: none !important; }
html body.site-s2 #personalCart #basketProductList:not(.table) .item.product .basketQty { grid-area: qty; justify-self: start; margin: 0 !important; }

html body.site-s2 #personalCart .orderLine { border: 0 !important; border-radius: 16px !important; background: #fff !important; box-shadow: var(--n-shadow) !important; }
html body.site-s2 #personalCart .orderLine #sum .price,
html body.site-s2 #personalCart .orderLine #sum .basketSum { color: var(--n-text) !important; font-family: robotobold, arial, sans-serif !important; }

/* ---------- «Просмотренные товары» ---------- */

/* Только товары с настоящим фото: выключенные/удалённые выводились пустыми «Цена по запросу» */
html body.site-s2 #footerTabs .productList > li:not(:has(.productColImage img[src*="/upload/"])) { display: none !important; }
html body.site-s2 #footerTabsCaption { padding-top: 32px !important; border: 0 !important; background: none !important; }
html body.site-s2 #footerTabsCaption .items .item a {
	border: 0 !important;
	color: var(--n-text) !important;
	font: 22px/1.2 robotobold, arial, sans-serif !important;
	text-transform: none !important;
	text-decoration: none !important;
}
html body.site-s2 #footerTabs { border: 0 !important; background: none !important; }
html body.site-s2 #footerTabs .wrapper,
html body.site-s2 #footerTabsCaption .wrapper { width: auto !important; max-width: 1360px; margin-left: auto !important; margin-right: auto !important; padding-left: 24px; padding-right: 24px; box-sizing: border-box; }
html body.site-s2 #footerTabsCaption .items { text-align: left !important; }
html body.site-s2 #footerTabsCaption .items .item { width: auto !important; }
html body.site-s2 #footerTabs .productList .item.product { border: 1px solid var(--n-line) !important; border-radius: 16px !important; background: #fff !important; box-shadow: none !important; }
html body.site-s2 #footerTabs .productList .item.product .productColText .name { display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: auto !important; color: var(--n-text) !important; font: 13px/1.35 robotomedium, robotoregular, arial, sans-serif !important; }
html body.site-s2 #footerTabs .productList .item.product .price { color: var(--n-text) !important; font: 18px/1.2 robotobold, arial, sans-serif !important; }

/* ---------- Адаптив ---------- */

@media (max-width: 1280px) {
	body.site-s2 .nout-shelf__track { grid-auto-columns: calc((100% - 3 * 16px) / 4); }
}

@media (max-width: 1024px) {
	body.site-s2 .nout-shelf__track { grid-auto-columns: calc((100% - 2 * 14px) / 3); gap: 14px; }
	body.site-s2 .nout-tiles__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	body.site-s2 .nout-help-cta { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 768px) {
	body.site-s2 .nout-storefront { gap: 18px; margin-top: 18px; }
	body.site-s2 .nout-shelf,
	body.site-s2 .nout-tiles { padding: 16px; border-radius: 16px; }
	html body.site-s2 .nout-shelf__title { font-size: 21px !important; }
	body.site-s2 .nout-shelf__nav { display: none; }
	body.site-s2 .nout-shelf__all { margin: 0; font-size: 13px; }
	body.site-s2 .nout-shelf__track { grid-auto-columns: 46%; gap: 10px; scroll-snap-type: x proximity; }
	body.site-s2 .nout-card { padding: 10px; border-radius: 14px; }
	body.site-s2 .nout-card__stock { top: 16px; left: 16px; }
	html body.site-s2 .nout-card__title { font-size: 13px; }
	body.site-s2 .nout-card__specs { display: none; }
	body.site-s2 .nout-card__price { font-size: 17px; }
	html body.site-s2 .nout-card .nout-card__buy { height: 38px !important; font-size: 13px !important; }

	body.site-s2 .nout-tiles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
	body.site-s2 .nout-tile { flex-direction: row; align-items: center; padding: 12px; }
	body.site-s2 .nout-tile .nout-cat-icon--card { width: 40px; height: 40px; border-radius: 12px; }
	body.site-s2 .nout-tile__count { display: none; }
	body.site-s2 .nout-tile__name { font-size: 13px; }

	body.site-s2 .nout-help-cta { padding: 22px 18px; border-radius: 16px; }
	html body.site-s2 .nout-help-cta h2 { font-size: 22px !important; }
	body.site-s2 .nout-help-cta__actions { width: 100%; }
	body.site-s2 .nout-help-cta__btn { flex: 1 1 auto; justify-content: center; height: 46px; font-size: 15px; }

	body.site-s2 .nout-footer__benefits-grid { gap: 10px; }
	body.site-s2 .nout-benefit { padding: 12px; }

	html body.site-s2 #personalCart #basketProductList:not(.table) .item.product .productTable { grid-template-columns: 84px minmax(0, 1fr); gap: 12px; align-items: start; }
	html body.site-s2 #personalCart #basketProductList:not(.table) .item.product .productColImage .picture { width: 84px !important; height: 84px !important; }
	html body.site-s2 #personalCart #basketProductList:not(.table) .item.product .topSection .column:first-child { left: 112px; }
	html body.site-s2 #personalCart #basketProductList:not(.table) .item.product .productColText { grid-template-columns: 1fr; grid-template-areas: "name" "price" "qty"; gap: 10px; }
	html body.site-s2 #personalCart #basketProductList:not(.table) .item.product .productColText .name { font-size: 13px !important; }
	html body.site-s2 #personalCart #basketProductList:not(.table) .item.product .productColText .price { font-size: 19px !important; text-align: left !important; }
	html body.site-s2 #basketTopLine #tabsControl a { height: 38px !important; padding: 0 12px !important; font-size: 13px !important; }

	html body.site-s2 .changeName,
	html body.site-s2 #catalogElement h1 { font-size: 19px !important; }
}

/* =====================================================================
   ПРАВКИ ПО СКРИНШОТАМ (раунд 3)
   ===================================================================== */

/* Старый CSS шаблона ставит content-box: кнопка 100% + отступы вылезала за карточку */
body.site-s2 .nout-storefront,
body.site-s2 .nout-storefront *,
body.site-s2 .nout-footer,
body.site-s2 .nout-footer *,
body.site-s2 .nout-hero,
body.site-s2 .nout-hero *,
body.site-s2 .nout-buy-trust,
body.site-s2 .nout-buy-trust *,
body.site-s2 .nout-buy-consult,
body.site-s2 .nout-buy-consult *,
body.site-s2 .nout-tabbar,
body.site-s2 .nout-tabbar * { box-sizing: border-box; }
body.site-s2 .nout-card { padding-bottom: 14px; }

/* Товар: пустые обёртки логотипа бренда и кнопки отзывов рисовали пустой блок с рамками */
html body.site-s2 #elementContainer .brandImageWrap:not(:has(img, a)),
html body.site-s2 #elementContainer .reviewsBtnWrap:not(:has(a, button, span)) { display: none !important; }

/* Товар: «Купить в 1 клик» — текст по центру кнопки (старое правило с двумя ID ставило display:block) */
html body.site-s2 #catalogElement #elementTools a.quickBuy.label,
html body.site-s2 #catalogElement #smallElementTools a.quickBuy.label {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px;
	height: 48px !important;
	padding: 0 16px !important;
	line-height: 1 !important;
	border-radius: 12px !important;
	box-sizing: border-box !important;
	font: 14px/1 robotomedium, robotobold, arial, sans-serif !important;
}
html body.site-s2 #catalogElement #elementTools a.quickBuy.label .icon,
html body.site-s2 #catalogElement #smallElementTools a.quickBuy.label .icon { position: static !important; margin: 0 !important; width: 18px; height: 18px; }

/* «Просмотренные товары»: обычная горизонтальная лента вместо карусели на 200% с обрезанными карточками */
html body.site-s2 #viewedProduct { height: auto !important; overflow: visible !important; }
html body.site-s2 #viewedProduct .wrap { overflow-x: auto !important; overflow-y: visible !important; scrollbar-width: thin; padding: 4px 2px 12px; }
html body.site-s2 #viewedProduct ul.slideBox {
	display: flex !important;
	gap: 12px;
	width: auto !important;
	left: 0 !important;
	overflow: visible !important;
	margin: 0 !important;
	padding: 0 !important;
}
html body.site-s2 #viewedProduct ul.slideBox > li { flex: 0 0 216px; width: 216px !important; margin: 0 !important; padding: 0 !important; float: none !important; list-style: none; }
html body.site-s2 #viewedProduct ul.slideBox > li::before { display: none !important; }
html body.site-s2 #viewedProduct .item.product,
html body.site-s2 #viewedProduct .item.product .tabloid { height: auto !important; min-height: 0 !important; overflow: visible !important; margin: 0 !important; box-sizing: border-box !important; }
html body.site-s2 #viewedProduct .item.product .tabloid { padding: 10px !important; border: 0 !important; box-shadow: none !important; }
html body.site-s2 #viewedProduct .item.product .productColText { height: auto !important; min-height: 0 !important; padding-bottom: 0 !important; }
/* Старое правило держит display:flow-root и высоту 58px — ограничиваем ровно двумя строками */
html body.site-s2 #viewedProduct .item.product .productColText .name { display: block !important; overflow: hidden !important; height: 2.7em !important; min-height: 0 !important; max-height: 2.7em !important; line-height: 1.35 !important; margin: 10px 0 6px !important; }
html body.site-s2 #viewedProduct .item.product .productColText .name .middle { display: inline !important; height: auto !important; }
html body.site-s2 #viewedProduct .item.product .optional,
html body.site-s2 #viewedProduct .item.product .addCartContainer,
html body.site-s2 #viewedProduct .item.product .getFastView { display: none !important; }
html body.site-s2 .viewedBtnLeft,
html body.site-s2 .viewedBtnRight,
html body.site-s2 #viewedProduct + a,
html body.site-s2 #viewedProduct ~ .carouselLeft,
html body.site-s2 #viewedProduct ~ .carouselRight { display: none !important; }

/* Корзина: метка наличия и крестик поверх позиции, без отдельной пустой строки сверху */
html body.site-s2 #personalCart #basketProductList .productList .item.product .tabloid { position: relative !important; padding: 16px 52px 16px 16px !important; }
html body.site-s2 #personalCart #basketProductList .productList .item.product .tabloid .topSection {
	position: absolute !important;
	top: 14px !important;
	left: 164px !important;
	right: 14px !important;
	width: auto !important;
	max-width: none !important;
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	height: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	z-index: 2;
}
html body.site-s2 #personalCart #basketProductList .productList .item.product .tabloid .topSection .column { position: static !important; }
html body.site-s2 #personalCart #basketProductList .productList .item.product .tabloid .topSection .delete { position: static !important; }
html body.site-s2 #personalCart #basketProductList .productList .item.product .productColText { padding-top: 26px !important; }

@media (max-width: 768px) {
	html body.site-s2 #personalCart #basketProductList .productList .item.product .tabloid { padding: 12px 12px 12px 12px !important; }
	html body.site-s2 #personalCart #basketProductList .productList .item.product .tabloid .topSection { left: 108px !important; top: 10px !important; right: 10px !important; }
	html body.site-s2 #viewedProduct ul.slideBox > li { flex-basis: 160px; width: 160px !important; }
}

/* =====================================================================
   ВСПЛЫВАЮЩИЕ ФОРМЫ («Нашли дешевле», обратный звонок и др.)
   Было: окно ниже шапки по z-index (1000 < 1200), голая форма.
   ===================================================================== */

html body.site-s2 .webformModal { z-index: 3000 !important; background: rgb(10 37 64 / 55%) !important; backdrop-filter: blur(2px); }
html body.site-s2 .webformModal .webformModalContainer {
	top: 32px !important;
	width: 480px !important;
	max-width: calc(100vw - 32px) !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 20px !important;
	background: #fff !important;
	box-shadow: 0 30px 80px rgb(10 37 64 / 35%) !important;
	overflow: hidden;
	box-sizing: border-box !important;
}
html body.site-s2 .webformModal .webFormDwModal { padding: 0 !important; }
html body.site-s2 .webformModal .webFormModalHeading {
	position: relative;
	margin: 0 !important;
	padding: 22px 64px 18px 28px !important;
	border-bottom: 1px solid var(--n-line) !important;
	background: linear-gradient(135deg, #f3f8ff 0%, #ffffff 100%) !important;
	color: var(--n-text) !important;
	font: 22px/1.2 robotobold, arial, sans-serif !important;
	text-transform: none !important;
}
html body.site-s2 .webformModal .webFormModalHeadingExit {
	position: absolute !important;
	top: 50% !important;
	right: 20px !important;
	width: 36px !important;
	height: 36px !important;
	margin: -18px 0 0 !important;
	border-radius: 50% !important;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d1b2e' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") no-repeat 50% 50% / 16px 16px !important;
	box-shadow: inset 0 0 0 1px var(--n-line) !important;
}
html body.site-s2 .webformModal .webFormDescription:empty { display: none !important; }
html body.site-s2 .webformModal .webFormDescription { margin: 16px 28px 0 !important; color: var(--n-muted) !important; font-size: 14px !important; line-height: 1.5 !important; }
html body.site-s2 .webformModal .webFormItems { padding: 18px 28px 4px !important; }
html body.site-s2 .webformModal .webFormItem { margin: 0 0 14px !important; padding: 0 !important; }
html body.site-s2 .webformModal .webFormItemLabel { margin: 0 0 6px !important; color: var(--n-text) !important; font: 13px/1.3 robotomedium, robotobold, arial, sans-serif !important; }
html body.site-s2 .webformModal .webFormItemField input.inputtext,
html body.site-s2 .webformModal .webFormItemField textarea,
html body.site-s2 .webformModal .webFormItems input[type="text"] {
	width: 100% !important;
	height: 46px !important;
	padding: 0 14px !important;
	border: 1px solid var(--n-line) !important;
	border-radius: 10px !important;
	background: var(--n-ice) !important;
	color: var(--n-text) !important;
	font: 15px/46px robotoregular, arial, sans-serif !important;
	box-sizing: border-box !important;
	box-shadow: none !important;
}
html body.site-s2 .webformModal .webFormItemField textarea { height: 96px !important; padding: 12px 14px !important; line-height: 1.4 !important; }
html body.site-s2 .webformModal .webFormItemField input.inputtext:focus,
html body.site-s2 .webformModal .webFormItemField textarea:focus { border-color: var(--n-blue) !important; background: #fff !important; outline: none !important; box-shadow: 0 0 0 3px rgb(11 116 222 / 14%) !important; }
html body.site-s2 .webformModal .personalInfo { margin: 4px 0 8px !important; color: var(--n-muted) !important; font-size: 13px !important; }
html body.site-s2 .webformModal .webFormTools { padding: 8px 28px 24px !important; }
html body.site-s2 .webformModal .webFormTools .tb { display: flex !important; gap: 10px; width: 100% !important; }
html body.site-s2 .webformModal .webFormTools .tc { display: block !important; flex: 1 1 0; padding: 0 !important; }
html body.site-s2 .webformModal .webFormTools input[type="submit"],
html body.site-s2 .webformModal .webFormTools input[type="reset"] {
	width: 100% !important;
	height: 48px !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 12px !important;
	background: var(--n-blue) !important;
	color: #fff !important;
	font: 15px/1 robotomedium, robotobold, arial, sans-serif !important;
	text-transform: none !important;
	cursor: pointer;
	box-shadow: none !important;
}
html body.site-s2 .webformModal .webFormTools input[type="reset"] { background: var(--n-ice) !important; color: var(--n-muted) !important; }
html body.site-s2 .webformModal .webFormTools p { margin: 12px 0 0 !important; color: var(--n-muted) !important; font-size: 12px !important; }

@media (max-width: 768px) {
	html body.site-s2 .webformModal .webformModalContainer { top: 12px !important; border-radius: 16px !important; }
	html body.site-s2 .webformModal .webFormModalHeading { padding: 18px 56px 14px 18px !important; font-size: 19px !important; }
	html body.site-s2 .webformModal .webFormItems { padding: 14px 18px 2px !important; }
	html body.site-s2 .webformModal .webFormTools { padding: 6px 18px 18px !important; }
}

/* =====================================================================
   ЛИЧНЫЙ КАБИНЕТ
   ===================================================================== */

/* Пустая левая колонка резервировала 320px — на страницах кабинета её нет */
html body.site-s2 .compliter:has(#personalMenuWrap) > #left { display: none !important; }
html body.site-s2 .compliter:has(#personalMenuWrap) > #right { display: block !important; width: auto !important; padding-left: 0 !important; }

/* Меню кабинета — кнопки-вкладки в карточке */
html body.site-s2 #personalMenuWrap { margin: 8px 0 20px !important; padding: 8px !important; border: 0 !important; border-radius: 16px; background: #fff !important; box-shadow: var(--n-shadow); overflow-x: auto; }
html body.site-s2 #personalMenu { display: flex !important; gap: 6px; margin: 0 !important; padding: 0 !important; border: 0 !important; list-style: none; white-space: nowrap; }
html body.site-s2 #personalMenu li { display: block !important; float: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }
html body.site-s2 #personalMenu li::before,
html body.site-s2 #personalMenu li::after { display: none !important; }
/* «Личный счёт» и «Подписка» на NOUT.KG не используются */
html body.site-s2 #personalMenu li:has(a[href$="/personal/bill/"]),
html body.site-s2 #personalMenu li:has(a[href$="/personal/subscribe/"]) { display: none !important; }
html body.site-s2 #right #personalMenuWrap #personalMenu li a {
	display: block !important;
	height: auto !important;
	padding: 11px 18px !important;
	border: 0 !important;
	border-radius: 10px !important;
	background: none !important;
	color: var(--n-text) !important;
	font: 14px/1 robotomedium, robotobold, arial, sans-serif !important;
	text-decoration: none !important;
}
html body.site-s2 #right #personalMenuWrap #personalMenu li a:hover { background: var(--n-ice) !important; }
html body.site-s2 #right #personalMenuWrap #personalMenu li a.selected { background: var(--n-blue) !important; color: #fff !important; }

/* Персональные данные — форма в карточке, две колонки */
html body.site-s2 #mainProfile { padding: 28px !important; border-radius: 16px; background: #fff !important; box-shadow: var(--n-shadow); }
html body.site-s2 #mainProfile .profileSettings { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 32px; margin: 0 !important; padding: 0 !important; list-style: none; }
html body.site-s2 #mainProfile .profileSettings > li { float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; background: none !important; }
html body.site-s2 #mainProfile .profileSettings > li::before { display: none !important; }
html body.site-s2 #mainProfile label { display: block !important; margin: 14px 0 6px !important; color: var(--n-muted) !important; font: 13px/1.3 robotomedium, robotoregular, arial, sans-serif !important; }
html body.site-s2 #right #mainProfile #personalForm .profileSettings li input,
html body.site-s2 #right #mainProfile #personalForm .profileSettings li textarea {
	display: block !important;
	width: 100% !important;
	height: 46px !important;
	margin: 0 !important;
	padding: 0 14px !important;
	border: 1px solid var(--n-line) !important;
	border-radius: 10px !important;
	background: var(--n-ice) !important;
	color: var(--n-text) !important;
	font: 15px/44px robotoregular, arial, sans-serif !important;
	box-sizing: border-box !important;
	box-shadow: none !important;
}
html body.site-s2 #right #mainProfile #personalForm .profileSettings li textarea { height: 96px !important; padding: 12px 14px !important; line-height: 1.4 !important; resize: vertical; }
html body.site-s2 #right #mainProfile #personalForm .profileSettings li input:focus,
html body.site-s2 #right #mainProfile #personalForm .profileSettings li textarea:focus { border-color: var(--n-blue) !important; background: #fff !important; outline: none !important; box-shadow: 0 0 0 3px rgb(11 116 222 / 14%) !important; }
html body.site-s2 #right #mainProfile #personalForm .profileSettings li .heading { display: block !important; margin: 26px 0 0 !important; padding: 0 !important; color: var(--n-text) !important; font: 18px/1.2 robotobold, arial, sans-serif !important; }
html body.site-s2 #right #mainProfile #personalForm .profileSettings li a.submit {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	height: 48px !important;
	margin: 24px 0 0 !important;
	padding: 0 26px !important;
	border: 0 !important;
	border-radius: 12px !important;
	background: var(--n-blue) !important;
	color: #fff !important;
	font: 15px/1 robotomedium, robotobold, arial, sans-serif !important;
	text-decoration: none !important;
	box-shadow: none !important;
}

/* История заказов (стандартный шаблон sale.personal.order.list) */
html body.site-s2 .compliter:has(#personalMenuWrap) #right .sale-order-history-link,
html body.site-s2 .compliter:has(#personalMenuWrap) #right .sale-order-link,
html body.site-s2 .compliter:has(#personalMenuWrap) #right .row.col-md-12 > a {
	display: inline-flex !important;
	align-items: center;
	height: 42px !important;
	margin: 6px 8px 6px 0 !important;
	padding: 0 18px !important;
	border: 1px solid var(--n-line) !important;
	border-radius: 10px !important;
	background: #fff !important;
	color: var(--n-blue) !important;
	font: 14px/1 robotomedium, robotobold, arial, sans-serif !important;
	text-decoration: none !important;
}
html body.site-s2 .compliter:has(#personalMenuWrap) #right .sale-order-list-container,
html body.site-s2 .compliter:has(#personalMenuWrap) #right .sale-order-list-inner-container {
	margin-bottom: 14px !important;
	padding: 18px 20px !important;
	border: 0 !important;
	border-radius: 16px !important;
	background: #fff !important;
	box-shadow: var(--n-shadow) !important;
}

@media (max-width: 768px) {
	html body.site-s2 #mainProfile { padding: 18px !important; }
	html body.site-s2 #mainProfile .profileSettings { grid-template-columns: 1fr; gap: 0; }
	html body.site-s2 #right #mainProfile #personalForm .profileSettings li a.submit { width: 100% !important; }
}

/* =====================================================================
   АДМИН-ПАНЕЛЬ БИТРИКСА (для залогиненных сотрудников)
   Меню панели — всплывашка с z-index: 1050 !important прямо в атрибуте,
   поэтому при наличии панели шапка опускается до 1040, панель — 1045.
   Шапка прилипает под закреплённой панелью: --nout-sticky-top ставит скрипт в шапке.
   ===================================================================== */
html body.site-s2 #bx-panel { z-index: 1045 !important; }
html body.site-s2:has(#bx-panel) .nout-header { z-index: 1040 !important; }
html body.site-s2 .nout-header { top: var(--nout-sticky-top, 0px) !important; }

/* Карточки каталога с выбором конфигурации (ОЗУ/SSD): выпадающий список не обрезается краем карточки
   (в template_styles.css у карточки overflow: hidden) и не уходит под соседнюю карточку. */
html body.site-s2 .productList .item.product.sku .tabloid { overflow: visible !important; }
html body.site-s2 .productList .item.product .tabloid:hover,
html body.site-s2 .productList .item.product .tabloid:focus-within { z-index: 30 !important; }
html body.site-s2 .productList .oSkuDropdownList { z-index: 40 !important; }

/* ---------- SEO-тексты: под товарами раздела и внизу главной ---------- */
body.site-s2 .nout-seo-text {
	margin: 28px 0 0;
	padding: 28px 32px;
	border-radius: 20px;
	background: #fff;
	box-shadow: var(--n-shadow);
	color: #33465e;
	font: 15px/1.65 robotoregular, arial, sans-serif;
}
body.site-s2 .nout-seo-text h2 { margin: 0 0 12px; padding: 0; border: 0; color: #0c305b; font: 22px/1.3 robotobold, arial, sans-serif; }
body.site-s2 .nout-seo-text h3 { margin: 20px 0 8px; padding: 0; color: #0c305b; font: 17px/1.35 robotobold, arial, sans-serif; }
body.site-s2 .nout-seo-text p { margin: 0 0 12px; }
body.site-s2 .nout-seo-text ul { margin: 0 0 12px; padding-left: 20px; }
body.site-s2 .nout-seo-text li { margin: 0 0 6px; }
body.site-s2 .nout-seo-text a { color: var(--n-blue); }
body.site-s2 .nout-seo-text strong { color: #0c305b; font-family: robotomedium, robotobold, arial, sans-serif; font-weight: normal; }
body.site-s2 .nout-seo-text > :last-child { margin-bottom: 0; }
body.site-s2 .nout-home-seo__links { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 4px !important; padding: 0 !important; list-style: none; }
body.site-s2 .nout-home-seo__links li { margin: 0; }
body.site-s2 .nout-home-seo__links a { display: inline-flex; padding: 8px 14px; border-radius: 999px; background: #eef5ff; color: var(--n-blue); font-size: 14px; line-height: 1.2; text-decoration: none; transition: background .15s ease, color .15s ease; }
body.site-s2 .nout-home-seo__links a:hover { background: var(--n-blue); color: #fff; }
body.site-s2 .nout-home-seo__faq details { border-top: 1px solid #e3ebf5; }
body.site-s2 .nout-home-seo__faq details:last-child { border-bottom: 1px solid #e3ebf5; }
body.site-s2 .nout-home-seo__faq summary { position: relative; padding: 14px 32px 14px 0; color: #0c305b; font: 15px/1.4 robotomedium, robotobold, arial, sans-serif; cursor: pointer; list-style: none; }
body.site-s2 .nout-home-seo__faq summary::-webkit-details-marker { display: none; }
body.site-s2 .nout-home-seo__faq summary::after { content: "+"; position: absolute; top: 50%; right: 4px; transform: translateY(-50%); color: var(--n-blue); font-size: 22px; line-height: 1; }
body.site-s2 .nout-home-seo__faq details[open] summary::after { content: "−"; }
body.site-s2 .nout-home-seo__faq details p { margin: 0 0 14px; }
@media (max-width: 768px) {
	body.site-s2 .nout-seo-text { margin-top: 18px; padding: 20px 18px; border-radius: 16px; font-size: 14px; }
	body.site-s2 .nout-seo-text h2 { font-size: 19px; }
}