* {margin: 0px; padding: 0px; box-sizing: border-box; outline: none; -webkit-locale: auto}
html, body {width: 100%}
body {font-family: 'Manrope', sans-serif; padding-top: 0 !important; line-height: 1; background: #fff; font-size: 16px; -webkit-text-size-adjust: none; -webkit-font-smoothing: antialiased; color: #040404; overflow-y: overlay}
body.loading {opacity: 0}
html.lock, body.lock {overflow: hidden}
a {color: inherit; text-decoration: none; outline: none; cursor: pointer; transition: 250ms}
h1, h2, h3, .h2-like, .h1-like {font-weight: 400; line-height: 1.1}
h1, .h1-like {font-size: 48px; margin-bottom: 40px}
h2, .h2-like {font-size: 32px; margin-bottom: 40px; margin-top: 40px}
.body__index h2, .body__index .h2-like {text-align: center}
h3 {font-size: 24px; margin-bottom: 20px; margin-top: 40px}
.h2-like .show-all {background: #394d45; color: #fff; margin-top: 5px; border-radius: 2px; font-weight: 500; font-size: 11px; padding: 0 10px; height: 20px; line-height: 20px; margin-left: 15px; text-transform: uppercase}
b, strong, th {font-weight: 600}
i {font-style: normal}
ul {list-style-type: none}
img, svg {height: auto; max-height: 100%; max-width: 100%; display: block}
input, select, textarea, button {-webkit-appearance: none; -moz-appearance: none; font-family: inherit; font-size: inherit; color: inherit; border-radius: 3px; font-size: 15px}
input[type=text], input[type=tel], input[type=email], input[type=password], input[type=search] {display: block; width: 100%; border: 1px solid #f3f4f5; background: #fff; padding: 0px 20px; height: 40px}
textarea {display: block; width: 100%; background: #fff; border: 1px solid #f3f4f5; padding: 20px; resize: none; height: 80px}
input[type=text]:focus, input[type=tel]:focus, input[type=email]:focus, textarea:focus, input[type=password]:focus {box-shadow: inset 0 0 0 1px #040404; border-color: #040404}
input[type=checkbox] {display: inline-block; vertical-align: middle; width: 16px !important; height: 16px; margin-right: 10px !important; position: relative; border:none; border: 1px solid #f3f4f5; background: #fff}
input[type=checkbox]:checked {background: #fff url("data:image/svg+xml,") 50% 50% no-repeat; background-size: 9px}
input[type=radio] {display: inline-block; vertical-align: middle; width: 20px !important; height: 20px; margin-right: 10px !important; border-radius: 50%; background: #fff; position: relative; flex-shrink: 0; border: 1px solid #040404; box-shadow: inset 0px 0px 0px 2px #fff}
input[type=radio]:hover, input[type=radio]:checked {border-color: #040404}
input[type=radio]:checked {background: #040404}
select {display: block; width: 100%; font-size: 15px; border: none; border: 1px solid #f3f4f5; padding: 0px 10px; background: #fff url("data:image/svg+xml,") no-repeat; background-position: right 15px center; border-radius: 0px; height: 40px !important; color: #7f7f7f; box-shadow: none !important; cursor: pointer; transition: border-color 300ms}
.button {transition: 300ms; height: 40px; border: none; display: flex; align-items: center; cursor: pointer; text-align: center; justify-content: center; width: 200px; text-transform: uppercase; font-size: 12px; font-weight: 500; border-radius: 3px; letter-spacing: 1px}
.button.invert {background: #000; color: #fff}
.button:disabled {opacity: 0.2; cursor: default}
input[readonly], input[readonly]:focus {opacity: 0.5}
svg {fill: currentColor}
::placeholder {color:#828282}
.overflow-y {overflow-y: auto; height: 100%}
.overflow-y::-webkit-scrollbar {background-color: rgba(255,255,255,0.1); width: 3px; border-radius: 2px; height: 3px}
.overflow-y::-webkit-scrollbar-track {background-color: rgba(255,255,255,0.1); border: none; border-radius: 2px}
.overflow-y::-webkit-scrollbar-thumb {background-color: #fff; border-radius: 2px}
.overflow-y::-webkit-scrollbar-button {display:none}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {display: none}
body .admin-bar .admin-bar-link__title {color: #fff !important}
table {width: 100% !important; border-collapse: collapse}
.table-wrapper {overflow-x: auto; margin: 0 -20px; padding: 0 20px}
/* GLOBAL */
/* BASIC */
main {min-height: calc(100vh - 292px)}
.ds {-webkit-user-select: none; -moz-user-select: none; -webkit-user-drag: none}
.flex {display: flex; flex-wrap: wrap}
.flex.center {justify-content: center}
.flex.align-center {align-items: center}
.flex.end {justify-content: end}
.flex.space-between {justify-content: space-between}
.flex.nowrap {flex-wrap: nowrap}
.max {padding: 0px 20px; max-width: 1340px; margin: 0px auto}
.cover {background-position: 50% 50%; background-repeat: no-repeat; background-size: cover}
.contain-0 {background-position: 0% 50%; background-repeat: no-repeat; background-size: contain}
.contain-50 {background-position: 50% 50%; background-repeat: no-repeat; background-size: contain}
.contain-100 {background-position: 100% 50%; background-repeat: no-repeat; background-size: contain}
.mobile-show {display: none !important}
.mobile-flex {display: none !important}
.tablet-show {display: none !important}
.admin-bar {top: unset !important; bottom: 0px}
.admin-bar__elem--settings {display: none !important}
.admin-bar__elem--btns {margin-left: auto}
.admin-bar-link.admin-bar-link--enter {border: none !important}
/* BASIC */
/* FORM */
.form-list li {position: relative; margin-bottom: 1em; display: block}
.form-list input:not(:placeholder-shown) + .placeholder, .form-list input:focus + .placeholder, .form-list input:-webkit-autofill + .placeholder, input:-webkit-autofill:focus + .placeholder {transform: translateY(-15px); font-size: 10px; opacity: 1}
/* FORM */
.agreement {font-size: 13px}
/* ALERT */
.alert {color: #fff; display: block; color: red}
.alert.success {background: green}
/* ALERT */
/* INFORMER */
.informer {background: #394d45; color: #fff; height: 70px; border-radius: 5px; width: 220px; padding: 0 20px; transition: 250ms; position: fixed; top: 160px; right: -220px; z-index: 9222; display: none !important}
.informer.active {right: 20px}
.informer .img {width: 50px; height: 50px}
.informer .text {width: calc(100% - 65px); font-size: 14px}
.informer .name {font-weight: 500}
/* INFORMER */
.body__noindex .menu-line {background: #394d45}
.body__noindex main {padding-top: 40px}
/* HEADER */
header {background: rgba(255,255,255,0.5); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); position: sticky; top: 0px; z-index: 1222; height: 100px; width: 100%}
header .grid {height: 100%; display: grid; align-items: center; grid-template-columns: 1fr 280px 1fr; gap: 20px; font-weight: 500}
header .top-part .menu {gap: 20px}
header .phone {font-size: 18px; font-weight: 600}
header .top-part .menu li {position: relative}
header .top-part .menu li:hover > a, header .top-part .menu li.active > a {color: red}
header .top-part .menu .level-2 {position: absolute; top: 100%; left: -20px; transform: scaleY(0); transform-origin: 0 0; transition: 250ms; background: #f3f4f5; padding: 20px; width: 200px; z-index: 1222}
header .location {font-size: 13px; margin-left: 20px}
header .location span {opacity: 0.3; display: block; margin-top: 2px}
.menu-line {background: rgba(0,0,0,0.1); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); height: 50px; color: #fff; text-transform: uppercase; font-size: 13px; font-weight: 500; z-index: 100; position: relative}
.menu-line .max {height: 100%}
.menu-line .menu {gap: 20px}
.menu-line .menu .level-2 {display: none}
.menu-line .menu a {position: relative}
.menu-line .menu a:after {content: ''; position: absolute; bottom: -10px; width: 100%; height: 1px; left: 0}
.menu-line .menu li.active > a:after {background: #fff}
header .logo-block {text-align: center; font-size: 11px; text-transform: uppercase; letter-spacing: 0.2px}
header .logo-block svg {height: 35px; width: 280px; margin-bottom: 5px}
header .icons-block {margin-left: 20px; color: #394d45}
header .icons-block .icon {position: relative; min-width: 40px; height: 40px; cursor: pointer}
header .icons-block .icon svg {width: 25px; height: 25px}
header .icons-block .icon .title {position: absolute}
header .icons-block .countsht {color: #394d45; font-size: 14px; padding-left: 5px; margin-left: 5px; border-left: 1px solid #394d45; font-weight: 600}
.absolute-menu .social {margin-bottom: 20px}
.absolute-menu .social a {background: #111}
.absolute-menu .social a svg {color: #fff}
.menu-button, .close {cursor: pointer; position: relative; height: 40px; width: 40px}
.menu-button span, .close span {background: currentcolor; height: 2px; position: absolute; width: 20px; left: 10px; border-radius: 1px; transform-origin: 50% 50%}
.menu-button span:nth-of-type(1) {top: 12px; width: 14px}
.menu-button span:nth-of-type(2) {top: calc(50% - 1px)}
.menu-button span:nth-of-type(3) {bottom: 12px; width: 14px; left: 16px}
.close span:nth-of-type(1) {transform: rotateZ(45deg); top: calc(50% - 1px)}
.close span:nth-of-type(2) {opacity: 0}
.close span:nth-of-type(3) {transform: rotateZ(-45deg); bottom: calc(50% - 1px)}
.absolute-menu {position: fixed; top: 0; padding: 30px 20px 40px 40px; left: -500px; background: #040404; color: #fff; width: 500px; height: 100vh; z-index: 9222; transition: 250ms}
.absolute-menu .inner {padding-right: 20px; padding-top: 40px}
.absolute-menu.show {left: 0}
.absolute-menu li a {padding: 20px 0; display: block}
.absolute-menu li + li {border-top: 1px solid rgba(255,255,255,0.1)}
.absolute-menu .has-sub {position: relative}
.absolute-menu .has-sub a {justify-content: space-between; gap: 16px; display: flex; align-items: center}
.absolute-menu .level-2 {display: none}
/* HEADER */
.social {gap: 10px; margin-top: 20px}
.social a {height: 50px; width: 50px; background: #f3f4f5; border-radius: 2px}
.social a svg {width: 20px; height: 20px}
/* BITRIX */
.b24-form-wrapper.b24-form-border-bottom {border: none !important}
.b24-form-control-desc {color: #fff !important}
/* BREAD-CRUMBS */
.bread-crumbs {margin: 40px 0; display: flex; font-size: 13px}
.bread-crumbs a, .bread-crumbs .separator {opacity: 0.5}
.bread-crumbs .separator {margin: 0 10px}
/* BREAD-CRUMBS */
.swiper-controls {gap: 10px}
.swiper-controls .arrow-prev svg, .swiper-controls .arrow-next svg {width: 12.5px; height: 7.5px}
.swiper-controls .arrow-prev, .swiper-controls .arrow-next {width: 40px; height: 40px; cursor: pointer; flex-shrink: 0; background: rgba(255,255,255,0.1)}
.swiper-controls .arrow-next svg {transform: rotateZ(180deg)}
.swiper-controls .pagination .swiper-pagination-bullet {background: currentcolor}
/* HOME */
.home-slider {height: 500px; margin-bottom: 40px; margin-top: -50px}
.home-slider .swiper-controls {position: absolute; right: calc(50vw - 670px + 10px); bottom: 20px; z-index: 1222; color: #fff}
.home-slider .swiper-slide {overflow: hidden}
.home-slider .inner {margin-top: 100px; border-radius: 5px; padding: 40px; backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); color: #fff; width: fit-content; position: relative}
/* .home-slider .inner:after {position: absolute; backdrop-filter: blur(40px); background: rgba(255,255,255,.2); width: 240px; height: 240px; z-index: -1; right: -40px; top: -40px; content: ''} */
.home-slider .inner h1, .home-slider .inner .h1-like {font-size: 38px; margin: 0}
.home-slider .inner h2 {font-size: inherit; margin-top: 20px}
.home-slider .inner .button {margin-top: 40px; border: 1px solid #fff; color: #fff; background: transparent}
.home-slider .max {height: 100%; position: relative; display: flex; justify-content: center; flex-direction: column}
.home-slider img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; z-index: -1}
.home-slider .line-1 {font-size: 48px; font-weight: 500; margin-bottom: 20px}
.home-slider .line-2 {font-size: 22px; font-weight: 500; margin-bottom: 40px}
/* .home-slider .swiper-slide {height: 300px; padding: 120px 0} */
.home-slider-pagination {text-align: center; z-index: 1; width: 60px !important}
.home-slider-pagination .swiper-pagination-bullet {opacity: 0.1; height: 7px; width: 7px; border-radius: 50%; background: #fff}
.home-slider-pagination .swiper-pagination-bullet-active {opacity: 1}
.home-banks .grid {display: grid; grid-template-columns: repeat(8,1fr); gap: 40px; align-items: center}
.home-reviews {background: #f3f4f5; padding: 80px 0; margin: 80px 0}
.home-reviews .item {background: #fff; padding: 40px; border-radius: 5px}
.home-reviews .name {font-size: 14px; opacity: 0.5; margin-right: 20px; padding-right: 20px; border-right: 1px solid #040404; margin-top: 40px}
.home-reviews .car {font-size: 14px; opacity: 0.5; margin-top: 40px}
.home-reviews .swiper-controls {position: absolute; top: 0; right: 0; color: #040404}
.home-reviews h2 {margin-top: 0}
.home-reviews .swiper-controls .arrow-prev, .home-reviews .swiper-controls .arrow-next {background: #fff}
.home-triggers {margin: 80px 0}
.home-triggers-top img {position: absolute; bottom: 20px; left: 20px; width: 50px; height: 50px; z-index: 10}
.home-triggers-top .item {padding: 40px 20px 80px 20px}
.home-triggers-bottom .item {padding: 20px 20px 40px 20px; text-align: center}
.home-triggers .grid {display: grid; gap: 10px}
.home-triggers .grid.by-5 {grid-template-columns: repeat(5,1fr)}
.home-triggers .grid.by-4 {grid-template-columns: repeat(4,1fr)}
.home-triggers .item {background: #f3f4f5; overflow: hidden; line-height: 1.3; position: relative; cursor: pointer; border-radius: 5px; font-weight: 500}
.home-triggers .item .title {width: 100%}
.home-triggers .item .inner {position: relative; z-index: 2; gap: 20px}
.home-triggers .item:after {background: #394d45; height: 2px; z-index: 1; transition: 250ms; position: absolute; bottom: 0; left: 0; width: 100%; content: ''}
.home-triggers .item .sub-title {opacity: 0.5; font-size: 13px; display: block}
.home-cats {margin: 80px 0}
.cats .grid {display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 10px; text-align: center; font-weight: 500}
.cats .item {background: #f3f4f5; padding: 20px; border-radius: 5px}
.cats .item .img {height: 30px; width: 50px; margin: 0 auto 10px auto}
.cats .item .count {opacity: 0.5; margin-top: 10px; font-size: 12px}
.cats .item.last {background: #394d45; color: #fff}
.cats .item.last .img svg {transform: rotateZ(180deg); width: 20px; height: 20px}
.home-payments {background: #f3f4f5; padding: 80px 0; margin: 80px 0}
.home-payments .num {position: absolute; right: 0; top: 0; font-size: 130px; font-weight: 600; opacity: 0.05}
.home-payments .grid {display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px}
.home-payments .item {padding: 40px; border-radius: 5px; background: #fff; position: relative; font-size: 14px}
.home-payments .item:first-of-type {color: #fff; background: #394d45}
.home-payments .item:first-of-type .button {background: #fff; color: #394d45}
.home-payments .title {font-size: 18px; margin-bottom: 30px; display: block; font-weight: 600}
.home-payments .button {margin-top: 40px; width: 100%; background: #394d45; color: #fff}
.home-payments h2 {margin-top: 0}
.home-stars {margin: 80px 0}
.home-stars .swiper-controls .arrow-prev, .home-stars .swiper-controls .arrow-next {background: #f3f4f5}
.home-stars .item {padding: 40px 20px 40px 25%; color: #fff; aspect-ratio: 4/3; border-radius: 5px; overflow: hidden}
.home-stars .item:nth-of-type(3n+1) {background: radial-gradient(#274b74, #040404); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px)}
.home-stars .item:nth-of-type(3n+2) {background: radial-gradient(#3f0a0c, #040404); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px)}
.home-stars .item:nth-of-type(3n+3) {background: radial-gradient(#114a3c, #040404); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px)}
.home-stars .item .title {font-size: 32px; position: relative; z-index: 2}
.home-stars .item .text {position: relative; z-index: 2; margin: 20px 0; line-height: 1.3}
.home-stars .item .button {border: 1px solid #fff; color: #fff; background: transparent; position: relative; z-index: 2}
.home-stars .swiper-controls {position: absolute; top: 0; right: 0; color: #040404}
.home-stars .star {width: 60%; position: absolute; z-index: 1; bottom: -10%; left: -10%; object-fit: contain; aspect-ratio: 3/4}
.home-stars .car {width: 60%; aspect-ratio: 16/9; position: absolute; z-index: 1; bottom: 0; right: -100px; object-fit: contain}
.home-latest {margin: 80px 0}
.home-about .swiper-controls .arrow-prev, .home-about .swiper-controls .arrow-next {background: #f3f4f5}
.home-about h2 {margin-top: 0}
.home-about img {border-radius: 5px; aspect-ratio: 4/1; object-fit: cover}
.home-about .swiper-controls {position: absolute; top: 0; right: 0; color: #040404}
.home-about .grid {display: grid; grid-template-columns: 1fr 1fr; gap: 40px}
.home-about .link {margin-top: 20px; text-decoration: underline; font-weight: 500; display: inline-block}
.home-action {background: url(../images/home/action.jpg) no-repeat 100% 50% /cover; text-align: center; overflow: hidden; border-radius: 5px; color: #fff; margin: 80px 0}
.home-action .inner {padding: 40px; backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px)}
.home-action h2 {margin: 0 0 20px 0}
.home-action .form-list {margin-top: 40px; gap: 5px; justify-content: center}
.home-action .button {border: 1px solid #fff; background: transparent}
.home-contacts {margin-top: 80px; text-align: center; background: #f3f4f5}
.home-contacts h2 {margin-top: 0}
.home-contacts .grid {display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; align-items: center}
.home-contacts iframe {filter: grayscale(1)}
.home-contacts .social a {background: #fff}
/* HOME */
/* VARIANTS */
.size-block {gap: 5px}
.size-block .size {padding: 5px 5px; background: #040404; color: #fff}
.size-block .size.active {background: red}
/* VARIANTS */
/* CATALOG */
.catalog-cats {gap: 10px; margin-bottom: 40px}
.catalog-cats img {width: 120px; height: 80px; margin: 0 auto 10px auto; object-fit: contain}
.catalog-cats a {border-radius: 5px; padding: 20px; background: #f3f4f5; font-weight: 500; font-weight: 700; text-align: center}
.catalog .grid {display: grid; grid-row-gap: 10px; grid-column-gap: 10px}
.catalog .grid.by-3 {grid-template-columns: repeat(3,minmax(0,1fr))}
.catalog .grid.by-4 {grid-template-columns: repeat(4,minmax(0,1fr))}
/* .catalog-slider .swiper-slide {width: 300px} */
.top-description {margin-bottom: 40px}
.product-wrapper .top-part {position: relative; background: #f3f4f5; display: block}
.product-wrapper .bottom-part {padding: 20px 20px 30px 20px; border-radius: 0 0 5px 5px; overflow: hidden; background: #f3f4f5; margin-top: 2px; position: relative; display: block}
.product-wrapper .like, .product-wrapper .unlike {cursor: pointer; transition: 300ms; color: #394d45; width: 20px; height: 40px; z-index: 100}
.product-wrapper .images {position: relative; overflow: hidden; border-radius: 5px 5px 0 0; display: block; aspect-ratio: 4/3; width: 100%}
.product-wrapper .images img {width: 100%; height: 100%; position: absolute; object-fit: cover}
.product-wrapper .brand {position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; object-fit: contain; object-position: 50% 50%; z-index: 2}
.product-wrapper .stickers {position: absolute; left: 10px; bottom: 10px; pointer-events: none; color: #fff; z-index: 20; font-size: 11px; text-transform: uppercase; font-weight: 500; gap: 1px}
.product-wrapper .stickers div {height: 20px; background: rgba(0,0,0,0.8); line-height: 20px; padding: 0 5px; border-radius: 2px; backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px)}
.product-wrapper .name {white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-weight: 500}
.product-wrapper .price-block {font-size: 18px; margin: 20px 0; gap: 20px}
.product-wrapper .price-block .price {font-weight: 600}
.product-wrapper .price-block .old-price {opacity: 0.3; text-decoration: line-through}
.product-wrapper .size-block {margin-top: 10px}
.product-wrapper .bottom-part .inner {position: relative; z-index: 2}
.product-wrapper .buttons-block {margin-top: 30px; gap: 10px}
.product-wrapper .button {width: calc(100% - 30px); position: relative; z-index: 2; border: 1px solid #394d45; color: #394d45; background: transparent}
.catalog-slider {position: relative}
.catalog-slider-arrow {width: 20px; left: unset; color: #1f1f1f; height: 42px; position: absolute; top: 0; z-index: 10; transition: 300ms; cursor: pointer}
.catalog-slider-arrow.swiper-button-disabled {opacity: 0}
.catalog-slider-prev {right: 60px}
.catalog-slider-next {right: 0}
.catalog-slider-prev svg {transform: rotateZ(180deg)}
.catalog-slider .show-all {height: 30px; margin-left: 20px; display: flex; flex-direction: column; justify-content: center; padding: 0 20px}
.catalog-slider .show-all b {font-size: 20px; margin-bottom: 20px; display: block}
.catalog-slider .show-all svg {width: 16px; height: 10px; display: inline-block; vertical-align: middle; margin-left: 10px}
/* CATALOG */
/* MODAL */
.overlay {position: fixed; top: 0; left: 0; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 8000; display: none}
.modal {width: 600px; right: -640px; top: 0; position: fixed; z-index: 9222; transition: 250ms; background: #fff; height: 100%}
.modal.show, .filter-form.show {right: 0px}
.modal .inner {padding: 40px; height: 100%; display: flex; flex-direction: column; justify-content: space-between}
.modal .close, .filter-form .close {top: 50px; left: -40px; background: red; font-size: 16px; cursor: pointer; position: absolute; z-index: 1; color: #fff; writing-mode: tb-rl; transform: rotateZ(180deg); width: 40px; height: 120px; text-align: center; line-height: 40px; border-radius: 0 4px 4px 0; transition: 300ms}
.modal .overflow-y {overflow-y: auto}
.modal-cart .h2-like {margin-top: 0px}
/* MODAL */
/* STATIC */
.static .left-part {width: 300px}
.static .right-part {width: calc(100% - 380px)}
.sidebar .page-menu {position: sticky; position: -webkit-sticky; top: 120px; background: #f3f4f5; text-align: right; padding: 10px}
.sidebar .page-menu svg {width: 15px; height: 15px; position: absolute; left: 20px; top: 20px; transition: 300ms}
.sidebar .page-menu li a {display: block; position: relative; border-radius: 5px}
.sidebar .page-menu li a:hover {color: #394d45}
.sidebar .page-menu > li > a {padding: 17px 20px}
.sidebar .page-menu > li.active > a {background: #394d45; color: #fff}
.sidebar .page-menu > li.active svg {transform: rotateZ(45deg)}
.sidebar .page-menu li .level-2 {display: none; transform-origin: top left; padding: 10px 0; transition: 300ms; transform: scaleY(0); background: #f3f4f5; font-size: 13px}
.sidebar .page-menu li .level-2 a {padding: 10px 20px}
.sidebar .page-menu li.active .level-2 {display: block; transform: scaleY(1)}
.sidebar .page-menu .level-2 li.active a {color: red}
/* STATIC */
/* FILTER */
.filter-preview {display: none}
.filter-form {margin-bottom: 40px; gap: 10px}
.mg-filter-head {gap: 10px}
.mg-filter {gap: 10px}
.mg-filter-item {position: relative}
.mg-filter-item input[type=text] {padding: 0; text-align: center}
.mg-filter-title {font-weight: 500; cursor: pointer; font-size: 13px; height: 40px; border-radius: 3px; padding: 0 20px; background: #f3f4f5}
.mg-filter-item > ul {position: absolute; top: 100%; border-top: 2px solid #fff; left: 0; padding: 20px; background: #f3f4f5; width: 200px; transform-origin: 0 0; transition: 250ms; transform: scaleY(0); border-radius: 5px; z-index: 100}
.mg-filter-item > ul:not(.price-slider-list) > li + li {margin-top: 10px}
.mg-filter-item:hover ul {transform: scaleY(1)}
.mg-filter-item:hover .mg-filter-title {background: #394d45; color: #fff}
/* FILTER */
/* CONTENT */
.content table {border: none}
.content table tr + tr {margin-top: 40px}
.content table tr {display: flex; justify-content: space-between; align-items: center}
.content table td {border: none; width: calc(50% - 20px); font-size: 14px}
.content table td img {width: 100% !important; height: 100% !important; object-fit: cover}
.content table h2 {margin-top: 0}
.content {line-height: 1.7}
.content hr {height: 1px; border: none; background: #f3f4f5; margin: 60px 0}
.content table td p:first-child {margin-top: 0 !important}
.content img, .content iframe {border: none; width: 100%}
.content p, .content blockquote, .content ul, .content ol, .content img {margin-top: 1em}
.content ol {counter-reset: list1; list-style-type: none}
.content ul:not(.form-list) li, .content ol li {position: relative; padding-left: 20px}
.content ul:not(.form-list) li:before {position: absolute; content: ''; width: 4px; height: 4px; background: currentcolor; left: 0; top: 0.7em}
.content ol li:before {counter-increment: list1; content: counter(list1) ". "; position: absolute; left: 0px; text-align: right; color: red}
.content blockquote {padding-left: 56px; border-left: 4px solid red; font-style: italic}
/* CONTENT */
/* NEWS */
.news .grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: calc(var(--margin, 48px) * 0.4); /* отступ между карточками */
margin-bottom: calc(var(--margin, 48px) * 0.6); /* нижний отступ секции */
}
.news .item {
text-decoration: none !important;
}
.news .item .img-part {
position: relative;
}
.news .item .img-part img {
border-radius: 5px 5px 0 0;
aspect-ratio: 16/9;
object-fit: cover;
}
.news .item .text-block {
padding: 20px 20px 30px 20px;
border-radius: 0 0 5px 5px;
background: #f3f4f5;
margin-top: 2px;
line-height: 1.3;
}
.news .item .date {
font-size: 14px;
opacity: 0.5;
}
.news .item .text-block .title {
font-size: 18px;
font-weight: 600;
margin: 15px 0;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 3;
height: 3.9em;
}
.news .item .text-block .text {
opacity: 0.5;
margin-bottom: 20px;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 3;
height: 3.9em;
font-size: 14px;
}
.news .item .button {
border: 1px solid #394d45;
color: #394d45;
font-size: 12px;
font-weight: 500;
letter-spacing: 1px;
width: 100%;
text-transform: uppercase;
transition: 250ms;
}
.news .item:hover .button {
background: #394d45;
color: #fff;
}
/* адаптивные значения */
@media (max-width: 1023px) {
.news .grid {
gap: calc(var(--margin, 48px) * 0.3);
}
}
@media (max-width: 767px) {
.news .grid {
grid-template-columns: 1fr;
gap: calc(var(--margin, 48px) * 0.25);
}
}
/* NEWS */
/* SEARCH */
.search-block {position: absolute; flex: 1; top: 170px; left: 20px; right: 20px; z-index: 10}
.search-block input[type=search] {padding-right: 60px; border: none}
.search-block button {width: 40px; height: 40px; position: absolute; top: 10px; right: 10px; border: none; background: #fff}
.search-block button svg {width: 20px; height: 20px}
.search-block .wraper-fast-result {position: absolute; top: 100%; z-index: 10; background: #fff; left: 0; width: 100%; padding: 20px; display: none}
.search-block .wraper-fast-result a + a {margin-top: 10px}
.search-block .wraper-fast-result a:hover {color: red}
.search-block .wraper-fast-result a .fast-result-info b {background: #1F1F1F !important; color: #fff}
.search-block .wraper-fast-result a .fast-result-img {width: 50px; height: 50px; position: relative}
.search-block .wraper-fast-result a .fast-result-img img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain}
.search-block .wraper-fast-result a .fast-result-info {width: calc(100% - 70px); font-size: 14px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden}
.search-block .wraper-fast-result a .fast-result-info span {font-weight: 500; display: block; color: red}
.mobile-search {position: relative}
.mobile-search input[type=search] {padding-left: 50px}
.mobile-search svg {width: 20px; height: 20px; position: absolute; top: 15px; left: 15px}
/* SEARCH */
/* TABS */
.tab:not(.active) {display: none}
.tab-links {gap: 20px; margin-bottom: 20px; margin-top: 40px; background: #fff; position: sticky; position: -webkit-sticky; top: 100px; z-index: 900}
.tab-links .tab-link {cursor: pointer; position: relative; padding: 15px 0}
.tab-links .tab-link.active, .tab-links .tab-link:hover {color: #040404}
.tab-links .tab-link:before {content: ''; left: 0px; bottom: 0; background: transparent; height: 2px; width: 100%; position: absolute}
.tab-links .tab-link.active:before {background: #040404}
/* TABS */
/* AMOUNT */
.cart_form input[type=text] {height: 50px; width: 100px; line-height: 48px; text-align: center}
.cart_form button {background: red; border: none; width: 50px; height: 50px; transition: 250ms; cursor: pointer; flex-shrink: 0}
.cart_form button svg {width: 20px; height: 20px}
/* AMOUNT */
/* PAGER */
.mg-pager .allPages {display: none}
.mg-pager ul {margin-top: 40px; display: flex; justify-content: center}
.mg-pager li:before {display: none}
.mg-pager li a, .mg-pager li span {display: block; line-height: 32px; padding: 0 15px; height: 32px; font-size: 14px; font-weight: 400}
.mg-pager li.current span {background: #394d45; display: block; border-radius: 2px; color: #fff}
/* PAGER */
/* PROPERTIES */
.properties {margin-bottom: 20px}
.prop-item {font-size: 14px; white-space: nowrap}
.prop-item + .prop-item {margin-top: 10px}
.prop-name {opacity: 0.5}
.prop-item .prop-separator {margin: 0 5px; background: linear-gradient(90deg, currentcolor 0, currentcolor 25%, rgba(255,255,255,0) 0, rgba(255,255,255,0)); flex-grow: 1; background-position: bottom; background-size: 4px 1px; background-repeat: repeat-x}
/* PROPERTIES */
/* PRODUCT */
.product-details-block h1 {font-size: 32px}
.product-details-block .sticky {position: sticky; position: -webkit-sticky; top: 120px}
.product-details-block .amount_change {display: none !important}
.product-details-block .available .count {gap: 5px; font-weight: 500; font-size: 13px}
.product-details-block .available .count:before {content: ''; width: 5px; height: 5px; background: limegreen; border-radius: 50%}
.product-details-block .stickers {position: absolute; left: 20px; top: 20px; width: 40px; text-align: center; pointer-events: none; color: #fff; z-index: 20}
.product-details-block .addToCart {background: #394d45}
.product-details-block .like, .unlike {width: 40px; height: 40px}
.product-details-block .like svg, .unlike svg {width: 25px}
.product-details-block .price-block {margin: 20px 0}
.product-details-block .price-block .price {font-size: 24px; font-weight: 500}
.product-details-block .stickers div {margin-bottom: 10px; height: 40px; width: 100%; background: red; line-height: 40px}
.product-details-block .left-part {width: calc(60% - 20px)}
.product-details-block .right-part {width: calc(40% - 20px)}
.product-details-block .left-part .product-slider {margin-bottom: 20px; display: grid; gap: 10px; grid-template-columns: repeat(2,minmax(0,1fr))}
.product-details-block .left-part .product-slider img {aspect-ratio: 4/3; object-fit: cover; border-radius: 5px}
/* PRODUCT */
/* SPOILER */
.spoiler {margin-top: 5px}
.spoiler-title {background: #f3f4f5; padding: 0 20px; height: 50px; font-weight: 500; position: relative; cursor: pointer; transition: background 250ms, color 250ms; border-radius: 5px}
.spoiler-title:after {content: ''; position: absolute; right: 30px; width: 2px; top: 20px; height: 10px; background: #040404; transform: rotateZ(0); transition: 250ms; transform-origin: 50% 50%}
.spoiler-title:before {content: ''; position: absolute; right: 30px; width: 2px; top: 20px; height: 10px; background: #040404; transform: rotateZ(90deg); transition: 250ms; transform-origin: 50% 50%}
.spoiler-content {padding: 20px; display: none}
.spoiler.active .spoiler-title {color: #fff; background: #394d45}
.spoiler.active .spoiler-title:after {background: #fff; transform: rotateZ(45deg)}
.spoiler.active .spoiler-title:before {background: #fff; transform: rotateZ(-45deg)}
/* SPOILER */
/* PERSONAL */
.order-history-list .status {position: relative; width: 30px}
.order-history-list .status .text {position: absolute; left: 0; font-size: 11px; top: 50%; transform: translateY(-50%)}
.order-history-list .details {margin-top: 20px}
.order-history-list .button {margin-top: 20px}
.total-sum__div-content {text-align: center; font-size: 18px; margin-top: 40px}
/* PERSONAL */
/* CART */
.small-cart-table tr + tr {margin-top: 20px}
.small-cart-table tr {display: grid; grid-template-columns: 60px auto 20px; grid-gap: 10px; position: relative}
.small-cart-table .price-cell {font-weight: bold; margin-top: 10px}
.small-cart-table .count {width: 20px; height: 20px; line-height: 20px; text-align: center; border-radius: 50%; position: absolute; background: red; color: #fff; left: 0; top: 0}
.small-cart-table .deleteItemFromCart {height: 20px; padding-left: 5px; display: block}
.small-cart-table .deleteItemFromCart svg {transform: rotateZ(45deg)}
/* CART */
/* ORDER */
.body__order .left-part {width: calc(100% - 640px)}
.body__order .right-part {width: 600px}
.body__order .right-part .sticky {position: sticky; position: -webkit-sticky; top: 120px}
/* ORDER */
.video {position: fixed; bottom: 20px; left: 20px; z-index: 100}
.video .close {position: absolute; right: 10px; top: 10px; width: 20px; height: 20px; z-index: 1; transform: rotateZ(45deg)}
.video .close:before {position: absolute; left: 50%; top: 0; border-radius: 1px; margin-left: -1px; width: 2px; background: #fff; height: 100%; content: ''}
.video .close:after {position: absolute; left: 0; top: 50%; border-radius: 1px; margin-top: -1px; height: 2px; background: #fff; width: 100%; content: ''}
.video video {aspect-ratio: 16/9; width: 280px; border-radius: 5px; background: #040404}
.image-wrap .active {
display: block;
}
/* FOOTER */
.rating-block {gap: 40px; font-weight: 500}
.rating-block a {width: 100px}
.rating-block .yandex {width: 100%; height: 20px; margin-bottom: 10px}
.rating-block .avito {width: 100%; height: 20px; margin-bottom: 10px}
.rating-block .star {width: 13px; height: 13px; color: #f6c707; margin-right: 2px}
.footer-logo {width: 100%; opacity: 0.05; margin-top: 40px}
footer .top-part {background: #394d45; color: #fff; padding: 40px 0}
footer {padding-top: 40px; font-size: 13px}
footer .top-part .grid {grid-template-columns: repeat(4, auto); gap: 40px; display: grid}
footer .top-part b {font-weight: 400; display: block; margin-bottom: 40px; font-size: 18px}
footer .top-part li {margin-bottom: 20px}
footer .top-part .categories ul {column-count: 2; column-gap: 40px}
footer .top-part li a {opacity: 0.5}
footer .bottom-part {padding: 40px 0}
footer .copyright {opacity: 0.5}
footer .bottom-part .grid {grid-template-columns: 1fr auto 1fr; display: grid; align-items: center}
footer .belka {width: 30px; height: 30px; opacity: 0.08; margin-left: auto}
footer .level-2 {display: none}
footer .social a {opacity: 1 !important; background: rgba(255,255,255,0.1)}
/* FOOTER */
@media (hover: hover) {
.icons-block a:hover {opacity: 0.5}
header .top-part .menu li:hover .level-2 {transform: scaleY(1)}
.button:hover {background-color: #040404; color: #fff; border-color: #040404}
input[type=checkbox]:hover {border-color: #040404}
select:hover {border-color: #1F1F1F}
.product-wrapper:hover .button {background: #394d45; color: #fff}
.catalog-cats a:hover {background: #394d45; color: #fff}
.home-triggers .item:hover:after {height: 100%}
.home-triggers .item:hover {color: #fff}
.home-triggers .item:hover img {filter: invert(1)}
.home-slider .swiper-controls .home-slider-arrow:hover {opacity: 1}
.bread-crumbs a:hover {opacity: 1}
.absolute-menu .has-sub:hover .level-2 {transform: translateX(0px); opacity: 1; visibility: visible; pointer-events: auto}
.absolute-menu .level-2 li:hover a {color: #1F1F1F}
.absolute-menu li:hover > a {opacity: 0.5}
.catalog-slider-arrow:hover {color: red}
.modal .close:hover, .filter-form .close:hover {background: #1f1f1f}
.home-contacts iframe:hover {filter: grayscale(0)}
.content a:not(.button):hover {text-decoration: underline}
.home-stars .item .button:hover {background: #fff; color: #040404}
.menu-line .menu a:hover {opacity: 0.5}
.home-slider .inner .button:hover {background: #fff; color: #040404}
.cats .item:hover {background: #394d45; color: #fff}
.cats .item:hover img {filter: invert(1)}
footer .top-part a:hover {opacity: 1}
footer .social a:hover {background: #fff; color: #394d45}
}
@media screen and (max-width: 1023px) {
body {font-size: 15px}
}
@media screen and (max-width: 1023px) {
.tablet-hide {display: none !important}
.tablet-show {display: block !important}
h1, .h1-like {font-size: 32px}
h2, .h2-like {font-size: 26px}
.catalog .grid.by-4 {grid-template-columns: repeat(3,1fr)}
}
@media screen and (max-width: 767px) {
body {font-size: 14px}
.mobile-hide {display: none !important}
.mobile-show {display: block !important}
.mobile-flex {display: flex !important}
h1, .h1-like {font-size: 26px}
h2, .h2-like {font-size: 20px}
.absolute-menu {width: 100%; padding: 20px 20px 20px 20px}
header {height: 80px; background: linear-gradient(#fff, rgba(255,255,255,0.5))}
header .logo-block {font-size: 9px}
header .logo-block svg {width: 170px; height: 20px}
header .bottom-part {height: 60px}
header .grid {grid-template-columns: 1fr auto 1fr}
header .phone {width: 40px; height: 40px; display: flex; align-items: center; justify-content: center}
header .phone svg {width: 20px; height: 20px}
.home-cats .grid {grid-template-columns: repeat(3,1fr); gap: 5px}
.home-triggers .grid.by-3, .home-triggers .grid.by-4 {grid-template-columns: 100%; gap: 5px}
.catalog .grid.by-3, .catalog .grid.by-4 {grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; margin: 0 -15px}
.content table tr {flex-wrap: wrap}
.content table td {width: 100%; order: 2; margin-bottom: 1em}
.content table td.with-img {order: 1}
.content table td.with-img img {margin: 0}
.content table tr + tr {margin-top: 0}
.modal {width: 100%; right: -100%}
.modal .close, .filter-form .close {top: 0px; height: 40px; line-height: 40px; background: red; border-radius: 0; writing-mode: unset; transform: unset; left: 0; width: 100%}
.product-details-block .left-part {width: 100%}
.product-details-block .right-part {width: 100%}
.bread-crumbs {margin: 40px -20px; overflow-x: auto; white-space: nowrap; padding: 0 20px}
.bread-crumbs::-webkit-scrollbar {display: none}
.tab-links {top: 60px}
.body__order .left-part {width: 100%}
.body__order .right-part {width: 100%}
.product-details-block .sticky {position: relative; top: 0}
.static .right-part {width: 100%}
.home-triggers .item {padding: 20px}
.home-triggers-top img {position: static}
.home-triggers-top .item {display: flex; align-items: center; gap: 10px}
.home-triggers .item .sub-title {font-size: 14px; opacity: 1}
.home-triggers-bottom .item .inner {flex-direction: row; flex-wrap: nowrap; align-items: center; text-align: left}
.home-triggers-bottom img {width: 30px; height: 30px}
.home-triggers .item:after {display: none}
.mobile-overflow-x {margin: 0 -20px; position: relative; overflow-x: auto; display: flex !important}
.swiper .mobile-overflow-x {margin: 0}
.mobile-overflow-x::-webkit-scrollbar {display: none}
.mobile-overflow-x:before, .mobile-overflow-x:after {content: ''; display: block; flex-shrink: 0; width: 10px; height: 10px}
.home-payments .item {width: 80vw; flex-shrink: 0; padding: 20px}
.home-banks .item {width: 100px; flex-shrink: 0}
.home-stars .swiper {margin: 0 -20px}
.home-stars .swiper-wrapper {gap: 10px}
.home-stars .item {width: 80vw; padding: 20px 20px 40px 25%; aspect-ratio: 1/1}
.home-stars .item .button {width: 100%}
.home-stars .item .title {font-size: 22px}
.catalog-cats {display: grid; grid-template-columns: repeat(3,minmax(0,1fr))}
footer .top-part .grid {grid-template-columns: 100%; gap: 0}
.cats .item {padding: 10px}
.mg-filter-title {height: 30px; padding: 0 10px}
.body__catalog main {overflow: hidden}
.mg-filter-head, .mg-filter, .filter-form {gap: 5px}
.button {height: 40px}
.product-wrapper .brand {width: 25px; height: 25px}
.product-wrapper .bottom-part {padding: 15px 10px 15px 10px}
.product-wrapper .name {width: calc(100% - 25px)}
.product-wrapper .prop-item {font-size: 11px}
.home-triggers-top img {right: 10px; left: unset; top: 10px; bottom: unset; width: 30px; height: 30px}
.home-reviews .swiper {width: calc(100% + 40px); margin: 0 -20px}
.home-reviews .swiper-wrapper {gap: 10px; transform: unset}
footer .top-part ul {display: none; padding-top: 20px}
.product-wrapper .stickers {font-size: 10px; gap: 1px; background: rgba(0,0,0,0.8); justify-content: center; bottom: 0; left: 0; width: 100%; backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px)}
.product-wrapper .stickers div {filter: unset; backdrop-filter: unset; -webkit-backdrop-filter: unset; background: unset}
.video {bottom: 0}
.video video {width: 160px}
.product-details-block .left-part .product-slider a {width: 80vw; flex-shrink: 0}
.product-wrapper .bottom-part:after {display: none}
.product-details-block .addToCart {width: calc(100% - 50px)}
.home-slider .max {padding: 10px}
.home-slider .inner {margin-top: auto; padding: 20px; width: 100%; text-align: center}
.home-slider .inner h1, .h1-like {font-size: 22px}
.home-slider .inner h2 {margin-bottom: 20px}
.home-slider .inner .button {width: 100%; margin-top: 0}
.home-action .inner {padding: 40px 20px}
.home-reviews {padding: 40px 0; margin: 60px 0; overflow: hidden}
.home-reviews .item {width: 80vw; padding: 20px}
.home-reviews .name, .home-reviews .car {font-size: 11px}
.home-about .grid {grid-template-columns: 100%; gap: 0}
.home-payments {margin: 60px 0; padding: 60px 0; overflow: hidden}
.home-action {margin: 60px 0}
.home-triggers {margin: 60px 0}
.home-cats {margin: 60px 0}
.home-latest {margin: 60px 0}
.home-stars {margin: 60px 0; overflow: hidden}
.home-slider {height: 350px}
.home-slider img {object-fit: 0% 50%}
footer .top-part b {margin-bottom: 0; position: relative; font-size: 14px}
footer .top-part b svg {transform: rotateZ(180deg); right: 0; width: 12.5px; height: 7.5px; position: absolute; top: 50%; margin-top: -3px}
footer .top-part .item + .item {border-top: 1px solid rgba(255,255,255,0.1); padding-top: 20px; margin-top: 20px}
.rating-block {width: 100%; order: 1; justify-content: center}
footer .bottom-part .grid {grid-template-columns: 100%}
footer .copyright {order: 2; margin: 20px auto}
footer .belka {order: 3; margin: 0 auto}
footer {padding-top: 20px}
.form-list li {width: 100%}
.home-action .button {width: 100%}
.home-about img {aspect-ratio: 16/9}
.absolute-menu .inner {padding: 20px 20px 80px 10px}
.home-stars .star {left: -20%}
.product-wrapper .like, .product-wrapper .unlike {position: absolute; top: 2px; right: 10px}
.body__noindex main {padding-top: 20px}
.home-banks {overflow: hidden}
footer .bottom-part {padding: 20px 0}
}
.social { gap: 12px; }
.social a {
height: 44px; width: 44px;
border-radius: 8px;
background: #f3f4f5;
display: flex; align-items: center; justify-content: center;
transition: 250ms;
}
.social a svg { width: 22px; height: 22px; color: #394d45; transition: 250ms; }
.social a:hover { background: #394d45; }
.social a:hover svg { color: #fff; }
/* --- Company table: отменяем глобальные .content table правила --- */
.company-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background: #fff;
border: 1px solid #f3f4f5;
border-radius: 5px;
overflow: hidden;
font-size: 15px;
line-height: 1.5;
}
.company-table tr {
display: table-row !important; /* сброс flex из .content table tr */
}
.company-table td {
display: table-cell !important; /* сброс width из .content table td */
width: auto !important;
padding: 14px 18px;
vertical-align: top;
border-bottom: 1px solid #f3f4f5;
}
.company-table tr:last-child td { border-bottom: none; }
.company-table td.k {
white-space: nowrap;
width: 320px;
color: #394d45;
font-weight: 600;
}
.company-table td a { text-decoration: underline; }
/* цифры читаемее и не прыгают по ширине */
.company-table .mono { font-variant-numeric: tabular-nums; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }
/* компактнее на планшете */
@media (max-width: 1023px) {
.company-table td.k { width: 260px; }
}
/* мобильная версия: строки-стэки */
@media (max-width: 767px) {
.company-table { border-radius: 5px; }
.company-table tr { display: block !important; }
.company-table td {
display: block !important;
width: 100% !important;
padding: 10px 14px;
}
.company-table td.k {
margin-bottom: 4px;
color: #040404;
opacity: .7;
}
}
/* ===================== ABOUT PAGE ===================== */
/* Обёртка секций about */
.about-section { padding: 40px 0; }
@media (max-width:767px){ .about-section { padding: 30px 0; } }
/* Хлебные крошки версии about (если нужны поверх .bread-crumbs) */
.about-bc { border-bottom: 1px solid #f3f4f5; background: linear-gradient(#fff, rgba(255,255,255,0.5)); position: sticky; top: 0; z-index: 100; }
.about-bc .max { height: 52px; display: flex; align-items: center; font-size: 13px; }
.about-bc a { opacity: .6; }
.about-bc .sep { margin: 0 10px; opacity: .3; }
/* HERO */
.about-hero { padding: 60px 0 30px; position: relative; }
.about-hero .chip { display: inline-block; font-size: 12px; padding: 6px 10px; border:1px solid #f3f4f5; border-radius: 999px; color:#7f7f7f; }
.about-hero h1 { margin: 10px 0 10px; } /* у тебя h1 уже 48/32/26 под брейкпоинты */
.about-hero .lead { color:#7f7f7f; max-width: 920px; }
/* Карточки в hero */
.about-cards { display:grid; gap: 10px; grid-template-columns: 1.4fr .9fr; margin-top: 20px; }
.about-card { background:#fff; border:1px solid #f3f4f5; border-radius:5px; padding: 20px; }
.about-card--accent { background:#f8fafb; }
.about-kpis { display:grid; gap: 10px; grid-template-columns: repeat(4, minmax(0,1fr)); margin-top: 8px; }
.about-kpi { text-align:center; border:1px solid #f3f4f5; border-radius:5px; background:#fff; padding: 16px; }
.about-kpi b { display:block; font-size: 20px; }
.about-kpi small { display:block; opacity:.6; font-size:12px; margin-top:2px; }
.about-hero .btns { display:flex; gap:10px; flex-wrap:wrap; margin-top: 14px; }
.about-hero .button { width:auto; padding:0 18px; height:42px; letter-spacing:.4px; }
.about-hero .button.outline { background:#fff; color:#394d45; border:1px solid #394d45; }
@media (max-width:1023px){
.about-cards { grid-template-columns: 1fr; }
.about-kpis { grid-template-columns: repeat(2,1fr); }
}
@media (max-width:767px){
.about-hero { padding: 40px 0 20px; }
.about-kpi b { font-size: 18px; }
}
/* Блок миссии и ценностей */
.about-grid-12 { display:grid; gap:10px; grid-template-columns: 1.4fr .9fr; align-items:start; }
.about-box { background:#fff; border:1px solid #f3f4f5; border-radius:5px; padding:20px; }
@media (max-width:1023px){ .about-grid-12 { grid-template-columns:1fr; } }
/* Преимущества */
.about-features { display:grid; gap:10px; grid-template-columns: repeat(3,minmax(0,1fr)); }
.about-feature { display:grid; grid-template-columns:64px 1fr; gap:14px; align-items:flex-start; padding:16px; border:1px solid #f3f4f5; border-radius:5px; background:#fff; }
.about-feature .num { width:64px; height:64px; border-radius:5px; display:grid; place-items:center; background:#f3f4f5; font-weight:700; color:#394d45; }
.about-feature h3 { margin:0 0 6px; font-size:20px; }
.about-feature p { margin:0; color:#7f7f7f; }
@media (max-width:1023px){ .about-features { grid-template-columns: repeat(2,1fr); } }
@media (max-width:767px){ .about-features { grid-template-columns: 1fr; } }
/* Таймлайн */
.about-timeline { border-left: 2px solid #f3f4f5; padding-left: 20px; margin-left: 10px; }
.about-timeline .row { position:relative; margin: 14px 0 22px; }
.about-timeline .row:before { content:''; position:absolute; left:-29px; top:4px; width:12px; height:12px; border-radius:50%; background:#394d45; box-shadow:0 0 0 4px rgba(57,77,69,.12); }
.about-timeline h3 { margin:0 0 6px; font-size:20px; }
.about-timeline p { margin:0; color:#7f7f7f; }
/* Команда */
.about-team { display:grid; gap:10px; grid-template-columns: repeat(3,minmax(0,1fr)); }
.about-person { display:flex; gap:14px; align-items:center; padding:14px; border:1px solid #f3f4f5; border-radius:5px; background:#fff; }
.about-person img { width:64px; height:64px; border-radius:5px; object-fit:cover; }
.about-person .role { color:#7f7f7f; font-size:14px; }
@media (max-width:1023px){ .about-team { grid-template-columns: repeat(2,1fr); } }
@media (max-width:767px){ .about-team { grid-template-columns: 1fr; } }
/* Локации */
.about-locations { display:grid; gap:10px; grid-template-columns: repeat(2,minmax(0,1fr)); }
.about-loc { background:#fff; border:1px solid #f3f4f5; border-radius:5px; padding:18px; }
.about-loc .city { color:#7f7f7f; font-size:13px; }
.about-loc .ttl { font-weight:600; }
@media (max-width:767px){ .about-locations { grid-template-columns: 1fr; } }
/* FAQ — нативные */
.about-faq details { border:1px solid #f3f4f5; border-radius:5px; background:#fff; margin-bottom:10px; }
.about-faq summary { cursor:pointer; padding:16px 18px; font-weight:500; list-style:none; }
.about-faq summary::-webkit-details-marker { display:none; }
.about-faq details[open] summary { background:#f8fafb; }
.about-faq .a { padding: 0 18px 16px; color:#1f1f1f; }
.about-faq p { margin: 10px 0 0; }
/* CTA */
.about-cta { text-align:center; }
.about-cta .box { background:#fff; border:1px solid #f3f4f5; border-radius:5px; padding:24px; }
.about-cta p { color:#7f7f7f; margin: 6px 0 16px; }
.about-cta .button { width:auto; padding:0 18px; height:42px; }
.about-cta .button.outline { background:#fff; color:#394d45; border:1px solid #394d45; }
/* Картинка в hero-карточке */
.about-hero .about-img { width:100%; height:260px; object-fit:cover; border-radius:5px; }
@media (max-width:767px){ .about-hero .about-img { height:200px; } }
/* =================== /ABOUT PAGE ====================== */
/* ===== CASES (columns) ===== */
.cases-section { margin: 80px 0; }
/* сетка колонок */
.cases-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: 20px;
align-items: start;
}
/* колонка-авто */
.cases-col {
display: flex;
flex-direction: column; /* по умолчанию: картинка сверху */
background: #fff;
border: 1px solid #f3f4f5;
border-radius: 5px;
overflow: hidden;
transition: 250ms;
}
.cases-col.is-reverse { /* для 2-й колонки — описание сверху */
flex-direction: column-reverse;
}
/* авто-чередование без классов (на всякий случай) */
.cases-grid > :nth-child(2n) { flex-direction: column-reverse; }
.cases-col:hover { box-shadow: 0 4px 12px rgba(0,0,0,.06); }
/* изображение */
.cases-img img {
width: 100%;
height: auto;
aspect-ratio: 16/9;
object-fit: cover;
display: block;
}
/* текстовая часть */
.cases-info { padding: 18px 20px 24px; line-height: 1.4; }
.cases-date { font-size: 14px; opacity: .6; margin-bottom: 6px; }
.cases-title { font-size: 18px; font-weight: 600; margin-bottom: 10px; }
.cases-text { font-size: 15px; opacity: .75; margin-bottom: 18px; }
.cases-btn {
border: 1px solid #394d45; color: #394d45;
text-transform: uppercase; font-size: 12px; letter-spacing: 1px; font-weight: 500;
height: 40px; display:flex; align-items:center; justify-content:center; border-radius:3px;
transition: 250ms;
}
.cases-col:hover .cases-btn { background:#394d45; color:#fff; }
/* адаптив */
@media (max-width:1199px){ .cases-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:767px){
.cases-grid{ grid-template-columns: 1fr; }
.cases-col, .cases-col.is-reverse { flex-direction: column; } /* на мобиле — единый порядок */
.cases-info{ padding: 14px; }
.cases-title{ font-size: 16px; }
.cases-text{ font-size: 14px; }
}
/* ===== /CASES (columns) ===== */
/* COOKIE BANNER */
.cookie-banner {
position: fixed;
left: 50%;
bottom: 20px;
transform: translateX(-50%);
max-width: 1200px;
width: calc(100% - 40px);
z-index: 9999;
background: rgba(20, 20, 20, 0.8);
color: #ffffff;
font-size: 14px;
line-height: 1.4;
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0,0,0,0.4);
display: none; /* показываем через JS, если согласия ещё нет */
}
.cookie-banner__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 15px 20px;
}
.cookie-banner__text {
flex: 1;
}
.cookie-banner__link {
color: #ffffff;
text-decoration: underline;
}
.cookie-banner__link:hover {
text-decoration: none;
}
.cookie-banner__actions {
display: flex;
flex-shrink: 0;
gap: 10px;
}
/* Основная кнопка — принять все cookies */
.cookie-banner__btn {
white-space: nowrap;
padding: 10px 20px;
border-radius: 999px;
border: none;
cursor: pointer;
font-weight: 600;
font-size: 14px;
background: #f5d166;
color: #000000;
transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.cookie-banner__btn:hover {
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(0,0,0,0.3);
background: #ffe189;
}
/* Вторичная кнопка — отклонить (только необходимые) */
.cookie-banner__btn--secondary {
background: transparent;
color: #ffffff;
border: 1px solid rgba(255,255,255,0.4);
box-shadow: none;
}
.cookie-banner__btn--secondary:hover {
background: rgba(255,255,255,0.08);
box-shadow: none;
transform: translateY(0);
}
/* Мобильная адаптация */
@media (max-width: 768px) {
.cookie-banner__inner {
flex-direction: column;
align-items: flex-start;
}
.cookie-banner__actions {
width: 100%;
justify-content: flex-start;
flex-wrap: wrap;
}
.cookie-banner__btn,
.cookie-banner__btn--secondary {
flex: 1 1 auto;
text-align: center;
}
}
/* /COOKIE BANNER */
/* =========================
Falling snow (Crystal Car)
========================= */
.snowflakes {
position: fixed;
inset: 0;
pointer-events: none;
overflow: hidden;
z-index: 50; /* при необходимости поменяй */
}
/* базовый стиль снежинки */
.snowflake {
position: absolute;
top: -10vh;
left: 0;
font-size: var(--snowflake-size, 8px);
line-height: 1;
color: rgba(190, 225, 255, 0.95); /* светло-голубые */
text-shadow:
0 0 4px rgba(180, 215, 255, 0.8),
0 0 8px rgba(180, 215, 255, 0.5);
opacity: var(--snowflake-opacity, 0.8);
will-change: transform;
transform: translate3d(0, -10vh, 0);
animation-name: snow-fall;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: var(--snowflake-duration, 16s);
animation-delay: var(--snowflake-delay, 0s);
}
/* Падение + хаотичная траектория по X */
@keyframes snow-fall {
0% {
transform: translate3d(0, -10vh, 0);
}
20% {
transform: translate3d(var(--snowflake-x1, 10px), 20vh, 0);
}
40% {
transform: translate3d(var(--snowflake-x2, -10px), 40vh, 0);
}
60% {
transform: translate3d(var(--snowflake-x3, 15px), 60vh, 0);
}
80% {
transform: translate3d(var(--snowflake-x4, -15px), 80vh, 0);
}
100% {
transform: translate3d(0, 110vh, 0);
}
}
@media (max-width: 1023px) {
.snowflakes {
z-index: 40;
}
}
@media (max-width: 767px) {
.snowflakes {
z-index: 30;
}
}
/* =========================
/Falling snow (Crystal Car)
========================= */
/* =========================
Home Stars (Crystal Car)
========================= */
.home-stars-video-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.7);
display: none;
justify-content: center;
align-items: center;
z-index: 9999;
padding: 20px;
}
.home-stars-video-overlay.active {
display: flex;
}
/* контейнер модалки */
.home-stars-video-inner {
position: relative;
width: 100%;
max-width: 960px; /* при желании можешь вернуть 1080px */
}
/* блок с правильным соотношением сторон 16:9 */
.home-stars-video-frame {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%; /* 16 / 9 */
overflow: hidden;
background: #000;
}
/* iframe заполняет весь блок */
.home-stars-video-frame iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
/* крестик закрытия */
.home-stars-video-close {
position: absolute;
top: -32px;
right: 0;
font-size: 24px;
line-height: 1;
cursor: pointer;
color: #fff;
z-index: 2;
}
/* =========================
/Home Stars (Crystal Car)
========================= */