/*
  Определяем порядок каскадных слоев.
  Стили в более поздних слоях будут иметь приоритет над стилями в ранних.
*/
@layer reset, framework, base, layout, components, utilities, other;

/*
  Импортируем Bootstrap CSS напрямую в слой 'framework'.
  Теперь все его стили будут находиться в этом слое.
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css") layer(framework);
@import url("https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.5.0/css/flag-icon.min.css") layer(framework);
@import url("/common/fancybox.css") layer(framework);

/*
  Наши базовые стили и переопределения переменных помещаем в слой 'base'.
  Благодаря слоям, эти правила легко переопределят дефолтные значения Bootstrap.
*/
@layer base {

	/* 3. Определение базовых шрифтов */
	body {
		font-family: 'Inter', var(--bs-font-sans-serif);
		background-color: var(--bs-primary);
		color: var(--bs-white);
	}

	/* 4. Адаптивный базовый размер шрифта (Fluid Typography) */

	/* Для мобильных устройств (< 768px) */

	/* 16px при 360px ширины = (16 / 360) * 100 = 4.44444dvw */:root {
		font-size: 4.44444dvw;
		--bs-body-font-size: 0.875rem;
		--bs-body-font-weight: 400;
		--bs-body-line-height: 1.25;
		--bs-primary: #052c65;         /* blue-800 */
		--bs-primary-rgb: 5, 44, 101;
		--bs-secondary: #6c757d;         /* gray-600 */
		--bs-secondary-rgb: 108, 117, 125;
		--bs-primary-text-emphasis: #052c65;
		--bs-secondary-text-emphasis: #2b2f32;
		--bs-primary-bg-subtle: #cfe2ff;         /* blue-100 */
		--bs-secondary-bg-subtle: #e9ecef;         /* gray-200 */
		--bs-primary-border-subtle: #9ec5fe;         /* blue-200 */
		--bs-secondary-border-subtle: #ced4da;         /* gray-400 */
		--bs-body-color: #212529;         /* gray-900 */
		--bs-body-color-rgb: 33, 37, 41;
		--bs-body-bg: #fff;         /* gray-200 */
		--bs-body-bg-rgb: 255, 255, 255;
		--bs-emphasis-color: #000;
		--bs-emphasis-color-rgb: 0, 0, 0;
		--bs-secondary-color: #6c757d;         /* gray-600 */
		--bs-secondary-color-rgb: 108, 117, 125;
		--bs-secondary-bg: #e9ecef;         /* gray-200 */
		--bs-secondary-bg-rgb: 233, 236, 239;
		--bs-tertiary-color: rgba(33, 37, 41, 0.5);         /* gray-900 / 0.5 */
		--bs-tertiary-color-rgb: 33, 37, 41;
		--bs-tertiary-bg: #f8f9fa;         /* gray-100 */
		--bs-tertiary-bg-rgb: 248, 249, 250;
		--bs-link-color: var(--bs-primary);
		--bs-link-color-rgb: var(--bs-primary-rgb);
		--bs-link-hover-color: #031633;
		--bs-link-hover-color-rgb: 3, 22, 51;
		--btn-font-size: 0.875rem;
		--btn-padding-x: 0.75rem;
		--btn-padding-y: 0.5rem;
		--btn-sm-font-size: 0.875rem;
		--btn-sm-padding-x: 0.75rem;
		--btn-sm-padding-y: 0.375rem;         /* fancybox */
		--f-button-width: calc(var(--bs-body-font-size) * 2);
		--f-button-height: calc(var(--bs-body-font-size) * 2);
		--f-button-border: 0;
		--f-button-border-radius: 0;
		--f-button-color: var(--bs-primary);
		--f-button-bg: var(--bs-body-bg);
		--f-button-shadow: none;
		--f-button-transition: all .15s ease;
		--f-button-transform: none;
		--f-button-outline-width: 1px;
		--f-button-outline-color: rgba(0, 0, 0, .7);
		--f-button-svg-width: var(--bs-body-font-size);
		--f-button-svg-height: var(--bs-body-font-size);
		--f-button-svg-stroke-width: 1.5;
		--f-button-svg-fill: none;
		--f-button-svg-filter: none;
		--f-button-svg-opacity: 1;
		--f-button-svg-disabled-opacity: .5;
		--f-button-svg-transition: opacity .15s ease;
		--f-button-svg-transform: none --text-xs:.75rem;
		--text-xs--line-height: calc(1 / .75);
		--text-sm: .875rem;
		--text-sm--line-height: calc(1.25 / .875);
		--text-base: 1rem;
		--text-base--line-height: calc(1.5 / 1);
		--text-lg: 1.125rem;
		--text-lg--line-height: calc(1.5 / 1.125);
		--text-xl: 1.25rem;
		--text-xl--line-height: calc(1.5 / 1.25);
		--text-2xl: 1.5rem;
		--text-2xl--line-height: calc(1.75 / 1.5);
		--text-3xl: 1.875rem;
		--text-3xl--line-height: calc(2 / 1.875);
		--text-4xl: 2.25rem;
		--text-4xl--line-height: calc(2.25);
		--text-5xl: 3rem;
		--text-5xl--line-height: 1;
		--text-6xl: 3.75rem;
		--text-6xl--line-height: 1;
		--text-7xl: 4.5rem;
		--text-7xl--line-height: 1;
		--text-8xl: 6rem;
		--text-8xl--line-height: 1;
		--text-9xl: 8rem;
		--text-9xl--line-height: 1;
		--clr-branch1-hue: 260;
		--clr-branch2-hue: 215;
		--clr-branch3-hue: 152;
		--clr-branch4-hue: 45;
		--clr-branch5-hue: 27;
	}

	/* Для десктопных устройств (>= 768px) */

	/* 16px при 1200px ширины = (16 / 1200) * 100 = 1.33dvw */
	@media (min-width:768px) {
		:root {
			font-size: 1.333333dvw;
			--btn-padding-x: 1rem;
			--btn-padding-y: 0.75rem;
		}

	}

	/* Для очень больших экранов (> 1200px) фиксируем размер */
	@media (min-width:1200px) {
		:root {
			font-size: 16px;
		}

	}

	.lead {
		font-size: calc(var(--bs-body-font-size) * 1.25);
	}

	.h1,
	h1 {
		font-size: var(--text-4xl);
		line-height: var(--text-4xl--line-height);
	}

	.h2,
	h2 {
		font-size: var(--text-3xl);
		line-height: var(--text-3xl--line-height);
	}

	.h3,
	h3 {
		font-size: var(--text-2xl);
		line-height: var(--text-2xl--line-height);
	}

	.h4,
	h4 {
		font-size: var(--text-xl);
		line-height: var(--text-xl--line-height);
	}

	.h5,
	h5 {
		font-size: var(--text-lg);
		line-height: var(--text-lg--line-height);
	}

	.h6,
	h6 {
		font-size: var(--text-base);
		line-height: var(--text-base--line-height);
	}

	.display-1 {
	}

	.display-2 {
	}

	.display-3 {
	}

	.display-4 {
	}

	.display-5 {
	}

	.display-6 {
	}

	.fs-1 {
	}

	.fs-2 {
	}

	.fs-3 {
	}

	.fs-4 {
	}

	.fs-5 {
	}

	.fs-6 {
	}

	.backdrop-blur {
		backdrop-filter: blur(var(--bs-border-radius));
	}

	.backdrop-blur-sm {
		backdrop-filter: blur(var(--bs-border-radius-sm));
	}

	.backdrop-blur-lg {
		backdrop-filter: blur(var(--bs-border-radius-lg));
	}

	.backdrop-blur-xl {
		backdrop-filter: blur(var(--bs-border-radius-xl));
	}

	.backdrop-blur-xxl {
		backdrop-filter: blur(var(--bs-border-radius-xxl));
	}

	.backdrop-blur-2xl {
		backdrop-filter: blur(var(--bs-border-radius-xxl));
	}

	.btn {
		--bs-btn-font-size: var(--btn-font-size);
		--bs-btn-padding-x: var(--btn-padding-x);
		--bs-btn-padding-y: var(--btn-padding-y);
		--bs-btn-focus-box-shadow: 0 0 0 0.25rem oklch(from var(--bs-btn-bg) l c h / 0.25);
	}

	.btn-group-lg > .btn,
	.btn-lg {
		--bs-btn-font-size: calc(var(--btn-font-size) * 1.25);
	}

	.btn-group-sm > .btn,
	.btn-sm {
		--bs-btn-font-size: var(--btn-sm-font-size);
		--bs-btn-padding-x: var(--btn-sm-padding-x);
		--bs-btn-padding-y: var(--btn-sm-padding-y);
	}

	.btn-primary {
		--bs-btn-color: var(--bs-white);
		--bs-btn-bg: var(--bs-primary);
		--bs-btn-border-color: var(--bs-primary);
		--bs-btn-hover-color: var(--bs-white);
		--bs-btn-hover-bg: oklch(from var(--bs-primary) calc(l - 0.1) c h);
		--bs-btn-hover-border-color: oklch(from var(--bs-primary) calc(l - 0.1) c h);
		--bs-btn-active-color: var(--bs-white);
		--bs-btn-active-bg: oklch(from var(--bs-primary) calc(l - 0.1) c h);
		--bs-btn-active-border-color: oklch(from var(--bs-primary) calc(l - 0.1) c h);
		--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
		--bs-btn-disabled-color: var(--bs-white);
		--bs-btn-disabled-bg: var(--bs-secondary-color);
		--bs-btn-disabled-border-color: var(--bs-secondary-color);
		color: var(--bs-btn-color);

		&:hover {
			color: var(--bs-btn-color);
		}

	}

	.btn-outline-primary {
		--bs-btn-color: var(--bs-primary);
		--bs-btn-bg: var(--bs-white);
		--bs-btn-border-color: var(--bs-primary);
		--bs-btn-hover-color: var(--bs-white);
		--bs-btn-hover-bg: oklch(from var(--bs-primary) calc(l - 0.1) c h);
		--bs-btn-hover-border-color: oklch(from var(--bs-primary) calc(l - 0.1) c h);
		--bs-btn-active-color: var(--bs-white);
		--bs-btn-active-bg: oklch(from var(--bs-primary) calc(l - 0.1) c h);
		--bs-btn-active-border-color: oklch(from var(--bs-primary) calc(l - 0.1) c h);
		--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
		--bs-btn-disabled-color: var(--bs-primary);
		--bs-btn-disabled-bg: var(--bs-white);
		--bs-btn-disabled-border-color: var(--bs-primary);
		--bs-gradient: none;
		color: var(--bs-btn-color);

		&:hover {
			color: var(--bs-btn-bg);
		}

	}

	.btn-light--transparent {
		--bs-btn-color: var(--bs-body-color);
		--bs-btn-bg: hsla(210, 17%, 60%, 0.06);
		--bs-btn-border-color: transparent;
		--bs-btn-hover-color: var(--bs-body-color);
		--bs-btn-hover-bg: hsla(210, 17%, 20%, 0.20);
		--bs-btn-hover-border-color: hsla(210, 17%, 20%, 0.20);         /*hsla(210, 17%, 15%, 0.25);*/
		--bs-btn-focus-shadow-rgb: 211, 212, 213;
		--bs-btn-active-color: var(--bs-body-color);
		--bs-btn-active-bg: hsla(210, 17%, 15%, 0.25);
		--bs-btn-active-border-color: hsla(210, 17%, 15%, 0.30);
		--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
		--bs-btn-disabled-color: var(--bs-gray-600);
		--bs-btn-disabled-border-color: transparent;
	}

	a.btn {
		/* color: var(--bs-btn-color); */
		

		&:hover {
			/* color: var(--bs-btn-color); */
		}

	}

	b,
	strong {
		font-weight: 600;
	}

	.form-control,
	.form-select {
		background-color: var(--bs-white);
		font-size: inherit;
		padding: var(--btn-padding-y) var(--btn-padding-x);
	}

	.form-select {
		padding-inline-end: calc(var(--btn-padding-x) * 3);
	}

	.form-control-sm,
	.form-select-sm {
		padding: var(--btn-sm-padding-y) var(--btn-sm-padding-x);
	}

	.form-control:focus,
	.form-select:focus {
		background-color: var(--bs-white);
		box-shadow: 0 0 0 0.25rem oklch(from var(--bs-primary) l c h / 0.25);
		border-color: var(--bs-primary);
	}

	.toast {
		--bs-toast-spacing: 0.5rem;
		--bs-toast-max-width: 20.4rem;
	}

	.toast-header .btn-close {
	}

	.nav-link {
		--bs-nav-link-padding-x: 0.75rem;
		--bs-nav-link-padding-y: 0.75rem;
	}

	.text-warning {
		--bs-warning-rgb: 204, 154, 6;
	}

	.fancybox__dialog .f-html {
		--f-html-padding: 1.5rem;

		@media (min-width:768px) {
			--f-html-padding: 2rem;
		}

		border-radius: var(--bs-border-radius-xxl);
	}

	.fancybox__backdrop {
		backdrop-filter: blur(var(--bs-border-radius-lg));
		background: rgba(0, 0, 0, 0.1);
		--f-drag-opacity: 1;
		--fancybox-backdrop-bg: rgba(var(--bs-body-color-rgb), 0.8);
	}

	.fancybox__container.video .f-html {
		padding: 0;
		max-width: 90dvw;
		max-height: 90dvh;
	}

	.fancybox-small-close-button {
		float: right;
		margin: -0.75rem -0.75rem 0.25rem 0.25rem;

		@media (min-width:768px) {
			margin: -1.25rem -1.25rem 0.25rem 0.25rem;
		}

		border-radius: 1.25rem;
		padding: 0.6rem;
		display: flex;

		svg {
			width: 1.25rem;
			height: 1.25rem;
		}

	}

	.form-check-input:checked {
		background-color: var(--bs-primary);
		border-color: var(--bs-primary);
	}

	.form-check-input:focus {
		border-color: oklch(from var(--bs-primary) calc(l + 0.2) c h);
		box-shadow: 0 0 0 0.25rem oklch(from var(--bs-primary) l c h / 0.25);
	}

	.form-switch--end {
		padding-left: 0;
		padding-right: 2.5em;

		.form-check-input {
			float: right;
			margin-left: initial;
			margin-right: -2.5em;
		}

	}

	.pagination {
		--bs-pagination-active-bg: var(--bs-secondary);
		--bs-pagination-active-border-color: var(--bs-secondary);
		--bs-pagination-focus-box-shadow: 0 0 0 0.25rem oklch(from var(--bs-primary) l c h / 0.25);
	}

	.dropdown-menu {
		--bs-dropdown-link-active-bg: var(--bs-primary);
	}

	.g-4,
	.gx-4 {
		--bs-gutter-x: 2rem
	}

	.g-4,
	.gy-4 {
		--bs-gutter-y: 2rem
	}

	.accordion-button {
		font-size: var(--bs-body-font-size);
	}

}

@layer layout {
}

@layer components {
	.telfield {
		.dropdown-toggle {
			width: 35%;
			max-width: 8rem;
		}

		input[type='tel'] {
			width: 65%;
		}

		.dropdown-menu {
			max-width: 20.4rem;
			max-height: 12rem;
			overflow-y: auto;
			overflow-x: hidden;
		}

		@media (min-width:768px) {
			.dropdown-menu {
				max-height: 18rem;
			}

		}

	}

	.products-guarantee-statuses {
		.products-guarantee-status {
			width: calc(50% - .5rem / 2);
			container-type: inline-size;
			
			

			@media (min-width:768px) {
				
			}

		}

		@container (max-width:120px) {
			.products-guarantee-status a {
				overflow-wrap: break-word;
			}

		}

	}

	.dl-dashed {

		dt {

			&::after {
				content:'';
				flex: 1;
				border-bottom: 0.05rem dashed var(--bs-border-color-translucent);
			}

		}

	}

	.alert {
		> :last-child {
			margin-bottom: 0;
		}
	}

}

@layer utilities {
	.bi {
		display: inline-block;
		width: 1.25em;
		height: 1.25em;
		vertical-align: -.25em;
		fill: currentColor;
	}

	.hide-scrollbars {
		scrollbar-width: none;
		-ms-overflow-style: none;

		&::-webkit-scrollbar {
			display: none;
		}

	}

	.list-group-item-hover:hover {
		--hover-color: var(--bs-tertiary-bg);
		background: var(--hover-color);
	}

	@media (min-width:768px) {
		.list-group-item-md-hover:hover {
			--hover-color: var(--bs-tertiary-bg);
			background: var(--hover-color);
		}

	}

	.lineClamp1 {
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.lineClamp2 {
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.lineClamp3 {
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
	}

	.dashed {
		text-decoration: underline dashed;
		text-decoration-thickness: 0.05rem;
	}

	.form-feedback-container:empty {display: none;}

    .form-feedback-block {
        &.is-invalid {
            & .invalid-feedback {
                display: block;
            }
        }
        &.is-valid {
            & .valid-feedback {
                display: block;
            }
        }
    }

	[aria-expanded="true"] .bi.chevron {
		transform: scaleY(-1);
	}

	
	@keyframes highlight { 0% {outline-width: 0.05rem;outline-color: var(--clr-orange-500);outline-style: solid;border-radius: 0.7rem;outline-offset: 0rem;} 100% {outline-width: 0.3rem;outline-color: var(--clr-orange-500);outline-style: solid;border-radius: 0.9rem;outline-offset: 0.2rem;} }

	.highlight:not(.selectivity-result-item) {animation: highlight 0.5s linear 4 alternate;z-index: 2;}

}

@layer other {

	/* страницы ошибок */
	.errpage {
		a {
			color: inherit;
		}

		text-align: center;
		height: 50dvh;

		> .wrapper {
			height: 100%;
			display: flex;
			flex-flow: column nowrap;
			gap: 2rem;
			justify-content: center;
			align-items: center;
		}

		.errpage__code {
			font-size: 5rem;
			line-height: 1em;
			font-weight: 400;
			color: var(--clr-primary);
			position: relative;
			display: flex;
			flex-flow: row nowrap;
			justify-content: center;
		}

		.errpage__text {
			position: relative;
		}

	}

	.errpage--offline {
		.errpage__code {
			font-size: 5rem;
		}

		.errpage__code span {
			position: absolute;
			font-size: 3rem;
			margin: -2.2rem -1rem 0 0;
			top: 0;
			right: 0;
		}

	}

}