@font-face {
		font-family: "Lato";
		src: local("Lato"), url("/assets/themes/theme/fonts/Lato/Lato-Regular.woff2") format("woff2");
		font-display: swap;
		font-style: normal;
		font-weight: 400;
	}
	@font-face {
		font-family: "Lato";
		src: local("Lato"), url("/assets/themes/theme/fonts/Lato/Lato-Semibold.woff2") format("woff2");
		font-display: swap;
		font-style: normal;
		font-weight: 600;
	}
	@font-face {
		font-family: "Lato";
		src: local("Lato"), url("/assets/themes/theme/fonts/Lato/Lato-Black.woff2") format("woff2");
		font-display: swap;
		font-style: normal;
		font-weight: 800;
	}
	 
	@font-face {
		font-family: "Forum";
		src: local("Forum"), url("/assets/themes/theme/fonts/Forum/Forum-Regular.woff2") format("woff2");
		font-display: swap;
		font-style: normal;
		font-weight: 400;
	}
	
	.f-t{ 
		font-family: "Forum"; 
	}
	
	/* ========================================
	   RESET / NORMALIZE (усечённый)
	   ======================================== */

	html {
		font-family: sans-serif;
		-webkit-text-size-adjust: 100%;
		-ms-text-size-adjust: 100%;
	}

	body {
		margin: 0;
		cursor:default;
		 font-family: "Lato", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 400;
	}

	article,
	aside,
	details,
	figcaption,
	figure,
	footer,
	header,
	hgroup,
	main,
	menu,
	nav,
	section,
	summary {
		display: block;
	}
	
	section{
		width: 100%;
		overflow:hidden;
	}

	audio,
	canvas,
	progress,
	video {
		display: inline-block;
		vertical-align: baseline;
	}

	audio:not([controls]) {
		display: none;
		height: 0;
	}

	[hidden],
	template {
		display: none;
	}

	a {
		background-color: transparent;
	}

	a:active,
	a:hover {
		outline: 0;
	}

	b,
	strong {
		font-weight: 700;
	}

	dfn {
		font-style: italic;
	}
 
	img {
		border: 0;
	}

	svg:not(:root) {
		overflow: hidden;
	}

	figure {
		margin: 1em 40px;
	}

	hr {
		height: 0;
		box-sizing: content-box;
	}

	pre {
		overflow: auto;
	}

	code,
	kbd,
	pre,
	samp {
		font-family: monospace, monospace;
		font-size: 1em;
	}

	button,
	input,
	optgroup,
	select,
	textarea {
		margin: 0;
		font: inherit;
		color: inherit;
	}

	button {
		overflow: visible;
	}

	button,
	select {
		text-transform: none;
	}

	button,
	html input[type="button"],
	input[type="reset"],
	input[type="submit"] {
		-webkit-appearance: button;
		cursor: pointer;
	}

	button[disabled],
	html input[disabled] {
		cursor: default;
	}

	button::-moz-focus-inner,
	input::-moz-focus-inner {
		padding: 0;
		border: 0;
	}

	input {
		line-height: normal;
	}

	input[type="checkbox"],
	input[type="radio"] {
		box-sizing: border-box;
		padding: 0;
	}

	input[type="number"]::-webkit-inner-spin-button,
	input[type="number"]::-webkit-outer-spin-button {
		height: auto;
		display:none;
	}

	input[type="search"] {
		box-sizing: content-box;
		-webkit-appearance: textfield;
	}

	input[type="search"]::-webkit-search-cancel-button,
	input[type="search"]::-webkit-search-decoration {
		-webkit-appearance: none;
	}

	fieldset {
		padding: .35em .625em .75em;
		margin: 0 2px;
		border: 1px solid silver;
	}

	legend {
		padding: 0;
		border: 0;
	}

	textarea {
		overflow: auto;
	}

	optgroup {
		font-weight: 700;
	}

	table {
		border-spacing: 0;
		border-collapse: collapse;
	}

	td,
	th {
		padding: 0;
	}

	/* Box-sizing глобально */

	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	/* ========================================
	   БАЗОВЫЕ СТИЛИ
	   ======================================== */

 

	body {
		background-color: #ffffff;
		color: #222222;
	}

	/* ========================================
	   ТВОЙ КОНТЕЙНЕР
	   ======================================== */

	.container {
		margin: 0 auto;
		max-width: 1340px;
		padding: 0 16px;
		position: relative;
		width: 100vw;
		z-index: 1;
	 
	}
	
	.container-768 {
		 
		max-width: 1024px;
	 
	}

	/* ========================================
	   ТИПОГРАФИКА
	   ======================================== */
	body {
	    font-family: "Lato";
		font-style: normal;
		font-weight: 400; 
		letter-spacing: 0.4px;
		line-height: 1.6;
		font-size: clamp(10px, 1.05vw, 13px);  
		min-width: 100vw; margin:0 auto; overflow-x:hidden;
	}
	
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		font-weight: 400;
		line-height: 1.4;
		margin:0;
	}

	h1, .h1 {
		font-size: clamp(32px, 3vw, 40px);
		line-height: 1.1;
	}

	h2, .h2 {
		font-size: clamp(20px, 2.6vw, 36px);  
	}

	h3, .h3 {
		font-size: clamp(16px, 1.3vw, 24px);  
	}

	@media (max-width: 1024px) {
		
		body { 
			font-size: clamp(12px, 0.75vw, 14px);  
		}
	} 

	/* Изображения */

	img {
		display: block;
		height: auto;
		max-width: 100%;
	}

	/* Ссылки */

	a {
		color: inherit;
		text-decoration: none;
		 
	}

	a:not(.btn):hover {
		color: #000;
		opacity: 0.8;
	}

	a.active {
		color: #000000;
	}
	
	/* ========================================
	   КНОПКИ
	   ======================================== */

	
	
	.btn {
		background: none;
		border: 1px solid #222222;
		color: #222222;
		cursor: pointer;
		display: inline-block;

		padding: 0 20px;
		transition:
			background 0.3s ease,
			color 0.3s ease,
			border-color 0.3s ease;
			    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1; width: fit-content;
	}

	.btn:hover {
		background: #222222;
		border-color: #222222;
		color: #ffffff;
	}

	/* Кнопки на мобильных устройствах */
	@media (max-width: 1024px) {
		.btn {
			background: #222222;
			border-color: #222222;
			color: #ffffff;
		}
	}
	
		.btn svg{
		width:18px;
		height:18px;
	}
	
	.max-svg svg path{
		fill:#222222;
	}
	 .max-svg:hover svg path{
		fill:#ffffff;
	}
		
		@media (max-width: 1024px) {
		 .max-svg:hover svg path, 
		 .max-svg svg path{
		fill:#fff;
		}
		}
 
	
	.btn svg path,
	.btn svg g {
		stroke:#222222;
	}
	
	.btn:hover  svg path,
	.btn:hover svg g{
		stroke:#fff;
	}
	
	@media (max-width: 1024px) {
		.btn svg path,
	.btn svg g {
		stroke:#fff;
	}
		
	}
	
	.btn-svg{
		padding:0;
		width:40px;
	 min-width:40px;
	  max-width:40px;
	}
 
	/* ========================================
	   СЕТКА (Bootstrap 3)
	   ======================================== */

	.container-fluid {
	 
		margin-right: auto;
		margin-left: auto;
		width: 100vw; 
		 
	}

	.row {

		margin-right: -15px;
		margin-left: -15px;
	}

	.col-xs-1,
	.col-xs-2,
	.col-xs-3,
	.col-xs-4,
	.col-xs-5,
	.col-xs-6,
	.col-xs-7,
	.col-xs-8,
	.col-xs-9,
	.col-xs-10,
	.col-xs-11,
	.col-xs-12,
	.col-sm-1,
	.col-sm-2,
	.col-sm-3,
	.col-sm-4,
	.col-sm-5,
	.col-sm-6,
	.col-sm-7,
	.col-sm-8,
	.col-sm-9,
	.col-sm-10,
	.col-sm-11,
	.col-sm-12,
	.col-md-1,
	.col-md-2,
	.col-md-3,
	.col-md-4,
	.col-md-5,
	.col-md-6,
	.col-md-7,
	.col-md-8,
	.col-md-9,
	.col-md-10,
	.col-md-11,
	.col-md-12,
	.col-lg-1,
	.col-lg-2,
	.col-lg-3,
	.col-lg-4,
	.col-lg-5,
	.col-lg-6,
	.col-lg-7,
	.col-lg-8,
	.col-lg-9,
	.col-lg-10,
	.col-lg-11,
	.col-lg-12 {
		position: relative;
		min-height: 1px;
		padding-right: 15px;
		padding-left: 15px;
	}

	/* xs */

	.col-xs-1,
	.col-xs-2,
	.col-xs-3,
	.col-xs-4,
	.col-xs-5,
	.col-xs-6,
	.col-xs-7,
	.col-xs-8,
	.col-xs-9,
	.col-xs-10,
	.col-xs-11,
	.col-xs-12 {
		float: left;
	}

	.col-xs-12 {
		width: 100%;
	}
	.col-xs-11 {
		width: 91.66666667%;
	}
	.col-xs-10 {
		width: 83.33333333%;
	}
	.col-xs-9 {
		width: 75%;
	}
	.col-xs-8 {
		width: 66.66666667%;
	}
	.col-xs-7 {
		width: 58.33333333%;
	}
	.col-xs-6 {
		width: 50%;
	}
	.col-xs-5 {
		width: 41.66666667%;
	}
	.col-xs-4 {
		width: 33.33333333%;
	}
	.col-xs-3 {
		width: 25%;
	}
	.col-xs-2 {
		width: 16.66666667%;
	}
	.col-xs-1 {
		width: 8.33333333%;
	}

	.col-xs-pull-12 {
		right: 100%;
	}
	.col-xs-pull-11 {
		right: 91.66666667%;
	}
	.col-xs-pull-10 {
		right: 83.33333333%;
	}
	.col-xs-pull-9 {
		right: 75%;
	}
	.col-xs-pull-8 {
		right: 66.66666667%;
	}
	.col-xs-pull-7 {
		right: 58.33333333%;
	}
	.col-xs-pull-6 {
		right: 50%;
	}
	.col-xs-pull-5 {
		right: 41.66666667%;
	}
	.col-xs-pull-4 {
		right: 33.33333333%;
	}
	.col-xs-pull-3 {
		right: 25%;
	}
	.col-xs-pull-2 {
		right: 16.66666667%;
	}
	.col-xs-pull-1 {
		right: 8.33333333%;
	}
	.col-xs-pull-0 {
		right: auto;
	}

	.col-xs-push-12 {
		left: 100%;
	}
	.col-xs-push-11 {
		left: 91.66666667%;
	}
	.col-xs-push-10 {
		left: 83.33333333%;
	}
	.col-xs-push-9 {
		left: 75%;
	}
	.col-xs-push-8 {
		left: 66.66666667%;
	}
	.col-xs-push-7 {
		left: 58.33333333%;
	}
	.col-xs-push-6 {
		left: 50%;
	}
	.col-xs-push-5 {
		left: 41.66666667%;
	}
	.col-xs-push-4 {
		left: 33.33333333%;
	}
	.col-xs-push-3 {
		left: 25%;
	}
	.col-xs-push-2 {
		left: 16.66666667%;
	}
	.col-xs-push-1 {
		left: 8.33333333%;
	}
	.col-xs-push-0 {
		left: auto;
	}

	.col-xs-offset-12 {
		margin-left: 100%;
	}
	.col-xs-offset-11 {
		margin-left: 91.66666667%;
	}
	.col-xs-offset-10 {
		margin-left: 83.33333333%;
	}
	.col-xs-offset-9 {
		margin-left: 75%;
	}
	.col-xs-offset-8 {
		margin-left: 66.66666667%;
	}
	.col-xs-offset-7 {
		margin-left: 58.33333333%;
	}
	.col-xs-offset-6 {
		margin-left: 50%;
	}
	.col-xs-offset-5 {
		margin-left: 41.66666667%;
	}
	.col-xs-offset-4 {
		margin-left: 33.33333333%;
	}
	.col-xs-offset-3 {
		margin-left: 25%;
	}
	.col-xs-offset-2 {
		margin-left: 16.66666667%;
	}
	.col-xs-offset-1 {
		margin-left: 8.33333333%;
	}
	.col-xs-offset-0 {
		margin-left: 0;
	}

	/* sm */

	@media (min-width: 768px) {
		.col-sm-1,
		.col-sm-2,
		.col-sm-3,
		.col-sm-4,
		.col-sm-5,
		.col-sm-6,
		.col-sm-7,
		.col-sm-8,
		.col-sm-9,
		.col-sm-10,
		.col-sm-11,
		.col-sm-12 {
			float: left;
		}

		.col-sm-12 {
			width: 100%;
		}
		.col-sm-11 {
			width: 91.66666667%;
		}
		.col-sm-10 {
			width: 83.33333333%;
		}
		.col-sm-9 {
			width: 75%;
		}
		.col-sm-8 {
			width: 66.66666667%;
		}
		.col-sm-7 {
			width: 58.33333333%;
		}
		.col-sm-6 {
			width: 50%;
		}
		.col-sm-5 {
			width: 41.66666667%;
		}
		.col-sm-4 {
			width: 33.33333333%;
		}
		.col-sm-3 {
			width: 25%;
		}
		.col-sm-2 {
			width: 16.66666667%;
		}
		.col-sm-1 {
			width: 8.33333333%;
		}

		.col-sm-pull-12 {
			right: 100%;
		}
		.col-sm-pull-11 {
			right: 91.66666667%;
		}
		.col-sm-pull-10 {
			right: 83.33333333%;
		}
		.col-sm-pull-9 {
			right: 75%;
		}
		.col-sm-pull-8 {
			right: 66.66666667%;
		}
		.col-sm-pull-7 {
			right: 58.33333333%;
		}
		.col-sm-pull-6 {
			right: 50%;
		}
		.col-sm-pull-5 {
			right: 41.66666667%;
		}
		.col-sm-pull-4 {
			right: 33.33333333%;
		}
		.col-sm-pull-3 {
			right: 25%;
		}
		.col-sm-pull-2 {
			right: 16.66666667%;
		}
		.col-sm-pull-1 {
			right: 8.33333333%;
		}
		.col-sm-pull-0 {
			right: auto;
		}

		.col-sm-push-12 {
			left: 100%;
		}
		.col-sm-push-11 {
			left: 91.66666667%;
		}
		.col-sm-push-10 {
			left: 83.33333333%;
		}
		.col-sm-push-9 {
			left: 75%;
		}
		.col-sm-push-8 {
			left: 66.66666667%;
		}
		.col-sm-push-7 {
			left: 58.33333333%;
		}
		.col-sm-push-6 {
			left: 50%;
		}
		.col-sm-push-5 {
			left: 41.66666667%;
		}
		.col-sm-push-4 {
			left: 33.33333333%;
		}
		.col-sm-push-3 {
			left: 25%;
		}
		.col-sm-push-2 {
			left: 16.66666667%;
		}
		.col-sm-push-1 {
			left: 8.33333333%;
		}
		.col-sm-push-0 {
			left: auto;
		}

		.col-sm-offset-12 {
			margin-left: 100%;
		}
		.col-sm-offset-11 {
			margin-left: 91.66666667%;
		}
		.col-sm-offset-10 {
			margin-left: 83.33333333%;
		}
		.col-sm-offset-9 {
			margin-left: 75%;
		}
		.col-sm-offset-8 {
			margin-left: 66.66666667%;
		}
		.col-sm-offset-7 {
			margin-left: 58.33333333%;
		}
		.col-sm-offset-6 {
			margin-left: 50%;
		}
		.col-sm-offset-5 {
			margin-left: 41.66666667%;
		}
		.col-sm-offset-4 {
			margin-left: 33.33333333%;
		}
		.col-sm-offset-3 {
			margin-left: 25%;
		}
		.col-sm-offset-2 {
			margin-left: 16.66666667%;
		}
		.col-sm-offset-1 {
			margin-left: 8.33333333%;
		}
		.col-sm-offset-0 {
			margin-left: 0;
		}
	}

	/* md */

	@media (min-width: 992px) {
		.col-md-1,
		.col-md-2,
		.col-md-3,
		.col-md-4,
		.col-md-5,
		.col-md-6,
		.col-md-7,
		.col-md-8,
		.col-md-9,
		.col-md-10,
		.col-md-11,
		.col-md-12 {
			float: left;
		}

		.col-md-12 {
			width: 100%;
		}
		.col-md-11 {
			width: 91.66666667%;
		}
		.col-md-10 {
			width: 83.33333333%;
		}
		.col-md-9 {
			width: 75%;
		}
		.col-md-8 {
			width: 66.66666667%;
		}
		.col-md-7 {
			width: 58.33333333%;
		}
		.col-md-6 {
			width: 50%;
		}
		.col-md-5 {
			width: 41.66666667%;
		}
		.col-md-4 {
			width: 33.33333333%;
		}
		.col-md-3 {
			width: 25%;
		}
		.col-md-2 {
			width: 16.66666667%;
		}
		.col-md-1 {
			width: 8.33333333%;
		}

		.col-md-pull-12 {
			right: 100%;
		}
		.col-md-pull-11 {
			right: 91.66666667%;
		}
		.col-md-pull-10 {
			right: 83.33333333%;
		}
		.col-md-pull-9 {
			right: 75%;
		}
		.col-md-pull-8 {
			right: 66.66666667%;
		}
		.col-md-pull-7 {
			right: 58.33333333%;
		}
		.col-md-pull-6 {
			right: 50%;
		}
		.col-md-pull-5 {
			right: 41.66666667%;
		}
		.col-md-pull-4 {
			right: 33.33333333%;
		}
		.col-md-pull-3 {
			right: 25%;
		}
		.col-md-pull-2 {
			right: 16.66666667%;
		}
		.col-md-pull-1 {
			right: 8.33333333%;
		}
		.col-md-pull-0 {
			right: auto;
		}

		.col-md-push-12 {
			left: 100%;
		}
		.col-md-push-11 {
			left: 91.66666667%;
		}
		.col-md-push-10 {
			left: 83.33333333%;
		}
		.col-md-push-9 {
			left: 75%;
		}
		.col-md-push-8 {
			left: 66.66666667%;
		}
		.col-md-push-7 {
			left: 58.33333333%;
		}
		.col-md-push-6 {
			left: 50%;
		}
		.col-md-push-5 {
			left: 41.66666667%;
		}
		.col-md-push-4 {
			left: 33.33333333%;
		}
		.col-md-push-3 {
			left: 25%;
		}
		.col-md-push-2 {
			left: 16.66666667%;
		}
		.col-md-push-1 {
			left: 8.33333333%;
		}
		.col-md-push-0 {
			left: auto;
		}

		.col-md-offset-12 {
			margin-left: 100%;
		}
		.col-md-offset-11 {
			margin-left: 91.66666667%;
		}
		.col-md-offset-10 {
			margin-left: 83.33333333%;
		}
		.col-md-offset-9 {
			margin-left: 75%;
		}
		.col-md-offset-8 {
			margin-left: 66.66666667%;
		}
		.col-md-offset-7 {
			margin-left: 58.33333333%;
		}
		.col-md-offset-6 {
			margin-left: 50%;
		}
		.col-md-offset-5 {
			margin-left: 41.66666667%;
		}
		.col-md-offset-4 {
			margin-left: 33.33333333%;
		}
		.col-md-offset-3 {
			margin-left: 25%;
		}
		.col-md-offset-2 {
			margin-left: 16.66666667%;
		}
		.col-md-offset-1 {
			margin-left: 8.33333333%;
		}
		.col-md-offset-0 {
			margin-left: 0;
		}
	}

	/* lg */

	@media (min-width: 1200px) {
		.col-lg-1,
		.col-lg-2,
		.col-lg-3,
		.col-lg-4,
		.col-lg-5,
		.col-lg-6,
		.col-lg-7,
		.col-lg-8,
		.col-lg-9,
		.col-lg-10,
		.col-lg-11,
		.col-lg-12 {
			float: left;
		}

		.col-lg-12 {
			width: 100%;
		}
		.col-lg-11 {
			width: 91.66666667%;
		}
		.col-lg-10 {
			width: 83.33333333%;
		}
		.col-lg-9 {
			width: 75%;
		}
		.col-lg-8 {
			width: 66.66666667%;
		}
		.col-lg-7 {
			width: 58.33333333%;
		}
		.col-lg-6 {
			width: 50%;
		}
		.col-lg-5 {
			width: 41.66666667%;
		}
		.col-lg-4 {
			width: 33.33333333%;
		}
		.col-lg-3 {
			width: 25%;
		}
		.col-lg-2 {
			width: 16.66666667%;
		}
		.col-lg-1 {
			width: 8.33333333%;
		}

		.col-lg-pull-12 {
			right: 100%;
		}
		.col-lg-pull-11 {
			right: 91.66666667%;
		}
		.col-lg-pull-10 {
			right: 83.33333333%;
		}
		.col-lg-pull-9 {
			right: 75%;
		}
		.col-lg-pull-8 {
			right: 66.66666667%;
		}
		.col-lg-pull-7 {
			right: 58.33333333%;
		}
		.col-lg-pull-6 {
			right: 50%;
		}
		.col-lg-pull-5 {
			right: 41.66666667%;
		}
		.col-lg-pull-4 {
			right: 33.33333333%;
		}
		.col-lg-pull-3 {
			right: 25%;
		}
		.col-lg-pull-2 {
			right: 16.66666667%;
		}
		.col-lg-pull-1 {
			right: 8.33333333%;
		}
		.col-lg-pull-0 {
			right: auto;
		}

		.col-lg-push-12 {
			left: 100%;
		}
		.col-lg-push-11 {
			left: 91.66666667%;
		}
		.col-lg-push-10 {
			left: 83.33333333%;
		}
		.col-lg-push-9 {
			left: 75%;
		}
		.col-lg-push-8 {
			left: 66.66666667%;
		}
		.col-lg-push-7 {
			left: 58.33333333%;
		}
		.col-lg-push-6 {
			left: 50%;
		}
		.col-lg-push-5 {
			left: 41.66666667%;
		}
		.col-lg-push-4 {
			left: 33.33333333%;
		}
		.col-lg-push-3 {
			left: 25%;
		}
		.col-lg-push-2 {
			left: 16.66666667%;
		}
		.col-lg-push-1 {
			left: 8.33333333%;
		}
		.col-lg-push-0 {
			left: auto;
		}

		.col-lg-offset-12 {
			margin-left: 100%;
		}
		.col-lg-offset-11 {
			margin-left: 91.66666667%;
		}
		.col-lg-offset-10 {
			margin-left: 83.33333333%;
		}
		.col-lg-offset-9 {
			margin-left: 75%;
		}
		.col-lg-offset-8 {
			margin-left: 66.66666667%;
		}
		.col-lg-offset-7 {
			margin-left: 58.33333333%;
		}
		.col-lg-offset-6 {
			margin-left: 50%;
		}
		.col-lg-offset-5 {
			margin-left: 41.66666667%;
		}
		.col-lg-offset-4 {
			margin-left: 33.33333333%;
		}
		.col-lg-offset-3 {
			margin-left: 25%;
		}
		.col-lg-offset-2 {
			margin-left: 16.66666667%;
		}
		.col-lg-offset-1 {
			margin-left: 8.33333333%;
		}
		.col-lg-offset-0 {
			margin-left: 0;
		}
	}

	/* Clearfix для .container/.row, если нужно с ними комбинировать 

	.container::before,
	.container::after,
	.container-fluid::before,
	.container-fluid::after,
	.row::before,
	.row::after {
		display: table;
		content: " ";
	}

	.container::after,
	.container-fluid::after,
	.row::after {
		clear: both;
	}
	
	*/

	/* ========================================
		   HEADER - ОСНОВНЫЕ СТИЛИ
		   ======================================== */
/* Хедер и отдельный слой для blur */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  isolation: isolate;
  transform: translateZ(0);
}



/* Эффект размытия фона header */
.header::before {
content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    opacity: 1;
  
 
    pointer-events: none;
}

 .header-white::before {
	  background: rgba(0, 0, 0, 0.15);
	   
}

/* Навигация */
.nav {
  align-items: center;
  display: flex;
  gap: 32px;
  justify-content: space-between;
  z-index: 4;
}
	
	/* ========================================
	   ЛОГОТИП
	   ======================================== */

	.logo,
	.logo svg {
		height: 40px;
		 
		width: 190px;
	}

	/* Логотип на мобильных устройствах */
	@media (max-width: 1024px) {
		.logo,
		.logo svg {
			width: 150px;
		}
	}

	/* Стили SVG логотипа */
	.logo svg,
	.logo svg path {
		fill: #222222;
		stroke: #222222;
		transition:
			fill 0.3s ease,
			stroke 0.3s ease;
	}
	
	/* ========================================
	   МЕНЮ НАВИГАЦИИ
	   ======================================== */

	.nav-menu {
		align-items: center;
		display: flex;
		gap: 30px;
		list-style: none;
		margin: 0;
		padding: 0;
	}

	/* Ссылки меню */
	.nav-link {
		font-weight: 500;
		line-height: 0;
		position: relative;
		transition:
			color 0.3s ease,
			opacity 0.3s ease;
	}
	
	.nav-item.active .nav-link {
		font-weight: 700;
		
	}
	
		@media (min-width: 1024px) {.nav-item:hover .nav-link,
	.nav-item.active .nav-link {
		font-weight: 700;
		
	}
	.header-white .nav-item:hover .nav-link {
 
	 color:#fff;
		
	}
	
 	}

	/* Скрытые элементы в десктопной версии */
	.nav-menu-action,
	.nav-address,
	.nav-telephone {
		display: none;
	}
	
	/* ========================================
	   HEADER ACTIONS
	   ======================================== */

	.header-action {
		align-items: center;
		display: flex;
		gap: 32px;
	}
	.header-action-adress {
		line-height: 0;
	}

	/* Телефон в header */
	.header-action-telephone {
		font-weight: 700;
		line-height: 0;     text-wrap: nowrap;
	}

	/* SVG иконки */
	.svg-link {
		align-items: center;
		display: flex;
		justify-content: center;
		transition:
			 
			transform 0.3s ease;
	}

	.svg-link:hover {
		transform: scale(1.1);
	}

	.svg-link svg {
		height: 18px;
		width: 18px;
	}

	.svg-link svg,
	.svg-link svg path {
		stroke: #222222;
		 
	}
	
	
	
	/* ========================================
	   HEADER - СОСТОЯНИЕ SCROLLED
	   ======================================== */

	/* Цвет ссылок при скролле */
	.header.header-white {
		color: #ffffff;
	}

	/* Логотип при скролле */
	.header.header-white .logo svg,
	.header.header-white .logo svg path {
		fill: #ffffff;
		stroke: #ffffff;
	}

	/* SVG иконки при скролле */
	.header.header-white .svg-link svg,
	.header.header-white .svg-link svg path {
		stroke: #ffffff;
	}

	/* Burger lines при скролле */
	.header.header-white .burger-line {
		background: #ffffff;
	}
	
	
	
	
	/* ========================================
	   BURGER MENU - КНОПКА
	   ======================================== */

	.burger {
		background: transparent;
		border: none;
		cursor: pointer;
		display: none;
		flex-direction: column;
		height: 15px;
		justify-content: space-between;
		min-width: 18px;
		padding: 0;
		transition: transform 0.3s ease;
		width: 18px;
		z-index: 1001;
	}

	.burger:hover {
		transform: scale(1.05);
	}

	/* Линии burger */
	.burger-line {
		background: #222222;
		border-radius: 3px;
		height: 1px;
		transition:
			transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
			background 0.3s ease,
			opacity 0.3s ease;
		width: 100%;
	}

	/* Анимация открытия burger */
	.burger.active .burger-line:nth-child(1) {
		transform: translateY(7.5px) rotate(45deg);
	}

	.burger.active .burger-line:nth-child(2) {
		opacity: 0;
	}

	.burger.active .burger-line:nth-child(3) {
		transform: translateY(-6.5px) rotate(-45deg);
	}

	/* Цвет линий при активном burger */
	.burger.active .burger-line {
		background: #222222;
	}

	/* Псевдоэлемент для фона burger (мобильная версия) */
	@media (max-width: 1024px) {
		.burger::after {
			box-shadow: inset 0 50px 5px 0px rgb(255 255 255);
			content: "";
			height: 60px;
			left: -47px;
			 
			width: clamp(400px, 100vw, 560px);
			opacity: 0;
			pointer-events: none;
			position: absolute; 
			top: 0;
			margin-top: -20px;
			transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
			z-index: -1;
		}

		.burger.active::after {
			opacity: 1;
			transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
		}
	}

	/* Цвет ссылок в открытом меню при scrolled header */
	.header.header-white .nav-menu.active a:not(.btn) {
		color: #222222;
	}
	
	/* ========================================
	   АДАПТИВНОСТЬ - ПЛАНШЕТЫ
	   ======================================== */

	@media (max-width: 992px) {
		/* Скрываем адрес на планшетах */
		.header-action-adress {
			display: none;
		}

		/* Уменьшаем отступы в меню */
		.nav-menu {
			gap: 16px;
			flex-direction: column;
			padding: 0;
			display: flex;
			flex: 1;
			justify-content: flex-start;
			        width: 100%;
        padding: 0 16px;
		}
	}

	/* ========================================
	   АДАПТИВНОСТЬ - МОБИЛЬНЫЕ УСТРОЙСТВА
	   ======================================== */
	.nav-social{
			    display: flex;
    flex-direction: row;
    gap: 8px;
		}
	@media (max-width: 1024px) {
		/* Уменьшаем отступы в навигации */
		.nav {
			gap: 12px;
		}

		/* Показываем burger */
		.burger {
			display: flex;
			order: -1;
		}

		/* Логотип занимает оставшееся пространство */
		.logo {
			flex: 1;
			font-size: 1.2rem;
		}

		/* Скрываем адрес в header-action */
		.header-action-adress {
			display: none;
		}

		/* Уменьшаем отступы в header-action */
		.header-action {
			gap: 16px;
		}

		/* Показываем nav-menu-action */
		.nav-menu-action {
			align-items: flex-start;
			display: flex; 
			flex-direction: column; 
			width: 100%;
			gap: 16px;
		}

		/* Мобильное меню - выезжает слева */
		.nav-wrapper {
			align-items: flex-start;
			background-color: #fff;
			flex-direction: column;
			gap: 0;
			height: 100dvh;
			justify-content: flex-start;
			left: -105%;
			 
			overflow-y: auto;
			padding: 48px 0px 16px 0px;
			position: fixed;
			top: 0;
			transition:
				left 0.4s cubic-bezier(0.4, 0, 0.2, 1),
				box-shadow 0.4s ease;
			width: clamp(400px, 100vw, 560px);
			display:flex;
		}

		/* Открытое меню */
		.nav-wrapper.active {
			box-shadow: 5px 0 15px rgba(0, 0, 0, 0.1);
			left: 0;
			width: clamp(400px, 100vw, 560px);
		}

		/* Пункты меню на всю ширину */
		.nav-menu li {
			width: 100%;
			height: auto;
			display: flex;
			align-items: center; 
			line-height:normal;
		}

		/* Увеличенные ссылки в мобильном меню */
		.nav-link {
			display: block;
			font-size: 1.5rem; 
			width: 100%;        color:#222222; line-height: normal;
		}

		/* Убираем псевдоэлемент у ссылок */
		.nav-link::after {
			display: none;
		}

		/* Адрес в мобильном меню */
		.nav-address {
			border-bottom: none;
			border-top: 1px solid #eeeeee;
			color: #222222;
			display: block;
			font-size: 1rem;
			line-height: 1.6;
			margin-top: 16px;
			padding-top: 16px;
			        padding-right: 16px;
					        padding-left: 16px;
			width: 100%;
		}

		/* Телефон в мобильном меню */
		.nav-telephone {
			color: #222222;
			display: block;
			font-size: 1.6rem;     text-wrap: nowrap;
			line-height: normal; 
			width: 100%;  padding-right: 16px;
					        padding-left: 16px;
		}
		
		.nav-menu-action-wrapper {
			 padding-right: 16px;
					        padding-left: 16px;   display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    width: 100%;
		} 
		
	

		/* Overlay - затемнение фона */
		.nav-overlay {
			background-color: rgba(0, 0, 0, 0.5);
			height: 100vh;
			left: 0;
			opacity: 0;
			position: fixed;
			top: 0;
			transition:
				opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
				visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1);
			visibility: hidden;
			width: 100%;
			z-index: 9;
		}

		/* Активный overlay */
		.nav-overlay.active {
			opacity: 1;
			visibility: visible;
		}
	}
	
	.nav-menu-footer .nav-link{
		        text-align: center; font-size: 1.05rem;
	}

	/* ========================================
	   АНИМАЦИЯ ЗАГРУЗКИ СТРАНИЦЫ
	   ======================================== */

	/* Скрываем всю страницу до загрузки */
main {
  opacity: 0;

}

/* Скрываем контент header (но не ::before) */
.header .nav {
  opacity: 0;
  transform: translateY(-20px);
}

/* Плавное появление всей страницы */
body.loaded  main{
  animation: fadeInPage 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Анимируем только контент header */
body.loaded .header .nav {
  animation: slideDownNav 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.2s forwards;
}

/* Анимация навигации */
@keyframes slideDownNav {
  from {
    opacity: 0;
    transform: translateY(-16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Анимация страницы */
@keyframes fadeInPage {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


	/* Скрытие по брейкпоинтам (Bootstrap 3) */

	/* xs < 768px */
	@media (max-width: 767px) {
	  .hidden-xs {
		display: none !important;
	  }
	}

	/* sm ≥ 768px и < 992px */
	@media (min-width: 768px) and (max-width: 991px) {
	  .hidden-sm {
		display: none !important;
	  }
	}

	/* md ≥ 992px и < 1200px */
	@media (min-width: 992px) and (max-width: 1199px) {
	  .hidden-md {
		display: none !important;
	  }
	}

	/* lg ≥ 1200px */
	@media (min-width: 1200px) {
	  .hidden-lg {
		display: none !important;
	  }
	}
	
	/* ========================================
	   CART MODAL - МОДАЛЬНОЕ ОКНО КОРЗИНЫ
	   ======================================== */

	.cart-modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 10000;
		pointer-events: none;
	}

	.cart-modal.active {
		pointer-events: auto;
	}

	/* Затемнение */
	.cart-modal-overlay {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.15);
		opacity: 0;
		transition: opacity 0.3s ease;
	  
	}

	.cart-modal.active .cart-modal-overlay {
		opacity: 1;
	}

	/* Контейнер корзины */
	.cart-modal-container {
		position: absolute;
		top: 0;
		right: 0;
		width: 100%;
		 
		max-width: 500px;
		height: 100%;
		background: #fff;
		transform: translateX(100%);
		transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);

		display: flex;
		flex-direction: column;
	}

	.cart-modal.active .cart-modal-container {
		transform: translateX(0); 	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);

		box-shadow: -10px 0 40px rgba(0, 0, 0, 0.2);
	}


	#garda-cart-content{
		    height: 100%;
    display: flex;
	}
	/* Кнопка закрытия */
	.cart-modal-close {
		position: absolute;
		top: 0;
		left: 0;
		width: 40px;
		height: 40px;
		border: 1px solid #222222;

		background: #ffffff;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #222222;
		transition: all 0.3s ease;
		z-index: 10;
	}

	.cart-modal-close svg {
		width: 18px;
		height: 18px;
	}
	.cart-modal.active .cart-modal-close {
		left: -40px;
	}

	@media (max-width: 1024px) {
		.cart-modal.active .cart-modal-close {
			left: auto;
			right: 0px;
		}
	}

	/* Содержимое */
	.cart-modal-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		height: 100%;
		overflow: hidden;
	}

	/* ========================================
	   СПИСОК ТОВАРОВ - СКРОЛЛИТСЯ
	   ======================================== */

	.cart-items {
		flex: 1;
		overflow-y: auto;
		overflow-x: hidden;
	}
.cart-item{
		border-bottom: 1px solid #222222;
}
  
	.cart-item-inner {
		display: flex;
 
		padding: 16px;
	
		gap: 16px;
		position: relative;
		background: #fff; transition: opacity 0.3s ease, transform 0.3s ease;
	}
	
 
	
	.cart-item.removing .cart-item-inner {
    opacity: 0;
    transform: translateX(100%);
}

	.cart-item-image {
		width: 100px;

		flex-shrink: 0;

		overflow: hidden;
	}

	.cart-item-image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.cart-item-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.cart-item-title {
		margin: 0;
		color: #222222;
		padding-right: 48px;
	}

	.cart-item-controls {
		display: flex;
		justify-content: flex-start;
		align-items: end;
		margin-top: auto;
		gap: 16px;
	}

	/* Количество */
	.cart-item-quantity {
		display: flex;
		align-items: center;

		border: 1px solid #222222;
	}

	.quantity-btn {
		width: 32px;
		height: 32px;
		border: none;
		background: none;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 18px;
		color: #222222;
		transition: background 0.2s;
	}

	.quantity-btn:hover {
		background: #fafafa;
	}
	
	.cart-form-header{
		display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
	}

	/* */
	/* Кнопка "Оформить заказ" с иконкой */
	.cart-checkout-btn {
 
		background: none;
		color: #222222;
		border: none;
	 
	 margin: 0;
    padding: 0;
	 
		cursor: pointer;
		transition: all 0.3s;

		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		position: relative;
	}

	.cart-checkout-btn:active {
		transform: translateY(0);
	}

	/* Иконка стрелки */
	.cart-checkout-btn svg {
		width: 20px;
		height: 20px;
		transform: scaleY(-1);
		transition: transform 0.3s;
	}

	/* Поворот стрелки когда форма открыта */
	.cart-checkout-btn.active svg {
		transform: scaleY(1);
	}

	/* Форма - изначально скрыта */
	.cart-form {
		max-height: 0;
		overflow: hidden;
		opacity: 0;
		transition:
			max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
			opacity 0.5s ease;
	}

	/* Форма показана */
	.cart-form.show {
		max-height: 1000px;
		opacity: 1;
	}

	/* */

	.quantity-input {
		 
		width: 32px;
		border: none;
		text-align: center;
 
		font-weight: 500;
		-moz-appearance: textfield;
	}

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

	.cart-item-price {
		color: #222222;
	}

	/* Кнопка удаления */
	.cart-item-remove {
		position: absolute;
		top: 16px;
		right: 16px;
		width: 18px;
		height: 18px;
		border: none;
		background: transparent;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #222222;
		transition: all 0.2s;
		opacity: 0.3;
	}
	.cart-item-remove svg {
		width: 18px;
		min-width: 18px;
		height: 18px;
		cursor: pointer;
	}

	.cart-item-remove:hover {
		opacity: 1;
		cursor: pointer !important;
	}

	/* Кастомный скроллбар */
	.cart-items::-webkit-scrollbar {
		width: 6px;
	}

	.cart-items::-webkit-scrollbar-track {
		background: #f5f5f5;
	}

	.cart-items::-webkit-scrollbar-thumb {
		background: #ccc;
		border-radius: 3px;
	}

	.cart-items::-webkit-scrollbar-thumb:hover {
		background: #999;
	}
	
	.cart-empty{
		    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;gap: 16px;
     
	}
	.cart-empty-description {
		max-width: 60%;
    text-align: center;
	}

	/* ========================================
	   ФОРМА ОФОРМЛЕНИЯ - ЗАФИКСИРОВАНА ВНИЗУ
	   ======================================== */

	.cart-form-section {
		flex-shrink: 0;
		padding: 16px;
		border-top: 1px solid #222222;
		background: #fff;
		box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05);
		z-index: 1;
	}

	.cart-form {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.form-group {
		display: flex;
		flex-direction: column;
		gap: 6px;
		padding-top: 16px;
		width:100%;
	}
	
	.login-form {
		width:100%;
	}

	/* ========================================
	   FLOATING LABEL - ПОДНИМАЮЩИЙСЯ ЛЕЙБЛ
	   ======================================== */

	.form-field {
		position: relative;
		width: 100%;
	}

	.form-input {
		width: 100%;
		padding: 22px 0 8px 0;
		border: none;
		border-bottom: 1px solid #e0e0e0;
 
 font-family: "Lato";
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0.4px;
    line-height: 1.6;
    font-size: 1.05rem;
		background: #fff;
	}

	.form-input:focus {
		outline: none;
		border-color: #1a1a1a;
	}

	.form-input.error {
		border-color: #e74c3c;
	}

	.form-input.success {
		border-color: #222222;
	}

	/* Лейбл */
	.form-label {
		position: absolute;
		left: 0px;
		top: 50%;
		transform: translateY(-50%);
		font-size: 15px;
		color: #999;
		pointer-events: none;
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	}

	/* Лейбл поднимается когда поле в фокусе или заполнено */
	 .form-input:focus + .form-label,
.form-input:not(:placeholder-shown) + .form-label,
.form-input:-webkit-autofill + .form-label {
		 
		
		top: 0;
		transform: translateY(0);
		font-size: 12px;
		color: #999;
		font-weight: 500;
	}
	
 
	 
	.form-input,
.form-input:-webkit-autofill,
.form-input:-webkit-autofill:hover,
.form-input:-webkit-autofill:focus {
		font-family: "Lato";
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0.4px;
    line-height: 1.6;
    font-size: 1.05rem;
	}

	.form-input:focus + .form-label {
		color: #999;
	}

	.form-input.error:focus + .form-label,
	.form-input.error:not(:placeholder-shown) + .form-label {
		color: #e74c3c;
	}

	.form-input.success:focus + .form-label,
	.form-input.success:not(:placeholder-shown) + .form-label {
		color: #999;
	}

	/* ========================================
	   ОШИБКИ
	   ======================================== */

	.form-error {
		font-size: 11px;
		color: #e74c3c;
		opacity: 0;
	}

	.form-error.visible {
		opacity: 1;
		animation: fadeIn 0.3s ease;
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
			transform: translateY(-5px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	/* ========================================
	   ЧЕКБОКС
	   ======================================== */


	.checkbox-label {
		display: flex;
		align-items: flex-start;
		gap: 16px;
		cursor: pointer;
	}

	.checkbox-label input[type="checkbox"] {
		display: none;
	}

	.checkbox-custom {
		width: 16px;
		height: 16px;
		border: 1px solid #222222;

		flex-shrink: 0;
		position: relative;
		transition: all 0.3s;
		margin-top: 3px;
	}

	.checkbox-label:hover .checkbox-custom {
		border-color: #222222;
	}

	.checkbox-label input[type="checkbox"]:checked + .checkbox-custom {
		background: #1a1a1a;
		border-color: #1a1a1a;
	}

	.checkbox-label input[type="checkbox"]:checked + .checkbox-custom::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 5px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
	}

	.checkbox-text {
	
		
		color: #222222;
	}

	.checkbox-text a {
		color: #1a1a1a;
		text-decoration: underline;
		transition: color 0.3s;
	}

	.checkbox-text a:hover {
		color: #666;
	}

	/* ========================================
	   КНОПКА ОТПРАВКИ
	   ======================================== */

	.cart-submit-btn {
		width: 100%;
 
 

		cursor: pointer;
		transition: all 0.3s;
		margin-top: 4px;
	}

	/* ========================================
   NOTIFICATION - УВЕДОМЛЕНИЯ
   ======================================== */
 



/* Корневой контейнер-стек */
#notification {
    position: fixed;
    inset:0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none; /* клики только по самим .notification */
	 opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
	    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: end;
    width: 450px;
    left: auto;
    padding: 8px;
	 
	 background: linear-gradient(to right,  rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15)); 
 
}

 

#notification.has-notifications {
    opacity: 1;
    pointer-events: none;   
}

/* Отдельное уведомление */
.notification {
    background: rgba(255, 255, 255, 1); 
    padding: 16px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    max-width: 400px;

    transform: translateX(calc(100% + 40px));
    opacity: 0;
    pointer-events: auto;

    transition:
        transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        opacity   0.3s ease;
}

/* Состояние показа */
.notification.show {
    transform: translateX(0);
    opacity: 1;
    box-shadow: 8px 12px 24px rgba(0, 0, 0, 0.15);
}

/* Скрытое (для анимации ухода) */
.notification.notification-hidden {
    transform: translateX(calc(100% + 40px));
    opacity: 0;
}

.notification-icon{
	    width: 20px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Иконка */
.notification-icon svg {
 width: 20px;
    height: 20px;
}

.notification-icon svg path, 
.notification-icon svg g{ stroke:#222222;
}

/* Текстовая часть */
.notification-content {
    flex: 1;
}

.notification-title {
  font-size: 1.35rem;
    font-weight: 700;
    margin: 0 0 4px 0;
    color: #222222;     line-height: 1;
}

.notification-text {
   
    margin: 0;
    color: #222222;
    line-height: 1.4;
}

@media (max-width: 1024px) {
	.notification-title {
  font-size: 1rem;
	}
    #notification {
        top: 0;
        right: 0;
        left: 0;
        align-items: center;
    }

    .notification {
        max-width: calc(100% - 24px);
        padding: 16px 18px;
    }
}

	/* ========================================
	   АДАПТИВНОСТЬ
	   ======================================== */

	@media (max-width: 1024px) {
		.cart-modal-container {
			width: 100%;
		}

		.cart-items {
			margin: 0 39px 0 0;
			border-right: 1px solid #222222;
		}
	}

	/* Отключаем скролл страницы */
	body.cart-modal-open {
		overflow: hidden;
	}
	
	
	
	@media (min-width: 1024px) {
		body.cart-modal-open,
		body.cart-modal-open .header {
			padding-right: 6px;
		}
	}
	
	[data-open-callback] {
		cursor:pointer;
	}
	[data-cart-open] {
		gap: 8px;
		cursor:pointer;
	}

.header.header-white .header-cart-count {background: none;}

	.header-cart-count {
		display: inline-flex;
		    background: #eee;
			width: 20px;
			height: 20px;
			display: flex;
			align-items: center;
			justify-content: center;
	}
	.header-cart-count:not(.visible) {
		display: none;
	}
	
 

	/*----------------------- Полоса прокрутки ------------------------------ */
	::-webkit-scrollbar-button {
		background-image: url("");
		background-repeat: no-repeat;
		width: 6px;
		height: 0px;
	}
	::-webkit-scrollbar-track {
		background-color: #f4f4f4;
	}
	::-webkit-scrollbar-thumb {
		-webkit-border-radius: 0px;
		border-radius: 0px;
		background-color: #999;
	}
	::-webkit-scrollbar-thumb:hover {
		background-color: #000;
	}
	::-webkit-resizer {
		background-image: url("");
		background-repeat: no-repeat;
		width: 6px;
		height: 0px;
	}
	::-webkit-scrollbar {
		width: 6px;
	}
	@media (max-width: 1024px) {
		::-webkit-scrollbar-button {
			background-image: url("");
			background-repeat: no-repeat;
			width: 0px;
			height: 0px;
		}
		::-webkit-resizer {
			background-image: url("");
			background-repeat: no-repeat;
			width: 0px;
			height: 0px;
		}
		::-webkit-scrollbar {
			width: 0px;
		}
	}
	
	/* ========================================
	   Страница
	   ======================================== */
	   
	:root { 
	
		--header-height: 40px; 
		--footer-height: 249px; 
	
	}
	
	body {
		display: flex;
		flex-direction: column;
		min-height: calc(100vh - var(--footer-height));
	}
	header {
		height: var(--header-height);
	}
	main {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		min-height: calc(100vh - var(--footer-height));
		z-index: 1;
	}
	footer {
		background: #eee;
		height: var(--footer-height);
		flex: 0 0 auto;
		z-index: 1;
	} 
	
	@media (max-width: 1024px) {
		body {
			min-height: 90vh;
		}
		main {
			min-height: 90vh;
		}
		footer {
			height: auto;
		}
	}
	
	/* ========================================
	   FOOTER - ПОДВАЛ
	   ======================================== */

	.footer {
		background: #ffffff;
	}

	/* ========================================
	   ВЕРХНЯЯ ЧАСТЬ ФУТЕРА
	   ======================================== */

	.footer-top {
		border-bottom: 1px solid #eee;
		padding-bottom: 16px;
	}

	.footer-container {
		margin: 0 auto;
	}

	.footer-top .footer-container {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0;
	}

	/* ========================================
	   КАРТА (ИЗОБРАЖЕНИЕ)
	   ======================================== */

	.footer-map {
		position: relative;
		width: 100%;
		height: 100%;
		overflow: hidden;
		filter: grayscale(1) brightness(1) invert(0);
	}
	@media (max-width: 1024px) {
		.footer-map {
			height: 400px;
		}
	}

	.footer-map a {
		display: block;
		width: 100%;
		height: 100%;
		position: relative;
	}

	.footer-map img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
		transition: transform 0.3s ease;
	}

	/* ========================================
	   КОНТАКТНАЯ ИНФОРМАЦИЯ
	   ======================================== */

	.footer-info {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 32px;
		position: relative;
	}
	@media (max-width: 1024px) {
		.footer-info {
			padding: 32px 0 0 0;
		}
	}
	.footer-link {
		color: #222222;
		text-decoration: none;

		transition: color 0.3s ease;
		align-self: flex-start;
	}

	/* Контакты */
	.footer-contacts {
		display: flex;
		flex-direction: column;
		gap: 16px;
		margin-bottom: 16px;
	}

	.footer-contact {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	.footer-contact-label {
		color: #222222;
		opacity: 0.5;
	}

	.footer-contact-value {
		color: #222222;
		text-decoration: none;
		transition: color 0.3s ease;
		font-weight: 600;
	}



	h3.txt {
		font-family: "Literata", sans-serif;
		font-weight: 400;
		margin-bottom: 32px;
		font-size: 1.8rem;
	}

	/* Кнопка "Наверх" */
	.footer-scroll-top {
		position: fixed;
			bottom: 16px;
		right: 23px;
		width: 40px;
		height: 40px;
z-index:9;
		border: 1px solid #222222;
		background: #fff;
		color: #222222;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.3s ease;
	}
	
	@media (max-width: 1024px) {
		.footer-scroll-top {
			
			bottom: 16px;
		right: 17px;
		}
		
	}

	.footer-scroll-top:hover {
		background: #222222; 
	}

	.footer-scroll-top:hover svg,
	.footer-scroll-top:hover path {
		stroke: #ffffff;
	}
 	.footer-scroll-top svg {
		width: 18px;
		height: 18px;
	}
	.footer-scroll-top svg,
	.footer-scroll-top path {
		stroke: #222222;
	}
	
	@media (max-width: 1024px) {
		
		.footer-scroll-top svg,
	.footer-scroll-top path {
		stroke: #fff;
	}
	
	.footer-scroll-top {
		background:#222222;
	}
	}
	/* ========================================
	   НИЖНЯЯ ЧАСТЬ ФУТЕРА
	   ======================================== */

	.footer-bottom {
		padding: 32px 0;
	}

	.footer-bottom .footer-container {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 32px;
	}

	.footer-copyright {
		 
		white-space: nowrap;
	}

	.footer-text {
		opacity: 0.6;
	}
	
	.footer-main {
		font-weight:700;
	}
	.footer-dop {
			opacity: 0.6;
	}
	

	/* ========================================
	   АДАПТИВНОСТЬ
	   ======================================== */

	@media (max-width: 1024px) {
		.footer-top .footer-container {
			grid-template-columns: 1fr;
		}

		.footer-bottom .footer-container {
			flex-direction: column;
		}
	}
	
	
	/* ========================================
	   SLIDER - ОСНОВНЫЕ СТИЛИ
	   ======================================== */

	.slider {
		margin: 0 auto;

		overflow: hidden;
		position: relative;
		width: 100%;
	}

	/* Обертка слайдов */
	.slider-wrapper { 
		position: relative;
		width: 100%;
	}

	 

	/* ========================================
	   SLIDER - СЛАЙДЫ
	   ======================================== */

	.slide {
		height: clamp(500px, 90vh, 600px);
		left: 0;
		opacity: 0;
		position: absolute;
		top: 0;
		transition:
			opacity 1s cubic-bezier(0.4, 0, 0.2, 1),
			visibility 1s cubic-bezier(0.4, 0, 0.2, 1);
		visibility: hidden;
		width: 100%;
	}
	@media (max-width: 1024px) {
		.slide {
			height: clamp(500px, 90vh, 600px);
		}
	}

	/* Активный слайд */
	.slide.active {
		opacity: 1;
		visibility: visible;
		z-index: 1;
	}

	/* Изображения слайдов */
	.slide img {
		height: 100%;
		object-fit: cover;
		width: 100%;
	}

	/* ========================================
	   SLIDER - КОНТЕНТ СЛАЙДА
	   ======================================== */

	.slide-content-wrapper {
		display: flex;
		width: 100%;
		height: 100%;
		max-width: 1340px;
		margin: 0 auto;
		align-items: center;
		justify-content: center;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
	}
	.slide-content {
		align-items: flex-start;
		bottom: 74px;
		display: flex;
		flex-direction: column;
		gap: 32px;
		justify-content: space-between;
		left: 16px;
		max-width: 560px;
		position: absolute;
		text-align: left;
		width: 100%;
		z-index: 2;
	}

	/* Контент слайда на мобильных */
	@media (max-width: 1024px) {
		.slide-content {
			left: 16px; 
		}
	}

	/* ========================================
	   SLIDER - АНИМАЦИЯ ТЕКСТА
	   ======================================== */

	/* Базовое состояние анимируемых элементов */
	.slide-animation {
		opacity: 0;
		transform: translateY(30px);
		transition:
			opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
			transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
	}

	/* Уровень 1 - появляется первым */
	.slide.active .slide-animation.level-1 {
		opacity: 1;
		transform: translateY(0);
		transition-delay: 0.3s;
	}

	/* Уровень 2 */
	.slide.active .slide-animation.level-2 {
		opacity: 1;
		transform: translateY(0);
		transition-delay: 0.5s;
	}

	/* Уровень 3 */
	.slide.active .slide-animation.level-3 {
		opacity: 1;
		transform: translateY(0);
		transition-delay: 0.7s;
	}

	/* Уровень 4 */
	.slide.active .slide-animation.level-4 {
		opacity: 1;
		transform: translateY(0);
		transition-delay: 0.9s;
	}

	/* Уровень 5 - появляется последним */
	.slide.active .slide-animation.level-5 {
		opacity: 1;
		transform: translateY(0);
		transition-delay: 1.1s;
	}

	/* ========================================
	   SLIDER - ТИПОГРАФИКА
	   ======================================== */

	/* Заголовки в слайдах */
	.slide-content h1,
	.slide-content h2 {
		color: #ffffff;
		  line-height:1;
		text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
	}

	/* Текст в слайдах */
	.slide-content span {
		color: #ffffff;
		text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
	}

	/* Кнопки в слайдах */
	.slide-content .btn {
		border-color: #ffffff;
		color: #ffffff;
		backdrop-filter: blur(6px);
	}

	.slide-content .btn:hover {
		border-color: #222222;
	}

	/* Кнопки в слайдах на мобильных */
	@media (max-width: 1024px) {
		.slide-content .btn {
			border-color: #222222;
		}
	}
	 


	/* ========================================
	   SLIDER - СТРЕЛКИ НАВИГАЦИИ
	   ======================================== */

	/* Контейнер стрелок */
	.slider-arrows {
		align-items: center;
		bottom: 74px;
		display: none;
		flex-direction: row;
		justify-content: space-between;
		position: absolute;
		right: 24px;
		z-index: 10;
	}

	/* Стрелки */
	.slider-arrow {
		align-items: center;
		background-color: rgba(255, 255, 255, 0.3);
		border: 1px solid #ffffff;
		color: #fff;
		cursor: pointer;
		display: flex;
		height: 32px;
		justify-content: center;
		position: relative;
		transition:
			background 0.3s cubic-bezier(0.4, 0, 0.2, 1),
			color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
			transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		width: 32px;
	}

	.slider-arrow:hover {
		background: #ffffff;
		color: #222222;
		transform: scale(1.1);
	}

	/* Позиционирование стрелок */
	.slider-arrow-prev {
	}
	.slider-arrow-next {
	}

	/* ========================================
	   SLIDER - ТОЧКИ НАВИГАЦИИ
	   ======================================== */

	#slider-hero .owl-dots {
		bottom: 32px;
		display: flex;
		gap: 18px;
		position: absolute;
		right: 26px;
		z-index: 10;
	}

 
	@media (max-width: 1024px) {
		#slider-hero .owl-dots {
			gap: 10px;
		}
	}

	/* Отдельная точка */
	#slider-hero .owl-dot {
		background: none;
		border: 1px solid #ffffff;
		cursor: pointer;
		height: 10px;
		max-height: 10px;
		min-height: 10px;
		backdrop-filter: blur(6px);
		transition:
			background 0.3s cubic-bezier(0.4, 0, 0.2, 1),
			transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
			border-color 0.3s ease;
		width: 10px;      border-radius: 0;
    margin: 0;
		max-width: 10px; 
		min-width: 10px;  padding: 0;
	}

	#slider-hero .owl-dot :hover {
		background: rgba(255, 255, 255, 0.7);
		 
	}

	/* Активная точка */
	#slider-hero .owl-dot.active {
		background: #ffffff;
	 
	}
	
	/* ========================================
	   CAROUSEL - КАРУСЕЛЬ
	   ======================================== */

	.carousel-section {
		background: #fafafa;
	}

	.section-padding {
		padding: 36px 0;
	}

	section h2 {
	 
	 
	}

	/* ========================================
	   CAROUSEL - КАРУСЕЛЬ
	   ======================================== */

	.carousel-section {
		background: #fafafa;
	}

	.section-padding {
		padding: 36px 0;
	}

	section h2 {
 
	}

	/* Обертка карусели и стрелок */
	.carousel-wrapper {
		position: relative;
		padding-bottom: calc(32px + 32px);
	}

	.carousel {
		position: relative;
		overflow: hidden;
		scroll-behavior: smooth;
	}

	/* Трек карточек */
	.carousel-track {
		display: flex;
		gap: 16px;
		transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	}

	/* ========================================
	   CAROUSEL - КАРТОЧКА
	   ======================================== */

	.carousel-card {
		flex: 0 0 calc((100% - 96px) / 7); /* 7 карточек на десктопе */
	overflow: hidden;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    align-items: flex-start;
    justify-content: end;
    display: flex;
    flex-direction: column;     gap: 16px;
	}
	
	.garda-category-card .carousel-card {
		border: 1px solid #eee;
    padding: 16px;
	}

	/* Изображение карточки */
	.carousel-card-image {
		aspect-ratio: 4 / 4;
		overflow: hidden;
		position: relative;
		background: #ffffff;
		padding: 16px;
	}

	.carousel-card-image img {
		height: 100%;
		object-fit: cover;
		transition: transform 0.5s ease;
		width: 100%;
	}

	/* Контент карточки */
	.carousel-card-content {
	    display: flex;
    flex-direction: row;
  
    align-items: end;
    justify-content: space-between;
    gap: 16px;     width: 100%;
	}

	.carousel-card-content h3 {
		color: #222222;
		font-weight: 400;
		margin: 0;
	}
	
	.carousel-card-count {
		   
    opacity: 0.5;
   
	}
	
	.carousel-card:hover img {
		transform:scale(1.05, 1.05); transition: transform 0.5s ease;
	} 
 
	
	.garda-category-card {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
}

@media (max-width: 1024px) {
    .garda-category-card {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
@media (max-width: 1024px) {
    .garda-category-card {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

 

/* совсем маленькие – по 1, если нужно */
@media (max-width: 480px) {
    .garda-category-card {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


	/* ========================================
	   CAROUSEL - СТРЕЛКИ НАВИГАЦИИ
	   ======================================== */

	.carousel-arrows {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 64px;
		height: 32px;
		position: absolute;
		left: 16px;
		bottom: 0;
		z-index: 10;
	}

	.carousel-arrow {
		align-items: center;
		background: #ffffff;
		border: 1px solid #222222;
		color: #222222;
		cursor: pointer;
		display: flex;
		height: 32px;
		justify-content: center;
		position: relative;
		transition:
			background 0.3s ease,
			color 0.3s ease,
			opacity 0.3s ease;
		width: 32px;
	}

	.carousel-arrow:hover:not(:disabled) {
		background: #222222;
		color: #ffffff;
	}

	.carousel-arrow:disabled {
		cursor: not-allowed;
		opacity: 0.3;
	}

	/* ========================================
	   CAROUSEL - АДАПТИВНОСТЬ
	   ======================================== */

	/* Средние экраны: 768px - 1024px */
	@media (max-width: 1024px) {
		.carousel-card {
			flex: 0 0 calc((100% - 64px) / 5); /* 5 карточек */
		}

		/* Включаем нативный скролл */
		.carousel {
			overflow-x: auto;
			overflow-y: hidden;
			-webkit-overflow-scrolling: touch;
			scroll-behavior: smooth;
			scroll-snap-type: x mandatory;
			scrollbar-width: none;
			-ms-overflow-style: none;
		}

		/* Скрываем скроллбар */
		.carousel::-webkit-scrollbar {
			display: none;
		}

		/* Убираем transform для нативного скролла */
		.carousel-track {
			transform: none !important;
			transition: none;
		}

		/* Привязка карточек к скроллу */
		.carousel-card {
			scroll-snap-align: start;
		}
	}

	/* Маленькие экраны: меньше 768px */
	@media (max-width: 1024px) {
		.carousel-card {
			flex: 0 0 calc((100% - 16px) / 2); /* 2 карточки */
		}
		 .acc-body .garda-sidebar-root {
	 border: 1px solid #eee;
 }
	}
	
	.garda-1 {
	width: clamp(290px, 20vw, 1024px);
}
.garda-2 {
	width: clamp(290px, 80vw, 1024px);
}
	@media (max-width: 1024px) {
		.garda-1,  
 
.garda-2 {
	 width:100%;
}
	}
	

 

/* списки */
.garda-sidebar-root,
.garda-sidebar-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.garda-sidebar-item {
    border-bottom: 1px solid #eee;
}

/* строка: текст + кнопка */
.garda-sidebar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 0;
}

.garda-sidebar-link {
    flex: 1;
    display: block;
    text-decoration: none;
 
}

.garda-sidebar-item.current > .garda-sidebar-row .garda-sidebar-link {
    font-weight: 700;
  
}

.garda-sidebar-item.active-branch > .garda-sidebar-row .garda-sidebar-link {
   
}

/* кнопка +/- */
.garda-sidebar-toggle {
    width: 22px;
    height: 22px;
    border: 1px solid #222222;
    background: #fff;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
}

.garda-sidebar-toggle::before,
.garda-sidebar-toggle::after {
    content: '';
    position: absolute;
    background: #222222;
    transition: transform 0.2s ease;
}

.garda-sidebar-toggle::before {
    width: 8px;
    height: 1px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.garda-sidebar-toggle::after {
    width: 1px;
    height: 8px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* открыто: минус */
.garda-sidebar-item.is-open > .garda-sidebar-row .garda-sidebar-toggle::after {
    transform: translate(-50%, -50%) scaleY(0);
}

/* контейнер для дочерних */
.garda-sidebar-children {
    max-height: 0;
    overflow: hidden;
    padding-left: 0;
    transition: max-height 0.25s ease;
}

/* открытое состояние */
.garda-sidebar-item.is-open > .garda-sidebar-children {
    max-height: 800px; /* достаточно большое число */
}

/* вложенные UL чуть отступаем */
.garda-sidebar-children .garda-sidebar-list {
    border-left: 1px solid #f0f0f0;
    margin-left: 10px;
    padding-left: 10px;
}

/* правая часть */
.garda-archive-main {
    min-width: 0;
}

.garda-archive-title {
 
 
}

.garda-spec-new {
	position: absolute;
    right: 0;
    top: 0;
    background: #222;
    color: #fff;
    padding: 4px 8px;
	z-index:1;
}

 

/* сетка товаров */
.garda-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 24px;
}

/* нижняя граница только между пунктами, но не у последних */
.garda-sidebar-root > .garda-sidebar-item:last-child,
.garda-sidebar-list > .garda-sidebar-item:last-child {
    border-bottom: none;
}

/* если у пункта открыт вложенный список — убираем его border-bottom,
   а разделитель рисуем только у детей */
.garda-sidebar-item.is-open {
    border-bottom: none;
}

.garda-sidebar-item.is-open > .garda-sidebar-children .garda-sidebar-item {
    border-bottom: 1px solid #eee;
}
.garda-sidebar-item.is-open > .garda-sidebar-children .garda-sidebar-item:last-child {
    border-bottom: none;
}
 
.garda-product-card {
text-align: center;
    border: 1px solid #eee;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;position: relative;
}


.garda-sidebar-item.is-open .garda-sidebar-toggle{ 
	background: #222222;
}

.garda-sidebar-item.is-open .garda-sidebar-toggle::before   {
	    background: #ffffff;
}
.garda-sidebar-item.is-open .garda-sidebar-toggle::after   {
	    opacity:0;
}

.garda-product-title {
   
    font-weight: 600;
    margin: 0 0 16px;
}

.garda-product-title a {
    color: #111;
    text-decoration: none;
}

.garda-product-image img {
    display: block;
    margin: 0 auto 16px;
    max-width: 100%;
    height: auto;
}

.garda-product-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
  width:100%;
}

.garda-product-specs {
    text-align: left;
 margin-bottom: -5px;
}

.garda-spec-row {
  white-space: nowrap;     opacity: 0.5;
}

.garda-spec-row span {
    font-weight: 500;
}

.garda-product-in-cart-label{
	
}

.garda-spec-sku {
   margin-bottom: 8px;
    font-size: 0.8em;
    opacity: 0.5; 
    min-width: 100%;
}

.garda-product-buy {
display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: flex-end;
    flex: 1;
    gap: 8px;
}

.garda-qty-block {
    display: inline-flex;
    align-items: center;
    border: 1px solid #ccc;
    margin-bottom: 8px;
}

.garda-btn-square {
    width: 24px;
    height: 24px;
    border: none;
    background: #eee;
    cursor: pointer;
}

.garda-qty-input {
width: 40px;
    height: 24px;
    border: none;
 
    line-height: 24px;
    text-align: center;
}

.garda-product-price {
     
   text-align: right;
    
}

.garda-product-price h3{
	font-weight:600;
}

.garda-product-oldprice{
	opacity:0.5;
}

.garda-button.garda-add-to-cart {
   text-wrap:nowrap;
}

 .garda-product-oldprice{
	text-decoration: line-through;
}

.garda-product-header {
	 position: relative;  width: 100%;
}
 .garda-product-in-cart-label{
	    position: absolute;
    left: 0;
    
    bottom: 0;
    background: #222222;
    color: #fff;
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px; gap: 4px;     line-height: 24px;
}

.garda-spec-new{
	    position: absolute;
    right: 0;
    top: 0;
    background: #222;
    color: #fff;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7em;
    padding: 1px 4px 0 4px;
}

.garda-spec-color{
	background: #eee;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    margin-bottom: 4px;
}

.garda-load-more-wrap {
	    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 0 0 0;
}
 
 
 .modal-body {   margin-top: 32px;
	  display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
	gap:16px;
 }
	
	 /* ========================================
	   Заказ звонка
	   ======================================== */
	
	body.active,
body.modal-active 	{
		overflow: hidden;
	}

	#callback,
	.modal	{
		position: fixed;
		inset: 0;
		z-index: 999;
		pointer-events: none;
		user-select: none;
	}
	#callback.active,
	.modal.active	{
		pointer-events: all;
		user-select: auto;
	}

	#callback-overlay, .modal-overlay {
		opacity: 0;
		pointer-events: none;
		user-select: none;
		position: absolute;
		inset: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 999;
		transition: all 0.2s linear 0.2s;
	}

	#callback.active #callback-overlay, 
	.modal.active .modal-overlay {
		opacity: 1;
		transition: all 0.2s linear;
	}

	.callback-inner {
		background: #fff;
		width: 400px;
		position: absolute;
		inset: 0;
		left: auto;
		overflow: auto;
		z-index: 9999;
		transform: translateX(100%);
		transition: all 0.2s linear;
	}
	
	@media (max-width: 1024px) {
		.callback-inner { 
			width: clamp(400px, 100vw, 560px);
		}
	}
	
	
	#callback.active .callback-inner,
	.modal.active .callback-inner	{
		transform: translateX(0);
		transition: all 0.2s linear 0.2s;
	}
	.callback-wrapper {
		padding: 32px;
	}
	.callback-header {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
	}
	.callback-header-text {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}
	..callback-header-title {
		line-height: 1;
	}
	.callback-header-description {
	}

	.callback-close {
	}
	.callback-body {
	}
	.callback-form {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}


input {outline: none;}
input:-webkit-autofill {
    -webkit-box-shadow: inset 0 0 0 50px #fff !important; /* Цвет фона */
    -webkit-text-fill-color: #222222 !important; /* цвет текста */
    color: #222222 !important; /* цвет текста */
}

.outer {
	position:relative;
}

		#big.owl-carousel .owl-nav button.disabled,
		#thumbs.owl-carousel .owl-nav button.disabled {
			background:#eee; 
			opacity:1;
		}
		
		#big.owl-carousel .owl-nav button.disabled svg g,
		#big.owl-carousel .owl-nav button.disabled svg path,
		#thumbs.owl-carousel .owl-nav button.disabled svg g,
		#thumbs.owl-carousel .owl-nav button.disabled svg path{
			stroke:#a0a0a0;
			fill: #a0a0a0;
		}
		
		 
		 
		#big,
		#thumbs {
			width: 100%;
		}

		#big .item {
			position: relative;
			    background: #fff;
		}

		#big .item img,
		#thumbs .item img {
			display: block;
			width: 100%;
			
			object-fit: contain;
		}
		#big .item img {
			aspect-ratio: 16 / 9;
		}
		#thumbs .item img { 
			aspect-ratio: 1 / 1;
			opacity: 0.5; 
		}

		#thumbs .owl-item.current .item img,
		#thumbs .item:hover img {
			opacity: 1;
		}

		#thumbs {
			display: flex;
			flex-direction: row;
			padding: 0;
			margin: 0;
			width: 100%;
			align-items: flex-end;
		}

		#thumbs .item {
			border: 1px solid #eee;
			cursor: pointer;
		}
 
		#big .owl-nav {
			display: flex;
			position: absolute;
			width: 80px;
			left: 0;
			bottom: 0;
		}

		#big.owl-theme .owl-prev,
		#big.owl-theme .owl-next {
			position: relative; 
			width: 40px;
			height: 40px;
			line-height: 40px;
			margin: 0;
			border: 1px solid #222222;
			display: flex;
			align-items: center;
			justify-content: center;
			background:#fff;
		}
		#big.owl-theme .owl-next {
			margin-left: -1px;
		}

		#big.owl-theme .owl-prev svg,
		#big.owl-theme .owl-next svg {
			width: 18px;
			height: 18px;
		}
		
		#big.owl-theme .owl-prev svg g,
		#big.owl-theme .owl-prev svg path,
		#big.owl-theme .owl-next svg g,
		#big.owl-theme .owl-next svg pat {
			stroke:#222222;
			fill: #222222;
		}

		#big.owl-theme .owl-prev:hover,
		#big.owl-theme .owl-next:hover {
			background:#222222;
		}
		#big.owl-theme .owl-prev:hover svg g,
		#big.owl-theme .owl-prev:hover svg path,
		#big.owl-theme .owl-next:hover svg g,
		#big.owl-theme .owl-next:hover svg pat {
			stroke:#fff;
			fill: #fff;
		}

 #carousel .owl-nav {
			display: flex;
			position: absolute;
			width: 80px;
			left: 0;
			bottom: 0;
		}

		#carousel.owl-theme .owl-prev,
		#carousel.owl-theme .owl-next {
			position: relative; 
			width: 40px;
			height: 40px;
			line-height: 40px;
			margin: 0;
			border: 1px solid #222222;
			display: flex;
			align-items: center;
			justify-content: center;
			background:#fff;
		}
		#carousel.owl-theme .owl-next {
			margin-left: -1px;
		}

		#carousel.owl-theme .owl-prev svg,
		#carousel.owl-theme .owl-next svg {
			width: 18px;
			height: 18px;
		}
		
		#carousel.owl-theme .owl-prev svg g,
		#carousel.owl-theme .owl-prev svg path,
		#carousel.owl-theme .owl-next svg g,
		#carousel.owl-theme .owl-next svg pat {
			stroke:#222222;
			fill: #222222;
		}

		#carousel.owl-theme .owl-prev:hover,
		#carousel.owl-theme .owl-next:hover {
			background:#222222;
		}
		#carousel.owl-theme .owl-prev:hover svg g,
		#carousel.owl-theme .owl-prev:hover svg path,
		#carousel.owl-theme .owl-next:hover svg g,
		#carousel.owl-theme .owl-next:hover svg pat {
			stroke:#fff;
			fill: #fff;
		}
		
		
		#category {padding-bottom: 56px;}
		#sale {padding-bottom: 56px;}
		
 #category .owl-nav {
			display: flex;
			position: absolute;
			width: 80px;
			left: 0;
			bottom: 0;
		}

		#category.owl-theme .owl-prev,
		#category.owl-theme .owl-next {
			position: relative; 
			width: 40px;
			height: 40px;
			line-height: 40px;
			margin: 0;
			border: 1px solid #222222;
			display: flex;
			align-items: center;
			justify-content: center;
			background:#fff;
		}
		#category.owl-theme .owl-next {
			margin-left: -1px;
		}

		#category.owl-theme .owl-prev svg,
		#category.owl-theme .owl-next svg {
			width: 18px;
			height: 18px;
		}
		
		#category.owl-theme .owl-prev svg g,
		#category.owl-theme .owl-prev svg path,
		#category.owl-theme .owl-next svg g,
		#category.owl-theme .owl-next svg pat {
			stroke:#222222;
			fill: #222222;
		}

		#category.owl-theme .owl-prev:hover,
		#category.owl-theme .owl-next:hover {
			background:#222222;
		}
		#category.owl-theme .owl-prev:hover svg g,
		#category.owl-theme .owl-prev:hover svg path,
		#category.owl-theme .owl-next:hover svg g,
		#category.owl-theme .owl-next:hover svg pat {
			stroke:#fff;
			fill: #fff;
		}
		
		
 #sale .owl-nav {
			display: flex;
			position: absolute;
			width: 80px;
			left: 0;
			bottom: 0;
		}

		#sale.owl-theme .owl-prev,
		#sale.owl-theme .owl-next {
			position: relative; 
			width: 40px;
			height: 40px;
			line-height: 40px;
			margin: 0;
			border: 1px solid #222222;
			display: flex;
			align-items: center;
			justify-content: center;
			background:#fff;
		}
		#sale.owl-theme .owl-next {
			margin-left: -1px;
		}

		#sale.owl-theme .owl-prev svg,
		#sale.owl-theme .owl-next svg {
			width: 18px;
			height: 18px;
		}
		
		#sale.owl-theme .owl-prev svg g,
		#sale.owl-theme .owl-prev svg path,
		#sale.owl-theme .owl-next svg g,
		#sale.owl-theme .owl-next svg pat {
			stroke:#222222;
			fill: #222222;
		}

		#sale.owl-theme .owl-prev:hover,
		#sale.owl-theme .owl-next:hover {
			background:#222222;
		}
		#sale.owl-theme .owl-prev:hover svg g,
		#sale.owl-theme .owl-prev:hover svg path,
		#sale.owl-theme .owl-next:hover svg g,
		#sale.owl-theme .owl-next:hover svg pat {
			stroke:#fff;
			fill: #fff;
		}
		
		
		
 .garda-single-cart .garda-spec-row{
	 white-space: wrap;
    opacity: 1;
 }
  .garda-spec-row span{
	    font-weight: 700;
 }
 
 .garda-single-cart .garda-product-specs {
	     display: flex;
    flex-flow: column;
    gap: 8px;
 }
 
 .garda-single-cart .garda-product-buy {
	 display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    flex: 1;
    gap: 8px;
    margin-top: 16px;
	}
	
	 .garda-single-cart .garda-product-price {
		 text-align:left;
	 }
	
	
 .garda-single-cart .garda-product-in-cart-label {
	 position: relative;
 }
 
 .garda-single-cart .garda-product-bottom {
	 margin: 16px 0 32px 0;
 }
 
.acc .acc-header svg {
	width: 18px;
	height: 18px;
	transform: rotate(-90deg);  transition: transform 0.25s ease;
}

.acc .acc-header svg path {
	stroke:#fff;
}

.acc.active .acc-header svg {
transform: rotate(0deg);  transition: transform 0.25s ease;
}
 
.acc-header {
    width: 100%;
    padding: 10px 12px;
    background: #222222;
    color: #fff;
    border: none;
    text-align: left;
    cursor: pointer;
    font-weight: 700;
	display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
}
 
.acc-body { 
    overflow: hidden;
    transition: max-height 0.25s ease;
}
 
.acc.acc-mobile .acc-body {
    max-height: 0;  
	
}
 
.acc.acc-mobile .acc-body.is-open {
	 max-height: 9999px;  
}

.acc.acc-mobile .garda-sidebar-root, 
.acc.acc-mobile .garda-sidebar-list {
	padding: 8px 16px;
}

 
@media (min-width: 1024px) {
	.acc {
		border: none; 
	}
    .acc-header {
        display: none;  
    }
    .acc-body {
        max-height: none !important;
        overflow: visible;
        transition: none;
		padding: 0;
    }
} 

	.tabs {
 
 
}

/* шапка вкладок */
.tabs-list {
  display: flex;
 
  overflow-x: auto;
}

.tabs-tab {
  flex: 0 0 auto;
  padding: 10px 16px;
  border: none;
  background: #fff; 
  cursor: pointer; 
  font: inherit; 
border: 1px solid #000;   border-right:none;  border-bottom:none;  
}

.tabs-tab:last-child {
 border-right: 1px solid #000;
}

.tabs-tab.is-active {
background: #222222;
    color: #fff;
 
}

/* панели */
.tabs-panels {
 border: 1px solid #000;
}

.tabs-panel-content-inner {
	    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
	
}

.tabs-panel {
  display: none;
}

.tabs-panel.is-active {
  display: block;
}
.tabs-panel.is-active .tabs-panel-title {
	display: none;
}

/* Мобильный режим: аккордеон */
@media (max-width: 767px) {
  .tabs {
    border: none;
  }
  .tabs-panel.is-active .tabs-panel-title {
	display: flex;
}

  .tabs-list {
    display: none; /* скрываем горизонтальные табы */
  }

  .tabs-panels {
    padding: 0;
  }

  .tabs-panel {
    display: block;            /* все блоки участвуют в потоке */
    border-bottom: 1px solid #fff;
  }
  
  .tabs-panel:last-child {
	   border-bottom: none;
  }

  .tabs-panel-header {
    display: none;             /* если будешь делать отдельный header — можно использовать */
  }

  /* делаем заголовки вкладок аккордеоном */
  .tabs-panel-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    background: #222222;
    cursor: pointer;
	color:#ffffff;
  }

  .tabs-panel-content {
    max-height: 0;
    overflow: hidden;
     
    transition: max-height 0.25s ease;
  }

  .tabs-panel.is-open .tabs-panel-content {
    max-height: 800px; transition: max-height 0.25s ease;
    
  }
}

.accordion-group {
    border: none;
 
 
    overflow: hidden;
}

/* элемент аккордеона */
.accordion-item + .accordion-item {
    border-top: 1px solid #ddd;
}

/* заголовок */
.accordion-header {
    width: 100%;
    background: none;
    border: none;
    outline: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
    font: inherit;
    gap: 16px;
    margin: 0;
    padding: 8px 0;
}

.accordion-arrow {
    width: 12px; height:12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  
}

/* внутренняя галочка */
.accordion-arrow-icon {
    width: 8px;
    height: 8px; transform-origin: 50% 50%;    
    border-right: 1px solid #333;
    border-bottom: 1px solid #333;
    transform: rotate(-45deg);   transition: transform 0.25s ease;
}

/* при открытии крутим внешний блок */
.accordion-item.is-open .accordion-arrow-icon {
    transform: rotate(45deg);   transition: transform 0.25s ease;  
}


/* тело аккордеона с анимацией max-height */
.accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
    background: #fff;
}

/* внутренний отступ, чтобы max-height считать по scrollHeight */
.accordion-body-inner {
   padding:16px 0;
}


/* ========================================
   КАРТОЧКА БЛОГА
   ======================================== */

.blog-card {
    background: #fff;
 
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
 

 .row-flex {
	     display: flex;
    flex-wrap: wrap;
 }


 .blog-card-link{
	 height: 100%;
    display: flex;
    flex-direction: column;
 }
/* Изображение */
.blog-card-image {
    position: relative;
    width: 100%;
     height: 320px;
    overflow: hidden;
  
}

.blog-card-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.blog-card-link:hover .blog-card-image img {
    transform: scale(1.02);
}

/* Контент карточки */
.blog-card-content {
    padding: 16px;     white-space: normal; display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
        justify-content: flex-end;   border: 1px solid #222222;
    border-top: none; flex: 1;
}

.blog-card-content h3 {
     font-weight: 700;
  
}

 

.blog-card-content span {
       
  
}

 

@media (max-width: 1024px) {
 
    
    
    .blog-card-image {
        height: 200px;  
    }
    
    
}
 


.section-content-inner {
	position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;   
}
.section-content-inner-image {
	width: 100%;
    height: 400px;
    object-fit: cover;
    object-position: center center; 
}
 
.section-content-inner.inner-abs { 
    height: 400px;
    overflow: hidden;
	margin-bottom:32px;
} 
 
.section-content-inner-text{
	position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 450px;
    margin: 0 auto; gap:24px;
	text-align: center; z-index: 2;
	color:#fff;
	padding:0 16px;
}
.section-content-inner-overlay {
	position: absolute;
    inset: 0;
    background: #000;
    opacity: 0.2;
    z-index: 1;
}




/* ========================================
   VIDEO SECTION - СЕКЦИЯ С ВИДЕО
   ======================================== */

.video-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    
    overflow: hidden;
}

/* Фоновое видео */
.video-background {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
    z-index: 1;
}

/* Затемнение */
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
}

/* Контент поверх видео */
.video-content {
position: absolute;
left: 0px;
text-align: left;
bottom: 74px;
width: 100%;
max-width: 800px; padding: 0 16px;
}

.video-content h2 {
 
  color:#ffffff;
 
   
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.video-content span {
   color:#ffffff;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
}

/* Кнопка play */
.video-play-btn {
    background: #ffffff;
    border: none;
    cursor: pointer;
    padding: 0;
 right:16px; bottom:16px;
    position: absolute; width: 40px;
    height: 40px;     display: flex;
    align-items: center;
    justify-content: center;
}

 .video-play-btn svg,
  .video-play-btn path {
	  fill:#222222;          width: 16px;
    height: 16px;
  }
 

 
 

/* ========================================
   VIDEO MODAL - МОДАЛЬНОЕ ОКНО (СЛАЙД)
   ======================================== */

.video-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    pointer-events: none;
}

.video-modal.active {
    pointer-events: auto;
}

/* Затемнение фона */
.video-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.15);
    opacity: 0;
    transition: opacity 0.4s ease;
    cursor: pointer; 
}

.video-modal.active .video-modal-overlay {
    opacity: 1;
}

/* ========================================
   КОНТЕЙНЕР - БАЗОВЫЕ СТИЛИ
   ======================================== */

.video-modal-container {
    position: absolute;
    top: 0;
    width: 75vw;
    height: 100%;
    background: #222222;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

 @media (max-width: 1024px) {
	 
	 .video-modal-container {
		   width: 100vw;
	 }
	 
	 
 }
 
 .blog-header {text-align: center;
	     max-width: 1024px;     margin: 0 auto;
 }

/* ========================================
   СЛАЙД СЛЕВА (data-direction="left")
   ======================================== */

.video-modal[data-direction="left"] .video-modal-container {
    left: 0;
    transform: translateX(-100%);
 
}

.video-modal[data-direction="left"].active .video-modal-container {
    transform: translateX(0);
}

.video-modal[data-direction="left"] .video-modal-close {
    left: 24px;
}

/* ========================================
   СЛАЙД СПРАВА (data-direction="right")
   ======================================== */

.video-modal[data-direction="right"] .video-modal-container {
    right: 0;
    transform: translateX(100%);
    
}

.video-modal[data-direction="right"].active .video-modal-container {
    transform: translateX(0);
}

.video-modal[data-direction="right"] .video-modal-close {
    right: 24px;
}

/* ========================================
   КНОПКА ЗАКРЫТИЯ
   ======================================== */

.video-modal-close {
    position: absolute;
    top: 16px;
    background: rgba(255, 255, 255, 1);
    border: none;
    cursor: pointer;
    
    color: #222222;
    transition: all 0.3s ease;
    z-index: 10;
   
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

 
.video-modal-close svg,
.video-modal-close path {
	 stroke:#222222;
}
 

.video-modal-close svg {
    width: 18px;
    height: 18px;
    display: block;
}

/* ========================================
   ЗАГОЛОВОК МОДАЛЬНОГО ОКНА
   ======================================== */

.video-modal-header {
    padding: 48px 48px 16px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.video-modal-header h2 {
    color: #fff;
   margin:0;
   
     
}

/* ========================================
   WRAPPER ДЛЯ ВИДЕО
   ======================================== */

.video-modal-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    min-height: 0;
}

.video-modal-player {
    width: 100%;
    height: 100%;
    max-height: 100%;
    object-fit: contain;
    background: #222222;
}

/* ========================================
   АДАПТИВНОСТЬ
   ======================================== */
 

/* Отключаем скролл когда модалка открыта */
body.video-modal-open {
    overflow: hidden;
}

 

/* ========================================
   ABOUT SECTION - СЕКЦИЯ О КОМПАНИИ
   ======================================== */

.about-section {
    padding: 32px 0;
    background: #ffff;
}

.about-container {
 
    margin: 0 auto;
    
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: center;
}

/* ========================================
   ЛЕВАЯ ЧАСТЬ - ИЗОБРАЖЕНИЯ СЛОЯМИ
   ======================================== */

.about-images {
    position: relative;
    width: 100%;
    height: 500px;
}

.about-image {
    position: absolute;
 
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    
    /* Начальное состояние для анимации */
    opacity: 0;
     
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1) ;
}

.about-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Заднее изображение (большое) */
.about-image-back {
    top: 0;
    left: 0;
    width: 75%;
    height: 70%;
    z-index: 1;
    transition-delay: 0s;
}

/* Переднее изображение (маленькое) */
.about-image-front {
    bottom: 0;
    right: 0;
    width: 60%;
    height: 45%;
    z-index: 2;
 
    transition-delay: 0.2s;
}

/* Анимация появления изображений */
.about-section.in-view .about-image {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* ========================================
   ПРАВАЯ ЧАСТЬ - КОНТЕНТ
   ======================================== */

.about-content {
     
}

.about-content h2 {
    
    
    
    color: #222222;
    
    /* Анимация заголовка */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.about-section.in-view .about-content h2 {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.3s;
}

/* Список с квадратными маркерами */
.about-list {
    list-style: none;
    padding: 0;
    margin: 0 0 0 32px;
}


.about-text h2{
	max-width: 450px;
}

.about-list li {
    position: relative;
    padding-left: 32px;
    margin-bottom: 16px;
     
   
    color: #222222;
    
    /* Анимация элементов списка */
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Квадратный маркер */
.about-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    width: 10px;
    height: 10px;
     
    border: 1px solid #222222;
    
    /* Анимация маркера */
    transform: scale(0);
    transition: transform 0.3s ease;
}

/* Анимация появления элементов списка */
.about-section.in-view .about-list li {
    opacity: 1;
    transform: translateX(0);
}

.about-section.in-view .about-list li::before {
    transform: scale(1);
}

.about-section.in-view .about-list li:nth-child(1) {
    transition-delay: 0.4s;
}

.about-section.in-view .about-list li:nth-child(1)::before {
    transition-delay: 0.5s;
}

.about-section.in-view .about-list li:nth-child(2) {
    transition-delay: 0.5s;
}

.about-section.in-view .about-list li:nth-child(2)::before {
    transition-delay: 0.6s;
}

.about-section.in-view .about-list li:nth-child(3) {
    transition-delay: 0.6s;
}

.about-section.in-view .about-list li:nth-child(3)::before {
    transition-delay: 0.7s;
}

.about-section.in-view .about-list li:nth-child(4) {
    transition-delay: 0.7s;
}

.about-section.in-view .about-list li:nth-child(4)::before {
    transition-delay: 0.8s;
}

.about-section.in-view .about-list li:nth-child(5) {
    transition-delay: 0.8s;
}

.about-section.in-view .about-list li:nth-child(5)::before {
    transition-delay: 0.9s;
}

/* Кнопка */
.about-btn {
     
    
  margin-left: 32px;
    opacity: 0;
    transform: translateY(10px);
}

.about-section.in-view .about-btn {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 1s;
}

 

 

@media (max-width: 1024px) {
    
    
    .about-container {  grid-template-columns: 1fr;
        
        
    }
    
    .about-images {
        height: 320px;
    }
    
  
  
    
   
}


.about-text {
	    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;     gap: 32px;
}


*[data-pattern] {
    position: relative;
    overflow: hidden;
}

*[data-pattern] > *:not(.pattern-decoration) {
    position: relative;
    z-index: 2;
}

.pattern-decoration {
    position: absolute;
    width: 300px;
    height: 300px;
    pointer-events: none;
    user-select: none;
    opacity: 0.6;
    z-index: 1;
    background-size: contain;
    background-repeat: no-repeat;
}

#slider-top .pattern-decoration {
	   z-index:3;
}

 
.pattern-left-top-1 {
    left: -15%;
    top: 5%; 
    background-image: url('./img/pattern-left.png');
    transform: rotate(-8deg) scale(0.95);
}
 
.pattern-right-top-1 {
    right: -15%;
    top: 8%;
    background-image: url('./img/pattern-right.png');
    transform: rotate(10deg) scale(1.02);
}
 
 @media (max-width: 1024px) {
	 .pattern-left-top-1 {
    left: -65%;
   
}
 
.pattern-right-top-1 {
    right: -65%;
   
}
	 
 }

#gallery {
    max-width: 100vw;
    margin: 0 auto;
}

#gallery .gallery-item {
    overflow: hidden;
}

#gallery .gallery-item img {
    width: 100%;
    height: 400px;
    display: block;
    object-fit: cover;
}

/* центр больше, соседи меньше */
#gallery .owl-item.active.center .gallery-item {
    transform: scale(1);
    transition: transform 0.3s ease;
}

#gallery .owl-item.active:not(.center) .gallery-item {
    transform: scale(0.8);
    transition: transform 0.3s ease;
}

/* внешний контейнер навигации */
.gallery-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 32px;
}

/* стрелки */
.gallery-prev,
.gallery-next {
background: none;
    border: 0;
    cursor: pointer;
 
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #222222;     opacity: 0.5;
}

.gallery-prev:hover,
.gallery-next:hover {
	  opacity: 1;
}

/* контейнер для кастомных точек */
.gallery-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

/* кастомные точки */
.gallery-dot {
    width: 10px;
    height: 10px;
   
    border: 0;
    padding: 0;  border: 1px solid #222222; 
    background: none;
    cursor: pointer;
}

.gallery-dot.is-active {
    background: #222222;
}


#main-top{
	padding-top:80px;
}

.blog-sort {
	display: flex;
    flex-direction: row; 
    background: #eee;
    align-items: center;
    justify-content: center;
    width: fit-content;
	margin-bottom:32px!important;
}
.blog-sort-link {
	background: #eee;
    height: 24px;
    display: flex;
    color: #222222;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
}
.blog-sort-link:hover {
	 color: #222222; background: #d9d7d7;
}
.blog-sort-link.is-active,  
.blog-sort-link.is-active:hover {
	background: #222222; color: #fff;
}


.garda-sort {
	display: flex;
    flex-direction: row; 
    background: #eee;
    align-items: center;
    justify-content: center;
    width: fit-content;
	margin-bottom:32px!important;
}
.garda-sort-link {
	background: #eee;
    height: 24px;
    display: flex;
    color: #222222;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
}
.garda-sort-link:hover {
	 color: #222222; background: #d9d7d7;
}
.garda-sort-link.is-active,  
.garda-sort-link.is-active:hover {
	background: #222222; color: #fff;
}
	   .footer-map {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    filter: grayscale(1) brightness(1) invert(0);
}




.trigger-title {
	font-weight:700;
}

.trigger-description {
	opacity:0.5;
}


.trigger svg,
.trigger svg g,
.trigger svg peth,
.trigger svg circle {
	stroke:#222222;
	stroke-width:1px;
}
.trigger svg {
	width: 64px;
    background: #eee;
    padding: 16px;
}

.trigger {
align-items: center;
    justify-content: flex-start;
    border: 1px solid;
    padding: 16px;
	width:100%;
}

#blog-load-more{margin: 0 auto;}

.garda-product-image {
	height:200px;display:flex;
}
.garda-product-image img {
 width: 100%;
		height: 100%;
		object-fit: contain;
}

		.sl-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.sl-lightbox.sl-active {
  opacity: 1;
  visibility: visible;
}

.sl-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
}

.sl-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.sl-toolbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  padding: 12px 15px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.6), transparent);
  z-index: 10;
}

.sl-btn {
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 10px;
  border-radius: 6px;
  transition: background 0.2s;
}

.sl-btn:hover {
  background: rgba(255,255,255,0.15);
}

.sl-btn svg {
  width: 100%;
  height: 100%;
  fill: #fff;
}

.sl-btn-close {
  margin-left: auto;
}

.sl-counter {
  color: #fff;
  font-size: 14px;
  margin: 0 15px;
  font-family: system-ui, sans-serif;
  opacity: 0.8;
}

.sl-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 54px;
  height: 90px;
  background: rgba(0,0,0,0.4);
  border: none;
  cursor: pointer;
  z-index: 10;
  transition: background 0.2s, opacity 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sl-nav:hover {
  background: rgba(0,0,0,0.7);
}

.sl-nav svg {
  width: 32px;
  height: 32px;
  fill: #fff;
}

.sl-prev { left: 0; border-radius: 0 8px 8px 0; }
.sl-next { right: 0; border-radius: 8px 0 0 8px; }

.sl-nav.sl-disabled {
  opacity: 0.2;
  cursor: default;
  pointer-events: none;
}

.sl-image-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 65px 65px 10px;
  cursor: grab;
}

.sl-image-wrapper.sl-dragging {
  cursor: grabbing;
}

.sl-image-wrapper.sl-zoomed {
  cursor: move;
}

.sl-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.15s ease-out, opacity 0.3s;
  user-select: none;
  -webkit-user-drag: none;
}

.sl-caption {
  text-align: center;
  color: #fff;
  padding: 12px 20px;
  font-size: 15px;
  font-family: system-ui, sans-serif;
  min-height: 45px;
  opacity: 0.85;
}

.sl-thumbs {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 12px 15px;
  overflow-x: auto;
  background: rgba(0,0,0,0.4);
}

.sl-thumb {
  width: 70px;
  height: 50px;
  object-fit: cover;
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 0.2s, transform 0.2s, border-color 0.2s;
  border: 2px solid transparent;
 
  flex-shrink: 0;
}

.sl-thumb:hover {
  opacity: 0.7;
}

.sl-thumb.sl-thumb-active {
  opacity: 1;
   
}

.sl-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  z-index: 5;
}

.sl-loader.sl-loading {
  display: block;
}

.sl-spinner {
  width: 45px;
  height: 45px;
  border: 3px solid rgba(255,255,255,0.15);
  border-top-color: #e94560;
  border-radius: 50%;
  animation: sl-spin 0.7s linear infinite;
}

@keyframes sl-spin {
  to { transform: rotate(360deg); }
}

.sl-thumbs:empty {
  display: none;
}

@media (max-width: 1024px) {
  .sl-image-wrapper {
    margin: 55px 10px 10px;
  }
  .sl-nav {
    width: 44px;
    height: 70px;
  }
  .sl-nav svg {
    width: 26px;
    height: 26px;
  }
  .sl-thumb {
    width: 55px;
    height: 40px;
  }
  .sl-btn {
    width: 40px;
    height: 40px;
    padding: 8px;
  }
}





.sale {
	padding:16px;
}

.sale .blog-card-image{
	height: 420px;
}


.sale .blog-card-content{
	position: absolute;
    left: 0;
    bottom: 0; 
	background:#fff; border-top: 1px solid #222222;
	width: calc(100% - 32px);
 
}










	 /* ========================================
	   Блоки
	   ======================================== */
	
	.section-padding{
		padding-top:64px;
		padding-bottom:32px;
	}
	
	.col-padding { 
		padding-bottom:32px;
	}
	.flex-r {
		display: flex;
		flex-direction: row;
	}	
	
	.flex-c {
		display: flex;
		flex-direction: column;
	}		 
	.flex-r-c {
		display: flex;
		flex-direction: row;
	}		
	@media (max-width: 1024px) {
		.flex-r-c { 
			flex-direction: column;
		}	
	}	

	.gap-8 {
		gap: 8px;
	}
	.gap-16 {
		gap: 16px;
	}
	.gap-32 {
		gap: 32px;
	}	
	   
	   .text-r-c {
		   text-align: right;
	   }
	   @media (max-width: 1024px) {
		   .text-r-c {
		   text-align: center;
	   }
	   }
	   
	.center {    margin: 0 auto;
			align-items: center;
    justify-content: center;
    max-width: 400px;
    text-align: center;
	}   
	
	.owl-item.center {
		  max-width: 100vw;
	}


	.a-c{
		align-items: center;
	}
	.j-sb{
		justify-content: space-between;
	}
	 .j-c{  justify-content: center;}
	   
	   
.garda-pagination-wrap {
	margin-top: 40px;
	display: flex;
	justify-content: center;
	width: 100%;
}

.garda-pagination-wrap .navigation {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
}

.garda-pagination-wrap .navigation .t4.n1.cg.mb15 {
	flex: 0 0 100%;
	margin: 0 0 12px;
	text-align: center;
	font-size: 14px;
	line-height: 1.4;
	color: #7a7a7a;
}

.garda-pagination-wrap .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
    width: 32px;
    height: 32px;
	padding: 0 14px;
	border: 1px solid #d9d9d9;
	border-radius: 0;
	background: #fff;
	color: #111;
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	transition: all 0.2s ease;
	box-sizing: border-box;
}

.garda-pagination-wrap .page-numbers:hover {
	border-color: #111;
	background: #111;
	color: #fff;
}

.garda-pagination-wrap .page-numbers.current {
	border-color: #111;
	background: #111;
	color: #fff;
	cursor: default;
}

.garda-pagination-wrap .page-numbers.prev,
.garda-pagination-wrap .page-numbers.next {
	padding: 0;
}

.garda-pagination-wrap .page-numbers.prev svg,
.garda-pagination-wrap .page-numbers.next svg {
	width: 14px;
	height: 14px;
	display: block;
	fill: currentColor;
}

.garda-pagination-wrap .page-numbers.dots {
	border: 0;
	background: transparent;
	min-width: auto;
	padding: 0 4px;
	color: #7a7a7a;
}

.garda-pagination-wrap .page-numbers.dots:hover {
	background: transparent;
	color: #7a7a7a;
	border-color: transparent;
}

@media (max-width: 767px) {
	.garda-pagination-wrap {
		margin-top: 32px;
	}

	.garda-pagination-wrap .navigation {
		gap: 8px;
	}

	.garda-pagination-wrap .navigation .t4.n1.cg.mb15 {
		margin-bottom: 10px;
		font-size: 13px;
	}

	.garda-pagination-wrap .page-numbers {
		min-width: 40px;
		height: 40px;
		padding: 0 12px;
		border-radius: 10px;
		font-size: 14px;
	}
}

.button-wr{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: #eeeeee;
    padding: 16px;
    margin: 16px 0;
} 

.button-max-text{
	    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

 .des-wr {display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    margin: 0 0 16px 0;}
 .des-text {}
 .des-text-dop {text-decoration-line:  underline;         
text-decoration-color: #222;            
text-decoration-style: solid;              
text-decoration-thickness: 1px;            
text-underline-offset: 6px;                }


/* ─── БЛОКИРОВКА СКРОЛЛА (mobile) ─── */
body.sw_scroll_locked {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

/* ─── WIDGET ROOT ─── */
#sw {
  position: fixed;
     bottom: 15px;
    right: 74px;
  z-index: 9;
}

/* ─── FAB ─── */
#sw_fab {
  width: 41px;
  height: 41px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: #26a5e4;
  box-shadow: 0 4px 20px rgba(38,165,228,.45);
  padding: 0;
 
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center center;
  transition: box-shadow .2s ease;
  position: relative;
}
#sw_fab:hover { box-shadow: 0 6px 28px rgba(38,165,228,.55); }
#sw_fab img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  pointer-events: none;
  user-select: none;
}

/* точка-нотификация */
#sw_dot {
  position: absolute;
     top: 0px;
    right: 0px;
  width: 12px;
  height: 12px;
  background: #99e066;
  border-radius: 50%;
  border: 2px solid #fff;
  transition: opacity .2s, transform .2s;
  pointer-events: none;
}

/* ─── CARD ─── */
#sw_card {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 264px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.10);
  padding: 20px 20px 16px;
  opacity: 0;
  pointer-events: none;
  transform-origin: bottom right;
  transform: scale(0);
  z-index: 9999;
}

/* закрыть */
#sw_close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  background: none;
  border: none;
  cursor: pointer;
  color: #bbb;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
  padding: 0;
}
#sw_close:hover { background: #f3f3f3; color: #555; }
#sw_close svg { display: block; }

/* аватар в карточке */
#sw_avatar_wrap {
  width: 100px;
  height: 100px;
  border-radius: 50%;
 overflow:hidden;
  margin: 0 auto 12px;
  background: #e9e9e9;
  position: relative;
}
#sw_avatar_wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity .15s ease;
}

/* имя, роль */
#sw_name {
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
  text-align: center;
  line-height: 1.3;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease;
}
#sw_role {
  font-size: 12px;
  color: #888;
  text-align: center;
  margin-top: 3px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .2s ease .05s, transform .2s ease .05s;
}

/* кнопки-контакты */
#sw_contacts {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 16px 0 12px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .2s ease .08s, transform .2s ease .08s;
}
.sw_btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.sw_btn:hover { transform: scale(1.09); box-shadow: 0 4px 14px rgba(0,0,0,.16); }
.sw_btn:active { transform: scale(.95); }
.sw_btn_chat { background: #222; }
.sw_btn_tg   { background: #222; }
.sw_btn svg  { display: block; }

.sw_btn_chat svg { fill: #fff;   width: 18px; height: 18px; }
.sw_btn_tg   svg { stroke: #fff; width: 18px; height: 18px; }

/* телефон */
#sw_phone_wrap {
  text-align: center;
  font-size: 13px;
  color: #666;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .2s ease .11s, transform .2s ease .11s;
}
#sw_phone_wrap a { color: inherit; text-decoration: none; }
#sw_phone_wrap a:hover { color: #1a1a1a; }

/* ─── СОСТОЯНИЕ "ОТКРЫТО" ─── */
#sw_card.content-visible #sw_name,
#sw_card.content-visible #sw_role,
#sw_card.content-visible #sw_contacts,
#sw_card.content-visible #sw_phone_wrap {
  opacity: 1;
  transform: translateY(0);
}

/* ─── ЛЕТЯЩАЯ АВАТАРКА ─── */
#sw_fly {
  position: fixed;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
  z-index: 10000;
  box-shadow: 0 4px 20px rgba(38,165,228,.45);
  display: none;
}
#sw_fly img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ─── МОБИЛЬНЫЙ ─── */
#sw_backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease;
  display: none;
}
#sw_backdrop.active  { display: block; }
#sw_backdrop.visible { opacity: 1; pointer-events: all; }

@media (max-width: 639px) {
  #sw_card {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    padding: 24px 24px calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    transform-origin: bottom center !important;
    opacity: 1 !important;
  }
  #sw_card::before {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    background: #ddd;
    border-radius: 99px;
    margin: 0 auto 20px;
  }
  /* аватар на мобильном — сразу виден, без анимации полёта */
  #sw_avatar_wrap img { opacity: 1 !important; transition: none !important; }
  #sw_fly { display: none !important; }
}