/* add to to disable scrolling when modal windows are displayed */ .mb-body-fixed { overflow: hidden; overscroll-behavior: none; touch-action: none; padding-right: 17px; } #count_compare{ position: absolute; top: 50%; left: 50%; color: #fff; transform: translate(-50%, -50%); font-weight: 700; font-size: 12px; } /* class for overlay for modal windows */ .mb-overlay { position: fixed; top: 0; left: 0; display: none; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); z-index: 2; transition: opacity 0.4s; } /* classes for sidebar */ .mb-sidebar { position: fixed; min-width: 342px; top: 0; right: 0; height: 100%; background: #FFFFFF; transform: translateX(200%); transition: transform .4s ease-in-out; z-index: 100000; overflow-y: auto; } @media (max-width: 767px) { .mb-sidebar { width: 100%; transform: translateY(200%); } .add-review__form { width: 100%; flex-direction: column; } .add-review__text { min-width: 125px; } .add-review__rating__text { margin-bottom: 15px; } .add-review__rating { flex-direction: column; align-items: flex-start; } .add-review__form-file-container { width: 100%; margin-top: 20px; } .add-review__form-fields { flex-direction: column; } .add-review__form-file-container .add-review__input-label { padding: 35px 10px; } .add-review__form-file-text-container { display: flex; flex-direction: column; align-items: flex-start; margin-left: 15px; gap: 0; } .add-review__form-file-text { margin-top: 0; font-weight: 500; } .add-review__input-label { flex-direction: row; } } .mb-sidebar__header { display: flex; justify-content: space-between; align-items: center; padding: 40px; } @media (max-width: 767px) { .mb-sidebar__header { padding: 25px 15px; } } .mb-sidebar__title { font-size: 25px; font-weight: 700; display: flex; flex-wrap: wrap; } .mb-sidebar__close { display: block; width: 38px; height: 38px; margin-left: 15px; border: none; background-color: transparent; cursor: pointer; background-image: url("/local/templates/sotbit_origami/assets/img/svg/mebelson/sidebar-close.svg"); transition: transform 0.4s; } .mb-sidebar__close:hover { transform: rotateZ(360deg); } .mb-sidebar__body { position: relative; display: flex; justify-content: center; padding: 0 40px; color: #989898; font-size: 18px; overflow-y: auto; cursor: auto; } @media (max-width: 767px) { .mb-sidebar__body { padding: 0 15px; } } /* classes for popup */ .mb-popup { position: fixed; top: 50%; left: 50%; box-shadow: 0 4px 40px rgba(0, 0, 0, 0.24); transition: opacity 0.5s; z-index: 101; transform: translate(-50%, -50%); background-color: #fff; border-radius: 5px; box-sizing: border-box; margin: 0 auto; padding: 30px 30px 40px; } @media (max-width: 767px) { .mb-popup { width: 100%; padding: 15px 15px 30px; top: unset; bottom: 0; border-radius: unset; transform: translate(-50%, 0); } } .mb-popup__header { align-items: center; display: flex; justify-content: space-between; margin-bottom: 30px; } .add-reviews .success { font-size: 14px; line-height: 20px; margin-bottom: 15px; margin-top: 30px; width: 360px; } .add-reviews .yandexImg { margin-bottom: 25px; } .mb-popup__title { padding: 0; font-weight: 600; font-size: 22px; line-height: 140%; } .mb-popup__close { width: 25px; height: 25px; border: none; padding: 0; transition: transform 0.3s ease-out; background-color: transparent; background-image: url("/local/templates/sotbit_origami/assets/img/svg/mebelson/popup-close.svg"); } .mb-popup__close:hover { transform: rotateZ(360deg); } /* fix PerfectScrollbar rail color */ .ps__thumb-y { background-color: #c4c4c4 !important; } .ps .ps__thumb-x:hover, .ps .ps__thumb-y:hover, .ps .ps__thumb-x:focus, .ps .ps__thumb-y:focus { background-color: #989898 !important; } /* fix swiper prev/next arrows z-index conflicting with sidebars */ .swiper-button-next, .swiper-button-prev { z-index: 9 !important; } .swiper-horizontal>.swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal { z-index: 9 !important; } /* buttons styles */ /* default button class (brown) */ .mb-btn { position: relative; display: inline-flex; justify-content: center; align-items: center; padding: 0 20px; background-color: #b1aa8d; border: 1px solid #b1aa8d; outline: none; border-radius: 4px; transition: all 0.2s; color: #FFFFFF; font-size: 16px; text-align: center; line-height: 1.5; font-weight: 600; overflow: hidden; cursor: pointer; } .mb-btn:hover { color: #FFFFFF; background-color: #88836d; } .mb-btn:active, .mb-btn:focus { color: #FFFFFF; border-color: #000000; } /* light button */ .mb-btn--light { background-color: #FFFFFF; border-color: #c4c4c4; color: #000000; } .mb-btn--light:hover { color: #000000; background-color: #f5f3f1; } .mb-btn--light:active, .mb-btn--light:focus { color: #000000; background-color: #FFFFFF; border-color: #000000; } /* dark button */ .mb-btn--dark { color: #FFFFFF; background-color: #404040; border-color: #404040; } .mb-btn--dark:hover { color: #FFFFFF; background-color: #000000; border-color: #000000; } .mb-btn--dark:focus { background-color: #404040; border-color: #000000; } .mb-btn--dark:disabled { color: #989898; background-color: #c4c4c4; border-color: #c4c4c4; cursor: default; } .mb-btn.mb-btn--dark { background-color: #404040; border: 1px solid #404040; color: #fff; outline: none; padding: 0 20px; transition: all .2s; } .mb-btn.mb-btn--dark:hover { background-color: #000; } /* gray button */ .mb-btn--gray { color: #000000; background-color: #f5f3f1; border-color: #f5f3f1; } .mb-btn--gray:hover { color: #000000; background-color: #c4c4c4; border-color: #c4c4c4; } .mb-btn--gray:active { color: #000000; background-color: #989898; border-color: #989898; } .mb-btn--gray:focus { color: #000000; border-color: #000000; } /* loading button state */ .mb-btn--loading::before { position: relative; left: 10%; content: ''; display: block; height: 20px; width: 20px; background-image: url("/local/templates/sotbit_origami/assets/img/svg/mebelson/loader.svg"); background-repeat: no-repeat; z-index: 1; transform-origin: center; animation: 0.7s linear rotateLoader infinite; } .mb-btn--light.mb-btn--loading::before, .mb-btn--gray.mb-btn--loading::before { color: #000000; background-image: url("/local/templates/sotbit_origami/assets/img/svg/mebelson/loader_dark.svg"); } @keyframes rotateLoader { from { transform: rotateZ(0deg); } to { transform: rotateZ(360deg); } } .mb-btn--loading::after { display: flex; justify-content: center; align-items: center; content: attr(data-loading-text); position: absolute; top: 0; left: 10%; width: 100%; height: 100%; background-color: inherit; } /* slider related styles */ .mb-slider-arrows { display: flex; column-gap: 10px; } @media (max-width: 768px) { .mb-slider-arrows { display: none; } } .mb-slider-arrow { position: relative; left: 0 !important; right: 0 !important; width: 40px !important; height: 40px !important; margin: 0 !important; padding: 0 !important; display: block; border: none; background-color: transparent; background-position: center; background-repeat: no-repeat; opacity: .35; transition: opacity 0.3s; } .mb-slider-arrow.swiper-button-lock { display: none; } .mb-slider-arrow:hover { opacity: 1; } .mb-slider-arrow--left { background-image: url("/local/templates/sotbit_origami/assets/img/svg/mebelson/slider_left.svg"); } .mb-slider-arrow--right { background-image: url("/local/templates/sotbit_origami/assets/img/svg/mebelson/slider_right.svg"); } .mb-slider-track { max-width: calc(100% - 140px); margin: 30px auto 0; height: 1px; background: #989898; z-index: 9 !important; } @media (max-width: 1440px) { .mb-slider-track { max-width: calc(100% - 80px); } } @media (max-width: 1023px) { .mb-slider-track { max-width: calc(100% - 30px); } } .mb-slider-track .swiper-scrollbar-drag { position: relative; top: -500%; height: 1px; cursor: pointer; padding: 5px 0 7px; background: none; } .mb-slider-track .swiper-scrollbar-drag::after { content: ""; display: block; width: 100%; height: 1px; background: #404040; transition: height 0.1s; } .mb-slider-track .swiper-scrollbar-drag:hover, .mb-slider-track .swiper-scrollbar-drag:active { top: -600%; } .mb-slider-track .swiper-scrollbar-drag:hover::after, .mb-slider-track .swiper-scrollbar-drag:active::after { height: 3px; } .mb-slider-block__header { display: flex; justify-content: space-between; align-items: center; padding: 0 70px; } @media (max-width: 1440px) { .mb-slider-block__header { padding: 0 40px; } } @media (max-width: 1023px) { .mb-slider-block__header { padding: 0 15px; } } .mb-slider-block__title { padding: 0; font-weight: 500; font-size: 30px; line-height: 140%; } @media (max-width: 1440px) { .mb-slider-block__title { font-size: 26px; } } @media (max-width: 768px) { .mb-slider-block__title { font-size: 24px; } } @media (max-width: 520px) { .mb-slider-block__title { font-size: 20px; } } .mb-slider-block__pills-container { overflow: hidden; padding: 0 70px; } @media (max-width: 1440px) { .mb-slider-block__pills-container { padding: 0 40px; } } @media (max-width: 1023px) { .mb-slider-block__pills-container { padding: 0 15px; } } .mb-slider-block__pills { display: flex; flex-wrap: wrap; margin: 30px 0 0 0; column-gap: 16px; row-gap: 12px; } @media (max-width: 1440px) { .mb-slider-block__pills { column-gap: 12px; } } @media (max-width: 1023px) { .mb-slider-block__pills { flex-wrap: nowrap; column-gap: 0; } } .mb-slider-block__pill { margin: 0; padding: 0; overflow: hidden; width: fit-content; border-radius: 25px; border: 1px solid #c4c4c4; transition: all 0.2s; cursor: pointer; } .mb-slider-block__pill--active, .mb-slider-block__pill:hover, .mb-slider-block__pill:focus, .mb-slider-block__pill:active { background: #f5f3f1; border-color: #f5f3f1; } .mb-slider-block__pill--active { pointer-events: none; } .mb-slider-block__pill-link { display: block; padding: 10px 20px; font-size: 16px; line-height: 19px; color: #000000 !important; background: none; border: none; } .mb-slider { padding: 0 70px; overflow: hidden; } @media (max-width: 1440px) { .mb-slider { padding: 0 40px; } } @media (max-width: 1023px) { .mb-slider { padding: 0 15px; } } .mb-slider__wrapper { align-items: flex-end; margin-top: 30px; display: flex; } .mb-slider__slide { position: relative; max-width: 423px; } @media (max-width: 1024px) { .mb-slider__slide { max-width: 301px; } } .mb-slider__image { width: 100%; border-radius: 5px; } .mb-slider__image-container { position: relative; display: block; } .mb-slider__badge-container { position: absolute; bottom: -35px; right: 20px; display: flex; column-gap: 10px; } .mb-slider__badge-container svg { display: block; } .mb-slider__delay-btn { position: absolute; top: 20px; right: 20px; width: 24px; height: 24px; background: url("/local/templates/sotbit_origami/assets/img/svg/mebelson/delay.svg"); transition: 0.3s; } .mb-slider__delay-btn:hover { opacity: 0.3; } .mb-slider__name { display: inline-block; width: 100%; margin-top: 20px; font-size: 16px; line-height: 22px; color: #000000 !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mb-slider__price-container { display: flex; align-items: center; margin-top: 8px; } .mb-slider__price { display: inline-block; margin-right: 16px; font-weight: 600; font-size: 18px; line-height: 25px; } .mb-slider__price-discount { display: inline-block; margin-right: 25px; font-size: 16px; line-height: 22px; text-decoration-line: line-through; color: #989898; } .mb-slider__discount { position: relative; width: 50px; height: 23px; background-image: url("/local/templates/sotbit_origami/assets/img/svg/mebelson/discount.svg"); background-repeat: no-repeat; } .mb-slider__discount-text { position: absolute; top: 2px; left: 25%; color: #989898; } /* form styles */ .mb-form__input { width: 100%; } .mb-form__input::placeholder { color: #989898; } .mb-form__label { display: flex; align-items: center; flex-grow: 1; margin: 0; padding: 0 15px; border: 1px solid #C4C4C4; border-radius: 4px; transition: all 0.4s; } .mb-form__label:focus-within { border-color: #000000; } .mb-form__label:focus-within:hover { border-color: #c4c4c4; } .mb-form__link { color: #157ee9; } .mb-form__link:hover { color: #000000; } /* product markers */ .product-marker { position: relative; display: inline-block; } .actions { display: flex; margin-left: var(--space-s); column-gap: var(--space-s); } .actions .action { cursor: pointer; } .actions .action:hover a { color: #000000; } @media (max-width: 1365px) { .actions { -moz-column-gap: var(--space-xs); column-gap: var(--space-xs); } } @media (max-width: 1023px) { .actions { align-self: flex-start; } } @media (max-width: 767px) { .actions { margin-left: 0; -moz-column-gap: var(--space-s); column-gap: var(--space-s); justify-content: center; } .mb-sidebar__close { margin-left: 0; margin-right: 15px; width: 52px; height: 52px; background-repeat: no-repeat; } } @media print { body{ visibility: hidden; } .print-area { visibility: visible; } }