/* cabinet */ .cabinet{ padding: 24px; display: flex; justify-content: space-between; } .cabinet__control{ margin: 24px; margin-bottom: 0; display: none; } .cabinet-control__button{ margin-left: 8px; padding: 12px 16px; font-family: var(--font-family); font-weight: 500; font-size: 20px; line-height: 120%; color: var(--text-black); background: var(--background-white); border: 2px solid var(--text-black); border-radius: 48px; transition: opacity .2s ease-out; } .cabinet-control__button:first-child{ margin-left: 0; } .cabinet-control__button.active{ background: var(--background-black); color: #fff; } .cabinet-control__button:hover{ opacity: .8; } .cabinet__orders{ width: calc(((100% - 48px) / 3) * 2); } .cabinet__profile{ width: calc((100% - 48px) / 3); } .cabinet-card{ margin-top: 32px; padding: 1px; border-radius: 20px; } .cabinet-card:first-child{ margin-top: 0; } .cabinet-card--green{ background: var(--background-green); } .cabinet-card--green-white{ background: var(--background-green-white); } .cabinet-card--green-white .cabinet-card__content{ background: none; } .cabinet-card--red-blue{ background: var(--gradient-red); } .cabinet-card--grey{ background: var(--background-9); } .cabinet-card__content{ padding: 23px; border-radius: 19px; background-color: var(--background-white); } .cabinet-card__element{ margin-top: 24px; position: relative; } .cabinet-card__element--margin-top-32{ margin-top: 32px; } .cabinet-card__element:first-child, .cabinet-card__element--margin-top-32:first-child{ margin-top: 0 } .cabinet-card__element-change{ position: absolute; top: 14px; right: 0; width: 24px; aspect-ratio: 1; background-image: url(../img/svg/main/change-dot.svg); border: none; background-color: var(--background-white); transition: opacity .2s ease-out; } .cabinet-card__element-change:hover{ opacity: .8; } .cabinet-card__title{ font-family: var(--font-family); font-weight: 700; font-size: 26px; line-height: 123%; text-transform: uppercase; background: var(--gradient-blue); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .cabinet-card__text{ font-family: var(--font-family); font-weight: 400; font-size: 20px; line-height: 120%; color: var(--text-black); } .cabinet-card__text--grey{ color: var(--text-grey); } .cabinet-card__label{ font-family: var(--font-family); font-weight: 700; font-size: 16px; line-height: 125%; color: var(--text-3); } .cabinet-card__status{ padding-left: 20px; font-family: var(--font-family); font-weight: 500; font-size: 12px; line-height: 133%; position: relative; color: #121212; } .cabinet-card__status--chek{ color: var(--text-green); } .cabinet-card__status--chek::before{ content: ''; position: absolute; top: 0; left: 0; width: 16px; height: 16px; background-image: url(../img/svg/main/status-chek.svg); object-fit: contain; } .cabinet-card__status--cancelled{ color: var(--text-red); } .cabinet-card__status--cancelled::before{ content: ''; position: absolute; top: 0; left: 0; width: 16px; height: 16px; background-image: url(../img/svg/main/status-cancelled.svg); object-fit: contain; } .cabinet-card__block-accounts{ display: flex; } .cabinet-card__account{ margin-left: 16px; width: 40px; aspect-ratio: 1; display: flex; justify-content: center; align-items: center; background: var(--background-9); border-radius: 50%; } .cabinet-card__account:first-child{ margin-left: 0; } .cabinet-card__block-buttons{ display: flex; justify-content: space-between; align-items: center; } .cabinet-card__button{ padding: 8px 8px 6px 0; font-family: var(--font-family); font-weight: 600; font-size: 20px; line-height: 120%; color: var(--text-black); background: none; border: none; position: relative; text-decoration: none; } .cabinet-card__button::before{ content: ''; position: absolute; bottom: 6px; width: calc(100% - 8px); height: 1px; background: var(--text-black); transition: opacity .2s ease-out; } .cabinet-card__button:hover{ opacity: .8; } .cabinet-card__confirm{ margin-top: 16px; border-radius: 20px; padding: 4px 24px; font-family: var(--font-family); font-weight: 600; font-size: 20px; line-height: 120%; background: var(--background-black); color: #fff; border: none; transition: opacity .2s ease-out; } .cabinet-card__confirm:hover{ opacity: .8; } .cabinet-card__text, .cabinet-card__label, .cabinet-card__status, .cabinet-card__block-accounts, .cabinet-card__block-buttons{ margin-top: 8px; } .cabinet-card__text:first-child, .cabinet-card__label:first-child, .cabinet-card__status:first-child, .cabinet-card__block-accounts:first-child, .cabinet-card__block-buttons:first-child{ margin-top: 0px; } .cabinet-card__block-add-pets{ width: 100%; display: flex; align-items: center; background: none; border: none; } .cabinet-card-add-pets__circle{ width: 48px; aspect-ratio: 1; display: flex; justify-content: center; align-items: center; border: 1px solid var(--text-6); border-radius: 50%; } .cabinet-card-add-pets__text{ margin-left: 16px; font-family: var(--font-family); font-weight: 600; font-size: 20px; line-height: 120%; color: var(--text-6); position: relative; } .cabinet-card-add-pets__text::after{ content: ''; position: absolute; left: 0; bottom: -4px; width: 100%; height: 1px; background: var(--text-6); } .cabinet-card__discount{ display: flex; align-items: center; } .cabinet-card-discount__title{ font-family: var(--font-family); font-weight: 700; font-size: 16px; line-height: 125%; color: var(--text-black); } .cabinet-card-discount__percent{ margin-left: 16px; font-family: var(--font-family); font-weight: 700; font-size: 16px; line-height: 125%; color: var(--text-black); } .cabinet-card-discount__percent::after{ content: '%'; } .cabinet-card-discount__arrow{ display: inline-block; margin-left: 6px; width: 20px; aspect-ratio: 1; background-image: url(../img/svg/main/arrow-breadcrumbs-black.svg); background-position: center; } .cabinet-card__no-orders{ margin-top: 32px; padding: 48px 24px; } .cabinet-card-no-orders__element{ margin-top: 26px; } .cabinet-card-no-orders__element:first-child{ margin-top: 0; } .cabinet-card-no-orders__title{ font-family: var(--font-family); font-weight: 500; font-size: 24px; line-height: 133%; text-align: center; color: var(--text-black); } .cabinet-card__pet{ display: flex; align-items: center; } .cabinet-card-pet__icon{ width: 48px; aspect-ratio: 1; border-radius: 50%; background: var(--gradient-blue); } .cabinet-card-pet-icon__content{ margin: 1px; width: calc(100% - 2px); aspect-ratio: 1; display: flex; justify-content: center; align-items: center; border-radius: 50%; background: var(--background-white); } .cabinet-card-pet-icon__content img{ width: 32px; aspect-ratio: 1; object-fit: contain; } .cabinet-card-pet__name{ margin-left: 24px; font-family: var(--font-family); font-weight: 700; font-size: 16px; line-height: 125%; color: var(--text-black); } .cabinet-card__order{ position: relative; } .cabinet-card-order__header{ display: flex; justify-content: space-between; align-items: flex-start; } .cabinet-card-order__main{} .cabinet-card-order-main__date{ font-family: var(--font-family); font-weight: 500; font-size: 24px; line-height: 133%; color: var(--text-black); } .cabinet-card-order-main__number{ margin-top: 8px; font-family: var(--font-family); font-weight: 500; font-size: 12px; line-height: 133%; color: var(--text-black); } .cabinet-card-order-main__number::before{ content: '№'; } .cabinet-card-order__payment{ display: flex; align-items: flex-end; transition: margin .2s ease-out; } .cabinet-card-order-payment__title{ font-family: var(--font-family); font-weight: 500; font-size: 12px; line-height: 133%; color: var(--text-black); } .cabinet-card-order-payment__price{ margin-left: 8px; font-family: var(--font-family); font-weight: 700; font-size: 16px; line-height: 125%; color: var(--text-black); } .cabinet-card-order__content{ margin-top: 24px; } .cabinet-card-order__content .cabinet-card-order__status{ display: flex; align-items: center; } .cabinet-card-order-status__title{ font-family: var(--font-family); font-weight: 500; font-size: 20px; line-height: 120%; color: var(--text-black); } .cabinet-card-order-status__pointer{ margin-left: 12px; font-family: var(--font-family); font-weight: 500; font-size: 20px; line-height: 120%; color: var(--text-black); } .cabinet-card-order-status__pointer--grey{ color: var(--text-6); } .cabinet-card-order-status__pointer--green{ color: var(--text-green); } .cabinet-card-order-status__pointer--red{ color: var(--text-red); } .cabinet-card-order__block-detail{ height: 0; overflow: hidden; transition: height .2s ease-out; } .cabinet-card-order__detail{ padding-top: 24px; } .cabinet-card-order-detail__address{} .cabinet-card-order-detail-address__title{ font-family: var(--font-family); font-weight: 500; font-size: 20px; line-height: 120%; color: var(--text-black); } .cabinet-card-order-detail-address__text{ margin-top: 16px; font-family: var(--font-family); font-weight: 400; font-size: 20px; line-height: 120%; color: var(--text-black); } .cabinet-card-order-detail__main{ margin-top: 24px; display: flex; justify-content: space-between; } .cabinet-card-order-detail-main__products{} .cabinet-card-order-detail-main__product{ margin-top: 4px; display: flex; align-items: center; } .cabinet-card-order-detail-main__product:first-child{ margin-top: 0; } .cabinet-card-order-detail-main-product__img{ width: 106px; height: 96px; } .cabinet-card-order-detail-main-product__content{ display: flex; } .cabinet-card-order-detail-main-product__description{ width: 212px; } .cabinet-card-order-detail-main-product-description__what{ font-family: var(--font-family); font-weight: 500; font-size: 12px; line-height: 133%; color: var(--text-black); } .cabinet-card-order-detail-main-product-description__with-what{ margin-top: 8px; font-family: var(--font-family); font-weight: 500; font-size: 12px; line-height: 133%; color: var(--text-6); } .cabinet-card-order-detail-main-product__count{ margin-left: 8px; font-family: var(--font-family); font-weight: 700; font-size: 12px; line-height: 133%; text-align: right; color: var(--text-6); } .cabinet-card-order-detail-main-product__count::before{ margin-right: 4px; content: 'x'; } .cabinet-card-order-detail-main-product__price{ margin-left: 16px; font-family: var(--font-family); font-weight: 700; font-size: 12px; line-height: 133%; text-align: right; color: var(--text-black); } .cabinet-card-order-detail-main__links{ display: flex; flex-direction: column; } .cabinet-card-order-detail-main__link{ margin-top: 16px; } .cabinet-card-order-detail-main__link:first-child{ margin-top: 0; } .cabinet-card-order__open-detail{ margin-top: 24px; padding-right: 24px; font-family: var(--font-family); font-weight: 500; font-size: 20px; line-height: 120%; color: var(--text-black); border: none; background: none; position: relative; } .cabinet-card-order__open-detail::after{ content: ''; position: absolute; top: 6.75px; right: 0; width: 12.5px; height: 10.5px; background-image: url(../../core/img/svg/main/arrow-black.svg); background-size: contain; background-position: center; background-repeat: no-repeat; transition: transform .2s; /* transform: rotate(180deg); */ } .cabinet-card-order-detail-short__item{ object-fit: contain; } .cabinet-card-order__detail-short{ display: flex; align-items: center; justify-content: flex-end; max-width: calc(100% - 250px); margin-left: auto; overflow: auto; /* flex-wrap: wrap; */ transition: all .2s .1s ease-out; } .cabinet-card-order__bottom{ display: flex; align-items: flex-end; } @media (max-width: 768px) { .cabinet-card-order__bottom{ display: flex; align-items: flex-start; flex-direction: column-reverse; margin-top: 16px; } .cabinet-card-order__detail-short{ max-width: calc(100%); flex-wrap: wrap; justify-content: flex-start; margin-left: 0; } } .cabinet-card-order-detail-short__item{ border-radius: 16px; width: 106px; height: 96px; } .cabinet-card__download{ margin-top: 32px; } .cabinet-card__order.active .cabinet-card-order__detail-short{ opacity: 0; height: 0; } .cabinet-card__order.active .cabinet-card-order__open-detail::after{ transform: rotate(180deg); } /* .cabinet-card-no-orders__ */ .cabinet__subscription-pc{ } .cabinet__subscription-mobile{ display: none; } /* cabinet */ .main-page-wrapper{ margin-top: 20px !important; } .col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-20_0, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-20_0, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-20_0, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto { padding-right: 0 !important; padding-left: 0 !important; } @media only screen and (max-width: 1200px) { /* cabinet */ .cabinet{ flex-direction: column; position: relative; } .cabinet__control{ display: flex; position: relative; } .cabinet__orders, .cabinet__profile{ width: calc(100% - 48px); } .cabinet__orders, .cabinet__profile{ position: absolute; opacity: 0; transition: opacity .2s ease-out; } .cabinet-content{ pointer-events:none; } .cabinet__orders.active, .cabinet__profile.active{ opacity: 1; } .cabinet__orders.hide, .cabinet__profile.hide{ position: static; display: block; pointer-events:auto; width: 100%; } .cabinet__subscription-pc{ display: none; } .cabinet__subscription-mobile{ display: block; margin: 24px 24px 0 24px; } .cabinet__orders .cabinet-card:nth-child(2){ margin-top: 0; } /* cabinet */ } @media only screen and (max-width: 750px) { /* cabinet */ .cabinet-card-order__open-detail{ margin-top: 0px; } .cabinet-card-order__detail-short{ right: auto; left: 0; bottom: 48px; } .cabinet-card-order-detail-short__item{ margin-left: 10px; } .cabinet-card-order-detail-short__item:first-child{ margin-left: 0; } .cabinet-card__order.active .cabinet-card-order__open-detail{ margin-top: 24px; } .cabinet-card-order__detail-short{ max-width: 100%; } .cabinet-card-order__content, .cabinet-card-order__bottom{ margin-top: 0; } /* cabinet */ } @media only screen and (max-width: 720px) { /* cabinet */ .cabinet-card__title{ font-size: 20px; } .cabinet-card__no-orders{ margin-top: 16px; } .cabinet-card-order__header{ flex-direction: column; } .cabinet-card-order__payment{ margin-top: 16px; } .cabinet-card-order-detail__main{ flex-direction: column; } .cabinet-card-order-detail-main__links{ margin-top: 24px; align-items: start; } .cabinet-card-order-detail-main-product__img{ width: 70px; height: 70px; } .cabinet-card-order-detail-main__product{ margin-top: 16px; align-items: start; } .cabinet-card-order-detail-main__products{ position: relative; } .cabinet-card-order-detail-main-product__content{ margin-left: 16px; flex-wrap: wrap; } .cabinet-card-order-detail-main-product__description{ width: 100%; } .cabinet-card-order-detail-main-product__count{ margin-left: 0; margin-top: 7px; } .cabinet-card-order-detail-main-product__price{ margin-top: 7px; } .cabinet-card__content{ padding-right: 19px; } /* .cabinet-card__order.active */ /* .cabinet-card__order.active */ /* cabinet */ } @media only screen and (max-width: 576px) { /* cabinet */ .cabinet-card-order-detail-main-product__img{ width: 40px; height: 40px; } .cabinet-card-order-detail-main-product__count{ left: auto; right: 71px; } .cabinet-card-order-detail-main-product__price{ left: auto; right: 0; } .cabinet-card-order__detail-short{ transition-delay: 0; transition-duration: 0; } .cabinet-card-order-detail-short__item { border-radius: 16px; width: 80px; height: 80px; } /* cabinet */ } button{ cursor: pointer; } .wrapper{ margin: 0 auto; max-width: 1600px; } .main_link{ font-size: 24px; font-weight: 500; line-height: 28.8px; color: var(--creme-white, #F4F1F0); width: 221px; height: 50px; padding: 10px; white-space: nowrap; display: flex; align-items: center; justify-content: center; border-radius: 48px; border: 2px solid var(--creme-white, #F4F1F0); transition: .3s ease all; } .main_link:hover{ background-color: #F4F1F0; color: #121212; } .btn--black-hover:hover{ background: #121212 !important; color: #F4F1F0 !important; } body{ font-family: var(--font-family); } :root { --font-family: "Craftwork Grotesk", sans-serif; --second-family: "DIN 2014 Rounded", sans-serif; --third-family: "Roboto", sans-serif; --text-white: #fff; --text-black: #121212; --text-dark: #2b2b3b; --text-grey: #999; --text-red: #fa0505; --text-green: #2ED15D; --text-0: #000; --text-3: #333; --text-6: #666; --text-9: #999; --background-white: #fff; --background-black: #121212; --background-grey: #f2f2f2; --background-green: #2ED15D; --background-green-white: #f4fff0; --background-9: #999; --gradient-blue: radial-gradient(346.57% 244.17% at 149.73% -58.39%, rgb(15, 88, 129) 0%, rgb(30, 164, 156) 51.21689438819885%, rgb(118, 206, 117) 80.70731163024902%, rgb(236, 243, 159) 91.14583134651184%); --gradient-turquoise: radial-gradient(346.57% 244.17% at 149.73% -58.39%, rgb(117, 196, 240) 0%, rgb(126, 231, 225) 51.21689438819885%, rgb(181, 228, 180) 80.70731163024902%, rgb(237, 244, 164) 91.14583134651184%); --gradient-red: linear-gradient(22deg, #f44242 0%, #569ef0 100%); } .form{ width: 100%; padding: 24px 24px 43px; display: flex; flex-direction: column; position: relative; overflow: hidden; border-radius: 24px; background: var(--gradient-turquoise); } .form.submited .footer-thx{ display: flex; } .footer-thx{ height: 100%; width: 100%; top: 0; left: 0; text-align: center; position: absolute; display: none; font-size: 32px; align-items: center; justify-content: center; padding: 24px; background: var(--gradient-turquoise); flex-direction: column; } .footer-thx-sub{ font-size: 15px; margin-top: 8px; } .form__item{ margin-top: 16px; } .form__title{ font-family: var(--font-family); font-weight: 500; font-size: 24px; line-height: 133%; color: var(--text-black); } .form__input{ width: 100%; border-radius: 20px; padding: 12px 16px; border: 1px solid var(--text-black); background: var(--background-white); font-family: var(--font-family); font-weight: 400; font-size: 20px; line-height: 120%; color: var(--text-black); } .form__input::placeholder{ color: var(--text-grey); } .form__input--textarea{ height: 96px; resize: none; } .form__button{ width: 100%; padding: 12px 24px; font-family: var(--font-family); font-weight: 400; font-size: 20px; line-height: 120%; color: var(--text-white); border-radius: 16px; border: none; background: var(--background-black); cursor: pointer; transition: background-color .2s ease-out; } .form__button:hover{ opacity: .8; } .label{ padding-bottom: 4px; display: inline-block; position: relative; } .label::after{ content: ''; position: absolute; top: 2px; right: -20px; width: 16px; height: 16px; background-image: url(../img/svg/main/question.svg); cursor: pointer; } .label__title{ font-family: var(--font-family); font-weight: 700; font-size: 16px; line-height: 125%; color: var(--text-3); } .label__question{ position: absolute; padding: 8px; width: max-content; max-width: 200px; border-radius: 6px; transition: height .2s ease-out; box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1), 0 0 2px 0 rgba(0, 0, 0, 0.2); overflow: hidden; background-color: var(--background-white); opacity: 0; transition: opacity .2s ease-out; pointer-events: none; } .label:hover .label__question{ opacity: 1; pointer-events: auto; } .social-media{ display: flex; align-items: center; } .social-media__item{ margin-left: 32px; transition: opacity .2s ease-out; } .social-media__item:hover{ opacity: .8; } .social-media__item:first-child{ margin-left: 0px; } .social-media__icon{ width: 32px; aspect-ratio: 1; } .breadcrumbs{ margin: 24px; display: flex; align-items: center; } .breadcrumbs__item{ display: block; padding: 0px 16px; font-family: var(--font-family); font-weight: 700; font-size: 16px; line-height: 125%; color: var(--text-6); text-decoration: none; position: relative; } .breadcrumbs__item:first-child{ padding-left: 0; } .breadcrumbs__item:nth-child(n+2)::before{ content: ''; position: absolute; top: -2px; left: -12px; width: 24px; aspect-ratio: 1; background-image: url(../img/svg/main/arrow-breadcrumbs.svg); background-repeat: no-repeat; background-size: contain; } /* button */ .button{ font-family: var(--font-family); font-weight: 600; font-size: 20px; line-height: 120%; color: var(--text-black); border-radius: 20px; text-transform: none; cursor: pointer; } .button--100-perc{ width: 100%; } .button--white{ padding: 11px 24px; text-align: center; background-color: var(--background-white); border: 1px solid var(--background-black); transition: opacity .2s ease-out; } .button--white:hover{ opacity: .8; } .button--white.active{ background: var(--background-black); color: var(--background-white); } .button--gradient{ background: var(--gradient-turquoise); border: none; transition: opacity .2s ease-out; } .button--gradient:hover{ opacity: .8; } .button--base{ padding: 12px 24px; } .button--high{ height: 56px; padding: 16px 24px 16px 24px; font-weight: 700; text-align: center; position: relative; } .button--icon{ padding-right: 56px; text-align: start; } .button--filter::after{ content: ''; position: absolute; top: 16px; right: 24px; width: 24px; aspect-ratio: 1; background-image: url(../img/svg/main/filter.svg); background-repeat: no-repeat; background-size: contain; } .button--black{ padding: 7px 15px; font-family: var(--font-family); font-weight: 500; font-size: 24px; line-height: 133%; color: var(--text-white); background: var(--background-black); border: 1px solid var(--text-white); } .button--link{ text-decoration: none; } .button--red-48-px{ border-radius: 48px; } .to-know{ width: 100%; padding: 12px; display: flex; justify-content: center; border: none; transition: opacity .2s ease-out; } .to-know:hover{ opacity: .8; } .to-know p{ padding-bottom: 4px; font-family: var(--font-family); font-weight: 700; font-size: 20px; line-height: 120%; color: var(--text-black); border-bottom: 1px var(--text-black) solid; cursor: pointer; } .to-know--background-none{ background: none; } .back{ margin-top: 16px; margin-left: 16px; padding: 8px; padding-left: 32px; background: none; border: none; font-family: var(--font-family); font-weight: 600; font-size: 20px; line-height: 120%; color: var(--text-black); text-decoration: none; position: relative; } .back::before{ content: ''; position: absolute; top: 8px; left: 0; margin-right: 8px; width: 24px; height: 24px; background-image: url(../img/svg/main/arrow-back.svg); } .back::after{ content: ''; position: absolute; bottom: 6px; left: 0; width: calc(100% - 8px); height: 1px; background: var(--text-black); } /* button */ /* select */ .select{ max-width: 144px; position: relative; } .select__state{ width: 100%; padding: 11px 47px 11px 13px; /* pointer-events:none; */ border: 1px solid var(--background-black); border-radius: 20px; font-family: var(--font-family); font-weight: 400; font-size: 20px; line-height: 120%; color: var(--text-black); cursor: pointer; position: relative; transition: opacity .2s ease-out; } .select:hover .select__state{ opacity: .8; } .select::after{ content: ''; position: absolute; top: 20.5px; right: 21.5px; width: 17px; height: 10px; background-image: url(../img/svg/main/arrow-black.svg); background-repeat: no-repeat; background-size: contain; pointer-events: none; } .state__block{ position: absolute; top: 48px; left: 0; width: 100%; height: 0; overflow: hidden; transition: height .2s ease-out; } .state__content{ padding: 8px; border-radius: 6px; box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1), 0 0 2px 0 rgba(0, 0, 0, 0.2); background-color: var(--background-white); list-style-type: none; } .state__content li{ margin-top: 8px; } .state__content li:first-child{ margin-top: 0; } .state__button{ width: 100%; padding: 4px 32px 4px 4px; background: none; border: none; font-family: var(--font-family); font-weight: 400; font-size: 20px; line-height: 120%; color: var(--text-dark); text-align: start; border-radius: 6px; transition: background-color .2s ease-out; position: relative; } .state__button:hover, .state__button.active{ background-color: var(--background-grey); } .state__button.active::before{ content: ''; position: absolute; top: 10px; right: 8px; width: 16px; height: 12px; background-image: url(../img/svg/main/arrow-selected.svg); } /* select */ /* counter */ .counter{ display: flex; align-items: center; } .counter__input{ width: 48px; font-family: var(--font-family); font-weight: 600; font-size: 20px; line-height: 120%; text-align: center; color: var(--text-black); pointer-events: none; background: none; border: none; } .counter__button{ width: 48px; height: 48px; display: flex; justify-content: center; align-items: center; border: 1px solid var(--text-3); border-radius: 24px; background: var(--background-white); transition: opacity .2s ease-out; } .counter__button:hover{ opacity: .8; } .counter--small{ } .counter--small .counter__button{ width: 32px; height: 32px; } .counter--small{ } /* counter */ /* modal */ /* modal */ .modal{ position: fixed; top: 0; left: 0; padding: 20px; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.25); z-index: 200; opacity: 0; transition: opacity .2s ease-out; pointer-events: none; display: flex; justify-content: center; align-items: center; overflow-y: auto; } .modal.active{ opacity: 1; pointer-events: auto; } .modal__notification{} .form__button-mobile{ display: none; } .modal__aside{ position: fixed; top: 0; right: 0; width: 0; height: 100%; overflow: hidden; transition: width .4s ease-out; } .modal__item{ height: 100%; padding: 24px; background: var(--background-white); position: relative; display: none; filter: blur(10px); transition: filter .2s ease-out; } .modal__item--no-title{ padding-top: 72px; } .modal__item.active{ display: flex; flex-direction: column; justify-content: space-between; } .modal__close{ position: absolute; top: 32px; right: 24px; width: 24px; height: 24px; border: none; background: none; } .modal__header{} .modal__title{ padding-right: 48px; font-family: var(--font-family); font-weight: 700; font-size: 36px; line-height: 111%; text-transform: uppercase; color: var(--text-black); } .modal__small-title{ font-family: var(--font-family); font-weight: 700; font-size: 24px; line-height: 100%; text-transform: uppercase; color: var(--text-black); } .modal__text{ margin-top: 16px; padding-right: 10px; font-family: var(--font-family); font-weight: 400; font-size: 20px; line-height: 120%; color: var(--text-0); } .modal__form-sub{ margin-top: 48px; } .modal-form-sub__submit{ margin-top: 64px; } .modal__block-button{ margin-top: 24px; } .modal__button{ margin-top: 16px; } .modal__button:first-child{ margin-top: 0; } .modal__content{ margin-top: 24px; } .modal__filter{ width: 400px; overflow-y: auto; } .modal__footer{ border-top: 1px solid var(--text-6); padding-top: 23px; } .modal__block-price{ display: flex; justify-content: space-between; align-items: center; } .modal-block-price__title{ font-family: var(--font-family); font-weight: 600; font-size: 20px; line-height: 120%; color: var(--text-black); } .modal-block-price__price{ font-family: var(--font-family); font-weight: 700; font-size: 24px; line-height: 100%; text-transform: uppercase; text-align: right; color: var(--text-black); } .modal-block-price__price::after{ content: 'Р'; } .modal__basket{ width: 600px; } .modal__to-know, .modal__to-know-submit{ width: 412px; } .modal-basket__item{ padding-top: 23px; padding-right: 15px; padding-bottom: 24px; display: flex; border-top: 1px solid #f2f2f2; position: relative; } .modal-basket__item-before{ content: ''; position: absolute; top: 24px; right: 6px; width: 24px; aspect-ratio: 1; background-image: url(../img/svg/main/basket.svg); background-repeat: no-repeat; background-position: center; cursor: pointer; transition: opacity .2s ease-out; } .modal-basket__item:hover .modal-basket__item::before{ opacity: .8; } .modal-basket__item--return{ padding-right: 5px; display: flex; justify-content: space-between; align-items: center; } .modal-basket__item--return .modal-basket-item__title{ padding-right: 10px; } .modal-basket__item--return::before{ display: none; } .modal-basket-item__return{ border-radius: 20px; padding: 4px 24px; font-family: var(--font-family); font-weight: 600; font-size: 20px; line-height: 120%; color: var(--text-white); background: var(--background-black); border: none; } .modal-basket-item__block-image{ width: 128px; aspect-ratio: 1; display: flex; justify-content: center; align-items: center; } .modal-basket-item__image{ width: 96px; aspect-ratio: 1; object-fit: contain; } .modal-basket-item__content{ margin-left: 16px; } .modal-basket-item__title{ padding-right: 40px; font-family: var(--font-family); font-weight: 500; font-size: 20px; line-height: 120%; color: var(--text-black); } .modal-basket-item__sub-title{ margin-top: 8px; font-family: var(--font-family); font-weight: 700; font-size: 12px; line-height: 133%; color: var(--text-black); } .modal-basket-item__control{ margin-top: 24px; display: flex; justify-content: space-between; align-items: center; } .modal-basket-item__price{ font-family: var(--font-family); font-weight: 600; font-size: 20px; line-height: 120%; text-align: right; color: var(--text-black); } .modal-basket-item__price::after{ content: 'Р'; padding-left: 4px; } .modal__basket .modal__header{ height: calc(100% - 92px); margin-bottom: -36px; } .modal__basket .modal__content{ height: calc(100% - 100px); overflow-x: hidden; } .modal__basket .modal__content::-webkit-scrollbar { width: 7px; background-color: #f9f9fd; } .modal__basket .modal__content::-webkit-scrollbar-thumb { background-color: var(--background-black); border-radius: 2px; } .modal-form{ margin: auto; width: 600px; padding: 24px; border-radius: 20px; position: relative; display: none; } .modal-form.active{ display: block; } .modal-form--white{ border: 1px solid var(--background-black); background: var(--background-white); } .modal-form--green-gradient{ background: var(--gradient-blue); } .modal-form--width-584{ width: 584px; } .modal-form__close{ position: absolute; top: 24px; right: 24px; width: 24px; aspect-ratio: 1; border: none; background: none; background-image: url(../img/svg/main/black-x.svg); background-repeat: no-repeat; background-size: 24px; background-position: center; transition: opacity .2s ease-out; } .modal-form__close--white{ background-image: url(../img/svg/main/white-x.svg); } .modal-form__close:hover{ opacity: .8; } .modal-form__button-close{} .modal-form__title{ padding-right: 50px; font-family: var(--font-family); font-weight: 700; font-size: 26px; line-height: 123%; text-transform: uppercase; color: var(--text-dark); } .modal-form__text--center{ text-align: center; } .modal-form__text--center-pc{ text-align: center; } .modal-form__title--green-gradient{ background: var(--gradient-blue); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .modal-form__title--white{ color: var(--text-white); } .modal-form__element{ margin-top: 24px; } .modal-form__element--center{ display: flex; justify-content: center; } .modal-form__element--top-40{ margin-top: 40px; } .modal-form__text{ font-family: var(--font-family); font-weight: 400; font-size: 20px; line-height: 120%; color: var(--text-black); } .modal-form__text--weight-500{ font-weight: 500; } .modal-form__text--white{ color: var(--text-white); } .modal-form__img{ width: 100%; height: 360px; object-fit: contain; } .modal-form__content{ margin-top: 40px; } .modal-form-content__line{ margin-top: 24px; } .modal-form-content__line:first-child{ margin-top: 0; } .modal-form-content__line--two{ display: flex; justify-content: space-between; } .modal-form-content-line__element{ position: relative; } .modal-form-content__line--two .modal-form-content-line__element{ width: calc(50% - 12px); } .modal-form-content__line--three{ display: flex; } .modal-form-content__line--three .modal-form-content-line__element:nth-child(1){ width: 85px; flex-shrink: 0; } .modal-form-content__line--three .modal-form-content-line__element:nth-child(2){ margin-left: 8px; width: 100%; } .modal-form-content__line--three .modal-form-content-line__element:nth-child(3){ margin-left: 8px; width: 85px; flex-shrink: 0; } .modal-form-content__line--margin-top-16{ margin-top: 16px; } .modal-form__buttons{ margin-top: 32px; } .modal-form__buttons--two{ display: flex; justify-content: space-between; align-items: center; } .modal-form__buttons--two button, .modal-form__buttons--two input{ width: calc(50% - 20px); } .modal-map{ margin: auto; width: 1105px; display: none; border-radius: 24px; border: none; } .modal-map.active{ display: flex; } .modal-map__left{ width: 600px; padding: 24px; position: relative; } .modal-map__control{ margin: 38px -12px -12px -12px; display: flex; } .modal-map-control__item{ margin: 12px; padding: 2px; width: calc(50% - 24px); background: var(--background-9); border-radius: 20px; border: none; } .modal-map-control__item.active{ background: var(--gradient-blue); } .modal-map-control__item.active .form-input-radio__circle::before{ content: ''; position: absolute; top: 4px; left: 4px; width: 12px; aspect-ratio: 1; border-radius: 50%; background: var(--gradient-blue); } .modal-map-control-item__content{ padding: 14px; border-radius: 18px; background: var(--background-white); } .modal-map-control-item__header{ display: flex; align-items: center; } .modal-map-control-item__circle{ padding: 2px; width: 20px; aspect-ratio: 1; border-radius: 50%; background: var(--background-9); position: relative; } .modal-map-control-item-circle__content{ width: 16px; aspect-ratio: 1; border-radius: 50%; background: var(--background-white); } .modal-map-control__item.active .modal-map-control-item__circle{ background: var(--gradient-blue); } .modal-map-control__item.active .modal-map-control-item__circle::before{ content: ''; position: absolute; top: 4px; left: 4px; width: 12px; aspect-ratio: 1; border-radius: 50%; background: var(--gradient-blue); } .modal-map-control-item__title{ margin-left: 8px; font-family: var(--font-family); font-weight: 400; font-size: 20px; line-height: 120%; color: var(--text-dark); } .modal-map-control-item__description{ margin-top: 16px; } .modal-map-control-item__time{ font-family: var(--font-family); font-weight: 500; font-size: 16px; line-height: 125%; color: var(--text-black); text-align: start; } .modal-map-control-item__price{ margin-top: 8px; font-family: var(--font-family); font-weight: 700; font-size: 12px; line-height: 133%; color: var(--text-6); text-align: start; } .modal-map__form{ margin-top: 24px; } .modal-map-form__hidden{ } .modal-map-form__button{ margin-top: 83px; } .modal-map-form__sub-button{ display: none; } .modal-map__right{ padding: 16px 0px 16px 16px; } .modal-map__map{ border: 2px solid var(--background-9); border-radius: 16px; border-top-right-radius: 0; border-bottom-right-radius: 0; } .modal-map__map iframe{ height: 650px; } .modal__age{ } .modal__age > div{ display: none; } .modal__age > div.active{ display: flex; } /* modal */ /* modal */ /* toggle */ .toggle{ padding-top: 26px; padding-bottom: 25px; border-bottom: 1px solid var(--text-3); position: relative; } .toggle::after{ content: ''; position: absolute; top: 24px; right: 0; width: 24px; aspect-ratio: 1; background-image: url(../img/svg/main/black-x.svg); transform: rotate(45deg); transition: transform .2s; pointer-events: none; } .toggle.active::after{ transform: rotate(0deg); } .toggle__title{ padding-right: 30px; text-transform: uppercase; font-family: var(--font-family); font-weight: 700; font-size: 16px; line-height: 125%; color: var(--text-black); margin-bottom: 0; cursor: pointer; } .toggle__block-content{ height: 0; overflow: hidden; transition: height .2s ease-out; } .toggle__content{ padding-top: 24px; } .toggle-content__item{ margin: 12px -12px -12px -12px; display: flex; align-items: center; flex-wrap: wrap; } .toggle-content__item:first-child{ margin-top: 0; } .toggle-content__element{ margin: 12px; } .toggle-content__element--width-perc-100{ width: 100%; } .toggle-content__element--width-perc-50{ width: calc(50% - 24px); } .toggle__text{ font-family: var(--font-family); font-weight: 400; font-size: 20px; line-height: 120%; color: var(--text-black); } /* toggle */ /* checkbox */ .checkbox{ display: flex; align-items: center; cursor: pointer; } .checkbox__state{ border-radius: 4px; width: 18px; height: 18px; border: 2px solid var(--background-black); background: var(--background-white); flex-shrink: 0; } .checkbox.active .checkbox__state{ background-color: var(--background-black); background-image: url(../img/svg/main/arrow-selected-white.svg); background-repeat: no-repeat; background-position: center; } .checkbox__input{ display: none; } .checkbox__label{ padding-left: 8px; font-family: var(--font-family); font-weight: 400; font-size: 20px; line-height: 120%; color: var(--text-dark); cursor: pointer; } .checkbox__label a{ color: #76ce75; text-decoration: none; } .checkbox--small{ margin-top: 24px; } .checkbox--small .checkbox__label{ padding-left: 24px; font-weight: 500; font-size: 12px; line-height: 133%; } /* checkbox */ /* radio */ .radio{ display: flex; align-items: center; } .radio__input{ width: 18px; aspect-ratio: 1; accent-color: var(--background-black); cursor: pointer; } .radio__label{ padding-left: 8px; font-family: var(--font-family); font-weight: 400; font-size: 20px; line-height: 120%; color: var(--text-dark); cursor: pointer; } /* radio */ @keyframes slidein { from { opacity: 0; } to { opacity: 1; } } .slider-arrow{ background-color: transparent; } .product__footer{ width: 100%; } .button.loading{ font-size: 0; color: transparent !important; position: relative; } .button.loading::before{ content: ''; height: 36px; width: 36px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid' width='200' height='200' style='shape-rendering: auto; display: block; background: transparent;'%3E%3Cg%3E%3Ccircle stroke-dasharray='164.93361431346415 56.97787143782138' r='35' stroke-width='10' stroke='%23000000' fill='none' cy='50' cx='50'%3E%3CanimateTransform keyTimes='0;1' values='0 50 50;360 50 50' dur='1s' repeatCount='indefinite' type='rotate' attributeName='transform'/%3E%3C/circle%3E%3Cg/%3E%3C/g%3E%3C!-- %5Bldio%5D generated by https://loading.io --%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; } .products.loading{ position: relative; } .products.loading::before{ content: ''; z-index: 150; height: 100%; width: 100%; position: absolute; top: 0; left: 0; background-color: rgba(255,255,255, .6); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid' width='200' height='200' style='shape-rendering: auto; display: block; background: transparent;'%3E%3Cg%3E%3Ccircle stroke-dasharray='164.93361431346415 56.97787143782138' r='35' stroke-width='10' stroke='%23000000' fill='none' cy='50' cx='50'%3E%3CanimateTransform keyTimes='0;1' values='0 50 50;360 50 50' dur='1s' repeatCount='indefinite' type='rotate' attributeName='transform'/%3E%3C/circle%3E%3Cg/%3E%3C/g%3E%3C!-- %5Bldio%5D generated by https://loading.io --%3E%3C/svg%3E"); background-size: 48px; background-position: top 200px center; background-repeat: no-repeat; } html{ background: #fff !important; } .detail__label-wrap{ display: flex; flex-wrap: wrap; gap: 5px; } .product-item-label__tag--sale{ flex-shrink: 0; margin-left: auto; } .detail__label-wrap .detail__label .product-item-label__tag:last-child{ margin-left: 0; } .detail__label-wrap{ align-items: center; } .open-to-know{ background-color: transparent; } .detail-block-form__item .open-to-know{ width: auto; padding-left: 0; padding-right: 0; margin-right: 0; margin-left: 0; } .input-text { display: flex; flex-direction: row; align-items: center; padding: 12px 16px; gap: 8px; width: 100%; height: 48px; background: #FFFFFF; border: 1px solid #999999; border-radius: 20px; margin-top: 6px; color: #000 } textarea.input-text{ height: 150px; } .woocommerce-button{ padding: 20px; margin-top: 20px; } fieldset{ padding: 0; } .radio-button{ display: flex; gap: 10px; } /* By Max fix add to cart button */ .store-add-to-cart{ min-height: 48px; } .mini-profile__button{ position: relative; } .mini-profile__button--counter{ display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 2px; position: absolute; background: var(--gradient-turquoise); border-radius: 10px; width: 16px; height: 16px; border-radius: 50%; top: 6px; right: 6px; font-style: normal; font-weight: 700; font-size: 9px; line-height: 16px; color: #121212; } .mini-profile__button--counter.disabled{ display: none; } .--text-center{ text-align: center; } .post{ padding-bottom: 1.5rem; } .login_wrap{ min-height: 100%; } .button--high-46{ padding: 12px 24px; font-size: 20px; font-weight: 700; line-height: 24px; } /* form */ .form{ width: 100%; padding: 24px 24px 43px; display: flex; flex-direction: column; border-radius: 24px; background: var(--gradient-turquoise); } .form__item{ margin-top: 16px; } .form__title{ font-family: var(--font-family); font-weight: 500; font-size: 24px; line-height: 133%; color: var(--text-black); } .form__input{ width: 100%; border-radius: 20px; padding: 12px 16px; border: 1px solid var(--text-black); background: var(--background-white); font-family: var(--font-family); font-weight: 400; font-size: 20px; line-height: 120%; color: var(--text-black); } .form__input::placeholder{ color: var(--text-grey); } .form__input--textarea{ height: 96px; resize: none; } .form__input--center{ text-align: center; } .form__button{ width: 100%; padding: 12px 24px; font-family: var(--font-family); font-weight: 400; font-size: 20px; line-height: 120%; color: var(--text-white); border-radius: 16px; border: none; background: var(--background-black); cursor: pointer; transition: background-color .2s ease-out; } .form__button:hover{ opacity: .8; } .label{ padding-bottom: 4px; display: inline-block; position: relative; } .label::after{ content: ''; position: absolute; top: 2px; right: -20px; width: 16px; height: 16px; background-image: url(../img/svg/main/question.svg); cursor: pointer; } .label__title, .form-row label{ font-family: var(--font-family); font-weight: 700; font-size: 16px; line-height: 125%; color: var(--text-3); } .label__question{ position: absolute; padding: 8px; border-radius: 6px; transition: height .2s ease-out; box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1), 0 0 2px 0 rgba(0, 0, 0, 0.2); overflow: hidden; background-color: var(--background-white); opacity: 0; transition: opacity .2s ease-out; pointer-events: none; } .label:hover .label__question{ opacity: 1; pointer-events: auto; } .label-name{ margin-bottom: 8px; font-family: var(--font-family); font-weight: 700; font-size: 16px; line-height: 125%; color: var(--text-black); display: block; } .form-input__error{ margin-top: 4px; font-family: var(--font-family); font-weight: 500; font-size: 12px; line-height: 133%; color: #f60909; display: none; position: relative; } .form-input__error--absolute{ position: absolute; bottom: -19.95px; left: 0; width: 100%; } .form__input.error, .form-input__phone.error{ border-color: #f60909; } .form__input.error + .form-input__error{ display: block; } .form-input__phone.error .form-input__error{ display: block; } .form-input-phone__input.error + .form-input__error--absolute::before{ content: ''; position: absolute; top: -53px; left: -1px; width: 100%; height: 48px; border-radius: 20px; border: 1px solid #f60909; } .form-input__phone{ padding: 12px 16px 12px ; display: flex; align-items: center; border-radius: 20px; border: 1px solid var(--text-black); cursor: pointer; position: relative; } .form-input__phone.focus{ outline: 1px solid var(--text-black); } .form-input-phone__icon{ flex-shrink: 0; height: 16px; width: 28px; background-size: 16px; background-repeat: no-repeat; background-position: left; position: relative; } .form-input-phone__icon::after{ content: ''; position: absolute; top: 4px; right: 0; width: 8px; aspect-ratio: 1; background-image: url(../img/svg/main/triangle-grey.svg); } .form-input-phone__code{ flex-shrink: 0; font-family: var(--font-family); font-weight: 400; font-size: 20px; line-height: 120%; color: var(--text-black); } .form-input-phone__code::before{ content: '+'; } .form-input-phone__input{ margin-left: 6px; font-family: var(--font-family); font-weight: 400; font-size: 20px; line-height: 120%; color: var(--text-black); border: none; outline: none; } .form-input-phone__list{ position: absolute; top: 52px; left: 8px; width: 280px; z-index: 10; transition: opacity .2s ease-out; opacity: 0; pointer-events: none; border-radius: 20px; overflow: hidden; } .form-input-phone__list.active{ opacity: 1; pointer-events: auto; } .form-input-phone-list__search{ width: 100%; padding: 12px 16px; font-family: var(--font-family); font-weight: 400; font-size: 20px; line-height: 120%; color: var(--text-black); border-left: 1px solid var(--background-black); border-right: 1px solid var(--background-black); border-top: 1px solid var(--background-black); border-radius: 20px 20px 0 0; background: var(--background-white); } .form-input-phone-list__search::placeholder{ color: var(--text-6); } .form-input-phone-list__content{ width: 100%; max-height: 224px; padding: 24px 16px; border: 1px solid var(--background-black); border-top: none; border-radius: 0 0 20px 20px; background: var(--background-white); overflow-y: auto; } .form-input-phone-list__item{ margin-top: 14px; display: flex; align-items: center; background: none; border: none; cursor: pointer; } .form-input-phone-list__item:first-child{ margin-top: 0; } .form-input-phone-list-item__icon{ width: 16px; aspect-ratio: 1; } .form-input-phone-list-item__name{ margin-left: 8px; font-family: var(--font-family); font-weight: 400; font-size: 20px; line-height: 120%; color: var(--text-black); } .form-input-phone-list-item__code{ margin-left: 8px; font-family: var(--font-family); font-weight: 400; font-size: 20px; line-height: 120%; color: var(--text-black); } .form-input-phone-list-item__code::before{ content: '+'; } .form-input__tabs{ padding: 2px; display: flex; border-radius: 20px; background: var(--gradient-turquoise); position: relative; } .form-input-tabs__button{ width: 100%; margin-bottom: 0; padding: 10px; cursor: pointer; font-family: var(--font-family); font-weight: 400; font-size: 20px; line-height: 120%; color: var(--text-black); text-align: center; border-radius: 18px; z-index: 2; transition: background-color .2s ease-out; } .form-input-tabs__button.active{ background-color: var(--background-white); } .form-input-tabs__input{ display: none; } .form-input__radio{ padding: 16px; display: flex; flex-direction: column; } .form-input-radio__item{ margin-top: 14px; display: flex; align-items: center; } .form-input-radio__item:first-child{ margin-top: 0; } .form-input-radio__circle{ padding: 2px; width: 20px; aspect-ratio: 1; border-radius: 50%; background: var(--gradient-blue); position: relative; } .form-input-radio__item.active .form-input-radio__circle::before{ content: ''; position: absolute; top: 4px; left: 4px; width: 12px; aspect-ratio: 1; border-radius: 50%; background: var(--gradient-blue); } .form-input-radio-circle__content{ width: 16px; aspect-ratio: 1; border-radius: 50%; background: var(--background-white); } .form-input-radio__title{ margin-left: 8px; font-family: var(--font-family); font-weight: 400; font-size: 20px; line-height: 120%; color: var(--text-dark); } .form-input-radio__input{ display: none; } .form-input__list{ position: relative; } .form-input__list::before{ content: ''; position: absolute; top: 21.5px; right: 19.5px; width: 13px; height: 8px; background-image: url(../img/svg/main/arrow-black.svg); background-repeat: no-repeat; background-size: contain; pointer-events: none; } .form-input-list__input{ width: 100%; border-radius: 20px; padding: 12px 16px; padding-right: 40px; font-family: var(--font-family); font-weight: 400; font-size: 20px; line-height: 120%; color: var(--text-black); border: 1px solid var(--text-black); } .form-input-list__input::placeholder{ color: var(--text-grey); } .form-input-list__block-content{ position: absolute; top: 50px; left: 0; width: 100%; max-height: 192px; height: 0; border-radius: 20px; background-color: var(--background-white); overflow: hidden; transition: height .2s ease-out; z-index: 10; } .form-input-list__block-content.active{ border: 1px solid var(--background-black); } .form-input-list__content{ margin: 8px 16px; max-height: 176px; padding-right: 16px; overflow-y: auto; } .form-input-list__content::-webkit-scrollbar{ border-radius: 8px; width: 4px; background: rgba(204, 204, 204, 0.2); } .form-input-list__content::-webkit-scrollbar-thumb{ border-radius: 8px; background: var(--background-9); } .form-input-list__content .form-input-list__item{ margin-top: 16px; width: 100%; display: flex; justify-content: space-between; align-items: center; border-radius: 8px; padding: 4px; background: none; border: none; } .form-input-list__item:first-child{ margin-top: 0; } .form-input-list__item.active{ background: rgba(204, 204, 204, 0.2); } .form-input-list-item__text{ font-family: var(--font-family); font-weight: 400; font-size: 20px; line-height: 120%; color: var(--text-black); } .form-input-list-item__box{ width: 20px; aspect-ratio: 1; padding: 2px; border-radius: 4px; background: var(--gradient-blue); } .form-input-list-item-box__content{ width: 16px; aspect-ratio: 1; border-radius: 2px; background: var(--background-white); } .form-input-list__item.active .form-input-list-item-box__content{ background: var(--gradient-blue); } .remote-control__item{ display: none; } .remote-control__item.active{ display: block; } /* .form-input-radio__ */ /* form */ .v-hidden{ position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); padding: 0 !important; border: 0 !important; height: 1px !important; width: 1px !important; overflow: hidden; } .form-input-list-item-box__content{ display: inline-flex; align-items: center; justify-content: center; } .modalProfile{ position: fixed; top: 0; left: 0; padding: 20px; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.25); z-index: 200; opacity: 0; transition: opacity .2s ease-out; pointer-events: none; display: flex; justify-content: center; align-items: center; overflow-y: auto; padding-top: 30px; padding-bottom: 30px; } .modalProfile.active{ opacity: 1; pointer-events: auto; } .popup-wrap{ width: 100%; height: 100%; display: flex; } .modal-form{ margin: auto; } .iti__country-name{ color: #000; } .rm{ margin-top: 24px; } body { background-color: rgb(255, 255, 255) !important; background-image: none; } .login_inner img{ display: block; margin: 40px auto; } .product-item__price p::after, .modal-basket-item__price::after, .modal-block-price__price::after, .product-item-overlay__price::after, .detail-block-price__price::after { content: '₽'; padding-left: 5px; } .checkout { margin-top: 2rem; } .modal-basket-item__block-image{ flex-shrink: 0; } .modal-basket-item__content{ flex-grow: 1; } .modal__close{ padding: 0; } .woocommerce-order * { color: #000; } .woocommerce-notices-wrapper{ position: relative; top: 112px; z-index: 100; } .cabinet__control--column { flex-direction: column; } .form-input__tabs--white{ padding: 3px; border: 1px solid var(--text-3); background: var(--white); width: 100%; } .form-input__tabs--white .form-input-tabs__button.active{ background: var(--gradient-turquoise); } .form-input-tabs__button { width: 100%; padding: 10px; font-family: var(--font-family); font-weight: 400; font-size: 20px; line-height: 120%; color: var(--text-black); text-align: center; border-radius: 18px; z-index: 2; transition: background-color .2s ease-out; } @media (max-width: 1200px) { .cabinet__profile .form-input__tabs{ display: none; } } .subscription{ margin-top: 12px; } .subscription__item{ padding: 12px 0; display: flex; justify-content: space-between; border-bottom: 1px solid #999; } .subscription__item{ font-size: 20px; } .subscription__add{ color: var(--text-black); } .subscription__add-header{ } .subscription__add-title{ font-size: 24px; } .subscription__add-content{ padding: 24px 0 12px 0; } .subscription__add-product{ align-items: start; } .subscription__add-product > *:nth-child(3){ margin-left: auto; align-items: center; } .subscription__add .cabinet-card-order-detail-main-product-description__what { font-size: 16px; line-height: 125%; } .subscription__add .cabinet-card-order-detail-main-product-description__with-what { font-weight: 500; font-size: 16px; } .subscription__add .cabinet-card-order-detail-main-product__count{ font-weight: 700; font-size: 16px; line-height: 100%; } .subscription__add .cabinet-card-order-detail-main-product__price{ font-weight: 500; font-size: 20px; line-height: 120%; } .subscription__add{ width: 100%; } @media only screen and (max-width: 720px) { .subscription__item{ flex-direction: column; } .subscription__item > p:first-child{ font-size: 16px; color: var(--text-6); } .subscription__item > p:last-child{ margin-top: 6px; } .subscription__add-title { font-size: 20px; } .subscription__add-product{ flex-wrap: wrap; } .subscription__add-product > *:not(:first-child){ padding-top: 0; } .subscription__add-product .cabinet-card-order-detail-main-product__img{ width: 73px; height: 66px; } .subscription__add-product .cabinet-card-order-detail-main-product-description__what{ font-size: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .subscription__add-product .cabinet-card-order-detail-main-product-description__with-what{ margin-top: 8px; font-size: 12px; } .subscription__add-product .cabinet-card-order-detail-main-product__description { width: calc(100% - 73px); } .subscription__add-product .cabinet-card-order-detail-main-product__content{ position: static; margin-top: -10px; margin-left: auto; width: calc(100% - 73px); display: flex; justify-content: space-between; align-items: center; } .subscription__add-product .cabinet-card-order-detail-main-product__count{ position: static; font-size: 12px; } .subscription__add-product .cabinet-card-order-detail-main-product__price{ position: static; font-size: 16px; } }