/* общие */ button{ cursor: pointer; } .wrapper{ margin: 0 auto; max-width: 1600px; } /* компоненты */ /* lang*/ .lang{ position: relative; } .lang__open{ padding: 12px 15px; width: 74px; background: none; border: none; display: flex; align-items: center; transition: opacity .2s ease-out; } .lang__open:hover{ opacity: .8; } .lang-open p{ font-family: var(--font-family); font-weight: 700; font-size: 16px; line-height: 125%; text-align: start; color: var(--text-black); } .lang-open__arrow{ margin-left: 7.25px; display: flex; justify-content: center; align-items: center; } .lang-open__black{ } .lang-open__white{ display: none; } .lang__content{ position: absolute; top: 33px; left: -13px; height: 0; 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); z-index: 100; } .lang__list{ width: 104px; padding: 8px; list-style-type: none; } .lang__item{ margin-top: 8px; } .lang__item:first-child{ margin-top: 0; } .lang__link{ display: block; width: 100%; padding: 4px; border-radius: 6px; font-family: var(--font-family); font-weight: 400; font-size: 20px; line-height: 120%; color: var(--text-dark); text-decoration: none; position: relative; transition: background-color .2s ease-out; } .lang__link:hover, .lang__item.active .lang__link{ background-color: var(--background-grey); } .lang__item.active .lang__link::before{ content: ''; position: absolute; top: 10px; right: 8px; width: 16px; height: 12px; background-image: url(../img/svg/main/arrow-selected.svg); } /* lang */ /* mini-profile */ .mini-profile{ display: flex; align-items: center; } .mini-profile__item{ margin-left: 8px; } .mini-profile__item:first-child{ margin-left: 0; } .mini-profile__button{ display: block; padding: 8px; display: flex; justify-content: center; align-items: center; background: none; border: none; transition: opacity .2s ease-out; } .mini-profile__button:hover{ opacity: .8; } .mini-profile__icon{ width: 24px; aspect-ratio: 1; } .mini-profile__icon.white{ display: none; } /* mini-profile */ /* main-menu */ .main-menu{ display: flex; align-items: center; list-style-type: none; } .main-menu__item{ margin-left: 24px; transition: opacity .2s ease-out; } .main-menu__item:first-child{ margin-left: 0; } .main-menu__item:hover{ opacity: .8; background: var(--background-grey); border-radius: 24px; } .header.white .main-menu__item:hover .main-menu__link{ color: var(--text-black); } .main-menu__item:active{ opacity: 1; } .main-menu__link{ display: block; padding: 8px 12px; font-family: var(--font-family); font-weight: 700; font-size: 16px; line-height: 125%; color: var(--text-black); text-decoration: none; transition: color .2s ease-out; } .main-menu__button{ padding: 8px 32px 8px 12px; font-family: var(--font-family); font-weight: 700; font-size: 16px; line-height: 125%; color: var(--text-black); border: none; border-radius: 24px; background: var(--gradient-turquoise); position: relative; } .main-menu__button::before{ content: ''; position: absolute; top: 14px; right: 14px; width: 13px; height: 8px; background-image: url(../img/svg/main/arrow-black.svg); background-repeat: no-repeat; background-size: contain; } /* main-menu */ /* 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--grey{ border-color: var(--background-9); } .form__input--textarea{ height: 96px; resize: none; } .form__input--textarea-72{ height: 72px; resize: none; overflow: hidden; } .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{ 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%; } .modal-form__content.check .form__input:invalid{ border-color: #f60909; } .modal-form__content.check .form__input:invalid + .form-input__error{ display: block; } .modal-form__content.check .form-input-phone__input:invalid + .form-input__error{ display: block; } .modal-form__content.check .form-input-phone__input:invalid + .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--white{ padding: 3px; border: 1px solid var(--text-3); background: var(--white); } .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; } .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__title.form-input-radio__title--no-span span{ color: var(--text-dark); } .form-input-radio__price{ margin-left: auto; font-family: var(--font-family); font-weight: 600; font-size: 20px; line-height: 120%; color: var(--text-black); } .form-input-radio__price::after{ content: ' ₽'; } .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-agreement{ display: flex; } .form-agreement__check{ display: flex; align-items: center; } .form-agreement__square{ width: 18px; aspect-ratio: 1; border-radius: 4px; border: 2px solid var(--background-black); } .form-agreement__label{ margin-left: 8px; font-family: var(--font-family); font-weight: 400; font-size: 20px; line-height: 120%; color: var(--text-black); } .form-agreement__input{ display: none; } .form-agreement__input:checked + .form-agreement__square{ border: none; background: var(--gradient-blue); position: relative; } .form-agreement__input:checked + .form-agreement__square::after{ content: ''; position: absolute; top: 1px; left: 1px; width: 16px; aspect-ratio: 1; background-image: url(../img/svg/main/arrow-selected-white.svg); background-repeat: no-repeat; background-position: center; } /* form */ /* social media */ .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; } /* social media */ /* breadcrumbs */ .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; } /* breadcrumbs */ /* compound */ .compound{ margin: -5px; min-height: 33.95px; display: flex; align-items: start; } .compound__item{ margin: 5px; padding: 4px 8px; font-family: var(--font-family); font-weight: 700; font-size: 12px; line-height: 133%; color: var(--text-black); border-radius: 16px; background-color: var(--background-white); display: block; text-decoration: none; } .compound__item:first-child{ margin-left: 0; } .product__footer{ margin: 48px 24px 24px; display: flex; justify-content: center; } .product__footer--error{ margin: 45px 0; } /* compound */ /* button */ .button{ font-family: var(--font-family); font-weight: 600; font-size: 20px; line-height: 120%; color: var(--text-black); border-radius: 20px; 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 24px 24px; font-weight: 700; text-align: center; position: relative; } .button--high-46{ padding: 12px 24px; font-size: 20px; font-weight: 700; line-height: 24px; } .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 24px 7px 24px; display: flex; justify-content: center; border: none; transition: opacity .2s ease-out; text-decoration: none; } .to-know--start{ justify-content: start; padding-left: 0; } .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 */ .subscription{ } .subscription__item{ display: flex; color: var(--text-black); font-family: var(--font-family); font-weight: 500; line-height: 120%; } .subscription__item:nth-last-child(n + 2){ border-bottom: 1px solid var(--background-9); } .subscription__item span{ font-weight: 700; } .subscription__item span small{ font-size: 16px; } .subscription__status{ color: var(--text-black); } .subscription__status--close{ color: var(--text-red); } .subscription__status--end{ color: var(--text-green); } .subscription__add{ width: 100%; } .subscription__add-header{ } .subscription__add-product{ align-items: start; } .subscription__add-product > *:not(:first-child){ padding-top: 14px; } .subscription__add-title{ font-family: var(--font-family); font-weight: 600; line-height: 133%; } .subscription__add-content{ } .tabs__buttons{ margin: -12px; display: flex; flex-wrap: wrap; } .tabs__content-wrap{ margin-top: 24px; } .tabs__content{ display: none; } .tabs__content.active{ display: block; } .cabinet__control--column{ flex-direction: column; } .cabinet__control--column > *:not(:first-child){ margin-top: 16px } .cabinet-card-order__payment{ } .cabinet-card-order__sub-title{ font-family: var(--font-family); font-weight: 600; line-height: 143%; color: var(--text-3); } .cabinet-card-order__date{ font-family: var(--font-family); font-weight: 700; line-height: 125%; color: var(--text-3); } .cabinet-card-order-payment__price span{ font-size: 12px; } .wcsatt-add-to-subscription-wrapper, form.cart .quantity, .detail__content .in-stock, .wcsatt-options-prompt-label-subscription, .wcsatt-options-product-dropdown { display: none; } .wcsatt-options-product-wrapper { display: block!important; } form.cart .single_add_to_cart_button { margin: 8px; min-width: 345.89px; height: 56px; padding: 16px 24px 16px 24px; font-weight: 700; text-align: center; position: relative; background: var(--gradient-turquoise); border: none; transition: opacity .2s ease-out; font-family: var(--font-family); font-size: 20px; line-height: 120%; color: var(--text-black); border-radius: 20px; text-transform: none; cursor: pointer; } form.cart .single_add_to_cart_button:hover { opacity: 0.8; } .subscription-option-details span { color: #000; cursor: pointer; } ul.wcsatt-options-product, .wcsatt-options-product-dropdown { margin: 0; } .wcsatt-options-wrapper input, .wcsatt-add-to-subscription-wrapper input { width: 18px; aspect-ratio: 1; accent-color: var(--background-black); cursor: pointer; } .subscription-option label { display: flex; align-items: center; gap: 5px; } form.cart { margin: 25px 0 -48px; } ul.wcsatt-options-product--hidden, .wcsatt-options-product-dropdown--hidden { display: block!important; } .detail-block__form{ margin-top: 48px; display: flex; flex-direction: column; } .wcsatt-options-prompt-text{ font-family: 'Craftwork Grotesk'; font-style: normal; font-weight: 700; font-size: 20px; line-height: 24px; text-transform: uppercase; color: #000000; } .subscription-option-details, .wcsatt-options-prompt-action, .subs-text-title{ font-size: 20px; line-height: 24px; display:flex; gap: 12px; align-items: center; } .subs-text{ max-width: 322px; font-family: 'Craftwork Grotesk'; font-style: normal; font-weight: 500; font-size: 16px; line-height: 20px; margin-bottom: 20px; } input:checked + .subscription-option-details::before, input:checked + .wcsatt-options-prompt-action::before{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M1 10C1 5.02944 5.02944 1 10 1C14.9706 1 19 5.02944 19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10Z' fill='white'/%3E%3Cpath d='M1 10C1 5.02944 5.02944 1 10 1C14.9706 1 19 5.02944 19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10Z' stroke='url(%23paint0_radial_11890_46040)' stroke-width='2'/%3E%3Ccircle cx='10' cy='10' r='6' fill='url(%23paint1_radial_11890_46040)'/%3E%3Cdefs%3E%3CradialGradient id='paint0_radial_11890_46040' cx='0' cy='0' r='1' gradientUnits='userSpaceOnUse' gradientTransform='translate(19 1) rotate(135) scale(25.4558 34.7538)'%3E%3Cstop stop-color='%23188892'/%3E%3Cstop offset='0.45' stop-color='%231EA49C'/%3E%3Cstop offset='0.9' stop-color='%2376CE75'/%3E%3Cstop offset='1' stop-color='%23BBE38D'/%3E%3C/radialGradient%3E%3CradialGradient id='paint1_radial_11890_46040' cx='0' cy='0' r='1' gradientUnits='userSpaceOnUse' gradientTransform='translate(16 4) rotate(135) scale(16.9706 23.1692)'%3E%3Cstop stop-color='%23188892'/%3E%3Cstop offset='0.45' stop-color='%231EA49C'/%3E%3Cstop offset='0.9' stop-color='%2376CE75'/%3E%3Cstop offset='1' stop-color='%23BBE38D'/%3E%3C/radialGradient%3E%3C/defs%3E%3C/svg%3E"); } .subscription-option-details::before, .wcsatt-options-prompt-action::before{ content: ''; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M1 10C1 5.02944 5.02944 1 10 1C14.9706 1 19 5.02944 19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10Z' fill='white'/%3E%3Cpath d='M1 10C1 5.02944 5.02944 1 10 1C14.9706 1 19 5.02944 19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10Z' stroke='%23121212' stroke-width='2'/%3E%3C/svg%3E"); height: 20px; width: 20px; } .wcsatt-options-wrapper input, .wcsatt-add-to-subscription-wrapper input { aspect-ratio: 1; accent-color: var(--background-black); cursor: pointer; height: 0; width: 0; position: absolute; opacity: 0; } .subscription-option .amount { color: #1A1A1A; font-weight: 600; } .subscription-option del .amount { color: #bbb; font-weight: 400; font-size: .8em; } .subscription-option del .woocommerce-Price-amount.amount, .subscription-option del .woocommerce-Price-currencySymbol{ text-decoration: line-through !important; } .woocommerce-Price-amount.amount{ font-size: 1.15em; } .detail #wc-stripe-express-checkout-element{ display: none !important; } .detail-block-form__item--radio{ display: flex; gap: 10px; } /* Основные стили для компьютера */ /* header start */ .header{ position: relative; background-color: var(--background-white); position: fixed; left: 0; top: 0; right: 0; z-index: 200; } .detail .product__main{ width: 100%; } .header__content::after{ content: ''; position: absolute; left: auto; right: auto; bottom: 0; width: calc(100% - 48px); max-width: 1552px; height: 1px; background: var(--text-3); } .detail-block-form__items{ margin: 25px 0 0; } .header__content{ height: 72px; padding: 14px 24px; display: flex; justify-content: space-between; align-items: center; } .header__open-menu{ display: none; width: 24px; aspect-ratio: 1; position: relative; border: none; background: none; } .header__open-menu::before{ content: ''; position: absolute; top: 8px; left: 4px; width: 16px; height: 2px; background: var(--background-black); border-radius: 1px; } .header__open-menu::after{ content: ''; position: absolute; left: 4px; bottom: 8px; width: 16px; height: 2px; background: var(--background-black); border-radius: 1px; } .header__logo{ width: 182px; height: 40px; } .header__logo-black, .header__logo-white{ width: 100%; height: 100%; } .header__logo-white{ display: none; } .header__menu-block{ position: absolute; top: 72px; left: 0; width: 100%; height: 0; overflow: hidden; transition: height .2s ease-out; background-color: var(--background-white); z-index: 100; } .header__pc-menu{ padding: 40px 46px; display: flex; justify-content: center; position: relative; } .header__pc-menu::before{ content: ''; position: absolute; top: 0; left: 46px; width: 330px; height: 248px; background-image: url(../img/pet/cat.png); background-repeat: no-repeat; } .header__pc-menu::after{ content: ''; position: absolute; top: 0; right: 46px; width: 330px; height: 248px; background-image: url(../img/pet/dog.png); background-repeat: no-repeat; } .header-pc-menu__content{ width: 600px; display: flex; justify-content: space-between; } .header-pc-menu__item{ } .header-pc-menu__title{ font-family: var(--font-family); font-weight: 700; font-size: 26px; line-height: 123%; text-transform: uppercase; color: var(--text-black); text-decoration: none; } .header-pc-menu__list{ margin-top: 16px; list-style-type: none; } .header-pc-menu__list-li{ margin-top: 25px; } .header-pc-menu__list-li:first-child{ margin-top: 0; } .header-pc-menu__list-li a{ font-family: var(--font-family); font-weight: 600; font-size: 20px; line-height: 120%; color: var(--text-0); text-decoration: none; } .header__phone-menu{ display: none; padding: 24px 16px; height: calc(100vh - 56px); overflow-x: auto; } .header-phone-menu__item{ padding: 16px 0; border-top: 1px solid #f4f1f0; border-bottom: 1px solid #f4f1f0; display: flex; flex-direction: column; } .header-phone-menu__item:first-child{ border-top: 0; } .header-phone-menu__item:last-child{ border-bottom: 0; } .header-phone-menu__title{ font-family: var(--font-family); font-weight: 700; font-size: 20px; line-height: 120%; color: var(--text-black); text-decoration: none; } .header-phone-menu__title--gradient{ background: var(--gradient-blue); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .header-phone-menu__category{ margin-top: 16px; font-family: var(--font-family); font-weight: 500; font-size: 18px; line-height: 133%; color: var(--text-black); text-decoration: none; } .header-phone-menu__list{ margin-top: 24px; padding-left: 32px; list-style-type: none; } .header-phone-menu__list-item{ margin-top: 16px; } .header-phone-menu__list-item:first-child{ margin-top: 0; } .header-phone-menu__list-item a{ font-family: var(--font-family); font-weight: 500; font-size: 16px; line-height: 125%; color: var(--text-black); text-decoration: none; } .header.white{ background: none; } .header.white .header__logo-black{ display: none; } .header.white .header__logo-white{ display: block; } .header.white .main-menu__link{ color: var(--text-white); } .header.white .main-menu__button{ background: var(--background-white); } .header.white .lang__open{ color: var(--text-white); } .header.white .header__content::after{ background: var(--background-white); } .header.white .lang-open__black{ display: none; } .header.white .lang-open__white{ display: block; } .header.white .mini-profile__icon.white{ display: block; } .header.white .mini-profile__icon.black{ display: none; } .header.white .header__open-menu::before, .header.white .header__open-menu::after{ background: var(--background-white); } .header__phone-menu::-webkit-scrollbar { width: 0px; } main{ padding-top: 72px; } /* header end */ /* product */ .product{ padding: 24px; } .product__header{ display: flex; justify-content: space-between; align-items: center; } .product__tag{ margin: 36px -12px -12px -12px; display: flex; align-items: center; flex-wrap: wrap; } .product-tag__item{ margin: 12px; padding: 1px; border-radius: 16px; background: var(--gradient-blue); border: none; } .product-tag-item__content{ padding: 3px 11px; background: var(--background-white); border-radius: 15px; display: flex; align-items: center; } .product-tag-item__text{ font-family: var(--font-family); font-weight: 400; font-size: 20px; line-height: 120%; background: var(--gradient-blue); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .product-tag-item__button{ margin: 2px 0 2px 4px; width: 20px; aspect-ratio: 1; background: none; border: none; background-image: url(../img/svg/main/gradient-x.svg); background-repeat: no-repeat; background-position: center; } .product__error{ margin: auto; padding: 0 16px; font-family: var(--font-family); font-weight: 700; font-size: 24px; line-height: 100%; text-transform: uppercase; color: var(--text-0); text-align: center; } .product__error-button{ border-radius: 20px; padding: 4px 24px; font-family: var(--font-family); font-weight: 600; font-size: 20px; line-height: 120%; color: var(--text-black); border: 1px solid var(--text-0); background: var(--background-white); text-decoration: none; } .product__title{ font-family: var(--font-family); font-weight: 700; font-size: 36px; line-height: 111%; text-transform: uppercase; text-align: center; color: var(--text-black); } .product__main{ margin: 36px -12px -12px; /* width: 100%; */ display: flex; align-items: stretch; flex-wrap: wrap; } .product__item{ margin: 12px; width: calc(25% - 24px); display: flex; flex-direction: column; justify-content: space-between; background-color: var(--background-grey); border-radius: 24px; overflow: hidden; position: relative; } .product__item::before{ content: ''; position: absolute; top: 0; left: 0; width: calc(100% - 2px); height: calc(100% - 2px); border: 1px solid #000; border-radius: 24px; pointer-events: none; transition: opacity .2s ease-out; opacity: 0; } .product__item:hover::before{ opacity: 1; } .product__item.active::before{ opacity: 0; } .product-item__block-label{ position: absolute; top: 16px; left: 16px; } .product-item__label{ position: absolute; top: 16px; left: 16px; margin: -2px; display: flex; align-items: center; z-index: 10; } .product-item-label__tag{ margin: 2px; padding: 4px 8px; font-family: var(--font-family); font-weight: 700; font-size: 12px; line-height: 133%; color: #f4f1f0; border-radius: 16px; display: block; text-decoration: none; } .product-item-label__tag--new{ background: var(--gradient-blue); } .product-item-label__tag--new-green{ background: #d9ffcc; color: #4e7623; } .product-item-label__tag--sale{ background: var(--gradient-red); } .product-item-label__tag--sale-red{ color: #fa0505; background: #ffe5e5; } .product-item-label__tag--black{ background: var(--background-black); color: var(--text-white); } .product-item-label__tag--title{ padding: 4px 2px; font-size: 16px; line-height: 125%; color: var(--text-black); display: flex; align-items: center; } .product-item__product-card{ height: 274px; display: flex; justify-content: center; align-items: center; } .product-item__images{ height: 242px; object-fit: contain; } .product-item__content-card{ padding: 15.5px; } .product-item__title{ margin-top: 8px; font-family: var(--font-family); font-weight: 500; font-size: 20px; line-height: 120%; color: var(--text-black); text-decoration: none; display: block; } .product-item__title:first-child{ margin-top: 0; } .product-item__price{ margin-top: 8px; display: flex; align-items: center; } .product-item__price p{ font-family: var(--font-family); font-weight: 700; font-size: 20px; line-height: 200%; text-transform: uppercase; color: var(--text-black); } .product-item__price p::after{ padding-left: 5px; } .product-item__price span{ margin-left: 9px; font-family: var(--font-family); font-weight: 500; font-size: 12px; line-height: 133%; color: var(--text-red); } .product-item__price del{ margin-left: 24px; font-family: var(--font-family); font-weight: 700; font-size: 18px; line-height: 133%; text-transform: uppercase; text-decoration: line-through; color: var(--text-6); } .product-item__price del::after{ } .product-item__price span::before{ content: '-'; } .product-item__price span::after{ content: '%'; } .product-item__bye{ margin-top: 8px; } .product__item.hiding .product-item__images{ filter: grayscale(1) } .product__item.hiding .product-item__price{ color: var(--text-grey); } .product-item__overlay{ position: absolute; top: 100%; left: 0; width: 100%; height: 100%; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; border-radius: 24px; backdrop-filter: blur(25px); background-color: rgba(242, 242, 242, 0.8); z-index: 10; transition: top .4s ease-out; } .product-item__overlay.active{ top: 0; } .product-item-overlay__header{} .product-item-overlay__tags{ margin: 4px -6px -6px -6px; font-family: var(--font-family); font-weight: 500; font-size: 12px; line-height: 133%; color: var(--text-3); display: flex; flex-wrap: wrap; list-style-type: none; } .product-item-overlay__tags li{ margin: 4px 6px; position: relative; } .product-item-overlay__tags li:nth-child(n+1)::after{ content: ''; position: absolute; top: 6px; right: -8px; width: 4px; aspect-ratio: 1; background-color: var(--text-3); border-radius: 50%; } .product-item-overlay__tags li:last-child::after, .product-item-overlay__tags li:last-child::before{ display: none; } .product-item-overlay__price{ margin-top: 32px; font-family: var(--font-family); font-weight: 700; font-size: 24px; line-height: 100%; text-transform: uppercase; text-align: right; color: var(--text-black); } .product-item-overlay__price::after{ } .product-item-overlay__block-button{ margin-top: 32px; } .product-item-overlay__button{ margin-top: 16px; } .product-item-overlay__button:first-child{ margin-top: 0; } .product-item-overlay__input-block{ } .product-item-overlay__field{ margin-top: 24px; display: flex; justify-content: space-between; align-items: center; } .product-item-overlay__field:first-child{ margin-top: 0; } .product-item-overlay-field__title{ font-family: var(--font-family); font-weight: 700; font-size: 16px; line-height: 125%; color: var(--text-0); } .product-item__form{ } /* product */ /* modal */ /* .modal__button .to-know{ display: none; } */ /* modal */ /* footer */ .footer{ margin-top: 80px; padding: 40px 24px; background: var(--background-black); } .footer__wrapper{ width: 100%; display: flex; } .footer__content{ width: calc(100% - 364px); } .footer__logo{ width: 187px; height: 43px; } .footer__address{ margin-top: 24px; font-family: var(--font-family); font-weight: 500; font-size: 24px; line-height: 133%; color: var(--text-white); font-style: normal; } .footer__list{ margin: 28px -12px -12px -12px; display: flex; justify-content: space-between; flex-wrap: wrap; } .footer-list__item{ margin: 12px; width: calc(50% - 24px); display: flex; flex-direction: column; } .footer-list__item:nth-child(even){ width: 322px; } .footer-list__item .button{ border-radius: 24px; } .footer-list__title{ font-family: var(--font-family); font-weight: 700; font-size: 16px; line-height: 125%; color: var(--text-white); } .footer-list__link{ margin-top: 4px; font-family: var(--font-family); font-weight: 500; font-size: 24px; line-height: 133%; color: var(--text-white); text-decoration: none; } .footer__form{ margin-left: 48px; width: 364px; } .footer__about{ margin-top: 16px; padding-top: 15px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--text-white); } .footer-about__text{ font-family: var(--font-family); font-weight: 500; font-size: 20px; line-height: 120%; text-align: right; color: var(--text-white); opacity: 0.6; text-decoration: none; } .footer__social-media{ display: none; } /* footer */ /* detail */ .detail{ margin: 48px 24px 24px 24px; display: flex; align-items: start; flex-wrap: wrap; } .detail__images{ margin: -12px; width: calc(50% - 24px); display: flex; flex-wrap: wrap; } .detail__image{ margin: 12px; border-radius: 24px; display: flex; align-items: center; justify-content: center; background: var(--background-grey); cursor: pointer; } .detail__image--width-perc-100{ width: calc(100% - 24px); height: 600px; } .detail__image--width-perc-50{ width: calc(50% - 24px); height: 288px; } .detail__image--width-perc-100 img{ width: 90%; height: 90%; object-fit: contain; } .detail__image--width-perc-50 img{ width: 100%; height: 100%; object-fit: contain; } .detail__content{ margin-left: 48px; width: calc(50% - 24px); } .detail__label{ margin: -2px; display: flex; align-items: center; } .detail__label-wrap { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; } .detail__label .product-item-label__tag:last-child{ margin-left: auto; } .detail__label .product-item-label__tag:first-child{ margin-left: 0; } .detail__title{ margin-top: 8px; font-family: var(--font-family); font-weight: 700; font-size: 36px; line-height: 111%; text-transform: uppercase; color: var(--text-black); } .detail__block-price{ margin-top: 24px; display: flex; align-items: center; } .detail-block-price__price{ font-family: var(--font-family); font-weight: 700; font-size: 36px; line-height: 111%; text-transform: uppercase; } .detail-block-price__price::after{ } .detail-block-price__sale{ margin-left: 22px; display: flex; align-items: center; } .detail-block-price-sale__text{ font-family: var(--font-family); font-weight: 700; font-size: 20px; line-height: 120%; text-transform: uppercase; text-decoration: line-through; color: var(--text-6); } .detail-block-price-sale__text::after{ } .detail-block-price-sale__perc{ margin-left: 9px; font-family: var(--font-family); font-weight: 500; font-size: 12px; line-height: 133%; color: var(--text-red); } .detail-block-price-sale__perc::before{ content: '-'; } .detail-block-price-sale__perc::after{ content: '%'; } .detail-block__form{ margin-top: 48px; display: flex; flex-direction: column; } .detail-block-form__item{ margin-top: 24px; min-width: 345.89px; display: flex; align-items: center; flex-wrap: wrap; } .detail-block-form__item--radio{ margin: 16px -8px -8px -8px; } .detail-block-form__item:first-child{ margin-top: 0; } .detail-block-form__item button{ margin: 8px; } .detail-block-form__submit{ min-width: 345.89px; } .detail__warning{ padding: 3px; border-radius: 24px; background: var(--gradient-turquoise); } .detail-warning__content{ padding: 26px; border-radius: 22px; background: var(--background-white); } .detail-warning__title{ font-family: var(--font-family); font-weight: 700; font-size: 24px; line-height: 100%; text-transform: uppercase; color: var(--text-black); } .detail-warning__text{ margin-top: 16px; font-family: var(--font-family); font-weight: 400; font-size: 20px; line-height: 120%; color: var(--text-black); } .detail__toggle{ margin-top: 48px; margin-bottom: 48px; } .detail__wrapper-catalot{ margin-top: 64px; width: calc(100% + 16px); overflow: hidden; position: relative; } .detail__catalot{ } .detail-catalot__header{ padding-right: 16px; display: flex; justify-content: space-between; align-items: center; } .detail-catalot__control{ display: flex; align-items: center; } .detail-catalot-control__button{ margin-left: 24px; width: 48px; aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--background-black); background: none; display: flex; justify-content: center; align-items: center; } .detail-catalot__title{ font-family: var(--font-family); font-weight: 700; font-size: 24px; line-height: 100%; text-transform: uppercase; text-align: start; color: var(--text-0); } .detail-catalot__content{ margin: 12px -12px -12px -12px; width: 100%; display: flex; } .detail__catalot .product__item{ width: calc(100% - 24px); } .detail__images-phone{ display: none; } .back-detail{ display: none; } .toggle__table{ margin-top: 32px; display: flex; flex-wrap: wrap; } .toggle__table:first-child{ margin-top: 0; } .toggle__table--three .toggle-table__block:nth-child(1){ width: 33%; } .toggle__table--three .toggle-table__block:nth-child(2){ width: 33%; } .toggle__table--three .toggle-table__block:nth-child(3){ width: 33%; } .toggle__table--two .toggle-table__block{ width: calc(50% - 20px); } .toggle__table--two .toggle-table__block:nth-child(even){ margin-left: 40px; } .toggle-table__block{ } .toggle-table__item{ margin-top: 8px; width: 100%; display: flex; justify-content: space-between; } .toggle-table__item p{ display: block; font-family: var(--font-family); font-weight: 400; font-size: 20px; line-height: 120%; color: var(--text-black); flex-shrink: 0; } .toggle-table__item .warning{ width: 100%; } .toggle-table__item .warning p{ font-family: var(--font-family); font-weight: 600; font-size: 20px; line-height: 120%; text-align: center; } .toggle-table__title{ margin-bottom: 16px; font-family: var(--font-family); font-weight: 700; font-size: 16px; line-height: 125%; color: var(--text-black); } .toggle-table__title--center{ text-align: center; } .toggle-table-item__line{ margin: 23px 8px 0 8px; width: 100%; height: 1px; background: linear-gradient(to right, transparent 50%, #fff 50%), linear-gradient(to right, #333, #333); background-size: 4px 2px, 100% 2px; opacity: .6; } /* End | Toggle */ .radio-button{ } .radio-button__input{ display: none; } /* detail */ /* gallery */ .gallery{ position: fixed; top: 0; right: 0; bottom: 0; left: 0; padding: 24px; display: flex; align-items: center; background: var(--background-white); pointer-events: none; opacity: 0; transition: opacity .2s ease-out; z-index: 300; } .gallery.active{ opacity: 1; pointer-events: auto; } .gallery__close{ position: absolute; top: 24px; right: 24px; z-index: 10; } .gallery__pagination{ margin: -12px; } .gallery-pagination__item{ margin: 12px; width: 134px; height: 136px; display: flex; justify-content: center; align-items: center; border: none; border-radius: 16px; background: var(--background-grey); } .gallery-pagination__item img{ width: 90%; max-height: 90%; object-fit: contain; } .gallery__slider{ margin-left: 48px; padding: 100px; } .gallery__slider{ width: 100%; } .gallery__slider .swiper-pagination{ display: none; } .gallery__slider .swiper-button-next::after, .gallery__slider .swiper-button-prev::after{ display: none; } .gallery-button{ width: 48px; height: 48px; display: flex; justify-content: center; align-items: center; border: 1px solid var(--background-black); border-radius: 20px; background: none; } .gallery__slider .swiper-slide{ display: flex; justify-content: center; align-items: center; } .gallery__block{ width: 600px; height: 774px; display: flex; justify-content: center; align-items: center; background: var(--background-grey); border-radius: 24px; } .gallery__block img{ width: 90%; max-height: 90%; object-fit: contain; } .gallery__wrapper{ margin: 0 auto; max-width: 1600px; display: flex; align-items: center; } /* .swiper { width: 600px; height: 300px; } */ /* gallery */ /* 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: var(--text-white); } .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; } .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: var(--text-white); 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-payment__price::after{ margin-left: 5px; } .cabinet-card-order-payment__price--add::after{ display: none; } .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-product__price::after{ content: ' Р'; } .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(../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{ position: absolute; right: 0; bottom: 0; display: flex; align-items: center; transition: opacity .2s .1s ease-out; } .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; } .cabinet-card__order.active .cabinet-card-order__open-detail::after{ transform: rotate(180deg); } .cabinet-card-order__payment-add{ display: flex; flex-direction: column; align-items: start; } .cabinet-card-order__sub-title{ font-size: 14px; } .cabinet-card-order__date{ font-size: 16px; } /* .cabinet-card-no-orders__ */ .cabinet__subscription-pc{ } .cabinet__subscription-mobile{ display: none; } /* cabinet */ @media only screen and (max-width: 1600px) { .wrapper{ max-width: 1280px; } .product__item{ margin: 12px; width: calc(33.3% - 24px); } .gallery__wrapper{ max-width: 1280px; } .header__content::after{ max-width: 1232px; } } @media only screen and (max-width: 1365px) { .gallery__wrapper{ max-width: 100%; } } .subscription{ margin-top: 12px; } .subscription__item{ padding: 12px 0; justify-content: space-between; } .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%; } /* Стили для планшетов */ @media only screen and (max-width: 1200px) { /* header */ main{ padding-top: 64px; } .main-menu{ display: none; } .header__open-menu{ display: block; } .lang{ display: none; } .header__logo{ width: 136px; height: 29px; } .header__content{ height: auto; padding: 8px 16px; } .mini-profile__item:nth-child(2){ margin-left: 0; } .header::after{ left: 0; width: 100%; } .header__pc-menu{ display: none; } .header__phone-menu{ display: block; } .header__menu-block{ top: 56px; } .header__content::after{ left: 0; right: 0; width: 100%; } /* header */ /* footer */ .footer{ margin-top: 0; padding: 24px 16px; } /* footer */ /* breadcrumbs */ .breadcrumbs{ display: none; } /* breadcrumbs */ /* product */ .product{ padding: 12px; padding-top: 20px; } .product__title{ font-weight: 700; font-size: 26px; line-height: 123%; text-transform: uppercase; } .to-know p { font-size: 18px; } .toggle-table__title{ font-weight: 700; font-size: 12px; line-height: 133%; } .toggle-table__item p{ font-weight: 500; font-size: 12px; line-height: 133%; } .toggle-table-item__line{ margin-top: 12px; } .detail{ margin: 24px 16px; } .back-detail{ display: inline; } .detail-catalot__title{ font-size: 22px; } .product__footer--error{ margin: 48px 0px 24px; } /* product */ /* modal */ .modal{ padding: 0; } .modal__text{ padding-right: 0; } .form__button-pc{ display: none; } .form__button-mobile{ display: block; } .modal-form{ /* min-height: 100%; width: 100%; border-radius: 0; border: none; */ } .modal__notification{ margin: 24px; } .form-input-phone__list{ left: 0; } .modal-form-content__line--two{ flex-wrap: wrap; } .modal-form-content__line--two .modal-form-content-line__element{ margin-top: 24px; width: 100%; } .modal-form-content__line--two .modal-form-content-line__element:first-child{ margin-top: 0; } .modal-map{ width: 100%; flex-direction: column; border-radius: 0; } .modal-map__left, .modal-map__right{ width: 100%; } .modal-map__map iframe { width: 100%; height: 528px; } .modal-map-form__button{ display: none; } .modal-map-form__sub-button{ margin-top: 64px; padding: 0 24px; display: flex; } /* modal */ /* 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__orders--no-cab .cabinet-card:nth-child(2){ margin-top: 32px; } /* cabinet */ } @media only screen and (max-width: 980px) { /* product */ .product__item{ width: calc(50% - 24px); } /* product */ /* detail */ .detail{ flex-direction: column; } .detail__images{ display: none; } .detail__content{ width: 100%; } .detail__content{ margin-left: 0; } .detail__images-phone{ display: block; margin-top: 48px; margin-bottom: 48px; position: relative; overflow: hidden; } .detail__images-phone .swiper-slide{ display: flex; justify-content: center; } .detail-images-phone__image-block{ width: 100%; aspect-ratio: 1; max-width: 500px; display: flex; justify-content: center; align-items: center; background: var(--background-grey); border-radius: 16px; } .detail__images-phone .swiper-pagination-bullet{ width: 8px; height: 8px; border-radius: 50%; border: 1px solid #666; background-color: #666; opacity: 1; } .detail__images-phone .swiper-pagination-bullet.swiper-pagination-bullet-active{ background-color: var(--background-white); } .detail__images-phone .swiper-pagination{ margin-bottom: 19px; } .detail__title{ font-size: 26px; line-height: 123%; } .gallery__slider .swiper-pagination { display: block; } .gallery__pagination{ display: none; } .gallery__slider .swiper-pagination-bullet{ width: 8px; height: 8px; border-radius: 50%; border: 1px solid #666; background-color: #666; opacity: 1; } .gallery__wrapper .gallery-button{ display: none; } .gallery__slider .swiper-pagination-bullet.swiper-pagination-bullet-active{ background-color: var(--background-white); } .gallery__slider{ margin-left:0; padding: 0px 0px 50px 0px; /* padding: 40px; */ } .gallery__block { width: 100%; aspect-ratio: 1; height: auto; } /* detail */ } @media only screen and (max-width: 750px) { /* cabinet */ .cabinet-card-order__open-detail{ margin-top: 144px; } .cabinet-card-order__detail-short{ right: auto; left: 0; bottom: 48px; } .cabinet-card-order-detail-short__item{ margin-left: -27px; } .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__link{ margin-top: 144px; } /* cabinet */ } /* Стили для мобильных устройств */ @media only screen and (max-width: 720px) { /* product */ .product__item{ width: calc(100% - 24px); } /* product */ /* modal */ .modal__basket{ width: 100%; } .modal__filter{ width: 100%; } .modal__to-know, .modal__to-know-submit{ width: 100%; } .modal__button .to-know{ display: flex; background: none; } .modal__basket .modal__header { height: calc(100% - 156px); margin-bottom: -36px; } .modal-basket-item__block-image{ position: absolute; width: 80px; } .modal-basket-item__image{ width: 48px; } .modal-basket-item__content{ margin-left: 0; padding-left: 96px; } .modal-basket-item__control{ margin-left: -80px; } .modal-basket-item__title{ min-height: 40px; font-size: 16px; } .modal-basket__item--return{ flex-direction: column; align-items: start; } .modal-basket__item--return .modal-basket-item__title{ margin-right: auto; } .notification--width-584{ width: 100%; } .notification__title{ font-size: 20px; } .notification__text--center-pc{ text-align: start; } .notification__img{ height: 360px; } .notification__title{ padding-right: 96px; } .modal-form__buttons--two{ flex-wrap: wrap; } .modal-form__buttons--two button, .modal-form__buttons--two input{ margin-top: 24px; width: 100%; } .modal-form__buttons--two button:first-child, .modal-form__buttons--two input:first-child{ margin-top: 0; } .modal-map__control{ flex-wrap: wrap; } .modal-map-control__item{ width: calc(100% - 24px); } .form__full-mobile{ width: 100%; border-radius: 0; border: none; } .modal-form-content__line--three .modal-form-content-line__element:nth-child(1){ width: 69px; } .modal-form-content__line--three .modal-form-content-line__element:nth-child(2){ } .modal-form-content__line--three .modal-form-content-line__element:nth-child(3){ width: 82px; } .form__input{ padding: 12px 14px; } .modal-form--height-100-phone{ min-height: 100%; } /* modal */ /* footer */ .footer__about{ display: none; } .footer__wrapper{ flex-direction: column; } .footer__content{ width: 100%; } .footer__form{ margin-top: 24px; margin-left: 0; width: 100%; } .footer__social-media{ display: block; margin-top: 24px; } .footer-about__text{ padding-top: 35px; display: block; text-align: left; } .footer__list{ margin-top: 20px; } /* footer */ /* detail */ .toggle__table--two .toggle-table__block{ width: 100%; } .toggle__table--two .toggle-table__block:nth-child(even){ margin-top: 32px; margin-left: 0; } .toggle__table--three .toggle-table__block:nth-child(1){ width: 31%; } /* detail */ /* 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-product__content{ margin-left: 16px; flex-wrap: wrap; position: relative; } .cabinet-card-order-detail-main-product__description{ width: 100%; } .cabinet-card-order-detail-main-product__count{ position: absolute; left: 116px; bottom: 0; } .cabinet-card-order-detail-main-product__price{ position: absolute; left: 153px; bottom: 0; } .cabinet-card__content{ padding-right: 19px; } .cabinet-card-order-main__date{ font-size: 20px; } /* .cabinet-card__order.active */ /* .cabinet-card__order.active */ /* cabinet */ } @media only screen and (max-width: 576px) { /* header */ /* header */ /* product */ .product__header{ flex-direction: column; align-items: start; } .product__header .button{ margin-top: 48px; } /* product */ /* modal */ .modal__aside{ left: 0; } .form-input-radio__title span{ display: block; width: 100%; color: var(--text-grey); } .modal-form__title{ font-size: 20px; } /* modal */ /* detail */ .detail-block-form__item, .detail-block-form__submit{ min-width: 100%; } /* detail */ /* 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 */ } @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; } } .order{ display: flex; } .order__title{ font-family: var(--font-family); font-weight: 700; font-size: 24px; line-height: 117%; text-transform: uppercase; color: var(--text-black); } .order__contacts{ width: calc(50% - 0.5px); padding: 24px; border-right: 1px solid #121212; } .order-contacts__header{ display: flex; justify-content: space-between; align-items: center; } .order-contacts__form{ margin-top: 24px; } .order-contacts__delivery{ margin-top: 47.5px; padding-top: 48px; border-top: 1px solid var(--background-grey); } .order-contacts-deliver__item{ margin-top: 24px; } .order-contacts-deliver__date{ padding: 8px; border-radius: 24px; background: var(--background-grey); } .order-contacts-deliver__date .form-input-radio__item{ margin-top: 24px; } .order-contacts-deliver__date .form-input-radio__item:first-child{ margin-top: 0; } .order__your{ width: calc(50% - 0.5px); padding: 24px 24px 24px 48px; background: var(--background-grey); } .order-your__products{ margin-top: 48px; } .order-your-products__item{ margin-top: 16px; display: flex; justify-content: space-between; } .order-your-products__left{ display: flex; } .order-your-products__img{ width: 40px; aspect-ratio: 1; border-radius: 16px; } .order-your-products__content{ margin-left: 16px; } .order-your-products__name{ font-family: var(--font-family); font-weight: 500; font-size: 12px; line-height: 133%; color: var(--text-black); text-decoration: none; } .order-your-products__description{ margin-top: 8px; font-family: var(--font-family); font-weight: 500; font-size: 12px; line-height: 133%; color: var(--text-6); } .order-your-products__description span{ font-weight: 700; } .order-your-products__description span::before{ margin-left: 3px; content: 'x '; } .order-your-products__right{ display: flex; } .order-your-products__count{ font-family: var(--font-family); font-weight: 700; font-size: 12px; line-height: 133%; text-align: right; color: var(--text-6); } .order-your-products__count::before{ content: 'x'; } .order-your-products__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); } .order-your-products__price::after{ content: 'Р'; } .order-your__calculation{ margin-top: 48px; } .order-your__promo{ display: flex; } .order-your-promo__button{ margin-left: 8px; } .order-your-calculation__item{ margin-top: 24px; display: flex; justify-content: space-between; align-items: center; } .order-your-calculation__title{ font-family: var(--font-family); font-weight: 500; font-size: 20px; line-height: 120%; color: var(--text-black); } .order-your-calculation__value{ font-family: var(--font-family); font-weight: 700; font-size: 20px; line-height: 200%; text-transform: uppercase; text-align: right; color: var(--text-black); } .order-your-calculation__value--price::after{ content: ' ₽'; } .order-your-calculation__value--discount{ background: var(--gradient-red); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .order-your-calculation__value--discount::before{ content: '- '; } .order-your-calculation__description{ font-family: var(--font-family); font-weight: 500; font-size: 12px; line-height: 133%; text-align: right; color: var(--text-9); } .order-your-calculation__line{ margin-top: 23px; border: 1px solid var(--background-9); } .order-your-calculation__result{ font-family: var(--font-family); font-weight: 700; font-size: 24px; line-height: 117%; text-transform: uppercase; color: var(--text-black); } .order-your-calculation__submit{ margin-top: 48px; } @media only screen and (max-width: 1200px) { .order{ display: block; } .order__contacts, .order__your{ border: none; width: 100%; } } @media only screen and (max-width: 720px) { .order__title{ max-width: 181px; font-size: 20px; line-height: 120%; } .order__your{ margin-top: 16px; } .order__contacts{ padding: 24px 16px; } .order__your{ padding: 40px 16px 9px 16px; } .order-your__promo{ display: block; } .order-your-promo__button{ margin-left: 0; margin-top: 24px; width: 100%; } .order-your-products__content{ max-width: 164px; } .order-your-products__count, .order-your-products__price{ flex-shrink: 0; } }