From 3d0813989b64d25101720e8f1c3de02a950c85ce Mon Sep 17 00:00:00 2001 From: maksim Date: Thu, 14 Aug 2025 14:32:22 +0300 Subject: [PATCH] =?UTF-8?q?TAsk=207783=20|=20=D0=94=D0=BE=D1=80=D0=B0?= =?UTF-8?q?=D0=B1=D0=BE=D1=82=D0=BA=D0=B0=20=D0=BA=D0=B0=D1=80=D1=82=D0=BE?= =?UTF-8?q?=D1=87=D0=BA=D0=B8=20=D1=82=D0=BE=D0=B2=D0=B0=D1=80=D0=B0=20(?= =?UTF-8?q?=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D0=BB=20=D0=BF=D0=BE=D0=BF?= =?UTF-8?q?=D0=B0=D0=BF=20=D0=B4=D0=BB=D1=8F=20=D0=B8=D0=BD=D0=B3=D1=80?= =?UTF-8?q?=D0=B8=D0=B4=D0=B8=D0=B5=D0=BD=D1=82=D0=BE=D0=B2)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../assets/modules/shop/css/cart-loading.css | 49 + .../assets/modules/shop/css/checkout.css | 746 +++++++ .../assets/modules/shop/css/gp-style-core.css | 515 +++++ .../modules/shop/css/gp-style-desktop.css | 1706 +++++++++++++++++ .../modules/shop/css/gp-style-mobile.css | 336 ++++ .../modules/shop/css/gp-style-order.css | 241 +++ .../modules/shop/css/gp-style-tablet.css | 352 ++++ .../modules/shop/css/gp-style-ultra.css | 4 + .../assets/modules/shop/css/product-style.css | 901 +++++++++ 9 files changed, 4850 insertions(+) create mode 100644 wp-content/themes/cosmopet/assets/modules/shop/css/cart-loading.css create mode 100644 wp-content/themes/cosmopet/assets/modules/shop/css/checkout.css create mode 100644 wp-content/themes/cosmopet/assets/modules/shop/css/gp-style-core.css create mode 100644 wp-content/themes/cosmopet/assets/modules/shop/css/gp-style-desktop.css create mode 100644 wp-content/themes/cosmopet/assets/modules/shop/css/gp-style-mobile.css create mode 100644 wp-content/themes/cosmopet/assets/modules/shop/css/gp-style-order.css create mode 100644 wp-content/themes/cosmopet/assets/modules/shop/css/gp-style-tablet.css create mode 100644 wp-content/themes/cosmopet/assets/modules/shop/css/gp-style-ultra.css create mode 100644 wp-content/themes/cosmopet/assets/modules/shop/css/product-style.css diff --git a/wp-content/themes/cosmopet/assets/modules/shop/css/cart-loading.css b/wp-content/themes/cosmopet/assets/modules/shop/css/cart-loading.css new file mode 100644 index 0000000..a66e277 --- /dev/null +++ b/wp-content/themes/cosmopet/assets/modules/shop/css/cart-loading.css @@ -0,0 +1,49 @@ +/* Стили для загрузки корзины на single странице */ + +.product-incart__wrap.loading { + position: relative; + pointer-events: none; + opacity: 0.7; +} + +.product-incart__wrap.loading::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(255, 255, 255, 0.8); + z-index: 10; +} + +.product-incart__wrap.loading::after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + width: 20px; + height: 20px; + margin: -10px 0 0 -10px; + border: 2px solid #f3f3f3; + border-top: 2px solid #3498db; + border-radius: 50%; + animation: spin 1s linear infinite; + z-index: 11; +} + +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + +/* Стили для кнопок во время загрузки */ +.product-incart__wrap.loading .product-incart__btn { + opacity: 0.5; + pointer-events: none; +} + +/* Стили для счетчика во время загрузки */ +.product-incart__wrap.loading .product-incart__count { + opacity: 0.5; +} diff --git a/wp-content/themes/cosmopet/assets/modules/shop/css/checkout.css b/wp-content/themes/cosmopet/assets/modules/shop/css/checkout.css new file mode 100644 index 0000000..5db41ee --- /dev/null +++ b/wp-content/themes/cosmopet/assets/modules/shop/css/checkout.css @@ -0,0 +1,746 @@ +.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; + align-items: center; +} +.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__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--discount{ + background: var(--gradient-red); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.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; +} +} + + + + + /* 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; + + font-family: var(--font-family); + font-weight: 700; + font-size: 16px; + line-height: 125%; + color: var(--text-black); + + 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 */ + + + @media (max-width: 720px) { + .modal-map__control{ + flex-wrap: wrap; + } + .modal-map-control__item{ + width: calc(100% - 24px); + } + .form__full-mobile{ + width: 100%; + border-radius: 0; + border: none; + } + } + + .container{ + max-width: 100% !important; + padding: 0; + } + + .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: 0; + } + + .page-title{ + display: none; + } + + + .modal-map-control-item__input{ + display: none; + } + + .page .main-page-wrapper{ + background: #fff !important; + } + + .modal-map-control-item__content{ + width: 100%; + } + + + .woocommerce-shipping-methods{ + display: flex; + } + .visually-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; +} +.modal-map-control__item{ + display: flex; + flex-direction: column; +} +.modal-map-control__item > label { + flex-grow: 1; + display: flex; + flex-direction: column; + position: relative; +} +.modal-map-control__item > label > *{ + flex-grow: 1; +} +.modal-map-control__item:nth-child(n){ + margin: 12px; + margin-bottom: 12px; +} +.modal-map-control-item__title{ + text-align: left; +} +.modal-map-control__item > label{ + margin-bottom: 0; +} +.open-pvz-btn{ + 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; +} + + +.order-contacts__delivery.loading{ + position: relative; + min-height: 110px; +} +.order-contacts__delivery.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: center; + background-repeat: no-repeat; + } + + + .shop_table .woocommerce-shipping-totals{ + display:none; + } + + .amount{ + color: inherit; + } + + .order-your-products__item{ + align-items: center; + } + + +.wc_payment_methods.payment_methods.methods{ + display: none; +} + + +.woocommerce-terms-and-conditions-wrapper{ + +} + +.woocommerce-privacy-policy-text p{ + color: #121212 !important; + font-size: 14px; +} + +.woocommerce-privacy-policy-text a{ + color: #121212 !important; + font-size: 14px; + text-decoration: underline; +} + +.woocommerce-terms-and-conditions-checkbox-text a{ + color: #121212 !important; + font-size: 14px; + text-decoration: underline; +} + + + +.woocommerce-checkout.processing { + position: relative; + opacity: 0.5; + pointer-events: none; +} + +.woocommerce-checkout .blockUI.blockOverlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(242, 242, 242, 0.7) !important; + z-index: 9999; +} + +.woocommerce-checkout .blockUI-message { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 10000; + font-size: 16px; + color: #333; +} + +.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; +} + +.form-agreement{ + display: flex; +} +.form-agreement__check{ + display: flex; + align-items: center; + margin-top: 1rem; +} +.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("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.50681 0.784901C9.86151 1.14024 9.86101 1.71584 9.50567 2.07055L4.35112 7.216C3.99601 7.57049 3.42085 7.57024 3.06604 7.21544L0.493317 4.64271C0.138295 4.28769 0.138295 3.71208 0.493317 3.35706C0.848339 3.00204 1.42394 3.00204 1.77897 3.35706L3.70944 5.28753L8.22116 0.783766C8.57649 0.429057 9.1521 0.429565 9.50681 0.784901Z' fill='white'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: center; +} + +.modal-map__control--delivery > p{ + color: #121212; + padding-left: 1rem; +} + +.form-agreement__label a{ + color: #121212; + text-decoration: underline; +} + +.form-input__error.active{ + display: block; +} + +.order-your__promo{ + position: relative; +} + +.woocommerce-NoticeGroup.woocommerce-NoticeGroup-checkout{ + display: none; +} + +.woocommerce-terms-and-conditions-wrapper, .woocommerce-message{ + display: none; +} + + +.woocommerce-checkout-review-order-table tr{ + border: none !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; +} + +.cdek-office-info{ + display: none; +} + +.quantity-control { + display: flex; + align-items: center; + gap: 10px; + margin-bottom: 10px; +} +.quantity-decrease, .quantity-increase { + background: #f0f0f0; + border: none; + padding: 5px 10px; + cursor: pointer; + font-size: 16px; + border-radius: 4px; +} +.quantity-decrease:hover, .quantity-increase:hover { + background: #e0e0e0; +} +.quantity-input { + width: 50px; + text-align: center; + border: 1px solid #ccc; + border-radius: 4px; + padding: 5px; +} + +.form-row{ + margin-top: 1rem; +} + + +.woocommerce-order-overview{ +} + +.woocommerce .woocommerce-customer-details .woocommerce-column__title, .woocommerce-order-details__title{ + margin-bottom: .5em; + margin-top: 1em; +} + +.woocommerce ul.order_details{ + margin: 3rem 0; +} + +.woocommerce .woocommerce-customer-details address p{ + margin-top: .5em; +} + +.woocommerce .woocommerce-customer-details .woocommerce-customer-details--email::before, +.woocommerce .woocommerce-customer-details .woocommerce-customer-details--phone::before { + margin-top: -.25em; +} + +.woocommerce-order-overview__order.order{ + display: flex; + flex-direction: column; +} + +.woocommerce-order{ + max-width: calc(100% - 30px); + margin-right: auto; + margin-left: auto; +} + +@media (max-width: 640px) { + .woocommerce ul.order_details li { + margin-right:0em; + font-size: .715em; + line-height: 1.3; + border-right: none; + border-bottom: 1px dashed #cfc8d8; + padding-right: 2em; + width: 100%; + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} +} \ No newline at end of file diff --git a/wp-content/themes/cosmopet/assets/modules/shop/css/gp-style-core.css b/wp-content/themes/cosmopet/assets/modules/shop/css/gp-style-core.css new file mode 100644 index 0000000..cc4aa00 --- /dev/null +++ b/wp-content/themes/cosmopet/assets/modules/shop/css/gp-style-core.css @@ -0,0 +1,515 @@ +/* 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; + flex-wrap: wrap; +} +.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%; */ + border: none; + transition: opacity .2s ease-out; + text-decoration: none; + text-transform: uppercase; +} +.product__item .to-know{ + margin-right: auto; + margin-left: auto; + width: auto; + display: flex; +} +.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 */ + +.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; +} + +.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 0; + width: 345.89px; + max-width: 100%; + 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; +} + +@media (max-width: 640px) { + .subscription-option-details, .wcsatt-options-prompt-action, .subs-text-title{ + font-size: 18px; + line-height: 22px; + display:flex; + gap: 12px; + align-items: center; +} +} +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; + flex-shrink: 0; +} + +.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; +} + +.amount { + color: #1A1A1A; + font-weight: 600; +} + + + + +.detail__wrapper-catalot .swiper-slide { + height: auto; + display: flex; + flex-direction: column; +} + +.detail__wrapper-catalot .swiper-wrapper { + display: flex; + align-items: stretch; +} + +.detail__catalot .product__item{ + flex-grow: 1; +} + +.toggle__title{ + text-transform: uppercase; +} + +.toggle__text p:not(:last-child) { + margin-bottom: 1em; +} \ No newline at end of file diff --git a/wp-content/themes/cosmopet/assets/modules/shop/css/gp-style-desktop.css b/wp-content/themes/cosmopet/assets/modules/shop/css/gp-style-desktop.css new file mode 100644 index 0000000..e5e303f --- /dev/null +++ b/wp-content/themes/cosmopet/assets/modules/shop/css/gp-style-desktop.css @@ -0,0 +1,1706 @@ +/* Основные стили для компьютера */ + +/* header start */ +.detail .product__main{ + width: 100%; +} +.detail-block-form__items{ + margin: 25px 0 0; +} + +/* 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; + } + .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__price p{ + color: #999; + } + .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 */ + + + +/* 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); +} + +@media (max-width: 640px) { + .detail__catalot .product__item{ + width: calc(100%); +} +} +.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%; +} + + + + + .toggle__table { + width: 100%; + border-collapse: collapse; + table-layout: fixed; + } + + .toggle__table th, + .toggle__table td { + width: 33.33%; + vertical-align: top; + padding: 8px; + text-align: left; + } + + .toggle-table__title { + font-weight: bold; + font-size: 16px; + } + + .toggle-table__item { + position: relative; + padding-bottom: 10px; + } + + .toggle-table__item p { + display: inline-block; + margin: 0; + background: #fff; /* подложка, если нужно перекрыть линию */ + padding-right: 4px; + z-index: 1; + position: relative; + } + + /* Линия-многоточие */ + .toggle-table-item__line { + position: absolute; + left: 0; + bottom: 4px; + width: 100%; + border-bottom: 1px dotted #aaa; + z-index: 0; + } + + /* Адаптив */ + @media (max-width: 768px) { + .toggle__table th, + .toggle__table td { + font-size: 14px; + padding: 6px; + } + } + + /* Maks */ + .toggle__table tbody, + .toggle__table thead, + .toggle__table thead tr{ + width: 100%; + } + .toggle__table thead tr{ + display:flex; + } + .toggle__table tbody tr{ + display: flex; + gap: 8px; + } + \ No newline at end of file diff --git a/wp-content/themes/cosmopet/assets/modules/shop/css/gp-style-mobile.css b/wp-content/themes/cosmopet/assets/modules/shop/css/gp-style-mobile.css new file mode 100644 index 0000000..4464cbc --- /dev/null +++ b/wp-content/themes/cosmopet/assets/modules/shop/css/gp-style-mobile.css @@ -0,0 +1,336 @@ +/* Стили для мобильных устройств */ +@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; + } +} + diff --git a/wp-content/themes/cosmopet/assets/modules/shop/css/gp-style-order.css b/wp-content/themes/cosmopet/assets/modules/shop/css/gp-style-order.css new file mode 100644 index 0000000..fcfde9e --- /dev/null +++ b/wp-content/themes/cosmopet/assets/modules/shop/css/gp-style-order.css @@ -0,0 +1,241 @@ +.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; +} +} \ No newline at end of file diff --git a/wp-content/themes/cosmopet/assets/modules/shop/css/gp-style-tablet.css b/wp-content/themes/cosmopet/assets/modules/shop/css/gp-style-tablet.css new file mode 100644 index 0000000..ceab514 --- /dev/null +++ b/wp-content/themes/cosmopet/assets/modules/shop/css/gp-style-tablet.css @@ -0,0 +1,352 @@ +/* Стили для планшетов */ +@media only screen and (max-width: 1200px) { + + .product__main{ + margin: 36px 0 0; + } +/* 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 */ +} \ No newline at end of file diff --git a/wp-content/themes/cosmopet/assets/modules/shop/css/gp-style-ultra.css b/wp-content/themes/cosmopet/assets/modules/shop/css/gp-style-ultra.css new file mode 100644 index 0000000..c149baa --- /dev/null +++ b/wp-content/themes/cosmopet/assets/modules/shop/css/gp-style-ultra.css @@ -0,0 +1,4 @@ +/* Стили для ультрашироких экранов */ +@media only screen and (min-width: 1400px) { + +} \ No newline at end of file diff --git a/wp-content/themes/cosmopet/assets/modules/shop/css/product-style.css b/wp-content/themes/cosmopet/assets/modules/shop/css/product-style.css new file mode 100644 index 0000000..6da63a0 --- /dev/null +++ b/wp-content/themes/cosmopet/assets/modules/shop/css/product-style.css @@ -0,0 +1,901 @@ +/* breadcrumbs */ +.breadcrumbs{ + margin: 24px 0px; + + 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 */ + +/* product */ + +.product_main{ + display: flex; + padding: 30px; + border-radius: 30px; + min-height: 766px; + margin-top: 30px; + justify-content: space-between; + background-color: var(--bg-color); +} + +.product_main.--food-fish{ + --bg-color: #C1DDE6; + --accent-color: #48c1ed; +} + +.product_main.--food-lamb{ + --bg-color: #E6D7C1; + --accent-color: #863300; +} + +.product_main.--food-turkey{ + --bg-color: #F3D7D2; + --accent-color: #CD0003; +} + +.product_main.--food-beef{ + --bg-color: #E6C1D7; + --accent-color: #7e0092; +} + +.product_main.--food-salmon{ + --bg-color: #F3D7C1; + --accent-color: #ff6b35; +} + +.product_main.--food-rabbit{ + --bg-color: #E6D7C1; + --accent-color: #8b4513; +} + +.product_main.--food-duck{ + --bg-color: #F3E6D7; + --accent-color: #d2691e; +} + +.product_main.--treats-lamb{ + --bg-color: #E6D7F3; + --accent-color: #44006c; +} + +.product_main.--treats-rabbit{ + --bg-color: #F3D7E6; + --accent-color: #601094; +} + +.product_main.--treats-beef{ + --bg-color: #D7F3E6; + --accent-color: #004c31; +} + +.product_main.--treats-salmon{ + --bg-color: #F3D7F3; + --accent-color: #7c007a; +} + +.product_main.--treats-duck{ + --bg-color: #D7F3F3; + --accent-color: #326e70; +} + +.product_main.--treats-fish{ + --bg-color: #D7E6F3; + --accent-color: #0066cc; +} + +.product_main.--treats-turkey{ + --bg-color: #F3E6D7; + --accent-color: #cc3300; +} + +/* product info */ +.product-info{ + width: 364px; + flex-direction: column; + justify-content: space-between; + display: flex; + padding-right: 30px; +} + +.product-title{ + font-weight: 700; + font-size: 24px; + text-transform: uppercase; + color: #121212; +} + +.product-contains{ + margin-top: 30px; + +} + +.product-block-title{ + font-weight: 700; + font-size: 20px; + line-height: 100%; + color: #121212; + text-transform: uppercase; +} + +.product-contains-text{ + font-weight: 400; + font-size: 14px; + line-height: 150%; + color: #121212; + margin-top: 20px; +} + + + +.product-values{ + margin-top: 30px; +} + +.product-values-list{ + display: flex; + flex-wrap: wrap; + margin-top: 10px; + gap: 4px; +} + +.product-values-item{ + border: 1px solid rgba(18, 18, 18, 0.1); + border-radius: 100px; + padding: 4px 4px 4px 10px; + height: 48px; + display: flex; + align-items: center; + font-weight: 700; + font-size: 14px; + line-height: 143%; + color: #121212; + gap: 10px; +} + +.product-values-item-val{ + border: 1px solid #000; + border-radius: 100px; + min-width: 40px; + padding-left: 5px; + padding-right: 5px; + height: 40px; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; +} + +.product-values-title{ + font-weight: 700; +font-size: 16px; +line-height: 125%; +color: #121212; +} + +.product-vitamins{ + border: 1px solid rgba(18, 18, 18, 0.1); + border-radius: 20px; + padding: 10px; + width: 100%; + font-weight: 700; + font-size: 14px; + line-height: 143%; + color: #121212; + margin-top: 4px; +} + +.product-vitamins-list{ + margin-top: 10px; + display: flex; + flex-wrap: wrap; + gap: 4px; +} + +.product-vitamins-item{ + border: 1px solid #000; + border-radius: 100px; + padding: 10px; +} +/* product info */ + + +/* product constructor */ +.product-constructor{ + width: 395px; +} +.product-constructor__block{ + margin-bottom: 1.5rem; +} +.product-constructor__block-title{ +font-size: 16px; +line-height: 125%; +color: #121212; +font-weight: 700; +} + +.product-constructor__block-list{ + display: flex; + margin-top: 10px; + border-radius: 100px; + padding: 5px; + height: 60px; + width: 100%; + background-color: #fff; +} + +.product-constructor__block-item{ + flex-grow: 1; + padding: 2px 6px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 50px; + font-weight: 700; + font-size: 14px; + color: rgba(18, 18, 18, 0.75); + border-radius: 100px; +} + +.product-constructor__block-item svg, .product-constructor__block-item path{ + fill: rgba(18, 18, 18, 0.75); + fill-opacity: 1; +} +.product-constructor__block-item.active{ + color: #fff; + background-color: var(--accent-color); +} + +.product-constructor__block-item.active svg, .product-constructor__block-item.active path{ + fill: #fff; +} +.product-constructor__block-item img, .product-constructor__block-item svg{ + height: 22px; + width: 22px; +} +/* product constructor */ +/* product price */ + + +.product-price{ + display: flex; + gap: 10px; + align-items: center; +} + +.product-price-main{ + border-radius: 100px; +padding: 14px 15px; +width: 135px; +background-color: #fff; +font-size: 24px; +text-transform: uppercase; +text-align: center; +color: #4d4d4d; +font-weight: 700; +} + +.product-price-old{ + font-weight: 700; +font-size: 16px; +line-height: 150%; +text-transform: uppercase; +text-decoration: line-through; +color: #666; +} +.product-price-percent{ + font-weight: 500; +font-size: 12px; +line-height: 133%; +color: #fa0505; +margin-top: 8px; +} + +.product-btn, .button{ + border: 2px solid #fff; + border-radius: 100px; + padding: 12px 16px; + width: 100%; + height: 60px; + display: flex; + align-items: center; + justify-content: center; + font-weight: 900; + font-size: 12px; + text-align: center; + color: #fff; + margin-top: 20px; + background-color: var(--accent-color); +} + +.button::before{ + display: none; +} + +.to-know{ + font-size: 24px; + text-transform: uppercase; + font-weight: 700; + margin-top: 20px; + text-decoration: underline; +} +/* product price */ + + +/* product gallery */ + +.product-gallery{ + width: 390px; + margin-right: 20px; + border: 2px solid #fff; + border-radius: 30px; +} + +/* product gallery */ + +.product-constructor, .product-gallery, .product-info{ + flex-grow: 1; +} + +.product-gallery{ + padding-top: 30px; + padding-bottom: 10px; + display: flex; + flex-direction: column; + justify-content: space-between; + overflow: hidden; +} + + +.product-gallery-item{ + + background-color: #fff; + border-radius: 24px; + display: flex; + justify-content: center; + align-items: center; + height: auto; + aspect-ratio: 1/1; +} +.product-gallery-slider{ + margin-left: 10px; + margin-right: 10px; + position: relative; + +} + +.product-gallery-slider .swiper-wrapper{ + +} + +.product-gallery__thumbsSlider::before{ + background: linear-gradient(270deg, rgba(193, 221, 230, 0) 0%, var(--bg-color) 100%); + height: 120%; + position: absolute; + left: -10px; + top: -10%; + width: 65px; + content: ''; + z-index: 2; + pointer-events: none; +} + +.product-gallery__thumbsSlider::after{ + background: linear-gradient(270deg, rgba(193, 221, 230, 0) 0%, var(--bg-color) 100%); + height: 120%; + position: absolute; + right: -10px; + top: -10%; + width: 65px; + content: ''; + transform: scaleX(-1); + z-index: 2; + pointer-events: none; +} +.product-gallery-item img{ + height: 100%; + width: 100%; + object-fit: contain; + padding: 10px; +} +/* product */ + +.product-gallery-arrow{ + border-radius: 100px; + background-color: var(--accent-color); + border: 1px solid #fff; + height: 44px; + width: 44px; + pointer-events: all; + background-image: url("data:image/svg+xml,%3Csvg width='8' height='14' viewBox='0 0 8 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L7 7L1 13' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' /%3E%3C/svg%3E"); + background-position: center; + background-repeat: no-repeat; +} + +.product-gallery-arrows{ + width: calc(100% - 10px); + position: absolute; + top: 50%; + left: 5px; + transform: translateY(-50%); + justify-content: space-between; + pointer-events: none; + z-index: 3; + display: flex; +} + +.product-gallery-prev{ + transform: scaleX(-1); +} + +.swiper-slide-active.product-gallery-item{ + outline: 4px solid #48c1ed; +} + + + + + .product_main .swiper-slide { + display: flex; + justify-content: center; + align-items: center; + } + + .product_main .swiper-slide img { + display: block; + width: 100%; + height: 100%; + object-fit: contain; + } + + .product_main .swiper { + width: 100%; + margin-left: auto; + margin-right: auto; + } + + .product_main .swiper-slide { + background-size: cover; + background-position: center; + } + + .product-gallery__mainSlider { + height: 80%; + width: 100%; + } + + .product-gallery__thumbsSlider { + height: 20%; + box-sizing: border-box; + padding: 10px; + height: 110px; + } + + .product-gallery__thumbsSlider .swiper-slide { + width: 90px; + height: 90px; + background-color: #fff; + border-radius: 24px; + padding: 10px 20px; + position: relative; + } + + .product-gallery__thumbsSlider .swiper-slide-thumb-active { + outline: 4px solid var(--accent-color); + } + + .product_main .swiper-slide img { + display: block; + width: calc(100% - 10px); + height: calc(100% - 10px); + object-fit: contain; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + + + + .product-desc{ + margin-top: 55px; + } + + .product-desc-text{ + font-weight: 400; +font-size: 16px; +line-height: 150%; +color: #121212; +margin-top: 20px; + } + + + .product-reviews{ + margin-top: 140px; + } + + .product-similar{ + margin-top: 140px; + } + + .main-food_reviews-slide{ + box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 0.12); + background: var(--color); + /* width: 395px; */ + border-radius: 40px !important; + } + + .product-reviews-slider { + overflow: visible !important; + margin-top: 40px; + + } + + .product-reviews{ + overflow: hidden; + padding-bottom: 60px; + margin-bottom: -60px; + } + + .product-similar-slider{ + margin-top: 40px; + } + + .main-food_products-card-slider .swiper-slide{ + align-self: center; + } + + .product-similar{ + overflow: hidden; + } + + + .product-single{ + padding-bottom: 90px; + } + + .product-similar-slider .swiper-wrapper{ + align-items: stretch; + } +.product-similar-slider .swiper-slide{ + height: auto; + display: flex; + flex-direction: column; +} + + + .product-title.--m{ + display: none; + } + +@media (max-width: 1150px) { + .product_main { + flex-direction: column; + } + .product-gallery{ + order: 0; + } + .product-info{ + order: 3; + } + .product-info, .product-gallery, .product-constructor{ + width: 100%; + margin-right: auto; + margin-left: 0; + margin-top: 20px; + } + .product-gallery__thumbsSlider{ + display: none; + } + .product-gallery__mainSlider{ + width: 100%; + height: auto; + aspect-ratio: 1 / 1.25; + max-height: 540px; + } + .breadcrumbs{ + display: none; + } + .product_main{ + margin-top: 0; + width: calc(48px + 100%); + margin-left: -24px; + border-radius: 0; + padding: 5px 20px 40px; + } + .product-title.--m{ + display: block; + font-size: 18px; + margin-top: 20px; + margin-top: 32px; + margin-bottom: 14px; + } + .product-title.--pc{ + display: none; + } + .product-constructor__block-title{ + font-size: 14px; +line-height: 143%; + } + .product-constructor__block-item-name{ + font-size: 12px; + } + .product-info{ + padding-right: 0; + } + .product-desc-text{ + font-size: 14px; + } + .product-reviews{ + margin-top: 66px; + } + .main-food_reviews-slide{ + padding-left: 20px !important; + padding-right: 20px !important; + } + .main-food_products-card{ + min-width: 0 !important; + } + .main-food_products-card-img img{ + height: 40vw; + } +} + +.product-show{ + display: flex; + flex-grow: 1; + flex-direction: column; +} +@media (max-width: 576px) { + .product_main { + margin-left: -10px; + width: calc(20px + 100%); + } + .product-show{ + flex-direction: column; + min-height: calc(100vh - 80px); + + } + .product-gallery{ + flex-grow: 1; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding-bottom: 30px; + position: relative; + } + .product-gallery-bullets{ + position: absolute; + display: flex; + bottom: 35px !important; + top: unset !important; + width: 100%; + padding-left: 20px; + padding-right: 20px; + gap: 12px; + justify-content: center; + } + .product-gallery-bullets__item{ + height: 12px; + width: 12px; + border-radius: 50%; + background-color: #fff; + } + .product-gallery-bullets__item.--active{ + background-color: var(--accent-color); + } +} +.product-block-arrows--m{ + display: none; +} +.product-similar__head, .product-reviews__head{ + display: flex; + justify-content: space-between; + align-items: center; +} + +.product-block-arrows{ + display: flex; + gap: 20px; +} + +@media (max-width: 980px) { + .product-block-arrows--m{ + display: flex; + gap: 10px; + margin-top: 20px; + padding-right: 10px; + padding-left: 10px; +} +.product-block-arrows{ + display: none; + +} +.product-reviews-slider{ + padding-right: 10px; + padding-left: 10px; +} +.product-similar{ + margin-top: 60px; +} +} + +.stock, .quantity{ + display: none; +} + + +.product-incart__wrap{ + display: flex; + align-items: center; + gap: 10px; + margin-top: 20px; + +} +.product-incart__btn{ + height: 50px; + width: 50px; + position: relative; + border-radius: 50%; + background-color: var(--accent-color); +} + +.product-incart__btn--minus::before{ + content: ''; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 16px; + height: 2px; + background-color: #fff; +} + +.product-incart__btn--plus::before{ + content: ''; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 16px; + height: 2px; + background-color: #fff; +} + +.product-incart__btn--plus::after{ + content: ''; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + height: 16px; + width: 2px; + background-color: #fff; +} + +.product-incart{ + display: flex; + align-items: center; + justify-content: space-between; + align-items: center; + padding: 23px 5px; + gap: 10px; + margin: 0 auto; + width: 159px; + height: 60px; + background: color-mix(in srgb, var(--accent-color) 25%, transparent); + border: 2px solid #FFFFFF; + border-radius: 100px; + flex: none; + order: 0; + flex-grow: 0; + font-weight: 900; + font-size: 12px; + color: #fff; +} + +.product-incart__label{ + border: 2px solid #fff; + border-radius: 100px; + padding: 12px 16px; + width: 100%; + height: 60px; + display: flex; + align-items: center; + justify-content: center; + font-weight: 900; + font-size: 12px; + text-align: center; + color: #fff; + background-color: var(--accent-color); +} + +.product-incart-btn{ + +} + + +/* Стили для загрузки корзины на single странице */ + +.product-incart__wrap.loading { + position: relative; + pointer-events: none; + opacity: 0.7; +} + +.product-incart__wrap.loading::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: var(--bg-color); + opacity: .7; + z-index: 10; +} + +.product-incart__wrap.loading::after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + width: 20px; + height: 20px; + margin: -10px 0 0 -10px; + border: 2px solid #f3f3f3; + border-top: 2px solid #3498db; + border-radius: 50%; + animation: spin 1s linear infinite; + z-index: 11; +} + +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + +/* Стили для кнопок во время загрузки */ +.product-incart__wrap.loading .product-incart__btn { + opacity: 0.5; + pointer-events: none; +} + +/* Стили для счетчика во время загрузки */ +.product-incart__wrap.loading .product-incart__count { + opacity: 0.5; +}