*
*
* Так блоки оказываются одинаковой высоты. Заодно, при загрузке страницы,
* пока картинки ещё не загрузились, блоки уже будут иметь определённую
* высоту, и при загрузке картинок страница не будет прыгать.
*/
.uneven-image-block {
display: block;
position: relative;
}
.uneven-image-block__img {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
border-radius: 8px;
}
.hover-zoom {
transition: all 0.25s;
transform-origin: center;
}
.hover-zoom-hover:hover .hover-zoom,
.hover-zoom:hover {
transform: scale(1.05);
}
/* Части бутстраповских стилей почему-то нет */
@media (min-width: 1200px) {
.col-xl-3 {
width: 25%;
}
}
/* Убираем горизонтальные линии, разделяющие блоки на главной */
.drag-block.container .content_wrapper_block,
.drag-block.container > div[id*="bx_incl"] > .content_wrapper_block {
border: none;
}
.top-content-block {position: relative; z-index: 1;}
.right_block1.catalog1 {position: relative; z-index: 0;}
.dropdown > .wrap,
.dropdown-menu {
overflow: hidden;
border-radius: 8px !important;
}
/* Выпадашка со списком пунктов, основанная на аспровской */
.with_dropdown_ims {
padding: 0 !important;
}
.with_dropdown_ims .dropdown-offset {
display: none;
position: absolute;
left: 0;
top: 100%;
padding-top: 2px;
}
.with_dropdown_ims:hover .dropdown-offset {
display: block;
}
.with_dropdown_wide .dropdown-offset {
min-width: 100%;
}
.with_dropdown_right .dropdown-offset {
left: auto;
right: 0;
}
.with_dropdown_ims .dropdown-menu {
display: block;
position: static;
float: none;
padding: 0;
margin: 0;
}
.with_dropdown_ims .dropdown-menu a {
padding: 10px 30px;
}
.with_dropdown_ims .dropdown-menu li:first-of-type a {
padding-top: 12px;
}
.with_dropdown_ims .dropdown-menu li:last-of-type a {
padding-bottom: 15px;
}
/* Шапка */
/* Основа для наших линий - что за стили в имеющейся вёрстке - почти непонятно */
.header-line {
position: relative;
display: flex;
align-items: center;
flex-wrap: nowrap;
}
.header-line__wide-right {
display: flex;
flex-grow: 1;
justify-content: flex-end;
}
/*.header-line__with-icons {
display: flex;
align-items: center;
height: 24px;
}
.header-line__with-icons .svg {
width: 24px;
height: 24px;
}*/
.top-block_links {z-index: 6;}
.header-line_company {z-index: 5;}
.header-line_shop {z-index: 4;}
/* Линия 1 - ссылки */
.top-block_links {
padding: 0 24px;
margin-top: 3px;
margin-bottom: 25px;
border-radius: 8px;
background: #444;
}
.top-block .menu.topest li {
padding: 0;
}
.top-block_links .menu > li > a,
.top-block_links .menu > li > a:hover,
.top-block_links .menu.topest li.current > a {
color: white;
}
.top-block_links .menu > li > a {
padding: 15px 0;
}
.top-block_links .menu > li > a > span {
display: inline-block;
transition: all 0.25s;
}
.top-block_links .menu > li > a:hover > span,
.top-block_links .menu.topest li.current > a > span {
color: var(--ims-lblue);
text-shadow: 0 0 5px var(--ims-lblue);
}
.top-block_links .menu > li > a .cls-1 {
fill: #ddd !important;
transition: all 0.25s;
}
.top-block_links .menu > li > a:hover .cls-1 {
fill: white !important;
}
/* Линия 2: относящееся к компании */
.header-line_company {
gap: 45px;
margin: 22px 0;
}
.header-line_company a {
color: #333;
}
.header-line_company a:hover {
color: var(--ims-red);
}
/* Логотип */
.header-logo {}
.header-logo a {display: block;}
.header-logo img,
.header-logo svg {width: 120px; height: 46px;}
/* Регионы */
.region_wrapper {
display: inline-block;
padding: 0;
}
.region_wrapper .js_city_chooser {
padding: 0;
}
.svg-inline-header-location {
margin-left: 7px;
}
/* Телефон */
.header-line_company .phone.with_dropdown > .dropdown { /* Позиционирование выпадашки поверх телефона */
top: -23px;
padding-top: 8px;
border-radius: 8px;
}
.header-line_company .phone .call_back { /* Позиционирование выпадашки поверх телефона */
padding: 0 8px 7px 8px;
}
/* Мессенджеры, соцсети итд */
.socnets {
display: flex;
flex-wrap: nowrap;
gap: 24px;
}
.svg-inline-socnet-icon {
width: 24px;
height: 24px;
}
/* Емейл */
.header-email {}
.header-email .svg-inline-email {display: none;}
/*.header-email {
display: inline-flex;
align-items: center;
gap: 8px;
}
.header-email__icon {
display: none;
width: 24px;
height: 24px;
}*/
/* О нас */
.header-about {}
.header-about__title {
font-weight: bold;
line-height: 100%;
user-select: none;
cursor: pointer;
}
.header-about__title:hover {
color: var(--ims-red);
}
.header-about .svg-inline-down {
position: static;
display: inline-block;
padding: 0;
margin: 0 0 0 3px;
}
/* Линия 2: относящееся к каталогу */
/* Меню */
.menu-row .menu-only .mega-menu {
margin-right: 8px;
}
.mega-menu .menu-item.dropdown .wrap > a {
background: var(--ims-lred);
color: white !important;
}
.mega-menu .menu-item.dropdown .wrap > a .svg path {
fill: white !important;
}
/* Поиск */
.search-wrapper {
flex-grow: 1;
margin-right: 24px;
}
.header-line .search .search-input,
.header-line .search .search-input:focus {
height: 48px;
border: none;
border-radius: 8px;
background: #f5f5f5;
}
.header-line .search .search-button-div {
position: absolute;
right: 0;
top: 0;
bottom: 0;
}
.header-line .search .btn-search {
position: absolute;
right: 0;
top: 0;
bottom: 0;
padding: 0 16px;
border: none;
background: none;
font-size: 0;
}
.header-line .search .svg {
top: 0;
}
.header-line .search .svg use {
opacity: 0.5;
}
.header-line .search .search-button-div .svg.svg-close {
display: none;
}
.header-line .search .dropdown-select {
top: 48%;
transform: translateY(-50%);
}
/* Сравнение, избранное, корзина */
.header-basketing {
display: flex;
align-items: center;
gap: 35px;
margin-right: 35px;
}
.header-line .wrap_icon .title {
display: none;
}
/* ЛК */
.auth_wr_inner {
padding: 0 !important;
margin-right: 14px;
}
.auth_wr_inner .dropdown-menu li a {
width: auto !important;
height: auto !important;
padding: 10px 30px !important;
margin: 0 !important;
border: none;
border-radius: 0 !important;
line-height: 100%;
}
.auth_wr_inner .dropdown-menu li:first-of-type a {
padding-top: 12px !important;
}
.auth_wr_inner .dropdown-menu li:last-of-type a {
padding-bottom: 15px !important;
}
.auth_wr_inner .personal-link {
padding: 0 10px;
margin-left: -10px;
}
.auth_wr_inner .personal-link svg {
opacity: 0.5;
}
.auth_wr_inner .personal-link:hover svg {
opacity: 1;
}
.auth_wr_inner .personal-link:hover svg use {
fill: var(--ims-red);
}
@media (max-width: 1279px) {
.header-line_company {gap: 35px;}
.header-basketing {gap: 24px; margin-right: 24px;}
}
@media (max-width: 1100px) {
/*.header-email__icon {
display: block;
margin-left: -11px;
}
.header-email__text {
display: none;
}*/
.header-line_company {
gap: 20px;
}
.socnets {
gap: 20px;
}
}
/* Шапка для мобилок */
#mobileheader .mobileheader-v3 .search-block {
display: flex;
align-items: center;
height: 62px;
}
#mobileheader .mobileheader-v3 .search-wrapper {
margin-right: 0;
}
/* Крутилка баннеров */
@media (max-width: 991px) {
.wraps .wrapper_inner.front .drag-block.container.BIG_BANNER_INDEX > .maxwidth-theme {
padding-top: 10px;
}
}
@media (min-width: 992px) {
.top_big_banners.short_block.v2 .top_slider_wrapp .main-slider,
.top_big_banners.short_block.v2 .top_slider_wrapp .main-slider__item,
.top_big_banners.short_block.v2 .top_slider_wrapp .main-slider__item td {
height: 698px;
}
}
.swiper.main-slider {
--button-size: 40px;
--arrow-width: 20px;
--arrow-height: calc(var(--arrow-width) / 16 * 12);
border-radius: 8px;
}
.slider__darkener {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(rgba(217,217,217,0), rgba(0,0,0,0.6));
}
.top_slider_wrapp .main-slider .main-slider__wrapper .main-slider__item .text {
width: 80%;
padding-bottom: 75px;
vertical-align: bottom;
}
.main-slider__item .left .banner_text,
.main-slider__item .left .banner_title {
margin-left: 64px !important;
}
body .short_block.v2 .top_slider_wrapp .main-slider .text .banner_text {
max-height: unset;
}
.main-slider__item .left .banner_buttons {
margin-left: 61px !important;
}
.swiper-button-next,
.swiper-button-prev {
width: var(--button-size);
height: var(--button-size);
border-radius: 50%;
background: rgba(255,255,255,0.15);
}
.swiper-button-prev::after,
.swiper-button-next::after {
width: var(--arrow-width);
height: var(--arrow-height);
background: url(/local/templates/2mebel/images/ims/icons/arrow.svg) 0 0 no-repeat;
background-size: var(--arrow-width) var(--arrow-height);
}
.swiper-button-prev::after {
transform: rotateZ(180deg);
}
.swiper-button-next:hover,
.swiper-button-prev:hover {
/*background: rgba(255,255,255,1);*/
background: var(--ims-red);
}
.swiper-button-prev:hover::after,
.swiper-button-next:hover::after {
background-position: 0;
}
@media screen and (max-width: 991px), projection and (max-width: 991px), tv and (max-width: 991px), handheld and (max-width: 991px) {
.top_slider_wrapp .main-slider .main-slider__wrapper .main-slider__item .text {
padding-bottom: 50px;
}
.top_slider_wrapp .left .text .section,
.top_slider_wrapp .main-slider__item .text.left .banner_text,
.top_slider_wrapp .main-slider__item .text.left .banner_title,
body .top_slider_wrapp .main-slider__item td.text.left .banner_title,
.main-slider__item.left .text .section,
.main-slider__item.right .text .section,
.top_slider_wrapp .main-slider__item td.text.left .banner_text,
.top_slider_wrapp .main-slider__item td.text.right .banner_text {
margin-left: 40px !important;
}
.top_slider_wrapp .main-slider__item td.text.left .banner_text,
.top_slider_wrapp .main-slider__item td.text.right .banner_text {
display: none;
}
.top_slider_wrapp .main-slider__item .text.left .banner_buttons,
.top_slider_wrapp .main-slider__item td.text.left .banner_buttons,
body .top_slider_wrapp .main-slider__item td.text.right .banner_buttons {
margin-left: 37px !important;
}
}
@media screen and (max-width: 767px), projection and (max-width: 767px), tv and (max-width: 767px), handheld and (max-width: 767px) {
body .top_slider_wrapp .main-slider__item td.text * {
text-align: left;
}
}
/*@media screen and (max-width: 991px), projection and (max-width: 991px), tv and (max-width: 991px), handheld and (max-width: 991px) {*/
@media screen and (max-width: 475px), projection and (max-width: 475px), tv and (max-width: 475px), handheld and (max-width: 475px) {
.top_slider_wrapp .main-slider,
.top_slider_wrapp .main-slider__item,
.top_slider_wrapp .main-slider__item td,
.top_slider_wrapp .main-slider__item tr {
height: 300px;
}
.top_slider_wrapp .main-slider .main-slider__wrapper .main-slider__item .text {
padding-bottom: 42px;
}
body .top_slider_wrapp .main-slider__item td.text * {
text-align: left;
}
.top_slider_wrapp .left .text .section,
.top_slider_wrapp .main-slider__item .text.left .banner_text,
.top_slider_wrapp .main-slider__item .text.left .banner_title,
body .top_slider_wrapp .main-slider__item td.text.left .banner_title,
.main-slider__item.left .text .section,
.main-slider__item.right .text .section,
.top_slider_wrapp .main-slider__item td.text.left .banner_text,
.top_slider_wrapp .main-slider__item td.text.right .banner_text {
margin-left: 24px !important;
}
.top_slider_wrapp .main-slider__item .text.left .banner_buttons,
.top_slider_wrapp .main-slider__item td.text.left .banner_buttons,
body .top_slider_wrapp .main-slider__item td.text.right .banner_buttons {
margin-left: 21px !important;
}
.top_slider_wrapp .main-slider__item .text.left .banner_title {
font-size: 20px;
}
.top_slider_wrapp .main-slider__item .text.left .banner_text {
font-size: 14px;
}
}
/* Крутилка маленьких баннеров */
.BIG_BANNER_INDEX > .maxwidth-theme .top_big_banners.short_block .flex-viewport,
.BIG_BANNER_INDEX > .maxwidth-theme .top_big_banners.short_block .item .item_inner {
border-radius: 8px;
}
/* Товары на главной (лучшие предложения) */
.best_block--ims {}
.tab_slider_wrapp.best_block--ims .top_block {position: relative; z-index: 2;}
.tab_slider_wrapp.best_block--ims .tabs_content {position: relative; z-index: 1;}
.tab_slider_wrapp.best_block--ims .top_block {
display: block;
}
.tab_slider_wrapp.best_block--ims .top_block h3 {
margin: 0 0 15px 0;
}
.catalog_tab_controls {
display: flex;
align-items: center;
}
.catalog_tab_controls .tabs.ajax {
top: 0;
margin-right: 4px;
transform: none !important;
}
.catalog_tab_controls .arrow_scroll_init .arrows_wrapper {
display: none;
}
.top_block .catalog_tab_controls ul.tabs li {
display: inline-flex;
margin-right: 3px;
}
body .top_block .catalog_tab_controls a {
top: 0;
}
.catalog_tab_controls_project {
display: flex;
flex-grow: 1;
justify-content: flex-end;
}
@media (max-width: 767px) {
.catalog_tab_controls {
flex-wrap: wrap;
}
/*.catalog_tab_controls .tabs.ajax {
margin-right: 9px;
}*/
.catalog_tab_controls_project {
justify-content: flex-start;
width: 100%;
margin-top: 15px;
}
}
@media (max-width: 600px) {
.wrapper1.front_page .compact-catalog-slider .catalog_block.items .item-parent {
width: 270px;
}
}
@media (max-width: 550px) { /* Отмена аспровских говностилей */
body .catalog_tab_controls ul.tabs li {
height: auto;
padding: 12px 24px 13px 24px;
line-height: 16px;
}
body .wrapper1.front_page .top_block .catalog_tab_controls a {
position: static;
width: auto;
height: auto;
margin: 0;
background-image: none;
font-size: 16px;
transform: none;
opacity: 1;
}
}
/* Что было с закруглением 3px - будет с 6px */
.rounded3, .rounded3.darken-bg-animate::after, .rounded3.darken-bg-animate::before {
border-radius: 6px;
}
/* Лэндинги */
.landings-list__name span {
border-bottom: none;
user-select: none;
}
.landings-list__item_section {
padding-bottom: 0;
}
.landings-list__name_sections {
color: #9e9e9e;
color: var(--fill_dark_light_hover);
}
.landings-list__group {}
.section-compact-window {max-height: 95px;}
.section-compact-list-custom {display: flex; gap: 10px; flex-wrap: wrap;}
.section-compact-list-custom__link {display: block; width: 100%; padding: 4px 20px;}
.section-compact-list-custom .landings-list__name {margin-right:0;}
.section-compact-list-custom__fbutton {border:none;}
.cab-filter {
/*margin-bottom: 25px;*/
}
.cab-filter__section {
margin-bottom: 25px;
}
.cab-filter__section-header {
font-size: 20px;
margin-bottom: 10px;
}
.cab-filter__section-list {
align-items: flex-start;
}
.cab-filter__section-list_colors {
align-items: stretch;
}
.cab-filter__section-list_colors .landings-list__name {
align-self: flex-start;
}
.product-container .content_wrapper_block.front_tizers,
.product-container .content_wrapper_block.front_tizers > .maxwidth-theme {
background: #f8f8f8;
background-color: #f8f8f8;
}
/* Детальная товара: блок со всеми характеристиками */
.properties-group {
border: none;
border-radius: 8px;
background: #f8f8f8;
}
.properties-group__item { /* Одна из характеристик */
margin-bottom: 14px;
}
.properties-group__name-wrap,
.properties-group__value-wrap { /* Название и значение */
font-size: 16px;
line-height: 100%;
}
.properties-group,
.properties-group__name,
.properties-group__value-wrap {
background: #f8f8f8;
}
.properties-group__name {
color: #333;
font-weight: 600;
}
@media (max-width: 500px) {
.properties-group__item {
margin-bottom: 20px;
}
.properties-group__name-wrap,
.properties-group__value-wrap {
font-size: 16px;
line-height: 100%;
}
}
/* Детальная товара: статьи снизу */
.product-container .item-views.list-type-block .items .item_wrap {
margin: 0 0 32px 0;
border: none;
border-radius: 8px;
}
.product-container .item-views.list-type-block .items .item_wrap:not(:hover) {
background: #f5f5f5;
}
.product-container .item-views.list-type-block .items .item_wrap img {
border-radius: 6px;
}
.product-container .list-type-block.item-views.wide_img .item .body-info .arrow_link {
/*border: none;*/
border-radius: 8px;
background: white;
transition: all 0.25s;
}
.product-container .list-type-block.item-views.wide_img .item:hover .body-info .arrow_link {
background: var(--ims-lred);
}
.product-container .item-views.list-type-block .items .item_wrap .section-name-block {
color: #777;
}
.btn.btn-default {
border-radius: 6px;
}
/* У Аспро как-то нет стиля для .col-sm-6 - чтобы всё случайно не сломать, активируем его действие только совместно с .cab-card */
@media (min-width:544px) and (max-width:767px) {
.cab-card.col-sm-6 {width:50%;}
}
.item_block_collection .image_wrapper_block:not(.image-wrapper) {
padding-top: 54%;
}
@media (max-width: 630px) {
.item_block_collection,
.right_block.wide_N .items .item_block.item_block_collection {
width: 100%;
}
}
.catalog_section_list .item_block.lg .section_item {
padding: 24px 25px 17px 25px;
}
.cab-card__type,
.catalog_section_list .item_block.lg .section_item li.name .cab-card__type {
display:block; font-size:.867em; color:#555; line-height:115%;
}
.cab-card__name {}
.cab-card__name-link {display:block; padding-bottom:7px; font-weight:600;}
.cab-card__name-value {line-height:115%;}
.cab-card__numbers {color:#777; line-height:145%;}
@media (max-width:600px) {
.catalog_section_list .section_item td.section_info .cab-card__name {text-align:left;}
}
.product-container .product-detail-gallery__item > a {
background: #fafafa;
}
.product-container .product-detail-gallery__item .product-detail-gallery__picture {
mix-blend-mode: multiply;
}
.product-container .product-detail-gallery__item.product-detail-gallery__item--big a .product-detail-gallery__picture {
border-radius: 8px;
}
.product-container .product-detail-gallery__item .product-detail-gallery__picture_collection {
width: 100% !important;
}
.owl-carousel.owl-theme.owl-bg-nav .owl-stage-outer {
border-radius: 8px;
}
/* Кнопки вперёд/назад отображаются в поле с visibility:hidden, которое уходит за края галереи. */
/* Если галерея широкая, на весь экран, то блок вылезает за края экрана и на странице вылазит горизонтальный скроллинг. */
/* Кнопки торчат за края галереи для красоты - поэтому вылазят на меню и за правый кран экрана. */
/* Делаем, чтобы блок был всегда внутри галереи. И кнопки при наведении не пытались анимироваться. */
.owl-carousel.short-nav .owl-nav {
transition: none;
}
.owl-carousel .owl-nav {
left: 0 !important;
right: 0 !important;
}
.product-container .product-detail-gallery__slider .owl-dots {
display: block;
}
.product-detail-gallery__thmb-container .owl-nav {
height: 1px;
z-index: 3;
}
.top-descr {
margin-bottom: 30px;
}
.top-descr .group_description_block > div {
padding: 22px 35px 27px 35px;
border-radius: 8px;
background: #f8f8f8;
}
@media (max-width: 475px) {
.top-descr .group_description_block > div {
padding: 10px 15px;
}
}
.group_description_block__window {
max-height: 220px;
}
.svg-inline-cat_icons svg {
width: 30px;
height: 30px;
}
.articles-list .item .left-data img,
.catalog_section_list .item_block.lg .image img {
max-width: 100%;
max-height: 100%;
}
.ui-widget-content {
border: 1px solid #e0e2e8;
box-shadow: 10.5px 18.2px 21px rgba(0,0,0,0.25);
}
.ui-front {
z-index: 1060;
}
.ui-menu .ui-menu-item {
padding-left: 10px !important;
padding-right: 10px !important;
margin-left: 10px;
margin-right: 10px;
margin-top: 5px;
margin-bottom: 5px;
border: none !important;
border-radius: 4px;
}
.ui-menu .ui-menu-item:hover {
border: none;
background: none;
background-color: #f4f4f4;
}
.ui-state-active {
border: none !important;
background: transparent !important;
font: inherit !important;
color: inherit !important;
}
ul.ui-widget > li::before {
display: none;
}
/* Верхнее меню для компов */
/* Выпадающий блок */
.menu-row .mega-menu table td.wide_menu .dropdown-menu.with_right_block ul.menu-wrapper {
display: flex;
flex-wrap: wrap;
padding: 10px 0px 10px;
}
/* Пункт меню */
.wrapper1 .menu-row .mega-menu table td.wide_menu > .wrap > .dropdown-menu ul.menu-wrapper > li {
float: none !important;
clear: none !important;
}
.wrapper1 .menu-row .mega-menu table td.wide_menu > .wrap > .dropdown-menu.long-menu-items ul.menu-wrapper.menu-type-4 > li .subitems-wrapper > ul > li {
display: flex;
align-items: center;
}
.menu-row .mega-menu table td.wide_menu > .wrap > .dropdown-menu ul.menu-wrapper > li,
.menu-row .mega-menu table td.wide_menu > .wrap > .dropdown-menu ul.menu-wrapper > li.has_img,
.menu-row .mega-menu table td.wide_menu > .wrap > .dropdown-menu ul.menu-wrapper > li.has_img.icon {
min-height: 40px;
padding: 5px 30px 10px 24px;
margin: 0;
}
/* Иконка или картинка */
.menu-row .mega-menu table td.wide_menu > .wrap > .dropdown-menu ul.menu-wrapper > li.has_img .menu_img,
.menu-row .mega-menu table td.wide_menu > .wrap > .dropdown-menu ul.menu-wrapper > li.has_img .menu_img.icon,
.menu-row .mega-menu table td.wide_menu > .wrap > .dropdown-menu ul.menu-wrapper > li.has_img .menu_img.icon svg,
.auth_wr_inner .dropdown-menu li a, .mega-menu table .dropdown-menu li a img {
position: static;
width: 25px;
height: 25px;
margin-right: 35px;
}
/* Название */
.menu-row .mega-menu table td.wide_menu > .wrap > .dropdown-menu ul.menu-wrapper > li > a {
padding: 0 !important;
}
/* Меню КАТАЛОГ */
.block_side_WIDE .title-menu {
font-size: 14px;
}
/* Офисная мебель */
body .catalog_icons_Y .menu_top_block.catalog_block .dropdown>li.full>a {
font-size: 14px;
}
/* Кабинеты руководителя */
.menu_top_block.catalog_block .dropdown>li.full.v_bottom>.dropdown>li>a,
header .menu_top_block.catalogfirst li.full.v_bottom>.dropdown>li>a {
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
font-size: 14px;
}
/* Стрелка справа - смещаем вниз из-за увеличения высоты пункта меню */
.menu_top_block.catalog_block .dropdown>li.full.v_bottom>.dropdown>li>a .svg {
top: 10px;
}
/* Делаем покрупнее */
.left_menu>li.has-childs>a .svg svg, .menu_top_block .dropdown>li>a .svg svg {
width: 7px;
height: 5px;
}
.menu_top_block.catalog_block .dropdown>li.full>.dropdown>li>.image,
body .wrapper1 .menu-wrapper .menu_top_block .dropdown>li.full>.dropdown-block li>.image,
header .menu_top_block.catalogfirst li.full>.dropdown>li>.image {
--image-width: 25px;
--image-height: 25px;
}
.menu_top_block .dropdown>li.full>.dropdown,
.menu_top_block.catalogfirst li.full>.dropdown {
display: flex;
flex-wrap: wrap;
/*max-width: 800px;*/
height: auto;
}
.menu_top_block.catalog_block .dropdown>li.full>.dropdown>li {
width: 33%;
padding-bottom: 10px;
}
/* Убираем отступы с
*/
.dropdown .has-childs .dropdown .menu_item,
.menu_top_block .dropdown .dropdown .menu_item {
padding: 0;
}
/* Добавляем отступы на */
.menu_top_block.catalog_block .dropdown>li.full.v_bottom>.dropdown>li>.dropdown>li>a,
header .menu_top_block.catalogfirst li.full.v_bottom>.dropdown>li>.dropdown>li>a {
padding: 5px 10px 5px 0;
font-size: 14px;
}
.wrapper1:not(.block_side_WIDE) .top-content-block .landings-list:last-of-type {
border-bottom: none;
}
.catalog_block .catalog_item > div {
box-shadow: none;
transition: none;
}
.articles-list .item .left-data img,
.catalog_section_list .item_block .image img {
border-radius: 6px;
}
.counter_block {
border-radius: 6px;
}
@media (min-width: 992px) {
.item-views.news2 .item-wrapper.fon_text_fon .item .inner-text.with-fon .inner-text-wr {
background: #fffc;
}
}
/* На всех страницах вместо фильтра в левой колонке используем выезжающий мобильный фильтр.
* Таким образом, кнопка "Фильтр" отображается всегда.
* Конечно, если в вёрстке она есть.
*/
.filter-panel__filter {
display: block;
}
/*.filter-panel__filter .bx-filter-title {
padding: 12px 24px 13px 24px;
border-radius: 8px;
background: #f5f5f5;
font-size: 0.933em;
line-height: 100%;
transition: all 0.25s;
}
.filter-panel__filter .bx-filter-title:hover {
background: var(--ims-lred);
color: white;
}
.filter-panel__filter .bx-filter-title:hover .cls-1 {
fill: white;
}*/
/* На всех страницах каталога не должно быть левой колонки - содержимое справа шириной всегда 100% */
.catalog_page.ims-wide_Y .section-content-wrapper {
width: 100% !important;
}
@media (min-width: 1300px) {
.catalog_page .section-content-wrapper.with-leftblock {width: 100% !important;}
}
@media (min-width: 1200px) {
.wrapper1.with_left_block .col-lg-20 {
width: 20%;
}
}
.cabs-slider {}
.cabs-slider__item {width: 25%;}
@media (max-width: 1199px) {
.cabs-slider__item {width: 40vw;}
.catalog_section_list .item_block.lg.cabs-slider__item .section_item {padding-left: 1.8vw; padding-right: 1.8vw;}
}
@media (max-width: 475px) {
.cabs-slider__item {width: 70vw;}
}
/* ===== Карточки товаров ===== */
/* Для всех вариантов отображения */
.section-gallery-wrapper {
border-radius: 8px;
background: #fafafa;
}
.section-gallery-wrapper img {
mix-blend-mode: multiply;
}
.sale_block {
margin: 2px 0 0 0;
}
.sale_block .sale-number {
border-radius: 6px;
background: #dd5575;
}
.sale_block .inner-sale {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
background: white;
}
.sale_block .value {
padding: 0 3px 0 8px;
color: white;
}
/* Обычные, которые сеткой выводятся */
.catalog_item .inner_wrap {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
/*html:not(.mobile) .catalog_block .item_block .catalog_item:not(.big) .footer_button {
overflow: hidden;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}*/
.fast_view_button.fast_view_button--full {
left: auto;
right: 0;
top: 0;
bottom: auto;
z-index: 3;
}
.fast_view_button.fast_view_button--full span {
color: white;
line-height: 1.3em;
}
.fast_view_button.fast_view_button--full span::before {
border-radius: 6px;
background: var(--ims-red);
opacity: 0.7;
transition: all 0.25s;
}
.fast_view_button.fast_view_button--full span:hover::before {
opacity: 1;
}
.item_info--icons {
display: flex;
align-items: center;
}
.like_icons--card,
.like_icons.like_icons--card {
position: static;
display: flex;
}
.like_icons--card .wish_item,
.like_icons--card .compare_item {
visibility: visible;
opacity: 1;
}
/*.like_icons--card .wrapp_one_click,
.like_icons--card .fast_view_button {
display: none;
}*/
.rating--card {
flex-grow: 1;
height: auto;
margin: 0;
}
.blog-info__rating--top-info {
justify-content: flex-end;
}
.item-title {
margin-bottom: 5px;
font-size: 16px;
font-weight: 600;
line-height: 145%;
}
.sa_block, .item_info--size {
line-height: 125%;
}
.item_info--bottom_block {
display: flex;
align-items: flex-end;
gap: 22px;
}
.catalog_item .cost.prices {
margin: 12px 0 0 0;
}
.catalog_block .footer_button {
padding: 0 5px 7px 5px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.mobile #main .catalog_item .footer_button {
display: block; /* У аспро там flex, и внутри стили такие, что наши варианты кнопок задом-наперёд переставляются */
}
.catalog_block .counter_wrapp > div {
width: 50% !important;
padding: 0 4px !important;
}
.catalog_block .counter_wrapp > .button_block.wide {
width: 100% !important;
padding: 0 !important;
}
.catalog_block .offer_buy_block {
margin-bottom: 8px !important; /* Такой отступ нам нужен всегда, и с классом html.mobile */
}
.catalog_block .counter_block,
.catalog_block .btn {
border-radius: 6px !important;
}
.catalog_block .ce_cmp_hidden,
.catalog_block .counter_block_inner,
.compact-catalog .ajax_load.block .catalog_item .footer_button .counter_wrapp > div:not(.button_block) {
display: block !important;
}
.catalog_block .wrapp-one-click {
margin: 0 4px;
}
.catalog_block.block .footer_button .one_click {
border-width: 1px;
}
/* Кнопки выбора характеристик */
.mobile .catalog_block .sku_props.ce_cmp_hidden { /* На мобилках не отображаем никогда */
display: none !important;
}
.sku_props > div { /* Отступы как у кнопок покупки */
padding-left: 5px;
padding-right: 5px;
}
/*.catalog_item__basket {
display: flex;
justify-content: center;
align-items: center;
width: 51px;
height: 47px;
background: #259cf2;
border-radius: 8px;
cursor: pointer;
transition: all 0.25s;
}
.catalog_item__basket:hover {
background: #d42c53;
}
.catalog_item__basket .svg {
margin: 4px 0 0 -2px;
}
.catalog_item__basket svg use {
fill: white;
}*/
@media (min-width: 992px) and (max-width: 1366px) {
.catalog_item .image_wrapper_block {
margin-bottom: 10px;
}
/*.item_info--icons {
flex-direction: column;
align-items: flex-start;
margin-bottom: 5px;
}*/
.item-title {
font-size: 15px;
}
}
@media (max-width: 600px) {
.catalog_item .inner_wrap {
border-radius: 10px;
}
.catalog_item .image_wrapper_block {
margin-bottom: 10px;
}
.item_info--icons,
.item-title {
margin-bottom: 10px;
}
.like_icons--card {
gap: 10px;
}
.item-title,
.compact-catalog .ajax_load .item .item-title a,
.compact-catalog .ajax_load .item .item-title a > span {
font-size: 15px;
font-weight: 500;
line-height: 135%;
}
/* Все элементы управления покупкой - на мобилках не прячем, отображаем всегда */
.compact-catalog .ajax_load.block .catalog_item .footer_button {
position: static;
}
/* Отступы для блока с количеством и кнопки добавления в корзину */
.catalog_block .counter_wrapp > .counter_block_inner {
padding: 0 4px 0 0 !important;
}
.catalog_block .counter_wrapp > .button_block {
padding: 0 0 0 4px !important;
}
/* Блок с выбором количества и его input */
.catalog_block .counter_block,
.catalog_block .counter_block:not(.big),
.catalog_block .counter_block input[type="text"],
.catalog_block .counter_block:not(.big) input[type="text"] {
height: 33px;
}
.compact-catalog .ajax_load .counter_wrapp .button_block .btn,
.compact-catalog .ajax_load .item .catalog-adaptive .counter_wrapp.list .btn,
body .wrapper1.compact-catalog .ajax_load .offer_buy_block .btn {
border-radius: 6px;
}
.catalog_block .counter_wrapp > div {
padding: 0;
}
.catalog_block .wrapp-one-click {
margin: 0;
}
.catalog_block .sku_props.ce_cmp_hidden { /* Кнопки выбора характеристик */
display: none !important;
}
}
@media (max-width: 475px) {
.compact-catalog .ajax_load .item {
width: 100%;
}
.compact-catalog .ajax_load .cost.prices .price {
font-size: 15px;
}
.compact-catalog .ajax_load .cost.prices .price.discount,
.compact-catalog .ajax_load .cost.prices .price.discount > span {
font-size: 13px;
}
}
@media (max-width: 400px) {
.compact-catalog .ajax_load .rating {
display: block;
}
}
/* Вариант с широкими на весь экран большими карточками (display_list)*/
.display_list .list_item .props_list_wrapp {
display: block;
}
.display_list .list_item .props_list td {
vertical-align: top;
}
.display_list .list_item .show_props {
display: none;
user-select: none;
margin-bottom: 20px;
}
.display_list.TYPE_1 .fast_view_block,
.display_list.TYPE_1 .like_icons.list > div span {
height: auto;
}
body .ajax_load .bx_catalog_item_scu ul li.item {
border-radius: 6px;
}
.display_list .description_wrapp {
flex-basis: auto;
flex-grow: 1;
}
.display_list .item-title,
.display_list .item-title a,
.display_list .item-title a > span {
font-size: 18px;
font-weight: normal;
}
.display_list .list_item .information_wrapp {
flex-basis: auto;
}
@media (max-width: 767px) {
.display_list .item-title,
.display_list .item-title a,
.display_list .item-title a > span {
font-size: 15px;
font-weight: 500;
}
}
/* Вариант с широкими но низкими карточками (table-view) */
.table-view .item-title,
.table-view .item-title a,
.table-view .item-title a > span {
font-size: 16px;
font-weight: normal;
}
@media (max-width: 1199px) and (min-width: 992px) {
.sale_block .inner-sale {
border-radius: 6px;
}
}
@media (max-width: 1199px) {
.table-view .item-title,
.table-view .item-title a,
.table-view .item-title a > span {
font-size: 15px;
}
.table-view .price_matrix_wrapper .prices-wrapper {
font-size: 14px;
}
}
@media (max-width: 991px) {
body .table-view .box-shadow:hover {
border-color: #ececec;
}
}
@media (max-width: 767px) {
.table-view__item {
padding-right: 8px;
}
}
/* Детальная товара */
.product-view--type2 .product-info-wrapper {
margin-bottom: 24px;
border-top: none;
border-bottom: none;
}
.product-info-headnote--bordered {
border-bottom: none;
}
/*
* Выбор характеристик.
* .bx_item_detail_size используется не только при выводе характеристик рядом с фоткой,
* но ещё и в верхней всплывающей панели - а там засеривание не нужно.
* Поэтому уточняем селекторы, чтобы они работали только у товара рядом с фоткой.
*/
.catalog_detail .bx_item_detail_size {
padding: 8px 16px;
border-radius: 8px;
background: #fafafa;
margin-bottom: 16px;
}
/* Название и текущее значение характеристики */
.catalog_detail .sku_props .bx_item_section_name {
display: flex;
justify-content: space-between;
margin-bottom: 8px;
}
.catalog_detail .sku_props .bx_item_section_name .name {
padding-right: 15px;
color: #333;
font-weight: 600;
}
.catalog_detail .sku_props .bx_item_section_name .val {
text-align: right;
}
/* Кнопки значений */
/* Для товара и для верхней панели */
#headerfixed .table-view .item-actions .item-sku .but-cell .bx_item_detail_size li,
.sku_props .bx_item_detail_size ul li {
padding: 9px 12px 10px 12px;
border: 1px solid #c8c8c8;
border-radius: 8px;
background: white;
}
#headerfixed .table-view .item-actions .item-sku .but-cell .bx_item_detail_size li span,
.sku_props .bx_item_detail_size ul li span {
padding: 0;
font-size: 16px;
line-height: 100%;
}
/* Для верхней панели */
#headerfixed .table-view .item-actions .item-sku .but-cell .bx_item_detail_size li {
border: none;
background: var(--ims-lred);
}
#headerfixed .table-view .item-actions .item-sku .but-cell .bx_item_detail_size li span {
font-size: 14px;
}
/* Блок справа, где цены, покупка итд */
.product-action .shadowed-block {
margin-top: -4px;
border-radius: 8px;
}
.product-info.product-info--type2 .shadowed-block .buy_block .btn.one_click {
margin-top: 8px;
border: 1px solid hsla(var(--dark_light-wtheme-hue),var(--dark_light-wtheme-saturation),var(--dark_light-wtheme-lightness),.35);
}
/* Рекомендуем */
.block-items .block-item {
margin: 0 0 16px 0;
}
.block-items .block-item + .block-item {
border-radius: 6px;
}
@media (max-width: 767px) {
.product-main .catalog_block .counter_block,
.product-main .catalog_block .counter_block:not(.big),
.product-main .catalog_block .counter_block input[type="text"],
.product-main .catalog_block .counter_block:not(.big) input[type="text"] {
height: 50px;
}
.product-main .catalog_block .counter_wrapp > div {
padding: 0 !important;
}
.product-main .catalog_block .counter_block,
.product-main .catalog_block .btn {
border-radius: 0 !important;
}
.product-main .catalog_block .counter_wrapp > .button_block {
padding: 0;
}
}
/*@media (max-width: 475px) {}*/
.popup.show {
border-radius: 8px;
}
/* Вопросы и ответы */
/* Кнопки */
.tabs-center {
display: flex;
justify-content: center;
}
.nav-tabs {
overflow: auto;
display: flex;
margin: 0;
scrollbar-width: none;
-ms-overflow-style: none;
}
.nav-tabs::-webkit-scrollbar {
width: 0;
height: 0;
background: none;
}
.tabs .nav-tabs li {
margin: 0 4px;
background: none;
white-space: nowrap;
}
.tabs .nav-tabs li.active::after {
content: unset;
}
.tabs .nav-tabs li a,
.tabs .nav-tabs li > span {
display: flex;
align-items: center;
height: 48px;
padding: 0 16px;
border-radius: 8px;
background: #f5f5f5;
color: #333;
transition: all 0.25s;
}
.tabs .nav-tabs li.active a,
.tabs .nav-tabs li.active > span,
.tabs .nav-tabs li:hover a,
.tabs .nav-tabs li:hover > span {
background: #4b4b4b;
color: white;
}
/* Панели */
.item-views.items-list1 .tabs .tab-content {
padding-top: 32px;
}
/* Бояны */
.accordion-type-1 .item-accordion-wrapper {
margin: 0 0 16px 0;
border-radius: 8px;
}
.accordion-type-1 .item-accordion-wrapper,
.accordion-type-1 .item-accordion-wrapper:hover {
background: #f5f5f5;
}
.accordion-type-1 .item-accordion-wrapper .accordion-head {
display: flex;
align-items: center;
padding: 32px; /* Отступ не для всей панели, а для заголовка - чтобы площадь для клика больше была */
font-size: 24px;
font-weight: 600;
line-height: 135%;
}
.item-accordion-wrapper.opened .accordion-head::before {
content: none;
}
.accordion-head-text {
flex-grow: 1;
padding-right: 16px;
}
.accordion-head-button {
align-self: flex-start;
}
.panel-collapse .accordion-body,
.item-views .item .previewtext p {
font-size: 16px !important; /* !important нужен, потому что правила на параграфы определяются ещё ниже этого файла */
}
.panel-collapse .accordion-body {
padding: 0 32px 32px 32px;
/*margin-top: -1em; Поднятие вверх толком не работает - при сворачивании/разворачивании текст сверху обрезается */
}
.items-list1.item-views .item .previewtext {
margin: 0;
}
.item-views .item .previewtext p {
margin: 0 0 1em 0;
}
.item-views .item .previewtext p:last-child {
margin: 0;
}
@media (max-width: 475px) {
.item-views.items-list1 .tabs .tab-content {
padding-top: 16px;
}
.accordion-type-1 .item-accordion-wrapper .accordion-head {
padding: 16px;
}
.accordion-type-1 .item-accordion-wrapper .accordion-head {
font-size: 20px;
}
.panel-collapse .accordion-body {
padding: 0 16px 16px 16px;
}
.panel-collapse .accordion-body,
.item-views .item .previewtext p {
font-size: 14px !important;
}
}
@media (max-width: 375px) {
.accordion-type-1 .item-accordion-wrapper .accordion-head {
font-size: 16px;
}
}
/* Закрывает экран серым фоном и показывает индикатор обработки. Используется в редакторе цветов в коллекции. */
.backdrop {
position: fixed;
display: none;
justify-content: center;
align-items: center;
left: 0;
right: 0;
width: 100%;
height: 100%;
background: #0008;
z-index: 10000;
}
.backdrop.active {
display: flex;
}
.backdrop__loader {
width: 180px;
height: 64px;
background: #fff9;
border-radius: 4px;
box-shadow: 0 0 10px 0 white;
animation: backdrop-loader 2s infinite;
}
.backdrop__img {
display: block;
width: 152px;
height: 64px;
}
@keyframes backdrop-loader {
0% {background: #fff9;}
50% {background: #ffff;}
100% {background: #fff9;}
}
.ims-buttons {display: flex; align-items: center;}
.ims-buttons_wrap {flex-wrap: wrap;}
.ims-buttons_wrap .ims-button {margin-bottom: 10px;}
.ims-buttons_vertical {display: block; width: max-content;}
.ims-buttons_vertical .ims-button {margin: 0 0 10px 0;}
.ims-button-input {display: none;}
/*
* Стили взяты с аспровских классов .landings-list__name и .landings-list__item--hover-bg.
* Использовать их напрямую для своих нужд нельзя - Аспро цепляет к ним обработчики.
*/
.ims-button {
position: relative;
display: inline-block;
padding: 6px 10px 8px 10px;
border: 1px solid #ececec;
border-color: var(--stroke_black);
border-radius: 6px;
color: #333;
color: var(--white_text_black);
line-height: 16px;
vertical-align: middle;
transition: all 0.25s;
cursor: pointer;
user-select: none;
}
.ims-button:hover {
background: #f0f0f0;
background: var(--darkerblack_bg_black);
}
.ims-button.active,
input:checked + .ims-button {color: #f2722c;}
.ims-button_clear {
border-color: var(--ims-red);
background: var(--ims-red);
color: white;
}
.ims-button_clear::after {
content: '×';
padding-left: 17px;
font-size: 20px;
line-height: 14px;
vertical-align: middle;
}
.ims-button_clear:hover {
background: #d42c53;
}
.ims-button_wide {
width: 100%;
}
.ims-button_center {
justify-content: center;
}
.ims-button_fat,
.filter-panel__filter .ims-button_fat {
padding: 12px 24px 13px 24px;
border-radius: 8px;
}
.ims-button_fat_arrow,
.filter-panel__filter .ims-button_fat_arrow {
padding-right: 12px;
}
@media (max-width: 400px) {
.ims-button_fat_filtering,
.filter-panel__filter .ims-button_fat_filtering {
padding-left: 12px;
padding-right: 12px;
}
}
.ims-button_fat2 {
display: inline-flex;
justify-content: center;
align-items: center;
height: 48px;
padding: 0 17px;
border-radius: 8px;
}
.ims-button_slim {
padding: 5px 12px 6px 12px;
}
.ims-button_gray {
border: none;
background: #f5f5f5;
}
.ims-button_gray:hover,
.ims-button_gray.active,
.ims-button_gray.cur {
background: #4b4b4b;
color: white;
}
.ims-button_gray:hover .cls-1,
.ims-button_gray.active .cls-1,
.ims-button_gray.cur .cls-1 { /* svg */
fill: white;
}
.ims-button_red,
.ims-button_red:hover {
border: none;
background: var(--ims-red);
color: white;
}
.ims-button_red:hover,
.ims-button_red.active {
background: var(--ims-lred);
color: white;
}
.ims-button_lred,
.ims-button_lred:hover {
border: none;
background: var(--ims-lred);
color: white;
}
.ims-button_lred:hover,
.ims-button_lred.active {
color: white;
text-shadow: 0 0 5px white;
}
/* Лучшие предложения на главной, чтобы хоть как-то влезало */
@media (max-width: 767px) {
.ims-button_best-offers {
padding-left: 8px !important;
padding-right: 8px !important;
font-size: 14px !important;
}
}
.ims-button_turgid,
.mega-menu table td .wrap > .ims-button_turgid {
display: inline-flex;
align-items: center;
height: 48px;
padding: 0 17px;
border-radius: 8px;
font-size: 16px;
font-weight: normal;
text-decoration: none;
text-transform: none;
}
.ims-button_turgid,
.ims-button_turgid:hover,
.ims-button_turgid:focus {
border: none;
background: var(--ims-lred);
color: white;
}
.ims-button_turgid:hover,
.ims-button_turgid.active,
.ims-button_turgid.cur {
color: white;
text-shadow: 0 0 5px white;
}
.ims-button__turgid-icon,
.mega-menu table td .wrap > .svg.ims-button_turgid-icon {
top: 0 !important;
width: 24px;
margin-right: 12px !important;
fill: white;
}
@media (max-width: 1279px) {
.ims-button__turgid_header-project .ims-button__turgid-icon {
display: none;
}
}
@media (max-width: 475px) {
.ims-button__turgid_sm-wide {
width: 100%;
justify-content: center;
}
}
.ims-button_active-landing,
.ims-button_active-landing:hover {
border: none;
background: var(--ims-red);
color: white;
cursor: default;
}
.ims-button_with-rarrow {
padding-right: 12px;
}
.ims-button__rarrow {
top: 0;
margin-left: 4px;
transform: rotateZ(90deg);
}
/*.ims-button_with-rarrow:hover .ims-button__rarrow .cls-1 {
fill: #333;
}*/
.ims-button_with-reset {
overflow: hidden;
padding-right: 41px;
}
.ims-button__reset,
.landings-list__name.landings-list__item--reset .landings-list__clear-filter {
position: absolute;
display: block;
right: 0;
top: 0;
bottom: 0;
width: 33px;
border-radius: 0 3px 3px 0;
cursor: pointer;
}
.ims-button__reset::before,
.landings-list__name.landings-list__item--reset .landings-list__clear-filter::before {
content: '';
position: absolute;
display: block;
left: 0;
top: -2px;
bottom: -2px;
width: 1px;
background: rgba(255,255,255,.1);
}
.ims-button__reset::after {
content: '×';
position: absolute;
display: flex;
justify-content: center;
align-items: center;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: 0;
font-size: 20px;
font-weight: 600;
}
.ims-button__reset:hover::after {
background: #d42c53;
}
/*.ims-button_bright {
border: none;
background: #f5f5f5;
}
.ims-button_bright:hover {
background: var(--ims-lred);
color: white;
}*/
.ims-button_box,
.ims-button_box:hover {
display: flex;
justify-content: center;
align-items: center;
width: 48px;
height: 48px;
border: none;
border-radius: 8px;
background: white;
transition: all 0.25s;
}
.ims-button-hover:hover .ims-button_box,
.ims-button_box:hover {
background: var(--ims-red);
}
@media (min-width: 476px) and (max-width: 767px) {
.ims-button_box {width: 40px; height: 40px;}
}
.ims-button_coffer {
display: flex;
align-items: center;
height: 25px;
padding: 0 10px;
margin: 0 3px 0 0;
border: 1px solid #dedede;
border-radius: 4px;
background: white;
color: inherit;
font-weight: normal;
line-height: inherit;
user-select: none;
cursor: pointer;
transition: box-shadow 0.25s;
}
.ims-button_coffer::before {
display:none;
}
.ims-button_coffer:hover {
background: white;
box-shadow: 0 0 10px 0px #dedede;
}
.ims-button_coffer-kp {
margin-right: 15px;
}
.ims-button_danger,
.ims-button_danger:focus {
margin: 10px 0px 20px 0px;
border: none;
background: #ff4444;
color: white;
}
.ims-button_danger:hover {
box-shadow: 0 0 10px 0px #ff4444;
}
.ims-button_autoheight {
height: auto;
}
.ims-button_linked {
padding: 0;
}
.ims-button__link,
.ims-button__link:hover,
.ims-button__link:active,
.ims-button__link:focus {display: block; padding: 0 10px; color: inherit;}
.color-button {
display: flex;
flex-direction: column;
width: 120px;
border-radius: 4px;
cursor: pointer;
user-select: none;
}
.color-button__img {
display: block;
width: 100%;
margin-bottom: 8px;
border-radius: 4px;
}
/*.color-button__image {
height: 120px;
overflow: hidden;
margin-bottom: 8px;
border-radius: 4px;
}
.color-button__img {
display: block;
width: 100%;
}*/
.color-button__clear {
flex-grow: 1;
display: flex;
justify-content: center;
align-items: center;
}
.color-button__clear-content {
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
padding: 0 0 1px 1px;
border: 1px solid #333;
border-radius: 50%;
background: white;
font-size: 40px;
}
.color-button__name {
overflow: hidden;
text-overflow: ellipsis;
font-size: 12px;
line-height: 135%;
text-align: center;
}
.color-button:hover {
background: #f5f5f5;
box-shadow: 0 0 0 3px #f5f5f5;
}
.color-button:hover .color-button__name {
color: var(--ims-red);
}
.fold-button {
position: relative;
display: block;
padding: 6px 10px 8px 10px;
font-size: 15px;
color: var(--ims-red);
color: var(--fill_dark_light_hover);
line-height: 16px;
user-select: none;
}
.fold-button_text {
padding-left: 0;
}
/* Стрелка, рисующаяся через ::after */
/*.arrow-after {
--arrow-width: 16px;
--arrow-height: calc(var(--arrow-width) / 16 * 12);
}
.arrow-after::after {
content: '';
display: block;
width: var(--arrow-width);
height: var(--arrow-height);
background: url(/local/templates/2mebel/images/ims/icons/black_arrow.svg) no-repeat;
background-size: var(--arrow-width) var(--arrow-height);
transition: all 0.25s;
}
.arrow-after_right-top::after {
transform: rotateZ(-45deg);
}
.arrow-after_box-button {
--arrow-width: 20px;
}
@media (min-width: 476px) and (max-width: 767px) {
.arrow-after_box-button {--arrow-width: 17px;}
}
.arrow-after_white::after {
filter: var(--filter-white);
}
.arrow-after_red::after {
filter: var(--filter-red);
}
.arrow-after-hover:hover .arrow-after_to-white::after,
.arrow-after_to-white:hover::after {
filter: var(--filter-white);
}
.arrow-after-hover:hover .arrow-after_to-red::after,
.arrow-after_to-red:hover::after {
filter: var(--filter-red);
}*/
/* Группировка тэгов */
.tags-grouping {}
/*
* .tags-grouping__all - абсолютно позиционируем, чтобы впихнуть рядом с кнопкой фильтра.
* Позиционирование не через top, а через bottom - потому что Битрикс/Аспро могут
* в .top-content-block выше тэгов ещё какого-нибудь содержимого добавить - блок станет
* выше, top будет располагаться выше, чем нам надо.
*/
.tags-grouping__all {display: none; position: absolute; left:0; bottom: -54px;}
.tags-grouping__list {position: relative; z-index: 1;}
.tags-grouping__clear {display: flex; align-items: center; gap: 0 15px; margin-top: 30px;}
.tags-group {
position: relative;
}
.tags-group__section {}
.tags-group__section-name {
margin-bottom: 8px;
font-weight: bold;
}
.tags-group__section-tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.tags-group__button {}
.tags-group__button-arrow {
margin-left: 4px;
transform: rotate(180deg);
transition: all 0.25s;
}
/*.tags-group__button:hover .tags-group__button-arrow .cls-1 {
fill: #333;
}*/
.tags-group.active .tags-group__button-arrow {
transform: rotate(0deg);
}
.tags-group__tags {
position: absolute;
left: 0;
top: 0;
display: none;
width: max-content;
padding: 30px 25px 30px 35px;
border-radius: 8px;
background: white;
box-shadow: 0 0 15px 0 #bbb;
z-index: 1;
}
.tags-group__tags-window {
overflow: auto;
display: flex;
flex-wrap: wrap;
gap: 10px;
width: max-content;
max-width: 575px;
max-height: 300px;
padding-right: 10px;
scrollbar-width: thin;
scrollbar-color: var(--ims-red) transparent;
}
.tags-group.active .tags-group__tags {
display: flex;
}
.tags-group__tag {}
@media (max-width: 991px) {
/*
* Кнопка фильтра, сортировки и режима отображения товаров сделаны через float,
* вертикальное центрирование не работает. Поэтому для выравнивания используем margin.
*/
.filter-panel > div:not(.filter-panel__filter) {
margin-top: 3px;
}
/*
* Раньше кнопка фильтра была текстом, отделялась от сортировки вертикальной палочкой.
* Теперь кнопка выглядит как жирная кнопка, никакой палочки не надо.
*/
.filter-panel__filter .controls-hr {
background: none;
}
}
/* Для узких экранов: прячем отдельные кнопки групп, показываем единую кнопку для всех групп */
@media (max-width: 767px) {
/*
* Обнуляем высоту блока с группами, чтобы при абсолютном позиционировании
* кнопки "Подборки товаров" он не занимал лишнего места.
*/
.top-content-block > .tags-grouping {
padding-bottom: 0;
}
.tags-grouping__all {
display: block;
}
.tags-grouping__list {
display: none;
}
.tags-group__tags-window {
flex-direction: column;
flex-wrap: nowrap;
gap: 20px;
}
.tags-group__tags {
width: 100vw;
padding: 20px 17px;
border-radius: 0;
}
.tags-group__tags-window {
max-width: initial;
}
/* Выделяем пространство для кнопки "Подборки товаров" */
.filter-panel__filter_with-tag-groups {
margin-left: 205px;
}
}
@media (max-width: 400px) {
.filter-panel-wrapper {
margin-right: -16px;
}
.filter-panel__filter_with-tag-groups {
margin-left: 190px;
}
}
.admin-action {
display: inline-block;
color: #0f9fb9;
text-decoration: underline;
cursor: pointer;
user-select: none;
}
.admin-action:hover {
text-decoration: none;
}
.admin-action_disabled {
color: #aaa;
text-decoration: none;
cursor: default
}
.sitemap-list {padding: 0; margin: 0 0 0 20px;}
.sitemap-list > li,
.sitemap-list > li:first-of-type {margin: 0; list-style-type: circle;}
.sitemap-list > li::before,
.sitemap-list:not([id*="bx_"]) > li::before {content: none; margin: 0;}
.foldable {}
.foldable_index-cabs {margin-top: 16px;}
.foldable__window {overflow:hidden;}
.foldable__button {
display:none;
margin-top:5px;
cursor:pointer;
user-select: none;
}
.foldable__button-show {display:initial;}
.foldable__button-hide {display:none;}
.foldable__button-arrow {display:inline-block !important; margin-left:5px;}
.foldable-buttoned .foldable__button {display:inline-block;}
.foldable-open .foldable__window {max-height: none;}
.foldable-open .foldable__button-show {display:none;}
.foldable-open .foldable__button-hide {display:initial;}
.foldable-open .foldable__button-arrow {transform:rotateZ(180deg);}
.foldable:not(.foldable-enabled) .foldable__window {max-height:none;}
.foldable:not(.foldable-enabled) .foldable__button {display:none;}
.top-panel {position: fixed; left: 0; top: 0; width: 100%; padding: 3px 10px 0px 10px; border: 1px solid #a0a0a0; background: #f8f8f8; font-size: 13px; z-index: 1000;}
.top-panel_coffer {}
.top-panel_status {padding: 0 10px;}
.item-to-coffer {
margin-top: 15px;
text-align: center;
text-transform: uppercase;
user-select: none;
}
.item-to-coffer__add {
color: #0f9fb9;
text-decoration: underline;
cursor: pointer;
}
.item-to-coffer__add:hover {
text-decoration: none;
}
.item-to-coffer__have {
display: none;
color: #bbb;
text-decoration: underline;
cursor: default;
}
.item-to-coffer_have .item-to-coffer__add {
display: none;
}
.item-to-coffer_have .item-to-coffer__have {
display: block;
}
.dellin-calc {}
.dellin-calc__text {width: 95%; padding: 0 5px;}
.section-gallery-wrapper__item_limited {
display: none;
}
.section-gallery-wrapper__item_unfiltered {
display: none;
}
.section-gallery-wrapper__item_filtered {
display: block;
}
.catalog_block_division_section_title {
width: 100%;
padding: 20px 0 !important;
margin-top: 20px !important;
font-size: 26px;
font-weight: 600;
text-transform: uppercase;
text-align: center;
}
.cnt_magnifier {
display: none;
position: absolute;
left: 50%;
top: 50%;
width: 80%;
height: 80%;
transform: translate3d(-50%, -50%, 0) !important;
}
.cnt_magnifier use {
fill: #0008;
stroke: #0008;
transition: all 0.2s;
}
.cnt_magnifier:hover use {
fill: #f26213;
stroke: #f26213;
}
.active .cnt_magnifier {
display: block;
}
.modal {
}
.modal__close {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
right: -9px;
top: -10px;
width: 30px;
height: 30px;
border-radius: 50%;
border:2px solid #333;
background: white;
font-size: 20px;
cursor: pointer;
transition: color 0.2s;
z-index: 1;
}
.modal__close:hover {
color: #f26213;
}
.modal__body {
padding: 10px 20px;
}
.color-modal {
}
.color-modal__close {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
right: -9px;
top: -10px;
width: 30px;
height: 30px;
border-radius: 50%;
border:2px solid #333;
background: white;
font-size: 20px;
cursor: pointer;
transition: color 0.2s;
z-index: 1;
}
.color-modal__close:hover {
color: #f26213;
}
.color-modal__body {
display: flex;
justify-content: center;
align-items: center;
padding: 10px 0;
}
.color-modal__image {
border-radius: 6px;
max-width: 100%;
max-height: 100%;
}
.colors-editor {
width: 100%;
}
.colors-editor td {
vertical-align: top;
}
.colors-editor tr:not(:last-child) td {
padding-bottom: 40px;
}
.colors-editor__name {
width: 220px;
padding-right: 20px;
}
.colors-editor__image {}
.colors-editor__img {
display: block;
margin: 0 0 8px 0;
}
.properties__link {
border-bottom: 1px dotted;
}
/*
Расстояния между блоками на главной.
У Аспро расстояния делаются вверх от .maxwidth-theme.
Это расстояние и будем регулировать.
У части аспровских блоков внутри ещё есть всякие расстояния,
особенно часто - вниз. Поэтому отступ .maxwidth-theme делаем
с их учётом.
*/
.wrapper1:not(.with_left_block) .wrapper_inner.front
.drag-block.container
.content_wrapper_block > .maxwidth-theme {padding-top: 96px;}
.wrapper1:not(.with_left_block) .wrapper_inner.front
.drag-block.container[data-class="product_amounts_drag"]
.content_wrapper_block > .maxwidth-theme {padding-top: 16px;}
body#main .wrapper1 .wrapper_inner.front
.drag-block.container[data-class="stories_drag"]
.content_wrapper_block.no-title > .maxwidth-theme {padding-top: 32px;}
[data-class="design_help_drag"] .xection {margin-top: 96px;}
.wrapper1:not(.with_left_block) .wrapper_inner.front
.drag-block.container[data-class="tizers_drag"]
.content_wrapper_block > .maxwidth-theme {padding-top: 32px;}
[data-class="tizers_drag"] .item-views.tizers {padding: 0;}
.wrapper1:not(.with_left_block) .wrapper_inner.front
.drag-block.container[data-class="catalog_sections_drag"]
.content_wrapper_block > .maxwidth-theme {padding-top: 64px;}
.wrapper1:not(.with_left_block) .wrapper_inner.front
.drag-block.container[data-class="catalog_tab_drag"]
.tab_slider_wrapp {padding: 0;}
.wrapper1:not(.with_left_block) .wrapper_inner.front
.drag-block.container[data-class="reviews_drag"]
.content_wrapper_block > .maxwidth-theme {padding-top: 69px;}
[data-class="faq_drag"] .tabs {margin:0;}
.wrapper1:not(.with_left_block) .wrapper_inner.front .drag-block.container .item-views.float_banners:not(.type2) {padding-bottom: 0;}
.wrapper1:not(.with_left_block) .wrapper_inner.front .drag-block.container .item-views.news2:not(.with-border) {padding-bottom: 0;}
.wrapper1:not(.with_left_block) .wrapper_inner.front
.drag-block.container[data-class="blog_drag"] {margin-top: 64px;}
.wrapper1:not(.with_left_block) .wrapper_inner.front
.drag-block.container[data-class="blog_drag"]
.item-views.news2.with-border {padding-bottom: 0;}
.wrapper1:not(.with_left_block) .wrapper_inner.front
.drag-block.container[data-class="blog_drag"]
.content_wrapper_block > .maxwidth-theme {padding-top: 32px;}
.wrapper1:not(.with_left_block) .wrapper_inner.front
.drag-block.container[data-class="middle_adv_drag"]
.content_wrapper_block > .maxwidth-theme {padding-top: 0;}
.wrapper1:not(.with_left_block) .wrapper_inner.front
.drag-block.container[data-class="vk_drag"] {margin-top: 96px;}
.wrapper1:not(.with_left_block) .wrapper_inner.front
.drag-block.container[data-class="vk_drag"]
.content_wrapper_block > .maxwidth-theme {padding-top: 32px;}
.drag-block.container[data-class="catalog_tab_drag"] .top_block h2 {
margin: 0 0 24px 0;
}
.drag-block.container .top_block .header-with-siblings {
margin: 0 38px 0 0;
}
/* Лэндинги */
.landing-main {
color: var(--theme-color-main);
}
.landing-main h1, .landing-main h2, .landing-main h3, .landing-main h4, .landing-main h5, .landing-main h6 {
margin-top: 0;
margin-bottom: 0.5rem;
}
.landing-main h6 {
font-size: 1rem;
}
.landing-main .order-1 {
order: 1;
}
.landing-main p {
margin-top: 0;
margin-bottom: 1rem;
}
.landing-main blockquote {
padding: 0;
margin: 0;
border: none;
font-weight: 400;
}
.landing-main blockquote::before {
content: initial;
}
.landing-header .g-py-25 {
padding: 0 !important;
}
.landing-header .navbar {
width: 100%;
max-width: 100%;
padding: 0 !important;
/*margin-bottom: 0;*/
}
.landing-header .navbar .container {
width: 100%;
max-width: 100%;
padding: 0;
}
.landing-header .navbar-collapse {
padding: 0;
}
.landing-block .container {
width: 100%;
}
.landing-block .row {
margin-left: 0;
margin-right: 0;
}
.landing-block-node-button-container {
max-width: 100%;
}
/* Сверху есть блок с гигантскими буквами. На лэндингах размер шрифта там считается через JS.
При встраивании этот JS почему-то не работает. Указываем через CSS, что шрифт должен быть
не слишком маленьким на широких экранах, и не слишком большим - на узких.
*/
.block-41-3-announcement-with-slider h2.landing-block-node-title {
font-size: min(59px, 12vw) !important;
}
.landing-block-node-menu-list-item {
margin-top: 0 !important;
}
.landing-block-node-menu-list-item::before {
content: initial !important;
}
.landing-block-node-menu-list-item:first-child {
margin-left: 0 !important;
}
.landing-header .hamburger-inner {
background-color: #333 !important;
}
#footer .row {
display: block !important;
}
/* Хз, зачем в лэндингах max-width: 16.6% указана. Это портачит подвал в полной и мобильной версиях. */
#footer .col-md-2,
#footer .col-sm-3 {
max-width: 100% !important;
}
#footer .contact-block {
max-width: 100% !important;
}
/* container */
.responsive-two-column-grid {
display:block;
}
/* columns */
.responsive-two-column-grid > * {
padding:4rem;
background-color: #eaeaea;
}
/* tablet breakpoint */
@media (min-width:768px) {
.responsive-two-column-grid {
display: grid;
grid-template-columns: 1fr 1fr;
}
}
.see-all-section {
margin: 10px 0 64px 0;
text-align: center;
}
.see-all-section__link {
text-decoration: underline;
}
/* Шрифт Lora на сайте слишком мелкий - увеличиваем */
body, body .ymaps-map {
font-size: 16px;
}
/*.font_sm {
font-size: inherit;
}*/
.font_xs {
font-size: 0.933em;
}
.font_sxs {
font-size: 0.9em;
}
.logo-row .top-description .js_city_chooser {
font-size: 15px;
}
.top-block .menu.topest li {
font-size: 15px;
}
.logo_and_menu-row .wrap_icon .name, .logo_and_menu-row .wrap_icon .title {
font-size: 0.75em;
}
.auth_wr_inner .dropdown-menu li a {
font-size: 14px;
}
.logo_and_menu-row .search .search-input {
font-size: 0.933em;
}
.bx_filter .bx_filter_parameters_box {
border-bottom: none;
}
.bx_filter .bx_filter_parameters_box_title {
font-size: 15px;
font-weight: 600;
}
.bx_filter_vertical .bx_filter_block label, .bx_filter_vertical .bx_filter_block label span {
font-size: 15px;
}
.bx_filter .bx_ui_slider_part span {
font-size: 12px;
}
.bx_filter .sku .bx_filter_input_checkbox .bx_filter_param_text, .sku_props .bx_item_detail_size ul li span {
font-size: 14px;
}
.sku_props .bx_item_section_name {
font-size: 0.9em;
}
.catalog_detail .sku_props .bx_item_section_name {
font-size: 0.933em;
}
#main .like_icons.list > div span {
font-size: 12px;
}
#main .catalog_detail .item-stock > span, #main .catalog_detail .cheaper_form > span, #main .catalog_detail .table_sizes span, #main .catalog_detail .calculate-delivery-preview .font_sxs, #main .catalog_detail .calculate-delivery-preview .font_xs, #main .catalog_detail .price_txt {
font-size: 14px;
}
.item-views .item .previewtext p, .item-views.table-elements .item .body-info .previewtext, body .items-services.item-views .item .body-info .previewtext {
font-size: 15px;
}
.side-block__text.side-block__text--small {
font-size: 0.933em;
}
.font_upper {
font-size: 0.733em;
}
.product_box_rating {
opacity: 0.5;
position:relative;
margin:5px 0;
width:85px;
height:14px;
background:url(/local/templates/2mebel/images/icons_rate.png) 0 0 no-repeat;
}
.product_box_rating .rating_vol {
position:absolute;
left:0;
top:0;
width:0;
height:14px;
background:url(/local/templates/2mebel/images/icons_rate.png) 0 -14px no-repeat;
}