/*
Theme Name: SVS
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: "";
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
@font-face {
font-family: "Inter";
src: url("assets/fonts/Inter-Regular/Inter-Regular.eot");
src: url("assets/fonts/Inter-Regular/Inter-Regular.eot?#iefix") format("embedded-opentype"), url("assets/fonts/Inter-Regular/Inter-Regular.woff2") format("woff2"), url("assets/fonts/Inter-Regular/Inter-Regular.woff") format("woff"), url("assets/fonts/Inter-Regular/Inter-Regular.ttf") format("truetype");
font-style: normal;
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: "Inter";
src: url("assets/fonts/Inter-Medium/Inter-Medium.eot");
src: url("assets/fonts/Inter-Medium/Inter-Medium.eot?#iefix") format("embedded-opentype"), url("assets/fonts/Inter-Medium/Inter-Medium.woff2") format("woff2"), url("assets/fonts/Inter-Medium/Inter-Medium.woff") format("woff"), url("assets/fonts/Inter-Medium/Inter-Medium.ttf") format("truetype");
font-style: normal;
font-weight: 500;
font-display: swap;
}
@font-face {
font-family: "Inter";
src: url("assets/fonts/Inter-SemiBold/Inter-SemiBold.eot");
src: url("assets/fonts/Inter-SemiBold/Inter-SemiBold.eot?#iefix") format("embedded-opentype"), url("assets/fonts/Inter-SemiBold/Inter-SemiBold.woff2") format("woff2"), url("assets/fonts/Inter-SemiBold/Inter-SemiBold.woff") format("woff"), url("assets/fonts/Inter-SemiBold/Inter-SemiBold.ttf") format("truetype");
font-style: normal;
font-weight: 600;
font-display: swap;
}
@font-face {
font-family: "Inter";
src: url("assets/fonts/Inter-Bold/Inter-Bold.eot");
src: url("assets/fonts/Inter-Bold/Inter-Bold.eot?#iefix") format("embedded-opentype"), url("assets/fonts/Inter-Bold/Inter-Bold.woff2") format("woff2"), url("assets/fonts/Inter-Bold/Inter-Bold.woff") format("woff"), url("assets/fonts/Inter-Bold/Inter-Bold.ttf") format("truetype");
font-style: normal;
font-weight: 700;
font-display: swap;
}
@font-face {
font-family: "Adderley";
src: url("assets/fonts/Adderley-Bold/Adderley-Bold.eot");
src: url("assets/fonts/Adderley-Bold/Adderley-Bold.eot?#iefix") format("embedded-opentype"), url("assets/fonts/Adderley-Bold/Adderley-Bold.woff2") format("woff2"), url("assets/fonts/Adderley-Bold/Adderley-Bold.woff") format("woff"), url("assets/fonts/Adderley-Bold/Adderley-Bold.ttf") format("truetype");
font-style: normal;
font-weight: 700;
font-display: swap;
}
:root {
--font: "Inter", sans-serif;
--font2: "Adderley", sans-serif;
--base: #1E1E1E;
--white: #FFFFFF;
--bg: #F7F7F7;
--base60: rgba(30, 30, 30, 0.6);
--base80: rgba(30, 30, 30, 0.8);
--base16: rgba(0, 0, 0, 0.16);
--base08: rgba(0, 0, 0, 0.08);
--base04: rgba(0, 0, 0, 0.04);
--gray1: #696969;
--gray2: #A7A7A7;
--gray3: #D9D9D9;
--base-hover: #3A3A3A;
--red: #CA2C2C;
}
* {
box-sizing: border-box;
text-decoration: none;
word-break: break-word;
}
*:hover,
*:focus {
outline: 0;
}
body {
background: var(--bg);
font: 400 16px/1.3 var(--font);
color: var(--base);
-webkit-text-size-adjust: none;
text-size-adjust: none;
}
body::-webkit-scrollbar {
width: 10px;
height: 0;
background: var(--bg);
}
body::-webkit-scrollbar-thumb {
width: 10px;
background: var(--base);
}
body.hidden {
overflow: hidden;
}
@supports not selector(::-webkit-scrollbar) {
body {
scrollbar-width: thin;
scrollbar-color: var(--base) var(--bg);
}
}
#app {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.wrapper {
width: 100%;
max-width: 1332px;
padding: 0 16px;
margin: 0 auto;
}
.overflowH {
overflow: hidden;
}
a {
color: var(--base);
transition: 0.25s;
}
button {
border: none;
background: none;
margin: 0;
padding: 0;
font: 400 16px/1.15 var(--font);
color: var(--base);
cursor: pointer;
transition: 0.25s;
}
img {
width: auto;
height: auto;
max-width: 100%;
}
svg {
transition: 0.25s;
}
strong {
font-weight: 600;
}
br.mobileBr {
display: none;
}
h1,
.h1 {
font: 700 50px/1.04 var(--font2);
letter-spacing: 0.02em;
}
h2,
.h2 {
font: 700 40px/1.04 var(--font2);
letter-spacing: 0.02em;
}
h3,
.h3 {
font: 700 34px/1.04 var(--font2);
letter-spacing: 0.02em;
}
h4,
.h4 {
font: 700 30px/1.04 var(--font2);
letter-spacing: 0.02em;
}
h5,
.h5 {
font: 700 24px/1.04 var(--font2);
letter-spacing: 0.02em;
}
h6,
.h6 {
font: 700 20px/1.04 var(--font2);
letter-spacing: 0.02em;
}
.text18 {
font: 400 18px/1.3 var(--font);
}
.text18M {
font: 500 18px/1.15 var(--font);
}
.text18M-2 {
font: 500 18px/1.15 var(--font);
}
.text16 {
font: 400 16px/1.3 var(--font);
}
.text16M {
font: 500 16px/1.15 var(--font);
}
.text16-2 {
font: 400 16px/1.3 var(--font);
}
.text14 {
font: 400 14px/1.3 var(--font);
}
.text14M {
font: 500 14px/1.15 var(--font);
}
.text14All {
font: 400 14px/1.3 var(--font);
}
.text14MAll {
font: 500 14px/1.15 var(--font);
}
.textGray1 {
color: var(--gray1);
}
.textGray2 {
color: var(--gray2);
}
.textGray3 {
color: var(--gray3);
}
.textRed {
color: var(--red);
}
.btn {
max-width: 100%;
min-height: 48px;
background: var(--base);
border: none;
padding: 8px 16px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
text-align: center;
font: 500 16px/1.15 var(--font);
color: var(--white);
cursor: pointer;
transition: 0.25s;
}
.btn__ic {
flex-shrink: 0;
width: 24px;
height: 24px;
display: flex;
align-items: center;
}
.btn__ic img {
width: 100%;
}
.btn__ic svg {
width: 100%;
height: 100%;
fill: var(--white);
}
.btn__ic.stroke svg {
fill: none;
stroke: var(--white);
}
.btn__txt {
max-width: 100%;
}
.btn_f {
width: 100%;
}
.btn_s {
min-height: 40px;
gap: 6px;
font-size: 14px;
}
.btn_s .btn__ic {
width: 20px;
height: 20px;
}
.btn_l {
min-height: 60px;
padding: 12px 32px;
gap: 12px;
font-size: 18px;
}
.btn_white {
background: var(--white);
border: 1px solid var(--white);
color: var(--base);
}
.btn_white .btn__ic svg {
fill: var(--base);
}
.btn_white .btn__ic.stroke svg {
fill: none;
stroke: var(--base);
}
.btn_stroke {
background: var(--base04);
border: 1px solid var(--base);
color: var(--base);
}
.btn_stroke .btn__ic svg {
fill: var(--base);
}
.btn_stroke .btn__ic.stroke svg {
fill: none;
stroke: var(--base);
}
.btn[disabled] {
pointer-events: none;
opacity: 0.2;
}
.swiper {
overflow: hidden;
}
.swiper-wrapper {
display: flex;
flex-wrap: nowrap;
}
.swiper-slide {
flex-shrink: 0;
}
.swiper-button-disabled {
pointer-events: none;
cursor: default;
opacity: 0.5;
}
.swiper-pagination-bullet {
width: 5px;
height: 5px;
background: var(--gray3);
border-radius: 50%;
transition: 0.25s;
}
.swiper-pagination-bullet-active {
width: 20px;
background: var(--base);
border-radius: 500px;
}
.input__capt {
margin-bottom: 4px;
}
.input__wr {
position: relative;
}
.input__subt {
color: var(--gray2);
margin-top: 4px;
}
.input_error .input__field {
border-bottom-color: var(--red);
}
.inputErr {
display: flex;
align-items: flex-start;
gap: 4px;
color: var(--red);
margin-top: 4px;
}
.inputErr__ic {
flex-shrink: 0;
width: 16px;
height: 16px;
display: flex;
align-items: center;
}
.inputErr__ic img {
width: 100%;
}
.inputErr__ic svg {
width: 100%;
height: 100%;
fill: var(--red);
}
input {
width: 100%;
height: 48px;
background: var(--base04);
border: none;
border-bottom: 1px solid var(--gray2);
padding: 0 14px;
font: 400 16px/1.3 var(--font);
color: var(--base);
transition: border-bottom-color 0.15s;
}
input::placeholder {
font: 400 16px/1.3 var(--font);
color: var(--gray2);
}
input:focus {
border-bottom: 2px solid var(--base);
}
input[type=number] {
-moz-appearance: textfield;
}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
textarea {
width: 100%;
min-height: 96px;
background: var(--base04);
border: none;
border-bottom: 1px solid var(--gray2);
padding: 10px 14px;
font: 400 16px/1.3 var(--font);
color: var(--base);
resize: vertical;
transition: border-bottom-color 0.15s;
}
textarea::placeholder {
font: 400 16px/1.3 var(--font);
color: var(--gray2);
}
textarea:focus {
border-bottom: 2px solid var(--base);
}
.select {
position: relative;
}
.select__field {
width: 100%;
height: 48px;
background: var(--base04);
border-bottom: 1px solid var(--gray2);
padding-left: 14px;
padding-right: 46px;
display: flex;
align-items: center;
font: 400 16px/1.3 var(--font);
color: var(--base);
position: relative;
cursor: pointer;
transition: 0.15s;
}
.select__field::after {
content: "";
position: absolute;
top: 50%;
right: 12px;
transform: translate(0, -50%);
width: 20px;
height: 20px;
background: url("assets/img/icons/arrow-down-20.svg") no-repeat;
background-size: cover;
background-position: center;
}
.select__field span {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.select__popup {
display: none;
position: absolute;
z-index: 10;
top: calc(100% + 4px);
left: 0;
width: 100%;
background: var(--white);
border: 1px solid var(--gray1);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}
.select__search {
padding: 8px 14px;
}
.select__search input {
height: 32px;
}
.select__list {
max-height: 400px;
overflow: auto;
}
.select__list::-webkit-scrollbar {
width: 4px;
height: 0;
background: var(--white);
}
.select__list::-webkit-scrollbar-thumb {
width: 4px;
background: var(--base);
}
.select__empty {
min-height: 40px;
padding: 8px 14px;
}
.select_placeholder .select__field {
color: var(--gray1);
}
.select_disabled .select__field {
background: var(--base08);
pointer-events: none;
opacity: 0.5;
}
.select.active .select__field::after {
transform: scale(1, -1) translate(0, 50%);
}
.select.active .select__popup {
display: block;
}
.selectIt {
width: 100%;
padding: 4px 14px;
display: block;
font: 400 16px/1.3 var(--font);
color: var(--base);
cursor: pointer;
}
.selectIt__input {
display: none;
}
.selectIt.hidden {
display: none;
}
.selectIt:has(.selectIt__input:checked) {
background: var(--base);
color: var(--white);
}
.citySelect {
position: relative;
}
.citySelect__popup {
display: none;
position: absolute;
z-index: 10;
top: calc(100% + 4px);
left: 0;
width: 100%;
background: var(--white);
border: 1px solid var(--gray1);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}
.citySelect__list {
color: var(--base);
max-height: 300px;
overflow: auto;
}
.citySelect__list::-webkit-scrollbar {
width: 4px;
height: 0;
background: var(--white);
}
.citySelect__list::-webkit-scrollbar-thumb {
width: 4px;
background: var(--base);
}
.citySelect__opt {
width: 100%;
padding: 4px 14px;
display: block;
text-align: left;
font: 400 16px/1.3 var(--font);
color: var(--base);
cursor: pointer;
}
.citySelect__empty {
padding: 8px 14px;
color: var(--gray1);
}
.citySelect.active .citySelect__popup {
display: block;
}
@supports not selector(::-webkit-scrollbar) {
.select__list,
.citySelect__list {
scrollbar-width: thin;
scrollbar-color: var(--base) var(--white);
}
}
.agreement {
display: block;
padding-left: 28px;
font: 400 12px/1.3 var(--font);
color: var(--base);
position: relative;
cursor: pointer;
}
.agreement::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 18px;
height: 18px;
background: var(--white);
border: 1px solid var(--gray2);
transition: 0.15s;
}
.agreement::after {
display: none;
content: "";
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
background: url("assets/img/icons/checked.svg") no-repeat;
background-size: cover;
background-position: center;
}
.agreement__input {
display: none;
}
.agreement a {
text-decoration: underline;
}
.agreement:has(.agreement__input:checked)::before {
background: var(--base);
}
.agreement:has(.agreement__input:checked)::after {
display: block;
}
.agreement.error {
color: var(--red);
}
.agreement.error::before {
border-color: var(--red);
}
.agreement.error a {
color: var(--red);
}
.textBlock h1,
.textBlock h2 {
margin-top: 48px;
margin-bottom: 24px;
}
.textBlock h1:last-child,
.textBlock h2:last-child {
margin-bottom: 0;
}
.textBlock h1:first-child,
.textBlock h2:first-child {
margin-top: 0;
}
.textBlock h3,
.textBlock h4 {
margin-top: 32px;
margin-bottom: 16px;
}
.textBlock h3:last-child,
.textBlock h4:last-child {
margin-bottom: 0;
}
.textBlock h3:first-child,
.textBlock h4:first-child {
margin-top: 0;
}
.textBlock h5,
.textBlock h6 {
margin-top: 24px;
margin-bottom: 12px;
}
.textBlock h5:last-child,
.textBlock h6:last-child {
margin-bottom: 0;
}
.textBlock h5:first-child,
.textBlock h6:first-child {
margin-top: 0;
}
.textBlock p {
margin-bottom: 12px;
}
.textBlock p:last-child {
margin-bottom: 0;
}
.textBlock a {
text-decoration: underline;
}
.textBlock ul {
margin-bottom: 16px;
}
.textBlock ul:last-child {
margin-bottom: 0;
}
.textBlock ul li {
display: block;
position: relative;
padding-left: 24px;
margin-bottom: 4px;
}
.textBlock ul li:last-child {
margin-bottom: 0;
}
.textBlock ul li::before {
content: "";
position: absolute;
top: 9px;
left: 10px;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--base);
}
.textBlock ol {
list-style-type: decimal;
margin-left: 24px;
margin-bottom: 16px;
}
.textBlock ol:last-child {
margin-bottom: 0;
}
.textBlock ol li {
margin-bottom: 4px;
}
.textBlock ol li:last-child {
margin-bottom: 0;
}
.textBlock blockquote {
background: var(--white);
border: 1px solid var(--base16);
padding: 20px;
margin: 20px 0;
}
.textBlock blockquote:last-child {
margin-bottom: 0;
}
.textBlock .wp-block-image {
margin-top: 20px;
margin-bottom: 32px;
}
.textBlock .wp-block-image:last-child {
margin-bottom: 0;
}
.textBlock .wp-block-image:first-child {
margin-top: 0;
}
.textBlock .wp-block-gallery {
margin-top: 20px;
margin-bottom: 32px;
}
.textBlock .wp-block-gallery:last-child {
margin-bottom: 0;
}
.textBlock .wp-block-gallery:first-child {
margin-top: 0;
}
.textBlock .wp-block-table {
margin: 24px 0;
}
.textBlock .wp-block-table:last-child {
margin-bottom: 0;
}
.textBlock .wp-block-table:first-child {
margin-top: 0;
}
.textBlock .wp-block-buttons {
margin: 24px 0;
}
.textBlock .wp-block-buttons:last-child {
margin-bottom: 0;
}
.textBlock .wp-block-buttons:first-child {
margin-top: 0;
}
.textBlock .wp-block-buttons .wp-block-button {
width: 100%;
}
.textBlock .wp-block-buttons .wp-block-button__link {
width: 100%;
min-height: 48px;
background: var(--base);
border: none;
padding: 8px 16px;
display: inline-flex;
align-items: center;
justify-content: center;
font: 500 16px/1.15 var(--font);
color: var(--white);
cursor: pointer;
transition: 0.25s;
}
.tabs {
border-bottom: 1px solid var(--base16);
display: flex;
gap: 32px;
}
.tabs__it {
padding-bottom: 15px;
display: block;
color: var(--gray1);
position: relative;
}
.tabs__it::after {
content: "";
position: absolute;
bottom: -1px;
left: 50%;
transform: translate(-50%, 0);
width: 0;
height: 4px;
background: var(--base);
opacity: 0;
transition: 0.25s;
}
.tabs__it.active {
color: var(--base);
}
.tabs__it.active::after {
width: 100%;
opacity: 1;
}
.header {
position: sticky;
z-index: 1000;
top: 0;
left: 0;
width: 100%;
background: var(--white);
}
.header__addr span {
color: var(--gray1);
}
.header__cnts {
display: flex;
align-items: center;
gap: 24px;
}
.header__wr {
padding: 10px 0;
display: flex;
align-items: center;
gap: 24px;
}
.header__logo {
flex-shrink: 0;
display: flex;
align-items: center;
}
.header__logo img {
width: 95px;
}
.header__logo span {
padding-left: 20px;
font-size: 11px;
color: var(--gray1);
position: relative;
}
.header__logo span::before {
content: "";
position: absolute;
top: 50%;
left: 10px;
transform: translate(0, -50%);
width: 1px;
height: 100%;
background: var(--gray3);
}
.header__btns {
flex-shrink: 0;
display: flex;
gap: 8px;
}
.header__calc {
min-height: 44px;
}
.headerTop {
background: var(--base04);
}
.headerTop__wr {
padding: 6px 0;
display: flex;
align-items: center;
justify-content: space-between;
}
.headerTop__btn {
min-height: 26px;
padding: 4px 12px;
font-size: 13px;
}
.headerCnt {
display: flex;
align-items: center;
gap: 6px;
}
.headerCnt__ic {
width: 18px;
height: 18px;
display: flex;
align-items: center;
}
.headerCnt__ic svg {
width: 100%;
height: 100%;
fill: var(--base);
}
.headerCnt__txt {
max-width: 100%;
position: relative;
}
.headerCnt__txt::after {
content: "";
position: absolute;
bottom: -3px;
left: 50%;
transform: translate(-50%, 0);
width: 0;
height: 1px;
background: var(--base-hover);
opacity: 0;
transition: 0.25s;
}
.headerCnt.tg .headerCnt__ic {
width: 20px;
height: 20px;
}
.headerCtg {
flex-shrink: 0;
position: relative;
}
.headerCtg__btn {
min-width: 140px;
min-height: 44px;
}
.headerCtg__list {
display: none;
position: absolute;
top: calc(100% + 4px);
left: 0;
width: auto;
white-space: nowrap;
background: var(--white);
box-shadow: 0 16px 32px rgba(0, 0, 0, 0.16);
}
.headerCtg__list::before {
content: "";
position: absolute;
bottom: 100%;
left: 0;
width: 100%;
height: 5px;
}
.headerCtgIt {
width: 100%;
min-height: 44px;
padding: 8px 12px;
padding-left: 16px;
display: flex;
align-items: center;
font: 500 16px/1.15 var(--font);
color: var(--base);
}
.headerCtgIt__txt {
width: 100%;
}
.headerCtgIt__ic {
flex-shrink: 0;
width: 20px;
height: 20px;
fill: none;
stroke: var(--gray2);
margin-left: 12px;
}
.headerM {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
}
.headerM__it span {
position: relative;
}
.headerM__it span::after {
content: "";
position: absolute;
bottom: -2px;
left: 50%;
transform: translate(-50%, 0);
width: 0;
height: 1px;
background: var(--base-hover);
opacity: 0;
transition: 0.25s;
}
.headerCart {
width: 74px;
min-height: 44px;
background: var(--base04);
border: 1px solid var(--base);
padding: 4px 8px;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.headerCart__ic {
width: 28px;
height: 28px;
fill: var(--base);
}
.headerCart__num {
display: none;
width: 18px;
height: 18px;
background: var(--base);
border-radius: 50%;
text-align: center;
font: 400 12px/1.3 var(--font);
color: var(--white);
overflow: hidden;
}
.headerCart__num.active {
display: flex;
align-items: center;
justify-content: center;
}
.burger {
display: none;
width: 40px;
height: 40px;
background: var(--base);
}
.burger svg {
width: 20px;
height: 20px;
fill: none;
stroke: var(--white);
}
.burger__close {
display: none;
}
.burger.active .burger__ic {
display: none;
}
.burger.active .burger__close {
display: block;
}
.footer {
margin: auto;
margin-bottom: 0;
width: 100%;
background: var(--base);
padding-top: 80px;
padding-bottom: 20px;
color: var(--white);
}
.footer__wr {
display: flex;
align-items: flex-start;
gap: 20px;
}
.footer__cnts {
display: grid;
grid-gap: 12px;
grid-template-columns: repeat(2, 1fr);
}
.footerL {
width: 100%;
}
.footerL__btn {
margin-top: 20px;
}
.footerLogo {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
.footerLogo__img {
width: 95px;
}
.footerBl {
flex-shrink: 0;
}
.footerBl:nth-child(2) {
width: 310px;
}
.footerBl:nth-child(3) {
width: 200px;
}
.footerBl:nth-child(4) {
width: 310px;
}
.footerBl__capt {
color: var(--gray1);
margin-bottom: 12px;
}
.footerM__it {
display: block;
padding: 4px 0;
color: var(--white);
}
.footerM__it:first-child {
padding-top: 0;
}
.footerM__it span {
position: relative;
}
.footerM__it span::after {
content: "";
position: absolute;
bottom: -3px;
left: 50%;
transform: translate(-50%, 0);
width: 0;
height: 1px;
background: var(--white);
opacity: 0;
transition: 0.25s;
}
.footerCnt.full {
grid-column: span 2;
}
.footerCnt__ttl {
color: var(--gray1);
margin-bottom: 6px;
}
.footerCnt__txt a {
color: var(--white);
}
.footerB {
border-top: 1px solid rgba(255, 255, 255, 0.2);
padding-top: 20px;
margin-top: 80px;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
column-gap: 24px;
row-gap: 8px;
color: var(--gray1);
}
.footerB__wr {
display: flex;
align-items: center;
flex-wrap: wrap;
column-gap: 24px;
row-gap: 8px;
}
.footerB a {
color: var(--gray1);
text-decoration: underline;
}
.mainContent {
padding-bottom: 50px;
}
.crumbs {
color: var(--gray1);
margin-bottom: 20px;
}
.crumbs a {
color: var(--base);
}
.pageH {
margin-bottom: 24px;
}
.section {
padding: 50px 0;
}
.section.np {
padding: 0;
}
.section.npt {
padding-top: 0;
}
.section.npb {
padding-bottom: 0;
}
.section.first {
padding-top: 20px;
}
.sectionH {
display: flex;
align-items: flex-end;
margin-bottom: 24px;
}
.sectionH:last-child {
margin-bottom: 0;
}
.sectionH__cnt {
width: 100%;
}
.sectionH__ttl {
margin-bottom: 12px;
}
.sectionH__ttl:last-child {
margin-bottom: 0;
}
.sectionH__subt {
color: var(--gray1);
}
.sectionH__btn {
flex-shrink: 0;
margin-left: 32px;
}
.hero {
background: var(--white);
padding-top: 48px;
padding-bottom: 32px;
margin-bottom: 50px;
overflow: hidden;
}
.hero__wr {
position: relative;
}
.hero__cnt {
position: relative;
z-index: 2;
max-width: 640px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 32px;
}
.hero__ttl {
margin-bottom: 12px;
}
.hero__txt {
max-width: 560px;
color: var(--base80);
}
.hero__img {
position: absolute;
z-index: 1;
top: 50%;
right: 0;
transform: translate(0, -50%);
width: 700px;
display: flex;
align-items: center;
}
.hero__img img {
width: 100%;
}
.hero__advan {
position: relative;
z-index: 2;
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(4, 1fr);
margin-top: 62px;
}
.heroAdvan {
border-right: 1px solid var(--base08);
padding-right: 12px;
display: flex;
align-items: flex-start;
gap: 16px;
}
.heroAdvan:last-child {
border-right: none;
}
.heroAdvan br {
display: none;
}
.heroAdvan__ic {
flex-shrink: 0;
width: 40px;
}
.heroAdvan__cnt {
width: 100%;
}
.heroAdvan__ttl {
margin-bottom: 4px;
}
.hero2 {
background: var(--white);
padding-top: 20px;
padding-bottom: 32px;
margin-bottom: 50px;
overflow: hidden;
}
.hero2__crumbs {
margin-bottom: 40px;
}
.hero2__wr {
position: relative;
}
.hero2__cnt {
position: relative;
z-index: 2;
max-width: 640px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 32px;
}
.hero2__ttl {
margin-bottom: 12px;
}
.hero2__txt {
max-width: 530px;
}
.hero2__img {
position: absolute;
z-index: 1;
top: 50%;
right: 0;
transform: translate(0, -57%);
width: 730px;
display: flex;
align-items: center;
}
.hero2__img img {
width: 100%;
}
.hero2__advan {
position: relative;
z-index: 2;
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(3, 1fr);
margin-top: 80px;
}
.hero2Advan {
border-right: 1px solid var(--base08);
padding-right: 20px;
}
.hero2Advan:last-child {
border-right: none;
}
.hero2Advan__ttl {
margin-bottom: 4px;
}
.catHero {
background: var(--white);
margin-bottom: 50px;
}
.catHero__wr {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(2, 1fr);
align-items: center;
}
.catHero__img {
display: flex;
align-items: center;
}
.catHero__img img {
width: 100%;
}
.catHero__cnt {
padding-top: 20px;
padding-bottom: 40px;
display: grid;
grid-gap: 20px;
grid-template-columns: 1fr;
}
.catHero__ttl {
margin-bottom: 12px;
}
.catHero__ttl:last-child {
margin-bottom: 0;
}
.catHero__advan li {
min-height: 24px;
padding-left: 32px;
display: flex;
align-items: center;
position: relative;
margin-bottom: 8px;
}
.catHero__advan li:last-child {
margin-bottom: 0;
}
.catHero__advan li::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 24px;
height: 24px;
background: url("assets/img/icons/cat-hero-advan-icon.svg") no-repeat;
background-size: cover;
background-position: center;
}
.catHeroAdvan2 {
max-width: 530px;
border-top: 1px solid var(--gray3);
padding-top: 20px;
display: flex;
align-items: center;
}
.catHeroAdvan2__ic {
flex-shrink: 0;
width: 24px;
height: 24px;
fill: var(--base);
margin-right: 8px;
}
.catHeroAdvan2__txt {
width: 100%;
}
.seoTextBlock {
background: var(--white);
padding: 20px;
}
.seoTextBlock__txt {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.seoTextBlock__txt.active {
-webkit-line-clamp: 500;
}
.seoTextBlock__more {
min-width: 180px;
margin-top: 12px;
}
.seoTextBlock__more:not(.visible) {
display: none;
}
.catalog__seotext {
margin-bottom: 16px;
}
.catalog__wr {
display: grid;
grid-gap: 16px;
grid-template-columns: repeat(4, 1fr);
}
.catalog__list {
grid-column: span 3;
display: grid;
grid-gap: 12px;
grid-template-columns: repeat(3, 1fr);
}
.catalog__list_full {
grid-gap: 16px;
grid-template-columns: repeat(4, 1fr);
}
.catalogMenu {
position: sticky;
top: 112px;
left: 0;
background: var(--white);
border: 1px solid var(--gray3);
}
.catalogMenuIt {
width: 100%;
border-bottom: 1px solid var(--gray3);
padding: 12px 8px;
padding-left: 16px;
display: flex;
align-items: center;
text-align: left;
font: 500 16px/1.15 var(--font);
color: var(--base);
}
.catalogMenuIt:last-child {
border-bottom: none;
}
.catalogMenuIt__txt {
width: 100%;
}
.catalogMenuIt__ic {
flex-shrink: 0;
width: 20px;
height: 20px;
fill: none;
stroke: var(--gray2);
margin-left: 8px;
}
.catalogMenuIt.active {
background: var(--base);
border-bottom-color: var(--base);
color: var(--white);
pointer-events: none;
}
.catalogMenuIt.active .catalogMenuIt__ic {
stroke: var(--white);
}
.catalogIt {
background: var(--white);
border: 1px solid var(--base08);
padding-bottom: 16px;
position: relative;
overflow: hidden;
transition: 0.25s;
}
.catalogIt__image {
position: relative;
}
.catalogIt__img {
display: block;
position: relative;
overflow: hidden;
}
.catalogIt__img::before {
content: "";
display: block;
padding-top: 72%;
}
.catalogIt__img img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.catalogIt__cnt {
padding: 16px;
padding-bottom: 10px;
display: flex;
flex-direction: column;
gap: 4px;
}
.catalogIt__price {
font: 700 20px/1.15 var(--font);
color: var(--base);
}
.catalogIt__ttl {
color: var(--base);
}
.catalogIt__props {
display: flex;
align-items: center;
flex-wrap: wrap;
column-gap: 6px;
row-gap: 2px;
color: var(--gray1);
}
.catalogIt__props span::after {
content: ",";
}
.catalogIt__props span:last-child::after {
display: none;
}
.catalogIt__controls {
padding: 0 16px;
display: flex;
}
.catalogIt__controls .addToCart__wr {
min-height: 40px;
}
.catalogIt__controls .addToCart__btn {
width: 38px;
height: 38px;
}
.catalogIt__controls .addToCart__btn svg {
width: 20px;
height: 20px;
}
.catalogIt__controls .addToCart__info {
min-height: 38px;
}
.catalogIt__controls .addToCart__amount {
font-size: 13px;
margin-bottom: 1px;
}
.catalogIt__controls .addToCart__subt {
font-size: 11px;
}
.catalogIt__link {
flex-shrink: 0;
margin-right: 8px;
}
.catalogItVari {
position: absolute;
z-index: 5;
bottom: 0;
left: 0;
width: 100%;
padding: 0 16px;
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.catalogItVari__it {
max-width: 100%;
min-height: 26px;
background: var(--white);
border: 1px solid var(--base);
padding: 2px 10px;
display: inline-flex;
align-items: center;
font: 500 12px/1.15 var(--font);
color: var(--base);
}
.catalogItVari__it.active {
background: var(--base);
color: var(--white);
}
.addToCart {
width: 100%;
}
.addToCart__add {
width: 100%;
}
.addToCart__wr {
display: none;
width: 100%;
min-height: 48px;
background: var(--base04);
border: 1px solid var(--base);
overflow: hidden;
transition: 0.25s;
}
.addToCart__btn {
flex-shrink: 0;
width: 46px;
height: 46px;
display: flex;
align-items: center;
justify-content: center;
}
.addToCart__btn svg {
width: 24px;
height: 24px;
fill: none;
stroke: var(--base);
}
.addToCart__info {
width: 100%;
min-height: 46px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
white-space: nowrap;
}
.addToCart__amount {
font: 500 14px/1.15 var(--font);
margin-bottom: 2px;
}
.addToCart__subt {
font: 400 12px/1.15 var(--font);
}
.addToCart.active .addToCart__add {
display: none;
}
.addToCart.active .addToCart__wr {
display: flex;
align-items: center;
}
.product {
display: flex;
align-items: flex-start;
}
.product__cnt {
width: 100%;
min-width: 0;
padding-right: 20px;
}
.product__images {
margin-bottom: 24px;
}
.product__images:last-child {
margin-bottom: 0;
}
.product__tabs {
margin-bottom: 24px;
}
.productImages__it {
background: var(--white);
display: block;
position: relative;
overflow: hidden;
}
.productImages__it::before {
content: "";
display: block;
padding-top: 65%;
}
.productImages__it img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.productImages__pag {
display: none;
position: absolute;
bottom: 8px;
left: 0;
width: 100%;
}
.productThumbs {
display: grid;
grid-gap: 6px;
grid-template-columns: repeat(7, 1fr);
margin-top: 6px;
}
.productThumbs__it {
background: var(--white);
border: 1px solid var(--base08);
display: block;
position: relative;
overflow: hidden;
cursor: pointer;
transition: 0.25s;
}
.productThumbs__it::before {
content: "";
display: block;
padding-top: 65%;
}
.productThumbs__it img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.productThumbs__it.active {
border-color: var(--base);
pointer-events: none;
}
.productInfo {
display: none;
}
.productInfo.active {
display: block;
}
.productInfo__ttl {
margin-bottom: 16px;
}
.productProps__it {
border-bottom: 1px solid var(--base08);
padding: 4px 0;
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-wrap: wrap;
column-gap: 16px;
row-gap: 2px;
}
.productProps__it:last-child {
border-bottom: none;
}
.productProps__it p:first-child {
color: var(--gray1);
}
.productProps__it p:last-child {
font-weight: 500;
}
.productBl {
position: sticky;
top: 118px;
right: 0;
flex-shrink: 0;
width: 530px;
background: var(--white);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
padding: 20px;
display: grid;
grid-gap: 16px;
grid-template-columns: 1fr;
}
.productBl__ttl {
margin-bottom: 8px;
}
.productBl__ttl:last-child {
margin-bottom: 0;
}
.productBl__price {
font: 700 24px/1.15 var(--font);
}
.productBl__desc {
margin-bottom: 8px;
}
.productBl__desc:last-child {
margin-bottom: 0;
}
.productBl__shp {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
column-gap: 12px;
row-gap: 8px;
}
.productBl__controls {
display: flex;
gap: 8px;
}
.productBl__order {
flex-shrink: 0;
}
.productBlShp {
display: flex;
align-items: center;
}
.productBlShp__ic {
flex-shrink: 0;
width: 24px;
height: 24px;
fill: var(--base);
margin-right: 8px;
}
.productBlShp__txt {
width: 100%;
}
.productBlVari__ttl {
margin-bottom: 8px;
}
.productBlVari__wr {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.productBlVari__it {
max-width: 100%;
min-height: 40px;
background: var(--base04);
border: 1px solid var(--base16);
padding: 8px 16px;
display: flex;
align-items: center;
}
.productBlVari__it.active {
border-color: var(--base);
pointer-events: none;
}
.advan1 {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(3, 1fr);
}
.advan1It {
background: var(--white);
border: 1px solid var(--base08);
padding: 20px;
padding-right: 64px;
display: flex;
flex-direction: column;
gap: 4px;
position: relative;
}
.advan1It__ic {
position: absolute;
top: 20px;
right: 20px;
width: 24px;
height: 24px;
fill: none;
stroke: var(--base);
}
.advan1It__txt {
color: var(--gray1);
}
.blog {
display: grid;
grid-gap: 24px;
grid-template-columns: 1fr;
}
.blog__list {
display: grid;
grid-column-gap: 20px;
grid-row-gap: 32px;
grid-template-columns: repeat(4, 1fr);
}
.blog__more {
display: flex;
justify-content: center;
}
.blog__mobmore {
display: none;
}
.blogCard__img {
display: block;
position: relative;
overflow: hidden;
margin-bottom: 12px;
}
.blogCard__img::before {
content: "";
display: block;
padding-top: 55%;
}
.blogCard__img img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: 0.75s;
}
.blogCard__ttl {
display: block;
color: var(--base);
margin-bottom: 4px;
}
.blogCard__date {
color: var(--gray1);
}
.article__head {
margin-bottom: 24px;
}
.article__date {
color: var(--gray1);
margin-top: 8px;
}
.article__wr {
display: flex;
align-items: flex-start;
}
.article__cnt {
width: 100%;
}
.article__right {
position: sticky;
top: 118px;
right: 0;
flex-shrink: 0;
width: 420px;
margin-left: 20px;
}
.articleMenu {
background: var(--white);
border: 1px solid var(--base08);
padding: 24px;
margin-bottom: 12px;
}
.articleMenu:last-child {
margin-bottom: 0;
}
.articleMenu__ttl {
margin-bottom: 12px;
}
.articleMenu__list {
counter-reset: article-menu;
}
.articleMenu__list li {
counter-increment: article-menu;
margin-bottom: 4px;
}
.articleMenu__list li:last-child {
margin-bottom: 0;
}
.articleMenu__list li::before {
content: counter(article-menu) ". ";
}
.articleMenu__list li a {
color: var(--gray1);
}
.about1 {
display: grid;
grid-gap: 16px;
grid-template-columns: repeat(2, 1fr);
align-items: center;
}
.about1__img {
display: flex;
align-items: center;
}
.about1__img img {
width: 100%;
}
.about1__cnt {
padding-left: 24px;
}
.about1__ttl {
margin-bottom: 24px;
}
.about2 {
background: var(--white);
border: 1px solid var(--base08);
padding: 20px 40px;
display: flex;
align-items: center;
}
.about2__cnt {
flex-shrink: 0;
width: 544px;
margin-right: 40px;
}
.about2__head {
margin-bottom: 32px;
}
.about2__head:last-child {
margin-bottom: 0;
}
.about2__ttl {
margin-bottom: 16px;
}
.about2__ttl:last-child {
margin-bottom: 0;
}
.about2__img {
width: 100%;
display: flex;
align-items: center;
}
.about2__img img {
width: 100%;
}
.reviewsBl__more {
margin-top: 20px;
}
.reviewsBl__it {
display: none;
background: var(--white);
position: relative;
overflow: hidden;
}
.reviewsBl__it::before {
content: "";
display: block;
padding-top: 74%;
}
.reviewsBl__it img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.reviewsBl__it:nth-child(-n+4) {
display: block;
}
.avitoBanner {
background: var(--white);
border: 2px solid var(--base);
padding: 20px 40px;
display: flex;
align-items: center;
}
.avitoBanner__cnt {
flex-shrink: 0;
width: 544px;
margin-right: 40px;
}
.avitoBanner__head {
margin-bottom: 32px;
}
.avitoBanner__head:last-child {
margin-bottom: 0;
}
.avitoBanner__ttl {
margin-bottom: 16px;
}
.avitoBanner__ttl:last-child {
margin-bottom: 0;
}
.avitoBanner__img {
width: 100%;
position: relative;
overflow: hidden;
}
.avitoBanner__img::before {
content: "";
display: block;
padding-top: 44%;
}
.avitoBanner__img img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.shipping1__more {
margin-top: 20px;
}
.shipping1It {
min-height: 240px;
background: var(--white);
border: 1px solid var(--base08);
padding: 20px;
display: flex;
flex-direction: column;
}
.shipping1It__ic {
width: 40px;
}
.shipping1It__wr {
margin: auto;
margin-bottom: 0;
width: 100%;
}
.shipping1It__ttl {
margin-bottom: 4px;
}
.shipping1It__txt {
color: var(--gray1);
}
.shpPage__header {
background: var(--white);
padding-top: 20px;
margin-bottom: 60px;
}
.shpPage__head {
max-width: 860px;
margin-bottom: 40px;
}
.shpPage__ttl {
margin-bottom: 12px;
}
.shpPage__ttl:last-child {
margin-bottom: 0;
}
.shpPage__blocks {
display: grid;
grid-gap: 24px;
grid-template-columns: 1fr;
}
.shpPageBl {
background: var(--white);
padding: 24px;
}
.shpPageBl__head {
display: flex;
align-items: center;
margin-bottom: 16px;
}
.shpPageBl__ic {
flex-shrink: 0;
width: 40px;
margin-right: 20px;
}
.shpPageBl__ttl {
width: 100%;
}
.faq {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(2, 1fr);
}
.faq__head {
flex-direction: column;
align-items: flex-start;
gap: 24px;
}
.faq__head .sectionH__btn {
margin-left: 0;
}
.faq__list {
display: grid;
grid-gap: 8px;
grid-template-columns: 1fr;
}
.faq__more {
display: none;
}
.faqIt {
background: var(--white);
border: 1px solid var(--base16);
cursor: pointer;
transition: 0.25s;
}
.faqIt__ttl {
min-height: 50px;
padding: 12px 16px;
padding-right: 54px;
display: flex;
align-items: center;
position: relative;
}
.faqIt__ttl::after {
content: "";
position: absolute;
top: 50%;
right: 14px;
transform: translate(0, -50%);
width: 24px;
height: 24px;
background: url("assets/img/icons/plus-icon.svg") no-repeat;
background-size: cover;
background-position: center;
}
.faqIt__txt {
display: none;
padding: 14px 16px;
padding-top: 0;
color: var(--gray1);
margin-top: -4px;
}
.faqIt__txt p {
margin-bottom: 8px;
}
.faqIt__txt p:last-child {
margin-bottom: 0;
}
.faqIt.active {
border: 2px solid var(--base);
}
.faqIt.active .faqIt__ttl::after {
background-image: url("assets/img/icons/minus-icon.svg");
}
.pageForm {
background: var(--white);
border: 1px solid var(--base08);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
padding: 40px;
display: grid;
grid-gap: 16px;
grid-template-columns: repeat(2, 1fr);
}
.pageForm__cnt {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.pageForm__head {
margin-bottom: 24px;
}
.pageForm__ttl {
margin-bottom: 12px;
}
.pageForm__subt {
color: var(--gray1);
}
.pageForm__logo {
width: 95px;
}
.pageForm__wr {
display: grid;
grid-gap: 16px;
grid-template-columns: 1fr;
}
.pageForm__fields {
display: grid;
grid-gap: 10px;
grid-template-columns: 1fr;
}
#contactsHero {
background: var(--white);
padding: 40px 0;
}
.contactsHero {
display: flex;
}
.contactsHero__cnt {
flex-shrink: 0;
width: 528px;
padding-bottom: 20px;
margin-right: 20px;
}
.contactsHero__cnt .crumbs {
margin-bottom: 24px;
}
.contactsHero__ttl {
margin-bottom: 24px;
}
.contactsHero__list {
display: grid;
grid-column-gap: 20px;
grid-row-gap: 12px;
grid-template-columns: repeat(2, 1fr);
margin-bottom: 24px;
}
.contactsHero__map {
width: 100%;
border: 1px solid var(--base);
}
.contactsHeroIt.full {
grid-column: span 2;
}
.contactsHeroIt__ttl {
color: var(--gray1);
margin-bottom: 6px;
}
#contactsMap {
width: 100%;
height: 100%;
filter: grayscale(100%);
}
#contactsReq {
padding-top: 60px;
}
.requisites__capt {
margin-bottom: 24px;
}
.requisites__wr {
display: grid;
grid-column-gap: 40px;
grid-row-gap: 32px;
grid-template-columns: repeat(2, 1fr);
}
.requisites__it:first-child {
grid-column: span 2;
}
.requisites p {
margin-bottom: 8px;
}
.requisites p:last-child {
margin-bottom: 0;
}
.requisites p.requisites__ttl {
margin-bottom: 16px;
}
.errorPage {
max-width: 860px;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
margin: 0 auto;
}
.errorPage__img {
width: 454px;
max-width: 100%;
display: flex;
align-items: center;
}
.errorPage__img img {
width: 100%;
}
.errorPage__head {
width: 100%;
text-align: center;
}
.errorPage__ttl {
margin-bottom: 12px;
}
.errorPage__btns {
display: flex;
justify-content: center;
gap: 12px;
}
.errorPage__btns .btn {
min-width: 180px;
}
.calc {
background: var(--white);
border: 4px solid var(--base);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
padding: 40px;
position: relative;
}
.calc__head {
display: grid;
grid-gap: 16px;
grid-template-columns: repeat(2, 1fr);
margin-bottom: 24px;
}
.calc__subtitle {
padding-top: 8px;
text-align: right;
color: var(--gray1);
}
.calc__title {
margin-bottom: 12px;
}
.calc__title2 {
margin-bottom: 16px;
}
.calc__body {
display: grid;
grid-gap: 24px;
grid-template-columns: 1fr;
}
.calc__step1 {
display: grid;
grid-gap: 12px;
grid-template-columns: repeat(3, 1fr);
}
.calc__zones {
display: grid;
grid-gap: 12px;
grid-template-columns: repeat(5, 1fr);
}
.calc__tariffs {
display: grid;
grid-gap: 12px;
grid-template-columns: repeat(3, 1fr);
}
.calc__controls {
display: grid;
grid-gap: 16px;
grid-template-columns: repeat(2, 1fr);
}
.calcZone {
max-width: 100%;
min-height: 48px;
background: var(--base04);
border: 1px solid var(--base16);
padding: 8px 12px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font: 500 16px/1.15 var(--font);
color: var(--base);
cursor: pointer;
transition: background, border-color 0.25s;
}
.calcZone__input {
display: none;
}
.calcZone:has(.calcZone__input:checked) {
background: var(--base08);
border: 2px solid var(--base);
}
.calcTariff {
min-height: 83px;
max-width: 100%;
background: var(--base04);
border: 1px solid var(--base16);
padding: 16px;
display: flex;
align-items: center;
cursor: pointer;
transition: background, border-color 0.25s;
}
.calcTariff__input {
display: none;
}
.calcTariff__ic {
flex-shrink: 0;
width: 40px;
height: 40px;
fill: var(--base);
margin-left: 8px;
}
.calcTariff__cnt {
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.calcTariff__subt {
color: var(--gray1);
}
.calcTariff:has(.calcTariff__input:checked) {
background: var(--base08);
border: 2px solid var(--base);
}
.calcTable {
border: 1px solid var(--gray2);
}
.calcTable__row {
border-bottom: 1px solid var(--gray2);
padding: 12px 20px;
display: flex;
align-items: center;
}
.calcTable__row:last-child {
border-bottom: none;
}
.calcTable__zone {
width: 100%;
}
.calcTable__subzones {
flex-shrink: 0;
}
.calcTableH {
border-bottom: 1px solid var(--gray2);
padding: 12px 20px;
display: flex;
align-items: center;
color: var(--gray2);
}
.calcTableH__col {
flex-shrink: 0;
}
.calcTableH__col:first-child {
flex-shrink: unset;
width: 100%;
}
.calcTableH__col:nth-child(2) {
width: 240px;
}
.calcTableH__col:nth-child(3) {
width: 280px;
}
.calcTableH__col:nth-child(4) {
width: 100px;
}
.calcTableSubzone {
display: flex;
align-items: center;
margin-bottom: 4px;
}
.calcTableSubzone:last-child {
margin-bottom: 0;
}
.calcTableSubzone__col:first-child {
width: 240px;
}
.calcTableSubzone__col:nth-child(2) {
width: 280px;
}
.calcTableSubzone__col:nth-child(3) {
width: 100px;
}
.calcTableSubzone__col a {
text-decoration: underline;
}
#calcBlockResult,
#calcBlockForm {
padding-top: 24px;
}
.calcResultH {
border-bottom: 1px solid var(--gray2);
padding: 10px 20px;
display: flex;
align-items: center;
color: var(--gray2);
}
.calcResultH__col {
flex-shrink: 0;
}
.calcResultH__col:first-child {
flex-shrink: unset;
width: 100%;
}
.calcResultH__col:nth-child(2) {
width: 124px;
}
.calcResultH__col:nth-child(3) {
width: 124px;
}
.calcResultH__col:nth-child(4) {
width: 100px;
text-align: right;
}
.calcResult {
border: 2px solid var(--base);
margin-bottom: 16px;
}
.calcResult:last-child {
margin-bottom: 0;
}
.calcResult__rows {
padding: 8px 0;
}
.calcResult__row {
padding: 4px 20px;
display: flex;
align-items: center;
}
.calcResult__col {
flex-shrink: 0;
}
.calcResult__col:first-child {
flex-shrink: unset;
width: 100%;
}
.calcResult__col:nth-child(2) {
width: 124px;
}
.calcResult__col:nth-child(3) {
width: 124px;
}
.calcResult__col:nth-child(4) {
display: none;
}
.calcResult__col:nth-child(5) {
width: 100px;
text-align: right;
}
.calcResult__btm {
border-top: 2px solid var(--base);
padding: 10px 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
.calcResult__descriptor {
color: var(--gray2);
}
.calcResultSum {
display: flex;
align-items: center;
gap: 4px;
}
.calcForm__fields {
display: grid;
grid-gap: 12px;
grid-template-columns: repeat(3, 1fr);
margin-bottom: 16px;
}
.calcForm__agree {
margin-bottom: 16px;
}
.calcForm__controls {
display: grid;
grid-gap: 16px;
grid-template-columns: repeat(2, 1fr);
}
.cart__wr {
display: flex;
align-items: flex-start;
}
.cart__content {
width: 100%;
}
.cart__ttl {
margin-bottom: 16px;
}
.cart__products {
background: var(--white);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
padding: 8px 24px;
}
.cart__sets {
margin-bottom: 32px;
}
.emptyCartPart {
display: none;
}
.cartItem {
border-bottom: 1px solid var(--base08);
padding: 16px 0;
display: flex;
align-items: center;
}
.cartItem:last-child {
border-bottom: none;
}
.cartItem__img {
flex-shrink: 0;
width: 120px;
display: block;
position: relative;
overflow: hidden;
margin-right: 20px;
}
.cartItem__img::before {
content: "";
display: block;
padding-top: 72%;
}
.cartItem__img img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.cartItem__name {
width: 100%;
}
.cartItem__controls {
flex-shrink: 0;
display: flex;
gap: 8px;
margin-left: 20px;
}
.cartItemQuantity {
flex-shrink: 0;
width: 120px;
height: 40px;
background: var(--base04);
border: 1px solid var(--base);
display: flex;
align-items: center;
cursor: default;
}
.cartItemQuantity__btn {
flex-shrink: 0;
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.cartItemQuantity__btn svg {
width: 20px;
height: 20px;
fill: none;
stroke: var(--base);
}
.cartItemQuantity__btn[disabled] {
pointer-events: none;
opacity: 0.5;
}
.cartItemQuantity__txt {
width: 100%;
text-align: center;
white-space: nowrap;
}
.cartDelete {
width: 40px;
height: 40px;
background: var(--base04);
border: 1px solid var(--base16);
display: flex;
align-items: center;
justify-content: center;
}
.cartDelete svg {
width: 20px;
height: 20px;
fill: var(--base);
}
.cartItemPrice {
flex-shrink: 0;
width: 120px;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
text-align: right;
margin-left: 20px;
}
.cartItemPrice__total {
font: 700 18px/1.15 var(--font);
}
.cartItemPrice__unit {
color: var(--gray1);
}
.cartSet {
background: var(--white);
border: 1px solid var(--base08);
padding: 20px;
margin-bottom: 12px;
}
.cartSet:last-child {
margin-bottom: 0;
}
.cartSet__wr {
display: flex;
align-items: center;
}
.cartSet__info {
width: 100%;
}
.cartSet__capt {
margin-bottom: 4px;
}
.cartSet__subt {
color: var(--gray2);
}
.cartSet__controls {
flex-shrink: 0;
display: flex;
gap: 8px;
margin-left: 20px;
}
.cartSet__body {
display: none;
margin-top: 16px;
}
.cartSet__btn {
margin-top: 16px;
}
.cartSet.active .cartSet__body {
display: block;
}
.cartSetProduct {
border-bottom: 1px solid var(--base08);
padding: 8px 0;
display: flex;
align-items: center;
}
.cartSetProduct:first-child {
padding-top: 0;
}
.cartSetProduct__image {
flex-shrink: 0;
width: 64px;
position: relative;
overflow: hidden;
margin-right: 12px;
}
.cartSetProduct__image::before {
content: "";
display: block;
padding-top: 72%;
}
.cartSetProduct__image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.cartSetProduct__content {
width: 100%;
display: flex;
align-items: center;
}
.cartSetProduct__head {
width: 100%;
}
.cartSetProduct__qnt {
flex-shrink: 0;
width: 60px;
}
.cartSetProduct .cartItemPrice__total {
font-size: 16px;
}
.cartSetProduct .cartItemPrice__unit {
font-size: 13px;
}
.orderSummary {
position: sticky;
top: 120px;
right: 0;
flex-shrink: 0;
width: 422px;
background: var(--white);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
padding: 20px;
display: grid;
grid-gap: 16px;
grid-template-columns: 1fr;
margin-left: 20px;
}
.orderSummaryInfo {
display: grid;
grid-gap: 6px;
grid-template-columns: 1fr;
}
.orderSummaryInfo__it {
display: flex;
align-items: center;
justify-content: space-between;
}
.orderSummaryInfo__it.hidden {
display: none;
}
.checkout {
display: flex;
align-items: flex-start;
}
.checkout__cnt {
width: 100%;
display: grid;
grid-gap: 16px;
grid-template-columns: 1fr;
}
.checkout__bl {
background: var(--white);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
padding: 24px;
display: grid;
grid-gap: 16px;
grid-template-columns: 1fr;
}
.checkout__fields {
display: grid;
grid-column-gap: 12px;
grid-row-gap: 16px;
grid-template-columns: repeat(2, 1fr);
}
.checkout__field {
grid-column: span 2;
}
.checkout__field.half {
grid-column: unset;
}
.checkoutShipping__tabs {
display: grid;
grid-gap: 8px;
grid-template-columns: repeat(2, 1fr);
margin-bottom: 16px;
}
.checkoutShipping__it {
display: none;
}
.checkoutShipping__it.active {
display: block;
}
.checkoutShippingTab {
max-width: 100%;
min-height: 40px;
background: var(--base04);
border: 1px solid var(--base16);
padding: 8px 12px;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
font: 500 14px/1.15 var(--font);
color: var(--base);
cursor: pointer;
transition: background, border-color 0.25s;
}
.checkoutShippingTab__input {
display: none;
}
.checkoutShippingTab:has(.checkoutShippingTab__input:checked) {
background: var(--base08);
border: 2px solid var(--base);
}
.checkoutPickup {
padding-top: 8px;
}
.checkoutPickup__ttl {
margin-bottom: 12px;
}
.checkoutPickup__info {
display: grid;
grid-gap: 12px;
grid-template-columns: 1fr;
margin-bottom: 16px;
}
.checkoutPickup__help {
background: var(--base04);
padding: 16px;
}
.checkoutPickup__map {
height: 400px;
position: relative;
}
.checkoutPickup__map::after {
content: "";
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.checkoutPickup__map.active::after {
display: none;
}
.checkoutPickupContact__ttl {
color: var(--gray1);
margin-bottom: 4px;
}
#checkoutPickupMap {
width: 100%;
height: 100%;
}
.checkoutShippingPrompt {
background: var(--base04);
padding: 12px;
display: flex;
align-items: center;
}
.checkoutShippingPrompt__ic {
flex-shrink: 0;
width: 46px;
height: 46px;
fill: var(--base);
margin-right: 12px;
}
.checkoutShippingPrompt__wr {
width: 100%;
}
.mobMenu {
display: none;
position: fixed;
z-index: 999;
top: 60px;
left: 0;
width: 100%;
height: calc(100% - 60px);
background: var(--bg);
overflow: auto;
-ms-overflow-style: none;
overflow-y: scroll;
scrollbar-width: none;
}
.mobMenu::-webkit-scrollbar {
width: 0;
height: 0;
}
.mobMenu__menu {
background: var(--white);
padding: 8px 0;
}
.mobMenu__btm {
padding: 16px;
padding-bottom: 20px;
}
.mobMenu__cnts {
display: grid;
grid-gap: 12px;
grid-template-columns: repeat(2, 1fr);
margin-bottom: 16px;
}
.mobileMIt {
width: 100%;
padding: 12px;
padding-left: 16px;
display: flex;
align-items: center;
font: 500 16px/1.15 var(--font);
color: var(--base);
}
.mobileMIt__txt {
width: 100%;
}
.mobileMIt__ic {
flex-shrink: 0;
width: 20px;
height: 20px;
fill: none;
stroke: var(--gray2);
margin-left: 12px;
}
.mobileMenu2 {
display: grid;
grid-column-gap: 12px;
grid-template-columns: repeat(2, 1fr);
margin-bottom: 16px;
}
.mobileMenu2__it {
padding: 8px 0;
color: var(--base);
}
.mobMenuCnt.full {
grid-column: span 2;
}
.mobMenuCnt__ttl {
color: var(--gray1);
margin-bottom: 4px;
}
.mobMenuCnt__txt a {
color: var(--base);
}
.overlay {
display: none;
position: fixed;
z-index: 9999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--base60);
}
.modal {
display: none;
position: fixed;
z-index: 10000;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 600px;
max-width: calc(100% - 32px);
max-height: calc(100% - 32px);
background: var(--white);
border: 1px solid var(--base08);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
padding: 40px;
overflow: auto;
-ms-overflow-style: none;
overflow-y: scroll;
scrollbar-width: none;
}
.modal::-webkit-scrollbar {
width: 0;
height: 0;
}
.modal__close {
position: absolute;
top: 8px;
right: 8px;
width: 40px;
height: 40px;
background: var(--base04);
border: 1px solid var(--base16);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.modal__close svg {
width: 20px;
height: 20px;
fill: none;
stroke: var(--base);
}
.modal__head {
text-align: center;
margin-bottom: 16px;
}
.modal__head:last-child {
margin-bottom: 0;
}
.modal__ttl {
margin-bottom: 8px;
}
.modal__ttl:last-child {
margin-bottom: 0;
}
.modal__subt {
color: var(--gray1);
}
.modalForm {
display: grid;
grid-gap: 16px;
grid-template-columns: 1fr;
}
.modalForm__fields {
display: grid;
grid-gap: 10px;
grid-template-columns: 1fr;
}
.cookiePopup {
position: fixed;
z-index: 1000;
bottom: 20px;
right: 20px;
width: 570px;
background: var(--white);
border: 1px solid var(--base);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
padding: 12px;
display: flex;
align-items: center;
}
.cookiePopup__txt {
width: 100%;
color: var(--gray1);
}
.cookiePopup__btn {
flex-shrink: 0;
margin-left: 20px;
}
.preloader {
display: none;
position: fixed;
z-index: 11000;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--base80);
}
.preloader__spinner {
animation: rotate 2s linear infinite;
z-index: 2;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80px;
height: 80px;
}
.preloader__spinner .path {
stroke: var(--white);
stroke-linecap: round;
animation: dash 1.5s ease-in-out infinite;
}
.cartPreloader {
width: 100%;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 32px;
}
.cartPreloader__spinner {
animation: rotate 2s linear infinite;
width: 50px;
height: 50px;
}
.cartPreloader__spinner .path {
stroke: var(--base);
stroke-linecap: round;
animation: dash 1.5s ease-in-out infinite;
}
@keyframes dash {
0% {
stroke-dasharray: 1, 150;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -124;
}
}
.sitemap {
padding-top: 16px;
display: grid;
grid-gap: 40px;
grid-template-columns: 1fr;
}
.sitemap__ttl {
margin-bottom: 16px;
}
.sitemap__wr {
display: grid;
grid-column-gap: 16px;
grid-row-gap: 8px;
grid-template-columns: repeat(4, 1fr);
}
.sitemap__it a {
display: block;
position: relative;
padding-left: 12px;
}
.sitemap__it a::before {
content: "";
position: absolute;
top: 8px;
left: 0;
width: 5px;
height: 5px;
background: var(--base);
border-radius: 50%;
}
@media (width < 1199px) {
body {
font-size: 14px;
}
br.mobileBr {
display: block;
}
br.desktopBr {
display: none;
}
h1,
.h1 {
font-size: 32px;
letter-spacing: unset;
}
h2,
.h2 {
font: 700 28px/1.1 var(--font2);
letter-spacing: unset;
}
h3,
.h3 {
font: 700 24px/1.1 var(--font2);
letter-spacing: unset;
}
h4,
.h4 {
font: 700 20px/1.15 var(--font2);
letter-spacing: unset;
}
h5,
.h5 {
font: 700 18px/1.15 var(--font2);
letter-spacing: unset;
}
h6,
.h6 {
font: 700 16px/1.15 var(--font2);
letter-spacing: unset;
}
.text18 {
font-size: 14px;
}
.text18M {
font-size: 14px;
}
.text18M-2 {
font-size: 16px;
}
.text16 {
font-size: 14px;
}
.text16M {
font-size: 14px;
}
.text16-2 {
font-size: 12px;
}
.text14 {
font-size: 12px;
}
.text14M {
font-size: 12px;
}
.btn:not(.btn_stable) {
min-height: 40px;
gap: 6px;
font-size: 14px;
}
.btn:not(.btn_stable) .btn__ic {
width: 20px;
height: 20px;
}
.btn_l {
min-height: 48px;
padding: 8px 16px;
gap: 8px;
font-size: 16px;
}
.btn_l .btn__ic {
width: 24px;
height: 24px;
}
.citySelect__opt {
font-size: 15px;
}
.agreement {
font-size: 10px;
}
.textBlock h1,
.textBlock h2 {
margin-top: 40px;
margin-bottom: 16px;
}
.textBlock p {
margin-bottom: 10px;
}
.textBlock ul {
margin-bottom: 12px;
}
.textBlock ul li {
padding-left: 20px;
}
.textBlock ul li::before {
top: 7px;
left: 7px;
}
.textBlock ol {
margin-left: 20px;
margin-bottom: 12px;
}
.textBlock blockquote {
padding: 16px;
margin: 16px 0;
}
.textBlock .wp-block-image {
margin-top: 16px;
margin-bottom: 24px;
}
.textBlock .wp-block-gallery {
margin-top: 16px;
margin-bottom: 20px;
}
.textBlock .wp-block-table {
margin: 16px 0;
}
.textBlock .wp-block-buttons {
margin: 16px 0;
}
.textBlock .wp-block-buttons .wp-block-button__link {
min-height: 40px;
font-size: 14px;
}
.tabs {
transform: translate(-16px, 0);
width: calc(100% + 32px);
padding: 0 16px;
gap: 16px;
overflow-x: auto;
overflow-y: visible;
-ms-overflow-style: none;
overflow-y: scroll;
scrollbar-width: none;
}
.tabs::-webkit-scrollbar {
width: 0;
height: 0;
}
.tabs__it {
flex-shrink: 0;
padding-bottom: 13px;
}
.header__wr {
justify-content: space-between;
}
.header__calc {
min-height: 40px;
}
.header__logo img {
width: 87px;
}
.header__logo span {
font-size: 10px;
}
.headerTop {
display: none;
}
.headerCtg {
display: none;
}
.headerM {
display: none;
}
.headerCart {
width: 66px;
min-height: 40px;
gap: 4px;
}
.headerCart__ic {
width: 22px;
height: 22px;
}
.headerCart__num {
width: 16px;
height: 16px;
font-size: 10px;
}
.burger {
display: flex;
align-items: center;
justify-content: center;
}
.footer {
padding-top: 60px;
}
.footer__wr {
flex-direction: column;
align-items: stretch;
gap: 24px;
}
.footerL__btn {
width: 100%;
}
.footerLogo {
flex-direction: row;
align-items: center;
}
.footerLogo__img {
width: 85px;
}
.footerLogo__subt {
width: 100%;
}
.footerBl {
width: 100% !important;
}
.footerM__it {
padding: 6px 0;
}
.footerCnt br {
display: none;
}
.footerCnt .h6 {
font-size: 20px;
}
.footerCnt__ttl {
margin-bottom: 4px;
}
.footerB {
padding-top: 16px;
margin-top: 40px;
}
.footerB__wr {
width: 100%;
}
.footerB__wr p {
width: 100%;
}
.mainContent {
padding-bottom: 30px;
}
.crumbs {
margin-bottom: 12px;
}
.pageH {
margin-bottom: 12px;
}
.section {
padding: 30px 0;
}
.section.first {
padding-top: 12px;
}
.sectionH {
display: block;
margin-bottom: 20px;
}
.sectionH__ttl {
margin-bottom: 8px;
}
.sectionH__btn {
display: none;
}
.hero {
padding: 20px 0;
margin-bottom: 30px;
}
.hero__wr {
display: flex;
flex-direction: column;
}
.hero__cnt {
max-width: 100%;
display: contents;
}
.hero__head {
order: 1;
margin-bottom: 8px;
}
.hero__ttl {
margin-bottom: 8px;
}
.hero__txt {
max-width: 100%;
}
.hero__img {
order: 2;
position: static;
transform: none;
width: 100%;
justify-content: center;
margin-bottom: 8px;
}
.hero__img img {
width: 100%;
max-width: 560px;
}
.hero__btn {
order: 3;
}
.hero__advan {
grid-gap: 0;
grid-template-columns: repeat(2, 1fr);
margin-top: 20px;
}
.heroAdvan {
border-top: 1px solid var(--base08);
padding: 8px;
align-items: center;
flex-wrap: wrap;
gap: unset;
}
.heroAdvan:first-child,
.heroAdvan:nth-child(2) {
border-top: none;
}
.heroAdvan:nth-child(2n) {
border-right: none;
padding-right: 0;
}
.heroAdvan:nth-child(2n-1) {
padding-left: 0;
}
.heroAdvan__ic {
width: 28px;
margin-right: 8px;
}
.heroAdvan__cnt {
display: contents;
}
.heroAdvan__ttl {
width: calc(100% - 36px);
margin: 0;
}
.heroAdvan__txt {
width: 100%;
font-size: 10px;
margin-top: 4px;
}
.hero2 {
padding: 20px 0;
margin-bottom: 30px;
}
.hero2__crumbs {
margin-bottom: 40px;
}
.hero2__wr {
display: flex;
flex-direction: column;
}
.hero2__cnt {
max-width: 100%;
display: contents;
}
.hero2__head {
order: 1;
margin-bottom: 8px;
}
.hero2__ttl {
margin-bottom: 8px;
}
.hero2__txt {
max-width: 100%;
}
.hero2__img {
order: 2;
position: static;
transform: none;
width: 100%;
justify-content: center;
margin-bottom: 8px;
}
.hero2__img img {
width: 100%;
max-width: 560px;
}
.hero2__btn {
order: 3;
}
.hero2__advan {
grid-gap: 12px;
grid-template-columns: 1fr;
margin-top: 16px;
}
.hero2Advan {
border-right: none;
border-top: 1px solid var(--base08);
padding-right: 0;
padding-top: 12px;
}
.hero2Advan:first-child {
border-top: none;
}
.hero2Advan__ttl {
margin-bottom: 2px;
}
.catHero {
padding: 20px 0;
margin-bottom: 30px;
}
.catHero__wr {
display: flex;
flex-direction: column;
align-items: stretch;
grid-gap: unset;
}
.catHero__cnt {
display: contents;
}
.catHero__crumbs {
order: 1;
}
.catHero__crumbs .crumbs {
margin-bottom: 20px;
}
.catHero__head {
order: 2;
margin-bottom: 8px;
}
.catHero__ttl {
margin-bottom: 8px;
}
.catHero__img {
order: 3;
justify-content: center;
margin-bottom: 20px;
}
.catHero__img img {
max-width: 560px;
}
.catHero__advan {
order: 4;
margin-bottom: 16px;
}
.catHero__advan li {
min-height: 20px;
padding-left: 28px;
}
.catHero__advan li::before {
width: 20px;
height: 20px;
}
.catHero__btn {
order: 5;
}
.catHero__btn .btn {
width: 100%;
}
.catHeroAdvan2 {
order: 5;
max-width: 100%;
padding-top: 16px;
}
.catHeroAdvan2__ic {
width: 20px;
height: 20px;
}
.seoTextBlock {
padding: 12px;
}
.seoTextBlock__txt {
-webkit-line-clamp: 6;
}
.seoTextBlock__more {
min-width: unset;
min-height: 32px !important;
padding: 4px 12px;
font-size: 12px !important;
}
.catalog {
grid-gap: 16px;
}
.catalog__wr {
display: block;
}
.catalog__list {
grid-gap: 12px;
grid-template-columns: repeat(2, 1fr);
}
.catalogMenu {
position: static;
transform: translate(-16px, 0);
width: calc(100% + 32px);
background: transparent;
border: none;
padding: 0 16px;
display: flex;
margin-bottom: 16px;
overflow-x: auto;
overflow-y: visible;
-ms-overflow-style: none;
overflow-y: scroll;
scrollbar-width: none;
}
.catalogMenu::-webkit-scrollbar {
width: 0;
height: 0;
}
.catalogMenuIt {
flex-shrink: 0;
width: auto;
background: var(--white);
border: 1px solid var(--base16);
padding: 8px 12px;
padding-right: 4px;
font-size: 14px;
margin-right: 8px;
}
.catalogMenuIt:last-child {
margin-right: 0;
}
.catalogMenuIt:last-child {
border: 1px solid var(--base16);
}
.catalogIt {
padding-bottom: 10px;
}
.catalogIt__cnt {
padding: 10px;
gap: 2px;
}
.catalogIt__price {
font-size: 16px;
}
.catalogIt__props {
gap: 0;
}
.catalogIt__props span {
width: 100%;
}
.catalogIt__props span::after {
display: none;
}
.catalogIt__controls {
padding: 0 10px;
}
.catalogItVari {
display: none;
}
.addToCart__wr {
min-height: 40px;
}
.addToCart__btn {
width: 38px;
height: 38px;
}
.addToCart__btn svg {
width: 20px;
height: 20px;
}
.addToCart__info {
min-height: 38px;
}
.addToCart__amount {
font-size: 13px;
margin-bottom: 1px;
}
.addToCart__subt {
font-size: 11px;
}
.product {
flex-direction: column;
align-items: stretch;
}
.product__cnt {
display: contents;
padding: 0;
}
.product__images {
order: 1;
margin: 0;
}
.product__data {
order: 3;
}
.product__tabs {
margin-bottom: 20px;
}
.productImages__sl {
transform: translate(-16px, 0);
width: calc(100% + 32px);
}
.productImages__pag {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
}
.productThumbs {
display: none;
}
.productInfo__ttl {
margin-bottom: 8px;
}
.productBl {
order: 2;
position: static;
transform: translate(-16px, 0);
width: calc(100% + 32px);
border-top: 1px solid var(--base08);
box-shadow: none;
padding: 20px 16px;
margin-bottom: 20px;
}
.productBl__ttl {
margin-bottom: 4px;
}
.productBl__price {
font-size: 20px;
}
.productBlVari__it {
min-height: 32px;
}
.advan1 {
grid-gap: 8px;
grid-template-columns: repeat(2, 1fr);
}
.advan1It {
padding: 12px;
padding-right: 40px;
gap: 2px;
}
.advan1It__ic {
top: 12px;
right: 12px;
width: 20px;
height: 20px;
}
.blog {
grid-gap: 20px;
}
.blog__list {
grid-column-gap: 16px;
grid-row-gap: 24px;
grid-template-columns: repeat(3, 1fr);
}
.blog__more .btn {
width: 100%;
}
.blog__mobmore {
display: block;
}
.blogSlider {
transform: translate(-16px, 0);
width: calc(100% + 32px);
padding: 0 16px;
}
.blogSlider__it {
width: 240px;
margin-right: 12px;
}
.blogSlider__it:last-child {
margin-right: 0;
}
.blogCard__img {
margin-bottom: 8px;
}
.blogCard__ttl {
margin-bottom: 2px;
}
.article__head {
margin-bottom: 20px;
}
.article__wr {
flex-direction: column;
align-items: stretch;
}
.article__cnt {
order: 2;
}
.article__right {
position: static;
flex-shrink: unset;
width: 100%;
display: contents;
margin: 0;
}
.article__controls {
order: 3;
margin-top: 24px;
}
.articleMenu {
order: 1;
padding: 16px;
margin-bottom: 24px;
}
.articleMenu__ttl {
margin-bottom: 8px;
}
.about1 {
grid-gap: 20px;
grid-template-columns: 1fr;
}
.about1__cnt {
padding-left: 0;
}
.about1__img img {
max-width: 560px;
}
.about1__ttl {
margin-bottom: 8px;
}
.about2 {
padding: 20px;
flex-direction: column;
}
.about2__cnt {
order: 2;
width: 100%;
margin-right: 0;
}
.about2__head {
margin-bottom: 20px;
}
.about2__ttl {
margin-bottom: 8px;
}
.about2__btn {
width: 100%;
}
.about2__img {
order: 1;
width: 100%;
justify-content: center;
margin-bottom: 20px;
}
.about2__img img {
max-width: 560px;
}
.reviewsBl__slider {
transform: translate(-16px, 0);
width: calc(100% + 32px);
padding: 0 16px;
}
.reviewsBl__it {
display: block;
width: 220px;
margin-right: 12px;
}
.reviewsBl__it:last-child {
margin-right: 0;
}
.avitoBanner {
padding: 20px;
flex-wrap: wrap;
}
.avitoBanner__cnt {
order: 2;
width: 100%;
margin: 0;
}
.avitoBanner__head {
margin-bottom: 20px;
}
.avitoBanner__ttl {
margin-bottom: 8px;
}
.avitoBanner__img {
order: 1;
max-width: 440px;
margin-bottom: 20px;
}
.shipping1__slider {
transform: translate(-16px, 0);
width: calc(100% + 32px);
padding: 0 16px;
}
.shipping1It {
width: 220px;
min-height: 220px;
padding: 16px;
margin-right: 12px;
}
.shipping1It:last-child {
margin-right: 0;
}
.shpPage__header {
margin-bottom: 24px;
}
.shpPage__head {
margin-bottom: 20px;
}
.shpPage__ttl {
margin-bottom: 8px;
}
.shpPage__blocks {
transform: translate(-16px, 0);
width: calc(100% + 32px);
grid-gap: 12px;
}
.shpPageBl {
padding: 16px;
}
.shpPageBl__head {
margin-bottom: 12px;
}
.shpPageBl__ic {
width: 32px;
margin-right: 12px;
}
.faq {
grid-template-columns: 1fr;
}
.faq__head {
margin: 0;
}
.faq__more {
display: block;
}
.faqIt__ttl {
min-height: 46px;
padding: 12px;
padding-right: 36px;
}
.faqIt__ttl::after {
right: 12px;
}
.faqIt__txt {
padding: 12px;
padding-top: 0;
}
.faqIt__txt p {
margin-bottom: 6px;
}
.pageForm {
padding: 20px;
grid-template-columns: 1fr;
}
.pageForm__head {
margin: 0;
}
.pageForm__ttl {
margin-bottom: 8px;
}
.pageForm__logo {
display: none;
}
.pageForm__fields {
grid-gap: 8px;
}
#contactsHero {
padding: 20px 0;
}
.contactsHero {
display: block;
}
.contactsHero__cnt {
width: 100%;
margin-right: 0;
}
.contactsHero__cnt .crumbs {
margin-bottom: 20px;
}
.contactsHero__ttl {
margin-bottom: 8px;
}
.contactsHero__list {
grid-gap: 12px;
margin-bottom: 20px;
}
.contactsHero__map {
height: 360px;
}
.contactsHero__btn .btn {
width: 100%;
}
.contactsHeroIt .h5 {
font-size: 20px;
}
#contactsReq {
padding-top: 24px;
}
.requisites__capt {
margin-bottom: 20px;
}
.requisites__wr {
grid-gap: 16px;
grid-template-columns: 1fr;
}
.requisites__it:first-child {
grid-column: unset;
}
.requisites p.requisites__ttl {
margin-bottom: 8px;
}
.errorPage__ttl {
margin-bottom: 8px;
}
.errorPage__btns {
width: 100%;
display: grid;
grid-gap: 8px;
grid-template-columns: repeat(2, 1fr);
}
.errorPage__btns .btn {
min-width: auto;
}
.calc {
border-width: 3px;
padding: 20px 16px;
}
.calc__head {
grid-gap: 8px;
grid-template-columns: 1fr;
margin-bottom: 20px;
}
.calc__subtitle {
padding-top: 0;
text-align: left;
}
.calc__subtitle br {
display: none;
}
.calc__title2 {
margin-bottom: 12px;
}
.calc__body {
grid-gap: 20px;
}
.calc__step1 {
grid-gap: 8px;
grid-template-columns: 1fr;
}
.calc__zones {
grid-gap: 8px;
grid-template-columns: repeat(2, 1fr);
}
.calc__tariffs {
grid-gap: 8px;
grid-template-columns: 1fr;
}
.calc__controls {
grid-gap: 8px;
grid-template-columns: 1fr;
}
.calcZone {
min-height: 40px;
padding: 4px 12px;
font-size: 14px;
}
.calcTariff {
min-height: 67px;
padding: 12px;
}
.calcTariff__ic {
width: 36px;
height: 36px;
}
.calcTariff__cnt {
gap: 2px;
}
.calcTable__row {
padding: 12px;
display: block;
}
.calcTable__zone {
margin-bottom: 8px;
}
.calcTable__subzones {
flex-shrink: unset;
width: 100%;
}
.calcTableH {
padding: 12px;
justify-content: space-between;
}
.calcTableH__col {
flex-shrink: unset;
}
.calcTableH__col:first-child,
.calcTableH__col:nth-child(4) {
width: auto;
}
.calcTableH__col:nth-child(2),
.calcTableH__col:nth-child(3) {
display: none;
}
.calcTableSubzone {
align-items: flex-start;
flex-wrap: wrap;
margin-bottom: 8px;
}
.calcTableSubzone__col:first-child {
order: 3;
width: 100%;
font-size: 10px;
color: var(--gray1);
}
.calcTableSubzone__col:nth-child(2) {
order: 1;
width: calc(100% - 80px);
}
.calcTableSubzone__col:nth-child(3) {
order: 2;
width: 80px;
text-align: right;
}
#calcBlockResult,
#calcBlockForm {
padding-top: 12px;
}
.calcResultH {
display: none;
}
.calcResult__rows {
padding: 0;
}
.calcResult__row {
border-bottom: 1px dashed var(--gray2);
padding: 10px;
align-items: flex-start;
justify-content: space-between;
flex-wrap: wrap;
}
.calcResult__row:last-child {
border-bottom: none;
}
.calcResult__col {
flex-shrink: unset;
}
.calcResult__col:first-child {
font-weight: 500;
margin-bottom: 4px;
}
.calcResult__col:nth-child(2),
.calcResult__col:nth-child(3) {
display: none;
}
.calcResult__col:nth-child(4) {
display: block;
font-size: 12px;
}
.calcResult__col:nth-child(5) {
width: auto;
font-weight: 500;
font-size: 12px;
}
.calcResult__btm {
padding: 10px;
display: block;
margin: 0;
}
.calcResult__descriptor {
font-size: 12px;
margin-bottom: 8px;
}
.calcForm__fields {
grid-gap: 12px;
grid-template-columns: 1fr;
margin-bottom: 12px;
}
.calcForm__agree {
margin-bottom: 12px;
}
.calcForm__controls {
grid-gap: 8px;
grid-template-columns: 1fr;
}
.cart {
transform: translate(-16px, 0);
width: calc(100% + 32px);
}
.cart__wr {
display: block;
}
.cart__ttl {
padding: 0 14px;
margin-bottom: 12px;
}
.cart__products {
box-shadow: none;
padding: 4px 16px;
margin-bottom: 12px;
}
.cart__sets {
margin-bottom: 24px;
}
.cartItem {
padding: 12px 0;
padding-left: 102px;
flex-wrap: wrap;
position: relative;
}
.cartItem__img {
position: absolute;
top: 50%;
left: 0;
transform: translate(0, -50%);
flex-shrink: unset;
width: 90px;
margin-right: 0;
}
.cartItem__name {
margin-bottom: 8px;
}
.cartItem__controls {
flex-shrink: unset;
width: calc(100% - 92px);
gap: 6px;
margin-left: 0;
}
.cartItemQuantity {
width: 90px;
height: 32px;
}
.cartItemQuantity__btn {
width: 30px;
height: 30px;
}
.cartItemQuantity__btn svg {
width: 16px;
height: 16px;
}
.cartDelete {
width: 32px;
height: 32px;
}
.cartDelete svg {
width: 16px;
height: 16px;
}
.cartItemPrice {
width: 80px;
gap: 2px;
margin-left: 12px;
}
.cartItemPrice__total {
font-size: 14px;
}
.cartItemPrice__unit {
font-size: 12px;
}
.cartSet {
border: none;
padding: 12px;
margin-bottom: 8px;
}
.cartSet__wr {
justify-content: space-between;
flex-wrap: wrap;
}
.cartSet__info {
margin-bottom: 8px;
}
.cartSet__capt {
margin-bottom: 2px;
}
.cartSet__controls {
gap: 6px;
margin: 0;
}
.cartSet__btn {
margin-top: 8px;
}
.cartSet__btn .btn {
min-height: 32px !important;
padding: 4px 16px;
font-size: 12px !important;
}
.cartSetProduct__content {
justify-content: space-between;
flex-wrap: wrap;
}
.cartSetProduct__head {
margin-bottom: 4px;
}
.cartSetProduct .cartItemPrice {
width: auto;
flex-direction: row;
}
.cartSetProduct .cartItemPrice__total {
order: 2;
font-size: 14px;
margin-left: 6px;
}
.cartSetProduct .cartItemPrice__unit {
order: 1;
font-size: 12px;
}
.orderSummary {
position: static;
width: 100%;
box-shadow: none;
padding: 16px;
grid-gap: 12px;
margin-left: 0;
}
.checkout {
transform: translate(-16px, 0);
width: calc(100% + 32px);
display: block;
}
.checkout__cnt {
grid-gap: 12px;
margin-bottom: 12px;
}
.checkout__bl {
padding: 16px;
}
.checkoutPickup__ttl {
margin-bottom: 12px;
}
.checkoutShippingPrompt__ic {
width: 32px;
height: 32px;
}
.modal {
width: 100%;
padding: 20px;
}
.modal__close {
width: 32px;
height: 32px;
}
.modal__close svg {
width: 16px;
height: 16px;
}
.modalForm__fields {
grid-gap: 8px;
}
.cookiePopup {
bottom: 0;
right: 0;
width: 100%;
border: none;
border-top: 1px solid var(--base);
}
.cookiePopup__btn {
margin-left: 8px;
}
.cartPreloader {
margin-bottom: 24px;
}
.sitemap {
grid-gap: 32px;
}
.sitemap__ttl {
margin-bottom: 12px;
}
.sitemap__wr {
grid-gap: 8px;
grid-template-columns: 1fr;
}
.sitemap__it a::before {
top: 7px;
}
}
@media (hover: hover) and (pointer: fine) {
a[href^="tel:"] {
pointer-events: none;
}
a:hover {
color: var(--base-hover);
}
.btn:hover {
background: var(--base-hover);
color: var(--white);
}
.btn_white:hover {
background: transparent;
color: var(--white);
}
.btn_white:hover .btn__ic svg {
fill: var(--white);
}
.btn_white:hover .btn__ic.stroke svg {
fill: none;
stroke: var(--white);
}
.btn_stroke:hover {
background: var(--base08);
color: var(--base);
}
input:hover {
border-bottom-color: var(--base);
}
textarea:hover {
border-bottom-color: var(--base);
}
.selectIt:hover {
background: var(--base04);
color: var(--base);
}
.citySelect__opt:not(.active):hover {
background: var(--base04);
color: var(--base);
}
.agreement:not(:has(.agreement__input:checked)):hover::before {
border-color: var(--base);
box-shadow: 0 0 0 4px rgba(41, 41, 51, 0.12);
}
.tabs__it:not(.active):hover {
color: var(--gray2);
}
.headerCnt:hover .headerCnt__txt::after {
width: 100%;
opacity: 1;
}
.headerCtg:hover .headerCtg__list {
display: block;
}
.headerCtgIt:hover {
background: var(--base04);
color: var(--base);
}
.headerCtgIt:hover .headerCtgIt__ic {
transform: translate(2px, 0);
stroke: var(--base);
}
.headerM__it:hover span::after {
width: 100%;
opacity: 1;
}
.headerCart:hover {
background: var(--base08);
}
.footerM__it:hover {
color: var(--white);
}
.footerM__it:hover span::after {
width: 100%;
opacity: 1;
}
.footerCnt__txt a:hover {
color: var(--white);
}
.footerB a:hover {
color: var(--gray2);
}
.crumbs a:hover {
color: var(--base-hover);
}
.catalogMenuIt:hover {
background: var(--base04);
color: var(--base);
}
.catalogMenuIt:hover .catalogMenuIt__ic {
transform: translate(2px, 0);
stroke: var(--base);
}
.catalogIt:hover {
transform: scale(1.02);
border-color: var(--base16);
}
.catalogItVari__it:hover {
background: var(--base);
color: var(--white);
}
.addToCart__wr:hover {
background: var(--base08);
}
.addToCart__btn:hover {
background: var(--base08);
}
.addToCart__btn:hover svg {
transform: scale(1.1);
}
.productThumbs__it:not(.active):hover {
transform: scale(1.04);
border-color: var(--base16);
}
.productBlVari__it:hover {
border-color: var(--base60);
}
.advan1It:hover {
background: var(--base04);
transform: scale(1.015);
}
.advan1It:hover .advan1It__ic {
top: 18px;
right: 18px;
}
.blogCard:hover .blogCard__img img {
transform: scale(1.1);
}
.articleMenu__list li a:hover {
color: var(--base);
}
.faqIt:hover {
border-color: var(--base);
}
.calcZone:hover {
border-color: var(--base);
}
.calcTariff:hover {
border-color: var(--base);
}
.cartItemQuantity__btn:hover {
background: var(--base08);
}
.cartItemQuantity__btn:hover svg {
transform: scale(1.1);
}
.cartDelete:hover {
border-color: var(--red);
}
.cartDelete:hover svg {
fill: var(--red);
}
.checkoutShippingTab:not(.active):hover {
border-color: var(--base);
}
.modal__close:hover {
background: var(--base);
border-color: var(--base);
}
.modal__close:hover svg {
stroke: var(--white);
}
}
@media (width < 768px) {
.header__logo span {
display: none;
}
.header__calc {
width: 40px;
padding: 0;
}
.header__calc .btn__txt {
display: none;
}
.heroAdvan br {
display: block;
}
.catalog__list {
grid-gap: 6px;
}
.catalogIt__controls {
display: block;
}
.catalogIt__controls .addToCart__add {
min-height: 32px;
padding: 4px 12px;
gap: 4px;
font-size: 13px;
}
.catalogIt__controls .addToCart__add .btn__ic {
width: 16px;
height: 16px;
}
.catalogIt__controls .addToCart__wr {
min-height: 32px;
}
.catalogIt__controls .addToCart__btn {
width: 30px;
height: 30px;
}
.catalogIt__controls .addToCart__btn svg {
width: 16px;
height: 16px;
}
.catalogIt__controls .addToCart__info {
min-height: 30px;
}
.catalogIt__controls .addToCart__amount {
font-size: 12px;
margin-bottom: 0;
}
.catalogIt__controls .addToCart__subt {
font-size: 10px;
}
.catalogIt__link {
width: 100%;
min-height: 30px !important;
padding: 4px 12px;
font-size: 12px !important;
margin-right: 0;
margin-bottom: 4px;
}
.advan1 {
grid-template-columns: 1fr;
}
.blog__list {
grid-column-gap: 8px;
grid-row-gap: 16px;
grid-template-columns: repeat(2, 1fr);
}
.checkout__fields {
grid-gap: 12px;
grid-template-columns: 1fr;
}
.checkout__field {
grid-column: unset;
}
}
@media (width >= 1199px) {
.blogSlider__wr {
display: grid;
grid-column-gap: 20px;
grid-row-gap: 32px;
grid-template-columns: repeat(4, 1fr);
}
.reviewsBl__wr {
display: grid;
grid-gap: 16px;
grid-template-columns: repeat(4, 1fr);
}
.reviewsBl__more {
display: none;
}
.shipping1__wr {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(4, 1fr);
}
.shipping1__more {
display: none;
}
}