/* Раздел каталога, виды «Список» и «Таблица» на обоих сайтах: конфигурации ноутбука (память / накопитель)
   тем же блоком, что в плитке (разметка — /local/php_interface/ul_item_configs.php, базовые стили чипов —
   ul-catalog-chips.css), и обновлённая вёрстка строк. Плюс «Быстрый просмотр» на NOUT.KG по центру фото.
   Подключается на всех публичных страницах (ul_eleed_offers.php, OnProlog) — после стилей шаблонов. */

/* ---------- Конфигурации в списке: места много — видны все варианты, без «+N» ---------- */
.itemRow .ulSkuBox { height: auto !important; overflow: visible; }
.itemRow .ulSkuBoxLine { display: grid; gap: 10px; margin: 4px 0 0; }
.itemRow .ulSkuBoxLine .skuProperty.ulSkuChips { display: block !important; margin: 0 !important; }
.itemRow .ulSkuBoxLine .skuPropertyName { margin: 0 0 5px !important; font-size: 12px !important; line-height: 16px !important; }
.itemRow .ulSkuBoxLine .ulChipRow { display: block; }
.itemRow .ulSkuBoxLine .skuPropertyList { flex-wrap: wrap !important; gap: 6px !important; overflow: visible !important; }
.itemRow .ulSkuBoxLine .skuPropertyValue.ulChipHidden,
.itemRow .ulSkuBoxLine .skuPropertyValue.ulChipLast { display: block !important; }
.itemRow .ulSkuBoxLine .ulChipMore { display: none !important; }
.itemRow .ulSkuBoxLine .skuPropertyLink {
	height: 30px !important;
	padding: 0 12px !important;
	border-radius: 8px !important;
	font-size: 13px !important;
	line-height: 28px !important;
}
/* Без конфигураций — память и накопитель плашками */
.itemRow .ulSkuBoxLine.ulSkuBoxSpecs { display: flex; flex-wrap: nowrap; gap: 8px; }
/* Плашки делят ширину поровну и всегда стоят рядом (колонка узкая, когда слева фильтр) */
.itemRow .ulSkuBoxLine.ulSkuBoxSpecs .ulSpecRow {
	flex: 1 1 0;
	flex-direction: column;
	justify-content: flex-start;
	gap: 2px;
	min-width: 0;
	max-width: 170px;
	padding: 7px 12px;
	border: 1px solid #e3eaf2;
	border-radius: 10px;
	background: #f8fafc;
}
.itemRow .ulSkuBoxLine.ulSkuBoxSpecs .ulSpecLabel { font-size: 11px; }
.itemRow .ulSkuBoxLine.ulSkuBoxSpecs .ulSpecValue { font-size: 14px; text-align: left; }
/* Метка «Апгрейд до …» на фото */
#catalogLineList .itemRow .column:first-child { position: relative; }
#catalogLineList .itemRow .ulUpgradeBadge { right: 10px; bottom: 10px; }

/* ---------- Конфигурации в таблице: компактно, в строку под названием ---------- */
.itemRow .ulSkuBoxCompact { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 6px 0 0; }
.itemRow .ulSkuBoxCompact .skuProperty.ulSkuChips { display: flex !important; align-items: center; gap: 6px; margin: 0 !important; }
.itemRow .ulSkuBoxCompact .skuPropertyName { margin: 0 !important; font-size: 11px !important; }
.itemRow .ulSkuBoxCompact .skuPropertyLink,
.itemRow .ulSkuBoxCompact .ulChipMore { height: 24px !important; padding: 0 8px !important; font-size: 12px !important; line-height: 22px !important; }
.itemRow .ulSkuBoxCompact.ulSkuBoxSpecs .ulSpecRow { justify-content: flex-start; gap: 5px; padding: 0; border: 0; }

/* =====================================================================================================
   Общее для обоих сайтов: цвета, кнопка «В корзину», наличие плашкой, избранное и сравнение — кнопками-иконками
   ===================================================================================================== */
html body.site-s2 #catalogLineList,
html body.site-s2 #catalogTableList { --ul-accent: #0b74de; --ul-accent-soft: #eef6ff; --ul-line: #e1e9f2; }
body:not(.site-s2) #catalogLineList,
body:not(.site-s2) #catalogTableList { --ul-accent: #ed1c24; --ul-accent-soft: #fdeeee; --ul-line: #e6e6e6; }

/* «В корзину»: значок и надпись по центру (у шаблона высота строки больше высоты кнопки — надпись уезжала вниз) */
html body #catalogLineList .addCart,
html body #catalogTableList .addCart {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	line-height: 1.2 !important;
}
html body #catalogLineList .addCart .icon,
html body #catalogTableList .addCart .icon { width: 16px !important; height: 16px !important; margin: 0 !important; vertical-align: middle; }

/* Наличие — плашкой, без значка: зелёная «В наличии», жёлтая «Под заказ», серая «Нет в наличии» */
html body #catalogLineList .optional .label.changeAvailable,
html body #catalogTableList .optional .label.changeAvailable {
	display: inline-flex !important;
	align-items: center;
	width: auto !important;
	height: 24px !important;
	margin: 0 !important;
	padding: 0 10px !important;
	border: 0 !important;
	border-radius: 999px;
	background: #e9f7ef;
	color: #13804a !important;
	font-size: 12px !important;
	line-height: 24px !important;
	white-space: nowrap;
	text-decoration: none !important;
}
html body #catalogLineList .optional .label.changeAvailable .icon,
html body #catalogTableList .optional .label.changeAvailable .icon { display: none !important; }
html body #catalogLineList .optional .label.onOrder,
html body #catalogTableList .optional .label.onOrder { background: #fff5e0; color: #9a5b00 !important; }
html body #catalogLineList .optional .label.outOfStock,
html body #catalogTableList .optional .label.outOfStock { background: #f1f3f5; color: #6b7785 !important; }

/* Избранное, сравнение (и «Купить в 1 клик» в таблице) — квадратные кнопки со значком; подпись — в подсказке */
html body #catalogLineList .optional .label.addWishlist,
html body #catalogLineList .optional .label.addCompare,
html body #catalogTableList .optional .label.addWishlist,
html body #catalogTableList .optional .label.addCompare,
html body #catalogTableList .optional .label.quickBuy {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 34px !important;
	height: 34px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid var(--ul-line) !important;
	border-radius: 9px;
	background: #fff;
	font-size: 0 !important;
	line-height: 0 !important;
	transition: border-color .15s, background .15s;
}
html body #catalogLineList .optional .label.addWishlist:hover,
html body #catalogLineList .optional .label.addCompare:hover,
html body #catalogTableList .optional .label.addWishlist:hover,
html body #catalogTableList .optional .label.addCompare:hover,
html body #catalogTableList .optional .label.quickBuy:hover { border-color: var(--ul-accent) !important; background: var(--ul-accent-soft); }
html body #catalogLineList .optional .label.addWishlist .icon,
html body #catalogLineList .optional .label.addCompare .icon,
html body #catalogTableList .optional .label .icon { width: 16px !important; height: 16px !important; margin: 0 !important; opacity: .75; }

/* ---------- Список: под кнопкой — плашка наличия, ниже «Купить в 1 клик» и две кнопки-иконки ---------- */
html body #catalogLineList .optional {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px !important;
	margin: 0 !important;
}
html body #catalogLineList .optional::before { content: ""; order: 0; flex-basis: 100%; height: 0; }
html body #catalogLineList .optional .row { display: contents !important; }
html body #catalogLineList .optional .label { order: 1; float: none !important; }
html body #catalogLineList .optional .label.changeAvailable { order: -1; }
html body #catalogLineList .optional .label.quickBuy {
	display: inline-flex !important;
	align-items: center;
	flex: 1 1 auto;
	justify-content: center;
	width: auto !important;
	height: 34px !important;
	margin: 0 !important;
	padding: 0 10px !important;
	border: 1px solid var(--ul-line) !important;
	border-radius: 9px;
	background: #fff;
	color: var(--ul-accent) !important;
	font-size: 12.5px !important;
	line-height: 1 !important;
	white-space: nowrap;
	text-decoration: none !important;
	transition: border-color .15s, background .15s;
}
html body #catalogLineList .optional .label.quickBuy:hover { border-color: var(--ul-accent) !important; background: var(--ul-accent-soft); }
html body #catalogLineList .optional .label.quickBuy .icon { display: none !important; }
html body #catalogLineList .optional .label.quickBuy.disabled { opacity: .45; pointer-events: none; }

/* ---------- Таблица (компьютер): фото | название и конфигурации | цена | «В корзину» | 3 кнопки | наличие ----------
   Колонки «действия» и «наличие» раскрыты (display: contents): кнопки и плашка встают в сетку строки по отдельности */
@media (min-width: 701px) {
	html body #catalogTableList .itemRow > .column:nth-child(7),
	html body #catalogTableList .itemRow > .column:nth-child(8),
	html body #catalogTableList .itemRow > .column:nth-child(7) .optional,
	html body #catalogTableList .itemRow > .column:nth-child(8) .optional,
	html body #catalogTableList .itemRow > .column:nth-child(7) .row,
	html body #catalogTableList .itemRow > .column:nth-child(8) .row { display: contents !important; }
	html body #catalogTableList .optional .label { align-self: center; justify-self: center; }
	html body #catalogTableList .optional .label.changeAvailable { justify-self: start; }
	/* Фото — с полями внутри рамки, не вплотную к краю строки и к названию */
	html body #catalogTableList .itemRow > .column:first-child { padding: 0 !important; }
	html body #catalogTableList .picture {
		display: flex !important;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		width: 64px !important;
		height: 64px !important;
		margin: 0 auto !important;
		padding: 6px !important;
		border: 1px solid var(--ul-line);
		border-radius: 10px;
		background: #fff !important;
	}
	html body #catalogTableList .picture img { max-width: 100% !important; max-height: 100% !important; object-fit: contain; }
}

/* =====================================================================================================
   NOUT.KG (шаблон dresscode_dev)
   ===================================================================================================== */

/* «Быстрый просмотр»: стили шаблона сдвигали кнопку и отступом, и transform — она уезжала влево за фото */
html body.site-s2 #catalog .items.productList .product .getFastView,
html body.site-s2 #catalogLineList .picture .getFastView { margin-left: 0 !important; transform: translateX(-50%) !important; }

/* Список: фото | название и конфигурации | цена и покупка */
html body.site-s2 #catalogLineList .itemRow {
	grid-template-columns: 200px minmax(0, 1fr) 250px !important;
	margin-bottom: 14px !important;
	border-color: #e1e9f2 !important;
	border-radius: 14px !important;
	box-shadow: 0 6px 20px rgb(36 78 124 / 6%) !important;
}
html body.site-s2 #catalogLineList .itemRow:hover { border-color: #b9d8f5 !important; box-shadow: 0 14px 34px rgb(16 96 172 / 12%) !important; }
/* Шаблон на широком экране делает строку таблицей (display: table / table-cell) — сетка нужна при любой ширине */
html body.site-s2 #catalogLineList .itemRow { display: grid !important; width: auto !important; }
html body.site-s2 #catalogLineList .itemRow > .column {
	display: block !important;
	float: none !important;
	width: auto !important;
	height: auto !important;
	padding: 20px 22px !important;
	line-height: normal;
}
html body.site-s2 #catalogLineList .itemRow > .column:first-child {
	display: flex !important;
	align-items: center;
	justify-content: center;
	padding: 16px !important;
	background: #fff !important;
	border-right: 1px solid #edf2f7 !important;
}
/* Фото — в рамке с полями, не вплотную */
html body.site-s2 #catalogLineList .picture {
	display: flex !important;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100% !important;
	height: 156px !important;
	padding: 14px !important;
	border: 1px solid #edf2f7 !important;
	border-radius: 12px;
	background: #fff !important;
}
html body.site-s2 #catalogLineList .picture img { max-width: 100% !important; max-height: 100% !important; object-fit: contain; }
html body.site-s2 #catalogLineList .name {
	display: -webkit-box !important;
	overflow: hidden;
	margin: 0 0 12px !important;
	font-size: 17px !important;
	line-height: 24px !important;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}
html body.site-s2 #catalogLineList .name .middle { display: inline !important; }
html body.site-s2 #catalogLineList .itemRow > .column:last-child {
	display: flex !important;
	flex-direction: column;
	justify-content: center;
	padding: 20px !important;
	background: #f8fbfe !important;
	border-left: 1px solid #edf2f7 !important;
}
html body.site-s2 #catalogLineList .resizeColumn { float: none !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; }
html body.site-s2 #catalogLineList .price { display: block !important; margin: 0 0 12px !important; font-size: 24px !important; line-height: 30px !important; }
html body.site-s2 #catalogLineList .price .discount { display: block; margin-top: 2px; font-size: 14px; line-height: 18px; }
html body.site-s2 #catalogLineList .addCart { height: 46px !important; margin: 0 0 12px !important; border-radius: 10px !important; font-size: 15px !important; }
html body.site-s2 #catalogLineList .article { margin-top: 10px !important; font-size: 12px; }

/* Таблица */
@media (min-width: 701px) {
	html body.site-s2 #catalogTableList .itemRow { display: grid !important; width: auto !important; margin: 0 !important; }
	html body.site-s2 #catalogTableList .itemRow > .column:nth-child(-n+2),
	html body.site-s2 #catalogTableList .itemRow > .column:nth-child(5),
	html body.site-s2 #catalogTableList .itemRow > .column:nth-child(6) { display: block !important; float: none !important; width: auto !important; height: auto !important; }
}
html body.site-s2 #catalogTableList .itemRow {
	grid-template-columns: 64px minmax(0, 1fr) 124px 150px 34px 34px 34px 104px !important;
	column-gap: 10px !important;
	align-items: center !important;
	padding: 10px 14px !important;
	border-color: #e1e9f2 !important;
	border-radius: 12px !important;
	box-shadow: 0 4px 14px rgb(36 78 124 / 5%) !important;
}
html body.site-s2 #catalogTableList .itemRow > .column:nth-child(3),
html body.site-s2 #catalogTableList .itemRow > .column:nth-child(4),
html body.site-s2 #catalogTableList .itemRow > .column.out { display: none !important; }
html body.site-s2 #catalogTableList .column { padding: 4px 0 !important; }
html body.site-s2 #catalogTableList .name {
	display: -webkit-box !important;
	overflow: hidden;
	font-family: robotomedium, robotobold, arial, sans-serif;
	font-size: 14px !important;
	line-height: 19px !important;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}
html body.site-s2 #catalogTableList .price { font-size: 18px !important; white-space: nowrap; }
html body.site-s2 #catalogTableList .addCart { width: 100% !important; height: 40px !important; border-radius: 10px !important; }

@media (max-width: 1180px) {
	html body.site-s2 #catalogTableList .itemRow { grid-template-columns: 64px minmax(0, 1fr) 120px 140px !important; }
	html body #catalogTableList .itemRow > .column:nth-child(7),
	html body #catalogTableList .itemRow > .column:nth-child(8) { display: none !important; }
	html body.site-s2 #catalogLineList .itemRow { grid-template-columns: 190px minmax(0, 1fr) !important; }
	html body.site-s2 #catalogLineList .itemRow > .column:last-child {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 10px 18px;
		border-left: 0 !important;
		border-top: 1px solid #edf2f7 !important;
	}
	html body.site-s2 #catalogLineList .price { margin: 0 !important; }
	html body.site-s2 #catalogLineList .addCart { width: 200px !important; margin: 0 !important; }
	html body.site-s2 #catalogLineList .resizeColumn.last { flex: 1 1 240px; }
}
@media (max-width: 700px) {
	html body.site-s2 #catalogLineList .itemRow { grid-template-columns: 110px minmax(0, 1fr) !important; border-radius: 12px !important; }
	html body.site-s2 #catalogLineList .itemRow > .column { padding: 12px !important; }
	html body.site-s2 #catalogLineList .itemRow > .column:first-child { align-items: flex-start !important; padding: 10px !important; border-right: 0 !important; }
	html body.site-s2 #catalogLineList .picture { height: 90px !important; padding: 6px !important; }
	html body.site-s2 #catalogLineList .name { font-size: 14px !important; line-height: 19px !important; }
	html body.site-s2 #catalogLineList .ulUpgradeBadge { display: none; }
	/* Цена слева, «В корзину» справа — одной строкой под карточкой */
	html body.site-s2 #catalogLineList .itemRow > .column:last-child {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 10px;
		height: auto !important;
		overflow: visible !important;
		padding: 10px 12px !important;
	}
	html body.site-s2 #catalogLineList .price { font-size: 20px !important; line-height: 24px !important; text-align: left !important; }
	html body.site-s2 #catalogLineList .addCart { width: auto !important; height: 42px !important; padding: 0 18px !important; }
	html body.site-s2 #catalogLineList .resizeColumn.last,
	html body.site-s2 #catalogLineList .article { display: none !important; }
	/* Таблица на телефоне — карточка по центру: чипы тоже по центру */
	.itemRow .ulSkuBoxCompact { justify-content: center; }
	.itemRow .ulSkuBoxLine .skuPropertyLink { height: 26px !important; padding: 0 8px !important; font-size: 12px !important; line-height: 24px !important; }
}

/* =====================================================================================================
   ULTRA.KG (шаблон dresscode): фирменный красный, светлые карточки
   ===================================================================================================== */
body:not(.site-s2) #catalogLineList .itemRow { border-radius: 10px; transition: box-shadow .2s ease, border-color .2s ease; }
body:not(.site-s2) #catalogLineList .itemRow:hover { box-shadow: 0 12px 28px rgba(17, 24, 39, .10); }
body:not(.site-s2) #catalogLineList .name {
	display: -webkit-box !important;
	overflow: hidden;
	margin-bottom: 10px;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}
body:not(.site-s2) #catalogLineList .name .middle { display: inline !important; }
body:not(.site-s2) #catalogLineList .addCart { border-radius: 8px !important; }
body:not(.site-s2) #catalogLineList .column:first-child { position: relative; }
body:not(.site-s2) #catalogTableList .itemRow:hover { box-shadow: 0 8px 20px rgba(17, 24, 39, .08); }
body:not(.site-s2) .itemRow .ulSkuBoxLine.ulSkuBoxSpecs .ulSpecRow { background: #fafafa; border-color: #ececec; }

/* Таблица ULTRA (компьютер); на телефоне — карточка шаблона dresscode как была */
@media (min-width: 701px) {
	body:not(.site-s2) #catalogTableList .itemRow {
		display: grid !important;
		grid-template-columns: 64px minmax(0, 1fr) 124px 150px 34px 34px 34px 104px;
		column-gap: 10px;
		align-items: center;
		height: auto !important;
		margin: 0 0 12px !important;
		padding: 10px 14px !important;
		border-radius: 10px;
	}
	body:not(.site-s2) #catalogTableList .itemRow > .column:nth-child(-n+2),
	body:not(.site-s2) #catalogTableList .itemRow > .column:nth-child(5),
	body:not(.site-s2) #catalogTableList .itemRow > .column:nth-child(6) {
		display: block !important;
		float: none !important;
		width: auto !important;
		height: auto !important;
		padding: 4px 0 !important;
	}
	body:not(.site-s2) #catalogTableList .itemRow > .column:nth-child(3),
	body:not(.site-s2) #catalogTableList .itemRow > .column:nth-child(4),
	body:not(.site-s2) #catalogTableList .itemRow > .column.out { display: none !important; }
	body:not(.site-s2) #catalogTableList .name {
		display: -webkit-box !important;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
	}
	body:not(.site-s2) #catalogTableList .price { white-space: nowrap; }
	body:not(.site-s2) #catalogTableList .addCart { width: 100% !important; border-radius: 8px !important; }
}
@media (min-width: 701px) and (max-width: 1180px) {
	body:not(.site-s2) #catalogTableList .itemRow { grid-template-columns: 64px minmax(0, 1fr) 120px 140px; }
}