@import "../../../../packages/css-tokens/src/tokens.css";
@import url('../fonts/font.css');


/* Стандартные сбросы */
	
*, *::before, *::after {margin: 0; padding: 0; box-sizing: border-box; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; line-height: 100%; position: relative; }
ol, ul {list-style: none;}
table {border-collapse: collapse; border-spacing: 0; table-layout: fixed;}
svg {width: 100%; height: 100%;}
img {width: 100%;}
:has(> img) {line-height: 0;}
audio, canvas, video {display: block; max-width: 100%;}
audio:not([controls]) {display: none;}
::-webkit-scrollbar {width: 0px; background: transparent;}
html {-ms-overflow-style: none; scrollbar-width: none;}
summary {list-style-type: none;} 
summary::-webkit-details-marker {display: none;}
:focus {outline: none !important;}
::-moz-focus-inner {border: 0px !important;}
		

:root {
	
/*  — — — — — — — — — — — — —  Стандартные цвета */

--red: #ff0000; --orange: #ffa500; --yellow: #ffff00; --green: #008000; --light-blue: #4292ee; --blue: #0000ff; --violet: #8b00ff; --black: #000; --white: #fff; --gray: #758495; --light-gray: #ecedef; --deep-gray: #121317;
	
/*  — — — — — — — — — — — — —  Цвета темы */
	
--main: #313131; --base: #191f31; --accent: #a4b6c2; --add: #05619f; --hover: #05609c;

/*  — — — — — — — — — — — — —  Фоны и градиенты */

--bg: #0172be; --bg-light: #f5f5f7; --bg-deep: #05609c; --bg-dark-line:	repeating-linear-gradient(#0f1423, #191f31 2px); --bg-white-line: repeating-linear-gradient(#fff, #f2f3f5 2px); --bg-gray-line: repeating-linear-gradient(#D1D9E6, #90A0B7 2px);

/*  — — — — — — — — — — — — —  Шрифты и их размеры */

--light: light, sans-serif; --regular: regular, sans-serif; --medium: medium, sans-serif; --bold: bold, sans-serif; --Black: black, sans-serif;
	
--xs: 50%; --s: 75%; --m: 100%; --l: 125%; --xl: 150%; --2xl: 175%; --3xl: 200%; --4xl: 225%; --5xl: 250%; --6xl: 275%; --7xl: 300%; --8xl: 350%; --9xl: 375%; --10xl: 400%; --11xl: 425%; --12xl: 450%; --13xl: 475%; --14xl: 500%; --15xl: 525%; --16xl: 550%; --17xl: 575%; --18xl: 600%; --19xl: 625%; --20xl: 650%; --21xl: 675%; --22xl: 700%; --23xl: 725%; --24xl: 750%; --25xl: 775%; --26xl: 800%; --27xl: 825%; --28xl: 850%; --29xl: 875%; --30xl: 900%; --31xl: 925%; --32xl: 950%; --33xl: 975%; --monster: 1000%; --zombie: 1500%;
	
/*  — — — — — — — — — — — — —  трансформации */

--tr-bg:  background 0.5s; --tr-height:  height 0.5s; --tr-width: width 0.5s; --tr-border: border-color 0.5s; --tr-all: all 0.5s; --tr-opacity: opacity 0.5s; --tr-vis: visibility 0.5s; --tr-X0: translateX(0); --tr-X100: translateX(100%); --tr-Y0: translateY(0); --tr-Y100: translateY(100%); --transform: transform 0.5s; --tr-fill: fill 0.5s; --tr-color: color 0.5s; --tr-display: display 0.5s;

/*  — — — — — — — — — — — — —  линии и бордюры */

--b05s:  0.05vw solid; --b1s:  0.1vw solid; --b15s:  0.15vw solid; --b05d:  0.05vw dashed; --b1d:  0.1vw dashed; --b15d:  0.15vw dashed; --b05do:  0.05vw dotted; --b1do:  0.1vw dotted; --b15do:  0.15vw dotted;

/*  — — — — — — — — — — — — —  Z-index */

/* фоны */ --z-bg:  -1000; /* псевдоэлементы ПОД */ --z-under:  -100; /* стандартный z */ --z-base:  0; /* псевдоэлементы над */ --z-over:  100; /* выпадающие меню и списки */ --z-dropdown: 200; /* header */ --z-header: 300; /* подсказки */ --z-tooltip: 400; /* модальные окна */ --z-modal: 500; /* попапы */ --z-popup: 600; /* уведомления */ --z-modal: 700; /* прелоадер */ --z-modal: 1000; 

/*  — — — — — — — — — — — — —  отступ при клике на табы */

--tab-scroll-offset: 16vw;}
	

/*  — — — — — — — — — — — — — основные свойства HTMP и BODY */
	
html {width: 100vw; height: 100vh;}
body {width: 100vw; height: auto; min-height: 100vh; color: var(--black); font-family: var(--regular); font-size: 4vw; font-style: normal; background: var(--white);}




input {background: var(--white); color: var(--gray); border-radius: 0.25vw; padding: 0.7vw 1vw 0.85vw 1vw;}
input:focus, input:active, input:hover {background: var(--light-blue); color: var(--white);}
::placeholder {color: var(--light-gray);}

button {border-radius: 0.25vw; color: var(--white); background: var(--gray); padding: 0.7vw 1vw 0.85vw 1vw; cursor: pointer;}
button:hover {background: var(--deep-gray);}


a {text-decoration: none;}














/*  — — — — — — — — — — — — — header */
	
header {position: fixed; width: 100vw; height: 25vw; z-index: var(--z-header); left: 0; top: 0; background: var(--light-gray); color: var(--black); transition: var(--tr-all) !important;}
header.small {background: var(--light-gray);}

header .header_logo {float: left; width: 25vw; margin: 5vw 0 0 5vw; Z-index: var(--z-over);}

header .header_search {position: absolute; top: 15vw; left: 5vw; width: 90vw;}
header .header_search input.site-search__input {width: 100%; z-index: var(--z-base);}
header .header_search button.site-search__submit {position: absolute; z-index: var(--z-over); top: 0.05vw; right: 0.05vw;}

header .header_search .site-search__panel {position: absolute; background: var(--white); width: 100vw; top: 3.5vw; left: -11vw; overflow-y: auto !important; box-shadow: 0 10vw 5vw var(--light-gray);}
header .header_search .site-search__panel .site-search__block {padding: 2vw 0  0 11vw; overflow: hidden;}
header .header_search .site-search__panel .site-search__block .site-search__title {color: var(--gray); font-size: var(--s); padding: 0 0 1vw 0;}
header .header_search .site-search__panel .site-search__block .site-search__tags a {display: inline-block; border-radius: 0.25vw; color: var(--gray); background: var(--light-gray); padding: 0.75vw 1vw 0.9vw 1vw; margin: 0 0.75vw 0 0;}
header .header_search .site-search__panel .site-search__block .site-search__tags a:hover {color: var(--white); background: var(--gray);}

header .header_search .site-search__panel .site-search__block a.site-search__product {display: inline-block; float: left; width: 10vw; margin: 0 1vw 4vw 0;}

header .header_search .site-search__panel .site-search__block a.site-search__material {display: inline-block; margin: 0 1vw 4vw 0;}
header .header_search .site-search__panel .site-search__block a.site-search__material .site-search__num {margin: 0 1vw 0 0; color: var(--gray);}
header .header_search .site-search__panel .site-search__block a.site-search__material .site-search__info .site-search__name {margin: 0 1vw 0 0;}
header .header_search .site-search__panel .site-search__block a.site-search__material .site-search__info .site-search__date { color: var(--gray);}

header .header_tel {float: right; margin: 1.2vw 0 0 2vw;}
header .header_tel a {color: var(--light-blue);}
header .header_tel a:hover {color: var(--deep-gray);}

header .header_address {float: right; margin: 1.2vw 0 0 2vw;}
header .header_address a {color: var(--deep-gray);}
header .header_address a:hover {color: var(--light-blue);}

header .navigation {float: right; margin: 1vw 1vw 0 2vw; transition: var(--tr-all);}
header .navigation a.open-button {z-index: var(--z-popup); width: 2vw; height: 2vw; transition: var(--tr-bg); overflow: hidden; display: inline-block;}
header .navigation a.open-button span {z-index: var(--z-base); display: inline-block; width: 100%; height: 100%;}
header .navigation a.open-button span:before {position: absolute; z-index: var(--z-over); top: 0.75vw; left: 0; content: ''; width: 2vw; height: 2px; background: var(--deep-gray); transition: var(--tr-all);}
header .navigation a.open-button span:after {position: absolute; z-index: var(--z-over); top: 1.125vw; left: 1vw; content: ''; width: 1vw; height: 2px; background: var(--light-blue); transition: var(--tr-all);}
header .navigation a.open-button:hover span:after {width: 2vw; left: 0; transition: var(--tr-all);}
	
	
/*  — — — — — — — — — — — — — модальные окна */
	
body:has(.__modal:target) {overflow: hidden;}
.__modal {position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: var(--z-popup); background: rgba(0,0,0,.75); opacity: 0; visibility: hidden; transition: var(--tr-opacity), var(--tr-vis); overflow-y: auto;}
.__modal:target {opacity: 1; visibility: visible;}
.__modal:target [class^="modal_"] {transform: var(--tr-Y0);}
.__modal .close-button {position: fixed; z-index: var(--z-popup); top: 1.15vw; right: 1.4vw; width: 1vw; height: 1vw; display: flex; justify-content: center; align-items: center; transition: var(--tr-all);}
.__modal .close-button:hover {transform: rotate(90deg); transition: var(--tr-all);}
.__modal .close-button a {color: var(--black); font-size: var(--2xl); line-height: 1; font-family: var(--light);}
.__modal .modal-content {padding: 3vw;}
.__modal:target ~ .content {filter: blur(0.5vw); pointer-events: none;}
.__modal .overlay-close {position: absolute; width: 100%; height: 100%; cursor: url(../../../images/icons/icon-modal-cursor.svg) 32 32, auto;} 
.__modal [class^="modal_"] {z-index: var(--z-over); transform: var(--tr-Y100); transition: var(--transform); background: var(--bg-white-line);}
	
/*  — — — — — — — — — — — — — варианты модальных окон */
	
.__modal .modal_full {width: 100%; height: 100%; top: 0; left: 0;}
.__modal .modal_left_30 {width: 30vw; height: 100%; top: 0; left: 0;}
.__modal .modal_right_25 {width: 25vw; height: 100%; top: 0; left: 75vw; overflow-y: auto;}
.__modal .modal_right_30 {width: 30vw; height: 100%; top: 0; left: 70vw;}
.__modal .modal_left_50 {width: 50vw; height: 100%; top: 0; left: 0;}
.__modal .modal_right_50 {width: 50vw; height: 100%; top: 0; left: 50vw;}
.__modal .modal_center {width: 30vw; height: auto; top: 10%; left: 35vw;}
.__modal .modal_product {width: 50vw; height: auto; top: 10%; left: 25vw;}
.__modal .modal_nav {width: 98vw; height: calc(100vh - 2vw); top: 1vw; left: 1vw; bottom: 1vw; right: 1vw; background: var(--gray); border-radius: 0.5vw;}
	
/*  — — — — — — — — — — — — — настройки различных модальных окон */
			
#modal_navigation.__modal {background: var(--white);}
#modal_navigation .close-button {top: 2.5vw; right: 2.5vw; width: 1vw; height: 1vw; display: flex; justify-content: center; align-items: center;}
#modal_navigation .close-button a {color: var(--white);} 

	
	
	
	
	
	
	
	
	
	
	
	






/*  — — — — — — — — — — — — —  Мобильная ландшафт _ml */ @media (orientation: landscape) and (pointer: coarse) and (hover: none) {



} /*  — — — — — — — — — — — — —  Конец медиа-запроса "Мобильная ландшафт"  */








/*  — — — — — — — — — — — — —  Десктоп ландшафт _dl */ @media (orientation: landscape) and (pointer: fine) and (hover: hover) {



	/*  — — — — — — — — — — — — —  Пользовательские свойства */
	
		:root {
			
			/*  — — — — — — — — — — — — —  линии и бордюры */
			
			--b05s:  0.05vw solid; --b1s:  0.1vw solid; --b15s:  0.15vw solid; --b05d:  0.05vw dashed; --b1d:  0.1vw dashed; --b15d:  0.15vw dashed; --b05do:  0.05vw dotted; --b1do:  0.1vw dotted; --b15do:  0.15vw dotted;
			
			/*  — — — — — — — — — — — — —  отступ при клике на табы */
			
			--tab-scroll-offset: 16vw;}
			
	/*  — — — — — — — — — — — — — основные свойства HTMP и BODY */
	
	body {font-size: 1.25vw;}

	/*  — — — — — — — — — — — — — header */
	
	header {height: 4vw;}
	header .header_logo {width: 8vw; margin: 1vw 2vw 0 1vw;}
	
	header .header_search {position: relative; float: left; top: 0; left: 0; margin: 0.5vw 2vw 0 0; width: 40vw;}
	header .header_search input.site-search__input {width: 100%; z-index: var(--z-base);}
	header .header_search button.site-search__submit {position: absolute; z-index: var(--z-over); right: 0;}

	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
} /*  — — — — — — — — — — — — —  Конец медиа-запроса "Десктоп ландшафт"  */