/* assets/css/components.css - копия без комментариев, править исходник */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: var(--radius-xs); color: inherit; font-size: var(--fs-16); font-weight: 400; line-height: 20px; text-align: center; text-decoration: none; transition: background-color var(--transition), color var(--transition), opacity var(--transition); white-space: nowrap; user-select: none; cursor: pointer; } .btn--primary { background: var(--color-primary); color: var(--color-on-dark); min-height: 48px; padding: 14px 24px; } .btn--primary:hover:not(:disabled):not(.is-disabled) { background: var(--color-primary-hover); } .btn--primary:active:not(:disabled):not(.is-disabled) { background: var(--color-primary-pressed); } .btn--primary:disabled, .btn--primary.is-disabled, .btn--primary[aria-disabled="true"] { opacity: .3; cursor: not-allowed; pointer-events: none; } .btn--primary.is-success { background: var(--color-primary); } .btn--primary.is-loading { gap: 10px; pointer-events: none; cursor: wait; }  .added_to_cart.wc-forward { display: none !important; }  .btn--secondary { background: var(--color-bg-light); color: var(--color-dark); padding: 10px 20px; font-size: var(--fs-14); font-weight: 500; } .btn--secondary:hover { background: #FCFCFC; box-shadow: 0 0 0 1px var(--color-border-hover); } .btn--secondary:active { background: var(--color-bg-hover); } .btn--secondary:disabled { opacity: 0.3; cursor: not-allowed; }  .btn--outline { background: transparent; border: 1px solid var(--color-primary); color: var(--color-primary); padding: 14px 24px; font-weight: 500; border-radius: var(--radius-sm); } .btn--outline:hover { background: var(--color-primary-bg-03); } .btn--outline:active { background: var(--color-primary-bg-08); } .btn--outline:disabled { opacity: 0.3; cursor: not-allowed; }  .btn--dark { background: var(--color-dark); color: var(--color-on-dark); padding: 10px 20px; font-size: var(--fs-13); border-radius: var(--radius-xs); } .btn--dark:hover { background: var(--color-text-muted); } .btn--dark:active { background: var(--color-gray); } .btn--dark:disabled { background: #C9CBCB; color: var(--color-on-dark); cursor: not-allowed; }  .btn-link { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-14); font-weight: 500; color: var(--color-primary); transition: opacity var(--transition); } .btn-link:hover { opacity: 0.7; } .btn-link--underlined { text-decoration: underline; text-underline-offset: 2px; }  .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--color-bg-gray);  color: var(--color-text-muted); transition: background var(--transition), color var(--transition); } .icon-btn:hover { background: var(--color-border-light); } .icon-btn:disabled { opacity: 0.3; }  .icon-btn[data-compare-toggle].is-active { color: var(--color-primary); }  [data-favorite-toggle].is-active svg, [data-favorite-toggle].is-active:hover svg { color: #C60100; } [data-favorite-toggle].is-active svg { fill: currentColor; }  [data-favorite-toggle].is-active svg path { stroke: currentColor; }  [data-favorite-toggle].is-active:hover { opacity: .85; }  .icon-btn--sm { width: 32px; height: 32px; border-radius: var(--radius-pill); background: var(--color-bg-light); } .icon-btn--sm:hover { background: var(--color-border-light); }  .badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; font-size: var(--fs-14); font-weight: 500; line-height: 28px; border-radius: var(--radius-pill); } .badge--green { background: var(--color-in-stock); color: var(--color-on-dark); } .badge--dark { background: var(--color-dark); color: var(--color-on-dark); } .badge--primary { background: var(--color-primary); color: var(--color-on-dark); } .badge--green-light { background: rgba(98, 169, 136, 0.12); color: #166534; border-radius: 999px; padding: 4px 12px 4px 10px; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500; line-height: 16px; display: inline-flex; align-items: center; gap: 6px; border: none; height: 28px; box-sizing: border-box; } .badge--green-light svg { width: 18px; height: 18px; flex-shrink: 0; color: #166534; }  .badge--stock { border-radius: 999px; padding: 4px 12px; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500; line-height: 16px; display: inline-flex; align-items: center; gap: 6px; border: none; height: 28px; box-sizing: border-box; } .badge--stock-low { background: rgba(232, 163, 23, 0.14); color: #8A5A00; } .badge--stock-soon { background: rgba(198, 1, 0, 0.10); color: var(--color-low-stock); } .badge--stock-out { background: rgba(151, 158, 159, 0.16); color: #5B6162; }  .stock-status { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-13); font-weight: 500; } .stock-status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .stock-status--in::before { background: var(--color-in-stock); } .stock-status--in { color: var(--color-in-stock); } .stock-status--low::before { background: #E8A317; } .stock-status--low { color: #E8A317; } .stock-status--soon::before { background: var(--color-low-stock); } .stock-status--soon { color: var(--color-low-stock); } .stock-status--out::before { background: var(--color-gray); } .stock-status--out { color: var(--color-gray); }  .product-card { position: relative; width: 100%; background: var(--color-bg); border: 1px solid var(--color-bg-light); border-radius: var(--radius-sm); overflow: hidden; display: flex; flex-direction: column; } .product-card__media { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--color-bg-gray); } .product-card__media img { width: 100%; height: 100%; object-fit: contain; padding: 24px; transition: opacity var(--transition); }  .product-card__media-img--lifestyle { position: absolute; inset: 0; opacity: 0; }  .product-card__actions { position: absolute; top: 16px; right: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 2; } .product-card { position: relative; background: #fff; border: 1px solid #F5F5F5; border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; }  .product-card__link-overlay { position: absolute; inset: 0; z-index: 1; border-radius: inherit; } .product-card__link-overlay:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -3px; } .product-card__badge, .product-card__media > .badge { pointer-events: none; } .product-card__link-overlay:hover ~ .product-card__body .product-card__title { color: var(--color-primary); } .product-card__media { position: relative; aspect-ratio: 1; background: #fff; display: flex; align-items: center; justify-content: center; } .product-card__media img { width: 100%; height: 100%; object-fit: contain; padding: 24px; } .product-card__actions { position: absolute; top: 16px; right: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 2; } .product-card__body { padding: 0 16px 16px; display: flex; flex-direction: column; flex: 1; } .product-card__divider { display: none; } .product-card__header, .product-card__meta { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; margin: 0 -16px; border-top: 1px solid #F3F3F3; border-bottom: 1px solid #F3F3F3; }  .product-card__art { min-width: 0; overflow: hidden; font-family: 'Inter', sans-serif; font-style: normal; font-weight: 400; font-size: 12px; line-height: 15px; color: #979E9F; margin: 0; white-space: nowrap; text-overflow: ellipsis; } .product-card__title { font-family: 'Inter', sans-serif; font-style: normal; font-weight: 400; font-size: 15px; line-height: 26px; color: #252B2B; margin: 12px 0 8px 0; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .product-card__title a { color: inherit; text-decoration: none; } .product-card__title a:hover { color: #006C66; } .stock-status { font-family: 'Inter', sans-serif; font-style: normal; font-weight: 500; font-size: 13px; line-height: 18px; margin-bottom: 8px; } .stock-status--in { color: #006C66; } .stock-status--out { color: #979E9F; } .product-card__price { font-family: 'Inter', sans-serif; font-style: normal; font-weight: 600; font-size: 20px; line-height: 26px; color: #252B2B; margin-top: auto; } .product-card__footer { position: relative; z-index: 2; display: flex; align-items: center; gap: 8px; margin-top: 16px; } .product-card__footer .qty { height: 40px; flex-shrink: 0; border-color: #F5F5F5; } .product-card__footer .qty__input { width: 56px; height: 38px; line-height: 38px; } .product-card__footer .btn, .product-card__buy { height: 40px; flex: 1; justify-content: center; } .product-card__quick-buy { position: relative; z-index: 2; height: 40px; width: 100%; margin-top: 8px; }  .product-card__notify { position: relative; z-index: 2; height: 40px; width: 100%; margin-top: 16px; }  .product-card__actions .icon-btn, .product-card__footer .btn, .product-card__footer .qty { position: relative; z-index: 2; } .product-card__divider { height: 1px; background: #F3F3F3; margin: 12px 0; }  .rating { display: inline-flex; align-items: center; gap: 4px; } .rating__stars { display: inline-flex; gap: 2px; } .rating__star { width: 13px; height: 13px;  color: #FFD100; } .rating__star--empty { color: #E3E5E6; } .rating__score {  font-family: 'Poppins', 'Inter', sans-serif; font-size: 13px; font-weight: 500; line-height: 18px; color: #555B5C; margin-left: 4px; } .rating__count { font-size: 12px; color: #979E9F; line-height: 18px; }  .input { width: 100%; padding: 12px 16px; font-size: var(--fs-14); line-height: var(--lh-20); color: var(--color-dark); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-xs); transition: border-color var(--transition); } .input::placeholder { color: var(--color-gray); } .input:focus { outline: none; border-color: var(--color-primary); } .input--error { border-color: var(--color-red); }  .field { display: flex; flex-direction: column; gap: 6px; } .field__label { font-size: var(--fs-13); font-weight: 500; color: var(--color-text-muted); } .field__hint { font-size: var(--fs-12); color: var(--color-gray); } .field__error { font-size: var(--fs-12); color: var(--color-red); }  .checkbox { display: inline-flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: var(--fs-12); line-height: var(--lh-18); color: var(--color-dark); } .checkbox__input { position: absolute; opacity: 0; } .checkbox__box { flex-shrink: 0; width: 16px; height: 16px; border: 1.5px solid var(--color-gray); border-radius: 3px; margin-top: 1px; transition: background var(--transition), border-color var(--transition); position: relative; } .checkbox__input:checked + .checkbox__box { background: var(--color-primary); border-color: var(--color-primary); } .checkbox__input:checked + .checkbox__box::after { content: ''; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border: solid var(--color-on-dark); border-width: 0 2px 2px 0; transform: rotate(45deg); } .checkbox__input:focus-visible + .checkbox__box { box-shadow: 0 0 0 3px var(--color-primary-bg-30); } .checkbox a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }  .consent-group { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: 14px; line-height: 20px; color: #555B5C; } .consent-group input { position: absolute; opacity: 0; pointer-events: none; } .consent-group__box { width: 16px; height: 16px; border: 1px solid #E0E2E7; border-radius: 2px; flex-shrink: 0; margin-top: 1px; position: relative; transition: all 0.2s; } .consent-group input:checked + .consent-group__box { background: #006C66; border-color: #006C66; } .consent-group input:checked + .consent-group__box::after { content: ''; position: absolute; left: 5px; top: 1px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }  .consent-group input:focus-visible + .consent-group__box { box-shadow: 0 0 0 3px var(--color-primary-bg-30); } .consent-group__text a { color: #006C66; text-decoration: underline; } .consent-group--error .consent-group__box { border-color: #C60100; }  .radio { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: var(--fs-14); } .radio__input { position: absolute; opacity: 0; } .radio__box { width: 18px; height: 18px; border: 1.5px solid var(--color-gray); border-radius: 50%; position: relative; transition: border-color var(--transition); } .radio__input:checked + .radio__box { border-color: var(--color-primary); } .radio__input:checked + .radio__box::after { content: ''; position: absolute; inset: 3px; background: var(--color-primary); border-radius: 50%; }  .toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; } .toggle__input { position: absolute; opacity: 0; } .toggle__track { width: 40px; height: 22px; background: var(--color-border); border-radius: var(--radius-pill); position: relative; transition: background var(--transition); } .toggle__track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: var(--color-bg); border-radius: 50%; transition: transform var(--transition); } .toggle__input:checked + .toggle__track { background: var(--color-primary); } .toggle__input:checked + .toggle__track::after { transform: translateX(18px); }  .qty { display: inline-flex; align-items: center; border: 1px solid #E3E5E6; border-radius: 4px; overflow: hidden; height: 40px; background: #fff; } .qty__btn { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border: none; background: none; cursor: pointer; padding: 0; margin: 0 4px; user-select: none; } .qty__btn:disabled { opacity: 0.3; cursor: not-allowed; } .qty__input { width: 36px; height: 38px; text-align: center; border: none; font-size: 14px; font-weight: 500; color: #252B2B; background: transparent; padding: 0; line-height: 38px; } .qty__input:focus { outline: none; }  .tabs { display: flex; gap: 8px; flex-wrap: wrap; } .tab { padding: 11px 24px; font-size: var(--fs-16); font-weight: 500; line-height: var(--lh-20); color: var(--color-gray); background: transparent; border-radius: var(--radius-pill); transition: background var(--transition), color var(--transition); } .tab:hover { color: var(--color-dark); } .tab.is-active { background: var(--color-bg-light); color: var(--color-dark); }  .select { position: relative; display: inline-block; } .select__trigger { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 14px; height: 42px; min-width: 200px; background: var(--color-bg-light); border-radius: var(--radius-xs); font-size: var(--fs-14); color: var(--color-dark); } .select__trigger:hover { background: var(--color-border-light); } .select__arrow { transition: transform var(--transition); } .select.is-open .select__arrow { transform: rotate(180deg); }  .toast-stack { position: fixed; top: var(--toast-top, 158px); right: 40px; z-index: var(--z-toast); display: flex; width: 357px; flex-direction: column; align-items: stretch; gap: 12px; pointer-events: none; } .toast { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 10px 12px; box-sizing: border-box; border-radius: 4px; background: var(--color-dark); box-shadow: 0 4px 14px rgba(0, 108, 102, .25); color: #fff; opacity: 0; pointer-events: none; transform: translateY(-16px); transition: transform .3s ease, opacity .3s ease; } .toast.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); } .toast__icon { display: grid; flex: 0 0 28px; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, .16); } .toast__icon::before { width: 20px; height: 20px; content: ''; background: url("/wp-content/themes/rokodil/assets/img/icons/toast-check.svg") center / contain no-repeat; } .toast:not(.toast--success):not(.toast--error) .toast__icon::before { display: grid; place-items: center; content: 'i'; background: none; font-size: 13px; font-weight: 600; } .toast--error .toast__icon::before { display: grid; place-items: center; content: '!'; background: none; font-size: 13px; font-weight: 600; } .toast__message { min-width: 0; flex: 1; font-size: 13px; font-weight: 500; line-height: 18px; } .toast__close { width: 12px; height: 12px; flex: 0 0 12px; padding: 0; border: 0; background: url("/wp-content/themes/rokodil/assets/img/icons/toast-close.svg") center / 12px 12px no-repeat; cursor: pointer; } .toast--success { background: var(--color-primary); } .toast--error { background: var(--color-red); box-shadow: 0 4px 14px rgba(198, 1, 0, .2); } @media (max-width: 768px) { .toast-stack { right: 16px; width: calc(100vw - 32px); } }  .search-bar { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 24px; background: var(--color-bg); border-radius: var(--radius-md); } .search-bar__input { flex: 1; border: none; font-size: var(--fs-16); background: transparent; } .search-bar__input:focus { outline: none; } .search-bar__input::placeholder { color: var(--color-gray); }  .modal { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; } .modal--open { display: flex; } .modal__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.5); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } .modal__dialog { position: relative; background: #fff; border-radius: 8px; padding: 32px; max-width: 440px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,0.15); z-index: 1; outline: none; } .modal__close { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; background: none; border: none; font-size: 24px; color: #979E9F; cursor: pointer; } .modal__close:hover { color: #252B2B; } .modal__icon { display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; border-radius: 50%; background: rgba(0,108,102,0.1); margin: 0 auto 16px; } .modal__title { font-family: var(--font-display); font-size: 24px; font-weight: 500; margin-bottom: 8px; text-align: center; } .modal__text { font-size: 14px; color: #555B5C; text-align: center; margin-bottom: 20px; } .modal__form { display: flex; flex-direction: column; gap: 12px; } .modal__input { height: 48px; padding: 0 16px; border: 1px solid #E3E5E6; border-radius: 4px; font-size: 16px; } .modal__input:focus { border-color: #006C66; outline: none; } .modal__submit { width: 100%; height: 48px; } .stock-notify__product { font-weight: 600; color: #252B2B; } .stock-notify__consent { margin-top: 4px; } @media (max-width: 768px) { .modal__dialog { padding: 24px 16px; } .modal__title { font-size: 20px; } }  .modal__dialog.callback-modal { width: 498px; max-width: calc(100% - 32px); height: 642px; max-height: calc(100vh - 32px); padding: 0; overflow-y: auto; box-sizing: border-box; transform: translateY(-9px); } .callback-modal__close { top: 24px; right: 24px; display: grid; width: 24px; height: 24px; padding: 0; place-items: center; border-radius: 50%; background: #FFFFFF; box-shadow: inset 0 -1px 1px rgba(150, 161, 172, 0.12); } .callback-modal__close svg { width: 12px; height: 12px; } .callback-modal__icon { display: grid; width: 80px; height: 80px; margin: 50px auto 0; place-items: center; border-radius: 50%; background: rgba(0, 108, 102, 0.08); } .callback-modal__icon img { display: block; width: 40px; height: 40px; } .callback-modal__title { margin: 18px 0 0; color: #252B2B; font-family: var(--font-display); font-size: 32px; font-weight: 600; line-height: 46px; text-align: center; } .callback-modal__subtitle { width: 378px; margin: 14px auto 0; color: #979E9F; font-family: var(--font-body); font-size: 14px; line-height: 20px; text-align: center; } .callback-modal__form { width: 378px; margin: 24px auto 0; } .callback-modal__field + .callback-modal__field { margin-top: 24px; } .callback-modal__field label { display: block; margin-bottom: 12px; color: #252B2B; font-family: var(--font-body); font-size: 13px; line-height: 15px; } .callback-modal__input-wrap { position: relative; width: 100%; height: 48px; } .callback-modal__input-wrap > svg { position: absolute; top: 15px; left: 15px; width: 18px; height: 18px; color: #979E9F; pointer-events: none; } .callback-modal__input-wrap input { width: 100%; height: 48px; padding: 0 16px 0 45px; border: 1px solid #E3E5E6; border-radius: 4px; outline: none; background: #FFFFFF; color: #252B2B; font-family: var(--font-body); font-size: 14px; line-height: 20px; box-sizing: border-box; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .callback-modal__input-wrap input::placeholder { color: #979E9F; } .callback-modal__input-wrap input:focus { border-color: #006C66; box-shadow: 0 0 0 1px #006C66; } .callback-modal__submit { display: flex; align-items: center; justify-content: center; width: 100%; height: 48px; margin-top: 32px; padding: 0 15px; border: 0; border-radius: 4px; background: #006C66; color: #FFFFFF; font-family: var(--font-body); font-size: 16px; line-height: 26px; cursor: pointer; transition: background-color 0.15s ease, opacity 0.15s ease; } .callback-modal__submit:hover { background: #005550; } .callback-modal__submit:disabled { opacity: 0.55; cursor: wait; } .callback-modal__consents { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; } .callback-modal__consent { position: relative; display: flex; align-items: center; gap: 12px; min-height: 17px; color: #555B5C; font-family: var(--font-body); font-size: 12px; line-height: 17px; cursor: pointer; } .callback-modal__consent input { position: absolute; width: 1px; height: 1px; opacity: 0; } .callback-modal__checkbox { position: relative; width: 16px; height: 16px; flex: 0 0 16px; border: 1px solid #E3E5E6; border-radius: 2px; background: #FFFFFF; box-sizing: border-box; } .callback-modal__consent input:checked + .callback-modal__checkbox { border-color: #006C66; background: #006C66; } .callback-modal__consent input:checked + .callback-modal__checkbox::after { content: ''; position: absolute; top: 2px; left: 5px; width: 4px; height: 8px; border: solid #FFFFFF; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); } .callback-modal__consent input:focus-visible + .callback-modal__checkbox { outline: 2px solid #006C66; outline-offset: 2px; } .callback-modal__consent a { color: inherit; text-decoration: underline; } @media (max-width: 768px) { .modal__dialog.callback-modal { height: auto; padding: 24px 16px; transform: none; } .callback-modal__close { top: 12px; right: 12px; } .callback-modal__icon { width: 64px; height: 64px; margin-top: 0; } .callback-modal__icon img { width: 32px; height: 32px; } .callback-modal__title { margin-top: 12px; font-size: 28px; line-height: 38px; } .callback-modal__subtitle, .callback-modal__form { width: 100%; } .callback-modal__subtitle { margin-top: 8px; } .callback-modal__form { margin-top: 20px; } }  .modal__dialog.quick-order { width: 532px; max-width: calc(100% - 32px); min-height: 644px; padding: 50px 60px 40px; box-sizing: border-box; } .quick-order__close { top: 24px; right: 24px; width: 24px; height: 24px; padding: 0; border-radius: 50%; background: #FFFFFF; box-shadow: inset 0 -1px 1px rgba(150, 161, 172, 0.12); } .quick-order__close svg { width: 12px; height: 12px; }  .quick-order__close-text { display: none; } .quick-order__title { margin: 0; color: #252B2B; font-family: var(--font-display); font-size: 32px; font-weight: 600; line-height: 46px; text-align: left; } .quick-order__subtitle { margin: 14px 0 0; color: #979E9F; font-family: var(--font-body); font-size: 14px; line-height: 20px; } .quick-order__product { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; height: 100px; margin-top: 24px; padding: 14px; border: 1px solid #E3E5E6; border-radius: 4px; box-sizing: border-box; } .quick-order__product-image { width: 72px; height: 72px; overflow: hidden; border-radius: 8px; background: #F9FAFB; } .quick-order__product-image img { display: block; width: 100%; height: 100%; object-fit: cover; } .quick-order__product-copy { min-width: 0; }  .quick-order__product-name { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: #242627; font-family: var(--font-body); font-size: 12px; line-height: 16px; } .quick-order__product-qty { margin-top: 5px; color: #979E9F; font-family: var(--font-body); font-size: 12px; line-height: 20px; } .quick-order__prices { align-self: center; min-width: 88px; text-align: right; } .quick-order__price { color: #252B2B; font-family: var(--font-body); font-size: 16px; font-weight: 600; line-height: 20px; white-space: nowrap; } .quick-order__old-price { margin-top: 0; color: #979E9F; font-family: var(--font-body); font-size: 12px; line-height: 20px; text-decoration: line-through; white-space: nowrap; } .quick-order__form { margin-top: 30px; } .quick-order__field + .quick-order__field { margin-top: 24px; } .quick-order__field label { display: block; margin-bottom: 12px; color: #252B2B; font-family: var(--font-body); font-size: 13px; line-height: 15px; } .quick-order__input-wrap { position: relative; width: 100%; height: 48px; } .quick-order__input-wrap > svg { position: absolute; top: 15px; left: 15px; width: 18px; height: 18px; color: #979E9F; pointer-events: none; } .quick-order__input-wrap input { width: 100%; height: 48px; padding: 0 16px 0 45px; border: 1px solid #E3E5E6; border-radius: 4px; outline: none; background: #FFFFFF; color: #252B2B; font-family: var(--font-body); font-size: 14px; line-height: 20px; box-sizing: border-box; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .quick-order__input-wrap input::placeholder { color: #979E9F; } .quick-order__input-wrap input:focus { border-color: #006C66; box-shadow: 0 0 0 1px #006C66; } .quick-order__submit { display: flex; align-items: center; justify-content: center; width: 100%; height: 48px; margin-top: 32px; padding: 0 15px; border: 0; border-radius: 4px; background: #006C66; color: #FFFFFF; font-family: var(--font-body); font-size: 16px; font-weight: 400; cursor: pointer; transition: background-color 0.15s ease, opacity 0.15s ease; } .quick-order__submit:hover { background: #005550; } .quick-order__submit:disabled { opacity: 0.55; cursor: wait; } .quick-order__consents { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; } .quick-order__consent { position: relative; display: flex; align-items: center; gap: 12px; min-height: 17px; color: #555B5C; font-family: var(--font-body); font-size: 12px; line-height: 17px; cursor: pointer; } .quick-order__consent input { position: absolute; width: 1px; height: 1px; opacity: 0; } .quick-order__checkbox { position: relative; width: 16px; height: 16px; flex: 0 0 16px; border: 1px solid #E3E5E6; border-radius: 2px; background: #FFFFFF; box-sizing: border-box; } .quick-order__consent input:checked + .quick-order__checkbox { border-color: #006C66; background: #006C66; } .quick-order__consent input:checked + .quick-order__checkbox::after { content: ''; position: absolute; top: 2px; left: 5px; width: 4px; height: 8px; border: solid #FFFFFF; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); } .quick-order__consent input:focus-visible + .quick-order__checkbox { outline: 2px solid #006C66; outline-offset: 2px; } .quick-order__consent a { color: inherit; text-decoration: underline; }  .modal__dialog.order-accepted { width: 470px; max-width: calc(100% - 32px); height: 542px; padding: 0; overflow: hidden; box-sizing: border-box; } .order-accepted__close { top: 24px; right: 24px; width: 32px; height: 32px; padding: 0; border-radius: 50%; background: #FFFFFF; box-shadow: inset 0 -1px 1px rgba(150, 161, 172, 0.12); } .order-accepted__close svg { width: 16px; height: 16px; } .order-accepted__image { position: absolute; top: 40px; left: 50%; display: block; width: 234px; height: 234px; object-fit: cover; transform: translateX(-50%); } .order-accepted__title { position: absolute; top: 288px; left: 40px; width: 390px; margin: 0; color: #252B2B; font-family: var(--font-display); font-size: 40px; font-weight: 500; line-height: 46px; text-align: center; } .order-accepted__subtitle { position: absolute; top: 358px; left: 40px; width: 390px; margin: 0; color: #555B5C; font-family: var(--font-body); font-size: 16px; line-height: 26px; text-align: center; } .order-accepted__redirect { position: absolute; top: 458px; left: 40px; width: 390px; margin: 0; color: #979E9F; font-family: var(--font-body); font-size: 14px; line-height: 20px; text-align: center; } .order-accepted__progress { position: absolute; top: 510px; left: 40px; width: 390px; height: 2px; overflow: hidden; background: #E3E5E6; } .order-accepted__progress span { display: block; width: 100%; height: 100%; background: #006C66; transform: scaleX(0); transform-origin: left center; } #modal-order-accepted.modal--open .order-accepted__progress span { animation: order-accepted-progress 3s linear forwards; } @keyframes order-accepted-progress { to { transform: scaleX(1); } } @media (max-width: 600px) { .modal { padding: 16px; box-sizing: border-box; }  #modal-buy-click { padding: 0; align-items: flex-end; } .modal__dialog.quick-order { width: 100%; max-width: none; min-height: 0; max-height: 100dvh; padding: 25px 16px calc(32px + env(safe-area-inset-bottom, 0px)); border-radius: 16px 16px 0 0; overflow-y: auto; }  .quick-order__close { top: 25px; right: 16px; width: auto; height: 20px; border-radius: 0; background: none; box-shadow: none; color: #006C66; font: 500 14px/20px var(--font-body); } .quick-order__close svg { display: none; } .quick-order__close-text { display: inline; }   .quick-order__title { margin-top: 45px; font-size: 26px; font-weight: 500; line-height: 34px; } .quick-order__subtitle { margin-top: 12px; }  .quick-order__product { grid-template-columns: 54px minmax(0, 1fr) auto; gap: 10px; height: 78px; min-height: 0; margin-top: 24px; padding: 12px 16px 12px 8px; } .quick-order__product-image { width: 54px; height: 54px; border-radius: 7px; } .quick-order__product-qty { margin-top: 7px; font-size: 12px; line-height: 14px; } .quick-order__prices { grid-column: 3; min-width: 0; text-align: right; }  .quick-order__price { font-size: 14px; } .quick-order__form { margin-top: 24px; } .quick-order__field + .quick-order__field { margin-top: 24px; } .quick-order__submit { margin-top: 32px; }  .quick-order__consents { margin-top: 16px; } .modal__dialog.order-accepted { width: 100%; max-width: 470px; } .order-accepted__title, .order-accepted__subtitle, .order-accepted__redirect, .order-accepted__progress { left: 20px; width: calc(100% - 40px); } } @media (max-width: 374px) { .modal__dialog.order-accepted { height: 500px; } .order-accepted__image { top: 36px; width: 200px; height: 200px; } .order-accepted__title { top: 250px; left: 20px; width: calc(100% - 40px); font-size: 34px; } .order-accepted__subtitle { top: 318px; left: 20px; width: calc(100% - 40px); } .order-accepted__redirect { top: 414px; left: 20px; width: calc(100% - 40px); } .order-accepted__progress { top: 466px; left: 20px; width: calc(100% - 40px); } }  .cart-items { background: #fff; } .cart-item { display: grid; grid-template-columns: 96px 1fr auto; gap: 24px; padding: 24px 0; border-bottom: 1px solid #F3F3F3; align-items: center; } .cart-item__img { width: 96px; height: 96px; background: #F9F9F9; border-radius: 4px; overflow: hidden; } .cart-item__img img { width: 100%; height: 100%; object-fit: contain; padding: 12px; } .cart-item__info { display: flex; flex-direction: column; gap: 4px; } .cart-item__title { font-size: 16px; font-weight: 500; } .cart-item__art { font-size: 13px; color: #979E9F; } .cart-item__controls { display: flex; align-items: center; gap: 16px; margin-top: 12px; } .cart-item__price { font-size: 18px; font-weight: 600; text-align: right; } .cart-item__remove { color: #979E9F; display: flex; align-items: center; gap: 6px; font-size: 13px; } .cart-item__remove:hover { color: #C60100; }  .crosssell { background: #FFFFFF; border-radius: 8px; padding: 40px; box-sizing: border-box; } .crosssell__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 32px; } .crosssell__title { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 22px; line-height: 28px; color: #242627; margin: 0; } .crosssell__nav { display: flex; align-items: center; gap: 20px; } .crosssell__arrow { width: 24px; height: 24px; padding: 0; border: none; background: none; color: #252B2B; cursor: pointer; display: flex; align-items: center; justify-content: center; } .crosssell__arrow--prev { transform: scaleX(-1); }  .crosssell__arrow:disabled { opacity: .3; cursor: default; } .crosssell__viewport { position: relative; overflow: hidden; } .crosssell__track { display: flex; gap: 14px; transition: transform .3s ease; }  .crosssell__dots { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 32px; } .crosssell__dot { width: 6px; height: 6px; border-radius: 3px; background: #E3E5E6; border: none; cursor: pointer; padding: 0; transition: width .2s ease, background .2s ease; } .crosssell__dot.is-active { width: 28px; background: #9B9B9B; }  .crosssell-card { position: relative; display: flex; flex-direction: column; width: 273px; min-width: 273px; flex-shrink: 0; padding: 14px; background: #FFFFFF; box-sizing: border-box; } .crosssell-card__media { position: relative; } .crosssell-card__link { display: block; } .crosssell-card__media img { display: block; width: 201px; height: 201px; margin: 0 auto; object-fit: contain; } .crosssell-card__actions { position: absolute; top: 0; right: 0; display: flex; flex-direction: column; gap: 10px; }   .crosssell-card__cart { display: none; } .crosssell-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; box-sizing: content-box; height: 18px; margin-top: 14px; padding: 9px 0 12px; border-top: 1px solid #F3F3F3; border-bottom: 1px solid #F3F3F3; }  .crosssell-card__sku { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: 'Inter', sans-serif; font-size: 12px; line-height: 15px; color: #979E9F; }  .crosssell-card__meta .rating { gap: 9px; } .crosssell-card__meta .rating__star { width: 13px; height: 13px; } .crosssell-card__meta .rating__score { margin-left: 0; font-size: 13px; line-height: 18px; } .crosssell-card__title {  margin: 19px 0 0; height: 52px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-family: 'Inter', sans-serif; font-weight: 400; font-size: 15px; line-height: 26px; color: #242627; } .crosssell-card__title a { color: inherit; text-decoration: none; } .crosssell-card__title a:hover { color: #006C66; } .crosssell-card__price { margin-top: 24px; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 20px; line-height: 26px; color: #252B2B; } .crosssell-card__add { margin-top: 30px; height: 40px; display: flex; align-items: center; justify-content: center; gap: 8px; border: none; border-radius: 4px; background: #006C66; color: #FFFFFF; font-family: 'Inter', sans-serif; font-weight: 500; font-size: 14px; line-height: 18px; text-decoration: none; cursor: pointer; transition: opacity .15s ease; } .crosssell-card__add:hover { opacity: .92; color: #FFFFFF; } .crosssell-card__add.loading { opacity: .6; pointer-events: none; } .crosssell-card__add.added::after { content: none; } .crosssell-card__add--notify { background: #F5F5F5; color: #252B2B; } @media (max-width: 768px) { .crosssell { padding: 24px 16px; } .crosssell__title { font-size: 18px; line-height: 24px; } .crosssell__head { margin-bottom: 20px; } .crosssell__dots { margin-top: 24px; }  .crosssell__nav { display: none; } .crosssell-card { width: 220px; min-width: 220px; } .crosssell-card__media img { width: 100%; height: 160px; } }   body.modal-open { overflow: hidden; } .review-modal[hidden] { display: none; }  .review-modal { position: fixed; z-index: 10000; inset: 0; } .review-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); backdrop-filter: blur(5px); } .review-modal__drawer { position: absolute; top: 0; right: 0; width: 801px; height: 100dvh; overflow-y: auto; color: #252B2B; background: #fff; box-shadow: 0 4px 6px -4px rgba(0,0,0,.1), 0 10px 15px -3px rgba(0,0,0,.1); } .review-modal__close { position: absolute; z-index: 2; top: 24px; left: 508px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: #fff; cursor: pointer; } .review-modal__close img { width: 16px; height: 16px; } .review-modal__header { position: absolute; top: 40px; left: 40px; width: 500px; } .review-modal__header h2 { margin: 0; font-family: var(--font-body); font-size: 22px; font-weight: 700; line-height: 28px; } .review-modal__header p { width: 418px; margin: 14px 0 0; color: #555B5C; font-family: var(--font-body); font-size: 14px; line-height: 20px; }  .review-modal__auth { padding: 154px 40px 40px; } .review-modal__auth-title { margin: 0; color: #252B2B; font-family: var(--font-body); font-size: 18px; font-weight: 600; line-height: 26px; } .review-modal__auth-text { margin: 12px 0 0; max-width: 418px; color: #555B5C; font-family: var(--font-body); font-size: 14px; line-height: 20px; } .review-modal__auth-actions { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; } .review-modal__auth-actions .btn { min-width: 180px; height: 48px; } .review-form { position: relative; width: 100%; height: 1080px; } .review-form__product { position: absolute; top: 154px; left: 40px; width: 500px; height: 128px; box-sizing: border-box; border: 1px solid #E3E5E6; border-radius: 4px; cursor: pointer; }  .review-form__product--fixed { cursor: default; } .review-form__product-image { position: absolute; top: 19px; left: 19px; width: 88px; height: 88px; overflow: hidden; border-radius: 8px; } .review-form__product-image img { width: 100%; height: 100%; object-fit: contain; } .review-form__product-copy { position: absolute; top: 19px; left: 123px; display: flex; flex-direction: column; width: 307px; } .review-form__product-copy small, .review-form__product-copy em { color: #979E9F; font-family: var(--font-body); font-size: 12px; font-style: normal; font-weight: 400; line-height: 16px; }  .review-form__product-copy small { font-weight: 500; } .review-form__product-copy strong { display: -webkit-box; height: 36px; margin-top: 9px; overflow: hidden; color: #252B2B; font-family: var(--font-body); font-size: 13px; font-weight: 500; line-height: 18px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .review-form__product-copy em { margin-top: 11px; } .review-form__product select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .review-form__rating { position: absolute; top: 312px; left: 40px; width: 500px; height: 66px; padding: 0; border: 0; margin: 0; } .review-form__rating legend, .review-form__content > span, .review-form__media > p, .review-form__author > span:first-child { color: #252B2B; font-family: var(--font-body); font-size: 14px; font-weight: 600; line-height: 20px; } .review-form__rating-row { display: flex; align-items: center; gap: 19px; margin-top: 14px; } .review-form__stars { display: flex; gap: 6px; width: 185px; height: 32px; } .review-form__stars label { width: 32px; height: 32px; cursor: pointer; } .review-form__stars input { position: absolute; width: 1px; height: 1px; opacity: 0; }  .review-form__stars svg { display: block; width: 32px; height: 32px; color: #E3E5E6; transition: color .15s ease; } .review-form__stars label.is-active svg { color: #FFD100; } .review-form__rating-row > span { color: #979E9F; font-family: var(--font-body); font-size: 14px; line-height: 20px; } .review-form__content { position: absolute; top: 408px; left: 40px; display: block; width: 500px; height: 220px; }  .review-form__content textarea { position: absolute; top: 34px; left: 0; width: 500px; height: 186px; padding: 20px; box-sizing: border-box; border: 1px solid #E3E5E6; border-radius: 4px; outline: none; color: #252B2B; background: #fff; font: 400 14px/20px var(--font-sans); } .review-form__content textarea::placeholder { color: #979E9F; opacity: 1; } .review-form__content small { position: absolute; right: 10px; bottom: 10px; color: #979E9F; font: 400 12px/12px var(--font-sans); } .review-form__content small b { font-weight: 400; } .review-form__media { position: absolute; top: 658px; left: 40px; width: 500px; height: 126px; } .review-form__media > p { margin: 0; } .review-form__media > p span { color: #979E9F; font-weight: 400; } .review-form__media-grid { display: grid; grid-template-columns: repeat(5, 92px); gap: 10px; margin-top: 14px; } .review-form__media-slot { position: relative; width: 92px; height: 92px; } .review-form__media-open { position: relative; display: grid; place-items: center; width: 100%; height: 100%; padding: 0; overflow: hidden; border: 0; border-radius: 4px; background: #F9F9F9; cursor: pointer; } .review-form__media-open > img { position: relative; z-index: 1; width: 22px; height: 19px; } .review-form__media-open > span { position: absolute; inset: 0; background-position: center; background-size: cover; } .review-form__media-open.has-preview > img { display: none; }  .review-form__media-error { margin: 10px 0 0; color: #C60100; font-family: var(--font-body); font-size: 14px; line-height: 20px; } .review-form__media-error[hidden] { display: none; } .review-form__media-error::before { content: '! '; font-weight: 700; }  .review-form__media-remove { position: absolute; top: 6px; right: 6px; z-index: 2; display: grid; place-items: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: #FFFFFF; box-shadow: inset 0 -0.53px 0.53px rgba(150, 161, 172, .12), 0 1px 3px rgba(0, 0, 0, .14); color: #252B2B; cursor: pointer; } .review-form__media-remove[hidden] { display: none; } .review-form__media-remove svg { width: 8.5px; height: 8.5px; fill: none; }  .review-form__media-duration { position: absolute; right: 6px; bottom: 6px; z-index: 2; display: none; min-width: 36px; padding: 2px 5.5px; box-sizing: border-box; border-radius: 3px; background: rgba(35, 35, 37, .5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); color: #FFFFFF; font-family: var(--font-body); font-size: 11px; line-height: 14px; text-align: center; } .review-form__media-slot.has-duration .review-form__media-duration { display: block; } .review-form__author { position: absolute; top: 814px; left: 40px; width: 500px; height: 80px; } .review-form__input { position: absolute; top: 32px; left: 0; display: flex; align-items: center; width: 500px; height: 48px; box-sizing: border-box; border: 1px solid #E3E5E6; border-radius: 4px; } .review-form__input img { width: 16px; height: 16px; margin-left: 15px; } .review-form__input input { width: calc(100% - 43px); height: 46px; padding: 0 12px; border: 0; outline: none; color: #252B2B; font: 400 12px/16px var(--font-sans); } .review-form__input input::placeholder { color: #979E9F; } .review-form__actions { position: absolute; top: 918px; left: 40px; display: flex; flex-direction: column; gap: 12px; width: 500px; height: 162px; padding-top: 30px; box-sizing: border-box; background: #fff; } .review-form__actions button { width: 500px; height: 40px; padding: 0; border: 0; border-radius: 4px; color: #fff; background: #006C66; font: 400 14px/20px var(--font-sans); cursor: pointer; } .review-form__actions button:last-child { color: #252B2B; background: #F5F5F5; } .review-form__actions button:disabled { opacity: .5; cursor: not-allowed; }  @media (max-width: 768px) { .review-modal { z-index: 1050; top: 50px; } .review-modal__drawer { width: 100%; height: 100%; } .review-modal__close { display: none; } .review-modal__header { position: relative; top: auto; left: auto; width: auto; padding: 20px 16px 0; } .review-modal__auth { padding: 32px 16px; } .review-modal__auth-actions .btn { min-width: 0; flex: 1 1 140px; } .review-modal__header h2 { font-size: 18px; line-height: 26px; } .review-modal__header p { width: auto; margin-top: 16px; }  .review-form { display: flex; width: auto; height: auto; padding: 32px 16px calc(16px + env(safe-area-inset-bottom, 0px)); flex-direction: column; gap: 24px; } .review-form__product, .review-form__rating, .review-form__content, .review-form__media, .review-form__author, .review-form__actions { position: relative; top: auto; left: auto; width: 100%; flex: 0 0 auto; } .review-form__product { height: 100px; } .review-form__product-image { top: 12px; left: 8px; width: 54px; height: 54px; } .review-form__product-copy { top: 12px; right: 16px; left: 72px; width: auto; } .review-form__product-copy small, .review-form__product-copy em { font-size: 10px; line-height: 12px; } .review-form__product-copy strong { height: 32px; margin-top: 10px; font-size: 12px; line-height: 16px; } .review-form__product-copy em { margin-top: 10px; } .review-form__content { height: 220px; } .review-form__content textarea { width: 100%; padding: 14px; } .review-form__content small { right: 8px; bottom: 8px; font-size: 10px; line-height: 12px; }  .review-form__media { height: auto; } .review-form__media-grid { grid-template-columns: repeat(4, 79px); gap: 9px; } .review-form__media-slot { width: 79px; height: 79px; } .review-form__media-slot:nth-child(5) { display: none; } .review-form__media-grid:has(.review-form__media-slot:nth-child(4) .has-preview) .review-form__media-slot:nth-child(5) { display: block; } .review-form__author { height: 80px; } .review-form__input, .review-form__actions, .review-form__actions button { width: 100%; } .review-form__actions { height: auto; margin-top: 8px; padding-top: 0; gap: 8px; } .review-form__actions button { font-size: 13px; line-height: 16px; } }  .city-select { position: relative; } .city-select__list { position: absolute; z-index: 2; top: calc(100% + 4px); right: 0; left: 0; max-height: 264px; margin: 0; padding: 4px; overflow-y: auto; list-style: none; border: 1px solid #E3E5E6; border-radius: 4px; background: #FFFFFF; box-shadow: 0 8px 24px rgba(37, 43, 43, 0.12); } .city-select__option { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 12px; border-radius: 4px; color: #252B2B; font-family: 'Inter', sans-serif; font-size: 14px; line-height: 20px; cursor: pointer; } .city-select__option:hover, .city-select__option.is-active { background: #F5F5F5; } .city-select__option[aria-selected="true"] { color: #006C66; font-weight: 500; }  .city-select__name { flex: 0 0 auto; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }  .city-select__hint { flex: 0 1 auto; min-width: 0; overflow: hidden; color: #979E9F; font-size: 12px; line-height: 16px; text-align: right; text-overflow: ellipsis; white-space: nowrap; } .city-select__empty { padding: 9px 12px; color: #979E9F; font-family: 'Inter', sans-serif; font-size: 14px; line-height: 20px; } .city-select.is-open .city-select__chevron { transform: translateY(-50%) rotate(180deg); }   html.address-drawer-open, body.address-drawer-open { overflow: hidden; } .address-drawer-overlay { position: fixed; inset: 0; z-index: 10000; background: rgba(0, 0, 0, 0.5); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease; } .address-drawer-overlay.is-active { opacity: 1; visibility: visible; } .address-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 10001; width: 564px; max-width: 100%; height: 100dvh; overflow-y: auto; background: #FFFFFF; box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12); transform: translateX(100%); visibility: hidden; pointer-events: none; transition: transform 0.25s ease, visibility 0.25s ease; -ms-overflow-style: none; scrollbar-width: none; } .address-drawer::-webkit-scrollbar { display: none; } .address-drawer.is-open { transform: translateX(0); visibility: visible; pointer-events: auto; } .address-drawer__inner { position: relative; min-height: 100%; padding: 40px 32px 32px; box-sizing: border-box; } .address-drawer__close { position: absolute; top: 40px; right: 32px; display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; padding: 0; border: 0; border-radius: 2px; background: transparent; color: #6A7282; cursor: pointer; transition: color 0.15s ease; } .address-drawer__close:hover { color: #252B2B; } .address-drawer__close:focus-visible { outline: 2px solid #006C66; outline-offset: 4px; } .address-drawer__close svg { display: block; width: 16px; height: 16px; } .address-drawer__title { margin: 0 0 24px; padding-right: 32px; color: #252B2B; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 22px; line-height: 28px; } .address-drawer__form { display: flex; flex-direction: column; gap: 20px; } .address-drawer__field { display: flex; flex-direction: column; gap: 0; } .address-drawer__field--sm { min-width: 0; } .address-drawer__label { color: #252B2B; font-family: 'Inter', sans-serif; font-weight: 400; font-size: 12px; line-height: 20px; } .address-drawer__input-box { position: relative; width: 100%; } .address-drawer__input { width: 100%; height: 48px; padding: 0 16px; border: 1px solid #E3E5E6; border-radius: 4px; outline: 0; background: #FFFFFF; color: #252B2B; font-family: 'Inter', sans-serif; font-size: 14px; line-height: 20px; box-sizing: border-box; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .address-drawer__input--icon { padding-left: 45px; } .address-drawer__input--city { padding-right: 40px; } .address-drawer__input::placeholder { color: #979E9F; } .address-drawer__input:focus { border-color: #006C66; box-shadow: 0 0 0 1px #006C66; }  .address-drawer__field.has-error .address-drawer__input { border-color: #D15E5D; background: rgba(198, 1, 0, 0.04); } .address-drawer__field.has-error .address-drawer__input:focus { border-color: #D15E5D; box-shadow: 0 0 0 1px #D15E5D; } .address-drawer__error { display: flex; align-items: flex-start; gap: 8px; margin-top: 6px; color: #C60100; font-family: 'Inter', sans-serif; font-size: 13px; line-height: 18px; } .address-drawer__error::before { content: ''; flex: 0 0 16px; width: 16px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23C60100' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='7' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E") no-repeat center / 16px 16px; } .address-drawer__icon { position: absolute; z-index: 1; width: 18px; height: 18px; color: #979E9F; pointer-events: none; } .address-drawer__icon:not(.address-drawer__icon--right) { top: 50%; left: 15px; transform: translateY(-50%); } .address-drawer__icon--right { top: 50%; right: 16px; width: 16px; height: 16px; transform: translateY(-50%); } .address-drawer__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }  .address-drawer__toggle { display: flex; flex-direction: column; gap: 4px; padding: 16px; border: 1px solid #E5E7EB; border-radius: 4px; background: #F9FAFB; } .address-drawer__toggle-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .address-drawer__toggle-label { color: #252B2B; font-family: 'Inter', sans-serif; font-weight: 500; font-size: 14px; line-height: 20px; } .address-drawer__toggle-caption { max-width: 408px; color: #6A7282; font-family: 'Inter', sans-serif; font-size: 13px; line-height: 18px; } .toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex: 0 0 44px; } .toggle-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; } .toggle-switch__slider { position: absolute; inset: 0; border-radius: 24px; background: #E5E7EB; cursor: pointer; transition: background-color 0.2s ease; } .toggle-switch__slider::before { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #FFFFFF; transition: transform 0.2s ease; } .toggle-switch input:checked + .toggle-switch__slider { background: #006C66; } .toggle-switch input:checked + .toggle-switch__slider::before { transform: translateX(20px); } .toggle-switch input:focus-visible + .toggle-switch__slider { outline: 2px solid #006C66; outline-offset: 2px; }  .address-drawer__footer { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; padding-top: 24px; border-top: 1px solid #E5E7EB; } .address-drawer__btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 48px; border-radius: 4px; font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 400; cursor: pointer; box-sizing: border-box; transition: background-color 0.15s ease, opacity 0.15s ease; } .address-drawer__btn--save { border: 0; background: #006C66; color: #FFFFFF; } .address-drawer__btn--save:hover { background: #005550; } .address-drawer__btn--save:disabled { opacity: 0.5; cursor: wait; } .address-drawer__btn--cancel { border: 1px solid #E5E7EB; background: #FFFFFF; color: #6A7282; } .address-drawer__btn--cancel:hover { background: #F9FAFB; }  @media (max-width: 768px) { .address-drawer { width: 100%; max-width: 100%; } .address-drawer__inner { padding: 24px 20px; } .address-drawer__close { top: 30px; right: 20px; } .address-drawer__title { font-size: 20px; line-height: 28px; } } @media (max-width: 360px) { .address-drawer__row { grid-template-columns: 1fr; } }  .crosssell__dot, .compare-related__dot, .flagman__dot, .promo-banner__dot, .best-sellers__dot, .reviews__dot, .journal__dot, .product-video__dot, .about-gallery__dot, .support-carousel-dots button { position: relative; } .crosssell__dot::after, .compare-related__dot::after, .flagman__dot::after, .promo-banner__dot::after, .best-sellers__dot::after, .reviews__dot::after, .journal__dot::after, .product-video__dot::after, .about-gallery__dot::after, .support-carousel-dots button::after { content: ''; position: absolute; top: -8px; right: -3px; bottom: -8px; left: -3px; }  .flagman__arrow, .promo-banner__arrow, .best-sellers__arrow, .journal__arrow, .crosssell__arrow, .compare-related__arrow, .about-gallery__arrow, .product-video__arrow { position: relative; z-index: 0; } .flagman__arrow::before, .promo-banner__arrow::before, .best-sellers__arrow::before, .journal__arrow::before, .crosssell__arrow::before, .compare-related__arrow::before, .about-gallery__arrow::before, .product-video__arrow::before { content: ''; position: absolute; inset: -10px; z-index: -1; border-radius: 999px; background: transparent; transition: background-color .2s ease; } .flagman__arrow:hover:not(:disabled)::before, .promo-banner__arrow:hover:not(:disabled)::before, .best-sellers__arrow:hover:not(:disabled)::before, .journal__arrow:hover:not(:disabled)::before, .crosssell__arrow:hover:not(:disabled)::before, .compare-related__arrow:hover:not(:disabled)::before, .about-gallery__arrow:hover:not(:disabled)::before, .product-video__arrow:hover:not(:disabled)::before { background: #F5F5F5; } .flagman__arrow:active:not(:disabled)::before, .promo-banner__arrow:active:not(:disabled)::before, .best-sellers__arrow:active:not(:disabled)::before, .journal__arrow:active:not(:disabled)::before, .crosssell__arrow:active:not(:disabled)::before, .compare-related__arrow:active:not(:disabled)::before, .about-gallery__arrow:active:not(:disabled)::before, .product-video__arrow:active:not(:disabled)::before { background: #EDEDED; }  .flagman__arrow:disabled, .promo-banner__arrow:disabled, .best-sellers__arrow:disabled, .journal__arrow:disabled, .crosssell__arrow:disabled, .compare-related__arrow:disabled, .about-gallery__arrow:disabled, .product-video__arrow:disabled { opacity: .3; cursor: default; }   :is(.catalog-content, .wishlist) :is(.product-card, .fav-card) { touch-action: pan-y; } .product-card__slides { position: absolute; inset: 0; display: flex;  align-items: inherit; justify-content: flex-start; transition: transform .35s ease; } .product-card__slide { flex: 0 0 100%;  height: 100%; display: flex; align-items: inherit;  justify-content: center; min-width: 0; }  .product-card__dots { position: absolute; left: 50%; bottom: 10px; z-index: 2; display: flex; align-items: center; gap: 4px; transform: translateX(-50%); } .product-card__dot { width: 4px; height: 4px; padding: 0; border: 0; border-radius: 999px; background: #E3E5E6; cursor: pointer; transition: width .2s ease, background-color .2s ease; } .product-card__dot.is-active { width: 14px; background: #979E9F; }  .product-card__dot { position: relative; } .product-card__dot::after { content: ''; position: absolute; top: -8px; right: -2px; bottom: -8px; left: -2px; } @media (prefers-reduced-motion: reduce) { .product-card__slides { transition: none; } }  @media (max-width: 768px) { .product-card__media { overflow: visible; } .product-card__dots { bottom: -9px; gap: 3px; } .product-card__dot { width: 3px; height: 3px; } .product-card__dot.is-active { width: 14px; } }  .review-media { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: #000; cursor: pointer; overflow: hidden; } .review-media video { display: block; width: 100%; height: 100%; object-fit: cover; } .review-media__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(0, 0, 0, .6); color: #fff; pointer-events: none; transition: background-color .2s ease; } .review-media__play svg { width: 12px; height: 12px; } .review-media:hover .review-media__play { background: rgba(0, 0, 0, .78); }  .review-media.is-playing { cursor: default; } .review-media.is-playing .review-media__play { display: none; }