/* ==========================================================================
   PLASTSERVIS - CATALOG.ITEM
   Corporate Minimalist Style (0px border-radius, Navy #121D2D, Cyan #05AEE9)
   ========================================================================== */

:root {
	--ps-dark: #121D2D;
	--ps-accent: #05AEE9;
	--ps-accent-hover: #121D2D;
	--ps-border: #E5E7EB;
	--ps-border-hover: #05AEE9;
	--ps-bg-card: #FFFFFF;
	--ps-bg-img: #F8FAFC;
	--ps-text-main: #1A202C;
	--ps-text-muted: #6B7280;
	--ps-discount: #E11D48;
	--ps-font-main: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
	--ps-font-heading: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* 1. Карточка товара */
.product-item-container {
	position: relative;
	height: 100% !important;
	margin-bottom: 24px !important;
}

.product-item {
	display: flex !important;
	flex-direction: column !important;
	/* justify-content: space-between !important; */
	box-sizing: border-box !important;
	height: 100% !important;
	width: 100% !important;
	background: #FFFFFF !important;
	border: 1px solid var(--ps-border) !important;
	border-top: 3px solid var(--ps-accent) !important;
	border-radius: 0px !important;
	padding: 16px !important;
	box-shadow: 0 2px 8px rgba(18, 29, 45, 0.04) !important;
	transition: transform 0.25s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.25s ease, border-color 0.25s ease !important;
	position: relative;
	overflow: hidden;
}

.product-item:hover,
.product-item-container:hover .product-item {
	border-color: var(--ps-accent) !important;
	box-shadow: 0 10px 24px rgba(18, 29, 45, 0.1) !important;
	transform: translateY(-4px) !important;
	z-index: 5;
}

/* Отключение старой прыгающей анимации Bitrix */
.bx-no-touch .product-item-container.hover .product-item {
	position: relative !important;
	right: auto !important;
	left: auto !important;
	padding: 16px !important;
	width: 100% !important;
	animation: none !important;
}

/* 2. Область изображения товара */
.product-item-image-wrapper {
	position: relative;
	display: block;
	width: 100%;
	padding-top: 90%; /* Оптимальная пропорция для карточки товара */
	margin-bottom: 14px;
	background-color: var(--ps-bg-img);
	border-radius: 0px !important;
	overflow: hidden;
	text-decoration: none;
}

.product-item-image-original,
.product-item-image-alternative,
.product-item-image-slide {
	position: absolute;
	top: 8px;
	right: 8px;
	bottom: 8px;
	left: 8px;
	width: calc(100% - 16px);
	height: calc(100% - 16px);
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	image-rendering: -webkit-optimize-contrast;
	transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.3s ease;
}

.product-item:hover .product-item-image-original,
.product-item:hover .product-item-image-alternative,
.product-item:hover .product-item-image-slide {
	transform: scale(1.06);
}

.product-item-image-original {
	z-index: 2;
}

.product-item-image-alternative {
	z-index: 3;
	opacity: 0;
}

.product-item-container:hover .product-item-image-alternative {
	opacity: 1;
}

/* Слайдер доп. фото (если включен) */
.product-item-image-slider-slide-container {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: block;
	overflow: hidden;
	width: 100%;
	height: 100%;
}

.product-item-image-slider-slide-container > .active {
	display: block;
	left: 0;
}

.product-item-image-slider-control-container {
	position: absolute;
	right: 0;
	bottom: 6px;
	left: 0;
	z-index: 15;
	display: flex;
	justify-content: center;
	gap: 4px;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.product-item:hover .product-item-image-slider-control-container {
	opacity: 1;
}

.product-item-image-slider-control {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: rgba(18, 29, 45, 0.3);
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.product-item-image-slider-control.active,
.product-item-image-slider-control:hover {
	background-color: var(--ps-accent);
}

/* 3. Бейджи: Скидка и Стикеры */
.product-item-label-ring {
	position: absolute !important;
	top: 8px !important;
	left: 8px !important;
	z-index: 10;
	background-color: var(--ps-discount) !important;
	color: #FFFFFF !important;
	font-family: var(--ps-font-heading) !important;
	font-size: 11.5px !important;
	font-weight: 700 !important;
	letter-spacing: 0.3px;
	padding: 3px 8px !important;
	border-radius: 0px !important;
	width: auto !important;
	height: auto !important;
	line-height: normal !important;
	box-shadow: 0 2px 6px rgba(225, 29, 72, 0.35);
}

.product-item-label-ring span {
	background: transparent !important;
	color: #FFFFFF !important;
	padding: 0 !important;
}

.product-item-label-text {
	position: absolute !important;
	top: 8px !important;
	right: 8px !important;
	z-index: 10;
}

.product-item-label-text span {
	display: inline-block;
	background-color: var(--ps-dark) !important;
	color: #FFFFFF !important;
	font-family: var(--ps-font-heading) !important;
	font-size: 10.5px !important;
	font-weight: 700 !important;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 3px 8px !important;
	border-radius: 0px !important;
	margin-bottom: 4px;
	box-shadow: 0 2px 6px rgba(18, 29, 45, 0.25);
}

/* 4. Блок цены */
.product-item-price-container {
	display: flex !important;
	align-items: baseline !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
	margin: auto 0 10px 0 !important;
	text-align: left !important;
}

.product-item-price-current {
	font-family: var(--ps-font-heading) !important;
	font-size: 19px !important;
	font-weight: 700 !important;
	color: var(--ps-dark) !important;
	white-space: nowrap;
	line-height: 1.2;
}

.product-item-price-old {
	font-family: var(--ps-font-main) !important;
	font-size: 13px !important;
	color: var(--ps-text-muted) !important;
	text-decoration: line-through !important;
	white-space: nowrap;
}

/* 5. Название товара */
.product-item-title {
	margin: 0 0 14px 0 !important;
	padding: 0 !important;

	line-height: 1 !important;
	text-align: left !important;
	/* height: 40px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	white-space: normal !important; */
}

.product-item-title a {
	font-family: var(--ps-font-main) !important;
	font-size: 16px !important;
	font-weight: 500 !important;

	color: var(--ps-text-main) !important;
	text-decoration: none !important;
	transition: color 0.2s ease;
}

.product-item:hover .product-item-title a,
.product-item-title a:hover {
	color: var(--ps-accent) !important;
}

/* 6. Постоянная видимость ключевых блоков (отмена скрытия Bitrix) */
.bx-no-touch .product-item-container .product-item-info-container.product-item-hidden:not([style*="display: none"]):not([style*="display:none"]),
.product-item-info-container.product-item-hidden:not([style*="display: none"]):not([style*="display:none"]) {
	display: block !important;
	opacity: 1 !important;
}

.product-item-info-buttons {
	/* margin-top: auto; */
}

/* Наличие / остаток */
.product-item-quantity {
	font-family: var(--ps-font-main);
	font-size: 12px;
	color: var(--ps-text-muted);
}

/* 7. Блок количества (+ / -) */
.product-item-amount {
	margin: 0 0 12px 0;
	padding: 0;
}

.product-item-amount-field-container {
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 120px;
	margin: 0 auto;
	border: 1px solid var(--ps-border);
	border-radius: 0px !important;
	background: #FFFFFF;
}

.product-item-amount-field-btn-minus,
.product-item-amount-field-btn-plus {
	width: 32px;
	height: 32px;
	line-height: 32px;
	background-color: #F8FAFC;
	color: var(--ps-dark);
	border: none;
	border-radius: 0px !important;
	cursor: pointer;
	font-size: 16px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s ease;
}

.product-item-amount-field-btn-minus:hover,
.product-item-amount-field-btn-plus:hover {
	background-color: #E2E8F0;
	color: var(--ps-accent);
}

.product-item-amount-field-btn-plus:after,
.product-item-amount-field-btn-minus:after {
	display: none;
}

.product-item-amount-field-btn-minus::before {
	content: "−";
}

.product-item-amount-field-btn-plus::before {
	content: "+";
}

.product-item-amount-field {
	width: 50px;
	height: 32px;
	line-height: 32px;
	border: none;
	text-align: center;
	font-family: var(--ps-font-main);
	font-size: 14px;
	font-weight: 600;
	color: var(--ps-dark);
}

/* 8. Кнопка "В корзину" / "Подробнее" */
.product-item-button-container {
	margin-top: auto;
	width: 100%;
}

/* Строго уважаем скрытие кнопок от Bitrix (по наличию/отсутствию товара) */
.product-item-button-container [style*="display: none"],
.product-item-button-container [style*="display:none"],
.product-item-button-container button[style*="display: none"],
.product-item-button-container button[style*="display:none"],
.product-item-button-container div[style*="display: none"],
.product-item-button-container div[style*="display:none"] {
	display: none !important;
}

.product-item-button-container .btn-primary,
.product-item-button-container .btn-link,
.product-item-button-container button,
.product-item-button-container a.btn {
	width: 100% !important;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 0px !important;
	background-color: var(--ps-accent) !important;
	border: 1px solid var(--ps-accent) !important;
	color: #FFFFFF !important;
	font-family: var(--ps-font-heading) !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px;
	padding: 11px 16px !important;
	box-shadow: 0 2px 6px rgba(5, 174, 233, 0.25) !important;
	cursor: pointer;
	transition: all 0.2s ease !important;
	text-decoration: none !important;
}

.product-item-button-container .btn-primary:hover,
.product-item-button-container button:hover,
.product-item-button-container a.btn:hover {
	background-color: var(--ps-dark) !important;
	border-color: var(--ps-dark) !important;
	box-shadow: 0 4px 12px rgba(18, 29, 45, 0.15) !important;
	color: #FFFFFF !important;
}

.product-item-button-container .btn-link {
	background-color: var(--ps-dark) !important;
	border-color: var(--ps-dark) !important;
	color: #FFFFFF !important;
}

.product-item-button-container .btn-link:hover {
	background-color: var(--ps-accent) !important;
	border-color: var(--ps-accent) !important;
}

/* 9. Торговые предложения (SKU) */
.product-item-scu-container {
	margin: 0 0 14px 0 !important;
	text-align: left !important;
}

.product-item-scu-block-title {
	font-family: var(--ps-font-heading) !important;
	font-size: 11.5px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
	color: var(--ps-text-muted) !important;
	margin-bottom: 6px !important;
	line-height: 1.2 !important;
	display: block !important;
}

.product-item-scu-block {
	display: block !important;
	width: 100% !important;
}

.product-item-scu-list {
	width: 100% !important;
}

.product-item-scu-item-list {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 6px !important;
	margin: 0 0 8px 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

/* Текстовые варианты SKU (размеры, цвета текстом) */
.product-item-scu-item-text-container {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	border: 1px solid var(--ps-border) !important;
	background-color: #FFFFFF !important;
	border-radius: 0px !important;
	cursor: pointer !important;
	transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
	user-select: none;
}

.product-item-scu-item-text-block {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 5px 12px !important;
	min-width: 32px !important;
	height: 28px !important;
	box-sizing: border-box !important;
}

.product-item-scu-item-text {
	font-family: var(--ps-font-main) !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	color: var(--ps-text-main) !important;
	line-height: 1 !important;
	white-space: nowrap !important;
	transition: color 0.2s ease !important;
}

.product-item-scu-item-text-container:hover {
	border-color: var(--ps-accent) !important;
	background-color: #F0F9FF !important;
}

.product-item-scu-item-text-container:hover .product-item-scu-item-text {
	color: var(--ps-accent) !important;
}

/* Активное выбранное свойство */
.product-item-scu-item-text-container.selected {
	border-color: var(--ps-accent) !important;
	background-color: var(--ps-dark) !important;
	box-shadow: 0 2px 6px rgba(18, 29, 45, 0.25) !important;
}

.product-item-scu-item-text-container.selected .product-item-scu-item-text {
	color: #FFFFFF !important;
	font-weight: 700 !important;
}

/* Недоступное свойство */
.product-item-scu-item-text-container.notallowed,
.product-item-scu-item-text-container.disabled {
	opacity: 0.35 !important;
	cursor: not-allowed !important;
	border-style: dashed !important;
	background-color: #F8FAFC !important;
}

.product-item-scu-item-text-container.notallowed:hover,
.product-item-scu-item-text-container.disabled:hover {
	border-color: var(--ps-border) !important;
	background-color: #F8FAFC !important;
}

.product-item-scu-item-text-container.notallowed .product-item-scu-item-text,
.product-item-scu-item-text-container.disabled .product-item-scu-item-text {
	color: var(--ps-text-muted) !important;
}

/* Свойства с картинкой/цветом (PICT) */
.product-item-scu-item-color-container {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 2px !important;
	margin: 0 !important;
	list-style: none !important;
	border: 1px solid var(--ps-border) !important;
	background-color: #FFFFFF !important;
	border-radius: 0px !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
}

.product-item-scu-item-color-block {
	width: 26px !important;
	height: 26px !important;
	border-radius: 0px !important;
	overflow: hidden !important;
}

.product-item-scu-item-color {
	width: 100% !important;
	height: 100% !important;
	background-size: cover !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	border-radius: 0px !important;
}

.product-item-scu-item-color-container:hover {
	border-color: var(--ps-accent) !important;
	transform: scale(1.08);
}

.product-item-scu-item-color-container.selected {
	border-color: var(--ps-accent) !important;
	outline: 2px solid var(--ps-accent) !important;
	outline-offset: 1px !important;
}

.product-item-scu-item-color-container.notallowed,
.product-item-scu-item-color-container.disabled {
	opacity: 0.3 !important;
	cursor: not-allowed !important;
}

/* 10. Адаптивность для мобильных устройств */
@media (max-width: 575px) {
	.product-item {
		padding: 12px !important;
	}

	.product-item-price-current {
		font-size: 16px !important;
	}

	.product-item-title {
		font-size: 13px !important;
		height: 36px;
	}

	.product-item-scu-item-text-block {
		padding: 4px 8px !important;
		min-width: 28px !important;
		height: 24px !important;
	}

	.product-item-scu-item-text {
		font-size: 11px !important;
	}

	.product-item-button-container .btn-primary,
	.product-item-button-container button,
	.product-item-button-container a.btn {
		font-size: 12px !important;
		padding: 9px 12px !important;
	}
}