:root { --White: #FFF; --Light-Grey: #F9F9F9; --Light-Grey-2: #F1F1F1; --Light-Blue: #EBF0F2; --Light-Blue-2: #E9F5FB; --Light-Blue-3: #A5CAD8; --Light-Grey-3: #D2D2D2; --Grey-1: #C4C4C4; --Light-Blue-Grey: #868D96; --Grey-2: #808080; --Blue: #02ADEF; --Dark-Blue: #057EB9; --Blue-Grey: #5C6876; --Dark-Blue-Grey: #404F5F; --Blue-Black: #2C3846; --Black: #000; --Green: #40BA69; --Light-red: #FEE; --Red: #F02E13; --Dark-red: #CE1900; --Grey: #A7A7A7; --Light-green: #EEF5EC; --black-blue-10: rgba(44, 56, 70, 0.10); } html { font-size: calc(100vw / 1440 * 10); } body { font-family: 'Open Sans'; font-weight: 400; transition: all .2s linear !important; min-height: 100vh; font-size: 1.6rem; color: var(--Black); background: var(--Light-Grey); } a, h1, h2, h3, h4, h5, p, span, button, ul, li { padding: 0; margin: 0; background: transparent; text-decoration: none; border: none; transition: all .2s linear; color: var(--Color-Background-Dark); } input, textarea, select { padding: 0; margin: 0; background: transparent; border: none; outline: none; transition: all .2s linear; } .container { max-width: 136rem; width: 100%; padding-left: 0; padding-right: 0; } div { transition: all .2s linear; } path, rect, circle { transition: all .2s linear; } main { display: flex; flex-direction: column; } /* header */ h1 { color: var(--Black); font-size: 4.4rem; font-style: normal; font-weight: 700; line-height: 120%; letter-spacing: -0.088rem; text-transform: uppercase; } h2 { color: var(--Black); text-align: center; font-size: 3.2rem; font-style: normal; font-weight: 700; line-height: 130%; letter-spacing: -0.064rem; text-transform: uppercase; } h3 { color: var(--Black); font-size: 2.2rem; font-style: normal; font-weight: 700; line-height: 130%; text-transform: uppercase; } h4 { color: var(--Black); font-size: 1.8rem; font-style: normal; font-weight: 700; line-height: 130%; text-transform: uppercase; } h5 { color: var(--Black); font-size: 1.4rem; font-style: normal; font-weight: 600; line-height: 130%; text-transform: uppercase; } header { display: flex; flex-direction: column; background: var(--White); } .header-top { padding: 1.2rem 0; } .header-top__container { display: flex; align-items: center; justify-content: space-between; } .logo { display: flex; width: 18.2rem; } .logo img { width: 100%; } .header-top__row { display: flex; align-items: center; gap: 1.6rem; width: 100%; max-width: 111.2rem; justify-content: space-between; } .header-top nav ul:after { content: ""; display: table; clear: both; } .header-top .topmenu { display: flex; align-items: center; gap: 2rem; } .header-top .topmenu > li { float: left; position: relative; } .header-top .topmenu li { list-style: none; } .header-top .topmenu a { color: var(--Grey-2); font-size: 1.4rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.028rem; display: flex; align-items: center; gap: 0.4rem; } .header-top .topmenu a svg { width: 1.2rem; height: auto; transition: .3s all; } .woocommerce ul#shipping_method .amount { font-weight: 500; } .woocommerce-account .woocommerce::after, .woocommerce-account .woocommerce::before { display: none; } .woocommerce-account .woocommerce-MyAccount-content { float: left; width: 100%; } .header-top .submenu { position: absolute; z-index: 5; min-width: 21.9rem; box-shadow: 8px 8px 10px 0px rgba(0, 0, 0, 0.04); visibility: hidden; opacity: 0; transform-origin: 0% 0%; transform: rotateX(-90deg); transition: .3s linear; background: #FFF; border-radius: 0.4rem; } .header-top .submenu li { position: relative; } .header-top .submenu li:first-child a { border-radius: 0.4rem 0.4rem 0rem 0rem; } .header-top .submenu li:last-child a { border-radius: 0rem 0rem 0.4rem 0.4rem; } .header-top .submenu li a { color: var(--Grey-2); font-size: 1.4rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.028rem; padding: 1.4rem 1.6rem; background: var(--White); } .header-top .submenu li a.active { background: var(--Light-Grey); color: var(--Blue); } .header-top .submenu li a:hover { color: var(--Blue); } .header-top .topmenu a:hover, .header-top .topmenu a.active { color: var(--Blue); } .header-top .submenu .submenu { position: absolute; left: 100%; top: -1px; transition: .3s linear; } .header-top nav li:hover > .submenu { transform: rotateX(0deg); visibility: visible; opacity: 1; } .header-top nav li:hover a svg { transform: rotate(180deg); } .header-contacts { display: flex; align-items: center; gap: 2rem; } .header-contacts a { display: flex; align-items: center; gap: 0.6rem; color: var(--Grey-2); font-size: 1.2rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.024rem; } .header-contacts a svg { width: 1.2rem; height: auto; } .header-contacts a:hover { color: var(--Blue); } .header-contacts a:hover svg path { stroke: var(--Blue); } .header-bottom { background: var(--Dark-Blue-Grey); } .header-bottom__container { display: flex; align-items: center; justify-content: space-between; } .header-bottom__row { display: flex; align-items: center; gap: 2rem; width: 100%; max-width: 113.1rem; } .header-catalog__button { display: flex; width: 25.9rem; min-width: 25.9rem; height: 6.4rem; align-items: center; gap: 0.8rem; background: var(--Blue); padding: 1.2rem 1.6rem; color: var(--White); font-size: 1.6rem; font-style: normal; font-weight: 600; line-height: 110%; letter-spacing: -0.032rem; } .header-catalog__button-icon { width: 2.4rem; display: flex; flex-direction: column; gap: 0.5rem; padding: 0.4rem; } .header-catalog__button-icon .bar { width: 100%; height: 0.1rem; background: var(--White); } .header-search { width: 100%; position: relative; } .header-search input { width: 100%; border-radius: 0.6rem; background: var(--Blue-Grey); color: var(--White); font-size: 1.2rem; font-style: normal; font-weight: 600; line-height: 130%; letter-spacing: -0.024rem; padding: 0.4rem 10.4rem 0.4rem 2rem; height: 4.8rem; } .header-search input::placeholder { color: var(--White); } .header-search__submit { position: absolute; z-index: 2; right: 0.4rem; display: flex; padding: 1.3rem 2rem; align-items: center; gap: 0.6rem; border-radius: 0.4rem; background: var(--Blue); top: 0.4rem; color: var(--White); font-size: 1.2rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.024rem; } .header-search__submit svg { width: 1.4rem; height: auto; } .header-search__submit:hover { background: var(--Dark-Blue); } .header-bottom__buttons { display: flex; align-items: center; gap: 2.4rem; } .header-cart { display: flex; align-items: center; gap: 0.6rem; color: var(--White); font-size: 1.2rem; font-style: normal; font-weight: 600; line-height: 110%; letter-spacing: -0.024rem; } .header-cart__icon { position: relative; } .header-cart__icon svg { width: 3.2rem; height: auto; } .header-cart__icon span { position: absolute; z-index: 2; top: 0; right: 0; padding: 0.5rem 0.4rem 0.4rem 0.4rem; border-radius: 10rem; background: var(--Blue); color: var(--White); text-align: center; font-size: 1rem; font-style: normal; font-weight: 600; line-height: 0.7rem; letter-spacing: -0.04rem; } .header-cart:hover { color: var(--Light-Blue-3); } .header-cart:hover .header-cart__icon svg path { stroke: var(--Light-Blue-3); } .header-login { display: flex; align-items: center; gap: 0.6rem; color: var(--White); font-size: 1.2rem; font-style: normal; font-weight: 600; line-height: 110%; letter-spacing: -0.024rem; } .header-login svg { width: 3.2rem; height: auto; } .header-top__mob { display: none; } .header-login:hover { color: var(--Light-Blue-3); } .header-login:hover svg path { stroke: var(--Light-Blue-3); } @media screen and (max-width: 992px) { html { font-size: calc(100vw / 360 * 10); } .container { max-width: 34rem; } h1 { font-size: 2.4rem; letter-spacing: -0.048rem; } h2 { font-size: 2.4rem; letter-spacing: -0.048rem; } h3 { font-size: 2rem; } h4 { font-size: 1.6rem; } h5 { font-size: 1.2rem; } header { background: transparent; } .header-top__row { display: none; } .header-top__mob { display: flex; gap: 0.4rem; } .header-top__mob a, .header-top__mob button { display: flex; justify-content: center; align-items: center; position: relative; border-radius: 0.4rem; background: var(--White); width: 3.2rem; height: 3.2rem; } .header-top__mob a svg, .header-top__mob button svg { width: 1.6rem; height: auto; } .header-top__mob a span, .header-top__mob button span { padding: 0.2rem 0.4rem; border-radius: 10rem; background: var(--Blue); position: absolute; right: 0.2rem; top: 0.2rem; color: var(--White); text-align: center; font-size: 0.6rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.024rem; } .header-top { padding: 1rem 0; } .logo { width: 10.4rem; } .header-bottom { background: transparent; } .header-catalog__button p { display: none; } .header-catalog__button { width: 4rem; min-width: 4rem; height: 4rem; padding: 1.3rem 1.2rem; border-radius: 0.4rem; } .header-catalog__button-icon { width: 1.6rem; gap: 0.5rem; padding: 0; } .header-bottom__buttons { display: none; } .header-bottom__row { gap: 1rem; } .header-search__submit p { display: none; } .header-search input { background: var(--White); border-radius: 0.4rem; padding: 0.4rem 3.6rem 0.4rem 1.6rem; height: 4rem; } .header-search input::placeholder { color: var(--Grey-2); } .header-search__submit { padding: 0.9rem; } } /* banner */ .banner { margin-bottom: 14.4rem; margin-top: 1.6rem; } .banner-container { display: flex; justify-content: flex-end; } .banner-main { width: 100%; max-width: 108.5rem; display: flex; flex-direction: column; gap: 1.6rem; } .banner-slider { display: flex; position: relative; align-items: center; } .banner-swiper { width: 100%; height: 42.4rem; } .banner-swiper .swiper-slide { height: auto; } .banner-slide { position: relative; height: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 2.4rem; padding: 2rem 12rem; justify-content: center; } .banner-slide::before { content: ''; border-radius: 0.6rem; background: linear-gradient(0deg, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.50) 100%); position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; } .banner-slide__img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 0.6rem; object-fit: cover; } .banner-slide h4 { position: relative; z-index: 3; color: #FFC502; } .banner-slide h2 { position: relative; z-index: 3; color: var(--White); max-width: 49.6rem; margin-bottom: 1.6rem; text-align: left; } .banner-slide__link { position: relative; z-index: 3; display: flex; padding: 2.2rem 2.4rem 2.3rem 2.4rem; justify-content: center; align-items: flex-end; gap: 0.6rem; border-radius: 0.4rem; background: var(--Blue); color: var(--White); font-size: 1.6rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.032rem; } .banner-slide__link svg { width: 1.8rem; height: auto; } .banner-prev { display: flex; position: absolute; left: 0; width: 4rem; height: 4rem; justify-content: center; align-items: center; z-index: 9; border-radius: 0 0.4rem 0.4rem 0; background: rgba(255, 255, 255, 0.20); } .banner-next { display: flex; position: absolute; right: 0; width: 4rem; height: 4rem; justify-content: center; align-items: center; z-index: 9; border-radius: 0.4rem 0rem 0rem 0.4rem; background: rgba(255, 255, 255, 0.20); } .banner-prev svg { width: 1.6rem; height: auto; } .banner-next svg { width: 1.6rem; height: auto; } .banner-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; } .banner-item { display: flex; padding: 2.4rem; align-items: center; gap: 1.6rem; border-radius: 0.6rem; background: var(--White); } .banner-item img { width: 3.2rem; min-width: 3.2rem; } .banner-item p { color: var(--Black); font-size: 1.4rem; font-style: normal; font-weight: 600; line-height: 130%; letter-spacing: -0.028rem; } @media screen and (max-width: 992px) { .banner { margin-bottom: 9.6rem; margin-top: 1rem; } .banner-main { gap: 1rem; } .banner-slide { padding: 2rem 1.6rem; } .banner-prev { display: none; } .banner-next { display: none; } .banner-grid { display: flex; gap: 1rem; min-width: 100vw; overflow-x: auto; margin-left: -1rem; padding: 0 1rem 1rem 1rem; } .banner-item { padding: 1.6rem; gap: 1rem; width: 22.3rem; min-width: 22.3rem; } .banner-item img { width: 2.4rem; min-width: 2.4rem; } .banner-item p { font-size: 1.2rem; letter-spacing: -0.024rem; } } /* categories */ .categories { margin-bottom: 14.4rem; } .categories-container { display: flex; flex-direction: column; gap: 6.4rem; } .categories-main { display: flex; flex-direction: column; gap: 6.4rem; } .categories-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; } .categories-item { background: var(--White); border-radius: 0.6rem; display: flex; flex-direction: column; position: relative; overflow: hidden; } .categories-item__img { display: flex; height: 24rem; } .categories-item__img img { width: 100%; height: 100%; object-fit: cover; } .categories-item__main { padding: 3.2rem 2.4rem; } .categories-item__title { color: var(--Black); font-size: 2.2rem; font-style: normal; font-weight: 700; line-height: 130%; text-transform: uppercase; display: flex; align-items: center; gap: 1.2rem; } .categories-item__title svg { width: 2.4rem; height: auto; transition: .3s all; opacity: 0; } .categories-item.hidden { display: none; } .categories-more { display: flex; padding: 2.2rem 2.4rem 2.3rem 2.4rem; justify-content: center; align-items: center; gap: 0.8rem; border-radius: 0.4rem; background: var(--Blue); color: var(--White); font-size: 1.6rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.032rem; margin: 0 auto; } .categories-more svg { width: 1.6rem; height: auto; } .categories-item:hover .categories-item__title { color: var(--Blue); } .categories-item:hover svg { opacity: 1; } @media screen and (max-width: 992px) { .categories { margin-bottom: 9.6rem; } .categories-container { gap: 4rem; } .categories-main { gap: 4rem; } .categories-grid { grid-template-columns: repeat(1, 1fr); gap: 1rem; } .categories-item { border-radius: 0.4rem; } .categories-item__img { height: 14.4rem; } .categories-item__main { padding: 2.4rem 1.6rem; } .categories-item__title { font-size: 1.6rem; } .categories-more { padding: 1.3rem 2rem; gap: 0.6rem; font-size: 1.2rem; letter-spacing: -0.024rem; } .categories-more svg { width: 1.4rem; } } /* products */ .products { margin-bottom: 14.4rem; } .products-container { display: flex; flex-direction: column; gap: 6.4rem; } .products-slider { display: flex; align-items: center; position: relative; } .products-swiper { width: 100%; } .products-swiper .swiper-slide { height: auto; } .products-swiper .swiper-slide .product_item { height: 100%; } .product_item { display: flex; flex-direction: column; background: var(--White); border-radius: 0.6rem; position: relative; overflow: hidden; } .product_item-img { position: relative; height: 28rem; min-height: 28rem; } .product_item-img__link { display: flex; height: 100%; } .product_item-img__link img { width: 100%; height: 100%; object-fit: cover; } .product_item-labels { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; position: absolute; z-index: 2; left: 1.2rem; top: 1.2rem; } .product_item-popular { padding: 0.8rem 1.2rem; border-radius: 0.4rem; background: var(--Green); color: var(--White); text-align: center; font-size: 1.2rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.024rem; } /* Метка скидки для списка товаров - красная */ .product_item-discount { padding: 0.8rem 1.2rem; border-radius: 0.4rem; background: #EF4444; color: var(--White); text-align: center; font-size: 1.2rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.024rem; } .product_item-sale { padding: 0.8rem 1.2rem; border-radius: 0.4rem; background: var(--Red); display: flex; align-items: center; gap: 0.2rem; } .product_item-sale svg { width: 1.2rem; height: auto; } .product_item-sale p { color: var(--White); font-size: 1.2rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.024rem; } .product_item-main { height: 100%; display: flex; flex-direction: column; padding: 2.4rem; gap: 1.6rem; } .product_item-title { color: var(--Black); font-size: 1.8rem; font-style: normal; font-weight: 600; line-height: 130%; text-transform: uppercase; /* Минимальная высота: 3 строки, но показываем весь текст */ min-height: 7.02rem; } .product_item-chars { display: flex; flex-direction: column; padding-left: 2.5rem; /* Фиксируем высоту: 2 строки характеристик */ min-height: 7.92rem; } .product_item-chars li { color: var(--Grey-2); font-size: 1.4rem; font-style: normal; font-weight: 400; line-height: 140%; letter-spacing: -0.028rem; } .product_item-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 0.8rem; /* Прижимаем цены + кнопку к низу карточки (работает и без характеристик) */ margin-top: auto; } .product_item-prices { display: flex; align-items: center; gap: 0.8rem; } .product_item-price { color: var(--Black); font-size: 1.8rem; font-style: normal; font-weight: 700; line-height: 130%; } .product_item-oldprice { color: var(--Grey-2); font-size: 1.2rem; font-style: normal; font-weight: 600; line-height: normal; text-decoration-line: line-through; } .product_item-price_weight { display: flex; align-items: center; gap: 0.8rem; } .product_item-price_weight-new { color: var(--Grey-2); font-size: 1.4rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.028rem; } .product_item-price_weight-old { color: var(--Grey-2); font-size: 1.2rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.024rem; text-decoration-line: line-through; } .product_item-link { padding: 2.2rem 2.4rem 2.3rem 2.4rem; border-radius: 0.4rem; background: var(--Blue); color: var(--White); font-size: 1.6rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.032rem; text-align: center; } .products-prev { position: absolute; width: 4rem; height: 4rem; display: flex; justify-content: center; align-items: center; border-radius: 0 0.4rem 0.4rem 0; background: var(--Dark-Blue-Grey); z-index: 9; left: 0; } .products-prev svg { width: 1.6rem; height: auto; } .products-next { position: absolute; width: 4rem; height: 4rem; display: flex; justify-content: center; align-items: center; border-radius: 0.4rem 0 0 0.4rem; background: var(--Dark-Blue-Grey); z-index: 9; right: 0; } .products-next svg { width: 1.6rem; height: auto; } .products-mob { display: none; } @media screen and (max-width: 992px) { .products-mob { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } .products { margin-bottom: 9.6rem; } .products-container { gap: 4rem; } .products-slider { display: none; } .product_item-img { height: 16rem; min-height: 16rem; } .product_item-labels { left: 0.8rem; top: 0.8rem; } .product_item-popular { padding: 0.6rem 0.8rem; font-size: 0.8rem; letter-spacing: -0.016rem; } .product_item-discount { padding: 0.6rem 0.8rem; font-size: 0.8rem; letter-spacing: -0.016rem; } .product_item-sale { padding: 0.6rem 0.8rem; } .product_item-sale svg { width: 0.8rem; } .product_item-sale p { font-size: 0.8rem; letter-spacing: -0.016rem; } .product_item-main { padding: 1.6rem; gap: 0.8rem; } .product_item-title { font-size: 1.1rem; } .product_item-chars { padding-left: 2rem; } .product_item-chars li { font-size: 0.8rem; letter-spacing: -0.016rem; } .product_item-meta { gap: 0.6rem; margin: 0.8rem 0 1.2rem 0; } .product_item-prices { gap: 0.4rem; } .product_item-price { font-size: 1rem; } .product_item-oldprice { font-size: 0.8rem; } .product_item-price_weight { gap: 0.4rem; } .product_item-price_weight-new { font-size: 1rem; letter-spacing: -0.02rem; } .product_item-price_weight-old { font-size: 0.8rem; } .product_item-link { padding: 1.2rem 1.7rem; font-size: 1rem; letter-spacing: -0.02rem; } } /* about */ .about { margin-bottom: 14.4rem; } .about-container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; } .about-container > img { width: 100%; border-radius: 0.6rem; object-fit: cover; } .about-main { display: flex; flex-direction: column; padding: 4rem; align-items: flex-start; border-radius: 0.6rem; justify-content: center; background: var(--White); gap: 1.6rem; } .about-main h2 { margin-bottom: 1.6rem; } .about-subtitle { color: var(--Black); font-size: 1.8rem; font-style: normal; font-weight: 600; line-height: 130%; text-transform: uppercase; } .about-description { margin-bottom: 1.6rem; color: var(--Grey-2); font-size: 1.8rem; font-style: normal; font-weight: 400; line-height: 140%; letter-spacing: -0.036rem; } .link-more { display: flex; align-items: flex-start; gap: 0.6rem; color: var(--Blue); font-size: 1.6rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.032rem; } .link-more svg { width: 2rem; height: auto; } @media screen and (max-width: 992px) { .about { margin-bottom: 9.6rem; } .about-container { grid-template-columns: repeat(1, 1fr); gap: 1rem; } .about-container > img { height: 34rem; order: 2; } .about-main { padding: 4rem 1.6rem; } .about-main h2 { margin-bottom: 0.8rem; } .about-subtitle { font-size: 1.4rem; } .about-description { font-size: 1.4rem; letter-spacing: -0.028rem; } .link-more { gap: 0.4rem; font-size: 1.2rem; letter-spacing: -0.024rem; } .link-more svg { width: 1.6rem; } } /* header */ .why { margin-bottom: 14.4rem; } .why-container { display: flex; flex-direction: column; gap: 6.4rem; } .why-main { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; } .why-item { padding: 2.4rem; display: flex; flex-direction: column; align-items: flex-start; gap: 1.6rem; border-radius: 0.6rem; background: var(--Dark-Blue-Grey); } .why-item h3 { color: var(--White); font-size: 2.2rem; font-style: normal; font-weight: 700; line-height: 130%; text-transform: uppercase; } .why-item p { color: var(--White); font-size: 1.6rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.032rem; } @media screen and (max-width: 992px) { .why { margin-bottom: 9.6rem; } .why-container { gap: 4rem; } .why-main { grid-template-columns: repeat(1, 1fr); gap: 1rem; } .why-item { padding: 1.6rem; gap: 1.2rem; } .why-item h3 { font-size: 2rem; } .why-item p { font-size: 1.2rem; letter-spacing: -0.024rem; } } /* info */ .info { margin-bottom: 14.4rem; } .info-container { display: flex; flex-direction: column; gap: 6.4rem; } .info-main { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .info-item { border-radius: 0.6rem; background: var(--White); display: flex; padding: 2.4rem; flex-direction: column; align-items: flex-start; gap: 1.6rem; } .info-item img { height: 4.8rem; margin-bottom: 2.4rem; } .info-item h3 { color: var(--Black); font-size: 2.2rem; font-style: normal; font-weight: 700; line-height: 130%; text-transform: uppercase; } .info-item p { margin-bottom: 4.8rem; color: var(--Grey-2); font-size: 1.8rem; font-style: normal; font-weight: 400; line-height: 140%; letter-spacing: -0.036rem; } @media screen and (max-width: 992px) { .info { margin-bottom: 9.6rem; } .info-container { gap: 4rem; } .info-main { grid-template-columns: repeat(1, 1fr); gap: 1rem; } .info-item { padding: 3.2rem 1.6rem; } .info-item img { margin-bottom: 0.4rem; } .info-item h3 { font-size: 1.6rem; } .info-item p { margin-bottom: 1.6rem; font-size: 1.4rem; letter-spacing: -0.028rem; } } /* consult */ .consult { margin-bottom: 6.4rem; } .consult h2 { text-align: left; } .consult-main { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; padding: 6.4rem; border-radius: 0.8rem; background: var(--Light-Blue); } .consult-name { display: flex; flex-direction: column; align-items: flex-start; gap: 2.4rem; } .consult-name p { color: var(--Grey-2); font-size: 1.8rem; font-style: normal; font-weight: 400; line-height: 140%; letter-spacing: -0.036rem; } .consult-form { display: flex; flex-direction: column; gap: 0.6rem; } .consult-form input[type="text"], .consult-form input[type="tel"], .consult-form input[type="email"] { padding: 1.9rem 0.4rem 1.9rem 2rem; border-radius: 0.6rem; background: var(--White); color: var(--Blue); font-size: 1.4rem; font-style: normal; font-weight: 600; line-height: 130%; letter-spacing: -0.028rem; width: 100%; border: 1px solid transparent; } .consult-form input[type="text"]::placeholder, .consult-form input[type="tel"]::placeholder, .consult-form input[type="email"]::placeholder { color: var(--Grey-2); } .consult-form__row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; } .consult-checkbox { margin: 1rem 0; display: flex; align-items: center; position: relative; } .consult-checkbox label { color: var(--Grey-2); font-size: 1.2rem; font-style: normal; font-weight: 500; line-height: 140%; letter-spacing: -0.024rem; cursor: pointer; padding-left: 2.2rem; } .consult-checkbox label a { text-decoration: underline; color: var(--Grey-2); } .consult-checkbox input[type=checkbox]:before { content: ""; display: inline-block; width: 1.6rem; height: 1.6rem; border-radius: 0.2rem; border: 0.1rem solid var(--Blue); position: absolute; margin-top: -0.8rem; background-color: var(--White); cursor: pointer; } .consult-checkbox input[type=checkbox]:checked:before { background:transparent; background-image: url('/wp-content/uploads/2025/05/chek.svg'); background-repeat: no-repeat; background-position: center; position: absolute; background-size: cover; }​ .consult-checkbox input[type="checkbox"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: none; } .consult-checkbox input[type="checkbox"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: none; } .consult-checkbox input[type="checkbox"]:checked { background-image: none; } .consult-submit { padding: 2.2rem 2.4rem 2.3rem 2.4rem; border-radius: 0.4rem; background: var(--Blue); color: var(--White); font-size: 1.6rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.032rem; margin-right: auto; } @media screen and (max-width: 992px) { .consult { margin-bottom: 4.8rem; } .consult-main { grid-template-columns: repeat(1, 1fr); gap: 2.4rem; padding: 4rem 2.4rem; } .consult-name { gap: 1.6rem; } .consult-name p { font-size: 1.4rem; letter-spacing: -0.028rem; max-width: 21rem; } .consult-form input[type="text"], .consult-form input[type="tel"], .consult-form input[type="email"] { padding: 1.6rem 1.8rem; font-size: 1.2rem; letter-spacing: -0.024rem; } .consult-form__row { grid-template-columns: repeat(1, 1fr); } .consult-submit { width: 100%; } } /* footer */ footer { background: var(--Blue-Black); padding: 6.4rem 0 4rem 0; } .footer-container { display: flex; flex-direction: column; gap: 4.8rem; } .footer-main { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.6rem; align-items: flex-start; } .footer-col { display: flex; flex-direction: column; gap: 3.2rem; align-items: flex-start; } .footer-logo { display: flex; width: 18.2rem; } .footer-logo img { width: 100%; } .footer-address { display: flex; align-items: flex-start; gap: 0.6rem; } .footer-address svg { width: 1.6rem; min-width: 1.6rem; height: auto; } .footer-address p, .footer-address a { color: var(--Light-Blue-Grey); font-size: 1.4rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.028rem; max-width: 16.2rem; } .footer-menu { display: flex; flex-direction: column; gap: 2rem; align-items: flex-start; } .footer-menu__title { color: var(--White); font-size: 1.6rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.032rem; } .footer-menu ul { display: flex; flex-direction: column; gap: 1.6rem; align-items: flex-start; } .footer-menu ul li { display: flex; list-style: none; } .footer-menu ul li a { color: var(--Light-Blue-Grey); font-size: 1.4rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.028rem; } .footer-contacts { display: flex; flex-direction: column; gap: 3.2rem; align-items: flex-start; } .footer-contacts__col { display: flex; flex-direction: column; gap: 2.4rem; align-items: flex-start; } .footer-contacts__item { display: flex; flex-direction: column; align-items: flex-start; gap: 0.8rem; } .footer-contacts__item a { color: var(--White); font-size: 1.6rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.032rem; } .footer-contacts__item p { color: var(--Blue-Grey); font-size: 1.2rem; font-style: normal; font-weight: 500; line-height: 120%; letter-spacing: -0.024rem; } .footer-contacts__payment { display: flex; flex-direction: column; gap: 1.6rem; align-items: flex-start; } .footer-contacts__payment p { color: var(--Light-Blue-Grey); font-size: 1.2rem; font-style: normal; font-weight: 600; line-height: 120%; /* 1.44rem */ letter-spacing: -0.024rem; } .footer-contacts__payment-row { display: flex; max-width: 12.2rem; align-items: center; align-content: center; gap: 1.6rem 0.8rem; flex-wrap: wrap; } .footer-contacts__payment-row img { max-width: 100%; } .footer-contacts__payment-row img:nth-child(1) { width: 5.6rem; } .footer-contacts__payment-row img:nth-child(2) { width: 4.8rem; } .footer-contacts__payment-row img:nth-child(3) { width: 4rem; } .footer-button { display: flex; } .footer-callback { padding: 2.2rem 2.4rem 2.3rem 2.4rem; border-radius: 0.4rem; background: var(--Blue); color: var(--White); font-size: 1.6rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.032rem; } .footer-copyright { display: flex; align-items: center; padding-top: 1.7rem; gap: 1.6rem; border-top: 1px solid var(--Dark-Blue-Grey); } .footer-copyright > p { width: 100%; max-width: 53.4rem; color: var(--Blue-Grey); font-size: 1.2rem; font-style: normal; font-weight: 500; line-height: 120%; letter-spacing: -0.024rem; } .footer-copyright > a { width: 100%; max-width: 25.9rem; display: flex; justify-content: flex-end; align-items: center; gap: 0.8rem; color: var(--White); font-size: 1.2rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.024rem; } .footer-copyright > a img { width: 5.6rem; } .footer-copyright__row { width: 100%; max-width: 52rem; display: flex; align-items: center; gap: 1.6rem; } .footer-copyright__row a { color: var(--Blue-Grey); font-size: 1.2rem; font-style: normal; font-weight: 500; line-height: 120%; letter-spacing: -0.024rem; width: 100%; } @media screen and (max-width: 992px) { footer { padding: 4rem 0; } .footer-container { gap: 4rem; } .footer-main { display: flex; flex-wrap: wrap; gap: 4rem 1rem; } .footer-col { width: 100%; gap: 1.6rem; } .footer-logo { width: 14.3rem; } .footer-address { align-items: center; } .footer-address svg { width: 1.6rem; min-width: 1.6rem; } .footer-address p, .footer-address a { font-size: 1.2rem; letter-spacing: -0.024rem; max-width: none; } .footer-menu { gap: 1.6rem; width: 100%; max-width: calc(50% - 1rem); } .footer-menu__title { font-size: 1.4rem; letter-spacing: -0.028rem; } .footer-menu ul { gap: 1.2rem; } .footer-menu ul li a { font-size: 1.2rem; letter-spacing: -0.024rem; } .footer-contacts { width: 100%; } .footer-contacts__payment-row { max-width: none; gap: 0.8rem; } .footer-copyright { flex-direction: column; align-items: flex-start; } .footer-copyright > p { width: auto; max-width: none; } .footer-copyright > a { width: auto; max-width: none; justify-content: flex-start; } .footer-copyright__row { width: auto; max-width: none; flex-direction: column; align-items: flex-start; } .footer-copyright__row a { width: auto; } } /* breadcumbs */ .breadcumbs { margin-top: 4.8rem; margin-bottom: 6.4rem; } .breadcumbs ul { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; } .breadcumbs ul li { display: flex; list-style: none; } .breadcumbs ul li a { color: var(--Blue); font-size: 1.4rem; font-style: normal; font-weight: 500; line-height: 120%; letter-spacing: -0.028rem; } .breadcumbs ul li p { color: var(--Grey-1); font-size: 1.4rem; font-style: normal; font-weight: 500; line-height: 120%; letter-spacing: -0.028rem; } .breadcumbs ul li p.breadcumbs-separator { color: var(--Blue); } .categories_page h2 { text-align: left; } @media screen and (max-width: 992px) { .breadcumbs { margin-top: 3.2rem; margin-bottom: 4.8rem; } .breadcumbs ul li a { font-size: 1.2rem; letter-spacing: -0.024rem; } .breadcumbs ul li p { font-size: 1.2rem; letter-spacing: -0.024rem; } } /* catalog_page */ .catalog_page { margin-bottom: 14.4rem; } .catalog_page-container { display: flex; gap: 1.6rem; align-items: flex-start; } .catalog_page-menu { width: 100%; max-width: 32.8rem; display: flex; flex-direction: column; gap: 6.4rem; } .catalog_page-menu__col { display: flex; flex-direction: column; } .catalog_page-menu__item { display: flex; flex-direction: column; border-bottom: 1px solid var(--Light-Grey); background: var(--White); } .catalog_page-menu__item-button { display: flex; align-items: center; gap: 1.2rem; padding: 1.2rem; } .catalog_page-menu__item-button__img { width: 3.6rem; min-width: 3.6rem; } .catalog_page-menu__item-button__img img { width: 100%; } .catalog_page-menu__item-row { display: flex; align-items: center; gap: 1.2rem; justify-content: space-between; width: 100%; } .catalog_page-menu__item-row a { font-size: 1.4rem; font-style: normal; font-weight: 600; line-height: 130%; letter-spacing: -0.028rem; } .catalog_page-menu__item-button__icon { display: flex; } .catalog_page-menu__item-button__icon svg { width: 1.2rem; height: auto; transition: .3s all; } .catalog_page-menu__item-content { position: relative; max-height: 0; overflow: hidden; padding: 0 1.2rem; display: flex; flex-direction: column; gap: 0.8rem; transition: .3s all; } .catalog_page-menu__item-content-item { padding-left: 4.8rem; display: flex; flex-direction: column; } .catalog_page-menu__item-content-item-row { display: flex; align-items: center; gap: 1.2rem; justify-content: space-between; } .catalog_page-menu__item-content-item-row a { font-size: 1.2rem; font-style: normal; font-weight: 600; line-height: 130%; letter-spacing: -0.024rem; } .catalog_page-menu__item-content-item-icon { display: flex; } .catalog_page-menu__item-content-item-icon svg { width: 1.2rem; height: auto; transition: .3s all; } .catalog_page-menu__item-content-item-content { position: relative; max-height: 0; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 1.2rem; padding-left: 0.8rem; } .catalog_page-menu__item-content-item-content a { color: var(--Light-Blue-Grey); font-size: 1.2rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.024rem; } .catalog_page-menu__item.active .catalog_page-menu__item-content { overflow: visible; max-height: 100% !important; margin-bottom: 2rem; } .catalog_page-menu__item-content-item.active .catalog_page-menu__item-content-item-content { margin-top: 1.2rem; } .catalog_page-menu__item.active .catalog_page-menu__item-button__icon svg { transform: rotate(180deg); } .catalog_page-menu__item.active .catalog_page-menu__item-button__icon svg path { fill: var(--Blue); } .catalog_page-menu__item.active .catalog_page-menu__item-row a { color: var(--Blue); } .catalog_page-menu__item-content-item.active .catalog_page-menu__item-content-item-icon svg { transform: rotate(180deg); } .catalog_page-menu__item-content-item.active .catalog_page-menu__item-content-item-icon svg path { fill: var(--Blue); } .catalog_page-menu__item-content-item.active .catalog_page-menu__item-content-item-row a { color: var(--Blue); } .catalog_page-menu__item-content-item-content a.active { color: var(--Blue); } .catalog_page-menu__item-content-item.active .catalog_page-menu__item-content-item-content { overflow: visible; max-height: 100% !important; } .catalog_page-main { width: 100%; max-width: 101.6rem; display: flex; flex-direction: column; gap: 4rem; } .catalog_page-col { display: flex; flex-direction: column; gap: 1.6rem; } .catalog_page-item { display: flex; border-radius: 0.6rem; background: var(--White); position: relative; overflow: hidden; } .catalog_page-item__img { width: 100%; max-width: 44.3rem; display: flex; } .catalog_page-item__img img { width: 100%; height: 100%; object-fit: cover; } .catalog_page-item__main { display: flex; padding: 4rem; flex-direction: column; align-items: flex-start; gap: 1.6rem; width: 100%; max-width: 57.3rem; justify-content: center; } .catalog_page-item__title { font-size: 2.2rem; font-style: normal; font-weight: 700; line-height: 130%; text-transform: uppercase; } .catalog_page-item__main p { color: var(--Grey-2); font-size: 1.4rem; font-style: normal; font-weight: 400; line-height: 140%; letter-spacing: -0.028rem; } .catalog_page-item__main .link-more { margin-top: 3.2rem; } .catalog_page-products { display: flex; flex-direction: column; gap: 3.2rem; } .catalog_page-products > .woocommerce-pagination { display: none; } /* Переключатель вида каталога */ /* Заголовок каталога с кнопками переключения вида */ .catalog_page-header { display: flex; justify-content: space-between; align-items: center; } .catalog_page-header h1 { margin: 0; } .catalog_page-view-toggle { display: flex; gap: 0.8rem; } .catalog_page-view-btn { display: flex; align-items: center; justify-content: center; width: 3.6rem; height: 3.6rem; border: 1px solid #C4C4C4; border-radius: 0.8rem; background: transparent; color: #808080; cursor: pointer; transition: all 0.2s; } .catalog_page-view-btn:hover { border-color: var(--Blue); color: var(--Blue); } .catalog_page-view-btn.active { border-color: var(--Blue); background: var(--Blue); color: #fff; } /* Компактный вид — скрываем характеристики */ .catalog_page-products__grid.view-compact .product_item-chars { display: none; } .catalog_page-products__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; } .catalog_page-products__bottom { display: flex; flex-direction: column; gap: 6.4rem; } .catalog_page-count { margin-left: auto; display: flex; align-items: center; gap: 0.4rem; position: relative; } .catalog_page-count > p { color: var(--Grey-1); font-size: 1.4rem; font-style: normal; font-weight: 600; line-height: 130%; letter-spacing: -0.028rem; } .catalog_page-count__button { display: flex; padding: 0.8rem; align-items: center; gap: 0.8rem; border-radius: 0.4rem; } .catalog_page-count__button p { font-size: 1.4rem; font-style: normal; font-weight: 600; line-height: 130%; letter-spacing: -0.028rem; } .catalog_page-count__button svg { width: 1.2rem; height: auto; transition: .3s all; } .catalog_page-count__content { position: absolute; top: 100%; margin-top: 0.4rem; right: 0; border-radius: 0.4rem; border: 1px solid var(--Blue); background: var(--White); box-shadow: 1px 4px 16px 0px rgba(0, 0, 0, 0.10); width: 100%; max-width: 13.8rem; display: none; flex-direction: column; gap: 0.4rem; padding: 2rem; } .catalog_page-count__content-button { display: flex; border-radius: 0.4rem; background: var(--Light-Blue, #EBF0F2); padding: 1.5rem 2rem; align-items: center; justify-content: space-between; } .catalog_page-count__content-button p { font-size: 1.4rem; font-style: normal; font-weight: 600; line-height: 130%; letter-spacing: -0.028rem; } .catalog_page-count__content-button svg { opacity: 0; transition: .3s all; width: 1.6rem; height: auto; } .catalog_page-count__content-button.active svg { opacity: 1; } .catalog_page-count__content.active { display: flex; } .catalog_page-count__button.active svg { transform: rotate(180deg); } .catalog_page-pagination { display: flex; flex-direction: column; align-items: center; gap: 2.4rem; } .catalog_page-pagination__row { display: flex; gap: 0.4rem; } .catalog_page-pagination__row .nav-links { display: flex; align-items: center; gap: 0.4rem; } .catalog_page-pagination__row .page-numbers { width: 4.8rem; height: 4.8rem; display: flex; justify-content: center; align-items: center; border-radius: 0.4rem; border: 1px solid var(--Light-Grey-2); background: var(--White); color: var(--Blue); text-align: center; font-size: 1.6rem; font-weight: 600; line-height: 120%; letter-spacing: -0.032rem; text-decoration: none; } .catalog_page-pagination__row .page-numbers.current { color: var(--White); background: var(--Blue); border-color: var(--Blue); } .catalog_page-pagination__row .page-numbers svg { width: 1.6rem; height: auto; } .catalog_page-pagination__row .page-numbers:hover { border-color: var(--Blue); } .catalog_page-pagination-item { width: 4.8rem; height: 4.8rem; display: flex; justify-content: center; align-items: center; border-radius: 0.4rem; border: 1px solid var(--Light-Grey-2); background: var(--White); color: var(--Blue); text-align: center; font-size: 1.6rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.032rem; } .catalog_page-pagination-item svg { width: 1.6rem; height: auto; } .catalog_page-pagination-item.active { color: var(--White); background: var(--Blue); border-color: var(--Blue); } .catalog_page-pagination > p { color: var(--Grey-2); text-align: center; font-size: 1.6rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.032rem; } .catalog_page-pagination > p span { color: var(--Grey-1); } @media screen and (max-width: 992px) { .catalog_page { margin-bottom: 9.6rem; } .catalog_page-menu { display: none; } .catalog_page-main { gap: 4rem; } .catalog_page-col { gap: 1rem; } .catalog_page-item { flex-direction: column; } .catalog_page-item__img { max-width: none; height: 16rem; } .catalog_page-item__main { padding: 2.4rem; gap: 1.2rem; max-width: none; } .catalog_page-item__title { font-size: 2rem; } .catalog_page-item__main .link-more { margin-top: 2.8rem; gap: 0.6rem; font-size: 1.6rem; letter-spacing: -0.032rem; } .catalog_page-item__main .link-more svg { width: 2rem; } .catalog_page-products { gap: 2.4rem; } .catalog_page-products__grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; } .catalog_page-products__bottom { gap: 2.4rem; } .catalog_page-count { margin-right: auto; } } /* catalog_page-search */ .catalog_page-search { display: flex; flex-direction: column; gap: 1.6rem; } .catalog_page-search .header-search input { height: 7.2rem; padding: 0.4rem 12.6rem 0.4rem 2.4rem; color: var(--Black); background: var(--White); font-size: 1.6rem; letter-spacing: -0.032rem; line-height: 120%; } .catalog_page-search .header-search input::placeholder { color: var(--Grey-2); } .catalog_page-search .header-search__submit { padding: 2.2rem 2.4rem 2.3rem 2.4rem; gap: 0.8rem; font-size: 1.6rem; letter-spacing: -0.032rem; } .catalog_page-search .header-search__submit svg { width: 1.6rem; } .catalog_page-search-hint { padding: 2.2rem 2.4rem 2.3rem 2.4rem; border-radius: 0.6rem; background: var(--Light-Blue-2); } .catalog_page-search-hint p { color: var(--Dark-Blue); font-size: 1.6rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.032rem; } .catalog_page-search-hint.error { background: var(--Light-red); } .catalog_page-search-hint.error p { color: var(--Red); } .catalog_page-search-count { margin: 0.8rem 0 4.8rem 0; color: var(--Grey-1); font-size: 1.6rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.032rem; } @media screen and (max-width: 992px) { .catalog_page-search { gap: 1rem; } .catalog_page-search .header-search input { padding: 0.4rem 6.8rem 0.4rem 2.4rem; } .catalog_page-search .header-search__submit { padding: 2.4rem; } .catalog_page-search-hint { padding: 2.4rem 1.6rem; } .catalog_page-search-hint p { font-size: 1.4rem; letter-spacing: -0.028rem; } .catalog_page-search-count { margin: 0.6rem 0 3rem 0; font-size: 1.4rem; letter-spacing: -0.028rem; } } /* documentation */ .documentation { margin-bottom: 14.4rem; } .documentation-container { display: flex; flex-direction: column; gap: 4rem; } .documentation-main { display: flex; flex-direction: column; gap: 6.4rem; } .documentation-tabs { display: flex; flex-wrap: wrap; gap: 1.2rem; } .documentation-tab { padding: 2.2rem 2.4rem 2.3rem 2.4rem; border-radius: 0.4rem; background: var(--Light-Blue); color: var(--Black); font-size: 1.6rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.032rem; } .documentation-tab.active { background: var(--Blue); color: var(--White); } .documentation-content { display: none; } .documentation-content.active { display: flex; flex-direction: column; gap: 3.2rem; } .documentation-content > h2 { text-align: left; text-transform: none; } .documentation-col { display: flex; flex-direction: column; gap: 6.4rem; } .documentation-items { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; } .documentation-item { display: flex; padding: 1.6rem 2.4rem; align-items: center; gap: 1.6rem; border-radius: 0.4rem; background: var(--White); } .documentation-item.hidden { display: none; } .documentation-item__title { color: var(--Black); font-size: 1.4rem; font-style: normal; font-weight: 600; line-height: 130%; text-transform: uppercase; width: 100%; } .documentation-item__row { display: flex; align-items: center; gap: 1.2rem; } .documentation-item__info { display: flex; align-items: center; gap: 0.4rem; } .documentation-item__info p { color: var(--Grey); font-size: 1.6rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.032rem; white-space: nowrap; } .documentation-item__download { display: flex; width: 4.8rem; min-width: 4.8rem; height: 4.8rem; justify-content: center; align-items: center; border-radius: 0.4rem; border: 1px solid var(--Blue); } .documentation-item__download svg { width: 1.6rem; height: auto; } .documentation-item:hover { background: var(--Blue); } .documentation-item:hover .documentation-item__title { color: var(--White); } .documentation-item:hover .documentation-item__info p { color: var(--White); } .documentation-item:hover .documentation-item__download { background: var(--White); } .documentation-mob { display: none; } .documentation-item__mob { display: none; } @media screen and (max-width: 992px) { .documentation { margin-bottom: 9.6rem; } .documentation-container { gap: 2.4rem; } .documentation-main { gap: 4rem; } .documentation-tabs { display: none; } .documentation-content.active { gap: 2.4rem; } .documentation-col { gap: 4rem; } .documentation-items { grid-template-columns: repeat(1, 1fr); gap: 1rem; } .documentation-item { padding: 1.6rem; } .documentation-item__title { font-size: 1.2rem; width: auto; display: none; } .documentation-item__info { display: none; gap: 0.2rem; } .documentation-item__info p { font-size: 1.2rem; line-height: 130%; letter-spacing: -0.024rem; } .documentation-mob { display: flex; flex-direction: column; position: relative; } .documentation-item__mob { display: flex; flex-direction: column; align-items: flex-start; gap: 0.8rem; } .documentation-item__mob .documentation-item__title { display: block; } .documentation-item__mob .documentation-item__info { display: flex; } .documentation-mob__button { display: flex; padding: 1.9rem 2rem 2rem 2rem; align-items: center; gap: 0.8rem; justify-content: space-between; border-radius: 0.4rem; background: var(--White); } .documentation-mob__button p { color: var(--Black); font-size: 1.4rem; font-style: normal; font-weight: 600; line-height: 130%; letter-spacing: -0.028rem; } .documentation-mob__button svg { width: 1.6rem; height: auto; transition: .3s all; } .documentation-mob__content { position: absolute; top: 100%; margin-top: 0.8rem; z-index: 4; display: none; flex-direction: column; width: 100%; gap: 0.4rem; border-radius: 0.4rem; border: 1px solid var(--Blue); background: var(--White); box-shadow: 1px 4px 16px 0px rgba(0, 0, 0, 0.10); padding: 2rem; } .documentation-mob__item { padding: 1.5rem 2rem; display: flex; align-items: center; justify-content: space-between; border-radius: 0.4rem; background: var(--Light-Blue); } .documentation-mob__item p { color: var(--Black); font-size: 1.4rem; font-style: normal; font-weight: 600; line-height: 130%; letter-spacing: -0.028rem; } .documentation-mob__item svg { width: 1.6rem; height: auto; opacity: 0; transition: .3s all; } .documentation-mob__item.active svg { opacity: 1; } .documentation-mob__content.active { display: flex; } .documentation-mob__button.active { background: var(--Blue); } .documentation-mob__button.active p { color: var(--White); } .documentation-mob__button.active svg { transform: rotate(180deg); } .documentation-mob__button.active svg path { fill: var(--White); } } /* contacts */ .contacts { margin-bottom: 14.4rem; } .contacts-container { display: flex; flex-direction: column; gap: 6.4rem; } .contacts-main { display: flex; flex-direction: column; gap: 4.2rem; } .contacts-grid { display: flex; flex-direction: column; gap: 1.6rem; } .contacts-row { display: flex; gap: 1.6rem; } .contacts-row2 { display: flex; gap: 1rem; } .contacts-item { width: 100%; border-radius: 0.8rem; background: var(--White); padding: 3.2rem; display: flex; flex-direction: column; align-items: flex-start; gap: 1.6rem; border: 1px solid transparent; } .contacts-item:hover { border-color: var(--Blue); } .contacts-item > p { color: var(--Grey-1); font-size: 1.2rem; font-style: normal; font-weight: 400; line-height: 120%; letter-spacing: -0.024rem; } .contacts-item__row { display: flex; align-items: flex-start; gap: 0.8rem; } .contacts-item__row > img { width: 1.6rem; min-width: 1.6rem; margin-top: 0.4rem; } .contacts-item__col { display: flex; flex-direction: column; align-items: flex-start; gap: 0.8rem; } .contacts-item__col > a { font-size: 1.8rem; font-style: normal; font-weight: 700; line-height: 130%; letter-spacing: -0.036rem; } .contacts-item__col > p { color: var(--Blue-Grey); font-size: 1.2rem; font-style: normal; font-weight: 400; line-height: 120%; letter-spacing: -0.024rem; } .contacts-time { display: flex; flex-direction: column; align-items: flex-start; } .contacts-time p { color: var(--Black); font-size: 1.8rem; font-style: normal; font-weight: 700; line-height: 130%; letter-spacing: -0.036rem; } .contacts-time p br { display: none; } .contacts-time p span { color: var(--Blue); } .contacts-map { width: 100%; height: 54rem; } .contacts-map iframe { width: 100%; height: 100%; border-radius: 0.8rem; } .contacts-row .contacts-item:nth-child(1), .contacts-row .contacts-item:nth-child(2) { max-width: 32.8rem; } .contacts-item__col > a.link-more { color: var(--Blue); font-size: 1.2rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.024rem; margin-top: 0.8rem; } .contacts-item__col > a.link-more svg { width: 1.6rem; } .contacts-address p { font-size: 1.8rem; font-style: normal; font-weight: 700; line-height: 130%; letter-spacing: -0.036rem; } @media screen and (max-width: 992px) { .contacts { margin-bottom: 9.6rem; } .contacts-container { gap: 4rem; } .contacts-main { gap: 1rem; } .contacts-grid { gap: 1rem; } .contacts-row { flex-direction: column; gap: 1rem; } .contacts-row2 { flex-direction: column; } .contacts-item { padding: 2.4rem; } .contacts-item__row > img { margin-top: 0.2rem; } .contacts-item__col > a { font-size: 1.6rem; letter-spacing: -0.032rem; } .contacts-time p { font-size: 1.6rem; letter-spacing: -0.032rem; } .contacts-time p br { display: block; } .contacts-map { height: 34rem; } .contacts-row .contacts-item:nth-child(1), .contacts-row .contacts-item:nth-child(2) { max-width: none; } .contacts-address p { font-size: 1.6rem; letter-spacing: -0.032rem; } } /* aboutus */ .aboutus { margin-bottom: 14.4rem; } .aboutus-container { display: flex; flex-direction: column; gap: 6.4rem; } .aboutus-main { display: flex; gap: 1.6rem; } .aboutus-main > img { width: 100%; max-width: 44.3rem; border-radius: 0.6rem; object-fit: cover; } .aboutus-col { display: flex; flex-direction: column; align-items: flex-start; gap: 3.2rem; width: 100%; max-width: 90.1rem; border-radius: 0.6rem; background: var(--White); padding: 6.4rem 4rem; } .aboutus-col > p { color: var(--Grey-2); font-size: 1.8rem; font-style: normal; font-weight: 400; line-height: 140%; letter-spacing: -0.036rem; } .aboutus-link { display: flex; padding: 2.2rem 2.4rem 2.3rem 2.4rem; justify-content: center; align-items: center; gap: 0.6rem; border-radius: 0.4rem; background: var(--Blue); color: var(--White); font-size: 1.6rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.032rem; } .aboutus-link svg { width: 1.8rem; height: auto; } @media screen and (max-width: 992px) { .aboutus { margin-bottom: 9.6rem; } .aboutus-container { gap: 4rem; } .aboutus-main { flex-direction: column; gap: 1rem; } .aboutus-main > img { height: 34rem; max-width: none; } .aboutus-col { gap: 2rem; padding: 3.2rem 1.6rem 1.6rem 1.6rem; } .aboutus-col > p { font-size: 1.4rem; letter-spacing: -0.028rem; } .aboutus-link { width: 100%; } } /* partners */ .partners { margin-bottom: 14.4rem; } .partners-container { display: flex; flex-direction: column; gap: 6.4rem; } .partners-slider { position: relative; align-items: center; display: flex; } .partners-swiper { width: 100%; } .partners-swiper .swiper-wrapper { padding-left: 4rem; } .partners-swiper .swiper-slide { height: auto; } .partners-slide { height: 100%; display: flex; flex-direction: column; gap: 2rem; border-radius: 0.8rem; background: var(--White); padding: 3.2rem; } .partners-slide__title { color: var(--Grey-1); font-size: 1.2rem; font-style: normal; font-weight: 600; line-height: 130%; letter-spacing: -0.024rem; } .partners-slide__img { display: flex; padding: 2.4rem; justify-content: center; align-items: center; border-radius: 0.6rem; border: 1px solid var(--Light-Grey-3); height: 15.8rem; } .partners-slide__img img { max-width: 100%; max-height: 80%; object-fit: contain; } .partners-prev { position: absolute; left: 4rem; z-index: 9; width: 4rem; height: 4rem; display: flex; justify-content: center; align-items: center; border-radius: 0 0.4rem 0.4rem 0; background: var(--Blue-Black); margin-top: -2rem; } .partners-next { position: absolute; right: 4rem; z-index: 9; width: 4rem; height: 4rem; display: flex; justify-content: center; align-items: center; border-radius: 0.4rem 0 0 0.4rem; background: var(--Blue-Black); margin-top: -2rem; } .partners-prev svg { width: 1.6rem; height: auto; } .partners-next svg { width: 1.6rem; height: auto; } @media screen and (max-width: 992px) { .partners { margin-bottom: 9.6rem; } .partners-container { gap: 4rem; } .partners-slider { flex-direction: column; gap: 2.4rem; } .partners-swiper .swiper-wrapper { padding-left: 1rem; } .partners-slide { gap: 1.6rem; padding: 2.4rem 1.6rem 1.6rem 1.6rem; } .partners-slide__img { height: 22rem; } .partners-slide__img img { max-height: 50%; } .partners-navigation { display: flex; align-items: center; justify-content: center; gap: 1rem; } .partners-prev { position: relative; left: 0; width: 4rem; height: 4rem; border-radius: 0.4rem; margin-top: 0; } .partners-next { position: relative; right: 0; width: 4rem; height: 4rem; border-radius: 0.4rem; margin-top: 0; } } /* history */ .history { margin-bottom: 14.4rem; } .history-container { display: flex; flex-direction: column; gap: 6.4rem; } .history-container > h2 br { display: none; } .history-slider { display: flex; align-items: center; position: relative; } .history-swiper { width: 100%; } .history-swiper .swiper-slide { height: auto; } .history-slide { height: 100%; display: flex; gap: 3.2rem; border-radius: 0.8rem; background: var(--White); padding: 6.4rem 11.5rem; } .history-slide > img { width: 100%; max-width: 44.2rem; object-fit: cover; border-radius: 0.6rem; min-height: 40.1rem; } .history-slide__col { width: 100%; max-width: 65.6rem; display: flex; flex-direction: column; gap: 1.6rem; align-items: flex-start; } .history-slide__col h2 { text-align: left; color: var(--Blue); margin-bottom: 1.6rem; } .history-slide__col h4 { font-size: 1.8rem; font-style: normal; font-weight: 600; line-height: 130%; text-transform: uppercase; } .history-slide__col p { color: var(--Grey-2); font-size: 1.8rem; font-style: normal; font-weight: 400; line-height: 140%; letter-spacing: -0.036rem; } .history-prev { position: absolute; left: 0; z-index: 9; display: flex; width: 4rem; height: 4rem; justify-content: center; align-items: center; border-radius: 0rem 0.4rem 0.4rem 0rem; background: var(--Blue-Black); } .history-next { position: absolute; right: 0; z-index: 9; display: flex; width: 4rem; height: 4rem; justify-content: center; align-items: center; border-radius: 0.4rem 0rem 0rem 0.4rem; background: var(--Blue-Black); } .history-prev svg { width: 1.6rem; height: auto; } .history-next svg { width: 1.6rem; height: auto; } @media screen and (max-width: 992px) { .history { margin-bottom: 9.6rem; } .history-container { gap: 4rem; } .history-slider { flex-direction: column; gap: 2.4rem; } .history-slide { flex-direction: column-reverse; gap: 2.4rem; padding: 3.2rem 1.6rem 1.6rem 1.6rem; } .history-slide > img { max-width: none; height: 30.8rem; min-height: 30.8rem; } .history-slide__col { max-width: none; } .history-slide__col h2 { font-size: 2rem; margin-bottom: 0.4rem; } .history-slide__col h4 { font-size: 1.6rem; } .history-slide__col p { font-size: 1.4rem; letter-spacing: -0.028rem; } .history-prev { position: relative; border-radius: 0.4rem; } .history-next { position: relative; border-radius: 0.4rem; } .history-navigation { display: flex; justify-content: center; align-items: center; gap: 1rem; } .history-container > h2 br { display: block; } } /* projects */ .projects { margin-bottom: 14.4rem; } .projects-container { display: flex; flex-direction: column; gap: 6.4rem; } .projects-main { display: flex; flex-direction: column; gap: 6.4rem; } .projects-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; } .projects-item { display: flex; flex-direction: column; border-radius: 0.6rem; position: relative; overflow: hidden; background: var(--White); } .projects-item.hidden { display: none; } .projects-item > img { width: 100%; height: 24rem; object-fit: cover; } .projects-item__main { display: flex; padding: 2.4rem; flex-direction: column; align-items: flex-start; gap: 1.6rem; } .projects-item__main > p { color: var(--Grey-2); font-size: 1.4rem; font-style: normal; font-weight: 400; line-height: 140%; letter-spacing: -0.028rem; } .projects-item__row { display: flex; flex-wrap: wrap; gap: 0.6rem; } .projects-item__row p { border-radius: 0.4rem; background: var(--Light-Grey); padding: 0.8rem 1.2rem; color: var(--Blue); font-size: 1.2rem; font-style: normal; font-weight: 600; line-height: 130%; letter-spacing: -0.024rem; } .projects-more { display: flex; padding: 2.2rem 2.4rem 2.3rem 2.4rem; justify-content: center; align-items: center; gap: 0.8rem; border-radius: 0.4rem; background: var(--Blue); margin: 0 auto; } .projects-more p { color: var(--White); font-size: 1.6rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.032rem; } .projects-more svg { width: 1.6rem; height: auto; } .projects-slider { display: none; } @media screen and (max-width: 992px) { .projects { margin-bottom: 9.6rem; } .projects-container { gap: 4rem; } .projects-main { display: none; } .projects-slider { display: flex; flex-direction: column; gap: 2.4rem; } .projects-navigation { display: flex; justify-content: center; align-items: center; gap: 1rem; } .projects-swiper { width: 100%; } .projects-swiper .swiper-slide { height: auto; } .projects-prev { display: flex; width: 4rem; height: 4rem; justify-content: center; align-items: center; border-radius: 0.4rem; background: var(--Blue-Black); } .projects-prev svg { width: 1.6rem; height: auto; } .projects-next { display: flex; width: 4rem; height: 4rem; justify-content: center; align-items: center; border-radius: 0.4rem; background: var(--Blue-Black); } .projects-next svg { width: 1.6rem; height: auto; } .projects-item { height: 100%; } .projects-item > img { height: 20rem; } .projects-item__main { padding: 2.4rem 1.6rem; } } /* page */ .page { margin-bottom: 14.4rem; } .page-container { display: flex; flex-direction: column; gap: 6.4rem; } .page-main { display: flex; flex-direction: column; gap: 4rem; } .page-block { display: flex; flex-direction: column; gap: 1.6rem; } .page-main p { color: var(--Grey-2); font-size: 1.8rem; font-style: normal; font-weight: 400; line-height: 140%; letter-spacing: -0.036rem; } .page-main a { color: var(--Blue); } .page-main .page-text-black { color: var(--Black); max-width: 109rem; font-weight: 600; } @media screen and (max-width: 992px) { .page { margin-bottom: 9.6rem; } .page-container { gap: 4rem; } .page-main { gap: 2.4rem; } .page-main p { font-size: 1.4rem; letter-spacing: -0.028rem; } } /* page_404 */ .page_404 { margin-bottom: 14.4rem; } .page_404-main { background-image: url('/wp-content/uploads/2025/05/page_404.png'); background-position: center center; background-size: cover; background-repeat: no-repeat; padding: 10.7rem 0; border-radius: 0.6rem; display: flex; flex-direction: column; align-items: center; gap: 1.2rem; } .page_404-main h2 { color: var(--Blue-Black); text-align: center; font-size: 24rem; font-style: normal; font-weight: 700; line-height: 100%; letter-spacing: -0.48rem; text-transform: uppercase; margin-bottom: 1.2rem; } .page_404-main p { color: var(--Black); text-align: center; font-size: 1.8rem; font-style: normal; font-weight: 400; line-height: 140%; letter-spacing: -0.036rem; } .page_404-link { display: flex; padding: 2.2rem 2.4rem 2.3rem 2.4rem; justify-content: center; align-items: center; gap: 0.6rem; border-radius: 0.4rem; background: var(--Blue); color: var(--White); font-size: 1.6rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.032rem; margin-top: 2rem; } .page_404-link svg { width: 1.9rem; height: auto; } @media screen and (max-width: 992px) { .page_404 { margin-bottom: 9.6rem; } .page_404-main { background-image: url('/wp-content/uploads/2025/05/page_404-mob.png'); padding: 14.1rem 0; } .page_404-main h2 { font-size: 14.4rem; letter-spacing: -0.288rem; } .page_404-main h3 { max-width: 24.7rem; text-align: center; font-size: 1.6rem; } .page_404-main p { font-size: 1.4rem; letter-spacing: -0.028rem; max-width: 15.7rem; } } /* cart */ .cart { margin-bottom: 14.4rem; } .cart-container { display: flex; flex-direction: column; gap: 6.4rem; } .cart-main { display: flex; gap: 1.6rem; } .cart-left { width: 100%; max-width: 90.1rem; display: flex; flex-direction: column; gap: 1.6rem; } .cart-top { display: flex; padding: 1.6rem 2.4rem; justify-content: space-between; align-items: center; border-radius: 0.8rem; background: var(--White); } .cart-checkbox__all { position: relative; display: flex; align-items: center; } .cart-checkbox__all label { cursor: pointer; padding-left: 2.4rem; color: var(--Grey-2); font-size: 1.2rem; font-style: normal; font-weight: 500; line-height: 120%; letter-spacing: -0.024rem; } .cart-checkbox__all input[type=checkbox]:before { content: ""; display: inline-block; width: 1.6rem; height: 1.6rem; border-radius: 0.2rem; border: 0.1rem solid var(--Blue); position: absolute; margin-top: -0.8rem; background-color: var(--White); cursor: pointer; } .cart-checkbox__all input[type=checkbox]:checked:before { background:transparent; background-image: url('/wp-content/uploads/2025/05/chek.svg'); background-repeat: no-repeat; background-position: center; background-size: cover; position: absolute; } .cart-checkbox__all input[type="checkbox"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: none; } .cart-checkbox__all input[type="checkbox"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: none; } .cart-checkbox__all input[type="checkbox"]:checked { background-image: none; } .cart-delete-all { display: flex; align-items: center; gap: 0.2rem; color: var(--Red); font-size: 1.2rem; font-style: normal; font-weight: 600; line-height: 130%; letter-spacing: -0.024rem; } .cart-delete-all svg { width: 2rem; height: auto; } .cart-products { display: flex; flex-direction: column; gap: 1.6rem; } .cart-product { display: flex; padding: 2.4rem; align-items: flex-start; gap: 1.6rem; border-radius: 0.8rem; background: var(--White); position: relative; } .cart-product__checkbox { position: absolute; top: 3.6rem; z-index: 5; left: 3.6rem; display: flex; width: 1.6rem; height: 1.6rem; } .cart-product__checkbox input[type=checkbox]:before { content: ""; display: inline-block; width: 1.6rem; height: 1.6rem; border-radius: 0.2rem; border: 0.1rem solid var(--Blue); position: absolute; background-color: var(--White); cursor: pointer; } .cart-product__checkbox input[type=checkbox]:checked:before { background:transparent; background-image: url('/wp-content/uploads/2025/05/chek.svg'); background-repeat: no-repeat; background-position: center; position: absolute; background-size: cover; } .cart-product__checkbox input[type="checkbox"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: none; } .cart-product__checkbox input[type="checkbox"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: none; } .cart-product__checkbox input[type="checkbox"]:checked { background-image: none; } .cart-product__img { width: 21.3rem; min-width: 21.3rem; height: 21.3rem; } .cart-product__img img { border-radius: 0.6rem; width: 100%; height: 100%; object-fit: cover; } .cart-product__main { display: flex; align-items: flex-start; gap: 1.6rem; width: 100%; } .cart-product__col { width: 100%; max-width: 39.5rem; display: flex; flex-direction: column; align-items: flex-start; } .cart-product__sku { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 2.4rem; } .cart-product__sku p { color: var(--Grey-2); font-size: 1.4rem; font-style: normal; font-weight: 600; line-height: 130%; letter-spacing: -0.028rem; } .cart-product__sku p:last-child { color: var(--Black); font-weight: 600; } .cart-product__title { color: var(--Black); font-size: 1.8rem; font-style: normal; font-weight: 600; line-height: 130%; text-transform: uppercase; margin-bottom: 1.6rem; } .cart-product__params { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1.6rem; } .cart-product__params p { color: var(--Grey-2); font-size: 1.3rem; font-weight: 400; line-height: 130%; margin: 0; } .cart-product__params p strong { color: var(--Black); font-weight: 600; } .cart-product__chars { display: flex; flex-direction: column; gap: 0.8rem; margin-bottom: 2.4rem; } .cart-product__chars-row { display: flex; align-items: center; gap: 0.4rem; } .cart-product__chars-row p { color: var(--Grey-2); font-size: 1.2rem; font-style: normal; font-weight: 600; line-height: 130%; letter-spacing: -0.024rem; } .cart-product__chars-row p:last-child { color: var(--Black); font-weight: 600; } .cart-product__chars-row .cart-product__chars-price { color: var(--Black); font-weight: 600; } .cart-product__chars-row p.cart-product__chars-oldprice { color: var(--Grey-2); text-decoration: line-through; } .cart-product__quantity { display: flex; flex-direction: column; gap: 0.8rem; margin-bottom: 1.6rem; } .cart-product__quantity > p { color: var(--Grey-2); font-size: 1.2rem; font-style: normal; font-weight: 600; line-height: 130%; letter-spacing: -0.024rem; } .cart-product__quantity-row { display: flex; } .cart-product__quantity-row input { padding: 1.5rem 1.5rem 1.4rem 1.5rem; border-top: 1px solid var(--Light-Grey-3); border-bottom: 1px solid var(--Light-Grey-3); background: var(--White); color: var(--Grey-2); font-size: 1.4rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.028rem; text-align: center; width: 11.7rem; height: 4.8rem; } .cart-product__quantity-row input input::-webkit-outer-spin-button, .cart-product__quantity-row input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .cart-product__quantity-row input input[type=number] { -moz-appearance: textfield; } .cart-product__quantity-row button { border-radius: 0.4rem 0rem 0rem 0.4rem; border: 1px solid var(--Light-Grey-3); background: var(--White); padding: 1.5rem; height: 4.8rem; display: flex; justify-content: center; align-items: center; } .cart-product__quantity-row button.cart-product__quantity-plus { border-radius: 0rem 0.4rem 0.4rem 0rem; } .cart-product__quantity-row button svg { width: 1.6rem; height: auto; } .cart-product__delete { display: flex; align-items: center; gap: 0.2rem; color: var(--Grey-1); font-size: 1.2rem; font-style: normal; font-weight: 600; line-height: 130%; letter-spacing: -0.024rem; } .cart-product__delete svg { width: 2rem; height: auto; } .cart-product__info { display: flex; flex-direction: column; align-items: flex-end; width: 100%; max-width: 21.3rem; gap: 2rem; } .cart-product__popular { padding: 0.8rem 1.2rem; border-radius: 0.4rem; background: var(--Green); color: var(--White); text-align: center; font-size: 1.2rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.024rem; } .cart-product__discount { padding: 0.8rem 1.2rem; border-radius: 0.4rem; background: #EF4444; color: var(--White); text-align: center; font-size: 1.2rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.024rem; } .cart-product__info-col { display: flex; flex-direction: column; align-items: flex-end; gap: 0.8rem; } .cart-product__info-label { color: var(--Grey-2); text-align: right; font-size: 1.2rem; font-style: normal; font-weight: 600; line-height: 130%; letter-spacing: -0.024rem; margin-bottom: 0.4rem; } .cart-product__info-block { display: flex; flex-direction: column; align-items: flex-end; gap: 0.8rem; } .cart-product__info-block > p { color: var(--Grey-2); text-align: right; font-size: 1.2rem; font-style: normal; font-weight: 600; line-height: 130%; letter-spacing: -0.024rem; } .cart-product__info-block > p:last-child { color: var(--Black); font-size: 1.4rem; font-weight: 600; letter-spacing: -0.028rem; } .cart-product__price-row { display: flex; align-items: center; gap: 0.8rem; } .cart-product__price { color: var(--Black); font-size: 1.8rem; font-style: normal; font-weight: 700; line-height: 130%; text-transform: uppercase; } .cart-product__sale { display: flex; padding: 0.8rem 1.2rem; align-items: center; gap: 0.2rem; border-radius: 0.4rem; background: var(--Red); } .cart-product__sale p { color: var(--White); text-align: center; font-size: 1.2rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.024rem; } .cart-product__sale svg { width: 1.2rem; height: auto; } .cart-product__oldprice { color: var(--Grey-2);; font-size: 1.2rem; font-style: normal; font-weight: 600; line-height: 130%; letter-spacing: -0.024rem; text-decoration-line: line-through; } .cart-right { width: 100%; max-width: 44.3rem; } .cart-total { position: sticky; top: 5rem; border-radius: 0.8rem; background: var(--White); display: flex; padding: 4rem; flex-direction: column; gap: 2.7rem; } .cart-total > h3 { padding-bottom: 2.4rem; border-bottom: 0.1rem solid #F1F1F1; } .cart-total__col { display: flex; flex-direction: column; gap: 4rem; } .cart-total__info { display: flex; flex-direction: column; gap: 1.6rem; } .cart-total__info-row { display: flex; align-items: center; gap: 1rem; justify-content: space-between; } .cart-total__info-row p { color: var(--Grey-2); font-size: 1.6rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.032rem; } .cart-total__info-row p:last-child { font-size: 1.8rem; color: var(--Black); font-weight: 600; letter-spacing: -0.036rem; } .cart-total__bottom { display: flex; flex-direction: column; align-items: flex-start; gap: 0.8rem; } .cart-total__price-col { display: flex; flex-direction: column; align-items: flex-start; gap: 1.2rem; margin-bottom: 2.4rem; } .cart-total__price-col > p { color: var(--Grey-2); font-size: 1.6rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.032rem; } .cart-total__price-row { display: flex; align-items: baseline; gap: 0.8rem; } .cart-total__price { color: var(--Blue); font-size: 2.8rem; font-style: normal; font-weight: 700; line-height: 130%; } .cart-total__oldprice { color: var(--Grey-2); font-size: 1.6rem; font-style: normal; font-weight: 600; line-height: normal; text-decoration-line: line-through; } .cart-total__price span { font-size: 1.6rem; } .cart-total__oldprice span { font-size: 1.2rem; font-weight: 500; } .cart-submit { width: 100%; display: flex; justify-content: center; align-items: center; gap: 0.6rem; border-radius: 0.4rem; background: var(--Blue); color: var(--White); font-size: 1.6rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.032rem; margin-bottom: 0.8rem; padding: 2.2rem 2.4rem 2.3rem 2.4rem; } .cart-submit svg { width: 1.9rem; height: auto; } .cart-total__bottom > p { color: var(--Grey-1); font-size: 1.4rem; font-style: normal; font-weight: 400; line-height: 140%; letter-spacing: -0.028rem; } .cart-total__bottom > p a { color: var(--Blue); font-weight: 500; } .cart-product__col .cart-product__popular { display: none; } .cart-product__col .cart-product__sale { display: none; } .cart-product__col .cart-product__info-col { display: none; } @media screen and (max-width: 992px) { .cart { margin-bottom: 9.6rem; } .cart-container { gap: 4rem; } .cart-main { flex-direction: column; gap: 4rem; } .cart-left { max-width: none; gap: 1rem; } .cart-top { padding: 1.2rem 1.6rem; } .cart-products { gap: 1rem; } .cart-product { padding: 1.6rem; gap: 1.6rem; border-radius: 0.6rem; } .cart-product__checkbox { top: 2.4rem; left: 2.4rem; } .cart-product__img { width: 6.4rem; min-width: 6.4rem; height: 6.4rem; } .cart-product__img img { border-radius: 0.4rem; } .cart-product__main { flex-direction: column; } .cart-product__col { max-width: none; } .cart-product__col .cart-product__popular { display: block; } .cart-product__col .cart-product__sale { display: flex; } .cart-product__col .cart-product__info-col { display: flex; } .cart-product__sku { gap: 0.2rem; margin-bottom: 1.6rem; } .cart-product__sku p { font-size: 1.2rem; letter-spacing: -0.024rem; } .cart-product__title { font-size: 1.4rem; } .cart-product__quantity { margin-bottom: 2.4rem; } .cart-product__quantity-row input { width: 12.8rem; } .cart-product__info { display: none; } .cart-product__popular { padding: 0.6rem 0.8rem; font-size: 0.8rem; letter-spacing: -0.016rem; margin-bottom: 1.2rem; } .cart-product__info-col { align-items: flex-start; margin-bottom: 2.4rem; } .cart-product__info-block { align-items: flex-start; gap: 0.6rem; } .cart-product__info-block > p { text-align: left; } .cart-product__sale { margin-bottom: 1.2rem; padding: 0.6rem 0.8rem; } .cart-product__sale p { font-size: 0.8rem; letter-spacing: -0.016rem; } .cart-product__sale svg { width: 0.8rem; } .cart-right { max-width: 100%; } .cart-total { position: relative; top: 0; padding: 2.4rem 1.6rem; gap: 1.6rem; } .cart-total > h3 { padding-bottom: 1.6rem; } .cart-total__info { gap: 1.2rem; } .cart-total__info-row p { font-size: 1.4rem; letter-spacing: -0.028rem; } .cart-total__info-row p:last-child { font-size: 1.6rem; letter-spacing: -0.032rem; } .cart-total__price-col > p { font-size: 1.4rem; letter-spacing: -0.028rem; } .cart-submit { padding: 2.2rem 0; } .cart-submit svg { width: 1.8rem; } .cart-total__bottom > p { font-size: 1.2rem; letter-spacing: -0.024rem; } } /* cart_more */ .cart_more { margin-bottom: 14.4rem; } .cart_more-container { display: flex; flex-direction: column; gap: 6.4rem; } .cart_more-name { display: flex; align-items: center; justify-content: space-between; } .cart_more-link { display: flex; align-items: center; gap: 0.6rem; color: var(--Blue); font-size: 1.6rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.032rem; } .cart_more-link svg { width: 2rem; height: auto; } .cart_more-mob { display: none; } @media screen and (max-width: 992px) { .cart_more { margin-bottom: 9.6rem; } .cart_more-name { justify-content: center; } .cart_more-container { gap: 4rem; } .cart_more-link { display: none; } .cart_more-mob { display: flex; flex-direction: column; gap: 4rem; } .cart_more-mob__link { padding: 2.1rem 0; border-radius: 0.4rem; border: 1px solid var(--Blue); color: var(--Blue); font-size: 1.6rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.032rem; text-align: center; } } /* cart-empty */ .cart-empty { padding: 10.4rem 4rem; border-radius: 0.8rem; background: var(--White); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1.6rem; } .cart-empty h3 { text-align: center; } .cart-empty p { color: var(--Grey-2); text-align: center; font-size: 1.4rem; font-style: normal; font-weight: 400; line-height: 140%; letter-spacing: -0.028rem; max-width: 50.8rem; } .cart-empty p a { color: var(--Blue); font-weight: 500; } .cart-empty__link { margin-top: 1.6rem; display: flex; width: 24rem; padding: 2.2rem 2.4rem 2.3rem 2.4rem; justify-content: center; align-items: flex-end; gap: 0.6rem; border-radius: 0.4rem; background: var(--Blue); color: var(--White); font-size: 1.6rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.032rem; } .cart-empty__link svg { width: 1.8rem; height: auto; } @media screen and (max-width: 992px) { .cart-empty { padding: 9.6rem 1.6rem; } .cart-empty h3 { max-width: 20rem; } .cart-empty p { max-width: 29rem; } .cart-empty__link { margin-top: 2.4rem; width: 24.6rem; } } /* login */ .login { margin-bottom: 14.4rem; } .login-container { display: flex; flex-direction: column; gap: 4rem; } .login-name { display: flex; flex-direction: column; align-items: center; gap: 2.4rem; } .login-name h1 { text-align: center; } .login-name p { color: var(--Grey-2); text-align: center; font-size: 1.4rem; font-style: normal; font-weight: 400; line-height: 140%; letter-spacing: -0.028rem; max-width: 40.3rem; } .login-main { display: flex; flex-direction: column; gap: 1.6rem; } .login-form { display: flex; flex-direction: column; gap: 4rem; width: 100%; max-width: 67.2rem; margin: 0 auto; border-radius: 0.8rem; background: var(--White); padding: 4rem; } .login-form__inputs { display: flex; flex-direction: column; gap: 2rem; } .login-form__input { display: flex; align-items: center; position: relative; } .login-form__input input { color: var(--Blue); font-size: 1.4rem; font-style: normal; font-weight: 600; line-height: 130%; letter-spacing: -0.028rem; border-radius: 0.6rem; background: var(--Light-Grey); padding: 1.9rem 0.4rem 1.9rem 2rem; width: 100%; border: 1px solid transparent; } .login-form__input input::placeholder { color: var(--Grey-2); } .login-password__button { position: absolute; right: 2rem; z-index: 5; display: flex; } .login-password__button img { width: 1.6rem; } .login-form__row { display: flex; align-items: center; justify-content: space-between; } .login-form__remember { position: relative; display: flex; align-items: center; } .login-form__remember label { cursor: pointer; padding-left: 2.5rem; color: var(--Grey-2); font-size: 1.4rem; font-style: normal; font-weight: 500; line-height: 140%; letter-spacing: -0.028rem; } .login-form__remember label a { text-decoration: underline; } .login-form__remember input[type=checkbox]:before { content: ""; display: inline-block; width: 1.6rem; height: 1.6rem; border-radius: 0.2rem; border: 0.1rem solid var(--Blue); position: absolute; background-color: var(--White); cursor: pointer; margin-top: -0.8rem; } .login-form__remember input[type=checkbox]:checked:before { background:transparent; background-image: url('/wp-content/uploads/2025/05/chek.svg'); background-repeat: no-repeat; background-position: center; position: absolute; background-size: cover; } .login-form__remember input[type="checkbox"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: none; } .login-form__remember input[type="checkbox"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: none; } .login-form__remember input[type="checkbox"]:checked { background-image: none; } .login-form__link { color: var(--Grey-1); font-size: 1.4rem; font-style: normal; font-weight: 500; line-height: 120%; letter-spacing: -0.028rem; } .login-form__actions { display: flex; flex-direction: column; gap: 2rem; } .login-form__submit { border-radius: 0.4rem; background: var(--Blue); padding: 2.2rem 2.4rem 2.3rem 2.4rem; color: var(--White); font-size: 1.6rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.032rem; text-align: center; } .login-form__actions-row { display: flex; align-items: center; justify-content: center; gap: 0.6rem; } .login-form__actions-row p { color: var(--Grey-2); font-size: 1.2rem; font-style: normal; font-weight: 500; line-height: 140%; letter-spacing: -0.024rem; } .login-form__actions-row a { color: var(--Blue); font-size: 1.2rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.024rem; display: flex; align-items: center; gap: 0.4rem; } .login-form__actions-row a svg { width: 1.7rem; height: auto; } .login-error { padding: 2.2rem 2.4rem 2.3rem 2.4rem; width: 100%; max-width: 67.2rem; border-radius: 0.6rem; background: var(--Light-red); display: none; align-items: center; justify-content: center; margin: 0 auto; } .login-error p { color: var(--Red); font-size: 1.6rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.032rem; text-align: center; } @media screen and (max-width: 992px) { .login { margin-bottom: 9.6rem; } .login-name { gap: 1.6rem; } .login-name p { max-width: 25.5rem; } .login-main { gap: 1rem; } .login-form { max-width: none; border-radius: 0.6rem; padding: 3.2rem 1.6rem; } .login-form__inputs { gap: 1rem; } .login-form__row { margin-top: 1rem; } .login-form__remember { position: relative; display: flex; align-items: center; } .login-form__remember label { padding-left: 2.2rem; font-size: 1.2rem; letter-spacing: -0.024rem; } .login-form__remember input[type=checkbox]:before { margin-top: -1rem; } .login-form__link { font-size: 1.2rem; letter-spacing: -0.024rem; } .login-form__actions-row { flex-direction: column; gap: 0.4rem; } .login-form__actions-row a svg { width: 1.6rem; } .login-error { padding: 2.3rem 1.6rem 2.4rem 1.6rem; max-width: none; } .login-error p { font-size: 1.4rem; letter-spacing: -0.028rem; } } /* password recovery */ .password-recovery .login-name p { max-width: 60.9rem; } .login-form__inputs > p { color: var(--Grey-1); font-size: 1.2rem; font-style: normal; font-weight: 400; line-height: 140%; letter-spacing: -0.036rem; margin-top: -1.2rem; } @media screen and (max-width: 992px) { .password-recovery .login-name p { max-width: 29.8rem; } .password-recovery .login-name h1 { max-width: 23.3rem; } .login-form__inputs > p { margin-top: -0.2rem; } } /* password recovery complete */ .password-recovery-complete .login-main { width: 100%; max-width: 59.2rem; margin: 0 auto; gap: 1.6rem; } .password-recovery-complete__block { padding: 2.2rem 2.4rem 2.3rem 2.4rem; border-radius: 0.6rem; background: var(--Light-green); } .password-recovery-complete__block p { color: var(--Green); text-align: center; font-size: 1.6rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.032rem; } @media screen and (max-width: 992px) { .password-recovery-complete .login-main { max-width: none; gap: 1rem; } .password-recovery-complete__block { padding: 2.2rem 1.6rem; } .registration-complete .login-name p { max-width: none; } } /* registration */ .registration .login-name p { max-width: 68.8rem; } .registration-main { display: flex; flex-direction: column; gap: 1.6rem; } .registration-col { display: flex; flex-direction: column; gap: 2rem; padding: 4rem; width: 100%; max-width: 67.2rem; margin: 0 auto; border-radius: 0.8rem; background: var(--White); } .registration-tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; } .registration-tab { color: var(--Grey-2); font-size: 1.4rem; font-style: normal; font-weight: 600; line-height: 130%; letter-spacing: -0.028rem; padding: 2.3rem 0.4rem 2.4rem 4.4rem; border-radius: 0.6rem; background: var(--Light-Grey); border: 1px solid transparent; position: relative; text-align: left; } .registration-tab::before { content: ''; position: absolute; left: 2rem; top: 2.4rem; width: 1.6rem; height: 1.6rem; background-image: url('/wp-content/uploads/2025/05/radio.svg'); background-position: center center; background-size: cover; background-repeat: no-repeat; transition: .3s all; } .registration-tab.active { border-color: var(--Blue); color: var(--Blue); } .registration-tab.active::before { background-image: url('/wp-content/uploads/2025/05/radio-checked.svg'); } .registration-content { display: none; } .registration-content.active { display: block; } .registration-form { display: flex; flex-direction: column; gap: 4rem; } @media screen and (max-width: 992px) { .registration .login-name p { max-width: 30.5rem; } .registration-main { gap: 1rem; } .registration-col { gap: 1rem; padding: 3.2rem 1.6rem; max-width: none; border-radius: 0.6rem; } .registration-tabs { grid-template-columns: repeat(1, 1fr); gap: 1rem; } .registration .login-error p { max-width: 22.7rem; } } /* popup */ .popup { position: fixed; top: 0; left: 0; z-index: 9999; width: 100%; height: 100%; display: none; } .popup-fon { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--black-blue-10); } .popup-main { margin: auto; width: 100%; max-width: 55.7rem; padding: 4rem; border-radius: 0.8rem; background: var(--White); position: relative; z-index: 2; } .popup-close { position: absolute; top: 4rem; right: 4rem; } .popup-close svg { width: 2.4rem; height: auto; } .popup-registration__col { display: flex; flex-direction: column; gap: 2.4rem; } .popup-registration__name { display: flex; flex-direction: column; gap: 1.7rem; } .popup-registration__name p { color: var(--Grey-2); font-size: 1.4rem; font-style: normal; font-weight: 400; line-height: 140%; letter-spacing: -0.028rem; } .popup-registration__name p br { display: none; } .popup-registration__name p b { font-weight: 600; } .popup-registration__form { display: flex; flex-direction: column; gap: 4rem; } .popup-registration__inputs { display: flex; flex-direction: column; gap: 0.8rem; } .popup-registration__inputs > p { color: var(--Grey-1); font-size: 1.2rem; font-style: normal; font-weight: 400; line-height: 140%; letter-spacing: -0.036rem; } .popup-registration__input { display: flex; position: relative; } .popup-registration__input input { padding: 1.9rem 0.4rem 1.9rem 2rem; border-radius: 0.6rem; background: var(--Light-Grey); width: 100%; color: var(--Blue); font-size: 1.4rem; font-style: normal; font-weight: 600; line-height: 130%; letter-spacing: -0.028rem; border: 1px solid transparent; } .popup-registration__input input::placeholder { color: var(--Grey-2); } .popup-registration__actions { display: flex; flex-direction: column; gap: 2rem; } .popup-registration__submit { padding: 2.2rem 2.4rem 2.3rem 2.4rem; border-radius: 0.4rem; background: var(--Blue); color: var(--White); font-size: 1.6rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.032rem; text-align: center; } .popup-registration__actions p { color: var(--Grey-2); font-size: 1.2rem; font-style: normal; font-weight: 500; line-height: 140%; letter-spacing: -0.024rem; text-align: center; } .popup-registration__code-button { margin: 0 auto; display: flex; align-items: center; gap: 0.4rem; color: var(--Blue); font-size: 1.2rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.024rem; } .popup-registration__code-button svg { width: 1.7rem; height: auto; } .popup-registration2 .popup-registration__input input { color: var(--Blue); } @media screen and (max-width: 992px) { .popup-main { max-width: 34rem; padding: 6.4rem 1.6rem; } .popup-close { top: 1.6rem; right: 1.6rem; } .popup-registration__col { gap: 3.2rem; } .popup-registration__name { align-items: center; gap: 1.6rem; } .popup-registration__name h4 { text-align: center; } .popup-registration__name p { text-align: center; } .popup-registration__name p br { display: block; } .popup-registration__code-button svg { width: 1.6rem; } } /* payment */ .payment { margin-bottom: 14.4rem; } .payment-container { display: flex; flex-direction: column; gap: 6.4rem; } .payment-main { display: flex; flex-direction: column; gap: 4rem; } .payment-block { display: flex; flex-direction: column; gap: 1.6rem; } .payment-block p, .payment-block li { color: var(--Grey-2); font-size: 1.8rem; font-style: normal; font-weight: 400; line-height: 140%; letter-spacing: -0.036rem; } .payment-block ul { display: flex; flex-direction: column; padding-left: 2.5rem; } .payment-requisites { display: flex; flex-direction: column; gap: 2.4rem; margin-top: 2.4rem; } .payment-requisites__col { display: flex; flex-direction: column; gap: 1.6rem; } .payment-requisites__row { display: flex; align-items: center; gap: 0.8rem; } .payment-requisites__row p { color: var(--Grey-2); font-size: 1.6rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.032rem; } .payment-requisites__row p:last-child { color: var(--Black); font-size: 1.8rem; letter-spacing: -0.036rem; } @media screen and (max-width: 992px) { .payment { margin-bottom: 9.6rem; } .payment-container { gap: 4rem; } .payment-main { gap: 2.4rem; } .payment-block h3 { font-size: 1.6rem; } .payment-block p, .payment-block li { font-size: 1.4rem; letter-spacing: -0.028rem; } .payment-requisites { gap: 2.4rem; margin-top: 1.6rem; } .payment-requisites__col { gap: 2rem; } .payment-requisites__row { flex-direction: column; align-items: flex-start; } .payment-requisites__row p { font-size: 1.4rem; letter-spacing: -0.028rem; } .payment-requisites__row p:last-child { font-size: 1.6rem; letter-spacing: -0.032rem; } } /* delivery */ .delivery .payment-block { max-width: 101.3rem; } .delivery-map { width: 100%; max-width: 101.6rem; height: 40rem; } .delivery-map iframe { width: 100%; height: 100%; border-radius: 0.8rem; } .delivery .delivery-block { max-width: 88.9rem; } .delivery-col { margin-top: 2.4rem; display: flex; flex-direction: column; gap: 1.2rem; } .delivery-row { display: flex; align-items: center; gap: 1.2rem; } .delivery-row p { color: var(--Black); font-size: 1.8rem; font-style: normal; font-weight: 700; line-height: 130%; text-transform: uppercase; } .delivery-row span { border-radius: 0.4rem; background: var(--Blue); display: flex; width: 3.2rem; height: 3.2rem; justify-content: center; align-items: center; color: var(--White); font-size: 1.4rem; font-style: normal; font-weight: 600; line-height: 110%; letter-spacing: -0.028rem; } @media screen and (max-width: 992px) { .delivery .payment-block { max-width: none; } .delivery-map { max-width: none; height: 34rem; } .delivery .delivery-block { max-width: none; } .delivery-col { margin-top: 0.8rem; gap: 0.8rem; } .delivery-row p { font-size: 1.6rem; } } /* product_page */ .product_page { margin-bottom: 14.4rem; } .product_page-container { display: flex; flex-direction: column; gap: 9.6rem; } .product_page-main { display: flex; align-items: flex-start; gap: 3.2rem; } .product_page-images { width: 100%; max-width: 65.6rem; display: flex; flex-direction: column; position: relative; gap: 1.2rem; } .product_page-labels { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; top: 2.4rem; left: 2.4rem; position: absolute; z-index: 9; } .product_page-popular { padding: 0.8rem 1.2rem; border-radius: 0.4rem; background: var(--Green); color: var(--White); text-align: center; font-size: 1.2rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.024rem; } /* Метка скидки - красная */ .product_page-discount { padding: 0.8rem 1.2rem; border-radius: 0.4rem; background: #EF4444; color: var(--White); text-align: center; font-size: 1.2rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.024rem; } .product_page-sale { display: flex; padding: 0.8rem 1.2rem; align-items: center; gap: 0.2rem; border-radius: 0.4rem; background: var(--Red); } .product_page-sale p { color: var(--White); font-size: 1.2rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.024rem; } .product_page-sale svg { width: 1.2rem; height: auto; } .product_page-slider { position: relative; display: flex; align-items: center; max-width: 700px; } .product_page-swiper { width: 100%; } .product_page-swiper .swiper-slide { height: auto; } .product_page-slide { width: 100%; height: 300px; } .product_page-slide img { width: 100%; height: 100%; object-fit: contain; border-radius: 0.6rem; } .product_page-prev { display: flex; width: 4rem; height: 4rem; justify-content: center; align-items: center; border-radius: 0.4rem 0rem 0rem 0.4rem; background: var(--Dark-Blue-Grey); position: absolute; left: 0; z-index: 9; } .product_page-next { display: flex; width: 4rem; height: 4rem; justify-content: center; align-items: center; border-radius: 0.4rem 0rem 0rem 0.4rem; background: var(--Dark-Blue-Grey); position: absolute; right: 0; z-index: 9; } .product_page-prev svg, .product_page-next svg { width: 1.6rem; height: auto; } .product_page-pagination { display: none; } .product_page_thumbs { width: 100%; } .product_page_thumbs .swiper-slide { cursor: pointer; height: 9.9rem; } .product_page_thumbs .swiper-slide img { width: 100%; border-radius: 0.4rem; height: 100%; object-fit: cover; } .product_page-col { width: 100%; max-width: 60.8rem; display: flex; flex-direction: column; align-items: flex-start; } .product_page-col > .price { display: none; } .product_page-col > .simple-weight { display: none; } .product_page-col > .stock { display: none; } .product_page-col > .product_title { display: none; } .product_page-col > .product_meta { display: none; } .product_page-col > h2 { text-align: left; margin-bottom: 2rem; } .product_page-aviable { display: flex; padding: 0.8rem 1.2rem; align-items: center; gap: 0.4rem; border-radius: 0.4rem; background: var(--Light-green); margin-bottom: 3.2rem; } .product_page-aviable p { color: var(--Green); font-size: 1.2rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.024rem; } .product_page-aviable::before { content: ''; width: 0.7rem; height: 0.7rem; background: var(--Green); border-radius: 100%; } .product_page-sku { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 4rem; } .product_page-sku p { color: var(--Grey-2); font-size: 1.4rem; font-style: normal; font-weight: 600; line-height: 130%; letter-spacing: -0.028rem; } .product_page-sku p:nth-child(2) { color: var(--Black); } .product_page-form { display: flex; flex-direction: column; align-items: flex-start; width: 100%; } .product_page-calc { display: flex; flex-direction: column; margin-bottom: 3.2rem; width: 100%; } .product_page-calc__row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3.2rem; margin-bottom: 2rem; } .product_page-calc__col { display: flex; flex-direction: column; gap: 1.6rem; } .product_page-calc__select { display: flex; flex-direction: column; gap: 0.8rem; } .reset_variations { display: none; } .variations { width: 100%; } .product_page-calc__select p { color: var(--Grey-2); font-size: 1.4rem; font-style: normal; font-weight: 600; line-height: 130%; letter-spacing: -0.028rem; } .product_page-calc__select select { cursor: pointer; padding: 1.5rem 1.6rem; border-radius: 0.6rem; border: 1px solid var(--Light-Grey-3); background: var(--White); color: var(--Grey-2); font-size: 1.4rem; font-style: normal; font-weight: 600; line-height: 130%; letter-spacing: -0.028rem; width: 100%; background-image: url('/wp-content/uploads/2025/05/select.svg'); background-position: center right 1.6rem; background-repeat: no-repeat; background-size: 1.2rem; } .product_page-calc__select select { -webkit-appearance: none; -moz-appearance: none; } .product_page-calc__select select::-ms-expand { display: none; } .product_page-calc__select option { cursor: pointer; color: var(--Black); } .product_page-calc__select input { padding: 1.5rem 1.6rem; border-radius: 0.6rem; border: 1px solid var(--Light-Grey-3); background: var(--White); color: var(--Grey-2); font-size: 1.4rem; font-style: normal; font-weight: 600; line-height: 130%; letter-spacing: -0.028rem; width: 100%; } .product_page-calc__prices { display: flex; padding-top: 2.5rem; flex-direction: column; align-items: flex-start; gap: 0.8rem; } .product_page-calc__prices-row { display: flex; align-items: center; gap: 0.8rem; } .product_page-calc__prices-row > p { color: var(--Grey-2); font-size: 1.4rem; font-style: normal; font-weight: 600; line-height: 130%; letter-spacing: -0.028rem; } .product_page-calc__prices-row > p:nth-child(2) { color: var(--Black); } .product_page-calc__prices-old { display: flex; align-items: center; gap: 0.4rem; } .product_page-calc__price { color: var(--Black); font-size: 1.6rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.032rem; } .product_page-calc__oldprice { color: var(--Grey-2); font-size: 1.4rem; font-style: normal; font-weight: 600; line-height: 130%; letter-spacing: -0.028rem; text-decoration-line: line-through; } .product_page-calc__description { display: flex; flex-direction: column; align-items: flex-start; gap: 1.2rem; } .product_page-calc__description p { color: var(--Grey-2); font-size: 1.2rem; font-style: normal; font-weight: 600; line-height: 130%; letter-spacing: -0.024rem; } .product_page-calc__one { display: flex; flex-direction: column; gap: 0.8rem; margin-bottom: 0.9rem; } .product_page-calc__one > p { color: var(--Grey-2); font-size: 1.4rem; font-style: normal; font-weight: 600; line-height: 130%; letter-spacing: -0.028rem; } .product_page-calc__one-row { display: flex; align-items: center; gap: 0.4rem; } .product_page-calc__one-price { color: var(--Blue); font-size: 1.6rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.032rem; } .product_page-calc__one-oldprice { color: var(--Black); font-size: 1.4rem; font-style: normal; font-weight: 600; line-height: 130%; letter-spacing: -0.028rem; text-decoration-line: line-through; } .product_page-calc__one2 p:nth-child(2) { color: var(--Black); font-weight: 600; } .woocommerce-variation { margin-bottom: 0.3rem; } .product_page .cart-product__quantity { margin-bottom: 4rem; } .product_page .cart-product__quantity-row input { width: 19.2rem; } .product_page-weight-price { display: flex; flex-direction: column; align-items: flex-start; gap: 2.4rem; margin-bottom: 4rem; } .product_page-weight { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; } .product_page-weight p { color: var(--Grey-2); font-size: 1.4rem; font-style: normal; font-weight: 600; line-height: 130%; letter-spacing: -0.028rem; } .product_page-weight p:nth-child(2) { color: var(--Black); font-size: 2.2rem; line-height: 120%; letter-spacing: -0.044rem; } .product_page-prices { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; } .product_page-prices > p { color: var(--Grey-2); font-size: 1.4rem; font-style: normal; font-weight: 600; line-height: 130%; letter-spacing: -0.028rem; } .product_page-prices__row { display: flex; align-items: baseline; gap: 0.8rem; } .product_page-price { color: var(--Blue); font-size: 2.8rem; font-style: normal; font-weight: 700; line-height: 130%; } .product_page-oldprice { color: var(--Grey-2); font-size: 1.6rem; font-style: normal; font-weight: 600; line-height: normal; text-decoration-line: line-through; } .product_page-price span { font-size: 1.6rem; } .product_page-oldprice span { font-size: 1.2rem; } .product_page-submit { width: 28.8rem; padding: 2.2rem 2.4rem 2.3rem 2.4rem; border-radius: 0.4rem; background: var(--Blue); color: var(--White); font-size: 1.6rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.032rem; } .product_page-info { display: flex; flex-direction: column; gap: 6.4rem; } .product_page-tabs { display: flex; gap: 1.2rem; } .product_page-tab { padding: 2.2rem 2.4rem 2.3rem 2.4rem; border-radius: 0.4rem; background: var(--Light-Blue); color: var(--Black); font-size: 1.6rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.032rem; } .product_page-tab.active { background: var(--Blue); color: var(--White); } .product_page-content { display: none; } .product_page-content.active { display: block; } .product_page-description { display: flex; flex-direction: column; gap: 3.2rem; } .product_page-description h2 { text-align: left; } .product_page-description ul { display: flex; flex-direction: column; padding-left: 2.5rem; } .product_page-description li, .product_page-description p { color: var(--Grey-2); font-size: 1.8rem; font-style: normal; font-weight: 400; line-height: 140%; letter-spacing: -0.036rem; } .product_page-description a { color: var(--Blue); } .product_page-description-col { display: flex; flex-direction: column; gap: 1rem; } .product_page-docs { display: flex; flex-direction: column; gap: 3.2rem; } .product_page-docs > h2 { text-align: left; } .product_page-docs__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; } .product_page-labels .product_page-aviable { display: none; } .product_page-tabs__mob { display: none; } .product_page-form2 .product_page-calc__one { flex-direction: row; align-items: center; gap: 0.6rem; } .product_page-form2 .product_page-calc { margin-bottom: 2rem; } .product_page-form2 .product_page-calc__row { margin-bottom: 0; } @media screen and (max-width: 992px) { .product_page { margin-bottom: 9.6rem; } .product_page-container { gap: 4rem; } .product_page-main { flex-direction: column; gap: 2rem; } .product_page-images { max-width: none; } .product_page-labels { top: 1.2rem; left: 1.2rem; } .product_page-labels .product_page-aviable { display: flex; } .product_page-popular { padding: 0.6rem 0.8rem; font-size: 0.8rem; letter-spacing: -0.016rem; } .product_page-discount { padding: 0.6rem 0.8rem; font-size: 0.8rem; letter-spacing: -0.016rem; } .product_page-sale { padding: 0.6rem 0.8rem; } .product_page-sale p { font-size: 0.8rem; letter-spacing: -0.016rem; } .product_page-sale svg { width: 0.8rem; } .product_page-slide { height: 34rem; } .product_page-prev { display: none; } .product_page-next { display: none; } .product_page-pagination { display: flex; justify-content: center; align-items: center; bottom: 1.2rem !important; position: absolute; z-index: 9; gap: 0.4rem; } .product_page-pagination .swiper-pagination-bullet { width: 1.2rem; margin: 0 !important; opacity: 1; background: var(--Light-Grey-3); height: 0.1rem; } .product_page-pagination .swiper-pagination-bullet-active { background: var(--Blue); } .product_page_thumbs { display: none; } .product_page-col { max-width: none; } .product_page-col > h2 { margin-bottom: 1.6rem; } .product_page-aviable { padding: 0.6rem 0.8rem; gap: 0.4rem; margin-bottom: 0; display: none; } .product_page-aviable p { font-size: 0.8rem; letter-spacing: -0.016rem; } .product_page-aviable::before { width: 0.5rem; height: 0.5rem; } .product_page-sku { margin-bottom: 3.2rem; } .product_page-calc__row { grid-template-columns: repeat(1, 1fr); gap: 2.4rem; margin-bottom: 2.4rem; } .product_page-calc__prices { padding-top: 0; } .product_page-calc__prices-row { justify-content: space-between; width: 100%; } .product_page .cart-product__quantity { margin-bottom: 3.2rem; } .product_page .cart-product__quantity-row input { width: 24.4rem; } .product_page-weight-price { margin-bottom: 3.2rem; } .product_page-submit { width: 100%; } .product_page-info { gap: 2.4rem; } .product_page-tabs { display: none; } .product_page-tabs__mob { display: flex; position: relative; } .product_page-tabs__mob-button { display: flex; justify-content: space-between; padding: 1.9rem 2rem 2rem 2rem; align-items: center; gap: 0.8rem; border-radius: 0.4rem; background: var(--White); width: 100%; } .product_page-tabs__mob-button p { color: var(--Black); font-size: 1.4rem; font-style: normal; font-weight: 600; line-height: 130%; letter-spacing: -0.028rem; } .product_page-tabs__mob-button svg { width: 1.6rem; height: auto; transition: .3s all; } .product_page-tabs__mob-button.active { background: var(--Blue); } .product_page-tabs__mob-button.active p { color: var(--White); } .product_page-tabs__mob-button.active svg { transform: rotate(180deg); } .product_page-tabs__mob-button.active svg path { fill: var(--White); } .product_page-tabs__mob-content { display: none; } .product_page-tabs__mob-content.active { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; z-index: 9; margin-top: 0.8rem; border-radius: 0.4rem; border: 1px solid var(--Blue); background: var(--White); box-shadow: 1px 4px 16px 0px rgba(0, 0, 0, 0.10); width: 100%; padding: 2rem; gap: 0.4rem; } .product_page-tabs__mob-tab { border-radius: 0.4rem; background: var(--Light-Blue); padding: 1.5rem 2rem; display: flex; align-items: center; justify-content: space-between; } .product_page-tabs__mob-tab p { color: var(--Black); font-size: 1.4rem; font-style: normal; font-weight: 600; line-height: 130%; letter-spacing: -0.028rem; } .product_page-tabs__mob-tab svg { opacity: 0; transition: .3s all; } .product_page-tabs__mob-tab.active svg { opacity: 1; } .product_page-description h2 { font-size: 1.6rem; } .product_page-description { gap: 2rem; } .product_page-description li, .product_page-description p { font-size: 1.4rem; letter-spacing: -0.028rem; } .product_page-description-col { gap: 2rem; } .product_page-docs { gap: 2.4rem; } .product_page-docs > h2 { text-align: center; font-size: 1.6rem; } .product_page-docs__grid { grid-template-columns: repeat(1, 1fr); gap: 1rem; } .product_page-form2 .product_page-calc__one { width: 100%; justify-content: space-between; } } /* popup-cart */ .popup-cart__col { display: flex; flex-direction: column; gap: 4rem; } .popup-cart__name { display: flex; flex-direction: column; gap: 2.4rem; } .popup-cart__name p { color: var(--Grey-2); font-size: 1.4rem; font-style: normal; font-weight: 400; line-height: 140%; letter-spacing: -0.028rem; } .popup-cart__buttons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; } .popup-cart__cancel { padding: 2.2rem 2.4rem 2.3rem 2.4rem; border-radius: 0.4rem; border: 1px solid var(--Blue); color: var(--Blue); font-size: 1.6rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.032rem; text-align: center; } .popup-cart__delete { padding: 2.2rem 2.4rem 2.3rem 2.4rem; border-radius: 0.4rem; background: var(--Blue); color: var(--White); font-size: 1.6rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.032rem; text-align: center; } @media screen and (max-width: 992px) { .popup-cart__col { gap: 3.2rem; } .popup-cart__name { gap: 1.6rem; } .popup-cart__name h4 { text-align: center; } .popup-cart__name p { text-align: center; } .popup-cart__buttons { grid-template-columns: repeat(1, 1fr); gap: 1rem; } .popup-cart__name p br { display: none; } } /* checkout */ .checkout { margin-bottom: 14.4rem; } .checkout-container { display: flex; flex-direction: column; gap: 6.4rem; } .checkout-main { display: flex; gap: 1.6rem; } .checkout-left { border-radius: 0.8rem; background: var(--White); display: flex; flex-direction: column; gap: 6.4rem; width: 100%; max-width: 90.1rem; padding: 4rem; } .checkout-col { display: flex; flex-direction: column; gap: 2.4rem; position: relative; } .checkout-col::before { content: ''; position: absolute; top: 4.8rem; left: 2.4rem; width: 0.1rem; background: var(--Light-Grey-2); height: calc(100% + 1.6rem); } .checkout-col:last-child::before { display: none; } .checkout-name { display: flex; align-items: center; gap: 2rem; } .checkout-name span { display: flex; width: 4.8rem; height: 4.8rem; justify-content: center; align-items: center; border-radius: 0.4rem; background: var(--Blue); color: var(--White); font-size: 2.2rem; font-style: normal; font-weight: 600; line-height: 110%; letter-spacing: -0.044rem; } .checkout-block { padding-left: 6.8rem; } .checkout-data { display: flex; flex-direction: column; gap: 1.6rem; } .checkout-data__tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; } .checkout-data__tab { display: flex; padding: 1.9rem 0.4rem 2rem 2rem; align-items: center; gap: 0.8rem; border-radius: 0.6rem; border: 1px solid transparent; background: var(--Light-Grey); color: var(--Grey-2); font-size: 1.4rem; font-style: normal; font-weight: 600; line-height: 130%; letter-spacing: -0.028rem; } .checkout-data__tab::before { content: ''; width: 1.6rem; height: 1.6rem; transition: .3s all; background-image: url('/wp-content/uploads/2025/05/radio.svg'); background-position: center center; background-repeat: no-repeat; background-size: cover; } .checkout-data__tab.active { color: var(--Blue); border-color: var(--Blue); } .checkout-data__tab.active::before { background-image: url('/wp-content/uploads/2025/05/radio-checked.svg'); } .checkout-data__content { display: none; } .checkout-data__content.active { display: flex; flex-direction: column; gap: 1.6rem; } .checkout-data__input { display: flex; } .checkout-data__input input { color: var(--Blue); font-size: 1.4rem; font-style: normal; font-weight: 600; line-height: 130%; letter-spacing: -0.028rem; width: 100%; padding: 1.9rem 0.4rem 1.9rem 2rem; border-radius: 0.6rem; background: var(--Light-Grey); border: 1px solid transparent; } .checkout-data__input input::placeholder { color: var(--Grey-2); } .checkout-delivery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; } .checkout-delivery__item { position: relative; display: flex; width: 100%; } #add_payment_method #payment, .woocommerce-cart #payment, .woocommerce-checkout #payment { background: transparent; border-radius: 0; } #add_payment_method #payment div.form-row, .woocommerce-cart #payment div.form-row, .woocommerce-checkout #payment div.form-row { padding: 0; margin: 0; display: flex; flex-direction: column; } .woocommerce form .form-row label { line-height: 140%; } .woocommerce form .form-row::after, .woocommerce form .form-row::before, .woocommerce-page form .form-row::after, .woocommerce-page form .form-row::before { display: none; } #add_payment_method #payment ul.payment_methods, .woocommerce-cart #payment ul.payment_methods, .woocommerce-checkout #payment ul.payment_methods { text-align: left; padding: 0; border-bottom: none; margin: 0; list-style: none outside; display: none; } .checkout-delivery__item input { position: absolute; visibility: hidden; } .woocommerce ul#shipping_method { margin: 0 !important; } .woocommerce ul#shipping_method li { margin: 0; display: flex; } .checkout-delivery__item label { display: flex !important; padding: 2.4rem 2.4rem 2.4rem 4.8rem; flex-direction: column; align-items: flex-start; gap: 0.8rem; border-radius: 0.8rem; background: var(--Light-Grey); border: 1px solid transparent; cursor: pointer; transition: .3s all; height: 100%; position: relative; width: 100%; } .checkout-delivery__item label p { color: var(--Black); font-size: 1.4rem; font-style: normal; font-weight: 700; line-height: 130%; letter-spacing: -0.028rem; } .checkout-delivery__item label p:nth-child(2) { color: var(--Grey-2); font-size: 1.2rem; font-weight: 500; line-height: 140%; letter-spacing: -0.024rem; } .checkout-delivery__item label::before { content: ''; width: 1.6rem; height: 1.6rem; transition: .3s all; background-image: url('/wp-content/uploads/2025/05/radio.svg'); background-position: center center; background-repeat: no-repeat; background-size: cover; position: absolute; top: 2.5rem; left: 2.4rem; } .checkout-delivery__item input:checked+label { border-color: var(--Blue); } .checkout-delivery__item input:checked+label::before { background-image: url('/wp-content/uploads/2025/05/radio-checked.svg'); } .checkout-comment { display: flex; flex-direction: column; gap: 3.2rem; } .checkout-comment__col { display: flex; flex-direction: column; gap: 2rem; } .checkout-comment__col textarea { color: var(--Blue); font-size: 1.4rem; font-style: normal; font-weight: 600; line-height: 130%; letter-spacing: -0.028rem; width: 100%; height: 9.6rem; min-height: 9.6rem; border-radius: 0.6rem; background: var(--Light-Grey); padding: 1.9rem 0.4rem 1.9rem 2rem; border: 1px solid transparent; } .checkout-comment__col textarea::placeholder { color: var(--Grey-2); } .checkout-comment__col p { color: var(--Grey-2); font-size: 1.1rem; font-style: normal; font-weight: 400; line-height: 150%; letter-spacing: -0.022rem; } .checkout-comment__file { display: flex; flex-direction: column; align-items: flex-start; gap: 2rem; } .checkout-comment__file > p { color: var(--Grey-2); font-size: 1.1rem; font-style: normal; font-weight: 400; line-height: 150%; letter-spacing: -0.022rem; } .checkout-comment__file-input { position: relative; } .checkout-comment__file-input input { position: absolute; visibility: hidden; } .checkout-comment__file-input label { transition: .3s all; cursor: pointer; display: flex; padding: 2.2rem 2.4rem 2.3rem 2.4rem; justify-content: center; align-items: center; gap: 0.8rem; border-radius: 0.4rem; background: var(--Blue); } .checkout-comment__file-input label p { color: var(--White); font-size: 1.6rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.032rem; } .checkout-comment__file-input label svg { width: 1.6rem; height: auto; } .checkout-payments { display: flex; flex-direction: column; gap: 2rem; } .checkout-payments > p { color: var(--Grey-2); font-size: 1.1rem; font-style: normal; font-weight: 400; line-height: 150%; letter-spacing: -0.022rem; } .checkout-payments > p a { color: var(--Blue); text-decoration: underline; } .checkout-payment { position: relative; } .checkout-payment input { position: absolute; visibility: hidden; } .checkout-payment label { border-radius: 0.8rem; border: 1px solid transparent; background: var(--Light-Grey); transition: .3s all; position: relative; display: flex; align-items: center; gap: 0.8rem; color: var(--Black); font-size: 1.4rem; font-style: normal; font-weight: 700; line-height: 130%; letter-spacing: -0.028rem; padding: 2.4rem; cursor: pointer; } .checkout-payment label::before { content: ''; width: 1.6rem; height: 1.6rem; transition: .3s all; background-image: url('/wp-content/uploads/2025/05/radio.svg'); background-position: center center; background-repeat: no-repeat; background-size: cover; } .checkout-payment input:checked+label { color: var(--Blue); border-color: var(--Blue); } .checkout-payment input:checked+label::before { background-image: url('/wp-content/uploads/2025/05/radio-checked.svg'); } .checkout-right { width: 100%; max-width: 44.3rem; } .checkout-sidebar { position: sticky; top: 5rem; padding: 4rem; display: flex; flex-direction: column; border-radius: 0.8rem; background: var(--White); } .checkout-sidebar > h3 { padding-bottom: 2.4rem; margin-bottom: 2.4rem; border-bottom: 0.1rem solid var(--Light-Grey-2); } .checkout-sidebar__col { display: flex; flex-direction: column; gap: 1.6rem; margin-bottom: 4rem; } .checkout-sidebar__row { display: flex; align-items: flex-end; gap: 0.4rem; justify-content: space-between; } .checkout-sidebar__row p { color: var(--Grey-2); font-size: 1.6rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.032rem; } .checkout-sidebar__row p:nth-child(2) { color: var(--Black); font-size: 1.8rem; letter-spacing: -0.036rem; } .checkout-sidebar__price-col { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; margin-top: 1.6rem; margin-bottom: 4rem; } .checkout-sidebar__price-title { color: var(--Grey-2); font-size: 1.4rem; font-style: normal; font-weight: 600; line-height: 130%; letter-spacing: -0.028rem; } .checkout-sidebar__price { color: var(--Blue); font-size: 2.8rem; font-style: normal; font-weight: 700; line-height: 130%; } .checkout-sidebar__price span { font-size: 1.6rem; } .checkout-submit { margin-bottom: 1.6rem !important; padding: 2.2rem 1.4rem 2.3rem 1.4rem !important; border-radius: 0.4rem !important; background: var(--Blue) !important; color: var(--White) !important; font-size: 1.6rem !important; font-style: normal; font-weight: 600 !important; line-height: 120% !important; letter-spacing: -0.032rem; } .checkout-submit:disabled { background: var(--Grey-1); } .checkout .consult-checkbox { margin: 0; align-items: flex-start; } .checkout .consult-checkbox input[type=checkbox]:before { margin-top: 0; } .checkout-data__description { color: var(--Grey-2); font-size: 1.1rem; font-style: normal; font-weight: 400; line-height: 150%; letter-spacing: -0.022rem; margin-top: 0.4rem; } .checkout-payments__description, .checkout-payments__online-description { color: var(--Grey-2); font-size: 1.1rem; font-style: normal; font-weight: 400; line-height: 150%; letter-spacing: -0.022rem; } .checkout-pickup { display: flex; flex-direction: column; gap: 1.6rem; } .checkout-pickup__block { display: flex; padding: 3.2rem; align-items: flex-start; gap: 0.8rem; border-radius: 0.8rem; background: var(--Light-Grey); } .checkout-pickup__block > svg { width: 1.6rem; min-width: 1.6rem; height: auto; } .checkout-pickup__block-col { display: flex; flex-direction: column; align-items: flex-start; gap: 1.2rem; } .checkout-pickup__block-title { text-transform: none; } .checkout-pickup__block-time { color: var(--Black); font-size: 1.4rem; font-style: normal; font-weight: 600; line-height: 130%; letter-spacing: -0.028rem; } .checkout-pickup__block-description { color: var(--Blue-Grey); font-size: 1.1rem; font-style: normal; font-weight: 400; line-height: 150%; letter-spacing: -0.022rem; } .checkout-pickup__block-link { display: flex; align-items: center; gap: 0.4rem; color: var(--Blue); font-size: 1.2rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.024rem; } .checkout-pickup__block-link svg { width: 1.6rem; height: auto; } .checkout-pickup__map { height: 32rem; } .checkout-pickup__map iframe { width: 100%; height: 100%; } @media screen and (max-width: 992px) { .checkout { margin-bottom: 9.6rem; } .checkout-container { gap: 4rem; } .checkout-main { flex-direction: column; gap: 4rem; } .checkout-left { border-radius: 0.6rem; gap: 4.6rem; max-width: none; padding: 3.2rem 1.6rem; } .checkout-col::before { display: none; } .checkout-name { gap: 0.8rem; } .checkout-name span { width: 3.2rem; height: 3.2rem; font-size: 1.6rem; letter-spacing: -0.032rem; } .checkout-name h3 { font-size: 1.6rem; } .checkout-block { padding-left: 0; } .checkout-data { gap: 1rem; } .checkout-data__tabs { grid-template-columns: repeat(1, 1fr); gap: 1rem; } .checkout-data__content.active { gap: 1rem; } .checkout-delivery { grid-template-columns: repeat(1, 1fr); gap: 1rem; } .checkout-delivery__item label { padding: 1.6rem 1.6rem 1.6rem 4rem; border-radius: 0.6rem; } .checkout-delivery__item label::before { top: 1.7rem; left: 1.6rem; } .checkout-comment { gap: 2.4rem; } .checkout-comment__col { gap: 1.6rem; } .checkout-comment__col p { } .checkout-comment__file { gap: 1.6rem; } .checkout-comment__file > p { } .checkout-comment__file-input label { padding: 1.3rem 2rem; gap: 0.6rem; } .checkout-comment__file-input label p { font-size: 1.2rem; letter-spacing: -0.024rem; } .checkout-comment__file-input label svg { width: 1.4rem; } .checkout-payments { gap: 1.6rem; } .checkout-payment label { padding: 1.6rem; } .checkout-right { max-width: none; } .checkout-sidebar { position: relative; top: 0; padding: 2.4rem 1.6rem; } .checkout-sidebar > h3 { padding-bottom: 1.6rem; margin-bottom: 1.6rem; } .checkout-sidebar__col { gap: 1.2rem; } .checkout-sidebar__row p { font-size: 1.4rem; letter-spacing: -0.028rem; } .checkout-sidebar__row p:nth-child(2) { font-size: 1.6rem; letter-spacing: -0.032rem; } .checkout-sidebar__price-col { gap: 1.2rem; margin-bottom: 3.2rem; } .checkout-submit { margin-bottom: 1.6rem; font-size: 1.4rem; letter-spacing: -0.028rem; } .checkout-data__description { margin-top: 0.6rem; } .checkout-pickup { gap: 1rem; } .checkout-pickup__block { padding: 2rem; } .checkout-pickup__block-title { margin-bottom: -0.4rem; } .checkout-pickup__map { height: 24rem; } } /* checkout-error */ .checkout-error { padding: 10.4rem 2rem; border-radius: 0.8rem; background: var(--White); display: flex; flex-direction: column; align-items: center; } .checkout-error__icon { display: flex; width: 6.4rem; height: 6.4rem; flex-direction: column; justify-content: center; align-items: center; border-radius: 100%; background: var(--Red); color: var(--White); text-align: center; font-size: 3.2rem; font-style: normal; font-weight: 600; line-height: 100%; letter-spacing: -0.064rem; margin-bottom: 4rem; } .checkout-error h3 { margin-bottom: 1.6rem; } .checkout-error p { color: var(--Grey-2); text-align: center; font-size: 1.4rem; font-style: normal; font-weight: 400; line-height: 140%; letter-spacing: -0.028rem; margin-bottom: 4rem; max-width: 43.6rem; } .checkout-error p a { color: var(--Blue); text-decoration: underline; } .checkout-error__link { display: flex; width: 24rem; padding: 2.2rem 2.4rem 2.3rem 2.4rem; justify-content: center; align-items: flex-end; gap: 0.6rem; border-radius: 0.4rem; background: var(--Blue); color: var(--White); font-size: 1.6rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.032rem; } .checkout-error__link svg { width: 1.9rem; height: auto; } @media screen and (max-width: 992px) { .checkout-error { padding: 9.6rem 1.6rem; border-radius: 0.6rem; } .checkout-error p { max-width: 28rem; } .checkout-error__link { width: 24.6rem; } .checkout-error__link svg { width: 1.8rem; } } /* lk */ .lk { margin-bottom: 14.4rem; } .lk-container { display: flex; align-items: flex-start; gap: 1.6rem; } .lk-menu { position: sticky; top: 5rem; width: 100%; max-width: 32.8rem; display: flex; flex-direction: column; } .lk-menu__link { display: flex; padding: 2.3rem 2.4rem; align-items: center; gap: 1.2rem; border-bottom: 1px solid var(--Light-Grey-2); background: var(--White); justify-content: space-between; } .lk-menu__link svg { width: 1.2rem; height: auto; } .lk-menu__link.active { background: var(--Blue); color: var(--White); } .lk-menu__link.active svg path { fill: var(--White); } .lk-menu__logout { justify-content: flex-start; } .lk-menu__logout svg { width: 1.6rem; } .lk-menu__link:hover { color: var(--Blue); } .lk-menu__link:hover path { fill: var(--Blue); } .lk-menu__link.active:hover { color: var(--White); } .lk-menu__link.active:hover path { fill: var(--White); } .lk-menu__link:first-child { border-radius: 0.8rem 0.8rem 0rem 0rem; } .lk-menu__link:last-child { border-radius: 0rem 0rem 0.8rem 0.8rem; } .lk-main { width: 100%; max-width: 101.6rem; padding: 4rem; border-radius: 0.8rem; background: var(--White); } .profile { display: flex; flex-direction: column; gap: 4rem; } .profile-main { display: flex; flex-direction: column; gap: 4rem; max-width: 75.9rem; } .profile-col { display: flex; flex-direction: column; gap: 2.4rem; } .profile-inputs { display: flex; flex-direction: column; gap: 2rem; } .profile-input { display: flex; flex-direction: column; gap: 0.8rem; position: relative; } .profile-input input { color: var(--Blue); font-size: 1.4rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.028rem; padding: 2rem; width: 100%; border-radius: 0.6rem; background: var(--Light-Grey); border: 1px solid transparent; } .profile-input input::placeholder { color: var(--Grey-2); } .profile-input__button { display: flex; padding: 0.9rem 1.6rem; align-items: center; gap: 0.6rem; border-radius: 10rem; background: var(--Blue); color: var(--White); font-size: 1.2rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.024rem; position: absolute; right: 2rem; top: 1.3rem; } .profile-input__button svg { width: 1.2rem; height: auto; } .profile-input > p { color: var(--Grey-1); font-size: 1.2rem; font-style: normal; font-weight: 500; line-height: 140%; letter-spacing: -0.024rem; } .profile-password { display: flex; align-items: flex-start; gap: 1.6rem; } .profile-password__col { width: 100%; max-width: 52.6rem; display: flex; flex-direction: column; gap: 2rem; } .profile-password__button { display: flex; position: absolute; right: 2rem; top: 2rem; } .profile-password__button img { width: 1.6rem; } .profile-password__change { color: var(--Grey-1); font-size: 1.4rem; font-style: normal; font-weight: 600; line-height: 130%; letter-spacing: -0.028rem; margin-top: 1.9rem; } .profile-buttons { display: flex; flex-direction: column; align-items: flex-start; gap: 2rem; } .profile-submit { padding: 2.2rem 2.4rem 2.3rem 2.4rem; border-radius: 0.4rem; background: var(--Blue); color: var(--White); font-size: 1.6rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.032rem; } .profile-delete { display: flex; align-items: center; gap: 0.2rem; color: var(--Grey-1); font-size: 1.2rem; font-style: normal; font-weight: 600; line-height: 130%; letter-spacing: -0.024rem; } .profile-delete svg { width: 2rem; height: auto; } .profile-delete:hover { color: var(--Red); } .profile-delete:hover svg path { stroke: var(--Red); } .lk-menu__mobile { display: none; } .lk-logout__mob { display: none; } .profile-hint { display: none; } .profile-hint.active { padding: 2.4rem; display: flex; flex-direction: column; gap: 1.6rem; border-radius: 0.6rem; border: 1px solid var(--Blue); background: var(--White); box-shadow: 1px 4px 16px 0px rgba(0, 0, 0, 0.10); margin-top: 1rem; position: absolute; top: 100%; left: 0; width: 100%; z-index: 9; } .profile-hint > p { color: var(--Grey-2); font-size: 1.2rem; font-style: normal; font-weight: 400; line-height: 140%; letter-spacing: -0.036rem; } .profile-hint__col { display: flex; flex-direction: column; gap: 1.6rem; } .profile-hint__item { display: flex; flex-direction: column; gap: 0.6rem; } .profile-hint__item p:nth-child(1) { color: var(--Black); font-size: 1.6rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.032rem; text-align: left; } .profile-hint__item p:nth-child(2) { color: var(--Grey-2); font-size: 1.4rem; font-style: normal; font-weight: 600; line-height: 120%; text-align: left; } .profile-password__col-new { max-width: none; } .profile-password__new { display: flex; gap: 1.6rem; } .profile-password__new .profile-input { width: 25.5rem; } .profile-password__new-submit { padding: 1.8rem 2.4rem; border-radius: 0.4rem; background: var(--Blue); color: var(--White); font-size: 1.6rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.032rem; } .profile-password__new-hint { display: flex; padding: 1.6rem; align-items: center; gap: 1.2rem; border-radius: 0.6rem; background: var(--Light-Grey); max-width: 45.7rem; } .profile-password__new-hint svg { width: 1.6rem; min-width: 1.6rem; height: auto; } .profile-password__new-hint p { color: var(--Black); font-size: 1.2rem; font-style: normal; font-weight: 500; line-height: 140%; letter-spacing: -0.024rem; } .profile-password__change:hover { color: var(--Blue); } .profile-individual .profile-inputs { max-width: 52.6rem; } @media screen and (max-width: 992px) { .lk { margin-bottom: 9.6rem; } .lk-container { flex-direction: column; gap: 4.8rem; } .lk-menu { display: none; } .lk-main { max-width: none; padding: 3.2rem 1.6rem; } .profile-main { gap: 3.2rem; } .profile-inputs { gap: 1rem; } .profile-input input { font-size: 1.2rem; letter-spacing: -0.024rem; padding: 1.6rem 1.8rem; } .profile-input__button { padding: 1rem 1.8rem; font-size: 1rem; letter-spacing: -0.02rem; right: 0.8rem; top: 0.8rem; } .profile-input__button p { display: none; } .profile-input__button-email p { display: block; } .profile-password { flex-direction: column; gap: 2rem; } .profile-password__col { max-width: none; } .profile-password__button { right: 1.8rem; top: 1.5rem; } .profile-password__change { margin-top: 0; } .profile-submit { width: 100%; } .lk-menu__mobile { display: flex; flex-direction: column; width: 100%; position: relative; } .lk-menu__mobile > p { padding: 2.3rem 2rem; border-radius: 0.8rem 0.8rem 0rem 0rem; border-bottom: 1px solid var(--Light-Grey-2); background: var(--White); color: var(--Black); font-size: 1.4rem; font-style: normal; font-weight: 600; line-height: 130%; letter-spacing: -0.028rem; } .lk-menu__mobile-button { display: flex; justify-content: space-between; padding: 1.9rem 2rem 2rem 2rem; align-items: center; gap: 0.8rem; border-radius: 0rem 0rem 0.4rem 0.4rem; background: var(--White); } .lk-menu__mobile-button p { color: var(--Black); font-size: 1.4rem; font-style: normal; font-weight: 600; line-height: 130%; letter-spacing: -0.028rem; } .lk-menu__mobile-button svg { width: 1.6rem; height: auto; } .lk-menu__mobile-button.active { background: var(--Blue); } .lk-menu__mobile-button.active p { color: var(--White); } .lk-menu__mobile-button.active svg { transform: rotate(180deg); } .lk-menu__mobile-button.active svg path { fill: var(--White); } .lk-menu__mobile-content { display: none; } .lk-menu__mobile-content.active { display: flex; flex-direction: column; gap: 0.4rem; padding: 2rem; border-radius: 0.4rem; border: 1px solid var(--Blue); background: var(--White); box-shadow: 1px 4px 16px 0px rgba(0, 0, 0, 0.10); position: absolute; top: 100%; width: 100%; left: 0; margin-top: 0.8rem; z-index: 9; } .lk-menu__mobile-content__link { padding: 1.5rem 2rem; color: var(--Black); font-size: 1.4rem; font-style: normal; font-weight: 600; line-height: 130%; letter-spacing: -0.028rem; border-radius: 0.4rem; background: var(--Light-Blue); display: flex; align-items: center; justify-content: space-between; } .lk-menu__mobile-content__link svg { opacity: 0; transition: .3s all; } .lk-menu__mobile-content__link.active svg { opacity: 1; } .lk-logout__mob { display: flex; padding: 2.3rem 2.4rem; border-radius: 0.4rem; border-bottom: 1px solid var(--Light-Grey-2); background: var(--White); align-items: center; gap: 0.8rem; color: var(--Grey-1); font-size: 1.4rem; font-style: normal; font-weight: 600; line-height: 130%; letter-spacing: -0.028rem; width: 100%; } .lk-logout__mob svg { width: 1.6rem; height: auto; } .profile-hint.active { padding: 1.6rem; } .profile-hint__item p:nth-child(1) { font-size: 1.4rem; letter-spacing: -0.028rem; } .profile-hint__item p:nth-child(2) { font-size: 1.2rem; } .profile-password__new { flex-direction: column; } .profile-password__new .profile-input { width: 100%; } .profile-password__new-submit { padding: 1.2rem 1.7rem; font-size: 1rem; margin-right: auto; letter-spacing: -0.02rem; } .profile-password__new-hint { padding: 1.6rem; flex-direction: column; align-items: flex-start; gap: 0.8rem; max-width: none; } .profile-password__new-hint p { font-size: 1rem; letter-spacing: -0.03rem; max-width: 25rem; } .profile-individual .profile-inputs { max-width: none; } } /* popup password change */ .popup-password_change__col { display: flex; flex-direction: column; } .popup-password_change__name { display: flex; flex-direction: column; gap: 2.5rem; } .popup-password_change__name p { color: #7B7B7B; font-size: 1.4rem; font-style: normal; font-weight: 400; line-height: 140%; letter-spacing: -0.042rem; } @media screen and (max-width: 992px) { .popup-password_change__name { align-items: center; gap: 1.6rem; } .popup-password_change__name h4 { text-align: center; } .popup-password_change__name p { text-align: center; } } /* popup delete acc */ .popup-delete_acc-col { display: flex; flex-direction: column; gap: 4rem; } .popup-delete_acc-buttons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; } .popup-delete_acc-yes { padding: 2.2rem 2.4rem 2.3rem 2.4rem; border-radius: 0.4rem; border: 1px solid var(--Blue); color: var(--Blue); font-size: 1.6rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.032rem; } .popup-delete_acc-no { padding: 2.2rem 2.4rem 2.3rem 2.4rem; border-radius: 0.4rem; background: var(--Blue); color: var(--White); font-size: 1.6rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.032rem; } @media screen and (max-width: 992px) { .popup-delete_acc .popup-password_change__name h4 { max-width: 20rem; } .popup-delete_acc .popup-password_change__name p { max-width: 23rem; } .popup-delete_acc-col { gap: 3.2rem; } .popup-delete_acc-buttons { grid-template-columns: repeat(1, 1fr); gap: 1rem; } } /* orders */ .lk-orders { display: flex; flex-direction: column; gap: 6.4rem; width: 100%; max-width: 101.6rem; } .orders { display: flex; flex-direction: column; gap: 3.2rem; border-radius: 0.8rem; background: var(--White); padding: 4rem; } .orders-empty { display: flex; flex-direction: column; align-items: center; padding: 4rem; border-radius: 0.6rem; border: 1px solid var(--Light-Grey-2); background: var(--White); } .orders-empty h4 { margin-bottom: 1.6rem; } .orders-empty p { color: var(--Grey-2); text-align: center; font-size: 1.4rem; font-style: normal; font-weight: 400; line-height: 140%; letter-spacing: -0.028rem; margin-bottom: 4rem; } .orders-empty a { display: flex; width: 24rem; padding: 2.2rem 2.4rem 2.3rem 2.4rem; justify-content: center; align-items: center; gap: 0.6rem; border-radius: 0.4rem; background: var(--Blue); color: var(--White); font-size: 1.6rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.032rem; } .orders-empty a svg { width: 1.8rem; height: auto; } @media screen and (max-width: 992px) { .lk-orders { gap: 4rem; max-width: none; } .orders { padding: 3.2rem 1.6rem 1.6rem 1.6rem; } .orders-empty { padding: 9.6rem 4rem; } } /* orders */ .orders-main { margin-top: 0.8rem; display: flex; flex-direction: column; } .orders-name { padding-bottom: 2.4rem; border-bottom: 1px solid var(--Light-Grey-2); display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.6rem; } .orders-name p { color: var(--Grey-2); font-size: 1.4rem; font-style: normal; font-weight: 400; line-height: 140%; letter-spacing: -0.028rem; } .orders-col { display: flex; flex-direction: column; } .orders-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.6rem; border-bottom: 1px solid var(--Light-Grey-2); padding: 2.4rem 0rem; align-items: center; } .orders-row__number-col { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; } .orders-row__number { color: var(--Black); font-size: 1.6rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.032rem; } .orders-row__number-date { color: var(--Grey-2); font-size: 1.4rem; font-style: normal; font-weight: 600; line-height: 130%; letter-spacing: -0.028rem; } .orders-row__price p { color: var(--Black); font-size: 1.6rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.032rem; } .orders-row__status { display: flex; } .orders-row__status p { border-radius: 0.4rem; padding: 0.8rem 1.2rem; text-align: center; font-size: 1.2rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.024rem; } .orders-accept { color: #8D53F8; background: #F5F1FF; } .orders-received { color: var(--Green); background: var(--Light-green); } .orders-cancel { color: var(--Red); background: var(--Light-red); } .orders-processing { color: #FFAC07; background: #FFF7E8; } .orders-pay { color: var(--Green); border: 1px solid var(--Green); } .orders-way { color: #1E67D3; background: #EFF5FF; } .orders-row__mob { display: none; } @media screen and (max-width: 992px) { .orders-main { margin-top: 0; } .orders-name { display: none; } .orders-col { gap: 2.4rem; } .orders-row { display: flex; flex-direction: column; align-items: flex-start; padding: 0 0 2.4rem 0; } .orders-row__number-col { order: 2; } .orders-row__price { display: none; } .orders-row__mob { display: flex; flex-direction: column; order: 3; gap: 0.8rem; width: 100%; } .orders-row__mob-row { display: flex; align-items: center; justify-content: space-between; } .orders-row__mob-row p { color: var(--Grey-2); font-size: 1.2rem; font-style: normal; font-weight: 600; line-height: 130%; letter-spacing: -0.024rem; } .orders-row__mob-row p:nth-child(2) { color: var(--Black); } } /* order */ .order { display: flex; flex-direction: column; gap: 4rem; } .order-back { margin-right: auto; display: flex; align-items: center; gap: 0.8rem; color: var(--Blue); font-size: 1.6rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.032rem; } .order-back svg { width: 1.6rem; height: auto; } .order-name { display: flex; align-items: center; gap: 2rem; } .order-main { display: flex; align-items: flex-start; gap: 4rem; } .order-structure { width: 100%; max-width: 53.1rem; display: flex; flex-direction: column; gap: 2.4rem; } .order-structure > p { color: var(--Black); font-size: 1.8rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.036rem; } .order-products { display: flex; flex-direction: column; } .order-product { border-bottom: 1px solid var(--Light-Grey-2); background: var(--White); padding: 2.4rem 0rem; display: flex; align-items: flex-start; gap: 1.6rem; } .order-product:first-child { border-top: 1px solid var(--Light-Grey-2); } .order-product__img { width: 12rem; min-width: 12rem; height: 12rem; } .order-product__img img { width: 100%; height: 100%; object-fit: cover; border-radius: 0.6rem; } .order-product__main { display: flex; flex-direction: column; align-items: flex-start; } .order-product__sku { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 2.4rem; } .order-product__sku p { color: var(--Grey-2); font-size: 1.4rem; font-style: normal; font-weight: 600; line-height: 130%; letter-spacing: -0.028rem; } .order-product__sku p:nth-child(2) { color: var(--Black); } .order-product__title { color: var(--Black); font-size: 1.4rem; font-style: normal; font-weight: 600; line-height: 130%; text-transform: uppercase; margin-bottom: 1.6rem; } .order-product__chars { display: flex; flex-direction: column; gap: 0.8rem; margin-bottom: 1.6rem; } .order-product__chars-row { display: flex; align-items: flex-end; gap: 0.4rem; } .order-product__chars-row p { color: var(--Grey-2); font-size: 1.2rem; font-style: normal; font-weight: 600; line-height: 130%; letter-spacing: -0.024rem; } .order-product__chars-row p:nth-child(2) { color: var(--Black); } .order-product__price { color: var(--Black); font-size: 1.8rem; font-style: normal; font-weight: 700; line-height: 130%; text-transform: uppercase; } .order-data { width: 100%; max-width: 36.5rem; display: flex; flex-direction: column; gap: 4rem; } .order-data__block { display: flex; flex-direction: column; gap: 2rem; } .order-data__block > p { color: var(--Black); font-size: 1.8rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.036rem; } .order-data__block-col { display: flex; flex-direction: column; gap: 1.6rem; } .order-data__block-col p { color: var(--Grey-2); font-size: 1.6rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.032rem; } .order-data__info { display: flex; flex-direction: column; gap: 2.4rem; } .order-data__info-col { display: flex; flex-direction: column; gap: 1.6rem; } .order-data__info-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 0.4rem; } .order-data__info-row p { color: var(--Grey-2); font-size: 1.6rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.032rem; } .order-data__info-row p:nth-child(2) { color: var(--Black); text-align: right; font-size: 1.8rem; letter-spacing: -0.036rem; } .order-data__prices { display: flex; flex-direction: column; gap: 0.6rem; padding-top: 2.4rem; border-top: 1px solid #F1F1F1; } .order-data__prices > p { color: var(--Grey-2); font-size: 1.6rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.032rem; } .order-data__prices-row { display: flex; align-items: flex-end; } .order-data__price { color: var(--Blue); font-size: 2.8rem; font-style: normal; font-weight: 700; line-height: 130%; } .order-data__price span { font-size: 1.6rem; } @media screen and (max-width: 992px) { .order { gap: 3.2rem; } .order-name { flex-direction: column; align-items: flex-start; gap: 1.2rem; } .order-main { flex-direction: column; gap: 3.2rem; } .order-structure { max-width: none; gap: 1.6rem; } .order-structure > p { font-size: 1.6rem; letter-spacing: -0.032rem; } .order-product { gap: 1.2rem; } .order-product__img { width: 6.4rem; min-width: 6.4rem; height: 6.4rem; } .order-product__img img { border-radius: 0.4rem; } .order-product__sku { gap: 0.2rem; margin-bottom: 1.6rem; } .order-product__sku p { font-size: 1.2rem; letter-spacing: -0.024rem; } .order-product__chars { margin-bottom: 2.4rem; } .order-data { max-width: none; gap: 2.4rem; } .order-data__block { gap: 1.6rem; } .order-data__block > p { font-size: 1.6rem; letter-spacing: -0.032rem; } .order-data__block-col { gap: 1.2rem; } .order-data__block-col p { font-size: 1.4rem; letter-spacing: -0.028rem; } .order-data__info { margin-top: 0.8rem; } .order-data__info-col { gap: 1.2rem; } .order-data__info-row p { font-size: 1.4rem; letter-spacing: -0.028rem; } .order-data__info-row p:nth-child(2) { font-size: 1.6rem; letter-spacing: -0.032rem; } .order-data__prices > p { font-size: 1.4rem; letter-spacing: -0.028rem; } .order-data__prices-row { display: flex; align-items: flex-end; } } /* thanks */ .thanks { margin-bottom: 14.4rem; } .thanks-container { display: flex; flex-direction: column; gap: 6.4rem; } .thanks-main { padding: 4rem; border-radius: 0.8rem; background: var(--White); display: flex; flex-direction: column; gap: 2.4rem; } .thanks .order-structure { max-width: 87.5rem; } .thanks-link { display: flex; padding: 2.2rem 2.4rem 2.3rem 2.4rem; justify-content: center; align-items: flex-end; gap: 0.6rem; border-radius: 0.4rem; background: var(--Blue); color: var(--White); font-size: 1.6rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.032rem; margin-right: auto; } .thanks-link svg { width: 1.8rem; height: auto; } @media screen and (max-width: 992px) { .thanks { margin-bottom: 9.6rem; } .thanks-container { gap: 4rem; } .thanks-main { padding: 3.2rem 1.6rem; gap: 3.2rem; } .thanks .order-structure { max-width: 87.5rem; } .thanks-link { width: 100%; } } /* minicart */ .minicart__fon { display: none; background: rgba(44, 56, 70, 0.10); position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 998; } .minicart { display: none; position: absolute; top: 15rem; right: 13.5rem; width: 100%; max-width: 64.5rem; z-index: 999; border-radius: 0.8rem; background: var(--White); flex-direction: column; gap: 4rem; padding: 4rem; } .minicart-products { display: flex; flex-direction: column; gap: 1.6rem; max-height: 25rem; overflow-y: auto; padding-right: 1rem; } .minicart-product { display: flex; align-items: flex-start; gap: 1.6rem; } .minicart-product__img { width: 7.2rem; min-width: 7.2rem; height: 7.2rem; display: flex; } .minicart-product__img img { width: 100%; height: 100%; object-fit: cover; border-radius: 0.4rem; } .minicart-product__main { display: flex; justify-content: space-between; align-items: flex-start; width: 100%; } .minicart-product__title { color: var(--Black); font-size: 1.4rem; font-style: normal; font-weight: 600; line-height: 130%; text-transform: uppercase; max-width: 33.7rem; } .minicart-product__title span { color: var(--Grey-2); } .minicart-product__row { display: flex; align-items: center; gap: 1.6rem; } .minicart-product__price { color: var(--Black); font-size: 1.8rem; font-style: normal; font-weight: 700; line-height: 130%; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .minicart-product__oldprice { color: var(--Grey-2); font-size: 1.4rem; font-weight: 600; text-decoration: line-through; } .minicart-product__delete { display: flex; } .minicart-product__delete svg { width: 2rem; height: auto; } .minicart-product__delete:hover svg path { fill: var(--Grey-2); } .minicart-bottom { display: flex; justify-content: space-between; align-items: flex-end; padding-top: 1.6rem; border-top: 0.1rem solid var(--Light-Grey-2); } .minicart-prices { display: flex; flex-direction: column; align-items: flex-start; gap: 1.2rem; } .minicart-price__title { color: var(--Grey-2); font-size: 1.6rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.032rem; } .minicart-price { color: var(--Blue); font-size: 2.8rem; font-style: normal; font-weight: 700; line-height: 130%; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .minicart-price__old { color: var(--Grey-2); font-size: 1.6rem; font-weight: 600; text-decoration: line-through; } .minicart-price span span { font-size: 1.6rem; } .minicart-link { display: flex; padding: 2.2rem 2.4rem 2.3rem 2.4rem; justify-content: center; align-items: flex-end; gap: 0.6rem; border-radius: 0.4rem; background: var(--Blue); color: var(--White); font-size: 1.6rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.032rem; } .minicart-link svg { width: 1.8rem; height: auto; } @media screen and (max-width: 992px) { .minicart { top: 10.2rem; right: 1rem; max-width: 34rem; gap: 3.2rem; padding: 2.4rem 1.6rem; } .minicart-product { gap: 1.2rem; } .minicart-product__img { width: 6.4rem; min-width: 6.4rem; height: 6.4rem; } .minicart-product__main { flex-direction: column; gap: 1.6rem; } .minicart-product__title { font-size: 1.2rem; max-width: none; } .minicart-product__row { gap: 1.2rem; } .minicart-product__price { font-size: 1rem; } .minicart-product__delete svg { width: 1.6rem; } .minicart-bottom { flex-direction: column; align-items: flex-start; gap: 1rem; } .minicart-prices { gap: 0.8rem; } .minicart-price__title { font-size: 1.2rem; letter-spacing: -0.024rem; } .minicart-price { font-size: 1.8rem; } .minicart-price span { font-size: 1.8rem; } .minicart-link { width: 100%; } } /* pc_menu */ .change .bar:nth-child(1) { transform: rotate(-45deg) translate(-0.3rem, 0.4rem); } .change .bar:nth-child(2) { opacity: 0; } .change .bar:nth-child(3) { transform: rotate(45deg) translate(-0.4rem, -0.6rem); } .pc_menu__fon { display: none; } .pc_menu__fon.active { display: flex; background: var(--black-blue-10); position: fixed; top: 14.4rem; left: 0; width: 100%; height: calc(100vh - 14.4rem); z-index: 998; } .pc_menu { display: none; } .pc_menu.active { z-index: 999; display: flex; position: fixed; top: 14.4rem; left: 4rem; box-shadow: 8px 8px 10px 0px rgba(0, 0, 0, 0.04); background: #FFF; } .pc_menu .topmenu > li { list-style: none; } .pc_menu .topmenu { display: flex; flex-direction: column; width: 25.9rem; position: relative; } .pc_menu .topmenu > li > a { border-bottom: 1px solid var(--Light-Grey-2); background: var(--White); display: flex; padding: 1.2rem; align-items: center; gap: 1.2rem; justify-content: space-between; height: 6rem; } .pc_menu-link svg { transition: .3s all; width: 1.2rem; height: auto; } .pc_menu-link__row { color: var(--Black); font-size: 1.4rem; font-style: normal; font-weight: 600; line-height: 130%; letter-spacing: -0.028rem; display: flex; align-items: center; gap: 1.2rem; } .pc_menu-link__row img { width: 3.6rem; } .pc_menu .submenu { position: absolute; z-index: 5; width: 25.9rem; left: 100%; visibility: hidden; opacity: 0; transform-origin: 0% 0%; transform: rotateX(-90deg); transition: .3s linear; top: 0; height: 100%; border-bottom: 1px solid var(--Light-Grey); border-left: 1px solid var(--Light-Grey); background: var(--White); box-shadow: 8px 8px 10px 0px rgba(0, 0, 0, 0.04); } .pc_menu .submenu li { list-style: none; } .pc_menu .submenu li a { border-bottom: 1px solid var(--Light-Grey); border-left: 1px solid var(--Light-Grey); background: var(--White); color: var(--Black); font-size: 1.4rem; font-style: normal; font-weight: 600; line-height: 130%; letter-spacing: -0.028rem; display: flex; align-items: center; justify-content: space-between; height: 6rem; padding: 1.2rem; } .pc_menu .submenu li a svg { width: 1.2rem; height: auto; transition: .3s all; transform: rotate(-90deg); } .pc_menu .submenu .submenu { position: absolute; left: 100%; transition: .3s linear; } .pc_menu nav li:hover > .submenu { transform: rotateX(0deg); visibility: visible; opacity: 1; } .pc_menu nav li:hover > a svg path { fill: var(--Blue); } .pc_menu nav .topmenu > li:hover > a svg { transform: rotate(-90deg); } .pc_menu nav .submenu li:hover > a { color: var(--Blue); } body.hidden { overflow: hidden; } .menu_mob { display: none; } .header-catalog__button-mob { display: none; } .pc_menu-home.active { position: absolute; top: 16rem; } .checkout-description { display: none; color: var(--Grey-2); font-size: 1.6rem; font-style: normal; font-weight: 500; line-height: 120%; letter-spacing: -0.032rem; } .checkout-description a { text-decoration: underline; } body.page { margin-bottom: 0 !important; } #callback-form input[type="text"], #callback-form input[type="tel"], #callback-form input[type="email"] { background: var(--Light-Grey); } @media screen and (max-width: 992px) { .header-catalog__button { display: none; } .header-catalog__button-mob { display: flex; align-items: center; gap: 0.8rem; background: var(--Blue); width: 4rem; min-width: 4rem; height: 4rem; padding: 1.3rem 1.2rem; border-radius: 0.4rem; } .menu_mob.active { display: flex; position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: auto; z-index: 997; background: #FFF; padding-bottom: 4rem; flex-direction: column; gap: 1rem; padding-top: 1.6rem; } .menu_mob-logo { margin-left: 1.6rem; display: flex; margin-right: auto; } .menu_mob-logo img { width: 13rem; } .menu_mob-close { position: absolute; top: 1.6rem; right: 1.6rem; display: flex; } .menu_mob-close svg { width: 2rem; height: auto; } .menu_mob-column { display: flex; flex-direction: column; } .menu_mob-column > nav { margin-bottom: 3.2rem; padding: 0 1.6rem; } .menu_mob-column > nav ul { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; } .menu_mob-column > nav ul li { list-style: none; display: flex; } .menu_mob-column > nav ul li a { color: #000; font-size: 1.2rem; font-style: normal; font-weight: 600; line-height: 130%; letter-spacing: -0.024rem; } .menu_mob-menu { display: flex; flex-direction: column; margin-bottom: 2.4rem; } .menu_mob-menu__button { border-bottom: 1px solid var(--Light-Grey-2); background: var(--White); display: flex; padding: 0.8rem 1.6rem; align-items: center; gap: 1.2rem; justify-content: space-between; } .menu_mob-menu__button svg { transition: .3s all; width: 1.2rem; height: auto; } .menu_mob-button-row { display: flex; align-items: center; gap: 1.2rem; } .menu_mob-button-row img { width: 2rem; } .menu_mob-button-row p { color: var(--Black); font-size: 1.2rem; font-style: normal; font-weight: 600; line-height: 130%; letter-spacing: -0.024rem; } .menu_mob-bottom { display: flex; flex-direction: column; gap: 2.4rem; padding: 0 1.6rem; } .menu_mob-contacts { display: flex; flex-direction: column; align-items: flex-start; gap: 1.2rem; } .menu_mob-contacts a { display: flex; align-items: center; gap: 0.6rem; color: #808080; font-size: 1.2rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.024rem; } .menu_mob-contacts a svg { width: 1.2rem; height: auto; } .menu_mob-buttons { display: flex; gap: 1rem; } .menu_mob-button { display: flex; padding: 0.4rem 1.2rem 0.4rem 0.4rem; align-items: center; gap: 0.2rem; border-radius: 0.4rem; background: var(--Light-Grey); color: var(--Blue-Black); text-align: center; font-size: 1.2rem; font-style: normal; font-weight: 600; line-height: 110%; letter-spacing: -0.024rem; } .menu_mob-button__icon { width: 3.2rem; height: 3.2rem; display: flex; justify-content: center; align-items: center; position: relative; } .menu_mob-button__icon svg { width: 1.6rem; height: auto; } .menu_mob-button__icon span { display: flex; padding: 0.2rem 0.4rem; position: absolute; right: 0.2rem; top: 0.2rem; border-radius: 10rem; background: var(--Blue); color: var(--White); text-align: center; leading-trim: both; text-edge: cap; font-size: 0.6rem; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.024rem; } .menu_mob-menu__content-name { display: flex; align-items: center; gap: 1.2rem; padding: 0 1.6rem; } .menu_mob-menu__content-back { display: flex; } .menu_mob-menu__content-back svg { width: 2rem; height: auto; } .menu_mob-menu__content { display: flex; flex-direction: column; gap: 2.9rem; } .pc_menu.active { display: none; } } /* hovers */ .header-catalog__button:hover, .categories-more:hover, .product_item-link:hover, .footer-callback:hover, .consult-submit:hover, .product_page-submit:hover, .aboutus-link:hover, .projects-more:hover, .page_404-link:hover, .cart-submit:hover, .cart-empty__link:hover, .popup-cart__delete:hover, .checkout-comment__file-input label:hover, .checkout-submit:hover, .checkout-error__link:hover, .login-form__submit:hover, .popup-registration__submit:hover, .profile-input__button:hover, .profile-submit:hover, .profile-password__new-submit:hover, .popup-delete_acc-no:hover, .orders-empty a:hover, .thanks-link:hover { background: var(--Dark-Blue); } .header-catalog__button:focus, .categories-more:focus, .product_item-link:focus, .footer-callback:focus, .consult-submit:focus, .product_page-submit:focus, .aboutus-link:focus, .projects-more:focus, .page_404-link:focus, .cart-submit:focus, .cart-empty__link:focus, .popup-cart__delete:focus, .checkout-comment__file-input label:focus, .checkout-submit:focus, .checkout-error__link:focus, .login-form__submit:focus, .popup-registration__submit:focus, .profile-input__button:focus, .profile-submit:focus, .profile-password__new-submit:focus, .popup-delete_acc-no:focus, .orders-empty a:focus, .thanks-link:focus { background: var(--Dark-Blue-Grey); } .product_item-title:hover, .footer-menu ul li a:hover, .footer-menu ul li a.active, .footer-copyright__row a:hover, .footer-contacts__item a:hover, .catalog_page-menu__item-content-item-row a:hover, .catalog_page-menu__item-content-item-content a:hover, .contacts-item__col > a:hover, .login-form__link:hover { color: var(--Blue); } .products-prev:hover, .products-next:hover, .product_page-prev:hover, .product_page-next:hover, .partners-prev:hover, .partners-next:hover, .history-prev:hover, .history-next:hover, .catalog_page-pagination-item:hover, .product_page-tab:hover, .documentation-tab:hover { background: var(--Blue); } .link-more:hover, .cart_more-link:hover, .checkout-pickup__block-link:hover, .login-form__actions-row a:hover, .popup-registration__code-button:hover, .order-back:hover { color: var(--Dark-Blue); } .link-more:hover path, .cart_more-link:hover path, .checkout-pickup__block-link:hover path, .login-form__actions-row a:hover path, .popup-registration__code-button:hover path, .order-back:hover path { fill: var(--Dark-Blue); } .link-more:focus, .cart_more-link:focus, .checkout-pickup__block-link:focus, .login-form__actions-row a:focus, .popup-registration__code-button:focus, .order-back:focus { color: var(--Dark-Blue-Grey); } .link-more:focus path, .cart_more-link:focus path, .checkout-pickup__block-link:focus path, .login-form__actions-row a:focus path, .popup-registration__code-button:focus path, .order-back:focus path { fill: var(--Dark-Blue-Grey); } .breadcumbs ul li a:hover { color: var(--Dark-Blue); } .catalog_page-pagination-item:hover, .product_page-tab:hover, .documentation-tab:hover { color: var(--White); } .cart-product__delete:hover { color: var(--Red); } .cart-product__delete:hover path { stroke: var(--Red); } .popup-cart__cancel:hover, .popup-delete_acc-yes:hover { border-color: var(--Dark-Blue); color: var(--Dark-Blue); } .popup-cart__cancel:focus, .popup-delete_acc-yes:focus { border-color: var(--Dark-Blue-Grey); color: var(--Dark-Blue-Grey); } .catalog_page-pagination-item:hover path { stroke: var(--White); } .header-catalog__button.change { background: var(--Blue-Black); } .consult-form input[type="text"]:hover, .consult-form input[type="tel"]:hover, .consult-form input[type="email"]:hover { border-color: var(--Blue); } .consult-form input[type="text"]:focus, .consult-form input[type="tel"]:focus, .consult-form input[type="email"]:focus { border-color: var(--Blue); } .checkout-data__input input:hover { border-color: var(--Blue); } .checkout-data__input input:focus { border-color: var(--Blue); } .checkout-comment__col textarea:hover { border-color: var(--Blue); } .checkout-comment__col textarea:focus { border-color: var(--Blue); } .login-form__input input:hover { border-color: var(--Blue); } .login-form__input input:focus { border-color: var(--Blue); } .popup-registration__input input:hover { border-color: var(--Blue); } .popup-registration__input input:focus { border-color: var(--Blue); } .profile-input input:hover { border-color: var(--Blue); } .profile-input input:focus { border-color: var(--Blue); } .checkout-submit:disabled:hover { background: var(--Grey-1); } /* Mini-cart strikethrough price */ .mini-cart-old-price { color: var(--Grey-2); font-size: 0.85em; margin-left: 5px; } .woocommerce-mini-cart-item .quantity { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; }