/* ==========================================================================
ROMATTI — Mobile Menu Redesign (premium / modern luxury / architectural)
--------------------------------------------------------------------------
Файл подключается ПОСЛЕ mega-menu/styles/main.css и переопределяет
визуальную подачу мобильного меню. Все стили ограничены контейнерами
.mobile_menu_wrapper и .mgmn-mobile-menu.mgmn-mobile-inline — не влияют
на десктоп.
Палитра:
--rm-bg #F7F5F0 мягкий тёплый фон меню
--rm-surface #FFFFFF карточки
--rm-surface-soft #FAF7F1 мягкий вторичный фон / hover
--rm-icon-bg #F4F0E8 контейнер иконки категории
--rm-text #1F1F1F основной текст
--rm-text-muted #8A8378 вторичный
--rm-divider #E4DED5 мягкий разделитель
--rm-border #E8E2D8 бордер карточек
--rm-border-strong #DAD6CE бордер input/секций
--rm-yellow #FFD51E фирменный жёлтый
--rm-yellow-dark #F6C800
--rm-champagne #C8A96A тёплый латунный акцент (дозированно)
--rm-hover #F5F0E6 фон hover/active
--rm-tint-yellow #FFF9DF светлый жёлтый фон для активных табов
--rm-sale #C84A3A HoReCa / SALE
--rm-new #4F8A3D Новинки
========================================================================== */
@media (max-width: 1199px) {
:root {
--rm-bg: #F7F5F0;
--rm-surface: #FFFFFF;
--rm-surface-soft: #FAF7F1;
--rm-icon-bg: #F4F0E8;
--rm-text: #1F1F1F;
--rm-text-muted: #8A8378;
--rm-divider: #E4DED5;
--rm-border: #E8E2D8;
--rm-border-strong: #DAD6CE;
--rm-yellow: #FFD51E;
--rm-yellow-dark: #F6C800;
--rm-champagne: #C8A96A;
--rm-hover: #F5F0E6;
--rm-tint-yellow: #FFF9DF;
--rm-sale: #C84A3A;
--rm-new: #4F8A3D;
}
/* ===================== Контейнер меню + анимация открытия ===================== */
/* Заменяем display:none → visibility/opacity/transform, чтобы было плавное
fade+slide открытие. JS добавляет body.mobile_menu_open — переключаем стейт.
Старое `body.mobile_menu_open .mobile_menu_wrapper { display: block }`
перебиваем через display: block по умолчанию. */
.mobile_menu_wrapper {
display: block;
visibility: hidden;
opacity: 0;
transform: translateY(-10px);
pointer-events: none;
background: var(--rm-bg);
color: var(--rm-text);
font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
text-align: left; /* перебивает text-align: center из style.css */
-webkit-font-smoothing: antialiased;
transition:
opacity 240ms cubic-bezier(0.22, 0.61, 0.36, 1),
transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1),
visibility 0s linear 240ms;
}
body.mobile_menu_open .mobile_menu_wrapper {
visibility: visible;
opacity: 1;
transform: translateY(0);
pointer-events: auto;
transition:
opacity 260ms cubic-bezier(0.22, 0.61, 0.36, 1),
transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1),
visibility 0s linear 0s;
}
.mobile_menu_wrapper .mobile_menu_inner {
padding: 16px;
display: flex;
flex-direction: column;
gap: 14px;
text-align: left;
}
/* Лёгкий stagger-in для крупных блоков внутри меню */
body.mobile_menu_open .mobile_menu_inner > * {
animation: rm-mobile-fade-in 320ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
body.mobile_menu_open .mobile_menu_inner > *:nth-child(1) { animation-delay: 40ms; }
body.mobile_menu_open .mobile_menu_inner > *:nth-child(2) { animation-delay: 80ms; }
body.mobile_menu_open .mobile_menu_inner > *:nth-child(3) { animation-delay: 120ms; }
body.mobile_menu_open .mobile_menu_inner > *:nth-child(4) { animation-delay: 160ms; }
body.mobile_menu_open .mobile_menu_inner > *:nth-child(n+5) { animation-delay: 180ms; }
@keyframes rm-mobile-fade-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
.mobile_menu_wrapper,
body.mobile_menu_open .mobile_menu_wrapper,
body.mobile_menu_open .mobile_menu_inner > * {
transition: none !important;
animation: none !important;
}
.mgmn-mobile-inline .mgmn-mobile-category-content-wrapper,
.mgmn-mobile-inline .mgmn-mobile-block-list-wrapper {
transition: grid-template-rows 0s linear !important;
animation: none !important;
}
}
/* ===================== Поиск (если ввод попадает сюда) ===================== */
.mobile_menu_wrapper input[type="text"],
.mobile_menu_wrapper input[type="search"] {
height: 46px;
padding: 0 14px;
border-radius: 12px;
border: 1px solid var(--rm-border-strong);
background: var(--rm-surface);
font-size: 14px;
color: var(--rm-text);
transition: border-color 160ms ease, box-shadow 160ms ease;
}
.mobile_menu_wrapper input[type="text"]:focus,
.mobile_menu_wrapper input[type="search"]:focus {
outline: none;
border-color: var(--rm-champagne);
box-shadow: 0 0 0 3px rgba(200, 169, 106, 0.18);
}
/* ===================== Избранное / Личный кабинет ===================== */
.mobile_menu_wrapper .mobile_actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
.mobile_menu_wrapper .mobile_actions li {
margin: 0;
padding: 0;
list-style: none;
}
.mobile_menu_wrapper .mobile_actions li a {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
height: 46px;
padding: 0 12px;
background: var(--rm-surface);
border: 1px solid var(--rm-border);
border-radius: 12px;
color: var(--rm-text);
font-size: 13px;
font-weight: 500;
text-decoration: none;
transition: background-color 160ms ease, border-color 160ms ease;
}
.mobile_menu_wrapper .mobile_actions li a:hover,
.mobile_menu_wrapper .mobile_actions li a:focus-visible {
background: var(--rm-tint-yellow);
border-color: var(--rm-yellow);
outline: none;
}
.mobile_menu_wrapper .mobile_actions li a i {
font-size: 18px;
line-height: 1;
}
/* ===================== Inline мега-меню — категории ===================== */
.mgmn-mobile-menu.mgmn-mobile-inline {
background: transparent;
margin: 4px 0 0;
}
.mgmn-mobile-inline .mgmn-mobile-menu-content {
display: flex;
flex-direction: column;
gap: 8px;
padding: 0;
}
/* Каждая категория = карточка */
.mgmn-mobile-inline .mgmn-mobile-category {
position: relative;
background: var(--rm-surface);
border: 1px solid var(--rm-border);
border-radius: 14px;
overflow: hidden;
box-shadow: 0 4px 14px rgba(20, 20, 20, 0.04);
transition: border-color 220ms ease, box-shadow 220ms ease, background 220ms ease;
}
.mgmn-mobile-inline .mgmn-mobile-category.mgmn-expanded {
background: linear-gradient(180deg, #FFFFFF 0%, var(--rm-surface-soft) 100%);
border-color: rgba(200, 169, 106, 0.45);
box-shadow: 0 8px 22px rgba(20, 20, 20, 0.06);
}
/* Тонкая champagne-линия сверху раскрытой категории */
.mgmn-mobile-inline .mgmn-mobile-category.mgmn-expanded::before {
content: "";
position: absolute;
top: 0;
left: 12px;
right: 12px;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(200, 169, 106, 0.55) 50%,
transparent 100%);
pointer-events: none;
}
/* Шапка категории */
.mgmn-mobile-inline .mgmn-mobile-category-header {
display: flex;
align-items: center;
gap: 12px;
min-height: 60px;
padding: 14px 16px;
background: transparent;
cursor: pointer;
user-select: none;
-webkit-tap-highlight-color: transparent;
transition: background-color 160ms ease;
}
.mgmn-mobile-inline .mgmn-mobile-category-header:hover {
background: rgba(244, 240, 232, 0.4);
}
.mgmn-mobile-inline .mgmn-mobile-category-header:active {
background: var(--rm-hover);
}
/* Иконка категории в мягком контейнере */
.mgmn-mobile-inline .mgmn-mobile-category-icon {
width: 36px;
height: 36px;
flex-shrink: 0;
padding: 7px;
object-fit: contain;
background: var(--rm-icon-bg);
border-radius: 10px;
opacity: 0.95;
}
/* Заголовок — без подчёркивания, ровный */
.mgmn-mobile-inline .mgmn-mobile-category-title {
flex: 1;
font-size: 15px;
font-weight: 500;
color: var(--rm-text);
line-height: 1.35;
margin: 0;
}
.mgmn-mobile-inline .mgmn-mobile-category-title .mgmn-category-title-link {
color: inherit;
font-weight: 500;
text-decoration: none;
}
.mgmn-mobile-inline .mgmn-mobile-category-title .mgmn-category-title-link:hover,
.mgmn-mobile-inline .mgmn-mobile-category-title .mgmn-category-title-link:focus-visible,
.mgmn-mobile-inline .mgmn-mobile-category-title .mgmn-category-title-link:active {
color: inherit;
text-decoration: none;
outline: none;
}
.mgmn-mobile-inline .mgmn-mobile-category.mgmn-expanded .mgmn-mobile-category-title {
font-weight: 600;
}
/* Chevron вместо текстового ▼ */
.mgmn-mobile-inline .mgmn-mobile-category-toggle,
.mgmn-mobile-inline .mgmn-mobile-block-toggle,
.mgmn-mobile-inline .mgmn-mobile-menu-footer .mgmn-mobile-footer-toggle {
width: 22px;
height: 22px;
flex-shrink: 0;
font-size: 0;
color: transparent;
background-image: url("data:image/svg+xml;utf8,");
background-size: 14px 14px;
background-repeat: no-repeat;
background-position: center;
transition: transform 180ms ease, opacity 180ms ease;
opacity: 0.55;
}
.mgmn-mobile-inline .mgmn-mobile-category.mgmn-expanded .mgmn-mobile-category-toggle,
.mgmn-mobile-inline .mgmn-mobile-block.mgmn-block-expanded .mgmn-mobile-block-toggle,
.mgmn-mobile-inline .mgmn-mobile-menu-footer .mgmn-mobile-footer-item.mgmn-footer-expanded .mgmn-mobile-footer-toggle {
transform: rotate(180deg);
opacity: 1;
}
/* Раскрытый контент категории: CSS Grid accordion без JS-измерений. */
.mgmn-mobile-inline .mgmn-mobile-category-content-wrapper {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 420ms cubic-bezier(0.22, 1, 0.36, 1);
background: transparent;
}
.mgmn-mobile-inline .mgmn-mobile-category.mgmn-expanded > .mgmn-mobile-category-content-wrapper {
grid-template-rows: 1fr;
}
.mgmn-mobile-inline .mgmn-mobile-category-content,
.mgmn-mobile-inline .mgmn-mobile-category-list {
min-height: 0;
max-height: none; /* перебивает legacy max-height: 0 из mobile-menu.css */
opacity: 0;
overflow: hidden;
transform: translateY(-4px);
transition:
opacity 220ms ease,
transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
background: transparent;
padding: 0 10px;
}
.mgmn-mobile-inline .mgmn-mobile-category.mgmn-expanded > .mgmn-mobile-category-content-wrapper > .mgmn-mobile-category-content,
.mgmn-mobile-inline .mgmn-mobile-category.mgmn-expanded > .mgmn-mobile-category-content-wrapper > .mgmn-mobile-category-list {
opacity: 1;
transform: translateY(0);
/* Воздух снизу, чтобы последний блок не прижимался к границе карточки */
padding-bottom: 8px;
}
/* Soft divider между header и content */
.mgmn-mobile-inline .mgmn-mobile-category.mgmn-expanded > .mgmn-mobile-category-content-wrapper {
border-top: 1px solid rgba(228, 222, 213, 0.7);
margin-top: 0;
}
/* ===================== Блоки внутри категории ===================== */
.mgmn-mobile-inline .mgmn-mobile-block {
margin-top: 8px;
padding: 0; /* ресет legacy padding: 20px 24px */
background: rgba(255, 255, 255, 0.72);
border: 1px solid var(--rm-border);
border-radius: 12px;
overflow: hidden;
transition: border-color 200ms ease, background-color 200ms ease;
}
.mgmn-mobile-inline .mgmn-mobile-block:first-child {
margin-top: 4px;
padding-top: 0; /* ресет legacy padding-top: 24px */
}
.mgmn-mobile-inline .mgmn-mobile-block:last-child {
padding-bottom: 0; /* ресет legacy padding-bottom: 24px */
}
.mgmn-mobile-inline .mgmn-mobile-block.mgmn-block-expanded {
background: var(--rm-surface);
border-color: var(--rm-border);
}
.mgmn-mobile-inline .mgmn-mobile-block-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
height: 46px;
padding: 0 14px;
background: transparent;
border: none;
cursor: pointer;
font-family: inherit;
text-align: left;
-webkit-tap-highlight-color: transparent;
transition: background-color 160ms ease;
}
.mgmn-mobile-inline .mgmn-mobile-block-header:hover {
background: rgba(244, 240, 232, 0.35);
}
.mgmn-mobile-inline .mgmn-mobile-block-header:focus-visible {
outline: none;
box-shadow: inset 0 0 0 2px rgba(200, 169, 106, 0.35);
}
.mgmn-mobile-inline .mgmn-mobile-block-title {
flex: 1;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--rm-text-muted);
font-weight: 600;
margin: 0;
}
.mgmn-mobile-inline .mgmn-mobile-block-list-wrapper {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 380ms cubic-bezier(0.22, 1, 0.36, 1);
}
.mgmn-mobile-inline .mgmn-mobile-block.mgmn-block-expanded > .mgmn-mobile-block-list-wrapper {
grid-template-rows: 1fr;
}
.mgmn-mobile-inline .mgmn-mobile-block-list {
min-height: 0;
max-height: none; /* перебивает legacy max-height: 0 из mobile-menu.css */
list-style: none;
margin: 0;
padding: 0 8px;
opacity: 0;
overflow: hidden;
transform: translateY(-4px);
transition:
opacity 200ms ease,
transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}
.mgmn-mobile-inline .mgmn-mobile-block.mgmn-block-expanded > .mgmn-mobile-block-list-wrapper > .mgmn-mobile-block-list {
opacity: 1;
transform: translateY(0);
}
.mgmn-mobile-inline .mgmn-mobile-block-list li {
margin: 0; /* ресет legacy margin-bottom: 14px */
padding: 0;
border: none;
}
.mgmn-mobile-inline .mgmn-mobile-block-list li:last-child {
margin-bottom: 0;
}
.mgmn-mobile-inline .mgmn-mobile-block-list a {
display: block; /* без flex — текст ведёт себя предсказуемо */
width: 100%;
padding: 8px 10px;
font-size: 14px;
line-height: 1.35;
color: #262626;
text-align: left;
text-decoration: none;
border: none;
border-radius: 8px;
transition: background-color 160ms ease, color 160ms ease;
}
.mgmn-mobile-inline .mgmn-mobile-block-list a:hover {
background: var(--rm-hover);
color: #111;
}
.mgmn-mobile-inline .mgmn-mobile-block-list a:active {
background: var(--rm-hover);
opacity: 0.85;
}
.mgmn-mobile-inline .mgmn-mobile-block-list a:focus-visible {
outline: none;
box-shadow: inset 0 0 0 2px rgba(200, 169, 106, 0.45);
}
/* ===================== Footer-секция: «Бренды/Производство/HoReCa/Новинки» ===================== */
.mgmn-mobile-inline .mgmn-mobile-menu-footer {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid var(--rm-divider);
background: transparent;
}
/* Reset для плоских и expandable вариантов */
.mgmn-mobile-inline .mgmn-mobile-menu-footer a {
border-bottom: none;
padding: 0;
}
/* Карточка-строка (плоская ссылка без подменю) */
.mgmn-mobile-inline .mgmn-mobile-menu-footer > a.mgmn-mobile-footer-link {
display: flex;
align-items: center;
min-height: 50px;
padding: 0 14px;
background: var(--rm-surface);
border: 1px solid var(--rm-border);
border-radius: 12px;
color: var(--rm-text);
font-size: 15px;
font-weight: 500;
text-decoration: none;
transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.mgmn-mobile-inline .mgmn-mobile-menu-footer > a.mgmn-mobile-footer-link:hover {
background: var(--rm-hover);
border-color: var(--rm-champagne);
}
.mgmn-mobile-inline .mgmn-mobile-menu-footer > a.mgmn-mobile-footer-link:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(200, 169, 106, 0.25);
}
/* Expandable item с подменю */
.mgmn-mobile-inline .mgmn-mobile-menu-footer .mgmn-mobile-footer-item {
background: var(--rm-surface);
border: 1px solid var(--rm-border);
border-radius: 12px;
overflow: hidden;
transition: border-color 200ms ease;
}
.mgmn-mobile-inline .mgmn-mobile-menu-footer .mgmn-mobile-footer-item.mgmn-footer-expanded {
border-color: rgba(200, 169, 106, 0.45);
}
.mgmn-mobile-inline .mgmn-mobile-menu-footer .mgmn-mobile-footer-row {
display: flex;
align-items: stretch;
min-height: 50px;
}
.mgmn-mobile-inline .mgmn-mobile-menu-footer .mgmn-mobile-footer-row > a,
.mgmn-mobile-inline .mgmn-mobile-menu-footer .mgmn-mobile-footer-row > span {
flex: 1;
display: flex;
align-items: center;
padding: 0 14px;
font-size: 15px;
font-weight: 500;
color: var(--rm-text);
text-decoration: none;
border-bottom: none;
}
.mgmn-mobile-inline .mgmn-mobile-menu-footer .mgmn-mobile-footer-row > a:hover {
background: var(--rm-hover);
}
.mgmn-mobile-inline .mgmn-mobile-menu-footer .mgmn-mobile-footer-row > a:focus-visible {
outline: none;
background: rgba(255, 213, 30, 0.06);
}
.mgmn-mobile-inline .mgmn-mobile-menu-footer .mgmn-mobile-footer-toggle {
flex-shrink: 0;
width: 46px;
height: auto;
border: none;
background-color: transparent;
background-image: url("data:image/svg+xml;utf8,");
background-size: 14px 14px;
cursor: pointer;
opacity: 0.55;
}
.mgmn-mobile-inline .mgmn-mobile-menu-footer .mgmn-mobile-footer-toggle:focus-visible {
outline: none;
opacity: 1;
background-color: rgba(255, 213, 30, 0.1);
}
.mgmn-mobile-inline .mgmn-mobile-menu-footer .mgmn-mobile-footer-children {
list-style: none;
margin: 0;
padding: 0;
max-height: 0;
overflow: hidden;
transition: max-height 240ms ease;
background: var(--rm-surface-soft);
border-top: 1px solid rgba(228, 222, 213, 0.6);
}
.mgmn-mobile-inline .mgmn-mobile-menu-footer .mgmn-mobile-footer-item.mgmn-footer-expanded > .mgmn-mobile-footer-children {
padding: 6px 10px 10px;
}
.mgmn-mobile-inline .mgmn-mobile-menu-footer .mgmn-mobile-footer-children li {
margin: 0;
padding: 0;
}
.mgmn-mobile-inline .mgmn-mobile-menu-footer .mgmn-mobile-footer-children a {
display: flex;
align-items: center;
min-height: 36px;
padding: 8px 10px;
font-size: 14px;
font-weight: 400;
color: #2a2a2a;
text-decoration: none;
border-radius: 8px;
border-bottom: none;
transition: background-color 160ms ease;
}
.mgmn-mobile-inline .mgmn-mobile-menu-footer .mgmn-mobile-footer-children a:hover {
background: var(--rm-hover);
}
.mgmn-mobile-inline .mgmn-mobile-menu-footer .mgmn-mobile-footer-children a:focus-visible {
outline: none;
background: rgba(200, 169, 106, 0.12);
}
/* Длинный список (Бренды) — scroll внутри блока */
.mgmn-mobile-inline .mgmn-mobile-menu-footer .mgmn-mobile-footer-item.mgmn-footer-expanded > .mgmn-mobile-footer-children {
max-height: 55vh !important;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(200, 169, 106, 0.4) transparent;
position: relative;
mask-image: linear-gradient(180deg, #000 0%, #000 calc(100% - 22px), transparent 100%);
-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 calc(100% - 22px), transparent 100%);
}
.mgmn-mobile-inline .mgmn-mobile-menu-footer .mgmn-mobile-footer-children::-webkit-scrollbar {
width: 4px;
}
.mgmn-mobile-inline .mgmn-mobile-menu-footer .mgmn-mobile-footer-children::-webkit-scrollbar-thumb {
background: rgba(200, 169, 106, 0.35);
border-radius: 4px;
}
.mgmn-mobile-inline .mgmn-mobile-menu-footer .mgmn-mobile-footer-children::-webkit-scrollbar-track {
background: transparent;
}
/* ===================== Акценты футер-ссылок ===================== */
.mgmn-mobile-inline .mgmn-mobile-menu-footer .mgmn-mobile-footer-link--first,
.mgmn-mobile-inline .mgmn-mobile-menu-footer .mgmn-mobile-footer-link--available {
display: none !important;
}
.mgmn-mobile-inline .mgmn-mobile-menu-footer .mgmn-mobile-footer-row > a.mgmn-mobile-footer-link--sale,
.mgmn-mobile-inline .mgmn-mobile-menu-footer .mgmn-mobile-footer-row > span.mgmn-mobile-footer-link--sale,
.mgmn-mobile-inline .mgmn-mobile-menu-footer > a.mgmn-mobile-footer-link--sale {
color: var(--rm-sale);
font-weight: 700;
letter-spacing: 0.01em;
}
.mgmn-mobile-inline .mgmn-mobile-menu-footer .mgmn-mobile-footer-row > a.mgmn-mobile-footer-link--new,
.mgmn-mobile-inline .mgmn-mobile-menu-footer .mgmn-mobile-footer-row > span.mgmn-mobile-footer-link--new,
.mgmn-mobile-inline .mgmn-mobile-menu-footer > a.mgmn-mobile-footer-link--new {
color: var(--rm-new);
font-weight: 600;
}
.mgmn-mobile-inline .mgmn-mobile-menu-footer .mgmn-mobile-footer-row > a.mgmn-mobile-footer-link--offers,
.mgmn-mobile-inline .mgmn-mobile-menu-footer .mgmn-mobile-footer-row > span.mgmn-mobile-footer-link--offers,
.mgmn-mobile-inline .mgmn-mobile-menu-footer > a.mgmn-mobile-footer-link--offers {
color: var(--rm-text-muted);
}
/* ===================== CTA «Отправить запрос на подбор» ===================== */
.mobile_menu_wrapper a.podbor.selection_form {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
position: relative;
width: 100%;
min-height: 52px;
margin: 18px 0 4px;
padding: 0 18px;
border-radius: 14px;
background: linear-gradient(135deg, var(--rm-yellow) 0%, var(--rm-yellow-dark) 100%);
color: #111;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.01em;
text-decoration: none;
text-align: center;
box-shadow: 0 8px 20px rgba(255, 213, 30, 0.22);
transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}
.mobile_menu_wrapper a.podbor.selection_form span {
position: relative;
z-index: 1;
}
.mobile_menu_wrapper a.podbor.selection_form::after {
content: "";
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml;utf8,");
background-size: 14px 14px;
background-repeat: no-repeat;
background-position: center;
flex-shrink: 0;
}
.mobile_menu_wrapper a.podbor.selection_form:hover {
filter: brightness(0.98);
box-shadow: 0 10px 24px rgba(255, 213, 30, 0.28);
}
.mobile_menu_wrapper a.podbor.selection_form:active {
transform: translateY(1px);
box-shadow: 0 5px 14px rgba(255, 213, 30, 0.18);
}
.mobile_menu_wrapper a.podbor.selection_form:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(200, 169, 106, 0.35), 0 8px 20px rgba(255, 213, 30, 0.22);
}
/* ===================== Контакты / Филиалы / Информация ===================== */
.mobile_menu_wrapper .mobile_menu_title {
margin: 18px 0 8px;
padding-top: 14px;
border-top: 1px solid var(--rm-divider);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
color: var(--rm-text-muted);
text-align: left;
}
/* «КОНТАКТЫ» + мессенджеры в одной строке */
.mobile_menu_wrapper .rm-contacts-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.mobile_menu_wrapper .rm-contacts-head .mobile_menu_title {
flex: 0 0 auto;
margin-bottom: 0;
/* padding-top + border-top остаются — они задают верхний divider */
}
/* Иконки выровнены по уровню заголовка, divider не мешает */
.mobile_menu_wrapper .rm-contacts-head ul.contacts {
flex: 0 0 auto;
margin: 0;
padding-top: 14px;
gap: 6px;
}
.mobile_menu_wrapper .rm-contacts-head ul.contacts li a {
width: 32px;
height: 32px;
}
.mobile_menu_wrapper .rm-contacts-head ul.contacts li a i {
font-size: 13px;
}
/* Карточка-блок «Контакты»: телефон + callback в одну строку */
.mobile_menu_wrapper .phone {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
margin: 0;
padding: 12px 14px;
background: var(--rm-surface);
border: 1px solid var(--rm-border);
border-radius: 12px;
}
.mobile_menu_wrapper .phone a.number {
margin: 0;
display: inline-block;
font-size: 17px;
font-weight: 700;
color: #111;
text-decoration: none;
letter-spacing: 0.01em;
white-space: nowrap;
}
.mobile_menu_wrapper .phone a.callback,
.mobile_menu_wrapper .phone a.callback_action {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
padding: 8px 12px;
border-radius: 10px;
border: 1px solid var(--rm-border-strong);
background: var(--rm-bg);
font-size: 12px;
font-weight: 500;
color: var(--rm-text);
text-decoration: none;
white-space: nowrap;
transition: background-color 160ms ease, border-color 160ms ease;
}
.mobile_menu_wrapper .phone a.callback:hover,
.mobile_menu_wrapper .phone a.callback_action:hover {
background: var(--rm-tint-yellow);
border-color: var(--rm-yellow);
}
/* Шоурум — компактнее */
.mobile_menu_wrapper a.show_room {
display: flex;
flex-direction: column;
gap: 1px;
margin-top: 8px;
padding: 10px 14px;
background: var(--rm-surface);
border: 1px solid var(--rm-border);
border-radius: 12px;
color: var(--rm-text);
text-decoration: none;
transition: border-color 160ms ease;
}
.mobile_menu_wrapper a.show_room:hover {
border-color: var(--rm-champagne);
}
.mobile_menu_wrapper a.show_room .strong {
font-size: 13px;
font-weight: 700;
color: #111;
line-height: 1.3;
}
.mobile_menu_wrapper a.show_room em {
font-style: normal;
font-size: 11px;
color: var(--rm-text-muted);
line-height: 1.3;
}
/* Мессенджеры — компактные круглые кнопки в одну строку слева */
.mobile_menu_wrapper ul.contacts {
display: flex;
gap: 8px;
justify-content: flex-start;
margin: 10px 0 0;
padding: 0;
list-style: none;
text-align: left;
}
.mobile_menu_wrapper ul.contacts li {
margin: 0;
padding: 0;
list-style: none;
display: inline-flex;
}
.mobile_menu_wrapper ul.contacts li a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
line-height: 1;
border-radius: 50%;
background: var(--rm-surface);
border: 1px solid var(--rm-border);
color: var(--rm-text);
text-decoration: none;
transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 120ms ease;
}
.mobile_menu_wrapper ul.contacts li a:hover {
background: var(--rm-tint-yellow);
border-color: var(--rm-yellow);
color: #111;
}
.mobile_menu_wrapper ul.contacts li a:active {
transform: scale(0.95);
}
/* перебиваем legacy i { font-size: 36px; line-height: 48px; width: 48px } */
.mobile_menu_wrapper ul.contacts li a i {
display: inline-block;
width: auto;
line-height: 1;
font-size: 15px;
text-align: center;
}
/* Филиалы и информация — карточки в том же стиле, что категории меню.
CitiesLegacy возвращает ul.closestclick, а не старый ul.mobile_offices. */
.mobile_menu_wrapper .rm-mobile-section {
min-width: 0;
background: var(--rm-surface);
border: 1px solid var(--rm-border);
border-radius: 14px;
box-shadow: 0 4px 14px rgba(20, 20, 20, 0.04);
}
.mobile_menu_wrapper .rm-mobile-section .mobile_menu_title {
margin: 0;
padding: 16px 16px 12px;
border-top: 0;
border-bottom: 1px solid var(--rm-divider);
line-height: 1.4;
}
.mobile_menu_wrapper .rm-mobile-section ul {
display: flex;
flex-direction: column;
gap: 2px;
margin: 0;
padding: 6px;
list-style: none;
text-align: left;
}
.mobile_menu_wrapper .rm-mobile-section li {
margin: 0;
padding: 0;
list-style: none;
}
.mobile_menu_wrapper .rm-mobile-section li > a,
.mobile_menu_wrapper .rm-mobile-section li > span {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 46px;
padding: 10px;
border-radius: 10px;
font-size: 14px;
font-weight: 500;
line-height: 1.4;
color: var(--rm-text);
text-decoration: none;
overflow-wrap: anywhere;
}
.mobile_menu_wrapper .rm-mobile-section li > a::after {
content: "›";
flex-shrink: 0;
font-size: 22px;
line-height: 1;
color: var(--rm-text-muted);
}
.mobile_menu_wrapper .rm-mobile-section li > a:hover {
background: var(--rm-hover);
}
.mobile_menu_wrapper .rm-mobile-section li.select > a,
.mobile_menu_wrapper .rm-mobile-section li.active > span {
background: var(--rm-tint-yellow);
font-weight: 600;
}
/* ===================== Глобальные мелочи ===================== */
.mobile_menu_wrapper *:focus { outline: none; } /* убираем синий браузерный outline */
.mobile_menu_wrapper a:focus-visible,
.mobile_menu_wrapper button:focus-visible {
outline: none;
box-shadow: 0 0 0 2px rgba(200, 169, 106, 0.45);
}
}
/* Контрольные точки ширины (320 / 360 / 390 / 430) */
@media (max-width: 359px) {
.mgmn-mobile-inline .mgmn-mobile-category-header {
min-height: 56px;
padding: 12px 14px;
gap: 10px;
}
.mgmn-mobile-inline .mgmn-mobile-category-icon {
width: 32px;
height: 32px;
padding: 6px;
}
.mgmn-mobile-inline .mgmn-mobile-category-title {
font-size: 14px;
}
.mobile_menu_wrapper .mobile_actions li a {
font-size: 12px;
}
}
/* One compact header on every mobile page; search lives in the menu. */
@media(max-width:1199px){
#header.rm-mobile-header{--rm-header-ink:#181818;--rm-header-filter:none;color:var(--rm-header-ink);background:rgba(225,216,201,.91);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
#header.rm-mobile-header .mobile_header{min-height:54px;padding:5px 0;background:transparent;border:0;box-shadow:none;color:var(--rm-header-ink)}
#header.rm-mobile-header .mobile_header .row{position:relative;justify-content:center}
#header.rm-mobile-header .mobile_header .row>.col-7{flex:0 0 auto;width:auto;max-width:none;z-index:1}
#header.rm-mobile-header .mobile_header .row>.col-5{position:absolute;inset:0;max-width:none;width:100%;pointer-events:none}
#header.rm-mobile-header .logo img{width:130px;height:auto;filter:var(--rm-header-filter)}
#header.rm-mobile-header .mobile_header_act{position:relative;height:44px;width:100%;pointer-events:none}
#header.rm-mobile-header .mobile_header_act>a,#header.rm-mobile-header .bx-basket{pointer-events:auto}
#header.rm-mobile-header .mobile_menu{position:absolute;left:0;top:0;background:transparent;box-shadow:none;color:var(--rm-header-ink);border:0;width:44px;height:44px}
#header.rm-mobile-header .mobile_menu i{color:inherit;width:44px;height:44px;line-height:44px}
#header.rm-mobile-header a.cart{background:none;box-shadow:none}
#header.rm-mobile-header a.cart:before{content:"";position:absolute;inset:10px;background:url('/bitrix/templates/Romatti_NEW/img/icons/cart.png') center/22px no-repeat;filter:var(--rm-header-filter)}
#header.rm-mobile-header a:focus-visible{outline:2px solid #9a7500;outline-offset:1px}
#header.rm-mobile-header.rm-floating-header{position:fixed;inset:0 0 auto;z-index:1800;transition:transform .24s ease,background .2s ease,box-shadow .2s ease;will-change:transform}
#header.rm-mobile-header.rm-header-scrolled{box-shadow:0 3px 18px #18181812}
#header.rm-mobile-header.hp-overlay-header:not(.rm-header-scrolled),#header.rm-mobile-header.rm-header-over-hero{--rm-header-ink:#fff;--rm-header-filter:brightness(0) invert(1);background:linear-gradient(#0008,transparent);-webkit-backdrop-filter:none;backdrop-filter:none}
#header.rm-mobile-header.rm-header-over-hero.rm-header-scrolled{background:rgba(25,27,25,.66);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
#header.rm-floating-header.rm-header-hidden{transform:translateY(-110%)}
body.mobile_menu_open #header.rm-floating-header,#header.rm-floating-header:has(:focus-visible){transform:none}
body.mobile_menu_open #header.rm-mobile-header.rm-floating-header{--rm-header-ink:#181818;--rm-header-filter:none;background:rgba(225,216,201,.97);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
#header.rm-mobile-header~.mobile_menu_wrapper{top:var(--rm-header-height,54px);height:calc(100dvh - var(--rm-header-height,54px));overflow-y:auto;overscroll-behavior:contain}
.rm-mobile-search{margin:0 0 22px;position:relative;z-index:2}
.rm-mobile-search form.search{position:relative;display:flex;align-items:center;margin:0;height:50px;background:#fff;border:1px solid #d4cbbc;border-radius:14px}
.rm-mobile-search form.search:focus-within{outline:2px solid #c3ab77;outline-offset:2px}
.rm-mobile-search input[name=q]{display:block;min-width:0;width:100%;height:48px;padding:0 56px 0 16px;font-size:16px;line-height:48px;border:0;border-radius:14px;background:transparent;color:#181818;outline:none}
.rm-mobile-search .act{position:absolute;inset:0 0 0 auto;display:flex;list-style:none;margin:0;padding:0}
.rm-mobile-search .act li{display:flex;margin:0;padding:0}
.rm-mobile-search button{display:grid;place-items:center;width:48px;height:48px;border:0;background:transparent;color:#181818;font-size:21px;cursor:pointer}
.rm-mobile-search .search_overlay{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:3;background:#fff;border:1px solid #ded8cf;border-radius:12px;box-shadow:0 12px 30px #18181826;text-align:left}
}
@media(min-width:1200px){.rm-header-spacer{display:none}}
@media(prefers-reduced-motion:reduce){#header.rm-floating-header{transition:none!important}}
/* Viewport, rather than user agent, selects the shared navigation. */
@media(max-width:1199px){#header>.rm-desktop-header{display:none}}
@media(min-width:1200px){#header>.mobile_header,.mobile_menu_wrapper{display:none!important}}