* {
margin: 0;
padding: 0;
/* font-family: "TT Norms", Arial, sans-serif; */
font-family: "Open Sans", sans-serif;
font-size: 16px;
outline: none;
scrollbar-width: thin;
scrollbar-color: var(--color-1) #f6f6f6
}
:root {
--color-1: #3a7593;
--color-2: #4791b6;
--color-3: #071845
}
body {
position: relative;
min-height: 100vh;
background: #f6f6f6
}
.action__btn {
display: block;
width: -moz-fit-content;
width: fit-content;
padding: 10px 65px;
text-decoration: none;
background: var(--color-1);
border-radius: 10px;
font-size: 20px;
line-height: 1em;
color: #fff
}
.action__btn:hover {
color: #fff;
background: var(--color-2)
}
.action__btn.stroke {
background: none;
border: 1px solid #fff
}
.action__btn.stroke:hover {
background: #fff;
color: var(--color-1)
}
.section__title {
position: relative;
width: -moz-fit-content;
width: fit-content;
margin: 0 auto 50px;
color: #2e2f33;
font-size: 32px;
font-weight: 400;
padding-bottom: 10px
}
.section__title:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background: var(--color-1);
border-radius: 100px
}
.section__btn {
display: block;
width: -moz-fit-content;
width: fit-content;
margin: 0 auto;
padding: 10px 46px;
text-decoration: none;
color: var(--color-1);
border-radius: 10px;
border: 1px solid var(--color-1);
font-size: 20px;
line-height: 1em
}
.section__btn:hover {
background: var(--color-1);
color: #fff
}
.modalwindow {
position: fixed;
display: flex;
align-items: center;
justify-content: center;
inset: 0;
z-index: 20;
background: rgba(0, 0, 0, .5333333333);
opacity: 0;
pointer-events: none;
transition: .3s ease;
margin: 0 !important;
}
.modalwindow.active {
opacity: 1;
pointer-events: auto
}
.modalwindow__title {
text-align: center;
text-transform: uppercase;
font-size: 24px
}
.modalwindow__panel {
position: relative;
width: 95%;
max-width: 480px;
background: #f6f6f6;
border-radius: 10px;
padding: 20px;
border-radius: 10px
}
.modalwindow form input {
width: 100%;
border: none;
padding: 10px 20px;
border-radius: 10px
}
.modalwindow form button {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
background: var(--color-1);
color: #fff;
font-weight: 700;
font-size: 18px;
margin-top: 20px;
border: none;
padding: 10px;
border-radius: 10px
}
.modalwindow__close {
position: absolute;
top: 20px;
right: 20px;
width: 20px;
aspect-ratio: 1/1;
background: var(--color-1);
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
cursor: pointer
}
.modalwindow__close:hover {
background: var(--color-2)
}
.header {
position: sticky;
top: 0;
transition: top .3s ease;
will-change: top;
z-index: 15
}
.header__top {
padding: 22px 0 19px;
background: #f6f6f6
}
.header__container {
position: relative;
width: 95%;
max-width: 1620px;
margin: 0 auto
}
.header .header__container {
display: flex;
align-items: center;
justify-content: space-between
}
.header__logo {
width: 100%;
max-width: 213px
}
.header__logo_img {
display: block;
height: unset;
width: 100%;
aspect-ratio: 213/64;
-o-object-fit: contain;
object-fit: contain;
-o-object-position: center left;
object-position: center left
}
.header__search {
display: flex;
justify-content: space-between;
background: #fff;
width: 45.8vw;
padding: 7px;
border-radius: 10px;
gap: 12px
}
.header__search span {
position: relative
}
.header__search span:after {
content: "";
display: block;
position: absolute;
background: var(--color-1);
width: 14px;
height: 8px;
top: 50%;
right: 22px;
transform: translateY(-50%);
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center
}
.header__search select {
padding: 5px 87px 5px 15px;
border: none;
border-radius: 10px;
background: #f6f6f6;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-size: 16px;
font-weight: 400
}
.header__search input[type=text] {
width: 100%;
font-size: 16px;
color: #111;
padding: 0;
border: none;
background: none;
text-overflow: ellipsis;
padding-left: 20px;
}
.header__search button {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 5px 18px 5px 17px;
background: var(--color-1);
border: none;
border-radius: 10px;
color: #fff
}
.header__search button:before {
content: "";
position: relative;
display: block;
width: 12px;
aspect-ratio: 1/1;
background: #fff;
-webkit-mask-image: url("../img/icons/search.svg");
mask-image: url("../img/icons/search.svg");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center center;
mask-position: center center;
-webkit-mask-size: contain;
mask-size: contain
}
.header__search button:hover {
background: var(--color-2)
}
.header__info {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px
}
.header__phone {
font-size: 24px;
line-height: 1em;
font-weight: 700;
text-decoration: none;
color: var(--color-1)
}
.header__phone:hover {
color: var(--color-2)
}
.header__email {
font-size: 14px;
line-height: 1em;
font-weight: 700;
color: #999
}
.header__email a {
font: inherit;
text-decoration: none;
color: #111
}
.header__email a:hover {
color: var(--color-2)
}
.header__btns {
display: flex;
align-items: center;
gap: 34px
}
.header__btns_btn {
position: relative;
display: block;
height: 27px;
width: 24px
}
.header__btns_btn:before {
content: "";
position: relative;
display: block;
width: 100%;
height: 100%;
background: #111;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center center;
mask-position: center center
}
.header__btns_btn:after {
content: attr(data-count);
position: absolute;
top: 0;
right: 0;
background: var(--color-1);
aspect-ratio: 1/1;
width: 21px;
height: 21px;
transform: translate(50%, -50%);
border-radius: 50%;
color: #fff;
text-align: center;
line-height: 21px;
font-size: 14px
}
.header__btns_favorite:before {
-webkit-mask-image: url("../img/icons/heart.svg");
mask-image: url("../img/icons/heart.svg")
}
.header__btns_cart:before {
-webkit-mask-image: url("../img/icons/basket.svg");
mask-image: url("../img/icons/basket.svg")
}
#headerCart {
display: contents;
}
.header__bottom {
background: #fff
}
.header__nav {
display: flex;
padding-left: 0;
margin-bottom: 0;
list-style: none;
width: 100%
}
.header__nav li {
position: relative;
width: 100%
}
.header__nav li:nth-child(1) a {
display: flex;
background: var(--color-1);
color: #fff;
font-size: 24px;
gap: 18px
}
.header__nav li:nth-child(1) a:before {
content: "";
width: 31px;
aspect-ratio: 31/22;
background: #fff;
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain
}
.header__nav li:nth-child(1) a:hover {
background: var(--color-2)
}
.header__nav a {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
text-decoration: none;
padding: 18px 0;
font-size: 18px;
line-height: 1em;
color: #111;
height: 100%
}
.header__nav a:hover {
background: var(--color-1);
color: #fff
}
.main--slider {
position: relative;
margin: 30px 0 100px
}
.main--slider__slide {
position: relative;
display: flex;
align-items: center;
justify-content: flex-start;
aspect-ratio: 1620/500
}
.main--slider__slide_img {
position: absolute;
display: block;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
inset: 0;
border-radius: 10px;
}
.main--slider__slide h4 {
color: #2e2f33;
margin-bottom: 15px;
font-size: 50px;
font-weight: 700
}
.main--slider__slide h5 {
font-size: 20px;
font-weight: 500;
color: #b3b3b3;
text-transform: uppercase;
margin-bottom: 29px
}
.main--slider__slide span {
display: block;
font-weight: 500;
font-size: 20px;
line-height: 1.2em;
margin-bottom: 35px
}
.main--slider__slide span span {
display: inline-block;
font-size: 24px;
margin-top: -20px;
margin-bottom: 0
}
.main--slider>.header__container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
height: 50px;
pointer-events: none
}
.main--slider .container {
position: relative;
z-index: 1
}
.main--slider .swiper-pagination {
bottom: 47px
}
.swiper-button-prev,
.swiper-button-next {
position: absolute;
top: 50%;
width: 50px;
height: 50px;
background: #fff;
border-radius: 50%;
border: 1px solid #eef2f9;
transform: translateY(-50%);
margin-top: 0;
pointer-events: auto
}
.swiper-button-prev:after,
.swiper-button-next:after {
content: "";
top: 50%;
left: 50%;
width: 17px;
height: 8px;
background: var(--color-1);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center
}
.swiper-button-next:before,
.swiper-button-prev:before {
content: unset;
}
.swiper-button-prev:hover,
.swiper-button-next:hover {
border: none;
background: var(--color-1)
}
.swiper-button-prev:hover:after,
.swiper-button-next:hover:after {
background: #fff
}
.swiper-button-prev {
left: 0
}
.swiper-button-prev:after {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,')
}
.swiper-button-next {
right: 0
}
.swiper-button-next:after {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,')
}
.swiper-pagination {
position: relative;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
gap: 30px
}
.swiper-pagination-bullet {
position: relative;
display: block;
margin: 0 !important;
opacity: 1;
background: #b3b3b3;
width: 10px;
height: 10px;
aspect-ratio: 1;
}
.swiper-pagination-bullet:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
display: block;
width: 100%;
aspect-ratio: 1;
border: 1px solid var(--color-1);
border-radius: 50%;
padding: 6px;
box-sizing: content-box;
transform: translate(-50%, -50%) scale(0);
transition: .3s ease
}
.swiper-pagination-bullet.swiper-pagination-bullet-active {
background: var(--color-1)
}
.swiper-pagination-bullet.swiper-pagination-bullet-active:after {
transform: translate(-50%, -50%) scale(1)
}
.catalog--list {
margin: 100px 0
}
.catalog--list.main--page .catalog--list__grid .catalog--list__item {
grid-column: unset !important;
grid-row: unset !important;
}
.catalog--list.main--page .catalog--list__grid .catalog--list__item img {
height: 100%;
}
.catalog--list__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin-bottom: 50px
}
.catalog--list__grid.archive {
margin-bottom: 24px
}
.catalog--list__item {
position: relative;
border-radius: 10px;
overflow: hidden
}
.catalog--list__item:before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background: linear-gradient(to bottom, var(--color-1), var(--color-3));
opacity: 0;
transition: .3s ease;
}
.catalog--list__item:hover:before {
opacity: 0.7;
}
.catalog--list__item:nth-child(3) {
grid-column: 3/5;
grid-row: 1/3
}
.catalog--list__item:nth-child(4) {
grid-column: 1/3;
grid-row: 2/4
}
.catalog--list__item_img {
display: block;
max-width: 100%;
height: unset;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center
}
.catalog--list__item:nth-child(1) .catalog--list__item_img,
.catalog--list__item:nth-child(2) .catalog--list__item_img,
.catalog--list__item:nth-child(5) .catalog--list__item_img,
.catalog--list__item:nth-child(6) .catalog--list__item_img {
aspect-ratio: 306/236
}
.catalog--list__item:nth-child(3) .catalog--list__item_img,
.catalog--list__item:nth-child(4) .catalog--list__item_img {
aspect-ratio: 636/520
}
.catalog--list__item_data {
position: absolute;
bottom: 30px;
left: 25px;
z-index: 1
}
.catalog--list__item_name {
display: block;
text-transform: uppercase;
font-size: 24px;
color: #fff;
font-weight: 700;
margin-bottom: 0;
transform: translateY(46px);
transition: .3s linear;
text-shadow: 0 0 8px #0004, 0 0 3px #0004;
}
.catalog--list__item:hover .catalog--list__item_name {
transform: translateY(0)
}
.catalog--list__item_list {
display: none;
gap: 11px;
color: #fff;
padding-left: 20px;
transition: .5s linear;
margin: 0;
opacity: 0;
max-height: 0px
}
.catalog--list__item:nth-child(3) .catalog--list__item_list,
.catalog--list__item:nth-child(4) .catalog--list__item_list {
display: grid;
}
.catalog--list__item_list a {
color: #fff;
text-decoration: none;
font-size: 16px;
font-weight: 500
}
.catalog--list__item_list a:hover {
color: var(--color-1)
}
.catalog--list__item:hover .catalog--list__item_list {
margin: 20px 0 40px;
max-height: 500px;
opacity: 1
}
.catalog--list__item .action__btn {
margin-top: 0px;
opacity: 0;
transition: transform .3s linear, opacity .3s linear, margin-top .3s linear;
transform: translateY(46px)
}
.catalog--list__item:hover .action__btn {
opacity: 1;
margin-top: 40px;
transform: translateY(0)
}
.products--slider {
padding: 100px 0;
background: #fff
}
.products--slider__wrapper {
position: relative
}
.products--slider__wrapper .swiper-wrapper {
padding-bottom: 30px
}
.product--card {
position: relative;
box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0);
transition: .3s ease;
padding-bottom: 20px
}
.product--card__stock {
position: absolute;
top: 10px;
left: 20px;
text-transform: uppercase;
color: #373a3c;
font-size: 14px;
line-height: 1em
}
.product--card__favorite {
position: absolute;
top: 10px;
right: 20px;
width: 26px;
height: 24px;
background: #cecece;
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
transition: .3s ease;
opacity: 0
}
.product--card__favorite:hover {
background: var(--color-1)
}
.product--card__thumb {
display: block;
padding: 30px 28px;
background: #f6f6f6
}
.product--card__thumb_wrapper {
position: relative
}
.product--card__thumb_img {
display: block;
width: 100%;
height: unset;
aspect-ratio: 1/1;
-o-object-fit: contain;
object-fit: contain;
-o-object-position: center;
object-position: center
}
.product--card__title {
display: block;
margin-top: 20px;
text-align: center;
padding: 0 20px;
text-decoration: none;
color: #2e2f33;
font-size: 18px;
font-weight: 500;
line-height: 1em;
margin-bottom: 4px;
min-height: 2em
}
.product--card__title:hover {
color: inherit
}
.product--card__sku {
display: block;
text-align: center;
color: #b2b2b2;
font-size: 14px;
line-height: 1.28em;
margin-bottom: 36px
}
.product--card__desc {
display: none
}
.product--card__price {
position: relative;
display: block;
margin: 0 auto;
margin: 0 20px;
text-align: center;
transition: .3s ease;
color: rgba(0, 0, 0, 0);
font-size: 20px;
font-weight: 500;
line-height: .9em
}
.product--card__price:before {
content: attr(data-oldprice);
position: absolute;
left: 50%;
top: -8px;
transform: translateY(-100%) translateX(-50%);
color: #b2b2b2;
font-size: 16px;
line-height: 1.125em;
font-weight: 500;
text-decoration: line-through;
transition: .3s ease;
white-space: nowrap
}
.product--card__price:after {
content: attr(data-price);
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
font: inherit;
color: #2e2f33;
transition: .3s ease;
white-space: nowrap
}
.product--card__addcart {
position: absolute;
right: 20px;
bottom: 20px;
width: 42px;
aspect-ratio: 1/1;
background: var(--color-1);
border-radius: 50%;
cursor: pointer;
opacity: 0;
transition: .3s ease
}
.product--card__addcart:hover {
background: var(--color-2)
}
.product--card__addcart:before {
content: "";
position: absolute;
display: block;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 20px;
aspect-ratio: 1/1;
background: #fff;
-webkit-mask-image: url("../img/icons/basket.svg");
mask-image: url("../img/icons/basket.svg");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain
}
.product--card:hover {
box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1)
}
.product--card:hover .product--card__favorite {
opacity: 1;
cursor: pointer
}
.product--card:hover .product--card__price:before {
left: 0;
transform: translateY(-100%) translateX(0%)
}
.product--card:hover .product--card__price:after {
left: 0;
transform: translateX(0)
}
.product--card:hover .product--card__addcart {
opacity: 1
}
.about--desc {
margin: 100px 0 150px
}
.about--desc h1:not(.section__title),
.about--desc h2:not(.section__title),
.about--desc h3:not(.section__title),
.about--desc h4:not(.section__title),
.about--desc h5:not(.section__title),
.about--desc h6:not(.section__title) {
font-size: 40px;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 30px;
color: #2e2f33
}
.about--desc h1:not(.section__title) span,
.about--desc h2:not(.section__title) span,
.about--desc h3:not(.section__title) span,
.about--desc h4:not(.section__title) span,
.about--desc h5:not(.section__title) span,
.about--desc h6:not(.section__title) span {
font: inherit;
color: var(--color-1)
}
.about--desc p {
margin: 30px 0;
font-size: 16px;
line-height: 1.375em;
color: #2e2f33
}
.about--desc .col-lg-6 {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 24px
}
.about--desc .col-lg-6 img {
width: 100%;
height: unset;
aspect-ratio: 306/289;
box-shadow: 5px 10px 30px 0 rgba(58, 117, 147, .2)
}
.about--desc .col-lg-6 img:nth-child(1) {
grid-column: 1/4;
grid-row: 1/7
}
.about--desc .col-lg-6 img:nth-child(2) {
grid-column: 4/6;
grid-row: 2/6
}
.about--desc .col-lg-6 img:nth-child(3) {
grid-column: 2/4;
grid-row: 7/11
}
.about--desc .col-lg-6 img:nth-child(4) {
grid-column: 4/7;
grid-row: 6/12
}
.container .swiper-button-prev {
transform: translate(-50%, -50%)
}
.container .swiper-button-next {
transform: translate(50%, -50%)
}
.brands {
padding: 100px 0;
background: #fff
}
.brands__wrapper {
position: relative
}
.brands a {
display: block
}
.brands a img {
-o-object-fit: contain;
object-fit: contain;
-o-object-position: center;
object-position: center;
width: 100%;
height: unset;
aspect-ratio: 306/84
}
.brands a:hover {
box-shadow: 0 20px 20px 0 rgba(0, 0, 0, .1)
}
.last--news {
margin: 100px 0
}
.last--news__wrapper {
position: relative;
margin-bottom: 50px;
}
.last--news__item {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
background: #fff;
border-radius: 10px
}
.last--news__item_img {
display: block;
width: 100%;
height: unset;
aspect-ratio: 306/201;
border-radius: 10px 0 0 10px;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center
}
.last--news__item_data {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 12px 26px 15px
}
.last--news__item_date {
display: flex;
align-items: center;
gap: 5px;
font-size: 14px;
line-height: 1em;
color: #11141a;
margin-bottom: 10px
}
.last--news__item_date:before {
content: "";
width: 14px;
aspect-ratio: 1/1;
background: var(--color-1);
-webkit-mask-image: url("../img/icons/calendar.svg");
mask-image: url("../img/icons/calendar.svg");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain
}
.last--news__item_name {
display: block;
font-size: 20px;
font-weight: 500;
color: #11141a;
margin-bottom: 10px;
line-height: 1.2em
}
.last--news__item_desc {
display: -webkit-box;
font-size: 16px;
line-height: 1.125em;
margin-bottom: auto;
box-orient: vertical;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
overflow: hidden;
line-clamp: 4;
-webkit-line-clamp: 4;
-moz-line-clamp: 4
}
.last--news__item_link {
color: var(--color-1);
text-decoration: none;
font-size: 16px;
line-height: 1em;
font-weight: 700;
margin-top: 16px
}
.last--news__item_link:hover {
color: var(--color-2)
}
.footer {
background: #fff;
border-top: 1px solid var(--color-1);
padding: 65px 0 50px
}
.footer__top {
padding-bottom: 48px;
margin-bottom: 30px;
border-bottom: 1px solid #f6f6f6
}
.footer__top_grid {
display: grid;
grid-template-columns: 7fr 2fr 3fr;
gap: 24px
}
.footer__ul:nth-child(1) ul {
gap: 10px 24px;
grid-template-columns: repeat(2, 2fr) 3fr;
align-items: flex-start
}
.footer__ul ul {
display: grid;
margin-bottom: 0;
padding-left: 0;
list-style: none;
gap: 8px
}
.footer__ul ul a {
display: block;
width: -moz-fit-content;
width: fit-content;
text-decoration: none;
color: #2e2f33;
font-size: 16px;
line-height: 1.5em
}
.footer__ul ul a:hover {
color: var(--color-1)
}
.footer__caption {
display: block;
width: -moz-fit-content;
width: fit-content;
margin-bottom: 20px;
font-size: 18px;
line-height: 1.22em;
font-weight: 700
}
.footer__contacts {
display: grid;
gap: 16px !important
}
.footer__contacts li {
display: grid;
grid-template-columns: 24px 1fr;
gap: 10px;
align-items: flex-start
}
.footer__contacts li span {
display: grid;
gap: 3px
}
.footer__contacts li:before {
content: "";
position: relative;
display: block;
width: 100%;
aspect-ratio: 1/1;
background: var(--color-1);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain
}
.footer__contacts_phone:before {
-webkit-mask-image: url("../img/icons/phone.svg");
mask-image: url("../img/icons/phone.svg")
}
.footer__contacts_phone span a {
font-size: 18px;
line-height: 1em;
color: #7d7d79
}
.footer__contacts_phone span a:nth-child(1) {
font-weight: 700;
color: #2e2f33
}
.footer__contacts_phone span a:hover {
color: var(--color-1)
}
.footer__contacts_mail:before {
-webkit-mask-image: url("../img/icons/mail.svg");
mask-image: url("../img/icons/mail.svg")
}
.footer__contacts_mail span a {
font-size: 18px;
line-height: 1em;
color: #7d7d79;
text-decoration: underline
}
.footer__contacts_mail span a:nth-child(1) {
font-weight: 700;
color: #2e2f33
}
.footer__contacts_mail span a:hover {
color: var(--color-1)
}
.footer__contacts_address:before {
-webkit-mask-image: url("../img/icons/mapmark.svg");
mask-image: url("../img/icons/mapmark.svg")
}
.footer__contacts_address span a {
font-size: 18px;
font-weight: 4000;
color: #7d7d79
}
.footer__bottom_grid {
display: grid;
grid-template-columns: 1fr 3fr;
align-items: center;
gap: 24px
}
.footer__logo {
display: block;
width: -moz-fit-content;
width: fit-content
}
.footer__logo_img {
width: 100%;
max-width: 213px;
height: unset;
-o-object-fit: contain;
object-fit: contain;
-o-object-position: center;
object-position: center
}
.footer__politic span {
display: block;
font-size: 14px;
font-weight: 500;
color: #2e2f33;
line-height: normal;
margin-bottom: 5px
}
.footer__politic a {
display: block;
width: -moz-fit-content;
width: fit-content;
font-size: 12px;
font-weight: 700;
color: #2e2f33
}
.footer__politic a:hover {
color: var(--color-1)
}
.breadcrumbs {
margin: 50px 0 30px;
}
.breadcrumbs+section {
margin-top: 0;
}
.breadcrumbs ul {
display: flex;
align-items: center;
list-style: none;
padding-left: 0;
margin-bottom: 30px
}
.breadcrumbs ul li:not(:last-child):after {
content: ">";
display: inline-block;
font: inherit;
line-height: 1em;
margin: 0 .3em
}
.breadcrumbs ul a,
.breadcrumbs ul span {
font-size: 18px;
line-height: 1em
}
.breadcrumbs ul a {
color: #111;
text-decoration: none
}
.breadcrumbs ul li:last-child a,
.breadcrumbs ul a:hover {
color: var(--color-1)
}
.breadcrumbs ul span {
color: var(--color-1)
}
.subcategories {
margin: 50px 0 100px
}
.subcategories__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px
}
.subcategories__item {
display: grid;
grid-template-columns: 72px 1fr;
align-items: center;
gap: 9px;
padding: 5px;
background: #fff;
border-radius: 10px;
text-decoration: none
}
.subcategories__item img {
display: block;
width: 100%;
height: unset;
aspect-ratio: 72/56;
border-radius: 10px;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center
}
.subcategories__item span {
font-size: 16px;
line-height: normal;
color: #2e2f33
}
.subcategories__item:hover span {
color: var(--color-1)
}
.catalog--products {
padding: 100px 0 100px;
background: #fff
}
.catalog--products__grid {
display: grid;
grid-template-columns: 1fr 3fr;
gap: 24px
}
.catalog--products__filters_caption {
display: block;
margin-bottom: 48px;
font-size: 24px;
font-weight: 500;
text-transform: uppercase
}
.catalog--products__filters_group {
border-bottom: 1px solid #f0f0f0
}
.catalog--products__filters_group>label {
position: relative;
display: block;
font-size: 18px;
font-weight: 400;
color: #2e2f33;
padding: 20px 0;
cursor: pointer
}
.catalog--products__filters_group>label:after {
content: "";
position: absolute;
top: 50%;
right: 0;
border-left: 6px solid rgba(0, 0, 0, 0);
border-right: 6px solid rgba(0, 0, 0, 0);
border-top: 8px solid var(--color-1);
transition: .3s ease
}
.catalog--products__filters_group>label:hover:after {
border-top-color: var(--color-2)
}
.catalog--products__filters_group>label~div {
display: none
}
.catalog--products__filters_group>input:checked~label~div {
display: block
}
.catalog--products__filters_group ul {
display: grid;
gap: 10px;
list-style: none;
margin-bottom: 20px;
padding-left: 32px
}
.catalog--products__filters_group ul li {
display: grid;
grid-template-columns: 24px 1fr;
gap: 20px;
align-items: center
}
.catalog--products__filters_group ul input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 24px;
height: 24px;
background: #fff;
border-radius: 2px;
border: 1px solid #f0f0f0;
cursor: pointer
}
.catalog--products__filters_group ul input:checked {
border: none;
background: url('data:image/svg+xml;utf8,') no-repeat center center, var(--color-1)
}
.catalog--products__filters_group ul label {
display: block;
font-size: 18px;
font-weight: 400;
color: #575757;
width: -moz-fit-content;
width: fit-content;
cursor: pointer
}
.catalog--products__filters_group>input:checked~label~div.catalog--products__filters_price {
display: flex;
}
.catalog--products__filters_price {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
border: 1px solid #f0f0f0;
margin-bottom: 20px;
border-radius: 10px;
padding: 25px 20px 20px
}
.catalog--products__filters_price span {
font-size: 16px;
color: #575757;
line-height: 1em
}
.catalog--products__filters_price--range {
position: absolute;
bottom: 0;
left: 20px;
right: 20px;
height: 4px;
background: linear-gradient(to right, #999999 0%, var(--color-1) 0%, var(--color-1) 100%, #999999 100%);
border-radius: 100px;
transform: translateY(50%)
}
.catalog--products__filters_price--range input {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
right: 0;
pointer-events: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: none
}
.catalog--products__filters_price--range input::-webkit-slider-thumb {
appearance: none;
-webkit-appearance: none;
display: block;
width: 16px;
height: 16px;
border-radius: 50%;
border: 1px solid #fff;
background-color: var(--color-1);
pointer-events: all
}
.catalog--products__filters_price--range input::-webkit-slider-runnable-track {
appearance: none;
-webkit-appearance: none
}
.catalog--products__filters_order {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 0
}
.catalog--products__filters_order label {
cursor: pointer
}
.catalog--products__filters_order input {
width: 43px;
aspect-ratio: 43/23;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: radial-gradient(19px 19px at 12px, #fff 50%, rgba(255, 255, 255, 0) 55%), linear-gradient(to right, #999999, #999999);
border-radius: 100px;
cursor: pointer
}
.catalog--products__filters_order input:checked {
background: radial-gradient(19px 19px at calc(100% - 12px), #fff 50%, rgba(255, 255, 255, 0) 55%), linear-gradient(to right, var(--color-1), var(--color-1))
}
.catalog--products__filters_send {
display: block;
text-align: center;
width: 100%;
margin: 20px 0;
padding: 15px 0;
border: none;
text-decoration: none;
background: var(--color-1);
border-radius: 10px;
color: #fff;
font-size: 20px;
line-height: 1em;
font-weight: 400
}
.catalog--products__filters_send:hover {
background: var(--color-2)
}
.catalog--products__filters_reset {
display: block;
text-align: center;
width: 100%;
margin: 20px 0;
padding: 15px 0;
border: none;
text-decoration: none;
background: #fff;
border: 1px solid var(--color-1);
color: var(--color-1);
border-radius: 10px;
font-size: 20px;
line-height: 1em;
font-weight: 400
}
.catalog--products__filters_reset:hover {
color: #fff;
background: var(--color-1)
}
.catalog--products__top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 50px;
gap: 99px
}
.catalog--products label {
color: #373a3c;
font-size: 18px;
line-height: 1em
}
.catalog--products__sort {
position: relative
}
.catalog--products__sort select {
border: none;
font: inherit;
color: inherit;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding-right: 18px;
cursor: pointer;
background: url('data:image/svg+xml;utf8,') no-repeat center right
}
.catalog--products__count {
position: relative
}
.catalog--products__count:after {
content: "";
position: absolute;
right: 9px;
top: 50%;
transform: translateY(-50%);
width: 12px;
height: 8px;
background-color: var(--color-1);
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
pointer-events: none
}
.catalog--products__count select {
display: inline-block;
margin-left: 10px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
padding: 10px 30px 10px 10px;
border: 1px solid #f0f0f0;
border-radius: 4px;
font-size: 14px;
font-weight: 500;
color: var(--color-1)
}
.catalog--products__viewmode {
display: flex;
align-items: center;
gap: 18px;
margin-right: auto
}
.catalog--products__viewmode_btn {
position: relative;
width: 34px;
aspect-ratio: 1/1;
display: block;
border: 1px solid #999;
border-radius: 4px
}
.catalog--products__viewmode_btn:before {
content: "";
position: absolute;
display: block;
top: 50%;
left: 50%;
background: #999;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
transform: translate(-50%, -50%)
}
.catalog--products__viewmode_btn.grid:before {
width: 16px;
aspect-ratio: 1/1;
-webkit-mask-image: url("../img/icons/catalog-grid-1.svg");
mask-image: url("../img/icons/catalog-grid-1.svg")
}
.catalog--products__viewmode_btn.list:before {
width: 22px;
aspect-ratio: 22/12;
-webkit-mask-image: url("../img/icons/catalog-grid-2.svg");
mask-image: url("../img/icons/catalog-grid-2.svg")
}
.catalog--products__viewmode_btn.active,
.catalog--products__viewmode_btn:hover {
background: var(--color-1);
border-color: var(--color-1);
cursor: pointer
}
.catalog--products__viewmode_btn.active:before,
.catalog--products__viewmode_btn:hover:before {
background: #fff
}
.catalog--products__items.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 4px 24px
}
.catalog--products__items.list {
display: grid;
gap: 24px
}
.catalog--products__items.list .product--card {
display: grid;
grid-template-columns: 1.2fr 2fr;
gap: 0 24px;
align-items: center;
padding-bottom: 0
}
.catalog--products__items.list .product--card__thumb {
height: 100%
}
.catalog--products__items.list .product--card__thumb_wrapper {
grid-column: 1/2;
margin-bottom: 0;
height: 100%
}
.catalog--products__items.list .product--card__title {
text-align: left;
font-size: 20px;
line-height: 1.2em;
margin-bottom: 20px;
min-height: 2.4em
}
.catalog--products__items.list .product--card__sku {
text-align: left;
padding-left: 20px
}
.catalog--products__items.list .product--card__desc {
display: -webkit-box;
box-orient: vertical;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
line-clamp: 6;
-webkit-line-clamp: 6;
-moz-line-clamp: 6;
margin-bottom: 50px;
padding: 0 20px
}
.catalog--products__items.list .product--card__data {
position: relative
}
.catalog--products__items.list .product--card__addcart {
bottom: 30px;
opacity: 1;
width: unset;
aspect-ratio: unset;
border-radius: 1000px;
padding: 10px 20px 10px 50px
}
.catalog--products__items.list .product--card__addcart:before {
left: 20px;
transform: translateY(-50%)
}
.catalog--products__items.list .product--card__addcart:after {
content: "Добавить в корзину";
font-weight: 500;
color: #fff
}
.catalog--products__items.list .product--card__price {
margin-bottom: 30px
}
.catalog--products__items.list .product--card__price:after {
left: 0;
transform: translateX(0)
}
.catalog--products__items.list .product--card__price:before {
left: 0;
transform: translate(0, -100%)
}
.catalog--products__pagination {
margin-top: 50px
}
.pagination {
display: flex;
width: -moz-fit-content;
width: fit-content;
gap: 15px;
margin: 0 auto
}
.pagination li span,
.pagination li a {
display: block;
width: 34px;
height: 34px;
line-height: 34px;
border-radius: 50%;
text-align: center;
text-decoration: none
}
.pagination li a {
color: #b2b2b2;
border: 1px solid #f0f0f0;
font-size: 18px
}
.pagination li a:hover {
font-size: 20px;
background: var(--color-1);
color: #fff;
font-weight: 500
}
.pagination li.active span {
font-size: 20px;
background: var(--color-1);
color: #fff;
font-weight: 500
}
.single--product {
margin-bottom: 100px
}
.single--product__title {
font-size: 32px;
font-weight: 400;
color: #2e2f33
}
.single--product__favorite {
display: grid;
grid-template-columns: 20px 1fr;
align-items: center;
gap: 13px;
color: #999;
text-decoration: none;
font-size: 16px;
line-height: 1em;
cursor: pointer;
}
.single--product__favorite:before {
content: "";
display: block;
width: 100%;
aspect-ratio: 1/1;
background: #999;
-webkit-mask-image: url("../img/icons/heart.svg");
mask-image: url("../img/icons/heart.svg");
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center
}
.single--product__favorite:hover {
color: var(--color-1)
}
.single--product__favorite:hover:before {
background: var(--color-1)
}
.single--product .col-12 {
margin-bottom: 50px
}
.single--product__thumb {
position: relative;
background: #f6f6f6;
border-radius: 10px;
border: 1px solid #cecece;
padding-top: 50px;
}
.single--product__thumb img {
display: block;
aspect-ratio: 526/420;
width: 100%;
height: unset;
-o-object-fit: contain;
object-fit: contain;
-o-object-position: center;
object-position: center
}
.single--product__thumb .swiper-pagination {
position: absolute;
bottom: 20px;
gap: 16px
}
.single--product__thumb .swiper-pagination .swiper-pagination-bullet {
width: 46px;
height: unset;
aspect-ratio: 1/1;
border-radius: 10px;
background-color: #fff;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
border: 1px solid #cecece;
opacity: .5;
transition: .3s ease
}
.single--product__thumb .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
opacity: 1
}
.single--product__thumb .swiper-pagination .swiper-pagination-bullet:after {
content: unset
}
.single--product__sku {
position: absolute;
top: 20px;
left: 20px;
font-size: 16px;
font-weight: 500;
line-height: 1.125em;
color: #b2b2b2;
z-index: 2
}
.single--product__stock {
position: absolute;
top: 20px;
right: 20px;
color: var(--color-1);
font-size: 16px;
line-height: 1.125em;
font-weight: 500;
z-index: 2
}
.single--product__grid {
display: grid;
grid-template-columns: 3fr 4fr;
border: 1px solid #cecece;
background: #f6f6f6;
border-radius: 10px;
overflow: hidden
}
.single--product__data {
padding: 30px 25px 40px 30px
}
.single--product__specials {
width: 100%;
margin-bottom: 30px
}
.single--product__specials td {
font-size: 16px;
line-height: 1em
}
.single--product__specials td:nth-child(1) {
color: #999
}
.single--product__specials td:nth-child(2) {
text-align: right
}
.single--product__specials tr:not(:last-child) td {
padding-bottom: 1em
}
.single--product__desc {
padding-top: 30px;
border-top: 1px solid #cecece;
font-size: 16px;
line-height: 1.375em;
color: #2e2f33
}
.single--product__actions {
padding: 28px 28px 40px 28px;
background: #f0f0f0
}
.single--product__actions_btns {
display: grid;
grid-template-columns: 211fr 123fr;
gap: 24px;
padding-bottom: 40px;
margin-bottom: 30px;
border-bottom: 1px solid #cecece
}
.single--product__actions_btns .action__btn {
display: block;
text-align: center;
width: 100%;
padding: 14px 0;
font-size: 20px;
line-height: 1em;
cursor: pointer;
}
.single--product__actions table {
width: 100%
}
.single--product__actions table td {
font-size: 16px;
line-height: 1em
}
.single--product__actions table td:nth-child(1) {
color: var(--color-1);
font-weight: 400
}
.single--product__actions table td:nth-child(2) {
color: #2e2f33;
font-weight: 500;
text-align: right
}
.single--product__actions table td:nth-child(2) input {
display: block;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 24px;
height: 24px;
border: 1px solid #b9b9b9;
border-radius: 2px;
margin-left: auto;
cursor: pointer
}
.single--product__actions table td:nth-child(2) input:checked {
border: none;
background: url('data:image/svg+xml;utf8,') no-repeat center center, var(--color-1)
}
.single--product__actions table tr:not(:last-child) td {
padding-bottom: 1.375em
}
.single--product__price {
display: block;
width: -moz-fit-content;
width: fit-content;
font-weight: 700;
font-size: 24px;
color: #2e2f33;
margin-bottom: 27px
}
.single--product__price:after {
content: attr(data-oldprice);
font-size: 16px;
text-decoration: line-through;
color: #818181
}
.single--product__price_name {
display: block;
width: -moz-fit-content;
width: fit-content;
font-size: 16px;
line-height: 1em;
color: #999;
margin-bottom: 10px
}
.single--product__counter {
display: grid;
grid-template-columns: 36px 1fr 36px;
width: 100%
}
.single--product__counter span {
position: relative;
display: block;
aspect-ratio: 36/52;
background: #d9d9d9;
border: 1px solid #cecece;
cursor: pointer
}
.single--product__counter span:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
background: #818181;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain
}
.single--product__counter span:first-child {
border-radius: 10px 0 0 10px
}
.single--product__counter span:first-child:before {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,')
}
.single--product__counter span:last-child {
border-radius: 0 10px 10px 0
}
.single--product__counter span:last-child:before {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,')
}
.single--product__counter span:hover {
background: var(--color-1)
}
.single--product__counter span:hover:before {
background: #fff
}
.single--product__counter input {
width: 100%;
text-align: center;
background: none;
border: none;
border-top: 1px solid #cecece;
border-bottom: 1px solid #cecece;
text-overflow: ellipsis;
overflow: hidden;
padding: 0 4px
}
.single--product__counter input::-webkit-inner-spin-button,
.single--product__counter input::-webkit-outer-spin-button {
display: none
}
.product--tabs {
padding: 100px 0 50px;
background: #fff
}
.product--tabs__tabs {
display: flex;
background: #f6f6f6;
border-radius: 10px;
margin-bottom: 40px
}
.product--tabs__tab {
display: block;
color: #2e2f33;
font-size: 20px;
line-height: 1em;
text-decoration: none;
padding: 10px 18px;
border-radius: 10px
}
.product--tabs__tab.active,
.product--tabs__tab:hover {
background: var(--color-1);
color: #fff
}
.product--tabs__panels b {
font-size: 16px;
font-weight: 500;
color: var(--color-1)
}
.product--tabs__panels b+ul {
margin-top: 20px
}
.product--tabs__panels ul {
display: grid;
gap: .6em;
padding-left: 0;
margin-bottom: 0;
list-style: none
}
.product--tabs__panels ul li {
position: relative;
font-size: 16px;
line-height: 1.375em;
color: #2e2f33;
padding-left: 18px
}
.product--tabs__panels ul li:before {
content: "";
position: absolute;
top: 50%;
left: 0;
display: block;
width: 10px;
aspect-ratio: 1/1;
background: var(--color-1);
border-radius: 50%;
transform: translateY(-50%)
}
.product--tabs__panel {
display: none
}
.product--tabs__panel.active {
display: block
}
.product--tabs__panel_specials {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0 24px
}
.product--tabs__panel_special {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 101px 11px 20px;
border-radius: 10px
}
.product--tabs__panel_special span:nth-child(1) {
font-size: 18px;
line-height: 1em;
font-weight: 400;
color: #999
}
.product--tabs__panel_special span:nth-child(2) {
font-size: 18px;
line-height: 1em;
color: #2e2f33
}
.product--tabs__panel_special-1,
.product--tabs__panel_special-2 {
background: #f6f6f6
}
.product--feedback {
padding: 50px 0 100px;
background: #fff
}
.product--feedback__grid {
display: grid;
grid-template-columns: 2fr 10fr;
gap: 24px;
}
.product--feedback__caption {
font-size: 21px;
font-weight: 700;
color: #2e2f33;
margin-bottom: 20px;
line-height: 1em
}
.product--feedback form {
display: flex;
flex-direction: column;
margin-bottom: 50px
}
.product--feedback form input[type='text'] {
display: block;
width: 100%;
height: 59px;
margin-bottom: 10px;
border-radius: 10px;
border: 1px solid #d3d3d3;
font-size: 16px;
font-weight: 400;
line-height: 1em;
color: #000;
padding: 0 20px;
}
.product--feedback form input[type='text']::-moz-placeholder,
.product--feedback form input[type='text']::placeholder {
color: #999;
opacity: 1
}
.product--feedback form textarea {
width: 100%;
min-height: 147px;
height: 13px;
margin-bottom: 20px;
padding: 20px;
border-radius: 10px;
border: 1px solid #d3d3d3;
font-size: 16px;
font-weight: 400;
line-height: 1em;
color: #000
}
.product--feedback form textarea::-moz-placeholder {
color: #999;
opacity: 1
}
.product--feedback form textarea::placeholder {
color: #999;
opacity: 1
}
.product--feedback form .action__btn {
border: none;
margin-left: auto
}
.product--feedback__list {
display: grid;
gap: 65px;
padding: 20px 0 0;
border-top: 1px solid #d3d3d3
}
.product--feedback__item {
display: grid;
grid-template-columns: 80px 1fr;
align-items: flex-start;
gap: 30px
}
.product--feedback__item_avatar {
position: relative
}
.product--feedback__item_avatar[data-avatar]:before {
content: attr(data-avatar);
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
border-radius: 50%;
aspect-ratio: 1 / 1;
background: #F6F6F6;
color: var(--color-1);
line-height: 1em;
font-weight: 700;
font-size: 52px;
}
.product--feedback__item_avatar img {
border-radius: 50%;
width: 100%;
height: unset;
aspect-ratio: 1/1;
-o-object-position: center;
object-position: center;
-o-object-fit: cover;
object-fit: cover;
background: #fff;
}
.product--feedback__item_avatar span {
position: absolute;
left: 50%;
bottom: -10px;
transform: translate(-50%, 100%);
white-space: nowrap;
font-size: 14px;
line-height: 1em;
color: #2e2f33
}
.product--feedback__item_data {
display: flex;
flex-direction: column;
align-items: flex-start
}
.product--feedback__item_name {
color: var(--color-1);
font-size: 18px;
font-weight: 700;
line-height: 1em;
margin-bottom: 6px
}
.product--feedback__item_insite {
display: block;
font-size: 16px;
font-weight: 400;
color: #999;
margin-bottom: 20px
}
.product--feedback__item_text {
display: block;
font-size: 16px;
line-height: 1.25em;
color: #2e2f33;
margin-bottom: 20px
}
.product--feedback__item_action {
font-size: 16px;
line-height: 1em;
color: var(--color-1)
}
.product--feedback__item_action:hover {
color: var(--color-2)
}
.product--feedback__item[data-parent] {
position: relative;
background: #f6f6f6;
padding: 26px 20px;
border-radius: 10px;
grid-template-columns: 60px 1fr
}
.product--feedback__item[data-parent]:before {
content: "";
display: block;
top: 1px;
left: 66px;
width: 42px;
aspect-ratio: 42/15;
position: absolute;
background: inherit;
transform: translateY(-100%);
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center
}
.product--feedback__item[data-parent] .product--feedback__item_avatar img {
padding: 8px;
}
.whishlist {
margin: 100px 0 80px
}
.whishlist__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px
}
.delivery {
margin-bottom: 100px
}
.delivery__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px
}
.delivery__panel {
background: #fff;
border-radius: 10px;
padding: 30px
}
.delivery__item:not(:last-child) {
margin-bottom: 20px
}
.delivery__item b {
display: block;
margin-bottom: 20px;
font-size: 20px;
font-weight: 500;
color: #2e2f33
}
.delivery__item span {
display: block;
font-size: 18px;
color: #999;
line-height: 1.2em;
min-height: 2.4em
}
.delivery--price {
margin: 100px 0
}
.delivery--price__caption {
font-size: 24px;
font-weight: 500;
color: #2e2f33;
line-height: 1em;
margin-bottom: 50px
}
.delivery--price__table {
display: block;
margin-bottom: 100px
}
.delivery--price__table_head,
.delivery--price__table_tr {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 24px;
padding: 0 20px
}
.delivery--price__table_head {
background: #fff;
border-radius: 10px
}
.delivery--price__table_head span {
padding: 10px 0;
font-size: 18px;
color: #999;
line-height: 1em;
font-weight: 400
}
.delivery--price__table_tr {
border-bottom: 1px solid #cecece
}
.delivery--price__table_tr span {
display: block;
font-size: 18px;
line-height: 1em;
padding: 20px 0
}
.delivery--price__ul_caption {
display: block;
margin-bottom: 20px;
font-size: 20px;
font-weight: 500;
line-height: 1em
}
.delivery--price ul {
display: grid;
gap: .3em;
padding-left: 0;
margin-bottom: 0;
list-style: none;
margin-bottom: 20px
}
.delivery--price ul li {
position: relative;
font-size: 18px;
line-height: 1.375em;
color: #2e2f33;
padding-left: 18px
}
.delivery--price ul li:before {
content: "";
position: absolute;
top: 13px;
left: 0;
display: block;
width: 10px;
aspect-ratio: 1/1;
background: var(--color-1);
border-radius: 50%;
transform: translateY(-50%)
}
.delivery--price .col-lg-6>b {
display: block;
margin-bottom: 20px;
line-height: 1em;
font-size: 18px;
font-weight: 500
}
.delivery--price .col-lg-6>span {
font-size: 18px;
line-height: 1em
}
.archive--news {
margin-bottom: 100px
}
.archive--news__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px
}
.archive--news .pagination {
margin-top: 50px
}
.news--card {
background: #fff;
border-radius: 10px;
text-decoration: none
}
.news--card__data {
display: block;
padding: 15px 10px 42px
}
.news--card__thumb {
display: block;
border-radius: 10px 10px 0 0;
width: 100%;
height: unset;
aspect-ratio: 416/230;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center
}
.news--card__name {
display: block;
font-size: 20px;
font-weight: 700;
line-height: 1em;
text-decoration: none;
color: #363636;
margin-bottom: 10px
}
.news--card__desc {
display: -webkit-box;
font-size: 16px;
left: 1.25em;
color: #888;
box-orient: vertical;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
overflow: hidden;
line-clamp: 3;
-webkit-line-clamp: 3;
-moz-line-clamp: 3
}
.single--news {
margin-bottom: 100px
}
.single--news .col-lg-9 img {
width: 100%;
height: unset;
aspect-ratio: 966/291;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
margin-bottom: 50px;
}
.single--news .col-lg-9 ul {
display: grid;
gap: .3em;
padding-left: 0;
margin-bottom: 0;
list-style: none;
margin-bottom: 20px
}
.single--news .col-lg-9 ul li {
position: relative;
font-size: 16px;
line-height: 1.375em;
color: #2e2f33;
padding-left: 18px
}
.single--news .col-lg-9 ul li:before {
content: "";
position: absolute;
top: 13px;
left: 0;
display: block;
width: 10px;
aspect-ratio: 1/1;
background: var(--color-1);
border-radius: 50%;
transform: translateY(-50%)
}
.single--news .col-lg-9 h1,
.single--news .col-lg-9 h2,
.single--news .col-lg-9 h3,
.single--news .col-lg-9 h4,
.single--news .col-lg-9 h5,
.single--news .col-lg-9 h6 {
font-size: 20px;
font-weight: 700;
color: #1c1c1c;
margin: 50px 0 20px
}
.single--news .col-lg-9 p {
font-size: 16px;
line-height: 1.375em;
color: #2e2f33
}
.single--news__sidebar {
background: #fff;
border-radius: 10px;
padding: 24px 25px 44px;
box-shadow: 0 0 16px 0 rgba(80, 79, 79, .1)
}
.single--news__sidebar_caption {
font-size: 20px;
font-weight: 500;
line-height: 1.3em;
margin-bottom: 20px
}
.single--news__sidebar_list {
display: grid;
gap: 15px
}
.single--news__other {
display: grid;
grid-template-columns: 75px 1fr;
gap: 10px;
align-items: center;
text-decoration: none
}
.single--news__other_thumb {
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
width: 75px;
height: unset;
aspect-ratio: 75/70;
border-radius: 5px
}
.single--news__other_data {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px
}
.single--news__other_name {
display: block;
font-size: 15px;
font-weight: 500;
color: #1c1c1c;
line-height: 1.2em
}
.single--news__other_date {
display: block;
font-size: 12px;
font-weight: 500;
color: #999
}
.single--news__other:hover .single--news__other_name {
color: var(--color-1)
}
.contacts {
margin-bottom: 100px
}
.contacts__items {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-bottom: 30px
}
.contacts__item {
display: grid;
grid-template-columns: 60px 1fr;
align-items: flex-start;
gap: 24px;
background: #fff;
padding: 28px 50px 33px 25px;
border-radius: 20px;
box-shadow: 0 0 16px 0 rgba(80, 79, 79, .1)
}
.contacts__item_icon {
position: relative;
width: 100%;
aspect-ratio: 1/1;
background: var(--color-1);
border-radius: 50%
}
.contacts__item_icon:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 30px;
aspect-ratio: 1/1;
background: #fff;
transform: translate(-50%, -50%);
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat
}
.contacts__item_icon.address:after {
-webkit-mask-image: url("../img/icons/contacts_mapmark.svg");
mask-image: url("../img/icons/contacts_mapmark.svg")
}
.contacts__item_icon.clock:after {
-webkit-mask-image: url("../img/icons/contacts_clock.svg");
mask-image: url("../img/icons/contacts_clock.svg")
}
.contacts__item_icon.phone:after {
-webkit-mask-image: url("../img/icons/contacts_phone.svg");
mask-image: url("../img/icons/contacts_phone.svg")
}
.contacts__item_data {
display: flex;
flex-direction: column
}
.contacts__item_data a,
.contacts__item_data span {
font-size: 16px;
line-height: 1.375em;
color: #51565d;
text-decoration: none
}
.contacts__item_data a:hover {
color: var(--color-1)
}
.contacts__item_name {
color: #202020;
font-size: 20px;
line-height: 1.2em;
font-weight: 700;
margin-bottom: 10px
}
.contacts__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px
}
.contacts__grid #map {
background: #fff
}
.contacts__rekvizits {
font-size: 16px;
color: #51565d
}
.contacts__rekvizits b {
color: #202020
}
.contacts__rekvizits a {
font: inherit;
color: inherit;
text-decoration: none
}
.contacts__rekvizits a:hover {
color: var(--color-1)
}
.garant {
margin-bottom: 100px
}
.garant__tabs {
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
margin-bottom: 50px
}
.garant__tab {
display: block;
text-decoration: none;
width: 100%;
max-width: 196px;
padding: 12px 0;
text-align: center;
background: #f0f0f0;
border: 1px solid #cecece;
border-radius: 10px;
color: #999;
font-size: 16px;
font-weight: 500
}
.garant__tab.active,
.garant__tab:hover {
background: var(--color-1);
border-color: var(--color-1);
color: #fff
}
.garant__panel {
display: none
}
.garant__panel.active {
display: block
}
.garant__desc {
display: grid;
grid-template-columns: 5fr 7fr;
gap: 24px;
margin-bottom: 50px
}
.garant__desc_img {
display: block;
width: 100%;
height: unset;
background: #fff;
border-radius: 10px;
aspect-ratio: 526/495;
-o-object-fit: contain;
object-fit: contain;
-o-object-position: center;
object-position: center
}
.garant__desc_text h1,
.garant__desc_text h2,
.garant__desc_text h3,
.garant__desc_text h4,
.garant__desc_text h5,
.garant__desc_text h6 {
color: #2e2f33;
font-size: 24px;
font-weight: 400;
line-height: 1em;
margin-bottom: 27px
}
.garant__desc_text h1 span,
.garant__desc_text h2 span,
.garant__desc_text h3 span,
.garant__desc_text h4 span,
.garant__desc_text h5 span,
.garant__desc_text h6 span {
padding: 9px 26px;
background: var(--color-1);
color: #fff;
font-size: 20px;
font-weight: 500;
border-radius: 10px;
margin-left: 8px
}
.garant__desc_text p {
margin-bottom: 20px
}
.garant__service {
background: #fff;
box-shadow: 0 0 6px 0 rgba(58, 117, 147, .25);
border-radius: 10px;
padding: 30px 20px
}
.garant__service_title {
display: block;
font-size: 20px;
font-weight: 400;
text-align: center;
margin-bottom: 20px !important
}
.garant__service_grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px
}
.garant__service_item {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px
}
.garant__service_icon {
-o-object-fit: contain;
object-fit: contain;
-o-object-position: center;
object-position: center
}
.garant__service_name {
display: block;
font-size: 18px;
line-height: 1.2em;
text-align: center
}
.garant__save {
display: grid;
grid-template-columns: 7fr 5fr;
gap: 24px
}
.garant__save_text h1,
.garant__save_text h2,
.garant__save_text h3,
.garant__save_text h4,
.garant__save_text h5,
.garant__save_text h6 {
font-size: 24px;
font-weight: 400;
color: #2e2f33;
margin-bottom: 20px
}
.garant__save_text p {
font-size: 18px;
font-weight: 400;
margin-bottom: 1em;
color: #2e2f33;
line-height: 1.33em
}
.garant__save img {
display: block;
width: 100%;
height: unset;
aspect-ratio: 526/199;
-o-object-fit: contain;
object-fit: contain;
-o-object-position: center;
object-position: center;
background: #fff;
border-radius: 10px
}
.garant .refund__description {
display: grid;
grid-template-columns: 7fr 5fr;
gap: 24px
}
.garant .refund__description_text h1,
.garant .refund__description_text h2,
.garant .refund__description_text h3,
.garant .refund__description_text h4,
.garant .refund__description_text h5,
.garant .refund__description_text h6 {
font-size: 24px;
line-height: 1em;
font-weight: 400;
color: #2e2f33;
margin-bottom: 27px
}
.garant .refund__description_text p {
font-size: 18px;
line-height: 1.22em;
margin-bottom: 1em
}
.garant .refund__description_text ul {
display: grid;
gap: 10px;
margin: 40px 0;
padding-left: 0;
list-style: none
}
.garant .refund__description_text ul li {
display: grid;
grid-template-columns: 47px 1fr;
gap: 20px;
counter-increment: linum;
align-items: center;
color: #2e2f33;
font-size: 18px;
line-height: 1.22em
}
.garant .refund__description_text ul li:before {
content: counter(linum);
width: 47px;
aspect-ratio: 1/1;
border: 1px solid var(--color-1);
border-radius: 50%;
line-height: 47px;
text-align: center;
font-size: 20px;
font-weight: 500;
color: var(--color-1)
}
.garant .refund__description img {
display: block;
width: 100%;
height: unset;
aspect-ratio: 526/564;
-o-object-fit: contain;
object-fit: contain;
-o-object-position: center;
object-position: center;
border-radius: 10px;
background: #fff
}
.garant .refund__address {
display: grid;
gap: 40px;
margin-top: 40px;
border-radius: 10px;
border: 1px dashed var(--color-1);
padding: 20px;
box-shadow: 0 0 6px 0 rgba(58, 117, 147, .25)
}
.garant .refund__address_item {
display: grid;
grid-template-columns: 2fr 5fr;
gap: 35px
}
.garant .refund__address_item b {
font-size: 18px;
font-weight: 500;
color: #2e2f33;
line-height: 1.22em
}
.garant .refund__address_item span {
font-size: 18px;
line-height: 1.22em;
color: #2e2f33;
font-weight: 400
}
.about {
margin-bottom: 100px
}
.about .section__title {
margin-bottom: 60px
}
.about__description {
background: url("../img/background/about--desc.png") no-repeat center center/cover;
padding: 50px 0
}
.about__description h1,
.about__description h2,
.about__description h3,
.about__description h4,
.about__description h5,
.about__description h6 {
display: block;
font-size: 20px;
font-weight: 400;
color: #2e2f33;
margin-bottom: 20px
}
.about__text {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px
}
.about__text p {
font-size: 16px;
font-weight: 400;
line-height: 1.2em;
color: #2e2f33
}
.about--adventages {
margin: 100px 0 60px
}
.about--adventages__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
align-items: flex-start;
gap: 24px
}
.about--adventages__item {
display: grid;
gap: 20px
}
.about--adventages__item_title {
display: grid;
grid-template-columns: 28px 1fr;
gap: 20px;
align-items: center
}
.about--adventages__item_title img {
-o-object-fit: contain;
object-fit: contain;
-o-object-position: center;
object-position: center
}
.about--adventages__item_title span {
font-size: 18px;
font-weight: 400;
color: #2e2f33
}
.about--adventages__item_text {
font-size: 16px;
color: #2e2f33;
font-weight: 400;
line-height: 1.4em
}
.about--mission {
position: relative;
margin: 60px 0 100px
}
.about--mission:before {
content: "";
position: absolute;
background: #fff;
width: 100%;
height: 55%;
top: 50%;
transform: translateY(-62%)
}
.about--mission__wrapper {
position: relative;
display: grid;
grid-template-columns: 43fr 57fr;
gap: 68px;
width: 66.6666666667%;
margin: 0 auto 100px;
padding: 0 86px
}
.about--mission__wrapper:before {
content: "";
position: absolute;
inset: 0;
border: 1px solid #999;
border-radius: 10px;
-webkit-clip-path: polygon(-2px -2px, 48px -2px, 58px 2px, 376px 2px, 336px -2px, calc(100% + 2px) -2px, calc(100% + 2px) calc(100% + 2px), -2px calc(100% + 2px));
clip-path: polygon(-2px -2px, 48px -2px, 58px 2px, 376px 2px, 336px -2px, calc(100% + 2px) -2px, calc(100% + 2px) calc(100% + 2px), -2px calc(100% + 2px));
pointer-events: none
}
.about--mission__wrapper img {
display: block;
width: 100%;
height: unset;
aspect-ratio: 1/1;
transform: translateY(-35px)
}
.about--mission__wrapper_data {
display: flex;
flex-direction: column;
padding: 30px 0 35px
}
.about--mission__wrapper_data h1,
.about--mission__wrapper_data h2,
.about--mission__wrapper_data h3,
.about--mission__wrapper_data h4,
.about--mission__wrapper_data h5,
.about--mission__wrapper_data h6 {
font-size: 20px;
font-weight: 500;
color: #2e2f33;
margin-bottom: 10px
}
.about--mission__wrapper_data p {
font-size: 18px;
font-weight: 400;
line-height: normal;
margin-bottom: auto
}
.about--mission__wrapper_data span {
font-size: 16px;
font-weight: 400;
line-height: normal
}
.about--mission__post {
position: relative;
z-index: 1
}
.about--mission__post_grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 80px;
width: 83.3333333333%;
margin: 0 auto
}
.about--mission__post_img--wrapper {
position: relative;
margin-bottom: 20px
}
.about--mission__post_img--wrapper:before {
content: "";
position: absolute;
border: 1px solid var(--color-1);
width: calc(100% - 22px);
aspect-ratio: 1/1;
top: 0;
right: 0;
border-radius: 10px
}
.about--mission__post_img--wrapper img {
position: relative;
width: calc(100% - 22px);
height: unset;
aspect-ratio: 1/1;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
margin-top: 22px;
border-radius: 10px
}
.about--mission__post_name {
display: block;
text-align: center;
font-size: 28px;
font-weight: 500;
color: #2e2f33;
margin-bottom: 20px;
line-height: 1em
}
.about--mission__post_desc {
display: block;
text-align: center;
font-size: 18px;
font-weight: 400;
color: #2e2f33
}
.cart {
margin: 100px 0
}
.cart__grid {
display: grid;
grid-template-columns: 8fr 3fr;
align-items: flex-start;
gap: 86px
}
.cart__list_head {
display: grid;
grid-template-columns: 3.5fr 2fr repeat(3, 1fr);
gap: 10px;
background-color: #fff;
padding: 10px 20px;
border-radius: 10px;
margin-bottom: 20px
}
.cart__list_head span {
display: block;
font-size: 18px;
font-weight: 400;
color: #999;
line-height: 1.16em
}
.cart__list_str {
display: grid;
grid-template-columns: 3.5fr 2fr repeat(3, 1fr);
gap: 10px;
align-items: center;
padding: 20px;
border-bottom: 1px solid #cecece
}
.cart__list_item--data {
display: grid;
grid-template-columns: 69px 1fr;
gap: 21px;
align-items: flex-start;
text-decoration: none;
}
.cart__list_item--thumb {
display: block;
width: 100%;
height: unset;
aspect-ratio: 1/1;
background: rgba(0, 0, 0, 0);
-o-object-fit: contain;
object-fit: contain;
-o-object-position: center;
object-position: center;
border-radius: 10px;
border: 1px solid #cecece
}
.cart__list_name {
display: block;
font-size: 18px;
font-weight: 400;
line-height: 1.16em;
color: #2e2f33
}
.cart__list_sku {
display: block;
font-size: 14px;
line-height: 1.28em;
font-weight: 500;
color: #b2b2b2;
margin-top: 5px
}
.cart__list_item--counter {
display: grid;
max-width: 104px;
width: 100%;
height: 40px;
grid-template-columns: 1fr 40px 1fr
}
.cart__list_item--counter input {
text-align: center;
border: none;
-moz-appearance: textfield;
background: none;
border-radius: 10px;
border: 1px solid #cecece;
font-size: 18px;
line-height: 1em;
color: #2e2f33
}
.cart__list_item--counter input::-webkit-inner-spin-button,
.cart__list_item--counter input::-webkit-outer-spin-button {
display: none;
-webkit-appearance: none;
appearance: none
}
.cart__list_item--counter span {
display: block;
width: 100%;
height: 100%;
background: #cecece;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
cursor: pointer
}
.cart__list_item--counter span:first-child {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,')
}
.cart__list_item--counter span:last-child {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,')
}
.cart__list_item--counter span:hover {
background: var(--color-1)
}
.cart__list_item--summ {
font-size: 20px;
font-weight: 500;
color: #2e2f33;
line-height: 1em
}
.cart__list_item--checked {
position: relative;
width: 24px;
height: 24px;
border-radius: 2px;
border: 1px solid #999;
margin: 0 auto
}
.cart__list_item--checked.active {
background: var(--color-1);
border: none
}
.cart__list_item--checked.active:after {
content: "";
position: absolute;
background: #fff;
width: 18px;
aspect-ratio: 18/13;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,')
}
.cart__list_item--del {
display: block;
width: 14px;
aspect-ratio: 1/1;
background: #cecece;
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
margin-left: auto;
cursor: pointer;
}
.cart__list_item--del:hover {
background: var(--color-1)
}
.cart__checkout {
padding: 30px 20px;
background: #fff;
border-radius: 10px
}
.cart__checkout_title {
font-size: 24px;
font-weight: 500;
color: #2e2f33;
margin-bottom: 20px;
line-height: 1em
}
.cart__checkout_str {
position: relative;
display: flex;
justify-content: space-between;
margin-bottom: 16px
}
.cart__checkout_str span {
white-space: nowrap;
font-size: 16px;
font-weight: 400;
color: #999;
order: 1
}
.cart__checkout_str b {
font-size: 16px;
font-weight: 500;
white-space: nowrap;
color: #2e2f33;
order: 3
}
.cart__checkout_str:after {
content: "";
order: 2;
display: block;
width: 100%;
border-bottom: 2px dotted #999;
margin: 0 9px 0 3px;
transform: translateY(-7px)
}
.cart__checkout_price {
display: flex;
align-items: center;
justify-content: space-between;
border-top: 1px solid #cecece;
margin: 20px 0;
padding-top: 22px
}
.cart__checkout_price span {
display: block;
font-size: 18px;
font-weight: 500;
color: #2e2f33
}
.cart__checkout_btn--back,
.cart__checkout_btn--next {
display: block;
padding: 16px 0;
text-align: center;
font-size: 18px;
text-decoration: none;
border-radius: 10px;
margin-bottom: 20px;
cursor: pointer;
}
.cart__checkout_btn--back {
border: 1px solid var(--color-1);
color: var(--color-1)
}
.cart__checkout_btn--back:hover {
color: #fff;
background: var(--color-1)
}
.cart__checkout_btn--next {
background: var(--color-1);
color: #fff
}
.cart__checkout_btn--next:hover {
color: #fff;
background: var(--color-2)
}
.cart__checkout_remark {
display: block;
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid #cecece;
text-align: center;
font-size: 14px;
font-weight: 400
}
.cart__checkout_remark u {
font: inherit;
color: var(--color-1)
}
.sweet--message {
position: fixed;
bottom: 20px;
left: 20px;
background: #ffffff;
border: 1px solid var(--color-1);
z-index: 99;
border-radius: 10px;
padding: 20px 40px;
font-size: 16px;
line-height: 1.2em;
color: #2e2f33;
transition: .3s ease;
transform: translateX(-100%) translateX(-20px);
animation: 4s showMessage ease;
opacity: 0;
}
.sweet--message>span {
font: inherit;
}
.sweet--message a {
color: var(--color-1);
font: inherit;
}
@keyframes showMessage {
0% {
transform: translateX(-100%) translateX(-20px);
opacity: 0;
}
10% {
transform: translateX(0);
opacity: 1;
}
90% {
transform: translateX(0);
opacity: 1;
}
100% {
transform: translateX(-100%) translateX(-20px);
opacity: 0;
}
}
.search--page {
margin-bottom: 100px;
}
.search--page__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin-bottom: 50px;
}
.succes--wrapper {
margin-bottom: 100px;
}
.succes--wrapper h1 {
color: #2e2f33;
margin-bottom: 15px;
font-size: 50px;
font-weight: 700;
}
.succes--wrapper p a {
color: var(--color-1);
}
.succes--wrapper p a:hover {
color: var(--color-2);
}
.succes--wrapper a.succes--wrapper__btn {
display: block;
width: fit-content;
margin: 0 auto 0 0;
padding: 10px 46px;
text-decoration: none;
color: var(--color-1);
border-radius: 10px;
border: 1px solid var(--color-1);
font-size: 20px;
line-height: 1em;
}
.succes--wrapper a.succes--wrapper__btn:hover {
background: var(--color-1);
color: #fff;
}
.checkout--wrapper {
margin: 100px auto 250px;
}
.checkout--wrapper #simplecheckout_step_menu {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
margin-bottom: 50px;
}
.checkout--wrapper #simplecheckout_step_menu .simple-step-delimiter {
display: none !important;
}
.checkout--wrapper #simplecheckout_step_menu .simple-step {
display: block;
counter-increment: counter;
width: 100%;
text-align: center;
padding: 23px 0;
border-radius: 10px;
border: 1px solid #CECECE;
background: #f0f0f0;
font-size: 16px;
color: #999;
font-weight: 500;
line-height: 1em;
transition: .3s ease;
}
.checkout--wrapper #simplecheckout_step_menu .simple-step.simple-step-completed,
.checkout--wrapper #simplecheckout_step_menu .simple-step.simple-step-current {
color: var(--color-1);
border: 1px solid var(--color-1);
background: #fff;
}
.checkout--wrapper .simplecheckout-step .simplecheckout-three-column {
min-width: unset !important;
max-width: unset !important;
margin-right: unset !important;
}
.checkout--wrapper .simplecheckout-step .simplecheckout-three-column:nth-child(1) {
width: calc(100% / 12 * 5) !important;
}
.checkout--wrapper .simplecheckout-step .simplecheckout-three-column:nth-child(2) {
width: calc(100% / 12 * 4) !important;
}
.checkout--wrapper .simplecheckout-step .simplecheckout-three-column:nth-child(3) {
width: calc(100% / 12 * 3) !important;
}
.checkout--wrapper #simplecheckout_step_menu .simple-step:before {
content: counter(counter) ' — ';
}
.checkout--wrapper .form-horizontal .form-group:not(:last-child) {
margin-bottom: 40px;
}
.checkout--wrapper .form-horizontal .form-group label {
display: block;
width: 100%;
font-size: 16px;
font-weight: 500;
color: var(--color-1);
margin-bottom: 16px;
}
.checkout--wrapper .form-horizontal .form-group .col-sm-8 {
display: contents;
}
.checkout--wrapper .form-horizontal .form-group input:not([type='checkbox']) {
display: block;
width: 100%;
height: 55px;
padding: 0 60px 0 20px;
box-shadow: unset !important;
font-size: 16px;
line-height: 1em;
color: var(--color-1);
background: transparent;
border-radius: 10px !important;
}
.checkout--wrapper .form-horizontal .form-group input::placeholder {
color: #999;
}
.checkout--wrapper .form-horizontal .form-group input:not([type='checkbox']):focus,
.checkout--wrapper .form-horizontal .form-group input:not([type='checkbox']):not(:placeholder-shown) {
border-color: var(--color-1);
}
.checkout--wrapper .form-horizontal .form-group:not(.has-error) .col-sm-8 {
position: relative;
}
.checkout--wrapper .form-horizontal .form-group.has-error input:not([type='checkbox']) {
border-color: red;
}
.checkout--wrapper .form-horizontal .form-group.has-error {
position: relative;
}
.checkout--wrapper .form-horizontal .form-group.has-error .simplecheckout-rule-group {
position: absolute;
top: 100%;
background: #fff;
border-radius: 10px;
padding: 10px;
pointer-events: none;
opacity: 0;
margin-top: 5px;
filter: drop-shadow(0px 3px 3px #0003);
transition: .3s ease;
max-width: 340px;
z-index: 1;
}
.checkout--wrapper .form-horizontal .form-group.has-error:hover .simplecheckout-rule-group {
opacity: 1;
}
.checkout--wrapper .form-horizontal .form-group.has-error .simplecheckout-rule-group:before {
content: '';
position: absolute;
left: 20px;
top: 1px;
transform: translateY(-100%);
border-bottom: 5px solid #fff;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
}
.checkout--wrapper .form-horizontal .form-group:not(.has-error) input:not(:placeholder-shown) {
background: url('data:image/svg+xml;utf8,') no-repeat center right 20px;
}
.checkout--wrapper .form-horizontal .form-group.row-shipping_address_address_1 label {
display: none !important;
}
.checkout--wrapper .form-horizontal .form-group:has(#selectaddress) {
grid-column: 1 / 4;
}
.checkout--wrapper .form-horizontal .form-group:has(#selectaddress):before {
content: 'Адрес';
display: block;
width: 100%;
font-size: 16px;
font-weight: 500;
color: var(--color-1);
margin-bottom: 16px;
}
.checkout--wrapper .form-horizontal .form-group #selectaddress {
display: block;
text-align: center;
padding: 17px 0;
border-radius: 10px;
background: var(--color-1);
font-size: 18px;
font-weight: 400;
color: #fff;
line-height: 1em;
cursor: pointer;
}
.checkout--wrapper .form-horizontal .form-group #selectaddress:hover {
background: var(--color-2);
}
.checkout--wrapper #simplecheckout_text_help {
margin: 35px 17% 0;
}
.checkout--wrapper #simplecheckout_text_help .panel-heading {
font-size: 18px;
font-weight: 500;
color: #2e2f33;
line-height: 1em;
margin-bottom: 40px;
}
.checkout--wrapper #simplecheckout_text_help .footer__caption {
font-size: 16px;
font-weight: 500;
color: #7d7d79;
}
.checkout--wrapper #simplecheckout_text_help .footer__contacts {
margin-bottom: 0;
padding-left: 0;
}
.checkout--wrapper #simplecheckout_text_help .footer__contacts li:before {
background: #7d7d79;
}
.checkout--wrapper #simplecheckout_text_help .footer__contacts li a {
text-decoration: none;
font-size: 16px;
}
.checkout--wrapper #simplecheckout_text_help .footer__contacts li.footer__contacts_mail a {
text-decoration: underline;
}
.checkout--wrapper #simplecheckout_text_help .footer__contacts li a:nth-child(1) {
color: #7d7d79;
}
.checkout--wrapper #simplecheckout_text_help .footer__contacts li a:nth-child(1):hover {
color: var(--color-1);
}
.checkout--wrapper #simplecheckout_shipping_address .form-horizontal {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0 24px;
}
.checkout--wrapper #simplecheckout_shipping_address .row-shipping_address_address_1,
.checkout--wrapper #simplecheckout_shipping_address .row-shipping_address_field23 {
grid-column: 1 / 4;
}
.checkout--wrapper .simplecheckout-block {
margin-bottom: 0;
}
.checkout--wrapper #simplecheckout_bottom {
display: none;
}
.checkout--wrapper .cart__checkout {
border-radius: 10px 10px 0 0;
}
.checkout--wrapper .simplecheckout {
position: relative;
}
.checkout--wrapper .simplecheckout-button-block {
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 20px;
right: 0;
padding: 0 20px 40px;
width: calc(100% / 12 * 3) !important;
margin-left: auto;
top: var(--checkoutInfoTop) !important;
background: #fff;
border-radius: 0 0 10px 10px;
}
.checkout--wrapper .simplecheckout-button-block:after {
content: unset;
}
.checkout--wrapper .simplecheckout-button-block .simplecheckout-button-left {
order: 1;
}
.checkout--wrapper .simplecheckout-button-block .simplecheckout-button-right {
order: 2;
}
.checkout--wrapper .simplecheckout-button-block .simplecheckout-button-right,
.checkout--wrapper .simplecheckout-button-block .simplecheckout-button-left {
float: unset;
text-align: unset;
width: 100%;
}
.checkout--wrapper .simplecheckout-button-block .simplecheckout-button-left a {
display: block;
padding: 16px 0;
width: 100%;
text-align: center;
float: unset;
box-shadow: unset !important;
color: var(--color-1);
font-size: 18px;
font-weight: 400;
line-height: 1em;
border-radius: 10px;
border: 1px solid var(--color-1);
background: transparent;
}
.checkout--wrapper .simplecheckout-button-block .simplecheckout-button-left a span {
font: inherit;
}
.checkout--wrapper .simplecheckout-button-block .simplecheckout-button-left a:hover {
background: var(--color-1);
color: #fff;
}
.checkout--wrapper .simplecheckout-button-block .simplecheckout-button-right a,
.checkout--wrapper .simplecheckout-button-block .simplecheckout-button-right input {
display: block;
width: 100%;
text-align: center;
font-size: 18px;
font-weight: 400;
line-height: 1em;
color: #fff;
background: var(--color-1);
padding: 16px 0;
border-radius: 10px;
border: unset;
}
.checkout--wrapper .simplecheckout-button-block .simplecheckout-button-right a:hover,
.checkout--wrapper .simplecheckout-button-block .simplecheckout-button-right input:hover {
background: var(--color-2);
}
.checkout--wrapper .simplecheckout-button-block .simplecheckout-button-right a span {
font: inherit;
}
.modalwindow>* {
transform: scale(.6);
transition: .3s ease;
}
.modalwindow.active>* {
transform: scale(1);
}
.modalwindow__address {
position: relative;
display: grid;
grid-template-columns: 3fr 5fr;
gap: 24px;
background: #FFFFFF;
border-radius: 10px;
overflow: hidden;
height: 558px;
max-height: 95vh;
overflow: auto;
}
.modalwindow__address .modalwindow__close {
z-index: 3;
}
.modalwindow__address_left {
position: relative;
padding: 30px 24px 0 30px;
height: 100%;
overflow: hidden;
}
.modalwindow__address_title {
font-size: 24px;
font-weight: 500;
line-height: 1em;
color: var(--color-1);
margin-bottom: 20px;
}
.modalwindow__address_input {
border-radius: 10px;
border: 1px solid var(--color-1);
margin-bottom: 20px;
padding: 13px 0 13px 14px;
font-size: 16px;
font-weight: 400;
width: 100%;
}
.modalwindow__address_input::placeholder {
color: #999;
opacity: 1;
}
.modalwindow__address_list {
position: relative;
max-height: 75%;
overflow: auto;
}
.modalwindow__address_list span {
display: block;
border: 1px solid #999;
padding: 10px 10px 10px 14px;
font-size: 16px;
font-weight: 400;
color: #999;
transition: .3s ease;
border-radius: 10px;
cursor: pointer;
}
.modalwindow__address_list span:not(:last-child) {
margin-bottom: 5px;
}
.modalwindow__address_list span.active,
.modalwindow__address_list span:hover {
color: var(--color-1);
border-color: var(--color-1);
}
.modalwindow__address_right {}
#modalMap .action__btn {
font-size: 16px;
padding: 8px 25px;
margin: 0 auto;
cursor: pointer;
}
#modalMap .caption {
display: block;
font-size: 16px;
font-weight: 500;
line-height: 1em;
text-align: center;
width: fit-content;
margin: 0 auto 10px;
max-width: 300px;
}
.checkout--wrapper #simplecheckout_shipping .checkout-heading,
.checkout--wrapper #simplecheckout_shipping .simplecheckout-block-content>p,
.checkout--wrapper #simplecheckout_shipping .simplecheckout-block-content>.radio,
.checkout--wrapper #simplecheckout_shipping .alert,
.checkout--wrapper #simplecheckout_shipping .input-group.date .input-group-btn {
display: none;
}
.checkout--wrapper #simplecheckout_payment .simplecheckout-block-content {
margin-bottom: 40px;
}
.checkout--wrapper #simplecheckout_payment>* {
padding: 0 10px;
}
.checkout--wrapper #simplecheckout_payment .checkout-heading {
display: block;
width: 100%;
font-size: 0;
font-weight: 500;
color: var(--color-1);
margin-bottom: 16px;
padding-bottom: 0;
}
.checkout--wrapper #simplecheckout_payment .checkout-heading:before {
content: 'Выберите способ оплаты';
position: relative;
display: inline-block;
font-size: 16px;
}
.checkout--wrapper select {
display: block;
width: 100%;
height: 55px;
padding: 0 60px 0 20px;
box-shadow: unset !important;
font-size: 16px;
line-height: 1em;
color: var(--color-1);
background: url('data:image/svg+xml;utf8,') no-repeat center right 25px;
}
.checkout--wrapper .row-shipping_field26 {
margin-bottom: 20px !important;
}
.checkout--wrapper #simplecheckout_shipping .row-shipping_field24 input {
background: url('data:image/svg+xml;utf8,') no-repeat center right 25px !important;
}
.checkout--wrapper .row-shipping_field27 label.control-label {
display: none !important;
}
.checkout--wrapper #simplecheckout_shipping .row-shipping_field27 .checkbox label {
display: grid !important;
grid-template-columns: 24px 1fr;
gap: 16px;
color: #575757;
font-size: 18px;
font-weight: 400;
line-height: 1.2em;
}
.checkout--wrapper #simplecheckout_shipping .row-shipping_field27 .checkbox label input {
display: block;
width: 100%;
height: unset;
aspect-ratio: 1 / 1;
appearance: none;
border-radius: 2px;
background: var(--color-1);
}
.checkout--wrapper #simplecheckout_shipping .row-shipping_field27 .checkbox label input:checked {
background: url('data:image/svg+xml;utf8,') no-repeat center center, var(--color-1);
}
.checkout--wrapper .row-customer_field28 .col-sm-8>div {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.checkout--wrapper .row-customer_field28 .col-sm-8>div input {
display: none !important;
}
.checkout--wrapper .row-customer_field28 .col-sm-8>div .radio label {
display: block;
padding: 16px 0;
width: 100%;
text-align: center;
float: unset;
box-shadow: unset !important;
color: var(--color-1);
font-size: 16px;
font-weight: 400;
line-height: 1em;
border-radius: 10px;
border: 1px solid var(--color-1);
background: transparent;
cursor: pointer;
margin-bottom: 0 !important;
}
.checkout--wrapper .row-customer_field28 .col-sm-8>div .radio label:hover,
.checkout--wrapper .row-customer_field28 .col-sm-8>div .radio label:has(input:checked) {
background: var(--color-1);
color: #fff;
}
[name="shipping_address[address_1]"]{
pointer-events: none;
}
@media(max-width: 1399px) {
.last--news__item_img {
height: 100%
}
.catalog--list__item_data {
left: 15px;
}
.catalog--list__item_name {
font-size: 17px;
}
.catalog--list__item .action__btn {
font-size: 16px;
padding: 10px 45px;
}
.catalog--list__item:hover .action__btn {
margin-top: 20px;
}
.footer__ul:nth-child(1) ul {
grid-template-columns: repeat(2, 1fr)
}
}
@media(max-width: 1199px) {
.header__info {
display: none
}
.header__search {
width: 60vw
}
.catalog--list__item:hover .action__btn {
margin-top: 20px
}
.catalog--list__item .action__btn {
max-width: 100%;
padding: 10px 40px
}
.catalog--list__item_name {
font-size: 14px;
}
.about--desc h1:not(.section__title),
.about--desc h2:not(.section__title),
.about--desc h3:not(.section__title),
.about--desc h4:not(.section__title),
.about--desc h5:not(.section__title),
.about--desc h6:not(.section__title) {
font-size: 29px
}
.main--slider__slide {
padding: 50px 0
}
.main--slider__slide_img {
height: 100%
}
.container .swiper-button-prev {
transform: translate(-50%, -50%) translateX(5px)
}
.container .swiper-button-next {
transform: translate(50%, -50%) translateX(-5px)
}
.main--slider .col-12 {
padding: 0 80px
}
.subcategories__grid {
grid-template-columns: repeat(3, 1fr)
}
.catalog--products__items.grid {
grid-template-columns: repeat(2, 1fr)
}
.catalog--products__viewmode {
display: none
}
.single--product__title {
font-size: 28px
}
.single--product__grid {
grid-template-columns: 1fr
}
.cart__grid {
grid-template-columns: 1fr;
justify-content: flex-start;
gap: 40px
}
.cart__checkout {
width: 100%;
max-width: 480px
}
.header__nav li:nth-child(1) a {
font-size: 18px;
gap: 10px
}
.header__nav li:nth-child(1) a:before {
width: 21px
}
.header__nav a {
font-size: 14px
}
.whishlist__grid {
grid-template-columns: repeat(3, 1fr)
}
.delivery--price__table {
width: 100%;
overflow: auto
}
.delivery--price__table_head,
.delivery--price__table_tr {
min-width: 1116px
}
.delivery__grid {
grid-template-columns: 1fr
}
.delivery--price .col-xl-6 {
margin-bottom: 30px
}
.garant__desc {
grid-template-columns: 1fr
}
.garant__desc_img {
max-width: 420px;
margin-bottom: 20px
}
.garant__save {
display: flex;
flex-direction: column-reverse
}
.garant .refund__description {
display: flex;
flex-direction: column-reverse
}
.about--mission__post_grid {
width: 100%
}
.contacts__item {
padding: 30px 20px;
gap: 10px
}
.product--feedback__grid {
grid-template-columns: 1fr;
gap: 0;
}
.search--page__grid {
grid-template-columns: repeat(3, 1fr);
}
.simplecheckout-step[style="display: block;"] {
display: flex !important;
flex-wrap: wrap;
}
.simplecheckout-step[style="display: block;"] .simplecheckout-three-column:nth-child(1) {
order: 1;
width: calc(100% / 12 * 8) !important;
padding-right: 20px;
}
.simplecheckout-step[style="display: block;"] .simplecheckout-three-column:nth-child(2) {
display: none;
}
.simplecheckout-step[style="display: block;"] .simplecheckout-three-column:nth-child(3) {
order: 2;
width: calc(100% / 12 * 4) !important;
}
.checkout--wrapper .simplecheckout-button-block {
width: calc(100% / 12 * 4) !important;
}
.checkout--wrapper .cart__checkout {
width: 100%;
}
.checkout--wrapper {
margin-bottom: 100px;
}
}
@media(max-width: 991px) {
.header {
z-index: 100;
}
.header__top,
.header__bottom {
display: none
}
.header__mobile {
position: fixed;
display: grid;
grid-template-columns: repeat(2, 1fr) 50px repeat(2, 1fr);
gap: 10px;
padding: 0 20px;
bottom: 0;
left: 0;
width: 100%;
background: #f6f6f6;
box-shadow: 0 0 15px -5px var(--color-1);
z-index: 15;
height: 40px
}
.header__mobile_link {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
text-decoration: none;
color: var(--color-1);
font-size: 14px
}
.header__mobile_link:before {
content: "";
position: relative;
display: block;
width: 30px;
aspect-ratio: 1/1;
background: var(--color-1);
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat
}
.header__mobile_link:hover {
color: var(--color-2)
}
.header__mobile_link:hover:before {
background: var(--color-2)
}
.header__mobile_link.icon--favorite:before {
-webkit-mask-image: url("../img/icons/heart.svg");
mask-image: url("../img/icons/heart.svg")
}
.header__mobile_link.icon--cart:before {
-webkit-mask-image: url("../img/icons/basket.svg");
mask-image: url("../img/icons/basket.svg")
}
.header__mobile_link.icon--search:before {
-webkit-mask-image: url("../img/icons/search.svg");
mask-image: url("../img/icons/search.svg")
}
.header__mobile_link.icon--phone:before {
-webkit-mask-image: url("../img/icons/phone.svg");
mask-image: url("../img/icons/phone.svg")
}
.header__mobile #menuBtn {
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
width: 50px;
aspect-ratio: 1/1;
background: var(--color-1);
border-radius: 10px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
cursor: pointer
}
.header__mobile #menuBtn span {
height: 3px;
width: 70%;
background: #fff;
border-radius: 100px;
transition: .3s ease
}
.header__mobile #menuBtn.active {
background: #3d3d3d;
transform: translate(-50%, -50%) rotate(180deg)
}
.header__mobile #menuBtn.active span:nth-child(1) {
transform: translateY(7px) rotate(-45deg)
}
.header__mobile #menuBtn.active span:nth-child(2) {
opacity: 0
}
.header__mobile #menuBtn.active span:nth-child(3) {
transform: translateY(-7px) rotate(45deg)
}
.about--desc .col-lg-6 {
margin-bottom: 50px
}
.catalog--list__grid {
grid-template-columns: repeat(2, 1fr)
}
.catalog--list__item_list {
display: none !important;
}
.catalog--list__item:nth-child(3),
.catalog--list__item:nth-child(4) {
grid-column: unset;
grid-row: unset
}
.footer {
padding-bottom: 70px
}
.footer__top_grid {
grid-template-columns: repeat(2, 1fr)
}
.footer__top_grid .footer__ul:nth-child(1) {
grid-column: 1/3;
margin-bottom: 30px
}
.footer__bottom_grid {
grid-template-columns: 1fr
}
.main--slider {
margin-top: 0;
}
.main--slider__slide {
padding: 50px 0
}
.main--slider__slide {
aspect-ratio: unset
}
.subcategories__grid {
grid-template-columns: repeat(2, 1fr)
}
.catalog--products__grid {
grid-template-columns: 1fr
}
.catalog--products__filters {
position: fixed;
width: 95%;
max-width: 420px;
max-height: 95vh;
z-index: 20;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
padding: 20px;
border-radius: 10px;
overflow: auto;
transition: .3s ease;
opacity: 0;
pointer-events: none
}
.catalog--products__filters--bg {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, .2);
z-index: 20;
transition: .3s ease;
opacity: 0;
pointer-events: none
}
.catalog--products__filters_group ul {
padding-left: 0
}
#filter--mobile:checked~.catalog--products__filters--bg,
#filter--mobile:checked~.catalog--products__filters {
opacity: 1;
pointer-events: auto
}
.catalog--products__filters--close {
position: absolute;
top: 20px;
right: 20px;
width: 30px;
background: var(--color-1);
aspect-ratio: 1/1;
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
cursor: pointer
}
.catalog--products__filters--mobile {
display: flex;
align-items: center;
gap: 15px;
font-weight: 500;
color: var(--color-1) !important;
width: -moz-fit-content;
width: fit-content
}
.catalog--products__filters--mobile::before {
content: "";
display: block;
width: 40px;
height: 40px;
background: var(--color-1);
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat
}
.catalog--products__filters--mobile:hover {
color: var(--color-2) !important;
cursor: pointer
}
.catalog--products__filters--mobile:hover:before {
background: var(--color-2)
}
.breadcrumbs {
display: none
}
.single--product .d-flex:has(.single--product__title) {
flex-direction: column;
align-items: flex-start !important;
gap: 24-px
}
.single--product__thumb {
margin-bottom: 20px
}
.cart__list_head {
display: none
}
.cart__list_str {
grid-template-columns: repeat(4, 1fr);
gap: 20px
}
.cart__list_item--data {
grid-column: 1/5
}
.cart__list_item--checked {
position: relative
}
.cart__list_item--checked:before {
content: "Установка";
position: absolute;
display: block;
left: 100%;
transform: translateX(10px);
font-weight: 500;
color: #2e2f33
}
.whishlist__grid {
grid-template-columns: repeat(2, 1fr)
}
.garant__service_grid {
grid-template-columns: repeat(2, 1fr);
gap: 40px 24px
}
.about__text {
grid-template-columns: 1fr
}
.about--adventages__grid {
grid-template-columns: 1fr
}
.about--mission__wrapper {
width: 100%;
padding: 30px 40px;
grid-template-columns: 140px 1fr;
align-items: center
}
.about--mission__wrapper:before {
-webkit-clip-path: unset;
clip-path: unset
}
.about--mission__wrapper img {
transform: unset
}
.about--mission__wrapper_data p {
margin-bottom: 20px
}
.about--mission__post_grid {
gap: 20px
}
.archive--news__grid {
grid-template-columns: repeat(2, 1fr)
}
.contacts__items {
grid-template-columns: 1fr;
gap: 20px
}
.contacts__grid {
display: flex;
flex-direction: column-reverse;
gap: 20px
}
.contacts__grid #map {
aspect-ratio: 1/1
}
.header__mobile_nav {
position: fixed;
background: rgba(0, 0, 0, 0);
top: 0;
left: 0;
right: 0;
bottom: 40px;
transition: .3s ease;
pointer-events: none
}
.header__mobile_nav.active {
background: rgba(0, 0, 0, .5333333333);
pointer-events: auto
}
.header__mobile_nav--sidebar {
position: fixed;
top: 0;
left: 0;
bottom: 40px;
background: #fff;
width: 100%;
max-width: 320px;
transform: translateX(-100%);
transition: .3s ease
}
.header__mobile_nav--sidebar ul {
padding-left: 0;
margin-bottom: 40px;
list-style: none
}
.header__mobile_nav--sidebar ul a {
display: block;
text-decoration: none;
font-weight: 400;
color: #2e2f33;
padding: 10px 20px;
border-bottom: 1px solid #ccc
}
.header__mobile_nav--sidebar ul a:hover {
color: #fff;
background: var(--color-1)
}
.header__mobile_nav.active .header__mobile_nav--sidebar {
transform: translateX(0%)
}
.header__mobile_logo {
display: block;
width: -moz-fit-content;
width: fit-content;
margin: 20px auto 40px
}
.header__mobile_logo img {
display: block;
width: 100%;
height: unset
}
.header__mobile_phone {
display: block;
font-size: 18px;
text-align: center;
width: -moz-fit-content;
width: fit-content;
margin: 0 auto 10px;
font-weight: 500;
color: var(--color-1);
text-decoration: none
}
.header__mobile_phone:hover {
color: var(--color-2)
}
.header__mobile_mail {
display: block;
width: -moz-fit-content;
width: fit-content;
color: #2e2f33;
text-align: center;
text-decoration: none;
font-weight: 500;
margin: 0 auto
}
.header__mobile_mail:hover {
color: var(--color-1)
}
.search--page {
margin-top: 50px !important;
}
.search--page__grid {
grid-template-columns: repeat(2, 1fr);
}
.checkout--wrapper #simplecheckout_step_menu {
flex-direction: column;
}
.simplecheckout-step[style="display: block;"] .simplecheckout-three-column:nth-child(1),
.simplecheckout-step[style="display: block;"] .simplecheckout-three-column:nth-child(3) {
width: 100% !important;
}
.checkout--wrapper .cart__checkout {
margin: 20px auto 0;
}
.checkout--wrapper .simplecheckout-button-block {
position: relative;
top: 0 !important;
margin: 0 auto;
width: 100% !important;
max-width: 480px;
}
.simplecheckout-step[style="display: block;"] .simplecheckout-three-column:nth-child(1) {
padding-right: 0;
}
.sweet--message {
left: 50%;
transform: translateX(-50%) translateY(-100%);
width: 95%;
bottom: unset;
top: 90px;
opacity: 0;
}
@keyframes showMessage {
0% {
opacity: 0;
transform: translateX(-50%) translateY(-100%);
}
10% {
opacity: 1;
transform: translateX(-50%) translateY(0%);
}
90% {
opacity: 1;
transform: translateX(-50%) translateY(0%);
}
100% {
opacity: 0;
transform: translateX(-50%) translateY(-100%);
}
}
.header__mobile_top {
position: sticky;
top: 0;
padding: 10px 0;
background: #f6f6f6;
box-shadow: 0 0 15px -5px var(--color-1);
margin-bottom: 60px;
}
.header__mobile_top .header__mobile_back--arrow {
position: absolute;
left: 0px;
top: 50%;
transform: translateY(-50%);
height: 14px;
padding: 10px 20px;
box-sizing: content-box;
}
.header__mobile_top .header__mobile_back--arrow:before {
content: '';
position: relative;
display: block;
height: 100%;
aspect-ratio: 8 / 14;
background: var(--color-1);
mask-image: url('data:image/svg+xml;utf8,');
mask-repeat: no-repeat;
mask-size: contain;
mask-position: center;
}
.header__mobile_top .header__mobile_back--arrow:before {}
.header__mobile_top .header__logo {
display: block;
margin: 0 auto;
max-width: 133px;
}
.catalog--list__item_name {
font-size: 19px;
}
.product--card .product--card__price:before {
left: 0;
transform: translateY(-100%) translateX(0%);
}
.product--card .product--card__price:after {
left: 0;
transform: translateX(0);
}
.product--card .product--card__addcart {
opacity: 1;
}
}
@media(max-width: 767px) {
.main--slider__slide {
padding: 100px 0
}
.header__mobile_link {
font-size: 0;
gap: 0
}
.main--slider>.header__container {
width: 99%
}
.main--slider__slide h4 {
font-size: 40px
}
.main--slider__slide h5 {
font-size: 16px
}
.main--slider__slide span {
font-size: 16px
}
.main--slider__slide span span {
font-size: 18px
}
.about--desc .col-lg-6 {
gap: 12px
}
.catalog--products__top {
flex-direction: column;
align-items: flex-start;
gap: 20px
}
.product--tabs__tabs {
flex-direction: column
}
.product--tabs__tab {
text-align: center
}
.product--tabs__panel_specials {
grid-template-columns: 1fr
}
.product--tabs__panel_special-1,
.product--tabs__panel_special-2 {
background: unset
}
.product--tabs__panel_special {
padding: 10px 20px
}
.product--tabs__panel_special:nth-child(2n+1) {
background: #f6f6f6
}
.garant .refund__address_item {
grid-template-columns: 1fr;
gap: 10px
}
.about--mission__wrapper {
grid-template-columns: 1fr
}
.about--mission__wrapper img {
max-width: 240px;
margin: 0 auto
}
.about--mission__post_grid {
grid-template-columns: 1fr;
gap: 60px
}
.archive--news__grid {
grid-template-columns: 1fr
}
.checkout--wrapper #simplecheckout_shipping_address .form-horizontal {
grid-template-columns: 1fr;
}
.checkout--wrapper #simplecheckout_shipping_address .form-horizontal>* {
grid-column: 1 / 2 !important;
}
.modalwindow__address {
grid-template-columns: 1fr;
height: unset;
}
.modalwindow__address_left {
height: 40vh;
}
.modalwindow__address_right {
height: 40vh;
}
.modalwindow__address_list {
max-height: 60%;
}
.catalog--list__item_name {
font-size: 14px;
}
}
@media(max-width: 575px) {
.header__container {
display: none
}
.container .swiper-button-prev {
transform: translateY(-50%);
left: 0;
}
.container .swiper-button-next {
transform: translateY(-50%);
right: 0;
}
.main--slider .col-12 {
padding: 0 20px
}
.product--feedback__item {
grid-template-columns: 1fr;
gap: 10px
}
.product--feedback__item_avatar {
display: grid;
grid-template-columns: 80px 1fr;
gap: 20px;
align-items: center
}
.product--feedback__item_avatar span {
position: relative;
left: unset;
top: unset;
bottom: unset;
transform: unset;
font-size: 18px;
font-weight: 700
}
.product--feedback__item[data-parent] {
grid-template-columns: 60px 1fr;
grid-template-columns: 1fr
}
.garant__service_grid {
grid-template-columns: 1fr
}
.garant__tabs {
flex-direction: column;
gap: 10px
}
.garant__tab {
width: 100%;
max-width: 100%
}
.garant__desc_img {
max-width: 100%
}
.news--card__name {
font-size: 18px
}
.news--card__desc {
font-size: 14px
}
}
@media(max-width: 520px) {
.catalog--list__grid {
grid-template-columns: 1fr
}
.last--news__item {
grid-template-columns: 1fr
}
.last--news__item_data {
padding: 30px 20px
}
.footer__top_grid {
grid-template-columns: 1fr
}
.footer__top_grid .footer__ul:nth-child(1) {
grid-column: 1/2
}
.footer__ul:nth-child(1) ul {
grid-template-columns: 1fr
}
.about--desc h1:not(.section__title),
.about--desc h2:not(.section__title),
.about--desc h3:not(.section__title),
.about--desc h4:not(.section__title),
.about--desc h5:not(.section__title),
.about--desc h6:not(.section__title) {
font-size: 7vw
}
.subcategories__grid {
grid-template-columns: 1fr;
gap: 12px
}
.catalog--products__items.grid {
grid-template-columns: 1fr
}
.whishlist__grid {
grid-template-columns: 1fr
}
.search--page__grid {
grid-template-columns: 1fr;
}
.checkout--wrapper .row-customer_field28 .col-sm-8>div {
grid-template-columns: 1fr;
gap: 10px;
}
.catalog--list__item_name {
font-size: 5vw;
}
}
@media(max-width: 490px) {
.single--product__price {
display: flex;
flex-direction: column-reverse;
align-items: flex-start;
margin-top: 20px;
line-height: 1em
}
.single--product__actions_btns {
display: flex;
gap: 10px;
flex-direction: column
}
.cart__list_str {
display: grid;
grid-template-columns: repeat(2, 1fr)
}
.cart__list_item--data {
grid-column: 1/3
}
.cart__list_item--checked {
margin: 0 0 0 20px
}
.cart__list_name {
grid-column: 1/3
}
}
@media(max-width: 380px) {
.swiper-button-next,
.swiper-button-prev {
/* display: none */
}
.header__mobile {
padding: 0 10px
}
.header__mobile_link:before {
transform: scale(0.7)
}
}