@charset "UTF-8";

.header {
padding: 30px 0 0;
position: relative;
z-index: 5;
}
.header.sticky {
position: fixed;
z-index: 1000;
left: 0;
top: 0;
right: 0;
background-color: #fff;
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.25);
padding: 10px 0;
}
.header.sticky .header__nav {
margin-top: 15px;
}
.header.sticky .hidden-menu {
top: calc(100% + 10px);
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.25);
border-radius: 0 0 20px 20px;
}
.header__wrapper {
position: relative;
}
.header__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.header__logo {
display: flex;
align-items: center;
gap: 17px;
font-size: 12px;
line-height: 120%;
color: #000;
text-decoration: none;
}
.header__logo img {
width: 145px;
height: auto;
}
.header__search-city {
display: flex;
align-items: center;
gap: 20px;
}
.header__search {
width: 275px;
position: relative;
}
.header__search svg {
position: absolute;
inset: 0 auto 0 15px;
margin: auto;
width: 18px;
height: 18px;
pointer-events: none;
}
.header__search input {
width: 100%;
height: 44px;
padding: 0 15px 0 45px;
border: 1px solid #ECECEC;
border-radius: 22px;
font-size: 13px;
line-height: 120%;
}
.header__city {
display: flex;
align-items: center;
gap: 7px;
font-size: 11px;
line-height: 120%;
}
.header__city svg {
width: 18px;
height: 18px;
flex-shrink: 0;
}
.header__top-menu {
position: relative;
}
.header__top-menu ul {
font-size: 0;
line-height: 0;
padding: 0;
margin: 8px 0 0;
display: flex;
align-items: center;
gap: 20px;
list-style-type: none;
}
.header__top-menu ul a {
font-size: 12px;
line-height: 120%;
color: #000;
text-decoration: none;
transition-duration: 0.15s;
}
.header__top-menu ul a:hover {
color: var(--accent);
}
.header__address {
font-size: 12px;
line-height: 120%;
color: #aaa;
}
.header__address:hover + .header__address-hidden {
opacity: 1;
visibility: visible;
}
.header__address-hidden {
position: absolute;
left: -37px;
top: -12px;
background: #FFFFFF;
box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.1);
border-radius: 11px;
padding: 12px 15px 12px 12px;
opacity: 0;
visibility: hidden;
transition-duration: 0.15s;
white-space: nowrap;
}
.header__address-hidden svg {
width: 16px;
height: 16px;
flex-shrink: 0;
margin-right: 6px;
}
.header__address-hidden--title {
font-size: 12px;
line-height: 120%;
}
.header__address-hidden--desc {
font-size: 12px;
line-height: 120%;
color: #aaa;
margin: 5px 0 0 24px;
padding-right: 15px;
}
.header__address-hidden a {
font-weight: bold;
text-decoration: none;
color: #000;
}
.header__address-hidden--item {
font-size: 0;
}
.header__address-hidden--item + div {
position: relative;
margin-top: 9px;
padding-top: 9px;
}
.header__address-hidden--item + div::before {
content: "";
position: absolute;
left: 24px;
right: 0;
top: 0;
height: 1px;
background-color: #EAEAEA;
}
.header__address-hidden:hover {
opacity: 1;
visibility: visible;
}
.header__address-desc {
display: flex;
align-items: center;
}
.header__tel {
display: flex;
flex-direction: column;
}
.header__tel a {
display: inline-flex;
align-items: center;
text-decoration: none;
line-height: 120%;
}
.header__tel-link {
font-size: 12px;
color: #aaa;
}
.header__tel-number {
font-weight: 700;
font-size: 20px;
color: #000;
gap: 3px;
margin-top: 5px;
}
.header__tel-number:hover {
color: #000;
}
.header__tel-number svg {
width: 16px;
height: 16px;
flex-shrink: 0;
}
.header__links {
display: flex;
align-items: center;
gap: 10px;
}
.header__links a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: 1px solid #ECECEC;
border-radius: 100%;
padding: 8px;
transition-duration: 0.15s;
}
.header__links a svg {
width: 16px;
height: 16px;
transition-duration: 0.15s;
}
.header__links a:hover {
border-color: var(--accent);
background-color: var(--accent);
}
.header__links a:hover svg {
filter: brightness(0) invert(1);
}
.header__nav {
margin-top: 40px;
display: flex;
align-items: center;
gap: 10px;
}
.header__nav-list {
display: flex;
align-items: center;
gap: 10px;
flex: 1;
}
.header__nav-list ul {
height: 54px;
display: flex;
align-items: center;
font-size: 0;
line-height: 0;
margin: 0;
list-style-type: none;
gap: 20px;
background: #F5F5F5;
border-radius: 27px;
padding: 0 25px;
}
.header__nav-list ul a {
display: inline-flex;
font-size: 14px;
line-height: 120%;
color: #000;
text-decoration: none;
transition-duration: 0.15s;
}
.header__nav-list ul a:hover {
color: var(--accent);
}
.header__btns {
gap: 10px;
display: flex;
align-items: center;
white-space: nowrap;
}
.header__btns svg {
width: 22px;
height: 22px;
flex-shrink: 0;
}
.header__btns a {
display: inline-flex;
align-items: center;
justify-content: center;
height: 54px;
gap: 20px;
font-size: 14px;
line-height: 120%;
border-radius: 27px;
transition-duration: 0.15s;
text-decoration: none;
}
.header__btn-link {
padding: 0 30px;
border: 1px solid var(--accent);
color: #000;
text-decoration: none;
}
.header__btn-link:hover {
background-color: var(--accent);
color: #fff;
}
.header__btn-cart {
background: var(--gradient);
padding: 0 35px 0 20px;
color: #fff;
}
.header__btn-cart:hover {
color: #fff;
}
.header__cat-btn {
height: 54px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #1C1C1C;
border-radius: 27px;
padding: 0 20px;
gap: 20px;
font-weight: 500;
font-size: 14px;
line-height: 120%;
color: #fff;
border: none;
}
.header__cat-btn--icon {
position: relative;
display: block;
width: 20px;
height: 1px;
margin: 0 auto;
border: none;
cursor: pointer;
color: inherit;
font-size: 0;
transition: 0.35s;
height: 16px;
background: transparent;
border-top: 2px solid #fff;
border-bottom: 2px solid #fff;
}
.header__cat-btn--icon::before, .header__cat-btn--icon::after {
position: absolute;
top: 0;
left: 50%;
display: block;
width: 100%;
height: 2px;
background: #fff;
content: "";
transition: transform 0.35s;
top: 50%;
transform: translate(-50%, -50%);
}
.header__cat-btn--icon.active {
border-color: transparent;
}
.header__cat-btn--icon.active::before {
transform: translate(-50%, -50%) rotate(135deg);
}
.header__cat-btn--icon.active::after {
transform: translate(-50%, -50%) rotate(-135deg);
}
.hidden-menu {
padding: 30px 15px;
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 1000;
background-color: #fff;
}
.hidden-menu__wrapper {
display: flex;
gap: 70px;
}
.hidden-menu__title {
font-size: 22px;
line-height: 120%;
margin-bottom: 22px;
}
.hidden-menu ul {
font-size: 0;
padding: 0;
margin: 0;
}
.hidden-menu ul a {
display: inline-flex;
font-size: 12px;
color: #000;
text-decoration: none;
transition-duration: 0.15s;
}
.hidden-menu ul a:hover {
color: var(--accent);
}
.hidden-menu ul a.all {
color: #aaa;
}
.hidden-menu ul li + li {
margin-top: 12px;
}
.btn {
font-weight: 500;
font-size: 16px;
line-height: 120%;
color: #fff;
text-decoration: none;
background: var(--gradient);
border-radius: 27px;
height: 56px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 35px;
transition-duration: 0.15s;
border: none;
}
.btn:hover {
color: #fff;
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.25);
}
.main {
margin-top: 40px;
}
.main__wrapper {
display: flex;
gap: 15px;
}
.main__left {
flex: 1 1 100%;
overflow: hidden;
position: relative;
border-radius: 22px;
overflow: hidden;
padding: 9px;
display: flex;
flex-direction: column;
align-items: flex-start;
min-height: 325px;
}
.main__left-bg {
min-width: 0;
overflow: hidden;
position: absolute;
inset: 0;
}
.main__left-bg--init {
width: 100%;
height: 100%;
}
.main__left-bg--init img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.main__left-content {
padding: 25px 30px;
position: relative;
max-width: 460px;
flex-grow: 1;
display: flex;
flex-direction: column;
background: linear-gradient(104.18deg, rgba(0, 0, 0, 0.7) -9.52%, rgba(0, 0, 0, 0) 101.58%), linear-gradient(126.6deg, rgba(255, 255, 255, 0.12) 28.69%, rgba(255, 255, 255, 0) 100%);
-webkit-backdrop-filter: blur(10.5px);
backdrop-filter: blur(10.5px);
border-radius: 16px;
z-index: 1;
}
.main__left-content--slider {
overflow: hidden;
margin-bottom: 30px;
}
.main__title {
font-weight: 700;
font-size: clamp(26px, 3vw, 38px);
line-height: 110%;
color: #fff;
}
.main__desc {
font-size: 16px;
font-weight: 500;
color: rgba(255, 255, 255, 0.5);
margin-top: 16px;
}
.main__nav {
margin-top: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
position: relative;
z-index: 2;
}
.main__arrows {
display: flex;
align-items: center;
gap: 8px;
}
.main__arrows-prev, .main__arrows-next {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 100%;
}
.main__arrows-prev svg, .main__arrows-next svg {
width: 18px;
height: 18px;
}
.main__arrows-prev {
border: 1px solid #FFFFFF;
}
.main__arrows-prev svg {
stroke: #fff;
}
.main__arrows-next {
background-color: #fff;
}
.main__arrows-next svg {
stroke: #000;
}
.main__right {
flex: 0 0 450px;
border-radius: 22px;
overflow: hidden;
padding: 9px;
}
.main__right-content {
display: flex;
flex-direction: column;
align-items: flex-start;
height: 100%;
padding: 25px 30px 30px;
background: linear-gradient(104.18deg, rgba(0, 0, 0, 0.7) -9.52%, rgba(0, 0, 0, 0) 101.58%), linear-gradient(126.6deg, rgba(255, 255, 255, 0.12) 28.69%, rgba(255, 255, 255, 0) 100%);
-webkit-backdrop-filter: blur(10.5px);
backdrop-filter: blur(10.5px);
border-radius: 16px;
max-width: 230px;
}
.main__right-btn {
margin-top: auto;
}
.main__right-title {
font-weight: 700;
font-size: 24px;
line-height: 110%;
color: #fff;
}
.main__right-promo {
margin-top: 20px;
background: #FFFFFF;
border-radius: 16px;
font-weight: 700;
font-size: 16px;
line-height: 120%;
text-align: center;
text-transform: uppercase;
color: #082F2F;
padding: 4px 15px;
}
.main__right-desc {
font-weight: 500;
font-size: 12px;
color: rgba(255, 255, 255, 0.5);
margin-top: 15px;
margin-bottom: 20px;
}
.bg-center {
background-size: cover;
background-position: 50%;
background-repeat: no-repeat;
}
.swiper-pagination-bullets {
display: flex;
align-items: center;
gap: 10px;
}
.swiper-pagination-bullet {
width: 8px;
height: 8px;
border-radius: 100%;
border: 1px solid #FFFFFF;
}
.swiper-pagination-bullet-active {
background-color: #fff;
}
.s-title {
font-size: 30px;
line-height: 110%;
font-weight: 400;
margin: 0;
}
.mt100 {
margin-top: 100px;
}
.product-card {
display: flex;
flex-direction: column;
text-decoration: none;
}
.product-card__image {
height: 220px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
padding: 10px;
border-radius: 12px;
overflow: hidden;
background-color: #fff;
}
.product-card__image img {
max-width: 100%;
max-height: 100%;
}
.product-card__status {
position: absolute;
left: 0;
top: 0;
background: #DA2020;
border-radius: 12px;
font-weight: 500;
font-size: 12px;
line-height: 120%;
color: #fff;
padding: 5px 12px;
}
.product-card__status.new {
background: #9BB974;
}
.product-card__bottom {
margin-top: 15px;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.product-card__art {
font-size: 10px;
line-height: 120%;
color: #BCBCBC;
display: flex;
align-items: center;
}
.product-card__art svg {
width: 16px;
height: 16px;
flex-shrink: 0;
margin-right: 9px;
}
.product-card__title {
margin: 15px 0;
font-size: 12px;
line-height: 120%;
color: #000;
}
.product-card__price-box {
margin-top: auto;
display: flex;
align-items: center;
gap: 12px;
}
.product-card__cart {
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 100%;
background: var(--gradient);
}
.product-card__cart svg {
width: 22px;
height: 22px;
}
.product-card__price-values {
display: flex;
flex-direction: column;
align-items: flex-start;
color: #000;
line-height: 1.2;
}
.product-card__price-values span {
font-size: 14px;
position: relative;
}
.product-card__price-values span::before {
content: "";
height: 2px;
position: absolute;
inset: -2px;
transform: rotate(170deg);
border-radius: 5px;
background-color: #DA2020;
margin: auto;
}
.product-card__price-values b {
font-weight: 700;
font-size: 18px;
}
.product-card__price-values span + b {
color: #DA2020;
}
.all-link {
display: inline-flex;
align-items: center;
gap: 5px;
color: var(--accent);
text-decoration: none;
font-size: 14px;
}
.all-link svg {
flex-shrink: 0;
width: 18px;
height: 18px;
}
.carousel__title {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px 20px;
}
.carousel__wrapper {
margin-top: 30px;
position: relative;
}
.carousel__prev, .carousel__next {
width: 38px;
height: 38px;
background: #F2F2F2;
border-radius: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}
.carousel__prev svg, .carousel__next svg {
width: 18px;
height: 18px;
stroke: #000;
}
.carousel__prev {
left: -53px;
}
.carousel__next {
right: -53px;
}
.carousel__init {
overflow: hidden;
}
.carousel .swiper-slide {
height: auto;
}
.carousel .product-card {
height: 100%;
}
.swiper-button-lock {
display: none !important;
}
.advantages__wrapper {
margin-top: 30px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
}
.advantages__item {
min-height: 200px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 30px;
position: relative;
padding: 25px 150px 25px 30px;
background: #F5F5F5;
border-radius: 20px;
}
.advantages__item img {
position: absolute;
right: 0;
top: 0;
bottom: 0;
margin: auto;
max-height: 100%;
max-width: 150px;
}
.advantages__title {
font-weight: 500;
font-size: 20px;
line-height: 120%;
}
.advantages__desc {
font-weight: 500;
font-size: 12px;
color: #989898;
}
.sales__wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
}
.home-about {
margin-top: 140px;
}
.home-about__wrapper {
display: flex;
gap: 50px;
background: #F5F5F5;
border-radius: 20px;
padding: 30px 40px;
}
.home-about .s-title {
margin-bottom: 30px;
}
.home-about__left {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.home-about__left p {
font-size: 18px;
color: #ACACAC;
margin-bottom: 0;
}
.home-about__left .btn {
margin-top: 30px;
}
.home-about__center {
margin-top: -50px;
margin-bottom: -50px;
}
.home-about__center img {
width: 400px;
height: 400px;
border-radius: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.home-about__right {
margin-top: -50px;
}
.home-about__right-image {
display: flex;
gap: 15px;
align-items: flex-end;
margin-bottom: 35px;
}
.home-about__right-image img {
width: 178px;
height: 178px;
border-radius: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.home-about__right-image--icon {
width: 76px;
height: 76px;
border-radius: 100%;
display: flex;
align-items: center;
justify-content: center;
background: var(--gradient);
}
.home-about__right-title {
font-weight: 700;
font-size: 24px;
line-height: 120%;
}
.home-about__right-desc {
font-size: 14px;
line-height: 120%;
color: #ACACAC;
margin-top: 20px;
}
.footer {
margin-top: 100px;
border-top: 1px solid #E9E9E9;
padding-top: 40px;
padding-bottom: 20px;
}
.footer__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px 30px;
}
.footer__logo {
width: 140px;
display: flex;
}
.footer__logo img {
max-width: 100%;
}
.footer__search {
flex: 0 1 480px;
position: relative;
}
.footer__search input {
border: 1px solid #ECECEC;
border-radius: 34px;
padding: 0 65px 0 21px;
height: 54px;
}
.footer__search-btn {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--gradient);
width: 42px;
height: 42px;
border-radius: 100%;
position: absolute;
right: 7px;
top: 0;
bottom: 0;
margin: auto;
pointer-events: none;
}
.footer__search svg {
width: 18px;
height: 18px;
filter: brightness(0) invert(1);
}
.footer__search input {
width: 100%;
}
.footer__soc {
display: flex;
align-items: center;
gap: 10px;
}
.footer__soc a {
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid #ECECEC;
border-radius: 100%;
width: 44px;
height: 44px;
}
.footer__soc a svg {
width: 18px;
height: 18px;
}
.footer__btn {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: center;
gap: 15px;
}
.footer__btn a {
height: 54px;
display: inline-flex;
align-items: center;
border-radius: 27px;
transition-duration: 0.15s;
white-space: nowrap;
}
.footer__mid {
display: flex;
justify-content: space-between;
gap: 60px;
margin-top: 60px;
}
.footer__item ul {
padding: 0;
margin: 0;
list-style-type: none;
}
.footer__item ul a {
font-size: 12px;
display: inline-flex;
line-height: 1.2;
color: #000000;
text-decoration: none;
transition-duration: 0.15s;
}
.footer__item ul a:hover {
color: var(--accent);
}
.footer__item ul a.all {
color: #AAAAAA;
}
.footer__item-title {
font-size: 22px;
line-height: 120%;
margin-bottom: 22px;
}
.footer__contacts-item {
display: flex;
align-items: center;
gap: 15px;
}
.footer__contacts-item + div {
margin-top: 15px;
}
.footer__contacts-icon {
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 100%;
background: var(--gradient);
flex-shrink: 0;
}
.footer__contacts-icon svg {
width: 18px;
height: 18px;
}
.footer__contacts-item--value {
font-weight: 700;
font-size: 16px;
color: #082F2F;
text-decoration: none;
}
.footer__contacts-item--desc {
font-size: 12px;
color: #BCBCBC;
}
.footer__bottom {
margin-top: 50px;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 5px 24px;
}
.footer__bottom span,
.footer__bottom a {
display: inline-flex;
align-items: center;
gap: 5px 12px;
font-size: 10px;
color: #AAAAAA;
}
.footer__pay {
margin-top: 20px;
} input[type=search]::-ms-clear {
display: none;
width: 0;
height: 0;
}
input[type=search]::-ms-reveal {
display: none;
width: 0;
height: 0;
} input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
display: none;
}
.mobile-menu {
position: fixed;
z-index: 1000;
top: 0;
left: 0;
right: 0;
display: none;
}
.mobile-menu .header__search.search {
width: 100%;
padding: 10px;    z-index: -1;
}
.mobile-menu__top {
height: 60px;
padding: 5px 10px;
gap: 5px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #434343;
background-color: rgba(10, 10, 10, 0.85);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
}
.mobile-menu__top-left {
display: flex;
align-items: center;
gap: 15px;
height: 100%;
}
.mobile-menu__logo {
height: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.mobile-menu__logo img {
max-width: 100%;
height: 30px;
}
.mobile-menu__logo span {
font-size: 10px;
color: #fff;
margin-top: 5px;
}
.mobile-menu__btn {
width: 40px;
height: 40px;
background-color: var(--accent);
display: flex;
align-items: center;
justify-content: center;
border-radius: 100%;
}
@media (max-width: 410px) {
.mobile-menu__btn {
width: 36px;
height: 36px;
}
}
.mobile-menu__btn button {
position: relative;
display: block;
width: 20px;
height: 1px;
margin: 0 auto;
border: none;
cursor: pointer;
color: inherit;
font-size: 0;
transition: 0.35s;
height: 16px;
background: transparent;
border-top: 2px solid #fff;
border-bottom: 2px solid #fff;
}
.mobile-menu__btn button::before, .mobile-menu__btn button::after {
position: absolute;
top: 0;
left: 50%;
display: block;
width: 100%;
height: 2px;
background: #fff;
content: "";
transition: transform 0.35s;
top: 50%;
transform: translate(-50%, -50%);
}
.mobile-menu__btn button.active {
border-color: transparent;
}
.mobile-menu__btn button.active::before {
transform: translate(-50%, -50%) rotate(135deg);
}
.mobile-menu__btn button.active::after {
transform: translate(-50%, -50%) rotate(-135deg);
}
.mobile-menu__btn-catalog {
font-size: 18px;
font-weight: 600;
color: #222;
display: inline-flex;
align-items: center;
background-color: #fff;
border-radius: 10px;
padding: 5px 12px;
margin-bottom: 20px;
}
.mobile-menu__btn-catalog--icon {
width: 40px;
height: 40px;
border-radius: 4px;
background-color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
}
.mobile-menu__btn-catalog span {
transition: 0.1s;
position: relative;
display: block;
width: 18px;
height: 1px;
margin: 0 0 0 10px;
border: none;
cursor: pointer;
background: #222;
color: inherit;
font-size: 0;
}
.mobile-menu__btn-catalog span::before, .mobile-menu__btn-catalog span::after {
position: absolute;
top: 0;
left: 50%;
display: block;
width: 100%;
height: 1px;
background: #222;
content: "";
transition: transform 0.35s;
}
.mobile-menu__btn-catalog span::before {
transform: translate(-50%, -5px);
transform-origin: 100% 0%;
}
.mobile-menu__btn-catalog span::after {
transform: translate(-50%, 5px);
transform-origin: 100% 0%;
}
.mobile-menu__btn-catalog:hover span {
transform: translateX(3px);
transition: transform 0.15s 0.5s;
}
.mobile-menu__btn-catalog:hover span::before {
transform: translate(-50%, 0) rotate(35deg) scaleX(0.6);
}
.mobile-menu__btn-catalog:hover span::after {
transform: translate(-50%, 0) rotate(-35deg) scaleX(0.6);
}
.mobile-menu__top-right {
display: flex;
align-items: center;
gap: 5px;
}
.mobile-menu__link {
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid #fff;
border-radius: 100%;
transition-duration: 0.15s;
position: relative;
}
.mobile-menu__link:hover {
background-color: var(--accent);
border-color: var(--accent);
}
.mobile-menu__link:hover svg {
fill: #222;
}
.mobile-menu__link svg {
width: 20px;
height: 20px;
fill: #fff;
}
@media (max-width: 410px) {
.mobile-menu__link {
width: 36px;
height: 36px;
}
.mobile-menu__link svg {
width: 16px;
height: 16px;
}
}
.mobile-menu .mobile-cart span {
position: absolute;
padding: 5px;
border-radius: 100%;
background-color: var(--accent);
right: -5px;
bottom: -5px;
font-size: 12px;
color: #000;
width: 20px;
height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.mobile-menu__body {
padding: 20px;
height: calc(100vh - 60px);
overflow: auto;
transition: all 0.2s ease-in-out;
position: absolute;
inset: 60px 0 0 0;
transform: translate(-100%, 0);
opacity: 0;
background-color: rgba(10, 10, 10, 0.85);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
visibility: hidden;
}
.mobile-menu__body::-webkit-scrollbar-track {
background-color: #fff;
}
.mobile-menu__body::-webkit-scrollbar {
width: 6px;
background-color: #F5F5F5;
}
.mobile-menu__body::-webkit-scrollbar-thumb {
background-color: var(--accent);
}
.mobile-menu__body.opened {
transform: translate(0, 0);
opacity: 1;
visibility: visible;
}
.mobile-menu__catalog {
position: absolute;
inset: 60px 0 0 0;
transition: all 0.2s ease-in-out;
height: calc(100vh - 60px);
transform: translate(100%);
opacity: 0;
z-index: 500;
background-color: rgba(10, 10, 10, 0.85);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
padding: 20px;
overflow: auto;
visibility: hidden;
}
.mobile-menu__catalog::-webkit-scrollbar-track {
background-color: #fff;
}
.mobile-menu__catalog::-webkit-scrollbar {
width: 6px;
background-color: #F5F5F5;
}
.mobile-menu__catalog::-webkit-scrollbar-thumb {
background-color: var(--accent);
}
.mobile-menu__catalog.opened {
transform: translate(0, 0);
opacity: 1;
visibility: visible;
}
.mobile-menu__catalog-grid {
display: flex;
flex-wrap: wrap;
margin-top: 20px;
gap: 20px clamp(20px, 5vw, 40px);
}
.mobile-menu__btn-back {
font-size: 16px;
color: #fff;
font-weight: 600;
display: flex;
align-items: center;
}
.mobile-menu__btn-back svg {
width: 20px;
height: 20px;
stroke: #fff;
fill: none;
margin-right: 4px;
}
.mobile-menu__catalog-title {
font-size: 18px;
line-height: 1;
text-decoration: none;
display: inline-flex;
margin-bottom: 10px;
color: #fff;
font-weight: 600;
}
.mobile-menu__catalog-title:hover {
color: #fff;
}
.mobile-menu__catalog-list {
margin: 0;
padding: 0;
font-size: 0;
}
.mobile-menu__catalog-list li + li {
margin-top: 7px;
}
.mobile-menu__catalog-list a {
font-size: clamp(16px, 3vw, 18px);
font-weight: 500;
color: #fff;
text-decoration: none;
}
.mobile-menu__catalog-list a:hover {
color: #fff;
}
.mobile-menu__wrapper-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px 30px;
}
.mobile-menu__contacts {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 30px;
}
.mobile-menu__contacts a {
display: inline-flex;
align-items: center;
font-size: 18px;
color: #fff;
font-weight: 600;
text-decoration: none;
}
.mobile-menu__contacts a svg {
width: 20px;
height: 20px;
fill: #fff;
margin-right: 10px;
}
.mobile-menu__contacts a:hover {
color: #fff;
}
.mobile-menu__social {
display: flex;
align-items: center;
margin-top: 20px;
gap: 7px;
}
.mobile-menu__social a {
width: 36px;
height: 36px;
background-color: var(--accent);
border-radius: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
}
.mobile-menu__social a img,
.mobile-menu__social a svg {
width: 18px;
filter: brightness(0) invert(1);
}
.mobile-menu__callback {
margin-top: 20px;
}
.mobile-menu__callback a {
height: 50px;
padding: 0 20px;
font-size: 16px;
color: #fff;
}
.bread {
margin: 20px 0;
}
.bread__wrapper {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.bread__wrapper a,
.bread__wrapper span {
font-size: 10px;
line-height: 120%;
color: #AAAAAA;
display: inline-flex;
text-decoration: none;
text-transform: lowercase;
}
.bread__wrapper > * + *::before {
content: "<";
margin: 0 7px;
}
.opt-main__wrapper {
display: flex;
gap: 40px;
background: #F5F5F5;
border-radius: 20px;
padding: 40px 50px;
}
.opt-main__left {
flex: 1 0 650px;
}
.opt-main__title {
font-weight: 700;
font-size: clamp(26px, 3vw, 48px);
line-height: 110%;
}
.opt-main__desc {
font-size: 20px;
line-height: 120%;
color: #8B8B8B;
margin-top: 15px;
}
.opt-main__btn {
margin-top: 30px;
}
.opt-main__gallery {
display: flex;
gap: 18px;
margin-bottom: -160px;
}
.opt-main__gallery img {
border-radius: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.opt-main__gallery img:nth-child(1) {
width: 400px;
height: 400px;
}
.opt-main__gallery img:nth-child(2) {
width: 250px;
height: 250px;
}
.conveniently {
margin-top: 130px;
}
.conveniently__wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 40px 85px;
margin-top: 45px;
}
.conveniently__item {
min-height: 215px;
position: relative;
}
.conveniently__item::before {
content: "";
position: absolute;
inset: 0;
margin: auto;
z-index: -1;
width: 215px;
height: 215px;
border-radius: 100%;
background: #F5F5F5;
}
.conveniently__item-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.conveniently__item-title {
font-weight: 500;
font-size: 20px;
line-height: 120%;
}
.conveniently__item-icon {
width: 94px;
height: 94px;
border-radius: 100%;
padding: 10px;
display: flex;
align-items: center;
justify-content: center;
background: var(--gradient);
flex-shrink: 0;
}
.conveniently__item-icon img {
max-width: 100%;
max-height: 100%;
}
.conveniently__item-desc {
margin-top: 25px;
font-weight: 500;
font-size: 14px;
color: #989898;
}
.big-title {
font-weight: 700;
font-size: clamp(26px, 3vw, 38px);
line-height: 110%;
margin: 0;
}
.mt45 {
margin-top: 45px;
}
.mt25 {
margin-top: 25px;
}
.catalog__nav {
margin-top: 15px;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 15px 20px;
}
.catalog__wrapper {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 50px 15px;
}
.load-more {
display: flex;
align-items: flex-start;
margin-top: 70px;
}
.load-more__btn {
display: flex;
align-items: center;
height: 56px;
background: #F5F5F5;
border-radius: 27px;
padding: 6px 25px 6px 6px;
gap: 20px;
min-width: 50%;
cursor: pointer;
}
.load-more__icon {
width: 44px;
height: 44px;
border-radius: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: #000;
}
.load-more__icon svg {
width: 24px;
height: 24px;
}
.load-more__title {
font-size: 16px;
font-weight: 500;
}
.load-more__count {
margin-left: auto;
color: #BCBCBC;
font-size: 14px;
}
.terms__wrapper {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 75px;
margin-top: 40px;
}
.terms__item {
display: flex;
gap: 35px;
}
.terms__item-icon {
padding: 20px;
width: 100px;
flex-shrink: 0;
background: #F5F5F5;
border-radius: 67px;
}
.terms__item-icon img {
max-width: 100%;
}
.terms__item-title {
font-weight: 500;
font-size: 28px;
line-height: 120%;
margin-bottom: 20px;
}
.terms__item-desc {
font-size: 18px;
color: #8B8B8B;
}
.form__wrapper {
padding: 40px 85px 45px;
background: #F5F5F5;
border-radius: 20px;
display: flex;
align-items: center;
gap: 85px;
}
.form__image {
width: 315px;
margin-top: -75px;
margin-bottom: -45px;
position: relative;
flex-shrink: 0;
align-self: flex-end;
}
.form__image::before {
content: "";
width: 250px;
height: 250px;
border-radius: 100%;
background-color: var(--accent);
position: absolute;
inset: 0;
margin: auto;
}
.form__image img {
max-width: 100%;
height: auto;
position: relative;
z-index: 2;
}
.form__title {
font-size: clamp(24px, 3vw, 48px);
font-weight: bold;
line-height: 1.1;
}
.form__desc {
font-size: clamp(18px, 3vw, 20px);
line-height: 120%;
color: #8B8B8B;
margin-top: 25px;
}
.form__fields {
margin-top: 30px;
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.form__input {
position: relative;
width: 255px;
}
.form__input input {
width: 100%;
height: 56px;
padding: 0 40px 0 25px;
border: none;
border-radius: 27px;
font-size: 16px;
}
.form__input svg {
width: 20px;
height: 20px;
position: absolute;
right: 18px;
top: 0;
bottom: 0;
margin: auto;
}
.form__checkbox {
display: flex;
align-items: center;
gap: 9px;
font-weight: 500;
font-size: 10px;
line-height: 120%;
color: #BDBDBD;
}
.form__checkbox svg {
width: 20px;
height: 20px;
flex-shrink: 0;
}
.form__checkbox a {
color: #BDBDBD;
}
.faq__wrapper {
margin-top: 25px;
}
.faq__item {
border-radius: 28px;
border: 1px solid transparent;
background-color: #F5F5F5;
transition-duration: 0.15s;
cursor: pointer;
}
.faq__item + div {
margin-top: 15px;
}
.faq__item.opened {
border: 1px solid #ECECEC;
background-color: transparent;
}
.faq__item.opened .faq__item-title::after {
content: "-";
}
.faq__item-title {
font-weight: 700;
font-size: 18px;
line-height: 120%;
position: relative;
padding: 17px 35px 17px 50px;
position: relative;
}
.faq__item-title::before {
content: "";
position: absolute;
left: 16px;
top: 0;
bottom: 0;
margin: auto;
width: 20px;
height: 20px;
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 17.5C14.1421 17.5 17.5 14.1421 17.5 10C17.5 5.85786 14.1421 2.5 10 2.5C5.85786 2.5 2.5 5.85786 2.5 10C2.5 14.1421 5.85786 17.5 10 17.5Z' stroke='black' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10 14.6875C10.3452 14.6875 10.625 14.4077 10.625 14.0625C10.625 13.7173 10.3452 13.4375 10 13.4375C9.65482 13.4375 9.375 13.7173 9.375 14.0625C9.375 14.4077 9.65482 14.6875 10 14.6875Z' fill='black'/%3E%3Cpath d='M10 11.2504V10.6254C10.4326 10.6254 10.8556 10.4971 11.2153 10.2567C11.575 10.0163 11.8554 9.6747 12.021 9.27499C12.1866 8.87527 12.2299 8.43544 12.1455 8.01111C12.0611 7.58677 11.8527 7.197 11.5468 6.89107C11.2409 6.58514 10.8511 6.3768 10.4268 6.2924C10.0024 6.20799 9.56259 6.25131 9.16288 6.41688C8.76317 6.58245 8.42153 6.86282 8.18116 7.22256C7.94079 7.58229 7.8125 8.00522 7.8125 8.43787' stroke='black' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
.faq__item-title::after {
content: "+";
position: absolute;
right: 12px;
top: 0;
bottom: 0;
margin: auto;
display: flex;
align-items: center;
justify-content: center;
font-size: 40px;
font-weight: 400;
color: var(--accent);
}
.faq__item-content {
display: none;
padding: 0 20px 20px 50px;
}
.faq__item-content p:last-child {
margin-bottom: 0;
}
.catalog-page__wrapper {
display: flex;
gap: 35px;
margin-top: 35px;
}
.catalog-page__filter {
width: 200px;
flex-shrink: 0;
}
.catalog-page__grid {
display: grid;
flex: 1;
grid-template-columns: repeat(5, 1fr);
gap: 50px 15px;
}
.signle-card__wrapper {
display: flex;
gap: 65px;
}
.signle-card .product-card__status {
position: relative;
padding: 4px 17px;
}
.signle-card__gallery {
width: 465px;
flex-shrink: 0;
gap: 30px;
display: flex;
height: 380px;
}
.signle-card__gallery img {
max-width: 100%;
max-height: 100%;
}
.signle-card__gallery .swiper-slide {
border-radius: 12px;
background-color: #F5F5F5;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
padding: 2px;
}
.signle-card__gallery-nav {
width: 56px;
flex-shrink: 0;
overflow: hidden;
}
.signle-card__gallery-nav .swiper-slide {
border: 1px solid transparent;
}
.signle-card__gallery-nav .swiper-slide.swiper-slide-thumb-active {
border: 1px solid #000000;
}
.signle-card__gallery-main {
flex: 1;
min-width: 0;
overflow: hidden;
}
.signle-card__gallery-main .swiper-slide {
background-color: #F5F5F5;
}
.signle-card__gallery-main a {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
}
.signle-card__main {
flex: 1;
}
.signle-card__main-top {
display: flex;
align-items: center;
gap: 15px;
}
.signle-card__favorite {
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
}
.signle-card__favorite::before {
content: "";
width: 16px;
height: 16px;
flex-shrink: 0;
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.27569 11.9208L11.4279 13.9179C11.8308 14.1732 12.3311 13.7935 12.2115 13.3232L11.3008 9.74052C11.2752 9.64073 11.2782 9.53573 11.3096 9.4376C11.3409 9.33946 11.3994 9.25218 11.4781 9.18577L14.3049 6.83306C14.6763 6.52392 14.4846 5.90751 14.0074 5.87654L10.3159 5.63696C10.2165 5.62986 10.1211 5.59465 10.0409 5.53545C9.96069 5.47625 9.89896 5.39548 9.86289 5.30255L8.48612 1.83549C8.44869 1.73685 8.38215 1.65194 8.29532 1.59201C8.2085 1.53209 8.1055 1.5 8 1.5C7.89451 1.5 7.79151 1.53209 7.70468 1.59201C7.61786 1.65194 7.55131 1.73685 7.51389 1.83549L6.13712 5.30255C6.10104 5.39548 6.03931 5.47625 5.95912 5.53545C5.87892 5.59465 5.78355 5.62986 5.68412 5.63696L1.99263 5.87654C1.51544 5.90751 1.32373 6.52392 1.69515 6.83306L4.52185 9.18577C4.60063 9.25218 4.65906 9.33946 4.69044 9.4376C4.72181 9.53573 4.72485 9.64073 4.6992 9.74052L3.85459 13.063C3.71111 13.6274 4.31143 14.083 4.79495 13.7767L7.72431 11.9208C7.8067 11.8683 7.90234 11.8405 8 11.8405C8.09767 11.8405 8.1933 11.8683 8.27569 11.9208V11.9208Z' stroke='%23BCBCBC' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
.signle-card__favorite.active {
color: var(--accent);
}
.signle-card__favorite.active::before {
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.27569 11.9208L11.4279 13.9179C11.8308 14.1732 12.3311 13.7935 12.2115 13.3232L11.3008 9.74052C11.2752 9.64073 11.2782 9.53573 11.3096 9.4376C11.3409 9.33946 11.3994 9.25218 11.4781 9.18577L14.3049 6.83306C14.6763 6.52392 14.4846 5.90751 14.0074 5.87654L10.3159 5.63696C10.2165 5.62986 10.1211 5.59465 10.0409 5.53545C9.96069 5.47625 9.89896 5.39548 9.86289 5.30255L8.48612 1.83549C8.44869 1.73685 8.38215 1.65194 8.29532 1.59201C8.2085 1.53209 8.1055 1.5 8 1.5C7.89451 1.5 7.79151 1.53209 7.70468 1.59201C7.61786 1.65194 7.55131 1.73685 7.51389 1.83549L6.13712 5.30255C6.10104 5.39548 6.03931 5.47625 5.95912 5.53545C5.87892 5.59465 5.78355 5.62986 5.68412 5.63696L1.99263 5.87654C1.51544 5.90751 1.32373 6.52392 1.69515 6.83306L4.52185 9.18577C4.60063 9.25218 4.65906 9.33946 4.69044 9.4376C4.72181 9.53573 4.72485 9.64073 4.6992 9.74052L3.85459 13.063C3.71111 13.6274 4.31143 14.083 4.79495 13.7767L7.72431 11.9208C7.8067 11.8683 7.90234 11.8405 8 11.8405C8.09767 11.8405 8.1933 11.8683 8.27569 11.9208V11.9208Z' fill='%23C7A03C' stroke='%23C7A03C' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
.signle-card__favorite, .signle-card__art {
color: #BCBCBC;
font-size: 10px;
}
.signle-card__short-desc {
margin-top: 20px;
font-size: 16px;
}
.signle-card__order {
display: flex;
align-items: center;
margin-top: 25px;
gap: 17px;
}
.signle-card__counter {
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #ECECEC;
border-radius: 22px;
height: 44px;
padding: 0 14px;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.signle-card__counter div {
cursor: pointer;
}
.signle-card__counter input {
width: 78px;
text-align: center;
border: none;
padding: 0 4px;
font-weight: 500;
font-size: 18px;
line-height: 120%;
}
.signle-card__counter svg {
width: 20px;
height: 20px;
}
.signle-card__price-wrap {
line-height: 1.2;
}
.signle-card__price-value {
font-size: 26px;
display: flex;
align-items: center;
gap: 7px;
}
.signle-card__price-value span {
text-decoration-line: line-through;
}
.signle-card__price-value span + b {
color: #DA2020;
}
.signle-card__price-desc {
font-size: 12px;
color: #BCBCBC;
margin-top: 4px;
}
.signle-card__btns {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
margin-top: 25px;
}
.signle-card__btns a,
.signle-card__btns button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 20px;
height: 54px;
padding: 0 25px;
border-radius: 27px;
font-weight: 500;
font-size: 14px;
text-decoration: none;
transition-duration: 0.15s;
}
.signle-card__btns button {
border: none;
width: 230px;
}
.signle-card__add-to-cart {
background: var(--gradient);
color: #fff;
}
.signle-card__add-to-cart:hover {
color: #fff;
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.25);
}
.signle-card__add-to-cart svg {
width: 22px;
height: 22px;
}
.signle-card__one-click {
color: #000;
border: 1px solid var(--accent);
}
.signle-card__right {
width: 360px;
flex-shrink: 0;
}
.signle-card__right-row {
display: flex;
flex-direction: column;
}
.signle-card__right-row + div {
margin-top: 35px;
}
.signle-card__right-row .go-to-params {
margin-top: 15px;
}
.signle-card__title {
font-size: 18px;
line-height: 120%;
margin-bottom: 15px;
}
.signle-card__main-title {
font-weight: 700;
font-size: 26px;
line-height: 110%;
margin-top: 15px;
}
.signle-card__delivery {
display: flex;
flex-direction: column;
gap: 15px;
}
.signle-card__delivery-item {
position: relative;
display: flex;
align-items: center;
gap: 10px;
}
.signle-card__delivery-icon {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 5px;
background: #F5F5F5;
border-radius: 100%;
}
.signle-card__delivery-icon img {
max-width: 100%;
max-height: 100%;
}
.signle-card__delivery-title {
font-weight: 700;
font-size: 14px;
line-height: 18px;
}
.signle-card__delivery-desc {
font-size: 12px;
line-height: 120%;
color: #B4B4B4;
margin-top: 5px;
}
.signle-card__params {
width: 100%;
border-collapse: initial;
border-spacing: 9px 0;
margin-left: -9px;
width: calc(100% + 18px);
}
.signle-card__params tr:last-child td {
border-bottom: 1px solid #EFEFEF;
}
.signle-card__params td {
font-weight: 500;
font-size: 12px;
border-top: 1px solid #EFEFEF;
padding: 6px 0;
}
.signle-card__params td:first-child {
color: #B4B4B4;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
} input[type=number] {
-moz-appearance: textfield;
}
.go-to-params {
display: inline-flex;
font-weight: 500;
font-size: 12px;
color: var(--accent);
text-decoration: none;
}
.bottom-info__wrapper {
display: flex;
gap: 60px;
}
.bottom-info__table {
width: 450px;
}
.bottom-info__text {
flex: 1;
}
.bottom-info__text p,
.bottom-info__text ul,
.bottom-info__text ol {
color: #8B8B8B;
font-size: 16px;
}
.bottom-info__text p:last-child {
margin-bottom: 0;
}
.cart__wrapper {
display: flex;
gap: 115px;
}
.cart .big-title {
margin-bottom: 20px;
}
.cart__info {
width: 510px;
flex-shrink: 0;
}
.cart__table {
border: 1px solid #ECECEC;
border-radius: 20px;
border-collapse: inherit;
border-spacing: 0;
padding: 7px 14px;
width: 100%;
}
.cart__table td {
padding: 7px;
}
.cart__table td:first-child {
padding-left: 0;
}
.cart__table td:last-child {
padding-right: 0;
}
.cart__table tr + tr td {
border-top: 1px solid #ECECEC;
}
.cart__table-image {
width: 90px;
height: 90px;
display: flex;
align-items: center;
justify-content: center;
}
.cart__table-image img {
max-width: 100%;
max-height: 100%;
}
.cart__table-title {
font-size: 12px;
line-height: 120%;
}
.cart__table-art {
color: #BCBCBC;
font-size: 10px;
margin-top: 4px;
}
.cart__table-price {
margin-top: 7px;
font-size: 14px;
}
.cart__table-price span {
position: relative;
}
.cart__table-price span::before {
content: "";
height: 2px;
background-color: #DA2020;
border-radius: 4px;
position: absolute;
margin: auto;
inset: -3px;
transform: rotate(160deg);
}
.cart__table-price span + b {
margin-left: 9px;
color: #DA2020;
}
.cart__table-nav {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.cart__table-remove {
cursor: pointer;
font-size: 0;
}
.cart__table-remove svg {
width: 16px;
height: 16px;
}
.cart__table-final-price {
font-size: 18px;
line-height: 120%;
margin-top: 9px;
}
.cart__table-counter {
display: flex;
align-items: center;
background: #F5F5F5;
border-radius: 27px;
padding: 0 10px;
height: 20px;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
margin-top: 12px;
}
.cart__table-counter svg {
width: 12px;
height: 12px;
}
.cart__table-counter input {
width: 45px;
padding: 0 5px;
text-align: center;
font-size: 12px;
border: none;
margin: 0 3px;
background: transparent;
}
.cart__table-counter--minus, .cart__table-counter--plus {
cursor: pointer;
}
.cart__calc {
margin-top: 15px;
border: 1px solid #ECECEC;
border-radius: 20px;
padding: 14px 16px 10px;
}
.cart__calc-promo {
display: flex;
align-items: center;
gap: 12px;
background: #F5F5F5;
border-radius: 6px;
padding-left: 14px;
}
.cart__calc-promo b {
font-size: 12px;
white-space: nowrap;
}
.cart__calc-promo--message {
margin: 10px 0;
padding: 5px 7px;
font-size: 14px;
border-radius: 5px;
border: 1px solid #DA2020;
color: #DA2020;
}
.cart__calc-promo--input {
flex: 1;
position: relative;
}
.cart__calc-promo--input input {
width: 100%;
height: 30px;
border: 1px solid #ECECEC;
border-radius: 6px;
padding: 0 30px 0 11px;
font-size: 12px;
}
.cart__calc-promo--input button {
position: absolute;
top: 0;
right: 6px;
bottom: 0;
margin: auto;
width: 18px;
height: 18px;
border-radius: 100%;
border: none;
background-color: #000;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
}
.cart__calc-promo--input button svg {
width: 14px;
height: 14px;
stroke: #fff;
}
.cart__calc-table {
width: 100%;
margin-top: 10px;
}
.cart__calc-table tr:not(:last-child) {
border-bottom: 1px solid #EFEFEF;
}
.cart__calc-table tr:last-child td {
font-size: 22px;
}
.cart__calc-table td {
padding: 7px 0;
font-size: 14px;
}
.cart__calc-table td:last-child {
font-weight: bold;
text-align: right;
}
.cart__checkout {
flex: 1;
}
.cart__checkout .big-title {
font-weight: 400;
}
.cart__checkout-title {
font-weight: 700;
font-size: 20px;
line-height: 110%;
margin-bottom: 20px;
}
.cart__checkout-fields {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
.cart__checkout-input {
position: relative;
}
.cart__checkout-input--title {
font-size: 12px;
line-height: 120%;
color: #AAAAAA;
position: absolute;
left: 12px;
top: 9px;
right: 12px;
}
.cart__checkout-input input {
width: 100%;
height: 56px;
border: 1px solid #ECECEC;
border-radius: 8px;
font-size: 14px;
padding: 25px 12px 7px;
}
.cart__checkout-radio {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
}
.cart__checkout-radio input:checked + .cart__checkout-radio--item::before {
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 17.5C14.1421 17.5 17.5 14.1421 17.5 10C17.5 5.85786 14.1421 2.5 10 2.5C5.85786 2.5 2.5 5.85786 2.5 10C2.5 14.1421 5.85786 17.5 10 17.5Z' fill='black' stroke='black' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M13.4375 8.125L8.85414 12.5L6.5625 10.3125' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
.cart__checkout-radio--item {
background: #F5F5F5;
border-radius: 33px;
height: 66px;
position: relative;
padding: 0 20px 0 45px;
display: flex;
flex-direction: column;
justify-content: center;
cursor: pointer;
}
.cart__checkout-radio--item::before {
content: "";
position: absolute;
left: 16px;
top: 0;
bottom: 0;
margin: auto;
width: 20px;
height: 20px;
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 17.5C14.1421 17.5 17.5 14.1421 17.5 10C17.5 5.85786 14.1421 2.5 10 2.5C5.85786 2.5 2.5 5.85786 2.5 10C2.5 14.1421 5.85786 17.5 10 17.5Z' stroke='black' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
.cart__checkout-radio--title {
font-weight: 500;
font-size: 16px;
line-height: 120%;
}
.cart__checkout-radio--desc {
font-size: 12px;
line-height: 120%;
color: #AAAAAA;
margin-top: 5px;
}
.cart__checkout-radio input {
display: none;
}
.cart__checkout-address, .cart__checkout-pickup, .cart__checkout-transfer-text, .cart__checkout-account-text {
margin-top: 25px;
padding-top: 20px;
border-top: 1px solid #EFEFEF;
}
.cart__checkout-address--title {
font-size: 14px;
margin-bottom: 15px;
}
.cart__checkout-address--fields {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 15px;
}
.cart__checkout-address--fields .cart__checkout-input {
grid-column: span 1;
}
.cart__checkout-address--fields .cart__checkout-input:first-child {
grid-column: span 4;
}
.cart__checkout-btns {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 20px;
margin-top: 30px;
padding-top: 25px;
border-top: 1px solid #EFEFEF;
}
.big-title + .cart__checkout-row {
border-top: 1px solid #EFEFEF;
padding-top: 25px;
}
.mt35 {
margin-top: 35px;
}
.about__wrapper {
display: flex;
align-items: flex-start;
gap: 80px;
}
.about__text {
flex: 1;
}
.about__text .big-title {
margin-bottom: 30px;
}
.about__text p {
color: #8B8B8B;
}
.about__text p:last-child {
margin-bottom: 0;
}
.about__gallery {
width: 800px;
flex-shrink: 0;
position: relative;
}
.about__gallery-init {
border-radius: 20px;
overflow: hidden;
}
.about__gallery-init .swiper-wrapper img {
width: 100%;
height: auto;
max-height: 380px;
-o-object-fit: cover;
object-fit: cover;
}
.about__gallery-nav {
position: absolute;
left: 30px;
bottom: 30px;
z-index: 10;
display: flex;
align-items: center;
gap: 8px;
}
.about__gallery-prev, .about__gallery-next {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 100%;
}
.about__gallery-prev {
border: 1px solid #FFFFFF;
}
.about__gallery-next {
background-color: #fff;
}
.about-advantages__wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 70px;
}
.about-advantages__item {
min-height: 210px;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
}
.about-advantages__item::before {
content: "";
position: absolute;
right: 0;
width: 210px;
height: 210px;
border-radius: 100%;
background: #F5F5F5;
z-index: -1;
}
.about-advantages__title {
font-weight: 700;
font-size: 67px;
line-height: 120%;
background: linear-gradient(94.48deg, #CDA849 -12.64%, #E9C25E 53.96%, #C0A04D 117.85%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
}
.about-advantages__desc {
font-weight: 500;
font-size: 20px;
line-height: 120%;
margin-top: 5px;
}
.variants {
margin-top: 35px;
}
.variants__wrapper {
display: flex;
gap: 50px;
flex-wrap: wrap;
}
.variants__item {
max-width: 29%;
width: 100%;
position: relative;
}
.variants__item::before {
content: "";
position: absolute;
right: 30%;
height: calc(100% + 20px);
aspect-ratio: 1/1;
z-index: -1;
border-radius: 100%;
background: #F5F5F5;
margin: auto;
}
.variants__item-top {
display: flex;
align-items: center;
gap: 40px;
}
.variants__item-title {
font-size: clamp(20px, 3vw, 24px);
}
.variants__item-icon {
flex-shrink: 0;
width: 70px;
height: 70px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 5px;
background: var(--gradient);
border-radius: 100%;
}
.variants__item-icon img {
max-width: 100%;
max-height: 100%;
}
.variants__text {
margin-top: 25px;
font-size: 16px;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.variants__text p:last-child {
margin-bottom: 0;
}
.contacts {
margin-top: 35px;
}
.contacts__wrapper {
display: flex;
gap: 15px;
}
.contacts__map {
flex: 1 0 735px;
display: flex;
flex-direction: column;
padding: 11px;
border: 1px solid #E7E7E7;
border-radius: 20px;
}
.contacts__map-top {
display: flex;
align-items: center;
gap: 19px;
}
.contacts__map-icon {
width: 68px;
height: 68px;
display: flex;
align-items: center;
justify-content: center;
background: #000000;
border-radius: 16px;
flex-shrink: 0;
}
.contacts__title {
font-weight: 700;
font-size: 20px;
line-height: 100%;
}
.contacts__desc {
font-size: 14px;
line-height: 120%;
color: #999999;
margin-top: 6px;
}
.contacts__map-iframe {
filter: grayscale(1);
position: relative;
flex-grow: 1;
min-height: 180px;
margin-top: 10px;
}
.contacts__map-iframe iframe {
position: absolute;
width: 100% !important;
height: 100% !important;
}
.contacts__item {
background: #F5F5F5;
border-radius: 20px;
padding: 20px 25px;
display: flex;
flex-direction: column;
flex-shrink: 0;
}
.contacts__item .contacts__title {
margin-bottom: 20px;
}
.contacts__item-bottom {
margin-top: auto;
}
.contacts__user {
display: flex;
align-items: center;
gap: 17px;
}
.contacts__user-photo {
width: 63px;
height: 63px;
border-radius: 100%;
overflow: hidden;
flex-shrink: 0;
}
.contacts__user-photo img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.contacts__user-desc {
color: #AAAAAA;
margin-top: 5px;
font-size: 12px;
}
.contacts__list {
display: flex;
flex-direction: column;
margin-top: 25px;
padding-top: 25px;
border-top: 1px solid #DCDCDC;
}
.contacts__list a {
display: inline-flex;
align-items: center;
font-weight: 500;
font-size: 14px;
color: #000;
text-decoration: none;
}
.contacts__list a + a {
margin-top: 10px;
}
.contacts__list a svg {
width: 18px;
height: 18px;
flex-shrink: 0;
margin-right: 8px;
}
.favorite-page__wrapper {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 50px 15px;
margin-top: 35px;
}