/*? Debug */
/*! Debug - Start */
#debug-icon {
	left: 0;
	right: auto;
}
#debug-icon a {
	display: block;
}
@media (max-width: 1199.98px) {
	#debug-bar .ci-label a {
		padding: 0px 6px;
	}
}
@media (max-width: 1024.98px) {
	#debug-bar .ci-label a {
		padding: 0px 10px;
	}
}
@media (max-width: 575.98px) {
	#debug-bar .ci-label a {
		padding: 0px 6px;
	}
}
@media (max-width: 420.98px) {
	#debug-bar .ci-label a {
		padding: 0px 4px;
	}
	#debug-bar #toolbar-position,
	#debug-bar #toolbar-theme {
		padding: 0 2px;
	}
}
@media (max-width: 374.98px) {
	#debug-bar .ci-label a {
		padding: 0px 2px;
	}
}
/*! Debug - End */

/*? Validation */
/*! Validation - Start */
.iti {
	width: 100%;
}
.iti .iti__selected-flag {
	padding: 0 12px;
}
.error,
._error {
	color: #dc0814;
}
.error-message {
	font-size: 12px;
	font-weight: 500;
	margin-top: 4px;
	padding: 4px 8px;
	border-radius: 4px;
}
.error-message::before {
	content: '⚠';
	margin-right: 4px;
	font-size: 10px;
}
._btn._sending {
	opacity: 0.5;
	cursor: not-allowed;
}
.select-wrapper .select__title._error {
	border-color: #dc0814;
}
.checkbox-wrapper_content._error + .checkbox__text::before {
	border-color: #dc0814;
}
/*! Validation - End */

/*? Custom CSS */
/*! Custom CSS - Start */
.d-none {
	display: none !important;
}

.pointer {
	cursor: pointer;
}

.input {
	color: #282828;
}

@media (max-width: 767.98px) {
	input[type='text'],
	input[type='email'],
	input[type='tel'],
	input[type='password'],
	input[type='number'],
	input[type='search'],
	textarea,
	select,
	.input,
	.select__title,
	.select__value,
	.quantity__input input,
	.iti input {
		font-size: 16px;
	}
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

input[type='number'] {
	-moz-appearance: textfield;
}

.lazy-waiting,
.lazy-loading {
	display: block;
	visibility: hidden;
}

.swiper-pagination-lock {
	display: none;
}

.ql-editor {
	line-height: 1.2 !important;
	padding: 0 !important;
	white-space: normal !important;
}
.ql-editor ul {
	padding-left: 1.5em !important;
}
.ql-editor ul li {
	list-style-type: disc !important;
	padding-left: 0 !important;
}
.ql-editor ol {
	padding-left: 1.5em !important;
}
.ql-editor ol li {
	list-style-type: decimal !important;
	padding-left: 0 !important;
}

._btn._disabled,
._btn.disabled {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

/*! Project overrides - Start */
/* Real product photos have different proportions than the layout mockups,
   so they are fitted into the card frame instead of being cropped. */
.product-preview__image {
	display: block;
}
/* Photos are trimmed to their content, so without an inset they touch the
   frame edges and slide under the "new / hit / sale" badges in the corner.
   The photo is placed into a smaller area of the same frame and scaled down
   proportionally; padding is not used because it breaks the height of the
   image inside the aspect-ratio frame and the photo gets cropped. */
.product-preview__image {
	position: relative;
	overflow: hidden;
}
.product-preview__image img {
	position: absolute;
	top: 12%;
	right: 10%;
	bottom: 4%;
	left: 10%;
	width: 80%;
	height: 84%;
}
.product-preview__image img,
.catalog-mini-about__image img {
	object-fit: contain;
}

/* Card title is shown as two lines: brand first, model second.
   Titles without a known brand keep one line, but the block still reserves
   two lines so prices and buttons stay aligned across the grid. */
.product-preview__name a {
	display: block;
	min-height: 2.4em;
}
.product-preview__brand,
.product-preview__model {
	display: block;
}
/* Cards in a row differ in specs block presence, so the card footer is pushed
   to the bottom: prices and "add to cart" buttons stay on the same line. */
.product-preview__price {
	margin-top: auto;
}
/* Product photos are not square, so the gallery fits them into the frame
   instead of cropping (the layout assumed square mockups). */
.main-gallery__slide img,
.thumbs-gallery__slide img {
	object-fit: contain;
}
/* Thumbs get a fixed square box: otherwise the slide height follows the photo
   (tall photos stretch it, the vertical swiper clips it) and the active frame
   gets cut on the right and bottom. */
.thumbs-gallery__slide {
	width: 100px !important;
	height: 100px !important;
	flex: 0 0 100px;
	overflow: hidden;
}
.thumbs-gallery__slide img {
	display: block;
	width: 100%;
	height: 100%;
	min-width: 0;
	min-height: 0;
}
/* Links inside the product description come from the editor with default
   browser blue; the site accent is orange. */
.details-card__description a,
.details-card__description a * {
	color: #ED9E58;
}
.details-card__description a:hover,
.details-card__description a:hover * {
	color: #E89654;
	text-decoration: underline;
}
/* The category article text comes from the editor and may contain lists and
   several paragraphs. The global reset strips list markers and margins, so the
   block gets the same typography as the product description. */
.article-catalog__text > :not(:last-child) {
	margin-bottom: 10px;
}
.article-catalog__text ul {
	padding-left: 20px;
}
.article-catalog__text ul li {
	list-style: disc;
}
.article-catalog__text ul li:not(:last-child) {
	margin-bottom: 6px;
}
/* Editor links default to browser blue; the site accent is orange. */
.article-catalog__text a,
.article-catalog__text a * {
	color: #ED9E58;
}
.article-catalog__text a:hover,
.article-catalog__text a:hover * {
	color: #E89654;
	text-decoration: underline;
}
/*! Project overrides - End */

/*? Typography from Figma design */
/*! Typography - Start */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&display=swap');

/* Section titles (product tabs, catalog headings) — Oswald Bold 18px */
.details-card__tab,
.details-card__nav,
.details-card__nav *,
.article-catalog__title,
.catalog-title,
.section-title {
	font-family: 'Oswald', sans-serif !important;
	font-weight: 700 !important;
	font-size: 18px !important;
	color: #000000 !important;
	text-transform: uppercase !important;
}

/* Product description body — Inter Regular 16px #000, overrides inline WYSIWYG font-size */
.details-card__description,
.details-card__description *,
.article-catalog__text,
.article-catalog__text * {
	font-family: 'Inter', sans-serif !important;
	font-weight: 400 !important;
	font-size: 16px !important;
	color: #000000 !important;
}
.details-card__description strong,
.details-card__description b,
.article-catalog__text strong,
.article-catalog__text b {
	font-weight: 700 !important;
}
/* Preserve accent color for editor links */
.details-card__description a,
.details-card__description a *,
.article-catalog__text a,
.article-catalog__text a * {
	color: #ED9E58 !important;
}
.details-card__description a:hover,
.details-card__description a:hover *,
.article-catalog__text a:hover,
.article-catalog__text a:hover * {
	color: #E89654 !important;
}
/*! Typography - End */

/*? Catalog filters */
/*! Catalog filters - Start */
/* Layout styles cover the range rows; checkbox filters have no design of their
   own there, so they reuse the same row: label, then the list under it. */
.filter__group-title {
	text-transform: uppercase;
}
.filter-values {
	display: flex;
	flex-direction: column;
	row-gap: 12px;
	margin-top: 20px;
	max-height: 260px;
	overflow-y: auto;
}
.filter-values::-webkit-scrollbar {
	width: 4px;
}
.filter-values::-webkit-scrollbar-thumb {
	background-color: #CACACA;
}
.filter-check {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 400;
	color: #000;
	line-height: calc(20 / 14);
}
.filter-check__input {
	position: absolute;
	width: 0;
	height: 0;
	opacity: 0;
	visibility: hidden;
}
.filter-check__box {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	background-color: #fff;
	border: 1px solid #a7a9ac;
	transition: all 0.3s 0s;
}
.filter-check__input:checked + .filter-check__box {
	background: #5E6F94 url("../img/icons/check.svg") center no-repeat;
	border-color: #5E6F94;
}
.filter-check__color {
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 1px solid #CACACA;
}
.filter-check__text {
	flex: 1;
}
.filter-check__count {
	flex: 0 0 auto;
	font-size: 12px;
	color: #888888;
}
.filter-check__input:checked ~ .filter-check__text {
	font-weight: 600;
}
@media (any-hover: hover) {
	.filter-check:hover .filter-check__text {
		color: #5E6F94;
	}
}
/*! Catalog filters - End */

/* Переключатель языка: текущий язык затемнён, доступный для переключения — подсвечен */
.language__item{color:#fff}
.language__item._active{color:#b9b9b9}
.language__item._active a{pointer-events:none;cursor:default}

/* Catalog sidebar: highlight the current subcategory */
.categories-catalog__item._current > a {
  color: #E89654;
}

/* Cart request */
.cart__input .form__error {
	margin-top: 5px;
	font-size: 13px;
	color: #ee1212;
}
.cart__done-title {
	margin-bottom: 10px;
	font-size: 20px;
	font-weight: 600;
}
.cart__done-text {
	color: #666;
}
.send_cart_request:disabled {
	opacity: 0.6;
	cursor: default;
}

/* Cart totals: the sum sits in the "Всего" column of the table above (85px column, then gap + 90px column + 10px row padding) */
@media (min-width: 721.98px) {
	.table-cart__total,
	.cart__total {
		grid-template-columns: 1fr 85px;
		column-gap: 20px;
	}
	.table-cart__total > span:last-child,
	.cart__total > span:last-child {
		text-align: center;
	}
	.table-cart__total {
		padding: 0 110px 0 12px;
	}
	.cart__total {
		padding-right: 100px;
	}
}
@media (min-width: 991.98px) {
	.table-cart__total {
		padding-right: 120px;
	}
	.cart__total {
		padding-right: 110px;
	}
}

/* About page: text from the WYSIWYG editor looks like the layout */
.about-section__text h4,
.about-section__text h5 {
	font-size: 18px;
	font-weight: 600;
	line-height: 1.2;
	margin-bottom: 16px;
}

.about-section__text p + p {
	margin-top: 24px;
}

/* Search: header dropdown filled by ajax/search_live */
.result-search__list {
	max-height: 60vh;
	overflow-y: auto;
}

.result-search__image img {
	object-fit: contain;
}

.result-search__item._empty {
	display: block;
	color: #6b7c8a;
}

.result-search__item._empty .result-search__info {
	display: block;
}

.result-search__list._loading {
	opacity: 0.6;
}

.result-search__button[hidden] {
	display: none;
}

/* Product kit: total block as in the layout — label on the left, sum at the right edge, one line */
.composite_set .cart__total {
	grid-template-columns: 1fr auto;
	column-gap: 20px;
	padding-right: 0;
	align-items: baseline;
}
.composite_set .cart__total > span:last-child {
	text-align: right;
	white-space: nowrap;
}

/* Cart tables: all rows are the same height as in the layout (10px padding + 56px image), the photo fits into the square */
.table-cart__image {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	max-width: 56px;
	height: 56px;
	aspect-ratio: auto;
}
.table-cart__image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Text page without an image: text takes the full width */
.about-section__body--full {
	flex: 1 1 auto;
	max-width: 100%;
}

/* Text alignment saved by the Quill editor (quill.snow.css scopes it to .ql-editor only) */
.ql-align-center {
	text-align: center;
}
.ql-align-right {
	text-align: right;
}
.ql-align-justify {
	text-align: justify;
}